/* ============================================================================
   SPYERA — theme visual system
   Rebuilt from the Claude Design canvas. Tokens → light/dark; chrome + sections.
   ========================================================================== */

/* ---- 1. Design tokens ---------------------------------------------------- */
:root {
	--sp-bg: #F5F7FA;
	--sp-surface: #FFFFFF;
	--sp-surface-2: #EEF2F6;
	--sp-text: #0C1826;
	--sp-text-muted: #5A6B7B;
	--sp-border: #E4EAF0;
	--sp-accent: #CC3D38;
	--sp-accent-strong: #A82F2B;
	--sp-hero-bg: #0B1B2B;
	--sp-hero-text: #EAF2F5;

	--sp-accent-rgb: 204, 61, 56;
	--sp-star: #F5A524;

	--sp-radius-pill: 999px;
	--sp-radius-lg: 20px;
	--sp-radius-md: 16px;
	--sp-radius-sm: 12px;
	--sp-radius-xs: 10px;

	--sp-shadow-card: 0 20px 50px rgba(15, 40, 60, .10);
	--sp-shadow-pop: 0 20px 50px rgba(15, 40, 60, .18);
	--sp-shadow-dash: 0 30px 60px rgba(15, 40, 60, .18);
	--sp-shadow-panel: 0 10px 34px rgba(17, 17, 26, .06);

	/* Form validation palette — one language across every form (account + checkout). */
	--sp-error-bg: #FCECEC;
	--sp-error-border: #EDB4B1;
	--sp-error-text: #A82F2B;
	--sp-ok-bg: #EDF7ED;
	--sp-ok-border: #B7E0B7;
	--sp-ok-text: #1E4620;

	--sp-container: 1180px;
	--sp-gutter: clamp(20px, 5vw, 40px);
	--sp-section-y: clamp(56px, 8vw, 76px);

	/* Aliases to the Claude Design canvas variable names so design markup
	   can be reproduced verbatim and still respond to the light/dark toggle. */
	--bg: var(--sp-bg);
	--surface: var(--sp-surface);
	--surface-2: var(--sp-surface-2);
	--text: var(--sp-text);
	--text-muted: var(--sp-text-muted);
	--border: var(--sp-border);
	--accent: var(--sp-accent);
	--accent-strong: var(--sp-accent-strong);
	--hero-bg: var(--sp-hero-bg);
	--hero-text: var(--sp-hero-text);
}

:root[data-theme="dark"] {
	--sp-bg: #0A1420;
	--sp-surface: #0F1C2B;
	--sp-surface-2: #142433;
	--sp-text: #E7EEF5;
	--sp-text-muted: #8CA0B3;
	--sp-border: #20364A;
	--sp-accent: #E5554F;
	--sp-accent-strong: #E5554F;
	--sp-hero-bg: #060E17;
	--sp-hero-text: #EAF2F5;
	--sp-accent-rgb: 229, 85, 79;

	--sp-shadow-card: 0 20px 50px rgba(0, 0, 0, .35);
	--sp-shadow-pop: 0 20px 50px rgba(0, 0, 0, .5);
	--sp-shadow-dash: 0 30px 60px rgba(0, 0, 0, .5);
	--sp-shadow-panel: 0 12px 34px rgba(0, 0, 0, .38);

	--sp-error-bg: rgba(204, 61, 56, .15);
	--sp-error-border: rgba(204, 61, 56, .48);
	--sp-error-text: #F3B1AD;
	--sp-ok-bg: rgba(47, 163, 107, .16);
	--sp-ok-border: rgba(47, 163, 107, .45);
	--sp-ok-text: #8FE0B4;
}

/* ---- 2. Base ------------------------------------------------------------- */
body {
	background: var(--sp-bg);
	color: var(--sp-text);
	font-family: "Manrope", ui-sans-serif, system-ui, sans-serif;
	-webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
a:hover { color: var(--sp-accent); }
.sp-heading, h1, h2, h3, h4 { font-family: "Space Grotesk", ui-sans-serif, sans-serif; }

/* ---- 3. Layout helpers --------------------------------------------------- */
.sp-section { padding: var(--sp-section-y) var(--sp-gutter); }
.sp-section--surface { background: var(--sp-surface); }
.sp-section--bg { background: var(--sp-bg); }
.sp-section--tight { padding-top: clamp(40px, 6vw, 56px); padding-bottom: clamp(40px, 6vw, 56px); }
.sp-container { max-width: var(--sp-container); margin-inline: auto; }
.sp-container--narrow { max-width: 820px; }
.sp-container--reading { max-width: 640px; }

.sp-eyebrow {
	font-size: 12.5px; font-weight: 800; letter-spacing: 1.5px;
	text-transform: uppercase; color: var(--sp-accent-strong); margin: 0 0 12px;
}
.sp-section-head { text-align: center; max-width: 640px; margin: 0 auto 46px; }
.sp-section-head h2 { margin: 0 0 14px; color: var(--sp-text); }
.sp-section-head p { font-size: 16.5px; line-height: 1.6; color: var(--sp-text-muted); margin: 0; }
.sp-lead { font-size: 18px; line-height: 1.6; color: var(--sp-text-muted); }

/* ---- 4. Buttons ---------------------------------------------------------- */
.sp-btn {
	display: inline-flex; align-items: center; gap: 8px; justify-content: center;
	height: 50px; padding: 0 26px; border-radius: var(--sp-radius-sm);
	font-family: "Manrope"; font-weight: 800; font-size: 15px; cursor: pointer;
	border: 1.5px solid transparent; transition: background .15s, border-color .15s, color .15s;
}
.sp-btn--accent { background: var(--sp-accent); color: #fff; }
.sp-btn--accent:hover { background: var(--sp-accent-strong); color: #fff; }
.sp-btn--outline { border-color: var(--sp-accent); color: var(--sp-accent-strong); background: transparent; }
.sp-btn--outline:hover { background: rgba(var(--sp-accent-rgb), .08); color: var(--sp-accent-strong); }
.sp-btn--ghost { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .18); color: var(--sp-hero-text); }
.sp-btn--ghost:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.sp-btn--sm { height: 40px; padding: 0 20px; font-size: 14px; }

/* ---- 5. Header ----------------------------------------------------------- */
.sp-header {
	position: sticky; top: 0; z-index: 50;
	display: flex; align-items: center; justify-content: space-between; gap: 18px;
	padding: 16px var(--sp-gutter);
	background: var(--sp-surface); border-bottom: 1px solid var(--sp-border);
	font-family: "Manrope";
}
.sp-brand { display: flex; align-items: center; gap: 10px; }
.sp-brand__mark { width: 34px; height: 34px; display: inline-block; object-fit: contain; border-radius: 0; }
.sp-brand__name { font-family: "Space Grotesk"; font-weight: 700; font-size: 22px; letter-spacing: 1px; color: var(--sp-text); }
.sp-nav { display: flex; align-items: center; gap: 30px; font-size: 14.5px; font-weight: 600; color: var(--sp-text-muted); }
.sp-nav a { color: var(--sp-text-muted); position: relative; }
.sp-nav a:hover { color: var(--sp-accent); }
.sp-nav__has { position: relative; }
.sp-nav__trigger {
	display: inline-flex; align-items: center; gap: 5px; background: none; border: none; cursor: pointer;
	font-family: "Manrope"; font-weight: 600; font-size: 14.5px; color: var(--sp-text-muted);
}
.sp-nav__trigger:hover { color: var(--sp-accent); }
.sp-menu {
	position: absolute; left: -20px; top: 34px; width: 230px; padding: 8px;
	background: var(--sp-surface); border: 1px solid var(--sp-border); border-radius: 14px;
	box-shadow: var(--sp-shadow-pop); display: none; flex-direction: column; gap: 2px; z-index: 60;
}
.sp-menu.is-open { display: flex; }
.sp-menu a { padding: 9px 12px; border-radius: 8px; font-size: 13.5px; color: var(--sp-text); font-weight: 600; }
.sp-menu a:hover { background: var(--sp-surface-2); color: var(--sp-accent); }
.sp-header__right { display: flex; align-items: center; gap: 10px; }
.sp-iconbtn {
	display: inline-flex; align-items: center; justify-content: center; gap: 6px;
	height: 38px; min-width: 38px; padding: 0 12px; border: 1px solid var(--sp-border);
	background: var(--sp-surface); border-radius: var(--sp-radius-xs); color: var(--sp-text);
	font-family: "Manrope"; font-weight: 700; font-size: 13px; cursor: pointer;
}
.sp-iconbtn:hover { border-color: var(--sp-accent); color: var(--sp-accent); }
.sp-menu--lang { width: 240px; display: none; grid-template-columns: 1fr 1fr; gap: 4px; right: 0; left: auto; padding: 10px; font-size: 13.5px; font-weight: 600; }
.sp-menu--lang.is-open { display: grid; }
.sp-menu--lang span { padding: 8px 10px; border-radius: 8px; color: var(--sp-text); }
.sp-menu--lang span.is-active { background: var(--sp-surface-2); }
.sp-menu--lang span.is-more { color: var(--sp-accent); }

/* ---- 6. Hero (dark split) ------------------------------------------------ */
.sp-hero { position: relative; background: var(--sp-hero-bg); color: var(--sp-hero-text); overflow: hidden; }
.sp-hero__glow { position: absolute; inset: 0; background: radial-gradient(1000px 500px at 78% 30%, rgba(var(--sp-accent-rgb), .22), transparent 60%); }
.sp-hero__inner {
	position: relative; max-width: var(--sp-container); margin: 0 auto;
	display: grid; grid-template-columns: 1.05fr .95fr; gap: 40px; align-items: center;
	padding: clamp(64px, 9vw, 92px) var(--sp-gutter);
}
.sp-hero h1 { color: var(--sp-hero-text); margin: 0 0 20px; }
.sp-hero__lead { font-size: 18px; line-height: 1.6; color: #B9C6CF; max-width: 480px; margin: 0 0 30px; }
.sp-hero__cta { display: flex; gap: 14px; margin-bottom: 30px; flex-wrap: wrap; }
.sp-badge {
	display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px;
	border: 1px solid rgba(255, 255, 255, .16); border-radius: var(--sp-radius-pill);
	font-size: 12.5px; font-weight: 700; letter-spacing: .4px; color: #F2B8B5; margin-bottom: 22px;
}
.sp-badge__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--sp-accent); box-shadow: 0 0 10px var(--sp-accent); }
.sp-chips { display: flex; gap: 10px; flex-wrap: wrap; }
.sp-chip {
	display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px;
	background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .12);
	border-radius: var(--sp-radius-pill); font-size: 13px; font-weight: 600; color: #CFDAE1;
}

/* Radar visual */
.sp-radar { display: flex; justify-content: center; }
.sp-radar__stage { position: relative; width: 400px; height: 400px; max-width: 100%; }
.sp-radar__ring { position: absolute; border-radius: 50%; border: 1px solid rgba(var(--sp-accent-rgb), .28); }
.sp-radar__ring.r1 { inset: 0; opacity: .8; }
.sp-radar__ring.r2 { inset: 52px; }
.sp-radar__ring.r3 { inset: 108px; opacity: 1.2; }
.sp-radar__ring.r4 { inset: 160px; }
.sp-radar__cross-x, .sp-radar__cross-y { position: absolute; background: rgba(var(--sp-accent-rgb), .18); }
.sp-radar__cross-x { left: 50%; top: 0; bottom: 0; width: 1px; }
.sp-radar__cross-y { top: 50%; left: 0; right: 0; height: 1px; }
.sp-radar__sweep { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, rgba(var(--sp-accent-rgb), .45), rgba(var(--sp-accent-rgb), 0) 55%); animation: sp-sweep 4s linear infinite; }
.sp-radar__ping { position: absolute; inset: 160px; border-radius: 50%; background: rgba(var(--sp-accent-rgb), .3); animation: sp-pulse 2.6s ease-out infinite; }
.sp-radar__core { position: absolute; left: 50%; top: 50%; width: 54px; height: 54px; margin: -27px 0 0 -27px; border-radius: var(--sp-radius-md); background: var(--sp-accent); display: flex; align-items: center; justify-content: center; color: #fff; box-shadow: 0 0 30px rgba(var(--sp-accent-rgb), .6); }
.sp-radar__blip { position: absolute; width: 9px; height: 9px; border-radius: 50%; background: #F08A85; box-shadow: 0 0 12px #F08A85; animation: sp-blip 2.4s ease-in-out infinite; }
.sp-radar__blip.b1 { left: 30%; top: 26%; }
.sp-radar__blip.b2 { left: 70%; top: 62%; animation-duration: 3.1s; }
.sp-radar__blip.b3 { left: 60%; top: 20%; animation-duration: 2.7s; }

@keyframes sp-sweep { to { transform: rotate(360deg); } }
@keyframes sp-pulse { 0% { transform: scale(.55); opacity: .55; } 70% { opacity: 0; } 100% { transform: scale(1.6); opacity: 0; } }
@keyframes sp-blip { 0%, 100% { opacity: .25; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.15); } }

/* ---- 7. Press bar -------------------------------------------------------- */
.sp-press { background: var(--sp-surface); border-bottom: 1px solid var(--sp-border); padding: 22px var(--sp-gutter); display: flex; align-items: center; gap: 34px; flex-wrap: wrap; justify-content: center; }
.sp-press__label { font-size: 12px; font-weight: 700; letter-spacing: 1.5px; color: var(--sp-text-muted); }
.sp-press__logo { font-family: "Space Grotesk"; font-weight: 700; font-size: 19px; color: var(--sp-text-muted); opacity: .7; }

/* ---- 8. Stats ------------------------------------------------------------ */
.sp-stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; }
.sp-stat { text-align: center; }
.sp-stat__num { font-family: "Space Grotesk"; font-weight: 700; font-size: clamp(28px, 3vw, 34px); color: var(--sp-accent-strong); }
.sp-stat__label { font-size: 13.5px; color: var(--sp-text-muted); font-weight: 600; }

