/* ══════════════════════════════════════════════════════════════
   AN FULCRUM — the commerce surface.

   Built on the theme's existing tokens rather than beside them. The
   Liquid Glass Cobalt system is doing real work and this is not the
   place to replace it; what this file adds is one thing the rest of
   the site does not need — a page that is allowed to be loud.

   The loudness has a budget. The interference field is on a canvas,
   behind the content, and the content itself sits on flat surfaces
   with ordinary contrast, because everything on this page is either a
   price or a sentence explaining a price, and neither survives being
   hard to read. A pricing page that looks extraordinary and reads
   badly has failed at the only job it has.

   Mobile is the target, not the fallback. Everything below is written
   at 380px first and widened from there.
   ══════════════════════════════════════════════════════════════ */

.an-f {
	--an-f-ink:      #F2F4F1;
	--an-f-dim:      rgba(242, 244, 241, .62);
	--an-f-faint:    rgba(242, 244, 241, .38);
	--an-f-ground:   #0A1110;
	--an-f-panel:    rgba(255, 255, 255, .045);
	--an-f-panel-2:  rgba(255, 255, 255, .075);
	--an-f-line:     rgba(255, 255, 255, .11);
	--an-f-line-lit: rgba(255, 255, 255, .3);

	/* The one saturated hue on the page. Everything else is neutral so
	   that this reads as emphasis rather than as decoration. */
	--an-f-hot:      #4FE3B0;
	--an-f-hot-deep: #14C08A;

	--an-f-r:  14px;
	--an-f-r2: 10px;

	position: relative;
	color: var(--an-f-ink);
	background: var(--an-f-ground);
	padding: clamp(16px, 4vw, 40px) clamp(14px, 4vw, 40px) clamp(48px, 8vw, 96px);
	margin: 0;
	font-family: var(--an-font-ui, system-ui, sans-serif);
	overflow-x: clip;
}

/* ── the canvas ─────────────────────────────────────────────── */

.an-f-prism {
	position: relative;
	margin: 0 0 clamp(20px, 5vw, 40px);
	border-radius: var(--an-f-r);
	overflow: hidden;
	border: 1px solid var(--an-f-line);
	background: var(--an-f-ground);
}

.an-f-prism canvas {
	display: block;
	width: 100%;
	/* Height is set in script from the measured width. A CSS height here
	   would fight it and produce one reflow per resize. */
}

.an-f-prism figcaption {
	padding: 12px 14px 14px;
	font-size: 13px;
	line-height: 1.55;
	color: var(--an-f-dim);
	border-top: 1px solid var(--an-f-line);
	background: rgba(0, 0, 0, .25);
}

.an-f-prism-tip[hidden] {
	/* `display: flex` below beats the hidden attribute's own display:none, and
	   the symptom is an empty pill parked in the corner of the canvas on first
	   paint. Any component that styles display on an element it also toggles
	   with [hidden] needs this line. */
	display: none;
}

.an-f-prism-tip {
	position: absolute;
	z-index: 3;
	pointer-events: none;
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 7px 10px;
	border-radius: var(--an-f-r2);
	background: rgba(6, 12, 11, .93);
	border: 1px solid var(--an-f-line-lit);
	font-size: 12.5px;
	line-height: 1.35;
	max-width: 240px;
	box-shadow: 0 8px 28px rgba(0, 0, 0, .5);
}

.an-f-prism-tip b { font-weight: 600; }

.an-f-prism-tip span {
	font-family: var(--an-font-mono, ui-monospace, monospace);
	color: var(--an-f-hot);
	font-size: 12px;
}

/* ── currency toggle ────────────────────────────────────────── */

.an-f-cur {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0 0 clamp(18px, 4vw, 28px);
}

.an-f-cur-b {
	/* 44px is the floor. A control that changes every price on the page
	   and is 32px tall gets pressed by accident and mispressed by thumb. */
	min-height: 44px;
	min-width: 82px;
	padding: 0 16px;
	border-radius: 999px;
	border: 1px solid var(--an-f-line);
	background: var(--an-f-panel);
	color: var(--an-f-dim);
	font: inherit;
	font-size: 15px;
	font-weight: 500;
	cursor: pointer;
	transition: background var(--an-fast, 140ms), color var(--an-fast, 140ms), border-color var(--an-fast, 140ms);
}

.an-f-cur-b:hover { background: var(--an-f-panel-2); color: var(--an-f-ink); }

.an-f-cur-b.is-on {
	background: var(--an-f-hot);
	border-color: var(--an-f-hot);
	color: #05100C;
	font-weight: 600;
}

.an-f-cur-b:focus-visible {
	outline: 2px solid var(--an-f-hot);
	outline-offset: 2px;
}

.an-f-cur-note {
	flex: 1 1 100%;
	font-size: 13px;
	color: var(--an-f-faint);
	line-height: 1.5;
}

@media (min-width: 720px) {
	.an-f-cur-note { flex: 1 1 auto; max-width: 46ch; }
}

