/* ============================================================
   Telness theme — base CSS.
   Most styling lives in theme.json. Use this file for what theme.json
   can't express (multi-element selectors, pseudo-elements, complex layouts).
   This is a faithful port of the live-site design system.
   ============================================================ */

/* ── Resets / base ─────────────────────────────────────── */
html { -webkit-text-size-adjust: 100%; }
body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-synthesis: none;
	/* Clear the fixed .telness-header (64px) so content isn't hidden under it. */
	padding-top: 64px;
}
img, svg, video { max-width: 100%; height: auto; display: block; }

a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible {
	outline: 2px solid var(--wp--preset--color--green);
	outline-offset: 3px;
}

h1, h2, h3, h4 { font-synthesis: none; }

/* Skip link — matches legacy .tl-skip (telness-standalone.css L999-1006).
   WP auto-emits <a class="skip-link" href="#wp--skip-link--target"> in wp_footer.
   Hidden off-canvas by default; slides down on focus. */
.skip-link {
	position: absolute;
	top: -100px;
	left: 24px;
	background: var(--wp--preset--color--green);
	color: #ffffff;
	font-family: var(--wp--preset--font-family--body);
	font-size: 13px;
	font-weight: 600;
	padding: 10px 18px;
	border-radius: 100px;
	z-index: 9999;
	text-decoration: none;
	transition: top 180ms ease;
}
.skip-link:focus {
	top: 12px;
	left: 24px;
	color: #ffffff;
}

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

/* ============================================================
   BUTTONS — pill, .tl-btn port. Default = green primary.
   .is-style-outline = navy outline.
   ============================================================ */
.wp-block-button .wp-block-button__link {
	display: inline-flex; align-items: center; justify-content: center;
	gap: 7px;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--ui);
	font-weight: 600;
	letter-spacing: 0.01em;
	line-height: 1;
	white-space: nowrap;
	border-radius: var(--wp--custom--radius--pill);
	border: 1.5px solid transparent;
	padding: 11px 22px;
	transition:
		transform 140ms ease,
		box-shadow 140ms ease,
		background 140ms ease,
		color 140ms ease,
		border-color 140ms ease;
}
.wp-block-button:not(.is-style-outline) .wp-block-button__link {
	background: var(--wp--preset--color--green);
	color: #ffffff;
	box-shadow: var(--wp--custom--shadow--green);
}
.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
	background: var(--wp--preset--color--green-dark);
	color: #ffffff;
	box-shadow: var(--wp--custom--shadow--green-hover);
	transform: translateY(-1px);
}
.wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--navy);
	border-color: rgba(39, 38, 87, .35);
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
	border-color: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--navy);
	transform: translateY(-1px);
}

/* ============================================================
   HERO — exact port of live .tl-hero (telness-standalone.css L378–497).
   Structure mirrors live: wrap (white bg, padding-top 84px) →
   container (max-width 1280, side padding clamp(20px,4vw,48px)) →
   card (rounded grid 52/48, min-height clamp 420–580) →
   inner (text col, flex centered) + bg (image col with fade overlay).
   ============================================================ */

/* OUTER WRAP — matches .tl-hero-wrap.
   Body already adds 64px padding-top for the fixed header, so this only
   contributes the visual gap between header and hero card. */
/* Hero wrap — no top padding (hero sits flush beneath the fixed
   nav — body already provides 64px header clearance). Bottom keeps
   a compact gap before the next section. */
.telness-hero-wrap {
	background-color: #ffffff;
	padding-top:    0;
	padding-bottom: clamp(32px, 3.5vw, 48px);
}
@media (max-width: 900px) {
	.telness-hero-wrap {
		padding-bottom: 32px;
	}
}

/* Strip WP's flow-layout block-gap margin from the two grid columns
   of the hero card. NOT applied to `.telness-hero__inner` children
   — the eyebrow/h1/sub/list/buttons inside need their per-element
   bottom margins to provide vertical rhythm; zeroing them here
   would beat the per-element rules on specificity (1,1,0). */
.telness-hero > *:not(#_),
.telness-hero__bg > *:not(#_) {
	margin-block-start: 0;
	margin-block-end: 0;
}

/* CONTAINER — no internal padding. The hero-wrap is alignfull so
   WP's `useRootPaddingAwareAlignments` already applies the page's
   root padding (`var(--wp--preset--spacing--md)`) on each side via
   the alignfull rule. Adding container padding here used to
   double-indent the card, making the hero ~48px narrower than the
   alignfull info-box and any other element that uses the wrap's
   root padding directly. The container now only enforces the
   1280px max-width + centering; the card inside reaches the full
   content width on desktop, matching siblings like the info-box. */
.wp-block-group.telness-hero-container,
.telness-hero-container {
	width: 100%;
	max-width: 1280px;
	margin-left: auto;
	margin-right: auto;
	box-sizing: border-box;
}

/* CARD — matches .tl-hero. The doubled-class selector `.telness-hero.telness-hero`
   bumps specificity to (0,3,0) so it beats any `.wp-block-group.is-style-bg-*`
   rule a misclick might apply to the inner section — the hero card always
   stays its own off-white. */
.wp-block-group.telness-hero,
.telness-hero.telness-hero {
	position: relative;
	overflow: hidden;
	border-radius: var(--wp--custom--radius--hero);
	min-height: clamp(420px, 46vw, 580px);
	background-color: var(--wp--preset--color--card);
	display: grid;
	grid-template-columns: 52% 48%;
	margin: 0;
}

/* LEFT COLUMN — text. Matches .tl-hero__inner. */
.wp-block-group.telness-hero__inner {
	position: relative;
	z-index: 4;
	padding: clamp(52px, 6vw, 88px) clamp(36px, 5vw, 68px);
	display: flex;
	flex-direction: column;
	justify-content: center;
	background-color: transparent;
	margin: 0;
}

/* Eyebrow — matches .tl-hero__eye */
.telness-hero .telness-hero__eye {
	display: inline-block;
	font-family: var(--wp--preset--font-family--body);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: var(--wp--preset--color--green);
	margin: 0 0 14px;
	max-width: max-content;
}

/* H1 — matches .tl-hero h1 */
.telness-hero h1.telness-hero__h1 {
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(30px, calc(3.5vw + 10px), 56px);
	font-weight: 700;
	line-height: 1.05;
	letter-spacing: -0.015em;
	color: var(--wp--preset--color--navy);
	margin: 0 0 8px;
}

/* Sub — same styling as the checklist <li> items below so the
   "sub-line + checks" reads as one continuous body-text block. */
.telness-hero .telness-hero__sub {
	display: block;
	font-family: var(--wp--preset--font-family--body);
	font-size: 15px;
	font-weight: 400;
	line-height: 1.45;
	letter-spacing: 0;
	color: var(--wp--preset--color--navy);
	margin: 0 0 28px;
}

/* Checks — matches .tl-checks.tl-checks--hero */
.telness-hero ul.telness-hero__checks {
	list-style: none;
	padding: 0;
	margin: 0 0 28px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.telness-hero__checks li {
	display: flex;
	align-items: center;
	gap: 8px;
	font-family: var(--wp--preset--font-family--body);
	font-size: 15px;
	font-weight: 400;
	line-height: 1.45;
	color: var(--wp--preset--color--navy);
	list-style: none;
	margin: 0;
	padding: 0;
}
.telness-hero__checks li::before {
	content: '';
	flex-shrink: 0;
	display: block;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background-color: rgba(4, 175, 143, .15);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 11'%3E%3Cpath d='M1.5 5.5L5.5 9.5L12.5 1.5' stroke='%2304af8f' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 10px;
}

/* CTAs — matches .tl-hero__ctas */
.telness-hero .telness-hero__ctas {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 32px;
	align-items: center;
}

/* RIGHT COLUMN — image fills with fade overlay. Matches .tl-hero__bg. */
.wp-block-group.telness-hero__bg {
	position: relative;
	overflow: hidden;
	background-color: #dde0e8;
	padding: 0;
	margin: 0;
}
.telness-hero__bg .wp-block-image {
	position: absolute;
	inset: 0;
	margin: 0;
	width: 100%;
	height: 100%;
}
.telness-hero__bg .wp-block-image img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
	display: block;
}
/* Fade overlay — replaces live's <div class="tl-hero__fade"> via pseudo. */
.telness-hero__bg::before {
	content: '';
	position: absolute;
	top: 0; left: 0; bottom: 0;
	width: 55%;
	z-index: 2;
	background: linear-gradient(
		to right,
		var(--wp--preset--color--card) 0%,
		rgba(248, 248, 247, .85) 30%,
		rgba(248, 248, 247, .4) 65%,
		rgba(248, 248, 247, 0) 100%
	);
	pointer-events: none;
}

/* RESPONSIVE — exact port of live media queries (840 / 900 / 480). */
@media (max-width: 840px) {
	.wp-block-group.telness-hero {
		grid-template-columns: 1fr;
		grid-template-rows: auto 280px;
		min-height: auto;
	}
	.telness-hero__bg {
		order: 1;
		height: 280px;
	}
	.telness-hero__inner { order: 0; }
}
@media (max-width: 900px) {
	.telness-hero-wrap { padding-top: 0; }
	.telness-hero { border-radius: 12px; }
}
@media (max-width: 480px) {
	.wp-block-group.telness-hero__inner { padding: 32px 24px; }
	.telness-hero .telness-hero__eye { margin-bottom: 8px; }
	.telness-hero h1.telness-hero__h1 { margin-bottom: 4px; }
	.telness-hero .telness-hero__sub { margin-bottom: 16px; }
	.telness-hero ul.telness-hero__checks { margin-bottom: 18px; }
	.telness-hero__checks li { font-size: 13px; }
	.telness-hero .telness-hero__ctas {
		flex-direction: column;
		margin-bottom: 20px;
	}
	.telness-hero__ctas .wp-block-button,
	.telness-hero__ctas .wp-block-button__link {
		width: 100%;
		justify-content: center;
	}
}

/* ============================================================
   TRUSTPILOT BADGE — matches live .tl-trust:
   green star polygons + 12px muted-gray text, score in navy strong.
   ============================================================ */
.telness-trustpilot-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--wp--preset--font-family--body);
	font-size: 12px;
	line-height: 1.4;
	color: var(--wp--preset--color--border-muted);
	text-decoration: none;
}
.telness-trustpilot-badge:hover { text-decoration: none; opacity: 0.9; }
.telness-trustpilot-badge__stars { display: inline-flex; gap: 2px; }
.telness-trustpilot-badge__star {
	display: block;
	width: 17px;
	height: 17px;
	background: #00b67a; /* Trustpilot green */
	clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
.telness-trustpilot-badge__text { font-weight: 400; }
.telness-trustpilot-badge__text strong {
	color: var(--wp--preset--color--navy);
	font-weight: 700;
}

/* ============================================================
   CONTACT DRAWER — slides up from the bottom. Single element:
   tab + panel are joined. When closed, the drawer is translated
   down so only the 48px navy "Kontakta oss" tab pokes out at
   bottom-center. When open, the whole drawer slides up; the tab
   stays visible at the TOP of the drawer (chevron rotates 180°).
   Faithful port of legacy `tl-drawer` (telness-standalone.css L1259–1420).
   ============================================================ */

/* BACKDROP — desktop only (≥761px), dims page behind drawer. */
.telness-drawer-backdrop {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 9997;
	background: rgba(29, 27, 69, .45);
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
	opacity: 0;
	visibility: hidden;
	transition: opacity 300ms ease, visibility 300ms ease;
}
.telness-drawer-backdrop.is-open { opacity: 1; visibility: visible; }
@media (min-width: 761px) {
	.telness-drawer-backdrop { display: block; }
}

/* DRAWER — fixed bottom-center, slides up. */
.telness-drawer {
	position: fixed;
	bottom: 0;
	left: 50%;
	z-index: 9998;
	transform: translateX(-50%) translateY(calc(100% - 48px));
	width: 780px;
	max-width: calc(100vw - 48px);
	display: flex;
	flex-direction: column;
	transition: transform 380ms cubic-bezier(.22, 1, .36, 1);
}
.telness-drawer.is-open {
	transform: translateX(-50%) translateY(0);
}

/* TAB — the navy clickable bar at the top of the drawer.
   When drawer is closed, this is the only visible part (48px tall). */
.telness-drawer__tab {
	align-self: center;
	width: auto;
	min-width: 180px;
	background: var(--wp--preset--color--navy);
	color: #ffffff;
	font-family: var(--wp--preset--font-family--body);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.02em;
	padding: 10px 24px;
	border-radius: 12px 12px 0 0;
	border: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	transition: background 180ms ease;
	height: auto;
	margin: 0;
}
.telness-drawer__tab:hover { background: var(--wp--preset--color--navy-dark); }
.telness-drawer__tab:focus-visible {
	outline: 2px solid var(--wp--preset--color--green);
	outline-offset: 3px;
}
.telness-drawer__tab svg {
	width: 14px;
	height: 14px;
	stroke: currentColor;
	stroke-width: 2;
	transition: transform 300ms cubic-bezier(.22, 1, .36, 1);
}
.telness-drawer.is-open .telness-drawer__tab svg { transform: rotate(180deg); }

/* PANEL — the white form area below the tab. */
.telness-drawer__panel {
	background: #ffffff;
	border-radius: 20px 20px 0 0;
	overflow-y: auto;
	max-height: calc(100dvh - 120px);
	box-shadow: 0 -4px 40px rgba(0, 0, 0, .15);
}

/* TOP — logo + close button row. */
.telness-drawer__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20px 32px 0;
}
.telness-drawer__logo { display: inline-flex; align-items: center; }
.telness-drawer__logo img,
.telness-drawer__logo .custom-logo,
.telness-drawer__logo .custom-logo-link img {
	height: 28px;
	width: auto;
	display: block;
	max-width: 160px;
	margin: 0;
	padding: 0;
	border: none;
	box-shadow: none;
}
.telness-drawer__logo--text {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 800;
	color: var(--wp--preset--color--navy);
	font-size: 18px;
	letter-spacing: -0.01em;
}
.telness-drawer__close {
	width: 34px;
	height: 34px;
	border: none;
	background: var(--wp--preset--color--off);
	border-radius: 50%;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 140ms ease;
	padding: 0;
	flex-shrink: 0;
}
.telness-drawer__close:hover { background: var(--wp--preset--color--border); }
.telness-drawer__close svg { width: 14px; height: 14px; stroke: var(--wp--preset--color--navy); stroke-width: 2; }

/* HEADER — eyebrow / heading / intro. */
.telness-drawer__header {
	padding: 16px 32px 0;
	text-align: left;
}
.telness-drawer__eyebrow {
	color: var(--wp--preset--color--green);
	font-family: var(--wp--preset--font-family--body);
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	display: block;
	margin: 0 0 4px;
}
.telness-drawer__heading {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 28px;
	font-weight: 700;
	color: var(--wp--preset--color--navy);
	letter-spacing: -0.02em;
	line-height: 1.15;
	margin: 0 0 6px;
}
.telness-drawer__intro {
	font-family: var(--wp--preset--font-family--body);
	font-size: 15px;
	color: var(--wp--preset--color--ink-muted);
	line-height: 1.6;
	margin: 0;
}

/* BODY — scrollable form area. */
.telness-drawer__body {
	padding: 24px 32px 32px;
}

/* SPINNER — shown via .is-loading while HubSpot loads. */
.telness-drawer__spinner {
	display: none;
	align-items: center;
	justify-content: center;
	padding: 48px 0;
}
.telness-drawer__spinner.is-loading { display: flex; }
.telness-drawer__spinner::after {
	content: '';
	width: 32px;
	height: 32px;
	border: 3px solid var(--wp--preset--color--border);
	border-top-color: var(--wp--preset--color--green);
	border-radius: 50%;
	animation: telness-spin 0.7s linear infinite;
}
@keyframes telness-spin { to { transform: rotate(360deg); } }

/* HUBSPOT FIELDS — port of legacy .hs-form-field / .hs-input / .hs-button styling. */
.telness-drawer .hs-form-field { margin-bottom: 16px; }
.telness-drawer .hs-form-field label {
	font-family: var(--wp--preset--font-family--body);
	font-size: 13px;
	font-weight: 600;
	color: var(--wp--preset--color--navy);
	margin-bottom: 6px;
	display: block;
}
.telness-drawer .hs-input {
	width: 100%;
	padding: 10px 14px;
	border: 1.5px solid var(--wp--preset--color--border);
	border-radius: 8px;
	font-size: 15px;
	font-family: var(--wp--preset--font-family--body);
	color: var(--wp--preset--color--navy);
	background: #ffffff;
	box-sizing: border-box;
}
.telness-drawer .hs-input:focus {
	outline: none;
	border-color: var(--wp--preset--color--green);
}
.telness-drawer .hs-button {
	background: var(--wp--preset--color--green);
	color: #ffffff;
	border: none;
	border-radius: 100px;
	padding: 13px 28px;
	font-family: var(--wp--preset--font-family--body);
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	width: 100%;
	margin-top: 8px;
	transition: background 140ms ease;
}
.telness-drawer .hs-button:hover { background: var(--wp--preset--color--green-dark); }
.telness-drawer .hbspt-form { margin: 0; }

/* RESPONSIVE — mid-desktop narrows the drawer. */
@media (min-width: 761px) and (max-width: 960px) {
	.telness-drawer { width: 560px; }
	.telness-drawer__top { padding: 16px 24px 0; }
	.telness-drawer__header { padding: 12px 24px 0; }
	.telness-drawer__body { padding: 20px 24px 28px; }
}

/* MOBILE — per Q5b: no persistent drawer tab on mobile. Drawer becomes a
   fullscreen modal that opens only via contact triggers (a[href="#form"],
   [data-telness-contact], #tl-open-modal, or any in-content Kontakta CTA).
   Previously the tab + 64px of panel (the logo/close strip) were peeking
   above the app bar — wrong both design-wise and Q5b-wise. */
@media (max-width: 760px) {
	.telness-drawer {
		width: 100%;
		max-width: 100%;
		left: 0;
		right: 0;
		bottom: 0;
		transform: translateY(100%);
	}
	.telness-drawer.is-open { transform: translateY(0); }
	.telness-drawer__tab { display: none; }
	.telness-drawer__panel {
		border-radius: 0;
		max-height: 100dvh;
	}
	.telness-drawer-backdrop { display: block; }
	body.telness-contact-open { overflow: hidden; }
}

/* ============================================================
   HEADER — fixed top, white bg, navy text.
   1:1 port of legacy .tl-header (telness-standalone.css L188-274).
   Rendered by the `telness/header` custom block (blocks/header/).
   Nav items come from the WP menu assigned to the `primary` location
   (inc/nav-menu.php).
   ============================================================ */

/* OUTER — the <header class="wp-block-template-part telness-header"> tag.
   The combined selector ties WP's `.wp-block-template-part` rule on
   specificity (0,2,0) and wins by cascade order — no !important. */
