/* =========================================================================
   Heuriq landing — brand layer
   Palette + type mirror docs/design-system.md (indigo #4F46E5 / violet #7C3AED,
   slate neutrals, Inter). Hero echoes the product login gradient.
   ========================================================================= */

:root {
	--hq-brand: #4f46e5;          /* indigo-600  */
	--hq-brand-hover: #4338ca;    /* indigo-700  */
	--hq-accent: #7c3aed;         /* violet-600  */
	--hq-ink: #0f172a;            /* slate-900   */
	--hq-ink-2: #334155;          /* slate-700   */
	--hq-muted: #64748b;          /* slate-500   */
	--hq-line: #e2e8f0;           /* slate-200   */
	--hq-surface: #f8fafc;        /* slate-50    */
	--hq-white: #ffffff;
	--hq-radius: 14px;
	--hq-shadow: 0 1px 2px rgba(15, 23, 42, .04);
	--hq-shadow-lg: 0 18px 40px -12px rgba(15, 23, 42, .18);
	--hq-maxw: 1120px;
}

/* Reset within the landing scope */
body.heuriq-landing {
	margin: 0;
	font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	color: var(--hq-ink);
	background: var(--hq-white);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	line-height: 1.6;
}
body.heuriq-landing * { box-sizing: border-box; }
body.heuriq-landing a { text-decoration: none; }
body.heuriq-landing h1,
body.heuriq-landing h2,
body.heuriq-landing h3 { margin: 0; letter-spacing: -0.02em; line-height: 1.12; }

.hq-container {
	width: 100%;
	max-width: var(--hq-maxw);
	margin: 0 auto;
	padding: 0 24px;
}

/* ----- Buttons ----------------------------------------------------------- */
.hq-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-weight: 600;
	font-size: 15px;
	line-height: 1;
	padding: 12px 20px;
	border-radius: 10px;
	background: var(--hq-brand);
	color: #fff;
	border: 1px solid transparent;
	box-shadow: 0 6px 20px -6px rgba(79, 70, 229, .55);
	transition: background .15s ease, transform .15s ease, box-shadow .15s ease;
	cursor: pointer;
}
.hq-btn:hover { background: var(--hq-brand-hover); transform: translateY(-1px); }
.hq-btn--lg { padding: 15px 26px; font-size: 16px; }
.hq-btn--sm { padding: 9px 15px; font-size: 14px; box-shadow: none; }
.hq-btn--ghost {
	background: transparent;
	color: #fff;
	border-color: rgba(255, 255, 255, .28);
	box-shadow: none;
}
.hq-btn--ghost:hover { background: rgba(255, 255, 255, .08); }

