/* =============================================================================
   Ambikly marketing theme — design system
   Flat orange (#F97316), no gradients. One file, CSS custom properties,
   mobile-first. Scoped where it matters (.ambikly-page for prose), global
   for chrome (header/footer sit outside <main>).
   ============================================================================= */

/* Fonts are enqueued as their own <link> in functions.php (parallel
   fetch + preconnect) rather than @import-ed here, which would block
   this stylesheet's parse until the font CSS round-trips. */

:root {
	--ak-primary:       #F97316;
	--ak-primary-hover: #EA580C;
	--ak-primary-soft:  #FFEDD5;
	--ak-primary-50:    #FFF7ED;
	/* Brand decision: the logo orange is the one action colour everywhere.
	   White on #F97316 is ~2.8:1, so button labels stay large and bold; orange
	   as small text uses the 600 step (#EA580C) rather than the red-leaning 700. */
	--ak-action:        #F97316;   /* logo orange — used for every fill */
	--ak-action-hover:  #EA580C;
	--ak-primary-text: #C2410C; /* 4.9:1 on white for text; #F97316 stays for fills */   /* orange as text: one step deeper so it stays orange, not red */

	--ak-bg:            #FFFFFF;
	--ak-bg-alt:        #FAFAF7;
	--ak-bg-deep:       #1C1917;
	--ak-border:        #E7E5E0;
	--ak-border-strong: #D6D3D1;

	--ak-text:          #1C1917;
	--ak-text-muted:    #57534E;
	--ak-text-soft:     #6B655F;   /* 5.6:1 */
	--ak-text-dim:      #7A756F;   /* 4.6:1 — was #A8A29E at 2.5:1, failed AA everywhere it was used */

	--ak-success:       #16A34A;
	--ak-success-text:  #15803D;   /* green as *text* on white / green-50 */
	--ak-success-soft:  #DCFCE7;
	--ak-danger:        #DC2626;

	--ak-r-sm:  6px;
	--ak-r:     10px;
	--ak-r-lg:  16px;
	--ak-r-xl:  24px;
	--ak-r-full: 999px;

	--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 28px -10px rgba(249,115,22,.4);

	--ak-font:      'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
	--ak-font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

	--ak-container: 1160px;
	--ak-ease: cubic-bezier(.22,.61,.36,1);
}

/* ── Reset / base ────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body {
	margin: 0;
	font-family: var(--ak-font);
	color: var(--ak-text);
	background: var(--ak-bg);
	line-height: 1.6;
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--ak-primary-text); text-decoration: none; transition: color .15s var(--ak-ease); }
a:hover { color: var(--ak-action-hover); }
a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--ak-action); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3, h4 { font-family: var(--ak-font); font-weight: 700; line-height: 1.15; letter-spacing: -.02em; margin: 0 0 .5em; color: var(--ak-text); }
h1 { font-size: clamp(2.25rem, 3.5vw + 1rem, 3.75rem); font-weight: 800; letter-spacing: -.03em; }
h2 { font-size: clamp(1.75rem, 2vw + 1rem, 2.5rem); }
h3 { font-size: 1.25rem; }
p { margin: 0 0 1rem; }
.lead { font-size: clamp(1.05rem, .5vw + 1rem, 1.2rem); color: var(--ak-text-muted); }
code { font-family: var(--ak-font-mono); background: var(--ak-bg-alt); border: 1px solid var(--ak-border); border-radius: 6px; padding: 2px 6px; font-size: .88em; }
ul, ol { padding-left: 1.3em; }

.skip-link { position: absolute; top: -999px; left: 8px; z-index: 999; background: var(--ak-action); color: #fff; padding: 8px 16px; border-radius: 0 0 8px 8px; font-weight: 600; }
.skip-link:focus { top: 0; }

/* ── Layout primitives ───────────────────────────────────────────────────── */
.ak-container { width: 100%; max-width: var(--ak-container); margin: 0 auto; padding: 0 24px; }
.ak-section { padding: clamp(64px, 8vw, 112px) 0; }
.ak-section--alt { background: var(--ak-bg-alt); }
.ak-section--tight { padding: clamp(40px, 5vw, 64px) 0; }
.ak-section-head { max-width: 700px; margin: 0 auto 48px; text-align: center; }
.ak-section-head--left { margin: 0 0 40px; 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-text);
	font-size: 12.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
	margin-bottom: 18px;
}
.ak-eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ak-success); }