/* ── both prices in the DOM, CSS picks one ──────────────────────
   This is the whole no-reflow, cache-safe mechanism. Neither figure
   is ever written by script and neither is ever fetched. */

.an-f-m { display: none; }

/* Self-scoped first: a price element carries its own resolved currency, so the
   markup works wherever it is dropped — including on the two store pages, which
   have no .an-f wrapper and where every price was invisible until this existed. */
.an-f-price[data-an-cur="INR"] .an-f-m-inr { display: inline; }
.an-f-price[data-an-cur="USD"] .an-f-m-usd { display: inline; }

/* Page-level override second, so equal specificity resolves in its favour by
   source order and the toggle still changes every price on the page at once. */
.an-f[data-an-cur="INR"] .an-f-m-inr { display: inline; }
.an-f[data-an-cur="INR"] .an-f-m-usd { display: none; }
.an-f[data-an-cur="USD"] .an-f-m-usd { display: inline; }
.an-f[data-an-cur="USD"] .an-f-m-inr { display: none; }

/* Not the mono face, despite the rest of the site setting figures in it.
   A monospaced comma occupies a full digit's advance, so ₹2,299 renders as
   "₹2 , 299" — which reads as two numbers. The UI face with tabular figures
   still aligns column-wise between cards and sets the group separator tight. */
.an-f-price b {
	font-family: var(--an-font-ui, system-ui, sans-serif);
	font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2rem);
	font-weight: 600;
	letter-spacing: -.02em;
	line-height: 1.1;
	font-variant-numeric: tabular-nums;
}

.an-f-price i {
	display: block;
	font-style: normal;
	font-size: 12.5px;
	color: var(--an-f-faint);
	margin-top: 3px;
}

.an-f-price.is-quote {
	font-family: var(--an-font-mono, ui-monospace, monospace);
	font-size: 1.05rem;
	color: var(--an-f-dim);
}

/* ── the funnel ─────────────────────────────────────────────── */

.an-f-funnel { margin: 0 0 clamp(20px, 4vw, 32px); }

.an-f-funnel-q {
	margin: 0 0 12px;
	font-size: clamp(1.05rem, 1rem + .5vw, 1.3rem);
	font-weight: 600;
	letter-spacing: -.01em;
}

.an-f-funnel-row {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
}

@media (min-width: 560px) {
	.an-f-funnel-row { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
}

.an-f-fbtn {
	display: flex;
	align-items: center;
	gap: 9px;
	min-height: 52px;
	padding: 10px 13px;
	border-radius: var(--an-f-r2);
	border: 1px solid var(--an-f-line);
	background: var(--an-f-panel);
	color: var(--an-f-dim);
	font: inherit;
	font-size: 14.5px;
	text-align: left;
	cursor: pointer;
	transition: background var(--an-fast, 140ms), color var(--an-fast, 140ms), border-color var(--an-fast, 140ms);
}

.an-f-fbtn i {
	font-style: normal;
	font-size: 17px;
	line-height: 1;
	color: var(--an-f-faint);
	transition: color var(--an-fast, 140ms);
}

.an-f-fbtn span { min-width: 0; }

.an-f-fbtn:hover { background: var(--an-f-panel-2); color: var(--an-f-ink); }

.an-f-fbtn.is-on {
	background: rgba(79, 227, 176, .13);
	border-color: rgba(79, 227, 176, .45);
	color: var(--an-f-ink);
	font-weight: 500;
}

.an-f-fbtn.is-on i { color: var(--an-f-hot); }

.an-f-fbtn:focus-visible { outline: 2px solid var(--an-f-hot); outline-offset: 2px; }

/* ── panels and cards ───────────────────────────────────────── */

.an-f-panel[hidden] { display: none; }

.an-f-panel-h {
	margin: clamp(20px, 4vw, 32px) 0 12px;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--an-f-faint);
}

.an-f-cards {
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
}

@media (min-width: 700px) {
	.an-f-cards { grid-template-columns: repeat(auto-fit, minmax(288px, 1fr)); }
}

.an-f-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 18px 16px 16px;
	border-radius: var(--an-f-r);
	border: 1px solid var(--an-f-line);
	background: var(--an-f-panel);
	scroll-margin-top: 24px;
}

.an-f-card.is-badged {
	border-color: rgba(79, 227, 176, .42);
	background: linear-gradient(165deg, rgba(79, 227, 176, .12), rgba(255, 255, 255, .04) 62%);
}

.an-f-card.is-free { background: rgba(255, 255, 255, .028); }

/* Lit by a tap on the canvas. A jump that does not say where it landed
   makes the reader hunt for what moved. */
.an-f-card.is-lit {
	border-color: var(--an-f-hot);
	box-shadow: 0 0 0 3px rgba(79, 227, 176, .18);
}

@media (prefers-reduced-motion: no-preference) {
	.an-f-card { transition: border-color 200ms var(--an-ease, ease), box-shadow 200ms var(--an-ease, ease); }
}

.an-f-badge {
	align-self: flex-start;
	padding: 3px 9px;
	border-radius: 999px;
	background: var(--an-f-hot);
	color: #05100C;
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
}

