/* The XWARE product type, as on finix.xware.be: Geist and Geist Mono,
   served from this site (SIL Open Font License), never from a font CDN. */
@font-face { font-family: Geist; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/fonts/geist.woff2) format('woff2'); }
@font-face { font-family: 'Geist Mono'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/fonts/geist-mono.woff2) format('woff2'); }
:root {
	--bg: #ffffff;
	--bg-soft: #f6f8fc;
	--ink: #0b1b3f;
	--fg: #0f172a;
	--muted-fg: #4b5970;
	--subtle-fg: #5d6b82;
	--border: #e3e7ef;
	--border-faint: #eef1f6;
	--brand: #2f55e4;
	--brand-hover: #2447c9;
	--brand-faint: #eef2ff;
	--mono: 'Geist Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace;

	/* Type scale. Six steps and two fluid heads; every font-size on the
	   page resolves to one of these. rem throughout, so a reader who has
	   raised their browser font size scales with it -- px sizes do not.
	   0.75rem (12px) is the floor, matching the product's design system. */
	--t-xs: 0.75rem;     /* 12px - eyebrows, labels, chips, table heads */
	--t-sm: 0.8125rem;   /* 13px - captions, errors, footer, consent */
	--t-md: 0.875rem;    /* 14px - nav, buttons, tabs, card and table body */
	--t-lg: 0.9375rem;   /* 15px - form fields, chain values */
	--t-xl: 1.0625rem;   /* 17px - kickers, wordmark */
	--t-lede: 1.125rem;  /* 18px - ledes, as finix.xware.be */
	--t-h3: 1.1875rem;   /* 19px - card and feature titles */
	--t-2xl: 1.25rem;    /* 20px - hero sub only */
	--t-h2: clamp(1.6rem, 1.15rem + 1.6vw, 2.35rem);
	--t-h1: clamp(2rem, 1.2rem + 2.7vw, 3.1rem);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
	margin: 0; background: var(--bg); color: var(--fg);
	font-family: Geist, 'Segoe UI', system-ui, -apple-system, sans-serif;
	font-size: 1rem; line-height: 1.6; -webkit-font-smoothing: antialiased;
}