.wp-block-template-part.telness-header,
.telness-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 9000;
	margin: 0;
	padding: 0;
	background: #ffffff;
	border-bottom: 1px solid var(--wp--preset--color--border);
	box-shadow: 0 1px 12px rgba(39, 38, 87, 0.06);
}
/* Shift under the WP admin bar when logged in. */
body.admin-bar .telness-header { top: 32px; }
@media screen and (max-width: 782px) {
	body.admin-bar .telness-header { top: 46px; }
}

/* INNER ROW — logo left, nav centered, actions right, burger (mobile). */
.telness-header__inner {
	width: 100%;
	max-width: 1280px;
	height: 64px;
	margin: 0 auto;
	padding: 0 clamp(20px, 4vw, 48px);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	line-height: 1;
	box-sizing: border-box;
}

/* LOGO.
   Two markups: (a) has_custom_logo() → <span class="telness-header__logo">
   wrapping WP's <a class="custom-logo-link"><img class="custom-logo">.
   (b) no logo set → <a class="telness-header__logo"> with a text fallback.
   Sizing rules scoped to the header so they don't affect the drawer logo. */
.telness-header__logo {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
	text-decoration: none;
	padding: 0;
	margin: 0;
	line-height: 0;
}
.telness-header .custom-logo-link {
	display: inline-flex;
	align-items: center;
	line-height: 0;
	margin: 0;
	padding: 0;
	text-decoration: none;
	border: 0;
	outline: 0;
	box-shadow: none;
}
.telness-header .custom-logo-link img,
.telness-header .custom-logo,
.telness-header__logo img {
	display: block;
	height: 40px;
	width: auto;
	max-height: 40px;
	max-width: 200px;
	border: 0;
	margin: 0;
	padding: 0;
	object-fit: contain;
	box-shadow: none;
}
.telness-header__logo-text {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 20px;
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--navy);
	line-height: 1;
}

/* DESKTOP PRIMARY NAV. */
.telness-nav {
	display: flex;
	align-items: center;
	gap: 2px;
	flex-grow: 1;
	justify-content: center;
	font-family: var(--wp--preset--font-family--body);
	font-size: 13px;
	font-weight: 500;
	line-height: 1;
}
.telness-nav > a,
.telness-nav__dd-trigger {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	color: var(--wp--preset--color--navy);
	padding: 6px 10px;
	border-radius: 6px;
	background: transparent;
	border: 0;
	cursor: pointer;
	white-space: nowrap;
	text-decoration: none;
	font: inherit;
	transition: background 120ms ease, color 120ms ease;
}
.telness-nav > a:hover,
.telness-nav__dd-trigger:hover,
.telness-nav__dd.is-open .telness-nav__dd-trigger {
	background: var(--wp--preset--color--off);
	color: var(--wp--preset--color--navy);
}

/* CHEVRON — rotates 180° when dropdown/accordion is open. */
.telness-nav__chevron { transition: transform 200ms ease; }
.telness-nav__dd.is-open .telness-nav__chevron,
.telness-mnav__group.is-open .telness-nav__chevron {
	transform: rotate(180deg);
}

/* DESKTOP DROPDOWN PANEL — 4-column mega-menu with section labels. */
.telness-nav__dd { position: relative; }
.telness-nav__dd-panel {
	display: none;
	position: absolute;
	top: calc(100% + 8px);
	left: 50%;
	transform: translateX(-50%);
	background: #ffffff;
	border: 1.5px solid var(--wp--preset--color--border);
	border-radius: 12px;
	box-shadow: 0 12px 40px rgba(39, 38, 87, 0.10), 0 2px 8px rgba(39, 38, 87, 0.06);
	padding: 24px 28px;
	min-width: 560px;
	z-index: 100;
}
.telness-nav__dd.is-open .telness-nav__dd-panel { display: block; }
.telness-nav__dd-inner {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
}
.telness-nav__dd-col {
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.telness-nav__dd-label {
	font-family: var(--wp--preset--font-family--body);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--border-muted);
	padding: 0 8px;
	margin-bottom: 4px;
}
.telness-nav__dd-col a {
	font-family: var(--wp--preset--font-family--body);
	font-size: 13px;
	font-weight: 500;
	color: var(--wp--preset--color--navy);
	padding: 6px 8px;
	border-radius: 6px;
	text-decoration: none;
	white-space: nowrap;
	transition: background 120ms ease;
}
.telness-nav__dd-col a:hover { background: var(--wp--preset--color--off); }

/* HEADER ACTIONS (right side). */
.telness-header__actions {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
}
.telness-header__login {
	font-family: var(--wp--preset--font-family--body);
	font-size: 13px;
	font-weight: 500;
	color: var(--wp--preset--color--navy);
	padding: 6px 12px;
	border-radius: 6px;
	text-decoration: none;
	white-space: nowrap;
	transition: background 120ms ease;
}
.telness-header__login:hover { background: var(--wp--preset--color--off); }
.telness-header__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--wp--preset--font-family--body);
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.01em;
	color: #ffffff;
	background: var(--wp--preset--color--navy);
	padding: 11px 22px;
	border-radius: 100px;
	text-decoration: none;
	white-space: nowrap;
	transition: background 140ms ease, transform 140ms ease;
}
.telness-header__cta:hover {
	background: var(--wp--preset--color--navy-dark);
	color: #ffffff;
	transform: translateY(-1px);
}

/* BURGER — hidden on desktop, 3-bar → X animation when .is-open. */
.telness-burger {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 36px;
	height: 36px;
	padding: 8px;
	margin: 0;
	background: transparent;
	border: 0;
	border-radius: 6px;
	cursor: pointer;
	flex-shrink: 0;
}
.telness-burger span {
	display: block;
	width: 100%;
	height: 2px;
	background: var(--wp--preset--color--navy);
	border-radius: 2px;
	transition: transform 260ms ease, opacity 180ms ease;
}
.telness-burger.is-open span:nth-child(1) { transform: translateY(7px)  rotate( 45deg); }
.telness-burger.is-open span:nth-child(2) { opacity: 0; }
.telness-burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ============================================================
   MOBILE OVERLAY — .telness-mnav.
   Slides in from the right, sits BELOW the fixed header (z:8999 vs 9000)
   so the burger-turned-X stays clickable on top. Port of legacy .tl-mnav
   (telness-standalone.css L276-321).
   ============================================================ */
.telness-mnav {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 8999;
	background: #ffffff;
	padding: 80px 24px 100px;
	display: flex;
	flex-direction: column;
	overflow-y: auto;
	transform: translateX(100%);
	transition: transform 320ms cubic-bezier(.22, 1, .36, 1);
	-webkit-overflow-scrolling: touch;
}
.telness-mnav.is-open { transform: translateX(0); }
body.admin-bar .telness-mnav { top: 32px; }
@media screen and (max-width: 782px) {
	body.admin-bar .telness-mnav { top: 46px; }
}

.telness-mnav__link,
.telness-mnav__toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	font-family: var(--wp--preset--font-family--body);
	font-size: 16px;
	font-weight: 600;
	color: var(--wp--preset--color--navy);
	padding: 14px 0;
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--wp--preset--color--border);
	cursor: pointer;
	text-decoration: none;
	line-height: 1.2;
	text-align: left;
	transition: color 120ms ease;
}
.telness-mnav__link:hover,
.telness-mnav__toggle:hover { color: var(--wp--preset--color--green); }

/* ACCORDION group: contains the toggle + a collapsible sub-list. */
.telness-mnav__group { border-bottom: 0; }
.telness-mnav__group .telness-mnav__toggle { border-bottom: 1px solid var(--wp--preset--color--border); }
.telness-mnav__sub {
	max-height: 0;
	overflow: hidden;
	padding-left: 16px;
	transition: max-height 300ms ease;
}
.telness-mnav__group.is-open .telness-mnav__sub { max-height: 1200px; }
.telness-mnav__sub a {
	display: block;
	font-family: var(--wp--preset--font-family--body);
	font-size: 15px;
	font-weight: 500;
	color: var(--wp--preset--color--ink-muted);
	padding: 10px 0;
	border-bottom: 0;
	text-decoration: none;
	transition: color 120ms ease;
}
.telness-mnav__sub a:hover { color: var(--wp--preset--color--green); }
.telness-mnav__label {
	display: block;
	font-family: var(--wp--preset--font-family--body);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--border-muted);
	padding: 16px 0 4px;
	margin: 0;
}
.telness-mnav__sub > .telness-mnav__label:first-child { padding-top: 8px; }

/* Lock body scroll while the overlay is open. */
body.telness-mnav-open { overflow: hidden; }

/* ============================================================
   RESPONSIVE — collapse to burger at ≤900px.
   ============================================================ */
@media (max-width: 900px) {
	.telness-nav,
	.telness-header__actions {
		display: none;
	}
	.telness-burger { display: flex; }
}

/* ============================================================
   MOBILE APP BAR — fixed bottom nav (≤900px only).
   Port of legacy .tl-appbar (telness-standalone.css L324-358).
   Renders via inc/app-bar.php on every front-end page.
   ============================================================ */
.telness-appbar {
	display: none;
}
@media (max-width: 900px) {
	.telness-appbar {
		display: flex;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 9001;
		height: 64px;
		padding: 0;
		background: #ffffff;
		border-top: 1px solid var(--wp--preset--color--border);
		box-shadow: 0 -2px 12px rgba(39, 38, 87, 0.06);
	}
	/* Content must clear the app bar so the last section isn't hidden. */
	body { padding-bottom: 64px; }
}
.telness-appbar__btn {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	padding: 8px 0;
	text-decoration: none;
	font-family: var(--wp--preset--font-family--body);
	font-size: 11px;
	font-weight: 600;
	color: var(--wp--preset--color--navy);
	background: #ffffff;
	transition: background 120ms ease, color 120ms ease;
}
.telness-appbar__btn svg {
	width: 22px;
	height: 22px;
}
.telness-appbar__btn:hover {
	background: var(--wp--preset--color--off);
	color: var(--wp--preset--color--navy);
}
.telness-appbar__btn--primary {
	background: var(--wp--preset--color--green);
	color: #ffffff;
}
.telness-appbar__btn--primary:hover {
	background: var(--wp--preset--color--green-dark);
	color: #ffffff;
}

/* ============================================================
   FOOTER — port of legacy .tl-footer (telness-standalone.css L944-996).
   Three-column top (link cols + brand/social) + legal bottom row.
   ============================================================ */

/* Reset the template-part wrapper: it's a <footer> with `alignfull` applied
   by WP's block-theme layout. We want full-bleed white bg with a top border
   and internal content clamped to the wideSize container. */
footer.telness-footer {
	margin-top: 0;
	background-color: var(--wp--preset--color--background);
	border-top: 1px solid var(--wp--preset--color--border);
	padding: 0;
}

.telness-footer__inner {
	max-width: 1280px; /* matches theme.json layout.wideSize */
	margin: 0 auto;
	padding-left: var(--wp--preset--spacing--md);
	padding-right: var(--wp--preset--spacing--md);
}

.telness-footer__top {
	display: grid;
	grid-template-columns: 1fr 1fr auto;
	gap: 40px;
	padding: 52px 0 48px;
	border-bottom: 1px solid var(--wp--preset--color--border);
}

.telness-footer__col {
	min-width: 0;
}
.telness-footer__heading {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-muted);
	margin: 0 0 14px;
}
.telness-footer__col ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.telness-footer__col ul li {
	margin: 0;
	padding: 0;
}
.telness-footer__col ul a {
	font-family: var(--wp--preset--font-family--body);
	font-size: 14px;
	font-weight: 400;
	color: var(--wp--preset--color--navy);
	text-decoration: none;
	transition: color 120ms ease;
	display: block;
}
.telness-footer__col ul a:hover {
	color: var(--wp--preset--color--green);
}

.telness-footer__brand {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 16px;
}
.telness-footer__logo {
	display: inline-block;
	line-height: 0;
}
.telness-footer__logo img,
.telness-footer__logo .custom-logo {
	height: 40px;
	width: auto;
	max-width: 160px;
	display: block;
}
.telness-footer__logo--text {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 20px;
	font-weight: 700;
	color: var(--wp--preset--color--navy);
	text-decoration: none;
	line-height: 1;
}

.telness-footer__social {
	display: flex;
	gap: 10px;
}
.telness-footer__social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--wp--preset--color--navy);
	color: #ffffff;
	text-decoration: none;
	transition: background 140ms ease, transform 140ms ease;
}
.telness-footer__social a:hover {
	background: var(--wp--preset--color--green);
	transform: translateY(-2px);
	color: #ffffff;
}
.telness-footer__social svg {
	width: 15px;
	height: 15px;
	fill: currentColor;
}

.telness-footer__bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 10px;
	padding: 18px 0;
}
.telness-footer__legal {
	font-family: var(--wp--preset--font-family--body);
	font-size: 12px;
	color: var(--wp--preset--color--ink-muted);
}
.telness-footer__links {
	display: flex;
	gap: 18px;
	flex-wrap: wrap;
}
.telness-footer__links a {
	font-family: var(--wp--preset--font-family--body);
	font-size: 12px;
	color: var(--wp--preset--color--ink-muted);
	text-decoration: none;
	transition: color 120ms ease;
}
.telness-footer__links a:hover {
	color: var(--wp--preset--color--navy);
}

/* Responsive — ports legacy media queries at 1024 / 900 / 480. */
@media (max-width: 1024px) {
	.telness-footer__top {
		grid-template-columns: 1fr 1fr;
	}
	.telness-footer__brand {
		grid-column: 1 / -1;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}
}
@media (max-width: 900px) {
	.telness-footer__top {
		grid-template-columns: 1fr;
		gap: 28px;
		padding: 36px 0 32px;
	}
	.telness-footer__brand {
		align-items: flex-start;
	}
}
@media (max-width: 480px) {
	.telness-footer__bottom {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* ============================================================
   PRICING SECTION — port of .tl-pricing (telness-standalone.css
   L527-635) + responsive L1012-1043. Uses .telness-product-card
   children inside .telness-pricing__grid.
   ============================================================ */

.telness-pricing-wrap {
	background-color: var(--wp--preset--color--background);
}
.telness-pricing {
	max-width: 1280px;
	margin: 0 auto;
	padding-left: var(--wp--preset--spacing--md);
	padding-right: var(--wp--preset--spacing--md);
}

.telness-pricing .telness-pricing__hd {
	margin: 0 0 40px;
	max-width: 900px;
}
/* Per-section margins only — type styling comes from the unified
   `[class*="telness-"][class*="__h2"]` / __eye / __sub rules at the
   bottom of this file. */
.telness-pricing .telness-pricing__eye { margin: 0 0 12px; }
.telness-pricing .telness-pricing__h2  { margin: 0 0 8px; }
.telness-pricing .telness-pricing__sub { margin: 0; }

/* USP row — flex-wrap row of check-bullet items. Decoupled from
   the product card count below: editors can add any number of
   USPs and any number of cards independently without the two
   counts needing to match. Items flow horizontally and wrap as
   the row fills. Each USP keeps its own check + text alignment
   via the inner flex on `li`. */
.telness-pricing ul.telness-pricing__usps {
	list-style: none;
	padding: 0;
	margin: 0 0 32px;
	display: flex;
	flex-wrap: wrap;
	column-gap: 28px;
	row-gap: 10px;
	align-items: flex-start;
}
.telness-pricing ul.telness-pricing__usps li {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-family: var(--wp--preset--font-family--body);
	font-size: 14px;
	font-weight: 400;
	color: var(--wp--preset--color--navy);
	line-height: 1.45;
	margin: 0;
	padding: 0;
}
.telness-pricing ul.telness-pricing__usps li::before {
	content: '';
	flex-shrink: 0;
	display: block;
	width: 17px;
	height: 17px;
	margin-top: 2px;
	border-radius: 50%;
	background-color: rgba(4, 175, 143, 0.13);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 11'%3E%3Cpath d='M1.5 5.5L5.5 9.5L12.5 1.5' stroke='%2304af8f' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 9px;
}

@media (max-width: 1024px) {
	.telness-pricing ul.telness-pricing__usps {
		flex-direction: column;
		gap: 8px;
	}
}

/* ============================================================
   PRICING GRID — flex column cards with per-slot min-heights.

   Cross-card row alignment strategy: every card has IDENTICAL
   min-heights on its skeleton slots (dlabel, data, tagline,
   price). When a product doesn't populate an optional slot, the
   slot still reserves its min-height space — so a card WITHOUT
   a data value leaves the same vertical gap a card WITH one
   uses. Prices, features, and buttons therefore land at the
   same Y across sibling cards.

   The CTA is pinned to the bottom via `margin-top: auto`, so
   variable feature-list lengths don't move it.

   Previous iteration used CSS Grid subgrid, but the browser
   laid children horizontally inside the card whenever the parent
   grid's auto-fit column count exceeded 2 — a known interaction
   between subgrid and auto-fit tracks. Flex column is
   deterministic and doesn't have that surprise.
   ============================================================ */

.telness-pricing__grid {
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
	align-items: stretch;
}
.telness-pricing__grid > .telness-product-card,
.telness-pricing__grid > .wp-block-telness-product-card {
	flex: 1 1 18%;
	min-width: 200px;
	max-width: 100%;
	box-sizing: border-box;
}
/* Back-compat for pricing-grid instances saved before the edit.js fix:
   the old save() left a duplicate `.telness-pricing__grid` div nested
   inside render.php's wrapper, trapping the cards in a shrunk inner box
   (cards collapse to content width, left-aligned). `display: contents`
   dissolves that stale inner wrapper so its cards become flex children
   of the real, full-width grid. The cards still match the flex rule
   above (their direct parent is the inner `.telness-pricing__grid`), so
   they size correctly once hoisted. No-op on freshly-saved instances —
   they have no nested grid. Remove once all pages are re-saved. */
.telness-pricing__grid > .telness-pricing__grid {
	display: contents;
}
/* Strip WP's flow-layout block-gap margin. theme.json sets
   `spacing.blockGap`, and WP emits:
     :where(.wp-block-group.is-layout-flow) > *:not(...) { margin-block-start: ... }
   against every non-first child of a group with `layout.type: default`.
   Cards 2 & 3 inherit 24px of extra top-padding that way, breaking
   cross-card alignment. The pattern now ships with `layout.type: flex`
   so new inserts don't get the margin — but existing inserts in the DB
   still have the old type, so we also strip it defensively here. The
   :not(#_) trick bumps specificity above WP's :where()-scoped rule
   without resorting to !important. */
.telness-pricing__grid > *:not(#_) {
	margin-block-start: 0;
	margin-block-end: 0;
}

/* "Fit cards on one row" — sidebar toggle on telness/pricing-grid. Forces
   every card onto a single row by disabling wrap and removing card
   min-width. Default (no class) = wrap behavior.
   `is-style-pricing-adjust` is kept for backwards-compat with any old
   pattern instance still using the core/group + block-style approach. */
.telness-pricing__grid.is-fit-row,
.telness-pricing__grid.is-style-pricing-adjust {
	flex-wrap: nowrap;
}
.telness-pricing__grid.is-fit-row > .telness-product-card,
.telness-pricing__grid.is-fit-row > .wp-block-telness-product-card,
.telness-pricing__grid.is-style-pricing-adjust > .telness-product-card,
.telness-pricing__grid.is-style-pricing-adjust > .wp-block-telness-product-card {
	min-width: 0;
	flex: 1 1 0;
}

.telness-pricing__note {
	display: block;
	text-align: center;
	margin: 16px 0 0;
	font-family: var(--wp--preset--font-family--body);
	font-size: 12px;
	color: var(--wp--preset--color--ink-muted);
}

/* ============================================================
   PRODUCT CARD — port of .tl-card (telness-standalone.css L549-631).

   Accent color is driven by `.is-accent-<slug>` classes further
   down. No inline `style="--var:..."` anywhere — the accent
   variable is resolved entirely in this stylesheet.
   ============================================================ */

.telness-product-card {
	--telness-card-accent: var(--wp--preset--color--green);
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	background-color: #ffffff;
	border: 1.5px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--card);
	padding: 30px 22px 22px;
	transition: transform 200ms ease, box-shadow 200ms ease;
	box-sizing: border-box;
}

.telness-product-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 10px 32px rgba(39, 38, 87, 0.09);
}
.telness-product-card.is-featured {
	border-color: var(--telness-card-accent);
	box-shadow: 0 0 0 1px var(--telness-card-accent);
}
.telness-product-card.is-featured:hover {
	box-shadow: 0 0 0 1px var(--telness-card-accent), 0 10px 32px rgba(39, 38, 87, 0.09);
}

