/* Marketing site — shares the console's tokens so the product never looks
   like a different company once you sign in. */

.mk { background: var(--ss-bg); }

.mk-wrap { max-width: 1080px; margin: 0 auto; padding: 0 20px; }

.mk-nav {
	position: sticky;
	top: 0;
	z-index: 30;
	height: 60px;
	display: flex;
	align-items: center;
	background: color-mix(in srgb, var(--ss-bg) 88%, transparent);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--ss-border);
}

.mk-link {
	color: var(--ss-muted);
	text-decoration: none;
	font-size: 14px;
	padding: 6px 12px;
	border-radius: 6px;
}

.mk-link:hover { color: var(--ss-text); background: var(--ss-surface-2); }
.mk-link.active { color: var(--ss-text); font-weight: 600; }

/* ---------- hero ---------- */

.mk-hero { padding: 76px 0 56px; }

.mk-h1 {
	font-size: clamp(30px, 5vw, 46px);
	line-height: 1.12;
	font-weight: 700;
	letter-spacing: -.025em;
	margin-bottom: 16px;
	max-width: 18ch;
}

.mk-lede {
	font-size: 17px;
	line-height: 1.6;
	color: var(--ss-muted);
	max-width: 56ch;
	margin-bottom: 26px;
}

.mk-eyebrow {
	display: inline-block;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--ss-accent);
	background: var(--ss-accent-soft);
	border-radius: 20px;
	padding: 5px 13px;
	margin-bottom: 18px;
}

.mk-section { padding: 56px 0; border-top: 1px solid var(--ss-border); }

.mk-h2 {
	font-size: clamp(22px, 3vw, 30px);
	font-weight: 700;
	letter-spacing: -.02em;
	margin-bottom: 12px;
	max-width: 22ch;
}

.mk-sub { color: var(--ss-muted); font-size: 15px; line-height: 1.6; max-width: 60ch; }

/* ---------- feature cards ---------- */

.mk-card {
	background: var(--ss-surface);
	border: 1px solid var(--ss-border);
	border-radius: 12px;
	padding: 22px;
	height: 100%;
}

.mk-card h3 { font-size: 16px; font-weight: 650; margin-bottom: 8px; }
.mk-card p { font-size: 13.5px; color: var(--ss-muted); line-height: 1.6; margin: 0; }

.mk-icon {
	width: 34px; height: 34px;
	border-radius: 9px;
	display: flex; align-items: center; justify-content: center;
	background: var(--ss-accent-soft);
	color: var(--ss-accent);
	margin-bottom: 14px;
	font-size: 16px;
}

/* ---------- the sample finding (our actual product output) ---------- */

.mk-finding {
	background: var(--ss-surface);
	border: 1px solid var(--ss-border);
	border-left: 3px solid var(--ss-red);
	border-radius: 10px;
	padding: 18px 20px;
}

.mk-finding-label {
	font-size: 10.5px; font-weight: 700; letter-spacing: .06em;
	text-transform: uppercase; color: var(--ss-muted);
	margin: 14px 0 4px;
}

.mk-finding p { font-size: 13.5px; line-height: 1.6; margin: 0; }

/* ---------- pricing ---------- */

.mk-price-card {
	background: var(--ss-surface);
	border: 1px solid var(--ss-border);
	border-radius: 12px;
	padding: 26px 22px;
	height: 100%;
	display: flex;
	flex-direction: column;
	position: relative;
}

.mk-price-card.popular { border-color: var(--ss-accent); box-shadow: 0 0 0 1px var(--ss-accent); }

.mk-badge {
	position: absolute; top: -11px; left: 22px;
	background: var(--ss-accent); color: #fff;
	font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
	padding: 3px 10px; border-radius: 20px;
}

.mk-price { font-size: 38px; font-weight: 300; letter-spacing: -.03em; line-height: 1; }
.mk-price small { font-size: 14px; color: var(--ss-muted); font-weight: 400; }

.mk-feat { list-style: none; padding: 0; margin: 18px 0 0; flex-grow: 1; }
.mk-feat li { font-size: 13.5px; padding: 6px 0 6px 22px; position: relative; color: var(--ss-text); }
.mk-feat li::before { content: '✓'; position: absolute; left: 0; color: var(--ss-green); font-weight: 700; }
.mk-feat li.off { color: var(--ss-muted); opacity: .6; }
.mk-feat li.off::before { content: '—'; color: var(--ss-muted); }

/* ---------- footer ---------- */

.mk-footer { border-top: 1px solid var(--ss-border); padding: 44px 0 28px; margin-top: 40px; }
.mk-foot-h { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ss-text); margin-bottom: 10px; }
.mk-foot-link { display: block; color: var(--ss-muted); text-decoration: none; font-size: 13.5px; padding: 3px 0; }
.mk-foot-link:hover { color: var(--ss-accent); }

.mk-form { max-width: 460px; }

