/* =========================================================================
   VOCTOS AI Visibility Grader
   Design language lifted from voctos.com: Unbounded, lime #9BB725 primary,
   navy #0D172D, #EEF0F5 page, white cards at 30px radius, flat colour, no
   gradients. Everything is scoped under .aivg so it cannot leak into the theme.
   ========================================================================= */

.aivg {
	/* Brand */
	--aivg-lime: #9BB725;
	--aivg-lime-ink: #6E8412;
	--aivg-lime-soft: #F2F6DE;
	--aivg-navy: #0D172D;
	--aivg-navy-2: #0F1B36;
	--aivg-purple: #7616F4;

	/* Surfaces */
	--aivg-page: #EEF0F5;
	--aivg-card: #FFFFFF;
	--aivg-well: #F5F7FA;
	--aivg-line: #E2E6EE;
	--aivg-line-2: #EDF0F5;

	/* Text */
	--aivg-ink: #0D172D;
	--aivg-muted: #5C6B84;
	--aivg-dim: #94A3B8;
	--aivg-on-dark: #E8EDF5;
	--aivg-on-dark-dim: #94A3B8;

	/* Status */
	--aivg-ok: #0E9A63;
	--aivg-ok-fill: #00BB7E;
	--aivg-warn: #B87400;
	--aivg-warn-fill: #F5A524;
	--aivg-bad: #CE2C2C;
	--aivg-bad-fill: #E5484D;

	--aivg-r-card: 30px;
	--aivg-r-box: 20px;
	--aivg-r-btn: 10px;
	--aivg-font: "Unbounded", "Work Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

	/* The theme header is absolutely positioned and overlaps page content, so
	   the tool provides its own page frame rather than relying on the template. */
	box-sizing: border-box;
	padding: 30px !important;
	background: var(--aivg-page);
	color: var(--aivg-ink);
	font-family: var(--aivg-font);
	font-size: 15px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

.aivg *,
.aivg *::before,
.aivg *::after { box-sizing: border-box; }

.aivg p { margin: 0 0 1em; }
.aivg h2, .aivg h3, .aivg h4 { margin: 0; font-family: var(--aivg-font); color: var(--aivg-ink); }
/* :where() keeps this reset at zero specificity so classed lists below
   (.aivg-trust, .aivg-lock-list, .aivg-wins) can still set their own spacing. */
.aivg :where(ul, ol) { margin: 0; padding: 0; list-style: none; }
.aivg button { font-family: inherit; }
.aivg a { text-decoration: none; }

/* ---------- Panels: each is a white VOCTOS card ---------- */
.aivg-panel {
	display: none;
	background: var(--aivg-card);
	border-radius: var(--aivg-r-card);
	padding: clamp(26px, 4vw, 48px);
	animation: aivg-in .4s cubic-bezier(.2,.7,.3,1) both;
}
.aivg-panel.is-active { display: block; }

@keyframes aivg-in {
	from { opacity: 0; transform: translateY(10px); }
	to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .aivg-panel { animation: none; } }

/* ---------- Typography ---------- */
.aivg-h1 {
	font-size: clamp(28px, 3.6vw, 46px);
	font-weight: 700;
	line-height: 1.08;
	letter-spacing: -0.01em;
	text-transform: uppercase;
	margin: 20px 0 16px;
	max-width: 17ch;
	color: var(--aivg-ink);
}
.aivg-h1 em { font-style: normal; color: var(--aivg-lime-ink); }

.aivg-h2 {
	font-size: clamp(22px, 2.6vw, 34px);
	font-weight: 500;
	line-height: 1.15;
	margin-bottom: 10px;
}
.aivg-h3 { font-size: 18px; font-weight: 500; }

.aivg-lede { color: var(--aivg-muted); font-size: clamp(14px, 1.3vw, 16px); line-height: 1.65; max-width: 60ch; }
.aivg-lede-sm { font-size: 14px; }
.aivg-fineprint { font-size: 12px; color: var(--aivg-dim); margin: 12px 0 0; line-height: 1.5; }
.aivg-center { text-align: center; }

.aivg-eyebrow {
	display: inline-flex; align-items: center; gap: 9px;
	font-size: 11px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase;
	color: var(--aivg-lime-ink);
	background: var(--aivg-lime-soft);
	padding: 8px 16px; border-radius: 999px;
}
.aivg-dot {
	width: 7px; height: 7px; border-radius: 50%; background: var(--aivg-lime);
	box-shadow: 0 0 0 0 rgba(155, 183, 37, .55);
	animation: aivg-pulse 2.4s infinite;
}
@keyframes aivg-pulse {
	70%  { box-shadow: 0 0 0 8px rgba(155, 183, 37, 0); }
	100% { box-shadow: 0 0 0 0 rgba(155, 183, 37, 0); }
}

.aivg-step-label {
	font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
	color: var(--aivg-dim); margin-bottom: 10px; font-weight: 500;
}

/* ---------- Forms ---------- */
.aivg-form { margin-top: 26px; }
.aivg-hp { position: absolute; left: -9999px; opacity: 0; height: 0; width: 0; }

.aivg-field-row { display: flex; gap: 10px; flex-wrap: wrap; }

.aivg-input-wrap {
	flex: 1 1 320px; display: flex; align-items: center;
	background: var(--aivg-well);
	border: 1.5px solid var(--aivg-line);
	border-radius: var(--aivg-r-btn);
	padding: 0 6px 0 18px;
	transition: border-color .16s, background .16s;
}
.aivg-input-wrap:focus-within { border-color: var(--aivg-lime); background: #fff; }
.aivg-prefix { color: var(--aivg-dim); font-size: 14px; user-select: none; }
.aivg-input-wrap input {
	flex: 1; min-width: 0;
	background: transparent; border: 0; outline: 0;
	color: var(--aivg-ink); font-size: 16px; font-family: inherit; font-weight: 500;
	padding: 17px 10px;
}
.aivg-input-wrap input::placeholder { color: var(--aivg-dim); font-weight: 400; }

.aivg-field { margin-bottom: 24px; }
.aivg-label { display: block; font-size: 14px; font-weight: 500; color: var(--aivg-ink); margin-bottom: 10px; }
.aivg-hint { display: block; font-size: 12px; color: var(--aivg-dim); margin-top: 8px; line-height: 1.5; }
/* Detected from their own homepage — tinted so the pre-filled value reads as a
   finding to confirm rather than a placeholder someone else typed for them. */
.aivg .aivg-hint.is-detected { color: var(--aivg-lime-ink); font-weight: 600; }

.aivg-text {
	width: 100%; background: var(--aivg-well);
	border: 1.5px solid var(--aivg-line); border-radius: var(--aivg-r-btn);
	color: var(--aivg-ink); font-size: 15px; font-family: inherit;
	padding: 15px 18px; outline: 0;
	transition: border-color .16s, background .16s;
}
.aivg-text:focus { border-color: var(--aivg-lime); background: #fff; }
.aivg-text::placeholder { color: var(--aivg-dim); }

.aivg-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.aivg-chip {
	background: #fff; border: 1.5px solid var(--aivg-line);
	color: var(--aivg-muted); border-radius: var(--aivg-r-btn);
	padding: 10px 16px; font-size: 13px; font-weight: 400; cursor: pointer;
	transition: border-color .14s, color .14s, background .14s;
}
.aivg-chip:hover { border-color: var(--aivg-dim); color: var(--aivg-ink); }
.aivg-chip.is-on {
	background: var(--aivg-lime); border-color: var(--aivg-lime);
	color: #fff; font-weight: 500;
}

.aivg-error {
	color: var(--aivg-bad); font-size: 13px; margin: 12px 0 0;
	display: flex; align-items: center; gap: 8px; line-height: 1.5;
}
.aivg-error[hidden] { display: none; }

.aivg-error::before {
	content: "!"; display: grid; place-items: center; width: 18px; height: 18px;
	border-radius: 50%; background: var(--aivg-bad-fill); color: #fff;
	font-size: 11px; font-weight: 700; flex: none;
}

/* ---------- Buttons ---------- */
.aivg-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	border: 1.5px solid transparent; border-radius: var(--aivg-r-btn);
	padding: 16px 26px; font-size: 14px; font-weight: 500; font-family: inherit;
	cursor: pointer; text-decoration: none; white-space: nowrap;
	transition: filter .16s, background .16s, border-color .16s, color .16s;
}
.aivg-btn[disabled] { opacity: .5; pointer-events: none; }

.aivg-btn-primary { background: var(--aivg-lime); color: #fff; }
.aivg-btn-primary:hover { filter: brightness(1.06); color: #fff; }

.aivg-btn-ghost { background: transparent; border-color: var(--aivg-line); color: var(--aivg-ink); }
.aivg-btn-ghost:hover { border-color: var(--aivg-ink); background: var(--aivg-ink); color: #fff; }

.aivg-btn-block { width: 100%; }

.aivg-back {
	background: none; border: 0; color: var(--aivg-dim);
	font-size: 13px; cursor: pointer; padding: 0; margin-bottom: 18px; font-family: inherit;
}
.aivg-back:hover { color: var(--aivg-ink); }

.aivg-cta-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 20px; }

/* ---------- Trust strip ---------- */
.aivg-trust {
	display: flex; flex-wrap: wrap; gap: 14px 34px;
	margin-top: 34px; padding-top: 28px;
	border-top: 1px solid var(--aivg-line);
	font-size: 13px; color: var(--aivg-muted);
}
.aivg-trust li { display: flex; align-items: center; gap: 10px; }
.aivg-trust li::before {
	content: ""; flex: none; width: 17px; height: 17px; border-radius: 50%;
	background: var(--aivg-lime-soft) no-repeat center/9px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1 6l3.2 3.4L11 2.4' stroke='%239BB725' stroke-width='2.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.aivg-trust strong { color: var(--aivg-ink); font-weight: 600; }

/* ---------- Scanning ---------- */
.aivg-scan-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.aivg-scan-target { font-size: clamp(20px, 2.4vw, 30px); font-weight: 500; color: var(--aivg-ink); }
.aivg-scan-pct { font-size: 30px; font-weight: 700; color: var(--aivg-lime-ink); font-variant-numeric: tabular-nums; }
.aivg-scan-pct i { font-size: 15px; font-style: normal; opacity: .55; }

.aivg-bar { height: 6px; background: var(--aivg-line-2); border-radius: 99px; overflow: hidden; margin: 18px 0 28px; }
.aivg-bar-fill { height: 100%; width: 0; background: var(--aivg-lime); border-radius: 99px; transition: width .7s cubic-bezier(.25,.8,.3,1); }

.aivg-stages { display: grid; gap: 12px; margin-bottom: 26px; }
.aivg-stage { display: flex; align-items: center; gap: 13px; font-size: 14px; color: var(--aivg-dim); transition: color .3s; }
.aivg-stage i {
	width: 20px; height: 20px; border-radius: 50%; flex: none;
	border: 2px solid var(--aivg-line); position: relative; transition: all .3s;
}
.aivg-stage.is-active { color: var(--aivg-ink); font-weight: 500; }
.aivg-stage.is-active i { border-color: var(--aivg-lime); border-top-color: transparent; animation: aivg-spin .8s linear infinite; }
.aivg-stage.is-done { color: var(--aivg-muted); }
.aivg-stage.is-done i { border-color: var(--aivg-lime); background: var(--aivg-lime); }
.aivg-stage.is-done i::after {
	content: ""; position: absolute; inset: 0;
	background: no-repeat center/10px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1 6l3.2 3.4L11 2.4' stroke='%23ffffff' stroke-width='2.2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
@keyframes aivg-spin { to { transform: rotate(360deg); } }

/* The console is the one dark surface — same navy card VOCTOS uses. */
.aivg-console {
	background: var(--aivg-navy); border-radius: var(--aivg-r-box);
	padding: 20px 22px; max-height: 270px; overflow-y: auto;
	font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
	font-size: 12.5px; line-height: 1.8; color: var(--aivg-on-dark-dim);
	scrollbar-width: thin;
}
.aivg-line { display: flex; gap: 10px; animation: aivg-in .3s both; }
.aivg-line b { flex: none; font-weight: 700; }
.aivg-line[data-t="ok"] b   { color: var(--aivg-lime); }
.aivg-line[data-t="warn"] b { color: var(--aivg-warn-fill); }
.aivg-line[data-t="fail"] b { color: var(--aivg-bad-fill); }
.aivg-line[data-t="info"] b { color: #6B7A93; }
.aivg-line[data-t="ok"] span, .aivg-line[data-t="fail"] span { color: var(--aivg-on-dark); }

/* ---------- Result ---------- */
.aivg-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 24px; }
.aivg-toolbar-meta { font-size: 12px; color: var(--aivg-dim); }

/* Verdict block: the dark navy VOCTOS card */
.aivg-verdict {
	display: grid; grid-template-columns: 210px 1fr; gap: clamp(20px, 4vw, 44px);
	align-items: center;
	background: var(--aivg-navy); border-radius: var(--aivg-r-card);
	padding: clamp(24px, 3.4vw, 40px);
	color: var(--aivg-on-dark);
}
.aivg-ring { position: relative; width: 186px; height: 186px; margin: 0 auto; }
.aivg-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.aivg-ring-track { fill: none; stroke: rgba(255,255,255,.09); stroke-width: 11; }
.aivg-ring-val { fill: none; stroke-width: 11; stroke-linecap: round; transition: stroke-dashoffset 1.4s cubic-bezier(.2,.8,.25,1); }
.aivg-ring-mid { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.aivg-ring-num { font-size: 54px; font-weight: 700; line-height: 1; letter-spacing: -.03em; color: #fff; font-variant-numeric: tabular-nums; }
.aivg-ring-max { font-size: 9px; max-width: 118px; color: var(--aivg-on-dark-dim); margin-top: 7px; letter-spacing: .05em; text-transform: uppercase; }

.aivg-badge {
	display: inline-block; padding: 6px 15px; border-radius: 999px;
	font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
	margin-bottom: 14px;
}
.aivg-verdict-text { font-size: clamp(15px, 1.7vw, 18px); line-height: 1.6; color: #fff; margin: 0 0 14px; font-weight: 400; }
.aivg-verdict-meta { font-size: 12.5px; color: var(--aivg-on-dark-dim); }

.aivg-section { margin-top: 42px; }
.aivg-section-head { margin-bottom: 18px; }
.aivg-section-head h3 { font-size: clamp(19px, 2.1vw, 26px); font-weight: 500; margin-bottom: 6px; }
.aivg-section-head p { font-size: 13.5px; color: var(--aivg-muted); margin: 0; }
.aivg-section-head strong { color: var(--aivg-ink); font-weight: 600; }

/* Pillars */
.aivg-pillars { display: grid; gap: 10px; }
.aivg-pillar { background: var(--aivg-well); border-radius: var(--aivg-r-box); padding: 18px 22px; }
.aivg-pillar-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.aivg-pillar-name { font-size: 14.5px; font-weight: 500; color: var(--aivg-ink); }
.aivg-pillar-score { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.aivg-pillar-bar { height: 7px; background: #E4E8EF; border-radius: 99px; margin: 12px 0 10px; overflow: hidden; }
.aivg-pillar-bar span { display: block; height: 100%; border-radius: 99px; width: 0; transition: width 1s cubic-bezier(.25,.8,.3,1); }
.aivg-pillar-meta { font-size: 12px; color: var(--aivg-dim); line-height: 1.55; }

/* Probe cards */
.aivg-probes { display: grid; gap: 10px; }
.aivg-probe {
	background: #fff; border: 1.5px solid var(--aivg-line);
	border-left: 4px solid var(--aivg-line); border-radius: var(--aivg-r-box); padding: 20px 22px;
}
.aivg-probe.is-yes { border-left-color: var(--aivg-lime); }
.aivg-probe.is-no  { border-left-color: var(--aivg-bad-fill); }
.aivg-probe-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }

.aivg-tag {
	font-size: 10.5px; font-weight: 500; letter-spacing: .05em; text-transform: uppercase;
	padding: 5px 10px; border-radius: 7px;
	background: var(--aivg-well); color: var(--aivg-muted); border: 1px solid var(--aivg-line);
}
.aivg-tag.is-ok  { color: #fff; background: var(--aivg-ok-fill); border-color: var(--aivg-ok-fill); }
.aivg-tag.is-bad { color: #fff; background: var(--aivg-bad-fill); border-color: var(--aivg-bad-fill); }

.aivg-probe-q { font-size: 15px; color: var(--aivg-ink); font-weight: 500; margin: 0 0 10px; line-height: 1.45; }
.aivg-probe-r { font-size: 13px; color: var(--aivg-muted); margin: 0; }
.aivg-probe-snip {
	font-size: 13px; color: var(--aivg-muted); line-height: 1.65;
	border-left: 3px solid var(--aivg-line); padding-left: 14px; margin: 12px 0 0;
}

/* Issues */
.aivg-issues { display: grid; gap: 10px; }
.aivg-issue { background: #fff; border: 1.5px solid var(--aivg-line); border-radius: var(--aivg-r-box); padding: 22px 24px; }
.aivg-issue-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.aivg-issue-title { font-size: 16px; font-weight: 500; color: var(--aivg-ink); line-height: 1.35; }
.aivg-points {
	flex: none; font-size: 12.5px; font-weight: 600; padding: 6px 12px; border-radius: 999px;
	background: var(--aivg-lime); color: #fff; white-space: nowrap;
}
.aivg-kv { font-size: 13.5px; line-height: 1.7; color: var(--aivg-muted); margin: 0 0 8px; }
.aivg-kv b { color: var(--aivg-ink); font-weight: 600; }
.aivg-kv.is-fix b { color: var(--aivg-lime-ink); }
.aivg-issue-foot { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 14px; }

/* Competitors */
.aivg-comps { display: grid; gap: 8px; }
.aivg-comp { display: flex; align-items: center; gap: 16px; background: var(--aivg-well); border-radius: 14px; padding: 14px 18px; }
.aivg-comp-rank { font-size: 12.5px; font-weight: 700; color: var(--aivg-dim); width: 22px; flex: none; }
.aivg-comp-name { flex: 1; font-size: 14.5px; font-weight: 500; color: var(--aivg-ink); }
.aivg-comp-track { width: 130px; height: 7px; background: #E4E8EF; border-radius: 99px; overflow: hidden; flex: none; }
.aivg-comp-track span { display: block; height: 100%; background: var(--aivg-bad-fill); border-radius: 99px; }
.aivg-comp-hits { font-size: 12px; color: var(--aivg-dim); width: 44px; text-align: right; flex: none; }

/* Lock / unlock — navy card, the strongest surface on the page */
.aivg-lock {
	margin-top: 36px; background: var(--aivg-navy); border-radius: var(--aivg-r-card);
	padding: clamp(26px, 3.6vw, 44px); color: var(--aivg-on-dark);
}
.aivg-lock .aivg-h2 { color: #fff; }
.aivg-lock .aivg-lede { color: var(--aivg-on-dark-dim); }
.aivg-lock-teaser { display: grid; gap: 8px; margin: 20px 0 24px; }
.aivg-lock-row {
	display: flex; align-items: center; justify-content: space-between; gap: 14px;
	background: var(--aivg-navy-2); border-radius: 12px; padding: 13px 16px; font-size: 13.5px;
}
.aivg-lock-row span:first-child { filter: blur(5px); user-select: none; color: var(--aivg-on-dark-dim); }
.aivg-lock-list { display: grid; gap: 10px; margin: 0 0 26px; }
.aivg-lock-list li { display: flex; gap: 11px; font-size: 14px; color: var(--aivg-on-dark-dim); line-height: 1.55; }
.aivg-lock-list li::before { content: "→"; color: var(--aivg-lime); font-weight: 700; flex: none; }

.aivg-unlock-form { display: grid; gap: 10px; }
.aivg-unlock-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.aivg-lock .aivg-text {
	background: var(--aivg-navy-2); border-color: rgba(255,255,255,.12); color: #fff;
}
.aivg-lock .aivg-text::placeholder { color: #64748B; }
.aivg-lock .aivg-text:focus { border-color: var(--aivg-lime); background: var(--aivg-navy-2); }
.aivg-lock .aivg-fineprint { color: #64748B; }
.aivg-consent { display: flex; gap: 10px; align-items: flex-start; font-size: 12px; color: var(--aivg-on-dark-dim); line-height: 1.55; margin-top: 4px; }
.aivg-consent input { margin-top: 3px; accent-color: var(--aivg-lime); flex: none; }

/* Phases */
.aivg-phase { margin-top: 28px; }
.aivg-phase-label {
	font-size: 11.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
	color: var(--aivg-lime-ink); margin-bottom: 14px;
	display: flex; align-items: center; gap: 12px;
}
.aivg-phase-label::after { content: ""; flex: 1; height: 1px; background: var(--aivg-line); }

/* Wins */
.aivg-wins { display: grid; gap: 8px; }
.aivg-win { display: flex; gap: 11px; font-size: 13.5px; color: var(--aivg-muted); }
.aivg-win::before { content: "✓"; color: var(--aivg-ok-fill); font-weight: 700; flex: none; }

/* Final CTA */
.aivg-final {
	margin-top: 42px; text-align: center;
	background: var(--aivg-lime-soft); border-radius: var(--aivg-r-card);
	padding: clamp(28px, 4vw, 44px);
}
.aivg-final h3 { font-size: clamp(20px, 2.3vw, 27px); font-weight: 500; margin-bottom: 10px; }
.aivg-final p { color: var(--aivg-muted); font-size: 14px; max-width: 50ch; margin: 0 auto 22px; }
.aivg-final .aivg-cta-row { justify-content: center; }

.aivg-fatal { text-align: center; padding: 22px 0; }

.aivg-keep { margin-top: 26px; padding: 22px 24px; border: 1px dashed var(--aivg-line); border-radius: var(--aivg-r-card); background: var(--aivg-well); }
.aivg-keep-head { font-weight: 700; font-size: 15px; color: var(--aivg-navy); }
.aivg-keep p { margin: 6px 0 14px; font-size: 13.5px; line-height: 1.6; color: var(--aivg-muted); }
.aivg-keep-row { display: flex; gap: 10px; align-items: center; }
.aivg-keep-row .aivg-text { flex: 1 1 auto; min-width: 0; font-size: 13px; color: var(--aivg-muted); }
.aivg-keep-row .aivg-btn { flex: none; }

/* ---------- Responsive ---------- */
@media (max-width: 780px) {
	.aivg { font-size: 14px; }
	.aivg-panel { padding: 24px 20px; border-radius: 22px; }
	.aivg-verdict { grid-template-columns: 1fr; text-align: center; border-radius: 22px; }
	.aivg-ring { width: 158px; height: 158px; }
	.aivg-ring-num { font-size: 46px; }
	.aivg-unlock-grid { grid-template-columns: 1fr; }
	.aivg-comp-track { display: none; }
	.aivg-field-row { flex-direction: column; }
	/* flex-basis 320px is a height once the row stacks — reset it. */
	.aivg-field-row .aivg-input-wrap { flex: 0 0 auto; width: 100%; }
	.aivg-field-row .aivg-btn { width: 100%; }
	.aivg-cta-row .aivg-btn { flex: 1 1 auto; }
	.aivg-scan-head { flex-direction: column; align-items: flex-start; gap: 2px; }
	.aivg-issue-top { flex-direction: column; gap: 10px; }
	.aivg-lock, .aivg-final { border-radius: 22px; }
}

/* ---------- Print ---------- */
@media print {
	.aivg-lock, .aivg-final, .aivg-cta-row { display: none !important; }
	.aivg-panel { padding: 0; }
	.aivg-verdict { background: #fff; color: #000; border: 1px solid #ccc; }
	.aivg-verdict-text, .aivg-ring-num { color: #000; }
}

/* =========================================================================
   Page frame + hero treatment (added after the live layout audit)
   ========================================================================= */

.aivg-inner { max-width: 1300px; margin: 0 auto; }

/* Use when the shortcode sits mid-page beneath an existing hero section. */
.aivg.aivg--flush {
	background: transparent;
}

/* ---------- Step 1 is the hero: navy band, exactly like voctos.com ---------- */
.aivg-panel[data-panel="intro"] {
	background: var(--aivg-navy);
	color: var(--aivg-on-dark);
	padding: clamp(32px, 4.6vw, 68px);
}
.aivg-panel[data-panel="intro"] .aivg-h1 { color: #fff; max-width: 20ch; }
.aivg-panel[data-panel="intro"] .aivg-h1 em { color: var(--aivg-lime); }
.aivg-panel[data-panel="intro"] .aivg-lede { color: var(--aivg-on-dark-dim); }
.aivg-panel[data-panel="intro"] .aivg-eyebrow { background: rgba(155, 183, 37, .14); color: var(--aivg-lime); }
.aivg-panel[data-panel="intro"] .aivg-input-wrap { background: var(--aivg-navy-2); border-color: rgba(255, 255, 255, .14); }
.aivg-panel[data-panel="intro"] .aivg-input-wrap:focus-within { background: var(--aivg-navy-2); border-color: var(--aivg-lime); }
.aivg-panel[data-panel="intro"] .aivg-input-wrap input { color: #fff; }
.aivg-panel[data-panel="intro"] .aivg-input-wrap input::placeholder { color: #64748B; }
.aivg-panel[data-panel="intro"] .aivg-prefix { color: #64748B; }
.aivg-panel[data-panel="intro"] .aivg-trust { color: var(--aivg-on-dark-dim); border-top-color: rgba(255, 255, 255, .12); }
.aivg-panel[data-panel="intro"] .aivg-trust strong { color: #fff; }
.aivg-panel[data-panel="intro"] .aivg-trust li::before { background-color: rgba(155, 183, 37, .18); }
.aivg-panel[data-panel="intro"] .aivg-error { color: #FF8A80; }

/* Steps 2-4 stay light so the report reads like a document. */
.aivg-panel[data-panel="context"],
.aivg-panel[data-panel="scanning"],
.aivg-panel[data-panel="result"],
.aivg-panel[data-panel="fatal"] { background: var(--aivg-card); }

/* ---------- Mobile frame ---------- */
@media (max-width: 780px) {
	.aivg { padding: clamp(86px, 15vw, 108px) 18px 44px; }
	.aivg-panel[data-panel="intro"] { padding: 28px 22px 26px; }
	.aivg-panel[data-panel="intro"] .aivg-h1 { max-width: 100%; }
}

/* Mid-page placement (flush): step 1 stays a light card so it does not stack
   a second hero underneath the page own hero section. */
.aivg--flush .aivg-panel[data-panel="intro"] {
	background: var(--aivg-card);
	color: var(--aivg-ink);
	padding: clamp(26px, 4vw, 48px);
}
.aivg--flush .aivg-panel[data-panel="intro"] .aivg-h1 {
	color: var(--aivg-ink);
	/* Mid-page it should read as a section heading, not a second hero. */
	text-transform: none;
	font-weight: 500;
	font-size: clamp(24px, 2.9vw, 38px);
	letter-spacing: normal;
	max-width: 26ch;
	margin: 18px 0 14px;
}
.aivg--flush .aivg-panel[data-panel="intro"] .aivg-h1 em { color: var(--aivg-lime-ink); }
.aivg--flush .aivg-panel[data-panel="intro"] .aivg-lede { color: var(--aivg-muted); }
.aivg--flush .aivg-panel[data-panel="intro"] .aivg-eyebrow { background: var(--aivg-lime-soft); color: var(--aivg-lime-ink); }
.aivg--flush .aivg-panel[data-panel="intro"] .aivg-input-wrap { background: var(--aivg-well); border-color: var(--aivg-line); }
.aivg--flush .aivg-panel[data-panel="intro"] .aivg-input-wrap:focus-within { background: #fff; border-color: var(--aivg-lime); }
.aivg--flush .aivg-panel[data-panel="intro"] .aivg-input-wrap input { color: var(--aivg-ink); }
.aivg--flush .aivg-panel[data-panel="intro"] .aivg-input-wrap input::placeholder { color: var(--aivg-dim); }
.aivg--flush .aivg-panel[data-panel="intro"] .aivg-prefix { color: var(--aivg-dim); }
.aivg--flush .aivg-panel[data-panel="intro"] .aivg-trust { color: var(--aivg-muted); border-top-color: var(--aivg-line-2); }
.aivg--flush .aivg-panel[data-panel="intro"] .aivg-trust strong { color: var(--aivg-ink); }
.aivg--flush .aivg-panel[data-panel="intro"] .aivg-error { color: var(--aivg-bad); }

/* ---------- Phone field with country code ---------- */
.aivg-phone { display: flex; gap: 8px; }
.aivg-phone input { flex: 1; min-width: 0; }
.aivg-cc {
	flex: 0 0 132px; width: 132px;
	padding-left: 12px; padding-right: 8px;
	cursor: pointer; appearance: none; -webkit-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2394A3B8' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-size: 10px;
}
.aivg-lock .aivg-cc { color-scheme: dark; }
@media (max-width: 480px) { .aivg-cc { flex: 0 0 108px; width: 108px; font-size: 14px; } }

/* Standalone page (no flush): the whole module sits on navy so the theme's
   white header text stays legible and step 1 reads as a full hero band. */
.aivg:not(.aivg--flush) { background: var(--aivg-navy); }
.aivg:not(.aivg--flush) .aivg-panel[data-panel="intro"] {
	background: transparent;
	padding-left: 0; padding-right: 0;
}

/* =========================================================================
   Defensive layer
   Article and page templates style their descendants (headings, list markers,
   links) with higher specificity than a single class — the blog template was
   forcing line-height:28px onto a 38px headline and replacing our tick with a
   "−" marker. Prefixing with .aivg raises specificity enough to win, without
   resorting to !important.
   ========================================================================= */

.aivg { container-type: inline-size; container-name: aivg; }

.aivg .aivg-h1 { line-height: 1.08; letter-spacing: -0.01em; }
.aivg .aivg-h2 { line-height: 1.15; }
.aivg .aivg-lede { line-height: 1.65; }
.aivg .aivg-probe-q { line-height: 1.45; }
.aivg .aivg-kv { line-height: 1.7; }
.aivg .aivg-issue-title { line-height: 1.35; }
.aivg--flush .aivg-panel[data-panel="intro"] .aivg-h1 { line-height: 1.18; }

/* Re-assert our own list markers over any the template injects. */
.aivg .aivg-trust li,
.aivg .aivg-lock-list li,
.aivg .aivg-win { position: static; padding-left: 0; }

.aivg .aivg-trust li::before {
	content: ""; position: static; flex: none;
	width: 17px; height: 17px; border-radius: 50%;
	background: var(--aivg-lime-soft) no-repeat center/9px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1 6l3.2 3.4L11 2.4' stroke='%239BB725' stroke-width='2.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.aivg .aivg-lock-list li::before {
	content: "→"; position: static; flex: none;
	color: var(--aivg-lime); font-weight: 700; background: none; width: auto; height: auto;
}
.aivg .aivg-win::before {
	content: "✓"; position: static; flex: none;
	color: var(--aivg-ok-fill); font-weight: 700; background: none; width: auto; height: auto;
}

/* Embedded in an article the surrounding page is white, so the module needs
   its own edge to read as a tool rather than as more prose. */
.aivg--flush .aivg-panel { border: 1.5px solid var(--aivg-line); }

/* The tool is often dropped into a narrow article column while the viewport
   stays wide, so size against the container rather than the viewport. */
@container aivg (max-width: 820px) {
	.aivg--flush .aivg-panel[data-panel="intro"] .aivg-h1 { font-size: clamp(21px, 4.2cqw, 29px); max-width: 100%; }
	.aivg .aivg-panel,
	.aivg--flush .aivg-panel[data-panel="intro"] { padding: 26px 24px; border-radius: 22px; }
	.aivg-field-row { flex-direction: column; }
	.aivg .aivg-field-row .aivg-input-wrap { flex: 0 0 auto; width: 100%; }
	.aivg-field-row .aivg-btn { width: 100%; }
	.aivg-unlock-grid { grid-template-columns: 1fr; }
	.aivg-verdict { grid-template-columns: 1fr; text-align: center; }
	.aivg-comp-track { display: none; }
	.aivg-issue-top { flex-direction: column; gap: 10px; }
	.aivg-trust { gap: 12px 24px; }
}

/* =========================================================================
   Step 1 hero — VOCTOS components (approved design, Aug 2026)

   Every rule below is scoped to [data-panel="intro"], so the context, scanning,
   result, queue and fatal panels are untouched. Nothing here is an AI-tool
   landing-page part: no pill badge, no radial wash, no floating shadowed chips,
   no soft shadows. Instead the site's own gradient-clipped headline word, its
   4px divider that fades out at 24%, hard rules, and flat fills.

   The one preview element that is NOT here is the notched folder tab. That cut
   only reads when a different page colour sits behind the notch, and this hero
   runs full-bleed navy so the theme's white header text stays legible — there
   is no page colour behind it. Do not add it back without first solving that.
   ========================================================================= */

/* Flat eyebrow. The pill and the pulsing dot were the two most generic parts
   of the old hero, so the pill goes and the dot stops glowing. */
.aivg-panel[data-panel="intro"] .aivg-eyebrow {
	background: none;
	padding: 0;
	border-radius: 0;
	color: var(--aivg-lime);
	letter-spacing: .16em;
	font-size: 11.5px;
}
.aivg-panel[data-panel="intro"] .aivg-dot { animation: none; box-shadow: none; }

/* The highlight phrase drops to its own line and takes the site's gradient. */
.aivg-panel[data-panel="intro"] .aivg-h1 { margin: 16px 0 0; max-width: 19ch; }
.aivg-panel[data-panel="intro"] .aivg-h1 em {
	display: block;
	background: linear-gradient(180deg, #7B9412 0%, #D4EE69 44%, #7B9412 88%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

/* The site's divider: 4px, gone by 24%. */
.aivg-panel[data-panel="intro"] .aivg-divider {
	height: 4px; border-radius: 2px;
	width: 525px; max-width: 70%;
	margin: 22px 0 0;
	background: linear-gradient(90deg, #A1CB3A 0%, rgba(161, 203, 58, 0) 24.04%);
}
[dir="rtl"] .aivg-panel[data-panel="intro"] .aivg-divider {
	background: linear-gradient(270deg, #A1CB3A 0%, rgba(161, 203, 58, 0) 24.04%);
}

.aivg-panel[data-panel="intro"] .aivg-lede { margin-top: 20px; max-width: 56ch; }

/* Flat field: no inner card, no soft shadow, just a hairline on navy. */
.aivg-panel[data-panel="intro"] .aivg-input-wrap {
	background: rgba(255, 255, 255, .07);
	border-width: 1px;
	border-color: rgba(255, 255, 255, .22);
}
.aivg-panel[data-panel="intro"] .aivg-input-wrap:focus-within {
	background: rgba(255, 255, 255, .11);
	border-color: #C6E36B;
}
.aivg-panel[data-panel="intro"] .aivg-input-wrap input::placeholder,
.aivg-panel[data-panel="intro"] .aivg-prefix { color: rgba(255, 255, 255, .38); }

/* Trust strip: the tick circle has to survive on navy. */
.aivg .aivg-panel[data-panel="intro"] .aivg-trust li::before {
	background: rgba(255, 255, 255, .08) no-repeat center/9px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1 6l3.2 3.4L11 2.4' stroke='%23C6E36B' stroke-width='2.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Engine verdicts as the site's hard-ruled column row — no cards, no shadows.
   This is the proof that the tool actually queries engines, said in four words
   per engine rather than in a paragraph nobody reads. */
.aivg-engine-row {
	display: grid;
	grid-template-columns: 1fr;
	margin-top: 44px;
	border-top: 1px solid rgba(255, 255, 255, .14);
}
.aivg-engine {
	padding: 22px 22px 0;
	border-inline-start: 1px solid rgba(255, 255, 255, .14);
}
.aivg-engine:first-child { padding-inline-start: 0; border-inline-start: 0; }
.aivg-engine b { display: block; font-size: 14px; font-weight: 500; color: #fff; }
.aivg-engine s {
	text-decoration: none; display: block;
	font-size: 12.5px; color: rgba(255, 255, 255, .55); margin-top: 5px;
}
.aivg-engine u {
	text-decoration: none; display: inline-block;
	width: 7px; height: 7px; border-radius: 50%; margin-inline-end: 7px;
}
.aivg-engine u.is-bad  { background: #E2557A; }
.aivg-engine u.is-good { background: #9BB725; }
.aivg-engine u.is-warn { background: #C9A227; }

@container aivg (min-width: 720px) {
	.aivg-engine-row { grid-template-columns: repeat(4, 1fr); }
}
@container aivg (max-width: 719px) {
	.aivg-engine {
		border-inline-start: 0;
		border-top: 1px solid rgba(255, 255, 255, .14);
		padding-inline: 0; padding-top: 16px;
	}
	.aivg-engine:first-child { border-top: 0; }
}

/* The theme header is absolutely positioned white text with no background of its
   own, so it needs something dark under it. At step 1 it gets that for free: the
   hero is navy and the module's own navy backs it. Every other step is a white
   card, and at the top of the page that card slid straight under the header —
   white logo and white nav on white. Measured on the live page: the header runs
   to 76px, the module starts at 30px, so the card needs ~72px of clearance to
   pass beneath it and leave the navy showing through.

   Only desktop: the mobile rule above already opens the module with
   clamp(86px, 15vw, 108px) of top padding for exactly this reason.

   This also survives the user scrolling back up, which the JS auto-scroll on
   step change does not. */
@media (min-width: 781px) {
	.aivg:not(.aivg--flush) .aivg-panel:not([data-panel="intro"]) { margin-top: 72px; }
}

/* Admin-only diagnostic on a probe that returned nothing. Amber, not red: the
   scan itself succeeded, it is the engine call that did not. */
.aivg-probe-err {
	margin: 8px 0 0;
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--aivg-warn);
	font-family: ui-monospace, Menlo, monospace;
	word-break: break-word;
}

/* Room for the theme's avg-report card, which pulls up 64px over this panel.
   Remove the modifier (overlap="0" on the shortcode) if that block is not on
   the page, or the hero ends in dead space. */
.aivg--overlap .aivg-panel[data-panel="intro"] { padding-bottom: 124px; }

/* ---------------------------------------------------------------------------
   Engine verdict row — light (.aivg--flush) variant.
   The rules above are written for the navy intro panel; on the flush/light skin
   the same markup sat white-on-white, so the four engine verdicts and their
   hairline dividers were invisible. Mirror them onto the light palette.
   --------------------------------------------------------------------------- */
.aivg--flush .aivg-engine-row { border-top-color: var(--aivg-line); }
.aivg--flush .aivg-engine { border-inline-start-color: var(--aivg-line); }
.aivg--flush .aivg-engine b { color: var(--aivg-ink); }
.aivg--flush .aivg-engine s { color: var(--aivg-muted); }

@container aivg (max-width: 719px) {
	.aivg--flush .aivg-engine { border-top-color: var(--aivg-line); }
}

/* Trust-strip tick well: the navy rule is specificity-heavy (.aivg .aivg-panel…),
   so the light skin needs an equally specific override or the circle vanishes. */
.aivg.aivg--flush .aivg-panel[data-panel="intro"] .aivg-trust li::before {
	background-color: rgba(155, 183, 37, .18);
}