/*
Theme Name: WISKO STUDIO
Theme URI: https://wiskostudio.com
Author: WM
Author URI: https://wiskostudio.com
Description: The public-facing WordPress theme for WISKO STUDIO, a Digital Media Operating System for managing brands, content, publishing, and social workflows from one platform. Built as a fully independent theme -- it renders a complete, on-brand marketing site whether or not the WISKO STUDIO plugin is installed, and never modifies wp-admin or plugin behavior. Ships a complete public site out of the box: Home, About, Features, Pricing, Documentation, Contact, and Login are all auto-created with production-ready copy on activation, with a primary navigation menu wired up automatically -- no manual page setup required.
Version: 1.4.2
Requires at least: 6.0
Requires PHP: 7.4
Tested up to: 6.6
License: GPLv2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: wisko-studio
Tags: one-column, custom-logo, custom-menu, custom-colors, threaded-comments, translation-ready

WISKO STUDIO WordPress Theme is distributed under the terms of the GNU GPL.
*/

/* =========================================================================
   Table of contents
   1. CSS custom properties (brand palette -- matches the WISKO STUDIO
      plugin's own admin palette so the public site and the product feel
      like one brand; Primary Color / Secondary Color are overridden per
      site via the Customizer, see inc/customizer.php)
   2. Reset & base
   3. Layout / container
   4. Buttons
   5. Site header & navigation
   6. Hero section
   7. Problem & Solution sections (homepage)
   8. Features section
   9. Workflow section
   10. Team collaboration section
   11. Future roadmap section
   12. CTA banner (template-parts/cta-banner.php)
   13. Generic page/single content (page.php, single.php, 404.php)
   14. About page (page-templates/template-about.php)
   15. Features page detail rows (page-templates/template-features.php)
   16. Pricing page (page-templates/template-pricing.php)
   17. Contact page (page-templates/template-contact.php)
   18. Documentation placeholder (page-templates/template-documentation.php)
   19. Login page (page-templates/template-login.php)
   20. Site footer
   21. Responsive breakpoints
   ========================================================================= */

/* 1. CSS custom properties -------------------------------------------- */
:root {
	--wisko-primary: #4f46e5;
	--wisko-primary-dark: #4338ca;
	--wisko-secondary: #0ea5e9;
	--wisko-text: #1d2327;
	--wisko-text-muted: #646970;
	--wisko-border: #e5e7eb;
	--wisko-surface: #ffffff;
	--wisko-bg: #f7f7fb;
	--wisko-bg-dark: #14132b;
	--wisko-radius: 14px;
	--wisko-radius-sm: 8px;
	--wisko-shadow: 0 1px 2px rgba(16, 15, 43, 0.04), 0 8px 24px rgba(16, 15, 43, 0.06);
	--wisko-shadow-hover: 0 4px 10px rgba(16, 15, 43, 0.06), 0 16px 40px rgba(16, 15, 43, 0.1);
	--wisko-max-width: 1160px;
}

/* 2. Reset & base -------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
	margin: 0;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: 16px;
	line-height: 1.6;
	color: var(--wisko-text);
	background: var(--wisko-surface);
	-webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--wisko-primary); text-decoration: none; }
a:hover { color: var(--wisko-primary-dark); }

h1, h2, h3, h4 { line-height: 1.2; font-weight: 700; margin: 0 0 16px; letter-spacing: -0.02em; }

p { margin: 0 0 16px; color: var(--wisko-text-muted); }

ul { margin: 0; padding: 0; list-style: none; }

.screen-reader-text {
	position: absolute;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

/* 3. Layout / container --------------------------------------------------- */
.wisko-container {
	max-width: var(--wisko-max-width);
	margin: 0 auto;
	padding: 0 24px;
}