/* Badge is absolute — floats above the card top edge. */
.telness-product-card__badge {
	position: absolute;
	top: -12px;
	left: 50%;
	transform: translateX(-50%);
	background: var(--telness-card-accent);
	color: #ffffff;
	font-family: var(--wp--preset--font-family--body);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	padding: 4px 13px;
	border-radius: 20px;
	white-space: nowrap;
	display: block;
	z-index: 1;
}

/* Slot min-heights are the trick that makes rows align across cards:
   every card reserves the same vertical space for each slot, even
   when a product doesn't populate it. Tuned against the standard
   Mobilabonnemang layout — adjust if a new product family needs
   bigger defaults. */

.telness-product-card__dlabel {
	display: block;
	font-family: var(--wp--preset--font-family--body);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-muted);
	margin: 0 0 3px;
	min-height: 12px;
	line-height: 1;
}
.telness-product-card__data {
	display: block;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--data);
	font-weight: 800;
	color: var(--wp--preset--color--navy);
	letter-spacing: -0.02em;
	line-height: 1;
	margin: 0 0 12px;
}
.telness-product-card__divider {
	height: 1px;
	width: 100%;
	background: var(--wp--preset--color--border);
	border: none;
	margin: 0 0 10px;
	display: block;
}
.telness-product-card__tagline {
	display: block;
	font-family: var(--wp--preset--font-family--body);
	font-size: 13px;
	color: var(--wp--preset--color--ink-muted);
	line-height: 1.4;
	margin: 0 0 6px;
	/* Reserve two lines so prices align across cards with varying
	   tagline wraps. */
	min-height: 2.8em;
}

.telness-product-card__price {
	display: block;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--price);
	font-weight: 800;
	color: var(--telness-card-accent);
	letter-spacing: -0.02em;
	line-height: 1;
	margin: 0 0 18px;
}
.telness-product-card__price-suffix {
	font-family: var(--wp--preset--font-family--body);
	font-size: 13px;
	font-weight: 400;
	color: var(--wp--preset--color--ink-muted);
	letter-spacing: 0;
}
.telness-product-card__price--discounted .telness-product-card__price-old {
	display: inline-block;
	font-size: 18px;
	color: var(--wp--preset--color--ink-muted);
	text-decoration: line-through;
	font-weight: 600;
	margin-right: 8px;
	letter-spacing: 0;
}

.telness-product-card__feats {
	display: flex;
	flex-direction: column;
	gap: 9px;
	margin: 0 0 20px;
	list-style: none;
	padding: 0;
}
.telness-product-card__feats li {
	display: flex;
	align-items: center;
	gap: 8px;
	font-family: var(--wp--preset--font-family--body);
	font-size: 14px;
	font-weight: 400;
	color: var(--wp--preset--color--navy);
	line-height: 1.4;
	margin: 0;
	padding: 0;
}
.telness-product-card__feats li::before {
	content: '';
	flex-shrink: 0;
	display: block;
	width: 17px;
	height: 17px;
	border-radius: 50%;
	background-color: rgba(4, 175, 143, 0.13);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 11'%3E%3Cpath d='M1.5 5.5L5.5 9.5L12.5 1.5' stroke='%2304af8f' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 9px;
}

.telness-product-card__cta {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	box-sizing: border-box;
	min-height: 46px;
	padding: 12px 16px;
	border-radius: 100px;
	font-family: var(--wp--preset--font-family--body);
	font-size: 13px;
	font-weight: 600;
	color: #ffffff;
	background: var(--wp--preset--color--navy);
	border: none;
	text-decoration: none;
	transition: background 140ms ease, transform 140ms ease;
	/* Pin to the bottom of the card — buttons align across cards. */
	margin-top: auto;
}
.telness-product-card__cta:hover {
	background: var(--wp--preset--color--navy-dark);
	transform: translateY(-1px);
	color: #ffffff;
}
.telness-product-card.is-featured .telness-product-card__cta {
	background: var(--telness-card-accent);
}
.telness-product-card.is-featured .telness-product-card__cta:hover {
	filter: brightness(0.92);
	color: #ffffff;
}
.telness-product-card__cta--secondary {
	background: transparent;
	color: var(--wp--preset--color--navy);
	border: 1.5px solid var(--wp--preset--color--border);
	margin-top: 8px;
}
.telness-product-card__cta--secondary:hover {
	background: var(--wp--preset--color--off);
	color: var(--wp--preset--color--navy);
}

/* ============================================================
   ACCENT VARIANTS — brand-curated presets.

   Add a new partner color = one rule here + one entry in the
   ACCENT_VARIANTS array in blocks/product-card/edit.js + one slug
   in the whitelist in blocks/product-card/render.php.
   ============================================================ */
.telness-product-card.is-accent-green   { --telness-card-accent: #04af8f; }
.telness-product-card.is-accent-navy    { --telness-card-accent: #272657; }
.telness-product-card.is-accent-teal    { --telness-card-accent: #4fefd1; }
.telness-product-card.is-accent-purple  { --telness-card-accent: #6d5ae6; }
.telness-product-card.is-accent-coral   { --telness-card-accent: #ff6b6b; }
.telness-product-card.is-accent-orange  { --telness-card-accent: #f5a623; }

/* Responsive — match legacy: 4-up on wide, 1-up on tablet/mobile. */
@media (max-width: 1024px) {
	.telness-pricing__grid {
		max-width: 400px;
		margin-left: auto;
		margin-right: auto;
	}
	.telness-pricing__grid > .telness-product-card,
	.telness-pricing__grid > .wp-block-telness-product-card {
		flex: 1 1 100%;
	}
}
@media (max-width: 900px) {
	.telness-pricing-wrap {
		padding: 52px 0;
	}
}
@media (max-width: 480px) {
	.telness-product-card {
		padding: 26px 16px 18px;
	}
}

/* ============================================================
   PRICING TWO-COLUMN — variant of .telness-pricing for product
   pages where the pricing IS the hero (H1 instead of H2, two
   cards, optional "read more" link). Reuses .telness-product-card
   markup unchanged — only the section chrome differs.
   ============================================================ */

.telness-pricing-two-wrap {
	background-color: var(--wp--preset--color--background);
}
.telness-pricing-two {
	max-width: 1280px;
	margin: 0 auto;
	padding-left: var(--wp--preset--spacing--md);
	padding-right: var(--wp--preset--spacing--md);
}

.telness-pricing-two .telness-pricing-two__hd {
	margin: 0 0 40px;
	max-width: 900px;
}
.telness-pricing-two .telness-pricing-two__eye { margin: 0 0 12px; }
.telness-pricing-two .telness-pricing-two__h2  { margin: 0 0 12px; }
.telness-pricing-two .telness-pricing-two__sub { margin: 0; }

.telness-pricing-two__grid {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	align-items: stretch;
}
.telness-pricing-two__grid > .telness-product-card,
.telness-pricing-two__grid > .wp-block-telness-product-card {
	flex: 1 1 320px;
	min-width: 320px;
	max-width: 100%;
	box-sizing: border-box;
}
/* Strip WP flow-layout block-gap margin — same trick as .telness-pricing__grid. */
.telness-pricing-two__grid > *:not(#_) {
	margin-block-start: 0;
	margin-block-end: 0;
}

.telness-pricing-two-wrap .telness-pricing-two__link {
	display: block;
	text-align: center;
	margin: 32px auto 0;
	max-width: 1280px;
	padding-left: var(--wp--preset--spacing--md);
	padding-right: var(--wp--preset--spacing--md);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--md);
}
.telness-pricing-two-wrap .telness-pricing-two__link:empty {
	display: none;
}
.telness-pricing-two-wrap .telness-pricing-two__link a {
	color: var(--wp--preset--color--navy);
	text-decoration: none;
	font-weight: 600;
}
.telness-pricing-two-wrap .telness-pricing-two__link a:hover {
	text-decoration: underline;
}

@media (max-width: 900px) {
	.telness-pricing-two-wrap {
		padding: 52px 0;
	}
	.telness-pricing-two__grid > .telness-product-card,
	.telness-pricing-two__grid > .wp-block-telness-product-card {
		flex: 1 1 100%;
		min-width: 0;
	}
}

/* ============================================================
   FAQ SECTION (inline accordion) — port of legacy .tl-faq
   (telness-standalone.css L730-774). Off-white background,
   centered list, border-separated items, +/× rotating icon.
   ============================================================ */

/* FAQ-wrap — needs more bottom breathing room than the standard
   section scale because the last accordion item's bottom border
   sits flush against the visual edge of the section, making the
   default `clamp(64,7vw,96px)` feel cramped against the next
   section. The `.telness-faq-wrap.telness-faq-wrap` doubled-class
   selector beats the unified section-padding rule (which sits
   later in the file but uses single-class specificity) so this
   bottom-padding override wins without !important. */
.telness-faq-wrap {
	background-color: var(--wp--preset--color--off);
}
.telness-faq-wrap.telness-faq-wrap {
	padding-bottom: clamp(96px, 9vw, 128px);
}
@media (max-width: 900px) {
	.telness-faq-wrap.telness-faq-wrap {
		padding-bottom: 72px;
	}
}
.telness-faq {
	max-width: 1280px;
	margin: 0 auto;
	padding-left: var(--wp--preset--spacing--md);
	padding-right: var(--wp--preset--spacing--md);
}

.telness-faq .telness-faq__hd {
	margin: 0 0 40px;
	text-align: center;
}
.telness-faq .telness-faq__eye { margin: 0 0 12px; }
.telness-faq .telness-faq__h2  { margin: 0; }

.telness-faq-section {
	display: block;
}
.telness-faq-section__inner {
	max-width: 680px;
	margin: 0 auto;
}
.telness-faq-section__list {
	border-top: 1px solid var(--wp--preset--color--border);
}
.telness-faq-section__item {
	border-bottom: 1px solid var(--wp--preset--color--border);
}
.telness-faq-section__btn {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	width: 100%;
	padding: 18px 0;
	background: none;
	border: none;
	text-align: left;
	cursor: pointer;
	font-family: var(--wp--preset--font-family--body);
	font-size: 15px;
	font-weight: 500;
	color: var(--wp--preset--color--navy);
	line-height: 1.35;
	transition: color 120ms ease;
}
.telness-faq-section__btn:hover {
	color: var(--wp--preset--color--green);
}
.telness-faq-section__q {
	flex: 1 1 0%;
	min-width: 0;
	overflow-wrap: break-word;
	word-break: break-word;
}
.telness-faq-section__ico {
	flex-shrink: 0;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--wp--preset--color--navy);
	display: flex;
	align-items: center;
	justify-content: center;
	color: #ffffff;
	transition: background 180ms ease;
}
.telness-faq-section__ico svg {
	width: 11px;
	height: 11px;
	stroke: currentColor;
	stroke-width: 2.5;
	stroke-linecap: round;
	fill: none;
	transition: transform 240ms cubic-bezier(.22, 1, .36, 1);
}
.telness-faq-section__item.is-open .telness-faq-section__ico {
	background: var(--wp--preset--color--green);
}
.telness-faq-section__item.is-open .telness-faq-section__ico svg {
	transform: rotate(45deg);
}
.telness-faq-section__body {
	overflow: hidden;
}
.telness-faq-section__body[hidden] {
	display: none;
}
.telness-faq-section__inner-body {
	padding: 0 36px 18px 0;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--base);
	color: var(--wp--preset--color--ink-muted);
	line-height: 1.7;
}
.telness-faq-section__inner-body p {
	margin: 0 0 10px;
}
.telness-faq-section__inner-body p:last-child {
	margin-bottom: 0;
}

/* ============================================================
   FAQ DIRECTORY (/faq page) — port of legacy template-telness-faq.php
   inline <style>. Search input + category tabs + grouped list.
   ============================================================ */

.telness-faq-page-wrap {
	padding: clamp(64px, 7vw, 96px) 0 40px;
}
.telness-faq-page {
	max-width: 800px;
	margin: 0 auto;
	padding-left: var(--wp--preset--spacing--md);
	padding-right: var(--wp--preset--spacing--md);
}
.telness-faq-page .telness-faq-page__eye { margin: 0 0 12px; }
/* H1 keeps its own size since the unified rule targets __h2 only.
   This is the page-level title, not a section heading. */
.telness-faq-page h1.telness-faq-page__h1 {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--hero);
	font-weight: 700;
	color: var(--wp--preset--color--navy);
	letter-spacing: -0.02em;
	line-height: 1.05;
	margin: 0 0 12px;
}
.telness-faq-page .telness-faq-page__sub {
	margin: 0 0 28px;
	max-width: 600px;
}

.telness-faq-directory {
	margin-top: 8px;
}

.telness-faq-directory__search {
	width: 100%;
	max-width: 520px;
	padding: 16px 20px 16px 52px;
	font-family: var(--wp--preset--font-family--body);
	font-size: 16px;
	color: var(--wp--preset--color--navy);
	border: 1.5px solid var(--wp--preset--color--border);
	border-radius: 100px;
	background-color: #ffffff;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: 18px center;
	background-size: 22px;
	-webkit-appearance: none;
	appearance: none;
	outline: none;
	transition: border-color 140ms ease, box-shadow 140ms ease;
}
.telness-faq-directory__search:focus {
	border-color: var(--wp--preset--color--green);
	box-shadow: 0 0 0 3px rgba(4, 175, 143, 0.1);
}
.telness-faq-directory__search::placeholder {
	color: var(--wp--preset--color--ink-muted);
}

.telness-faq-directory__tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 24px 0 32px;
}
.telness-faq-directory__tab {
	background: #ffffff;
	border: 1.5px solid var(--wp--preset--color--border);
	border-radius: 100px;
	padding: 8px 18px;
	font-family: var(--wp--preset--font-family--body);
	font-size: 13px;
	font-weight: 600;
	color: var(--wp--preset--color--navy);
	cursor: pointer;
	transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
}
.telness-faq-directory__tab:hover {
	border-color: var(--wp--preset--color--green);
	color: var(--wp--preset--color--green);
}
.telness-faq-directory__tab.is-active {
	background: var(--wp--preset--color--navy);
	color: #ffffff;
	border-color: var(--wp--preset--color--navy);
}

.telness-faq-directory__count {
	font-family: var(--wp--preset--font-family--body);
	font-size: 14px;
	color: var(--wp--preset--color--ink-muted);
	margin: 0 0 8px;
}

.telness-faq-directory__list {
	display: flex;
	flex-direction: column;
}
.telness-faq-directory__cat-heading {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 15px;
	font-weight: 700;
	color: var(--wp--preset--color--green);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	margin: 32px 0 12px;
}
.telness-faq-directory__cat-heading:first-child {
	margin-top: 8px;
}
.telness-faq-directory__cat-heading.is-hidden {
	display: none;
}

.telness-faq-directory__card {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 16px 20px 16px 0;
	border-bottom: 1px solid var(--wp--preset--color--border);
	text-decoration: none;
	color: var(--wp--preset--color--navy);
	font-family: var(--wp--preset--font-family--body);
	font-size: 16px;
	font-weight: 500;
	line-height: 1.45;
	transition: color 120ms ease;
}
.telness-faq-directory__card:hover {
	color: var(--wp--preset--color--green);
}
.telness-faq-directory__card.is-hidden {
	display: none;
}
.telness-faq-directory__card-arrow {
	flex-shrink: 0;
	color: var(--wp--preset--color--green);
	opacity: 0.5;
	transition: opacity 120ms ease, transform 120ms ease;
}
.telness-faq-directory__card:hover .telness-faq-directory__card-arrow {
	opacity: 1;
	transform: translateX(3px);
}
.telness-faq-directory__card-arrow svg {
	width: 18px;
	height: 18px;
}

.telness-faq-directory__empty {
	display: block;
	text-align: center;
	padding: 48px 0;
	font-family: var(--wp--preset--font-family--body);
	font-size: 16px;
	color: var(--wp--preset--color--ink-muted);
}

@media (max-width: 640px) {
	.telness-faq-directory__card {
		padding: 18px 0;
		font-size: 15px;
	}
	.telness-faq-directory__search {
		font-size: 16px;
		padding: 14px 18px 14px 48px;
	}
}

/* ============================================================
   SINGLE FAQ PAGE (/faq/<category>/<slug>/)
   ============================================================ */

.telness-single-faq {
	padding: 120px 0 80px;
}
.telness-single-faq__container {
	padding-left: var(--wp--preset--spacing--md);
	padding-right: var(--wp--preset--spacing--md);
}
.telness-single-faq__breadcrumb {
	align-items: center;
	gap: 12px;
	margin: 0 0 16px;
}
.telness-single-faq__back a {
	font-family: var(--wp--preset--font-family--body);
	font-size: 13px;
	font-weight: 600;
	color: var(--wp--preset--color--green);
	text-decoration: none;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}
.telness-single-faq__back a:hover {
	color: var(--wp--preset--color--navy);
}
.telness-single-faq__cat a,
.telness-single-faq__cat {
	font-family: var(--wp--preset--font-family--body);
	font-size: 13px;
	font-weight: 600;
	color: var(--wp--preset--color--ink-muted);
	text-decoration: none;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}
.telness-single-faq h1.telness-single-faq__title {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--hero);
	font-weight: 700;
	color: var(--wp--preset--color--navy);
	letter-spacing: -0.02em;
	line-height: 1.05;
	margin: 0 0 32px;
}

/* ============================================================
   .telness-article — long-form post body. Shared across FAQ posts,
   blog posts, partner pages. Port of inline styles from legacy
   single-faq.php (lines 21-91), minus Elementor-specific overrides.
   ============================================================ */

.telness-article {
	font-family: var(--wp--preset--font-family--body);
	font-size: 16px;
	color: #444444;
	line-height: 1.8;
}

.telness-article > * + * {
	margin-top: 16px;
}

