/* IOI Keywords: builds on the Glossary stylesheet (tokens, hero, cards, sections nav, CTA band).
   Ink #1E1C20, red #E52525, peach #FFC19C, page #F5F5F5, line #E3E1E2, square corners. */

body.ioi-keywords-view, html:has(> body.ioi-keywords-view) { overflow-x: clip; }

/* Hero and CTA band: the site's brand background graphic (grid lines + warm glow, not a photo), the same one the
   CTA sections on every other page use. */
.ioi-kw .ioi-kw-hero,
.ioi-kw .ioi-kw-cta {
	background-color: var(--gl-ink);
	background-image: url("/wp-content/uploads/2026/10/ioi-hero-bg.webp");
	background-size: cover;
	background-position: left bottom;
	background-repeat: no-repeat;
}
.ioi-kw .ioi-kw-hero { padding-bottom: 56px; }
.ioi-kw .ioi-kw-cta { padding: 96px 0; }
.ioi-kw-hero .ioi-gl-intro { max-width: 820px; }

.ioi-kw-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; margin: 36px 0 0; padding: 0; background: #3a373d; border: 1px solid #3a373d; max-width: 980px; }
.ioi-kw-stats div { background: var(--gl-ink); padding: 18px 20px; }
.ioi-kw-stats dt { font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: #a9a5ab; margin: 0 0 6px; }
.ioi-kw-stats dd { margin: 0; font-family: var(--gl-display); font-weight: 500; font-size: clamp(1.6rem, 3vw, 2.2rem); line-height: 1; color: var(--gl-white); font-synthesis: none; }

.ioi-kw-source { display: flex; align-items: center; gap: 16px; margin-top: 20px; font-size: 15px; line-height: 1.45; color: #cfcbd1; }
.ioi-kw-source strong { color: var(--gl-white); font-weight: 600; }
.ioi-kw-badge { flex: 0 0 auto; display: block; line-height: 0; transition: transform .15s; }
.ioi-kw-badge:hover { transform: translateY(-2px); }
.ioi-kw-badge img { display: block; width: 76px; height: 76px; }
.ioi-kw-source-text { display: flex; flex-direction: column; gap: 4px; }
.ioi-kw-source-partner { color: var(--gl-white); font-weight: 600; }

/* Layout */
.ioi-kw-layout { padding-top: 48px; }
.ioi-kw .ioi-gl-main.ioi-kw-main { max-width: none; }
.ioi-kw-toc-label { margin: 18px 0 0; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--gl-muted); }
.ioi-kw .ioi-gl-toc ol { margin-top: 8px; }
.ioi-kw .ioi-kw-toc-end { margin-top: 18px; }

.ioi-kw-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; margin-bottom: 28px; }
.ioi-kw-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 0; font-size: 14px; color: var(--gl-muted); }
.ioi-kw-legend > span { display: inline-flex; align-items: center; gap: 8px; }

