/*!
Theme Name: CleverSay
Theme URI: https://cleversay.ai/
Author: Jasa Software LLC
Author URI: https://cleversay.ai/
Description: Marketing theme for cleversay.ai. Built on the Underscores (_s) starter theme. Includes designed templates for Home, How it works, Why CleverSay, Who it's for, Trust, FAQ, Request a demo and Thank you, and creates those pages on activation.
Version: 1.0.4
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: cleversay
Tags: custom-logo, custom-menu, featured-images, translation-ready

CleverSay is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Generic (from Underscores)
	- Normalize
	- Box sizing
# CleverSay design
	- Tokens, type, buttons
	- Header & navigation
	- Sections and components
	- Request a demo form
	- Ordinary pages and posts
	- Footer
# WordPress media, plugins, utilities (from Underscores)
--------------------------------------------------------------*/


/*--------------------------------------------------------------
# Generic
--------------------------------------------------------------*/

/* Normalize
--------------------------------------------- */

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
	 ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
html {
	line-height: 1.15;
	-webkit-text-size-adjust: 100%;
}

/* Sections
	 ========================================================================== */

/**
 * Remove the margin in all browsers.
 */
body {
	margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */
main {
	display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
	font-size: 2em;
	margin: 0.67em 0;
}

/* Grouping content
	 ========================================================================== */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
	box-sizing: content-box;
	height: 0;
	overflow: visible;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
	font-family: monospace, monospace;
	font-size: 1em;
}

/* Text-level semantics
	 ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */
a {
	background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
	border-bottom: none;
	text-decoration: underline;
	text-decoration: underline dotted;
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
	font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
	font-family: monospace, monospace;
	font-size: 1em;
}

/**
 * Add the correct font size in all browsers.
 */
