/* ============================================================================
   pramaanid.cloud — polish layer.  Loaded AFTER main.css.

   Purpose: cohesion, flow, wayfinding and cross-browser motion, without
   touching the substance of the page.  Everything here is external CSS
   (the site CSP is `style-src 'self'` — no inline <style>, no style="" ),
   and every animation is PROGRESSIVE:

     * motion.js adds `js-reveal` to <html> as its first act.  Only
       `.js-reveal .reveal:not(.is-in)` is ever hidden, so if the script is
       blocked, 404s or throws, the page is exactly the fully-visible page it
       is today.  The hero is never gated.
     * prefers-reduced-motion removes every transition and reveal offset.

   The Editorial treatment is the baseline in this file.  The Cinematic
   treatment is expressed ONLY as `[data-motion="cinematic"]` overrides at the
   foot — the two variants never diverge structurally, they are one page under
   one <body data-motion> switch.
   ========================================================================== */

/* ---------- 1. spacing: close the empty voids ----------------------------- */
/* The bands were padded up to 9rem top+bottom against sparse content, which
   read as large white expanses.  A tighter fluid scale keeps the air without
   the void, and shortens a very long page. */
:root {
	--band-y: clamp(3.5rem, 2.4rem + 5vw, 6.5rem);
	--nav-h: 4rem;
}
.band--tight { --band-y: clamp(2.5rem, 1.9rem + 2.6vw, 4rem); }

/* Sticky-nav offset so an in-page jump doesn't hide the heading under the bar. */
section[id] { scroll-margin-top: calc(var(--nav-h) + 1rem); }

/* ---------- 2. connective tissue between bands ---------------------------- */
/* A hairline gradient seam carries the eye across every dark→light and
   light→dark cut, so the sections read as one flow rather than stacked slabs. */
.band + .band { position: relative; }
.band--ink, .band--deep, .band--close { border-top: 1px solid var(--rule-dark); }
.band--paper { border-top: 1px solid color-mix(in oklab, var(--on-paper) 8%, transparent); }
.band--ink::before, .band--deep::before, .band--paper::before, .band--close::before {
	content: ""; position: absolute; inset-inline: 0; top: 0; height: 1px;
	background: linear-gradient(90deg, transparent,
		color-mix(in oklab, var(--sky) 55%, transparent) 20%,
		color-mix(in oklab, var(--jade) 55%, transparent) 50%,
		color-mix(in oklab, var(--spring) 55%, transparent) 80%, transparent);
	opacity: .32; pointer-events: none;
}
.band { position: relative; }

/* ---------- 3. band rhythm: break the twin dark bands --------------------- */
/* #proof and #agents are two consecutive dark bands.  Rather than flip one to
   paper (which would create a paper-twin with the comparison band that
   follows), #agents gets a distinct deep, navy-tinted ground so the rhythm
   varies without breaking the alternation elsewhere.  Its cards stay dark. */
.band--deep {
	background:
		radial-gradient(120% 90% at 50% -10%, color-mix(in oklab, var(--navy) 62%, var(--ink)), var(--ink) 62%);
	color: var(--on-ink);
}
.band--deep .card {
	background: color-mix(in oklab, var(--navy) 42%, transparent);
	border-color: color-mix(in oklab, var(--sky) 16%, var(--rule-dark));
}

/* ---------- 4. reveal on scroll (cross-browser, via motion.js) ------------ */
/* Replaces the Chromium-only `animation-timeline: view()` reveal in main.css:
   an IntersectionObserver toggles `.is-in`.  Where main.css also targets these
   nodes with a scroll-timeline animation, disable it under js-reveal so the two
   never fight; where JS is absent, main.css's @supports block still runs in
   Chromium as the fallback. */