.wisko-section { padding: 96px 0; }
.wisko-section--tight { padding: 64px 0; }
.wisko-section--alt { background: var(--wisko-bg); }
.wisko-section--dark { background: var(--wisko-bg-dark); color: #fff; }
.wisko-section--dark p { color: rgba(255, 255, 255, 0.68); }
.wisko-section--dark h2 { color: #fff; }

.wisko-eyebrow {
	display: inline-block;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wisko-primary);
	background: color-mix(in srgb, var(--wisko-primary) 12%, white);
	padding: 6px 14px;
	border-radius: 999px;
	margin-bottom: 18px;
}

.wisko-section--dark .wisko-eyebrow {
	background: rgba(255, 255, 255, 0.1);
	color: #c7d2fe;
}

.wisko-section-header {
	max-width: 640px;
	margin: 0 auto 56px;
	text-align: center;
}

.wisko-section-header h2 { font-size: clamp(28px, 4vw, 38px); }
.wisko-section-header p { font-size: 17px; margin-bottom: 0; }

/* 4. Buttons --------------------------------------------------------------- */
.wisko-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-size: 15px;
	font-weight: 600;
	padding: 13px 26px;
	border-radius: 999px;
	border: 1px solid transparent;
	cursor: pointer;
	transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.wisko-btn--primary {
	background: linear-gradient(135deg, var(--wisko-primary), var(--wisko-secondary));
	color: #fff;
	box-shadow: 0 10px 24px color-mix(in srgb, var(--wisko-primary) 35%, transparent);
}

.wisko-btn--primary:hover {
	transform: translateY(-1px);
	box-shadow: 0 14px 30px color-mix(in srgb, var(--wisko-primary) 45%, transparent);
	color: #fff;
}

.wisko-btn--ghost {
	background: transparent;
	color: var(--wisko-text);
	border-color: var(--wisko-border);
}

.wisko-btn--ghost:hover {
	border-color: var(--wisko-primary);
	color: var(--wisko-primary);
}

.wisko-section--dark .wisko-btn--ghost {
	color: #fff;
	border-color: rgba(255, 255, 255, 0.24);
}

.wisko-section--dark .wisko-btn--ghost:hover {
	border-color: #fff;
}

/* 5. Site header & navigation ---------------------------------------------- */
/* Dark header, matching the site footer, per explicit request: the header
   is the theme's primary "menu" surface and needed to read the same as the
   footer (dark background, white type) for the white/outline logo mark to
   actually be visible on it. */
.wisko-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: rgba(20, 19, 43, 0.94);
	backdrop-filter: saturate(180%) blur(14px);
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.wisko-header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 16px 0;
}

.wisko-logo {
	display: flex;
	align-items: center;
	gap: 10px;
	font-weight: 800;
	font-size: 18px;
	color: #fff;
}

.wisko-logo img { max-height: 34px; width: auto; }