/* ---- 9. Grids + cards ---------------------------------------------------- */
.sp-grid { display: grid; gap: 18px; }
.sp-grid--4 { grid-template-columns: repeat(4, 1fr); }
.sp-grid--3 { grid-template-columns: repeat(3, 1fr); gap: 20px; }
.sp-grid--2 { grid-template-columns: repeat(2, 1fr); gap: 20px; }

.sp-card { background: var(--sp-bg); border: 1px solid var(--sp-border); border-radius: var(--sp-radius-md); padding: 24px; display: block; }
.sp-card:hover { border-color: var(--sp-accent); color: inherit; }
.sp-card__icon { width: 44px; height: 44px; border-radius: 13px; background: rgba(var(--sp-accent-rgb), .10); color: var(--sp-accent-strong); display: flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.sp-card h3 { font-size: 17px; font-weight: 600; margin: 0 0 8px; color: var(--sp-text); }
.sp-card p { font-size: 13.5px; line-height: 1.55; color: var(--sp-text-muted); margin: 0; }

/* Use-case cards (larger, on surface) */
.sp-usecase { background: var(--sp-surface); border: 1px solid var(--sp-border); border-radius: 18px; padding: 30px; }
.sp-usecase .sp-eyebrow { font-size: 13px; letter-spacing: 1px; margin-bottom: 8px; }
.sp-usecase h3 { font-family: "Space Grotesk"; font-size: 21px; font-weight: 600; margin: 0 0 10px; color: var(--sp-text); }
.sp-usecase p { font-size: 14.5px; line-height: 1.6; color: var(--sp-text-muted); margin: 0; }

/* ---- 10. Dashboard mockup ------------------------------------------------ */
.sp-dashsec { display: grid; grid-template-columns: .9fr 1.1fr; gap: 50px; align-items: center; }
.sp-checklist { display: flex; flex-direction: column; gap: 14px; margin-top: 24px; }
.sp-checklist li { display: flex; gap: 12px; align-items: flex-start; font-size: 14.5px; color: var(--sp-text); list-style: none; }
.sp-check { width: 22px; height: 22px; border-radius: 50%; background: rgba(var(--sp-accent-rgb), .12); color: var(--sp-accent-strong); display: flex; align-items: center; justify-content: center; flex: 0 0 auto; margin-top: 1px; }
.sp-dash { background: var(--sp-hero-bg); border-radius: var(--sp-radius-lg); padding: 22px; box-shadow: var(--sp-shadow-dash); color: #EAF2F5; }
.sp-dash__bar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.sp-dash__title { display: flex; align-items: center; gap: 8px; font-family: "Space Grotesk"; font-weight: 700; font-size: 14px; }
.sp-dash__logo { width: 20px; height: 20px; border-radius: 6px; background: var(--sp-accent); display: inline-block; }
.sp-dash__dots { display: flex; gap: 6px; }
.sp-dash__dots span { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, .25); }
.sp-dash__dots span:last-child { background: var(--sp-accent); }
.sp-dash__tiles { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.sp-dash__tile { background: rgba(255, 255, 255, .06); border-radius: var(--sp-radius-sm); padding: 14px; }
.sp-dash__tile.alert { background: rgba(var(--sp-accent-rgb), .18); border: 1px solid rgba(var(--sp-accent-rgb), .4); }
.sp-dash__tile small { font-size: 11px; color: #9FB2C2; display: block; margin-bottom: 5px; }
.sp-dash__tile b { font-family: "Space Grotesk"; font-weight: 700; font-size: 22px; color: #EAF2F5; }
.sp-dash__map { background: rgba(255, 255, 255, .06); border-radius: var(--sp-radius-sm); padding: 16px; margin-bottom: 12px; }
.sp-dash__maprow { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; font-size: 12px; color: #9FB2C2; }
.sp-dash__track { color: var(--sp-accent); font-weight: 700; font-size: 11px; }
.sp-dash__grid { height: 96px; border-radius: 8px; background: linear-gradient(135deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .02)); position: relative; overflow: hidden; background-image: linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px); background-size: 24px 24px; }
.sp-dash__pin { position: absolute; left: 60%; top: 44%; width: 12px; height: 12px; border-radius: 50%; background: var(--sp-accent); box-shadow: 0 0 0 6px rgba(var(--sp-accent-rgb), .25); }
.sp-dash__feed { display: flex; flex-direction: column; gap: 8px; }
.sp-dash__item { display: flex; align-items: center; gap: 10px; background: rgba(255, 255, 255, .06); border-radius: var(--sp-radius-xs); padding: 10px 12px; }
.sp-dash__ico { width: 28px; height: 28px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; flex: 0 0 auto; }
.sp-dash__ico.wa { background: rgba(37, 211, 102, .15); color: #25D366; }
.sp-dash__ico.rec { background: rgba(var(--sp-accent-rgb), .18); color: var(--sp-accent); }
.sp-dash__item div { flex: 1; }
.sp-dash__item strong { font-size: 12.5px; color: #EAF2F5; font-weight: 600; display: block; }
.sp-dash__item small { font-size: 11px; color: #9FB2C2; }

/* ---- 11. Testimonials ---------------------------------------------------- */
.sp-quote { background: var(--sp-surface); border: 1px solid var(--sp-border); border-radius: 18px; padding: 26px; }
.sp-stars { color: var(--sp-star); font-size: 15px; margin-bottom: 12px; letter-spacing: 1px; }
.sp-quote p { font-size: 14.5px; line-height: 1.6; color: var(--sp-text); margin: 0 0 18px; }
.sp-quote__who { display: flex; align-items: center; gap: 11px; }
.sp-avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--sp-accent); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; }
.sp-quote__name { font-weight: 700; font-size: 14px; color: var(--sp-text); }
.sp-quote__role { font-size: 12.5px; color: var(--sp-text-muted); }

/* ---- 12. FAQ ------------------------------------------------------------- */
.sp-faq { display: flex; flex-direction: column; gap: 12px; }
.sp-faq details { background: var(--sp-bg); border: 1px solid var(--sp-border); border-radius: 14px; overflow: hidden; }
.sp-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 24px; cursor: pointer; font-family: "Space Grotesk"; font-size: 17px; font-weight: 600; color: var(--sp-text); list-style: none; }
.sp-faq summary::-webkit-details-marker { display: none; }
.sp-faq summary::after { content: "+"; color: var(--sp-accent-strong); font-size: 22px; line-height: 1; }
.sp-faq details[open] summary::after { content: "\2013"; }
.sp-faq__a { padding: 0 24px 22px; font-size: 14.5px; line-height: 1.65; color: var(--sp-text-muted); }

/* ---- 13. CTA banner ------------------------------------------------------ */
.sp-cta { background: var(--sp-hero-bg); color: var(--sp-hero-text); text-align: center; position: relative; overflow: hidden; padding: clamp(56px, 8vw, 72px) var(--sp-gutter); }
.sp-cta__glow { position: absolute; inset: 0; background: radial-gradient(700px 300px at 50% 0%, rgba(var(--sp-accent-rgb), .22), transparent 65%); }
.sp-cta__inner { position: relative; max-width: 720px; margin: 0 auto; }
.sp-cta__eyebrow { font-family: "Space Grotesk"; font-weight: 700; font-size: 15px; letter-spacing: 3px; color: #F2B8B5; margin-bottom: 14px; }
.sp-cta h2 { color: var(--sp-hero-text); margin: 0 0 26px; font-size: clamp(30px, 4.5vw, 40px); }

/* ---- 14. Footer ---------------------------------------------------------- */
.sp-footer { background: var(--sp-surface); border-top: 1px solid var(--sp-border); padding: clamp(48px, 7vw, 64px) var(--sp-gutter) 26px; }
.sp-footer__inner { max-width: var(--sp-container); margin: 0 auto; }
.sp-footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr 1fr; gap: 28px; }
.sp-footer__brandcol p { font-size: 13.5px; line-height: 1.6; color: var(--sp-text-muted); margin: 14px 0 16px; max-width: 260px; }
.sp-footer h4 { font-family: "Space Grotesk"; font-size: 13px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--sp-text); margin: 0 0 16px; }
.sp-footer__col a { display: block; font-size: 13.5px; color: var(--sp-text-muted); margin-bottom: 10px; }
.sp-footer__col a:hover { color: var(--sp-accent); }
.sp-social { display: flex; gap: 10px; }
.sp-social a { width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--sp-border); display: flex; align-items: center; justify-content: center; color: var(--sp-text-muted); }
.sp-social a:hover { border-color: var(--sp-accent); color: var(--sp-accent); }
.sp-footer__bottom { max-width: var(--sp-container); margin: 30px auto 0; padding-top: 22px; border-top: 1px solid var(--sp-border); display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 12.5px; color: var(--sp-text-muted); }

/* ---- 15. Responsive ------------------------------------------------------ */
@media (max-width: 980px) {
	.sp-hero__inner { grid-template-columns: 1fr; }
	.sp-radar { order: -1; }
	.sp-dashsec { grid-template-columns: 1fr; }
	.sp-grid--4 { grid-template-columns: repeat(2, 1fr); }
	.sp-stats { grid-template-columns: repeat(2, 1fr); row-gap: 26px; }
	.sp-footer__grid { grid-template-columns: 1fr 1fr; gap: 24px; }
	.sp-nav, .sp-header__lang { display: none; }
}
@media (max-width: 640px) {
	.sp-grid--4, .sp-grid--3, .sp-grid--2 { grid-template-columns: 1fr; }
	.sp-footer__grid { grid-template-columns: 1fr; }
	.sp-radar__stage { width: 300px; height: 300px; }
}

/* ============================================================================
   FeatureDetail template — hero pills, phone mockup, steps, availability, related
   ========================================================================== */
.sp-hero--feature .sp-hero__inner { padding-top: clamp(28px, 4vw, 40px); padding-bottom: clamp(52px, 7vw, 70px); }
.sp-breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #9FB2C2; margin-bottom: 24px; }
.sp-breadcrumb a { color: #9FB2C2; }
.sp-breadcrumb a:hover { color: var(--sp-accent); }
.sp-breadcrumb .cur { color: #F2B8B5; }
.sp-badge__dot--pulse { animation: sp-recpulse 1.4s ease-in-out infinite; }
.sp-hero__pills { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 30px; }
.sp-pill { display: inline-flex; align-items: center; gap: 7px; padding: 9px 15px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: var(--sp-radius-xs); font-size: 13px; font-weight: 700; color: #CFDAE1; }
.sp-pill svg { stroke: var(--sp-accent); }

/* Phone mockup (Snapchat capture feed) */
.sp-phonewrap { display: flex; justify-content: center; }
.sp-phone { width: 270px; max-width: 100%; border-radius: 40px; background: #05090F; border: 8px solid #1a2634; box-shadow: 0 40px 80px rgba(0,0,0,.45); padding: 18px 16px; display: flex; flex-direction: column; }
.sp-phone__top { display: flex; align-items: center; justify-content: space-between; color: #7E93A6; font-size: 11px; font-weight: 700; margin-bottom: 18px; }
.sp-phone__who { text-align: center; margin-bottom: 16px; }
.sp-phone__ava { width: 68px; height: 68px; border-radius: 50%; margin: 0 auto 12px; background: linear-gradient(135deg, #26313f, #12202e); display: flex; align-items: center; justify-content: center; color: #B9C6CF; font-family: "Space Grotesk"; font-weight: 700; font-size: 26px; }
.sp-phone__name { color: #EAF2F5; font-family: "Space Grotesk"; font-weight: 600; font-size: 17px; }
.sp-phone__sub { color: #7E93A6; font-size: 12.5px; }
.sp-phone__tag { display: inline-flex; align-self: center; align-items: center; gap: 7px; padding: 6px 13px; border-radius: var(--sp-radius-pill); background: rgba(var(--sp-accent-rgb),.18); border: 1px solid rgba(var(--sp-accent-rgb),.4); margin: 0 auto 16px; }
.sp-phone__tag span { color: #F2B8B5; font-size: 12px; font-weight: 800; letter-spacing: .5px; }
.sp-phone__tag i { width: 8px; height: 8px; border-radius: 50%; background: var(--sp-accent); animation: sp-recpulse 1.3s ease-in-out infinite; }
.sp-phone__feed { display: flex; flex-direction: column; gap: 9px; }
.sp-snap { display: flex; align-items: center; gap: 10px; background: rgba(255,255,255,.06); border-radius: var(--sp-radius-xs); padding: 9px 11px; }
.sp-snap__ic { width: 30px; height: 30px; border-radius: 9px; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; background: rgba(var(--sp-accent-rgb),.18); color: var(--sp-accent); }
.sp-snap__ic.saved { background: rgba(47,163,107,.16); color: #3DC06F; }
.sp-snap b { font-size: 12.5px; color: #EAF2F5; font-weight: 600; display: block; }
.sp-snap small { font-size: 11px; color: #9FB2C2; }
.sp-phone__note { margin-top: 12px; text-align: center; font-size: 11px; color: #7E93A6; }

/* Numbered how-it-works steps */
.sp-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.sp-step { background: var(--sp-bg); border: 1px solid var(--sp-border); border-radius: var(--sp-radius-md); padding: 26px; }
.sp-step__n { font-family: "Space Grotesk"; font-weight: 700; font-size: 22px; color: var(--sp-accent); margin-bottom: 14px; }
.sp-step h3 { font-size: 17px; font-weight: 600; margin: 0 0 8px; color: var(--sp-text); }
.sp-step p { font-size: 13.5px; line-height: 1.55; color: var(--sp-text-muted); margin: 0; }

/* Icon value cards (use-cases on feature pages) */
.sp-iconcard { background: var(--sp-surface); border: 1px solid var(--sp-border); border-radius: 18px; padding: 28px; }
.sp-iconcard__ic { width: 42px; height: 42px; border-radius: var(--sp-radius-sm); background: rgba(var(--sp-accent-rgb),.10); color: var(--sp-accent-strong); display: flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.sp-iconcard h3 { font-size: 18px; font-weight: 600; margin: 0 0 8px; color: var(--sp-text); }
.sp-iconcard p { font-size: 14px; line-height: 1.6; color: var(--sp-text-muted); margin: 0; }

/* Device availability table */
.sp-avail { border: 1px solid var(--sp-border); border-radius: var(--sp-radius-md); overflow: hidden; }
.sp-avail__row { display: grid; grid-template-columns: 1.4fr 1fr 1.2fr; align-items: center; padding: 16px 22px; border-top: 1px solid var(--sp-border); font-size: 14.5px; color: var(--sp-text); }
.sp-avail__row.head { background: var(--sp-bg); border-top: 0; padding: 14px 22px; font-size: 12px; font-weight: 800; letter-spacing: .5px; color: var(--sp-text-muted); }
.sp-avail__row span:first-child { font-weight: 600; }
.sp-avail__yes { text-align: center; color: #2FA36B; font-weight: 800; }
.sp-avail__mid { text-align: center; color: var(--sp-text-muted); font-weight: 700; }
.sp-avail__ver { text-align: right; color: var(--sp-text-muted); }
.sp-avail__row.head span:nth-child(2) { text-align: center; }
.sp-avail__row.head span:nth-child(3) { text-align: right; }

/* Related features */
.sp-related { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.sp-relcard { background: var(--sp-surface); border: 1px solid var(--sp-border); border-radius: var(--sp-radius-md); padding: 24px; display: flex; align-items: center; gap: 14px; }
.sp-relcard:hover { border-color: var(--sp-accent); color: inherit; }
.sp-relcard__ic { width: 42px; height: 42px; border-radius: var(--sp-radius-sm); background: rgba(var(--sp-accent-rgb),.10); color: var(--sp-accent-strong); display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.sp-relcard b { font-family: "Space Grotesk"; font-size: 16px; font-weight: 600; color: var(--sp-text); display: block; }
.sp-relcard small { font-size: 12.5px; color: var(--sp-text-muted); }

@keyframes sp-recpulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .4; transform: scale(.82); } }
@keyframes sp-wave { 0%, 100% { transform: scaleY(.25); } 50% { transform: scaleY(1); } }

@media (max-width: 980px) {
	.sp-steps { grid-template-columns: repeat(2, 1fr); }
	.sp-related { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
	.sp-steps { grid-template-columns: 1fr; }
	.sp-avail__row { grid-template-columns: 1.2fr .8fr 1fr; padding: 14px; font-size: 13px; }
}

/* ============================================================================
   Platform / product landing pages (Android, iPhone, Windows, Mac)
   ========================================================================== */
.sp-hero--platform .sp-hero__inner { padding-top: clamp(44px, 6vw, 66px); padding-bottom: clamp(52px, 7vw, 70px); }
.sp-pbadge { display: inline-flex; align-items: center; gap: 9px; padding: 6px 13px 6px 8px; border-radius: var(--sp-radius-pill); background: rgba(var(--sp-accent-rgb), .14); border: 1px solid rgba(var(--sp-accent-rgb), .28); margin-bottom: 20px; }
.sp-pbadge__ic { width: 26px; height: 26px; border-radius: 8px; background: var(--sp-accent); color: #fff; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.sp-pbadge__t { font-size: 12.5px; font-weight: 800; letter-spacing: 1px; color: #F2B8B5; }
.sp-hero__note { margin-top: 22px; font-size: 13.5px; color: #9FB2C2; }

/* Highlight pills bar */
.sp-pills { background: var(--sp-surface); border-bottom: 1px solid var(--sp-border); padding: 26px var(--sp-gutter); }
.sp-pills__inner { max-width: var(--sp-container); margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.sp-pill2 { display: flex; align-items: center; gap: 11px; }
.sp-pill2__ic { width: 38px; height: 38px; border-radius: var(--sp-radius-xs); background: rgba(var(--sp-accent-rgb), .10); color: var(--sp-accent-strong); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.sp-pill2 b { font-size: 13.5px; font-weight: 700; color: var(--sp-text); }
.sp-pill2 span span { font-weight: 500; color: var(--sp-text-muted); }

/* Compatibility strip */
.sp-compat { background: var(--sp-surface); border-top: 1px solid var(--sp-border); border-bottom: 1px solid var(--sp-border); padding: 44px var(--sp-gutter); }
.sp-compat__inner { max-width: var(--sp-container); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; }
.sp-compat h3 { font-size: 22px; font-weight: 700; margin: 0 0 12px; color: var(--sp-text); }
.sp-compat__check { display: flex; align-items: center; gap: 8px; padding: 11px 16px; background: rgba(var(--sp-accent-rgb), .08); border: 1px solid rgba(var(--sp-accent-rgb), .2); border-radius: var(--sp-radius-sm); margin-bottom: 12px; width: fit-content; }
.sp-compat__check span:first-child { color: #2FA36B; font-weight: 800; }
.sp-compat__check span:last-child { font-size: 14.5px; font-weight: 600; color: var(--sp-text); }
.sp-chips2 { display: flex; gap: 8px; flex-wrap: wrap; }
.sp-chip2 { font-size: 12.5px; font-weight: 700; padding: 5px 12px; border-radius: var(--sp-radius-pill); background: var(--sp-surface-2); color: var(--sp-text-muted); }

/* Numbered how-it-works (platform variant) */
.sp-howsteps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.sp-howstep { background: var(--sp-surface); border: 1px solid var(--sp-border); border-radius: 18px; padding: 30px; }
.sp-howstep__n { font-family: "Space Grotesk"; font-weight: 700; font-size: 15px; color: #fff; background: var(--sp-accent); width: 34px; height: 34px; border-radius: var(--sp-radius-xs); display: flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.sp-howstep h3 { font-size: 18px; font-weight: 600; margin: 0 0 8px; color: var(--sp-text); }
.sp-howstep p { font-size: 14px; line-height: 1.6; color: var(--sp-text-muted); margin: 0; }
.sp-textlink { display: inline-flex; align-items: center; gap: 7px; font-size: 14.5px; font-weight: 700; color: var(--sp-accent-strong); }

/* Browser/laptop frame (Windows/Mac hero visual) */
.sp-browser { width: 460px; max-width: 100%; border-radius: 14px; overflow: hidden; background: var(--sp-hero-bg); border: 1px solid rgba(255,255,255,.10); box-shadow: 0 40px 80px rgba(0,0,0,.45); }
.sp-browser__bar { display: flex; align-items: center; gap: 8px; padding: 12px 14px; background: rgba(255,255,255,.05); border-bottom: 1px solid rgba(255,255,255,.08); }
.sp-browser__dots { display: flex; gap: 6px; }
.sp-browser__dots span { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,.25); }
.sp-browser__dots span:first-child { background: var(--sp-accent); }
.sp-browser__url { flex: 1; height: 24px; border-radius: 7px; background: rgba(255,255,255,.06); display: flex; align-items: center; padding: 0 12px; font-size: 11px; color: #9FB2C2; }
.sp-browser__body { padding: 18px; }

@media (max-width: 980px) {
	.sp-pills__inner { grid-template-columns: 1fr 1fr; row-gap: 20px; }
	.sp-howsteps { grid-template-columns: 1fr; }
	.sp-compat__inner { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 640px) {
	.sp-pills__inner { grid-template-columns: 1fr; }
}

/* ============================================================================
   Static content pages (About, Compatibility, Legal, Features index, Support)
   ========================================================================== */
/* Centered dark hero */
.sp-hero--center .sp-hero__inner { grid-template-columns: 1fr; max-width: 820px; text-align: center; padding-top: clamp(56px, 7vw, 74px); padding-bottom: clamp(52px, 7vw, 70px); }
.sp-hero--center .sp-hero__glow { background: radial-gradient(900px 460px at 50% 0%, rgba(var(--sp-accent-rgb), .20), transparent 60%); }
.sp-hero--center .sp-eyebrow { color: #F2B8B5; }
.sp-hero--center h1 { margin: 0 0 18px; }
.sp-hero--center .sp-hero__lead { margin: 0 auto; max-width: 620px; }

.sp-stats--4 { grid-template-columns: repeat(4, 1fr); }
.sp-stats--4 .sp-stat__num { color: var(--sp-accent); font-size: clamp(30px, 4vw, 40px); }

/* Long-form prose (story, policies) */
.sp-prose { max-width: 820px; margin-inline: auto; }
.sp-prose h2 { font-size: clamp(26px, 3.4vw, 32px); margin: 0 0 20px; color: var(--sp-text); }
.sp-prose h3 { margin: 28px 0 10px; color: var(--sp-text); }
.sp-prose p, .sp-prose li { font-size: 16px; line-height: 1.75; color: var(--sp-text-muted); }
.sp-prose p { margin: 0 0 18px; }
.sp-prose ul { margin: 0 0 18px; padding-left: 20px; }

/* Compatibility: platform cards */
.sp-platcards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.sp-platcard { background: var(--sp-surface); border: 1px solid var(--sp-border); border-radius: 18px; padding: 30px; }
.sp-platcard__h { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.sp-platcard__ic { width: 44px; height: 44px; border-radius: var(--sp-radius-sm); background: rgba(var(--sp-accent-rgb), .10); color: var(--sp-accent-strong); display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.sp-platcard__h h3 { margin: 0; font-size: 20px; font-weight: 600; color: var(--sp-text); }
.sp-platcard__h span { font-size: 13px; color: var(--sp-text-muted); }
.sp-platcard p { font-size: 14px; line-height: 1.6; color: var(--sp-text-muted); margin: 0 0 14px; }

/* Legal / doc — sticky in-page nav + anchored sections */
.sp-doc { display: grid; grid-template-columns: 220px 1fr; gap: 40px; align-items: start; max-width: var(--sp-container); margin-inline: auto; }
.sp-doc__nav { position: sticky; top: 92px; display: flex; flex-direction: column; gap: 4px; }
.sp-doc__nav a { padding: 10px 14px; border-radius: var(--sp-radius-xs); font-size: 14px; font-weight: 600; color: var(--sp-text-muted); }
.sp-doc__nav a:hover { background: var(--sp-surface-2); color: var(--sp-accent); }
.sp-doc__panel { scroll-margin-top: 92px; margin-bottom: 40px; }
.sp-doc__panel h2 { font-size: clamp(24px, 3vw, 28px); margin: 0 0 16px; color: var(--sp-text); }
.sp-doc__panel p, .sp-doc__panel li { font-size: 15px; line-height: 1.7; color: var(--sp-text-muted); }

@media (max-width: 860px) {
	.sp-platcards { grid-template-columns: 1fr; }
	.sp-doc { grid-template-columns: 1fr; }
	.sp-doc__nav { position: static; flex-direction: row; flex-wrap: wrap; }
	.sp-stats--4 { grid-template-columns: repeat(2, 1fr); row-gap: 24px; }
}

/* ============================================================================
   Blog — posts archive (home/archive) + single post
   ========================================================================== */
.sp-bloghero { position: relative; background: var(--sp-hero-bg); color: var(--sp-hero-text); overflow: hidden; padding: clamp(44px, 6vw, 58px) var(--sp-gutter) clamp(40px, 6vw, 52px); }
.sp-bloghero__glow { position: absolute; inset: 0; background: radial-gradient(900px 400px at 50% 0%, rgba(var(--sp-accent-rgb), .18), transparent 60%); }
.sp-bloghero__inner { position: relative; max-width: 1120px; margin: 0 auto; }
.sp-bloghero .sp-eyebrow { color: #F2B8B5; }
.sp-bloghero h1 { font-size: clamp(32px, 5vw, 42px); line-height: 1.1; letter-spacing: -1.5px; margin: 0 0 12px; }
.sp-bloghero p { font-size: 16px; line-height: 1.6; color: #B9C6CF; margin: 0; max-width: 560px; }

.sp-blogwrap { max-width: 1120px; margin: 0 auto; padding: 36px var(--sp-gutter) 80px; }
.sp-blogchips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 34px; }
.sp-chip-btn { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 18px; border: 1px solid var(--sp-border); background: var(--sp-surface); color: var(--sp-text-muted); border-radius: var(--sp-radius-pill); font-weight: 700; font-size: 13.5px; }
.sp-chip-btn:hover { border-color: var(--sp-accent); color: var(--sp-accent); }
.sp-chip-btn.is-active { border-color: var(--sp-accent); background: var(--sp-accent); color: #FFFFFF; }

/* Card media (dark placeholder when no featured image) */
.sp-blog-card__media, .sp-blog-featured__media { background: var(--sp-hero-bg); overflow: hidden; }
.sp-blog-card__media { height: 180px; }
.sp-blog-featured__media { min-height: 340px; height: 100%; }
.sp-blog-card__media img, .sp-blog-featured__media img,
.sp-blog-card__media .wp-block-post-featured-image, .sp-blog-featured__media .wp-block-post-featured-image { width: 100%; height: 100%; margin: 0; }
.sp-blog-card__media img, .sp-blog-featured__media img { object-fit: cover; display: block; }

/* Featured post */
.sp-blog-featured { display: grid; grid-template-columns: 1.15fr 1fr; gap: 0; background: var(--sp-surface); border: 1px solid var(--sp-border); border-radius: var(--sp-radius-lg); overflow: hidden; margin-bottom: 40px; }
.sp-blog-featured__body { padding: 40px; display: flex; flex-direction: column; justify-content: center; }
.sp-blog-featured__body .wp-block-post-title { font-family: "Space Grotesk"; font-weight: 700; font-size: 28px; line-height: 1.2; letter-spacing: -.6px; margin: 0 0 12px; }
.sp-blog-featured__body .wp-block-post-title a { color: var(--sp-text); }
.sp-blog-featured__body .wp-block-post-excerpt { font-size: 15px; line-height: 1.7; color: var(--sp-text-muted); margin: 0 0 20px; }
.sp-featured-tag { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.sp-featured-tag span { font-size: 11px; font-weight: 800; letter-spacing: 1px; color: #FFFFFF; background: var(--sp-accent); padding: 5px 10px; border-radius: var(--sp-radius-pill); }

/* Query Loop <ul>/<li> reset */
.wp-block-post-template { list-style: none; margin: 0; padding: 0; }
.sp-blog-featured-q { margin-bottom: 40px; }
.sp-blog-grid > .wp-block-post { display: flex; }
.sp-blog-grid .sp-blog-card { flex: 1; width: 100%; }

/* Post grid */
.sp-blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.sp-blog-card { display: flex; flex-direction: column; background: var(--sp-surface); border: 1px solid var(--sp-border); border-radius: 18px; overflow: hidden; transition: border-color .18s, transform .18s; }
.sp-blog-card:hover { border-color: var(--sp-accent); transform: translateY(-3px); }
.sp-blog-card__body { padding: 22px 22px 24px; display: flex; flex-direction: column; flex: 1; }
.sp-blog-card__body .wp-block-post-title { font-family: "Space Grotesk"; font-weight: 600; font-size: 18px; line-height: 1.3; margin: 0 0 9px; }
.sp-blog-card__body .wp-block-post-title a { color: var(--sp-text); }
.sp-blog-cat, .sp-blog-cat a { font-size: 11.5px; font-weight: 800; letter-spacing: .8px; color: var(--sp-accent-strong); margin: 0 0 9px; text-transform: uppercase; }
.sp-blog-excerpt, .wp-block-post-excerpt { font-size: 13.5px; line-height: 1.6; color: var(--sp-text-muted); margin: 0 0 18px; }
.sp-blog-excerpt p, .wp-block-post-excerpt p { margin: 0; }
.wp-block-post-excerpt__more-text { display: none; }
.sp-blog-meta { margin-top: auto; font-size: 12.5px; color: var(--sp-text-muted); }
.sp-blog-meta .wp-block-post-date { font-size: 12.5px; color: var(--sp-text-muted); }

/* Newsletter banner */
.sp-blog-news { margin-top: 48px; background: var(--sp-hero-bg); color: var(--sp-hero-text); border-radius: var(--sp-radius-lg); padding: 44px 40px; display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; position: relative; overflow: hidden; }
.sp-blog-news__glow { position: absolute; inset: 0; background: radial-gradient(600px 260px at 100% 0%, rgba(var(--sp-accent-rgb), .24), transparent 65%); }
.sp-blog-news h2 { font-family: "Space Grotesk"; font-weight: 700; font-size: 26px; letter-spacing: -.6px; margin: 0 0 8px; position: relative; }
.sp-blog-news p { font-size: 15px; color: #B9C6CF; margin: 0; position: relative; }
.sp-blog-news form { position: relative; display: flex; gap: 10px; background: #FFFFFF; border-radius: var(--sp-radius-sm); padding: 6px; box-shadow: 0 16px 40px rgba(0,0,0,.25); }
.sp-blog-news input { width: 240px; height: 46px; border: none; outline: none; padding: 0 14px; font-size: 14.5px; color: #0C1826; background: transparent; }
.sp-blog-news button { height: 46px; padding: 0 22px; border: none; background: var(--sp-accent); color: #FFFFFF; border-radius: 9px; font-weight: 800; font-size: 14px; cursor: pointer; }

/* Single article */
.sp-article-hero { position: relative; background: var(--sp-hero-bg); color: var(--sp-hero-text); overflow: hidden; padding: clamp(40px, 6vw, 44px) var(--sp-gutter) clamp(44px, 6vw, 48px); }
.sp-article-hero__glow { position: absolute; inset: 0; background: radial-gradient(900px 400px at 50% 0%, rgba(var(--sp-accent-rgb), .18), transparent 60%); }
.sp-article-hero__inner { position: relative; max-width: 760px; margin: 0 auto; }
.sp-article-back { display: inline-flex; align-items: center; gap: 7px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); color: #EAF2F5; border-radius: 9px; padding: 8px 14px; font-weight: 700; font-size: 13px; margin-bottom: 22px; }
.sp-article-hero .wp-block-post-title { font-family: "Space Grotesk"; font-weight: 700; font-size: clamp(28px, 5vw, 38px); line-height: 1.15; letter-spacing: -1.2px; margin: 0 0 18px; color: #FFFFFF; }
.sp-article-hero .wp-block-post-terms, .sp-article-hero .sp-article-eyebrow { font-size: 12px; font-weight: 800; letter-spacing: 1px; color: #F2B8B5; margin: 0 0 12px; text-transform: uppercase; }
.sp-article-hero .wp-block-post-date { font-size: 13.5px; color: #B9C6CF; }

.sp-article { max-width: 720px; margin: 0 auto; padding: 48px var(--sp-gutter) 40px; }
.sp-article .wp-block-post-featured-image { height: 320px; border-radius: 18px; overflow: hidden; margin: 0 0 36px; background: var(--sp-hero-bg); }
.sp-article .wp-block-post-featured-image img { width: 100%; height: 100%; object-fit: cover; }
.sp-article-body p { font-size: 16px; line-height: 1.8; color: var(--sp-text-muted); margin: 0 0 22px; }
.sp-article-body > p:first-of-type { font-size: 18px; line-height: 1.7; color: var(--sp-text); font-weight: 500; }
.sp-article-body h2 { font-family: "Space Grotesk"; font-weight: 700; font-size: 24px; letter-spacing: -.5px; margin: 34px 0 14px; color: var(--sp-text); }
.sp-article-body h3 { font-family: "Space Grotesk"; font-weight: 600; font-size: 20px; margin: 28px 0 12px; color: var(--sp-text); }
.sp-article-body ul, .sp-article-body ol { margin: 0 0 22px; padding-left: 22px; color: var(--sp-text-muted); }
.sp-article-body li { font-size: 16px; line-height: 1.8; }
.sp-article-body blockquote { margin: 30px 0; padding: 20px 26px; border-left: 4px solid var(--sp-accent); background: var(--sp-surface-2); border-radius: 0 12px 12px 0; }
.sp-article-body blockquote p { font-size: 17px; line-height: 1.6; font-style: italic; color: var(--sp-text); margin: 0; }
/* Knowledge base — topic archive list */
.sp-kbwrap { max-width: 760px; margin: 0 auto; padding: 40px var(--sp-gutter) 64px; }
.sp-kb-list { display: flex; flex-direction: column; }
.sp-kb-row { padding: 20px 4px; border-bottom: 1px solid var(--sp-border); }
.sp-kb-row .wp-block-post-title { font-family: "Space Grotesk"; font-size: 18px; font-weight: 600; margin: 0 0 5px; }
.sp-kb-row .wp-block-post-title a { color: var(--sp-text); text-decoration: none; }
.sp-kb-row .wp-block-post-title a:hover { color: var(--sp-accent); }
.sp-kb-row .wp-block-post-excerpt { font-size: 14px; line-height: 1.6; color: var(--sp-text-muted); margin: 0; }
.sp-kb-row .wp-block-post-excerpt__more-text { display: none; }
.sp-kb-article { padding-bottom: 8px; }

.sp-article-cta { max-width: 720px; margin: 0 auto; padding: 0 var(--sp-gutter) 72px; }
.sp-article-cta__box { padding: 26px 28px; background: var(--sp-surface); border: 1px solid var(--sp-border); border-radius: var(--sp-radius-md); display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.sp-article-cta__box b { font-family: "Space Grotesk"; font-weight: 700; font-size: 18px; color: var(--sp-text); }
.sp-article-cta__box p { font-size: 14px; color: var(--sp-text-muted); margin: 4px 0 0; }

@media (max-width: 860px) {
	.sp-blog-grid { grid-template-columns: 1fr 1fr; }
	.sp-blog-featured { grid-template-columns: 1fr; }
	.sp-blog-featured__media { min-height: 220px; }
}
@media (max-width: 560px) {
	.sp-blog-grid { grid-template-columns: 1fr; }
}

/* ============================================================================
   Pricing page (reproduced from design; these support the details-FAQ marker
   and responsive plan grid on top of the design's inline styles)
   ========================================================================== */
.sp-price-faq details { background: var(--bg); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; }
.sp-price-faq summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 24px; cursor: pointer; font-family: "Space Grotesk", sans-serif; font-size: 16.5px; font-weight: 600; color: var(--text); }
.sp-price-faq summary::-webkit-details-marker { display: none; }
.sp-price-faq summary::after { content: "+"; color: var(--accent-strong); font-size: 22px; line-height: 1; }
.sp-price-faq details[open] summary::after { content: "\2212"; }
.sp-price-faq .sp-faq-a { padding: 0 24px 22px; font-size: 14.5px; line-height: 1.65; color: var(--text-muted); }

@media (max-width: 900px) {
	.sp-price-plans { grid-template-columns: 1fr !important; max-width: 460px; margin-left: auto; margin-right: auto; }
	.sp-price-bundle { flex-direction: column; align-items: flex-start !important; }
	.sp-price-security { grid-template-columns: repeat(2, 1fr) !important; row-gap: 30px; }
	.sp-price-social { grid-template-columns: 1fr !important; }
}

/* ============================================================================
   WooCommerce — on-brand theming (checkout, cart, my-account, order received)
   ========================================================================== */
.woocommerce, .wc-block-checkout, .wp-block-woocommerce-cart, .woocommerce-account, .woocommerce-order { font-family: "Manrope", ui-sans-serif, system-ui, sans-serif; color: var(--sp-text); }
.woocommerce a { color: var(--sp-accent-strong); }

/* Injected commerce header (breadcrumb + title) on checkout/account */
.sp-commerce-head { max-width: 1120px; margin: 0 auto; padding: 40px var(--sp-gutter) 0; }
/* …but not on the order-received endpoint (its own success hero renders instead) */
body.woocommerce-order-received .sp-commerce-head { display: none; }
body.woocommerce-checkout .sp-commerce-head .sp-crumb { display: none; }
.sp-commerce-head .sp-crumb { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--sp-text-muted); margin-bottom: 8px; }
.sp-commerce-head .sp-crumb .cur { color: var(--sp-accent-strong); font-weight: 700; }
.sp-commerce-head h1 { font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: clamp(28px, 4vw, 36px); letter-spacing: -1px; margin: 0 0 24px; color: var(--sp-text); }
/* My Account: the dynamic wp-block-post-title already names each page (e.g. "Subscription #1445"),
   so the static "My Account" sp-commerce-head is a duplicate here — hide it, and tame the 56px title. */
body.woocommerce-account .sp-commerce-head { display: none; }
body.woocommerce-account .wp-block-post-title { font-size: clamp(28px, 4vw, 34px); margin-bottom: 12px; }

/* Headings → Space Grotesk (typography only, no layout) */
.wc-block-components-title, .wc-block-components-checkout-step__title,
.woocommerce-account h2, .woocommerce-account h3, .woocommerce-order h2 { font-family: "Space Grotesk", sans-serif; }

/* Primary buttons → brand accent. Target the specific submit buttons only —
   do NOT restyle the checkout block's internal components (that breaks its layout). */
.wc-block-components-checkout-place-order-button,
.wp-block-woocommerce-cart .wc-block-cart__submit-button,
.wc-block-cart__submit-container .wc-block-components-button,
.woocommerce #place_order, .woocommerce a.button.checkout-button,
.woocommerce-account form.woocommerce-form button.button,
.woocommerce-account .woocommerce-Button.button {
	background: var(--sp-accent) !important; color: #fff !important; border: 0 !important;
	border-radius: var(--sp-radius-sm) !important; font-weight: 800 !important;
}
/* WC link-buttons (e.g. the "View" button on the orders/subscriptions lists) are <a> elements, so
   they inherit the dark-red `.woocommerce a` colour on top of a red button bg — force white text. */
.woocommerce a.button, .woocommerce a.wp-element-button, .woocommerce-button.button { color: #fff !important; }

/* Center the commerce pages; leave the blocks' internal layout untouched */
.wc-block-checkout, .wp-block-woocommerce-cart, .woocommerce-order { max-width: 1120px; margin-inline: auto; }

/* Checkout: give the left-column steps + the order-summary the design's card look.
   Only backgrounds/borders/radius/padding on the section wrappers — never on the
   block's flex/grid internals or form fields. */
.wc-block-checkout__main .wc-block-components-checkout-step {
	background: var(--sp-surface); border: 1px solid var(--sp-border);
	border-radius: 16px; padding: 24px 26px; margin-bottom: 18px;
}
/* Order summary → ONE clean card (was rendering as an old divided table) */
.wc-block-checkout__sidebar .wp-block-woocommerce-checkout-order-summary-block {
	background: var(--sp-surface); border: 1px solid var(--sp-border); border-radius: 16px; padding: 20px 22px 10px;
}
.wc-block-checkout__sidebar .wc-block-components-order-summary { background: transparent; border: 0; padding: 0; }
/* the product row inside the summary — drop its inner box, keep a soft divider */
.wc-block-checkout__sidebar .wc-block-components-order-summary__content { border: 0; background: transparent; }
.wc-block-components-order-summary__title, .wc-block-components-checkout-step__title { font-family: "Space Grotesk", sans-serif; }

/* Remove the "Add a note to your order" option */
.wp-block-woocommerce-checkout-order-note-block { display: none !important; }

/* Lean order summary: one product per order, so Subtotal just duplicates the total; and drop
   the WooCommerce Subscriptions recurring-total panel. Leaves the product line + Total due today
   (the product line already shows the "$X every month" cadence). */
body.woocommerce-checkout .wp-block-woocommerce-checkout-order-summary-subtotal-block,
body.woocommerce-checkout .wcs-recurring-totals-panel { display: none !important; }

/* Single product → its price is shown three times (line total, per-month, and again in the
   totals). Keep just the product name in the line; the amount shows once as "Total due today".
   Scoped to the checkout BODY (not the sidebar wrapper, which only exists in the wide two-column
   layout — on narrow/single-column checkout the wrapper isn't present, so the prices reappeared). */
body.woocommerce-checkout .wc-block-components-order-summary-item__total-price,
body.woocommerce-checkout .wc-block-cart-item__prices,
body.woocommerce-checkout .wc-block-components-order-summary-item__individual-prices { display: none !important; }

/* Hide the marketing opt-in checkbox (consent covered in Terms & Conditions). It's the only
   checkbox inside the contact-fields block, so this won't touch the order-note checkbox. */
body.woocommerce-checkout .wc-block-checkout__contact-fields .wc-block-components-checkbox { display: none !important; }

/* The checkout block renders a duplicate order summary inside the main column; the sidebar one is
   canonical (right on desktop, promoted to the top on mobile), so hide the main duplicate always. */
.wc-block-checkout__main .wp-block-woocommerce-checkout-order-summary-block { display: none !important; }

/* Stacked (mobile/tablet) checkout order — reorder to [order summary] → [form + Place order] →
   [trust cards]. `display: contents` promotes the sidebar's children into the checkout flex so each
   can be ordered independently.
   IMPORTANT: this was scoped to `.wc-block-checkout:not(.is-large)`, but WooCommerce migrated the
   checkout block to CSS container queries and NO LONGER adds `.is-large` — so `:not(.is-large)`
   matched at every width and forced this single-column layout onto desktop. Scope to the block's
   own container width instead (the block goes two-column at ~1000px), leaving desktop untouched. */
@container (max-width: 999px) {
	.wc-block-checkout__sidebar { display: contents; }
	.wc-block-checkout__sidebar > * { order: 2; }
	.wc-block-checkout__sidebar > .wp-block-woocommerce-checkout-order-summary-block { order: 1; }
	.wc-block-checkout__sidebar > .sp-co-card { order: 3; }
	.wc-block-checkout__main { order: 2; }
}

/* Digital checkout: plans are virtual, so hide the address fields (keep name,
   which the block checkout requires) — leaves the design's lean email + name + pay. */
.wc-block-components-address-form__company,
.wc-block-components-address-form__country,
.wc-block-components-address-form__address_1,
.wc-block-components-address-form__address_2,
.wc-block-components-address-form__city,
.wc-block-components-address-form__postcode,
.wc-block-components-address-form__state,
.wc-block-components-address-form__phone { display: none !important; }

/* Checkout sidebar cards (what's-included / trust / testimonial) */
.sp-co-card { background: var(--sp-surface); border: 1px solid var(--sp-border); border-radius: var(--sp-radius-md); padding: 20px 22px; margin-top: 16px; }
.sp-co-included .sp-co-row { display: flex; justify-content: space-between; font-size: 13.5px; color: var(--sp-text-muted); padding: 5px 0; }
.sp-co-yes { color: #2FA36B; font-weight: 700; }
.sp-co-trust { display: flex; flex-direction: column; gap: 14px; }
.sp-co-trustrow { display: flex; align-items: center; gap: 11px; font-size: 13px; font-weight: 600; color: var(--sp-text); }
.sp-co-ic { width: 34px; height: 34px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.sp-co-ic.green { background: rgba(47,163,107,.12); color: #2FA36B; }
.sp-co-ic.red { background: rgba(var(--sp-accent-rgb),.10); color: var(--sp-accent-strong); }
.sp-co-ic.gold { background: rgba(245,165,36,.14); color: #E0900F; font-size: 15px; }
.sp-co-quote p { font-size: 13px; line-height: 1.55; color: var(--sp-text-muted); margin: 0 0 12px; }
.sp-co-quote__who { font-weight: 700; font-size: 13px; color: var(--sp-text); }
.sp-co-quote__who span { color: var(--sp-text-muted); font-weight: 500; }
.sp-co-stars { color: #E0900F; font-size: 15px; letter-spacing: 3px; line-height: 1; margin: 0 0 9px; }

/* ---- My Account (classic) → sidebar dashboard ---- */
/* Let the account content fill the same width as the page title — the post-content contentSize caps
   it at 820px and centres it, which leaves the title looking left-shifted from the content below. */
.woocommerce-account .entry-content.wp-block-post-content { max-width: none; }
.woocommerce-account .woocommerce { display: grid; grid-template-columns: 240px 1fr; gap: 28px; align-items: start; max-width: 1180px; margin: 0 auto; }
.woocommerce-account .woocommerce::before, .woocommerce-account .woocommerce::after { content: none; }
/* The wrapper is a CSS grid (240px 1fr); neutralize WooCommerce's default float + width:30%/68%
   so the nav and content fill their grid cells instead of shrinking to 30% of a 240px cell (=72px). */
.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content { float: none; width: auto; }
.woocommerce-MyAccount-navigation { background: var(--sp-surface); border: 1px solid var(--sp-border); border-radius: var(--sp-radius-md); padding: 12px; position: sticky; top: 92px; box-shadow: var(--sp-shadow-panel); }
.woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.woocommerce-account .woocommerce-MyAccount-navigation ul li { margin: 0; padding: 0; }
.woocommerce-MyAccount-navigation a { display: block; padding: 11px 14px; border-radius: var(--sp-radius-xs); font-weight: 700; font-size: 14px; color: var(--sp-text-muted); }
.woocommerce-MyAccount-navigation li.is-active a, .woocommerce-MyAccount-navigation a:hover { background: var(--sp-accent); color: #fff; }
.woocommerce-MyAccount-content { background: var(--sp-surface); border: 1px solid var(--sp-border); border-radius: var(--sp-radius-md); padding: 26px; box-shadow: var(--sp-shadow-panel); }
.woocommerce-account .woocommerce-MyAccount-content p, .woocommerce-account address { color: var(--sp-text-muted); }
.woocommerce table.shop_table { border: 1px solid var(--sp-border); border-radius: var(--sp-radius-sm); overflow: hidden; border-collapse: separate; }
.woocommerce table.shop_table th { background: var(--sp-bg); color: var(--sp-text-muted); font-size: 12px; letter-spacing: .5px; }

/* ---- Order received / confirmation ---- */
.sp-order-hero { max-width: 760px; margin: 0 auto; padding: 60px var(--sp-gutter) 20px; text-align: center; }
.sp-order-check { width: 88px; height: 88px; border-radius: 50%; background: rgba(47,163,107,.14); display: flex; align-items: center; justify-content: center; margin: 0 auto 26px; animation: sp-pop .5s cubic-bezier(.2,.8,.3,1.2) both; }
.sp-order-check svg { stroke: #2FA36B; stroke-dasharray: 30; stroke-dashoffset: 30; animation: sp-check .5s ease .4s forwards; }
.sp-order-hero .sp-order-eyebrow { font-size: 12.5px; font-weight: 800; letter-spacing: 1.5px; color: #2FA36B; margin-bottom: 12px; }
.sp-order-hero h1 { font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: clamp(30px, 5vw, 40px); letter-spacing: -1.2px; margin: 0 0 14px; color: var(--sp-text); }
.sp-order-hero > p { font-size: 16.5px; line-height: 1.6; color: var(--sp-text-muted); margin: 0 auto; max-width: 500px; }
.sp-order-wrap { max-width: 760px; margin: 0 auto; padding: 24px var(--sp-gutter) 20px; }
.sp-order-wrap .woocommerce-order { max-width: 760px; margin: 0 auto; }
.sp-order-steps { max-width: 760px; margin: 0 auto; padding: 4px var(--sp-gutter) 40px; }
.sp-order-steps__card { background: var(--sp-surface); border: 1px solid var(--sp-border); border-radius: 18px; padding: 28px; text-align: left; }
.sp-order-steps__card h2 { font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: 18px; margin: 0 0 20px; }
.sp-order-step { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 18px; }
.sp-order-step:last-child { margin-bottom: 0; }
.sp-order-step__n { width: 32px; height: 32px; border-radius: 50%; background: var(--sp-accent); color: #fff; font-family: "Space Grotesk"; font-weight: 700; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.sp-order-step b { display: block; font-size: 15px; color: var(--sp-text); margin-bottom: 3px; }
.sp-order-step p { font-size: 13.5px; line-height: 1.55; color: var(--sp-text-muted); margin: 0; }
.sp-order-cta { max-width: 760px; margin: 0 auto; padding: 4px var(--sp-gutter) 60px; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* Order-received: hide ALL default WooCommerce order blocks — we render our own
   card (spyera_order_details_card) so it matches the rest of the site. */
body.woocommerce-order-received .wp-block-woocommerce-order-confirmation-status,
body.woocommerce-order-received .wc-block-order-confirmation-summary,
body.woocommerce-order-received .wp-block-woocommerce-order-confirmation-summary,
body.woocommerce-order-received .wp-block-woocommerce-order-confirmation-totals-wrapper,
body.woocommerce-order-received .wc-block-order-confirmation-totals,
body.woocommerce-order-received .wp-block-woocommerce-order-confirmation-downloads-wrapper,
body.woocommerce-order-received .wc-block-order-confirmation-address-wrapper,
body.woocommerce-order-received .wp-block-woocommerce-order-confirmation-additional-information,
body.woocommerce-order-received .woocommerce-order-overview,
body.woocommerce-order-received .woocommerce-order-details,
body.woocommerce-order-received .woocommerce-customer-details { display: none !important; }

/* Our single order card (design section 2) */
.sp-order-card { max-width: 760px; margin: 0 auto 22px; background: var(--sp-surface); border: 1px solid var(--sp-border); border-radius: 18px; padding: 26px 28px; text-align: left; }
.sp-order-card__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding-bottom: 18px; border-bottom: 1px solid var(--sp-border); }
.sp-order-card__bottom { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding-top: 18px; }
.sp-order-card__right { text-align: right; }
.sp-order-card__label { font-size: 12.5px; font-weight: 700; letter-spacing: .5px; color: var(--sp-text-muted); margin-bottom: 4px; }
.sp-order-card__big { font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: 22px; color: var(--sp-text); letter-spacing: .3px; }
.sp-order-card__prod { font-size: 14.5px; font-weight: 700; color: var(--sp-text); }
.sp-order-card__sub { font-size: 13px; color: var(--sp-text-muted); margin-top: 2px; }
.sp-order-card__email { font-size: 13.5px; font-weight: 700; color: var(--sp-text); }

@keyframes sp-pop { 0% { transform: scale(0); } 60% { transform: scale(1.12); } 100% { transform: scale(1); } }
@keyframes sp-check { to { stroke-dashoffset: 0; } }

@media (max-width: 900px) {
	.wc-block-checkout__sidebar { position: static; }
	.woocommerce-account .woocommerce { grid-template-columns: 1fr; }
	.woocommerce-MyAccount-navigation { position: static; }
}

/* ---- Auto table of contents (blog posts) -------------------------------- */
.sp-toc { background: var(--sp-surface-2, #EEF2F6); border: 1px solid var(--sp-border, #E4EAF0); border-radius: 14px; padding: 18px 22px; margin: 0 0 30px; }
.sp-toc__t { font-family: "Space Grotesk"; font-weight: 700; font-size: 12.5px; letter-spacing: .6px; text-transform: uppercase; color: var(--sp-accent-strong, #A82F2B); margin-bottom: 11px; }
.sp-toc ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.sp-toc li { font-size: 14.5px; line-height: 1.35; }
.sp-toc li.sp-toc__sub { padding-left: 18px; font-size: 13.5px; }
.sp-toc a { color: var(--sp-text-muted, #5A6B7B); text-decoration: none; border: 0; transition: color .15s; }
.sp-toc a:hover { color: var(--sp-accent, #CC3D38); }

/* ============================================================================
   Modern login screen — logged-out My Account (body.woocommerce-account:not(.logged-in))
   ============================================================================ */
/* No account nav when logged out, so drop the 2-column grid and centre one card. */
body.woocommerce-account:not(.logged-in) .woocommerce { display: block; max-width: 430px; margin: 4px auto 0; }
/* Kill the duplicate/misaligned titles — the injected header is the single title. */
body.woocommerce-account:not(.logged-in) .wp-block-post-title,
body.woocommerce-account:not(.logged-in) .woocommerce > h2 { display: none; }

/* Injected header: shield mark + welcome + subtitle */
.sp-login-head { text-align: center; margin: 0 0 22px; }
.sp-login-mark { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 16px; background: rgba(var(--sp-accent-rgb), .10); color: var(--sp-accent-strong); margin-bottom: 16px; }
.sp-login-mark svg { width: 28px; height: 28px; }
.sp-login-title { font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: 28px; letter-spacing: -.6px; margin: 0 0 6px; color: var(--sp-text); }
.sp-login-sub { font-size: 14.5px; color: var(--sp-text-muted); margin: 0 auto; max-width: 330px; line-height: 1.5; }

/* Login form → clean card */
.woocommerce form.woocommerce-form-login { background: var(--sp-surface); border: 1px solid var(--sp-border); border-radius: var(--sp-radius-md); padding: 28px 28px 24px; box-shadow: var(--sp-shadow-panel); width: auto !important; max-width: none !important; margin: 0 !important; } /* specificity beats WC core .woocommerce form.login (5px) */
.woocommerce-form-login p { margin: 0 0 18px; padding: 0; }
.woocommerce-form-login label { display: block; font-weight: 600; font-size: 13.5px; margin: 0 0 7px; color: var(--sp-text); }
.woocommerce-form-login label.woocommerce-form-login__rememberme { font-weight: 400; }
.woocommerce-form-login .required { color: var(--sp-accent-strong); border: 0; text-decoration: none; }
.woocommerce-form-login .woocommerce-Input, .woocommerce-form-login input.input-text, .woocommerce-form-login input[type="text"], .woocommerce-form-login input[type="password"] { width: 100%; box-sizing: border-box; height: 48px; padding: 0 14px; border: 1px solid var(--sp-border); border-radius: var(--sp-radius-sm); font-size: 15px; background: var(--sp-surface); color: var(--sp-text); transition: border-color .15s, box-shadow .15s; }
.woocommerce-form-login input:focus { outline: none; border-color: var(--sp-accent); box-shadow: 0 0 0 3px rgba(var(--sp-accent-rgb), .16); }
/* password field + show/hide toggle */
.woocommerce-form-login .password-input { display: block; position: relative; }
.woocommerce-form-login .password-input input { padding-right: 44px; }
.woocommerce-form-login .show-password-input { position: absolute; right: 15px; top: 50%; transform: translateY(-50%); cursor: pointer; color: var(--sp-text-muted); }
/* remember me */
.woocommerce-form-login__rememberme { display: inline-flex !important; align-items: center; gap: 8px; font-size: 14px; color: var(--sp-text-muted); cursor: pointer; }
.woocommerce-form-login__rememberme input { width: auto; height: auto; margin: 0; }
/* button */
.woocommerce-form-login button[name="login"] { display: block; width: 100%; height: 50px; margin-top: 4px; background: var(--sp-accent) !important; color: #fff !important; border: 0 !important; border-radius: var(--sp-radius-sm) !important; font-weight: 700 !important; font-size: 15.5px !important; cursor: pointer; transition: background .15s; }
.woocommerce-form-login button[name="login"]:hover { background: var(--sp-accent-strong) !important; }
/* lost password */
.woocommerce-LostPassword { text-align: center; margin: 18px 0 0 !important; }
.woocommerce-LostPassword a { color: var(--sp-accent-strong); font-weight: 600; font-size: 14px; text-decoration: none; }
.woocommerce-LostPassword a:hover { text-decoration: underline; }
/* WooCommerce inputs use --wc-form-color-background (defaults #fff, and its selector is more
   specific than ours), which kept the login fields white in dark mode. Point WC's own variable
   at the adaptive surface token so the fields follow the theme. */
body.woocommerce-account:not(.logged-in) { --wc-form-color-background: var(--sp-surface); }
body.woocommerce-account:not(.logged-in) { --wc-form-color-text: var(--sp-text); --wc-form-border-color: var(--sp-border); }

/* Lost-password form → same card treatment as the login card (container/title already handled by
   the login-screen rules, which share the body.woocommerce-account:not(.logged-in) scope). */
.woocommerce-ResetPassword.lost_reset_password { background: var(--sp-surface); border: 1px solid var(--sp-border); border-radius: var(--sp-radius-md); padding: 28px 28px 24px; box-shadow: var(--sp-shadow-panel); max-width: none !important; margin: 0 !important; }
.woocommerce-ResetPassword > p:not(.form-row):not(.woocommerce-form-row) { display: none; } /* default description — the injected header covers it */
.woocommerce-ResetPassword .form-row, .woocommerce-ResetPassword p.woocommerce-form-row { width: 100%; margin: 0 0 18px; padding: 0; float: none; } /* WC marks the single field .form-row-first (2-col, 47%); force full width */
.woocommerce-ResetPassword label { display: block; font-weight: 600; font-size: 13.5px; margin: 0 0 7px; color: var(--sp-text); }
.woocommerce-ResetPassword .required { color: var(--sp-accent-strong); border: 0; }
.woocommerce-ResetPassword input.input-text, .woocommerce-ResetPassword input[type="text"] { width: 100%; box-sizing: border-box; height: 48px; padding: 0 14px; border: 1px solid var(--sp-border); border-radius: var(--sp-radius-sm); font-size: 15px; background: var(--sp-surface); color: var(--sp-text); transition: border-color .15s, box-shadow .15s; }
.woocommerce-ResetPassword input:focus { outline: none; border-color: var(--sp-accent); box-shadow: 0 0 0 3px rgba(var(--sp-accent-rgb), .16); }
.woocommerce-ResetPassword .clear { display: none; }
.woocommerce-ResetPassword button { display: block; width: 100%; height: 50px; margin: 0; background: var(--sp-accent) !important; color: #fff !important; border: 0 !important; border-radius: var(--sp-radius-sm) !important; font-weight: 700 !important; font-size: 15.5px !important; cursor: pointer; transition: background .15s; }
.woocommerce-ResetPassword button:hover { background: var(--sp-accent-strong) !important; }

/* ── Commerce corner-radius consistency ────────────────────────────────────
   One scale across every account/checkout surface: cards 16 (--sp-radius-md),
   fields + buttons 12 (--sp-radius-sm), inner chips 10 (--sp-radius-xs).       */

/* Classic WC inputs/selects read this var (default 4px). Retarget it so login,
   lost-password, edit-account and address forms all match the 12px fields.     */
.woocommerce { --wc-form-border-radius: var(--sp-radius-sm); }

/* Block checkout (WC 10.9) inputs/selects render at 0px — bring them to 12px.
   Radius-only: safe, never touches the block flex/grid layout.                 */
.wc-block-components-text-input input,
.wc-block-components-text-input,
.wc-block-components-select .wc-block-components-select__container,
.wc-block-components-address-form input,
.wc-block-checkout .wc-block-components-button { border-radius: var(--sp-radius-sm) !important; }

/* Checkout line-item thumbnails: soften the hard square corners.               */
.wc-block-components-order-summary-item__image,
.wc-block-components-order-summary-item__image img { border-radius: 8px; overflow: hidden; }

/* ── Unified form validation UI ────────────────────────────────────────────
   One error language across account forms + block checkout: red field border,
   a branded message under the field with an up-caret, and relocated banners.   */

/* Invalid field: red border + soft ring (beats WC's own field styling).        */
.woocommerce .sp-invalid,
input.sp-invalid,
.woocommerce-form-login input.sp-invalid,
.woocommerce-ResetPassword input.sp-invalid { border-color: var(--sp-accent) !important; box-shadow: 0 0 0 3px rgba(var(--sp-accent-rgb), .16) !important; }

/* Message beneath the field, caret pointing up at it.                          */
.sp-field-error {
	position: relative;
	display: flex; align-items: center; gap: 7px;
	margin: 9px 0 2px; padding: 8px 12px;
	background: var(--sp-error-bg);
	border: 1px solid var(--sp-error-border);
	border-radius: var(--sp-radius-xs);
	color: var(--sp-error-text);
	font-size: 12.75px; font-weight: 600; line-height: 1.4;
	opacity: 0; transform: translateY(-4px);
	transition: opacity .18s ease, transform .18s ease;
}
.sp-field-error.is-shown { opacity: 1; transform: none; }
.sp-field-error::before {
	content: ""; position: absolute; top: -5px; left: 15px;
	width: 9px; height: 9px;
	background: var(--sp-error-bg);
	border-left: 1px solid var(--sp-error-border);
	border-top: 1px solid var(--sp-error-border);
	transform: rotate(45deg);
}
.sp-field-error__ic { display: inline-flex; flex: 0 0 auto; }
.sp-field-error__t { display: block; }

/* Server-notice banner relocated into the card top.                            */
.sp-form-alert { display: flex; flex-direction: column; gap: 8px; margin: 0 0 18px; }
.sp-form-alert__item { padding: 10px 13px; border-radius: var(--sp-radius-xs); font-size: 13px; font-weight: 600; line-height: 1.45; }
.sp-form-alert__item--error { background: var(--sp-error-bg); border: 1px solid var(--sp-error-border); color: var(--sp-error-text); }
.sp-form-alert__item--ok { background: var(--sp-ok-bg); border: 1px solid var(--sp-ok-border); color: var(--sp-ok-text); }
.sp-form-alert__item--info { background: rgba(var(--sp-accent-rgb), .06); border: 1px solid var(--sp-border); color: var(--sp-text-muted); }

/* Block checkout (React) field errors → same red language.                     */
.wc-block-components-validation-error { color: var(--sp-error-text) !important; font-weight: 600; }
.wc-block-components-text-input.has-error input,
.wc-block-components-text-input.has-error.is-active input { border-color: var(--sp-accent) !important; box-shadow: 0 0 0 2px rgba(var(--sp-accent-rgb), .16) !important; }

/* ============================================================================
   PRICING PAGE v2 — polish + multi-currency switcher
   Class-based rebuild of the #sp-pricing block. The hero / bundle / CTA use the
   fixed dark palette (--sp-hero-*) in both themes; cards + popovers ride the
   surface tokens so they adapt to light/dark automatically.
   ========================================================================== */
.sp-pricing { background: var(--sp-bg); color: var(--sp-text); font-family: "Manrope", ui-sans-serif, system-ui, sans-serif; }

/* ---- Hero ---------------------------------------------------------------- */
.sp-pricing__hero { position: relative; overflow: hidden; background: var(--sp-hero-bg); color: var(--sp-hero-text); padding: 64px var(--sp-gutter) 150px; }
.sp-pricing__hero-glow { position: absolute; inset: 0; background: radial-gradient(900px 400px at 50% -4%, rgba(var(--sp-accent-rgb), .22), transparent 60%); pointer-events: none; }
.sp-pricing__hero-inner { position: relative; max-width: 900px; margin: 0 auto; text-align: center; }
.sp-pricing__eyebrow { font-size: 12.5px; font-weight: 800; letter-spacing: 1.6px; color: #F2B8B5; margin-bottom: 14px; }
.sp-pricing__title { font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: clamp(32px, 5vw, 48px); line-height: 1.05; letter-spacing: -1.5px; margin: 0 0 16px; color: var(--sp-hero-text); }
.sp-pricing__lead { font-size: 17px; line-height: 1.6; color: #B9C6CF; max-width: 560px; margin: 0 auto 30px; }
.sp-pricing__controls { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; }

/* ---- Billing toggle (segmented control) --------------------------------- */
.sp-billtoggle { display: inline-flex; align-items: center; gap: 4px; padding: 5px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); border-radius: var(--sp-radius-pill); }
.sp-billtoggle__btn { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 22px; border: none; border-radius: var(--sp-radius-pill); background: transparent; color: #B9C6CF; font-family: "Manrope", sans-serif; font-weight: 700; font-size: 14px; cursor: pointer; transition: background-color .25s ease, color .25s ease, box-shadow .25s ease; white-space: nowrap; }
.sp-billtoggle__btn:hover { color: #EAF2F5; }
.sp-billtoggle__btn.is-active { background: var(--sp-accent); color: #fff; box-shadow: 0 6px 18px rgba(var(--sp-accent-rgb), .40); }
.sp-billtoggle__save { font-size: 11px; font-weight: 800; padding: 2px 8px; border-radius: var(--sp-radius-pill); background: rgba(255,255,255,.22); }

/* ---- Currency switcher --------------------------------------------------- */
.sp-cur { position: relative; }
.sp-cur__btn { display: inline-flex; align-items: center; gap: 8px; height: 50px; padding: 0 16px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.08); border-radius: var(--sp-radius-pill); color: #EAF2F5; font-family: "Manrope", sans-serif; font-weight: 700; font-size: 14px; cursor: pointer; transition: background-color .2s ease, border-color .2s ease; }
.sp-cur__btn:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.28); }
.sp-cur__globe { opacity: .85; }
.sp-cur__chev { transition: transform .2s ease; opacity: .8; }
.sp-cur__btn[aria-expanded="true"] .sp-cur__chev { transform: rotate(180deg); }
.sp-cur__menu { position: absolute; right: 0; top: 60px; width: 232px; max-height: 340px; overflow-y: auto; padding: 8px; background: var(--sp-surface); border: 1px solid var(--sp-border); border-radius: 14px; box-shadow: var(--sp-shadow-pop); z-index: 60; display: none; text-align: left; }
.sp-cur__menu.is-open { display: block; animation: sp-pop-in .16s ease both; }
@keyframes sp-pop-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.sp-cur__opt { display: flex; align-items: baseline; gap: 8px; width: 100%; padding: 9px 11px; border: none; border-radius: 9px; background: none; cursor: pointer; text-align: left; color: var(--sp-text); font-family: "Manrope", sans-serif; }
.sp-cur__opt:hover { background: var(--sp-surface-2); }
.sp-cur__opt.is-active { background: var(--sp-surface-2); }
.sp-cur__opt.is-active .sp-cur__code { color: var(--sp-accent); }
.sp-cur__code { font-weight: 700; font-size: 13.5px; min-width: 62px; }
.sp-cur__name { font-size: 12px; color: var(--sp-text-muted); font-weight: 500; }

/* ---- Plans grid ---------------------------------------------------------- */
.sp-pricing__plans-wrap { position: relative; z-index: 2; padding: 0 var(--sp-gutter) 30px; margin-top: -90px; }
.sp-plans { max-width: 1120px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; }

.sp-plan { position: relative; display: flex; flex-direction: column; background: var(--sp-surface); border: 1px solid var(--sp-border); border-radius: var(--sp-radius-lg); padding: 30px; box-shadow: var(--sp-shadow-card); transition: transform .28s cubic-bezier(.22,.61,.36,1), box-shadow .28s ease, border-color .28s ease; animation: sp-fadeup .6s cubic-bezier(.22,.61,.36,1) backwards; animation-delay: calc(var(--i, 1) * 90ms); }
.sp-plan:hover { transform: translateY(-6px); box-shadow: var(--sp-shadow-dash); border-color: rgba(var(--sp-accent-rgb), .5); }
.sp-plan--pop { border: 2px solid var(--sp-accent); box-shadow: 0 30px 60px rgba(var(--sp-accent-rgb), .18); margin-top: -14px; }
.sp-plan--pop:hover { transform: translateY(-8px); }
@keyframes sp-fadeup { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

.sp-plan__badge { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); background: var(--sp-accent); color: #fff; font-size: 11px; font-weight: 800; letter-spacing: .5px; padding: 5px 14px; border-radius: var(--sp-radius-pill); box-shadow: 0 8px 20px rgba(var(--sp-accent-rgb), .38); white-space: nowrap; }
.sp-plan__icon { width: 46px; height: 46px; border-radius: 13px; background: rgba(var(--sp-accent-rgb), .10); color: var(--sp-accent-strong); display: flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.sp-plan__name { font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: 20px; margin: 0; color: var(--sp-text); }
.sp-plan__for { font-size: 13.5px; color: var(--sp-text-muted); margin: 6px 0 20px; }
.sp-plan__price { margin-bottom: 22px; }
.sp-plan__amount { display: flex; align-items: baseline; gap: 4px; margin-bottom: 4px; }
.sp-plan__amount .sp-amt { font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: 42px; letter-spacing: -1px; color: var(--sp-text); line-height: 1; }
.sp-plan__per { font-size: 15px; color: var(--sp-text-muted); font-weight: 600; }
.sp-plan__note { font-size: 12.5px; color: var(--sp-text-muted); }
.sp-plan__save { color: var(--sp-accent-strong); font-weight: 700; }

.sp-plan__cta { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; border-radius: var(--sp-radius-sm); font-weight: 800; font-size: 14.5px; margin-bottom: 22px; border: 1.5px solid var(--sp-accent); color: var(--sp-accent-strong); background: transparent; transition: background-color .2s ease, color .2s ease, box-shadow .2s ease, transform .2s ease; }
.sp-plan__cta svg { transition: transform .2s ease; }
.sp-plan__cta:hover { background: rgba(var(--sp-accent-rgb), .07); color: var(--sp-accent-strong); }
.sp-plan__cta:hover svg { transform: translateX(3px); }
.sp-plan__cta--fill { background: var(--sp-accent); color: #fff; border-color: var(--sp-accent); box-shadow: 0 12px 26px rgba(var(--sp-accent-rgb), .30); }
.sp-plan__cta--fill:hover { background: var(--sp-accent-strong); color: #fff; box-shadow: 0 16px 34px rgba(var(--sp-accent-rgb), .40); transform: translateY(-1px); }

.sp-plan__feats { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: 13.5px; color: var(--sp-text); }
.sp-plan__feats li { display: flex; gap: 9px; align-items: center; }
.sp-check { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 999px; background: rgba(47, 163, 107, .14); color: #2FA36B; font-size: 11px; font-weight: 800; flex: 0 0 auto; }
.sp-plan__guarantee { margin-top: auto; padding-top: 18px; font-size: 12px; color: var(--sp-text-muted); }

/* ---- All-in-One bundle --------------------------------------------------- */
.sp-bundle-wrap { max-width: 1120px; margin: 20px auto 0; }
.sp-bundle { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 30px; flex-wrap: wrap; background: var(--sp-hero-bg); color: var(--sp-hero-text); border-radius: var(--sp-radius-lg); padding: 34px 40px; }
.sp-bundle__glow { position: absolute; inset: 0; background: radial-gradient(600px 260px at 15% 0%, rgba(var(--sp-accent-rgb), .30), transparent 65%); pointer-events: none; }
.sp-bundle__lead { position: relative; display: flex; align-items: center; gap: 22px; }
.sp-bundle__icon { width: 56px; height: 56px; border-radius: 15px; background: var(--sp-accent); color: #fff; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; box-shadow: 0 10px 24px rgba(var(--sp-accent-rgb), .40); }
.sp-bundle__eyebrow { font-size: 11px; font-weight: 800; letter-spacing: 1px; color: #F2B8B5; margin-bottom: 6px; }
.sp-bundle__title { font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: 24px; margin-bottom: 4px; }
.sp-bundle__sub { font-size: 13.5px; color: #B9C6CF; }
.sp-bundle__buy { position: relative; display: flex; align-items: center; gap: 24px; }
.sp-bundle__price { text-align: right; }
.sp-bundle__price .sp-amt { font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: 40px; letter-spacing: -1px; }
.sp-bundle__per { font-size: 15px; color: #B9C6CF; font-weight: 600; }
.sp-bundle__meta { font-size: 12px; color: #9FB2C2; }
.sp-bundle__cta { display: inline-flex; align-items: center; height: 50px; padding: 0 28px; background: var(--sp-accent); color: #fff; border-radius: var(--sp-radius-sm); font-weight: 800; font-size: 15px; transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease; }
.sp-bundle__cta:hover { background: var(--sp-accent-strong); color: #fff; transform: translateY(-1px); box-shadow: 0 14px 30px rgba(var(--sp-accent-rgb), .40); }
.sp-bundle__note { text-align: center; margin-top: 12px; font-size: 13px; color: var(--sp-text-muted); }

/* ---- Trust / security row ------------------------------------------------ */
.sp-pricing__trust { background: var(--sp-surface); padding: 60px var(--sp-gutter); border-top: 1px solid var(--sp-border); margin-top: 40px; }
.sp-trustgrid { max-width: 1120px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.sp-trust { text-align: center; padding: 8px; border-radius: var(--sp-radius-md); transition: transform .2s ease; }
.sp-trust:hover { transform: translateY(-3px); }
.sp-trust__icon { width: 48px; height: 48px; border-radius: 13px; background: rgba(var(--sp-accent-rgb), .10); color: var(--sp-accent-strong); display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; }
.sp-trust__t { font-family: "Space Grotesk", sans-serif; font-weight: 600; font-size: 15px; color: var(--sp-text); }
.sp-trust__d { font-size: 12.5px; color: var(--sp-text-muted); margin-top: 4px; }

/* ---- Social proof -------------------------------------------------------- */
.sp-pricing__social { background: var(--sp-bg); padding: 70px var(--sp-gutter); }
.sp-pricing__social-inner { max-width: 1120px; margin: 0 auto; }
.sp-pricing__rating { text-align: center; margin-bottom: 34px; }
.sp-pricing__stars { color: var(--sp-star); font-size: 20px; letter-spacing: 2px; }
.sp-pricing__ratingtxt { font-size: 14px; color: var(--sp-text-muted); margin-top: 6px; font-weight: 600; }
.sp-reviews { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.sp-review { margin: 0; background: var(--sp-surface); border: 1px solid var(--sp-border); border-radius: 18px; padding: 26px; transition: transform .2s ease, box-shadow .2s ease; }
.sp-review:hover { transform: translateY(-3px); box-shadow: var(--sp-shadow-card); }
.sp-review blockquote { margin: 0 0 16px; font-size: 14.5px; line-height: 1.6; color: var(--sp-text); }
.sp-review figcaption { font-weight: 700; font-size: 14px; color: var(--sp-text); }
.sp-review figcaption span { color: var(--sp-text-muted); font-weight: 500; }

/* ---- FAQ wrapper (details styling reused from .sp-price-faq above) -------- */
.sp-pricing__faq { background: var(--sp-surface); padding: 74px var(--sp-gutter); }
.sp-pricing__faq-inner { max-width: 820px; margin: 0 auto; }
.sp-pricing__faq-title { font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: clamp(26px, 3.6vw, 32px); letter-spacing: -.8px; margin: 0 0 28px; color: var(--sp-text); text-align: center; }

/* ---- Closing CTA --------------------------------------------------------- */
.sp-pricing__cta { position: relative; overflow: hidden; background: var(--sp-hero-bg); color: var(--sp-hero-text); padding: 68px var(--sp-gutter); text-align: center; }
.sp-pricing__cta-glow { position: absolute; inset: 0; background: radial-gradient(700px 300px at 50% 0%, rgba(var(--sp-accent-rgb), .22), transparent 65%); pointer-events: none; }
.sp-pricing__cta-inner { position: relative; max-width: 640px; margin: 0 auto; }
.sp-pricing__cta-title { font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: clamp(28px, 4vw, 36px); letter-spacing: -1px; margin: 0 0 14px; }
.sp-pricing__cta-lead { font-size: 16px; color: #B9C6CF; margin: 0 0 26px; }
.sp-pricing__cta-btn { display: inline-flex; align-items: center; height: 52px; padding: 0 30px; background: var(--sp-accent); color: #fff; border-radius: var(--sp-radius-sm); font-weight: 800; font-size: 15.5px; transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease; }
.sp-pricing__cta-btn:hover { background: var(--sp-accent-strong); color: #fff; transform: translateY(-2px); box-shadow: 0 16px 34px rgba(var(--sp-accent-rgb), .40); }

/* ---- price toggle visibility (robust vs UA [hidden]) --------------------- */
.sp-pricing [hidden] { display: none !important; }

/* ---- Responsive ---------------------------------------------------------- */
@media (max-width: 760px) {
	.sp-pricing__controls { flex-direction: column; gap: 12px; }
	.sp-cur, .sp-billtoggle { width: 100%; max-width: 320px; justify-content: center; }
	.sp-billtoggle { display: flex; }
	.sp-billtoggle__btn { flex: 1; justify-content: center; }
	.sp-cur { display: flex; justify-content: center; }
	.sp-cur__btn { width: 100%; justify-content: center; }
	.sp-cur__menu { left: 50%; right: auto; transform: translateX(-50%); }
	.sp-cur__menu.is-open { animation: none; }
	.sp-bundle { padding: 26px 24px; }
	.sp-bundle__buy { width: 100%; justify-content: space-between; }
}

/* ---- Reduced motion ------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
	.sp-plan, .sp-cur__menu.is-open { animation: none; }
	.sp-plan, .sp-plan:hover, .sp-plan--pop:hover, .sp-trust:hover, .sp-review:hover,
	.sp-plan__cta:hover, .sp-plan__cta--fill:hover, .sp-plan__cta:hover svg,
	.sp-bundle__cta:hover, .sp-pricing__cta-btn:hover { transform: none; }
}

@media (max-width: 900px) {
	.sp-plan--pop { margin-top: 0; }
	.sp-pricing__plans-wrap { margin-top: -70px; }
	.sp-plan__badge { top: -12px; }
}

/* ============================================================================
   CLASSIC checkout (shortcode) — restyle to the SPYERA design.
   Production checkout = [woocommerce_checkout] + Stripe + Blockonomics, so the
   block-checkout rules above don't apply. We only style layout + containers +
   the Place Order button; the gateway internals (Stripe card, Bitcoin UI) are
   left untouched.
   ========================================================================== */
body.woocommerce-checkout .woocommerce { max-width: var(--sp-container); margin: 0 auto; }
/* login / coupon toggles → tidy info bars, full width above the grid */
body.woocommerce-checkout .woocommerce-form-login-toggle,
body.woocommerce-checkout .woocommerce-form-coupon-toggle { max-width: var(--sp-container); margin: 0 auto 12px; }

/* 2-column layout: details left, order review + trust cards right */
form.checkout.woocommerce-checkout { display: grid; grid-template-columns: 1fr; gap: 22px; }
@media (min-width: 900px) {
	form.checkout.woocommerce-checkout { grid-template-columns: 1.5fr 1fr; align-items: start; }
	form.checkout.woocommerce-checkout #customer_details { grid-column: 1; grid-row: 1 / 4; }
	form.checkout.woocommerce-checkout #order_review_heading { grid-column: 2; grid-row: 1; }
	form.checkout.woocommerce-checkout #order_review { grid-column: 2; grid-row: 2; position: sticky; top: 92px; }
	form.checkout.woocommerce-checkout .sp-co-classic { grid-column: 2; grid-row: 3; }
}

/* details card */
#customer_details { background: var(--sp-surface); border: 1px solid var(--sp-border); border-radius: var(--sp-radius-md); padding: 26px 28px; box-shadow: var(--sp-shadow-panel); }
#customer_details .col-1, #customer_details .col-2 { width: 100%; float: none; padding: 0; }
.woocommerce-additional-fields { display: none; }
.woocommerce-billing-fields > h3, #order_review_heading { font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: 20px; letter-spacing: -.3px; color: var(--sp-text); margin: 0 0 18px; }
#order_review_heading { margin-top: 0; }
.woocommerce-checkout .form-row { margin: 0 0 16px; padding: 0; }
.woocommerce-checkout .form-row label { display: block; font-size: 13px; font-weight: 600; color: var(--sp-text); margin-bottom: 6px; }
.woocommerce-checkout .input-text,
.woocommerce-checkout select,
.woocommerce-checkout .select2-selection { border: 1.5px solid var(--sp-border) !important; border-radius: var(--sp-radius-sm) !important; padding: 12px 14px; font-size: 14.5px; min-height: 48px; background: var(--sp-surface); color: var(--sp-text); box-sizing: border-box; }
.woocommerce-checkout .input-text:focus { border-color: var(--sp-accent) !important; box-shadow: 0 0 0 3px rgba(var(--sp-accent-rgb), .14); outline: none; }

/* order review card */
#order_review { background: var(--sp-surface); border: 1px solid var(--sp-border); border-radius: var(--sp-radius-md); padding: 22px 24px; box-shadow: var(--sp-shadow-panel); }
.woocommerce-checkout-review-order-table { width: 100%; border: 0; font-size: 14px; }
.woocommerce-checkout-review-order-table th,
.woocommerce-checkout-review-order-table td { padding: 11px 0; border: 0; border-bottom: 1px solid var(--sp-border); text-align: left; color: var(--sp-text); }
.woocommerce-checkout-review-order-table tfoot th { font-weight: 600; color: var(--sp-text-muted); }
.woocommerce-checkout-review-order-table .order-total th { font-family: "Space Grotesk", sans-serif; color: var(--sp-text); }
.woocommerce-checkout-review-order-table .order-total .amount { color: var(--sp-accent-strong); font-size: 21px; font-weight: 800; font-family: "Space Grotesk", sans-serif; }
.woocommerce-checkout-review-order-table .cart_item td { color: var(--sp-text); }

/* payment methods — container only, gateway internals untouched */
.woocommerce-checkout #payment { background: transparent; border: 0; padding-top: 6px; }
.woocommerce-checkout #payment .wc_payment_methods { border: 0; padding: 0; margin: 0 0 6px; }
.woocommerce-checkout #payment .wc_payment_method { list-style: none; border: 1.5px solid var(--sp-border); border-radius: var(--sp-radius-sm); margin: 8px 0; padding: 12px 14px; transition: border-color .15s ease; }
.woocommerce-checkout #payment .wc_payment_method > label { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--sp-text); margin: 0; }
.woocommerce-checkout #payment .payment_box { background: var(--sp-surface-2); border-radius: var(--sp-radius-xs); margin-top: 10px; font-size: 13px; color: var(--sp-text-muted); }
.woocommerce-checkout #payment .payment_box::before { display: none; }

/* place order button */
.woocommerce-checkout #place_order,
.woocommerce-checkout #payment #place_order { width: 100%; height: 52px; background: var(--sp-accent); color: #fff; border: 0; border-radius: var(--sp-radius-sm); font-family: "Manrope", sans-serif; font-weight: 800; font-size: 15.5px; margin-top: 12px; box-shadow: 0 12px 26px rgba(var(--sp-accent-rgb), .30); transition: background-color .2s ease, transform .2s ease; }
.woocommerce-checkout #place_order:hover { background: var(--sp-accent-strong); transform: translateY(-1px); }

/* trust cards column (mobile: below) */
.sp-co-classic .sp-co-card:first-child { margin-top: 0; }
@media (max-width: 899px) { .sp-co-classic { margin-top: 4px; } }

/* ── Block checkout: payment method polish ─────────────────────────────────
   WooCommerce Blocks gives the SELECTED payment method a heavy near-black inset
   box-shadow "border", and a full-width label that shoves the payment icon to the
   far right edge. Remove the border and keep each icon next to its label. */
.wc-block-checkout .wc-block-components-radio-control-accordion-option { box-shadow: none !important; }
.wc-block-checkout .wc-block-components-radio-control-accordion-option:focus-visible {
	outline: 2px solid var(--sp-accent, #cc3d38) !important; outline-offset: -2px;
}
.wc-block-checkout .wc-block-components-radio-control__label { justify-content: flex-start !important; gap: 10px; }
.wc-block-checkout .wc-block-components-payment-method-label { width: auto !important; flex: 0 0 auto !important; }
.wc-block-checkout .wc-block-components-payment-method-icons { margin-left: 8px !important; }
.wc-block-checkout .wc-block-components-payment-method-icon { width: 22px; height: 22px; }