.telness-article h1 {
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(24px, 3vw, 32px);
	font-weight: 700;
	color: var(--wp--preset--color--navy);
	letter-spacing: -0.02em;
	line-height: 1.25;
	margin: 48px 0 16px;
}
.telness-article h2 {
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(20px, 2.5vw, 26px);
	font-weight: 700;
	color: var(--wp--preset--color--navy);
	letter-spacing: -0.01em;
	line-height: 1.3;
	margin: 40px 0 14px;
}
.telness-article h3 {
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(17px, 2vw, 21px);
	font-weight: 700;
	color: var(--wp--preset--color--navy);
	line-height: 1.35;
	margin: 32px 0 10px;
}
.telness-article h4 {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 17px;
	font-weight: 700;
	color: var(--wp--preset--color--navy);
	margin: 28px 0 8px;
}
.telness-article h5,
.telness-article h6 {
	font-family: var(--wp--preset--font-family--body);
	font-size: 16px;
	font-weight: 600;
	color: var(--wp--preset--color--navy);
	margin: 24px 0 8px;
}
.telness-article > :first-child {
	margin-top: 0;
}

.telness-article p {
	margin: 0 0 16px;
}

.telness-article strong,
.telness-article b {
	color: var(--wp--preset--color--navy);
	font-weight: 600;
}

.telness-article a {
	color: var(--wp--preset--color--green);
	text-decoration: underline;
}
.telness-article a:hover {
	color: var(--wp--preset--color--navy);
}

.telness-article ul,
.telness-article ol {
	font-family: var(--wp--preset--font-family--body);
	font-size: 16px;
	color: #444444;
	line-height: 1.6;
	margin: 0 0 16px;
	padding-left: 0;
	list-style: none;
}
.telness-article li {
	margin-bottom: 8px;
	padding-left: 28px;
	position: relative;
	display: block;
}
.telness-article li:last-child {
	margin-bottom: 0;
}
.telness-article ul > li::before {
	content: '';
	position: absolute;
	left: 4px;
	top: 9px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--wp--preset--color--green);
}
.telness-article ol {
	counter-reset: telness-ol;
}
.telness-article ol > li {
	padding-left: 32px;
}
.telness-article ol > li::before {
	counter-increment: telness-ol;
	content: counter(telness-ol) '.';
	position: absolute;
	left: 0;
	top: 0;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: 16px;
	color: var(--wp--preset--color--green);
	min-width: 24px;
}
.telness-article ul ul > li::before {
	width: 6px;
	height: 6px;
	top: 10px;
	background: var(--wp--preset--color--ink-muted);
}

.telness-article img {
	max-width: 100%;
	height: auto;
	border-radius: 12px;
	margin: 32px 0;
	display: block;
}

.telness-article blockquote,
.telness-article .wp-block-quote {
	border-left: 4px solid var(--wp--preset--color--green);
	padding: 20px 24px;
	margin: 32px 0;
	background: var(--wp--preset--color--off);
	border-radius: 0 12px 12px 0;
}
.telness-article blockquote p,
.telness-article .wp-block-quote p {
	color: var(--wp--preset--color--navy);
	font-style: italic;
	margin: 0;
}

.telness-article figure {
	margin: 32px 0;
}
.telness-article figcaption {
	font-family: var(--wp--preset--font-family--body);
	font-size: 13px;
	color: var(--wp--preset--color--ink-muted);
	margin-top: 8px;
	text-align: center;
}

/* ============================================================
   SUPPORT CTA pattern — "Hittade du inte svaret?"
   ============================================================ */

.telness-support-cta-wrap {
	padding: 0 0 80px;
}
.telness-support-cta {
	max-width: 800px;
	margin: 0 auto;
	background: var(--wp--preset--color--off);
	border-radius: var(--wp--custom--radius--card);
	padding: 40px 32px;
	text-align: center;
}
.telness-support-cta .telness-support-cta__h2 { margin: 0 0 8px; }
.telness-support-cta .telness-support-cta__p {
	font-family: var(--wp--preset--font-family--body);
	font-size: 16px;
	color: var(--wp--preset--color--ink-muted);
	margin: 0 auto 24px;
	max-width: 480px;
}
.telness-support-cta__ctas {
	justify-content: center;
}

/* ============================================================
   SERVICES GRID — port of .tl-svc-grid + .tl-svc-card--noimg
   (telness-standalone.css L856-904 + template-telness-home.php
   L157-245). Header scaffolding mirrors the pricing section
   (eyebrow / h2 / subhead) but uses its own .telness-services
   namespace so the two patterns evolve independently.
   ============================================================ */

.telness-services-wrap {
	background-color: var(--wp--preset--color--background);
}
.telness-services {
	max-width: 1280px;
	margin: 0 auto;
	padding-left: var(--wp--preset--spacing--md);
	padding-right: var(--wp--preset--spacing--md);
}

.telness-services .telness-services__hd {
	margin: 0 0 40px;
	max-width: 900px;
}
.telness-services .telness-services__eye { margin: 0 0 12px; }
.telness-services .telness-services__h2  { margin: 0 0 8px; }
.telness-services .telness-services__sub { margin: 0; }

/* Grid: CSS Grid with `grid-auto-rows: 1fr` so all rows are equal
   height. The `.wp-block-group.telness-services__grid` selector
   ties WP's `.wp-block-group.is-layout-flex` on specificity (0,2,0)
   and wins by cascade order — no !important needed.

   3 cols ≥901px, 2 ≤900px, 1 ≤640px. */
.wp-block-group.telness-services__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-auto-rows: 1fr;
	gap: 20px;
	align-items: stretch;
	justify-items: stretch;
}

.telness-services__grid > .telness-service-card,
.telness-services__grid > .wp-block-telness-service-card {
	min-width: 0;
	box-sizing: border-box;
}

/* Defensive: strip block-gap margin if a saved pattern instance
   still uses layout.type: "default" (matches the pricing fix). */
.telness-services__grid > *:not(#_) {
	margin-block-start: 0;
	margin-block-end: 0;
}

@media (max-width: 900px) {
	.wp-block-group.telness-services__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (max-width: 640px) {
	.wp-block-group.telness-services__grid {
		grid-template-columns: 1fr;
		max-width: 480px;
		margin-left: auto;
		margin-right: auto;
	}
}

/* ============================================================
   SERVICE CARD — port of .tl-svc-card.tl-svc-card--noimg.

   Flex column with the actions row pinned to the bottom via
   `margin-top: auto`, so cards with longer descriptions don't
   push their CTAs out of horizontal alignment with siblings.
   ============================================================ */

/* Visual card styling targets ONLY .telness-service-card, not the
   block-auto class. Frontend rendering puts both classes on the same
   <article>, so this still applies. In the editor, useBlockProps()
   adds .wp-block-telness-service-card to an outer wrapper div AND
   the inner <article> (from SSR) carries both classes too — applying
   visual styles to the auto class would render two stacked bordered
   rectangles, with the outer wrapper extending a few px below the
   inner card via align-items: stretch. Scoping to .telness-service-card
   keeps the visual on a single element, both editor and frontend. */
.telness-service-card {
	background: var(--wp--preset--color--white);
	border: 1.5px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--card);
	padding: 0;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: box-shadow 200ms ease, transform 200ms ease;
	box-sizing: border-box;
	height: 100%;
}
.telness-service-card:hover {
	box-shadow: 0 8px 28px rgba(39, 38, 87, 0.08);
	transform: translateY(-2px);
}

.telness-service-card__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	background: rgba(4, 175, 143, 0.08);
	color: var(--wp--preset--color--green);
	border-radius: 10px;
	margin: 24px 0 0 24px;
	flex-shrink: 0;
}

.telness-service-card .telness-service-card__title {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 18px;
	font-weight: 700;
	color: var(--wp--preset--color--navy);
	letter-spacing: -0.01em;
	margin: 0;
	padding: 16px 24px 0;
	line-height: 1.3;
}

.telness-service-card .telness-service-card__desc {
	font-family: var(--wp--preset--font-family--body);
	font-size: 14px;
	color: var(--wp--preset--color--ink-muted);
	line-height: 1.6;
	margin: 0;
	padding: 8px 24px 0;
	flex: 1;
}

/* Callout use case: when both CTAs are hidden, the actions row
   doesn't render and the description ends up flush against the
   bottom border. Give it the same 24px gutter that the actions
   row would have provided. */
.telness-service-card .telness-service-card__desc:last-child {
	padding-bottom: 24px;
}

.telness-service-card__actions {
	padding: 20px 24px 24px;
	margin-top: auto;
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
}

/* Primary CTA — green pill matching theme.json button defaults.
   Rendered as <a> not core/button so we don't rely on editor markup. */
.telness-service-card__primary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--ui);
	font-weight: 600;
	letter-spacing: 0.01em;
	color: var(--wp--preset--color--white);
	background: var(--wp--preset--color--green);
	border-radius: var(--wp--custom--radius--pill);
	padding: 11px 22px;
	text-decoration: none;
	transition: background-color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
	box-shadow: var(--wp--custom--shadow--green);
}
.telness-service-card__primary:hover,
.telness-service-card__primary:focus-visible {
	background: var(--wp--preset--color--green-dark);
	color: var(--wp--preset--color--white);
	box-shadow: var(--wp--custom--shadow--green-hover);
	transform: translateY(-1px);
}

.telness-service-card__link {
	font-family: var(--wp--preset--font-family--body);
	font-size: 13px;
	font-weight: 600;
	color: var(--wp--preset--color--green);
	text-decoration: none;
	transition: color 120ms ease;
}
.telness-service-card__link:hover,
.telness-service-card__link:focus-visible {
	color: var(--wp--preset--color--navy);
}

/* ============================================================
   LOGO STRIP — port of .tl-partners (telness-standalone.css
   L640-663). Custom block (telness/logo-strip) — server-rendered
   from the Customer CPT, no query-loop scaffolding to fight.

   Markup (frontend):
     <section class="telness-logo-strip is-gap-{tight|default|loose}">
       <div class="telness-logo-strip__inner">
         <p class="telness-logo-strip__label">…</p>
         <div class="telness-logo-strip__row">
           <img class="telness-logo-strip__logo">  ← when featured image set
           <span class="telness-logo-strip__name">…</span>  ← fallback
         </div>
       </div>
     </section>

   Gap variants: editor-controlled via sidebar SelectControl
   (Tight / Default / Loose). Defaults to Default = legacy 40px.
   ============================================================ */

.telness-logo-strip,
.wp-block-telness-logo-strip {
	display: block;
	background-color: var(--wp--preset--color--background);
	padding: 40px 0;
}
.telness-logo-strip__inner {
	max-width: 1280px;
	margin: 0 auto;
	padding-left: var(--wp--preset--spacing--md);
	padding-right: var(--wp--preset--spacing--md);
}

.telness-logo-strip .telness-logo-strip__label {
	display: block;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-muted);
	text-align: center;
	margin: 0 0 20px;
}

/* Single-row flex of logos. Wraps when row width exceeds container.
   Gap is set per gap-variant below. */
.telness-logo-strip .telness-logo-strip__row {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
}
.telness-logo-strip.is-gap-tight   .telness-logo-strip__row { gap: 12px 24px; }
.telness-logo-strip.is-gap-default .telness-logo-strip__row { gap: 16px 40px; }
.telness-logo-strip.is-gap-loose   .telness-logo-strip__row { gap: 24px 72px; }

/* Logo images — grayscale + opacity, hover restores full color. */
.telness-logo-strip .telness-logo-strip__logo {
	height: clamp(22px, 2.5vw, 32px);
	width: auto;
	max-width: 130px;
	object-fit: contain;
	filter: grayscale(1) opacity(.45);
	transition: filter 220ms ease;
	display: block;
}
.telness-logo-strip .telness-logo-strip__logo:hover {
	filter: grayscale(0) opacity(1);
}

/* Text-name fallback when a customer has no featured image yet —
   port of legacy `.tl-partners__row span` (L649-653). Lets editors
   see the strip taking shape immediately after seed; replace with
   real logos by attaching featured images. */
.telness-logo-strip .telness-logo-strip__name {
	display: inline-block;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 15px;
	font-weight: 700;
	color: var(--wp--preset--color--ink-muted);
	opacity: .45;
	letter-spacing: -0.01em;
	transition: opacity 200ms ease;
	line-height: 1;
}
.telness-logo-strip .telness-logo-strip__name:hover {
	opacity: .75;
}

/* ============================================================
   CONTENT BLOCK — port of .tl-content + .tl-block (telness-standalone.css
   L666-700 + responsive L1018-1019).

   Architecture: the block IS the section. Outer element owns the
   full-width white background + vertical padding (so editors can
   stack instances back-to-back without nesting in core/group
   wrappers). Inner element is the 1280px-max grid container.

   Image position is driven by `order` on grid items (vs the legacy
   `direction: rtl` trick) — cleaner with CSS Grid, no need to flip
   text direction on descendants. On mobile the grid collapses to
   1 column and the image always lands first regardless of position.
   ============================================================ */

/* Outer = section wrapper */
.telness-content-block,
.wp-block-telness-content-block {
	display: block;
	background-color: var(--wp--preset--color--background);
	margin: 0;
	padding-top:    clamp(48px, 6vw, 80px);
	padding-bottom: clamp(48px, 6vw, 80px);
}
/* Mobile breakpoint — keep the legacy ~50px section breathing room. */
@media (max-width: 900px) {
	.telness-content-block,
	.wp-block-telness-content-block {
		padding-top:    36px;
		padding-bottom: 36px;
	}
}

/* Inner = max-width grid. Horizontal padding + max-width identical
   to every other section's inner container so the white-bg
   content-block doesn't look wider-margined than its siblings. Gap
   between the image + text columns kept tight so the visible
   content area uses the full 1280px width. */
.telness-content-block .telness-content-block__inner {
	max-width: 1280px;
	margin: 0 auto;
	padding-left: var(--wp--preset--spacing--md);
	padding-right: var(--wp--preset--spacing--md);
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(20px, 2.5vw, 40px);
	align-items: center;
}
.telness-content-block .telness-content-block__inner > *:not(#_) {
	margin-block-start: 0;
	margin-block-end: 0;
}

/* Image-position toggle via order on grid items. Default DOM order is
   image (vis) → text. is-image-right swaps via order. */
.telness-content-block.is-image-right .telness-content-block__vis {
	order: 2;
}
.telness-content-block.is-image-right .telness-content-block__text {
	order: 1;
}

/* Image side */
.telness-content-block .telness-content-block__vis {
	border-radius: var(--wp--custom--radius--card);
	overflow: hidden;
	aspect-ratio: 5 / 4;
	background-color: var(--wp--preset--color--off);
	position: relative;
	margin: 0;
	padding: 0;
}
.telness-content-block .telness-content-block__vis .wp-block-image,
.telness-content-block .telness-content-block__vis figure {
	margin: 0;
	width: 100%;
	height: 100%;
}
.telness-content-block .telness-content-block__vis img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 440ms ease;
}
.telness-content-block .telness-content-block__vis:hover img {
	transform: scale(1.04);
}

/* Text side */
.telness-content-block .telness-content-block__text {
	margin: 0;
	padding: 0;
}
/* Vertical rhythm — bottom margin per element type, sized to match
   typographic hierarchy. Bottom-margin model (not adjacent-sibling
   margin-top) so each element owns its own breathing room and the
   cascade reads top-to-bottom.

   Sizes follow best practice:
     - eyebrow (small):           12px   — tight to lead into h2
     - h2 (24-44px):              24px   — firm gap before body
     - p / span block / div:      22px   — paragraph rhythm
     - ul / ol / .wp-block-list:  28px   — separates list from next
     - li:                        10px   — between list items
     - .wp-block-buttons (div):   32px   — CTA breathes into next
   Last child of __text has no bottom margin via :last-child below. */
.telness-content-block .telness-content-block__text > .telness-content-block__eye {
	margin: 0 0 12px;
}
.telness-content-block .telness-content-block__text > h2,
.telness-content-block .telness-content-block__text > h3,
.telness-content-block .telness-content-block__text > h4,
.telness-content-block .telness-content-block__text > .wp-block-heading {
	margin: 0 0 24px;
}
.telness-content-block .telness-content-block__text > p,
.telness-content-block .telness-content-block__text > div,
.telness-content-block .telness-content-block__text > span {
	margin: 0 0 22px;
}
.telness-content-block .telness-content-block__text > ul,
.telness-content-block .telness-content-block__text > ol,
.telness-content-block .telness-content-block__text > .wp-block-list {
	margin: 0 0 28px;
}
.telness-content-block .telness-content-block__text > .wp-block-buttons {
	margin: 0 0 32px;
}
.telness-content-block .telness-content-block__text > *:last-child {
	margin-bottom: 0;
}
/* Inside lists: each <li> gets its own bottom margin so the gap is
   driven by the bullet items, not by an outer flex `gap` rule. */
.telness-content-block .telness-content-block__text li {
	margin-bottom: 10px;
}
.telness-content-block .telness-content-block__text li:last-child {
	margin-bottom: 0;
}

/* __eye type styling comes from the unified rule at the bottom of
   this file. */

.telness-content-block .telness-content-block__text h2,
.telness-content-block .telness-content-block__text .wp-block-heading {
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(26px, 2.5vw + 10px, 44px);
	font-weight: 800;
	color: var(--wp--preset--color--navy);
	letter-spacing: -0.025em;
	line-height: 1.1;
}

.telness-content-block .telness-content-block__text p {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--lg);
	color: var(--wp--preset--color--ink-muted);
	line-height: 1.7;
}

/* Lists inside the text side default to green-circle checkmarks —
   port of legacy .tl-checks. Editors who want a plain list can wrap
   it with className "is-style-no-checks" via the Advanced field. */