.wisko-logo:hover { color: #fff; }

.wisko-primary-nav ul {
	display: flex;
	align-items: center;
	gap: 32px;
}

.wisko-primary-nav a {
	color: rgba(255, 255, 255, 0.72);
	font-size: 14.5px;
	font-weight: 600;
}

.wisko-primary-nav a:hover { color: #fff; }

.wisko-header-actions {
	display: flex;
	align-items: center;
	gap: 12px;
}

.wisko-header-actions .wisko-btn { padding: 10px 20px; font-size: 14px; }

.wisko-header-actions .wisko-btn--ghost {
	color: #fff;
	border-color: rgba(255, 255, 255, 0.26);
}

.wisko-header-actions .wisko-btn--ghost:hover { border-color: #fff; color: #fff; }

.wisko-nav-toggle {
	display: none;
	background: none;
	border: 1px solid rgba(255, 255, 255, 0.26);
	border-radius: 8px;
	width: 40px;
	height: 40px;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}

.wisko-nav-toggle span,
.wisko-nav-toggle span::before,
.wisko-nav-toggle span::after {
	display: block;
	width: 18px;
	height: 2px;
	background: #fff;
	position: relative;
	transition: transform 0.2s ease;
}

.wisko-nav-toggle span::before,
.wisko-nav-toggle span::after {
	content: "";
	position: absolute;
	left: 0;
}

.wisko-nav-toggle span::before { top: -6px; }
.wisko-nav-toggle span::after { top: 6px; }

/* 6. Hero section ------------------------------------------------------- */
.wisko-hero {
	padding: 96px 0 80px;
	text-align: center;
	background:
		radial-gradient(circle at 15% 20%, color-mix(in srgb, var(--wisko-primary) 14%, transparent), transparent 45%),
		radial-gradient(circle at 85% 15%, color-mix(in srgb, var(--wisko-secondary) 14%, transparent), transparent 45%),
		var(--wisko-surface);
}

/* .wisko-hero-logo (plain <img>) renders this theme's own bundled logo --
   a white/outline PNG (see wisko_get_logo_url() in functions.php) -- so it
   gets a dark rounded "chip" behind it to stay visible against this
   section's light background. .wisko-hero-logo-wrap instead renders
   whatever the site owner uploads as a WordPress Custom Logo
   (the_custom_logo()), which could be any color, so it intentionally does
   NOT get a forced dark backdrop -- that's the site owner's own image to
   style as they choose. */
.wisko-hero-logo {
	max-height: 44px;
	width: auto;
	margin: 0 auto 28px;
	padding: 14px 22px;
	background: var(--wisko-bg-dark);
	border-radius: 999px;
	display: block;
	box-shadow: var(--wisko-shadow);
}

.wisko-hero-logo-wrap {
	display: flex;
	justify-content: center;
	margin-bottom: 28px;
}

.wisko-hero-logo-wrap img { max-height: 72px; width: auto; }

.wisko-hero h1 {
	font-size: clamp(32px, 5.5vw, 56px);
	max-width: 820px;
	margin: 0 auto 20px;
}

.wisko-hero h1 .wisko-gradient-text {
	background: linear-gradient(135deg, var(--wisko-primary), var(--wisko-secondary));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.wisko-hero-lead {
	max-width: 640px;
	margin: 0 auto 36px;
	font-size: 18px;
	color: var(--wisko-text-muted);
}

.wisko-hero-actions {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	flex-wrap: wrap;
	margin-bottom: 56px;
}

.wisko-hero-actions .wisko-btn { padding: 15px 30px; font-size: 15.5px; }

.wisko-hero-preview {
	max-width: 920px;
	margin: 0 auto;
	border-radius: 20px;
	border: 1px solid var(--wisko-border);
	box-shadow: var(--wisko-shadow-hover);
	background: var(--wisko-bg);
	padding: 10px;
}

.wisko-hero-preview-inner {
	border-radius: 14px;
	background: linear-gradient(160deg, var(--wisko-primary) 0%, var(--wisko-primary-dark) 45%, var(--wisko-secondary) 100%);
	aspect-ratio: 16 / 8.2;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
}

.wisko-hero-preview-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px;
	width: 100%;
	padding: 32px;
}

.wisko-hero-preview-card {
	background: rgba(255, 255, 255, 0.14);
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: 10px;
	padding: 14px;
	backdrop-filter: blur(6px);
}

.wisko-hero-preview-card span {
	display: block;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	opacity: 0.8;
	margin-bottom: 8px;
}

.wisko-hero-preview-card strong { font-size: 20px; }

/* 7. Problem & Solution sections (homepage) ------------------------------ */
.wisko-problem-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}

.wisko-problem-card {
	background: var(--wisko-surface);
	border: 1px solid var(--wisko-border);
	border-radius: var(--wisko-radius);
	padding: 26px 22px;
}

.wisko-problem-card h3 { font-size: 16px; margin-bottom: 8px; }
.wisko-problem-card p { font-size: 14px; margin-bottom: 0; }

.wisko-solution-list { max-width: 780px; margin: 0 auto; }

.wisko-solution-row {
	display: grid;
	grid-template-columns: 56px 1fr;
	gap: 20px;
	align-items: start;
	padding: 22px 0;
	border-bottom: 1px solid var(--wisko-border);
}

.wisko-solution-row:last-child { border-bottom: none; }

.wisko-solution-index {
	font-size: 20px;
	font-weight: 800;
	color: var(--wisko-primary);
	opacity: 0.5;
}

.wisko-solution-row h3 { font-size: 17px; margin-bottom: 4px; }
.wisko-solution-row p { font-size: 14.5px; margin-bottom: 0; }

/* 8. Features section -------------------------------------------------- */
.wisko-features-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
}

.wisko-feature-card {
	background: var(--wisko-surface);
	border: 1px solid var(--wisko-border);
	border-radius: var(--wisko-radius);
	padding: 28px 24px;
	box-shadow: var(--wisko-shadow);
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.wisko-feature-card:hover {
	box-shadow: var(--wisko-shadow-hover);
	transform: translateY(-2px);
}

.wisko-feature-icon {
	width: 42px;
	height: 42px;
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: color-mix(in srgb, var(--wisko-primary) 12%, white);
	color: var(--wisko-primary);
	font-size: 19px;
	margin-bottom: 16px;
}

.wisko-feature-card h3 { font-size: 16.5px; margin-bottom: 8px; }
.wisko-feature-card p { font-size: 14px; margin-bottom: 0; }

.wisko-feature-card--soon {
	border-style: dashed;
	opacity: 0.85;
}

.wisko-badge-soon {
	display: inline-block;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	background: var(--wisko-bg);
	border: 1px solid var(--wisko-border);
	color: var(--wisko-text-muted);
	padding: 3px 9px;
	border-radius: 999px;
	margin-left: 8px;
	vertical-align: middle;
}

/* 9. Workflow section ---------------------------------------------------- */
.wisko-workflow {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0;
	counter-reset: wisko-step;
}

.wisko-workflow-step {
	position: relative;
	padding: 0 20px;
	text-align: center;
}

.wisko-workflow-step::before {
	counter-increment: wisko-step;
	content: counter(wisko-step);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin: 0 auto 18px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--wisko-primary), var(--wisko-secondary));
	color: #fff;
	font-weight: 700;
	font-size: 16px;
}