@media (prefers-reduced-motion: no-preference) {
	@supports (animation-timeline: view()) {
		.js-reveal .band .sec, .js-reveal .band .product, .js-reveal .band .cards,
		.js-reveal .band .steps, .js-reveal .band .cmp, .js-reveal .band .facts {
			animation: none;
		}
	}

	/* solo elements rise as one */
	.js-reveal .reveal {
		opacity: 0; transform: translateY(18px);
		transition: opacity .7s var(--ease), transform .7s var(--ease);
	}
	.js-reveal .reveal.is-in { opacity: 1; transform: none; }

	/* grids: the container reveals, its children stagger in */
	.js-reveal .reveal-grid > * {
		opacity: 0; transform: translateY(18px);
		transition: opacity .6s var(--ease), transform .6s var(--ease);
	}
	.js-reveal .reveal-grid.is-in > * { opacity: 1; transform: none; }
	.js-reveal .reveal-grid.is-in > *:nth-child(1) { transition-delay: 0s; }
	.js-reveal .reveal-grid.is-in > *:nth-child(2) { transition-delay: .07s; }
	.js-reveal .reveal-grid.is-in > *:nth-child(3) { transition-delay: .14s; }
	.js-reveal .reveal-grid.is-in > *:nth-child(4) { transition-delay: .21s; }
	.js-reveal .reveal-grid.is-in > *:nth-child(5) { transition-delay: .28s; }
	.js-reveal .reveal-grid.is-in > *:nth-child(6) { transition-delay: .35s; }
}

/* ---------- 5. hero: a first-paint lift + a scroll cue ------------------- */
@media (prefers-reduced-motion: no-preference) {
	.js-reveal .hero__gloss,
	.js-reveal .hero .h1,
	.js-reveal .hero .lede,
	.js-reveal .hero .actions,
	.js-reveal .hero .trust {
		animation: heroRise .8s var(--ease) both;
	}
	.js-reveal .hero .h1 { animation-delay: .06s; }
	.js-reveal .hero .lede { animation-delay: .14s; }
	.js-reveal .hero .actions { animation-delay: .22s; }
	.js-reveal .hero .trust { animation-delay: .30s; }
	@keyframes heroRise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
}

/* the word "trust" in the headline gets a slow gradient shimmer */
@media (prefers-reduced-motion: no-preference) {
	.hero .grad {
		background-size: 220% 100%;
		animation: gradShift 9s var(--ease) infinite alternate;
	}
	@keyframes gradShift { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }
}

/* scroll affordance under the hero */
.hero__cue {
	display: inline-flex; align-items: center; gap: .5rem; margin-top: 2.6rem;
	color: var(--on-ink-dim); font-family: var(--mono); font-size: .68rem;
	letter-spacing: .16em; text-transform: uppercase; text-decoration: none;
}
.hero__cue svg { width: 16px; height: 16px; stroke: var(--jade); fill: none; stroke-width: 1.8; }
.hero__cue:hover { color: var(--on-ink); }
@media (prefers-reduced-motion: no-preference) {
	.hero__cue svg { animation: cueBob 1.8s var(--ease) infinite; }
	@keyframes cueBob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(4px); } }
}

/* ---------- 6. scroll-progress bar --------------------------------------- */
.progress {
	position: fixed; inset: 0 0 auto 0; height: 2px; z-index: 60;
	transform: scaleX(var(--p, 0)); transform-origin: 0 50%;
	background: linear-gradient(90deg, var(--sky), var(--jade) 55%, var(--spring));
	pointer-events: none;
}
@media (prefers-reduced-motion: reduce) { .progress { display: none; } }

/* ---------- 7. wayfinding: scroll-spy on the sticky nav ------------------- */
.nav__links a { position: relative; transition: color .25s var(--ease); }
.nav__links a::after {
	content: ""; position: absolute; left: 0; right: 100%; bottom: -.35rem; height: 2px;
	border-radius: 2px; background: linear-gradient(90deg, var(--sky), var(--jade));
	transition: right .3s var(--ease);
}
.nav__links a:hover::after,
.nav__links a[aria-current="true"]::after { right: 0; }
.nav__links a[aria-current="true"] { color: var(--on-ink); }