.telness-content-block .telness-content-block__text ul.wp-block-list:not(.is-style-no-checks) {
	list-style: none;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.telness-content-block .telness-content-block__text ul.wp-block-list:not(.is-style-no-checks) li {
	display: flex;
	align-items: center;
	gap: 9px;
	font-family: var(--wp--preset--font-family--body);
	font-size: 15px;
	font-weight: 400;
	line-height: 1.45;
	color: var(--wp--preset--color--navy);
	margin: 0;
	padding: 0;
}
.telness-content-block .telness-content-block__text ul.wp-block-list:not(.is-style-no-checks) li::before {
	content: '';
	flex-shrink: 0;
	display: block;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background-color: var(--wp--preset--color--green);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 11'%3E%3Cpath d='M1.5 5.5L5.5 9.5L12.5 1.5' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 11px;
}

/* Mobile: collapse to 1 column. Image ALWAYS first regardless of
   imagePosition (per user spec). hide-image-mobile suppresses the
   image entirely on small screens. */
@media (max-width: 900px) {
	.telness-content-block .telness-content-block__inner {
		grid-template-columns: 1fr;
		gap: 20px;
	}
	.telness-content-block .telness-content-block__vis,
	.telness-content-block.is-image-right .telness-content-block__vis {
		order: 0;
	}
	.telness-content-block .telness-content-block__text,
	.telness-content-block.is-image-right .telness-content-block__text {
		order: 1;
	}
	.telness-content-block.has-hidden-image-mobile .telness-content-block__vis {
		display: none;
	}
}

/* ============================================================
   SECTION BACKGROUND block-styles. Editors apply via the Block
   Styles panel on a pattern's outer wrapper (any core/group, or
   directly on telness/content-block) to switch between the three
   approved section backgrounds.

   Compound selectors (.wp-block-X.is-style-Y) bring class-on-class
   specificity (0,2,0) so they beat the single-class wrapper rules
   in each pattern's CSS (e.g. .telness-pricing-wrap, .telness-
   stats-wrap, .telness-content-block) without !important. Source
   order also places them after the pattern rules, belt + braces.

   Per-instance vertical spacing lives in the Dimensions panel
   (Settings tab → Padding/Margin sliders + size presets) so the
   styles slot is reserved here for color presets. Block styles
   are mutually exclusive per block — combining bg + spacing via
   block styles isn't possible, hence the split.

   Registered in inc/blocks.php for: core/group, telness/content-block.
   Logo strip is intentionally excluded.
   ============================================================ */

.wp-block-group.is-style-bg-white,
.wp-block-telness-content-block.is-style-bg-white {
	background-color: var(--wp--preset--color--background);
}

.wp-block-group.is-style-bg-gray,
.wp-block-telness-content-block.is-style-bg-gray {
	background-color: var(--wp--preset--color--off);
}

.wp-block-group.is-style-bg-mint,
.wp-block-telness-content-block.is-style-bg-mint {
	background-color: var(--wp--preset--color--mint);
}

.wp-block-group.is-style-bg-purple,
.wp-block-telness-content-block.is-style-bg-purple {
	background-color: var(--wp--preset--color--navy-dark);
}

/* ============================================================
   DARK-BG VARIANT (is-style-bg-purple) — text-color overrides.
   When a section wrapper has the purple background, all section
   header copy + body content needs to flip from navy/gray to
   white/teal/muted-white so it stays readable. Cards inside the
   section (product / phone / service / blog / stat) keep their
   own white-bg + navy-text — these overrides only target
   section-level text, not card-internal text.

   Specificity (0,5,0) on the attribute-selector rules beats the
   unified typography rule (0,3,0); no !important needed.

   The light bg variants (bg-white / bg-gray / bg-mint) keep the
   default navy/green/ink-muted scheme — contrast checked OK.
   ============================================================ */

/* HEADLINES → white. Includes every section's __h2 / __h3, plus
   the hero's h1 and any free-form heading inside a content-block. */
.is-style-bg-purple [class*="telness-"][class*="__h2"]:not([class*="hero"]),
.is-style-bg-purple [class*="telness-"][class*="__h3"]:not([class*="hero"]),
.is-style-bg-purple .telness-content-block__text :is(h1, h2, h3, h4, h5, h6, .wp-block-heading),
.is-style-bg-purple .telness-hero h1.telness-hero__h1 {
	color: var(--wp--preset--color--white);
}

/* EYEBROWS → teal. Hero eyebrow included so the hue stays
   on-brand inside a dark hero variant. */
.is-style-bg-purple [class*="telness-"][class*="__eye"] {
	color: var(--wp--preset--color--teal);
}

/* SUB-HEADLINES + body paragraphs + ALL list items inside a
   bg-purple section → muted white. Cards inside the section
   (product / phone / service / blog / stat / testimonial) use
   PHP-rendered <ul> tags without the .wp-block-list class — they
   won't match the list-item selector below, so card-internal
   bullet text keeps its own navy color.

   Content-block lists need a SECOND override below because their
   own rule sits at specificity (0,5,2) and beats the general
   `.is-style-bg-purple .wp-block-list li` (0,2,1) selector. */
.is-style-bg-purple [class*="telness-"][class*="__sub"],
.is-style-bg-purple .telness-content-block__text p:not(.telness-content-block__eye),
.is-style-bg-purple .wp-block-list li,
.is-style-bg-purple .telness-content-block__text ul.wp-block-list:not(.is-style-no-checks) li,
.is-style-bg-purple .telness-trust__copy,
.is-style-bg-purple .telness-trust__score {
	color: rgba(255, 255, 255, 0.85);
}

/* FOOTNOTES → faded white (lower visual weight than body) */
.is-style-bg-purple [class*="telness-"][class*="__note"] {
	color: rgba(255, 255, 255, 0.55);
}

/* Row links (Läs mer →) inside data-plans rows → teal so they
   read on the dark bg without competing with the green CTAs. */
.is-style-bg-purple .telness-data-plans__rowlink a {
	color: var(--wp--preset--color--teal);
}
.is-style-bg-purple .telness-data-plans__rowlink a:hover {
	color: var(--wp--preset--color--white);
}

/* Buttons on dark bg: green pill default. Editors can still
   override per-button via the standard Color panel (Settings tab
   → Color → Background / Text) — these rules just set sensible
   defaults so an unconfigured button reads correctly. */
.is-style-bg-purple .wp-block-button:not(.is-style-outline) .wp-block-button__link {
	background: var(--wp--preset--color--green);
	color: var(--wp--preset--color--white);
}
.is-style-bg-purple .wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--white);
	border-color: rgba(255, 255, 255, 0.4);
}
.is-style-bg-purple .wp-block-button.is-style-outline .wp-block-button__link:hover {
	border-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--white);
}

/* ============================================================
   FORM SECTION — port of .tl-form-section (telness-standalone.css
   L1097-1174). Navy-dark hero-style section with centered text on
   top + a white form card below. Form is the existing
   telness/hubspot-form block — editor picks form from the CPT
   dropdown.

   Pattern: telness/form-section.

   The HubSpot iframe is sandboxed — we can only style the wrapper
   card. HubSpot injects its own CSS into the iframe, so internal
   field styling is whatever HubSpot's theme provides.
   ============================================================ */

.telness-form-section-wrap {
	background-color: var(--wp--preset--color--navy-dark);
}
.telness-form-section {
	max-width: 680px;
	margin: 0 auto;
	padding-left: var(--wp--preset--spacing--md);
	padding-right: var(--wp--preset--spacing--md);
	display: flex;
	flex-direction: column;
	gap: 32px;
}
.telness-form-section > *:not(#_) {
	margin-block-start: 0;
	margin-block-end: 0;
}

/* Text block */
.telness-form-section .telness-form-section__text {
	text-align: center;
	margin: 0;
}
.telness-form-section .telness-form-section__text > *:not(#_) {
	margin-block-start: 0;
	margin-block-end: 0;
}
.telness-form-section .telness-form-section__text > * + * {
	margin-top: 14px;
}

/* Form-section dark-bg styles live near the unified rule at the
   bottom of this file (they need !important to beat the unified
   rule, see "Form-section sits on a dark navy background…" block). */

/* Form card */
.telness-form-section .telness-form-section__form {
	background: var(--wp--preset--color--white);
	border-radius: var(--wp--custom--radius--card);
	padding: 36px 32px;
	box-shadow: 0 8px 40px rgba(0, 0, 0, 0.18);
	margin: 0;
}

/* HubSpot iframe wrapper inside the form card. The iframe content
   is sandboxed — these only affect wrapper layout. */
.telness-form-section .telness-form-section__form .hbspt-form {
	margin: 0;
}
.telness-form-section .telness-form-section__form iframe.hs-form-iframe {
	width: 100%;
	border: none;
	display: block;
}

@media (max-width: 760px) {
	.telness-form-section .telness-form-section__form {
		padding: 24px 20px;
	}
}

/* ============================================================
   PHONES GRID — port of `.tl-card` phone variant + tags
   (telness-standalone.css L549-635, template-telness-mobiltelefoner.php
   L130-244). Backed by the Phone CPT; rendered per-card by the
   telness/phone-card block.

   Pattern: telness/phones.

   Same equal-row-height grid trick as services (display: grid +
   grid-auto-rows: 1fr + !important) so cards line up regardless
   of which has a tag, longer title, or different price string
   length.
   ============================================================ */

.telness-phones-wrap {
	background-color: var(--wp--preset--color--background);
}
.telness-phones {
	max-width: 1280px;
	margin: 0 auto;
	padding-left: var(--wp--preset--spacing--md);
	padding-right: var(--wp--preset--spacing--md);
}

.telness-phones .telness-phones__hd {
	margin: 0 0 40px;
	max-width: 900px;
}
.telness-phones .telness-phones__eye { margin: 0 0 12px; }
.telness-phones .telness-phones__h2  { margin: 0 0 8px; }
.telness-phones .telness-phones__sub { margin: 0; }

/* Card: flex column, image-zone at top, then text, divider, list,
   note, CTA pinned to bottom via margin-top: auto. */
.telness-phone-card,
.wp-block-telness-phone-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background-color: var(--wp--preset--color--white);
	border: 1.5px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--card);
	padding: 0 22px 22px;
	overflow: hidden;
	transition: transform 200ms ease, box-shadow 200ms ease;
	box-sizing: border-box;
	height: 100%;
}
.telness-phone-card:hover,
.wp-block-telness-phone-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 10px 32px rgba(39, 38, 87, 0.09);
}

/* Phone image zone — off-white tile at top of the card */
.telness-phone-card__image {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 -22px 18px;
	padding: 20px 24px 0;
	background: var(--wp--preset--color--off);
	min-height: 160px;
}
.telness-phone-card__image img {
	max-height: 140px;
	width: auto;
	display: block;
	filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.1));
}

/* Tag badge — Ny / Begagnad — top-right corner of the image */
.telness-phone-card__tag {
	position: absolute;
	top: 12px;
	right: 12px;
	font-family: var(--wp--preset--font-family--body);
	font-size: 11px;
	font-weight: 600;
	padding: 3px 10px;
	border-radius: 100px;
	letter-spacing: 0.02em;
	background: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--white);
}
.telness-phone-card.is-tag-new .telness-phone-card__tag {
	background: var(--wp--preset--color--green);
}
.telness-phone-card.is-tag-used .telness-phone-card__tag {
	background: var(--wp--preset--color--navy);
}

/* Text scaffolding */
.telness-phone-card__dlabel {
	display: block;
	font-family: var(--wp--preset--font-family--body);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-muted);
	margin: 0 0 3px;
}
.telness-phone-card__data {
	display: block;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--data);
	font-weight: 800;
	color: var(--wp--preset--color--navy);
	letter-spacing: -0.02em;
	line-height: 1;
	margin: 0 0 12px;
}
.telness-phone-card__divider {
	height: 1px;
	background: var(--wp--preset--color--border);
	border: none;
	margin: 0 0 10px;
	display: block;
}

/* Tier list — each row: green-circle bullet + "<label> — <value>".
   Same green-tinted check as legacy `.tl-card__feats`. */
.telness-phone-card__feats {
	display: flex;
	flex-direction: column;
	gap: 9px;
	flex: 1;
	margin: 0 0 16px;
	padding: 0;
	list-style: none;
}
.telness-phone-card__feats li {
	display: flex;
	align-items: center;
	gap: 8px;
	font-family: var(--wp--preset--font-family--body);
	font-size: 14px;
	font-weight: 400;
	color: var(--wp--preset--color--navy);
	line-height: 1.4;
	margin: 0;
}
.telness-phone-card__feats li::before {
	content: '';
	flex-shrink: 0;
	display: block;
	width: 17px;
	height: 17px;
	border-radius: 50%;
	background-color: rgba(4, 175, 143, 0.13);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 11'%3E%3Cpath d='M1.5 5.5L5.5 9.5L12.5 1.5' stroke='%2304af8f' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 9px;
}

.telness-phone-card__note {
	font-family: var(--wp--preset--font-family--body);
	font-size: 12px;
	color: var(--wp--preset--color--ink-muted);
	line-height: 1.5;
	margin: 0 0 16px;
	padding: 0;
}

/* CTA pinned to bottom via margin-top: auto so cards align CTAs
   across rows regardless of internal content lengths. Navy pill
   matching legacy `.tl-card__cta`. */
.telness-phone-card__cta {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	box-sizing: border-box;
	margin-top: auto;
	padding: 12px 16px;
	border-radius: 100px;
	font-family: var(--wp--preset--font-family--body);
	font-size: 13px;
	font-weight: 600;
	color: var(--wp--preset--color--white);
	background: var(--wp--preset--color--navy);
	border: none;
	text-decoration: none;
	transition: background 140ms ease, transform 140ms ease;
}
.telness-phone-card__cta:hover,
.telness-phone-card__cta:focus-visible {
	background: var(--wp--preset--color--navy-dark);
	color: var(--wp--preset--color--white);
	transform: translateY(-1px);
}

/* ============================================================
   CALLOUT — pattern that reuses telness/service-card with both
   CTAs hidden, for "How it works" / 3-step sections. Grid + cards
   share styles with the services pattern; only the section
   wrapper + header gets its own namespace.
   ============================================================ */

.telness-callout-wrap {
	background-color: var(--wp--preset--color--background);
}
.telness-callout {
	max-width: 1280px;
	margin: 0 auto;
	padding-left: var(--wp--preset--spacing--md);
	padding-right: var(--wp--preset--spacing--md);
}

.telness-callout .telness-callout__hd {
	margin: 0 0 40px;
	max-width: 900px;
}
.telness-callout .telness-callout__eye { margin: 0 0 12px; }
.telness-callout .telness-callout__h2  { margin: 0; }

/* ============================================================
   BLOG SECTION + BLOG GRID — port of legacy `.tl-svc-card` (image
   variant) used in category.php / single-post.php / related-posts
   (telness-standalone.css L859-890).

   Custom block: telness/blog-grid (renders the 3 cards + queries).
   Pattern:      telness/blog-section (section wrap + header + block).

   Card markup:
     <article class="telness-blog-card">
       <a class="telness-blog-card__image"><img></a>
       <span class="telness-blog-card__category">Mobilabonnemang</span>
       <h3 class="telness-blog-card__title"><a>Title</a></h3>
       <p class="telness-blog-card__excerpt">…</p>
       <div class="telness-blog-card__actions">
         <a class="telness-blog-card__link">Läs mer →</a>
       </div>
     </article>

   Same equal-row-height grid trick (display: grid + auto-rows: 1fr).
   ============================================================ */

.telness-blog-section-wrap {
	background-color: var(--wp--preset--color--background);
}
.telness-blog-section {
	max-width: 1280px;
	margin: 0 auto;
	padding-left: var(--wp--preset--spacing--md);
	padding-right: var(--wp--preset--spacing--md);
}

.telness-blog-section .telness-blog-section__hd {
	margin: 0 0 40px;
	max-width: 900px;
}
.telness-blog-section .telness-blog-section__eye { margin: 0 0 12px; }
.telness-blog-section .telness-blog-section__h2  { margin: 0 0 8px; }
.telness-blog-section .telness-blog-section__sub { margin: 0; }

/* Grid: 3 cols equal-height. Same layout as services/phones. */
.telness-blog-grid,
.wp-block-telness-blog-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-auto-rows: 1fr;
	gap: 20px;
	align-items: stretch;
}
.telness-blog-grid > *:not(#_) {
	margin-block-start: 0;
	margin-block-end: 0;
}

@media (max-width: 900px) {
	.telness-blog-grid,
	.wp-block-telness-blog-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (max-width: 640px) {
	.telness-blog-grid,
	.wp-block-telness-blog-grid {
		grid-template-columns: 1fr;
		max-width: 480px;
		margin-left: auto;
		margin-right: auto;
	}
}

/* Card */
.telness-blog-card {
	background: var(--wp--preset--color--white);
	border: 1.5px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--card);
	padding: 0;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: box-shadow 200ms ease, transform 200ms ease;
	box-sizing: border-box;
	height: 100%;
	margin: 0;
}
.telness-blog-card:hover {
	box-shadow: 0 8px 28px rgba(39, 38, 87, 0.08);
	transform: translateY(-2px);
}

.telness-blog-card__image {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--wp--preset--color--off);
}
.telness-blog-card__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
/* Legacy empty state — kept for any old saved markup that still uses
   `--empty`. New renders use `--fallback` below with the logo. */
.telness-blog-card__image--empty {
	background: var(--wp--preset--color--off);
}

/* Logo fallback — used when a post has no featured image. Centres
   the site's custom logo (Site Identity) on the off-white card
   tile so every preview has visual identity. */
.telness-blog-card__image--fallback {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--wp--preset--color--off);
	text-decoration: none;
	padding: clamp(16px, 4%, 32px);
}
.telness-blog-card__image--fallback .telness-blog-card__logo {
	width: auto;
	max-width: 60%;
	max-height: 60%;
	height: auto;
	object-fit: contain;
	display: block;
	opacity: 0.85;
	transition: opacity 200ms ease;
}
.telness-blog-card__image--fallback:hover .telness-blog-card__logo {
	opacity: 1;
}
/* Text fallback when no custom logo is set (rare — defensive only). */
.telness-blog-card__logo--text {
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(20px, 3vw, 32px);
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--navy);
}

.telness-blog-card__category {
	display: inline-block;
	font-family: var(--wp--preset--font-family--body);
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--green);
	padding: 16px 24px 0;
}

.telness-blog-card__title {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 18px;
	font-weight: 700;
	color: var(--wp--preset--color--navy);
	letter-spacing: -0.01em;
	margin: 0;
	padding: 8px 24px 0;
	line-height: 1.3;
}
.telness-blog-card__title a {
	color: inherit;
	text-decoration: none;
}
.telness-blog-card__title a:hover,
.telness-blog-card__title a:focus-visible {
	color: var(--wp--preset--color--green);
}

.telness-blog-card__excerpt {
	font-family: var(--wp--preset--font-family--body);
	font-size: 14px;
	color: var(--wp--preset--color--ink-muted);
	line-height: 1.6;
	margin: 0;
	padding: 8px 24px 0;
	flex: 1;
}

.telness-blog-card__actions {
	padding: 20px 24px 24px;
	margin-top: auto;
}
.telness-blog-card__link {
	font-family: var(--wp--preset--font-family--body);
	font-size: 13px;
	font-weight: 600;
	color: var(--wp--preset--color--green);
	text-decoration: none;
	transition: color 120ms ease;
}
.telness-blog-card__link:hover,
.telness-blog-card__link:focus-visible {
	color: var(--wp--preset--color--navy);
}

/* ============================================================
   GRID — generic equal-column wrapper for cards (telness/grid block).

   Editor picks 2 / 3 / 4 / 5 columns via the sidebar; CSS handles
   the responsive collapse:
     5 → 4 (≤1100px) → 2 (≤900px) → 1 (≤640px)
     4         →     2 (≤900px) → 1 (≤640px)
     3         →     2 (≤900px) → 1 (≤640px)
     2                          → 1 (≤640px)

   Equal-row heights via grid-auto-rows: 1fr — same trick as the
   services / phones / blog grids.
   ============================================================ */

.telness-grid,
.wp-block-telness-grid {
	display: grid;
	gap: 20px;
	align-items: stretch;
	grid-auto-rows: 1fr;
}

.telness-grid.is-cols-2,
.wp-block-telness-grid.is-cols-2 { grid-template-columns: repeat(2, 1fr); }
.telness-grid.is-cols-3,
.wp-block-telness-grid.is-cols-3 { grid-template-columns: repeat(3, 1fr); }
.telness-grid.is-cols-4,
.wp-block-telness-grid.is-cols-4 { grid-template-columns: repeat(4, 1fr); }
.telness-grid.is-cols-5,
.wp-block-telness-grid.is-cols-5 { grid-template-columns: repeat(5, 1fr); }