.ak-grid { display: grid; gap: 24px; grid-template-columns: 1fr; }
.ak-grid > * { min-width: 0; }
.ak-grid--2 { }
.ak-grid--3 { }
.ak-grid--4 { }
@media (min-width: 640px) {
	.ak-grid--2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
	.ak-grid--4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (min-width: 900px) {
	.ak-grid--3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
	.ak-grid--4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
}

/* ── Buttons — fully-rounded pills ──────────────────────────────────────── */
.ak-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	padding: 13px 24px; border-radius: var(--ak-r-full);
	font-weight: 600; font-size: 15px; border: 1px solid transparent; cursor: pointer;
	transition: transform .15s var(--ak-ease), background .15s var(--ak-ease), box-shadow .15s var(--ak-ease);
	white-space: nowrap;
}
.ak-btn--sm { padding: 10px 18px; font-size: 14px; }
.ak-btn--lg { padding: 15px 30px; font-size: 16px; }
.ak-btn .ak-icon { flex-shrink: 0; }
.ak-btn--sm .ak-icon { width: 14px; height: 14px; }
.ak-btn--primary:hover .ak-icon:last-child { transform: translateX(2px); }
.ak-btn .ak-icon { transition: transform .15s var(--ak-ease); }
.ak-btn--primary { background: var(--ak-action); color: #fff; box-shadow: var(--ak-shadow-brand); }
.ak-btn--primary:hover { background: var(--ak-action-hover); color: #fff; transform: translateY(-1px); }
.ak-btn--ghost { background: var(--ak-bg); color: var(--ak-text); border-color: var(--ak-border-strong); }
.ak-btn--ghost:hover { background: var(--ak-bg-alt); color: var(--ak-text); }
.ak-btn--dark { background: var(--ak-bg-deep); color: #fff; }
.ak-btn--dark:hover { background: #000; color: #fff; }
.ak-btn--outline-invert { background: transparent; color: #fff; border-color: rgba(255,255,255,.28); }
.ak-btn--outline-invert:hover { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.5); }
.ak-btn-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }

/* ── Header ──────────────────────────────────────────────────────────────── */
/* Sticky always; on a hero page it also starts transparent and rides
   over the hero's dark background so the hero fills the viewport from
   y=0 instead of being pushed down by an opaque bar. JS adds
   .is-scrolled once the page scrolls past the hero, at which point it
   matches the plain solid-header look every other page always has. */
.ak-header { position: sticky; top: 0; left: 0; right: 0; z-index: 200; background: #fff; border-bottom: 1px solid var(--ak-border); transition: box-shadow .2s var(--ak-ease); }
.ak-header.is-scrolled { box-shadow: 0 8px 24px -14px rgba(28,25,23,.22); }
.ak-header-brand .ambikly-logo { width: auto; }
/* A logged-in admin/editor viewing the front end gets WP's own
   #wpadminbar fixed at the very top (32px, 46px under 783px) — offset
   both the sticky and the fixed (hero-page) header states by the same
   amount or the two bars stack on top of each other. */
body.admin-bar .ak-header { top: 32px; }
@media (max-width: 782px) { body.admin-bar .ak-header { top: 46px; } }
/* On a hero page the header is taken out of flow (fixed, not sticky)
   so it reserves no height and the hero's own background reaches
   y=0 underneath it, instead of the header's box pushing the hero
   down by its own height the way a sticky element always would. */
.js body.has-hero .ak-header { position: fixed; background: transparent; backdrop-filter: none; border-bottom-color: transparent; }
.js body.has-hero .ak-header.is-menu-open { background: #fff; border-bottom-color: var(--ak-border); }
.js body.has-hero .ak-header.is-scrolled { background: #fff; border-bottom-color: var(--ak-border); box-shadow: 0 8px 24px -14px rgba(28,25,23,.22); }
/* .has-hero is added server-side via body_class (functions.php), so the
   very first paint is already the fixed/transparent state — no layout
   jump when JS arrives. Without JS the header simply stays transparent
   over the hero and solid white below it via the is-scrolled toggle. */
.ak-header-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 14px 24px; }
.ak-header-brand { display: inline-flex; align-items: center; text-decoration: none; flex-shrink: 0; color: var(--ak-text); transition: color .25s ease; }
.js body.has-hero .ak-header:not(.is-scrolled):not(.is-menu-open) .ak-header-brand { color: #fff; }
/* The lockup is a single SVG; height sets the whole logo, width follows
   the viewBox. currentColor drives the wordmark so it inverts on ink. */
.ambikly-logo { display: block; height: 40px; width: auto; }
.ak-footer-brand .ambikly-logo { height: 40px; }
@media (max-width: 480px) { .ambikly-logo { height: 34px; } }
.ak-header-nav ul { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; }
.ak-header-nav a { color: var(--ak-text-muted); font-weight: 600; font-size: 14.5px; padding: 7px 12px; border-radius: 8px; transition: color .25s ease, background .25s ease; }
.ak-header-nav a:hover { background: var(--ak-primary-50); color: var(--ak-primary-text); }
.ak-header-nav a[aria-current="page"] { color: var(--ak-primary-text); }
.js body.has-hero .ak-header:not(.is-scrolled):not(.is-menu-open) .ak-header-nav a { color: rgba(255,255,255,.82); }
.js body.has-hero .ak-header:not(.is-scrolled):not(.is-menu-open) .ak-header-nav a:hover { background: rgba(255,255,255,.12); color: #fff; }
.js body.has-hero .ak-header:not(.is-scrolled):not(.is-menu-open) .ak-header-nav a[aria-current="page"] { color: #fff; }
.ak-header-actions { flex-shrink: 0; }
.ak-nav-toggle { display: none; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; background: transparent; border: 1px solid var(--ak-border); border-radius: 10px; padding: 0; cursor: pointer; color: var(--ak-text); transition: color .25s ease, border-color .25s ease; }
.ak-nav-toggle:hover { background: var(--ak-primary-50); border-color: var(--ak-action); }
.js body.has-hero .ak-header:not(.is-scrolled):not(.is-menu-open) .ak-nav-toggle { color: #fff; border-color: rgba(255,255,255,.35); }
.js body.has-hero .ak-header:not(.is-scrolled):not(.is-menu-open) .ak-nav-toggle:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.6); }

.ak-mobile-nav { background: #fff; border-top: 1px solid var(--ak-border); padding: 8px 24px 20px; }
.ak-mobile-nav ul { list-style: none; margin: 0; padding: 0; }
.ak-mobile-nav a { display: block; font-size: 16px; font-weight: 600; color: var(--ak-text); padding: 12px 4px; border-bottom: 1px solid var(--ak-bg-alt); }
.ak-mobile-nav .ak-btn { display: flex; margin-top: 16px; }

@media (max-width: 1023px) { /* six nav items + CTA need ~1000px; below that, the sheet */
	.ak-header-nav, .ak-header-actions { display: none; }
	.ak-nav-toggle { display: inline-flex; }
}

/* ── Footer ──────────────────────────────────────────────────────────────── */
.ak-footer { border-top: 1px solid var(--ak-border); background: var(--ak-bg); }
.ak-footer-grid { display: grid; gap: 40px; padding: 64px 0 40px; grid-template-columns: 1fr; }
.ak-footer-brand p { color: var(--ak-text-soft); font-size: 14px; margin: 14px 0 16px; max-width: 32ch; }
.ak-footer-badges { display: flex; gap: 6px; flex-wrap: wrap; }
.ak-badge { display: inline-block; padding: 4px 10px; border-radius: var(--ak-r-full); font-size: 12px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; background: var(--ak-bg-alt); color: var(--ak-text-soft); border: 1px solid var(--ak-border); }
.ak-badge--success { background: var(--ak-success-soft); color: var(--ak-success-text); border-color: #BBF7D0; }
.ak-footer-col h3 { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ak-text-soft); margin: 0 0 16px; }
.ak-footer-col ul { list-style: none; margin: 0; padding: 0; }
.ak-footer-col li { margin-bottom: 2px; }
.ak-footer-col a { display: inline-block; padding: 4px 0; color: var(--ak-text-muted); font-size: 14px; font-weight: 500; } /* 26px target */
.ak-footer-col a:hover { color: var(--ak-primary-text); }
.ak-footer-bar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; padding: 20px 0; border-top: 1px solid var(--ak-border); }
.ak-footer-bar p { margin: 0; font-size: 13px; color: var(--ak-text-dim); }
@media (min-width: 640px) { .ak-footer-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } .ak-footer-brand { grid-column: 1 / -1; } }
@media (min-width: 1024px) { .ak-footer-grid { grid-template-columns: 1.5fr repeat(4, minmax(0,1fr)); gap: 32px; } .ak-footer-brand { grid-column: auto; } }

/* ── Hero — dark, centered, glow ────────────────────────────────────────── */
.ak-hero {
	position: relative; overflow: hidden;
	/* Near-neutral ink, not the warm stone black: orange over a warm
	   black mixes to brown, which is what made the old glow look muddy. */
	background: #0F0F11; color: #fff;
	/* No top border: the header now floats transparently over this
	   section (see .ak-header's body.has-hero rules), so a seam line
	   here would cut visibly across the nav instead of sitting at a
	   page edge. */
	padding: clamp(112px, 14vw, 160px) 0 clamp(56px, 8vw, 96px);
}
/* Depth comes from a faint grid, masked to fade out, plus one tight
   glow anchored ABOVE the top edge — light spilling in, not a blob
   sitting in the middle of the section. */
.ak-hero-glow {
	position: absolute; inset: 0; pointer-events: none;
	background:
		radial-gradient(ellipse 55% 42% at 50% -12%, rgba(249,115,22,.28), transparent 70%),
		linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
	background-size: auto, 48px 48px, 48px 48px;
	-webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 30%, #000 40%, transparent 100%);
	mask-image: radial-gradient(ellipse 80% 70% at 50% 30%, #000 40%, transparent 100%);
}
.ak-hero-center { position: relative; max-width: 760px; margin: 0 auto; text-align: center; }
.ak-hero-badge {
	display: inline-flex; align-items: center; gap: 8px;
	background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16);
	color: #fff; padding: 7px 16px 7px 8px; border-radius: var(--ak-r-full);
	font-size: 13px; font-weight: 600; margin-bottom: 26px;
}
.ak-hero-badge .dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--ak-primary); }
.ak-hero h1 { color: #fff; max-width: 24ch; margin: 0 auto .5em; text-wrap: balance; }
.ak-hero .lead { color: rgba(255,255,255,.68); max-width: 52ch; margin: 0 auto 32px; }
.ak-hero-meta { margin-top: 28px; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 26px; font-size: 13.5px; color: rgba(255,255,255,.6); }
.ak-hero-meta span { display: inline-flex; align-items: center; gap: 7px; }
.ak-hero-meta .ak-icon { color: var(--ak-success); flex-shrink: 0; }
.ak-hero-meta strong { color: #fff; }

/* Hero visual: a light app window floating on the ink, with two toast
   cards overhanging its edges. The frame is only a positioning context
   (overflow visible) so the toasts can break the window's bounds; the
   window itself does the rounded clipping. */
.ak-hero-frame { position: relative; max-width: 920px; margin: 60px auto 0; }
.ak-hero-window {
	border-radius: var(--ak-r-xl); overflow: hidden;
	background: var(--ak-bg); border: 1px solid rgba(255,255,255,.14);
	box-shadow: 0 50px 100px -30px rgba(0,0,0,.7), 0 0 0 1px rgba(0,0,0,.4);
}
.ak-hero-frame-bar { display: flex; align-items: center; gap: 7px; padding: 12px 16px; background: #F4F3EF; border-bottom: 1px solid var(--ak-border); }
.ak-hero-frame-bar span { width: 10px; height: 10px; border-radius: 50%; background: #D6D3D1; }
.ak-hero-frame-bar code { margin-left: 12px; flex: 1; text-align: center; background: #fff; border: 1px solid var(--ak-border); border-radius: var(--ak-r-full); padding: 4px 14px; font-size: 11.5px; color: var(--ak-text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ak-hero-frame-body { background: var(--ak-bg); text-align: left; color: var(--ak-text); }

.ak-dash { display: grid; grid-template-columns: 56px minmax(0,1fr); min-height: 380px; }
.ak-dash-rail { background: #1C1917; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 0; }
.ak-dash-rail-logo { margin-bottom: 10px; } /* self-coloured tile mark */
.ak-dash-rail span:not(.ak-dash-rail-logo) { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 9px; color: rgba(255,255,255,.45); }
.ak-dash-rail span.is-active { background: rgba(249,115,22,.18); color: var(--ak-primary); }
.ak-dash-main { padding: 16px 20px 20px; display: grid; gap: 14px; align-content: start; min-width: 0; }
.ak-dash-top { display: flex; align-items: center; gap: 12px; font-size: 13px; }
.ak-dash-crumb { font-weight: 600; color: var(--ak-text); white-space: nowrap; }
.ak-dash-crumb i { font-style: normal; color: var(--ak-text-dim); margin: 0 4px; }
.ak-dash-search { flex: 1; display: inline-flex; align-items: center; gap: 7px; background: var(--ak-bg-alt); border: 1px solid var(--ak-border); border-radius: var(--ak-r-full); padding: 6px 12px; color: var(--ak-text-soft); font-size: 12.5px; min-width: 0; overflow: hidden; white-space: nowrap; }
.ak-dash-avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--ak-primary); color: var(--ak-text); font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ak-dash-kpis { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; }
.ak-dash-kpis > div { border: 1px solid var(--ak-border); border-radius: var(--ak-r); padding: 12px 14px; display: grid; gap: 3px; min-width: 0; }
.ak-dash-kpis .lbl { font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--ak-text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ak-dash-kpis .val { font-size: 1.25rem; font-weight: 800; letter-spacing: -.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ak-dash-kpis .delta { font-size: 11.5px; font-weight: 700; color: var(--ak-success-text); }
.ak-dash-chart, .ak-dash-orders { border: 1px solid var(--ak-border); border-radius: var(--ak-r); padding: 14px; }
.ak-dash-chart-head { display: flex; justify-content: space-between; align-items: center; font-size: 12.5px; font-weight: 600; margin-bottom: 12px; }
.ak-dash-chart-head .ak-pill { margin: 0; }
.ak-dash-link { color: var(--ak-primary-text); font-weight: 600; font-size: 12px; }
.ak-dash-bars { display: grid; grid-template-columns: repeat(14, minmax(0,1fr)); gap: 6px; align-items: end; height: 92px; }
.ak-dash-bars i { display: block; height: var(--h); border-radius: 4px 4px 2px 2px; background: var(--ak-primary-soft); background: linear-gradient(to top, #FDBA74, #F97316); opacity: .55; }
.ak-dash-bars i:nth-child(n+11) { opacity: .8; }
.ak-dash-bars i.is-peak { opacity: 1; box-shadow: 0 6px 14px -6px rgba(249,115,22,.7); }
.ak-dash-order { display: grid; grid-template-columns: 30px minmax(0,1fr) auto auto; gap: 12px; align-items: center; padding: 9px 0; border-top: 1px solid var(--ak-border); font-size: 13px; }
.ak-dash-init { width: 30px; height: 30px; border-radius: 50%; background: var(--ak-primary-50); color: var(--ak-primary-text); font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.ak-dash-order .nm { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ak-dash-order .nm small { display: block; font-weight: 500; font-size: 11.5px; color: var(--ak-text-dim); }
.ak-dash-order .amt { font-weight: 700; }
.ak-badge--warn { background: #FEF3C7; color: #B45309; border-color: #FDE68A; }

/* Toasts — overhang the window for depth. Hidden on phones, where they'd
   have nowhere to overhang to. */
.ak-toast {
	position: absolute; display: flex; align-items: center; gap: 12px;
	background: #fff; color: var(--ak-text); border: 1px solid var(--ak-border);
	border-radius: var(--ak-r-lg); padding: 12px 16px 12px 12px;
	box-shadow: 0 24px 50px -16px rgba(0,0,0,.55);
	font-size: 13px; line-height: 1.25; white-space: nowrap;
}
.ak-toast strong { display: block; font-weight: 700; }
.ak-toast small { display: block; font-size: 11.5px; color: var(--ak-text-dim); margin-top: 2px; }
.ak-toast-icon { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: var(--ak-primary-50); color: var(--ak-primary-text); flex-shrink: 0; }
.ak-toast-icon--ok { background: var(--ak-success-soft); color: var(--ak-success); }
/* Overhang generously so the cards read as floating above the window
   rather than covering its content (the rail and margins are low-info;
   the breadcrumb and order amounts are not). */
.ak-toast--a { top: 128px; left: -150px; animation: ak-float 7s ease-in-out infinite; }
.ak-toast--b { bottom: -26px; right: -64px; animation: ak-float 7s ease-in-out 1.6s infinite; }
@media (max-width: 1240px) { .ak-toast--a { display: none; } .ak-toast--b { right: -24px; } } /* A would sit on the rail; B alone carries the idea */
@keyframes ak-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@media (max-width: 760px) {
	.ak-toast { display: none; }
	.ak-dash { grid-template-columns: 1fr; }
	.ak-dash-rail { flex-direction: row; justify-content: center; padding: 10px; }
	.ak-dash-rail-logo { margin: 0 8px 0 0; }
	.ak-dash-search { display: none; }
	.ak-dash-kpis { gap: 8px; }
	.ak-dash-kpis > div { padding: 10px; }
	.ak-dash-kpis .val { font-size: 1rem; }
	.ak-hero-frame-bar code { display: none; }
}
@media (max-width: 480px) {
	.ak-dash-orders { display: none; }
	.ak-dash-kpis .lbl { font-size: 9.5px; }
}
@media (min-width: 640px) { .ak-hero-badge { font-size: 13.5px; } }

.ak-hero-visual-stats { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1px; background: var(--ak-border); border-radius: var(--ak-r-lg) var(--ak-r-lg) 0 0; overflow: hidden; }
.ak-hero-visual-stats > div { background: var(--ak-bg); padding: 20px 16px; display: flex; flex-direction: column; gap: 4px; min-width: 0; text-align: left; }
.ak-hero-visual-stats .lbl { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--ak-text-dim); }
.ak-hero-visual-stats .val { font-size: 1.2rem; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ak-text); }
.ak-hero-visual-row { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-top: 1px solid var(--ak-border); font-size: 13.5px; color: var(--ak-text-muted); text-align: left; background: var(--ak-bg); }
.ak-hero-visual-row:last-child { border-radius: 0 0 var(--ak-r-lg) var(--ak-r-lg); }

/* ── Trust strip ─────────────────────────────────────────────────────────── */
.ak-trust { padding: 28px 0; border-top: 1px solid var(--ak-border); border-bottom: 1px solid var(--ak-border); }
.ak-trust p { text-align: center; font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ak-text-dim); margin: 0 0 18px; }
.ak-trust-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.ak-trust-row span {
	display: inline-flex; align-items: center; gap: 8px;
	font-weight: 600; color: var(--ak-text-muted); font-size: 13.5px;
	padding: 8px 16px; border: 1px solid var(--ak-border); border-radius: var(--ak-r-full); background: var(--ak-bg);
}
.ak-trust-row span::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ak-success); }

/* ── Stats ───────────────────────────────────────────────────────────────── */
.ak-stats { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); border: 1px solid var(--ak-border); border-radius: var(--ak-r-lg); overflow: hidden; }
.ak-stat { padding: 26px 24px; border-right: 1px solid var(--ak-border); border-bottom: 1px solid var(--ak-border); }
.ak-stat:nth-child(2n) { border-right: none; }
.ak-stat .num { font-size: 2rem; font-weight: 800; color: var(--ak-text); letter-spacing: -.02em; }
.ak-stat .lbl { font-size: 13px; color: var(--ak-text-soft); margin-top: 4px; }
@media (min-width: 720px) {
	.ak-stats { grid-template-columns: repeat(4, minmax(0,1fr)); }
	.ak-stat { border-bottom: none; }
	.ak-stat:nth-child(2n) { border-right: 1px solid var(--ak-border); }
	.ak-stat:last-child { border-right: none; }
}

/* ── Cards ───────────────────────────────────────────────────────────────── */
.ak-icon-tile { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 13px; background: linear-gradient(135deg, #FB8A3C, #EA580C); color: #fff; box-shadow: 0 6px 14px -6px rgba(249,115,22,.55), inset 0 1px 0 rgba(255,255,255,.25); margin-bottom: 18px; flex-shrink: 0; }
.ak-card { display: flex; flex-direction: column; background: var(--ak-bg); border: 1px solid var(--ak-border); border-radius: 18px; padding: 26px 26px 24px; box-shadow: 0 1px 2px rgba(28,25,23,.04); transition: border-color .18s var(--ak-ease), transform .18s var(--ak-ease), box-shadow .18s var(--ak-ease); }
.ak-card-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.ak-card-head .ak-icon-tile { width: 42px; height: 42px; margin: 0; border-radius: 12px; }
.ak-card-head h3, .ak-addon-card .ak-card-head h3 { margin: 0; flex: 1; min-width: 0; }
.ak-card-head .ak-pill--cat { margin: 0; flex-shrink: 0; }
.ak-card h3 { font-size: 1.12rem; line-height: 1.3; margin: 0 0 8px; letter-spacing: -.012em; }
.ak-card p { color: var(--ak-text-muted); font-size: 14.5px; line-height: 1.6; margin: 0; }
.ak-card-more { display: flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--ak-border); font-size: 13.5px; font-weight: 600; color: var(--ak-primary-text); transition: color .18s var(--ak-ease), border-color .18s var(--ak-ease); }
.ak-card p, .ak-addon-card p { margin-bottom: 20px; }
.ak-card:hover .ak-card-more, .ak-addon-card:hover .ak-card-more { border-top-color: rgba(249,115,22,.35); }
.ak-card-more svg { transition: transform .18s var(--ak-ease); }
.ak-card:hover .ak-card-more, .ak-link-card:hover .ak-card-more { color: var(--ak-primary-text); }
.ak-card:hover .ak-card-more svg, .ak-link-card:hover .ak-card-more svg { transform: translateX(3px); }

/* ── Pricing ─────────────────────────────────────────────────────────────── */
.ak-pricing { display: grid; gap: 20px; grid-template-columns: 1fr; align-items: stretch; margin-top: 8px; }
.ak-pricing > * { min-width: 0; }
.ak-plan {
	position: relative; display: flex; flex-direction: column;
	border: 1px solid var(--ak-border); border-radius: var(--ak-r-xl);
	padding: 32px 28px 24px; background: var(--ak-bg);
}
.ak-plan-badge {
	position: absolute; top: -14px; left: 28px; display: inline-flex; align-items: center; gap: 6px;
	background: var(--ak-action); color: var(--ak-text); font-size: 11.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
	padding: 6px 12px; border-radius: var(--ak-r-full); box-shadow: var(--ak-shadow-brand);
}
.ak-plan-head h3 { font-size: 1.15rem; margin: 0 0 6px; }
.ak-plan-tagline { color: var(--ak-text-soft); font-size: 14px; line-height: 1.5; margin: 0 0 22px; min-height: 42px; }

/* Price: currency superscripted to the cap-height, period on the same
   baseline as the number, note underneath. All three swap with the toggle. */
.ak-plan-price { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.ak-plan-cur { font-size: 1.35rem; font-weight: 700; align-self: flex-start; margin-top: .55rem; color: var(--ak-text-soft); }
.ak-plan-amt { font-size: 3.1rem; font-weight: 800; letter-spacing: -.035em; line-height: 1; margin-left: -6px; }
.ak-plan-period { font-size: 13.5px; color: var(--ak-text-soft); font-weight: 500; }
.ak-plan-note { font-size: 13px; color: var(--ak-text-soft); margin: 10px 0 20px; min-height: 40px; line-height: 1.5; }
.ak-plan-cta { width: 100%; }

.ak-plan-body { flex: 1; padding-top: 24px; margin-top: 24px; border-top: 1px solid var(--ak-border); }
.ak-plan-includes { font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ak-text-soft); margin: 0 0 14px; }
.ak-plan-features { list-style: none; margin: 0; padding: 0; }
.ak-plan-features li { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; color: var(--ak-text-muted); margin-bottom: 11px; line-height: 1.5; }
.ak-plan-features .ak-tick { color: var(--ak-success-text); flex-shrink: 0; margin-top: 3px; }

.ak-plan-meta { display: flex; flex-wrap: wrap; gap: 8px 18px; padding-top: 18px; margin-top: 20px; border-top: 1px solid var(--ak-border); }
.ak-plan-meta span { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ak-text-soft); font-weight: 500; white-space: nowrap; }
.ak-plan-meta .ak-icon { color: var(--ak-text-dim); }

/* Featured (Pro): the one dark card on the row. Reuses .ak-ink; the
   overrides below just re-tint every neutral for the dark surface. */
/* Two-class selector so this outranks .ak-plan's white background (same
   single-class specificity as .ak-ink, which loses on source order). */
.ak-plan.ak-plan--featured { background: #0F0F11; color: #fff; border-color: rgba(255,255,255,.12); box-shadow: 0 30px 70px -28px rgba(0,0,0,.6); }
.ak-plan--featured .ak-plan-head h3, .ak-plan--featured .ak-plan-amt { color: #fff; }
.ak-plan--featured .ak-plan-tagline, .ak-plan--featured .ak-plan-period, .ak-plan--featured .ak-plan-note, .ak-plan--featured .ak-plan-cur { color: rgba(255,255,255,.62); }
.ak-plan--featured .ak-plan-body, .ak-plan--featured .ak-plan-meta { border-color: rgba(255,255,255,.12); }
.ak-plan--featured .ak-plan-includes { color: #FDBA74; }
.ak-plan--featured .ak-plan-features li { color: rgba(255,255,255,.82); }
.ak-plan--featured .ak-plan-features .ak-tick { color: #4ADE80; }
.ak-plan--featured .ak-plan-meta span { color: rgba(255,255,255,.6); }
.ak-plan--featured .ak-plan-meta .ak-icon { color: rgba(255,255,255,.4); }
.ak-plan--featured .ak-plan-badge { top: 22px; right: 24px; left: auto; } /* inside the card: the ink surface clips overflow */
.ak-ink > .ak-plan-badge { position: absolute; z-index: 2; } /* .ak-ink > * resets position:relative; the badge must float */
@media (min-width: 900px) {
	.ak-pricing { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 24px; }
	/* Lift the featured card so the row has a clear center of gravity. */
	.ak-plan--featured { margin-top: -16px; margin-bottom: -16px; padding-top: 48px; padding-bottom: 40px; }
}

/* Trust row under the cards — facts that apply to every plan. */
.ak-pricing-trust { list-style: none; margin: 28px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 28px; }
.ak-pricing-trust li { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--ak-text-soft); font-weight: 500; }
.ak-pricing-trust .ak-icon { color: var(--ak-success-text); flex-shrink: 0; }

/* Expandable full comparison. */
.ak-plan-compare { margin-top: 40px; border: 1px solid var(--ak-border); border-radius: var(--ak-r-lg); background: var(--ak-bg); }
.ak-plan-compare > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 22px; cursor: pointer; font-weight: 700; font-size: 15px; }
.ak-plan-compare > summary::-webkit-details-marker { display: none; }
.ak-plan-compare > summary > span { display: inline-flex; align-items: center; gap: 10px; }
.ak-plan-compare > summary .chev { transition: transform .2s var(--ak-ease); color: var(--ak-text-soft); }
.ak-plan-compare[open] > summary { border-bottom: 1px solid var(--ak-border); }
.ak-plan-compare[open] > summary .chev { transform: rotate(180deg); }
.ak-plan-compare .ak-compare-wrap { border: 0; border-radius: 0 0 var(--ak-r-lg) var(--ak-r-lg); }
.ak-compare--plans tbody th[scope="row"] { font-weight: 500; color: var(--ak-text-muted); background: transparent; text-transform: none; letter-spacing: 0; font-size: 14px; }
.ak-compare--plans thead th { text-align: center; }
.ak-compare--plans thead th:first-child { text-align: left; }
.ak-compare--plans td { text-align: center; }
.ak-compare--plans .ak-compare-group th { background: var(--ak-bg-alt); font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ak-text-soft); padding: 10px 18px; }
.ak-compare--plans .ak-yes { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: var(--ak-success-soft); color: var(--ak-success-text); }
.ak-compare--plans .ak-val { font-weight: 600; color: var(--ak-text); font-size: 13.5px; }
.ak-compare--plans .ak-col-ours { background: var(--ak-primary-50); }
.ak-compare--plans thead th.ak-col-ours { color: var(--ak-primary-text); }

/* ── Problem / answer ────────────────────────────────────────────────────── */
.ak-ps { display: grid; grid-template-columns: 1fr; gap: 20px; }
.ak-ps-col { border: 1px solid var(--ak-border); border-radius: var(--ak-r-lg); padding: 28px; background: var(--ak-bg); }
.ak-ps-col h3 { font-size: .95rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ak-text-soft); margin-bottom: 20px; }
.ak-ps-col ul { list-style: none; margin: 0; padding: 0; }
.ak-ps-col li { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 16px; font-size: 14.5px; line-height: 1.55; }
.ak-ps-col li:last-child { margin-bottom: 0; }
.ak-ps-mark { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0; margin-top: 1px; }
.ak-ps-col--problem { background: var(--ak-bg-alt); }
.ak-ps-col--problem li { color: var(--ak-text-soft); }
.ak-ps-col--problem .ak-ps-mark { background: #F3E9E4; color: #9A6A55; }
.ak-ps-col--answer { border-color: var(--ak-action); box-shadow: var(--ak-shadow); }
.ak-ps-col--answer h3 { color: var(--ak-text); } /* the orange border carries the emphasis; ink text keeps 4.5:1 */
.ak-ps-col--answer li { color: var(--ak-text); }
.ak-ps-col--answer .ak-ps-mark { background: var(--ak-success-soft); color: var(--ak-success-text); }
@media (min-width: 880px) { .ak-ps { grid-template-columns: 1fr 1fr; gap: 24px; } }

/* ── Use-case tabs ───────────────────────────────────────────────────────── */
.ak-tablist { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 32px; }
.ak-tab {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 10px 18px; border-radius: var(--ak-r-full);
	border: 1px solid var(--ak-border); background: var(--ak-bg); cursor: pointer;
	font-family: var(--ak-font); font-size: 14px; font-weight: 600; color: var(--ak-text-muted);
	transition: background .15s var(--ak-ease), color .15s var(--ak-ease), border-color .15s var(--ak-ease);
}
.ak-tab:hover { border-color: var(--ak-action); color: var(--ak-primary-text); }
.ak-tab.is-active { background: var(--ak-text); border-color: var(--ak-text); color: #fff; }
.ak-tabpanel { border: 1px solid var(--ak-border); border-radius: var(--ak-r-lg); background: var(--ak-bg); padding: 32px; }
.ak-tabpanel-body { display: grid; grid-template-columns: 1fr; gap: 28px; }
.ak-tabpanel-body > * { min-width: 0; }
.ak-tabpanel h3 { font-size: 1.35rem; }
.ak-tabpanel p { color: var(--ak-text-muted); margin-bottom: 20px; }
.ak-tabpanel ul { list-style: none; margin: 0; padding: 0; }
.ak-tabpanel li { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; color: var(--ak-text-muted); margin-bottom: 12px; }
.ak-tabpanel li em { font-style: normal; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ak-primary-text); }
.ak-tabpanel .ak-tick { color: var(--ak-success-text); flex-shrink: 0; margin-top: 2px; }
@media (min-width: 880px) { .ak-tabpanel-body { grid-template-columns: 1fr 1fr; gap: 48px; } }

/* ── Product tour (alternating splits) ───────────────────────────────────── */
.ak-tour { display: grid; grid-template-columns: 1fr; gap: 36px; align-items: center; margin-bottom: 88px; }
.ak-tour > * { min-width: 0; }
.ak-tour:last-child { margin-bottom: 0; }
.ak-tour h3 { font-size: clamp(1.4rem, 1.4vw + 1rem, 1.9rem); }
.ak-tour p { color: var(--ak-text-muted); }
.ak-tour ul { list-style: none; margin: 20px 0 0; padding: 0; }
.ak-tour li { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; color: var(--ak-text-muted); margin-bottom: 11px; }
.ak-tour .ak-tick { color: var(--ak-success-text); flex-shrink: 0; margin-top: 2px; }
@media (min-width: 900px) {
	.ak-tour { grid-template-columns: 1fr 1fr; gap: 64px; }
	.ak-tour--reverse .ak-tour-copy { order: 2; }
}

/* Mock visuals */
.ak-mock { border: 1px solid var(--ak-border); border-radius: var(--ak-r-lg); overflow: hidden; background: var(--ak-bg); box-shadow: var(--ak-shadow-lg); }
.ak-mock-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 18px; background: var(--ak-bg-alt); border-bottom: 1px solid var(--ak-border); font-size: 13px; font-weight: 700; }
.ak-mock-row { display: grid; grid-template-columns: 1.6fr .8fr .8fr .9fr; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--ak-border); font-size: 13px; align-items: center; }
.ak-mock-row:last-child { border-bottom: 0; }
.ak-mock-row .nm { font-weight: 600; color: var(--ak-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ak-mock-row .ty { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--ak-primary-text); }
.ak-mock-row .pr { color: var(--ak-text); font-weight: 600; }
.ak-mock-row .st { color: var(--ak-text-dim); font-size: 12px; }
@media (max-width: 560px) {
	.ak-mock-row { grid-template-columns: 1fr auto; row-gap: 4px; }
	.ak-mock-row .nm { white-space: normal; }
	.ak-mock-row .pr, .ak-mock-row .st { text-align: right; }
}
.ak-mock-item { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; padding: 13px 18px; border-bottom: 1px solid var(--ak-border); align-items: center; }
.ak-mock-item:last-child { border-bottom: 0; }
.ak-mock-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ak-success); grid-row: span 2; }
.ak-mock-item .nm { font-size: 13.5px; font-weight: 600; }
.ak-mock-item .sub { font-size: 12px; color: var(--ak-text-dim); }
.ak-mock-admin { display: grid; grid-template-columns: 130px 1fr; min-height: 220px; }
.ak-mock-nav { border-right: 1px solid var(--ak-border); padding: 12px 0; background: var(--ak-bg-alt); }
.ak-mock-nav span { display: block; padding: 8px 16px; font-size: 12.5px; color: var(--ak-text-soft); }
.ak-mock-nav span.is-active { background: var(--ak-primary-50); color: var(--ak-primary-text); font-weight: 700; box-shadow: inset 2px 0 0 var(--ak-action); }
.ak-mock-panel { padding: 20px; display: grid; gap: 12px; align-content: start; }
.ak-mock-stat { border: 1px solid var(--ak-border); border-radius: var(--ak-r-sm); padding: 12px 14px; display: flex; justify-content: space-between; align-items: baseline; }
.ak-mock-stat .lbl { font-size: 12px; color: var(--ak-text-soft); }
.ak-mock-stat .val { font-size: 1.1rem; font-weight: 800; }

/* ── Ink surface + developer band ───────────────────────────────────────── */
.ak-ink { position: relative; overflow: hidden; background: #0F0F11; color: #fff; }
.ak-ink::before {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
	background-size: 48px 48px;
	-webkit-mask-image: radial-gradient(ellipse 85% 75% at 50% 40%, #000 30%, transparent 100%);
	mask-image: radial-gradient(ellipse 85% 75% at 50% 40%, #000 30%, transparent 100%);
}
.ak-ink > * { position: relative; z-index: 1; }
.ak-dev { padding: clamp(64px, 8vw, 104px) 0; }
.ak-dev h2 { color: #fff; }
.ak-dev .lead { color: rgba(255,255,255,.66); }
.ak-eyebrow--invert { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.16); color: #fff; }
.ak-dev-grid { display: grid; grid-template-columns: 1fr; gap: 44px; align-items: center; }
.ak-dev-grid > * { min-width: 0; }
.ak-dev-points { display: grid; gap: 18px; margin-top: 28px; }
.ak-dev-points > div { display: flex; gap: 12px; align-items: flex-start; }
.ak-dev-icon { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: var(--ak-r-sm); background: rgba(249,115,22,.16); color: var(--ak-primary); flex-shrink: 0; }
.ak-dev-points strong { display: block; font-size: 14.5px; color: #fff; margin-bottom: 2px; }
.ak-dev-points span { font-size: 13.5px; color: rgba(255,255,255,.6); line-height: 1.55; }
.ak-dev-points code { background: rgba(255,255,255,.1); border: 0; color: #FDBA74; font-size: 12px; }
.ak-code { background: #16161A; border: 1px solid rgba(255,255,255,.1); border-radius: var(--ak-r-lg); overflow: hidden; }
.ak-code-bar { display: flex; align-items: center; gap: 7px; padding: 12px 16px; border-bottom: 1px solid rgba(255,255,255,.08); }
.ak-code-bar span { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,.16); }
.ak-code-bar code { margin-left: 10px; background: none; border: 0; color: rgba(255,255,255,.4); font-size: 12px; }
.ak-code pre { margin: 0; padding: 22px; overflow-x: auto; }
.ak-code pre code { background: none; border: 0; padding: 0; font-family: var(--ak-font-mono); font-size: 13px; line-height: 1.75; color: #D6D3D1; }
.ak-code .c { color: #8E877F; } /* 4.7:1 on the code ground */ .ak-code .k { color: #FDBA74; } .ak-code .t { color: #FCD34D; } .ak-code .f { color: #93C5FD; } .ak-code .s { color: #86EFAC; } .ak-code .v { color: #E7E5E4; }
@media (min-width: 960px) { .ak-dev-grid { grid-template-columns: 1fr 1.05fr; gap: 64px; } }

/* ── Billing toggle ──────────────────────────────────────────────────────── */
.ak-billing-toggle {
	display: inline-flex; gap: 4px; padding: 5px; margin: 0 auto 40px;
	background: var(--ak-bg-alt); border: 1px solid var(--ak-border); border-radius: var(--ak-r-full);
	position: relative; left: 50%; transform: translateX(-50%);
}
.ak-billing-toggle button {
	display: inline-flex; align-items: center; gap: 7px;
	border: 0; background: transparent; cursor: pointer;
	padding: 9px 20px; border-radius: var(--ak-r-full);
	font-family: var(--ak-font); font-size: 14.5px; font-weight: 600; color: var(--ak-text-muted);
	transition: background .15s var(--ak-ease), color .15s var(--ak-ease);
}
.ak-billing-toggle button.is-active { background: var(--ak-text); color: #fff; }
.ak-save { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ak-success-text); background: var(--ak-success-soft); padding: 2px 7px; border-radius: var(--ak-r-full); }
.ak-billing-toggle button.is-active .ak-save { background: rgba(255,255,255,.16); color: #fff; }

/* ── Feature matrix ──────────────────────────────────────────────────────── */
.ak-matrix { display: grid; grid-template-columns: 1fr; gap: 36px 32px; }
.ak-matrix > * { min-width: 0; }
.ak-matrix-head { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.ak-matrix-icon { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 9px; background: linear-gradient(135deg, #FB8A3C, #EA580C); color: #fff; flex-shrink: 0; }
.ak-matrix-head h3 { margin: 0; font-size: 1rem; }
.ak-matrix-head em { font-style: normal; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ak-primary-text); }
.ak-matrix ul { list-style: none; margin: 0; padding: 0; }
.ak-matrix li { display: flex; gap: 9px; align-items: flex-start; font-size: 14px; color: var(--ak-text-muted); margin-bottom: 10px; }
.ak-matrix li em { font-style: normal; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ak-primary-text); }
.ak-matrix li code { font-size: 12px; }
.ak-matrix .ak-tick { color: var(--ak-success); flex-shrink: 0; margin-top: 2px; }
@media (min-width: 600px) { .ak-matrix { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 1000px) { .ak-matrix { grid-template-columns: repeat(4, minmax(0,1fr)); } }

.ak-compare .ak-muted { color: var(--ak-text-soft); }

/* ── Add-ons grid ─────────────────────────────────────────────────────────── */
.ak-addon-card {
	position: relative; display: flex; flex-direction: column;
	border: 1px solid var(--ak-border); border-radius: 18px; padding: 24px 24px 22px; background: var(--ak-bg);
	box-shadow: 0 1px 2px rgba(28,25,23,.04);
	transition: border-color .18s var(--ak-ease), transform .18s var(--ak-ease), box-shadow .18s var(--ak-ease);
}
.ak-addon-card:hover { border-color: rgba(249,115,22,.55); transform: translateY(-3px); box-shadow: var(--ak-shadow-lg); }
.ak-addon-card h3 { font-size: 1.08rem; line-height: 1.3; margin: 0 0 8px; letter-spacing: -.012em; }
.ak-addon-card p { color: var(--ak-text-muted); font-size: 14.5px; line-height: 1.6; margin: 0; }
.ak-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--ak-border); }
.ak-card-foot .ak-card-more { margin-top: 0; padding-top: 0; border-top: 0; }
.ak-card-foot .ak-pill--cat { margin: 0; }
.ak-addon-card:hover .ak-card-foot { border-top-color: rgba(249,115,22,.35); }
.ak-addon-card:hover .ak-card-more { color: var(--ak-primary-text); }
.ak-addon-card:hover .ak-card-more svg { transform: translateX(3px); }
.ak-addon-link { color: inherit; }
.ak-addon-link::after { content: ""; position: absolute; inset: 0; } /* whole card clickable */
.ak-addon-card:hover .ak-addon-link { color: var(--ak-primary-text); }
.ak-pill { display: inline-block; padding: 3px 9px; border-radius: var(--ak-r-full); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; background: var(--ak-primary-soft); color: var(--ak-primary-text); }
.ak-pill--cat { background: var(--ak-bg-alt); color: var(--ak-text-soft); border: 1px solid var(--ak-border); font-size: 10.5px; letter-spacing: .06em; padding: 4px 9px; }
.ak-addon-filters { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 36px; }
.ak-chip { padding: 8px 14px; border-radius: var(--ak-r-full); border: 1px solid var(--ak-border); background: var(--ak-bg); font-size: 13.5px; font-weight: 600; color: var(--ak-text-muted); cursor: pointer; }
.ak-chip:hover { border-color: var(--ak-action); color: var(--ak-primary-text); }
.ak-chip.is-active { background: var(--ak-text); color: #fff; border-color: var(--ak-text); }

/* ── Compare table ───────────────────────────────────────────────────────── */
.ak-compare-wrap { overflow-x: auto; border: 1px solid var(--ak-border); border-radius: var(--ak-r-lg); }
.ak-compare { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 560px; }
.ak-compare th, .ak-compare td { padding: 14px 18px; border-bottom: 1px solid var(--ak-border); text-align: left; }
.ak-compare th { background: var(--ak-bg-alt); font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--ak-text-soft); }
.ak-compare tr:last-child td { border-bottom: none; }
.ak-compare .ak-col-ours { background: var(--ak-primary-50); }
.ak-compare .ak-yes { color: var(--ak-success); font-weight: 700; }
.ak-compare .ak-no { color: var(--ak-text-soft); }
.ak-compare .ak-compare-group th { background: var(--ak-bg-alt); font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ak-text-soft); padding: 10px 18px; text-align: left; }

/* ── FAQ ─────────────────────────────────────────────────────────────────── */
.ak-faq { max-width: 760px; margin: 0 auto; }
.ak-faq-item { border-bottom: 1px solid var(--ak-border); }
.ak-faq-item summary { display: flex; align-items: center; justify-content: space-between; padding: 20px 4px; font-weight: 600; cursor: pointer; list-style: none; }
.ak-faq-item summary::-webkit-details-marker { display: none; }
.ak-faq-item p { padding: 0 4px 20px; color: var(--ak-text-soft); }
.ak-faq-item .chev { transition: transform .2s var(--ak-ease); flex-shrink: 0; }
.ak-faq-item[open] .chev { transform: rotate(180deg); }

/* ── CTA band ────────────────────────────────────────────────────────────── */
.ak-cta-band {
	border-radius: var(--ak-r-xl); padding: clamp(48px, 7vw, 84px) clamp(24px, 5vw, 64px); text-align: center;
	border-top: 1px solid rgba(249,115,22,.5);
}
/* A soft light behind the buttons — the one place on the page where a
   glow earns its keep, because it points at the action. */
.ak-cta-band::after {
	content: ""; position: absolute; left: 50%; bottom: -30%; width: 70%; height: 80%;
	transform: translateX(-50%); pointer-events: none;
	background: radial-gradient(ellipse at 50% 100%, rgba(249,115,22,.28), transparent 65%);
}
.ak-cta-band h2 { color: #fff; max-width: 20ch; margin: 0 auto .5em; }
.ak-cta-band p { color: rgba(255,255,255,.62); margin: 0 auto 30px; max-width: 56ch; }

/* ── Prose (legal pages) ─────────────────────────────────────────────────── */
.ak-prose { max-width: 720px; margin: 0 auto; }
.ak-prose h2 { margin-top: 40px; }
.ak-prose p, .ak-prose li { color: var(--ak-text-muted); }

/* ── Utility ─────────────────────────────────────────────────────────────── */
/* Scroll-reveal is gated on html.js (set inline in header.php before any
   CSS paints). Without JS — a blocked script, a crawler that doesn't
   execute it — nothing is ever hidden. Content first, motion second. */
.js .ak-reveal { opacity: 0; transform: translateY(16px); transition: opacity .5s var(--ak-ease), transform .5s var(--ak-ease); }
.js .ak-reveal.is-visible { opacity: 1; transform: none; }
.ambikly-page { overflow-x: hidden; }

/* 44px minimum hit area on touch devices for every tappable control. */
@media (pointer: coarse) {
	.ak-tab, .ak-chip, .ak-billing-toggle button, .ak-faq-item summary, .ak-header-nav a, .ak-mobile-nav a { min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}


/* ── Inner-page primitives ─────────────────────────────────────────────── */
.ak-hero--compact { padding-bottom: clamp(48px, 6vw, 80px); }
.ak-hero--compact .ak-hero-center { padding-top: 8px; }
.ak-crumbs { font-size: 13px; margin: -8px 0 24px; }
.ak-crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ak-crumbs li + li::before { content: "/"; margin-right: 6px; color: var(--ak-text-dim); }
.ak-crumbs a { color: var(--ak-text-soft); } .ak-crumbs a:hover { color: var(--ak-primary-text); }
.ak-crumbs [aria-current] { color: var(--ak-text-muted); }
.ak-crumbs--invert a { color: rgba(255,255,255,.62); } .ak-crumbs--invert a:hover { color: #fff; }
.ak-crumbs--invert [aria-current] { color: rgba(255,255,255,.85); } .ak-crumbs--invert li + li::before { color: rgba(255,255,255,.35); }
.ak-h3 { font-size: clamp(1.35rem, 1.1vw + 1rem, 1.75rem); }
.ak-inline-link { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; margin-top: 10px; }
.ak-nav-toggle-close { display: none; }
.ak-nav-toggle[aria-expanded="true"] .ak-nav-toggle-open { display: none; }
.ak-nav-toggle[aria-expanded="true"] .ak-nav-toggle-close { display: block; }

/* Steps */
.ak-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; grid-template-columns: 1fr; counter-reset: step; }
@media (min-width: 760px) { .ak-steps--2 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.ak-step { display: grid; grid-template-columns: 44px 1fr; gap: 18px; background: var(--ak-bg); border: 1px solid var(--ak-border); border-radius: var(--ak-r-lg); padding: 24px; }
.ak-step-num { width: 44px; height: 44px; border-radius: 50%; background: var(--ak-primary); color: var(--ak-text); font-weight: 800; display: inline-flex; align-items: center; justify-content: center; font-size: 1.05rem; }
.ak-step > div { min-width: 0; }
.ak-step h3 { font-size: 1.05rem; margin: 6px 0 6px; }
.ak-step p { color: var(--ak-text-soft); font-size: 14.5px; margin: 0; }
.ak-step-code { margin: 12px 0 0; background: #16161A; color: #E7E5E4; border-radius: var(--ak-r); padding: 12px 14px; font-family: var(--ak-font-mono); font-size: 12.5px; overflow-x: auto; }
.ak-step-code code { background: none; border: 0; padding: 0; color: inherit; font-size: inherit; }

/* Link cards */
.ak-link-card { color: inherit; }
.ak-link-card:hover { color: inherit; border-color: rgba(249,115,22,.55); transform: translateY(-3px); box-shadow: var(--ak-shadow-lg); }
.ak-link-card h3 { display: block; }
.ak-link-card-arrow { display: none; }
.ak-link-card .ak-pill { margin-top: 16px; align-self: flex-start; }

/* Reference tables */
.ak-ref th[scope="row"] { font-weight: 600; text-align: left; text-transform: none; letter-spacing: 0; font-size: 14px; color: var(--ak-text); }
.ak-ref--mono th[scope="row"] { font-family: var(--ak-font-mono); font-size: 12.5px; font-weight: 500; }
.ak-ref td code, .ak-ref th code { font-size: 12px; }
.ak-ref td { color: var(--ak-text-muted); }
.ak-table-note { font-size: 13px; color: var(--ak-text-soft); margin: 12px 0 0; }

/* Split visuals */
.ak-mock-row--kv { display: grid; grid-template-columns: 1fr auto; gap: 16px; padding: 13px 18px; }
.ak-mock-row--kv:last-child { border-bottom: 0; }
.ak-mock-row--kv .k { color: var(--ak-text-muted); font-size: 13.5px; }
.ak-mock-row--kv .v { font-weight: 600; font-size: 13.5px; text-align: right; }
.ak-mock-list { list-style: none; margin: 0; padding: 0; }
.ak-mock-list li { display: flex; gap: 12px; align-items: flex-start; padding: 13px 18px; border-bottom: 1px solid var(--ak-border); font-size: 13.5px; line-height: 1.5; color: var(--ak-text-muted); }
.ak-mock-list li:last-child { border-bottom: 0; }
.ak-mock-list li .ak-tick { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--ak-success-soft); color: var(--ak-success-text); margin-top: -1px; }
.ak-mock-list li .ak-tick svg { width: 12px; height: 12px; }

/* Blog */
.ak-post-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; margin-top: 22px; font-size: 13.5px; color: rgba(255,255,255,.62); }
.ak-post-meta span { display: inline-flex; align-items: center; gap: 6px; }
.ak-post-card { display: flex; flex-direction: column; gap: 10px; padding: 0; overflow: hidden; }
.ak-post-card-media { display: block; aspect-ratio: 16/9; background: var(--ak-bg-alt); }
.ak-post-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ak-post-card-meta { display: flex; align-items: center; gap: 12px; padding: 22px 24px 0; font-size: 13px; color: var(--ak-text-dim); }
.ak-post-card h2, .ak-post-card h3 { padding: 0 24px; font-size: 1.1rem; margin: 0; }
.ak-post-card h2 a, .ak-post-card h3 a { color: var(--ak-text); } .ak-post-card h2 a:hover, .ak-post-card h3 a:hover { color: var(--ak-primary-text); }
.ak-post-card p { padding: 0 24px 24px; }
.ak-post-cover { margin: 0 0 32px; border-radius: var(--ak-r-lg); overflow: hidden; }
.ak-post-cover img { width: 100%; height: auto; display: block; }
.ak-post-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 32px; }
.ak-pagination { margin-top: 48px; display: flex; justify-content: center; }
.ak-pagination .nav-links { display: flex; gap: 6px; flex-wrap: wrap; }
.ak-pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 14px; border: 1px solid var(--ak-border); border-radius: var(--ak-r-full); color: var(--ak-text-muted); font-weight: 600; font-size: 14px; }
.ak-pagination .page-numbers.current { background: var(--ak-text); color: #fff; border-color: var(--ak-text); }
.ak-pagination a.page-numbers:hover { border-color: var(--ak-action); color: var(--ak-primary-text); }
.ak-empty { text-align: center; max-width: 620px; margin: 0 auto; }
.ak-empty .ak-eyebrow { margin: 0 auto 18px; }

/* Long-form prose (articles, docs, legal) */
.ak-prose--article { font-size: 1.05rem; line-height: 1.75; }
.ak-prose--article > * + * { margin-top: 1.1em; }
.ak-prose--article h2 { font-size: clamp(1.4rem, 1.2vw + 1rem, 1.85rem); margin-top: 2.2em; }
.ak-prose--article h3 { font-size: 1.2rem; margin-top: 1.8em; }
.ak-prose--article h2 + *, .ak-prose--article h3 + * { margin-top: .6em; }
.ak-prose--article ul, .ak-prose--article ol { padding-left: 1.4em; }
.ak-prose--article li + li { margin-top: .4em; }
.ak-prose--article a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--ak-border-strong); }
.ak-prose--article a:hover { text-decoration-color: currentColor; }
.ak-prose--article blockquote { margin: 1.4em 0; padding: 4px 0 4px 20px; border-left: 3px solid var(--ak-primary); color: var(--ak-text-muted); font-style: italic; }
.ak-prose--article pre { background: #16161A; color: #E7E5E4; border-radius: var(--ak-r-lg); padding: 20px 22px; overflow-x: auto; font-family: var(--ak-font-mono); font-size: 13.5px; line-height: 1.7; }
.ak-prose--article pre code { background: none; border: 0; padding: 0; color: inherit; font-size: inherit; }
.ak-prose--article img { max-width: 100%; height: auto; border-radius: var(--ak-r); }
.ak-prose--article table { width: 100%; border-collapse: collapse; font-size: 14.5px; display: block; overflow-x: auto; }
.ak-prose--article table thead, .ak-prose--article table tbody { display: table; width: 100%; }
.ak-prose--article a { overflow-wrap: anywhere; }
.ak-prose--article th, .ak-prose--article td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--ak-border); vertical-align: top; }
.ak-prose--article th { font-weight: 600; color: var(--ak-text); }
.ak-prose--article hr { border: 0; border-top: 1px solid var(--ak-border); margin: 2.5em 0; }
.ak-prose--article .ak-callout { background: var(--ak-primary-50); border: 1px solid #FED7AA; border-radius: var(--ak-r-lg); padding: 18px 20px; font-size: .95em; }
.ak-prose--article .ak-callout strong { color: var(--ak-text); }
.ak-prose--article dl { display: grid; grid-template-columns: max-content 1fr; gap: 8px 20px; }
.ak-prose--article dt { font-weight: 600; color: var(--ak-text); }
.ak-prose--article dd { margin: 0; color: var(--ak-text-muted); }

/* Add-on detail */
.ak-addon-hero-cat { display: inline-flex; gap: 8px; align-items: center; }
.ak-addon-facts { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .ak-addon-facts { grid-template-columns: repeat(3, minmax(0,1fr)); } }
.ak-addon-fact { background: var(--ak-bg); border: 1px solid var(--ak-border); border-radius: var(--ak-r-lg); padding: 22px 24px; }
.ak-addon-fact h3 { font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ak-text-soft); margin: 0 0 12px; display: flex; align-items: center; gap: 8px; }
.ak-addon-fact ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ak-addon-fact li { font-size: 14px; color: var(--ak-text-muted); display: flex; gap: 8px; align-items: flex-start; }
.ak-addon-fact li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--ak-primary); margin-top: 8px; flex-shrink: 0; }
.ak-addon-fact code { font-size: 12px; }

/* Docs / developers two-column layout with sticky TOC */
.ak-docs { display: grid; gap: 40px; grid-template-columns: 1fr; align-items: start; }
.ak-docs > * { min-width: 0; }
@media (min-width: 960px) { .ak-docs { grid-template-columns: 240px minmax(0,1fr); } .ak-docs-toc { position: sticky; top: 92px; } }
.ak-docs-toc { border: 1px solid var(--ak-border); border-radius: var(--ak-r-lg); padding: 18px 20px; background: var(--ak-bg); }
.ak-docs-toc h2 { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--ak-text-soft); margin: 0 0 12px; }
.ak-docs-toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.ak-docs-toc a { display: block; padding: 6px 8px; border-radius: 6px; color: var(--ak-text-muted); font-size: 14px; font-weight: 500; }
.ak-docs-toc a:hover { background: var(--ak-primary-50); color: var(--ak-primary-text); }
.ak-docs-body > section { padding: 8px 0 40px; border-bottom: 1px solid var(--ak-border); margin-bottom: 40px; scroll-margin-top: 92px; }
.ak-docs-body > section:last-child { border-bottom: 0; }
.ak-docs-body h2 { margin-top: 0; }

/* Changelog */
.ak-releases { display: grid; gap: 20px; max-width: 860px; margin: 0 auto; }
.ak-release { border: 1px solid var(--ak-border); border-radius: var(--ak-r-lg); padding: 26px 28px; background: var(--ak-bg); }
.ak-release header { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.ak-release h2 { font-size: 1.15rem; margin: 0; }
.ak-release-ver { color: var(--ak-primary-text); font-family: var(--ak-font-mono); font-size: .95rem; font-weight: 600; margin-left: 4px; }
.ak-release ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.ak-release li { display: flex; gap: 10px; align-items: flex-start; color: var(--ak-text-muted); font-size: 14.5px; }
.ak-release li .ak-tick { flex-shrink: 0; }


/* ── Mega menu ─────────────────────────────────────────────────────────── */
.ak-nav { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; }
.ak-nav-item { position: static; }
.ak-nav-link { display: inline-flex; align-items: center; gap: 5px; background: none; border: 0; cursor: pointer; font: inherit; color: var(--ak-text-muted); font-weight: 600; font-size: 14.5px; padding: 8px 12px; border-radius: 8px; transition: color .2s ease, background .2s ease; }
.ak-nav-link:hover, .ak-nav-item.is-open > .ak-nav-link { background: var(--ak-primary-50); color: var(--ak-primary-text); }
.ak-nav-link[aria-current="page"] { color: var(--ak-primary-text); }
.ak-nav-chev { transition: transform .2s var(--ak-ease); }
.ak-nav-item.is-open > .ak-nav-link .ak-nav-chev { transform: rotate(180deg); }
.js body.has-hero .ak-header:not(.is-scrolled):not(.is-menu-open) .ak-nav-link { color: rgba(255,255,255,.82); }
.js body.has-hero .ak-header:not(.is-scrolled):not(.is-menu-open) .ak-nav-link:hover, .js body.has-hero .ak-header:not(.is-scrolled):not(.is-menu-open) .ak-nav-item.is-open > .ak-nav-link { background: rgba(255,255,255,.12); color: #fff; }
.js body.has-hero .ak-header:not(.is-scrolled):not(.is-menu-open) .ak-nav-link[aria-current="page"] { color: #fff; }
.ak-mega { position: absolute; left: 0; right: 0; top: 100%; background: #fff; border-top: 1px solid var(--ak-border); border-bottom: 1px solid var(--ak-border); box-shadow: 0 24px 48px -28px rgba(28,25,23,.28); z-index: 190; animation: ak-mega-in .16s var(--ak-ease); }
@keyframes ak-mega-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.ak-mega-inner { display: grid; grid-template-columns: 1fr 1fr 280px; gap: 48px; padding: 30px 24px 26px; }
.ak-mega-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 24px 14px; border-top: 1px solid var(--ak-border); font-size: 13.5px; }
.ak-mega-foot a { color: var(--ak-text-muted); font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.ak-mega-foot a:hover, .ak-header .ak-mega-foot a.ak-mega-all { color: var(--ak-primary-text); }
.ak-mega-foot span { display: inline-flex; gap: 18px; }
.ak-mega-col h4 { margin: 0 0 10px; padding: 0 10px; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ak-text-dim); }
.ak-mega-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.ak-header .ak-mega-col a, .js body.has-hero .ak-header .ak-mega-col a { display: flex; gap: 12px; align-items: flex-start; padding: 9px 10px; border-radius: 10px; color: var(--ak-text); transition: background .15s ease; }
.ak-mega-col a:hover { background: var(--ak-bg-alt); color: var(--ak-text); }
.ak-mega-col a:hover strong { color: var(--ak-primary-text); }
.ak-mega-col a[aria-current="page"] strong { color: var(--ak-primary-text); }
.ak-mega-col strong { display: block; font-size: 14px; font-weight: 600; line-height: 1.3; color: var(--ak-text); }
.ak-mega-col small { display: block; font-size: 12.5px; color: var(--ak-text-soft); margin-top: 2px; line-height: 1.4; }
.ak-mega-ico { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 8px; background: var(--ak-bg-alt); color: var(--ak-text-soft); flex-shrink: 0; margin-top: 1px; transition: background .15s ease, color .15s ease; }
.ak-mega-col a:hover .ak-mega-ico { background: var(--ak-primary-50); color: var(--ak-primary-text); }
.ak-header .ak-mega-promo { display: flex; flex-direction: column; gap: 10px; align-self: start; padding: 22px 24px; border-radius: 16px; background: var(--ak-bg-alt); border: 1px solid var(--ak-border); color: var(--ak-text); text-decoration: none; transition: border-color .15s ease, background .15s ease; }
.ak-header .ak-mega-promo.ak-ink { background: var(--ak-bg-alt); }
.ak-header .ak-mega-promo::before, .ak-header .ak-mega-promo::after { display: none; }
.ak-header .ak-mega-promo:hover { border-color: rgba(249,115,22,.45); background: var(--ak-primary-50); }
.ak-mega-promo .ak-eyebrow { margin: 0 0 6px; align-self: flex-start; background: #fff; border-color: var(--ak-border); color: var(--ak-primary-text); }
.ak-mega-promo strong { font-size: 1.05rem; line-height: 1.35; letter-spacing: -.01em; color: var(--ak-text); }
.ak-mega-promo > span { color: var(--ak-text-soft); font-size: 13.5px; line-height: 1.5; }
.ak-mega-promo em { font-style: normal; margin-top: auto; padding-top: 8px; display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 13.5px; color: var(--ak-primary-text); }
@media (max-width: 1100px) { .ak-mega-inner { grid-template-columns: 1fr 1fr; } .ak-mega-promo { display: none; } }

/* Mobile sheet: accordions */
.ak-mobile-nav .ak-mnav-group { border-bottom: 1px solid var(--ak-border); }
.ak-mobile-nav .ak-mnav-group summary { display: flex; align-items: center; justify-content: space-between; padding: 14px 4px; font-weight: 600; font-size: 16px; cursor: pointer; list-style: none; }
.ak-mobile-nav .ak-mnav-group summary::-webkit-details-marker { display: none; }
.ak-mobile-nav .ak-mnav-group[open] summary .chev { transform: rotate(180deg); }
.ak-mobile-nav .ak-mnav-group .chev { transition: transform .2s var(--ak-ease); }
.ak-mobile-nav .ak-mnav-group h4 { margin: 4px 4px 6px; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ak-text-soft); }
.ak-mobile-nav .ak-mnav-group ul { list-style: none; margin: 0 0 12px; padding: 0; }
.ak-mobile-nav .ak-mnav-group li a { display: block; padding: 9px 12px; border-radius: 8px; color: var(--ak-text-muted); font-size: 15px; }
.ak-mobile-nav .ak-mnav-group li a[aria-current="page"] { color: var(--ak-primary-text); font-weight: 600; }
.ak-mobile-nav .ak-mnav-link { display: block; padding: 14px 4px; font-weight: 600; font-size: 16px; color: var(--ak-text); border-bottom: 1px solid var(--ak-border); }
.ak-mobile-nav > .ak-btn { margin-top: 18px; width: 100%; justify-content: center; }

/* ── Print ─────────────────────────────────────────────────────────── */
@media print {
	.ak-header-nav, .ak-header-actions, .ak-nav-toggle, .ak-toast, .ak-billing-toggle, .skip-link { display: none !important; }
	.ak-ink, .ak-hero, .ak-cta-band, .ak-dev { background: #fff !important; color: #000 !important; }
	.ak-ink *, .ak-hero *, .ak-cta-band * { color: #000 !important; }
	.ak-section { padding: 24px 0; }
	details { open: true; } details > *:not(summary) { display: block; }
	a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .85em; color: #555; }
}

/* Static cards (no link): keep the card chrome, drop the hover lift. */
.ak-card--static:hover { transform: none; box-shadow: 0 1px 2px rgba(28,25,23,.04); border-color: var(--ak-border); }
.ak-card-head .ak-step-num { width: 34px; height: 34px; font-size: .92rem; flex: none; }

/* HTML sitemap: five link groups across, then the add-on list full width. */
.ak-sitemap { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 32px 28px; }
.ak-sitemap-group h2 { font-size: 1rem; display: flex; align-items: center; gap: 10px; margin: 0 0 14px; padding-bottom: 12px; border-bottom: 1px solid var(--ak-border); }
.ak-sitemap-group ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ak-sitemap-group--wide { margin-top: 44px; }
.ak-sitemap-group--wide ul { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px 24px; }
.ak-sitemap-group a { color: var(--ak-text); font-size: 14.5px; }
.ak-sitemap-group a:hover { color: var(--ak-primary-text); }
.ak-sitemap-group small { color: var(--ak-text-soft); font-size: 12px; margin-left: 6px; }
@media (max-width: 1100px) { .ak-sitemap { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ak-sitemap-group--wide ul { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .ak-sitemap, .ak-sitemap-group--wide ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .ak-sitemap, .ak-sitemap-group--wide ul { grid-template-columns: 1fr; } }

/* Buttons wrap instead of overflowing narrow screens. */
@media (max-width: 640px) { .ak-btn { max-width: 100%; white-space: normal; text-align: center; } }
/* The open plan table must scroll inside its card, never widen the page. */
.ak-plan-compare { max-width: 100%; overflow: hidden; }
.ak-plan-compare .ak-compare-wrap { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ak-plan-compare .ak-compare { min-width: 560px; }
/* contain: paint stops the scrollable table from widening Chrome's mobile
   layout viewport (innerWidth grew to 502px on /pricing/ without it). */
.ak-compare-wrap { contain: paint; }

/* ── Review pass: responsive tables, hero rhythm, mobile pricing ─────────── */
/* Sub-page heroes: same look, less dead space before the content. */
.ak-hero--sub { padding: clamp(96px, 11vw, 132px) 0 clamp(44px, 6vw, 72px); }
.ak-hero--sub h1 { max-width: 20ch; }
/* Three- and four-column comparison tables fit a phone instead of hiding the Pro column. */
@media (max-width: 640px) {
	.ak-compare--plans, .ambikly-page--compare .ak-compare-wrap > .ak-compare, .ak-cost-compare .ak-compare { min-width: 0; table-layout: fixed; }
	.ak-compare--plans th, .ak-compare--plans td, .ambikly-page--compare .ak-compare th, .ambikly-page--compare .ak-compare td { padding: 10px 8px; font-size: 13px; }
	.ak-compare--plans th:not(:first-child), .ak-compare--plans td:not(:first-child), .ambikly-page--compare .ak-compare th:not(:first-child), .ambikly-page--compare .ak-compare td:not(:first-child) { width: 60px; text-align: center; padding-left: 4px; padding-right: 4px; }
	.ak-plan-compare .ak-compare { min-width: 0; }
}
/* Wide tables that do scroll keep their row header in view. */
.ak-compare-wrap .ak-compare tbody th[scope="row"], .ak-kv-table tbody th:first-child { position: sticky; left: 0; background: var(--ak-bg); z-index: 1; }
.ak-compare th { white-space: nowrap; }
.ak-compare-total td { border-top: 2px solid var(--ak-text); background: var(--ak-primary-50); font-weight: 700; }
.ak-compare-total td.ak-col-ours { color: var(--ak-primary-text); }
/* Pricing on a phone: the featured plan leads. */
@media (max-width: 899px) { .ak-plan--featured { order: -1; } }
/* Header CTA stays on phones, compact. */
@media (max-width: 1023px) {
	.ak-header-actions { display: flex; margin-left: auto; margin-right: 10px; }
	.ak-header-actions .ak-btn { padding: 9px 14px; font-size: 13px; }
	.ak-header-actions .ak-btn svg { display: none; }
}
@media (max-width: 379px) { .ak-header-actions { display: none; } }
/* Stats: fit the number of items instead of leaving an empty fourth cell. */
@media (min-width: 720px) { .ak-stats { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); } }
/* Eyebrow dot in the brand color; green read as a status light. */
.ak-eyebrow::before { background: var(--ak-primary); }
/* Add-on card footer never wraps the category pill under the divider. */
.ak-card-foot { flex-wrap: nowrap; }
.ak-card-foot .ak-pill--cat { flex: none; }