/* ============================================================
   Motion + depth. Every animation is opt-out via
   prefers-reduced-motion — vestibular disorders are real and a
   marketing page is never worth making someone ill.
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
	}
	.reveal { opacity: 1 !important; transform: none !important; }
}

/* ---------- ambient gradient field behind the hero ---------- */

.mk-hero { position: relative; overflow: hidden; }

.mk-orb {
	position: absolute;
	border-radius: 50%;
	filter: blur(90px);
	opacity: .5;
	pointer-events: none;
	z-index: 0;
}

.mk-orb-1 { width: 520px; height: 520px; top: -180px; left: -120px;
	background: radial-gradient(circle, var(--ss-accent), transparent 70%); animation: drift1 22s ease-in-out infinite; }
.mk-orb-2 { width: 420px; height: 420px; top: -60px; right: -100px;
	background: radial-gradient(circle, var(--ss-green), transparent 70%); opacity: .28; animation: drift2 27s ease-in-out infinite; }
.mk-orb-3 { width: 360px; height: 360px; bottom: -200px; left: 40%;
	background: radial-gradient(circle, var(--ss-purple), transparent 70%); opacity: .22; animation: drift1 31s ease-in-out infinite reverse; }

[data-bs-theme="light"] .mk-orb { opacity: .22; }
[data-bs-theme="light"] .mk-orb-2, [data-bs-theme="light"] .mk-orb-3 { opacity: .14; }

@keyframes drift1 {
	0%, 100% { transform: translate(0, 0) scale(1); }
	50% { transform: translate(50px, 34px) scale(1.12); }
}
@keyframes drift2 {
	0%, 100% { transform: translate(0, 0) scale(1); }
	50% { transform: translate(-44px, 40px) scale(1.08); }
}

.mk-hero > .mk-wrap { position: relative; z-index: 1; }

/* ---------- scroll reveal ---------- */

/*
 * Gated on `.js`. Without it these rules never apply, so a page whose script
 * fails to run — blocked, errored, or simply never included — renders fully
 * visible instead of blank. This exact bug shipped once: the layout had no
 * @yield('scripts'), every .reveal stayed at opacity 0, and the page was
 * empty while its HTML was perfectly correct.
 */
.js .reveal {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity .6s cubic-bezier(.2,.7,.3,1), transform .6s cubic-bezier(.2,.7,.3,1);
}

.js .reveal.in { opacity: 1; transform: none; }
.js .reveal[data-d="1"] { transition-delay: .08s; }
.js .reveal[data-d="2"] { transition-delay: .16s; }
.js .reveal[data-d="3"] { transition-delay: .24s; }

/* ---------- mock product panels ("screens" without screenshots) ---------- */

.mk-shot {
	background: var(--ss-surface);
	border: 1px solid var(--ss-border);
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 24px 60px -20px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.02) inset;
}

[data-bs-theme="light"] .mk-shot { box-shadow: 0 22px 50px -22px rgba(20,40,80,.28); }

.mk-shot-bar {
	display: flex;
	align-items: center;
	gap: 7px;
	padding: 9px 13px;
	border-bottom: 1px solid var(--ss-border);
	background: var(--ss-surface-2);
}

.mk-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--ss-surface-3); }
.mk-shot-title { font-size: 11.5px; color: var(--ss-muted); margin-left: 8px; }
.mk-shot-body { padding: 16px; }

/* floating hero panel */
.mk-float { animation: float 7s ease-in-out infinite; }
@keyframes float {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-9px); }
}

/* ---------- mock: finding row ---------- */

.mk-find {
	border-left: 3px solid var(--ss-red);
	background: var(--ss-surface-2);
	border-radius: 0 8px 8px 0;
	padding: 12px 14px;
	margin-bottom: 10px;
}

.mk-find.p2 { border-left-color: var(--ss-amber); }
.mk-find.p3 { border-left-color: var(--ss-accent); }
.mk-find-title { font-size: 13px; font-weight: 600; line-height: 1.45; }
.mk-find-meta { font-size: 11px; color: var(--ss-muted); margin-top: 5px; }
.mk-find-fix { font-size: 11.5px; color: var(--ss-muted); margin-top: 7px; line-height: 1.55; }

/* ---------- mock: cost table ---------- */

.mk-row {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 9px 2px;
	border-bottom: 1px solid var(--ss-border);
	font-size: 12.5px;
}

.mk-row:last-child { border-bottom: 0; }
.mk-row .amt { margin-left: auto; color: var(--ss-green); font-weight: 600; white-space: nowrap; }
.mk-row .sub { color: var(--ss-muted); font-size: 11px; }

/* animated bar for the cost visual */
.mk-bar { height: 5px; border-radius: 3px; background: var(--ss-surface-3); overflow: hidden; margin-top: 5px; }
.mk-bar > i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--ss-green), var(--ss-accent)); width: 0; transition: width 1.1s cubic-bezier(.2,.7,.3,1); }
.in .mk-bar > i { width: var(--w, 50%); }

/* ---------- big stat band ---------- */

