/*
Theme Name: AskSpot
Template: twentytwentyfive
Version: 0.9.27
Description: Motyw AskSpot - pelny brand (etap 2). Natywny block theme z biblioteka wzorcow, SEO/GEO. Plus Jakarta Sans + Inter, AskSpot Blue.
Author: AskSpot
Text Domain: askspot
*/

/* ==========================================================================
   Base
   ========================================================================== */
:root {
	--ask-line: var(--wp--preset--color--line, #EDEFF2);
	--ask-card-border: #E6EAF0;
	/* Design System aliases - values per design_handoff_askspot_design_system */
	--as-line: #E6EAF0;
	--as-line-soft: #E1E5EB;
	--as-surface: #EEF2F7;
	--as-dark: #1B2230;
	--as-dark-panel: #252E3D;
	--as-on-dark-muted: #AEB7C5;
	--as-on-dark-label: #8A93A8;
	--as-on-dark-link: #6E9BF0;
	--as-ease: cubic-bezier(.4, 0, .2, 1);
}

html { scroll-behavior: smooth; }

/* Template-part wrappers must not constrain sticky/full-bleed children. */
.wp-block-template-part { display: contents; }

/* Full-width sections sit flush (no paper strip from the global block gap),
   like the v3 reference. Regular flow content (articles) keeps its rhythm. */
.ask-main .wp-block-post-content > .alignfull { margin-block-start: 0; }

/* Kill the global flow gap: WordPress pushes every child of a plain (flow)
   group down by the 1.5rem block gap, which wrecks composed layouts. Revert
   to browser defaults (groups/divs 0, text keeps its native rhythm). The
   constrained-layout gap (article content) and flex/grid gaps stay intact.
   Kept early in this file so component rules below still win the cascade. */
:root :where(.is-layout-flow) > * { margin-block-start: revert; }

/* Same story at the site root: WordPress separates header / main / footer
   with the block gap, leaving a paper strip between the header bar and the
   first section. Sections carry their own padding, so drop it. */
.wp-site-blocks > * { margin-block-start: 0; }

/* Rows and grids assembled from core groups: WordPress injects a flow gap
   (margin-block-start) between siblings, which knocks items out of vertical
   alignment inside flex/grid rows. Neutralize it for these containers. */
.ask-statgrid > *,
.ask-stepsrow > *,
.ask-chips-dark > *,
.ask-channels > *,
.ask-chan > *,
.ask-fig > *,
.ask-fig-chat > *,
.ask-fig-nudge > *,
.ask-cs-track > *,
.ask-tsection__track > *,
.ask-team > * { margin-block-start: 0; }

/* Home: cards lean on hairline borders, not shadows (reference look). */
.home .wp-block-group.is-style-card,
.home .ask-tquote { box-shadow: none; }

::selection { background: var(--wp--preset--color--blue, #2766F0); color: #fff; }

/* WP core (6.6+) w global styles rysuje outline na KAZDYM :focus wewnatrz
   .wp-site-blocks — stad przypadkowe ramki po zwyklym kliknieciu (FAQ, karty,
   slidery). Wylaczamy ja w calosci; wskazniki fokusu dla klawiatury daja nasze
   wlasne reguly :focus-visible ponizej. */
.wp-site-blocks :focus:not(:focus-visible) { outline: none; }

:where(a):focus-visible,
:where(button):focus-visible,
.wp-block-button__link:focus-visible {
	outline: 2px solid var(--wp--preset--color--blue, #2766F0);
	outline-offset: 2px;
}

/* Smooth, readable body */
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

/* ==========================================================================
   Buttons - brand variations

   ONE geometry for every button on the site, so a blue button and the white
   button beside it are always the same box. Bordered variants subtract the
   1px border from their padding, otherwise they render 2px taller than the
   primary they sit next to.

   Every variant must define all four states: base / :hover / :active /
   :disabled. The focus ring is global (see :focus-visible above).
   ========================================================================== */
:root {
	--ask-btn-py: 0.8rem;               /* 12.8px - matches theme.json elements.button */
	--ask-btn-px: 1.5rem;               /* 24px */
	--ask-btn-lh: 1.6;                  /* pin it: inherited line-height differs per section */
	--ask-btn-radius: var(--wp--custom--radius--md, 12px);
	--ask-btn-ease: 0.15s ease;
	--ask-btn-press: inset 0 2px 5px rgba(0, 0, 0, 0.25);
}

/* Shared box + motion for every button-shaped thing. */
.wp-block-button__link,
.ask-btn-primary,
.ask-btn-ghost,
.ask-ctablue a.ask-btn-white,
.ask-ctablue a.ask-btn-outline,
.ask-form .wpcf7-submit,
.ask-cta,
.ask-prodcol__more a {
	line-height: var(--ask-btn-lh);
	transition: background-color var(--ask-btn-ease), border-color var(--ask-btn-ease),
	            color var(--ask-btn-ease), box-shadow var(--ask-btn-ease);
}
@media (prefers-reduced-motion: reduce) {
	.wp-block-button__link,
	.ask-btn-primary,
	.ask-btn-ghost,
	.ask-ctablue a.ask-btn-white,
	.ask-ctablue a.ask-btn-outline,
	.ask-form .wpcf7-submit,
	.ask-cta,
	.ask-prodcol__more a { transition: none; }
}

/* Centered buttons row (logo bands, section footers). */
.ask-btns-center { justify-content: center; }

/* Trailing arrow on every primary CTA (design system: outcome verbs + arrow).
   Applied in CSS rather than per-button, so the arrow can never drift between
   pages the way it did when only home + the blog posts carried .ask-btn-arrow.

   Excluded on purpose:
   - all secondary variants. Note .ask-btn-outline (the secondary in the blue
     band) carries no is-style-* class in its core-block form, so it needs its
     own :not() or it would pick up an arrow.
   - is-style-secondary labels already end in a LITERAL arrow ("See all
     integrations →"), so targeting them would double it.
   - the header .ask-cta (compact, would crowd the nav) and the CF7 submit
     (a form action, not a link - and ::after does not render on <input>). */
.wp-block-button:not(.is-style-outline):not(.is-style-secondary):not(.is-style-ghost):not(.is-style-soft):not(.ask-btn-outline) > .wp-block-button__link::after,
.ask-ctablue a.ask-btn-white::after,
.ask-btn-primary::after,
.ask-prodcol__more a::after {
	content: " \2192";
}

/* --- Primary (blue) ---------------------------------------------------- */
/* Base / hover / active colours come from theme.json elements.button; only
   the pressed depth cue is added here. */
.wp-block-button:not(.is-style-outline):not(.is-style-secondary):not(.is-style-ghost):not(.is-style-soft) > .wp-block-button__link:active {
	box-shadow: var(--ask-btn-press);
}

/* --- Secondary (white, on light) --------------------------------------- */
.wp-block-button.is-style-secondary > .wp-block-button__link {
	background: #fff;
	color: var(--wp--preset--color--ink, #313A46);
	border: 1px solid #D6DBE2;
	padding: calc(var(--ask-btn-py) - 1px) calc(var(--ask-btn-px) - 1px);
}
.wp-block-button.is-style-secondary > .wp-block-button__link:hover {
	border-color: var(--wp--preset--color--blue, #2766F0);
	color: var(--wp--preset--color--blue, #2766F0);
	background: #fff;
}
.wp-block-button.is-style-secondary > .wp-block-button__link:active {
	border-color: var(--wp--preset--color--blue-deep, #1A4FCC);
	color: var(--wp--preset--color--blue-deep, #1A4FCC);
	background: var(--wp--preset--color--blue-tint, #EAF0FE);
	box-shadow: var(--ask-btn-press);
}

/* --- "Outline" variation (core style, inherited from Twenty Twenty Five) --- */
/* All 62 uses in content sit in a navy CTA band. TT5 ships this variation and
   its hover reads `color-mix(... var(--wp--preset--color--contrast) ...)` - a
   slug this theme's palette does not define, so the declaration was invalid and
   the button had NO hover at all. It also shipped 15px/35px padding, making it
   6px taller than the primary beside it.

   Default = the light white secondary (so it is safe wherever an editor drops
   it); dark sections override to the translucent-white treatment already used
   by .ask-btn-outline in the blue band. */
.wp-block-button.is-style-outline > .wp-block-button__link {
	background: #fff;
	color: var(--wp--preset--color--ink, #313A46);
	border: 1px solid #D6DBE2;
	padding: calc(var(--ask-btn-py) - 1px) calc(var(--ask-btn-px) - 1px);
}
.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	border-color: var(--wp--preset--color--blue, #2766F0);
	color: var(--wp--preset--color--blue, #2766F0);
	background: #fff;
}
.wp-block-button.is-style-outline > .wp-block-button__link:active {
	border-color: var(--wp--preset--color--blue-deep, #1A4FCC);
	color: var(--wp--preset--color--blue-deep, #1A4FCC);
	background: var(--wp--preset--color--blue-tint, #EAF0FE);
	box-shadow: var(--ask-btn-press);
}

.ask-navy .wp-block-button.is-style-outline > .wp-block-button__link,
.ask-ctablue .wp-block-button.is-style-outline > .wp-block-button__link,
.ask-section--dark .wp-block-button.is-style-outline > .wp-block-button__link {
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
	border-color: rgba(255, 255, 255, 0.55);
}
.ask-navy .wp-block-button.is-style-outline > .wp-block-button__link:hover,
.ask-ctablue .wp-block-button.is-style-outline > .wp-block-button__link:hover,
.ask-section--dark .wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background: rgba(255, 255, 255, 0.2);
	border-color: #fff;
	color: #fff;
}
.ask-navy .wp-block-button.is-style-outline > .wp-block-button__link:active,
.ask-ctablue .wp-block-button.is-style-outline > .wp-block-button__link:active,
.ask-section--dark .wp-block-button.is-style-outline > .wp-block-button__link:active {
	background: rgba(255, 255, 255, 0.28);
	border-color: #fff;
	color: #fff;
	box-shadow: var(--ask-btn-press);
}

/* --- Ghost (text link) -------------------------------------------------- */
.wp-block-button.is-style-ghost > .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--blue, #2766F0);
	padding-left: .4rem;
	padding-right: .4rem;
}
.wp-block-button.is-style-ghost > .wp-block-button__link:hover {
	background: transparent;
	color: var(--wp--preset--color--blue-deep, #1A4FCC);
	text-decoration: underline;
}
.wp-block-button.is-style-ghost > .wp-block-button__link:active {
	background: transparent;
	color: #163F9E;
}

/* --- Soft (tint) -------------------------------------------------------- */
.wp-block-button.is-style-soft > .wp-block-button__link {
	background: var(--wp--preset--color--blue-tint, #EAF0FE);
	color: var(--wp--preset--color--blue-deep, #1A4FCC);
}
.wp-block-button.is-style-soft > .wp-block-button__link:hover {
	background: #DCE6FC;
	color: var(--wp--preset--color--blue-deep, #1A4FCC);
}
.wp-block-button.is-style-soft > .wp-block-button__link:active {
	background: #CFDDFA;
	color: #163F9E;
	box-shadow: var(--ask-btn-press);
}

/* --- Disabled (shared) -------------------------------------------------- */
.wp-block-button__link[disabled],
.wp-block-button__link[aria-disabled="true"],
.ask-form .wpcf7-submit:disabled {
	background: var(--wp--preset--color--line, #EDEFF2) !important;
	color: #A8B0BE !important;
	border-color: var(--wp--preset--color--line, #EDEFF2) !important;
	box-shadow: none !important;
	cursor: not-allowed;
	pointer-events: none;
}

/* ==========================================================================
   Group surfaces - cards / panels
   ========================================================================== */
.wp-block-group.is-style-card {
	background: #fff;
	border: 1px solid var(--as-line, #E6EAF0);
	border-radius: var(--wp--custom--radius--card, 16px);
	padding: clamp(1.5rem, 3vw, 2.25rem);
	box-shadow: var(--wp--custom--shadow--md, 0 6px 16px -10px rgba(49,58,70,.3));
}

.wp-block-group.is-style-panel-dark {
	background: var(--wp--preset--color--ink, #313A46);
	color: #fff;
	border-radius: var(--wp--custom--radius--lg, 18px);
	padding: clamp(1.5rem, 3vw, 2.5rem);
}
.wp-block-group.is-style-panel-dark :where(h1,h2,h3,h4,p,li,cite) { color: #fff; }

.wp-block-group.is-style-panel-tint {
	background: var(--wp--preset--color--blue-tint, #EAF0FE);
	border: 1px solid #DCE8FB;
	border-radius: var(--wp--custom--radius--lg, 18px);
	padding: clamp(1.5rem, 3vw, 2.5rem);
}

/* ==========================================================================
   Check list
   ========================================================================== */
.wp-block-list.is-style-check {
	list-style: none;
	padding-left: 0;
	display: grid;
	gap: .7rem;
}
.wp-block-list.is-style-check li {
	position: relative;
	padding-left: 2rem;
	line-height: 1.45;
}
.wp-block-list.is-style-check li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .05em;
	width: 22px;
	height: 22px;
	border-radius: 999px;
	background-color: var(--wp--preset--color--blue-tint, #EAF0FE);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%232766F0' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4 4 10-10'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
}

/* Neutral variant for pain points / constraints: a quiet slate dash instead of
   a checkmark (checks are reserved for things delivered). */
.wp-block-list.is-style-dash {
	list-style: none;
	padding-left: 0;
	display: grid;
	gap: .7rem;
}
.wp-block-list.is-style-dash li {
	position: relative;
	padding-left: 1.7rem;
	line-height: 1.5;
}
.wp-block-list.is-style-dash li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .7em;
	width: 16px;
	height: 2px;
	border-radius: 2px;
	background: #C2CCDA;
}

/* ==========================================================================
   Bordered columns (feature cards in a row)
   ========================================================================== */
.wp-block-columns.is-style-bordered > .wp-block-column {
	background: #fff;
	border: 1px solid var(--ask-card-border);
	border-radius: var(--wp--custom--radius--lg, 18px);
	padding: clamp(1.25rem, 2.5vw, 1.75rem);
}

/* ==========================================================================
   Utilities - eyebrow label, pill, stat
   ========================================================================== */
.ask-eyebrow {
	font-family: var(--wp--preset--font-family--heading), sans-serif;
	font-weight: 600;
	font-size: .8125rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--blue, #2766F0);
}

.ask-pill {
	display: inline-block;
	border-radius: 999px;
	padding: .45rem .9rem;
	font-size: .85rem;
	font-weight: 600;
	background: var(--wp--preset--color--blue-tint, #EAF0FE);
	color: var(--wp--preset--color--blue-deep, #1A4FCC);
}

.ask-stat-number {
	font-family: var(--wp--preset--font-family--heading), sans-serif;
	font-weight: 700;
	letter-spacing: -.03em;
	line-height: 1;
	font-size: clamp(2.25rem, 4vw, 3rem);
	color: var(--wp--preset--color--blue, #2766F0);
}

/* ==========================================================================
   Header / footer / navigation
   ========================================================================== */
.wp-block-template-part .wp-block-site-title a { text-decoration: none; }

.wp-block-navigation { font-weight: 500; }
.wp-block-navigation a { color: var(--wp--preset--color--slate, #5E6A7A); }
.wp-block-navigation a:hover { color: var(--wp--preset--color--ink, #313A46); }

/* Polylang language switcher as compact pills */
.wp-block-polylang-language-switcher ul,
.lang_switcher_block ul,
ul.pll-switcher {
	list-style: none;
	display: flex;
	gap: 2px;
	margin: 0;
	padding: 3px;
	border: 1px solid #D6DBE2;
	border-radius: 999px;
}
.wp-block-polylang-language-switcher li { margin: 0; }
.wp-block-polylang-language-switcher a {
	display: inline-block;
	padding: 4px 10px;
	border-radius: 999px;
	font-size: .8rem;
	font-weight: 600;
	text-decoration: none;
	color: var(--wp--preset--color--slate, #5E6A7A);
}
.wp-block-polylang-language-switcher .current-lang a,
.wp-block-polylang-language-switcher a[aria-current="page"] {
	background: var(--wp--preset--color--ink, #313A46);
	color: #fff;
}

/* ==========================================================================
   Chat widget visual (hero / demos) - styled, static
   ========================================================================== */
.ask-widget {
	background: #fff;
	border: 1px solid var(--ask-card-border);
	border-radius: var(--wp--custom--radius--lg, 18px);
	box-shadow: 0 14px 30px -22px rgba(49, 58, 70, 0.14);
	overflow: hidden;
	max-width: 380px;
}
/* Animated demos are display-only: no typing, clicking or manual scrolling inside. */
.ask-chat {
	pointer-events: none;
	-webkit-user-select: none;
	user-select: none;
	/* Fixed height + flexible message body so the composer grows upward (into the
	   messages) and the widget height stays put. Height is a per-placement var:
	   hero previews are taller, smaller in-page demos keep the default. */
	display: flex;
	flex-direction: column;
	height: var(--ask-chat-h, 520px);
}
.ask-chat .ask-chat__body { flex: 1 1 auto; height: auto; min-height: 0; }
.ask-page-hero__aside .ask-chat, .ask-hero .ask-chat { --ask-chat-h: 650px; }
.ask-bubble-bot {
	background: #EFEFF1;
	color: var(--wp--preset--color--ink, #313A46);
	border-radius: 18px 18px 18px 5px;
	padding: 12px 15px;
	font-size: 14px;
	line-height: 1.45;
	max-width: 85%;
}
.ask-bubble-user {
	background: var(--wp--preset--color--blue, #2766F0);
	color: #fff;
	border-radius: 18px 18px 5px 18px;
	padding: 12px 15px;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.45;
	max-width: 85%;
	margin-left: auto;
}

/* ==========================================================================
   Site header bar
   ========================================================================== */
.ask-bar { width: 100%; max-width: 1180px; margin-inline: auto; }

.ask-header {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	/* Sticky bar on every page, jak w referencji v3 (blur + translucent below). */
	position: sticky;
	top: 0;
	z-index: 200;
	background: rgba(251, 252, 253, 0.85);
	backdrop-filter: saturate(140%) blur(14px);
	-webkit-backdrop-filter: saturate(140%) blur(14px);
	/* Opening the mobile menu fades the bar from translucent to solid white
	   (.ask-header.nav-open below); this animates it back on close too. */
	transition: background-color 0.25s ease;
	border-bottom: 1px solid var(--as-line, #E6EAF0);
	padding-top: 0.9rem;
	padding-bottom: 0.9rem;
	/* Bar background/border stay full-width; content aligns to the 1180px site
	   container (matches .ask-bar) via side padding that grows past ~1230px. */
	padding-inline: max(clamp(1.25rem, 4vw, 2.5rem), calc((100% - 1180px) / 2));
}
/* With the full-screen mobile menu open, the translucent bar would let the page
   show through — make it solid white so the bar and the panel read as one white
   surface. The base rule's transition animates the fade in both directions. */
.ask-header.nav-open { background-color: #fff; }
body.admin-bar .ask-header { top: var(--wp-admin--admin-bar--height, 32px); }
.ask-brand { flex: 1 1 0; gap: 5px; align-items: center; }
.ask-nav { flex: 0 0 auto; }
/* Mobile drill-down "‹ Back" control. Hidden everywhere by default (desktop never
   drills); the mobile block reveals it while a section is open. */
.ask-nav__back { display: none; width: 100%; align-items: center; gap: 6px; padding: 0.5rem 0.25rem 0.85rem; margin: 0; background: none; border: 0; font: inherit; font-weight: 700; font-size: 1.1rem; color: var(--wp--preset--color--ink, #313A46); cursor: pointer; }
.ask-nav__back-arr { font-size: 1.3em; line-height: 1; }
/* Mobile menu footer (Log in + CTA) — shown only inside the open full-screen panel. */
.ask-nav__foot { display: none; }
.ask-header > * { margin-block: 0; }
.ask-brand__lockup { display: inline-flex; align-items: center; text-decoration: none; }
.ask-brand__logo { height: 30px; width: auto; display: block; }

.ask-header-actions { flex: 1 1 0; display: flex; align-items: center; justify-content: flex-end; gap: 0.9rem; }
.ask-login { font-size: 0.95rem; font-weight: 600; color: var(--wp--preset--color--ink, #313A46); text-decoration: none; white-space: nowrap; }
.ask-login:hover { color: var(--wp--preset--color--blue, #2766F0); }
.ask-nav__list { display: flex; gap: 1.4rem; list-style: none; margin: 0; padding: 0; }
.ask-nav__list li { margin: 0; }
.ask-nav__list a { text-decoration: none; font-weight: 500; font-size: 0.95rem; color: var(--wp--preset--color--slate, #5E6A7A); }
.ask-nav__list a:hover { color: var(--wp--preset--color--ink, #313A46); }
/* Current page (and its section parent on subpages) — wp_nav_menu context classes. */
.ask-nav__list li.current-menu-item > a,
.ask-nav__list li.current-menu-ancestor > a,
.ask-nav__list li.current-page-ancestor > a,
.ask-nav__list li.current_page_parent > a,
.ask-nav__list li.current_page_ancestor > a {
	color: var(--wp--preset--color--blue, #2766F0);
	font-weight: 600;
}

.ask-cta {
	display: inline-block;
	background: var(--wp--preset--color--blue, #2766F0);
	color: #fff;
	padding: 0.6rem 1.1rem;
	border-radius: var(--ask-btn-radius);
	font-weight: 600;
	font-size: 0.95rem;
	text-decoration: none;
	white-space: nowrap;
}
.ask-cta:hover { background: var(--wp--preset--color--blue-deep, #1A4FCC); color: #fff; }
.ask-cta:active { background: #163F9E; color: #fff; box-shadow: var(--ask-btn-press); }

/* Language switcher (Polylang) - compact pills */
.ask-lang { list-style: none; display: inline-flex; gap: 2px; margin: 0; padding: 3px; border: 1px solid #D6DBE2; border-radius: 999px; }
.ask-lang li { margin: 0; list-style: none; }
.ask-lang a { display: inline-block; padding: 4px 9px; border-radius: 999px; font-size: 0.78rem; font-weight: 600; text-transform: uppercase; text-decoration: none; color: var(--wp--preset--color--slate, #5E6A7A); }
.ask-lang .current-lang > a,
.ask-lang .current-lang a { background: var(--wp--preset--color--ink, #313A46); color: #fff; }

/* ==========================================================================
   Site footer
   ========================================================================== */
.ask-footer {
	/* Navy jak sekcje ciemne v3 (nie ink) + delikatna poswiata brandu. */
	background: radial-gradient(720px 420px at 85% -10%, rgba(39, 102, 240, 0.14), rgba(39, 102, 240, 0) 60%), var(--as-dark, #1B2230);
	color: #fff;
	margin-top: 5rem;
	padding: 4rem 1.25rem 2rem;
}
.ask-footer a { color: #C9D2E0; text-decoration: none; }
.ask-footer a:hover { color: #fff; }
.ask-footer__inner { display: flex; flex-wrap: wrap; gap: 2.5rem 3rem; justify-content: space-between; align-items: flex-start; }
.ask-footer__brand { max-width: 320px; }
.ask-footer a.ask-footer__logo { display: inline-flex; align-items: center; }
.ask-footer a.ask-footer__logo img { height: 34px; width: auto; display: block; }
.ask-footer__tagline { color: #8A93A8; margin: 0.75rem 0 0; line-height: 1.5; }
.ask-footer__cols { display: flex; gap: 2rem 2.5rem; flex-wrap: wrap; }
.ask-footer__col { min-width: 8rem; }
.ask-footer__col-title { font-family: var(--wp--preset--font-family--heading); font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; color: #8A93A8; margin: 0 0 0.8rem; }
.ask-footer__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }

/* Proof strip: supporting metadata, not headline numbers. A single rule above
   and below, figures inline with their labels — no panel, no cell dividers.
   Wraps to as many lines as it needs, so it takes no breakpoints of its own. */
.ask-footer__stats { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 0.6rem 2.75rem; margin-top: 3rem; padding: 1rem 0; border-top: 1px solid rgba(255, 255, 255, 0.12); border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
.ask-footer__stat { display: inline-flex; align-items: baseline; gap: 0.45rem; }
.ask-footer__stat-num { font-family: var(--wp--preset--font-family--heading); font-weight: 700; font-size: 1.05rem; letter-spacing: -0.02em; line-height: 1.3; color: #fff; font-variant-numeric: tabular-nums; }
.ask-footer__stat-num.is-accent { color: var(--wp--preset--color--blue, #2766F0); }
.ask-footer__stat-label { font-size: 0.85rem; line-height: 1.4; color: #8A93A8; }
/* Single glyph, so it needs its own size — the 5-star bar read as texture at
   0.7rem, one star at that size just looks shrunken next to the figure. */
.ask-footer__stat .ask-stars { margin-right: 0.3rem; color: var(--wp--preset--color--warning, #F5A623); font-size: 0.95rem; line-height: 1; }

/* No top rule here: the proof strip's bottom border already closes the columns,
   and a second hairline 40px below it reads as a stray line. */
.ask-footer__bottom { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; align-items: center; justify-content: space-between; margin-top: 1.5rem; }
.ask-footer__legal { color: #8A93A8; font-size: 0.85rem; }
.ask-footer__legal-links { display: inline-flex; flex-wrap: wrap; gap: 0.35rem 1.25rem; }
.ask-footer__legal-links a,
.ask-footer__cookie-btn { color: #AEB7C5; font-size: 0.85rem; text-decoration: none; }
.ask-footer__legal-links a:hover,
.ask-footer__cookie-btn:hover { color: #fff; text-decoration: underline; }
.ask-footer__cookie-btn { padding: 0; border: 0; background: none; font-family: inherit; line-height: inherit; cursor: pointer; }
/* Social icons (LinkedIn, G2): monochrome brand glyphs inheriting the footer
   link color; hover lifts to white like the text links. */
.ask-footer__social { display: inline-flex; align-items: center; gap: 1rem; }
.ask-footer__social a { display: inline-flex; color: #AEB7C5; transition: color 0.15s ease; }
.ask-footer__social a:hover { color: #fff; }
.ask-footer__social a:focus-visible { outline: 2px solid var(--wp--preset--color--blue, #2766F0); outline-offset: 2px; border-radius: 4px; }
.ask-footer__social svg { width: 20px; height: 20px; }

/* ==========================================================================
   Responsive
   ========================================================================== */
.ask-burger { display: none; flex-direction: column; justify-content: center; gap: 4px; width: 40px; height: 40px; padding: 8px; background: #fff; border: 1px solid #D6DBE2; border-radius: 10px; cursor: pointer; }
.ask-burger span { display: block; height: 2px; border-radius: 2px; background: var(--wp--preset--color--ink, #313A46); transition: transform 0.2s ease, opacity 0.2s ease; }
.ask-header.nav-open .ask-burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.ask-header.nav-open .ask-burger span:nth-child(2) { opacity: 0; }
.ask-header.nav-open .ask-burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* --- Primary nav dropdown (e.g. the Product submenu) ---
   wp_nav_menu (depth 2) emits li.menu-item-has-children > ul.sub-menu.
   Desktop: popover on hover/focus-within (keyboard-friendly). Mobile
   (<=980px, burger panel): the submenu is always expanded, just indented. */
.ask-nav__list > li { position: relative; }
.ask-nav__list li.menu-item-has-children > a { display: inline-flex; align-items: center; gap: 6px; }
/* Caret: a chevron drawn via an SVG mask so the shape sits centred inside its
   own box (unlike a rotated border-square, whose visible corner is off-centre
   and orbits). Vertically centred with the label by the flex align-items:center
   (no margin nudge); hover rotates 180° about the box centre, so it spins in
   place with no drift or jump. */
.ask-nav__list li.menu-item-has-children > a::after {
	content: "";
	width: 12px;
	height: 8px;
	margin-top: -1px; /* optical: cap-height labels with no descenders read high */
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2012%208'%3E%3Cpath%20d='M2%202l4%204%204-4'%20fill='none'%20stroke='white'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2012%208'%3E%3Cpath%20d='M2%202l4%204%204-4'%20fill='none'%20stroke='white'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
	transform-origin: 50% 50%;
	transition: transform 0.15s ease;
}
.ask-nav__list li.menu-item-has-children:hover > a::after,
.ask-nav__list li.menu-item-has-children:focus-within > a::after { transform: rotate(180deg); }
.ask-nav__list .sub-menu { position: absolute; top: calc(100% + 8px); left: -0.75rem; min-width: 14rem; margin: 0; padding: 0.4rem; list-style: none; background: #fff; border: 1px solid var(--as-line, #E6EAF0); border-radius: 12px; box-shadow: 0 18px 30px -22px rgba(49, 58, 70, 0.4); opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s; z-index: 60; }
/* Invisible bridge so the pointer can travel from the link to the popover. */
.ask-nav__list .sub-menu::before { content: ""; position: absolute; top: -10px; left: 0; right: 0; height: 10px; }
.ask-nav__list li:hover > .sub-menu,
.ask-nav__list li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.ask-nav__list .sub-menu li { margin: 0; }
.ask-nav__list .sub-menu a { display: block; padding: 0.55rem 0.75rem; border-radius: 8px; white-space: nowrap; }
.ask-nav__list .sub-menu a:hover { background: var(--wp--preset--color--blue-tint, #EAF0FE); color: var(--wp--preset--color--blue-deep, #1A4FCC); }

/* --- Product mega-menu (two columns: products left, industries right) ---
   Emitted by askspot_render_primary_nav() as .ask-nav__item--mega > .ask-mega.
   Reuses the .menu-item-has-children caret + hover/focus-within reveal. */
/* Mega panels are centered on the header: the trigger li is made static so the
   absolute panel resolves to the sticky .ask-header (a full-width box) rather
   than the off-center nav, and left:50% + translateX(-50%) centers it on the
   viewport. */
.ask-nav__list > li.ask-nav__item--mega { position: static; }
.ask-mega {
	position: absolute;
	top: calc(100% + 8px);
	left: 50%;
	width: max-content;
	max-width: calc(100vw - 2rem);
	margin: 0;
	padding: 1.25rem;
	background: #fff;
	border: 1px solid var(--as-line, #E6EAF0);
	border-radius: 16px;
	box-shadow: 0 24px 48px -24px rgba(49, 58, 70, 0.45);
	opacity: 0;
	visibility: hidden;
	transform: translate(-50%, 6px);
	transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
	z-index: 60;
}
/* Hover bridge scoped to the trigger (NOT the full-width panel) so it never
   overlays the neighbouring menu items. It sits directly under the label and
   reaches down to the detached panel; being part of the <a>, hovering it keeps
   the item :hover and the panel open. */
.ask-nav__list li.menu-item-has-children > a { position: relative; }
.ask-nav__list li.menu-item-has-children > a::before { content: ""; position: absolute; top: 100%; left: -14px; right: -14px; height: 38px; }
.ask-nav__item--mega:hover > .ask-mega,
.ask-nav__item--mega:focus-within > .ask-mega { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
/* Product mega: three columns — Agents, Features (reserved), Platform. */
.ask-mega--product { width: 58rem; }
.ask-mega--product .ask-mega__inner { display: grid; grid-template-columns: 1.2fr 0.8fr 1.3fr; gap: 2rem; }
.ask-mega--product .ask-mega__col + .ask-mega__col { border-left: 1px solid var(--as-line, #E6EAF0); padding-left: 2rem; }
/* Industries mega: three columns of icon + name. */
.ask-mega--industries { width: 42rem; }
.ask-mega__grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px 1rem; }
.ask-mega__grid3 li { margin: 0; }
.ask-mega__title { margin: 0 0 0.75rem; font-family: var(--wp--preset--font-family--heading); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--wp--preset--color--slate, #5E6A7A); }
.ask-mega__soon { margin-left: 4px; font-size: 0.62rem; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--wp--preset--color--slate, #5E6A7A); background: var(--wp--preset--color--surface, #EEF2F7); border: 1px solid var(--as-line, #E6EAF0); border-radius: 4px; padding: 1px 6px; vertical-align: middle; }
.ask-mega__note { margin: 0; font-size: 0.8rem; line-height: 1.45; color: var(--wp--preset--color--slate, #5E6A7A); }
.ask-mega__list { list-style: none; margin: 0; padding: 0; }
.ask-mega__list li { margin: 0; }
.ask-mega__list a { display: block; text-decoration: none; border-radius: 8px; }
.ask-mega__list--2col { columns: 2; column-gap: 1.25rem; }
.ask-mega__list--2col li { break-inside: avoid; }
/* Agent / platform items: icon as one inline block, title + description (desc on
   its own line) as the second. The `.ask-mega__list a` reset below is more
   specific than a bare `.ask-mega__prod`, so this selector must out-specify it. */
.ask-mega__list a.ask-mega__prod { display: flex; gap: 11px; align-items: flex-start; padding: 0.6rem 0.7rem; }
.ask-mega__ic { flex: 0 0 auto; display: inline-flex; margin-top: 1px; color: var(--wp--preset--color--blue, #2766F0); }
.ask-mega__ic svg { display: block; width: 22px; height: 22px; }
.ask-mega__prod-text { min-width: 0; }
.ask-mega__prod-name { display: block; font-weight: 600; font-size: 0.95rem; color: var(--wp--preset--color--ink, #313A46); }
.ask-mega__prod-desc { display: block; margin-top: 2px; font-size: 0.82rem; line-height: 1.35; color: var(--wp--preset--color--slate, #5E6A7A); }
.ask-mega__prod:hover { background: var(--wp--preset--color--blue-tint, #EAF0FE); }
.ask-mega__prod:hover .ask-mega__prod-name { color: var(--wp--preset--color--blue-deep, #1A4FCC); }
/* Industry links: each industry's own icon + name, three columns, roomy rows */
.ask-mega__grid3 a { display: flex; align-items: center; gap: 10px; padding: 0.55rem 0.7rem; border-radius: 8px; font-size: 0.9rem; white-space: nowrap; color: var(--wp--preset--color--slate, #5E6A7A); }
.ask-mega__grid3 a:hover { background: var(--wp--preset--color--blue-tint, #EAF0FE); color: var(--wp--preset--color--blue-deep, #1A4FCC); }
.ask-mega__ic--ind { flex: 0 0 auto; display: inline-flex; color: var(--wp--preset--color--blue, #2766F0); }
.ask-mega__ic--ind svg { display: block; width: 19px; height: 19px; stroke: currentColor; }
/* Current page inside a mega panel ("you are here"): a persistent version of the
   hover state, so the open submenu shows which of its items you're on. */
.ask-mega__prod.is-current { background: var(--wp--preset--color--blue-tint, #EAF0FE); }
.ask-mega__prod.is-current .ask-mega__prod-name,
.ask-mega__prod.is-current .ask-mega__ic { color: var(--wp--preset--color--blue-deep, #1A4FCC); }
.ask-mega__grid3 a.is-current { background: var(--wp--preset--color--blue-tint, #EAF0FE); color: var(--wp--preset--color--blue-deep, #1A4FCC); font-weight: 600; }
.ask-mega__grid3 a.is-current .ask-mega__ic--ind { color: var(--wp--preset--color--blue-deep, #1A4FCC); }
.ask-mega__all.is-current { color: var(--wp--preset--color--blue-deep, #1A4FCC); }
/* Mega footer link ("Platform overview" / "All industries"): the divider spans
   the full panel, but the hit area hugs the text like a button — the row is the
   .ask-mega__foot container, the compact anchor is right-aligned inside it. */
.ask-mega__foot { display: flex; justify-content: flex-end; margin-top: 0.85rem; padding-top: 0.85rem; border-top: 1px solid var(--as-line, #E6EAF0); }
.ask-mega__all { display: inline-flex; align-items: center; gap: 6px; padding: 0.4rem 0.7rem; border-radius: 8px; font-weight: 600; font-size: 0.9rem; color: var(--wp--preset--color--blue, #2766F0); text-decoration: none; }
.ask-mega__all:hover { color: var(--wp--preset--color--blue-deep, #1A4FCC); background: var(--wp--preset--color--blue-tint, #EAF0FE); }
.ask-mega__all.is-current { background: var(--wp--preset--color--blue-tint, #EAF0FE); }
.ask-mega__all-arr { transition: transform 0.15s ease; }
.ask-mega__all:hover .ask-mega__all-arr { transform: translateX(3px); }

@media (max-width: 1120px) {
	.ask-nav__list { gap: 1rem; }
	.ask-header-actions { gap: 0.8rem; }
}
@media (max-width: 980px) {
	/* Seven nav items no longer fit inline: burger + dropdown from here down. */
	.ask-burger { display: flex; }
	.ask-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; background: #fff; border-bottom: 1px solid var(--as-line, #E6EAF0); box-shadow: 0 18px 30px -22px rgba(49, 58, 70, 0.4); padding: 0.75rem 1.25rem 1rem; }
	/* Full-screen panel: fill the viewport below the sticky header as a flex column
	   — the list scrolls, the footer (Log in + CTA) stays pinned at the bottom.
	   border-box so the header-height offset lands the panel flush to the screen. */
	/* Height uses dvh (the DYNAMIC viewport — the currently-visible area) so the
	   panel fills the whole screen and grows to a true 100% when the mobile URL bar
	   retracts on scroll. dvh already excludes whatever chrome is showing at that
	   moment, so the pinned footer stays visible instead of slipping under it; vh is
	   the fallback for browsers without dvh. env(safe-area-inset-bottom) clears the
	   home indicator on notched phones. */
	.ask-header.nav-open .ask-nav { display: flex; flex-direction: column; box-sizing: border-box; height: calc(100vh - 4.5rem); height: calc(100dvh - 4.5rem); overflow: hidden; }
	.ask-nav__list { flex: 1 1 auto; flex-direction: column; gap: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
	/* Pinned action footer. */
	.ask-nav__foot { display: flex; flex: 0 0 auto; flex-direction: column; gap: 0.6rem; padding: 1rem 0 calc(0.6rem + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--as-line, #E6EAF0); }
	/* Full-width segmented language toggle at the bottom of the menu. */
	.ask-nav__foot .ask-lang { align-self: stretch; display: flex; width: 100%; gap: 4px; margin: 0.35rem 0 0; padding: 4px; border: 1px solid var(--as-line, #E6EAF0); border-radius: 12px; }
	.ask-nav__foot .ask-lang li { flex: 1 1 0; }
	.ask-nav__foot .ask-lang a { display: block; width: 100%; padding: 0.6rem; border-radius: 9px; font-size: 0.9rem; text-align: center; color: var(--wp--preset--color--slate, #5E6A7A); }
	.ask-nav__foot .ask-lang a:hover { background: var(--wp--preset--color--surface, #EEF2F7); color: var(--wp--preset--color--ink, #313A46); }
	.ask-nav__foot .ask-lang .current-lang a,
	.ask-nav__foot .ask-lang .current-lang a:hover { background: var(--wp--preset--color--ink, #313A46); color: #fff; }
	.ask-nav__foot .ask-cta { box-sizing: border-box; width: 100%; padding: 0.85rem 1rem; font-size: 1rem; text-align: center; }
	.ask-nav__foot-login { box-sizing: border-box; display: block; width: 100%; padding: 0.85rem 1rem; border-radius: 12px; background: var(--wp--preset--color--surface, #EEF2F7); color: var(--wp--preset--color--ink, #313A46); font-weight: 600; font-size: 1rem; text-align: center; text-decoration: none; }
	.ask-nav__foot-login:hover { background: var(--wp--preset--color--slate-100, #EDEFF2); }
	.ask-nav__list a { display: block; padding: 0.7rem 0.25rem; font-size: 1.05rem; color: var(--wp--preset--color--ink, #313A46); border-bottom: 1px solid var(--ask-line, #EDEFF2); }
	.ask-nav__list li:last-child a { border-bottom: 0; }
	/* ---- Two-level drill-down (getzowie-style) ------------------------------
	   The panel is a root list of sections; tapping one (Platform / Industries)
	   swaps the whole panel for that section's submenu with a "‹ Back" control.
	   askspot.js sets .is-drilled on .ask-nav and .is-active on the chosen <li>.
	   Desktop is untouched — it still opens the mega-menus on hover. ---------- */

	/* Root parents get a right-chevron affordance (reuse the caret, rotated to
	   point right — it means "go deeper", not "expand in place"). */
	.ask-nav__list li.menu-item-has-children > a { display: flex; align-items: center; justify-content: space-between; }
	.ask-nav__list li.menu-item-has-children > a::after,
	.ask-nav__list li.menu-item-has-children:hover > a::after,
	.ask-nav__list li.menu-item-has-children:focus-within > a::after { display: block; margin-top: 0; transform: rotate(-90deg); }
	.ask-nav__list li.menu-item-has-children > a::before { display: none; }

	/* Both submenu flavours flatten to a plain, full-width block and stay hidden
	   until their branch is the active one. */
	.ask-mega, .ask-mega--product, .ask-mega--industries,
	.ask-nav__list .sub-menu { position: static; display: none; width: auto; max-width: none; margin: 0; padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; opacity: 1; visibility: visible; transform: none; }
	.ask-nav__list .sub-menu::before { display: none; }
	/* A tap focuses the link, so the item is :focus-within — the desktop hover/focus
	   rule would re-apply the mega's translate(-50%) and shove the submenu off-screen
	   to the left. Cancel it: in drill mode the submenu is a plain static block. */
	.ask-nav__item--mega:hover > .ask-mega,
	.ask-nav__item--mega:focus-within > .ask-mega { transform: none; }
	.ask-mega--product .ask-mega__inner { display: block; grid-template-columns: none; background: none; padding: 0; }
	.ask-mega--product .ask-mega__col + .ask-mega__col { border-left: 0; padding-left: 0; }
	.ask-mega__grid3 { grid-template-columns: 1fr; }

	/* Drilled state: Back appears, every root row hides, and only the active
	   branch's submenu shows (its own label is hidden — Back stands in for it). */
	.ask-nav.is-drilled .ask-nav__back { display: flex; }
	.ask-nav.is-drilled .ask-nav__list > li { display: none; }
	.ask-nav.is-drilled .ask-nav__list > li.is-active { display: block; animation: ask-drill-in 0.2s ease; }
	.ask-nav.is-drilled .ask-nav__list > li.is-active > a { display: none; }
	.ask-nav.is-drilled .ask-nav__list > li.is-active > .ask-mega,
	.ask-nav.is-drilled .ask-nav__list > li.is-active > .sub-menu { display: block; }

	/* Rows inside a submenu: full-width, icon + name centred, plain separators. */
	.ask-nav__list .ask-mega__grid3 a { display: flex; align-items: center; gap: 12px; }
	.ask-nav__list .sub-menu a { font-size: 1rem; white-space: normal; }
	.ask-mega__title { margin: 1.1rem 0 0.25rem; }
	.ask-mega__prod, .ask-mega__grid3 a { padding: 0.6rem 0.25rem; white-space: normal; border-bottom: 1px solid var(--ask-line, #EDEFF2); border-radius: 0; }
	.ask-mega__prod-desc { margin-top: 1px; }
	.ask-mega__note { padding: 0.25rem 0.25rem 0.75rem; }
	/* The overview link ("Platform overview" / "All industries") is just the last
	   row of the submenu here — full-width, no desktop button fill. */
	.ask-mega__foot { display: block; margin: 0; padding-top: 0; border-top: 0; }
	.ask-mega__all { border-radius: 0; padding: 0.7rem 0.25rem; }
	.ask-mega__all:hover, .ask-mega__all.is-current { background: none; }
	@keyframes ask-drill-in { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
}
@media (max-width: 560px) {
	/* Narrow phones: industries stack to a single column so labels don't cramp. */
	.ask-mega__list--2col { columns: 1; }
}
@media (max-width: 700px) {
	/* Log in + language switcher move into the burger menu here, so the header bar
	   (brand + CTA + burger) stops overflowing / clipping the burger on phones. */
	.ask-header-actions .ask-login,
	.ask-header-actions .ask-lang { display: none; }
}
@media (max-width: 600px) {
	.ask-header { gap: 0.6rem; padding-inline: 1rem; }
	.ask-header-actions { gap: 0.5rem; }
	.ask-cta { padding: 0.55rem 0.8rem; font-size: 0.9rem; }
	.ask-lang a { padding: 4px 7px; }
}

/* ==========================================================================
   Sections - shared
   ========================================================================== */
.ask-section--dark { color: #fff; }
.ask-section--dark :where(h1, h2, h3, h4, h5, p, li, cite, figcaption) { color: #fff; }
.ask-section--dark .ask-eyebrow { color: #8FB0F6; }
.ask-section--dark a:not(.wp-element-button):not(.wp-block-button__link) { color: #8FB0F6; }

.ask-lede { color: var(--wp--preset--color--slate, #5E6A7A); font-size: 1.125rem; line-height: 1.6; }
.ask-section--dark .ask-lede { color: #AEB7C5; }

/* ==========================================================================
   Hero
   ========================================================================== */
.ask-hero__kpis { display: flex; gap: 2.5rem; flex-wrap: wrap; }
.ask-kpi__num { font-family: var(--wp--preset--font-family--heading); font-weight: 700; letter-spacing: -0.03em; line-height: 1; font-size: clamp(1.75rem, 3vw, 2.25rem); color: var(--wp--preset--color--blue, #2766F0); margin: 0; }
.ask-kpi__label { color: var(--wp--preset--color--slate, #5E6A7A); font-size: 0.95rem; margin: 0.25rem 0 0; max-width: 18ch; }

/* Chat widget visual */
.ask-widget__head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--wp--preset--color--line, #EDEFF2); font-family: var(--wp--preset--font-family--heading); font-weight: 600; color: var(--wp--preset--color--ink, #313A46); }
.ask-widget__body { padding: 18px; display: flex; flex-direction: column; gap: 12px; }
/* Per-scenario context chip (e.g. the industry a demo represents), swapped by
   the chat JS as the playlist advances. */
.ask-chat__ctx { padding: 10px 18px 4px; display: flex; flex-direction: column; align-items: center; gap: 5px; text-align: center; }
.ask-chat__src { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; font-family: var(--wp--preset--font-family--body, "Inter"), sans-serif; font-size: 11px; line-height: 1.2; color: var(--wp--preset--color--slate, #5E6A7A); }
.ask-chat__src svg { flex: none; opacity: 0.7; }
.ask-chat__src-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ask-chat__src.is-in { animation: askCtxIn 0.32s ease; }
.ask-chat__ctxpill { display: inline-flex; align-items: center; gap: 6px; background: var(--wp--preset--color--blue-tint, #EAF0FE); color: var(--wp--preset--color--blue, #2766F0); font-family: var(--wp--preset--font-family--heading); font-weight: 600; font-size: 11px; line-height: 1; letter-spacing: 0.01em; padding: 5px 11px; border-radius: 999px; }
.ask-chat__ctxpill::before { content: ''; width: 6px; height: 6px; border-radius: 999px; background: currentColor; flex: none; }
.ask-chat__ctxpill.is-in { animation: askCtxIn 0.32s ease; }
@keyframes askCtxIn { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }
.ask-widget__input { display: flex; align-items: flex-end; gap: 10px; margin: 4px 16px 14px; background: #F0F0F2; border-radius: 20px; padding: 11px 16px; color: var(--wp--preset--color--gray, #919191); font-size: 14px; }
.ask-widget__powered { text-align: center; padding: 0 12px 14px; font-size: 12.5px; color: var(--wp--preset--color--gray, #919191); }
.ask-widget__mini { border: 1px solid #EAEDF1; border-radius: 14px; padding: 11px; box-shadow: var(--wp--custom--shadow--sm); background: #fff; max-width: 210px; }
.ask-widget__mini b { font-family: var(--wp--preset--font-family--heading); }

/* ==========================================================================
   Client logos
   ========================================================================== */
.ask-logos { display: flex; flex-wrap: wrap; gap: 0.9rem 2.2rem; align-items: center; justify-content: center; }
.ask-logos > * { margin: 0; font-family: var(--wp--preset--font-family--heading); font-weight: 700; font-size: 1.05rem; color: #A6AEBC; letter-spacing: -0.01em; }

/* ==========================================================================
   Stats
   ========================================================================== */
.ask-stat__num { font-family: var(--wp--preset--font-family--heading); font-weight: 700; letter-spacing: -0.03em; line-height: 1; font-size: clamp(2.25rem, 4.5vw, 3.25rem); margin: 0; color: var(--wp--preset--color--blue, #2766F0); }
.ask-section--dark .ask-stat__num { color: #fff; }
.ask-stat__label { color: var(--wp--preset--color--slate, #5E6A7A); margin: 0.4rem 0 0; line-height: 1.4; }
/* "up to" qualifier / unit word around a result number: small, baseline-aligned,
   bold + heading font to read as part of the number unit. */
.ask-stat__pre, .ask-stat__unit { display: inline-block; vertical-align: baseline; font-family: var(--wp--preset--font-family--heading); font-weight: 700; font-size: 0.9rem; letter-spacing: 0; line-height: 1; opacity: 0.72; }
.ask-stat__pre { margin-right: 0.42em; }
.ask-stat__unit { margin-left: 0.38em; }
.ask-section--dark .ask-stat__label { color: #AEB7C5; }

/* ==========================================================================
   Capability / feature / pillar cards
   ========================================================================== */
.ask-card-grid { gap: 1.25rem; }
.ask-card h3 { margin-top: 0; }
.ask-metric { font-weight: 700; color: var(--wp--preset--color--blue, #2766F0); margin: 0.75rem 0 0; }
.ask-icon { width: 46px; height: 46px; border-radius: 12px; background: var(--wp--preset--color--blue-tint, #EAF0FE); display: flex; align-items: center; justify-content: center; margin-bottom: 1rem; }
.ask-icon svg { width: 24px; height: 24px; }

/* ==========================================================================
   Steps
   ========================================================================== */
.ask-step__num { width: 38px; height: 38px; border-radius: 11px; background: var(--wp--preset--color--blue, #2766F0); color: #fff; font-family: var(--wp--preset--font-family--heading); font-weight: 700; display: flex; align-items: center; justify-content: center; margin-bottom: 1rem; }

/* ==========================================================================
   Integration chips
   ========================================================================== */
.ask-int { display: flex; align-items: center; gap: 0.6rem; background: #fff; border: 1px solid var(--ask-card-border); border-radius: var(--wp--custom--radius--md, 12px); padding: 0.9rem 1.1rem; font-weight: 600; color: var(--wp--preset--color--ink, #313A46); text-decoration: none; }
.ask-int:hover { border-color: var(--wp--preset--color--blue, #2766F0); color: var(--wp--preset--color--blue, #2766F0); }

/* ==========================================================================
   Testimonials
   ========================================================================== */
/* Karta cytatu. Selektor podwojony (.ask-quote.wp-block-quote), aby chrome karty
   wygrywal z editorialowym stylem .ask-content :where(.wp-block-quote) oraz aby
   reset dla zagniezdzonego blockquote (wrapper) nie zerowal karty samej w sobie. */
.ask-quote,
.ask-quote.wp-block-quote { background: #fff; border: 1px solid var(--ask-card-border); border-radius: var(--wp--custom--radius--lg, 18px); padding: 1.5rem 1.6rem; margin-inline: 0; box-shadow: var(--wp--custom--shadow--md); font-style: normal; color: var(--wp--preset--color--slate, #5E6A7A); }
.ask-quote blockquote { margin: 0; border: 0; padding: 0; }
.ask-quote cite { display: block; margin-top: 1rem; font-style: normal; font-weight: 600; font-size: 0.9rem; color: var(--wp--preset--color--ink, #313A46); }

/* ==========================================================================
   FAQ accordion (core details blocks; details[name] keeps one open at a time)
   ========================================================================== */
.ask-faq .wp-block-details {
	margin: 0;
	padding: 0;
	border-bottom: 1px solid var(--as-line, #E6EAF0);
}
.ask-faq .wp-block-details:first-child { border-top: 1px solid var(--as-line, #E6EAF0); }
.ask-faq .wp-block-details summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.25rem;
	list-style: none;
	padding: 1.35rem 0.125rem;
	cursor: pointer;
	font-family: var(--wp--preset--font-family--heading, 'Plus Jakarta Sans', sans-serif);
	font-weight: 600;
	font-size: 1.0625rem;
	line-height: 1.4;
	color: var(--wp--preset--color--ink, #313A46);
}
.ask-faq .wp-block-details summary::-webkit-details-marker { display: none; }
/* Chromium matchuje :focus-visible po KLIKNIECIU w <summary>, wiec ramka wokol
   calego wiersza pojawiala sie przy zwyklym kliku. Wskaznik fokusu zyje na
   kropce rozwijania: czytelny dla klawiatury, dyskretny przy myszy. */
.ask-faq .wp-block-details summary:focus-visible { outline: none; }
.ask-faq .wp-block-details summary:focus-visible::after {
	outline: 2px solid var(--wp--preset--color--blue, #2766F0);
	outline-offset: 2px;
}
/* Disclosure dot: launcher-style plus in a tint circle; fills brand and
   rotates into a cross when the row is open. */
.ask-faq .wp-block-details summary::after {
	content: "";
	flex: 0 0 auto;
	width: 30px;
	height: 30px;
	border-radius: 999px;
	color: var(--wp--preset--color--blue, #2766F0);
	background:
		linear-gradient(currentColor, currentColor) center / 12px 2px no-repeat,
		linear-gradient(currentColor, currentColor) center / 2px 12px no-repeat,
		var(--wp--preset--color--blue-tint, #EAF0FE);
	transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}
.ask-faq .wp-block-details summary:hover::after,
.ask-faq .wp-block-details[open] summary::after {
	background-color: var(--wp--preset--color--blue, #2766F0);
	color: #fff;
}
.ask-faq .wp-block-details[open] summary::after { transform: rotate(45deg); }
.ask-faq .wp-block-details > :where(p, ul, ol) {
	max-width: 44rem;
	margin: -0.35rem 0 0;
	padding: 0 3.5rem 1.35rem 0.125rem;
	color: var(--wp--preset--color--slate, #5E6A7A);
	line-height: 1.65;
}
.ask-faq .wp-block-details > :where(p, ul, ol) + :where(p, ul, ol) {
	margin-top: 0.75rem;
}
/* Smooth height reveal where the platform supports it; instant elsewhere. */
@supports (interpolate-size: allow-keywords) {
	@media (prefers-reduced-motion: no-preference) {
		.ask-faq { interpolate-size: allow-keywords; }
		.ask-faq .wp-block-details::details-content {
			height: 0;
			overflow: clip;
			transition: height 0.28s ease, content-visibility 0.28s allow-discrete;
		}
		.ask-faq .wp-block-details[open]::details-content { height: auto; }
	}
}
@media (max-width: 600px) {
	.ask-faq .wp-block-details summary { gap: 1rem; padding-block: 1.15rem; font-size: 1rem; }
	.ask-faq .wp-block-details summary::after { width: 28px; height: 28px; }
	.ask-faq .wp-block-details > :where(p, ul, ol) { padding-right: 0; }
}

/* ==========================================================================
   CTA band
   ========================================================================== */
.ask-cta-band { border-radius: var(--wp--custom--radius--lg, 18px); }

/* ==========================================================================
   Section title block helper
   ========================================================================== */
.ask-center { text-align: center; }
.ask-center .ask-lede { margin-inline: auto; max-width: 46rem; }

/* ==========================================================================
   Inner page hero + breadcrumbs
   ========================================================================== */
.ask-page-hero {
	position: relative;
	overflow: hidden;
	background: var(--wp--preset--color--paper, #FBFCFD);
	padding: 3.5rem 1.25rem 3rem;
}
/* Hero atmosphere (v3.1 reference): faint dot grid + soft neutral light,
   anchored top-right so it sits behind the aside, away from the copy. */
.ask-page-hero::before {
	content: "";
	position: absolute;
	inset: -40px;
	background-image: radial-gradient(#DCE3ED 1.2px, transparent 1.2px);
	background-size: 30px 30px;
	-webkit-mask-image: radial-gradient(115% 125% at 82% 0%, #000 0%, #000 38%, transparent 76%);
	mask-image: radial-gradient(115% 125% at 82% 0%, #000 0%, #000 38%, transparent 76%);
	pointer-events: none;
}
.ask-page-hero::after {
	content: "";
	position: absolute;
	top: -240px;
	right: -160px;
	width: 640px;
	height: 640px;
	border-radius: 50%;
	background: radial-gradient(closest-side, rgba(96, 116, 150, 0.12), rgba(96, 116, 150, 0) 72%);
	pointer-events: none;
}
.ask-page-hero .ask-bar { position: relative; z-index: 1; max-width: 1180px; margin-inline: auto; }
.ask-page-hero .ask-eyebrow { margin: 0 0 0.4rem; }
.ask-page-hero__title { font-family: var(--wp--preset--font-family--heading); font-weight: 700; letter-spacing: -0.03em; line-height: 1.05; font-size: clamp(2rem, 4.5vw, 3.25rem); margin: 0; color: var(--wp--preset--color--ink, #313A46); max-width: 22ch; }
.ask-page-hero__meta { color: var(--wp--preset--color--gray, #919191); font-size: 0.9rem; margin: 0.75rem 0 0; }
.ask-crumbs { font-size: 0.85rem; color: var(--wp--preset--color--gray, #919191); margin-bottom: 0.75rem; }
.ask-crumbs a { color: var(--wp--preset--color--slate, #5E6A7A); text-decoration: none; }
.ask-crumbs a:hover { color: var(--wp--preset--color--blue, #2766F0); }

/* Split hero: copy left, animated chat demo right (pages with _askspot_hero_chat).
   Mirrors the front-page hero composition: bigger display type, the conversion
   pair of buttons and a one-line proof strip balance the tall chat widget. */
.ask-page-hero--split { padding-top: 4.25rem; padding-bottom: 4rem; }
/* 2fr 3fr = the same 40/60 split the homepage hero uses, so both heroes place
   the widget identically. NOT `40% 60%`: percentages ignore the gap, so the two
   tracks plus the 72px gap overflow the container and the right-hand chips get
   clipped again (measured: -26px at 1200px). Fractions divide what is left
   after the gap, which is what we want.
   The old `minmax(340px, 400px)` aside left only 9px of slack around the 380px
   widget, so there was nothing to centre into and the chip fan had no room. */
.ask-page-hero--split .ask-bar { display: grid; grid-template-columns: 2fr 3fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
/* Cap the title width: the left chip-fan (s1–s4) hangs ~160px off the widget's
   left edge, reaching into the copy column. Without a cap the H1 fills the whole
   copy column and runs under those chips (see the fan positions below). The cap is
   sized for the tightest case — the 1160px fan breakpoint, where the copy column
   is narrowest and the chips reach furthest left; it clears comfortably above that. */
.ask-page-hero--split .ask-page-hero__title { font-size: clamp(2.4rem, 4.6vw, 3.6rem); letter-spacing: -0.035em; max-width: 33rem; }
.ask-page-hero--split .ask-page-hero__lede { max-width: 34rem; font-size: 1.15rem; }
.ask-page-hero__aside { min-width: 0; }
.ask-page-hero__aside .ask-widget { margin-inline: auto; }
.ask-page-hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin: 1.9rem 0 0; }
/* Product link captioning the hero chat demo (industry pages) — sits under the
   widget in the aside, so it labels the demo instead of competing with the CTAs. */
.ask-hero__prodlink { margin: 0.95rem 0 0; text-align: center; }
.ask-hero__prodlink a { font-weight: 600; font-size: 0.95rem; text-decoration: none; color: var(--wp--preset--color--blue, #2766F0); }
.ask-hero__prodlink a:hover, .ask-hero__prodlink a:focus-visible { text-decoration: underline; color: var(--wp--preset--color--blue-deep, #1A4FCC); }
@media (max-width: 920px) {
	.ask-page-hero--split { padding-top: 3.25rem; padding-bottom: 3rem; }
	.ask-page-hero--split .ask-bar { grid-template-columns: 1fr; gap: 2.25rem; }
}

/* Industry hero: question-chip fan around the widget. Chips are the queued
   conversations' first questions; the active one (synced by askspot.js) turns
   blue, and a cart icon marks the threads that ended in a sale. Rendered only
   for a real queue (>= 2 conversations); a single-thread hero shows no chips. */
.ask-page-hero__aside .ask-herochat,
.ask-hero .ask-herochat { position: relative; max-width: 380px; margin-inline: auto; }
.ask-herochat__chips { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
/* Home hero: hide the question-chip fan around the animated chat (simplified
   animation — the chat still plays, just without the fanned chips). Scoped to
   the home page (.ask-hero); industry-page heroes keep their chips. */
.home .ask-herochat__chips { display: none; }
.ask-qchip { position: absolute; display: inline-flex; align-items: center; gap: 5px; max-width: 168px; margin: 0; padding: 6px 11px; border-radius: 999px; background: #fff; border: 1px solid var(--wp--preset--color--line, #E6EAF0); box-shadow: 0 8px 18px -12px rgba(49, 58, 70, .4); font-family: var(--wp--preset--font-family--body, "Inter"), sans-serif; font-size: 12px; line-height: 1.25; text-align: left; color: var(--wp--preset--color--slate, #5E6A7A); opacity: 0.5; cursor: pointer; pointer-events: auto; -webkit-appearance: none; appearance: none; transition: opacity .35s ease, background .35s ease, color .35s ease, border-color .35s ease, box-shadow .35s ease; }
.ask-qchip:hover { opacity: 1; border-color: var(--wp--preset--color--blue, #2766F0); }
.ask-qchip:focus-visible { outline: 2px solid var(--wp--preset--color--blue, #2766F0); outline-offset: 2px; opacity: 1; }
.ask-qchip__cart { color: #1D9E75; flex: none; }
.ask-qchip.is-active { opacity: 1; background: var(--wp--preset--color--blue, #2766F0); border-color: var(--wp--preset--color--blue, #2766F0); color: #fff; box-shadow: 0 16px 32px -14px rgba(39, 102, 240, .6); z-index: 4; }
.ask-qchip.is-active .ask-qchip__cart { color: #fff; }

/* Wide desktop: up to 4 chips left / 4 right, tucked close to the widget edges.
   A chip pushed out by translateX(96%) of its own 168px max-width needs ~150px
   of clearance beyond the widget edge; without it `.ask-page-hero`'s
   overflow:hidden silently cuts the right-hand chips in half.

   The floor is 1300px. Careful: a chip's *rotated bounding box* is wider than
   its 168px max-width — width·cos(9°) + height·sin(9°) — so a 3-line question
   chip measures ~175px, not 168px, and needs correspondingly more room. Short
   labels (the `/industries/` hub uses bare industry names) fit at 1200px, but
   every page whose chips are full questions clips 2 of them there; measuring
   only the hub is what made 1200px look safe. Worst case at 1300px is +29px
   (PL automotive, whose chips run to 3 lines).
   History: 1160 → 1480 (split hero still had a 400px aside, 9px of slack) →
   1200 (both heroes went 40/60) → 1300 (question labels, taller chips).
   Re-measure on a 3-line-chip page — not the hub — if the ratio, the 1180px
   container, the chip max-width or the label style changes. */
@media (min-width: 1300px) {
	.ask-qchip--s1 { top: 3%;  left: 0;  transform: translateX(-88%) rotate(-9deg); }
	.ask-qchip--s2 { top: 26%; left: 0;  transform: translateX(-96%) rotate(-4deg); }
	.ask-qchip--s3 { top: 49%; left: 0;  transform: translateX(-96%) rotate(3deg); }
	.ask-qchip--s4 { top: 72%; left: 0;  transform: translateX(-86%) rotate(8deg); }
	.ask-qchip--s5 { top: 3%;  right: 0; transform: translateX(88%) rotate(9deg); }
	.ask-qchip--s6 { top: 26%; right: 0; transform: translateX(96%) rotate(4deg); }
	.ask-qchip--s7 { top: 49%; right: 0; transform: translateX(96%) rotate(-3deg); }
	.ask-qchip--s8 { top: 72%; right: 0; transform: translateX(86%) rotate(-8deg); }
}

/* Below the wide breakpoint there's no room for a side fan, so the chips become a
   single-row horizontal scroll strip under the widget. askspot.js scrolls the
   active chip into view as each conversation plays. */
@media (max-width: 1299px) {
	.ask-page-hero__aside .ask-herochat,
	.ask-hero .ask-herochat { display: flex; flex-direction: column; }
	.ask-page-hero__aside .ask-herochat .ask-widget,
	.ask-hero .ask-herochat .ask-widget { order: 1; }
	.ask-herochat__chips { order: 2; position: static; inset: auto; display: flex; flex-wrap: nowrap; align-items: stretch; gap: 10px; margin-top: 14px; padding: 8px 0 18px; pointer-events: auto; overflow-x: auto; overflow-y: hidden; scroll-behavior: smooth; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none;
		/* Fade the chips into the (paper) background at both edges of the strip. */
		-webkit-mask-image: linear-gradient(to right, transparent 0, #000 22px, #000 calc(100% - 22px), transparent 100%);
		mask-image: linear-gradient(to right, transparent 0, #000 22px, #000 calc(100% - 22px), transparent 100%); }
	.ask-herochat__chips::-webkit-scrollbar { display: none; }
	.ask-qchip { position: static; transform: none; opacity: 1; flex: 0 0 auto; max-width: 210px; }
	/* Cap the question at two lines; crop the rest with an ellipsis. */
	.ask-qchip .ask-qchip__t { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
	/* Softer active shadow that fits inside the strip's vertical padding. */
	.ask-qchip.is-active { box-shadow: 0 8px 18px -10px rgba(39, 102, 240, .5); }
}

/* Centered hero (kontakt): copy and the form card below share one axis, so the
   hero atmosphere is re-anchored to the top center instead of the top right. */
.ask-page-hero--center { padding-bottom: 2.25rem; }
.ask-page-hero--center .ask-bar { text-align: center; }
.ask-page-hero--center .ask-page-hero__title { margin-inline: auto; }
.ask-page-hero--center .ask-page-hero__lede { margin-inline: auto; max-width: 44rem; }
.ask-page-hero--center::before {
	-webkit-mask-image: radial-gradient(120% 130% at 50% 0%, #000 0%, #000 42%, transparent 78%);
	mask-image: radial-gradient(120% 130% at 50% 0%, #000 0%, #000 42%, transparent 78%);
}
.ask-page-hero--center::after { right: 50%; transform: translateX(50%); top: -320px; }

/* Hero wpisu (blog): edytorial na jednej osi z kolumna artykulu — wiekszy,
   zbalansowany tytul i byline (znak marki + zespol + data + czas czytania)
   zamiast surowej linii meta. Dziedziczy atmosfere z wariantu --center. */
.ask-page-hero--article { padding-top: 4.25rem; padding-bottom: 2.75rem; }
.ask-page-hero--article .ask-page-hero__title { max-width: 21ch; font-size: clamp(2.15rem, 4.4vw, 3.1rem); line-height: 1.06; text-wrap: balance; }
.ask-page-hero--article .ask-page-hero__lede { font-size: 1.125rem; max-width: 40rem; }
.ask-page-hero__byline { display: flex; flex-wrap: wrap; align-items: center; gap: 0.65rem; margin: 1.6rem 0 0; font-size: 0.92rem; color: var(--wp--preset--color--slate, #5E6A7A); }
.ask-page-hero--center .ask-page-hero__byline { justify-content: center; }
.ask-byline__avatar { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 999px; background: var(--wp--preset--color--blue, #2766F0); box-shadow: 0 8px 18px -8px rgba(39, 102, 240, 0.55); }
.ask-byline__avatar img { width: 16px; height: 16px; display: block; }
.ask-byline__name { font-weight: 600; color: var(--wp--preset--color--ink, #313A46); }
.ask-byline__sep { width: 3px; height: 3px; border-radius: 999px; background: #C2CCDA; }
@media (max-width: 700px) {
	.ask-page-hero--article { padding-top: 3rem; padding-bottom: 2.25rem; }
}

/* Hero konwersji (kontakt, umów demo): split budowany w treści strony —
   copy i dowody po lewej, karta formularza po prawej. Kompakt: cała sekcja
   mieści się nad zgięciem MacBooka, a kolejna sekcja wystaje spod niej
   jako naturalna zachęta do scrolla. */
.ask-page-hero--form { padding-top: 2.25rem; padding-bottom: 2.5rem; }
/* Odpowiednik .ask-bar z hero szablonowego: tresc nad atmosfera (::before/::after),
   inaczej kropki maluja sie NA biale karcie formularza. */
.ask-page-hero--form .wp-block-columns { position: relative; z-index: 1; gap: clamp(2rem, 4.5vw, 4.25rem); }
.ask-page-hero--form .ask-page-hero__aside { min-width: 340px; }
.ask-page-hero--form .ask-page-hero__title { font-size: clamp(2.05rem, 3.6vw, 2.85rem); }
.ask-page-hero--form .ask-page-hero__lede { font-size: 1.05rem; max-width: 32rem; }
.ask-page-hero--form .ask-form {
	box-shadow: var(--wp--custom--shadow--lg, 0 18px 40px -20px rgba(39, 72, 150, 0.45));
	padding: clamp(1.4rem, 2vw, 1.85rem);
}
.ask-page-hero--form .ask-form .ask-field { margin-bottom: 0.7rem; }
.ask-page-hero--form .ask-form label { font-size: 0.85rem; margin-bottom: 0.3rem; }
.ask-page-hero--form .ask-form input[type="text"],
.ask-page-hero--form .ask-form input[type="email"],
.ask-page-hero--form .ask-form input[type="url"],
.ask-page-hero--form .ask-form input[type="tel"],
.ask-page-hero--form .ask-form select,
.ask-page-hero--form .ask-form textarea { padding: 8px 12px; font-size: 0.95rem; }
.ask-page-hero--form .ask-form select { padding-right: 36px; }
.ask-page-hero--form .ask-form textarea { height: 84px; min-height: 84px; }
.ask-page-hero--form .ask-form .wpcf7-form > p { margin: 0.25rem 0 0; font-size: 0; line-height: 0; }
.ask-page-hero--form .ask-form .wpcf7-submit { display: block; width: 100%; margin-top: 0; padding: var(--ask-btn-py) var(--ask-btn-px); }
.ask-page-hero--form .ask-form .wpcf7-response-output:empty { display: none; margin: 0; padding: 0; }
@media (max-width: 781px) {
	.ask-page-hero--form .ask-page-hero__aside { min-width: 0; }
}

/* Dowody w copy hero (umów demo i kontakt — jedna anatomia na obu stronach):
   kafelek ikony + pogrubiony tytuł + linijka opisu lub akcji. */
.ask-hero-channels { margin-top: 1.9rem; }
.ask-channel { display: flex; align-items: flex-start; gap: 0.85rem; }
.ask-channel + .ask-channel { margin-top: 1.05rem; }
.ask-channel .ask-icon { width: 40px; height: 40px; border-radius: 10px; margin-bottom: 0; flex: none; }
.ask-channel .ask-icon svg { width: 20px; height: 20px; }
.ask-channel p { margin: 0; font-size: 0.95rem; color: var(--wp--preset--color--slate, #5E6A7A); line-height: 1.5; }
.ask-channel p strong { display: block; font-size: 1rem; color: var(--wp--preset--color--ink, #313A46); font-weight: 600; }
.ask-channel a { color: var(--wp--preset--color--blue, #2766F0); font-weight: 600; text-decoration: none; }
.ask-channel a::after { content: " \2192"; }
.ask-channel a:hover { color: var(--wp--preset--color--blue-deep, #1A4FCC); }

.ask-contact-cards .is-style-ghost > .wp-block-button__link { padding-left: 0; padding-right: 0; }

/* Inner content readability */
.ask-content :where(h2) { margin-top: 2.5rem; }
.ask-content :where(h3) { margin-top: 1.75rem; }

/* ==========================================================================
   Article (blog): reading layout
   Artykul blogowy to strona-dziecko Bloga (grupa blog/*) lub wpis — haka
   dostarcza klasa body .askspot-is-article (inc/template-helpers.php).
   Tresc trzyma lewa krawedz kontenera 1180 dokladnie jak hero (jedna os),
   wypelnia szeroka lewa kolumne, a prawa szyne zajmuje przyklejony spis
   tresci (scrollspy w askspot.js). Ponizej 1180px szyna znika.
   ========================================================================== */
.askspot-is-article .ask-main { display: grid; grid-template-columns: minmax(0, 1fr) 256px; column-gap: clamp(2.5rem, 4vw, 4.5rem); max-width: calc(1180px + 2.5rem); margin-inline: auto; padding-inline: 1.25rem; box-sizing: border-box; }
.askspot-is-article .ask-main > .wp-block-post-content { grid-column: 1; grid-row: 1; min-width: 0; padding-top: 1.5rem; }
:where(.askspot-is-article .ask-main) :where(p, li) { color: var(--wp--preset--color--slate, #5E6A7A); }

/* Tekst i media wypelniaja kolumne od lewej — nadpisuje wysrodkowane
   max-width layoutu WP (contentSize w page.html zostaje 820 dla zwyklych
   stron; artykuly rozpina ten override). Root padding WP (has-global-padding)
   tez do zera, inaczej tresc odjezdza 20px od osi hero. */
.askspot-is-article .wp-block-post-content > :where(:not(.alignfull)) { max-width: none; }
.askspot-is-article .ask-main .wp-block-post-content.has-global-padding { padding-inline: 0; }

/* Spis tresci: sticky szyna w prawej kolumnie siatki. */
.ask-toc { grid-column: 2; grid-row: 1; align-self: start; position: sticky; top: 6rem; margin-top: 1.5rem; font-size: 0.875rem; }
.ask-toc__label { margin: 0 0 0.8rem; font-family: var(--wp--preset--font-family--heading); font-weight: 700; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--wp--preset--color--gray, #919191); }
.ask-toc__list { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--as-line, #E6EAF0); }
.ask-toc__list li { margin: 0; }
.ask-toc a { display: block; padding: 0.4rem 0 0.4rem 0.95rem; margin-left: -2px; border-left: 2px solid transparent; color: var(--wp--preset--color--slate, #5E6A7A); line-height: 1.4; text-decoration: none; transition: color 0.15s ease, border-color 0.15s ease; }
.ask-toc a:hover { color: var(--wp--preset--color--ink, #313A46); }
.ask-toc a.is-active { border-color: var(--wp--preset--color--blue, #2766F0); color: var(--wp--preset--color--blue, #2766F0); font-weight: 600; }
@media (max-width: 1179px) {
	.ask-toc { display: none; }
	.askspot-is-article .ask-main { display: block; }
}

/* Skala i rytm dlugiego tekstu. Selektory z .askspot-is-article .ask-main
   wygrywaja i z homepage'owa skala naglowkow (home-v3.css, ladowany pozniej),
   i z marginesami layoutu WP (:root :where(...)). */
.askspot-is-article .wp-block-post-content { font-size: 1.0625rem; }
.askspot-is-article .wp-block-post-content > p { line-height: 1.78; text-wrap: pretty; }
.askspot-is-article .ask-main h2.wp-block-heading { font-size: clamp(1.55rem, 2.6vw, 1.9rem); line-height: 1.16; letter-spacing: -0.022em; margin-top: 3.25rem; margin-bottom: 0; }
.askspot-is-article .ask-main h3.wp-block-heading { font-size: 1.3rem; margin-top: 2.4rem; margin-bottom: 0; }
.askspot-is-article .wp-block-post-content > h2.wp-block-heading:first-child { margin-top: 0.75rem; }
.askspot-is-article :where(h2[id]) { scroll-margin-top: 5.5rem; }
.askspot-is-article .wp-block-post-content > ul:not(.is-style-check) { padding-left: 1.2rem; display: grid; gap: 0.55rem; }
.askspot-is-article .wp-block-post-content > ul:not(.is-style-check) li::marker { color: var(--wp--preset--color--blue, #2766F0); }
.askspot-is-article .wp-block-post-content > p a { color: var(--wp--preset--color--blue, #2766F0); font-weight: 500; text-decoration: underline; text-decoration-color: rgba(39, 102, 240, 0.35); text-underline-offset: 3px; }
.askspot-is-article .wp-block-post-content > p a:hover { color: var(--wp--preset--color--blue-deep, #1A4FCC); text-decoration-color: currentColor; }

/* ==========================================================================
   Article building blocks (blog patterns)
   ========================================================================== */
.ask-content :where(figure.wp-block-image) img { border-radius: var(--wp--custom--radius--card, 16px); }
.ask-content :where(.wp-block-quote) { border-left: 3px solid var(--wp--preset--color--blue, #2766F0); padding: 0.25rem 0 0.25rem 1.25rem; margin-inline: 0; color: var(--wp--preset--color--slate, #5E6A7A); }
.ask-content :where(.wp-element-caption) { color: var(--wp--preset--color--gray, #919191); font-size: 0.85rem; text-align: center; margin-top: 0.6rem; }

.ask-article-widget { margin-block: 2.75rem; }
.ask-article-widget .ask-widget { width: 100%; max-width: 380px; margin-inline: auto; }
.ask-article-widget__caption { color: var(--wp--preset--color--gray, #919191); font-size: 0.85rem; margin-top: 0.9rem; }

.ask-article-stats { margin-block: 2.75rem; padding: 2rem clamp(1.25rem, 3vw, 2.25rem); background: var(--wp--preset--color--surface, #EEF2F7); border: 1px solid var(--as-line, #E6EAF0); border-radius: var(--wp--custom--radius--lg, 18px); text-align: center; }
.ask-article-stats .ask-stat__num { font-size: clamp(1.9rem, 3vw, 2.4rem); }

.ask-article-callout { display: flex; gap: 1.1rem; align-items: center; margin-block: 2.75rem; }
.ask-article-callout .ask-icon { flex: none; margin-bottom: 0; }
.ask-article-callout__text { margin: 0; font-family: var(--wp--preset--font-family--heading); font-weight: 600; font-size: 1.15rem; line-height: 1.45; letter-spacing: -0.01em; color: var(--wp--preset--color--ink, #313A46); }

/* Product screenshots inside articles: card edge so white UI shots read on paper. */
.ask-article-shot { margin-block: 2.75rem; }
.ask-article-shot img { width: 100%; height: auto; border: 1px solid var(--as-line, #E6EAF0); border-radius: var(--wp--custom--radius--card, 16px); box-shadow: var(--wp--custom--shadow--md); }

.ask-article-video { margin-block: 2.75rem; }
.ask-article-video .wp-block-video { margin: 0; }
.ask-article-video video, .ask-article-video iframe { width: 100%; border-radius: var(--wp--custom--radius--card, 16px); box-shadow: var(--wp--custom--shadow--md); background: var(--wp--preset--color--ink, #313A46); }

/* Cytat w artykule: edytorialny pull quote — Jakarta w atramencie na karcie
   z brandowa krawedzia, bez ciezkiego cienia karty testimoniali. */
.askspot-is-article .ask-quote,
.askspot-is-article .ask-quote.wp-block-quote { border-left: 3px solid var(--wp--preset--color--blue, #2766F0); box-shadow: none; padding: 1.4rem 1.6rem; margin-block: 2.75rem; }
.askspot-is-article .ask-quote p { margin: 0; font-family: var(--wp--preset--font-family--heading); font-weight: 600; font-size: 1.2rem; line-height: 1.5; letter-spacing: -0.01em; color: var(--wp--preset--color--ink, #313A46); }

/* Panel CTA w tresci (tint): miekka zacheta — mocne, ciemne CTA zostaje
   w pasie zamykajacym szablonu. */
.ask-article-cta { margin-block: 3.25rem 0.5rem; text-align: center; }
.ask-article-cta h3 { margin-top: 0; font-size: 1.45rem; }
.ask-article-cta p { margin: 0.6rem auto 0; max-width: 34rem; }
.ask-article-cta .wp-block-buttons { margin-top: 1.4rem; justify-content: center; }

/* Pasek postepu czytania (askspot.js dokleja na wpisach). */
.ask-progress { position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 90; pointer-events: none; }
.ask-progress__bar { height: 100%; transform-origin: 0 50%; transform: scaleX(0); background: var(--wp--preset--color--blue, #2766F0); }

@media (max-width: 700px) {
	.askspot-is-article .wp-block-post-content { font-size: 1rem; }
	.askspot-is-article .ask-main h2.wp-block-heading { margin-top: 2.5rem; }
}

/* Meta line under the page-hero title (date, reading time). */
.ask-page-hero__meta { color: var(--wp--preset--color--gray, #919191); font-size: 0.9rem; margin-top: 0.75rem; }
.ask-page-hero__lede { max-width: 52rem; margin: 1rem 0 0; font-size: 1.125rem; line-height: 1.6; color: var(--wp--preset--color--slate, #5E6A7A); }

/* The old .ask-cta-band / .ask-cta--ghost band was superseded by .ask-ctablue
   (the blue closing band) and had 0 uses in content - removed 2026-07-22. */

/* ==========================================================================
   Children grid (index pages)
   ========================================================================== */
/* Full-bleed via native alignfull margins (the 100vw hack overflowed on mobile). */
.ask-fullbleed { max-width: none; margin-top: 2.5rem; margin-bottom: 3.5rem; }
/* AJAX filter/pagination: dim + lock the grid while the next page loads. */
.ask-fullbleed.is-loading { opacity: 0.5; pointer-events: none; transition: opacity 0.15s ease; }
.ask-children { box-sizing: border-box; display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 1.25rem; padding-inline: 1.25rem; }
.ask-childcard { display: flex; flex-direction: column; gap: 0.5rem; background: #fff; border: 1px solid var(--ask-card-border); border-radius: var(--wp--custom--radius--lg, 18px); padding: 1.5rem; text-decoration: none; box-shadow: var(--wp--custom--shadow--md); transition: border-color 0.15s ease, transform 0.15s ease; }
.ask-childcard:hover { border-color: var(--wp--preset--color--blue, #2766F0); transform: translateY(-2px); }
/* Logo + Integration Type chip share one row, so the chip costs no card height. */
.ask-childcard__toprow { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; margin-bottom: 0.35rem; }
.ask-childcard__toprow .ask-childcard__logo,
.ask-childcard__toprow .ask-childcard__mono { margin-bottom: 0; min-width: 0; }
.ask-childcard__type { flex: 0 0 auto; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.03em; line-height: 1; padding: 5px 10px; border-radius: 999px; background: var(--wp--preset--color--blue-tint, #EAF0FE); color: var(--wp--preset--color--blue, #2766F0); white-space: nowrap; }
.ask-childcard__logo { height: 40px; display: flex; align-items: center; margin-bottom: 0.35rem; }
.ask-childcard__logo img { max-height: 30px; max-width: 130px; object-fit: contain; object-position: left center; }
.ask-childcard__mono { width: 44px; height: 44px; border-radius: 12px; background: var(--wp--preset--color--blue-tint, #EAF0FE); color: var(--wp--preset--color--blue, #2766F0); display: inline-flex; align-items: center; justify-content: center; font-family: var(--wp--preset--font-family--heading); font-weight: 800; font-size: 1.15rem; margin-bottom: 0.35rem; }
/* Industry listing: the ACF filter icon in a brand-tint tile (matches the mono fallback). */
.ask-childcard__icon { width: 44px; height: 44px; border-radius: 12px; background: var(--wp--preset--color--blue-tint, #EAF0FE); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 0.35rem; }
.ask-childcard__icon svg { width: 24px; height: 24px; fill: none; stroke: var(--wp--preset--color--blue, #2766F0); }
.ask-childcard__title { font-family: var(--wp--preset--font-family--heading); font-weight: 700; font-size: 1.15rem; color: var(--wp--preset--color--ink, #313A46); }
.ask-childcard__desc { color: var(--wp--preset--color--slate, #5E6A7A); font-size: 0.95rem; line-height: 1.5; flex: 1; }
.ask-childcard__more { color: var(--wp--preset--color--blue, #2766F0); font-weight: 600; font-size: 0.9rem; }

/* Product modules: a balanced, centered duo (auto-fill left two cards floating
   in a wide row). Two columns, capped width, roomier cards. */
.ask-children--product { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 760px; margin-inline: auto; }
.ask-childcard--product { padding: 1.75rem; }
.ask-childcard--product .ask-childcard__title { font-size: 1.2rem; }
@media (max-width: 640px) { .ask-children--product { grid-template-columns: 1fr; max-width: 420px; } }

/* ==========================================================================
   Product hero (editable split: copy + KPIs + mini analytics dashboard)
   ========================================================================== */
.ask-prodhero .wp-block-heading { font-family: var(--wp--preset--font-family--heading); font-weight: 800; font-size: clamp(2rem, 3.6vw, 3rem); line-height: 1.08; letter-spacing: -0.03em; color: var(--wp--preset--color--ink, #313A46); margin: 0; }
.ask-prodhero .ask-lede { margin-top: 1.1rem; }
/* Button row + KPI trio — ported from the home hero so they work without home-v3.css. */
.ask-hero__btns.wp-block-buttons { gap: 14px; margin-top: 2rem; }
/* Hero CTAs — two flavours share these rules: the home/product hero (.ask-hero__btns,
   with .wp-block-button children) and the shared page-hero used on every single page
   (.ask-page-hero__actions, with direct <a> children). Side by side filling the row on
   phones, stacking full-width below 375px where they no longer fit inline. */
@media (max-width: 460px) {
	.ask-hero__btns.wp-block-buttons,
	.ask-inthero .wp-block-buttons,
	.ask-page-hero__actions { flex-wrap: nowrap; }
	.ask-hero__btns .wp-block-button,
	.ask-inthero .wp-block-buttons .wp-block-button,
	.ask-page-hero__actions > a { flex: 1 1 0; }
	.ask-hero__btns .wp-block-button__link,
	.ask-inthero .wp-block-buttons .wp-block-button__link,
	.ask-page-hero__actions > a { box-sizing: border-box; width: 100%; text-align: center; justify-content: center; padding-inline: 0.75rem; white-space: nowrap; }
}
@media (max-width: 374px) {
	.ask-hero__btns.wp-block-buttons,
	.ask-inthero .wp-block-buttons,
	.ask-page-hero__actions { flex-wrap: wrap; }
	.ask-hero__btns .wp-block-button,
	.ask-inthero .wp-block-buttons .wp-block-button,
	.ask-page-hero__actions > a { flex: 1 1 100%; }
	.ask-hero__btns .wp-block-button__link,
	.ask-inthero .wp-block-buttons .wp-block-button__link,
	.ask-page-hero__actions > a { white-space: normal; }
}
.ask-hero__kpis.wp-block-group { display: flex; flex-wrap: nowrap; align-items: flex-start; gap: 0; margin-top: 2.4rem; }
.ask-hero__kpis > .wp-block-group { padding: 0 22px; margin-block-start: 0; }
.ask-hero__kpis > .wp-block-group:first-child { padding-left: 0; }
.ask-hero__kpis > .wp-block-group:last-child { padding-right: 0; }
.ask-hero__kpis > .wp-block-group + .wp-block-group { border-left: 1px solid var(--wp--preset--color--line, #E6EAF0); }
.ask-hero__kpis .ask-kpi__num { font-family: var(--wp--preset--font-family--heading); font-weight: 800; font-size: clamp(26px, 2.6vw, 34px); letter-spacing: -0.035em; line-height: 1; margin: 0; white-space: nowrap; color: var(--wp--preset--color--ink, #313A46); }
.ask-hero__kpis .ask-kpi__num.is-accent { color: var(--wp--preset--color--blue, #2766F0); }
.ask-hero__kpis .ask-kpi__label { font-size: 12.5px; font-weight: 500; color: var(--wp--preset--color--slate, #5E6A7A); margin: 9px 0 0; }
.ask-hero__kpis .ask-kpi__label .ask-stars { color: var(--wp--preset--color--warning, #F5A623); font-size: 11px; letter-spacing: 1.5px; margin-right: 6px; }
/* Narrow: allow the strip to wrap, but keep the dividers WITH their padding (the
   home-v3 layer supplies the 22px + 1px, so don't zero them here or the numbers
   touch the line). */
@media (max-width: 540px) { .ask-hero__kpis.wp-block-group { flex-wrap: wrap; gap: 18px 0; } }
/* Small phones (global — home-v3.css carries the same rules for the front page):
   drop the rating stars, tighten the KPI divider padding, and below 375px stack
   the numbers into a single left-aligned column. */
@media (max-width: 460px) {
	.ask-hero__kpis .ask-stars { display: none; }
	.ask-hero__kpis > .wp-block-group { padding: 0 15px; }
}
@media (max-width: 374px) {
	.ask-hero__kpis.wp-block-group { flex-direction: column; gap: 16px; }
	.ask-hero__kpis > .wp-block-group { padding: 0; }
	.ask-hero__kpis > .wp-block-group + .wp-block-group { border-left: 0; }
}
/* Stack the hero to one column below 980px. Kept two-column, the 40/60 split
   squeezes the copy column to ~300px in the 782–980px band, which cramps the H1
   and forces the KPI strip (with its nowrap labels) to overflow / break "200+". */
@media (max-width: 980px) {
	/* !important overrides WordPress core's `flex-wrap: nowrap !important` that it
	   applies to .wp-block-columns above 782px. */
	.ask-hero .wp-block-columns { flex-wrap: wrap !important; }
	.ask-hero .wp-block-columns > .wp-block-column { flex-basis: 100% !important; }
}

/* Mini analytics dashboard (hero visual): sales line up, tickets line down. */
.ask-herodash { background: #fff; border: 1px solid var(--wp--preset--color--line, #E6EAF0); border-radius: 18px; box-shadow: 0 20px 44px -26px rgba(39,72,150,.30); padding: 1.4rem 1.5rem 1.2rem; max-width: 520px; margin-inline: auto; }
.ask-herodash__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 0.85rem; }
.ask-herodash__title { font-family: var(--wp--preset--font-family--heading); font-weight: 700; font-size: 0.95rem; color: var(--wp--preset--color--ink, #313A46); }
.ask-herodash__legend { display: inline-flex; align-items: center; gap: 0.85rem; font-size: 0.72rem; font-weight: 600; color: var(--wp--preset--color--slate, #5E6A7A); }
.ask-herodash__legend span { display: inline-flex; align-items: center; }
.ask-herodash__legend i { width: 8px; height: 8px; border-radius: 999px; margin-right: 5px; }
.ask-herodash__legend .is-sales { background: var(--wp--preset--color--blue, #2766F0); }
.ask-herodash__legend .is-tickets { background: var(--as-success, #12A150); }
.ask-herodash__chart svg { display: block; width: 100%; height: auto; }
.ask-herodash__grid { stroke: var(--wp--preset--color--line-soft, #E1E5EB); }
.ask-herodash__line { fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.ask-herodash__line--s { stroke: var(--wp--preset--color--blue, #2766F0); }
.ask-herodash__line--t { stroke: var(--as-success, #12A150); }
.ask-herodash__dot--s { fill: var(--wp--preset--color--blue, #2766F0); }
.ask-herodash__dot--t { fill: var(--as-success, #12A150); }
.ask-herodash__foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 0.95rem; padding-top: 0.85rem; border-top: 1px solid var(--wp--preset--color--line-soft, #E1E5EB); }
.ask-herodash__footlabel { font-family: var(--wp--preset--font-family--heading); font-weight: 700; font-size: 0.62rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--wp--preset--color--gray, #919191); }
.ask-herodash__chips { display: inline-flex; align-items: center; gap: 9px; }
.ask-herodash__chips img { width: 22px; height: 22px; object-fit: contain; display: block; }
.ask-herodash__chips svg { width: 19px; height: 19px; fill: none; stroke: var(--wp--preset--color--slate, #5E6A7A); }
@media (prefers-reduced-motion: no-preference) {
	.ask-herodash__line { stroke-dasharray: 460; stroke-dashoffset: 460; animation: askDashDraw 1.5s cubic-bezier(.4,0,.2,1) .25s forwards; }
	.ask-herodash__line--t { animation-delay: .45s; }
	@keyframes askDashDraw { to { stroke-dashoffset: 0; } }
}

/* ==========================================================================
   Product modules split + per-agent workflow diagram (product page)
   ========================================================================== */
/* Success green is the ONE sanctioned exception to the single-blue rule: the
   agent diagram marks auto-resolved items green on explicit brand direction. */
:root { --as-success: #12A150; --as-success-tint: #E7F6EC; --as-success-deep: #0E7C3E; }

/* Two product columns (Sales / Support), each a card with its own animation,
   capability chips and a link. Collapses to one column on tablet and below. */
.ask-prodsplit { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; align-items: stretch; }
.ask-prodcol { display: flex; flex-direction: column; gap: 1.15rem; background: #fff; border: 1px solid var(--wp--preset--color--line, #E6EAF0); border-radius: var(--wp--custom--radius--lg, 18px); padding: clamp(1.4rem, 2.5vw, 2rem); box-shadow: var(--wp--custom--shadow--md, 0 6px 16px -10px rgba(49,58,70,.30)); }
.ask-prodcol > :where(h3, p) { margin: 0; }
.ask-prodcol__head { display: flex; align-items: center; gap: 0.75rem; }
.ask-prodcol__icon { width: 44px; height: 44px; flex: none; border-radius: 12px; background: var(--wp--preset--color--blue-tint, #EAF0FE); display: inline-flex; align-items: center; justify-content: center; }
.ask-prodcol__icon svg { width: 24px; height: 24px; fill: none; stroke: var(--wp--preset--color--blue, #2766F0); stroke-width: 2; }
/* margin:0 needed because the title sits inside __head, not as a direct child of
   the column, so it misses the reset above — this keeps it centred on the icon. */
.ask-prodcol__title { margin: 0; font-family: var(--wp--preset--font-family--heading); font-weight: 700; font-size: 1.25rem; line-height: 1.25; letter-spacing: -0.01em; color: var(--wp--preset--color--ink, #313A46); }
.ask-prodcol__title a { color: inherit; text-decoration: none; }
.ask-prodcol__title a:hover { color: var(--wp--preset--color--blue, #2766F0); }
/* min-height reserves equal room for both ledes so the two animations start at
   the same vertical offset regardless of copy length. */
.ask-prodcol__lede { color: var(--wp--preset--color--slate, #5E6A7A); font-size: 0.95rem; line-height: 1.55; min-height: 4.6em; }
/* Extra top margin so the gap under the animation is ~1.5x the gap above it
   (column gap 1.15rem + 0.6rem here). */
.ask-prodcol__more { margin-top: 0.6rem; text-align: center; }
/* --radius--button was never a token (theme.json has sm/md/card/lg/pill), so
   this silently used the fallback. The lift-on-hover was also unique to this
   one button - dropped, so it behaves like every other primary. */
.ask-prodcol__more a { display: inline-block; padding: var(--ask-btn-py) var(--ask-btn-px); border-radius: var(--ask-btn-radius); background: var(--wp--preset--color--blue, #2766F0); color: #fff; font-weight: 600; text-decoration: none; }
.ask-prodcol__more a:hover { background: var(--wp--preset--color--blue-deep, #1A4FCC); color: #fff; }
.ask-prodcol__more a:active { background: #163F9E; color: #fff; box-shadow: var(--ask-btn-press); }

/* Capability chips: the module's feature set as skimmable tags, grouped by area.
   Editable in WP as core lists (className ask-featchips). */
.ask-featgroup { margin: 0; }
.ask-featgroup__title { margin: 0 0 0.5rem; font-family: var(--wp--preset--font-family--heading); font-weight: 700; font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--wp--preset--color--gray, #919191); }
.ask-featchips { list-style: none; margin: 0 0 0.85rem; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.ask-featchips li { margin: 0; padding: 0.3rem 0.7rem; font-size: 0.82rem; font-weight: 500; line-height: 1.3; color: var(--wp--preset--color--slate-700, #45505F); background: var(--wp--preset--color--surface, #EEF2F7); border-radius: 999px; }

/* Vertical three-stage flow inside a column: source chips (top) drop into the
   agent, which fans out to the outcome nodes (bottom). Wires and flying tokens
   are positioned by JS (initAgentFlow) from the real box geometry; this styles
   only the resting state and the token look. */
/* flex:1 makes both canvases fill the (equal-height) columns, so the shorter
   chat flow grows to match the inbox flow (which is taller by its deflection
   bar); the stage spreads its three stages to use that height evenly. */
.ask-flow { position: relative; background: #F6F8FB; border-radius: 14px; padding: clamp(1.1rem, 2.2vw, 1.6rem); display: flex; flex-direction: column; flex: 1 1 auto; }
.ask-flow__stage { position: relative; display: flex; flex-direction: column; align-items: stretch; justify-content: space-between; flex: 1 1 auto; gap: clamp(2rem, 5vw, 3.5rem); }
.ask-flow__wires { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 0; }
.ask-flow__col { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; }
.ask-flow__coltitle { margin: 0; font-family: var(--wp--preset--font-family--heading); font-weight: 700; font-size: 0.62rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--wp--preset--color--gray, #919191); text-align: center; }
.ask-flow__coltitle--out { color: var(--as-success-deep, #0E7C3E); }
.ask-flow__srcrow, .ask-flow__outrow { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; width: 100%; }
/* Outcome chips: keep clear air between them (they must never touch/overlap). */
.ask-flow__outrow { gap: 0.85rem; flex-wrap: nowrap; align-items: flex-start; padding-inline: 0.15rem; }
.ask-flow__chip { display: inline-flex; align-items: center; gap: 0.4rem; background: #fff; border: 1px solid var(--wp--preset--color--line, #E6EAF0); border-radius: 999px; padding: 0.32rem 0.68rem; font-size: 0.78rem; font-weight: 600; color: var(--wp--preset--color--ink, #313A46); box-shadow: var(--wp--custom--shadow--md, 0 6px 16px -10px rgba(49,58,70,.30)); }
.ask-flow__chip::before { content: ''; width: 6px; height: 6px; border-radius: 999px; background: var(--wp--preset--color--blue, #2766F0); flex: none; }
/* Channel icon tile (inbox omnichannel sources): a uniform square mark, no dot. */
.ask-flow__chip--sym { width: 48px; height: 48px; padding: 0; justify-content: center; border-radius: 12px; color: var(--wp--preset--color--slate-700, #45505F); }
.ask-flow__chip--sym::before { display: none; }
.ask-flow__chip--sym svg { width: 24px; height: 24px; display: block; }
/* Real brand logomark image inside the tile. */
.ask-flow__symimg { width: 30px; height: 30px; object-fit: contain; display: block; }
/* Retained for any logo-image chip variant. */
.ask-flow__chip--logo::before { display: none; }
.ask-flow__chiplogo { height: 26px; max-width: 108px; object-fit: contain; display: block; }
.ask-flow__node { background: #fff; border: 1px solid var(--wp--preset--color--line, #E6EAF0); border-radius: var(--wp--custom--radius--card, 16px); padding: 0.7rem 0.85rem; box-shadow: var(--wp--custom--shadow--md, 0 6px 16px -10px rgba(49,58,70,.30)); display: flex; flex-direction: column; gap: 0.2rem; text-align: center; align-items: center; transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease; }
.ask-flow__node--chat, .ask-flow__node--inbox { max-width: 320px; }
.ask-flow__node.is-hit { border-color: var(--wp--preset--color--blue, #2766F0); transform: translateY(-3px); box-shadow: 0 18px 40px -20px rgba(39,72,150,.45); }
.ask-flow__badge { font-family: var(--wp--preset--font-family--heading); font-weight: 700; font-size: 0.9rem; color: var(--wp--preset--color--ink, #313A46); }
.ask-flow__nodedesc { color: var(--wp--preset--color--slate, #5E6A7A); font-size: 0.76rem; line-height: 1.4; }
/* Each outcome: an icon+label pill with the "up to %" as a caption beneath it.
   The wrapper's flex-grow is set inline to the routing weight, so the chip widths
   mirror how many tickets each outcome takes (Human ends up the narrowest). */
.ask-flow__outcome { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: stretch; gap: 0.7rem; }
.ask-flow__outrow .ask-flow__node { box-sizing: border-box; width: 100%; min-width: 0; flex-direction: row; align-items: center; justify-content: center; gap: 0.4rem; padding: 0.82rem 0.4rem; }
.ask-flow__outrow .ask-flow__outlabel { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ask-flow__pct2 { text-align: center; }
.ask-flow__outicon { display: inline-flex; flex: none; }
.ask-flow__outicon svg { width: 16px; height: 16px; display: block; }
.ask-flow__outlabel { font-weight: 700; font-size: 0.8rem; line-height: 1.2; }
.ask-flow__pct2 { font-family: var(--wp--preset--font-family--heading); font-weight: 800; font-size: 0.95rem; letter-spacing: -0.01em; line-height: 1; }
.ask-flow__node--resolved { background: var(--as-success-tint, #E7F6EC); border-color: transparent; color: var(--as-success-deep, #0E7C3E); }
.ask-flow__node--resolved.is-hit { border-color: var(--as-success, #12A150); box-shadow: 0 18px 40px -20px rgba(18,161,80,.45); }
.ask-flow__outcome:has(.ask-flow__node--resolved) .ask-flow__pct2 { color: var(--as-success-deep, #0E7C3E); }
.ask-flow__node--checkout { background: var(--wp--preset--color--blue-tint, #EAF0FE); border-color: transparent; color: var(--wp--preset--color--blue-deep, #1A4FCC); }
.ask-flow__node--checkout.is-hit { border-color: var(--wp--preset--color--blue, #2766F0); box-shadow: 0 18px 40px -20px rgba(39,72,150,.45); }
.ask-flow__outcome:has(.ask-flow__node--checkout) .ask-flow__pct2 { color: var(--wp--preset--color--blue-deep, #1A4FCC); }
.ask-flow__node--human { background: #fff; color: var(--wp--preset--color--slate-700, #45505F); }
.ask-flow__node--human .ask-flow__outicon { color: var(--wp--preset--color--gray, #919191); }
/* Deflection ratio bar (inbox): how much Chat handles before the inbox. */
.ask-flow__deflect { display: flex; gap: 4px; margin-bottom: clamp(1rem, 3vw, 1.6rem); }
.ask-flow__deflect-seg { border-radius: 10px; padding: 0.55rem 0.7rem; display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.ask-flow__deflect-seg b { font-family: var(--wp--preset--font-family--heading); font-weight: 800; font-size: 1.05rem; line-height: 1; }
.ask-flow__deflect-seg span { font-size: 0.72rem; line-height: 1.3; }
.ask-flow__deflect-seg--chat { background: var(--as-success, #12A150); color: #fff; }
.ask-flow__deflect-seg--inbox { background: var(--wp--preset--color--slate-100, #EDEFF2); color: var(--wp--preset--color--slate-700, #45505F); }
.ask-flow__tokens { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
/* A flying question bubble carrying real copy. */
.ask-flow__token { position: absolute; top: 0; left: 0; will-change: transform, opacity; }
.ask-flow__token--q { transform-origin: center; max-width: 200px; padding: 0.34rem 0.6rem; margin: -14px 0 0 -100px; width: max-content; background: #fff; border: 1px solid var(--wp--preset--color--line, #E6EAF0); border-radius: 12px 12px 12px 4px; box-shadow: 0 10px 24px -14px rgba(49,58,70,.5); font-size: 0.78rem; font-weight: 500; line-height: 1.3; color: var(--wp--preset--color--ink, #313A46); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Result pips: green resolve (check), blue checkout (cart), neutral human dot. */
.ask-flow__token--resolved, .ask-flow__token--checkout, .ask-flow__token--human { width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 999px; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: #fff; line-height: 1; }
.ask-flow__token--resolved { background: var(--as-success, #12A150); box-shadow: 0 0 0 4px rgba(18,161,80,.18); }
.ask-flow__token--checkout { background: var(--wp--preset--color--blue, #2766F0); box-shadow: 0 0 0 4px rgba(39,102,240,.18); }
.ask-flow__token--checkout svg { width: 13px; height: 13px; }
.ask-flow__token--human { width: 14px; height: 14px; margin: -7px 0 0 -7px; background: var(--wp--preset--color--gray, #919191); box-shadow: 0 0 0 4px rgba(145,145,145,.16); }
@media (max-width: 980px) {
	/* minmax(0,1fr) (not 1fr) so the track can shrink below the flow animation's
	   intrinsic width — otherwise the card stretches the page below ~420px. */
	.ask-prodsplit { grid-template-columns: minmax(0, 1fr); max-width: 620px; margin-inline: auto; }
	.ask-prodcol { min-width: 0; }
}
/* Below 375px (where the hero CTAs stack) the flow animation no longer fits the
   card cleanly — hide it; the card keeps its icon, title, lede and CTA. */
@media (max-width: 374px) {
	.ask-flow { display: none; }
}
@media (prefers-reduced-motion: reduce) {
	.ask-flow__tokens { display: none; }
	.ask-flow__node { transition: none; }
}

/* ==========================================================================
   Case-study article components
   ========================================================================== */
/* Facts strip: segmented panel of client facts (label + value cells). */
.ask-cs-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 1px; background: var(--as-line, #E6EAF0); border: 1px solid var(--as-line, #E6EAF0); border-radius: var(--wp--custom--radius--card, 16px); overflow: hidden; }
.ask-cs-facts > * { margin-block-start: 0; background: #fff; padding: 1.1rem 1.3rem; }
.ask-cs-facts__label { margin: 0; font-family: var(--wp--preset--font-family--heading); font-weight: 700; font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--wp--preset--color--gray, #919191); }
.ask-cs-facts__value { margin: 0.35rem 0 0; font-weight: 600; font-size: 0.95rem; color: var(--wp--preset--color--ink, #313A46); line-height: 1.45; }
/* Auto rows (industry / modules / integrations) render linked chips instead of
   plain text — the facts strip carries the internal linking that used to live
   in the hero. Chips sit slightly tighter than a standalone .ask-chip row. */
.ask-cs-facts__chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0.35rem 0 0; }
.ask-cs-facts__chips .ask-chip { font-size: 0.78rem; padding: 3px 11px; }

/* Dark results band: navy variant of the stat band (white numbers, first in
   on-dark blue #6E9BF0, muted labels). */
.ask-statband.ask-statband--dark { background: radial-gradient(680px 460px at 85% -12%, rgba(39, 102, 240, 0.18), rgba(39, 102, 240, 0) 60%), var(--as-dark, #1B2230); border-top: 0; border-bottom: 0; color: #fff; }
.ask-statband--dark :where(h2, h3) { color: #fff; }
.ask-statband--dark .ask-statgrid .ask-stat__num, .ask-statband.ask-statband--dark .ask-statgrid .ask-stat__num { color: #fff; }
.ask-statband.ask-statband--dark .ask-statgrid > *:first-child .ask-stat__num { color: #6E9BF0; }
.ask-statband.ask-statband--dark .ask-statgrid .ask-stat__label { color: #AEB7C5; }

/* Two-step variant (wdrozenie w etapach): wider cards, checklists inside. */
.ask-stepsrow--2 .ask-stepcard { max-width: 480px; }
.ask-stepsrow--2 .ask-stepcard .is-style-check { margin-top: 1rem; gap: 0.6rem; }
.ask-stepsrow--2 .ask-stepcard .is-style-check li { font-size: 0.92rem; }

/* Eyebrow + lede na ciemnym pasie wynikow. */
.ask-statband--dark .ask-eyebrow { color: #8FB0F6; }
.ask-statband--dark .ask-lede { color: #AEB7C5; }

/* Result cards: the number leads, the claim and the proof follow. */
.ask-rescard .ask-stat__num { font-size: clamp(2.1rem, 3vw, 2.75rem); }
.ask-rescard h3 { font-size: 1.1rem; letter-spacing: -0.01em; margin: 0.5rem 0 0; }
.ask-rescard p:not(.ask-stat__num) { color: var(--wp--preset--color--slate, #5E6A7A); font-size: 0.95rem; line-height: 1.6; margin: 0.6rem 0 0; }

/* Closing testimonial: the homepage .ask-tquote card reused statically —
   the slider only initializes inside .ask-tsection, so a lone card stays put. */

/* Case studies index: light cards with the client cover image on top,
   blue key number and hairline border (brandbook: white surfaces, one blue). */
.ask-children--case { grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); }
.ask-childcard--case { padding: 0.9rem 0.9rem 1.4rem; }
.ask-childcard--case .ask-childcard__cover img { aspect-ratio: 16 / 9; }
.ask-childcard__client { font-family: var(--wp--preset--font-family--heading); font-weight: 700; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--wp--preset--color--blue, #2766F0); padding-inline: 0.6rem; }
.ask-childcard__statline { display: flex; flex-direction: column; gap: 0.2rem; padding-inline: 0.6rem; }
.ask-childcard__statline b { font-family: var(--wp--preset--font-family--heading); font-weight: 700; font-size: 1.9rem; letter-spacing: -0.03em; line-height: 1; color: var(--wp--preset--color--blue, #2766F0); }
.ask-childcard__statline span { color: var(--wp--preset--color--slate, #5E6A7A); font-size: 0.85rem; line-height: 1.4; }
.ask-childcard--case .ask-childcard__title { font-size: 1.05rem; line-height: 1.35; padding-inline: 0.6rem; margin-top: 0.35rem; flex: 1; }
.ask-childcard__read { color: var(--wp--preset--color--gray, #919191); font-size: 0.82rem; padding-inline: 0.6rem; }
.ask-childcard__foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-inline: 0.6rem; margin-top: 0.35rem; }
.ask-childcard__foot .ask-childcard__read, .ask-childcard__foot .ask-childcard__more { padding-inline: 0; }
.ask-childcard--case .ask-childcard__more { padding-inline: 0.6rem; white-space: nowrap; }
/* Smallest phones: the 19rem (~304px) column minimum stops fitting once the
   viewport drops below ~345px (304 + the grid's 2×1.25rem side padding), so the
   card overflows its column. Collapse to one shrinkable column — the grid is
   already single-column at this width, this just lets it size down to fit. */
@media (max-width: 480px) {
	.ask-children--case { grid-template-columns: 1fr; }
}

/* Blog index: cover art + meta line. */
.ask-children--post { grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); }
.ask-childcard--post { padding: 0.9rem 0.9rem 1.5rem; }
.ask-childcard__cover { position: relative; display: block; border-radius: 12px; overflow: hidden; margin-bottom: 0.75rem; background: var(--wp--preset--color--blue-tint, #EAF0FE); }
.ask-childcard__cover svg, .ask-childcard__cover img { display: block; width: 100%; height: auto; aspect-ratio: 40 / 21; object-fit: cover; }
/* Chip kategorii na okladce (seed: card_category) — pole, po ktorym filtruje listing. */
.ask-childcard__cat { position: absolute; top: 10px; left: 10px; z-index: 1; background: rgba(255, 255, 255, 0.94); border: 1px solid var(--as-line, #E6EAF0); border-radius: 999px; padding: 0.26rem 0.7rem; font-size: 0.72rem; font-weight: 600; line-height: 1.2; color: var(--wp--preset--color--ink, #313A46); }
.ask-childcard--post .ask-childcard__meta { color: var(--wp--preset--color--gray, #919191); font-size: 0.82rem; padding-inline: 0.6rem; }
.ask-childcard--post .ask-childcard__title, .ask-childcard--post .ask-childcard__desc, .ask-childcard--post .ask-childcard__more { padding-inline: 0.6rem; }

/* "Czytaj dalej" pod artykulem: do trzech kart wpisow (askspot/related-posts);
   sekcja renderuje sie dopiero, gdy blog ma wiecej niz jeden wpis. */
.ask-related { padding: 4.5rem 1.25rem; border-top: 1px solid var(--wp--preset--color--line, #E6EAF0); }
.ask-related .ask-eyebrow { margin: 0 0 0.5rem; text-align: center; }
.ask-related__title { text-align: center; margin: 0 0 2rem; font-size: clamp(1.6rem, 3vw, 2.1rem); }
.ask-related__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 23rem)); justify-content: center; gap: 1.25rem; max-width: 1180px; margin-inline: auto; }

/* ==========================================================================
   Product figures - illustrative panels per "AskSpot Website Graphics"
   (Conversational Search, Guided Discovery, Conversion Nudges, Search
   understanding). Copy lives in core paragraphs; tiles/icons are decorative.
   ========================================================================== */
.ask-fig { background: var(--wp--preset--color--blue-tint, #EAF0FE); border-radius: var(--wp--custom--radius--lg, 18px); padding: clamp(1.25rem, 2.5vw, 1.75rem); }

.ask-fig-search { display: flex; align-items: center; gap: 0.75rem; background: #fff; border-radius: 14px; box-shadow: 0 6px 20px -10px rgba(39, 102, 240, 0.35); padding: 1rem 1.25rem; }
.ask-fig-search::before { content: ""; flex: none; width: 22px; height: 22px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232766F0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m21 21-4-4'/%3E%3Cpath d='M18 4l.6 1.4L20 6l-1.4.6L18 8l-.6-1.4L16 6l1.4-.6Z'/%3E%3C/svg%3E") no-repeat center / contain; }
.ask-fig-search p { margin: 0; color: var(--wp--preset--color--gray, #919191); font-size: 1rem; }

.ask-fig-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.875rem; margin-top: 1.125rem; }
.ask-fig-tile { background: #fff; border-radius: 12px; padding: 0.875rem; }
.ask-fig-tile__img { aspect-ratio: 1; border-radius: 9px; background: linear-gradient(135deg, #F2F4F7, #E4E8EE); position: relative; }
.ask-fig-tile:nth-child(2n) .ask-fig-tile__img { background: linear-gradient(135deg, #E9EDF3, #DCE2EA); }
.ask-fig-tile__img::after { content: ""; position: absolute; right: 8px; bottom: 8px; width: 26px; height: 26px; border-radius: 7px; background: var(--wp--preset--color--blue-tint, #EAF0FE) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232766F0' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m21 21-3-3'/%3E%3C/svg%3E") no-repeat center / 14px; }
.ask-fig-tile__img img { position: absolute; inset: 9%; width: 82%; height: 82%; object-fit: contain; }
.ask-fig-tile__name { margin-top: 0.6rem; font-size: 0.8rem; font-weight: 600; line-height: 1.3; color: var(--wp--preset--color--ink, #313A46); }
.ask-fig-tile__price { margin-top: 0.15rem; font-family: var(--wp--preset--font-family--heading); font-weight: 700; font-size: 0.85rem; color: var(--wp--preset--color--ink, #313A46); }
.ask-fig-tile__stars { color: var(--wp--preset--color--warning, #F5A623); font-size: 0.8rem; letter-spacing: 2px; margin-top: 0.5rem; }
.ask-fig-tile__name + .ask-fig-tile__stars, .ask-fig-tile__price + .ask-fig-tile__stars { margin-top: 0.3rem; }

.ask-fig-chat { display: flex; flex-direction: column; gap: 0.9rem; }
.ask-fig-chat p { margin: 0; max-width: 82%; padding: 0.8rem 1rem; border-radius: 16px 16px 16px 4px; font-size: 0.95rem; line-height: 1.45; background: #fff; color: var(--wp--preset--color--ink, #313A46); align-self: flex-start; box-shadow: 0 4px 12px -8px rgba(0, 0, 0, 0.25); }
.ask-fig-chat p.ask-fig-msg--user { align-self: flex-end; background: var(--wp--preset--color--blue, #2766F0); color: #fff; border-radius: 16px 16px 4px 16px; font-weight: 500; }
.ask-fig-chat mark { background: #D7E6FD; color: var(--wp--preset--color--blue-deep, #1A4FCC); border-radius: 4px; padding: 1px 4px; font-weight: 600; }

.ask-fig-sugg { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.25rem; }
.ask-fig-sugg p { margin: 0; max-width: none; align-self: auto; background: transparent; box-shadow: none; border: 1.5px solid var(--wp--preset--color--blue, #2766F0); color: var(--wp--preset--color--blue, #2766F0); border-radius: 999px; padding: 8px 16px; font-size: 0.85rem; font-weight: 600; }
.ask-fig-typing { align-self: flex-start; display: inline-flex; gap: 5px; background: #fff; border-radius: 16px 16px 16px 4px; padding: 13px 16px; box-shadow: 0 4px 12px -8px rgba(0, 0, 0, 0.25); }
.ask-fig-typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--wp--preset--color--blue, #2766F0); animation: asType 1.4s infinite; }
.ask-fig-typing span:nth-child(2) { animation-delay: 0.2s; }
.ask-fig-typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes asType { 0%, 60%, 100% { transform: translateY(0); opacity: 0.45; } 30% { transform: translateY(-4px); opacity: 1; } }

.ask-fig-nudge { position: relative; overflow: hidden; }
.ask-fig-nudge__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; }
.ask-fig-nudge__grid span { aspect-ratio: 0.8; border-radius: 12px; background: linear-gradient(160deg, #DCE3EC, #C4CEDB); position: relative; overflow: hidden; }
.ask-fig-nudge__grid span:nth-child(2) { background: linear-gradient(160deg, #E6EBF2, #CED7E2); }
/* Ghost product cards: photo area + two text lines, so the backdrop reads as a listing page. */
.ask-fig-nudge__grid span::before { content: ""; position: absolute; left: 10%; right: 10%; top: 9%; height: 52%; border-radius: 8px; background: rgba(255, 255, 255, 0.55); }
.ask-fig-nudge__grid span::after { content: ""; position: absolute; left: 10%; right: 34%; bottom: 13%; height: 7px; border-radius: 4px; background: rgba(255, 255, 255, 0.8); box-shadow: 0 -14px 0 0 rgba(255, 255, 255, 0.65); }
.ask-fig-nudge__pop { position: absolute; left: 50%; top: 44%; transform: translate(-50%, -50%); width: min(74%, 26rem); background: #fff; border-radius: 16px; box-shadow: 0 20px 50px -18px rgba(39, 72, 150, 0.5); padding: 1.1rem 1.25rem; }
.ask-fig-nudge__pop .ask-fig-nudge__from { display: flex; align-items: center; gap: 0.6rem; margin: 0 0 0.6rem; font-family: var(--wp--preset--font-family--heading); font-weight: 600; font-size: 0.95rem; color: var(--wp--preset--color--ink, #313A46); }
.ask-fig-nudge__from::before { content: ""; flex: none; width: 30px; height: 30px; border-radius: 9px; background: var(--wp--preset--color--blue, #2766F0) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Crect width='48' height='48' rx='14' fill='%232766F0'/%3E%3Ccircle cx='16' cy='22' r='4' fill='%23fff'/%3E%3Ccircle cx='27' cy='22' r='4' fill='%23fff'/%3E%3Ccircle cx='37' cy='22' r='4' fill='%23fff' opacity='.55'/%3E%3C/svg%3E") no-repeat center / cover; }
.ask-fig-nudge__pop .ask-fig-nudge__text { margin: 0; font-size: 1.05rem; line-height: 1.45; color: var(--wp--preset--color--ink, #313A46); }
.ask-fig-nudge__text strong { color: var(--wp--preset--color--blue, #2766F0); font-weight: 600; }
.ask-fig-nudge__launcher { position: absolute; right: 1.1rem; bottom: 1.1rem; width: 48px; height: 48px; border-radius: 50%; background: var(--wp--preset--color--blue, #2766F0); box-shadow: 0 12px 26px -8px rgba(39, 102, 240, 0.7); display: flex; align-items: center; justify-content: center; }
.ask-fig-nudge__launcher img { height: 24px; }

/* Search understanding: dark capability chips + example query card. */
.ask-chips-dark { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.875rem; max-width: 760px; margin-inline: auto; }
.ask-chip-dark { display: flex; align-items: center; justify-content: center; gap: 0.65rem; background: var(--wp--preset--color--ink, #313A46); color: #fff; border-radius: 12px; padding: 0.8rem 1.1rem; }
.ask-chip-dark p { margin: 0; font-family: var(--wp--preset--font-family--heading); font-weight: 600; font-size: 0.9rem; color: #fff; }
.ask-chip-dark svg { flex: none; stroke: #6E9BF0; }
.ask-querycard { display: flex; align-items: center; gap: 0.875rem; background: #fff; border: 1px solid var(--as-line, #E6EAF0); border-radius: 14px; box-shadow: 0 14px 36px -20px rgba(39, 72, 150, 0.4); padding: 1.1rem 1.5rem; max-width: 760px; margin: 1.5rem auto; }
.ask-querycard::before { content: ""; flex: none; width: 24px; height: 24px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232766F0' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m21 21-4-4'/%3E%3C/svg%3E") no-repeat center / contain; }
.ask-querycard p { margin: 0; font-family: var(--wp--preset--font-family--heading); font-weight: 600; font-size: clamp(1.05rem, 2vw, 1.25rem); letter-spacing: -0.01em; color: var(--wp--preset--color--ink, #313A46); }

/* Search-understanding flow: query -> capability tiles -> results, joined
   with the same dotted connectors as the steps section. */
.ask-flowcol { display: flex; flex-direction: column; align-items: center; }
.ask-flowcol > * { margin-block-start: 0; }
.ask-flowcol .ask-querycard { margin: 0; width: min(100%, 760px); }
.ask-flow-link { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; height: 44px; }
.ask-flow-link span { width: 8px; height: 8px; border-radius: 50%; background: var(--wp--preset--color--blue, #2766F0); }
.ask-flow-link span:nth-child(2) { opacity: 0.5; }
.ask-flow-link span:nth-child(3) { opacity: 0.25; }
.ask-flowcol .ask-chips-dark { width: min(100%, 760px); margin-inline: 0; }
.ask-fig-tiles--3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.875rem; width: min(100%, 560px); margin: 0; }
.ask-flow-caption { color: var(--wp--preset--color--gray, #919191); font-size: 0.85rem; margin: 0.9rem 0 0; }
@media (max-width: 781px) { .ask-flowcol .ask-fig-tiles--3 { grid-template-columns: repeat(3, 1fr); } }

/* Two-column module rows (copy + figure). */
.ask-module { align-items: center; }

/* Alternating section surface (paper -> surface) like the home v3 rhythm. */
.ask-section--alt { background: var(--wp--preset--color--surface, #EEF2F7); border-top: 1px solid var(--as-line, #E6EAF0); border-bottom: 1px solid var(--as-line, #E6EAF0); }

@media (max-width: 781px) {
	.ask-fig-tiles { grid-template-columns: repeat(2, 1fr); }
	.ask-chips-dark { grid-template-columns: 1fr; }
	.ask-fig-nudge__pop { position: static; transform: none; width: auto; margin-top: 0.75rem; }
}

/* Shared AskSpot mockup panel: the "Conversations" figure on the Security page
   ("Full visibility and control over AI") and the "Results" figure on the
   Case-studies list. Two things made it overflow its column on a narrow
   viewport: (1) the card is content-box, so its width:100% put the 18px padding
   + border *outside* the column width — force border-box so width:100% is the
   whole box; (2) the rows are flex with a nowrap middle label that can't shrink
   without min-width:0, so let the flex children shrink and the label truncates. */
.ask-oversight-panel { box-sizing: border-box; }
.ask-oversight-panel > div { min-width: 0; }
.ask-oversight-panel > div > span { min-width: 0; }
/* Below 375px (where the hero CTAs stack, like the other figures) hide it — the
   copy column carries the section on its own. !important overrides the block's
   inline display:flex. */
@media (max-width: 374px) {
	.ask-oversight-panel { display: none !important; }
}

/* ==========================================================================
   Lead form (Contact Form 7)
   ========================================================================== */
.ask-form { background: #fff; border: 1px solid var(--ask-card-border); border-radius: var(--wp--custom--radius--lg, 18px); padding: clamp(1.5rem, 3vw, 2.25rem); box-shadow: var(--wp--custom--shadow--md); }
.ask-form .ask-field { margin-bottom: 1rem; }
.ask-form label { display: block; font-size: 0.9rem; font-weight: 600; color: var(--wp--preset--color--ink, #313A46); margin-bottom: 0.4rem; }
.ask-form input[type="text"],
.ask-form input[type="email"],
.ask-form input[type="url"],
.ask-form input[type="tel"],
.ask-form select,
.ask-form textarea {
	width: 100%;
	box-sizing: border-box;
	border: 1px solid #D6DBE2;
	border-radius: var(--wp--custom--radius--sm, 10px);
	padding: 12px 14px;
	font-size: 1rem;
	font-family: inherit;
	background: #fff;
	color: var(--wp--preset--color--ink, #313A46);
}
.ask-form select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' stroke='%235E6A7A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 38px; }
.ask-form input:focus,
.ask-form select:focus,
.ask-form textarea:focus { outline: none; border-color: var(--wp--preset--color--blue, #2766F0); box-shadow: 0 0 0 3px var(--wp--preset--color--blue-tint, #EAF0FE); }
.ask-form textarea { min-height: 130px; resize: vertical; }
.ask-form .wpcf7-submit {
	background: var(--wp--preset--color--blue, #2766F0);
	color: #fff;
	border: none;
	border-radius: var(--ask-btn-radius);
	padding: var(--ask-btn-py) var(--ask-btn-px);
	/* <input> does not inherit the page font - without this the site's two
	   conversion buttons ("Book a demo" / "Send") render in the UA default. */
	font-family: var(--wp--preset--font-family--body, Inter, sans-serif);
	font-weight: 600;
	font-size: 1rem;
	cursor: pointer;
	margin-top: 0.5rem;
}
.ask-form .wpcf7-submit:hover { background: var(--wp--preset--color--blue-deep, #1A4FCC); }
.ask-form .wpcf7-submit:active { background: #163F9E; box-shadow: var(--ask-btn-press); }
/* CF7 disables the submit while the request is in flight. */
.ask-form .wpcf7-submit[disabled] { background: var(--wp--preset--color--line, #EDEFF2); color: #A8B0BE; cursor: not-allowed; }
.ask-form .wpcf7-not-valid-tip { color: var(--wp--preset--color--alert, #E5484D); font-size: 0.85rem; margin-top: 0.3rem; }
.ask-form .wpcf7-response-output { border-radius: var(--wp--custom--radius--sm, 10px); padding: 12px 14px; margin: 1rem 0 0; font-size: 0.9rem; }

/* ==========================================================================
   MOCKUP HOMEPAGE
   ========================================================================== */
:root { --ask-navy: #1B2230; }

/* --- Hero --- */
.ask-hero h1, .ask-hero .wp-block-heading { font-size: clamp(2.6rem, 5.3vw, 4.25rem); line-height: 1.02; letter-spacing: -0.035em; margin: 0; }
.ask-hero .ask-lede { font-size: 1.15rem; max-width: 34rem; }
.ask-hero__rating { display: flex; align-items: center; gap: 0.9rem; margin-top: 1.5rem; font-size: 0.95rem; color: var(--wp--preset--color--slate, #5E6A7A); flex-wrap: wrap; }
.ask-hero__rating .ask-stars { color: #F5A623; letter-spacing: 1px; }
.ask-hero__rating b { color: var(--wp--preset--color--ink, #313A46); }
.ask-hero__rating .ask-sep { width: 1px; height: 18px; background: #D6DBE2; display: inline-block; }

/* --- Chat widget "Your Assistant" --- */
.ask-widget { width: 380px; max-width: 100%; margin-left: auto; }
.ask-widget__head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--wp--preset--color--line, #EDEFF2); font-family: var(--wp--preset--font-family--heading); font-weight: 600; font-size: 1.05rem; color: var(--wp--preset--color--ink, #313A46); }
.ask-widget__icons { display: flex; gap: 14px; color: #9aa3b2; }
.ask-widget__body { padding: 20px 18px; display: flex; flex-direction: column; gap: 12px; min-height: 220px; }
.ask-widget__input { display: flex; align-items: flex-end; gap: 10px; margin: 6px 16px 14px; background: #F0F0F2; border-radius: 20px; padding: 12px 16px; color: var(--wp--preset--color--gray, #919191); font-size: 14px; }
.ask-widget__input .ask-send { margin-left: auto; color: var(--wp--preset--color--ink, #313A46); }
.ask-widget__input .ask-send svg { display: block; }
.ask-widget__powered { text-align: center; padding: 0 12px 16px; font-size: 12.5px; color: var(--wp--preset--color--gray, #919191); display: flex; align-items: center; justify-content: center; gap: 6px; }
.ask-widget__powered b { color: var(--wp--preset--color--ink, #313A46); font-family: var(--wp--preset--font-family--heading); }
.ask-widget__pcard { border: 1px solid #EAEDF1; border-radius: 14px; padding: 11px; box-shadow: var(--wp--custom--shadow--sm); background: #fff; }

/* --- Stat band (surface, hairline rules top & bottom; first KPI is blue) --- */
.ask-statband { background: var(--as-surface, #EEF2F7); border-top: 1px solid var(--as-line, #E6EAF0); border-bottom: 1px solid var(--as-line, #E6EAF0); }
/* Optional header rendered inside the band (askspot/belt with belt_heading etc.),
   so a labelled belt is one section rather than a heading floating above a stripe.
   The extra padding only applies when a header is present. */
.ask-statband--titled { padding-top: var(--wp--preset--spacing--70) !important; padding-bottom: var(--wp--preset--spacing--70) !important; }
.ask-statband__head { text-align: center; max-width: 46rem; margin: 0 auto var(--wp--preset--spacing--50, 2.25rem); }
.ask-statband__head > * { margin-block-start: 0; }
.ask-statband__head h2 { margin: 0.4rem 0 0; }
.ask-statband__head .ask-lede { margin: 0.7rem 0 0; }
.ask-statgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2.5rem; text-align: center; }
.ask-statgrid > * { display: flex; flex-direction: column; align-items: center; }
.ask-statgrid .ask-stat__num { color: var(--wp--preset--color--ink, #313A46); }
.ask-statgrid > *:first-child .ask-stat__num { color: var(--wp--preset--color--blue, #2766F0); }
.ask-statgrid .ask-stat__label { max-width: 22ch; }
@media (max-width: 820px) { .ask-statgrid { grid-template-columns: repeat(2, 1fr); gap: 2.5rem 1.5rem; } }

/* --- Icon tile --- */
.ask-icon { width: 46px; height: 46px; border-radius: 12px; background: var(--wp--preset--color--blue-tint, #EAF0FE); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 1rem; }
.ask-icon svg { width: 24px; height: 24px; stroke: var(--wp--preset--color--blue, #2766F0); }

/* --- Navy sections --- */
.ask-navy { background: radial-gradient(680px 520px at 88% -10%, rgba(39,102,240,0.16), rgba(39,102,240,0) 60%), var(--ask-navy); color: #fff; }
.ask-navy :where(h1,h2,h3,h4,p,li,cite,figcaption) { color: #fff; }
.ask-navy .ask-eyebrow { color: #8FB0F6; }
.ask-navy .ask-lede { color: #AEB7C5; }

/* tabs - card buttons (one per capability), like the mockup */
.ask-tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 2.5rem; }
.ask-tab { display: flex; align-items: center; justify-content: center; min-height: 68px; border: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.06); color: #C7CED8; border-radius: 14px; padding: 16px 18px; font-family: var(--wp--preset--font-family--heading); font-weight: 600; font-size: 0.95rem; line-height: 1.3; text-align: center; transition: background .2s var(--as-ease), color .2s var(--as-ease), box-shadow .2s var(--as-ease); }
.ask-tab.is-active { background: #fff; color: var(--wp--preset--color--ink, #313A46); border-color: #fff; box-shadow: 0 10px 26px -12px rgba(0,0,0,0.55); }
@media (max-width: 860px) { .ask-tabs { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) {
	.ask-tabs { grid-template-columns: 1fr; gap: 10px; }
	.ask-tab { min-height: 0; padding: 13px 16px; }
}

/* dark case study card */
.ask-darkcard { background: var(--as-dark-panel, #252E3D); border: 1px solid rgba(255,255,255,0.07); border-radius: 18px; padding: 1.6rem; }
.ask-darkcard .ask-eyebrow { color: #8FB0F6; }
.ask-darkcard a { color: #8FB0F6; font-weight: 600; text-decoration: none; }

/* --- Testimonials (header row + 2-col quote card + controls) --- */
.ask-tsection__head { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 24px; margin-bottom: 2.75rem; }
.ask-tsection__intro { max-width: 560px; }
.ask-tsection__intro h2 { margin: 0.4rem 0 0; }
.ask-tsection__intro .ask-lede { margin-top: 1rem; }
.ask-tsection__all { margin: 0; align-self: center; }
.ask-tsection__all a { display: inline-block; background: var(--wp--preset--color--ink, #313A46); color: #fff; font-weight: 600; font-size: 0.95rem; padding: 14px 26px; border-radius: 12px; text-decoration: none; white-space: nowrap; }
.ask-tsection__all a:hover { background: #1E2530; color: #fff; }
.ask-tsection__viewport { overflow: hidden; }
.ask-tsection__track { display: flex; transition: transform .5s cubic-bezier(.4,0,.2,1); }
.ask-tquote { flex: 0 0 100%; box-sizing: border-box; display: grid; grid-template-columns: 1fr 320px; background: #fff; border: 1px solid var(--as-line, #E6EAF0); border-left: 4px solid var(--wp--preset--color--blue, #2766F0); border-radius: 18px; overflow: hidden; box-shadow: var(--wp--custom--shadow--md); }
.ask-tquote__body { padding: clamp(2rem, 4vw, 3.25rem) clamp(2rem, 4vw, 3.5rem); }
.ask-tquote__brand { font-family: var(--wp--preset--font-family--heading); font-weight: 800; font-size: 1.625rem; letter-spacing: -0.02em; color: #1E2530; margin-bottom: 1.5rem; }
/* The quote body is the post_content (the only thing left in the editor),
   rendered inside a .ask-tquote__text wrapper — style the wrapper and its
   paragraph(s) alike; the blue accent still comes from an inline <span>. */
.ask-tquote__text, .ask-tquote__text p { font-family: var(--wp--preset--font-family--heading); font-size: clamp(0.875rem, 1.33vw, 1.225rem); font-weight: 500; line-height: 1.5; letter-spacing: -0.01em; color: var(--wp--preset--color--ink, #313A46); margin: 0; }
.ask-tquote__text p + p { margin-top: 0.85em; }
.ask-tquote__logo { display: block; height: 32px; width: auto; max-width: 170px; object-fit: contain; object-position: left center; margin-bottom: 1.5rem; }
.ask-tquote__caselink { display: inline-flex; align-items: center; margin-top: 0.9rem; color: var(--wp--preset--color--blue, #2766F0); font-family: var(--wp--preset--font-family--heading); font-weight: 700; font-size: 0.85rem; text-decoration: none; }
.ask-tquote__caselink:hover { color: var(--wp--preset--color--blue-deep, #1A4FCC); }
.ask-tquote__text span { color: var(--wp--preset--color--blue, #2766F0); }
.ask-tquote__author { background: #F4F7FC; border-left: 1px solid #EEF1F6; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.25rem; padding: clamp(2rem, 4vw, 2.75rem) 2rem; text-align: center; }
.ask-tquote__author img { width: 150px; height: 150px; border-radius: 24px; object-fit: cover; box-shadow: 0 16px 36px -18px rgba(20,30,60,0.4); }
.ask-tquote__initials { width: 150px; height: 150px; border-radius: 24px; background: var(--wp--preset--color--blue-tint, #EAF0FE); color: var(--wp--preset--color--blue-deep, #1A4FCC); display: flex; align-items: center; justify-content: center; font-family: var(--wp--preset--font-family--heading); font-weight: 800; font-size: 2.75rem; box-shadow: 0 16px 36px -18px rgba(20,30,60,0.4); }
.ask-tquote__name { font-family: var(--wp--preset--font-family--heading); font-weight: 700; font-size: 1.0625rem; color: #1E2530; }
.ask-tquote__role { font-size: 0.875rem; color: var(--wp--preset--color--slate, #5E6A7A); margin-top: 4px; line-height: 1.4; }
/* Slider (home) author: match the grid's compact 80px round photo (stars size
   and line spacing come from the shared .ask-tquote__meta rules). */
.ask-tsection .ask-tquote__author img, .ask-tsection .ask-tquote__photo,
.ask-case-rel__quote .ask-tquote__author img, .ask-case-rel__quote .ask-tquote__photo { width: 80px; height: 80px; border-radius: 999px; box-shadow: none; }
.ask-tsection .ask-tquote__initials, .ask-case-rel__quote .ask-tquote__initials { width: 80px; height: 80px; border-radius: 999px; font-size: 1.5rem; box-shadow: none; }
.ask-tsection .ask-tquote__meta, .ask-case-rel__quote .ask-tquote__meta { margin-top: 10px; }
/* Nav grouped on the left — the AskSpot chat launcher overlaps the right edge. */
.ask-tsection__controls { display: flex; align-items: center; justify-content: flex-start; gap: 28px; margin-top: 2rem; }
.ask-tdots { display: flex; gap: 8px; align-items: center; }
.ask-tdots span { width: 8px; height: 8px; border-radius: 999px; background: #C6CDD8; }
.ask-tdots span.is-active { width: 24px; background: var(--wp--preset--color--blue, #2766F0); }
.ask-tnav { display: flex; gap: 12px; }
.ask-tnav__btn { width: 48px; height: 48px; border-radius: 50%; background: #fff; border: 1px solid #D6DBE2; display: flex; align-items: center; justify-content: center; color: #A8B0BE; cursor: pointer; transition: opacity .2s var(--as-ease); }
.ask-tnav__btn svg { width: 20px; height: 20px; }
.ask-tnav__btn--next { background: var(--wp--preset--color--blue, #2766F0); border-color: transparent; color: #fff; }
.ask-tnav__btn[disabled] { opacity: 0.4; cursor: default; }
@media (max-width: 760px) { .ask-tquote { grid-template-columns: 1fr; } .ask-tquote__author { border-left: 0; border-top: 1px solid #EEF1F6; } }
/* Terminal "see every testimonial" slide (askspot/testimonials-slider): a solid
   blue CTA card closing the capped carousel, linking to the /testimonials/ listing.
   Carries .ask-tquote so askspot.js counts it as a slide; this override swaps the
   two-column quote layout for a centered panel (mirrors .ask-cs-card--all). */
.ask-tquote.ask-tquote--all { display: flex; align-items: center; justify-content: center; background: var(--wp--preset--color--blue, #2766F0); border-color: transparent; text-decoration: none; transition: background-color 0.15s ease; }
.ask-tquote.ask-tquote--all:hover { background: var(--wp--preset--color--blue-deep, #1A4FCC); }
.ask-tquote--all__inner { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.75rem; padding: clamp(2.5rem, 5vw, 4rem) clamp(1.5rem, 4vw, 3rem); max-width: 34rem; }
.ask-tquote--all__count { display: flex; flex-direction: column; align-items: center; gap: 2px; margin-bottom: 0.5rem; }
.ask-tquote--all__num { font-family: var(--wp--preset--font-family--heading); font-weight: 800; font-size: clamp(2.75rem, 6vw, 4rem); line-height: 1; color: #fff; }
.ask-tquote--all__label { font-size: 0.8rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.82); }
.ask-tquote--all__head { font-family: var(--wp--preset--font-family--heading); font-weight: 800; font-size: clamp(1.35rem, 2.4vw, 1.75rem); letter-spacing: -0.02em; color: #fff; margin: 0; }
.ask-tquote--all__blurb { font-size: 1rem; line-height: 1.5; color: rgba(255,255,255,0.84); margin: 0; }
.ask-tquote--all__more { margin-top: 0.5rem; }
.ask-tquote--all__more span { display: inline-flex; align-items: center; gap: 6px; font-family: var(--wp--preset--font-family--heading); font-weight: 700; font-size: 0.95rem; color: #fff; }
/* Testimonials listing (testimonial CPT, askspot/testimonials-grid): the same
   .ask-tquote cards stacked vertically instead of a slider track. */
.ask-tgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
/* Two-up testimonial cards (50% width): customer info sits UNDER the quote —
   photo on the left, stars/name/role to its right. Scoped to the grid so the
   homepage slider card keeps its own side-by-side layout. */
.ask-tgrid .ask-tquote { display: flex; flex-direction: column; position: relative; }
.ask-tgrid .ask-tquote__body { padding: clamp(1.75rem, 3vw, 2.5rem) clamp(1.5rem, 3vw, 2.5rem) clamp(1.25rem, 2vw, 1.75rem); }
/* Listing-page logo: shorter mark with more breathing room under it than the slider. */
.ask-tgrid .ask-tquote__logo { height: 25px; margin-bottom: 2.5rem; }
.ask-tgrid .ask-tquote__author { display: flex; flex-direction: row; justify-content: flex-start; align-items: center; gap: 16px; margin-top: auto; padding: 1.25rem clamp(1.5rem, 3vw, 2.5rem) clamp(1.5rem, 3vw, 2.25rem); background: transparent; border-left: 0; border-top: 1px solid #EEF1F6; text-align: left; }
.ask-tgrid .ask-tquote__author img, .ask-tgrid .ask-tquote__photo { width: 80px; height: 80px; border-radius: 999px; object-fit: cover; box-shadow: none; flex: none; }
.ask-tgrid .ask-tquote__initials { width: 80px; height: 80px; border-radius: 999px; font-size: 1.5rem; box-shadow: none; flex: none; }
/* Author meta (name / position / stars): shared order + line spacing so the
   grid and the slider read identically. */
.ask-tquote__meta { display: flex; flex-direction: column; }
.ask-tquote__meta .ask-tquote__name { order: 1; margin: 0; }
.ask-tquote__meta .ask-tquote__role { order: 2; margin: 0; }
.ask-tquote__meta .ask-tquote__stars { order: 3; margin: 0; font-size: 1.4rem; }
/* Grid: two middle-aligned blocks — [photo] [name / position / stars]. The text
   block is a fixed 80px column (= photo height) with its three lines centered
   inside. flex:none keeps every line visible (never collapses); each line stays
   single, truncating instead of wrapping the block taller than the photo. */
.ask-tgrid .ask-tquote__meta { height: 80px; justify-content: center; overflow: hidden; min-width: 0; }
.ask-tgrid .ask-tquote__meta > * { flex: 0 0 auto; }
.ask-tgrid .ask-tquote__name, .ask-tgrid .ask-tquote__role { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ask-tgrid .ask-tquote__caselink { position: absolute; top: clamp(1.5rem, 3vw, 2.5rem); right: clamp(1.5rem, 3vw, 2.5rem); margin: 0; }
.ask-tquote__stars { color: #F5A623; letter-spacing: 2px; font-size: 0.95rem; line-height: 1; margin: 0; }
@media (max-width: 860px) { .ask-tgrid { grid-template-columns: 1fr; } }
/* Narrow cards: un-pin the case-study link so it can't overlap a wide company
   logo in the top-left. It flows back into DOM order (logo → quote → link). */
@media (max-width: 480px) {
  .ask-tgrid .ask-tquote__caselink { position: static; margin-top: 1rem; }
  /* Smaller author photo on mobile; keep the meta block matched to its height. */
  .ask-tgrid .ask-tquote__author img, .ask-tgrid .ask-tquote__photo,
  .ask-tgrid .ask-tquote__initials { width: 60px; height: 60px; }
  .ask-tgrid .ask-tquote__initials { font-size: 1.25rem; }
  .ask-tgrid .ask-tquote__meta { height: 60px; }
}

/* Listing pagination (askspot_listing_pagination): /<listing>/page/N/ links
   rendered by core paginate_links(), styled as design-system pills. */
.ask-pagination { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; margin-top: 2.5rem; }
.ask-pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 42px; height: 42px; padding: 0 12px; border: 1px solid #E1E6EE; border-radius: var(--wp--custom--radius--md, 12px); background: #fff; color: var(--wp--preset--color--ink, #313A46); font-weight: 600; font-size: 0.95rem; text-decoration: none; transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease; }
.ask-pagination a.page-numbers:hover { border-color: var(--wp--preset--color--blue, #2766F0); color: var(--wp--preset--color--blue-deep, #1A4FCC); }
.ask-pagination .page-numbers.current { background: var(--wp--preset--color--blue, #2766F0); border-color: transparent; color: #fff; }
.ask-pagination .page-numbers.dots { border: none; background: none; min-width: auto; padding: 0 2px; color: var(--wp--preset--color--slate, #5E6A7A); }
.ask-pagination a.page-numbers:focus-visible { outline: 2px solid var(--wp--preset--color--blue, #2766F0); outline-offset: 2px; }

/* Empty-state line for an archive/search grid with no results (askspot/archive-grid). */
.ask-empty { margin: 1rem auto 2.5rem; color: var(--wp--preset--color--slate, #5E6A7A); font-size: 1.05rem; }

/* --- Case-study card slider (dark section) ---
   Same skeleton as the testimonials section: full-width head (intro left,
   all-link right), full-width slider below it, controls at the bottom. */
.ask-cases__head { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 24px; margin-bottom: 2.75rem; }
.ask-cases__intro { max-width: 560px; }
.ask-cases__intro h2 { margin: 0.4rem 0 0; }
.ask-cases__intro .ask-lede { margin-top: 1rem; }
.ask-cases__all { margin: 0; align-self: center; }
.ask-cases__all a { display: inline-block; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.32); font-weight: 600; font-size: 0.95rem; padding: 13px 25px; border-radius: 12px; white-space: nowrap; color: #fff; text-decoration: none; }
.ask-cases__all a:hover { background: rgba(255, 255, 255, 0.18); }
.ask-cases__controls { display: flex; align-items: center; justify-content: flex-start; gap: 28px; margin-top: 2rem; }
.ask-cases__nav { display: flex; gap: 12px; }
.ask-cs-arrow { width: 50px; height: 50px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.22); background: transparent; color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background .2s var(--as-ease), opacity .2s var(--as-ease); }
.ask-cs-arrow svg { width: 20px; height: 20px; }
.ask-cs-arrow--next { background: var(--wp--preset--color--blue, #2766F0); border-color: transparent; }
.ask-cs-arrow[disabled] { opacity: 0.4; cursor: default; }
.ask-cs-dots { display: flex; gap: 8px; align-items: center; }
.ask-cs-dots span { width: 8px; height: 8px; border-radius: 999px; background: rgba(255,255,255,0.28); cursor: pointer; transition: width .3s var(--as-ease), background .3s var(--as-ease); }
.ask-cs-dots span.is-active { width: 24px; background: var(--wp--preset--color--blue, #2766F0); }
/* Vertical padding gives the card hover (blue border + 2px lift) room so its top
   isn't clipped; overflow stays hidden horizontally to mask the off-screen track
   (padding-left/right is 0, so the horizontal clip edge stays flush). */
.ask-cases__viewport { overflow: hidden; padding: 10px 0; }
.ask-cs-track { display: flex; gap: 22px; transition: transform .5s cubic-bezier(.4,0,.2,1); }
.ask-cs-card { flex: none; width: 360px; max-width: 88vw; background: var(--as-dark-panel, #252E3D); border: 1px solid rgba(255,255,255,0.07); border-radius: 20px; padding: 20px; text-decoration: none; display: block; }
.ask-cs-card__media { height: 150px; border-radius: 13px; overflow: hidden; display: flex; align-items: center; justify-content: center; font-family: var(--wp--preset--font-family--heading); font-weight: 800; letter-spacing: 0.04em; }
.ask-cs-card__media img { width: 100%; height: 100%; object-fit: cover; }
.ask-cs-card__media--text { background: linear-gradient(135deg, #EAEFF5, #D2DAE6); color: #8A93A8; font-size: 24px; letter-spacing: 0.12em; }
.ask-cs-card h3 { color: #fff; font-size: 1.125rem; font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; margin: 1.125rem 0 0; }
.ask-cs-card p { color: var(--as-on-dark-muted, #AEB7C5); font-size: 0.9rem; line-height: 1.6; margin: 0.875rem 0 0; }
.ask-cs-card__more { display: inline-flex; align-items: center; gap: 6px; color: var(--as-on-dark-link, #6E9BF0); font-weight: 600; font-size: 0.9rem; margin-top: 1.125rem; }
.ask-cs-card { transition: border-color 0.15s ease, transform 0.15s ease; }
.ask-cs-card:hover { border-color: var(--wp--preset--color--blue, #2766F0); transform: translateY(-2px); }
.ask-cs-card:hover .ask-cs-card__more span { text-decoration: underline; }

/* Terminal "see them all" card — brand-blue so it never reads as a case study
   card whose cover failed to load. Same box as its siblings, so the track keeps
   one card width and the slider paging stays honest. */
.ask-cs-card--all { background: var(--wp--preset--color--blue, #2766F0); border-color: transparent; transition: background-color 0.15s ease, transform 0.15s ease; }
.ask-cs-card--all:hover { background: var(--wp--preset--color--blue-deep, #1A4FCC); border-color: transparent; }
.ask-cs-card__media--count { flex-direction: column; gap: 2px; background: rgba(255,255,255,0.13); color: #fff; letter-spacing: normal; }
.ask-cs-card__count { font-size: 3.25rem; font-weight: 800; line-height: 1; letter-spacing: -0.03em; }
.ask-cs-card__countlabel { font-family: var(--wp--preset--font-family--body); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.85; text-align: center; padding: 0 12px; }
.ask-cs-card--all p { color: rgba(255,255,255,0.84); }
/* The CTA has to be white on the blue card, and it takes a doubled class to get
   there: home-v3.css paints `.ask-cs-card .ask-cs-card__more span` blue at (0,3,0)
   and loads AFTER this file, so equal specificity would lose. Covers the inner
   span/a as well as the paragraph — the blue-on-blue was only in the span. */
.ask-cs-card.ask-cs-card--all .ask-cs-card__more,
.ask-cs-card.ask-cs-card--all .ask-cs-card__more a,
.ask-cs-card.ask-cs-card--all .ask-cs-card__more span { color: #fff; }

/* --- Idea marki band --- */
.ask-idea { background: radial-gradient(440px 380px at 92% 130%, rgba(39,102,240,0.30), rgba(39,102,240,0) 60%), var(--wp--preset--color--ink, #313A46); border-radius: 24px; padding: clamp(2.5rem, 5vw, 4.5rem); }
.ask-idea .ask-eyebrow { color: #8FB0F6; }
.ask-idea p { color: #fff; font-family: var(--wp--preset--font-family--heading); font-weight: 600; font-size: clamp(1.5rem, 3vw, 2.2rem); line-height: 1.32; letter-spacing: -0.01em; max-width: 30ch; margin: 0.8rem 0 0; }
.ask-idea .ask-accent { color: #8FB0F6; }

/* --- Channels pills --- */
.ask-channels { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 2rem; }
.ask-chan { display: inline-flex; align-items: center; gap: 7px; background: #fff; border: 1px solid #E1E6EE; border-radius: 999px; padding: 7px 15px; font-weight: 600; font-size: 0.875rem; color: var(--wp--preset--color--ink, #313A46); box-shadow: var(--wp--custom--shadow--sm); }
a.ask-chan { text-decoration: none; }
a.ask-chan:focus-visible { outline: 2px solid var(--wp--preset--color--blue, #2766F0); outline-offset: 2px; }
/* The dynamic case-filters block emits a raw <p> (no Gutenberg layout classes
   zeroing margins), so reset it here — a UA-default margin makes the label box
   taller than the icon and breaks the pill's vertical centering. */
.ask-chan p { margin: 0; }
.ask-chan svg { flex: none; width: 15px; height: 15px; stroke: var(--wp--preset--color--blue, #2766F0); }

/* --- Trust row (bezpieczenstwo): cztery gwarancje jako Info cards wg
   design systemu (components.md) — icon tile na brand.tint, tytul Jakarta,
   opis slate. Osobne biale karty, ten sam jezyk co reszta strony. --- */
.ask-trustbar.wp-block-group { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.ask-trust.wp-block-group { display: grid; grid-template-columns: auto 1fr; column-gap: 14px; align-items: center; align-content: center; padding: 18px 20px; background: #fff; border: 1px solid var(--as-line, #E6EAF0); border-radius: var(--wp--custom--radius--card, 16px); box-shadow: var(--wp--custom--shadow--md, 0 6px 16px -10px rgba(49, 58, 70, 0.3)); }
.ask-trust > * { margin: 0; }
/* Na 4 kolumnach kazda karta rezerwuje 2 linie opisu — tytuly i ikony
   trzymaja jedna os niezaleznie od dlugosci tekstu. */
@media (min-width: 1081px) {
	.ask-trust__s.ask-trust__s { min-height: 2.9em; }
}
.ask-trust__ic { grid-row: 1 / 3; width: 46px; height: 46px; border-radius: 12px; background: var(--wp--preset--color--blue-tint, #EAF0FE); display: flex; align-items: center; justify-content: center; }
.ask-trust__ic svg { width: 22px; height: 22px; stroke: var(--wp--preset--color--blue, #2766F0); }
.ask-trust__t.ask-trust__t { font-family: var(--wp--preset--font-family--heading); font-size: 16px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.25; color: var(--wp--preset--color--ink, #313A46); }
.ask-trust__s.ask-trust__s { font-size: 13px; line-height: 1.45; color: var(--wp--preset--color--slate, #5E6A7A); margin-top: 3px; }
@media (max-width: 1080px) {
	.ask-trustbar.wp-block-group { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
	.ask-trustbar.wp-block-group { grid-template-columns: 1fr; gap: 12px; }
	.ask-trust.wp-block-group { padding: 16px 18px; }
}

/* Filtry kategorii na listingu case studies: JS dodaje .is-filter, gdy obok
   pigulek jest siatka .ask-children--case; na pozostalych stronach pigulki
   zostaja dekoracyjne. Aktywny filtr = tint + niebieska ramka. */
.ask-channels.is-filter .ask-chan { cursor: pointer; user-select: none; transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease, transform 0.15s ease; }
.ask-channels.is-filter .ask-chan:hover { border-color: var(--wp--preset--color--blue, #2766F0); transform: translateY(-1px); }
.ask-channels.is-filter .ask-chan:focus-visible { outline: 2px solid var(--wp--preset--color--blue, #2766F0); outline-offset: 2px; }
.ask-channels.is-filter .ask-chan.is-active { background: var(--wp--preset--color--blue-tint, #EAF0FE); border-color: var(--wp--preset--color--blue, #2766F0); color: var(--wp--preset--color--blue-deep, #1A4FCC); }
.ask-channels.is-filter .ask-chan.is-empty { display: none; }
.ask-childcard.is-hidden { display: none; }

/* Case-study filter as a single-row horizontal scroll strip with edge arrows.
   askspot.js toggles .can-left / .can-right on the wrapper by scroll position. */
.ask-filter-title { text-align: center; font-family: var(--wp--preset--font-family--heading); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--wp--preset--color--slate, #5E6A7A); margin: 2rem 0 0.85rem; }
.ask-chanscroll { position: relative; }
/* Arrows hidden by default everywhere (desktop wraps, no scroll); the mobile block
   below styles + reveals them only when there is room to scroll. */
.ask-chanscroll__arw { display: none; }
/* Desktop (>=1024px): the chips fit the 1180px container by wrapping (centered),
   so the scroll/arrow treatment below only kicks in on narrower screens. */
@media (max-width: 1023px) {
	/* padding-inline keeps the first/last chip clear of the arrows, so an arrow tap
	   never lands on the edge chip beneath it. */
	.ask-chanscroll .ask-channels.is-filter { flex-wrap: nowrap; justify-content: flex-start; align-items: center; overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none; scroll-padding-inline: 44px; padding: 8px 44px; margin-top: 0; }
	.ask-chanscroll .ask-channels.is-filter::-webkit-scrollbar { display: none; }
	.ask-chanscroll .ask-channels.is-filter > .ask-chan { flex: 0 0 auto; }
	/* Soft fade under each arrow, shown only when that side can scroll. */
	.ask-chanscroll::before, .ask-chanscroll::after { content: ""; position: absolute; top: 0; bottom: 0; width: 56px; pointer-events: none; z-index: 1; opacity: 0; transition: opacity 0.2s ease; }
	.ask-chanscroll::before { left: 0; background: linear-gradient(to right, var(--wp--preset--color--paper, #FBFCFD), rgba(251, 252, 253, 0)); }
	.ask-chanscroll::after { right: 0; background: linear-gradient(to left, var(--wp--preset--color--paper, #FBFCFD), rgba(251, 252, 253, 0)); }
	.ask-chanscroll.can-left::before, .ask-chanscroll.can-right::after { opacity: 1; }
	/* Circular chevron buttons overlaying the edges. */
	.ask-chanscroll__arw { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; display: none; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border-radius: 999px; background: #fff; border: 1px solid var(--wp--preset--color--line, #E6EAF0); box-shadow: 0 6px 16px -8px rgba(49, 58, 70, 0.35); color: var(--wp--preset--color--ink, #313A46); cursor: pointer; }
	.ask-chanscroll__arw:hover { border-color: var(--wp--preset--color--blue, #2766F0); color: var(--wp--preset--color--blue, #2766F0); }
	.ask-chanscroll__arw svg { width: 18px; height: 18px; }
	/* Inside the container, over the strip's side padding so no chip sits under them. */
	.ask-chanscroll__arw--l { left: 2px; }
	.ask-chanscroll__arw--r { right: 2px; }
	.ask-chanscroll.can-left .ask-chanscroll__arw--l { display: inline-flex; }
	.ask-chanscroll.can-right .ask-chanscroll__arw--r { display: inline-flex; }
}

/* --- Case study relations (chips) + linked testimonial --- */
.ask-case-rel { display: flex; flex-direction: column; gap: 10px; margin: 1.6rem 0 2rem; }
.ask-case-rel__row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 12px; }
.ask-case-rel__label { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--wp--preset--color--slate, #5E6A7A); min-width: 88px; }
.ask-case-rel__chips { display: inline-flex; flex-wrap: wrap; gap: 8px; }
.ask-chip { display: inline-flex; align-items: center; text-decoration: none; background: var(--wp--preset--color--blue-tint, #EAF0FE); color: var(--wp--preset--color--blue-deep, #1A4FCC); border-radius: 999px; padding: 4px 13px; font-size: 0.82rem; font-weight: 600; line-height: 1.5; transition: background 0.15s ease; }
.ask-chip:hover { background: #dfe8fd; }
.ask-case-rel__quote { margin: 1.6rem 0; }
.ask-childcard__statrow { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
/* Product-module chips overlaid on the cover, top-right — mirrors the industry chip (__cat, top-left). */
.ask-childcard__mods { position: absolute; top: 10px; right: 10px; z-index: 1; display: flex; flex-wrap: wrap; justify-content: flex-end; align-content: flex-start; gap: 6px; max-width: 62%; }
.ask-childcard__chip { display: inline-flex; align-items: center; background: rgba(255, 255, 255, 0.94); border: 1px solid var(--as-line, #E6EAF0); color: var(--wp--preset--color--blue-deep, #1A4FCC); border-radius: 999px; padding: 0.26rem 0.7rem; font-size: 0.72rem; font-weight: 600; line-height: 1.2; }

/* --- Steps with ghost numbers --- */
.ask-step { position: relative; overflow: hidden; }
.ask-step__ghost { position: absolute; top: -0.5rem; right: 0.5rem; font-family: var(--wp--preset--font-family--heading); font-weight: 700; font-size: 6rem; line-height: 1; color: #EAF0FE; user-select: none; }
.ask-step__ic { width: 46px; height: 46px; border-radius: 12px; background: var(--wp--preset--color--blue, #2766F0); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 1rem; position: relative; }
.ask-step__ic svg { width: 22px; height: 22px; stroke: #fff; }
.ask-step .wp-block-heading { min-height: 2.7em; }
.ask-card-grid.is-layout-grid > .ask-card { height: 100%; }

/* --- "How it works" steps, 1:1 with the v3 standalone (icon tile + KROK
   label, dotted connectors, third card in brand blue) --- */
.ask-stepsrow { display: flex; align-items: stretch; justify-content: center; }
.ask-stepcard { position: relative; flex: 1; max-width: 340px; background: #fff; border: 1px solid var(--as-line, #E6EAF0); border-radius: 20px; padding: 32px; }
.ask-stepcard > * { margin-block-start: 0; }
.ask-stepcard__ic { width: 52px; height: 52px; border-radius: 15px; background: var(--wp--preset--color--blue-tint, #EAF0FE); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 24px; }
.ask-stepcard__ic svg { width: 25px; height: 25px; stroke: var(--wp--preset--color--blue, #2766F0); }
/* Module chip on a rollout step — links to the product page, so the generic
   "what this module does" lives there and the step card can only carry what is
   specific to this merchant. Line-height on the step counter matches the chip's
   rendered height so the two sit on the same line; the counter is absolutely
   positioned, so it cannot align itself against a flow sibling. */
/* The chip paragraph must start flush at the card's 32px padding edge so it
   lines up with the absolutely-positioned step counter opposite it. Two things
   fight that: `.ask-stepcard p:not(.ask-stepcard__num)` below sets margin-top:11px
   at equal specificity but later in the file, and as an inline-flex child on a
   text baseline the chip picks up the line box's leading. Hence the extra
   :not() to win on specificity, and flex-start so the chip keeps its own
   height instead of stretching to the paragraph. */
.ask-stepcard > p:first-child:not(.ask-stepcard__num) { display: flex; align-items: flex-start; margin: 0 0 16px; }
.ask-stepcard .ask-chip { font-size: 0.76rem; padding: 3px 11px; }
.ask-stepcard:has(.ask-chip) .ask-stepcard__num { line-height: 24px; }

/* The step's H3 is the action taken ("Internal order API integration"); this
   subtitle carries the plain-language scope it covers ("Everyday order
   questions"), so the card scans for both a technical and a commercial reader.
   The :not() is to out-specify `.ask-stepcard p:not(.ask-stepcard__num)` below,
   which would otherwise push it 11px off the heading. */
.ask-stepcard > p.ask-stepcard__sub:not(.ask-stepcard__num) { margin: 5px 0 0; font-size: 0.86rem; font-weight: 700; color: var(--wp--preset--color--slate, #5E6A7A); }

/* Label above the question pills. Without it the pills read as generic tags —
   this names them as the things shoppers actually type. */
.ask-stepcard > p.ask-stepcard__qlabel:not(.ask-stepcard__num) { margin: 1.15rem 0 0.5rem; font-family: var(--wp--preset--font-family--heading); font-weight: 700; font-size: 0.68rem !important; letter-spacing: 0.12em; text-transform: uppercase; color: var(--wp--preset--color--gray, #919191); }

/* Questions the step covers, as flat grey pills. Deliberately NOT the blue
   .ask-chip used for the module above: that one is a link to a product page,
   these are labels. Same shape, clearly lower in the hierarchy. Stays a core
   list block so it is still editable in WP. */
.ask-stepcard__topics { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0 !important; padding: 0; }
.ask-stepcard__topics li { background: var(--as-surface, #EEF2F7); color: var(--wp--preset--color--slate, #5E6A7A); border-radius: 999px; padding: 4px 11px; font-size: 0.78rem; line-height: 1.4; }

/* "Before" stat list — the right-hand column of the challenge section. Reads as
   a compact ledger of the pre-AI state, mirroring the results band opposite. */
.ask-beforelist { padding: 0.35rem 1.35rem !important; }
.ask-beforelist__row { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: 0.85rem 0; border-bottom: 1px solid var(--as-line, #E6EAF0); }
.ask-beforelist__row:last-child { border-bottom: 0; }
.ask-beforelist__row > * { margin-block-start: 0; }
.ask-beforelist__label { margin: 0; font-size: 0.88rem; color: var(--wp--preset--color--slate, #5E6A7A); }
.ask-beforelist__num { margin: 0; font-family: var(--wp--preset--font-family--heading); font-weight: 700; font-size: 1.35rem; line-height: 1.1; color: var(--wp--preset--color--ink, #313A46); white-space: nowrap; }
.ask-stepcard__num { position: absolute; top: 32px; right: 32px; margin: 0; font-family: var(--wp--preset--font-family--heading); font-weight: 700; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: #C2CCDA; }
.ask-stepcard h3 { font-size: 20px; font-weight: 700; letter-spacing: -0.01em; margin: 0; color: var(--wp--preset--color--ink, #313A46); }
.ask-stepcard p:not(.ask-stepcard__num) { font-size: 15px; line-height: 1.6; color: var(--wp--preset--color--slate, #5E6A7A); margin: 11px 0 0; }
.ask-steps__link { flex: none; width: 56px; display: flex; align-items: center; justify-content: center; gap: 7px; margin-block-start: 0; }
.ask-steps__link span { width: 8px; height: 8px; border-radius: 50%; background: var(--wp--preset--color--blue, #2766F0); }
.ask-steps__link span:nth-child(2) { opacity: 0.5; }
.ask-steps__link span:nth-child(3) { opacity: 0.25; }
/* Connector dots pulse in sequence. Defined here (global stylesheet) so the
   animation runs on every page the steps/reliability section appears on, not
   only the home-v3 pages that load assets/css/home-v3.css. */
@keyframes askFlowDot { 0%, 100% { opacity: 0.25; transform: scale(1); } 50% { opacity: 1; transform: scale(1.3); } }
.ask-stepsrow .ask-steps__link span { animation: askFlowDot 1.8s ease-in-out infinite; }
.ask-stepsrow .ask-steps__link span:nth-child(2) { animation-delay: 0.3s; }
.ask-stepsrow .ask-steps__link span:nth-child(3) { animation-delay: 0.6s; }
@media (prefers-reduced-motion: reduce) { .ask-stepsrow .ask-steps__link span { animation: none; } }
.ask-stepcard--brand { background: var(--wp--preset--color--blue, #2766F0); border-color: var(--wp--preset--color--blue, #2766F0); }
.ask-stepcard--brand .ask-stepcard__ic { background: rgba(255, 255, 255, 0.16); }
.ask-stepcard--brand .ask-stepcard__ic svg { stroke: #fff; }
.ask-stepcard--brand .ask-stepcard__num { color: rgba(255, 255, 255, 0.55); }
.ask-stepcard--brand h3 { color: #fff; }
.ask-stepcard--brand p:not(.ask-stepcard__num) { color: #D7E3FB; }
/* Four-step variant (product page): tighter cards, same anatomy. */
.ask-stepsrow--4 .ask-stepcard { max-width: none; padding: 26px; }
.ask-stepsrow--4 .ask-stepcard__num { top: 26px; right: 26px; }
/* No min-height on the title: a one-line step title should not reserve two lines.
   Where card bodies need to align, keep the titles the same length in the copy —
   that is an editorial call, not a CSS one. */
.ask-stepsrow--4 .ask-stepcard h3 { font-size: 18px; line-height: 1.3; }
.ask-stepsrow--4 .ask-steps__link { width: 40px; }
@media (max-width: 900px) {
	.ask-stepsrow { flex-direction: column; align-items: center; }
	.ask-stepcard { width: 100%; }
	.ask-steps__link { flex-direction: column; width: auto; height: 48px; }
}

/* --- Final CTA blue band --- */
.ask-ctablue { background: radial-gradient(700px 380px at 18% 0%, rgba(255,255,255,0.18), rgba(255,255,255,0) 55%), var(--wp--preset--color--blue, #2766F0); border-radius: 24px; padding: clamp(2.75rem, 5vw, 4.5rem); text-align: center; color: #fff; }
.ask-ctablue h2 { color: #fff; font-size: clamp(1.9rem, 3.6vw, 2.75rem); }
.ask-ctablue p { color: rgba(255,255,255,0.9); margin: 0.85rem auto 0; max-width: 36rem; }
.ask-ctablue__actions { display: flex; gap: 0.75rem; justify-content: center; flex-wrap: wrap; margin-top: 1.9rem; }
/* Anchor variants (cta-band block); the wp:button variant is styled on the
   inner link in home-v3.css - keep the wrapper unstyled to avoid double boxes. */
.ask-ctablue a.ask-btn-white { background: #fff; color: var(--wp--preset--color--blue, #2766F0); font-weight: 600; border-radius: var(--ask-btn-radius); padding: var(--ask-btn-py) var(--ask-btn-px); text-decoration: none; }
.ask-ctablue a.ask-btn-white:hover { background: #EAF0FE; color: var(--wp--preset--color--blue-deep, #1A4FCC); }
.ask-ctablue a.ask-btn-white:active { background: #DCE6FC; color: #163F9E; box-shadow: var(--ask-btn-press); }
.ask-ctablue a.ask-btn-outline { background: rgba(255,255,255,0.12); color: #fff; border: 1px solid rgba(255,255,255,0.55); font-weight: 600; border-radius: var(--ask-btn-radius); padding: calc(var(--ask-btn-py) - 1px) calc(var(--ask-btn-px) - 1px); text-decoration: none; }
.ask-ctablue a.ask-btn-outline:hover { background: rgba(255,255,255,0.2); border-color: #fff; color: #fff; }
.ask-ctablue a.ask-btn-outline:active { background: rgba(255,255,255,0.28); border-color: #fff; color: #fff; box-shadow: var(--ask-btn-press); }

/* primary button with arrow (hero) - same geometry as the core primary, so a
   page hero and a core buttons row read as the same component. */
.ask-btn-primary { display: inline-flex; align-items: center; gap: 0.5rem; background: var(--wp--preset--color--blue, #2766F0); color: #fff; font-weight: 600; border-radius: var(--ask-btn-radius); padding: var(--ask-btn-py) var(--ask-btn-px); text-decoration: none; }
.ask-btn-primary:hover { background: var(--wp--preset--color--blue-deep, #1A4FCC); color: #fff; }
.ask-btn-primary:active { background: #163F9E; color: #fff; box-shadow: var(--ask-btn-press); }
.ask-btn-ghost { display: inline-flex; align-items: center; background: #fff; color: var(--wp--preset--color--ink, #313A46); border: 1px solid #D6DBE2; font-weight: 600; border-radius: var(--ask-btn-radius); padding: calc(var(--ask-btn-py) - 1px) calc(var(--ask-btn-px) - 1px); text-decoration: none; }
.ask-btn-ghost:hover { border-color: var(--wp--preset--color--blue, #2766F0); color: var(--wp--preset--color--blue, #2766F0); }
.ask-btn-ghost:active { border-color: var(--wp--preset--color--blue-deep, #1A4FCC); color: var(--wp--preset--color--blue-deep, #1A4FCC); background: var(--wp--preset--color--blue-tint, #EAF0FE); box-shadow: var(--ask-btn-press); }

/* CTA band wrapper (inner pages): 96px envelope — top 32px + main's 64px
   bottom padding, bottom 16px + the footer's 80px top margin. */
.ask-cta-wrap { padding: 2rem 1.25rem 1rem; }
.ask-cta-wrap .ask-bar { max-width: 1180px; margin-inline: auto; }

/* ==========================================================================
   Animated chat widget
   ========================================================================== */
.ask-chat__body { display: flex; flex-direction: column; gap: 12px; padding: 18px; height: 360px; overflow-y: auto; scrollbar-width: thin; }
/* Assistant row (avatar + name + time + speaker) */
.ask-arow { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--wp--preset--color--slate, #5E6A7A); align-self: flex-start; max-width: 100%; }
.ask-arow .ask-av { width: 22px; height: 22px; border-radius: 6px; background: #EAF0FE; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.ask-arow .ask-av img { width: 15px; height: 15px; }
.ask-arow .ask-aname { font-weight: 600; color: var(--wp--preset--color--ink, #313A46); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ask-arow .ask-spk { margin-left: 4px; color: #9aa3b2; flex: none; }
.ask-umsg { display: flex; flex-direction: column; align-items: flex-end; align-self: flex-end; max-width: 88%; gap: 4px; }
.ask-meta { font-size: 11px; color: var(--wp--preset--color--gray, #919191); }
/* Composer typewriter: placeholder text span + blinking caret */
.ask-widget__input .ask-ph { flex: 1 1 auto; min-width: 0; white-space: normal; overflow: visible; overflow-wrap: anywhere; line-height: 1.35; }
.ask-widget__input .ask-ph.is-typing { color: var(--wp--preset--color--ink, #313A46); }
/* Typing caret is an inline ::after on the text so it follows the last character
   (even across a wrapped second line), not a sibling pinned to the field edge. */
.ask-caret { display: none; }
.ask-widget__input .ask-ph.is-typing::after { content: ""; display: inline-block; width: 2px; height: 1.05em; margin-left: 1px; background: var(--wp--preset--color--ink, #313A46); vertical-align: -0.12em; animation: askBlink 1s steps(1) infinite; }
@keyframes askBlink { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } }

/* Suggestion pills - contextual reply step (appended after a bot turn, aligned right) */
.ask-sugg { display: flex; flex-wrap: wrap; gap: 7px; align-self: flex-end; justify-content: flex-end; max-width: 100%; }
.ask-sugg span { border: 1.5px solid var(--wp--preset--color--blue, #2766F0); color: var(--wp--preset--color--blue, #2766F0); border-radius: 999px; padding: 7px 14px; font-size: 13px; font-weight: 600; }
/* input icon row */
.ask-send { display: inline-flex; gap: 12px; align-items: center; }
.ask-botgrp { display: flex; flex-direction: column; gap: 6px; align-self: flex-start; max-width: 90%; }
.ask-botgrp .ask-b { align-self: flex-start; }
.ask-b { font-size: 14px; line-height: 1.45; padding: 11px 15px; border-radius: 18px; max-width: 86%; }
.ask-b--user { align-self: flex-end; background: var(--wp--preset--color--blue, #2766F0); color: #fff; border-radius: 18px 18px 5px 18px; font-weight: 500; }
.ask-b--bot { align-self: flex-start; background: #EFEFF1; color: var(--wp--preset--color--ink, #313A46); border-radius: 18px 18px 18px 5px; }
.ask-b.ask-typing { display: inline-flex; gap: 5px; align-items: center; width: auto; }
/* Assistant reply that is a picture (virtual try-on / visualisation preview). */
.ask-b--img { padding: 6px; max-width: 74%; }
.ask-b--img img { display: block; width: 100%; border-radius: 14px 14px 4px 14px; background: #fff; }
.ask-b--img em { display: block; font-style: normal; font-size: 12px; color: var(--wp--preset--color--slate, #5E6A7A); padding: 6px 6px 3px; }
.ask-typing span { width: 7px; height: 7px; border-radius: 50%; background: #9aa3b2; display: inline-block; animation: askType 1.4s infinite; }
.ask-typing span:nth-child(2) { animation-delay: 0.2s; }
.ask-typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes askType { 0%,60%,100% { transform: translateY(0); opacity: 0.4; } 30% { transform: translateY(-4px); opacity: 1; } }

.ask-pslider { position: relative; align-self: stretch; margin: 2px -2px 0; }
.ask-pslider__track { display: flex; gap: 10px; overflow-x: auto; scroll-behavior: smooth; scrollbar-width: none; padding: 2px; }
.ask-pslider__track::-webkit-scrollbar { display: none; }
.ask-pcard { flex: 0 0 200px; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--as-line, #E6EAF0); border-radius: 14px; padding: 12px; }
.ask-pcard__img { background: #fff; border-radius: 10px; overflow: hidden; aspect-ratio: 1.15; display: flex; align-items: center; justify-content: center; }
.ask-pcard__img img { width: 100%; height: 100%; object-fit: contain; }
.ask-pcard__price { font-family: var(--wp--preset--font-family--heading); font-weight: 700; font-size: 14px; color: var(--wp--preset--color--ink, #313A46); margin-top: 10px; }
.ask-pcard__name { font-size: 13px; color: var(--wp--preset--color--ink, #313A46); line-height: 1.35; margin-top: 3px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ask-pcard__rating { color: var(--wp--preset--color--warning, #F5A623); font-size: 12.5px; margin-top: 5px; }
.ask-pcard__rating span { color: var(--wp--preset--color--gray, #919191); }
.ask-pcard__feats { display: flex; flex-direction: column; gap: 7px; margin-top: 9px; }
.ask-pcard__feats span { display: flex; gap: 7px; align-items: flex-start; font-size: 12.5px; line-height: 1.3; color: var(--wp--preset--color--slate, #5E6A7A); }
.ask-pcard__feats svg { flex: none; margin-top: 1px; }
.ask-pcard__feats em { font-style: normal; }
.ask-pcard__actions { display: flex; align-items: center; justify-content: center; gap: 20px; margin-top: auto; padding-top: 11px; border-top: 1px solid #EEF1F5; }
.ask-pcard__actions button { background: none; border: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; font-family: inherit; font-weight: 600; font-size: 13px; color: var(--wp--preset--color--blue, #2766F0); padding: 0; }
.ask-pcard__actions svg { flex: none; }
.ask-pslider__arrow { position: absolute; right: -2px; top: 42%; transform: translateY(-50%); width: 30px; height: 30px; border-radius: 50%; background: #fff; border: 1px solid var(--as-line, #E6EAF0); display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 2; }
/* Add-to-cart confirmation card (brand tint + check, stands out from bubbles). */
.ask-cartok { align-self: flex-start; display: flex; align-items: center; gap: 11px; background: var(--wp--preset--color--blue-tint, #EAF0FE); border: 1px solid #DCE8FB; border-radius: 14px; padding: 11px 14px; max-width: 92%; }
.ask-cartok__ic { flex: none; width: 30px; height: 30px; border-radius: 50%; background: #fff; display: inline-flex; align-items: center; justify-content: center; }
.ask-cartok__body { display: flex; flex-direction: column; gap: 2px; }
.ask-cartok__body b { font-size: 13.5px; font-weight: 600; color: var(--wp--preset--color--blue-deep, #1A4FCC); }
.ask-cartok__body em { font-style: normal; font-size: 12.5px; color: var(--wp--preset--color--slate, #5E6A7A); }
/* Tracking-link line inside the order card (demo widget: link-styled, non-interactive). */
.ask-cartok__link { font-size: 13px; font-weight: 600; color: var(--wp--preset--color--blue, #2766F0); margin-top: 3px; }

.ask-status { align-self: flex-start; display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid #EAEDF1; border-radius: 14px; padding: 12px 14px; max-width: 92%; font-size: 13.5px; color: var(--wp--preset--color--ink, #313A46); }
.ask-status svg { flex: none; }

/* Numbers belt (askspot/belt) reuses the default .ask-statband / .ask-statgrid
   template — no belt-specific styles needed. */

/* Case-study testimonial (askspot/case-testimonial). The section carries its own
   tint here rather than in a seed wrapper group, so a case study with no linked
   testimonial renders nothing at all instead of an empty coloured band. */
.ask-tquote-sec { background: var(--wp--preset--color--surface, #EEF2F7); }
/* The seed used to wrap this in a constrained group (contentSize 1180px); now the
   block emits its own alignfull band, so the 1180px cap has to live here. */
.ask-tquote-sec > * { max-width: 1180px; margin-inline: auto; }

/* ==========================================================================
   Inbox-agent triage (askspot/inbox-triage): resolved-by-AI vs sent-to-team.
   ========================================================================== */
.ask-triage-sec { background: #fff; }
.ask-triage-sec h2 { max-width: 22ch; }
.ask-triage-sec .ask-lede { max-width: 46rem; }
.ask-triage { margin-top: var(--wp--preset--spacing--50, 2.25rem); display: grid; grid-template-columns: minmax(190px, 250px) 1fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
.ask-triage__num { margin: 0; font-family: var(--wp--preset--font-family--heading); font-weight: 700; font-size: clamp(3rem, 6vw, 4.25rem); line-height: 1; letter-spacing: -0.03em; color: var(--wp--preset--color--blue, #2766F0); }
/* ==========================================================================
   Hero aside — inbox queue that clears itself (Inbox-agent page).
   Tickets stagger in, get classified, then settle as resolved / handed over.
   Pure CSS; reuses .ask-triage__cat--* pills so it matches the triage section.
   ========================================================================== */
.ask-inboxq { box-sizing: border-box; width: 380px; max-width: 100%; background: #fff; border: 1px solid var(--wp--preset--color--line, #E6EAF0); border-radius: 18px; box-shadow: 0 18px 40px -20px rgba(39, 72, 150, .45); padding: 16px 16px 14px; }
.ask-inboxq *, .ask-inboxq *::before, .ask-inboxq *::after { box-sizing: border-box; }
.ask-inboxq__head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 11px; border-bottom: 1px solid var(--wp--preset--color--line, #E6EAF0); }
.ask-inboxq__ttl { font-family: var(--wp--preset--font-family--heading); font-weight: 700; font-size: 14px; color: var(--wp--preset--color--ink, #313A46); }
.ask-inboxq__live { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--wp--preset--color--slate, #5E6A7A); }
.ask-inboxq__live i { width: 6px; height: 6px; border-radius: 999px; background: #1D9E75; animation: askQPulse 2s ease-in-out infinite; }
/* Conveyor: a ticket enters at the top, steps down slot by slot, and at the
   bottom either resolves and drops out, or slides out right to the team.
   Negative animation-delay staggers the five rows so the queue starts full. */
.ask-inboxq__list { list-style: none; margin: 0; padding: 10px 0 0; position: relative; height: 232px; overflow: hidden; }
.ask-inboxq__row { position: absolute; top: 10px; left: 0; right: 0; display: grid; grid-template-columns: 20px 22px 1fr auto 18px; align-items: center; gap: 8px; padding: 9px 10px; background: #fff; border: 1px solid var(--wp--preset--color--line-soft, #E1E5EB); border-radius: 12px; opacity: 0; animation: askQFlow 10s cubic-bezier(.4,0,.2,1) infinite; animation-delay: calc(var(--i) * -2s); }
.ask-inboxq__row--team { animation-name: askQFlowTeam; }
.ask-inboxq__ch { display: inline-flex; color: var(--wp--preset--color--slate, #5E6A7A); }
.ask-inboxq__ch svg { width: 16px; height: 16px; }
.ask-inboxq__lang { font-family: var(--wp--preset--font-family--heading); font-weight: 700; font-size: 9.5px; letter-spacing: .06em; color: var(--wp--preset--color--slate, #5E6A7A); background: var(--wp--preset--color--surface, #EEF2F7); border-radius: 999px; padding: 3px 0; text-align: center; }
.ask-inboxq__subj { font-size: 12.5px; line-height: 1.3; color: var(--wp--preset--color--ink, #313A46); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ask-inboxq__cat { font-size: 10px; padding: 3px 8px; border-radius: 999px; white-space: nowrap; animation: askQCat 10s ease infinite; animation-delay: calc(var(--i) * -2s); }
/* Solid round badge rather than a bare stroke — at 18px a filled disc with a
   white glyph stays legible while the row is moving. */
.ask-inboxq__end { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 999px; color: #fff; opacity: 0; animation: askQEnd 10s ease infinite; animation-delay: calc(var(--i) * -2s); }
/* display:block — an inline SVG sits on the text baseline, which pushes the
   glyph a couple of px off-centre inside the disc. */
.ask-inboxq__end svg { display: block; width: 11px; height: 11px; }
.ask-inboxq__end--ok { background: #1D9E75; }
.ask-inboxq__end--team { background: #9A6B12; }
.ask-inboxq__foot { margin: 12px 0 0; font-size: 11px; line-height: 1.45; color: var(--wp--preset--color--slate, #5E6A7A); }
/* Slot pitch is 56px (row ~49px + 7px gap); 4 slots visible, the 5th is entering.
   The whole list shifts at once, like a queue pinned to the bottom: every move
   burst sits on a 20% boundary and the row stagger is exactly -20% (-2s of 10s),
   so all five rows step together — the bottom one leaves, the rest slide down a
   slot, and a new ticket drops into the space freed at the top. One tick = 2s
   (1.5s hold + 0.5s move); keep duration = 5 x stagger or the shift desyncs. */
@keyframes askQFlow {
	0%   { transform: translateY(-56px); opacity: 0; }
	5%   { transform: translateY(0);     opacity: 1; }
	20%  { transform: translateY(0);     opacity: 1; }
	25%  { transform: translateY(56px);  opacity: 1; }
	40%  { transform: translateY(56px);  opacity: 1; }
	45%  { transform: translateY(112px); opacity: 1; }
	60%  { transform: translateY(112px); opacity: 1; }
	65%  { transform: translateY(168px); opacity: 1; }
	80%  { transform: translateY(168px); opacity: 1; }
	85%  { transform: translateY(232px); opacity: 0; }
	100% { transform: translateY(232px); opacity: 0; }
}
@keyframes askQFlowTeam {
	0%   { transform: translate(0, -56px); opacity: 0; }
	5%   { transform: translate(0, 0);     opacity: 1; }
	20%  { transform: translate(0, 0);     opacity: 1; }
	25%  { transform: translate(0, 56px);  opacity: 1; }
	40%  { transform: translate(0, 56px);  opacity: 1; }
	45%  { transform: translate(0, 112px); opacity: 1; }
	60%  { transform: translate(0, 112px); opacity: 1; }
	65%  { transform: translate(0, 168px); opacity: 1; }
	80%  { transform: translate(0, 168px); opacity: 1; }
	85%  { transform: translate(115%, 168px); opacity: 0; }
	100% { transform: translate(115%, 168px); opacity: 0; }
}
/* The classification pill hands over to the outcome badge as the row lands in
   the SECOND slot (25%). The ticket then rides down three more slots still
   showing its badge, so only the freshly-arrived top row is unresolved and
   markers stay visible across the list rather than only in the last position. */
@keyframes askQCat { 0%, 24% { opacity: 1; } 30%, 100% { opacity: 0; } }
@keyframes askQEnd { 0%, 25% { opacity: 0; transform: scale(.5); } 32%, 100% { opacity: 1; transform: none; } }
@keyframes askQPulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) {
	/* Rows are absolutely positioned for the conveyor — without motion they would
	   stack, so fall back to a plain static list showing the settled state. */
	.ask-inboxq__row, .ask-inboxq__cat, .ask-inboxq__end, .ask-inboxq__live i { animation: none; }
	.ask-inboxq__list { position: static; height: auto; display: flex; flex-direction: column; gap: 7px; }
	.ask-inboxq__row { position: static; opacity: 1; transform: none; }
	.ask-inboxq__cat { opacity: 1; }
	.ask-inboxq__end { opacity: 1; transform: none; }
}

/* "Learn more" link closing the inbox-triage section on industry pages —
   mirrors the .ask-seclink pattern used by the security section below it. */
.ask-triage__more { margin: var(--wp--preset--spacing--40, 1.6rem) 0 0; text-align: right; }
.ask-triage__more a { font-weight: 600; text-decoration: none; color: var(--wp--preset--color--blue, #2766F0); }
.ask-triage__more a:hover, .ask-triage__more a:focus-visible { text-decoration: underline; color: var(--wp--preset--color--blue-deep, #1A4FCC); }

/* "up to" qualifier before the stat — mirrors .ask-stat__pre on the numbers belt. */
.ask-triage__pre { display: inline-block; vertical-align: baseline; font-family: var(--wp--preset--font-family--heading); font-weight: 700; font-size: clamp(0.95rem, 1.5vw, 1.15rem); letter-spacing: 0; line-height: 1; opacity: 0.72; margin-right: 0.28em; }
.ask-triage__cap { margin: 0.55rem 0 0; color: var(--wp--preset--color--slate, #5E6A7A); line-height: 1.4; font-size: 0.95rem; max-width: 18rem; }
/* Fixed 60/40 — AI column left, team column right. Deliberately NOT proportional
   to the stat: these are two example lists, not a chart, and the real split is
   already stated by the number above them. */
.ask-triage__cols { display: grid; grid-template-columns: 3fr 2fr; gap: clamp(1rem, 2.5vw, 1.75rem); }
.ask-triage__col { background: var(--wp--preset--color--paper, #FBFCFD); border: 1px solid var(--wp--preset--color--line, #E6EAF0); border-radius: 16px; padding: 1.1rem 1.25rem 0.5rem; }
.ask-triage__collabel { display: flex; align-items: center; gap: 8px; margin: 0; padding-bottom: 0.7rem; border-bottom: 1px solid var(--wp--preset--color--line, #E6EAF0); font-family: var(--wp--preset--font-family--heading); font-weight: 600; font-size: 13px; }
.ask-triage__collabel svg { flex: none; }
.ask-triage__collabel--ok { color: var(--wp--preset--color--blue, #2766F0); }
.ask-triage__collabel--esc { color: #9A6B12; }
.ask-triage__list { list-style: none; margin: 0; padding: 0; }
.ask-triage__row { display: flex; align-items: center; gap: 10px; padding: 12px 0; border-top: 1px solid var(--wp--preset--color--line-soft, #E1E5EB); }
.ask-triage__row:first-child { border-top: 0; }
.ask-triage__lang { flex: none; font-size: 10.5px; font-weight: 600; letter-spacing: 0.03em; color: var(--wp--preset--color--slate, #5E6A7A); border: 1px solid var(--wp--preset--color--line-input, #D6DBE2); border-radius: 6px; padding: 2px 6px; }
.ask-triage__subj { flex: 1 1 auto; min-width: 0; font-size: 13.5px; line-height: 1.35; color: var(--wp--preset--color--ink, #313A46); }
/* Category tags — a soft, muted tint per category (deliberate exception to the
   one-blue rule: these read as quiet categorization, not accents). */
.ask-triage__cat { flex: none; font-size: 11px; padding: 3px 9px; border-radius: 999px; white-space: nowrap; background: #EDEFF2; color: #5E6A7A; }
.ask-triage__cat--order { background: #EAF0FE; color: #1A4FCC; }
.ask-triage__cat--delivery { background: #EAF3DE; color: #3B6D11; }
.ask-triage__cat--return { background: #FBF1DD; color: #9A6B12; }
.ask-triage__cat--cancel { background: #EDEFF2; color: #5E6A7A; }
.ask-triage__cat--invoice,
.ask-triage__cat--payment { background: #EEEDFE; color: #534AB7; }
.ask-triage__cat--complaint { background: #FCEDE9; color: #C73B40; }
.ask-triage__cat--info { background: #FBE7DA; color: #B4531F; }
.ask-triage__cat--cart,
.ask-triage__cat--checkout { background: #FBF1DD; color: #9A6B12; }

/* ==========================================================================
   Top question topics (per-industry bar chart from report data).
   ========================================================================== */
.ask-topics { text-align: center; }
.ask-topics h2 { max-width: 22ch; margin-inline: auto; }
.ask-topics .ask-lede { max-width: 46rem; margin-inline: auto; }
.ask-topics__chart { margin: var(--wp--preset--spacing--50, 2.25rem) auto 0; text-align: left; display: flex; flex-direction: column; gap: 13px; max-width: 880px; }
.ask-topicbar { display: grid; grid-template-columns: minmax(140px, 220px) 1fr 42px; align-items: center; gap: 14px; }
.ask-topicbar__label { font-size: 14px; line-height: 1.3; color: var(--wp--preset--color--ink, #313A46); }
.ask-topicbar__track { height: 12px; background: var(--wp--preset--color--surface, #EEF2F7); border-radius: 999px; overflow: hidden; }
.ask-topicbar__fill { display: block; height: 100%; border-radius: 999px; background: var(--wp--preset--color--blue, #2766F0); }
.ask-topicbar__val { font-family: var(--wp--preset--font-family--heading); font-weight: 700; font-size: 15px; color: var(--wp--preset--color--ink, #313A46); text-align: right; }
.ask-topics__foot { max-width: 46rem; margin-top: var(--wp--preset--spacing--50, 2.25rem); margin-inline: auto; font-size: 0.9rem; color: var(--wp--preset--color--slate, #5E6A7A); text-align: center; }
@media (max-width: 640px) {
	.ask-topicbar { grid-template-columns: 1fr auto; gap: 6px 10px; }
	.ask-topicbar__track { grid-column: 1 / -1; }
}
@media (max-width: 900px) { .ask-triage { grid-template-columns: 1fr; gap: 1.75rem; } .ask-triage__cols { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .ask-triage__cat { display: none; } }

/* Closing rating popover: shopper scoring the conversation (0–5). Centered, appears last. */
.ask-rating { align-self: center; display: inline-flex; flex-direction: column; align-items: center; gap: 5px; background: #fff; border: 1px solid #EAEDF1; border-radius: 14px; padding: 10px 18px; margin-top: 2px; box-shadow: 0 6px 16px -10px rgba(49, 58, 70, .30); animation: askCtxIn 0.32s ease; }
.ask-rating__label { font-family: var(--wp--preset--font-family--heading); font-size: 11px; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; color: var(--wp--preset--color--slate, #5E6A7A); }
.ask-rating__stars { display: inline-flex; gap: 3px; font-size: 17px; line-height: 1; }
.ask-rating__star { color: #E1E5EB; }
.ask-rating__star.is-on { color: #F5A623; }

/* ==========================================================================
   Logo marquee
   ========================================================================== */
.ask-marquee { overflow: hidden; margin-top: 1.75rem; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.ask-marquee__track { display: flex; align-items: center; gap: 3.75rem; width: max-content; animation: askMarquee 42s linear infinite; }
.ask-marquee:hover .ask-marquee__track { animation-play-state: paused; }
.ask-logo { flex: 0 0 auto; }
.ask-logo img { height: 30px; width: auto; max-width: 132px; object-fit: contain; filter: grayscale(1); opacity: 0.5; transition: filter 0.2s ease, opacity 0.2s ease; }
.ask-logo:hover img { filter: grayscale(0); opacity: 1; }
/* Integration marquee: logos are trimmed to content, so a uniform height gives
   uniform optical size; wider max-width keeps long wordmarks (PrestaShop,
   AtomStore) from being width-capped shorter than the rest. */
.ask-marquee--intg .ask-logo img { height: 32px; max-width: 190px; }
/* Optical balancing: icon+wordmark marks read smaller/narrower than the wide
   wordmarks, so bump them up a touch to even out perceived size. */
.ask-marquee--intg .ask-logo--freshdesk img,
.ask-marquee--intg .ask-logo--magento img,
.ask-marquee--intg .ask-logo--shopify img { height: 42px; }
@keyframes askMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.ask-eyebrow--muted { color: var(--wp--preset--color--gray, #919191); }

/* ==========================================================================
   Tab panels
   ========================================================================== */
.ask-tabwrap [data-panel] { display: none !important; }
.ask-tabwrap [data-panel].is-active { display: grid !important; }
.ask-tab { cursor: pointer; user-select: none; }

/* ==========================================================================
   Team cards (About)
   ========================================================================== */
.ask-team { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: 1.5rem; }
.ask-team figure, .ask-team .wp-block-image { margin: 0; }
.ask-team img { width: 100%; aspect-ratio: 1; object-fit: cover; object-position: top center; border-radius: 16px; filter: grayscale(1); transition: filter 0.25s ease; display: block; }
.ask-team .ask-team-card:hover img { filter: grayscale(0); }
.ask-team-card__name { font-family: var(--wp--preset--font-family--heading); font-weight: 700; font-size: 1.05rem; color: var(--wp--preset--color--ink, #313A46); margin: 0.85rem 0 0.1rem; }
.ask-team-card__role { color: var(--wp--preset--color--blue, #2766F0); font-size: 0.9rem; font-weight: 600; }
.ask-team-card__bio { color: var(--wp--preset--color--slate, #5E6A7A); font-size: 0.9rem; line-height: 1.5; margin-top: 0.5rem; }

/* ==========================================================================
   About page - founding-brief pull quote & values grid
   ========================================================================== */
/* Story: narrow centered setup line + the founding brief as a large centered
   quote (kills theme.json's core/quote left rule); the number sits in brand blue. */
.ask-story-setup { max-width: 40rem; margin-inline: auto; }
.ask-brief.wp-block-quote { border-left: 0; padding: 0; margin-inline: auto; max-width: 52rem; text-align: center; }
.ask-brief p { font-family: var(--wp--preset--font-family--heading); font-weight: 700; font-size: clamp(1.5rem, 2.6vw, 2.05rem); line-height: 1.35; letter-spacing: -0.02em; color: var(--wp--preset--color--ink, #313A46); margin: 0; }
.ask-brief strong { color: var(--wp--preset--color--blue, #2766F0); font-weight: inherit; }

/* Values: icon chip + copy rows, no card chrome. Icon spans both text rows;
   any extra blocks an editor adds stay in the text column. */
.ask-values { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2.75rem 4rem; }
.wp-block-group.ask-values > * { margin-block-start: 0; }
.ask-value { display: grid; grid-template-columns: 46px 1fr; column-gap: 1.25rem; align-items: start; }
.wp-block-group.ask-value > * { margin-block-start: 0; grid-column: 2; }
.ask-value .ask-icon { grid-column: 1; grid-row: 1 / span 2; margin-bottom: 0; }
.ask-value h3 { font-size: 1.15rem; margin: 0 0 0.45rem; padding-top: 0.2rem; }
.ask-value p { margin: 0; color: var(--wp--preset--color--slate, #5E6A7A); }
@media (max-width: 781px) {
	.ask-values { grid-template-columns: 1fr; gap: 1.75rem; }
}

/* ==========================================================================
   Dark tabbed section (2 columns + checklists)
   ========================================================================== */
.ask-navy-cols { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 48px; align-items: center; margin-top: 2rem; background: var(--as-dark-panel, #252E3D); border: 1px solid rgba(255,255,255,0.06); border-radius: 24px; padding: clamp(1.75rem, 4vw, 3.25rem); }
/* Let the grid tracks shrink below their content's intrinsic size — otherwise the
   380px chat widget sets a min-content floor that keeps the whole block (and the
   text column) from fitting narrow screens (< ~450px). */
.ask-navy-cols > .wp-block-group { min-width: 0; }
@media (max-width: 860px) { .ask-navy-cols { grid-template-columns: 1fr; padding: clamp(1.5rem, 5vw, 2rem); } }
.ask-navy-left h3 { color: #fff; margin-top: 0; font-size: 1.6rem; }
.ask-navy-left p { color: #AEB7C5; }
.ask-navy-left .ask-metric { color: #fff; font-weight: 700; margin-top: 1rem; }
.ask-checklist { list-style: none; padding: 0; margin: 1.25rem 0; display: grid; gap: 0.7rem; }
.ask-checklist li { position: relative; padding-left: 2rem; color: #C9D2E0; line-height: 1.45; }
.ask-checklist li::before { content: ""; position: absolute; left: 0; top: 0.05em; width: 22px; height: 22px; border-radius: 999px; background-color: rgba(255,255,255,0.1); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238FB0F6' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4 4 10-10'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; }
.ask-tabwrap .ask-widget { max-width: 100%; margin: 0 auto; }

/* ==========================================================================
   Security pillars (icon + tinted left rule + uppercase brand label)
   ========================================================================== */
.ask-pillars { display: grid; grid-template-columns: 1fr 1fr; gap: 36px 30px; }
@media (max-width: 700px) { .ask-pillars { grid-template-columns: 1fr; } }
.ask-pillar { border-left: 2px solid var(--wp--preset--color--blue-tint, #EAF0FE); padding-left: 22px; }
.ask-pillar__ic { display: block; margin-bottom: 14px; }
.ask-pillar__ic svg { width: 26px; height: 26px; stroke: var(--wp--preset--color--blue, #2766F0); }
.ask-pillar__label { font-family: var(--wp--preset--font-family--heading); font-weight: 700; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--wp--preset--color--blue, #2766F0); margin: 0 0 10px; }
.ask-pillar p { font-size: 14.5px; line-height: 1.6; color: var(--wp--preset--color--slate, #5E6A7A); margin: 0; }
.ask-pillar p strong { color: var(--wp--preset--color--ink, #313A46); }

/* ==========================================================================
   Security bento (v3): 12-col grid — two illustrated feature cards on top,
   three icon cards below. Cards reuse the is-style-card surface; the
   illustrations are decorative inline SVG (aria-hidden) built from tokens.
   ========================================================================== */
.ask-sec-bento { display: grid; grid-template-columns: repeat(12, 1fr); gap: 18px; }
.ask-sec-bento > * { margin-block-start: 0; min-width: 0; }
.ask-sec-bento > .ask-card { height: 100%; box-sizing: border-box; }
.ask-seccard--w7 { grid-column: span 7; }
.ask-seccard--w5 { grid-column: span 5; }
.ask-seccard--w4 { grid-column: span 4; }
.ask-seccard__split { display: flex; align-items: center; gap: 26px; height: 100%; }
.ask-seccard__split > * { margin-block-start: 0; }
.ask-seccard__body { flex: 1 1 auto; min-width: 0; }
.ask-seccard__vis { flex: 0 0 auto; }
.ask-seccard__vis svg { display: block; }
.ask-seccard__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.ask-seccard__chips > * { margin: 0; }
/* Sekcyjny wizual w kolumnie (np. pierscien UE na stronie bezpieczenstwa). */
.ask-secvis { display: flex; justify-content: center; }
.ask-secvis svg { display: block; height: auto; }
@media (max-width: 980px) {
	.ask-seccard--w7, .ask-seccard--w5 { grid-column: span 12; }
	.ask-seccard--w4 { grid-column: span 6; }
}
@media (max-width: 700px) {
	.ask-seccard--w4 { grid-column: span 12; }
	.ask-seccard__split { flex-direction: column; align-items: flex-start; }
	.ask-seccard__vis { align-self: center; }
}

/* ==========================================================================
   HubSpot meetings embed (book a consultation)
   ========================================================================== */
.meetings-iframe-container { min-height: 660px; border: 1px solid var(--wp--preset--color--line, #E6EAF0); border-radius: 16px; overflow: hidden; background: #fff; box-shadow: 0 6px 16px -10px rgba(49, 58, 70, 0.3); }
.meetings-iframe-container iframe { display: block; }

/* --- Integration single: hero lockup, compatibility strip, connection layers,
   placement + control, developer questions. Used by the integration CPT
   seed pages (see seed/design/integrations__*.html). --- */

.ask-lockup { display: flex; align-items: center; gap: 18px; margin: 0 0 1.6rem; }
.ask-lockup__mark { display: inline-flex; align-items: center; justify-content: center; height: 46px; padding: 0 16px; background: #fff; border: 1px solid var(--as-line, #E6EAF0); border-radius: 14px; }
.ask-lockup__mark img { max-height: 24px; width: auto; }
.ask-lockup__link { display: inline-flex; gap: 5px; }
.ask-lockup__link span { width: 5px; height: 5px; border-radius: 50%; background: #C2CCDA; animation: askFlowDot 1.8s ease-in-out infinite; }
.ask-lockup__link span:nth-child(2) { animation-delay: 0.3s; }
.ask-lockup__link span:nth-child(3) { animation-delay: 0.6s; }
@media (prefers-reduced-motion: reduce) { .ask-lockup__link span { animation: none; } }

.ask-inthero .wp-block-column + .wp-block-column { border-left: 1px solid var(--as-line, #E6EAF0); padding-left: 2.5rem; }
.ask-inthero .ask-eyebrow { margin: 0 0 0.4rem; }
.ask-inthero h1 { margin: 0; }
.ask-inthero__sub { font-size: 1.15rem; font-weight: 500; line-height: 1.55; color: var(--wp--preset--color--slate, #5E6A7A); margin: 1rem 0 0; }
.ask-inthero .ask-lede { margin: 0.9rem 0 0; }
.ask-inthero .wp-block-buttons { margin-top: 2rem; }
.ask-inthero .is-style-check { gap: 0.7rem; }
.ask-inthero .is-style-check li { font-size: 0.95rem; }
@media (max-width: 781px) {
	.ask-inthero .wp-block-column + .wp-block-column { border-left: 0; padding-left: 0; border-top: 1px solid var(--as-line, #E6EAF0); padding-top: 1.8rem; margin-top: 1.8rem; }
}

.ask-compat.wp-block-group { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.ask-compat__cell { background: #fff; border: 1px solid var(--as-line, #E6EAF0); border-radius: 14px; padding: 16px 18px; }
.ask-compat__cell > * { margin-block-start: 0; }
.ask-compat__k { margin: 0; font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--wp--preset--color--slate, #5E6A7A); }
.ask-compat__v { margin: 6px 0 0; font-weight: 700; font-size: 1rem; color: var(--wp--preset--color--ink, #313A46); }
.ask-compat__n { margin: 3px 0 0; font-size: 0.82rem; line-height: 1.4; color: var(--wp--preset--color--slate, #5E6A7A); }
.ask-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 1.1rem; }
.ask-chips li { list-style: none; font-size: 0.85rem; color: var(--wp--preset--color--slate, #5E6A7A); background: #fff; border: 1px solid var(--as-line, #E6EAF0); border-radius: 999px; padding: 5px 13px; }
.ask-chips.wp-block-list { padding-left: 0; margin-left: 0; }
@media (max-width: 900px) { .ask-compat.wp-block-group { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 500px) { .ask-compat.wp-block-group { grid-template-columns: 1fr; } }

.ask-layer.wp-block-group { display: grid; grid-template-columns: 56px 1fr 120px; align-items: start; gap: 0 22px; padding: 26px 0; border-bottom: 1px solid var(--as-line, #E6EAF0); }
.ask-layer:first-of-type { border-top: 1px solid var(--as-line, #E6EAF0); }
.ask-layer > * { margin-block-start: 0; }
.ask-layer__num { margin: 0; font-family: var(--wp--preset--font-family--heading); font-weight: 700; font-size: 13px; letter-spacing: 0.14em; color: #C2CCDA; padding-top: 5px; }
.ask-layer h3 { font-size: 20px; font-weight: 700; letter-spacing: -0.01em; margin: 0; color: var(--wp--preset--color--ink, #313A46); }
.ask-layer h3 + p { font-size: 15px; line-height: 1.6; color: var(--wp--preset--color--slate, #5E6A7A); margin: 9px 0 0; }
.ask-layer__tag { margin: 3px 0 0; justify-self: end; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; border-radius: 999px; padding: 5px 12px; background: var(--wp--preset--color--blue-tint, #EAF0FE); color: var(--wp--preset--color--blue, #2766F0); }
.ask-layer__tag--opt { background: #FFF4E3; color: #A9660A; }
@media (max-width: 700px) {
	.ask-layer.wp-block-group { grid-template-columns: 40px 1fr; }
	.ask-layer__tag { grid-column: 2; justify-self: start; margin-top: 12px; }
}

.ask-modes .ask-card { padding-top: 22px; }
.ask-modes__vis { display: block; height: 96px; border-radius: 10px; background: var(--wp--preset--color--blue-tint, #EAF0FE); position: relative; overflow: hidden; margin-bottom: 18px; }
.ask-modes__vis i { position: absolute; background: var(--wp--preset--color--blue, #2766F0); border-radius: 5px; }
.ask-modes__vis i.ask-modes__page { background: #C6D5F6; border-radius: 0; }
.ask-controls.wp-block-columns { margin-top: 1.25rem; gap: 1.25rem; }
.ask-controls > .wp-block-column { background: #fff; border: 1px solid var(--as-line, #E6EAF0); border-radius: 16px; padding: 24px 26px; }
.ask-ctrl__hd.wp-block-group { display: flex; align-items: center; gap: 14px; flex-wrap: nowrap; padding-bottom: 1rem; border-bottom: 1px solid var(--as-line, #E6EAF0); }
.ask-ctrl__ic { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 13px; background: var(--wp--preset--color--blue-tint, #EAF0FE); display: inline-flex; align-items: center; justify-content: center; }
.ask-ctrl__ic svg { stroke: var(--wp--preset--color--blue, #2766F0); }
.ask-controls h3 { font-size: 1.05rem; font-weight: 700; letter-spacing: -0.01em; color: var(--wp--preset--color--ink, #313A46); margin: 0; }
.ask-controls .is-style-check { margin-top: 1rem; gap: 0.7rem; }
.ask-controls .is-style-check li { font-size: 0.95rem; }

.ask-layer__soon { margin: 1.4rem 0 0; padding: 14px 18px; border-radius: 12px; background: var(--wp--preset--color--blue-tint, #EAF0FE); color: var(--wp--preset--color--blue-deep, #1A4FCC); font-size: 0.92rem; line-height: 1.55; }
.ask-rollout .ask-card .ask-layer__num { position: static; margin: 0 0 0.6rem; }

/* Wide catch-all card closing the integrations listing (ACF wide_card). */
.ask-widecard-wrap { box-sizing: border-box; padding-inline: 1.25rem; }
.ask-widecard { display: flex; align-items: center; gap: 1.75rem; margin-top: 1.25rem; padding: 1.5rem; background: #fff; border: 1px solid var(--ask-card-border); border-radius: var(--wp--custom--radius--lg, 18px); box-shadow: var(--wp--custom--shadow--md); text-decoration: none; transition: border-color 0.15s ease, transform 0.15s ease; }
.ask-widecard:hover { border-color: var(--wp--preset--color--blue, #2766F0); transform: translateY(-2px); }
/* The catch-all entry carries a square icon, not a wordmark, so it gets the
   tinted icon-tile treatment used by .ask-stepcard__ic / .ask-ctrl__ic. */
.ask-widecard__logo { flex: 0 0 auto; width: 56px; height: 56px; border-radius: 16px; background: var(--wp--preset--color--blue-tint, #EAF0FE); display: inline-flex; align-items: center; justify-content: center; }
.ask-widecard__logo img { max-height: 28px; max-width: 28px; object-fit: contain; }
.ask-widecard__body { display: block; flex: 1 1 auto; }
.ask-widecard__title { display: block; font-family: var(--wp--preset--font-family--heading); font-weight: 700; font-size: 1.4rem; letter-spacing: -0.01em; color: var(--wp--preset--color--ink, #313A46); }
.ask-widecard__desc { display: block; margin-top: 0.5rem; max-width: 58rem; font-size: 0.98rem; line-height: 1.6; color: var(--wp--preset--color--slate, #5E6A7A); }
.ask-widecard__cta { flex: 0 0 auto; font-weight: 700; font-size: 0.95rem; color: var(--wp--preset--color--blue, #2766F0); }
@media (max-width: 700px) {
	.ask-widecard { flex-direction: column; align-items: flex-start; gap: 1.1rem; padding: 24px; }
}