small {
	font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sub {
	bottom: -0.25em;
}

sup {
	top: -0.5em;
}

/* Embedded content
	 ========================================================================== */

/**
 * Remove the border on images inside links in IE 10.
 */
img {
	border-style: none;
}

/* Forms
	 ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
	font-family: inherit;
	font-size: 100%;
	line-height: 1.15;
	margin: 0;
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input {
	overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select {
	text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
button,
[type="button"],
[type="reset"],
[type="submit"] {
	-webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
	border-style: none;
	padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
	outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */
fieldset {
	padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *		`fieldset` elements in all browsers.
 */
legend {
	box-sizing: border-box;
	color: inherit;
	display: table;
	max-width: 100%;
	padding: 0;
	white-space: normal;
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
	vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */
textarea {
	overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */
[type="checkbox"],
[type="radio"] {
	box-sizing: border-box;
	padding: 0;
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
	height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type="search"] {
	-webkit-appearance: textfield;
	outline-offset: -2px;
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
[type="search"]::-webkit-search-decoration {
	-webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
	-webkit-appearance: button;
	font: inherit;
}

/* Interactive
	 ========================================================================== */

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */
details {
	display: block;
}

/*
 * Add the correct display in all browsers.
 */
summary {
	display: list-item;
}

/* Misc
	 ========================================================================== */

/**
 * Add the correct display in IE 10+.
 */
template {
	display: none;
}

/**
 * Add the correct display in IE 10.
 */
[hidden] {
	display: none;
}

/* Box sizing
--------------------------------------------- */

/* Inherit box-sizing to more easily change it's value on a component level.
@link http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
*,
*::before,
*::after {
	box-sizing: inherit;
}

html {
	box-sizing: border-box;
}

/*--------------------------------------------------------------
# CleverSay design
Layout concept: a quiet, cool "office paper" site. The one bold idea is
the highlighter: answers are marked in yellow and tied to the exact line
on the published page they came from.
--------------------------------------------------------------*/
:root {
	--paper: #F4F6F7;
	--surface: #FFFFFF;
	--ink: #13212B;
	--muted: #52616C;
	--line: #D6DDE2;
	--accent: #0B6B63;
	--accent-ink: #FFFFFF;
	--soft: #E3EFEC;
	--mark: #FFE270;
	--mark-ink: #13212B;
	--amber: #8A5300;
	--amber-soft: #FBEFD9;
	--error: #B3261E;
	--shadow: 0 1px 2px rgba(19, 33, 43, .06), 0 8px 24px rgba(19, 33, 43, .06);
	--display: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
	--body: "Source Sans 3", "Segoe UI", system-ui, sans-serif;
	--mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
	--r: 10px;
	--gutter: 20px;
	--head-top: 0px;
	color-scheme: light;
}

@media (prefers-color-scheme: dark) {
	:root {
		--paper: #0D141A;
		--surface: #141E26;
		--ink: #E4EBEF;
		--muted: #98A8B3;
		--line: #25333E;
		--accent: #52C4B5;
		--accent-ink: #04211D;
		--soft: #12302C;
		--mark: rgba(255, 214, 72, .30);
		--mark-ink: #FFF6D6;
		--amber: #F0B45A;
		--amber-soft: #2E2412;
		--error: #FF8A80;
		--shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .25);
		color-scheme: dark;
	}
}

body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: var(--body);
	font-size: 17px;
	line-height: 1.6;
	padding-inline: var(--gutter);
	-webkit-font-smoothing: antialiased;
}

a { color: var(--accent); }
a:visited { color: var(--accent); }
a:hover, a:focus, a:active { color: var(--accent); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

h1, h2, h3, h4 {
	font-family: var(--display);
	line-height: 1.12;
	text-wrap: balance;
	margin: 0;
	letter-spacing: -.015em;
	clear: none;
}
h1 { font-size: clamp(2.4rem, 5.6vw, 4.1rem); font-weight: 800; letter-spacing: -.03em; }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); font-weight: 700; }
h3 { font-size: 1.25rem; font-weight: 700; }
h4 { font-size: 1.02rem; font-weight: 700; }
p { margin: 0; }
img { max-width: 100%; height: auto; }

.wrap { max-width: 1120px; margin-inline: auto; }
.eyebrow { font-family: var(--mono); font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); font-weight: 500; }
.lede { font-size: 1.2rem; color: var(--muted); max-width: 60ch; }
.muted { color: var(--muted); }
.stack { display: flex; flex-direction: column; gap: 16px; }
.hl { background: linear-gradient(var(--mark), var(--mark)) no-repeat 0 88% / 100% 62%; color: inherit; padding: 0 .08em; }

@media (prefers-reduced-motion: no-preference) {
	.hl.sweep { animation: cs-sweep 1.1s .35s ease-out both; }
	@keyframes cs-sweep {
		from { background-size: 0 62%; }
		to { background-size: 100% 62%; }
	}
}

/* Buttons
--------------------------------------------- */
.btn,
.btn:visited {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-family: var(--body);
	font-weight: 700;
	font-size: 1rem;
	border-radius: 999px;
	padding: 12px 22px;
	text-decoration: none;
	border: 2px solid var(--accent);
	cursor: pointer;
	line-height: 1.2;
}
.btn-primary, .btn-primary:visited, .btn-primary:hover { background: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { filter: brightness(1.08); }
.btn-ghost, .btn-ghost:visited { background: transparent; color: var(--accent); }
.btn-ghost:hover { background: var(--soft); color: var(--accent); }

/* Header & navigation
--------------------------------------------- */
.admin-bar { --head-top: 32px; }
@media screen and (max-width: 782px) { .admin-bar { --head-top: 46px; } }
@media screen and (max-width: 600px) { .admin-bar { --head-top: 0px; } }

.site-head {
	position: sticky;
	top: calc(var(--head-top) + env(safe-area-inset-top, 0px));
	z-index: 20;
	background: color-mix(in srgb, var(--paper) 88%, transparent);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--line);
	margin-inline: calc(var(--gutter) * -1);
	padding: 0 var(--gutter);
}
.head-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 64px; position: relative; }
.brand, .brand:visited { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); font-family: var(--display); font-weight: 800; font-size: 1.25rem; letter-spacing: -.02em; }
.brand:hover { color: var(--ink); }
.brand-mark { display: block; width: 34px; height: auto; flex: none; }
.brand-mark .q-c { fill: var(--accent); }
.brand-mark .q-s { fill: #FFD84A; }
.custom-logo-link img { max-height: 40px; width: auto; display: block; }

.main-navigation { display: flex; align-items: center; gap: 8px; }
.main-navigation ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 4px; }
.main-navigation li { position: relative; }
.main-navigation ul ul { display: none; }
.main-navigation a,
.main-navigation a:visited { color: var(--ink); text-decoration: none; font-weight: 600; font-size: .95rem; padding: 8px 10px; border-radius: 8px; display: block; }
.main-navigation a:hover { background: var(--soft); color: var(--ink); }
.main-navigation .current-menu-item > a,
.main-navigation .current_page_item > a { color: var(--accent); }
.main-navigation .nav-cta,
.main-navigation .nav-cta:visited,
.main-navigation .nav-cta:hover { margin-left: 8px; padding: 9px 16px; color: var(--accent-ink); background: var(--accent); display: inline-flex; }
.menu-toggle { display: none; background: none; border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; font: 600 .95rem var(--body); color: var(--ink); cursor: pointer; }