.telness-grid > *:not(#_),
.wp-block-telness-grid > *:not(#_) {
	margin-block-start: 0;
	margin-block-end: 0;
}

@media (max-width: 1100px) {
	.telness-grid.is-cols-5,
	.wp-block-telness-grid.is-cols-5 { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 900px) {
	.telness-grid.is-cols-3,
	.telness-grid.is-cols-4,
	.telness-grid.is-cols-5,
	.wp-block-telness-grid.is-cols-3,
	.wp-block-telness-grid.is-cols-4,
	.wp-block-telness-grid.is-cols-5 {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (max-width: 640px) {
	.telness-grid,
	.wp-block-telness-grid {
		grid-template-columns: 1fr;
		max-width: 480px;
		margin-left: auto;
		margin-right: auto;
	}
}

/* ============================================================
   DATA PLANS — multi-row pattern (telness/data-plans).
   Section wrapper + main header + N (h3 + grid + link) rows +
   footnote. Cards come from telness/product-card with empty
   tagline + features (just data label + value + price + CTA).
   Reuses .telness-grid for the columns layout.
   ============================================================ */

.telness-data-plans-wrap {
	background-color: var(--wp--preset--color--background);
}
.telness-data-plans {
	max-width: 1280px;
	margin: 0 auto;
	padding-left: var(--wp--preset--spacing--md);
	padding-right: var(--wp--preset--spacing--md);
}

.telness-data-plans .telness-data-plans__hd {
	margin: 0 0 40px;
	max-width: 900px;
}
.telness-data-plans .telness-data-plans__eye { margin: 0 0 12px; }
.telness-data-plans .telness-data-plans__h2  { margin: 0 0 8px; }
.telness-data-plans .telness-data-plans__sub { margin: 0; }

/* Row sub-heading (h3) — own scale below __h2. */
.telness-data-plans h3.telness-data-plans__h3 {
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(20px, 1.5vw + 12px, 24px);
	font-weight: 700;
	color: var(--wp--preset--color--navy);
	letter-spacing: -0.015em;
	line-height: 1.2;
	margin: 32px 0 24px;
}
.telness-data-plans h3.telness-data-plans__h3:first-of-type {
	margin-top: 0;
}

/* Row "Läs mer →" link paragraph */
.telness-data-plans p.telness-data-plans__rowlink {
	margin: 24px 0 0;
}
.telness-data-plans p.telness-data-plans__rowlink a {
	font-family: var(--wp--preset--font-family--body);
	font-size: 14px;
	font-weight: 600;
	color: var(--wp--preset--color--green);
	text-decoration: none;
	transition: color 120ms ease;
}
.telness-data-plans p.telness-data-plans__rowlink a:hover,
.telness-data-plans p.telness-data-plans__rowlink a:focus-visible {
	color: var(--wp--preset--color--navy);
}

/* Footnote (* Priser exkl. moms) */
.telness-data-plans p.telness-data-plans__note {
	margin: 32px 0 0;
	font-family: var(--wp--preset--font-family--body);
	font-size: 12px;
	color: var(--wp--preset--color--ink-muted);
}

/* ============================================================
   TESTIMONIALS — section + card. Section uses telness/grid for
   the row layout (col toggle + add more grids for multi-row).
   Card: 5 star slots (filled green up to N) + quote + cite.
   ============================================================ */

.telness-testimonials-wrap {
	background-color: var(--wp--preset--color--off);
}
.telness-testimonials {
	max-width: 1280px;
	margin: 0 auto;
	padding-left: var(--wp--preset--spacing--md);
	padding-right: var(--wp--preset--spacing--md);
}

.telness-testimonials .telness-testimonials__hd {
	margin: 0 0 40px;
	max-width: 900px;
}
.telness-testimonials .telness-testimonials__eye { margin: 0 0 12px; }
.telness-testimonials .telness-testimonials__h2  { margin: 0; }

/* Card */
.telness-testimonial-card,
.wp-block-telness-testimonial-card {
	background: var(--wp--preset--color--white);
	border: 1.5px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--card);
	padding: 28px 28px 24px;
	display: flex;
	flex-direction: column;
	gap: 14px;
	height: 100%;
	box-sizing: border-box;
	margin: 0;
	transition: box-shadow 200ms ease, transform 200ms ease;
}
.telness-testimonial-card:hover,
.wp-block-telness-testimonial-card:hover {
	box-shadow: 0 8px 28px rgba(39, 38, 87, 0.06);
	transform: translateY(-2px);
}

/* Stars row */
.telness-testimonial-card__stars {
	display: inline-flex;
	gap: 2px;
	line-height: 1;
}
.telness-testimonial-card__stars span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.telness-testimonial-card__stars span.is-filled {
	color: var(--wp--preset--color--green);
}
.telness-testimonial-card__stars span.is-empty {
	color: rgba(39, 38, 87, 0.15);
}
.telness-testimonial-card__stars svg {
	display: block;
	width: 18px;
	height: 18px;
}

/* Quote */
.telness-testimonial-card .telness-testimonial-card__quote {
	margin: 0;
	font-family: var(--wp--preset--font-family--body);
	font-size: 15px;
	font-style: italic;
	color: var(--wp--preset--color--navy);
	line-height: 1.55;
	flex: 1;
	border: none;
	padding: 0;
}

/* Name */
.telness-testimonial-card .telness-testimonial-card__name {
	margin: 0;
	font-family: var(--wp--preset--font-family--body);
	font-size: 13px;
	font-style: normal;
	color: var(--wp--preset--color--ink-muted);
	margin-top: auto;
}

/* ============================================================
   COUNTRY LIST (utomlands) — port of legacy `.tl-alpha-nav` +
   `.tl-country-list` + country modal (template-telness-utomlands.php
   inline styles + telness-standalone.css L820-851).

   Pattern: telness/utomlands.
   Block:   telness/country-list (frontend fetches the JSON URL).
   ============================================================ */

.telness-utomlands-wrap {
	background-color: var(--wp--preset--color--background);
}
.telness-utomlands {
	max-width: 1280px;
	margin: 0 auto;
	padding-left: var(--wp--preset--spacing--md);
	padding-right: var(--wp--preset--spacing--md);
}

.telness-utomlands .telness-utomlands__hd {
	margin: 0 0 32px;
	max-width: 900px;
}
.telness-utomlands .telness-utomlands__eye { margin: 0 0 12px; }
.telness-utomlands .telness-utomlands__h2  { margin: 0 0 8px; }
.telness-utomlands .telness-utomlands__sub { margin: 0; }

/* Block: scaffold + alpha nav + list + modal */

.telness-country-list-block,
.wp-block-telness-country-list {
	display: block;
	margin: 0;
}

/* Alphabet quick-nav buttons */
.telness-country-list-block__nav {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0 0 32px;
}
.telness-country-list-block__alpha {
	font-family: var(--wp--preset--font-family--body);
	font-size: 13px;
	font-weight: 600;
	width: 36px;
	height: 36px;
	border-radius: 8px;
	border: 1.5px solid var(--wp--preset--color--border);
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--navy);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
}
.telness-country-list-block__alpha:hover,
.telness-country-list-block__alpha:focus-visible {
	background: var(--wp--preset--color--green);
	border-color: var(--wp--preset--color--green);
	color: var(--wp--preset--color--white);
	outline: none;
}

/* Country list — multi-column flow */
.telness-country-list-block__list {
	columns: 3;
	column-gap: 24px;
	list-style: none;
	padding: 0;
	margin: 0 0 48px;
}
.telness-country-list-block__list li {
	break-inside: avoid;
	margin: 0 0 2px;
}
.telness-country-list-block__item {
	display: block;
	font-family: var(--wp--preset--font-family--body);
	font-size: 14px;
	font-weight: 500;
	color: var(--wp--preset--color--navy);
	padding: 7px 0;
	text-decoration: none;
	transition: color 120ms ease;
}
.telness-country-list-block__item:hover,
.telness-country-list-block__item:focus-visible {
	color: var(--wp--preset--color--green);
}

.telness-country-list-block__loading,
.telness-country-list-block__error {
	column-span: all;
	text-align: center;
	font-family: var(--wp--preset--font-family--body);
	font-size: 14px;
	color: var(--wp--preset--color--ink-muted);
	padding: 40px 0;
}

@media (max-width: 900px) {
	.telness-country-list-block__list { columns: 2; }
}
@media (max-width: 640px) {
	.telness-country-list-block__list { columns: 1; }
}

/* Modal — native <dialog> with backdrop */
.telness-country-list-block__modal {
	width: min(700px, 90vw);
	max-height: 90vh;
	border: none;
	border-radius: var(--wp--custom--radius--card);
	padding: 32px;
	box-shadow: 0 16px 48px rgba(39, 38, 87, 0.18);
	font-family: var(--wp--preset--font-family--body);
	color: var(--wp--preset--color--navy);
	background: var(--wp--preset--color--white);
}
.telness-country-list-block__modal::backdrop {
	background: rgba(0, 0, 0, 0.55);
}
.telness-country-list-block__close {
	position: absolute;
	top: 12px;
	right: 12px;
	border: none;
	background: none;
	font-size: 24px;
	color: var(--wp--preset--color--ink-muted);
	cursor: pointer;
	padding: 4px;
	line-height: 1;
}
.telness-country-list-block__close:hover {
	color: var(--wp--preset--color--navy);
}
.telness-country-list-block__modal-title {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 22px;
	font-weight: 700;
	color: var(--wp--preset--color--navy);
	margin: 0 0 16px;
}
.telness-country-list-block__zone {
	font-family: var(--wp--preset--font-family--body);
	font-size: 14px;
	font-weight: 400;
	color: var(--wp--preset--color--ink-muted);
}
.telness-country-list-block__modal-body {
	font-size: 15px;
	line-height: 1.6;
}
.telness-country-list-block__group {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 15px;
	font-weight: 700;
	color: var(--wp--preset--color--navy);
	margin: 28px 0 8px;
}
.telness-country-list-block__rows {
	margin: 0;
	border-top: 2px solid var(--wp--preset--color--green);
	padding-top: 0;
}
.telness-country-list-block__row {
	display: flex;
	justify-content: space-between;
	gap: 24px;
	padding: 10px 0;
	border-bottom: 1px solid var(--wp--preset--color--border);
}
.telness-country-list-block__row dt {
	font-weight: 400;
	color: var(--wp--preset--color--ink-muted);
	margin: 0;
}
.telness-country-list-block__row dd {
	margin: 0;
	text-align: right;
	font-weight: 500;
	color: var(--wp--preset--color--navy);
}

/* Editor placeholder */
.telness-country-list-block-placeholder {
	display: flex;
	flex-direction: column;
	gap: 6px;
	border: 2px dashed var(--wp--preset--color--border);
	border-radius: 12px;
	padding: 28px 22px;
	text-align: center;
	color: var(--wp--preset--color--ink-muted);
	font-size: 13px;
}
.telness-country-list-block-placeholder strong {
	color: var(--wp--preset--color--navy);
	font-size: 14px;
}
.telness-country-list-block-placeholder em {
	font-style: normal;
	font-size: 12px;
	color: var(--wp--preset--color--ink-muted);
}

/* ============================================================
   COMPARISON TABLE — feature matrix (2-column).
   Pattern: telness/comparison.
   Block:   telness/comparison-table.

   Native <table> with green checks (yes), dashes (no), or custom
   text. Right column visually accented green to signal "more
   features included". Horizontally scrollable on narrow viewports
   so we never break the row alignment.
   ============================================================ */

.telness-comparison-wrap {
	background-color: var(--wp--preset--color--background);
}
.telness-comparison {
	max-width: 1280px;
	margin: 0 auto;
	padding-left: var(--wp--preset--spacing--md);
	padding-right: var(--wp--preset--spacing--md);
}

.telness-comparison .telness-comparison__hd {
	margin: 0 0 32px;
	max-width: 900px;
}
.telness-comparison .telness-comparison__eye { margin: 0 0 12px; }
.telness-comparison .telness-comparison__h2  { margin: 0 0 8px; }
.telness-comparison .telness-comparison__sub { margin: 0; }

/* Scroll wrapper — preserves table semantics while letting narrow
   viewports scroll horizontally instead of squashing rows. */
.telness-comparison-table__scroller {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border-radius: var(--wp--custom--radius--card);
	border: 1.5px solid var(--wp--preset--color--border);
	background: var(--wp--preset--color--white);
}

.telness-comparison-table__table {
	width: 100%;
	border-collapse: collapse;
	font-family: var(--wp--preset--font-family--body);
	font-size: 14px;
	color: var(--wp--preset--color--navy);
	min-width: 600px;
}

.telness-comparison-table__caption {
	caption-side: top;
	text-align: left;
	font-size: 0;
	color: transparent;
	height: 0;
	overflow: hidden;
}

.telness-comparison-table__table thead {
	background: var(--wp--preset--color--off);
}
.telness-comparison-table__table thead th {
	padding: 14px 18px;
	font-family: var(--wp--preset--font-family--body);
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--wp--preset--color--ink-muted);
	border-bottom: 1.5px solid var(--wp--preset--color--border);
	text-align: left;
}
.telness-comparison-table__table thead th.telness-comparison-table__col-head {
	text-align: center;
	color: var(--wp--preset--color--ink-muted);
}

.telness-comparison-table__table tbody tr {
	border-bottom: 1px solid var(--wp--preset--color--border);
}
.telness-comparison-table__table tbody tr:last-child {
	border-bottom: none;
}
.telness-comparison-table__table tbody tr:nth-child(even) {
	background: rgba(245, 246, 244, 0.55); /* matches --off subtly */
}

.telness-comparison-table__feature {
	padding: 12px 18px;
	font-weight: 500;
	color: var(--wp--preset--color--navy);
	text-align: left;
	font-size: 14px;
	line-height: 1.45;
}
.telness-comparison-table__cell {
	padding: 12px 18px;
	text-align: center;
	font-weight: 500;
	color: var(--wp--preset--color--navy);
	font-size: 14px;
	line-height: 1.45;
}

.telness-comparison-table__check {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: rgba(4, 175, 143, 0.13);
	color: var(--wp--preset--color--green);
}
.telness-comparison-table__check svg {
	width: 14px;
	height: 14px;
}

.telness-comparison-table__dash {
	display: inline-block;
	color: var(--wp--preset--color--border-muted);
	font-weight: 400;
}

.telness-comparison-table__text {
	color: var(--wp--preset--color--navy);
}

@media (max-width: 640px) {
	.telness-comparison-table__table thead th,
	.telness-comparison-table__feature,
	.telness-comparison-table__cell {
		padding: 10px 12px;
		font-size: 13px;
	}
}

/* ============================================================
   STATS — port of .tl-stats + .tl-stat-card (telness-standalone.css
   L909-938). Off-white section + 3 metric cards with big green
   number, descriptive line, optional outline-pill CTA.

   Pattern: telness/stats (pure pattern, no custom block — Q15).

   The CTA inside each card is a standard core/button block with
   `is-style-outline` applied. We override the button's outline
   styling INSIDE .telness-stat-card so the existing global outline
   (navy) becomes green here, matching legacy. Buttons elsewhere
   keep their normal navy-outline behavior.
   ============================================================ */

.telness-stats-wrap {
	background-color: var(--wp--preset--color--off);
}
.telness-stats {
	max-width: 1280px;
	margin: 0 auto;
	padding-left: var(--wp--preset--spacing--md);
	padding-right: var(--wp--preset--spacing--md);
}

.telness-stats .telness-stats__hd {
	margin: 0 0 40px;
	max-width: 900px;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}
.telness-stats .telness-stats__h2  { margin: 0 0 8px; }
.telness-stats .telness-stats__sub { margin: 0; }

/* 3-col grid, gap 20px, collapses to 1-col centered ≤900px (legacy
   behavior — no 2-col intermediate). Force display:grid + auto-rows
   to keep all cards equal height even if content lengths differ —
   same trick as the services grid. */
.wp-block-group.telness-stats__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-auto-rows: 1fr;
	gap: 20px;
	align-items: stretch;
}
.telness-stats__grid > *:not(#_) {
	margin-block-start: 0;
	margin-block-end: 0;
}

@media (max-width: 900px) {
	.wp-block-group.telness-stats__grid {
		grid-template-columns: 1fr;
		max-width: 400px;
		margin-left: auto;
		margin-right: auto;
	}
}

/* Card */
.telness-stats .telness-stat-card {
	background: var(--wp--preset--color--white);
	border: 1.5px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--card);
	padding: 32px 28px;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	height: 100%;
	box-sizing: border-box;
	margin: 0;
}

.telness-stats .telness-stat-card .telness-stat-card__number {
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(36px, 4vw, 52px);
	font-weight: 800;
	color: var(--wp--preset--color--green);
	line-height: 1;
	letter-spacing: -0.02em;
	margin: 0;
}
.telness-stats .telness-stat-card .telness-stat-card__text {
	font-family: var(--wp--preset--font-family--body);
	font-size: 14px;
	color: var(--wp--preset--color--ink-muted);
	line-height: 1.5;
	margin: 0 0 12px;
}

/* CTA pinned to bottom so cards with longer text still align CTAs
   across the row. Uses margin-top: auto inside the flex column. */
.telness-stats .telness-stat-card .telness-stat-card__cta {
	margin-top: auto;
	margin-bottom: 0;
}

/* Override the global navy outline-button to green-outline INSIDE
   stat cards only. Legacy button is 8px 20px / 13px / green border
   / fills with green on hover. */
.telness-stats .telness-stat-card .wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--green);
	border: 1.5px solid var(--wp--preset--color--green);
	box-shadow: none;
	padding: 8px 20px;
	font-size: 13px;
	font-weight: 600;
}
.telness-stats .telness-stat-card .wp-block-button.is-style-outline .wp-block-button__link:hover,
.telness-stats .telness-stat-card .wp-block-button.is-style-outline .wp-block-button__link:focus-visible {
	background: var(--wp--preset--color--green);
	color: var(--wp--preset--color--white);
	border-color: var(--wp--preset--color--green);
}

/* ============================================================
   IMAGE BLOCK STYLE — "Logo (contained)".

   For partner-page heroes where the right-side image is a logo
   rather than a photo. Default hero image is `object-fit: cover`
   + a left-fade overlay — great for photography, terrible for
   logos (crops + half-hides).

   When applied:
     - Image is contained (no crop)
     - Pushed to the right side with padding
     - Hero's fade overlay is suppressed (via :has())

   Editor: select the hero image → Block sidebar → Styles tab →
   pick "Logo (contained)".
   ============================================================ */

/* Generic image rule — applies anywhere this style is set.
   Specificity (0,2,1) ties the hero's `.telness-hero__bg
   .wp-block-image img` rule but wins by cascade order — this
   block sits later in the file. */
.wp-block-image.is-style-logo-contained img,
.telness-hero__bg .wp-block-image.is-style-logo-contained img {
	object-fit: contain;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
}

