/*
Theme Name: Strong IPTV
Theme URI: https://strongiptvv.com/
Author: Strong IPTV
Author URI: https://strongiptvv.com/
Description: Editorial "buyer's guide" theme for Strong IPTV — white, fast, accessible and conversion-focused. American English, USD pricing, WhatsApp-first support, 30 page templates, schema and responsive AVIF/WebP imagery.
Version: 1.0.0
Requires at least: 6.3
Tested up to: 6.8
Requires PHP: 7.4
License: Proprietary — built for strongiptvv.com
Text Domain: strong-iptv
Tags: custom-logo, custom-menu, featured-images, threaded-comments, translation-ready, accessibility-ready
*/

/* ==========================================================================
   1. Design tokens
   ========================================================================== */
:root {
	--sti-paper: #ffffff;
	--sti-linen: #f5f3ee;
	--sti-mist: #eef1fa;
	--sti-ink: #0a1235;
	--sti-ink-2: #1c2550;
	--sti-slate: #3b4258;
	--sti-muted: #5e6478;
	--sti-blue: #1b4dff;
	--sti-blue-dark: #1238c9;
	--sti-violet: #6a2be0;
	--sti-mint: #00d3a7;
	--sti-mint-soft: #dbf7ef;
	--sti-success: #087a54;
	--sti-danger: #b42318;
	--sti-danger-soft: #fdecea;
	--sti-amber: #8a4a06;
	--sti-amber-bg: #fff5e6;
	--sti-border: #e3e0d8;
	--sti-border-strong: #cfcac0;
	--sti-wa: #25d366;
	--sti-wa-ink: #052e1c;
	--sti-focus: #1b4dff;

	--sti-shadow-1: 0 1px 2px rgb(10 18 53 / 0.06), 0 6px 16px -10px rgb(10 18 53 / 0.18);
	--sti-shadow-2: 0 1px 2px rgb(10 18 53 / 0.06), 0 18px 40px -22px rgb(10 18 53 / 0.32);

	--sti-radius-s: 6px;
	--sti-radius: 10px;
	--sti-radius-l: 16px;

	--sti-font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
	--sti-font-body: "Open Sans", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

	--sti-container: 1240px;
	--sti-gutter: clamp(16px, 4vw, 40px);
	--sti-header-h: 72px;
	--sti-section-y: clamp(64px, 9vw, 120px);
	--sti-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* ==========================================================================
   2. Base
   ========================================================================== */
*,
*::before,
*::after { box-sizing: border-box; }

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--sti-header-h) + 20px);
}

body {
	margin: 0;
	background: var(--sti-paper);
	color: var(--sti-slate);
	font-family: var(--sti-font-body);
	font-size: 1.0625rem;
	line-height: 1.7;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

img,
svg,
video,
picture { display: block; max-width: 100%; }

img { height: auto; }

h1, h2, h3, h4, h5, h6 {
	margin: 0;
	color: var(--sti-ink);
	font-family: var(--sti-font-display);
	font-stretch: 106%;
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.012em;
	text-wrap: balance;
}

h1 { font-size: clamp(2.15rem, 1.5rem + 2.6vw, 3.6rem); font-weight: 800; font-stretch: 110%; letter-spacing: -0.024em; line-height: 1.04; }
h2 { font-size: clamp(1.75rem, 1.3rem + 1.7vw, 2.75rem); font-weight: 750; font-stretch: 108%; letter-spacing: -0.02em; line-height: 1.08; }
h3 { font-size: clamp(1.15rem, 1.05rem + 0.45vw, 1.4rem); }
h4 { font-size: 1.125rem; }

p { margin: 0; text-wrap: pretty; }
p + p { margin-top: 1em; }

ul, ol { margin: 0; }

a {
	color: var(--sti-blue);
	text-decoration-thickness: 1.5px;
	text-underline-offset: 3px;
}
a:hover { color: var(--sti-blue-dark); }

strong, b { color: var(--sti-ink); font-weight: 700; }

hr { border: 0; border-top: 1px solid var(--sti-border); margin: 2.5rem 0; }

:focus-visible {
	outline: 3px solid var(--sti-focus);
	outline-offset: 3px;
	border-radius: 4px;
}

::selection { background: rgb(0 211 167 / 0.35); color: var(--sti-ink); }

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}
.screen-reader-text:focus {
	position: fixed !important;
	top: 12px;
	left: 12px;
	z-index: 100000;
	width: auto;
	height: auto;
	padding: 12px 18px;
	margin: 0;
	clip: auto;
	background: #fff;
	color: var(--sti-ink);
	box-shadow: var(--sti-shadow-2);
}