@media (max-width: 920px) {
	.menu-toggle { display: block; }
	.main-navigation .nav-panel { display: none; position: absolute; left: calc(var(--gutter) * -1); right: calc(var(--gutter) * -1); top: 64px; flex-direction: column; align-items: stretch; background: var(--surface); border-bottom: 1px solid var(--line); padding: 12px var(--gutter) 18px; box-shadow: var(--shadow); }
	.main-navigation.toggled .nav-panel { display: flex; }
	.main-navigation .nav-panel ul { flex-direction: column; align-items: stretch; }
	.main-navigation .nav-cta { margin: 8px 0 0; }
}
@media (min-width: 921px) {
	.main-navigation .nav-panel { display: flex; align-items: center; }
}

/* Sections
--------------------------------------------- */
.site-main section { padding-block: 72px; }
.band { background: var(--surface); border-block: 1px solid var(--line); margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); }
.sec-head { display: flex; flex-direction: column; gap: 12px; margin-bottom: 36px; max-width: 720px; }
.site-main .page-hero { padding-block: 64px 40px; }
.page-hero .lede { margin-top: 16px; }

/* Home hero */
.site-main .hero { display: grid; grid-template-columns: 1.02fr 1fr; gap: 48px; align-items: center; padding-block: 56px 72px; }
.hero > * { min-width: 0; }
.hero h1 { margin-top: 14px; }
.hero .lede { margin-top: 20px; }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.trust-line { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 26px; font-family: var(--mono); font-size: .8rem; color: var(--muted); }
.trust-line span { display: inline-flex; align-items: center; gap: 6px; }
.trust-line span::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
@media (max-width: 900px) { .site-main .hero { grid-template-columns: 1fr; gap: 36px; } }