/* Hero-specific layout: pin the figure to fill the column with
   padding, then center the contained image inside it on the right
   side. The default hero figure is absolutely positioned to fill
   the column, so we keep that but add padding + flex so the img
   sizes itself contained. */
.telness-hero__bg .wp-block-image.is-style-logo-contained {
	position: absolute;
	inset: 0;
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	padding: clamp(24px, 4vw, 64px);
	z-index: 3;
	background: transparent;
}
.telness-hero__bg .wp-block-image.is-style-logo-contained img {
	position: static;
}

/* Suppress the left-fade overlay when the hero image is a logo
   — the fade hides the left half, which destroys logo legibility.
   :has() is well-supported in modern browsers; older browsers
   gracefully degrade (logo still visible, just with the fade). */
.telness-hero__bg:has(.wp-block-image.is-style-logo-contained)::before {
	display: none;
}

/* ============================================================
   PAGE-LEVEL SECTION SPACING — strip WP's block-gap between
   top-level full-width patterns.

   theme.json sets `spacing.blockGap = var(--wp--preset--spacing--md)`
   which makes WP's constrained layout emit:
     :where(.is-layout-constrained) > * + * { margin-block-start: 24px }

   This injects ~24px between every adjacent pattern in post-content,
   on top of each pattern's own padding. Result: cumulative whitespace
   that doesn't match the hand-coded live site (which has no such gap
   because it's not constrained-layout).

   Each Telness pattern (hero / logo strip / services / pricing /
   stats / etc.) already owns its vertical rhythm via its wrapper
   padding. The extra block-gap is double-spacing.

   Fix: zero out top/bottom margins on alignfull/alignwide direct
   children of post-content. Inner content (paragraphs in the body of
   blog posts) is unaffected — only top-level page sections.
   ============================================================ */
.wp-block-post-content > .alignfull,
.wp-block-post-content > .alignwide {
	margin-top: 0;
	margin-bottom: 0;
}

/* ============================================================
   UNIFIED SECTION TYPOGRAPHY — single source of truth for the
   heading / eyebrow / subhead scale across all section patterns.
   Pure CSS — no !important.

   How the cascade is kept clean:
     - `inc/blocks.php` filters core/heading + core/paragraph to
       remove the Typography font-size sidebar control on those
       blocks. Editors physically cannot apply a `.has-X-font-size`
       preset class, so WP never emits its own `!important`
       declarations that we'd have to fight.
     - Form-section overrides (below) tie this rule's specificity
       (0,3,0) and win via cascade order — they sit later in the file.
     - bg-purple overrides bump specificity to (0,5,0) and win
       outright.

   The attribute selectors intentionally match h1-h6 (no tag
   prefix), so an editor changing the heading level via the toolbar
   doesn't break the look. Semantic level lock is a separate concern;
   add `levelOptions:[2]` in pattern markup if you need it.

   Hero (`.telness-hero__*`) is excluded — it has its own bigger
   scale and predates this unification.
   ============================================================ */

/* Vertical rhythm — bottom margins scale with element importance:
     eyebrow (11px)  → 12px  (small lead-in to the h2)
     h2 (32-52px)    → 24px  (firm separation from the sub-line)
     sub (15-18px)   → 32px  (clear gap before the body content)
     ul/ol list      → 32px  (separates the list from the next block)
     button row      → 32px  (CTA visually grouped, breathes into trust signals)
   These mirror the per-section margins that pricing/services etc.
   used to declare; centralising them keeps section internals consistent. */

[class*="telness-"][class*="__h2"]:not([class*="hero"]) {
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(32px, 3vw + 10px, 52px);
	font-weight: 700;
	color: var(--wp--preset--color--navy);
	letter-spacing: -0.025em;
	line-height: 1.1;
	margin: 0 0 24px;
}

[class*="telness-"][class*="__eye"]:not([class*="hero"]) {
	font-family: var(--wp--preset--font-family--body);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--green);
	line-height: 1;
	margin: 0 0 12px;
}

/* Sub-headline matches list-item styling — same font-size, color,
   font-family, weight, and line-height as the bullet items below
   so the visual rhythm reads as one continuous block of body text. */
[class*="telness-"][class*="__sub"]:not([class*="hero"]):not([class*="__submit"]) {
	font-family: var(--wp--preset--font-family--body);
	font-size: 15px;
	font-weight: 400;
	color: var(--wp--preset--color--navy);
	line-height: 1.45;
	margin: 0 0 32px;
}

/* Lists inside any Telness pattern (USP row, FAQ items, content
   blocks) — bottom margin separates from the next block. */
[class*="telness-"] > ul.wp-block-list,
[class*="telness-"] > ol,
[class*="telness-"] .wp-block-list:not([class*="card"] *) {
	margin: 0 0 32px;
}

/* Button row inside any Telness pattern — bottom margin separates
   from the trust signals / next section. */
[class*="telness-"] .wp-block-buttons {
	margin: 0 0 32px;
}

/* Form-section sits on a dark navy background — h2 is white,
   eyebrow is teal, sub is muted white. Selector specificity has to
   match the unified `__sub` rule which uses two `:not()` clauses
   (specificity 0,4,0); we mirror the second :not() on the sub
   selector and add `:not([class*="hero"])` on h2/eye so all three
   tie at (0,4,0) — the form-section block sits later in the file,
   so cascade order decides and these win without !important. */
.telness-form-section [class*="telness-"][class*="__h2"]:not([class*="hero"]) {
	color: var(--wp--preset--color--white);
}
.telness-form-section [class*="telness-"][class*="__eye"]:not([class*="hero"]) {
	color: var(--wp--preset--color--teal);
}
.telness-form-section [class*="telness-"][class*="__sub"]:not([class*="__submit"]) {
	color: rgba(255, 255, 255, 0.68);
}

/* ============================================================
   UNIFIED SECTION PADDING — 1:1 with legacy section paddings
   (clamp(64px, 7vw, 96px)). Hero is intentionally NOT in this
   list — it has its own legacy-matching `padding: 20px 0 0`
   (the body's 64px header offset provides the rest of the top
   clearance). FAQ-page keeps its asymmetric padding because it
   pairs with support-CTA as one composed page section.
   ============================================================ */

.telness-pricing-wrap,
.telness-pricing-two-wrap,
.telness-faq-wrap,
.telness-services-wrap,
.telness-form-section-wrap,
.telness-phones-wrap,
.telness-callout-wrap,
.telness-blog-section-wrap,
.telness-data-plans-wrap,
.telness-testimonials-wrap,
.telness-utomlands-wrap,
.telness-comparison-wrap,
.telness-stats-wrap,
.telness-cta-section-wrap,
.telness-two-col-wrap,
.telness-three-col-wrap,
.telness-foldout-wrap {
	padding-top:    clamp(64px, 7vw, 96px);
	padding-bottom: clamp(64px, 7vw, 96px);
}

@media (max-width: 900px) {
	.telness-pricing-wrap,
	.telness-pricing-two-wrap,
	.telness-faq-wrap,
	.telness-services-wrap,
	.telness-form-section-wrap,
	.telness-phones-wrap,
	.telness-callout-wrap,
	.telness-blog-section-wrap,
	.telness-data-plans-wrap,
	.telness-testimonials-wrap,
	.telness-utomlands-wrap,
	.telness-comparison-wrap,
	.telness-stats-wrap,
	.telness-cta-section-wrap,
	.telness-two-col-wrap,
	.telness-three-col-wrap,
	.telness-foldout-wrap {
		padding-top:    52px;
		padding-bottom: 52px;
	}
}


/* ============================================================
   INFO BOX — small mint card with bold navy headline + dark-gray
   paragraph. Pattern: telness/info-box. The wrap is a normal
   alignfull section (vertical padding from the unified rule
   would over-pad an inline note, so we set our own tighter scale).
   ============================================================ */

.telness-info-box-wrap {
	background-color: var(--wp--preset--color--background);
	padding-top:    clamp(32px, 3vw, 48px);
	padding-bottom: clamp(32px, 3vw, 48px);
}
@media (max-width: 900px) {
	.telness-info-box-wrap {
		padding-top:    24px;
		padding-bottom: 24px;
	}
}

/* Card — mint background, rounded corners, generous inner padding.
   max-width 1280 + horizontal page padding so the card aligns with
   every other section's content width. */
.telness-info-box {
	max-width: 1280px;
	margin: 0 auto;
	margin-left: auto;
	margin-right: auto;
	background-color: var(--wp--preset--color--mint);
	border-radius: var(--wp--custom--radius--card);
	padding: clamp(20px, 3vw, 32px) clamp(20px, 3vw, 36px);
	box-sizing: border-box;
}
/* The wrap is full-bleed via .alignfull; the inner card respects
   the page's horizontal padding so its left/right edges line up
   with every other section's content. */
.telness-info-box-wrap.telness-info-box-wrap {
	padding-left:  var(--wp--preset--spacing--md);
	padding-right: var(--wp--preset--spacing--md);
}

/* Headline — small bolded, navy (matches the user's "purple" spec
   given navy is our brand purple). */
.telness-info-box .telness-info-box__h {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 18px;
	font-weight: 700;
	color: var(--wp--preset--color--navy);
	letter-spacing: -0.01em;
	line-height: 1.3;
	margin: 0 0 8px;
}

/* Body paragraph — body font, dark-gray, same scale as the
   pattern's regular paragraphs. */
.telness-info-box .telness-info-box__p {
	font-family: var(--wp--preset--font-family--body);
	font-size: 15px;
	font-weight: 400;
	color: var(--wp--preset--color--ink-muted);
	line-height: 1.55;
	margin: 0;
}

/* ============================================================
   CTA CARD SECTION — section header (eyebrow, h2, sub) above a
   mint card with centered icon + h3 + body + pill CTA.
   Pattern: telness/cta-card-section, block: telness/cta-card.

   Eyebrow/h2/sub typography comes from the unified
   [class*="telness-"][class*="__h2"] / __eye / __sub rules near
   the bottom of this file. Only per-pattern margins live here.
   ============================================================ */

.telness-cta-section-wrap {
	background-color: var(--wp--preset--color--background);
}

.telness-cta-section {
	max-width: 1280px;
	margin: 0 auto;
	padding-left: var(--wp--preset--spacing--md);
	padding-right: var(--wp--preset--spacing--md);
}

/* Header above the card — same vertical rhythm as other section
   patterns (pricing, services, etc). */
.telness-cta-section .telness-cta-section__hd {
	margin: 0 0 40px;
	max-width: 900px;
}
.telness-cta-section .telness-cta-section__eye { margin: 0 0 12px; }
.telness-cta-section .telness-cta-section__h2  { margin: 0 0 8px; }
.telness-cta-section .telness-cta-section__sub { margin: 0; }

/* ============================================================
   CTA CARD BLOCK — mint full-width card, centered icon + h3 +
   body + pill CTA. Sits at the bottom of the section pattern.
   ============================================================ */

.telness-cta-card {
	background-color: var(--wp--preset--color--mint);
	border-radius: var(--wp--custom--radius--card);
	padding: clamp(48px, 6vw, 96px) clamp(24px, 4vw, 64px);
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	box-sizing: border-box;
}

.telness-cta-card .telness-cta-card__icon {
	color: var(--wp--preset--color--green);
	margin: 0 0 20px;
	line-height: 0;
}
.telness-cta-card .telness-cta-card__icon svg {
	width: clamp(40px, 5vw, 56px);
	height: clamp(40px, 5vw, 56px);
}

.telness-cta-card .telness-cta-card__h {
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(20px, 2vw, 24px);
	font-weight: 700;
	color: var(--wp--preset--color--navy);
	letter-spacing: -0.01em;
	line-height: 1.3;
	margin: 0 0 16px;
	max-width: 720px;
}

.telness-cta-card .telness-cta-card__body {
	font-family: var(--wp--preset--font-family--body);
	font-size: 15px;
	font-weight: 400;
	color: var(--wp--preset--color--ink-muted);
	line-height: 1.55;
	margin: 0 0 28px;
	max-width: 560px;
}

/* Pill CTA — same shape as the global green pill button used by
   product-card / service-card. Re-declared rather than reused to
   keep the card self-contained (no dependency on core/button
   markup, which the block doesn't render). */
.telness-cta-card .telness-cta-card__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background-color: var(--wp--preset--color--green);
	color: #ffffff;
	font-family: var(--wp--preset--font-family--body);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.01em;
	text-decoration: none;
	padding: 14px 28px;
	border-radius: 999px;
	transition: background-color 200ms ease, transform 200ms ease;
}
.telness-cta-card .telness-cta-card__cta:hover,
.telness-cta-card .telness-cta-card__cta:focus-visible {
	background-color: var(--wp--preset--color--green-dark);
	transform: translateY(-1px);
}

/* Editor: when the CTA is being edited via RichText (span instead
   of <a>), the placeholder text still needs the pill chrome so the
   editor preview matches the rendered card. */
.telness-cta-card span.telness-cta-card__cta {
	cursor: text;
}

@media (max-width: 900px) {
	.telness-cta-card {
		padding: clamp(40px, 8vw, 64px) clamp(20px, 5vw, 32px);
	}
}

/* ============================================================
   FOLD-OUT CARD — collapsible card with icon + heading +
   description in the header bar and a navy pill toggle that
   reveals an inner panel. Panel holds any inner blocks
   (typically a core/html with a HubSpot meetings embed).
   Block: telness/foldout. Pattern wrapper (with section
   padding): telness/foldout-section. JS in
   blocks/foldout/view.js.
   ============================================================ */

/* Section wrap (when using the pattern) — vertical padding
   comes from the unified section-padding rule above. */
.telness-foldout-wrap {
	background-color: var(--wp--preset--color--background);
}
.telness-foldout-section {
	max-width: 1280px;
	margin: 0 auto;
	padding-left: var(--wp--preset--spacing--md);
	padding-right: var(--wp--preset--spacing--md);
}

.telness-foldout {
	background-color: #ffffff;
	border: 1.5px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--card);
	overflow: hidden;
	box-sizing: border-box;
}

.telness-foldout__bar {
	display: grid;
	grid-template-columns: auto 1fr auto;
	gap: 16px;
	align-items: center;
	padding: 18px 22px;
}

.telness-foldout__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background-color: var(--wp--preset--color--mint);
	color: var(--wp--preset--color--green);
	line-height: 0;
	flex-shrink: 0;
}

.telness-foldout__text {
	min-width: 0;
}

.telness-foldout .telness-foldout__h {
	margin: 0;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 16px;
	font-weight: 700;
	color: var(--wp--preset--color--navy);
	letter-spacing: -0.005em;
	line-height: 1.3;
}

.telness-foldout .telness-foldout__sub {
	margin: 2px 0 0;
	font-family: var(--wp--preset--font-family--body);
	font-size: 13px;
	font-weight: 400;
	color: var(--wp--preset--color--ink-muted);
	line-height: 1.45;
}

.telness-foldout__toggle {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background-color: var(--wp--preset--color--navy);
	color: #ffffff;
	border: 0;
	font-family: var(--wp--preset--font-family--body);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.01em;
	padding: 10px 18px;
	border-radius: 999px;
	cursor: pointer;
	transition: background-color 200ms ease;
	white-space: nowrap;
}
.telness-foldout__toggle:hover,
.telness-foldout__toggle:focus-visible {
	background-color: #1a1942;
}
.telness-foldout__chevron {
	transition: transform 200ms ease;
}
.telness-foldout.is-open .telness-foldout__chevron {
	transform: rotate(180deg);
}

.telness-foldout__panel {
	padding: 20px 24px 28px;
	border-top: 1px solid var(--wp--preset--color--border);
}
.telness-foldout__panel[hidden] {
	display: none;
}

/* Embedded content (HubSpot meetings iframe) — make sure it
   takes the full width of the panel. HubSpot's MeetingsEmbed
   renders an iframe with a min-height around 700px by default,
   so we don't force a height here. */
.telness-foldout__panel .meetings-iframe-container,
.telness-foldout__panel iframe {
	width: 100%;
	max-width: 100%;
	border: 0;
}

/* Editor: keep the panel visible so editors can edit the inner
   content without toggling. The `is-editor-open` class on the
   wrapper is set by edit.js. */
.telness-foldout.is-editor-open .telness-foldout__panel {
	display: block;
}
.telness-foldout__editor-note {
	display: none;
}
.telness-foldout.is-editor-open .telness-foldout__editor-note {
	display: block;
	padding: 8px 22px;
	border-top: 1px dashed var(--wp--preset--color--border);
	font-size: 11px;
	color: var(--wp--preset--color--ink-muted);
	line-height: 1.4;
}

/* Editor: RichText uses a <span> for the toggle label — keep the
   pill chrome but allow text caret. */
span.telness-foldout__toggle {
	cursor: text;
}

/* Mobile: stack the toggle button below the heading/description
   so it doesn't get squeezed off-screen. */
@media (max-width: 760px) {
	.telness-foldout__bar {
		grid-template-columns: auto 1fr;
		gap: 12px 14px;
	}
	.telness-foldout__toggle {
		grid-column: 1 / -1;
		justify-content: center;
	}
}

/* ============================================================
   PAGE HEADER (no hero) — centered H1 + intro paragraph for
   pages without a hero image. Pattern: telness/page-header.

   Tighter vertical padding than other sections (sits at the top
   of the page with the body's 64px header offset above it; a
   72px section padding alone would push the H1 too far down).
   ============================================================ */

.telness-page-header-wrap {
	background-color: var(--wp--preset--color--background);
	padding-top:    clamp(48px, 5vw, 72px);
	padding-bottom: clamp(24px, 3vw, 40px);
}
@media (max-width: 900px) {
	.telness-page-header-wrap {
		padding-top:    36px;
		padding-bottom: 24px;
	}
}

.telness-page-header {
	max-width: 800px;
	margin: 0 auto;
	padding-left: var(--wp--preset--spacing--md);
	padding-right: var(--wp--preset--spacing--md);
	text-align: center;
}

.telness-page-header .telness-page-header__h1 {
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(36px, 4.5vw, 56px);
	font-weight: 700;
	color: var(--wp--preset--color--navy);
	letter-spacing: -0.02em;
	line-height: 1.1;
	margin: 0 0 16px;
}

.telness-page-header .telness-page-header__sub {
	font-family: var(--wp--preset--font-family--body);
	font-size: 16px;
	font-weight: 400;
	color: var(--wp--preset--color--ink-muted);
	line-height: 1.55;
	margin: 0;
}

/* ============================================================
   TWO COLUMNS — generic 2-up grid pattern. Each column is a
   free content area; editor drops any blocks inside.
   Pattern: telness/two-columns.

   CSS Grid (not WP flex layout) — avoids the flow-layout
   block-gap margin issue (see decisions.md, pricing section).
   ============================================================ */

.telness-two-col-wrap {
	background-color: var(--wp--preset--color--background);
}

.telness-two-col {
	max-width: 1280px;
	margin: 0 auto;
	padding-left: var(--wp--preset--spacing--md);
	padding-right: var(--wp--preset--spacing--md);
}

.telness-two-col__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
	align-items: stretch;
}

/* Strip WP flow-layout block-gap margin from the grid's direct
   children — same trick as .telness-pricing__grid. */
.telness-two-col__grid > *:not(#_) {
	margin-block-start: 0;
	margin-block-end: 0;
}