.sti-skip {
	position: absolute;
	top: -100px;
	left: 16px;
	z-index: 1000;
	padding: 12px 18px;
	border-radius: var(--sti-radius-s);
	background: var(--sti-ink);
	color: #fff;
	font-weight: 600;
	text-decoration: none;
}
.sti-skip:focus { top: 12px; color: #fff; }

.sti-main:focus { outline: none; }

/* WordPress core classes */
.alignleft { float: left; margin: 0.4em 1.5em 1em 0; }
.alignright { float: right; margin: 0.4em 0 1em 1.5em; }
.aligncenter { display: block; margin-inline: auto; }
.wp-caption { max-width: 100%; }
.wp-caption-text,
.gallery-caption { font-size: 0.875rem; color: var(--sti-muted); margin-top: 0.5em; }
.sticky, .bypostauthor { position: relative; }

/* ==========================================================================
   3. Layout
   ========================================================================== */
.sti-container {
	width: 100%;
	max-width: calc(var(--sti-container) + var(--sti-gutter) * 2);
	margin-inline: auto;
	padding-inline: var(--sti-gutter);
}
.sti-container--narrow { max-width: calc(800px + var(--sti-gutter) * 2); }
.sti-container--mid { max-width: calc(1000px + var(--sti-gutter) * 2); }

.sti-section { padding-block: var(--sti-section-y); position: relative; }
.sti-section--linen { background: var(--sti-linen); }
.sti-section--mist { background: var(--sti-mist); }
.sti-section--tight { padding-block: clamp(40px, 6vw, 72px); }
.sti-section--rule { border-top: 1px solid var(--sti-border); }
.sti-section--flush-top { padding-top: 0; }

.sti-grid-2,
.sti-grid-3,
.sti-grid-4 { display: grid; gap: clamp(20px, 2.5vw, 32px); }

@media (min-width: 720px) {
	.sti-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.sti-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
	.sti-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
	.sti-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.sti-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.sti-split { display: grid; gap: clamp(32px, 5vw, 64px); align-items: center; }
@media (min-width: 960px) {
	.sti-split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
	.sti-split--even { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.sti-split--wide-left { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
	.sti-split--top { align-items: start; }
	.sti-split--reverse > :first-child { order: 2; }
}

/* Grid and flex children may shrink below their content width (prevents horizontal page overflow). */
.sti-hero__grid > *,
.sti-phero__grid > *,
.sti-split > *,
.sti-grid-2 > *,
.sti-grid-3 > *,
.sti-grid-4 > *,
.sti-devices > *,
.sti-spec > *,
.sti-pricing > *,
.sti-faqwrap > *,
.sti-doc > *,
.sti-article__layout > *,
.sti-fit > *,
.sti-bento > *,
.sti-cards > *,
.sti-postgrid > *,
.sti-final__inner > *,
.sti-footer__top > *,
.sti-footer__cols > *,
.sti-band > * { min-width: 0; }

.sti-stack > * + * { margin-top: 1rem; }
.sti-stack-lg > * + * { margin-top: 1.75rem; }

.sti-center { text-align: center; }
.sti-mt { margin-top: clamp(28px, 4vw, 48px); }
.sti-mt-s { margin-top: 12px; }

/* ==========================================================================
   4. Typography helpers
   ========================================================================== */
.sti-kicker {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 18px;
	color: var(--sti-violet);
	font-family: var(--sti-font-display);
	font-size: 0.8125rem;
	font-stretch: 112%;
	font-weight: 650;
	letter-spacing: 0.12em;
	line-height: 1.2;
	text-transform: uppercase;
}
.sti-kicker__num {
	display: inline-grid;
	place-items: center;
	min-width: 30px;
	height: 30px;
	padding: 0 6px;
	border-radius: 7px;
	background: var(--sti-ink);
	color: #fff;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.04em;
}
.sti-kicker__num .sti-icon { width: 16px; height: 16px; }

.sti-lead { font-size: clamp(1.075rem, 1rem + 0.3vw, 1.2rem); line-height: 1.65; color: var(--sti-slate); }
.sti-muted { color: var(--sti-muted); }
.sti-small { font-size: 0.9375rem; }
.sti-fine { font-size: 0.875rem; color: var(--sti-muted); line-height: 1.55; }

.sti-mark {
	background: linear-gradient(180deg, transparent 58%, rgb(0 211 167 / 0.38) 58%, rgb(0 211 167 / 0.38) 92%, transparent 92%);
	color: inherit;
	padding: 0 0.06em;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

.sti-icon {
	flex: none;
	width: 1.25em;
	height: 1.25em;
}
.sti-flip { transform: rotate(180deg); }

.sti-sechead { max-width: 760px; margin-bottom: clamp(28px, 4vw, 52px); }
.sti-sechead__title { max-width: 22ch; }
.sti-sechead__lead {
	margin-top: 18px;
	max-width: 62ch;
	color: var(--sti-muted);
	font-size: clamp(1.05rem, 1rem + 0.25vw, 1.175rem);
}
.sti-sechead--center { margin-inline: auto; text-align: center; }
.sti-sechead--center .sti-sechead__title,
.sti-sechead--center .sti-sechead__lead { margin-inline: auto; }
@media (min-width: 960px) {
	.sti-sechead--split {
		display: grid;
		grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
		gap: 18px 56px;
		align-items: end;
		max-width: none;
	}
	.sti-sechead--split .sti-kicker { grid-column: 1 / -1; margin-bottom: 0; }
	.sti-sechead--split .sti-sechead__lead { margin-top: 0; }
}

/* ==========================================================================
   5. Buttons and links
   ========================================================================== */
.sti-btn {
	--sti-btn-bg: var(--sti-blue);
	--sti-btn-fg: #fff;
	--sti-btn-bd: var(--sti-blue);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 52px;
	padding: 0 22px;
	border: 1.5px solid var(--sti-btn-bd);
	border-radius: var(--sti-radius-s);
	background: var(--sti-btn-bg);
	color: var(--sti-btn-fg);
	font-family: var(--sti-font-display);
	font-size: 1rem;
	font-stretch: 104%;
	font-weight: 650;
	line-height: 1.1;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.18s var(--sti-ease), border-color 0.18s var(--sti-ease), color 0.18s var(--sti-ease), transform 0.18s var(--sti-ease), box-shadow 0.18s var(--sti-ease);
}
.sti-btn:hover { color: var(--sti-btn-fg); transform: translateY(-1px); box-shadow: var(--sti-shadow-1); }
.sti-btn:active { transform: translateY(0); }
.sti-btn .sti-icon { width: 20px; height: 20px; }
.sti-btn__icon { transition: transform 0.18s var(--sti-ease); }
.sti-btn:hover .sti-btn__icon { transform: translateX(3px); }

.sti-btn--primary:hover { --sti-btn-bg: var(--sti-blue-dark); --sti-btn-bd: var(--sti-blue-dark); }
.sti-btn--ink { --sti-btn-bg: var(--sti-ink); --sti-btn-bd: var(--sti-ink); }
.sti-btn--ink:hover { --sti-btn-bg: var(--sti-ink-2); --sti-btn-bd: var(--sti-ink-2); }
.sti-btn--ghost { --sti-btn-bg: transparent; --sti-btn-fg: var(--sti-ink); --sti-btn-bd: var(--sti-border-strong); }
.sti-btn--ghost:hover { --sti-btn-bd: var(--sti-ink); --sti-btn-fg: var(--sti-ink); }
.sti-btn--light { --sti-btn-bg: #fff; --sti-btn-fg: var(--sti-ink); --sti-btn-bd: #fff; }
.sti-btn--light:hover { --sti-btn-bg: var(--sti-mint-soft); --sti-btn-bd: var(--sti-mint-soft); --sti-btn-fg: var(--sti-ink); }
.sti-btn--wa { --sti-btn-bg: var(--sti-wa); --sti-btn-fg: var(--sti-wa-ink); --sti-btn-bd: var(--sti-wa); }
.sti-btn--wa:hover { --sti-btn-bg: #1fbe5b; --sti-btn-bd: #1fbe5b; --sti-btn-fg: var(--sti-wa-ink); }
.sti-btn--wa-outline { --sti-btn-bg: #fff; --sti-btn-fg: var(--sti-wa-ink); --sti-btn-bd: var(--sti-wa); }
.sti-btn--wa-outline .sti-icon { color: #128c4a; }
.sti-btn--wa-outline:hover { --sti-btn-bg: #effcf4; --sti-btn-fg: var(--sti-wa-ink); }
.sti-btn--sm { min-height: 42px; padding: 0 16px; font-size: 0.9375rem; }
.sti-btn--block { width: 100%; }

.sti-btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }

.sti-link-arrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--sti-ink);
	font-family: var(--sti-font-display);
	font-stretch: 104%;
	font-weight: 650;
	text-decoration: underline;
	text-decoration-color: var(--sti-mint);
	text-decoration-thickness: 2px;
	text-underline-offset: 6px;
	transition: color 0.18s var(--sti-ease), text-decoration-color 0.18s var(--sti-ease);
}
.sti-link-arrow .sti-icon { width: 18px; height: 18px; transition: transform 0.18s var(--sti-ease); }
.sti-link-arrow:hover { color: var(--sti-blue); text-decoration-color: var(--sti-blue); }
.sti-link-arrow:hover .sti-icon { transform: translateX(3px); }

.sti-links { display: flex; flex-wrap: wrap; gap: 14px 28px; margin-top: 28px; }

/* ==========================================================================
   6. Header
   ========================================================================== */
.sti-topbar {
	background: var(--sti-linen);
	border-bottom: 1px solid var(--sti-border);
	color: var(--sti-slate);
	font-size: 0.875rem;
}
.sti-topbar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	min-height: 40px;
}
.sti-topbar__note { display: inline-flex; align-items: center; gap: 8px; }
.sti-topbar__note .sti-icon { color: var(--sti-violet); width: 18px; height: 18px; }
.sti-topbar__contact { display: flex; gap: 22px; padding: 0; list-style: none; }
.sti-topbar__contact a {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	color: var(--sti-ink);
	font-weight: 600;
	text-decoration: none;
}
.sti-topbar__contact a:hover { color: var(--sti-blue); }
.sti-topbar__contact .sti-icon { width: 17px; height: 17px; }
@media (max-width: 899px) { .sti-topbar { display: none; } }

.sti-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: rgb(255 255 255 / 0.96);
	border-bottom: 1px solid transparent;
	transition: border-color 0.2s var(--sti-ease), box-shadow 0.2s var(--sti-ease);
}
@supports (backdrop-filter: blur(8px)) {
	.sti-header { background: rgb(255 255 255 / 0.88); backdrop-filter: saturate(1.4) blur(10px); }
}
.sti-header.is-scrolled { border-bottom-color: var(--sti-border); box-shadow: 0 6px 20px -16px rgb(10 18 53 / 0.35); }
.admin-bar .sti-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .sti-header { top: 46px; } }
@media (max-width: 600px) { .admin-bar .sti-header { top: 0; } }

.sti-header__inner {
	display: flex;
	align-items: center;
	gap: 20px;
	min-height: var(--sti-header-h);
}

.sti-logo { display: inline-flex; flex: none; text-decoration: none; }
.sti-logo__img { width: 144px; height: auto; }
.custom-logo-link img { width: auto; max-height: 48px; }

.sti-nav { margin-left: auto; display: none; }
.sti-nav__list { display: flex; align-items: center; gap: 2px; padding: 0; margin: 0; list-style: none; }
.sti-nav__list > li { position: relative; }
.sti-nav__list a {
	position: relative;
	display: block;
	padding: 10px 12px;
	border-radius: var(--sti-radius-s);
	color: var(--sti-ink);
	font-size: 0.96875rem;
	font-weight: 600;
	text-decoration: none;
	transition: background-color 0.15s var(--sti-ease), color 0.15s var(--sti-ease);
}
.sti-nav__list a:hover { background: var(--sti-mist); color: var(--sti-ink); }
.sti-nav__list > .current-menu-item > a::after,
.sti-nav__list > li > a[aria-current="page"]::after {
	content: "";
	position: absolute;
	left: 12px;
	right: 12px;
	bottom: 4px;
	height: 3px;
	border-radius: 2px;
	background: var(--sti-mint);
}
.sti-nav__list .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 5;
	min-width: 230px;
	padding: 8px;
	margin: 0;
	list-style: none;
	background: #fff;
	border: 1px solid var(--sti-border);
	border-radius: var(--sti-radius);
	box-shadow: var(--sti-shadow-2);
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity 0.18s var(--sti-ease), transform 0.18s var(--sti-ease), visibility 0.18s;
}
.sti-nav__list li:hover > .sub-menu,
.sti-nav__list li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: none; }

.sti-header__actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.sti-header__wa {
	display: none;
	align-items: center;
	gap: 8px;
	padding: 8px 10px;
	border-radius: var(--sti-radius-s);
	color: var(--sti-ink);
	font-size: 0.9375rem;
	font-weight: 600;
	text-decoration: none;
}
.sti-header__wa .sti-icon { width: 20px; height: 20px; color: #128c4a; }
.sti-header__wa:hover { background: #effcf4; color: var(--sti-ink); }

.sti-menu-toggle {
	display: inline-grid;
	place-items: center;
	width: 46px;
	height: 46px;
	padding: 0;
	border: 1.5px solid var(--sti-border-strong);
	border-radius: var(--sti-radius-s);
	background: #fff;
	color: var(--sti-ink);
	cursor: pointer;
}
.sti-menu-toggle .sti-icon { width: 24px; height: 24px; }

@media (min-width: 1180px) {
	.sti-nav { display: block; }
	.sti-header__actions { margin-left: 8px; }
	.sti-menu-toggle { display: none; }
	.sti-header__wa { display: inline-flex; }
}
@media (max-width: 767px) {
	:root { --sti-header-h: 62px; }
	.sti-logo__img { width: 120px; }
	.sti-header__actions .sti-btn--sm { min-height: 40px; padding: 0 14px; }
}

/* No-JS: keep navigation reachable on small screens. */
html:not(.js) .sti-menu-toggle { display: none; }
@media (max-width: 1179px) {
	html:not(.js) .sti-header__inner { flex-wrap: wrap; padding-bottom: 8px; }
	html:not(.js) .sti-nav { display: block; order: 3; width: 100%; overflow-x: auto; }
}

/* Drawer */
.sti-drawer { position: fixed; inset: 0; z-index: 90; }
.admin-bar .sti-drawer { top: 32px; }
@media (max-width: 782px) { .admin-bar .sti-drawer { top: 46px; } }
.sti-drawer[hidden] { display: none; }
.sti-drawer__backdrop {
	position: absolute;
	inset: 0;
	background: rgb(10 18 53 / 0.45);
	animation: sti-fade 0.2s var(--sti-ease);
}
.sti-drawer__panel {
	position: absolute;
	inset: 0 0 0 auto;
	display: flex;
	flex-direction: column;
	gap: 22px;
	width: min(420px, 100%);
	padding: 16px var(--sti-gutter) calc(24px + env(safe-area-inset-bottom));
	overflow-y: auto;
	background: #fff;
	box-shadow: var(--sti-shadow-2);
	animation: sti-slide 0.25s var(--sti-ease);
}
.sti-drawer__head { display: flex; align-items: center; justify-content: space-between; min-height: 46px; }
.sti-drawer__close {
	display: inline-grid;
	place-items: center;
	width: 46px;
	height: 46px;
	border: 1.5px solid var(--sti-border-strong);
	border-radius: var(--sti-radius-s);
	background: #fff;
	color: var(--sti-ink);
	cursor: pointer;
}
.sti-drawer__list,
.sti-drawer__quick { padding: 0; margin: 0; list-style: none; }
.sti-drawer__list a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 4px;
	border-bottom: 1px solid var(--sti-border);
	color: var(--sti-ink);
	font-family: var(--sti-font-display);
	font-size: 1.25rem;
	font-stretch: 106%;
	font-weight: 700;
	text-decoration: none;
}
.sti-drawer__list .sub-menu { padding: 0 0 8px 14px; list-style: none; }
.sti-drawer__list .sub-menu a { font-size: 1.0625rem; font-weight: 600; border-bottom: 0; padding: 8px 4px; }
.sti-drawer__label {
	margin-bottom: 8px;
	color: var(--sti-muted);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}
.sti-drawer__quick { display: flex; flex-wrap: wrap; gap: 8px; }
.sti-drawer__quick a {
	display: inline-block;
	padding: 9px 14px;
	border: 1px solid var(--sti-border);
	border-radius: 999px;
	color: var(--sti-ink);
	font-size: 0.9375rem;
	font-weight: 600;
	text-decoration: none;
}
.sti-drawer__contact { display: grid; gap: 10px; margin-top: auto; }
.sti-drawer__contact .sti-btn { width: 100%; }
body.sti-menu-open { overflow: hidden; }

@keyframes sti-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes sti-slide { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ==========================================================================
   7. Breadcrumbs
   ========================================================================== */
.sti-crumbs { margin-bottom: 22px; font-size: 0.875rem; }
.sti-crumbs ol { display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 0; list-style: none; }
.sti-crumbs li { display: inline-flex; align-items: center; gap: 6px; color: var(--sti-muted); }
.sti-crumbs li + li::before { content: "/"; color: var(--sti-border-strong); }
.sti-crumbs a { color: var(--sti-slate); text-decoration: none; }
.sti-crumbs a:hover { color: var(--sti-blue); text-decoration: underline; }
.sti-crumbs [aria-current] { color: var(--sti-ink); font-weight: 600; }

/* ==========================================================================
   8. Figures and frames
   ========================================================================== */
.sti-picture img { width: 100%; height: auto; }
.sti-figure { margin: 0; }
.sti-figure .sti-picture img { border-radius: var(--sti-radius); }
.sti-figure figcaption {
	margin-top: 10px;
	padding-left: 12px;
	border-left: 2px solid var(--sti-mint);
	color: var(--sti-muted);
	font-size: 0.875rem;
	font-style: italic;
	line-height: 1.5;
}
.sti-frame {
	padding: 8px;
	border: 1px solid var(--sti-border);
	border-radius: 18px;
	background: #fff;
	box-shadow: var(--sti-shadow-2);
}
.sti-frame .sti-picture img { border-radius: 12px; }

/* ==========================================================================
   9. Front-page hero
   ========================================================================== */
.sti-hero { padding-block: clamp(28px, 4.5vw, 64px) clamp(36px, 5vw, 64px); }
.sti-hero__grid { display: grid; gap: clamp(28px, 4vw, 56px); align-items: center; }
@media (min-width: 1024px) {
	.sti-hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 4vw, 64px); }
}
.sti-hero__kicker {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 14px;
	margin-bottom: 22px;
	color: var(--sti-muted);
	font-size: 0.875rem;
}
.sti-hero__kicker .sti-kicker { margin: 0; }
.sti-hero__kicker time { font-weight: 600; color: var(--sti-slate); }
.sti-pixels { display: inline-flex; gap: 3px; }
.sti-pixels i { display: block; width: 7px; height: 7px; background: var(--sti-mint); border-radius: 1px; }
.sti-pixels i:nth-child(2) { opacity: 0.6; }
.sti-pixels i:nth-child(3) { opacity: 0.3; }

.sti-hero__title { margin: 0; }
.sti-hero__brand {
	display: block;
	font-size: clamp(2.9rem, 1.4rem + 4.7vw, 5.6rem);
	font-stretch: 116%;
	font-weight: 800;
	letter-spacing: -0.035em;
	line-height: 0.92;
}
.sti-hero__promise {
	display: block;
	max-width: 21ch;
	margin-top: 0.4em;
	color: var(--sti-ink);
	font-size: clamp(1.45rem, 1.05rem + 1.6vw, 2.3rem);
	font-stretch: 104%;
	font-weight: 650;
	letter-spacing: -0.015em;
	line-height: 1.15;
}
.sti-hero__standfirst {
	max-width: 58ch;
	margin-top: 24px;
	font-size: clamp(1.05rem, 1rem + 0.3vw, 1.175rem);
	line-height: 1.7;
}
.sti-hero__actions { margin-top: 30px; }
.sti-hero__facts {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 22px;
	margin-top: 28px;
	padding: 18px 0 0;
	border-top: 1px solid var(--sti-border);
	list-style: none;
	font-size: 0.9375rem;
	color: var(--sti-ink);
	font-weight: 600;
}
.sti-hero__facts li { display: inline-flex; align-items: center; gap: 8px; }
.sti-hero__facts .sti-icon {
	width: 22px;
	height: 22px;
	padding: 3px;
	border-radius: 50%;
	background: var(--sti-mint-soft);
	color: var(--sti-success);
}

.sti-hero__media { position: relative; margin: 0; }
.sti-hero__chip {
	position: absolute;
	left: 22px;
	bottom: 64px;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	max-width: calc(100% - 44px);
	padding: 10px 14px;
	border-radius: 12px;
	background: rgb(255 255 255 / 0.95);
	box-shadow: var(--sti-shadow-2);
	color: var(--sti-ink);
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.35;
}
.sti-hero__chip .sti-icon { width: 22px; height: 22px; color: var(--sti-violet); }
.sti-hero__media figcaption { margin: 12px 8px 4px; }
@media (max-width: 767px) {
	.sti-hero__chip { position: static; margin: 12px 0 0; box-shadow: none; border: 1px solid var(--sti-border); }
}

/* Contents rail */
.sti-contents {
	margin-top: clamp(32px, 5vw, 56px);
	border-top: 2px solid var(--sti-ink);
	border-bottom: 1px solid var(--sti-border);
}
.sti-contents__inner { display: flex; align-items: stretch; }
.sti-contents__label {
	flex: none;
	display: flex;
	align-items: center;
	padding: 14px 18px 14px 0;
	color: var(--sti-ink);
	font-family: var(--sti-font-display);
	font-size: 0.8125rem;
	font-stretch: 112%;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}
.sti-contents__list {
	display: flex;
	flex: 1 1 auto;
	min-width: 0;
	gap: 0;
	padding: 0;
	margin: 0;
	overflow-x: auto;
	list-style: none;
	scroll-snap-type: x proximity;
	scrollbar-width: none;
}
.sti-contents__list::-webkit-scrollbar { display: none; }
.sti-contents__list li { flex: none; scroll-snap-align: start; }
.sti-contents__list a {
	display: flex;
	align-items: center;
	gap: 8px;
	height: 100%;
	padding: 14px clamp(10px, 1.1vw, 16px);
	border-left: 1px solid var(--sti-border);
	color: var(--sti-slate);
	font-size: 0.9375rem;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.15s var(--sti-ease), color 0.15s var(--sti-ease);
}
.sti-contents__list a:hover,
.sti-contents__list a.is-active { background: var(--sti-mist); color: var(--sti-ink); }
.sti-contents__num { color: var(--sti-violet); font-family: var(--sti-font-display); font-weight: 700; font-variant-numeric: tabular-nums; }
@media (max-width: 767px) {
	.sti-contents__label { display: none; }
	.sti-contents__list a:first-child { border-left: 0; }
}

/* ==========================================================================
   10. Inner-page hero
   ========================================================================== */
.sti-phero {
	padding-block: clamp(24px, 3.5vw, 44px) clamp(40px, 5.5vw, 76px);
	border-bottom: 1px solid var(--sti-border);
}
.sti-phero__grid { display: grid; gap: clamp(28px, 4vw, 56px); align-items: center; }
@media (min-width: 1024px) {
	.sti-phero--split .sti-phero__grid { grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); }
}
.sti-phero__title { max-width: 20ch; }
.sti-phero__lead { max-width: 60ch; margin-top: 20px; font-size: clamp(1.075rem, 1rem + 0.3vw, 1.2rem); }
.sti-phero__actions { margin-top: 28px; }
.sti-phero__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 18px;
	margin-top: 22px;
	padding: 0;
	list-style: none;
	color: var(--sti-muted);
	font-size: 0.875rem;
}
.sti-phero__meta li { display: inline-flex; align-items: center; gap: 7px; }
.sti-phero__meta .sti-icon { width: 18px; height: 18px; color: var(--sti-violet); }
.sti-phero--center { text-align: center; }
.sti-phero--center .sti-crumbs ol { justify-content: center; }
.sti-phero--center .sti-phero__title,
.sti-phero--center .sti-phero__lead { margin-inline: auto; }
.sti-phero--center .sti-btn-row,
.sti-phero--center .sti-phero__meta { justify-content: center; }
.sti-phero--linen { background: var(--sti-linen); border-bottom: 0; }
.sti-phero--doc { background: linear-gradient(180deg, var(--sti-linen), #fff); border-bottom: 0; }

/* City art hero */
.sti-city { position: relative; margin-top: 8px; }
.sti-city__art { overflow: hidden; border-radius: var(--sti-radius-l); background: var(--sti-ink); }
.sti-city__img { width: 100%; aspect-ratio: 16 / 8; object-fit: cover; }
.sti-city__card {
	position: relative;
	margin: -56px 12px 0;
	padding: clamp(22px, 3vw, 36px);
	border: 1px solid var(--sti-border);
	border-radius: var(--sti-radius-l);
	background: #fff;
	box-shadow: var(--sti-shadow-2);
}
.sti-city__card .sti-phero__title { font-size: clamp(1.9rem, 1.3rem + 1.9vw, 3rem); max-width: 24ch; }
@media (min-width: 960px) {
	/* Art and card share one grid cell, so the art always grows to fit the card. */
	.sti-city { display: grid; }
	.sti-city__art,
	.sti-city__card { grid-area: 1 / 1; }
	.sti-city__art { min-height: 540px; }
	.sti-city__img { height: 100%; aspect-ratio: auto; }
	.sti-city__card { align-self: center; justify-self: start; width: min(680px, 58%); margin: 44px; }
}

/* ==========================================================================
   11. Boxes, notes, ticks
   ========================================================================== */
.sti-box {
	padding: clamp(20px, 2.6vw, 30px);
	border: 1px solid var(--sti-border);
	border-radius: var(--sti-radius-l);
	background: #fff;
}
.sti-box--rule { border-top: 3px solid var(--sti-ink); border-radius: 0 0 var(--sti-radius-l) var(--sti-radius-l); }
.sti-box--mist { background: var(--sti-mist); border-color: #dce2f3; }
.sti-box--linen { background: var(--sti-linen); }
.sti-box__title { margin-bottom: 12px; font-size: 1.2rem; }

.sti-note {
	position: relative;
	padding: 18px 20px 18px 22px;
	border-left: 3px solid var(--sti-mint);
	border-radius: 0 var(--sti-radius) var(--sti-radius) 0;
	background: #f4fbf8;
	color: var(--sti-slate);
	font-size: 0.98rem;
}
.sti-note__label {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 6px;
	color: var(--sti-ink);
	font-family: var(--sti-font-display);
	font-size: 0.8125rem;
	font-stretch: 110%;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
.sti-note__label .sti-icon { width: 18px; height: 18px; color: var(--sti-success); }
.sti-note--amber { border-left-color: #e8a23a; background: var(--sti-amber-bg); }
.sti-note--amber .sti-note__label .sti-icon { color: var(--sti-amber); }
.sti-note--blue { border-left-color: var(--sti-blue); background: var(--sti-mist); }
.sti-note--blue .sti-note__label .sti-icon { color: var(--sti-blue); }

.sti-admin-hint {
	margin: 16px 0;
	padding: 12px 16px;
	border: 2px dashed #e8a23a;
	border-radius: var(--sti-radius);
	background: var(--sti-amber-bg);
	color: var(--sti-amber);
	font-size: 0.875rem;
}

.sti-ticks { display: grid; gap: 12px; padding: 0; margin: 0; list-style: none; }
.sti-ticks li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; align-items: start; }
.sti-ticks__icon {
	width: 24px;
	height: 24px;
	margin-top: 2px;
	padding: 4px;
	border-radius: 50%;
	background: var(--sti-mint-soft);
	color: var(--sti-success);
}
.sti-ticks--no .sti-ticks__icon { background: var(--sti-danger-soft); color: var(--sti-danger); }
.sti-ticks--info .sti-ticks__icon { background: var(--sti-mist); color: var(--sti-blue); }
.sti-ticks--small { gap: 10px; font-size: 0.9375rem; }
.sti-ticks--small li { grid-template-columns: 20px minmax(0, 1fr); gap: 10px; }
.sti-ticks--small .sti-ticks__icon { width: 20px; height: 20px; padding: 3px; }
.sti-ticks a { color: inherit; text-decoration-color: var(--sti-mint); }

.sti-status {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 11px;
	border-radius: 999px;
	font-family: var(--sti-font-body);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.01em;
	white-space: nowrap;
}
.sti-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.sti-status--good { background: var(--sti-mint-soft); color: var(--sti-success); }
.sti-status--limited { background: var(--sti-amber-bg); color: var(--sti-amber); }

/* ==========================================================================
   12. Fit / not-a-fit
   ========================================================================== */
.sti-fit { display: grid; gap: 20px; }
@media (min-width: 900px) { .sti-fit { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; } }
.sti-fit__col {
	padding: clamp(22px, 3vw, 34px);
	border: 1px solid var(--sti-border);
	border-top: 4px solid var(--sti-mint);
	border-radius: 0 0 var(--sti-radius-l) var(--sti-radius-l);
	background: #fff;
}
.sti-fit__col--no { border-top-color: #e8a23a; background: #fffdf9; }
.sti-fit__title { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; font-size: 1.3rem; }
.sti-fit__after { display: grid; gap: 20px; margin-top: 28px; }
@media (min-width: 900px) { .sti-fit__after { grid-template-columns: 1.4fr 1fr; align-items: center; } }

/* ==========================================================================
   13. Bento content tiles
   ========================================================================== */
.sti-bento { display: grid; gap: 18px; }
@media (min-width: 640px) { .sti-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) {
	.sti-bento { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
	.sti-tile--feature { grid-column: span 2; grid-row: span 2; }
}
@media (min-width: 640px) and (max-width: 1023px) { .sti-tile--feature { grid-column: span 2; } }

.sti-tile {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--sti-border);
	border-radius: 14px;
	background: #fff;
	transition: transform 0.25s var(--sti-ease), box-shadow 0.25s var(--sti-ease);
}
.sti-tile:hover { transform: translateY(-2px); box-shadow: var(--sti-shadow-2); }
.sti-tile__media { aspect-ratio: 16 / 9; overflow: hidden; background: var(--sti-mist); }
.sti-tile__media .sti-picture,
.sti-tile__media img { width: 100%; height: 100%; object-fit: cover; }
.sti-tile--feature .sti-tile__media { flex: 1; min-height: 260px; aspect-ratio: auto; }
.sti-tile__body { padding: 16px 18px 20px; }
.sti-tile--feature .sti-tile__body { padding: 22px 24px 26px; }
.sti-tile__tag {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 8px;
	color: var(--sti-muted);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
.sti-tile__tag--live::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #e5484d; box-shadow: 0 0 0 3px rgb(229 72 77 / 0.18); }
.sti-tile__title { font-size: 1.15rem; }
.sti-tile--feature .sti-tile__title { font-size: clamp(1.35rem, 1.1rem + 0.9vw, 1.75rem); }
.sti-tile__text { margin-top: 6px; color: var(--sti-muted); font-size: 0.9375rem; line-height: 1.6; }

.sti-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0; list-style: none; }
.sti-chips li {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 8px 14px;
	border: 1px solid var(--sti-border);
	border-radius: 999px;
	background: #fff;
	color: var(--sti-ink);
	font-size: 0.9rem;
	font-weight: 600;
}
.sti-chips .sti-icon { width: 17px; height: 17px; color: var(--sti-violet); }

/* ==========================================================================
   14. Tabs + device checker
   ========================================================================== */
.sti-tabs__list { display: none; }
.js .sti-tabs__list {
	display: flex;
	flex-wrap: nowrap;
	gap: 8px;
	padding: 2px 2px 8px;
	margin: 0 0 6px;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	scrollbar-width: thin;
}
@media (min-width: 1024px) { .js .sti-tabs__list { flex-wrap: wrap; overflow: visible; } }
.sti-tab {
	flex: none;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 46px;
	padding: 0 16px;
	border: 1.5px solid var(--sti-border);
	border-radius: 999px;
	background: #fff;
	color: var(--sti-ink);
	font-family: var(--sti-font-body);
	font-size: 0.9375rem;
	font-weight: 600;
	cursor: pointer;
	scroll-snap-align: start;
	transition: background-color 0.18s var(--sti-ease), color 0.18s var(--sti-ease), border-color 0.18s var(--sti-ease);
}
.sti-tab .sti-icon { width: 20px; height: 20px; }
.sti-tab:hover { border-color: var(--sti-ink); }
.sti-tab[aria-selected="true"] { background: var(--sti-ink); border-color: var(--sti-ink); color: #fff; }
.sti-tabs__panel { margin-top: 14px; }
.sti-tabs__panel[hidden] { display: none; }
.sti-tabs__panel:focus-visible { outline-offset: 6px; }
html:not(.js) .sti-tabs__panel + .sti-tabs__panel { margin-top: 18px; }

.sti-devpanel {
	padding: clamp(20px, 3vw, 30px);
	border: 1px solid var(--sti-border);
	border-radius: var(--sti-radius-l);
	background: #fff;
}
.sti-devpanel__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-bottom: 18px; }
.sti-devpanel__title { display: inline-flex; align-items: center; gap: 10px; font-size: 1.3rem; }
.sti-devpanel__title .sti-icon { width: 26px; height: 26px; color: var(--sti-violet); }
.sti-devspec { display: grid; gap: 16px; margin: 0; }
@media (min-width: 640px) { .sti-devspec { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 28px; } }
.sti-devspec div { padding-top: 14px; border-top: 1px solid var(--sti-border); }
.sti-devspec dt {
	margin-bottom: 4px;
	color: var(--sti-muted);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
}
.sti-devspec dd { margin: 0; color: var(--sti-ink); font-size: 0.98rem; line-height: 1.6; }
.sti-devpanel__note { margin-top: 18px; }
.sti-devpanel__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 20px; }
.sti-devpanel__logos { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }
.sti-devpanel__logos .sti-devlogo { height: 22px; }

.sti-devices { display: grid; gap: clamp(28px, 4vw, 48px); }
@media (min-width: 1100px) {
	.sti-devices { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; }
	.sti-devices__media { position: sticky; top: calc(var(--sti-header-h) + 24px); }
}

.sti-logos {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 18px 40px;
	padding: 24px 0;
	margin: clamp(32px, 4vw, 48px) 0 0;
	border-top: 1px solid var(--sti-border);
	border-bottom: 1px solid var(--sti-border);
	list-style: none;
}
.sti-devlogo { width: auto; height: 26px; opacity: 0.72; transition: opacity 0.2s var(--sti-ease); }
.sti-logos li:hover .sti-devlogo { opacity: 1; }
.sti-logos__text { color: var(--sti-ink); font-family: var(--sti-font-display); font-weight: 700; font-stretch: 108%; }
.sti-logos__note { margin-top: 12px; text-align: center; }

/* ==========================================================================
   15. Pricing: ledger + receipt
   ========================================================================== */
.sti-pricing { display: grid; gap: 28px; }
@media (min-width: 1100px) {
	.sti-pricing { grid-template-columns: minmax(0, 1.5fr) minmax(330px, 1fr); align-items: start; gap: 40px; }
}

.sti-ledger { width: 100%; border-collapse: separate; border-spacing: 0; font-variant-numeric: tabular-nums; }
.sti-ledger caption { padding: 0 0 12px; color: var(--sti-muted); font-size: 0.875rem; text-align: left; }
.sti-ledger th {
	padding: 12px 14px;
	border-bottom: 2px solid var(--sti-ink);
	color: var(--sti-muted);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-align: left;
	text-transform: uppercase;
	white-space: nowrap;
}
.sti-ledger td {
	padding: 20px 14px;
	border-bottom: 1px solid var(--sti-border);
	vertical-align: middle;
	transition: background-color 0.2s var(--sti-ease);
}
.sti-ledger tr.is-selected td { background: var(--sti-mist); }
.sti-ledger tr.is-selected td:first-child { box-shadow: inset 4px 0 0 var(--sti-blue); }
.sti-ledger__plan { display: grid; gap: 4px; }
.sti-ledger__name {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	color: var(--sti-ink);
	font-family: var(--sti-font-display);
	font-size: 1.2rem;
	font-stretch: 108%;
	font-weight: 750;
}
.sti-ledger__note { color: var(--sti-muted); font-size: 0.875rem; }
.sti-ledger__tag {
	padding: 3px 9px;
	border-radius: 999px;
	background: var(--sti-ink);
	color: #fff;
	font-family: var(--sti-font-body);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}
.sti-ledger__price { color: var(--sti-ink); font-family: var(--sti-font-display); font-size: 1.75rem; font-weight: 800; letter-spacing: -0.02em; }
.sti-ledger__pm { color: var(--sti-ink); font-weight: 600; white-space: nowrap; }
.sti-ledger__save {
	display: inline-block;
	padding: 4px 10px;
	border-radius: 999px;
	background: var(--sti-mint-soft);
	color: var(--sti-success);
	font-size: 0.8125rem;
	font-weight: 700;
	white-space: nowrap;
}
.sti-ledger__base { color: var(--sti-muted); font-size: 0.875rem; }
.sti-ledger__order { text-align: right; }
.sti-ledger__order .sti-btn { min-height: 44px; padding: 0 14px; font-size: 0.9375rem; white-space: nowrap; }

@media (max-width: 759px) {
	.sti-ledger caption { display: block; }
	.sti-ledger thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
	.sti-ledger,
	.sti-ledger tbody { display: block; }
	.sti-ledger tr {
		display: grid;
		grid-template-columns: 1fr 1fr;
		margin-bottom: 14px;
		border: 1px solid var(--sti-border);
		border-radius: 14px;
		background: #fff;
		overflow: hidden;
	}
	.sti-ledger tr.is-selected { border-color: var(--sti-blue); box-shadow: 0 0 0 1px var(--sti-blue); }
	.sti-ledger td { display: block; padding: 12px 16px; border-bottom: 0; }
	.sti-ledger tr.is-selected td:first-child { box-shadow: none; }
	.sti-ledger td[data-label]::before {
		content: attr(data-label);
		display: block;
		margin-bottom: 2px;
		color: var(--sti-muted);
		font-size: 0.6875rem;
		font-weight: 700;
		letter-spacing: 0.08em;
		text-transform: uppercase;
	}
	.sti-ledger td:first-child { grid-column: 1 / -1; padding-top: 16px; border-bottom: 1px solid var(--sti-border); }
	.sti-ledger__order { grid-column: 1 / -1; text-align: left; padding-bottom: 16px !important; }
	.sti-ledger__order .sti-btn { width: 100%; }
	.sti-ledger__price { font-size: 1.5rem; }
}

.sti-receipt {
	padding: clamp(20px, 2.5vw, 28px);
	border: 1px solid #dce2f3;
	border-radius: 18px;
	background: var(--sti-mist);
}
@media (min-width: 1100px) { .sti-receipt { position: sticky; top: calc(var(--sti-header-h) + 24px); } }
.sti-receipt__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.sti-receipt__title { display: inline-flex; align-items: center; gap: 10px; font-size: 1.15rem; }
.sti-receipt__title .sti-icon { color: var(--sti-violet); }

.sti-seg { margin: 0 0 18px; padding: 0; border: 0; }
.sti-seg legend { margin-bottom: 8px; color: var(--sti-muted); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.sti-seg__opts {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 4px;
	padding: 4px;
	border: 1px solid #dce2f3;
	border-radius: 12px;
	background: #fff;
}
.sti-seg input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.sti-seg label {
	display: grid;
	place-items: center;
	min-height: 48px;
	padding: 6px 4px;
	border-radius: 9px;
	color: var(--sti-ink);
	font-size: 0.9375rem;
	font-weight: 700;
	line-height: 1.15;
	text-align: center;
	cursor: pointer;
	transition: background-color 0.18s var(--sti-ease), color 0.18s var(--sti-ease);
}
.sti-seg label small { display: block; color: var(--sti-muted); font-size: 0.75rem; font-weight: 600; }
.sti-seg input:checked + label { background: var(--sti-ink); color: #fff; }
.sti-seg input:checked + label small { color: #c9cfe6; }
.sti-seg input:focus-visible + label { outline: 3px solid var(--sti-focus); outline-offset: 2px; }

.sti-receipt__lines { margin: 0; }
.sti-receipt__lines div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px dashed #b9c3e0; }
.sti-receipt__lines dt { color: var(--sti-slate); font-size: 0.9375rem; }
.sti-receipt__lines dd { margin: 0; color: var(--sti-ink); font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
.sti-receipt__total dd { font-family: var(--sti-font-display); font-size: 2.4rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1; }
.sti-receipt__save dd { color: var(--sti-success); }
.sti-receipt__inc { margin-top: 16px; padding-top: 16px; border-top: 1px dashed #b9c3e0; }
.sti-receipt__sub { margin-bottom: 10px; color: var(--sti-ink); font-family: var(--sti-font-display); font-size: 0.875rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.sti-receipt__next { display: grid; gap: 6px; margin: 0; padding-left: 1.2em; font-size: 0.9375rem; }
.sti-receipt__cta { display: grid; gap: 10px; margin-top: 20px; }
.sti-receipt__cta .sti-btn { width: 100%; }
.sti-receipt__fine { margin-top: 12px; color: var(--sti-muted); font-size: 0.8125rem; line-height: 1.5; text-align: center; }

/* ==========================================================================
   16. Journey steps
   ========================================================================== */
.sti-steps { position: relative; padding: 0; margin: 0; list-style: none; }
.sti-step { position: relative; padding: 0 0 30px 66px; }
.sti-step:last-child { padding-bottom: 0; }
.sti-step::before {
	content: "";
	position: absolute;
	top: 48px;
	bottom: 4px;
	left: 22px;
	width: 2px;
	background: repeating-linear-gradient(180deg, var(--sti-border-strong) 0 6px, transparent 6px 11px);
}
.sti-step:last-child::before { display: none; }
.sti-step__num {
	position: absolute;
	top: 0;
	left: 0;
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	border: 2px solid var(--sti-ink);
	border-radius: 50%;
	background: #fff;
	color: var(--sti-ink);
	font-family: var(--sti-font-display);
	font-size: 1rem;
	font-weight: 800;
}
.sti-step:first-child .sti-step__num { background: var(--sti-ink); color: #fff; }
.sti-step__title { margin-bottom: 4px; padding-top: 9px; font-size: 1.175rem; }
.sti-step__text { color: var(--sti-slate); font-size: 0.98rem; }

.sti-steps--grid { display: grid; gap: 18px; counter-reset: none; }
@media (min-width: 900px) { .sti-steps--grid { grid-template-columns: repeat(var(--sti-cols, 4), minmax(0, 1fr)); } }
.sti-steps--grid .sti-step { padding: 22px; border: 1px solid var(--sti-border); border-radius: var(--sti-radius-l); background: #fff; }
.sti-steps--grid .sti-step::before { display: none; }
.sti-steps--grid .sti-step__num { position: static; margin-bottom: 14px; }
.sti-steps--grid .sti-step__title { padding-top: 0; }

.sti-composite { position: relative; }
.sti-composite__overlay {
	position: absolute;
	right: -10px;
	bottom: -28px;
	width: 52%;
	padding: 6px;
	border: 1px solid var(--sti-border);
	border-radius: 14px;
	background: #fff;
	box-shadow: var(--sti-shadow-2);
}
.sti-composite__overlay img { border-radius: 9px; }
@media (max-width: 767px) {
	.sti-composite__overlay { position: relative; right: auto; bottom: auto; width: 78%; margin: -40px 0 0 auto; }
}

/* ==========================================================================
   17. Support desk, official channels
   ========================================================================== */
.sti-channels { display: grid; gap: 0; margin: 24px 0; padding: 0; list-style: none; border-top: 1px solid var(--sti-border); }
.sti-channel {
	display: grid;
	grid-template-columns: 46px minmax(0, 1fr);
	gap: 14px;
	align-items: center;
	padding: 16px 0;
	border-bottom: 1px solid var(--sti-border);
}
@media (min-width: 560px) { .sti-channel { grid-template-columns: 46px minmax(0, 1fr) auto; } }
.sti-channel__icon {
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	border-radius: 12px;
	background: var(--sti-mist);
	color: var(--sti-ink);
}
.sti-channel__icon--wa { background: #e7f9ee; color: #128c4a; }
.sti-channel__icon .sti-icon { width: 24px; height: 24px; }
.sti-channel__label { display: block; color: var(--sti-muted); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.sti-channel__value { display: block; color: var(--sti-ink); font-weight: 600; overflow-wrap: anywhere; }
.sti-channel__icon--wa + div .sti-channel__value { white-space: nowrap; }
.sti-channel .sti-fine { display: block; margin-top: 2px; }
.sti-channel__action { grid-column: 2; }
.sti-channel__action.sti-btn-row { gap: 8px; }
.sti-channel__action .sti-btn { min-height: 44px; padding: 0 16px; font-size: 0.9375rem; }
@media (min-width: 560px) { .sti-channel__action { grid-column: auto; } }

.sti-official {
	display: grid;
	gap: 18px;
	padding: clamp(22px, 3vw, 32px);
	border: 2px solid var(--sti-ink);
	border-radius: var(--sti-radius-l);
	background: #fff;
}
@media (min-width: 900px) { .sti-official { grid-template-columns: auto minmax(0, 1fr) minmax(0, 1.1fr); align-items: center; gap: 28px; } }
.sti-official__icon {
	display: grid;
	place-items: center;
	width: 60px;
	height: 60px;
	border-radius: 16px;
	background: var(--sti-ink);
	color: var(--sti-mint);
}
.sti-official__icon .sti-icon { width: 32px; height: 32px; }
.sti-official__title { font-size: 1.3rem; }
.sti-official__list { display: grid; gap: 8px; padding: 0; margin: 0; list-style: none; }
.sti-official__list li { display: flex; align-items: center; gap: 10px; color: var(--sti-ink); font-weight: 600; overflow-wrap: anywhere; }
.sti-official__list .sti-icon { width: 20px; height: 20px; color: var(--sti-success); }

/* ==========================================================================
   18. Tables (spec sheet, comparison, matrix)
   ========================================================================== */
.sti-tablewrap { overflow-x: auto; }
.sti-table { width: 100%; border-collapse: collapse; font-size: 0.98rem; font-variant-numeric: tabular-nums; }
.sti-table caption { padding-bottom: 12px; color: var(--sti-muted); font-size: 0.875rem; text-align: left; }
.sti-table th,
.sti-table td { padding: 15px 14px; border-bottom: 1px solid var(--sti-border); text-align: left; vertical-align: top; }
.sti-table thead th {
	border-bottom: 2px solid var(--sti-ink);
	color: var(--sti-muted);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	vertical-align: bottom;
}
.sti-table tbody th { color: var(--sti-ink); font-family: var(--sti-font-display); font-weight: 700; font-stretch: 104%; }
.sti-table .is-us { background: #f6f8fe; }
.sti-table thead .is-us { background: var(--sti-ink); color: #fff; border-radius: 10px 10px 0 0; }
.sti-cell { display: flex; gap: 10px; align-items: flex-start; }
.sti-cell .sti-icon { width: 22px; height: 22px; margin-top: 1px; padding: 3px; border-radius: 50%; }
.sti-cell--yes .sti-icon { background: var(--sti-mint-soft); color: var(--sti-success); }
.sti-cell--no .sti-icon { background: var(--sti-danger-soft); color: var(--sti-danger); }
.sti-cell--info .sti-icon { background: var(--sti-amber-bg); color: var(--sti-amber); }

@media (max-width: 759px) {
	.sti-table--stack caption { display: block; }
	.sti-table--stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
	.sti-table--stack,
	.sti-table--stack tbody,
	.sti-table--stack tr,
	.sti-table--stack th,
	.sti-table--stack td { display: block; width: 100%; }
	.sti-table--stack tr { margin-bottom: 14px; padding: 6px 0; border: 1px solid var(--sti-border); border-radius: 14px; background: #fff; }
	.sti-table--stack tbody th { padding: 12px 16px 6px; border-bottom: 0; font-size: 1.05rem; }
	.sti-table--stack td { padding: 8px 16px 12px; border-bottom: 0; }
	.sti-table--stack td[data-label]::before {
		content: attr(data-label);
		display: block;
		margin-bottom: 4px;
		color: var(--sti-muted);
		font-size: 0.6875rem;
		font-weight: 700;
		letter-spacing: 0.08em;
		text-transform: uppercase;
	}
	.sti-table--stack .is-us { background: transparent; }
}

.sti-spec { display: grid; gap: clamp(28px, 4vw, 48px); }
@media (min-width: 1024px) { .sti-spec { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; } }

/* ==========================================================================
   19. FAQ
   ========================================================================== */
.sti-faqwrap { display: grid; gap: 32px; }
@media (min-width: 1024px) {
	.sti-faqwrap { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 64px; align-items: start; }
	.sti-faqwrap__aside { position: sticky; top: calc(var(--sti-header-h) + 28px); }
}
.sti-faq { border-bottom: 1px solid var(--sti-border); }
.sti-faq__item { border-top: 1px solid var(--sti-border); }
.sti-faq__q {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	gap: 16px;
	align-items: center;
	padding: 20px 2px;
	color: var(--sti-ink);
	font-family: var(--sti-font-display);
	font-size: clamp(1.02rem, 0.98rem + 0.2vw, 1.12rem);
	font-stretch: 104%;
	font-weight: 650;
	line-height: 1.4;
	list-style: none;
	cursor: pointer;
	transition: color 0.15s var(--sti-ease);
}
.sti-faq__q::-webkit-details-marker { display: none; }
.sti-faq__q:hover { color: var(--sti-blue); }
.sti-faq__num { min-width: 36px; color: var(--sti-violet); font-size: 0.8125rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.sti-faq__icon {
	position: relative;
	width: 32px;
	height: 32px;
	border: 1.5px solid var(--sti-border-strong);
	border-radius: 50%;
	transition: transform 0.25s var(--sti-ease), background-color 0.2s var(--sti-ease), border-color 0.2s var(--sti-ease);
}
.sti-faq__icon::before,
.sti-faq__icon::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 12px;
	height: 2px;
	margin: -1px 0 0 -6px;
	border-radius: 1px;
	background: var(--sti-ink);
}
.sti-faq__icon::after { transform: rotate(90deg); }
.sti-faq__item[open] .sti-faq__icon { transform: rotate(45deg); background: var(--sti-ink); border-color: var(--sti-ink); }
.sti-faq__item[open] .sti-faq__icon::before,
.sti-faq__item[open] .sti-faq__icon::after { background: #fff; }
.sti-faq__a { padding: 0 52px 24px 52px; color: var(--sti-slate); }
.sti-faq__a p + p { margin-top: 0.8em; }
@media (max-width: 599px) { .sti-faq__a { padding: 0 4px 22px; } .sti-faq__num { min-width: 30px; } }

.sti-faqsearch { position: relative; max-width: 640px; margin: 28px auto 0; }
.sti-faqsearch .sti-icon { position: absolute; left: 18px; top: 50%; width: 22px; height: 22px; transform: translateY(-50%); color: var(--sti-muted); pointer-events: none; }
.sti-faqsearch input { padding-left: 52px; font-size: 1.05rem; min-height: 58px; border-radius: 999px; }
.sti-faqsearch__count { margin-top: 10px; color: var(--sti-muted); font-size: 0.875rem; text-align: center; min-height: 1.4em; }
.sti-faqcats { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 18px; padding: 0; list-style: none; }
.sti-faqcats a {
	display: inline-block;
	padding: 8px 14px;
	border: 1px solid var(--sti-border);
	border-radius: 999px;
	background: #fff;
	color: var(--sti-ink);
	font-size: 0.9rem;
	font-weight: 600;
	text-decoration: none;
}
.sti-faqcats a:hover { border-color: var(--sti-ink); }
.sti-faqgroup + .sti-faqgroup { margin-top: clamp(40px, 5vw, 64px); }
.sti-faqgroup__title { display: flex; align-items: baseline; gap: 12px; margin-bottom: 14px; font-size: 1.5rem; }
.sti-faqgroup__count { color: var(--sti-muted); font-family: var(--sti-font-body); font-size: 0.875rem; font-weight: 600; }
.sti-faq__item.is-hidden,
.sti-faqgroup.is-hidden { display: none; }

/* ==========================================================================
   20. Cards (guides, posts)
   ========================================================================== */
.sti-cards { display: grid; gap: 24px; }
@media (min-width: 680px) { .sti-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .sti-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sti-card {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--sti-border);
	border-radius: 14px;
	background: #fff;
	transition: transform 0.25s var(--sti-ease), box-shadow 0.25s var(--sti-ease);
}
.sti-card:hover { transform: translateY(-2px); box-shadow: var(--sti-shadow-2); }
.sti-card__media { aspect-ratio: 16 / 9; overflow: hidden; background: var(--sti-mist); }
.sti-card__media img,
.sti-card__media .sti-picture { width: 100%; height: 100%; object-fit: cover; }
.sti-card__body { display: flex; flex: 1; flex-direction: column; gap: 8px; padding: 20px 22px 24px; }
.sti-card__kind { color: var(--sti-violet); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.sti-card__title { font-size: 1.2rem; line-height: 1.3; }
.sti-card__title a { color: var(--sti-ink); text-decoration: none; }
.sti-card__title a::after { content: ""; position: absolute; inset: 0; }
.sti-card__title a:hover { color: var(--sti-blue); }
.sti-card__text { color: var(--sti-muted); font-size: 0.9375rem; line-height: 1.6; }
.sti-card__meta { margin-top: auto; padding-top: 10px; color: var(--sti-muted); font-size: 0.8125rem; }
.sti-card__media--icon { display: grid; place-items: center; background: linear-gradient(135deg, var(--sti-mist), #fff); }
.sti-card__media--icon .sti-icon { width: 56px; height: 56px; color: var(--sti-violet); }

/* Icon feature cards */
.sti-feature { padding: clamp(20px, 2.5vw, 28px); border: 1px solid var(--sti-border); border-radius: var(--sti-radius-l); background: #fff; }
.sti-feature__icon {
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	margin-bottom: 16px;
	border: 1.5px solid var(--sti-ink);
	border-radius: 12px;
	color: var(--sti-ink);
}
.sti-feature__icon .sti-icon { width: 24px; height: 24px; }
.sti-feature__title { margin-bottom: 8px; font-size: 1.15rem; }
.sti-feature__text { color: var(--sti-slate); font-size: 0.98rem; }
.sti-feature--linen { background: var(--sti-linen); border-color: transparent; }

/* ==========================================================================
   21. Final CTA band + plan chips
   ========================================================================== */
.sti-final__inner { display: grid; overflow: hidden; border-radius: 22px; background: var(--sti-ink); }
@media (min-width: 960px) { .sti-final__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.sti-final__media { min-height: 260px; }
.sti-final__media .sti-picture,
.sti-final__media img { width: 100%; height: 100%; object-fit: cover; }
.sti-final__card { padding: clamp(28px, 4.5vw, 56px); color: #d9def0; }
.sti-final__card h2 { color: #fff; }
.sti-final__card .sti-kicker { color: var(--sti-mint); }
.sti-final__card .sti-kicker__num { background: var(--sti-mint); color: var(--sti-ink); }
.sti-final__text { margin-top: 16px; max-width: 46ch; }
.sti-final__card .sti-btn-row { margin-top: 26px; }
.sti-final__card .sti-link-arrow { color: #fff; }
.sti-final__card .sti-link-arrow:hover { color: var(--sti-mint); text-decoration-color: var(--sti-mint); }
.sti-final__card a:focus-visible { outline-color: var(--sti-mint); }

.sti-planchips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 26px 0 0; padding: 0; list-style: none; }
@media (min-width: 560px) { .sti-planchips { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.sti-planchip {
	display: grid;
	gap: 2px;
	padding: 12px 14px;
	border: 1px solid rgb(255 255 255 / 0.22);
	border-radius: 12px;
	color: #fff;
	text-decoration: none;
	transition: background-color 0.18s var(--sti-ease), border-color 0.18s var(--sti-ease);
}
.sti-planchip:hover { background: rgb(255 255 255 / 0.08); border-color: var(--sti-mint); color: #fff; }
.sti-planchip__len { color: #c9cfe6; font-size: 0.8125rem; font-weight: 600; }
.sti-planchip__price { font-family: var(--sti-font-display); font-size: 1.45rem; font-weight: 800; letter-spacing: -0.01em; }
.sti-planchips--light .sti-planchip { border-color: var(--sti-border); color: var(--sti-ink); background: #fff; }
.sti-planchips--light .sti-planchip:hover { border-color: var(--sti-ink); background: var(--sti-mist); color: var(--sti-ink); }
.sti-planchips--light .sti-planchip__len { color: var(--sti-muted); }

/* Slim CTA band */
.sti-band {
	display: grid;
	gap: 20px;
	padding: clamp(24px, 3.5vw, 40px);
	border-radius: var(--sti-radius-l);
	background: var(--sti-linen);
}
@media (min-width: 900px) { .sti-band { grid-template-columns: minmax(0, 1fr) auto; align-items: center; } }
.sti-band__title { font-size: clamp(1.35rem, 1.1rem + 1vw, 1.85rem); }
.sti-band__text { margin-top: 8px; color: var(--sti-slate); }

/* ==========================================================================
   22. Facts strip
   ========================================================================== */
.sti-facts {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	padding: 0;
	margin: 0;
	list-style: none;
	border-top: 2px solid var(--sti-ink);
	border-bottom: 1px solid var(--sti-border);
}
@media (min-width: 900px) { .sti-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.sti-fact { padding: 22px 18px 22px 0; }
@media (min-width: 900px) { .sti-fact + .sti-fact { padding-left: 22px; border-left: 1px solid var(--sti-border); } }
.sti-fact__value { display: block; color: var(--sti-ink); font-family: var(--sti-font-display); font-size: clamp(1.6rem, 1.3rem + 1vw, 2.2rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; }
.sti-fact__label { display: block; margin-top: 6px; color: var(--sti-muted); font-size: 0.9rem; line-height: 1.45; }

/* ==========================================================================
   23. Prose, documents, blog
   ========================================================================== */
.sti-prose { color: var(--sti-slate); font-size: 1.0625rem; line-height: 1.75; }
.sti-prose > * + * { margin-top: 1.1em; }
.sti-prose h2 { margin-top: 2em; font-size: clamp(1.45rem, 1.2rem + 1vw, 1.95rem); scroll-margin-top: calc(var(--sti-header-h) + 20px); }
.sti-prose h3 { margin-top: 1.6em; font-size: 1.25rem; }
.sti-prose h4 { margin-top: 1.4em; }
.sti-prose > h2:first-child,
.sti-prose > h3:first-child { margin-top: 0; }
.sti-prose ul,
.sti-prose ol { padding-left: 1.3em; }
.sti-prose li + li { margin-top: 0.45em; }
.sti-prose li::marker { color: var(--sti-violet); font-weight: 700; }
.sti-prose blockquote { margin-inline: 0; padding: 0.3em 0 0.3em 1.3em; border-left: 3px solid var(--sti-mint); color: var(--sti-ink); font-size: 1.12rem; font-style: italic; }
.sti-prose table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.sti-prose th,
.sti-prose td { padding: 10px 12px; border-bottom: 1px solid var(--sti-border); text-align: left; vertical-align: top; }
.sti-prose th { color: var(--sti-ink); }
.sti-prose img { border-radius: var(--sti-radius); }
.sti-prose figure { margin-inline: 0; }
.sti-prose figcaption { margin-top: 8px; color: var(--sti-muted); font-size: 0.875rem; }
.sti-prose code { padding: 0.12em 0.4em; border-radius: 5px; background: var(--sti-mist); font-size: 0.9em; }
.sti-prose pre { overflow-x: auto; padding: 16px; border-radius: var(--sti-radius); background: var(--sti-ink); color: #eef1fa; }
.sti-prose hr { margin: 2.4em 0; }
.sti-prose .sti-note,
.sti-prose .sti-box { margin-top: 1.6em; }
.sti-prose address { font-style: normal; }
.sti-prose .sti-ticks,
.sti-prose .sti-official__list { padding-left: 0; }
.sti-prose .sti-ticks li + li { margin-top: 0; }
.sti-prose .sti-official h2,
.sti-prose .sti-official h3 { margin-top: 0; }

.sti-figure--phone { max-width: 300px; margin-inline: auto; }
.sti-figure--phone .sti-picture img { border: 8px solid var(--sti-ink); border-radius: 34px; box-shadow: var(--sti-shadow-2); }
.sti-figure--phone figcaption { margin-top: 14px; }

.sti-doc { display: grid; gap: clamp(28px, 4vw, 56px); }
@media (min-width: 1024px) {
	.sti-doc { grid-template-columns: 270px minmax(0, 1fr); align-items: start; }
	.sti-doc__aside { position: sticky; top: calc(var(--sti-header-h) + 28px); }
}
.sti-doc__toc { padding: 18px 20px; border: 1px solid var(--sti-border); border-radius: var(--sti-radius-l); background: #fff; }
.sti-doc__toc p { margin-bottom: 10px; color: var(--sti-ink); font-family: var(--sti-font-display); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.sti-doc__toc ol { display: grid; gap: 4px; padding-left: 1.2em; margin: 0; font-size: 0.9375rem; }
.sti-doc__toc a { color: var(--sti-slate); text-decoration: none; }
.sti-doc__toc a:hover { color: var(--sti-blue); text-decoration: underline; }
.sti-doc__body { max-width: 76ch; }
.sti-doc__summary { margin-bottom: 36px; }
.sti-doc__summary h2 { margin-bottom: 12px; font-size: 1.15rem; }
.sti-doc__help { margin-top: 18px; }
.sti-doc__contact { margin-top: 48px; }

.sti-postgrid { display: grid; gap: 28px; }
@media (min-width: 680px) { .sti-postgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .sti-postgrid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sti-postgrid .sti-card--lead { grid-column: 1 / -1; }
@media (min-width: 900px) {
	.sti-card--lead { flex-direction: row; }
	.sti-card--lead .sti-card__media { flex: 0 0 56%; aspect-ratio: auto; min-height: 320px; }
	.sti-card--lead .sti-card__body { justify-content: center; padding: 32px 36px; }
	.sti-card--lead .sti-card__title { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); }
}

.sti-catnav { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; padding: 0; list-style: none; }
.sti-catnav a {
	display: inline-block;
	padding: 8px 14px;
	border: 1px solid var(--sti-border);
	border-radius: 999px;
	color: var(--sti-ink);
	font-size: 0.9rem;
	font-weight: 600;
	text-decoration: none;
}
.sti-catnav a:hover,
.sti-catnav .is-current a { background: var(--sti-ink); border-color: var(--sti-ink); color: #fff; }

.sti-article__layout { display: grid; gap: clamp(32px, 5vw, 64px); }
@media (min-width: 1100px) { .sti-article__layout { grid-template-columns: minmax(0, 1fr) 320px; align-items: start; } }
.sti-article__header { max-width: 860px; }
.sti-article__title { margin-top: 6px; }
.sti-article__excerpt { margin-top: 18px; max-width: 62ch; font-size: 1.15rem; color: var(--sti-slate); }
.sti-article__media { margin: clamp(24px, 4vw, 40px) 0 0; }
.sti-article__media img { width: 100%; border-radius: var(--sti-radius-l); }
.sti-article__body { max-width: 72ch; }
.sti-postmeta { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 20px 0 0; padding: 0; list-style: none; color: var(--sti-muted); font-size: 0.9rem; }
.sti-postmeta li { display: inline-flex; align-items: center; gap: 7px; }
.sti-postmeta .sti-icon { width: 18px; height: 18px; color: var(--sti-violet); }
.sti-postmeta a { color: var(--sti-ink); font-weight: 600; text-decoration: none; }
.sti-postmeta a:hover { color: var(--sti-blue); text-decoration: underline; }

.sti-toc { margin: 0 0 32px; padding: 20px 22px; border: 1px solid var(--sti-border); border-left: 3px solid var(--sti-violet); border-radius: 0 var(--sti-radius) var(--sti-radius) 0; background: #fff; }
.sti-toc__title { margin-bottom: 8px; color: var(--sti-ink); font-family: var(--sti-font-display); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.sti-toc ol { display: grid; gap: 4px; margin: 0; padding-left: 1.2em; font-size: 0.98rem; }
.sti-toc a { color: var(--sti-slate); text-decoration: none; }
.sti-toc a:hover { color: var(--sti-blue); text-decoration: underline; }

.sti-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 32px; padding: 0; list-style: none; }
.sti-tags a { display: inline-block; padding: 6px 12px; border-radius: 999px; background: var(--sti-linen); color: var(--sti-ink); font-size: 0.875rem; text-decoration: none; }
.sti-tags a:hover { background: var(--sti-ink); color: #fff; }

.sti-authorbox {
	display: grid;
	grid-template-columns: 72px minmax(0, 1fr);
	gap: 18px;
	margin-top: 44px;
	padding: 24px;
	border: 1px solid var(--sti-border);
	border-radius: var(--sti-radius-l);
	background: var(--sti-linen);
}
.sti-authorbox img { width: 72px; height: 72px; border-radius: 50%; }
.sti-authorbox__name { font-size: 1.15rem; }
.sti-authorbox__name a { color: var(--sti-ink); text-decoration: none; }
.sti-authorbox__role { color: var(--sti-violet); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.sti-authorbox__bio { margin-top: 8px; font-size: 0.98rem; }

.sti-sidebar { display: grid; gap: 22px; }
@media (min-width: 1100px) { .sti-sidebar { position: sticky; top: calc(var(--sti-header-h) + 24px); } }
.sti-widget { padding: 22px; border: 1px solid var(--sti-border); border-radius: var(--sti-radius-l); background: #fff; }
.sti-widget__title { margin-bottom: 12px; font-size: 1.05rem; }
.sti-widget ul { padding-left: 1.1em; }
.sti-widget li + li { margin-top: 0.4em; }
.sti-widget--ink { background: var(--sti-ink); border-color: var(--sti-ink); color: #d9def0; }
.sti-widget--ink .sti-widget__title { color: #fff; }
.sti-widget--ink a:not(.sti-planchip) { color: var(--sti-mint); }
.sti-widget--ink .sti-planchips { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 14px; }

.sti-pagination { margin-top: clamp(36px, 5vw, 56px); }
.sti-pagination ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding: 0; margin: 0; list-style: none; }
.sti-pagination__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-width: 46px;
	min-height: 46px;
	justify-content: center;
	padding: 0 14px;
	border: 1px solid var(--sti-border);
	border-radius: var(--sti-radius-s);
	color: var(--sti-ink);
	font-weight: 600;
	text-decoration: none;
}
.sti-pagination__link .sti-icon { width: 18px; height: 18px; }
.sti-pagination__link:hover { border-color: var(--sti-ink); }
.sti-pagination__link.current { background: var(--sti-ink); border-color: var(--sti-ink); color: #fff; }

/* Author page */
.sti-authorhero { display: grid; gap: 24px; align-items: center; }
@media (min-width: 720px) { .sti-authorhero { grid-template-columns: 132px minmax(0, 1fr); gap: 32px; } }
.sti-authorhero img { width: 132px; height: 132px; border-radius: 50%; border: 4px solid #fff; box-shadow: var(--sti-shadow-2); }
.sti-authorhero__links { display: flex; flex-wrap: wrap; gap: 10px 20px; margin-top: 16px; padding: 0; list-style: none; }

/* Comments */
.sti-comments { margin-top: 56px; padding-top: 40px; border-top: 1px solid var(--sti-border); }
.sti-comments__title { margin-bottom: 24px; font-size: 1.5rem; }
.comment-list { padding: 0; list-style: none; }
.comment-list .children { padding-left: clamp(16px, 4vw, 40px); list-style: none; }
.comment-body { padding: 20px 0; border-bottom: 1px solid var(--sti-border); }
.comment-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 0.9rem; }
.comment-author { display: flex; align-items: center; gap: 10px; }
.comment-author img { display: inline-block; border-radius: 50%; }
.comment-author .says { color: var(--sti-muted); }
.comment-author .fn { color: var(--sti-ink); font-style: normal; font-weight: 700; }
.comment-metadata a { color: var(--sti-muted); text-decoration: none; }
.comment-content { margin-top: 10px; }
.reply a { font-size: 0.875rem; font-weight: 600; }
.comment-respond { margin-top: 32px; }
.comment-form label { display: block; margin-bottom: 6px; color: var(--sti-ink); font-weight: 600; }
.comment-form p + p { margin-top: 16px; }
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea { width: 100%; }
.comment-form-cookies-consent { display: flex; gap: 10px; align-items: flex-start; }
.comment-form-cookies-consent label { font-weight: 400; }

/* ==========================================================================
   24. Forms and search
   ========================================================================== */
.sti-form { display: grid; gap: 18px; }
.sti-form__grid { display: grid; gap: 16px 18px; }
@media (min-width: 680px) { .sti-form__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sti-field { display: grid; gap: 6px; margin: 0; }
.sti-field--full { grid-column: 1 / -1; }
.sti-field label { color: var(--sti-ink); font-size: 0.9375rem; font-weight: 600; }
.sti-field--check { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; align-items: start; }
.sti-field--check input { width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--sti-blue); }
.sti-field--check label { font-weight: 400; color: var(--sti-slate); }
.sti-input,
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea,
.sti-search__input {
	width: 100%;
	min-height: 52px;
	padding: 12px 16px;
	border: 1.5px solid var(--sti-border-strong);
	border-radius: 9px;
	background: #fff;
	color: var(--sti-ink);
	font-family: var(--sti-font-body);
	font-size: 1rem;
	line-height: 1.4;
	transition: border-color 0.15s var(--sti-ease), box-shadow 0.15s var(--sti-ease);
}
textarea.sti-input,
.comment-form textarea { min-height: 140px; resize: vertical; }
select.sti-input { appearance: none; padding-right: 44px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a1235' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 20px; }
.sti-input:focus,
.sti-search__input:focus,
.comment-form input:focus,
.comment-form textarea:focus { outline: none; border-color: var(--sti-blue); box-shadow: 0 0 0 4px rgb(27 77 255 / 0.16); }
.sti-help { color: var(--sti-muted); font-size: 0.8125rem; }
.sti-form__status { display: flex; gap: 10px; align-items: flex-start; padding: 14px 16px; border-radius: var(--sti-radius); font-weight: 600; }
.sti-form__status .sti-icon { width: 22px; height: 22px; margin-top: 1px; }
.sti-form__status--ok { background: var(--sti-mint-soft); color: var(--sti-success); }
.sti-form__status--error { background: var(--sti-danger-soft); color: var(--sti-danger); }
.sti-form__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.sti-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

.sti-search { display: flex; gap: 8px; }
.sti-search__input { flex: 1; }
.sti-search__btn { flex: none; }

/* ==========================================================================
   25. Footer
   ========================================================================== */
.sti-footer {
	margin-top: 0;
	padding: clamp(48px, 7vw, 88px) 0 32px;
	background: var(--sti-linen);
	border-top: 1px solid var(--sti-border);
	color: var(--sti-slate);
	font-size: 0.96875rem;
}
.sti-footer__top { display: grid; gap: 32px; padding-bottom: clamp(32px, 5vw, 56px); border-bottom: 1px solid var(--sti-border-strong); }
@media (min-width: 960px) { .sti-footer__top { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 64px; align-items: start; } }
.sti-footer__brand p { max-width: 52ch; margin-top: 18px; }
.sti-footer__official { display: flex; gap: 10px; align-items: flex-start; color: var(--sti-ink); font-size: 0.9rem; font-weight: 600; }
.sti-footer__official .sti-icon { width: 20px; height: 20px; margin-top: 2px; color: var(--sti-success); }
.sti-footer__desk { padding: clamp(22px, 3vw, 32px); border: 1px solid var(--sti-border); border-top: 3px solid var(--sti-ink); border-radius: 0 0 var(--sti-radius-l) var(--sti-radius-l); background: #fff; }
.sti-footer__desk .sti-kicker { margin-bottom: 12px; }
.sti-footer__desk-title { font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.7rem); }
.sti-footer__desk-text { margin-top: 10px; }
.sti-footer__desk-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 20px; }
.sti-footer__cols { display: grid; gap: 32px 24px; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: clamp(32px, 5vw, 52px) 0; }
@media (min-width: 960px) { .sti-footer__cols { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.sti-footer__heading { margin-bottom: 14px; color: var(--sti-ink); font-size: 0.8125rem; font-stretch: 112%; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.sti-footer__list { display: grid; gap: 4px; padding: 0; margin: 0; list-style: none; }
.sti-footer__list a { display: inline-block; padding: 5px 0; color: var(--sti-slate); text-decoration: none; }
.sti-footer__list a:hover { color: var(--sti-blue); text-decoration: underline; }
@media (max-width: 599px) { .sti-footer__trust { grid-column: 1 / -1; } }
.sti-footer__legal { display: grid; gap: 12px; padding-top: 24px; border-top: 1px solid var(--sti-border-strong); font-size: 0.875rem; }
@media (min-width: 960px) { .sti-footer__legal { grid-template-columns: auto 1fr; align-items: center; } }
.sti-footer__copy { color: var(--sti-ink); font-weight: 600; }
.sti-footer__legal-links { display: flex; flex-wrap: wrap; gap: 6px 18px; padding: 0; margin: 0; list-style: none; }
@media (min-width: 960px) { .sti-footer__legal-links { justify-content: flex-end; } }
.sti-footer__legal-links a { color: var(--sti-slate); }
.sti-footer__tm { grid-column: 1 / -1; color: var(--sti-muted); font-size: 0.8125rem; line-height: 1.55; }
/* Reserve room so the floating WhatsApp button never covers the last line of the page. */
.sti-footer { padding-bottom: calc(100px + env(safe-area-inset-bottom)); }

/* ==========================================================================
   26. Floating WhatsApp button
   ========================================================================== */
.sti-wa-fab {
	position: fixed;
	right: 24px;
	bottom: 24px;
	z-index: 60;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 54px;
	padding: 0 22px 0 16px;
	border-radius: 999px;
	background: var(--sti-wa);
	color: var(--sti-wa-ink);
	font-family: var(--sti-font-display);
	font-size: 1rem;
	font-stretch: 104%;
	font-weight: 700;
	white-space: nowrap;
	text-decoration: none;
	box-shadow: 0 12px 28px -12px rgb(5 46 28 / 0.6), 0 2px 6px rgb(5 46 28 / 0.18), 0 0 0 3px #fff;
	transition: transform 0.2s var(--sti-ease), box-shadow 0.2s var(--sti-ease), opacity 0.2s var(--sti-ease), visibility 0.2s;
}
.sti-wa-fab .sti-icon { width: 26px; height: 26px; }
.sti-wa-fab:hover { color: var(--sti-wa-ink); transform: translateY(-2px); box-shadow: 0 16px 32px -12px rgb(5 46 28 / 0.65), 0 2px 6px rgb(5 46 28 / 0.18), 0 0 0 3px #fff; }
.sti-wa-fab:focus-visible { outline: 3px solid var(--sti-ink); outline-offset: 4px; }
body.sti-menu-open .sti-wa-fab,
body.sti-modal-open .sti-wa-fab,
body.sti-fab-hide .sti-wa-fab { opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(12px); }
@media (max-width: 767px) {
	.sti-wa-fab {
		right: 16px;
		bottom: calc(16px + env(safe-area-inset-bottom));
		width: 58px;
		height: 58px;
		min-height: 0;
		padding: 0;
		justify-content: center;
	}
	.sti-wa-fab .sti-icon { width: 30px; height: 30px; }
	.sti-wa-fab__label { display: none; }
}

/* ==========================================================================
   27. Misc components
   ========================================================================== */
.sti-404 { text-align: center; }
.sti-404__code { color: var(--sti-violet); font-family: var(--sti-font-display); font-size: clamp(4rem, 3rem + 6vw, 8rem); font-weight: 800; font-stretch: 120%; line-height: 1; }

.sti-numlist { counter-reset: n; display: grid; gap: 16px; padding: 0; margin: 0; list-style: none; }
.sti-numlist > li { counter-increment: n; position: relative; padding-left: 52px; }
.sti-numlist > li::before {
	content: counter(n, decimal-leading-zero);
	position: absolute;
	left: 0;
	top: 0;
	color: var(--sti-violet);
	font-family: var(--sti-font-display);
	font-size: 1.05rem;
	font-weight: 800;
}
.sti-numlist strong { display: block; margin-bottom: 2px; }

.sti-quote { margin: 0; padding: clamp(24px, 3vw, 36px); border-radius: var(--sti-radius-l); background: var(--sti-linen); }
.sti-quote p { color: var(--sti-ink); font-family: var(--sti-font-display); font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.7rem); font-stretch: 104%; font-weight: 600; line-height: 1.35; }
.sti-quote footer { margin-top: 14px; color: var(--sti-muted); font-size: 0.9rem; }

.sti-scenario { display: grid; gap: 12px; padding: clamp(20px, 2.5vw, 28px); border: 1px solid var(--sti-border); border-radius: var(--sti-radius-l); background: #fff; }
.sti-scenario__who { display: flex; align-items: center; gap: 10px; color: var(--sti-muted); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.sti-scenario__who .sti-icon { width: 20px; height: 20px; color: var(--sti-violet); }
.sti-scenario__plan { margin-top: auto; padding-top: 12px; border-top: 1px dashed var(--sti-border-strong); color: var(--sti-ink); font-weight: 700; }

.sti-filter { position: relative; max-width: 460px; }
.sti-filter .sti-icon { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--sti-muted); pointer-events: none; }
.sti-filter input { padding-left: 48px; border-radius: 999px; }
.sti-catgrid .is-hidden { display: none; }

.sti-copy {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 10px;
	border: 1px solid var(--sti-border);
	border-radius: var(--sti-radius-s);
	background: #fff;
	color: var(--sti-ink);
	font-size: 0.8125rem;
	font-weight: 600;
	cursor: pointer;
}
.sti-copy .sti-icon { width: 16px; height: 16px; }

.sti-kbd { display: inline-block; padding: 1px 7px; border: 1px solid var(--sti-border-strong); border-bottom-width: 2px; border-radius: 5px; background: #fff; color: var(--sti-ink); font-size: 0.85em; font-weight: 600; }

/* ==========================================================================
   28. Motion
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
	.js .sti-reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.35s var(--sti-ease), transform 0.35s var(--sti-ease); }
	.js .sti-reveal.is-visible { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

/* ==========================================================================
   29. Print
   ========================================================================== */
@media print {
	.sti-topbar,
	.sti-header,
	.sti-drawer,
	.sti-footer,
	.sti-wa-fab,
	.sti-contents { display: none !important; }
	body { color: #000; font-size: 12pt; }
	a { color: #000; }
}