/* Example chat widget (home page) */
.demo-wrap { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.demo-try { display: flex; flex-direction: column; gap: 10px; }
.demo-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { font: 600 .86rem var(--body); border: 1px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 999px; padding: 7px 13px; cursor: pointer; }
.chip:hover { border-color: var(--accent); }
.chip[aria-selected="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }

.widget { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow); overflow: hidden; display: flex; flex-direction: column; }
.w-head { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: var(--accent); color: var(--accent-ink); }
.w-title { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.w-title b { font-family: var(--display); font-size: 1rem; }
.w-title span { font-size: .8rem; opacity: .85; }
.w-sample { margin-left: auto; font: 500 .68rem var(--mono); letter-spacing: .08em; text-transform: uppercase; border: 1px solid currentColor; border-radius: 999px; padding: 3px 8px; opacity: .85; }
.w-avatar { width: 40px; height: 40px; border-radius: 50%; background: #FFFFFF; display: grid; place-items: center; flex: none; box-shadow: 0 0 0 2px rgba(255, 255, 255, .35); }
.w-avatar svg { width: 22px; height: auto; display: block; }
.w-avatar .q-c { fill: #0B6B63; }
.w-avatar .q-s { fill: #F2C230; }
.w-avatar.sm { width: 32px; height: 32px; box-shadow: 0 0 0 1px var(--line); }
.w-avatar.sm svg { width: 18px; }

.w-body { position: relative; overflow: hidden; min-height: 380px; background: var(--paper); }
.w-chat { display: flex; flex-direction: column; gap: 14px; padding: 18px 16px; }
.bubble { max-width: 86%; padding: 11px 14px; border-radius: 16px; font-size: .97rem; line-height: 1.5; }
.bubble p + p { margin-top: 8px; }
.b-user { align-self: flex-end; background: var(--accent); color: var(--accent-ink); border-bottom-right-radius: 4px; }
.w-msg { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 10px; align-items: start; }
.w-msg-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.w-msg .who { font: 600 .72rem var(--mono); color: var(--muted); letter-spacing: .05em; }
.b-bot { max-width: 100%; align-self: flex-start; background: var(--surface); border: 1px solid var(--line); border-top-left-radius: 4px; }
.w-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: .82rem; color: var(--muted); }
.w-btn { display: inline-flex; align-items: center; gap: 5px; font: 600 .8rem var(--body); color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 5px 11px; cursor: pointer; }
.w-btn svg { width: 14px; height: 14px; }
.w-btn:hover { border-color: var(--accent); }
.w-btn[aria-pressed="true"] { background: var(--soft); border-color: var(--accent); color: var(--accent); }
.w-src { margin-left: auto; color: var(--accent); }
.w-src svg { transition: transform .2s; }
.w-src[aria-expanded="true"] svg { transform: rotate(-90deg); }
.handoff { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-radius: 12px; background: var(--amber-soft); color: var(--ink); font-size: .9rem; }
.handoff b { color: var(--amber); font-family: var(--mono); font-size: .72rem; letter-spacing: .05em; text-transform: uppercase; }
.handoff .w-btn { align-self: flex-start; }
.handoff-note { font-size: .82rem; color: var(--muted); }

.w-drawer { position: absolute; inset: 0; background: var(--surface); border-left: 1px solid var(--line); box-shadow: -12px 0 24px rgba(19, 33, 43, .08); transform: translateX(100%); visibility: hidden; transition: transform .32s ease, visibility 0s linear .32s; display: flex; flex-direction: column; overflow-y: auto; }
.w-drawer.open { transform: none; visibility: visible; transition: transform .32s ease, visibility 0s; }
@media (prefers-reduced-motion: reduce) { .w-drawer, .w-drawer.open, .w-src svg { transition: none; } }
.w-drawer-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.w-back { display: inline-flex; align-items: center; gap: 4px; background: none; border: none; font: 600 .88rem var(--body); color: var(--accent); cursor: pointer; padding: 4px 2px; }
.w-back svg { width: 18px; height: 18px; }
.w-count { font: 500 .72rem var(--mono); color: var(--muted); }
.w-page { padding: 18px 18px 22px; display: flex; flex-direction: column; gap: 10px; }
.w-page .url { font: 500 .74rem var(--mono); color: var(--muted); display: flex; align-items: center; gap: 6px; overflow-wrap: anywhere; background: var(--paper); border: 1px solid var(--line); border-radius: 8px; padding: 7px 10px; }
.w-page .url svg { width: 13px; height: 13px; flex: none; }
.w-page .crumb { font: 500 .74rem var(--mono); color: var(--accent); letter-spacing: .03em; }
.w-page h4 { font-size: 1.12rem; }
.w-page p { font-size: .93rem; color: var(--muted); }
.w-page p .hl { color: var(--ink); }
.w-page table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.w-page td { padding: 7px 8px; border-bottom: 1px solid var(--line); color: var(--muted); vertical-align: top; }
.w-page td:last-child { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.w-page tr.used td { color: var(--ink); background: linear-gradient(var(--mark), var(--mark)); }
.w-used { display: flex; align-items: center; gap: 8px; font-size: .8rem; color: var(--muted); margin-top: 4px; }
.w-used::before { content: ""; width: 22px; height: 10px; border-radius: 2px; background: var(--mark); flex: none; }
.w-open { font: 600 .88rem var(--body); color: var(--accent); margin-top: 4px; }

.w-input { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px 12px 18px; border-top: 1px solid var(--line); background: var(--surface); color: var(--muted); font-size: .92rem; }
.w-send { width: 34px; height: 34px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); display: grid; place-items: center; }
.w-send svg { width: 18px; height: 18px; }
.demo-note { font-size: .84rem; color: var(--muted); }
.demo-note-quiet { margin-top: -8px; font-style: italic; }

/* Grids & cards */
.grid { display: grid; gap: 20px; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) { .g3, .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .g2, .g3, .g4 { grid-template-columns: 1fr; } }
.card, a.card:visited { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 24px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
a.card, a.card:visited, a.card:hover { text-decoration: none; color: inherit; }
a.card:hover { border-color: var(--accent); }
.plain { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.plain p, .card p { color: var(--muted); }
.icon { width: 40px; height: 40px; border-radius: 10px; background: var(--soft); display: grid; place-items: center; color: var(--accent); }
.icon svg { width: 22px; height: 22px; }

/* Problem */
.site-main .problem { display: grid; grid-template-columns: 1fr 1.3fr; gap: 48px; align-items: start; }
.problem > * { min-width: 0; }
@media (max-width: 860px) { .site-main .problem { grid-template-columns: 1fr; gap: 28px; } }
.pain { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.pain div { padding: 18px 0; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 180px 1fr; gap: 16px; }
.pain div > * { min-width: 0; }
.pain b { font-family: var(--display); }
.pain span { color: var(--muted); }
@media (max-width: 560px) { .pain div { grid-template-columns: 1fr; gap: 4px; } }

/* Steps (a real sequence) */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; counter-reset: s; }
@media (max-width: 820px) { .steps { grid-template-columns: 1fr; } }
.step { counter-increment: s; display: flex; flex-direction: column; gap: 8px; padding-top: 18px; border-top: 2px solid var(--ink); min-width: 0; }
.step::before { content: "Step " counter(s); font: 500 .76rem var(--mono); color: var(--accent); letter-spacing: .06em; text-transform: uppercase; }
.step p { color: var(--muted); }

/* Tables */
.site-main .gaps { display: grid; grid-template-columns: 1fr 1.15fr; gap: 48px; align-items: center; }
.gaps > * { min-width: 0; }
@media (max-width: 860px) { .site-main .gaps { grid-template-columns: 1fr; } }
.tbl-wrap { overflow-x: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); }
.tbl-wrap table { border-collapse: collapse; width: 100%; font-size: .95rem; margin: 0; }
.tbl-wrap th, .tbl-wrap td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--line); vertical-align: top; }
.tbl-wrap th { font: 500 .74rem var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); background: var(--paper); }
.tbl-wrap tr:last-child td { border-bottom: none; }
.tbl-wrap td.num { font-variant-numeric: tabular-nums; font-weight: 700; text-align: right; }
.tbl-wrap th.num { text-align: right; }
.tbl-cap { font: 500 .74rem var(--mono); color: var(--muted); padding: 10px 16px; border-top: 1px solid var(--line); }
.compare td:first-child, .compare th:first-child { font-weight: 700; min-width: 150px; }
.compare td { min-width: 170px; }
.compare .us { background: var(--soft); }
.compare th.us { color: var(--accent); }

/* Roles */
.role { display: grid; grid-template-columns: 260px 1fr; gap: 36px; padding-block: 36px; border-top: 1px solid var(--line); }
.role > * { min-width: 0; }
.role:last-child { border-bottom: 1px solid var(--line); }
@media (max-width: 760px) { .role { grid-template-columns: 1fr; gap: 14px; } }
.role h3 { font-size: 1.4rem; }
.role .asks { font-family: var(--mono); font-size: .8rem; color: var(--muted); margin-top: 10px; }
.checks { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.checks li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; }
.checks li::before { content: ""; width: 18px; height: 18px; margin-top: 4px; border-radius: 50%; background: var(--soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3 3 7-7' fill='none' stroke='%230B6B63' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat; }

/* Trust */
.badges { display: flex; flex-wrap: wrap; gap: 10px; }
.badge { font: 500 .8rem var(--mono); border: 1px solid var(--line); background: var(--surface); border-radius: 6px; padding: 6px 10px; color: var(--ink); }

/* FAQ */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); padding: 18px 0; }
.faq summary { cursor: pointer; font-family: var(--display); font-weight: 700; font-size: 1.12rem; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--mono); color: var(--accent); font-size: 1.3rem; line-height: 1; }
.faq details[open] summary::after { content: "\2013"; }
.faq details p { margin-top: 10px; color: var(--muted); max-width: 70ch; }

/* Closing call to action */
.cta-band { background: var(--ink); color: var(--paper); border-radius: 18px; padding: 52px 40px; display: grid; grid-template-columns: 1.4fr 1fr; gap: 32px; align-items: center; margin-block: 72px; }
.cta-band > * { min-width: 0; }
.cta-band h2 { color: var(--paper); }
.cta-band p { color: color-mix(in srgb, var(--paper) 75%, var(--ink)); }
.cta-band .cta-row { margin: 0; }
.cta-band .btn-primary, .cta-band .btn-primary:visited { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.cta-band .btn-ghost, .cta-band .btn-ghost:visited { color: var(--paper); border-color: color-mix(in srgb, var(--paper) 50%, var(--ink)); }
.cta-band .btn-ghost:hover { background: transparent; color: var(--paper); border-color: var(--paper); }
@media (max-width: 760px) { .cta-band { grid-template-columns: 1fr; padding: 36px 24px; } }

/* Request a demo
--------------------------------------------- */
.site-main .contact { display: grid; grid-template-columns: 1.25fr 1fr; gap: 48px; align-items: start; }
.contact > * { min-width: 0; }
@media (max-width: 860px) { .site-main .contact { grid-template-columns: 1fr; } }
.cs-form { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 28px; }
@media (max-width: 560px) { .cs-form { padding: 20px; } }
.cs-form > *:first-child { margin-top: 0; }
.cs-form form > p { margin: 0 0 14px; }
.cs-form form > p:last-child { margin-bottom: 0; }
.cs-form label, .cs-form legend { font-weight: 600; font-size: .93rem; color: var(--ink); }
.cs-form input[type="text"],
.cs-form input[type="email"],
.cs-form input[type="tel"],
.cs-form input[type="url"],
.cs-form input[type="number"],
.cs-form select,
.cs-form textarea {
	font: 400 1rem var(--body);
	color: var(--ink);
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: 8px;
	padding: 11px 12px;
	width: 100%;
	max-width: 100%;
	box-shadow: none;
}
.cs-form textarea { min-height: 110px; resize: vertical; }
.cs-form input:focus, .cs-form select:focus, .cs-form textarea:focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: var(--accent); }
.cs-form button[type="submit"],
.cs-form input[type="submit"] {
	font: 700 1rem var(--body);
	background: var(--accent);
	color: var(--accent-ink);
	border: 2px solid var(--accent);
	border-radius: 999px;
	padding: 12px 24px;
	cursor: pointer;
	height: auto;
}
.cs-form button[type="submit"]:hover, .cs-form input[type="submit"]:hover { filter: brightness(1.08); }
.cs-form .wpforms-error, .cs-form label.error { color: var(--error); font-weight: 600; font-size: .85rem; }
.cs-form .wpforms-field-sublabel, .cs-form .wpforms-field-description { color: var(--muted); font-size: .85rem; }
.cs-form-empty { border: 1px dashed var(--line); border-radius: 14px; padding: 28px; color: var(--muted); }
.next { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 18px; counter-reset: n; }
.next li { counter-increment: n; display: grid; grid-template-columns: 34px 1fr; gap: 12px; }
.next li::before { content: counter(n); width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--accent); color: var(--accent); display: grid; place-items: center; font: 700 .9rem var(--mono); }
.next p { color: var(--muted); }
.email-text { font-family: var(--mono); color: var(--ink); user-select: all; overflow-wrap: anywhere; }