.wisko-workflow-step:not(:last-child)::after {
	content: "";
	position: absolute;
	top: 22px;
	left: calc(50% + 40px);
	width: calc(100% - 60px);
	height: 2px;
	background: var(--wisko-border);
}

.wisko-workflow-step h3 { font-size: 16px; margin-bottom: 6px; }
.wisko-workflow-step p { font-size: 13.5px; margin-bottom: 0; }

/* 10. Team collaboration section ------------------------------------------- */
.wisko-team-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
}

.wisko-team-card {
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: var(--wisko-radius);
	padding: 26px;
}

.wisko-section--dark .wisko-team-card h3 { color: #fff; }

.wisko-team-card h3 {
	font-size: 16px;
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 8px;
}

.wisko-team-card p { font-size: 14px; margin-bottom: 0; }

.wisko-team-icon {
	width: 32px;
	height: 32px;
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.1);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 15px;
}

/* 11. Future roadmap section ---------------------------------------------- */
.wisko-roadmap-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
}

.wisko-roadmap-card {
	border: 1px dashed var(--wisko-border);
	border-radius: var(--wisko-radius);
	padding: 28px 24px;
	background: var(--wisko-surface);
}

.wisko-roadmap-card h3 {
	font-size: 16px;
	margin-bottom: 8px;
	display: flex;
	align-items: center;
	gap: 8px;
}

.wisko-roadmap-card p { font-size: 14px; margin-bottom: 0; }

/* 12. CTA banner ----------------------------------------------------------- */
.wisko-cta-banner {
	background: linear-gradient(135deg, var(--wisko-primary), var(--wisko-secondary));
}

.wisko-cta-banner-inner { text-align: center; }