/* ----- Top bar ----------------------------------------------------------- */
.hq-topbar {
	position: absolute;
	top: 0; left: 0; right: 0;
	z-index: 10;
	padding: 18px 0;
}
.hq-topbar__inner { display: flex; align-items: center; justify-content: space-between; }
/* Logo — monochrome black PNG rendered white for dark surfaces. */
.hq-logo-link { display: inline-flex; align-items: center; }
.hq-logo {
	height: 30px;
	width: auto;
	display: block;
	filter: brightness(0) invert(1); /* black artwork -> crisp white */
}
.hq-topnav { display: flex; align-items: center; gap: 28px; }
.hq-topnav > a:not(.hq-btn) {
	font-size: 15px;
	font-weight: 500;
	color: rgba(255, 255, 255, .72);
	transition: color .15s ease;
}
.hq-topnav > a:not(.hq-btn):hover { color: #fff; }

/* ----- Hero -------------------------------------------------------------- */
.hq-hero {
	position: relative;
	overflow: hidden;
	padding: 168px 0 120px;
	background:
		radial-gradient(ellipse at 60% 0%, #3730a3 0%, #1e1b4b 38%, #0f0c1d 68%, #030712 100%);
	color: #fff;
	text-align: center;
}
.hq-hero__glow {
	position: absolute;
	border-radius: 50%;
	filter: blur(80px);
	pointer-events: none;
}
.hq-hero__glow--1 { top: -120px; left: -120px; width: 480px; height: 480px; background: rgba(99, 102, 241, .30); }
.hq-hero__glow--2 { bottom: -140px; right: -120px; width: 420px; height: 420px; background: rgba(124, 58, 237, .25); }
.hq-hero__inner { position: relative; z-index: 1; max-width: 820px; }
/* Explicit light colors — Astra sets a dark default on h1/h2 that we must override. */
.heuriq-landing .hq-hero__title,
.heuriq-landing .hq-cta__title { color: #fff; }
.heuriq-landing .hq-section__title { color: var(--hq-ink); }
.heuriq-landing .hq-card__title,
.heuriq-landing .hq-step__name { color: var(--hq-ink); }
.hq-eyebrow {
	margin: 0 0 18px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #a5b4fc; /* indigo-300 */
}
.hq-hero__title { font-size: clamp(40px, 6vw, 68px); font-weight: 800; }
.hq-hero__sub {
	margin: 22px auto 0;
	max-width: 640px;
	font-size: clamp(17px, 2vw, 20px);
	color: rgba(226, 232, 240, .82);
}
.hq-hero__cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 34px; }
.hq-hero__note { margin-top: 22px; font-size: 14px; color: rgba(226, 232, 240, .5); }

/* ----- Sections ---------------------------------------------------------- */
.hq-section { padding: 96px 0; }
.hq-section--soft { background: var(--hq-surface); border-block: 1px solid var(--hq-line); }
.hq-section__title { font-size: clamp(28px, 4vw, 40px); font-weight: 700; max-width: 760px; }
.hq-section__title em { font-style: normal; color: var(--hq-brand); }
.hq-section__lead {
	margin: 20px 0 0;
	max-width: 620px;
	font-size: 18px;
	color: var(--hq-ink-2);
}
.hq-eyebrow--dark { color: var(--hq-accent); margin-bottom: 14px; }

/* Wedge stats */
.hq-stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	margin-top: 56px;
}
.hq-stat {
	padding: 28px;
	background: #fff;
	border: 1px solid var(--hq-line);
	border-radius: var(--hq-radius);
	box-shadow: var(--hq-shadow);
}
.hq-stat__num { font-size: 34px; font-weight: 800; color: var(--hq-brand); letter-spacing: -0.02em; }
.hq-stat__label { margin-top: 10px; font-size: 15px; color: var(--hq-muted); }

/* Products grid */
.hq-grid--products {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 22px;
	margin-top: 44px;
}
.hq-card {
	padding: 28px;
	background: #fff;
	border: 1px solid var(--hq-line);
	border-radius: var(--hq-radius);
	box-shadow: var(--hq-shadow);
	transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.hq-card:hover { box-shadow: var(--hq-shadow-lg); transform: translateY(-3px); border-color: #c7d2fe; }
.hq-card__title { font-size: 20px; font-weight: 700; }
.hq-card__title::before {
	content: "";
	display: block;
	width: 34px; height: 3px;
	margin-bottom: 16px;
	border-radius: 3px;
	background: linear-gradient(90deg, var(--hq-brand), var(--hq-accent));
}
.hq-card__desc { margin: 12px 0 0; font-size: 15px; color: var(--hq-ink-2); }

/* Steps */
.hq-steps {
	list-style: none;
	margin: 44px 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 20px;
	counter-reset: none;
}
.hq-step { display: flex; flex-direction: column; gap: 8px; padding-top: 20px; border-top: 2px solid var(--hq-line); }
.hq-step__k { font-size: 13px; font-weight: 700; color: var(--hq-accent); letter-spacing: 0.04em; }
.hq-step__name { font-size: 18px; font-weight: 700; }
.hq-step__desc { font-size: 14px; color: var(--hq-muted); }

/* ----- Closing CTA ------------------------------------------------------- */
.hq-cta {
	position: relative;
	overflow: hidden;
	padding: 104px 0;
	text-align: center;
	background: radial-gradient(ellipse at 50% 120%, #4338ca 0%, #1e1b4b 45%, #0f0c1d 100%);
	color: #fff;
}
.hq-cta__glow {
	position: absolute; top: -160px; left: 50%; transform: translateX(-50%);
	width: 600px; height: 360px; border-radius: 50%;
	background: rgba(124, 58, 237, .28); filter: blur(90px); pointer-events: none;
}
.hq-cta__inner { position: relative; z-index: 1; }
.hq-cta__title { font-size: clamp(30px, 4vw, 44px); font-weight: 800; }
.hq-cta__sub { margin: 18px auto 30px; max-width: 520px; font-size: 18px; color: rgba(226, 232, 240, .78); }

/* ----- Request-access form ---------------------------------------------- */
.hq-form { max-width: 560px; margin: 8px auto 0; text-align: left; }
.hq-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.hq-field { display: block; margin-bottom: 16px; }
.hq-field__label { display: block; margin-bottom: 7px; font-size: 13px; font-weight: 500; color: rgba(226, 232, 240, .85); }
.hq-field__label i { color: #f0abfc; font-style: normal; margin-left: 2px; }
.hq-field__label em { color: rgba(226, 232, 240, .5); font-style: normal; }
.hq-input {
	width: 100%;
	padding: 12px 14px;
	font: inherit;
	font-size: 15px;
	color: #fff;
	background: rgba(255, 255, 255, .07);
	border: 1px solid rgba(255, 255, 255, .16);
	border-radius: 10px;
	transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.hq-input::placeholder { color: rgba(226, 232, 240, .38); }
.hq-input:focus {
	outline: none;
	border-color: #a5b4fc;
	background: rgba(255, 255, 255, .10);
	box-shadow: 0 0 0 3px rgba(129, 140, 248, .25);
}
textarea.hq-input { resize: vertical; min-height: 84px; }
.hq-form__submit { width: 100%; margin-top: 6px; }
.hq-form__fineprint { margin: 14px 0 0; text-align: center; font-size: 13px; color: rgba(226, 232, 240, .45); }
.hq-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.hq-form__banner {
	max-width: 560px;
	margin: 6px auto 0;
	padding: 14px 18px;
	border-radius: 12px;
	font-size: 15px;
	font-weight: 500;
}
.hq-form__banner--ok { background: rgba(16, 185, 129, .15); border: 1px solid rgba(16, 185, 129, .4); color: #6ee7b7; }
.hq-form__banner--err { background: rgba(239, 68, 68, .14); border: 1px solid rgba(239, 68, 68, .4); color: #fca5a5; }

/* ----- Footer ------------------------------------------------------------ */
.hq-footer { padding: 40px 0; background: #030712; color: rgba(226, 232, 240, .6); }
.hq-footer__inner { display: flex; align-items: center; gap: 16px 22px; flex-wrap: wrap; }
.hq-logo--sm { height: 24px; }
.hq-footer__tag { font-size: 14px; }
.hq-footer__links { display: flex; gap: 18px; margin-left: auto; }
.hq-footer__links a { font-size: 14px; color: rgba(226, 232, 240, .65); transition: color .15s ease; }
.hq-footer__links a:hover { color: #fff; }
.hq-footer__meta { width: 100%; font-size: 13px; color: rgba(226, 232, 240, .4); }

/* ----- Solid top bar (legal pages — no dark hero behind it) -------------- */
.hq-topbar--solid {
	position: static;
	background: linear-gradient(90deg, #1e1b4b 0%, #312e81 100%);
	box-shadow: 0 1px 0 rgba(255, 255, 255, .06);
}

/* ----- Legal pages ------------------------------------------------------- */
.hq-legalwrap { padding: 56px 0 88px; background: var(--hq-white); }
.hq-legalwrap__inner { max-width: 820px; }
.hq-legalwrap__title { font-size: clamp(30px, 4vw, 40px); font-weight: 800; color: var(--hq-ink); }
.hq-legalwrap__body { margin-top: 8px; color: var(--hq-ink-2); font-size: 16px; }
.hq-legalwrap__body h2 {
	margin: 40px 0 12px;
	font-size: 21px;
	font-weight: 700;
	color: var(--hq-ink);
	letter-spacing: -0.01em;
}
.hq-legalwrap__body h3 { margin: 26px 0 8px; font-size: 17px; font-weight: 600; color: var(--hq-ink); }
.hq-legalwrap__body p { margin: 0 0 14px; }
.hq-legalwrap__body ul,
.hq-legalwrap__body ol { margin: 0 0 16px; padding-left: 22px; }
.hq-legalwrap__body li { margin: 0 0 7px; }
.hq-legalwrap__body a { color: var(--hq-brand); text-decoration: underline; }
.hq-legalwrap__body strong { color: var(--hq-ink); }
.hq-legalwrap__body .hq-legal-meta {
	margin-bottom: 28px;
	padding: 14px 18px;
	background: var(--hq-surface);
	border: 1px solid var(--hq-line);
	border-radius: 12px;
	font-size: 14px;
	color: var(--hq-muted);
}
.hq-legalwrap__body address { font-style: normal; }

/* ----- Responsive -------------------------------------------------------- */
@media (max-width: 880px) {
	.hq-stats, .hq-grid--products { grid-template-columns: 1fr 1fr; }
	.hq-steps { grid-template-columns: 1fr 1fr; }
	.hq-hero { padding: 140px 0 90px; }
	.hq-section { padding: 72px 0; }
	.hq-topnav > a:not(.hq-btn) { display: none; }
}
@media (max-width: 560px) {
	.hq-stats, .hq-grid--products, .hq-steps { grid-template-columns: 1fr; }
	.hq-form__row { grid-template-columns: 1fr; gap: 0; }
	.hq-footer__meta { margin-left: 0; width: 100%; }
}

/* =========================================================================
   Pricing page (template-pricing.php)
   ========================================================================= */
.hq-hero--short { padding: 150px 0 78px; }

.hq-billtoggle {
	display: inline-flex; align-items: center; margin-top: 30px;
	background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .18);
	border-radius: 999px; padding: 4px;
}
.hq-billtoggle__opt {
	border: 0; background: transparent; color: rgba(226, 232, 240, .8);
	font: inherit; font-weight: 600; font-size: 14px; padding: 8px 18px;
	border-radius: 999px; cursor: pointer; transition: background .15s ease, color .15s ease;
}
.hq-billtoggle__opt span { opacity: .85; margin-left: 4px; }
.hq-billtoggle__opt.is-on { background: #fff; color: var(--hq-ink); }

.hq-plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.hq-plan {
	display: flex; flex-direction: column; padding: 28px;
	background: #fff; border: 1px solid var(--hq-line); border-radius: var(--hq-radius);
	box-shadow: var(--hq-shadow);
}
.hq-plan--pop { border-color: #c7d2fe; box-shadow: 0 0 0 1px #c7d2fe, var(--hq-shadow-lg); }
.hq-plan__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.hq-plan__name { font-size: 19px; font-weight: 700; color: var(--hq-ink); }
.hq-plan__badge { background: #ede9fe; color: #6d28d9; font-size: 12px; font-weight: 600; border-radius: 999px; padding: 3px 11px; white-space: nowrap; }
.hq-plan__desc { margin: 8px 0 0; font-size: 14px; color: var(--hq-muted); min-height: 40px; }
.hq-plan__price { margin-top: 20px; display: flex; align-items: baseline; gap: 3px; flex-wrap: wrap; }
.hq-plan__amt { font-size: 32px; font-weight: 800; color: var(--hq-ink); letter-spacing: -.02em; }
.hq-plan__star { color: var(--hq-muted); font-weight: 700; font-size: 18px; text-decoration: none; }
.hq-plan__suffix { width: 100%; font-size: 13px; color: var(--hq-muted); min-height: 18px; }
.hq-plan__feats { list-style: none; margin: 20px 0 0; padding: 0; flex: 1; }
.hq-plan__feats li { position: relative; padding-left: 26px; margin-bottom: 11px; font-size: 14px; color: var(--hq-ink-2); }
.hq-plan__feats li::before {
	content: ""; position: absolute; left: 0; top: 3px; width: 16px; height: 16px;
	background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%237c3aed'%3E%3Cpath fill-rule='evenodd' d='M16.7 5.3a1 1 0 010 1.4l-7.5 7.5a1 1 0 01-1.4 0L3.3 9.7a1 1 0 011.4-1.4l3.3 3.3 6.8-6.3a1 1 0 011.4 0z' clip-rule='evenodd'/%3E%3C/svg%3E");
}
.hq-plan__cta { width: 100%; margin-top: 26px; }
.hq-btn--soft { background: #fff; color: var(--hq-ink); border-color: var(--hq-line); box-shadow: none; }
.hq-btn--soft:hover { background: var(--hq-surface); border-color: #c7d2fe; }
.hq-tax-note { margin: 28px 0 0; text-align: center; font-size: 12px; color: var(--hq-muted); }

/* Region select renders like the dark form inputs */
select.hq-input { appearance: none; -webkit-appearance: none; background-image: none; }
select.hq-input option { color: var(--hq-ink); }

@media (max-width: 880px) { .hq-plans { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .hq-plans { grid-template-columns: 1fr; } }
@media (max-width: 880px) { .hq-plans { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .hq-plans { grid-template-columns: 1fr; } }

/* ── Currency toggle + GST-inclusive line (INR pricing, 2026-08-02) ───────── */

/* Billing-interval and currency toggles sit side by side, wrapping on mobile.
   ⚠️ .hq-billtoggle carries `margin-top: 30px` from when it was the only element
   under the hero copy. Inside a flex row that margin applies to just that item
   and pushes it BELOW the currency toggle — align-items:center cannot undo it,
   because margins are part of the item's box. So the spacing moves to the
   container and the child margin is zeroed. */
.hq-toggles{
  display:flex; flex-wrap:wrap; gap:12px; justify-content:center; align-items:center;
  margin-top:30px;
}
.hq-toggles .hq-billtoggle{ margin-top:0; }

/* Padding, font-size and border must match .hq-billtoggle exactly, or the two
   pills render at different heights and look misaligned even once the margin
   is fixed. */
.hq-curtoggle{
  display:inline-flex; align-items:center; padding:4px;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18);
  border-radius:999px;
}
.hq-curtoggle__opt{
  border:0; background:transparent; color:rgba(226,232,240,.8);
  font:inherit; font-weight:600; font-size:14px; padding:8px 18px;
  border-radius:999px; cursor:pointer; transition:background .15s ease,color .15s ease;
}
.hq-curtoggle__opt.is-on{ background:#fff; color:var(--hq-ink); }
.hq-curtoggle__opt:focus-visible{ outline:2px solid #7c5cff; outline-offset:2px; }

/* The amount actually debited, under the ex-GST headline price. Hidden for USD
   (Paddle is merchant of record and applies each country's tax at checkout, so
   there is no rate to state) — the [hidden] rule keeps it from leaving a gap. */
.hq-plan__gross{
  margin:-6px 0 0; font-size:12px; line-height:1.4; color:rgba(255,255,255,.5);
}
.hq-plan__gross[hidden]{ display:none; }