.an-f-card-h {
	margin: 0;
	font-size: 1.06rem;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -.01em;
}

.an-f-card-price { margin: 2px 0 0; }

/* A sentence, so it is set like one. The mono face made "The parts come to
   ₹4,998" read as a code sample rather than as an argument. */
.an-f-card-saving {
	margin: 0;
	font-size: 13.5px;
	line-height: 1.55;
	color: var(--an-f-hot);
}

.an-f-card-saving .an-f-m { display: none; }
.an-f-card-saving[data-an-cur="INR"] .an-f-m-inr { display: inline; }
.an-f-card-saving[data-an-cur="USD"] .an-f-m-usd { display: inline; }
.an-f[data-an-cur="INR"] .an-f-card-saving .an-f-m-inr { display: inline; }
.an-f[data-an-cur="INR"] .an-f-card-saving .an-f-m-usd { display: none; }
.an-f[data-an-cur="USD"] .an-f-card-saving .an-f-m-usd { display: inline; }
.an-f[data-an-cur="USD"] .an-f-card-saving .an-f-m-inr { display: none; }

.an-f-card-sum {
	margin: 0;
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--an-f-dim);
}

.an-f-card-note {
	margin: 0;
	font-size: 13px;
	line-height: 1.55;
	color: var(--an-f-faint);
}

.an-f-card-act { margin-top: auto; padding-top: 4px; }

.an-f-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 46px;
	width: 100%;
	padding: 0 20px;
	border-radius: var(--an-f-r2);
	background: var(--an-f-hot);
	color: #05100C;
	font-weight: 600;
	font-size: 15.5px;
	text-decoration: none;
	border: 1px solid transparent;
}

.an-f-btn:hover { background: var(--an-f-hot-deep); color: #05100C; }

.an-f-btn:focus-visible { outline: 2px solid var(--an-f-ink); outline-offset: 2px; }

.an-f-btn.is-quiet {
	background: transparent;
	border-color: var(--an-f-line-lit);
	color: var(--an-f-ink);
}

.an-f-btn.is-quiet:hover { background: var(--an-f-panel-2); color: var(--an-f-ink); }

/* ── terms ──────────────────────────────────────────────────────
   A definition list and never a table. Six rows of commercial terms
   in a table is four columns too many for a 380px screen, and what a
   too-wide table does on a phone is truncate the value — which is how
   a tolerance band became unreadable on /hydro/. */

.an-f-terms {
	margin: 2px 0 0;
	padding: 12px;
	border-radius: var(--an-f-r2);
	background: rgba(0, 0, 0, .22);
	border: 1px solid var(--an-f-line);
	display: grid;
	gap: 9px;
	font-size: 13px;
}

.an-f-terms > div { display: grid; gap: 2px; }

@media (min-width: 480px) {
	.an-f-terms > div { grid-template-columns: 116px minmax(0, 1fr); gap: 10px; align-items: baseline; }
}

.an-f-terms dt {
	margin: 0;
	color: var(--an-f-faint);
	font-size: 12px;
	letter-spacing: .05em;
	text-transform: uppercase;
}

.an-f-terms dd {
	margin: 0;
	color: var(--an-f-dim);
	line-height: 1.55;
	/* Never truncate a commercial term. If it does not fit, it wraps. */
	overflow-wrap: anywhere;
}

/* ── after payment ──────────────────────────────────────────── */

.an-f-after {
	margin: clamp(32px, 6vw, 56px) 0 0;
	padding: 18px 16px;
	border-radius: var(--an-f-r);
	border: 1px solid var(--an-f-line);
	background: rgba(255, 255, 255, .028);
}

.an-f-after h3 {
	margin: 0 0 12px;
	font-size: 1.02rem;
	font-weight: 600;
}

.an-f-after ul {
	margin: 0;
	padding: 0 0 0 18px;
	display: grid;
	gap: 9px;
}

.an-f-after li {
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--an-f-dim);
}

.an-f-after-links {
	margin: 16px 0 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px 20px;
	font-size: 14.5px;
}

.an-f-after-links a { color: var(--an-f-hot); text-decoration: none; border-bottom: 1px solid rgba(79, 227, 176, .35); }
.an-f-after-links a:hover { border-bottom-color: var(--an-f-hot); }

.an-f-empty {
	padding: 20px;
	border-radius: var(--an-f-r);
	border: 1px solid var(--an-f-line);
	color: var(--an-f-dim);
	font-size: 15px;
	line-height: 1.6;
}

/* ── the interlinker, muzzled ───────────────────────────────────
   Something is auto-linking "crop" indiscriminately, including inside
   idioms — "hold a crop hostage" is figurative and linking it reads as
   spam to a reader and to a crawler. The suppression is enforced in PHP;
   this is the belt to that pair of braces, so a link that slips through
   at least stops looking like an invitation. */

.an-f a[class*="an-interlink"],
.an-f .an-glossary-link {
	color: inherit;
	text-decoration: none;
	border: 0;
	pointer-events: none;
}