/* Ordinary pages and posts (privacy policy, blog, etc.)
--------------------------------------------- */
.site-main.cs-default { max-width: 760px; margin-inline: auto; padding-block: 56px 80px; }
.cs-default .entry-header { margin-bottom: 24px; }
.cs-default .entry-title { font-size: clamp(2rem, 4vw, 2.8rem); }
.cs-default .entry-meta, .cs-default .entry-footer { color: var(--muted); font-size: .9rem; margin-top: 8px; }
.cs-default .entry-content > * + * { margin-top: 1em; }
.cs-default .entry-content h2 { margin-top: 1.6em; font-size: 1.6rem; }
.cs-default .entry-content h3 { margin-top: 1.4em; }
.cs-default article + article { margin-top: 56px; padding-top: 40px; border-top: 1px solid var(--line); }
.cs-default .post-thumbnail img { border-radius: var(--r); }
.cs-default .nav-links { display: flex; justify-content: space-between; gap: 16px; margin-top: 40px; }
.widget-area { max-width: 760px; margin: 0 auto 56px; }

/* Footer
--------------------------------------------- */
.site-foot { border-top: 1px solid var(--line); margin-inline: calc(var(--gutter) * -1); padding: 40px var(--gutter) 48px; background: var(--surface); }
.foot { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 32px; }
.foot > * { min-width: 0; }
@media (max-width: 760px) { .foot { grid-template-columns: 1fr 1fr; } }
.foot h4 { font-size: .8rem; font-family: var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 500; margin-bottom: 10px; }
.foot ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.foot a, .foot a:visited { color: var(--ink); text-decoration: none; }
.foot a:hover { color: var(--accent); }
.fine { margin-top: 32px; font-size: .85rem; color: var(--muted); }