.shell { width: 100%; max-width: 71rem; margin: 0 auto; padding: 0 20px; }
.shell.narrow > * { max-width: 50rem; }
section { padding: 92px 0; }
.alt { background: var(--bg-soft); border-block: 1px solid var(--border-faint); }
.dark { background: var(--ink); color: #fff; }
.dark h2 { color: #fff; }
.dark .lede, .dark p { color: #a7b0bd; }
.dark .eyebrow { color: #76acff; }
.dark .kicker { color: #fff; }

h1, h2, h3 { letter-spacing: -0.03em; text-wrap: balance; margin: 0; font-weight: 600; color: var(--ink); }
h1, h2 { font-weight: 560; }
h2 { font-size: var(--t-h2); line-height: 1.14; }
h3 { font-size: var(--t-h3); line-height: 1.3; }
p { margin: 0; }
a { color: var(--brand); }

.eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: var(--t-sm); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--brand); margin: 0 0 14px; }
.eyebrow::before { content: ''; width: 8px; height: 8px; border-radius: 2px; background: #12b886; flex: none; }
.lede { margin-top: 16px; max-width: 60ch; font-size: var(--t-lede); line-height: 1.6; color: var(--muted-fg); }
.kicker { margin-top: 26px; font-size: var(--t-xl); font-weight: 600; max-width: 56ch; letter-spacing: -0.01em; }

/* ── Header ───────────────────────────────── */
header { position: sticky; top: 0; z-index: 40; background: rgb(255 255 255 / 0.9); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border-faint); }
.bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 62px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 620; font-size: var(--t-xl); letter-spacing: -0.02em; color: var(--fg); text-decoration: none; }
.mark { width: 4px; height: 34px; border-radius: 999px; background: var(--brand); flex: none; }
.brand small { display: block; font-size: var(--t-xs); font-weight: 500; color: var(--subtle-fg); line-height: 1.2; margin-top: 2px; letter-spacing: 0; }
nav { display: flex; align-items: center; gap: 20px; font-size: var(--t-md); font-weight: 500; }
nav a { color: var(--muted-fg); text-decoration: none; }
nav a:hover { color: var(--fg); }
/* Below 60rem the section links collapse into a disclosure. They used
   to simply vanish, which also took "Sign in" with them -- a customer on
   a phone had no way into the app except a 16px link in the footer. */
.nav-toggle { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; padding: 0; background: none; border: 1px solid var(--border); border-radius: 8px; color: var(--muted-fg); cursor: pointer; }
.nav-toggle:hover { border-color: var(--muted-fg); color: var(--fg); }
.nav-menu { border-top: 1px solid var(--border-faint); background: #fff; }
.nav-menu[hidden] { display: none; }
.nav-menu .shell { display: flex; flex-direction: column; padding-block: 4px 12px; }
.nav-menu a { display: flex; align-items: center; min-height: 48px; font-size: var(--t-md); font-weight: 500; color: var(--muted-fg); text-decoration: none; border-bottom: 1px solid var(--border-faint); }
.nav-menu a:last-child { border-bottom: 0; color: var(--brand); font-weight: 600; }
.nav-menu a:hover { color: var(--fg); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

@media (max-width: 60rem) {
	nav .hide-sm { display: none; }
	.nav-toggle { display: inline-flex; }
}
/* Never leave it open behind a desktop layout after a resize. */
@media (min-width: 60.0625rem) { .nav-menu { display: none; } }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 46px; padding: 0 22px; border-radius: 12px; font: inherit; font-size: 0.96875rem; font-weight: 600; text-decoration: none; border: 1px solid transparent; white-space: nowrap; transition: background-color .15s ease, border-color .15s ease; }
.btn-primary { background: var(--brand); color: #fff; box-shadow: 0 8px 24px -10px rgb(47 85 228 / .7); }
nav .btn { height: 38px; padding: 0 16px; border-radius: 10px; font-size: var(--t-md); }
.btn-primary:hover { background: var(--brand-hover); }
.btn-ghost { border-color: var(--border); color: var(--fg); background: #fff; }
.btn-ghost:hover { border-color: #d0d6e0; }
a:focus-visible, .btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
.actions { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 10px; }

/* ── Hero ─────────────────────────────────── */
.hero { padding: 72px 0 84px; position: relative; overflow: hidden; }
.hero::before {
	content: ''; position: absolute; inset: 0;
	background: radial-gradient(800px 420px at 50% -8%, rgb(47 85 228 / .14), transparent 70%), radial-gradient(520px 340px at 92% 22%, rgb(18 184 134 / .10), transparent 70%), radial-gradient(520px 340px at 6% 40%, rgb(47 85 228 / .08), transparent 70%);
	pointer-events: none;
}
.hero-grid { position: relative; display: grid; gap: 52px; align-items: center; }
@media (min-width: 64rem) { .hero-grid { grid-template-columns: 0.95fr 1.05fr; gap: 56px; } }
.hero h1 { font-size: var(--t-h1); line-height: 1.06; letter-spacing: -0.035em; }
.hero h1 em { font-style: normal; color: var(--brand); }
.hero .sub { margin-top: 20px; max-width: 54ch; font-size: var(--t-2xl); color: var(--muted-fg); }
/* The hero copy is centred because the product shot under it is wider than
   the text column; left-aligned copy over a wider image reads as a
   misalignment rather than a composition. */
.hero .shell { text-align: center; }
.hero h1 { margin-inline: auto; max-width: 21ch; }
.hero .sub, .hero .kicker { margin-inline: auto; }
.hero .actions, .hero .chips { justify-content: center; }
.chips { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 7px; }
.chip { font-size: var(--t-xs); font-weight: 600; color: var(--muted-fg); border: 1px solid var(--border); background: #fff; padding: 5px 11px; border-radius: 999px; }

/* ── Product frame ────────────────────────── */
.frame {
	border: 1px solid var(--border); border-radius: 16px; overflow: hidden; background: #fff;
	box-shadow: 0 30px 80px -30px rgb(47 85 228 / .35), 0 12px 30px -12px rgb(15 23 42 / .12);
}
.frame-bar { display: flex; align-items: center; gap: 8px; padding: 9px 13px; background: var(--bg-soft); border-bottom: 1px solid var(--border-faint); }
.frame-dots { display: flex; gap: 5px; }
.frame-dots i { width: 9px; height: 9px; border-radius: 50%; background: #d3d8df; display: block; }
.frame-path { font-family: var(--mono); font-size: var(--t-xs); color: var(--subtle-fg); }
.frame-body { padding: 0; }
.frame-body img { display: block; width: 100%; height: auto; }

/* A screenshot of the app is only worth showing if its own type stays
   readable, which the 71rem text column cannot do. These sit wider than
   the prose and fall back to the viewport on a laptop. */
.shot { width: 100%; max-width: 71rem; margin: 0 auto; padding: 0 20px; }
/* The three worksheet views share one capture width, so they render at
   one scale. Giving them a wider container than the prose keeps that
   shared scale readable on a large screen. */
.shot.wide { max-width: 120rem; }
/* Pan: the worksheet is wider than any screen. Show it at a size you can
   read and let it scroll sideways inside the frame, instead of shrinking
   it until the text is too small to read. */

.shot.pan .frame-body { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
.shot.pan .frame-body:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.shot.pan .frame-body img { width: 1900px; max-width: none; }
.pan-hint { margin: 10px auto 0; text-align: center; font-size: var(--t-sm, 13px); color: var(--subtle-fg); }
.shot-cap { margin: 14px auto 0; max-width: 64ch; text-align: center; font-size: var(--t-md); color: var(--subtle-fg); }
.shot-cap b { color: var(--muted-fg); font-weight: 600; }

/* View switcher. It mirrors the control inside the product, because the
   point is that these are three views of one worksheet, not three
   products. The panels stay in the DOM so switching never reflows the
   page from scratch; `hidden` needs the explicit rule because a later
   `display` would otherwise beat the UA stylesheet. */
.views { display: flex; justify-content: center; gap: 4px; margin: 0 auto 16px; flex-wrap: wrap; }
.views button {
	font: inherit; font-size: var(--t-md); font-weight: 600; color: var(--muted-fg);
	background: transparent; border: 1px solid transparent; border-radius: 8px;
	padding: 7px 14px; cursor: pointer;
}
.views button:hover { color: var(--fg); background: var(--bg-soft); }
.views button[aria-selected="true"] { color: var(--brand); background: #eef2ff; border-color: #d6defc; }
.views button:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.view-panel[hidden] { display: none; }
.shot.bleed-r { padding-right: 0; }
.shot.bleed-r .frame { border-top-right-radius: 0; border-bottom-right-radius: 0; border-right: 0; }

/* A dense table shrunk to phone width is a grey smear, not a screenshot.
   Below the breakpoint the frame keeps the image at a readable size and
   pans inside its own box, so the page itself never scrolls sideways. */
@media (max-width: 60rem) {
	.frame-body { overflow-x: auto; -webkit-overflow-scrolling: touch; }
	.frame-body img { width: 860px; max-width: none; }
	.shot.pan .frame-body img { width: 1200px; }
}

/* ── Flow (SVG) ───────────────────────────── */
.flow-wrap { margin-top: 44px; border: 1px solid var(--border); border-radius: 14px; background: #fff; padding: 26px 22px; overflow-x: auto; }
.alt .flow-wrap { background: #fff; }
.flow-svg { width: 100%; min-width: 46rem; height: auto; display: block; }
.flow-svg .lbl { font: 600 12.5px Geist, sans-serif; fill: #161d2b; }
.flow-svg .lbl-sm { font: 600 11px Geist, sans-serif; fill: #6b7280; letter-spacing: .08em; text-transform: uppercase; }
.flow-svg .hubtxt { font: 700 15px Geist, sans-serif; fill: #fff; }
.flow-svg .box { fill: #fff; stroke: #d9dde4; }
.flow-svg .line { stroke: #c3cad4; stroke-width: 1.5; fill: none; }

/* ── Spine (reasoning chain) ──────────────── */
.spine { margin-top: 42px; position: relative; padding-left: 30px; }
.spine::before { content: ''; position: absolute; left: 7px; top: 10px; bottom: 10px; width: 2px; background: linear-gradient(180deg, var(--brand), rgb(47 85 228 / .15)); border-radius: 2px; }
.sp { position: relative; padding: 13px 0; }
.sp::before { content: ''; position: absolute; left: -30px; top: 19px; width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 2px solid var(--brand); }
.dark .sp::before { background: var(--ink); }
.sp-k { font-size: var(--t-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--brand); }
.sp-v { margin-top: 2px; font-size: var(--t-lg); color: var(--muted-fg); }
.dark .sp-v { color: #a7b0bd; }
/* --brand is tuned for white; on --ink it lands at 2.8:1. Use the same
   lighter blue the .tag label already uses on this ground. */
.dark .sp-k { color: #76acff; }

/* ── Pipeline ─────────────────────────────── */
.pipeline { margin-top: 32px; display: flex; flex-wrap: wrap; align-items: center; gap: 9px 11px; }
.pill { padding: 8px 14px; border-radius: 999px; border: 1px solid var(--border); background: #fff; font-size: var(--t-sm); font-weight: 600; }
.pill-end { background: var(--brand); border-color: var(--brand); color: #fff; }
.dark .pill { background: #151b23; border-color: #262e39; color: #e6eaf0; }
.pipeline .sep { color: var(--subtle-fg); font-size: var(--t-sm); }

/* ── Grids ────────────────────────────────── */
.grid { margin-top: 42px; display: grid; gap: 24px 30px; }
@media (min-width: 46rem) { .grid.three, .grid.four, .grid.five { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 66rem) { .grid.three { grid-template-columns: repeat(3, 1fr); } .grid.four { grid-template-columns: repeat(4, 1fr); } .grid.five { grid-template-columns: repeat(5, 1fr); } }

.card { background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 22px; }
.card p { margin-top: 8px; font-size: var(--t-lg); line-height: 1.6; color: var(--muted-fg); }
.num { width: 28px; height: 28px; border-radius: 8px; background: var(--brand); color: #fff; display: grid; place-items: center; font-size: var(--t-sm); font-weight: 700; margin-bottom: 14px; }
.feat { padding-left: 16px; border-left: 2px solid var(--brand-faint); }
.feat p { margin-top: 8px; font-size: var(--t-lg); line-height: 1.6; color: var(--muted-fg); }

/* ── Split section ────────────────────────── */
.split { display: grid; gap: 44px; align-items: center; }
@media (min-width: 64rem) { .split { grid-template-columns: 1fr 1fr; gap: 56px; } .split.rev > :first-child { order: 2; } }

/* ── Table ────────────────────────────────── */
.table-wrap { margin-top: 38px; overflow-x: auto; border: 1px solid var(--border); border-radius: 12px; background: #fff; }
table { width: 100%; border-collapse: collapse; font-size: var(--t-md); min-width: 34rem; }
th, td { text-align: left; padding: 13px 18px; font-size: var(--t-lg); border-bottom: 1px solid var(--border-faint); vertical-align: top; }
thead th { font-size: var(--t-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--subtle-fg); background: var(--bg-soft); }
thead th:last-child { color: var(--brand); }
tbody tr:last-child td { border-bottom: 0; }
td:first-child { color: var(--subtle-fg); }
td:last-child { font-weight: 600; }

/* ── CTA ──────────────────────────────────── */
/* Credits band. Three relationships, all different: XWARE makes
   Aegix, Innoviris granted it, hub.brussels partners it. The
   sentence carries them so the marks need no captions -- the
   Innoviris lockup already reads "funded by". Full colour, full
   opacity: a funder's mark is a grant condition, not decoration.
   Stays on white: the XWARE JPEG has a #fdfdfd ground that
   vanishes on #ffffff but shows as a pale box on --bg-soft. */
.credits { border-top: 1px solid var(--border-faint); padding: 40px 0 44px; }
.credits p { margin: 0 auto; max-width: 62ch; text-align: center; text-wrap: balance; font-size: var(--t-sm); line-height: 1.65; color: var(--subtle-fg); }
.credits-logos { margin-top: 32px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 28px 62px; }
.credits-logos a { display: inline-flex; align-items: center; border-radius: 4px; }
.credits-logos img { display: block; width: auto; }
.credits-logos .l-xware { height: 30px; }
.credits-logos .l-innoviris { height: 58px; }
.credits-logos .l-software { height: 50px; }

.cta { background: var(--ink); color: #fff; border-radius: 18px; padding: 54px 34px; text-align: center; position: relative; overflow: hidden; }
.cta::before { content: ''; position: absolute; inset: auto -20% -60% -20%; height: 80%; background: radial-gradient(50% 60% at 50% 50%, rgb(47 85 228 / .35), transparent 70%); }
.cta > * { position: relative; }
.cta h2 { color: #fff; }
.cta .lede { margin: 16px auto 0; max-width: 52ch; color: #a7b0bd; }
.cta .actions { justify-content: center; }
.cta .btn-ghost { background: transparent; border-color: #39414d; color: #fff; }

/* Demo request form. It sits on the dark band, so the fields carry their
   own light surface rather than inheriting the section's text colour. */
.form { margin: 28px auto 0; max-width: 46rem; text-align: left; }
.form-grid { display: grid; gap: 14px; }
@media (min-width: 40rem) { .form-grid { grid-template-columns: 1fr 1fr; } .form-grid .wide { grid-column: 1 / -1; } }
.field label { display: block; font-size: var(--t-xs); font-weight: 700; letter-spacing: .08em;
	text-transform: uppercase; color: #9aa4b2; margin-bottom: 6px; }
.field input, .field select, .field textarea {
	width: 100%; font: inherit; font-size: var(--t-lg); color: var(--fg);
	background: #fff; border: 1px solid #39414d; border-radius: 10px; padding: 11px 13px;
}
.field textarea { min-height: 110px; resize: vertical; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible {
	outline: 2px solid var(--brand); outline-offset: 1px; border-color: var(--brand);
}
.field input[aria-invalid="true"], .field select[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: #ff8f8f; }
.field .err { display: none; margin-top: 5px; font-size: var(--t-sm); }
.field .err[data-show="1"] { display: block; color: #ffb3b3; }
.form .actions { justify-content: center; margin-top: 22px; }
.form-note { margin-top: 14px; text-align: center; font-size: var(--t-sm); color: #8b94a3; }
.form-note a { color: #d6defc; }
.form-status { margin-top: 18px; padding: 14px 16px; border-radius: 12px; font-size: var(--t-lg); }
.form-status[data-state="success"] { background: #0f3d2b; color: #a8e6c4; border: 1px solid #1c6b4a; }
.form-status[data-state="error"] { background: #4a1414; color: #ffc9c9; border: 1px solid #7d2626; }

/* Cookie notice, carried over from the holding page this replaces. A bar
   at the foot rather than a modal, and refusing is the same weight as
   agreeing. `[hidden]` is restated because the author `display: flex`
   would otherwise beat the browser's own rule and leave it on screen. */
.consent {
	position: fixed; inset: auto 0 0 0; z-index: 50;
	display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center;
	gap: 6px 14px; padding: 12px 20px;
	background: var(--ink); color: #c6cdd8; font-size: var(--t-sm); line-height: 1.5;
}
.consent[hidden] { display: none; }
.consent p { margin: 0; }
.consent-actions { display: flex; gap: 14px; }
.consent button {
	font: inherit; font-weight: 600; padding: 0; border: 0; background: none;
	cursor: pointer; color: #fff; text-decoration: underline; text-underline-offset: 3px;
}
.consent button:hover { color: var(--brand-weak, #d6defc); }
/* A brand-blue ring is invisible on a brand-blue button over --ink, and
   fails the 3:1 WCAG 2.2 asks of a focus indicator. White on dark, as
   the consent bar already does. */
.dark a:focus-visible, .dark .btn:focus-visible,
.cta a:focus-visible, .cta .btn:focus-visible,
.cta .field input:focus-visible, .cta .field textarea:focus-visible { outline-color: #fff; }
.consent button:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.cta .btn-ghost:hover { border-color: #737c8a; }

footer { border-top: 1px solid var(--border-faint); padding: 34px 0; font-size: var(--t-sm); color: var(--subtle-fg); }
.foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; }
.foot a { color: var(--muted-fg); text-decoration: none; }
.foot a:hover { color: var(--fg); }
.foot-links { display: flex; flex-wrap: wrap; gap: 18px; }

.tag { display: inline-block; font-size: var(--t-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #76acff; border: 1px solid #2b3542; padding: 4px 11px; border-radius: 999px; margin-bottom: 18px; }
/* Touch targets. This block sits last on purpose: .btn, .views button
   and the footer links are all defined further down than the nav
   media query, so an override placed up there loses the cascade at
   equal specificity. 44px is the floor; these sat at 40, 38 and 16. */
@media (max-width: 60rem) {
	.btn { height: 44px; }
	.views button { min-height: 44px; }
	footer .foot-links a { display: inline-flex; align-items: center; min-height: 44px; }
	.form-note a { display: inline-block; padding-block: 6px; }
}

/* The narrowest phones. The bar carries a wordmark, a CTA and the menu
   button; together they overran a 320px iPhone SE by 4px. Tightening the
   gutter and the button padding buys that back without dropping anything
   out of the bar. */
@media (max-width: 22.5rem) {
	.shell, .shot { padding: 0 14px; }
	nav { gap: 8px; }
	.btn { padding: 0 12px; }
}

/* The page you are on, in the menu. */
nav a[aria-current="page"], .nav-menu a[aria-current="page"] { color: var(--brand); }

/* Footer Cookies button, styled as the links beside it. */
.foot-cookies { font: inherit; color: var(--muted-fg); background: none; border: 0; padding: 0; cursor: pointer; }
.foot-cookies:hover { color: var(--fg); }
.consent a { color: #fff; }

/* Legal pages: one readable column. */
.legal { padding-top: 64px; }
.legal h1 { font-size: var(--t-h2); line-height: 1.14; }
.legal .draft { margin-top: 16px; padding: 12px 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-soft); font-size: var(--t-md); color: var(--muted-fg); max-width: 70ch; }
.legal h2 { margin-top: 40px; font-size: var(--t-h3); }
.legal p, .legal li { margin-top: 12px; max-width: 70ch; font-size: var(--t-lg); line-height: 1.7; color: var(--muted-fg); }
.legal ul { padding-left: 20px; margin: 0; }
.legal .back { display: inline-block; margin-top: 44px; font-weight: 600; text-decoration: none; }

/* FAQ: question and answer pairs, two columns on wide screens. */
.faq { margin-top: 36px; display: grid; gap: 28px 48px; }
@media (min-width: 60rem) { .faq { grid-template-columns: 1fr 1fr; } }
.faq-item p { margin-top: 8px; font-size: var(--t-lg); line-height: 1.6; color: var(--muted-fg); }