.wisko-cta-banner h2 { color: #fff; font-size: clamp(26px, 4vw, 34px); }

.wisko-cta-banner p {
	color: rgba(255, 255, 255, 0.88);
	max-width: 560px;
	margin: 0 auto 28px;
	font-size: 16.5px;
}

.wisko-cta-banner .wisko-btn--primary {
	background: #fff;
	color: var(--wisko-primary-dark);
	box-shadow: none;
}

.wisko-cta-banner .wisko-btn--primary:hover { color: var(--wisko-primary-dark); transform: translateY(-1px); }

.wisko-cta-banner .wisko-btn--ghost {
	color: #fff;
	border-color: rgba(255, 255, 255, 0.4);
}

.wisko-cta-banner .wisko-btn--ghost:hover { border-color: #fff; color: #fff; }

/* 13. Generic page/single content ---------------------------------------- */
.wisko-page-header {
	padding: 64px 0 32px;
	border-bottom: 1px solid var(--wisko-border);
	background: var(--wisko-bg);
	text-align: center;
}

.wisko-page-header h1 { font-size: clamp(28px, 4vw, 40px); margin-bottom: 0; }

.wisko-content {
	max-width: 760px;
	margin: 0 auto;
	padding: 56px 24px;
}

.wisko-content h2 { font-size: 24px; margin-top: 40px; }
.wisko-content h3 { font-size: 19px; margin-top: 28px; }
.wisko-content p, .wisko-content li { color: var(--wisko-text); }
.wisko-content img { border-radius: var(--wisko-radius); }
.wisko-content ul, .wisko-content ol { padding-left: 22px; margin-bottom: 16px; }
.wisko-content ul { list-style: disc; }
.wisko-content ol { list-style: decimal; }

.wisko-content--narrow { max-width: 680px; padding-top: 0; }

.wisko-404 {
	text-align: center;
	padding: 120px 24px;
}

.wisko-404 .wisko-eyebrow { margin-bottom: 24px; }
.wisko-404 h1 { font-size: clamp(48px, 10vw, 96px); margin-bottom: 8px; }
.wisko-404 p { font-size: 17px; max-width: 460px; margin: 0 auto 28px; }

/* 14. About page ------------------------------------------------------------ */
.wisko-about-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 40px 48px;
}

.wisko-about-block h2 { font-size: 21px; margin: 10px 0 12px; }
.wisko-about-block p { font-size: 15px; margin-bottom: 0; }

/* 14b. Value/audience card grid (About: Different, Who We Serve; reused on
   other pages for the same "title + short text" card pattern) ------------- */
.wisko-value-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
}

.wisko-value-card {
	background: var(--wisko-surface);
	border: 1px solid var(--wisko-border);
	border-radius: var(--wisko-radius);
	padding: 24px;
}

.wisko-value-card h3 { font-size: 15.5px; margin-bottom: 8px; }
.wisko-value-card p { font-size: 13.5px; margin-bottom: 0; color: var(--wisko-text-muted); }

/* 15. Features page detail rows --------------------------------------------- */
.wisko-feature-detail {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 48px;
	align-items: center;
	padding: 48px 0;
	border-bottom: 1px solid var(--wisko-border);
}

.wisko-feature-detail:last-child { border-bottom: none; }

.wisko-feature-detail--reverse { direction: rtl; }
.wisko-feature-detail--reverse > * { direction: ltr; }

.wisko-feature-detail-media {
	aspect-ratio: 16 / 11;
	border-radius: var(--wisko-radius);
	background: linear-gradient(160deg, var(--wisko-primary-light), var(--wisko-bg));
	border: 1px dashed var(--wisko-border);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	color: var(--wisko-primary-dark);
	text-align: center;
	padding: 24px;
}

.wisko-feature-detail-media span { font-weight: 700; font-size: 16px; }
.wisko-feature-detail-media em { font-style: normal; font-size: 12.5px; color: var(--wisko-text-muted); }

.wisko-feature-detail-copy h2 {
	font-size: 24px;
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

.wisko-benefit-list { margin-top: 16px; }

.wisko-benefit-list li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 14.5px;
	color: var(--wisko-text);
	padding: 6px 0;
}

.wisko-benefit-list li span {
	color: var(--wisko-primary);
	font-weight: 700;
	flex-shrink: 0;
}

/* 16. Pricing page ----------------------------------------------------------- */
.wisko-pricing-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	align-items: stretch;
}

.wisko-pricing-card {
	position: relative;
	background: var(--wisko-surface);
	border: 1px solid var(--wisko-border);
	border-radius: var(--wisko-radius);
	padding: 32px 28px;
	display: flex;
	flex-direction: column;
	box-shadow: var(--wisko-shadow);
}

.wisko-pricing-card--highlight {
	border-color: var(--wisko-primary);
	box-shadow: var(--wisko-shadow-hover);
	transform: translateY(-6px);
}

.wisko-badge-highlight {
	position: absolute;
	top: -12px;
	left: 28px;
	background: var(--wisko-primary);
	color: #fff;
	border-color: var(--wisko-primary);
}