/* ---------- 8. mobile navigation (there was none) ------------------------ */
/* main.css hides .nav__links entirely below 820px with no replacement.  A
   hamburger toggles a dropdown panel; the <a> elements stay inside
   .nav__links (proof-check reads that container's href order). */
.nav__toggle {
	display: none; align-items: center; justify-content: center;
	width: 42px; height: 42px; border-radius: 10px;
	background: transparent; border: 1px solid var(--rule-dark); color: var(--on-ink);
	cursor: pointer; padding: 0;
}
.nav__toggle svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.nav__toggle .i-close { display: none; }
.nav.is-open .nav__toggle .i-open { display: none; }
.nav.is-open .nav__toggle .i-close { display: block; }

/* Between ~920px and ~1100px the eight links plus brand and Sign in no longer
   fit on one line and the bar silently grew to two rows. Tighten the row first,
   and fall back to the menu below 920px rather than ship a wrapped nav. */
@media (max-width: 1100px) {
	.nav__links { gap: .85rem; }
	.nav__links a { font-size: .86rem; }
}
@media (max-width: 920px) {
	.nav__toggle { display: inline-flex; }
	.nav__links {
		display: flex; flex-direction: column; gap: 0;
		position: absolute; inset: 100% 0 auto 0;
		/* OPAQUE, deliberately.  A translucent panel over the hero let the
		   headline show through between the links and the menu became hard to
		   read — a dropdown is a surface, not a glass pane. */
		background: var(--ink);
		border-bottom: 1px solid var(--rule-dark);
		box-shadow: 0 24px 48px -24px rgba(0, 0, 0, .8);
		padding: .5rem 0 1rem;
		clip-path: inset(0 0 100% 0); opacity: 0; pointer-events: none;
		transition: clip-path .35s var(--ease), opacity .25s var(--ease);
	}
	.nav.is-open .nav__links { clip-path: inset(0 0 0 0); opacity: 1; pointer-events: auto; }
	.nav__links a { padding: .85rem 1.25rem; font-size: 1rem; }
	.nav__links a::after { display: none; }
	.nav__links a[aria-current="true"] {
		background: color-mix(in oklab, var(--sky) 10%, transparent);
		box-shadow: inset 3px 0 0 var(--sky);
	}
	@media (prefers-reduced-motion: reduce) { .nav__links { transition: none; } }
}