.mk-band {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 1px;
	background: var(--ss-border);
	border: 1px solid var(--ss-border);
	border-radius: 12px;
	overflow: hidden;
}

.mk-band > div { background: var(--ss-surface); padding: 22px 20px; text-align: center; }
.mk-band .n { font-size: 32px; font-weight: 300; letter-spacing: -.03em; line-height: 1; }
.mk-band .l { font-size: 11.5px; color: var(--ss-muted); margin-top: 7px; line-height: 1.4; }

/* ---------- product tabs ---------- */

.mk-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 18px; }

.mk-tab {
	background: transparent;
	border: 1px solid var(--ss-border);
	color: var(--ss-muted);
	border-radius: 20px;
	padding: 7px 16px;
	font-size: 13px;
	cursor: pointer;
	transition: all .15s ease;
}

.mk-tab:hover { color: var(--ss-text); border-color: var(--ss-muted); }
.mk-tab.active { background: var(--ss-accent); border-color: var(--ss-accent); color: #fff; font-weight: 600; }

.js .mk-pane { display: none; }
.js .mk-pane.active { display: block; animation: fadeUp .45s cubic-bezier(.2,.7,.3,1); }

@keyframes fadeUp {
	from { opacity: 0; transform: translateY(10px); }
	to { opacity: 1; transform: none; }
}

/* ---------- misc polish ---------- */

.mk-card { transition: transform .2s ease, border-color .2s ease; }
.mk-card:hover { transform: translateY(-3px); border-color: var(--ss-accent); }

.mk-glow-btn { position: relative; overflow: hidden; }
.mk-glow-btn::after {
	content: ''; position: absolute; inset: 0;
	background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.22), transparent 70%);
	transform: translateX(-100%);
}
.mk-glow-btn:hover::after { transform: translateX(100%); transition: transform .7s ease; }

.mk-marquee { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.mk-marquee > div { display: flex; gap: 44px; width: max-content; animation: slide 34s linear infinite; }
.mk-marquee span { font-size: 13px; color: var(--ss-muted); white-space: nowrap; }
@keyframes slide { to { transform: translateX(-50%); } }

.mk-pulse { position: relative; }
.mk-pulse::before {
	content: ''; position: absolute; left: -3px; top: 50%; width: 7px; height: 7px;
	margin-top: -3.5px; border-radius: 50%; background: var(--ss-red);
	animation: pulse 2s ease-out infinite;
}
@keyframes pulse {
	0% { box-shadow: 0 0 0 0 rgba(244,104,95,.6); }
	70% { box-shadow: 0 0 0 9px rgba(244,104,95,0); }
	100% { box-shadow: 0 0 0 0 rgba(244,104,95,0); }
}

/* "There is more underneath" affordance on the hero panel. */
.mk-more {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 12px;
	padding: 9px 12px;
	border: 1px dashed var(--ss-border);
	border-radius: 8px;
	font-size: 12px;
	color: var(--ss-muted);
	transition: border-color .2s ease, color .2s ease;
}

.mk-more:hover { border-color: var(--ss-accent); color: var(--ss-text); }
.mk-more .arrow { margin-left: auto; color: var(--ss-accent); }

/* ============================================================
   Scroll-driven tab progression.

   Auto-rotating carousels move content while it is being read and
   cannot be recovered — a well-documented usability failure. Tying
   progression to scroll keeps the reader in control of the pace
   while still feeling animated.

   Desktop only, and only when JS is present. On narrow screens a
   tall pinned section is worse than simply stacking the three
   panes, so that is what happens there.
   ============================================================ */

.mk-stage { position: relative; }

@media (min-width: 992px) {
	.js .mk-stage { height: 280vh; }
	.js .mk-stage-inner { position: sticky; top: 76px; }
}

/* No JS, small screens, or reduced motion: no pinning, no hidden panes. */
@media (max-width: 991px) {
	.js .mk-stage-inner { position: static; }
	.js .mk-pane { display: block; margin-bottom: 34px; }
	.mk-tabs { display: none; }
	.mk-progress { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.js .mk-stage { height: auto !important; }
	.js .mk-stage-inner { position: static !important; }
}

html:not(.js) .mk-pane { display: block; margin-bottom: 34px; }
html:not(.js) .mk-tabs { display: none; }
html:not(.js) .mk-progress { display: none; }

/* Progress rail under the tab row — shows how far through the section
   you are, so the advance never feels like something jumped. */
.mk-progress {
	height: 2px;
	background: var(--ss-border);
	border-radius: 2px;
	overflow: hidden;
	margin: -8px 0 18px;
	max-width: 460px;
}

.mk-progress > i {
	display: block;
	height: 100%;
	width: 0;
	background: linear-gradient(90deg, var(--ss-accent), var(--ss-green));
	border-radius: 2px;
}

.mk-tab { position: relative; }

/* Small counter so the reader knows how many stages remain. */
.mk-stage-count {
	font-size: 11.5px;
	color: var(--ss-muted);
	margin-bottom: 10px;
	letter-spacing: .04em;
}