.wisko-pricing-card h2 { font-size: 19px; margin-bottom: 8px; }

.wisko-pricing-price {
	font-size: 32px;
	font-weight: 800;
	color: var(--wisko-text);
	margin-bottom: 6px;
}

.wisko-pricing-price span { font-size: 13px; font-weight: 500; color: var(--wisko-text-muted); }

.wisko-pricing-desc { font-size: 14px; margin-bottom: 18px; }

.wisko-pricing-card .wisko-benefit-list { flex-grow: 1; margin-top: 0; margin-bottom: 22px; }

.wisko-pricing-btn { width: 100%; }

.wisko-pricing-note {
	text-align: center;
	font-size: 13.5px;
	margin: 36px 0 0;
}

/* 16b. Pricing page: feature comparison table -------------------------------- */
.wisko-compare-wrap {
	overflow-x: auto;
	border: 1px solid var(--wisko-border);
	border-radius: var(--wisko-radius);
	background: var(--wisko-surface);
}

.wisko-compare-table {
	width: 100%;
	min-width: 560px;
	border-collapse: collapse;
	font-size: 14px;
}

.wisko-compare-table th,
.wisko-compare-table td {
	padding: 14px 20px;
	text-align: center;
	border-bottom: 1px solid var(--wisko-border);
}

.wisko-compare-table th:first-child,
.wisko-compare-table td:first-child {
	text-align: left;
	color: var(--wisko-text);
	font-weight: 600;
}

.wisko-compare-table thead th {
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--wisko-text-muted);
	background: var(--wisko-bg);
}

.wisko-compare-table thead th.wisko-compare-highlight {
	color: var(--wisko-primary);
}

.wisko-compare-table tbody tr:last-child td { border-bottom: none; }

.wisko-compare-table .wisko-compare-yes { color: var(--wisko-success, #16a34a); font-weight: 700; }
.wisko-compare-table .wisko-compare-no { color: var(--wisko-text-muted); }

/* 16c. Pricing page: FAQ ------------------------------------------------------ */
.wisko-faq-list {
	max-width: 760px;
	margin: 0 auto;
}

.wisko-faq-item {
	border-bottom: 1px solid var(--wisko-border);
	padding: 22px 0;
}

.wisko-faq-item:last-child { border-bottom: none; }

.wisko-faq-item h3 { font-size: 16.5px; margin-bottom: 8px; }
.wisko-faq-item p { font-size: 14.5px; margin-bottom: 0; color: var(--wisko-text-muted); }

/* 16d. Pricing page: Enterprise contact strip --------------------------------- */
.wisko-enterprise-cta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
	background: var(--wisko-surface);
	border: 1px solid var(--wisko-border);
	border-radius: var(--wisko-radius);
	padding: 32px 36px;
}

.wisko-enterprise-cta h3 { font-size: 19px; margin-bottom: 6px; }
.wisko-enterprise-cta p { font-size: 14.5px; margin-bottom: 0; color: var(--wisko-text-muted); max-width: 480px; }
.wisko-enterprise-cta .wisko-btn { flex-shrink: 0; }

/* 17. Contact page ------------------------------------------------------------ */
.wisko-contact-grid {
	display: grid;
	grid-template-columns: 1fr 1.2fr;
	gap: 48px;
}

.wisko-contact-info h2 { font-size: 22px; }
.wisko-contact-info h3 { font-size: 15px; margin-top: 24px; }

.wisko-contact-list { margin: 20px 0; }

.wisko-contact-list li {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	font-size: 14.5px;
	padding: 8px 0;
}

.wisko-contact-social { margin: 10px 0 14px; }

.wisko-contact-note {
	font-size: 12.5px;
	color: var(--wisko-text-muted);
}

.wisko-contact-form-wrap {
	background: var(--wisko-bg);
	border: 1px solid var(--wisko-border);
	border-radius: var(--wisko-radius);
	padding: 28px;
}

.wisko-contact-form label {
	display: block;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--wisko-text);
	margin-bottom: 16px;
}

.wisko-contact-form input,
.wisko-contact-form textarea {
	display: block;
	width: 100%;
	margin-top: 6px;
	padding: 11px 14px;
	font-size: 14px;
	font-family: inherit;
	border: 1px solid var(--wisko-border);
	border-radius: var(--wisko-radius-sm);
	background: #fff;
	resize: vertical;
}