/* ---------- 9. component lift: hover/interaction consistency -------------- */
.feats li { transition: background .3s var(--ease); }
.feats li:hover { background: color-mix(in oklab, var(--blue) 4%, #fff); }
.steps li { transition: border-color .3s var(--ease); }
.steps li:hover { border-top-color: color-mix(in oklab, var(--sky) 60%, transparent); }
.band--paper .steps li:hover { border-top-color: color-mix(in oklab, var(--blue-aa) 45%, transparent); }
.cmp__row:not(.cmp__row--head) { transition: background .25s var(--ease); }
.cmp__row:not(.cmp__row--head):hover { background: color-mix(in oklab, var(--blue) 4%, #fff); }
.facts > div { transition: background .3s var(--ease); }

/* the leaders facts deserve a touch more presence — they are the proof numbers */
#leaders .facts dt { color: var(--sky); }
#leaders .facts dd { color: var(--on-ink); }

/* ============================================================================
   CINEMATIC overrides — active only under <body data-motion="cinematic">.
   These differ AT REST (not only in motion): a larger hero, a section rail,
   heavier chrome — so the two treatments are distinguishable in a still.
   ========================================================================== */

/* bigger hero type and emblem */
[data-motion="cinematic"] .hero { padding-top: clamp(4.5rem, 2rem + 11vw, 10rem); }
[data-motion="cinematic"] .h1 { font-size: clamp(3rem, 1.7rem + 5.6vw, 6.4rem); }
[data-motion="cinematic"] .hero .lede { font-size: clamp(1.1rem, 1rem + .5vw, 1.4rem); max-width: 60ch; }
[data-motion="cinematic"] .emblem img { width: min(70%, 300px); }

/* a live, breathing gradient field behind the hero */
[data-motion="cinematic"] .hero::before { filter: blur(14px); opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
	[data-motion="cinematic"] .hero::before { animation: mesh 18s var(--ease) infinite alternate; }
	@keyframes mesh {
		from { transform: translate3d(-2%, -1%, 0) scale(1.02); }
		to   { transform: translate3d(3%, 2%, 0) scale(1.08); }
	}
	[data-motion="cinematic"] .emblem__rings { animation-duration: 30s; }
}

/* stronger reveal travel + a hint of scale */
@media (prefers-reduced-motion: no-preference) {
	[data-motion="cinematic"].js-reveal .reveal,
	[data-motion="cinematic"].js-reveal .reveal-grid > * {
		transform: translateY(30px) scale(.985);
		transition: opacity .8s var(--ease), transform .8s var(--ease);
	}
	[data-motion="cinematic"].js-reveal .reveal.is-in,
	[data-motion="cinematic"].js-reveal .reveal-grid.is-in > * { transform: none; }
	[data-motion="cinematic"].js-reveal .reveal-grid.is-in > *:nth-child(2) { transition-delay: .10s; }
	[data-motion="cinematic"].js-reveal .reveal-grid.is-in > *:nth-child(3) { transition-delay: .20s; }
	[data-motion="cinematic"].js-reveal .reveal-grid.is-in > *:nth-child(4) { transition-delay: .30s; }
	[data-motion="cinematic"].js-reveal .reveal-grid.is-in > *:nth-child(5) { transition-delay: .40s; }
	[data-motion="cinematic"].js-reveal .reveal-grid.is-in > *:nth-child(6) { transition-delay: .50s; }
}

/* thicker progress bar */
[data-motion="cinematic"] .progress { height: 3px; box-shadow: 0 0 12px color-mix(in oklab, var(--sky) 60%, transparent); }

/* a fixed section-progress rail (right edge, desktop only) */
.rail { display: none; }
[data-motion="cinematic"] .rail {
	display: grid; gap: .85rem; position: fixed; z-index: 45;
	right: clamp(.9rem, .2rem + 1vw, 1.6rem); top: 50%; transform: translateY(-50%);
}
[data-motion="cinematic"] .rail a {
	width: 10px; height: 10px; border-radius: 50%;
	background: color-mix(in oklab, var(--on-ink) 26%, transparent);
	border: 1px solid var(--rule-dark); transition: all .3s var(--ease); position: relative;
}
[data-motion="cinematic"] .rail a:hover { background: var(--sky); transform: scale(1.25); }
[data-motion="cinematic"] .rail a[aria-current="true"] {
	background: linear-gradient(180deg, var(--sky), var(--jade));
	box-shadow: 0 0 0 4px color-mix(in oklab, var(--sky) 20%, transparent);
}
[data-motion="cinematic"] .rail a[aria-current="true"]::after {
	content: attr(data-label); position: absolute; right: 20px; top: 50%; transform: translateY(-50%);
	white-space: nowrap; font-family: var(--mono); font-size: .62rem; letter-spacing: .12em;
	text-transform: uppercase; color: var(--on-ink-dim);
}
@media (max-width: 1180px) { [data-motion="cinematic"] .rail { display: none; } }
@media (prefers-reduced-motion: reduce) { [data-motion="cinematic"] .rail a { transition: none; } }

/* cinematic cards lift harder */
[data-motion="cinematic"] .card:hover { transform: translateY(-6px); }
[data-motion="cinematic"] .product { box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 40px 80px -40px rgba(16,24,40,.5); }

/* ---- 10. section headers: occupy the width instead of stranding it ------- */
/* The real source of the "empty voids": .sec is capped at 62ch and .sec--wide
   at 74ch, left-aligned inside an 1180px shell, so on a desktop roughly 40% of
   the width above every card grid was dead space — and the heading and its lede
   stacked, spending vertical room to do it.  Setting the two side by side fills
   the band horizontally AND shortens it.  Applied only to headers that are
   exactly eyebrow + heading + lede (marked sec--split in the markup). */
@media (min-width: 1000px) {
	.sec--split {
		max-width: none;
		display: grid;
		grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
		column-gap: clamp(2rem, 1rem + 3vw, 4.5rem);
		align-items: start;
	}
	.sec--split > .eyebrow { grid-column: 1; grid-row: 1; }
	.sec--split > .h2      { grid-column: 1; grid-row: 2; }
	.sec--split > .lede    { grid-column: 2; grid-row: 2; margin-top: .55rem; max-width: 52ch; }
}

/* main.css hides .nav__links at 820px; the menu now takes over at 920px, so the
   two breakpoints must agree or there is a 100px band with neither. */
@media (max-width: 920px) and (min-width: 821px) {
	.nav__links { display: flex; }
}

/* ---------- 11. the proof block (replaces the five-screenshot reel) --------
 * The reel was five browser captures with pinned callouts: 30% of the page,
 * 700 lines of its own CSS/JS and 820K of images, and it asked a chief
 * executive to read `cnf.jkt zw7s6VYi4NM4OPNE8…` off a screenshot. The whole
 * argument is one sentence — the same token, accepted on its own device and
 * refused anywhere else — so it is now stated once, large, in DOM text that
 * reflows. The live lab remains the evidence for anyone who wants to run it.
 *
 * --deny/--allow are carried over from reel.css verbatim so the allow/refuse
 * colour language of the site does not change under the reader. .sr-only moved
 * here from reel.css for the same reason: the section rail uses it, and the
 * rail must not start leaking visible labels when reel.css is deleted. */
:root { --deny: #ff8f8f; --allow: #57e39b; }

.sr-only {
	position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

.split__pass { text-align: center; color: var(--on-ink-dim); margin: 0 0 1.4rem; font-size: .95rem; }
.split__chip {
	display: inline-block; font-family: var(--mono); font-size: .74rem; letter-spacing: .12em;
	text-transform: uppercase; color: var(--on-ink);
	border: 1px solid var(--rule-dark); border-radius: 999px; padding: .4rem .9rem;
	background: color-mix(in oklab, var(--slate) 55%, transparent); margin-right: .6rem;
}

.lanes { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.1rem; }
.lane {
	border: 1px solid var(--rule-dark); border-radius: var(--radius);
	padding: 1.6rem 1.5rem; position: relative; overflow: hidden;
	background: color-mix(in oklab, var(--slate) 45%, transparent);
	transition: transform .3s var(--ease), border-color .3s var(--ease);
}
.lane::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--lane); }
.lane:hover { transform: translateY(-3px); border-color: color-mix(in oklab, var(--lane) 45%, transparent); }
.lane--allow { --lane: var(--allow); }
.lane--deny { --lane: var(--deny); }

.lane__code {
	font-family: var(--display); font-weight: 700; font-size: clamp(2.6rem, 1.8rem + 3vw, 4rem);
	line-height: 1; margin: 0; color: var(--lane); letter-spacing: -.02em;
}
.lane__verdict { font-family: var(--display); font-weight: 700; font-size: 1.3rem; margin: .3rem 0 .8rem; color: var(--on-ink); }
.lane__who {
	font-family: var(--mono); font-size: .7rem; letter-spacing: .13em; text-transform: uppercase;
	color: var(--on-ink-dim); margin: 0 0 .6rem;
}
.lane__why { margin: 0; font-size: .95rem; line-height: 1.6; color: var(--on-ink-dim); }

.split__note {
	margin: 1.6rem auto 0; max-width: 68ch; text-align: center;
	font-size: 1.02rem; line-height: 1.65; color: var(--on-ink);
}
.split .actions { justify-content: center; margin-top: 1.8rem; }
.split__fine {
	margin: 1.6rem auto 0; max-width: 72ch; text-align: center;
	font-size: .84rem; line-height: 1.6; color: var(--on-ink-dim);
}