/* Media
--------------------------------------------- */
.page-content .wp-smiley,
.entry-content .wp-smiley,
.comment-content .wp-smiley {
	border: none;
	margin-bottom: 0;
	margin-top: 0;
	padding: 0;
}

/* Make sure logo link wraps around logo image. */
.custom-logo-link {
	display: inline-block;
}

/* Captions
--------------------------------------------- */
.wp-caption {
	margin-bottom: 1.5em;
	max-width: 100%;
}

.wp-caption img[class*="wp-image-"] {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.wp-caption .wp-caption-text {
	margin: 0.8075em 0;
}

.wp-caption-text {
	text-align: center;
}

/* Galleries
--------------------------------------------- */
.gallery {
	margin-bottom: 1.5em;
	display: grid;
	grid-gap: 1.5em;
}

.gallery-item {
	display: inline-block;
	text-align: center;
	width: 100%;
}

.gallery-columns-2 {
	grid-template-columns: repeat(2, 1fr);
}

.gallery-columns-3 {
	grid-template-columns: repeat(3, 1fr);
}

.gallery-columns-4 {
	grid-template-columns: repeat(4, 1fr);
}

.gallery-columns-5 {
	grid-template-columns: repeat(5, 1fr);
}

.gallery-columns-6 {
	grid-template-columns: repeat(6, 1fr);
}

.gallery-columns-7 {
	grid-template-columns: repeat(7, 1fr);
}

.gallery-columns-8 {
	grid-template-columns: repeat(8, 1fr);
}

.gallery-columns-9 {
	grid-template-columns: repeat(9, 1fr);
}

.gallery-caption {
	display: block;
}

/*--------------------------------------------------------------
# Plugins
--------------------------------------------------------------*/

/* Jetpack infinite scroll
--------------------------------------------- */

/* Hide the Posts Navigation and the Footer when Infinite Scroll is in use. */
.infinite-scroll .posts-navigation,
.infinite-scroll.neverending .site-footer {
	display: none;
}

/* Re-display the Theme Footer when Infinite Scroll has reached its end. */
.infinity-end.neverending .site-footer {
	display: block;
}

/*--------------------------------------------------------------
# Utilities
--------------------------------------------------------------*/

/* Accessibility
--------------------------------------------- */

/* Text meant only for screen readers. */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background-color: #f1f1f1;
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	clip-path: none;
	color: #21759b;
	display: block;
	font-size: 0.875rem;
	font-weight: 700;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}

/* Do not show the outline on the skip link target. */
#primary[tabindex="-1"]:focus {
	outline: 0;
}

/* Alignments
--------------------------------------------- */
.alignleft {

	/*rtl:ignore*/
	float: left;

	/*rtl:ignore*/
	margin-right: 1.5em;
	margin-bottom: 1.5em;
}

.alignright {

	/*rtl:ignore*/
	float: right;

	/*rtl:ignore*/
	margin-left: 1.5em;
	margin-bottom: 1.5em;
}

.aligncenter {
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 1.5em;
}