.wisko-contact-form button { width: 100%; margin-top: 4px; }

/* 18. (Documentation page reuses .wisko-feature-card / .wisko-badge-soon
       from Features/Home -- an earlier .wisko-coming-soon-panel component
       for this page was superseded and removed here as dead CSS, per the
       final UX/design audit's CSS cleanup pass; nothing in the shipped
       template ever referenced it.) ------------------------------------- */

/* 19. Login page ---------------------------------------------------------------- */
.wisko-login-wrap {
	min-height: 60vh;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 64px 24px;
	background:
		radial-gradient(circle at 15% 20%, color-mix(in srgb, var(--wisko-primary) 12%, transparent), transparent 45%),
		radial-gradient(circle at 85% 85%, color-mix(in srgb, var(--wisko-secondary) 12%, transparent), transparent 45%),
		var(--wisko-bg);
}

.wisko-login-split {
	width: 100%;
	max-width: 880px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	border-radius: var(--wisko-radius);
	overflow: hidden;
	box-shadow: var(--wisko-shadow-hover);
}

.wisko-login-promo {
	background: var(--wisko-bg-dark);
	color: #fff;
	padding: 48px 40px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.wisko-login-promo h1 { color: #fff; font-size: 24px; margin-bottom: 12px; }
.wisko-login-promo p { color: rgba(255, 255, 255, 0.75); font-size: 14.5px; margin-bottom: 26px; }

.wisko-login-promo-list { list-style: none; padding: 0; margin: 0; }

.wisko-login-promo-list li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 14.5px;
	color: rgba(255, 255, 255, 0.9);
	padding: 10px 0;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.wisko-login-promo-list li:first-child { border-top: none; }

.wisko-login-promo-list span.wisko-login-promo-check {
	color: var(--wisko-primary-light, var(--wisko-primary));
	font-weight: 700;
	flex-shrink: 0;
}

.wisko-login-card {
	width: 100%;
	max-width: 400px;
	background: var(--wisko-surface);
	border: 1px solid var(--wisko-border);
	border-radius: var(--wisko-radius);
	padding: 40px 36px;
	text-align: center;
}

.wisko-login-split .wisko-login-card {
	max-width: none;
	border: none;
	border-radius: 0;
}

.wisko-login-logo { justify-content: center; margin-bottom: 20px; }
.wisko-login-logo img { max-height: 40px; }

.wisko-login-card h2 { font-size: 22px; margin-bottom: 6px; }
.wisko-login-sub { font-size: 14px; margin-bottom: 24px; }

.wisko-login-real { width: 100%; }

.wisko-login-footnote {
	font-size: 13px;
	margin: 20px 0 0;
}

/* 20. Site footer --------------------------------------------------------- */
.wisko-footer {
	background: var(--wisko-bg-dark);
	color: rgba(255, 255, 255, 0.68);
	padding: 64px 0 28px;
}

.wisko-footer-top {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1fr;
	gap: 32px;
	padding-bottom: 40px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.wisko-footer-brand .wisko-logo { color: #fff; margin-bottom: 14px; }
.wisko-footer-brand p { font-size: 14px; max-width: 280px; }

.wisko-footer-col h4 {
	font-size: 12.5px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: rgba(255, 255, 255, 0.9);
	margin-bottom: 14px;
}

.wisko-footer-col ul li { margin-bottom: 10px; }
.wisko-footer-col a { color: rgba(255, 255, 255, 0.68); font-size: 14px; }
.wisko-footer-col a:hover { color: #fff; }

.wisko-footer-bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 16px;
	padding-top: 24px;
	font-size: 13px;
}

.wisko-footer-social { display: flex; gap: 12px; }

.wisko-footer-social a {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.18);
	display: flex;
	align-items: center;
	justify-content: center;
	color: rgba(255, 255, 255, 0.75);
	font-size: 13px;
}

.wisko-footer-social a:hover {
	border-color: rgba(255, 255, 255, 0.5);
	color: #fff;
}

/* 21. Responsive breakpoints ----------------------------------------------- */
@media (max-width: 1024px) {
	.wisko-features-grid { grid-template-columns: repeat(2, 1fr); }
	.wisko-workflow { grid-template-columns: repeat(2, 1fr); row-gap: 40px; }
	.wisko-workflow-step:nth-child(2)::after { display: none; }
	.wisko-roadmap-grid { grid-template-columns: repeat(2, 1fr); }
	.wisko-footer-top { grid-template-columns: 1.2fr 1fr 1fr; }
	.wisko-footer-col:last-child { grid-column: span 1; }
	.wisko-problem-grid { grid-template-columns: repeat(2, 1fr); }
	.wisko-about-grid { grid-template-columns: 1fr; }
	.wisko-pricing-grid { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; }
	.wisko-pricing-card--highlight { transform: none; }
	.wisko-contact-grid { grid-template-columns: 1fr; gap: 32px; }
	.wisko-value-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 782px) {
	.wisko-section { padding: 64px 0; }
	.wisko-primary-nav { display: none; }
	.wisko-header-actions .wisko-btn--ghost { display: none; }
	.wisko-nav-toggle { display: flex; }

	body.wisko-nav-open .wisko-primary-nav {
		display: block;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background: var(--wisko-bg-dark);
		border-bottom: 1px solid rgba(255, 255, 255, 0.1);
		padding: 12px 24px 20px;
	}

	body.wisko-nav-open .wisko-primary-nav ul { flex-direction: column; align-items: flex-start; gap: 14px; }

	.wisko-team-grid { grid-template-columns: 1fr; }
	.wisko-roadmap-grid { grid-template-columns: 1fr; }
	.wisko-footer-top { grid-template-columns: 1fr 1fr; }
	.wisko-footer-brand { grid-column: span 2; }
	.wisko-problem-grid { grid-template-columns: 1fr; }
	.wisko-feature-detail { grid-template-columns: 1fr; }
	.wisko-feature-detail--reverse { direction: ltr; }
	.wisko-feature-detail-media { order: -1; }
	.wisko-value-grid { grid-template-columns: 1fr; }
	.wisko-login-split { grid-template-columns: 1fr; }
	.wisko-login-promo { padding: 36px 32px; }
}

/* 21b. Focus-visible states (final UX/design audit -- accessibility) --------
   The theme never defined its own focus treatment anywhere, so keyboard
   focus fell back to each browser's bare default outline, which is easy to
   lose against this theme's dark header, footer, hero, and CTA-banner
   sections (a default blue ring on a dark-navy background reads very low
   contrast in some browsers). One consistent, on-brand ring for every
   link/button/control, switching to white on the theme's own dark
   surfaces so it never disappears. This only adds a focus treatment where
   none existed -- it never removes or replaces a browser's own default. */
a:focus-visible,
button:focus-visible,
.wisko-btn:focus-visible,
.wisko-nav-toggle:focus-visible {
	outline: 2px solid var(--wisko-primary);
	outline-offset: 2px;
	border-radius: 4px;
}

.wisko-header a:focus-visible,
.wisko-footer a:focus-visible,
.wisko-section--dark a:focus-visible,
.wisko-cta-banner a:focus-visible,
.wisko-login-promo a:focus-visible {
	outline-color: #fff;
}

.wisko-contact-form input:focus-visible,
.wisko-contact-form textarea:focus-visible {
	outline: 2px solid var(--wisko-primary);
	outline-offset: 1px;
	border-color: var(--wisko-primary);
}

@media (max-width: 560px) {
	.wisko-container { padding: 0 18px; }
	.wisko-hero { padding: 64px 0 56px; }
	.wisko-hero-preview-grid { grid-template-columns: 1fr; padding: 20px; }
	.wisko-features-grid { grid-template-columns: 1fr; }
	.wisko-workflow { grid-template-columns: 1fr; }
	.wisko-workflow-step::after { display: none !important; }
	.wisko-footer-top { grid-template-columns: 1fr; }
	.wisko-footer-brand { grid-column: span 1; }
	.wisko-footer-bottom { flex-direction: column; align-items: flex-start; }
	.wisko-login-card { padding: 32px 24px; }
}