/* Each column: default flow layout. min-height keeps empty
   columns visible & clickable in the editor so the appender
   button can be reached when there's no content yet. */
.telness-two-col__col {
	min-width: 0;
	min-height: 120px;
}
.telness-two-col__col > *:not(#_) {
	margin-block-start: 0;
	margin-block-end: 0;
}
/* Children inside a column stretch to the column's full height
   so card-style children align with siblings across the row. */
.telness-two-col__col > .wp-block-group,
.telness-two-col__col > [class*="wp-block-"] {
	height: 100%;
}

@media (max-width: 760px) {
	.telness-two-col__grid {
		grid-template-columns: 1fr;
		gap: 16px;
	}
}

/* ============================================================
   THREE COLUMNS — generic 3-up grid. Same model as two-column
   above. 3 cols ≥901px → 2 cols ≤900px → 1 col ≤640px.
   Pattern: telness/three-columns.
   ============================================================ */

.telness-three-col-wrap {
	background-color: var(--wp--preset--color--background);
}

.telness-three-col {
	max-width: 1280px;
	margin: 0 auto;
	padding-left: var(--wp--preset--spacing--md);
	padding-right: var(--wp--preset--spacing--md);
}

.telness-three-col__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	align-items: stretch;
}

.telness-three-col__grid > *:not(#_) {
	margin-block-start: 0;
	margin-block-end: 0;
}

.telness-three-col__col {
	min-width: 0;
	min-height: 120px;
}
.telness-three-col__col > *:not(#_) {
	margin-block-start: 0;
	margin-block-end: 0;
}
.telness-three-col__col > .wp-block-group,
.telness-three-col__col > [class*="wp-block-"] {
	height: 100%;
}

@media (max-width: 900px) {
	.telness-three-col__grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 20px;
	}
}
@media (max-width: 640px) {
	.telness-three-col__grid {
		grid-template-columns: 1fr;
		gap: 16px;
	}
}

/* ============================================================
   SINGLE POST — header (category eyebrow + h1 + meta), featured
   image, body. The body uses the shared `.telness-article` long-
   form styling. Mirrors the live single-post layout.
   ============================================================ */

.telness-single-wrap {
	max-width: 800px;
	margin: 0 auto;
	padding-left:  var(--wp--preset--spacing--md);
	padding-right: var(--wp--preset--spacing--md);
	padding-top:    clamp(40px, 5vw, 64px);
	padding-bottom: clamp(40px, 5vw, 64px);
}

.telness-single__header {
	margin: 0 0 28px;
}

/* Category eyebrow — green uppercase pill-style text */
.telness-single .telness-single__cat,
.telness-single .telness-single__cat a {
	font-family: var(--wp--preset--font-family--body);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--green);
	text-decoration: none;
	line-height: 1;
	margin: 0 0 14px;
}
.telness-single .telness-single__cat a:hover {
	color: var(--wp--preset--color--navy);
}

.telness-single h1.telness-single__title,
.telness-single .telness-single__title {
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(28px, 2.8vw + 10px, 44px);
	font-weight: 700;
	color: var(--wp--preset--color--navy);
	letter-spacing: -0.02em;
	line-height: 1.15;
	margin: 0 0 16px;
}

.telness-single__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0 12px;
	align-items: center;
	font-family: var(--wp--preset--font-family--body);
	font-size: 13px;
	color: var(--wp--preset--color--ink-muted);
	line-height: 1.4;
}
.telness-single__meta .telness-single__date,
.telness-single__meta .telness-single__author {
	margin: 0;
}
.telness-single__meta .telness-single__author::before {
	content: '·';
	margin-right: 12px;
	color: var(--wp--preset--color--border-muted);
}
.telness-single__meta .telness-single__author:first-child::before {
	content: none;
}

/* Featured image — full-width within the 800px column, rounded card. */
.telness-single .telness-single__image {
	margin: 0 0 32px;
	border-radius: var(--wp--custom--radius--card);
	overflow: hidden;
}
.telness-single .telness-single__image img {
	display: block;
	width: 100%;
	height: auto;
}

/* Body — leverages the shared .telness-article rules (defined
   later in this file for FAQ/blog/partner long-form content). */
.telness-single__body {
	margin: 0;
}

@media (max-width: 600px) {
	.telness-single-wrap {
		padding-top:    36px;
		padding-bottom: 36px;
	}
	.telness-single__meta .telness-single__author::before {
		content: none;
	}
	.telness-single__meta {
		gap: 4px 8px;
	}
}

/* ============================================================
   RELATED POSTS — wraps `telness/blog-grid` with `mode: related`
   at the bottom of every single post. The block auto-detects the
   current post's category via `get_queried_object_id()`.
   ============================================================ */

.telness-related-posts-wrap {
	background-color: var(--wp--preset--color--off);
	padding-top:    clamp(64px, 7vw, 96px);
	padding-bottom: clamp(64px, 7vw, 96px);
}
@media (max-width: 900px) {
	.telness-related-posts-wrap {
		padding-top:    52px;
		padding-bottom: 52px;
	}
}
.telness-related-posts {
	max-width: 1280px;
	margin: 0 auto;
	padding-left:  var(--wp--preset--spacing--md);
	padding-right: var(--wp--preset--spacing--md);
}
.telness-related-posts h2.telness-related-posts__h2,
.telness-related-posts .telness-related-posts__h2 {
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(24px, 2.5vw + 8px, 36px);
	font-weight: 700;
	color: var(--wp--preset--color--navy);
	letter-spacing: -0.02em;
	line-height: 1.15;
	margin: 0 0 32px;
}

/* ============================================================
   BLOG INDEX — listing template (home.html + category.html).
   Header above, listing block below. The listing block owns the
   filter tabs + post grid + pagination.
   ============================================================ */

.telness-blog-index-wrap {
	background-color: var(--wp--preset--color--background);
	padding-top:    clamp(48px, 6vw, 80px);
	padding-bottom: clamp(64px, 7vw, 96px);
}
@media (max-width: 900px) {
	.telness-blog-index-wrap {
		padding-top:    36px;
		padding-bottom: 52px;
	}
}

.telness-blog-index {
	display: block;
}

.telness-blog-index__hd {
	max-width: 1280px;
	margin: 0 auto;
	padding-left:  var(--wp--preset--spacing--md);
	padding-right: var(--wp--preset--spacing--md);
	margin-bottom: 32px;
}
.telness-blog-index .telness-blog-index__eye {
	font-family: var(--wp--preset--font-family--body);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--green);
	line-height: 1;
	margin: 0 0 12px;
}
.telness-blog-index h1.telness-blog-index__h1,
.telness-blog-index .telness-blog-index__h1 {
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(32px, 3vw + 10px, 52px);
	font-weight: 700;
	color: var(--wp--preset--color--navy);
	letter-spacing: -0.025em;
	line-height: 1.1;
	margin: 0 0 12px;
}
.telness-blog-index .telness-blog-index__sub {
	font-family: var(--wp--preset--font-family--body);
	font-size: clamp(15px, 0.8vw + 9px, 18px);
	color: var(--wp--preset--color--ink-muted);
	line-height: 1.5;
	margin: 0;
	max-width: 680px;
}

/* ============================================================
   BLOG LISTING block — filter tabs + 3-col grid + pagination.
   ============================================================ */

.telness-blog-listing,
.wp-block-telness-blog-listing {
	max-width: 1280px;
	margin: 0 auto;
	padding-left:  var(--wp--preset--spacing--md);
	padding-right: var(--wp--preset--spacing--md);
}

/* Tabs — green pill links, "Alla" + one per category */
.telness-blog-listing__tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 32px;
}
.telness-blog-listing__tab {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--wp--preset--font-family--body);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0;
	text-decoration: none;
	padding: 8px 18px;
	border-radius: var(--wp--custom--radius--pill);
	color: var(--wp--preset--color--navy);
	background-color: var(--wp--preset--color--off);
	border: 1.5px solid transparent;
	transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
}
.telness-blog-listing__tab:hover {
	background-color: var(--wp--preset--color--card);
	color: var(--wp--preset--color--navy);
}
.telness-blog-listing__tab.is-active {
	background-color: var(--wp--preset--color--green);
	color: var(--wp--preset--color--white);
	border-color: var(--wp--preset--color--green);
}
.telness-blog-listing__tab.is-active:hover {
	background-color: var(--wp--preset--color--green-dark);
	border-color: var(--wp--preset--color--green-dark);
	color: var(--wp--preset--color--white);
}

/* Grid — same as `.telness-blog-grid` but standalone (the listing
   doesn't use the blog-grid block, so we define it here). 3 cols
   ≥901px → 2 cols ≤900px → 1 col ≤640px. */
.telness-blog-listing__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-auto-rows: 1fr;
	gap: 20px;
	align-items: stretch;
}
@media (max-width: 900px) {
	.telness-blog-listing__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (max-width: 640px) {
	.telness-blog-listing__grid {
		grid-template-columns: 1fr;
		max-width: 480px;
		margin-left: auto;
		margin-right: auto;
	}
}

/* Pagination — pill links, mirrors the tabs' visual language */
.telness-blog-listing__pagination {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px;
	margin: 40px 0 0;
}
.telness-blog-listing__pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	height: 36px;
	padding: 0 12px;
	font-family: var(--wp--preset--font-family--body);
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	color: var(--wp--preset--color--navy);
	background-color: var(--wp--preset--color--off);
	border-radius: var(--wp--custom--radius--pill);
	transition: background 140ms ease, color 140ms ease;
}
.telness-blog-listing__pagination .page-numbers:hover {
	background-color: var(--wp--preset--color--card);
}
.telness-blog-listing__pagination .page-numbers.current {
	background-color: var(--wp--preset--color--green);
	color: var(--wp--preset--color--white);
}
.telness-blog-listing__pagination .page-numbers.dots {
	background: none;
}

.telness-blog-listing__empty {
	text-align: center;
	font-family: var(--wp--preset--font-family--body);
	font-size: 15px;
	color: var(--wp--preset--color--ink-muted);
	padding: 40px 0;
}

/* Editor placeholder for the block */
.telness-blog-listing-placeholder {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 24px;
	background: var(--wp--preset--color--off);
	border-radius: var(--wp--custom--radius--card);
	color: var(--wp--preset--color--navy);
	text-align: center;
}
.telness-blog-listing-placeholder strong {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 16px;
	font-weight: 700;
}
.telness-blog-listing-placeholder span {
	font-family: var(--wp--preset--font-family--body);
	font-size: 13px;
	color: var(--wp--preset--color--ink-muted);
}

/* ============================================================
   FEATURES GRID — 3×2 grid of icon + title + paragraph cards.
   Pattern: telness/features-grid. Reuses `.telness-service-card`
   for the card markup, so card visuals (icon tile, hover lift,
   borders, padding) inherit from the services-card rules above.
   This block just owns the section wrap + header + grid layout.
   ============================================================ */

.telness-features-wrap {
	background-color: var(--wp--preset--color--background);
}
.telness-features {
	max-width: 1280px;
	margin: 0 auto;
	padding-left:  var(--wp--preset--spacing--md);
	padding-right: var(--wp--preset--spacing--md);
}

.telness-features .telness-features__hd {
	margin: 0 0 40px;
	max-width: 900px;
}
.telness-features .telness-features__eye { margin: 0 0 12px; }
.telness-features .telness-features__h2  { margin: 0; }

/* 3-col grid, 20px gap, equal-height rows so cards line up across
   rows regardless of description length. Same trick as the
   `.telness-services__grid` rule. */
.wp-block-group.telness-features__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-auto-rows: 1fr;
	gap: 20px;
	align-items: stretch;
	justify-items: stretch;
}
.telness-features__grid > .telness-service-card,
.telness-features__grid > .wp-block-telness-service-card {
	min-width: 0;
	box-sizing: border-box;
}
.telness-features__grid > *:not(#_) {
	margin-block-start: 0;
	margin-block-end: 0;
}

@media (max-width: 900px) {
	.wp-block-group.telness-features__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (max-width: 640px) {
	.wp-block-group.telness-features__grid {
		grid-template-columns: 1fr;
		max-width: 480px;
		margin-left: auto;
		margin-right: auto;
	}
}

/* Apply the unified section-padding scale (the wrap isn't in the
   default list above, so add it explicitly here). */
.telness-features-wrap {
	padding-top:    clamp(64px, 7vw, 96px);
	padding-bottom: clamp(64px, 7vw, 96px);
}
@media (max-width: 900px) {
	.telness-features-wrap {
		padding-top:    52px;
		padding-bottom: 52px;
	}
}


/* ============================================================
   PORTAL FLOW — zig-zag section used on /portal. Five rows on
   a mint background, each with a small supertitle (__sup), a
   larger lighter-weight heading (__h2), and a 2-col image+text
   grid alternating via .is-image-left / .is-image-right (which
   reflect DOM order in the pattern, not CSS reorder — keeps
   reading-order accessible). Curved navy arrows are CSS-only
   background-image on row ::after, alternating tall/wide and
   side-of-row. Arrows are decorative; hidden ≤900px.
   ============================================================ */

.telness-portal-flow-wrap {
	background-color: var(--wp--preset--color--mint);
}
.telness-portal-flow-wrap.telness-portal-flow-wrap {
	padding-left:  var(--wp--preset--spacing--md);
	padding-right: var(--wp--preset--spacing--md);
	padding-top:    clamp(64px, 7vw, 96px);
	padding-bottom: clamp(64px, 7vw, 96px);
}
@media (max-width: 900px) {
	.telness-portal-flow-wrap.telness-portal-flow-wrap {
		padding-top:    52px;
		padding-bottom: 52px;
	}
}

.telness-portal-flow {
	max-width: 1280px;
	margin: 0 auto;
}

/* Rows — vertical rhythm + relative positioning anchor for arrows.
   `> *:not(#_)` zeroes the flow-layout block-gap margin so our
   row spacing is the only vertical driver. */
.telness-portal-flow > *:not(#_) {
	margin-block-start: 0;
	margin-block-end: 0;
}
.telness-portal-flow__row {
	position: relative;
	padding-block: clamp(40px, 5vw, 72px);
}
.telness-portal-flow__row + .telness-portal-flow__row {
	border-top: 1px solid rgba(39, 38, 87, 0.08);
}

/* Heading area — left-aligned, sits above the 2-col grid.
   Same vertical-rhythm cadence as other section heads. */
.telness-portal-flow__head {
	max-width: 900px;
	margin: 0 0 clamp(28px, 3vw, 48px);
}
.telness-portal-flow__head > *:not(#_) {
	margin-block-start: 0;
	margin-block-end: 0;
}
.telness-portal-flow__sup {
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(18px, 0.6vw + 14px, 22px);
	font-weight: 700;
	color: var(--wp--preset--color--navy);
	line-height: 1.3;
	letter-spacing: -0.01em;
	margin: 0 0 10px;
}

/* Larger but lighter-weight than the unified __h2 (which is bold
   navy clamp(32px,3vw+10px,52px)). We override by matching the
   unified selector with one extra `.telness-portal-flow` class —
   specificity 0,5,0 beats the global 0,4,0 and cascade order
   handles the rest. */
.telness-portal-flow [class*="telness-"][class*="__h2"]:not([class*="hero"]) {
	font-size: clamp(28px, 2.2vw + 12px, 42px);
	font-weight: 500;
	letter-spacing: -0.02em;
	line-height: 1.15;
	margin: 0;
}

/* 2-col grid — image on one side, body text on the other. DOM
   order in the pattern controls which side the image lands on
   (is-image-left → media first, is-image-right → body first), so
   CSS doesn't need `order:` rewrites — keyboard/screen-reader
   reading order matches what you see.

   `align-items: start` top-aligns the body paragraph with the top
   edge of the image (instead of centring the shorter column),
   matching the live /portal layout. */
.telness-portal-flow__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(32px, 4vw, 64px);
	align-items: start;
}
.telness-portal-flow__grid > *:not(#_) {
	margin-block-start: 0;
	margin-block-end: 0;
}

.telness-portal-flow__media {
	min-width: 0;
}
.telness-portal-flow__media .wp-block-image {
	margin: 0;
}
.telness-portal-flow__media img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 12px;
}

.telness-portal-flow__body {
	min-width: 0;
}
.telness-portal-flow__body > *:not(#_) {
	margin-block-start: 0;
	margin-block-end: 0;
}
.telness-portal-flow__body p {
	font-family: var(--wp--preset--font-family--body);
	font-size: clamp(15px, 0.3vw + 14px, 17px);
	color: var(--wp--preset--color--navy);
	line-height: 1.6;
	margin: 0 0 16px;
}
.telness-portal-flow__body p:last-child {
	margin-bottom: 0;
}
.telness-portal-flow__body strong {
	font-weight: 700;
}

/* Mobile — stack 1-col. */
@media (max-width: 900px) {
	.telness-portal-flow__grid {
		grid-template-columns: 1fr;
		gap: 24px;
	}
}


/* ============================================================
   TOP CALLOUT BAR — thin announcement strip rendered at the very
   top of the site when Site Settings → Top callout bar is on.
   Toggle is in Settings → Telness. Rendered via wp_body_open in
   inc/callout-bar.php; CSS below offsets the fixed header + body
   padding when body.has-callout-bar is present.

   Height: 24px (12px text on a 24px line — small enough to feel
   like an announcement strip, large enough to read on mobile).
   z-index 9100 so it sits above the header (9000) without the
   header overlapping it.
   ============================================================ */

.telness-callout-bar {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 24px;
	background: var(--wp--preset--color--navy);
	color: #ffffff;
	z-index: 9100;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 16px;
	box-sizing: border-box;
	font-family: var(--wp--preset--font-family--body);
	font-size: 12px;
	line-height: 1;
	letter-spacing: 0.01em;
}
.telness-callout-bar__inner {
	display: flex;
	align-items: center;
	gap: 10px;
	max-width: 100%;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.telness-callout-bar__text {
	color: #ffffff;
	font-weight: 500;
}
.telness-callout-bar__link {
	color: var(--wp--preset--color--teal);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 2px;
}
.telness-callout-bar__link:hover,
.telness-callout-bar__link:focus-visible {
	color: #ffffff;
}

/* Shift the fixed header down + extend body top-padding so the bar
   doesn't get covered. 24px = the bar's height. */
body.has-callout-bar {
	padding-top: 88px; /* 64px header + 24px bar */
}
body.has-callout-bar .wp-block-template-part.telness-header,
body.has-callout-bar .telness-header {
	top: 24px;
}
/* Admin-bar stacking — WP admin bar (32px desktop / 46px mobile)
   sits ABOVE the callout bar, so the callout shifts down by the
   admin-bar height and the header shifts again. */
body.admin-bar.has-callout-bar .telness-callout-bar {
	top: 32px;
}
body.admin-bar.has-callout-bar .telness-header {
	top: 56px; /* 32 admin + 24 bar */
}
@media screen and (max-width: 782px) {
	body.admin-bar.has-callout-bar .telness-callout-bar {
		top: 46px;
	}
	body.admin-bar.has-callout-bar .telness-header {
		top: 70px; /* 46 admin + 24 bar */
	}
}