/* Groups + tables */
.ioi-kw-group { margin: 0 0 40px; scroll-margin-top: 120px; }
.ioi-kw-group[hidden], .ioi-kw-table tr[hidden] { display: none; }
.ioi-kw-group-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; padding-bottom: 12px; border-bottom: 2px solid var(--gl-ink); }
.ioi-kw .ioi-kw-group-head h3 { margin: 0; font-family: var(--gl-display); font-weight: 500; font-size: clamp(1.6rem, 3vw, 2.1rem); line-height: 1.1; color: var(--gl-ink); font-synthesis: none; }
.ioi-kw .ioi-kw-group-head p { margin: 0; font-size: 15px; color: var(--gl-muted); }
.ioi-kw-table-wrap { overflow-x: auto; background: var(--gl-white); border: 1px solid var(--gl-line); border-top: 0; }
.ioi-kw-table { width: 100%; border-collapse: collapse; font-size: 16px; line-height: 1.35; color: var(--gl-ink); margin: 0; border: 0; }
.ioi-kw-table th, .ioi-kw-table td { padding: 12px 16px; border: 0; border-bottom: 1px solid var(--gl-line); text-align: left; vertical-align: middle; background: none; }
.ioi-kw-table tbody tr:last-child > * { border-bottom: 0; }
.ioi-kw-table thead th { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--gl-muted); white-space: nowrap; background: var(--gl-white); }
.ioi-kw-table tbody th { font-weight: 600; }
.ioi-kw-table tbody tr:hover > * { background: #faf9fa; }
.ioi-kw-c-kw { min-width: 220px; }
.ioi-kw-table .ioi-kw-c-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ioi-kw-c-trend, .ioi-kw-c-intent { width: 1%; white-space: nowrap; text-align: center !important; }
.ioi-kw-c-list a { color: var(--gl-ink); text-decoration: underline; text-decoration-color: var(--gl-line); text-underline-offset: 3px; white-space: nowrap; }
.ioi-kw-c-list a:hover { text-decoration-color: var(--gl-red); }
.ioi-kw-spark { display: block; margin: 0 auto; overflow: visible; }
.ioi-kw-spark polyline { fill: none; stroke: var(--gl-ink); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.ioi-kw-na { color: #b9b5bb; }

.ioi-kw-rising {
	display: inline-block; margin-left: 8px; padding: 2px 7px; vertical-align: 2px; background: #fff1ea; color: #b4231f;
	font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; line-height: 1.4; white-space: nowrap;
}
.ioi-kw-rising::before { content: "\2197\00a0"; }

.ioi-kw-kd { display: inline-block; min-width: 34px; padding: 2px 6px; text-align: center; font-size: 14px; font-weight: 600; }
.ioi-kw-kd--easy { background: #e3f4e8; color: #1d6b35; }
.ioi-kw-kd--possible { background: #fff4d6; color: #7a5a00; }
.ioi-kw-kd--hard { background: #ffe6d6; color: #9a3d07; }
.ioi-kw-kd--very-hard { background: #fde1e1; color: #a51d1d; }

.ioi-kw-intent { display: inline-block; width: 24px; height: 24px; line-height: 24px; text-align: center; font-size: 13px; font-weight: 700; }
.ioi-kw-intent--t { background: #e3f4e8; color: #1d6b35; }
.ioi-kw-intent--c { background: #fff4d6; color: #7a5a00; }
.ioi-kw-intent--i { background: #e4eefc; color: #1f4f9a; }
.ioi-kw-intent--n { background: #efe6fb; color: #5b2d9a; }


/* Notes */
.ioi-kw-notes { border-top: 1px solid var(--gl-line); padding-top: 48px; margin-top: 16px; max-width: 820px; }
.ioi-kw-notes table { width: 100%; border-collapse: collapse; margin: 0 0 24px; font-size: 17px; background: var(--gl-white); }
.ioi-kw-notes th, .ioi-kw-notes td { padding: 10px 14px; border: 1px solid var(--gl-line); text-align: left; }
.ioi-kw-notes th { font-size: 13px; letter-spacing: .05em; text-transform: uppercase; color: var(--gl-muted); }
.ioi-kw .ioi-kw-notes code { font-size: .9em; background: var(--gl-white); border: 1px solid var(--gl-line); padding: 1px 6px; }

/* Opt-in */
.ioi-kw-optin {
	display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px 48px; align-items: center; margin: 48px 0;
	padding: 40px; background: var(--gl-ink); color: var(--gl-white); scroll-margin-top: 110px;
	clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 24px, 100% 100%, 0 100%);
}
.ioi-kw-optin .ioi-gl-eyebrow { color: var(--gl-peach); }
.ioi-kw .ioi-kw-optin h2 { margin: 0 0 12px; font-family: var(--gl-display); font-weight: 500; font-size: clamp(1.9rem, 3.4vw, 2.6rem); line-height: 1.05; color: var(--gl-white); font-synthesis: none; }
.ioi-kw .ioi-kw-optin-copy p:not(.ioi-gl-eyebrow) { margin: 0; color: #cfcbd1; font-size: 18px; }
.ioi-kw-optin .wpforms-container { margin: 0 !important; }
.ioi-kw-optin .wpforms-field { padding: 6px 0 !important; }
.ioi-kw-optin .wpforms-field-label { font: 600 13px/1.3 var(--gl-body) !important; color: #cfcbd1 !important; margin-bottom: 6px !important; }
.ioi-kw-optin .wpforms-required-label { color: var(--gl-peach) !important; }
.ioi-kw-optin .wpforms-form input[type="text"], .ioi-kw-optin .wpforms-form input[type="email"] {
	width: 100% !important; max-width: 100% !important; height: 48px !important; background: var(--gl-white) !important; border: 1px solid transparent !important;
	border-radius: 0 !important; box-shadow: none !important; font: 400 16px var(--gl-body) !important; color: var(--gl-ink) !important; padding: 0 14px !important;
}
.ioi-kw-optin .wpforms-form input:focus { border-color: var(--gl-red) !important; outline: none !important; }
.ioi-kw-optin .wpforms-submit-container { padding-top: 10px !important; }
.ioi-kw-optin .wpforms-form button.wpforms-submit {
	width: 100% !important; height: 52px !important; background: var(--gl-red) !important; color: var(--gl-white) !important; border: 0 !important;
	border-radius: 0 !important; font: 600 15px var(--gl-body) !important; text-transform: uppercase; letter-spacing: .05em;
}
.ioi-kw-optin .wpforms-form button.wpforms-submit:hover { background: #c81e1e !important; }
.ioi-kw-optin .wpforms-confirmation-container-full { background: var(--gl-ink-soft) !important; border: 0 !important; border-left: 4px solid var(--gl-peach) !important; color: var(--gl-white) !important; font: 400 17px/1.5 var(--gl-body); margin: 0 !important; }
.ioi-kw-optin .wpforms-confirmation-container-full a { color: var(--gl-peach); font-weight: 600; }
.ioi-kw-optin .ioi-kw-fine { font-size: 13px !important; color: #a9a5ab !important; margin-top: 8px !important; }

/* Other lists + hub */
.ioi-kw-related { padding-top: 40px !important; }
.ioi-kw-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ioi-kw-hub .ioi-kw-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ioi-kw .ioi-kw-cards .ioi-gl-card h3 { font-size: 22px; }
.ioi-kw-hub-body { padding-top: 56px; padding-bottom: 32px; }
.ioi-kw .ioi-kw-h2 { font-family: var(--gl-display); font-weight: 500; font-size: clamp(2rem, 4vw, 2.8rem); line-height: 1.05; margin: 0 0 12px; color: var(--gl-ink); font-synthesis: none; }
.ioi-kw .ioi-kw-lead { margin: 0 0 22px; font-size: 18px; color: var(--gl-muted); max-width: 760px; }
.ioi-kw-hub-top { margin-bottom: 64px; }
.ioi-kw-hub-top .ioi-kw-group-head { display: none; }
.ioi-kw-hub-top .ioi-kw-table-wrap { border-top: 2px solid var(--gl-ink); max-height: 720px; overflow-y: auto; }
.ioi-kw-hub-top thead th { position: sticky; top: 0; z-index: 1; }
.ioi-kw-hub-lists { margin-bottom: 24px; }
.ioi-kw-hub-notes .ioi-kw-notes { margin-top: 40px; }
.ioi-kw-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.ioi-kw .ioi-kw-chips button {
	font: 600 14px var(--gl-body); cursor: pointer; border-radius: 0; background: var(--gl-white); color: var(--gl-ink);
	border: 1px solid var(--gl-line); padding: 10px 14px; line-height: 1;
}
.ioi-kw .ioi-kw-chips button:hover, .ioi-kw .ioi-kw-chips button:focus:not(.is-active) { background: var(--gl-white); color: var(--gl-ink); border-color: var(--gl-ink); }
.ioi-kw .ioi-kw-chips button.is-active { background: var(--gl-red); border-color: var(--gl-red); color: var(--gl-white); }

/* CTA band: two buttons */
.ioi-kw-cta-btns { display: flex; flex-wrap: wrap; gap: 12px; }
.ioi-kw-btn-ghost { display: inline-block; padding: 16px 28px; font-weight: 600; color: var(--gl-white); text-decoration: none; border: 2px solid #55515a; }
.ioi-kw-btn-ghost:hover { border-color: var(--gl-white); color: var(--gl-white); }

@media (max-width: 1100px) {
	.ioi-kw-hub .ioi-kw-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
	.ioi-kw-optin { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
	.ioi-kw-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ioi-kw-stats div { padding: 14px; }
	.ioi-kw-source { font-size: 14px; }
	.ioi-kw-layout { padding-top: 28px; }
	.ioi-kw-cards, .ioi-kw-hub .ioi-kw-cards { grid-template-columns: minmax(0, 1fr); }
	.ioi-kw-table { font-size: 15px; }
	.ioi-kw-table th, .ioi-kw-table td { padding: 10px 12px; }
	.ioi-kw-c-kw { min-width: 180px; }
	.ioi-kw-optin { padding: 28px 20px; margin: 36px 0; }
	.ioi-kw-hub-body { padding-top: 40px; }
	.ioi-kw-cta-btns { width: 100%; }
	.ioi-kw-cta-btns a { flex: 1 1 100%; text-align: center; }
}

/* Design pass 2026-10-28 ------------------------------------------------------------------------------------- */

/* Hero: copy on the left, stats card on the right. */
.ioi-kw-hero-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 32px 56px; align-items: end; }
.ioi-kw-hero-copy .ioi-gl-intro { margin-bottom: 0; }
.ioi-kw-hero-grid .ioi-kw-stats { margin: 0; max-width: none; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ioi-kw-hero-grid .ioi-kw-stats div:last-child:nth-child(odd) { grid-column: 1 / -1; }
.ioi-kw-stats dd { white-space: nowrap; font-size: clamp(1.5rem, 2.4vw, 2.1rem); }
.ioi-kw-hero-copy .ioi-kw-source { margin-top: 28px; }
@media (max-width: 1100px) {
	.ioi-kw-hero-grid { grid-template-columns: minmax(0, 1fr); align-items: start; }
	.ioi-kw-hero-grid .ioi-kw-stats { max-width: 760px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
	.ioi-kw-hero-grid .ioi-kw-stats div:last-child:nth-child(odd) { grid-column: auto; }
}
@media (max-width: 767px) {
	.ioi-kw-hero-grid .ioi-kw-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ioi-kw-hero-grid .ioi-kw-stats div:last-child:nth-child(odd) { grid-column: 1 / -1; }
	.ioi-kw-stats dd { font-size: 1.5rem; }
}

/* CTA band lines up with the content column above it. */
.ioi-kw-cta .ioi-gl-wrap { max-width: 1180px; }

/* Opt-in form on the dark card: readable validation and a clear success state.
   WPForms' own theme sets dark text (#333) on <p>, so every text element is set explicitly. */
.ioi-kw-optin .wpforms-form label.wpforms-error, .ioi-kw-optin .wpforms-form em.wpforms-error { color: var(--gl-peach) !important; font: 500 14px/1.4 var(--gl-body) !important; margin-top: 6px !important; }
.ioi-kw-optin .wpforms-form input.wpforms-error { border-color: var(--gl-peach) !important; }
.ioi-kw .ioi-kw-optin .wpforms-confirmation-container-full,
.ioi-kw .ioi-kw-optin div[submit-success] > .wpforms-confirmation-container-full {
	background: var(--gl-white) !important; border: 0 !important; border-left: 4px solid var(--gl-red) !important; padding: 24px 26px !important; margin: 0 !important;
}
.ioi-kw .ioi-kw-optin .wpforms-confirmation-container-full p,
.ioi-kw .ioi-kw-optin .wpforms-confirmation-container-full strong { color: var(--gl-ink) !important; font: 400 17px/1.5 var(--gl-body) !important; margin: 0 0 12px !important; }
.ioi-kw .ioi-kw-optin .wpforms-confirmation-container-full strong,
.ioi-kw .ioi-kw-optin .ioi-kw-ok-title { font-weight: 600 !important; font-size: 20px !important; }
.ioi-kw .ioi-kw-optin .wpforms-confirmation-container-full p:last-child { margin-bottom: 0 !important; }
.ioi-kw .ioi-kw-optin .wpforms-confirmation-container-full a { color: var(--gl-red) !important; font-weight: 600; text-decoration: underline; }
.ioi-kw .ioi-kw-optin .wpforms-confirmation-container-full a.ioi-kw-dl {
	display: inline-flex; align-items: center; gap: 10px; padding: 14px 22px; background: var(--gl-red); color: var(--gl-white) !important;
	text-decoration: none; text-transform: uppercase; letter-spacing: .05em; font: 600 15px var(--gl-body) !important;
}
.ioi-kw .ioi-kw-optin .wpforms-confirmation-container-full a.ioi-kw-dl:hover { background: var(--gl-ink); }
.ioi-kw .ioi-kw-optin .wpforms-confirmation-container-full .ioi-kw-ok-note { font-size: 15px !important; color: var(--gl-muted) !important; }

/* Unlock, copy, sort, volume bars, rising filter, phone jump bar (2026-10-28) ------------------------------------- */

/* Shown only before / after the visitor unlocks. */
.ioi-kw-unlocked .ioi-kw-when-locked, html:not(.ioi-kw-unlocked) .ioi-kw-when-unlocked { display: none !important; }

/* Locked rows: the first three fade out blurred under the lock panel; the rest stay hidden. */
html:not(.ioi-kw-unlocked) .ioi-kw-locked:not(.ioi-kw-teaser),
html:not(.ioi-kw-unlocked) .is-filtered .ioi-kw-locked { display: none; }
html:not(.ioi-kw-unlocked) .ioi-kw-teaser > * { filter: blur(5px); opacity: .55; user-select: none; pointer-events: none; }
html:not(.ioi-kw-unlocked) .ioi-kw-teaser .ioi-kw-spark { display: none; }
.ioi-kw-lock {
	position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center;
	/* Overlap only the blurred teaser rows (1–3 of them, about 49px each). */
	margin-top: calc(var(--teasers, 3) * -49px); padding: calc(var(--teasers, 3) * 30px + 2px) 24px 30px; border: 1px solid var(--gl-line); border-top: 0;
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, .92) 42%, var(--gl-white) 62%);
}
.ioi-kw-lock svg { color: var(--gl-red); }
.ioi-kw .ioi-kw-lock p { margin: 0; font-size: 17px; line-height: 1.45; color: var(--gl-muted); max-width: 460px; }
.ioi-kw-lock p strong { display: block; color: var(--gl-ink); font-size: 19px; }
.ioi-kw .ioi-kw-lock .ioi-kw-unlock-btn { margin-top: 6px; cursor: pointer; font: 600 15px var(--gl-body); border-radius: 0; }
.ioi-kw-unlocked .ioi-kw-lock, .is-filtered .ioi-kw-lock { display: none; }

/* Group head: count + copy button. */
.ioi-kw-group-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.ioi-kw .ioi-kw-copy {
	display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; cursor: pointer; border-radius: 0;
	background: var(--gl-white); color: var(--gl-ink); border: 1px solid var(--gl-line); font: 600 13px var(--gl-body); line-height: 1.2;
}
.ioi-kw .ioi-kw-copy:hover, .ioi-kw .ioi-kw-copy:focus { background: var(--gl-white); color: var(--gl-ink); border-color: var(--gl-ink); }
.ioi-kw .ioi-kw-copy:focus-visible { outline: 2px solid var(--gl-ink); outline-offset: 2px; }
.ioi-kw-copy svg { color: var(--gl-red); }

/* Sortable headers. */
.ioi-kw .ioi-kw-sort {
	all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
	font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit;
}
/* Hover: light grey (the theme's own button hover is red). */
.ioi-kw .ioi-kw-sort { padding: 3px 6px; margin: -3px -6px; transition: background-color .15s; }
.ioi-kw .ioi-kw-sort:hover, .ioi-kw .ioi-kw-sort:focus { background: #ecebed; color: var(--gl-ink); }
.ioi-kw .ioi-kw-sort:focus:not(:focus-visible) { background: transparent; }
.ioi-kw .ioi-kw-sort:hover:focus { background: #ecebed; }
.ioi-kw .ioi-kw-sort:focus-visible { outline: 2px solid var(--gl-ink); outline-offset: 2px; }
.ioi-kw-sort-icon { width: 8px; height: 11px; opacity: .45; background:
	linear-gradient(45deg, transparent 50%, currentColor 50%) top / 8px 4px no-repeat,
	linear-gradient(-135deg, transparent 50%, currentColor 50%) bottom / 8px 4px no-repeat; }
th[aria-sort="ascending"] .ioi-kw-sort, th[aria-sort="descending"] .ioi-kw-sort { color: var(--gl-ink); }
th[aria-sort="ascending"] .ioi-kw-sort-icon { opacity: 1; background: linear-gradient(45deg, transparent 50%, var(--gl-red) 50%) top / 8px 4px no-repeat; }
th[aria-sort="descending"] .ioi-kw-sort-icon { opacity: 1; background: linear-gradient(-135deg, transparent 50%, var(--gl-red) 50%) bottom / 8px 4px no-repeat; }
.ioi-kw-table thead .ioi-kw-c-num .ioi-kw-sort { justify-content: flex-end; }

/* Volume bars behind the monthly searches. */
.ioi-kw-c-vol { min-width: 132px; }
.ioi-kw-vol {
	display: block; padding: 3px 8px; margin: -3px -8px;
	background: linear-gradient(to left, rgba(229, 37, 37, .13) var(--w), transparent var(--w));
}

/* Rising-only toggle. */
.ioi-kw-toggle { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: 15px; font-weight: 600; color: var(--gl-ink); }
.ioi-kw-toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ioi-kw-toggle-ui { position: relative; width: 38px; height: 22px; background: #d6d3d8; transition: background .15s; flex: 0 0 auto; }
.ioi-kw-toggle-ui::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; background: var(--gl-white); transition: transform .15s; }
.ioi-kw-toggle input:checked + .ioi-kw-toggle-ui { background: var(--gl-red); }
.ioi-kw-toggle input:checked + .ioi-kw-toggle-ui::after { transform: translateX(16px); }
.ioi-kw-toggle input:focus-visible + .ioi-kw-toggle-ui { outline: 2px solid var(--gl-ink); outline-offset: 2px; }

/* Unlock card at the end of the keywords. */
.ioi-kw-optin { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
.ioi-kw-optin-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.ioi-kw .ioi-kw-optin-actions .ioi-gl-btn { cursor: pointer; font: 600 15px var(--gl-body); border-radius: 0; }
/* Credential badges: equal white tiles on the dark card and dialog. */
.ioi-kw .ioi-kw-proof, .ioi-kw-dialog .ioi-kw-proof { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ioi-kw-proof li {
	display: flex; align-items: center; justify-content: center; height: 72px; min-width: 72px; margin: 0; padding: 4px;
	background: var(--gl-white); list-style: none;
}
.ioi-kw-proof li::before, .ioi-kw-proof li::marker { content: none; }
.ioi-kw-proof a { display: block; line-height: 0; }
.ioi-kw-proof img { display: block; width: auto; height: 64px; max-width: none; }
.ioi-kw-proof-clutch { flex-direction: column; gap: 6px; padding: 8px 12px !important; }
.ioi-kw-proof-clutch img { height: 14px; width: auto; }
.ioi-kw-proof-clutch span { font: 500 13px/1 var(--gl-body); color: var(--gl-ink); white-space: nowrap; }
.ioi-kw-proof-clutch b { font-weight: 700; font-size: 18px; }
@media (max-width: 767px) {
	.ioi-kw-proof li { height: 60px; min-width: 60px; }
	.ioi-kw-proof img { height: 52px; }
	.ioi-kw-proof-clutch img { height: 12px; }
}

/* Unlock dialog (holds the one email form). */
.ioi-kw-dialog {
	width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow: auto; padding: 36px 36px 28px; border: 0; border-radius: 0;
	background: var(--gl-ink); color: var(--gl-white); font-family: var(--gl-body);
	clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%);
}
.ioi-kw-dialog::backdrop { background: rgba(20, 18, 22, .72); }
.ioi-kw-dialog .ioi-gl-eyebrow { color: var(--gl-peach); margin-bottom: 8px; }
.ioi-kw-dialog h2 { margin: 0 0 10px; font-family: var(--gl-display); font-weight: 500; font-size: 2.2rem; line-height: 1.05; color: var(--gl-white); font-synthesis: none; }
.ioi-kw-dialog .ioi-kw-dialog-lead { margin: 0 0 20px; font-size: 17px; line-height: 1.5; color: #cfcbd1; }
.ioi-kw-dialog .ioi-kw-proof { margin-top: 16px; }
.ioi-kw-dialog .ioi-kw-dialog-close {
	position: absolute; top: 10px; right: 26px; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 0; cursor: pointer;
	background: transparent; color: #cfcbd1; font-size: 28px; line-height: 1;
}
.ioi-kw-dialog .ioi-kw-dialog-close:hover { color: var(--gl-white); background: transparent; }
/* The form styles were written for .ioi-kw-optin; the dialog reuses them. */
.ioi-kw-dialog .wpforms-container { margin: 0 !important; }
.ioi-kw-dialog .wpforms-field { padding: 6px 0 !important; }
.ioi-kw-dialog .wpforms-field-label { font: 600 13px/1.3 var(--gl-body) !important; color: #cfcbd1 !important; margin-bottom: 6px !important; }
.ioi-kw-dialog .wpforms-required-label { color: var(--gl-peach) !important; }
.ioi-kw-dialog .wpforms-form input[type="text"], .ioi-kw-dialog .wpforms-form input[type="email"] {
	width: 100% !important; max-width: 100% !important; height: 48px !important; background: var(--gl-white) !important; border: 1px solid transparent !important;
	border-radius: 0 !important; box-shadow: none !important; font: 400 16px var(--gl-body) !important; color: var(--gl-ink) !important; padding: 0 14px !important;
}
.ioi-kw-dialog .wpforms-form input:focus { border-color: var(--gl-red) !important; outline: none !important; }
.ioi-kw-dialog .wpforms-submit-container { padding-top: 10px !important; }
.ioi-kw-dialog .wpforms-form button.wpforms-submit {
	width: 100% !important; height: 52px !important; background: var(--gl-red) !important; color: var(--gl-white) !important; border: 0 !important;
	border-radius: 0 !important; font: 600 15px var(--gl-body) !important; text-transform: uppercase; letter-spacing: .05em; cursor: pointer;
}
.ioi-kw-dialog .wpforms-form button.wpforms-submit:hover { background: #c81e1e !important; }
.ioi-kw-dialog .wpforms-form label.wpforms-error, .ioi-kw-dialog .wpforms-form em.wpforms-error { color: var(--gl-peach) !important; font: 500 14px/1.4 var(--gl-body) !important; margin-top: 6px !important; }
.ioi-kw-dialog .wpforms-form input.wpforms-error { border-color: var(--gl-peach) !important; }
.ioi-kw-dialog .wpforms-confirmation-container-full {
	background: var(--gl-white) !important; border: 0 !important; border-left: 4px solid var(--gl-red) !important; padding: 22px 24px !important; margin: 0 !important;
}
.ioi-kw-dialog .wpforms-confirmation-container-full p { color: var(--gl-ink) !important; font: 400 17px/1.5 var(--gl-body) !important; margin: 0 0 12px !important; }
.ioi-kw-dialog .wpforms-confirmation-container-full p:last-child { margin-bottom: 0 !important; }
.ioi-kw-dialog .wpforms-confirmation-container-full .ioi-kw-ok-title { font-weight: 600 !important; font-size: 20px !important; }
.ioi-kw-dialog .wpforms-confirmation-container-full a { color: var(--gl-red) !important; font-weight: 600; }
.ioi-kw-dialog .wpforms-confirmation-container-full a.ioi-kw-dl {
	display: inline-flex; padding: 13px 20px; background: var(--gl-red); color: var(--gl-white) !important; text-decoration: none;
	text-transform: uppercase; letter-spacing: .05em; font: 600 14px var(--gl-body) !important;
}
.ioi-kw-dialog .wpforms-confirmation-container-full a.ioi-kw-dl:hover { background: var(--gl-ink); }
.ioi-kw-dialog .wpforms-confirmation-container-full a.ioi-kw-dl-alt { display: inline-block; margin-left: 14px; }

/* Phone jump bar (replaces the long "On this page" box below 960px). */
.ioi-kw-jump { display: none; }
@media (max-width: 960px) {
	.ioi-kw-layout > .ioi-gl-toc { display: none; }
	.ioi-kw-jump {
		display: block; position: sticky; top: var(--ioi-kw-sticky, 60px); /* the site's fixed header is 60px tall on phones */ z-index: 6; margin: 0 -16px 20px; padding: 10px 0;
		background: var(--gl-page); border-bottom: 1px solid var(--gl-line);
	}
	.ioi-kw-jump-track { display: flex; gap: 8px; overflow-x: auto; padding: 0 16px; scrollbar-width: none; }
	.ioi-kw-jump-track::-webkit-scrollbar { display: none; }
	.ioi-kw-jump a {
		flex: 0 0 auto; padding: 8px 12px; background: var(--gl-white); border: 1px solid var(--gl-line);
		font-size: 14px; font-weight: 600; color: var(--gl-ink); text-decoration: none; white-space: nowrap;
	}
	.ioi-kw-jump a.is-active { background: var(--gl-ink); border-color: var(--gl-ink); color: var(--gl-white); }
	.ioi-kw-optin { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
	.ioi-kw-group-head { flex-direction: column; align-items: flex-start; }
	.ioi-kw-lock { margin-top: calc(var(--teasers, 3) * -45px); padding: calc(var(--teasers, 3) * 28px) 16px 24px; }
	.ioi-kw-dialog { padding: 30px 20px 22px; }
	.ioi-kw-dialog h2 { font-size: 1.8rem; }
	.ioi-kw-c-vol { min-width: 110px; }
}

/* <button> versions of the red button: the theme's own button styles otherwise win (dark fill on phones). */
.ioi-kw button.ioi-gl-btn, .ioi-kw button.ioi-gl-btn:focus {
	background: var(--gl-red); color: var(--gl-white); border: 2px solid var(--gl-red); border-radius: 0;
	padding: 16px 28px; font: 600 15px var(--gl-body); line-height: 1.2; text-transform: none; letter-spacing: 0; cursor: pointer;
}
.ioi-kw button.ioi-gl-btn:hover { background: var(--gl-ink); border-color: var(--gl-ink); color: var(--gl-white); }
.ioi-kw-optin button.ioi-gl-btn:hover { background: transparent; border-color: var(--gl-white); }
.ioi-kw button.ioi-gl-btn:focus-visible { outline: 2px solid var(--gl-ink); outline-offset: 2px; }

/* Hero stat boxes: white tiles with dark text (owner, 2026-10-28). */
.ioi-kw .ioi-kw-stats { gap: 8px; background: transparent; border: 0; }
.ioi-kw .ioi-kw-stats div { background: var(--gl-white); }
.ioi-kw .ioi-kw-stats dt { color: rgba(30, 28, 32, .66); }
.ioi-kw .ioi-kw-stats dd { color: var(--gl-ink); }

/* Badge tiles: make sure the theme's list styles never add bullets. */
.ioi-kw-proof li { list-style: none !important; }

/* Button arrow, same as the site's Elementor buttons (kit CSS, 2026-10-25): on hover the label eases left while a thin
   arrow slides out of its end, so label + arrow sit centred together; 11px each side is always reserved so the button
   keeps its size. Wrap the label in .ioi-kw-btn-label and add .ioi-kw-arrow to the button. */
.ioi-kw-arrow { display: inline-flex; align-items: center; justify-content: center; }
.ioi-kw-arrow .ioi-kw-btn-label { position: relative; display: inline-block; padding: 0 11px; transition: transform .55s cubic-bezier(.22, 1, .36, 1); }
.ioi-kw-arrow .ioi-kw-btn-label::after {
	content: ""; position: absolute; left: calc(100% - 11px); top: 50%; width: 14px; height: 14px; margin: -7px 0 0 8px; background: currentColor; opacity: 0; transform: translateX(-12px);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1.5 8h12M9 3.5 13.5 8 9 12.5' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1.5 8h12M9 3.5 13.5 8 9 12.5' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: opacity .35s ease, transform .55s cubic-bezier(.22, 1, .36, 1);
}
.ioi-kw-arrow:is(:hover, :focus-visible) .ioi-kw-btn-label { transform: translateX(-11px); }
.ioi-kw-arrow:is(:hover, :focus-visible) .ioi-kw-btn-label::after { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
	.ioi-kw-arrow .ioi-kw-btn-label, .ioi-kw-arrow .ioi-kw-btn-label::after { transition: opacity .2s ease !important; }
}
/* Like the site's buttons, solid buttons keep their colour on hover: the arrow is the hover effect. */
.ioi-kw .ioi-gl-btn:hover, .ioi-kw .ioi-gl-btn:focus, .ioi-kw button.ioi-gl-btn:hover, .ioi-kw-optin button.ioi-gl-btn:hover,
.ioi-kw-dialog a.ioi-kw-dl:hover { background: var(--gl-red); border-color: var(--gl-red); color: var(--gl-white); }
.ioi-kw-dialog .wpforms-confirmation-container-full a.ioi-kw-dl:hover { background: var(--gl-red); }