/* ==========================================================================
   KernWeb design system (light theme): tokens, chrome, home components and the
   content design system shared by landings, blog, glossary and standard pages.
   Loaded after the Tailwind build; it overrides the utility layer where needed.
   ========================================================================== */

:root {
  --indigo: #6060F0; --indigo-deep: #3B3BB8; --paper: #F3F3F8; --paper-2: #FFFFFF;
  --ink: #1D1D2F; --ink-2: #5C5C78; --line: rgba(29, 29, 47, .12);
  --step--1: clamp(0.84rem, 0.81rem + 0.15vw, 0.93rem); --step-0: clamp(1.00rem, 0.96rem + 0.22vw, 1.13rem);
  --step-1: clamp(1.25rem, 1.17rem + 0.42vw, 1.50rem); --step-2: clamp(1.56rem, 1.42rem + 0.72vw, 2.00rem);
  --step-3: clamp(1.95rem, 1.72rem + 1.15vw, 2.66rem); --step-4: clamp(2.44rem, 2.07rem + 1.85vw, 3.55rem);
  --space-xs: .75rem; --space-s: 1rem; --space-m: 1.5rem; --space-l: 2.5rem; --space-xl: 4rem; --space-2xl: 6rem; --space-3xl: 8rem;
  --measure: 62ch; --wrap: 1220px; --gutter: clamp(1.25rem, 4vw, 3rem);
  --display: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif; --body: "DM Sans", "Helvetica Neue", Arial, sans-serif;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}
html { overflow-x: hidden; scroll-behavior: smooth; }
html body { padding-top: 0 !important; }
body.kw-page, body.landing, body.contact, body.services, body.about, body.template-searchresults, body.kw-light {
  margin: 0; background: var(--paper); color: var(--ink); font-family: var(--body); font-size: var(--step-0); line-height: 1.55;
  font-synthesis: none; text-rendering: optimizeLegibility; -webkit-text-size-adjust: 100%; overflow-x: clip;
}
.kw { font-family: var(--body); color: var(--ink); }
.kw *, .kw *::before, .kw *::after { box-sizing: border-box; }
:where(.kw img) { display: block; max-width: 100%; height: auto; }
:where(.kw a) { color: inherit; }
:where(.kw button) { font: inherit; color: inherit; }
.kw :where(h1, h2, h3) { font-family: var(--display); font-weight: 700; letter-spacing: -0.03em; line-height: 1.05; margin: 0; text-wrap: balance; color: var(--ink); }
.kw :where(h2) { font-size: var(--step-3); max-width: 28ch; }
.kw :where(h3) { font-size: var(--step-1); letter-spacing: -0.02em; }
.kw :where(p) { margin: 0; text-wrap: pretty; }
.kw :where(p + p) { margin-top: var(--space-s); }
.kw :focus-visible { outline: 3px solid var(--indigo); outline-offset: 3px; }
.wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }
.kw .lead { color: var(--ink-2); max-width: var(--measure); margin-top: var(--space-m); font-size: var(--step-0); }
.kw .lead a, .kw .priceNotes a, .kw .vsLinks a, .kw .guides a, .kw .faqList a, .kw .strip a, .kw .kwf-tag a { color: var(--indigo-deep); text-decoration: underline; text-underline-offset: .2em; }
.kw .kicker { font-family: var(--display); font-weight: 700; font-size: var(--step--1); color: var(--indigo-deep); letter-spacing: 0; margin-bottom: var(--space-s); }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; font-family: var(--display); font-weight: 700; font-size: var(--step-0); padding: .95rem 1.5rem; border-radius: 6px; text-decoration: none; cursor: pointer; border: 2px solid transparent; transition: transform .15s var(--ease-out), background .2s, color .2s; text-align: center; line-height: 1.2; }
.btn:active { transform: translateY(1px) scale(.99); }
.btnInk { background: var(--ink); color: var(--paper); } .btnInk:hover { background: var(--indigo); color: #fff; }
.btnPaper { background: var(--paper); color: var(--indigo-deep); } .btnPaper:hover { background: #fff; }
.btnIndigo { background: var(--indigo); color: #fff; } .btnIndigo:hover { background: var(--indigo-deep); color: #fff; }
.btnOutline { background: transparent; color: var(--ink); border-color: var(--ink); } .btnOutline:hover { background: var(--ink); color: var(--paper); }
.btnGhost { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); } .btnGhost:hover { background: rgba(255,255,255,.12); border-color: #fff; color: #fff; }
.link { background: none; border: 0; padding: 0; cursor: pointer; font-weight: 600; color: var(--indigo-deep); text-decoration: underline; text-underline-offset: .25em; text-decoration-thickness: 2px; }
.link:hover { color: var(--ink); }

/* ---------- Header ---------- */
.kwh { position: sticky; top: 0; z-index: 60; background: color-mix(in srgb, var(--paper) 90%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); font-family: var(--body); }
.kwh-in { width: min(100% - 2 * var(--gutter), var(--wrap)); margin: 0 auto; min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: var(--space-m); }
.kwh-logo, .kwf-logo { font-family: var(--display); font-weight: 800; font-size: 1.3rem; letter-spacing: -0.03em; color: var(--ink); text-decoration: none; display: inline-flex; align-items: center; }
.kwh-logo::before, .kwf-logo::before { content: ""; width: .7rem; height: .7rem; border-radius: 50%; background: var(--indigo); margin-right: .5rem; flex: none; }
.kwh-logo b, .kwf-logo b { font-weight: 800; }
.kwh-nav { display: flex; gap: var(--space-m); align-items: center; }
.kwh-nav a { color: var(--ink-2); font-size: var(--step--1); font-weight: 500; text-decoration: none; transition: color .2s; }
.kwh-nav a:hover { color: var(--ink); }
.kwh-cta { font-family: var(--display); font-weight: 700; font-size: var(--step--1); background: var(--ink); color: var(--paper); padding: .6rem 1.1rem; border-radius: 6px; text-decoration: none; white-space: nowrap; transition: background .2s; }
.kwh-cta:hover { background: var(--indigo); color: #fff; }
.kwh-lang { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-2); }
.kwh-lang a { color: var(--ink-2); text-decoration: none; font-weight: 600; padding: 4px 2px; }
.kwh-lang a:hover, .kwh-lang a.on { color: var(--ink); }
.kwh-lang a.on { text-decoration: underline; text-underline-offset: .25em; text-decoration-color: var(--indigo); text-decoration-thickness: 2px; }
.kwh-burger { display: none; background: none; border: 1px solid var(--line); border-radius: 6px; width: 44px; height: 44px; cursor: pointer; padding: 0; align-items: center; justify-content: center; }
.kwh-burger span { display: block; width: 18px; height: 2px; background: var(--ink); position: relative; transition: background .2s; }
.kwh-burger span::before, .kwh-burger span::after { content: ""; position: absolute; left: 0; width: 18px; height: 2px; background: var(--ink); transition: transform .2s; }
.kwh-burger span::before { top: -6px; } .kwh-burger span::after { top: 6px; }
body.kwh-open .kwh-burger span { background: transparent; }
body.kwh-open .kwh-burger span::before { transform: translateY(6px) rotate(45deg); }
body.kwh-open .kwh-burger span::after { transform: translateY(-6px) rotate(-45deg); }
.kwh-mobile { display: none; position: fixed; inset: 64px 0 0 0; z-index: 55; background: var(--paper); flex-direction: column; gap: 0; padding: var(--space-l) var(--gutter); font-family: var(--body); overflow: auto; }
.kwh-mobile a { color: var(--ink); font-family: var(--display); font-size: var(--step-2); font-weight: 700; letter-spacing: -0.02em; text-decoration: none; padding: .9rem 0; border-bottom: 1px solid var(--line); }
.kwh-mobile a:last-child { border-bottom: 0; }
body.kwh-open .kwh-mobile { display: flex; }
body.kwh-open { overflow: hidden; }
@media (max-width: 960px) {
  .kwh-nav, .kwh-cta { display: none; }
  .kwh-burger { display: inline-flex; }
}

/* ---------- Footer ---------- */
.kwf { background: var(--paper); color: var(--ink-2); font-family: var(--body); border-top: 1px solid var(--line); font-size: var(--step--1); }
.kwf-in { width: min(100% - 2 * var(--gutter), var(--wrap)); margin: 0 auto; padding: var(--space-2xl) 0 var(--space-l); }
.kwf-top { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 2.5fr) minmax(0, 3fr) minmax(0, 2.5fr); gap: var(--space-xl); padding-bottom: var(--space-xl); border-bottom: 1px solid var(--line); }
.kwf-tag { color: var(--ink); margin: var(--space-s) 0 0; max-width: 380px; line-height: 1.55; }
.kwf-tag + .kwf-tag { color: var(--ink-2); }
.kwf .kwf-t { font-family: var(--display); font-weight: 700; color: var(--ink); font-size: var(--step-0); margin: 0 0 var(--space-s); }
.kwf ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .55rem; }
.kwf a { color: var(--ink-2); text-decoration: none; transition: color .2s; }
.kwf a:hover { color: var(--ink); text-decoration: underline; }
.kwf-bottom { display: flex; justify-content: space-between; align-items: center; padding-top: var(--space-m); gap: var(--space-m); flex-wrap: wrap; }
.kwf-social { display: flex; gap: var(--space-m); flex-wrap: wrap; }
@media (max-width: 1100px) { .kwf-top { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .kwf-top { grid-template-columns: 1fr; gap: var(--space-l); } }

/* ---------- Cookie consent banner ---------- */
.kwc { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 90; display: none; max-width: 680px; margin: 0 auto; padding: var(--space-m) var(--space-l); border-radius: 10px; background: var(--paper-2); border: 1px solid var(--line); box-shadow: 0 18px 50px -20px rgba(29,29,47,.35); font-family: var(--body); }
.kwc--visible { display: block; }
.kwc p { margin: 0 0 var(--space-s); color: var(--ink); font-size: var(--step--1); line-height: 1.55; }
.kwc a { color: var(--indigo-deep); text-decoration: underline; }
.kwc-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.kwc-actions button { cursor: pointer; font-family: var(--display); font-weight: 700; font-size: var(--step--1); padding: .7rem 1.2rem; border-radius: 6px; transition: background .2s, color .2s; }
.kwc-accept { background: var(--ink); color: var(--paper); border: 0; } .kwc-accept:hover { background: var(--indigo); color: #fff; }
.kwc-refuse { background: transparent; color: var(--ink); border: 2px solid var(--ink); } .kwc-refuse:hover { background: var(--ink); color: var(--paper); }

/* ==========================================================================
   Home components (from the validated prototype)
   ========================================================================== */

/* ---------- Hero ---------- */
.hero { --nav-h: 64px; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); height: calc(100dvh - var(--nav-h)); min-height: 680px; max-height: 960px; background: var(--indigo); color: #fff; }
.heroIn { position: relative; display: flex; align-items: center; background: var(--indigo) var(--grain, none) center / cover; }
.heroIn::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(96,96,240,.55), rgba(96,96,240,.85)); pointer-events: none; }
.heroCopy { position: relative; z-index: 1; padding: var(--space-xl) var(--space-l) var(--space-xl) var(--gutter); max-width: 38rem; }
.heroCopy h1 { font-size: clamp(2.1rem, 1.3rem + 2.3vw, 3.4rem); color: #fff; }
.heroLead { margin-top: var(--space-m); font-size: var(--step-0); line-height: 1.5; color: #fff; max-width: 52ch; }
.heroActions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: var(--space-l); }
.heroProof { margin-top: var(--space-l); font-size: var(--step--1); color: #fff; font-weight: 600; }
.heroHint { font-size: var(--step--1); color: rgba(255,255,255,.75); margin-top: .5rem; }
.wall { position: relative; overflow: hidden; height: 100%; background: var(--indigo-deep); }
.wall::before, .wall::after { content: ""; position: absolute; left: 0; right: 0; height: 12%; z-index: 2; pointer-events: none; }
.wall::before { top: 0; background: linear-gradient(180deg, rgba(59,59,184,.95), transparent); }
.wall::after { bottom: 0; background: linear-gradient(0deg, rgba(59,59,184,.95), transparent); }
.wall3d { position: absolute; inset: 0; }
.wall3d canvas { display: block; width: 100% !important; height: 100% !important; }
/* Repli sans WebGL : le mur CSS de la LP, trois colonnes en boucle */
.wallFallback { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; padding: 0 14px; overflow: hidden; }
.wallFallback .col { overflow: hidden; height: 100%; }
.wallFallback .track { display: flex; flex-direction: column; gap: 14px; will-change: transform; animation: wallUp 96s linear infinite; }
.wallFallback .col:nth-child(2) .track { animation-direction: reverse; animation-duration: 112s; }
.wallFallback .col:nth-child(3) .track { animation-duration: 104s; }
.wallFallback img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: top; border-radius: 6px; background: #fff; }
@keyframes wallUp { to { transform: translateY(-50%); } }

/* ---------- Logos : les cellules de l'ancien site, fonds blancs fondus, échelle égalisée ---------- */
.logos { padding: var(--space-2xl) 0; border-bottom: 1px solid var(--line); background: var(--paper-2); }
.logosT { font-family: var(--display); font-weight: 700; font-size: var(--step-2); letter-spacing: -0.03em; line-height: 1.1; color: var(--ink); text-align: left; max-width: 28ch; margin: 0 0 var(--space-l); }
.logoRow { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-s); }
.logoRow .cell { background: var(--paper); border-radius: 10px; height: 96px; padding: 0 var(--space-m); display: flex; align-items: center; justify-content: center; }
.logoRow img { max-height: 40px; max-width: 72%; width: auto; object-fit: contain; mix-blend-mode: multiply; filter: grayscale(1); opacity: .85; transition: filter .2s, opacity .2s; }
.logoRow .cell:hover img { filter: none; opacity: 1; }

/* ---------- Bénéfices : quatre colonnes alignées ligne à ligne (sous-grille), un fait en pied ---------- */
.benefits { padding: var(--space-2xl) 0; }
.benefitGrid { list-style: none; margin: var(--space-xl) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: auto auto 1fr auto; gap: 0 var(--space-l); border-top: 2px solid var(--ink); }
.benefitGrid li { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: .6rem; padding-top: var(--space-m); }
.benefitGrid .num { font-family: var(--display); font-weight: 700; font-size: var(--step--1); color: var(--indigo-deep); font-variant-numeric: tabular-nums; }
.benefitGrid h3 { font-size: var(--step-1); letter-spacing: -0.02em; line-height: 1.15; }
.benefitGrid p { color: var(--ink-2); font-size: var(--step--1); line-height: 1.5; }
.benefitGrid .v { margin-top: .6rem; padding-top: .7rem; border-top: 1px solid var(--line); font-size: var(--step--1); font-weight: 600; color: var(--ink); }

/* ---------- Réalisations ---------- */
.cases { padding: var(--space-2xl) 0; background: var(--paper-2); border-top: 1px solid var(--line); }
.case { padding: var(--space-2xl) 0 0; }
.case .wrap { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-l); align-items: center; }
.caseMedia { grid-column: 1 / span 7; }
.flip .caseMedia { grid-column: 6 / span 7; grid-row: 1; }
.caseMedia img { width: 100%; max-height: 560px; object-fit: cover; object-position: top; border-radius: 10px; border: 1px solid var(--line); background: var(--paper); }
.caseCopy { grid-column: 8 / span 5; }
.flip .caseCopy { grid-column: 1 / span 5; grid-row: 1; }
.caseCopy h3 { font-size: var(--step-2); letter-spacing: -0.03em; }
.caseCopy > p:not(.kicker):not(.caseLinks) { margin-top: var(--space-m); color: var(--ink-2); }
.caseLinks { display: flex; flex-wrap: wrap; gap: var(--space-m); margin-top: var(--space-l) !important; }
.kw blockquote { margin: var(--space-m) 0 0; padding-left: var(--space-m); border-left: 3px solid var(--indigo); }
.kw blockquote p { font-size: var(--step-0); }
.kw blockquote footer { margin-top: var(--space-s); font-size: var(--step--1); color: var(--ink-2); }
.kw blockquote footer strong { color: var(--ink); font-weight: 600; }
.galleryT { margin-top: var(--space-2xl); font-size: var(--step-2); }
.masonry { columns: 4; column-gap: var(--space-m); margin-top: var(--space-l); }
.masonry > a, .masonry > figure { display: block; break-inside: avoid; margin: 0 0 var(--space-m); text-decoration: none; }
.masonry figure { margin: 0; }
.masonry img { width: 100%; border-radius: 8px; border: 1px solid var(--line); background: var(--paper); transition: transform .25s var(--ease-out); }
.masonry a:hover img { transform: translateY(-3px); }
.masonry figcaption { margin-top: .5rem; font-size: var(--step--1); color: var(--ink-2); }
.masonry figcaption b { display: block; color: var(--ink); font-weight: 600; }

/* ---------- Secteurs ---------- */
.sectors { padding: var(--space-3xl) 0 var(--space-2xl); }
.accWrap { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--space-2xl); margin-top: var(--space-xl); align-items: start; }
.acc { border-top: 2px solid var(--ink); }
.acc details { border-bottom: 1px solid var(--line); }
.acc summary { cursor: pointer; padding: var(--space-m) 0; font-family: var(--display); font-weight: 700; font-size: var(--step-1); letter-spacing: -0.02em; list-style: none; display: flex; justify-content: space-between; gap: var(--space-m); }
.acc summary::-webkit-details-marker { display: none; }
.acc summary::after { content: "+"; color: var(--indigo-deep); font-weight: 500; flex: none; }
.acc details[open] summary::after { content: "−"; }
.acc .body { padding: 0 0 var(--space-m); color: var(--ink-2); max-width: 56ch; }
.acc .body b { color: var(--ink); font-weight: 600; }
.acc .body a { color: var(--indigo-deep); text-decoration: underline; text-underline-offset: .2em; }
.accImg { position: sticky; top: 96px; }
.accImg img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: top; border-radius: 10px; border: 1px solid var(--line); background: var(--paper-2); }

/* ---------- Méthode ---------- */
.steps { padding: var(--space-2xl) 0; background: var(--paper-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.strip { list-style: none; margin: var(--space-xl) 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); grid-template-rows: auto auto 1fr auto; gap: 0 var(--space-m); border-top: 2px solid var(--ink); }
.strip li { position: relative; display: grid; grid-row: span 4; grid-template-rows: subgrid; padding-top: var(--space-m); row-gap: .4rem; }
.strip li::before { content: ""; position: absolute; top: -7px; left: 0; width: 12px; height: 12px; border-radius: 50%; background: var(--paper-2); border: 2px solid var(--ink); }
.strip li.key::before { background: var(--indigo); border-color: var(--indigo); }
.strip .num { display: block; font-family: var(--display); font-weight: 700; font-size: var(--step--1); color: var(--indigo-deep); font-variant-numeric: tabular-nums; }
.strip .d { display: block; font-family: var(--display); font-weight: 700; font-size: var(--step-1); letter-spacing: -0.02em; line-height: 1.1; }
.strip .t { display: block; font-size: var(--step--1); color: var(--ink-2); line-height: 1.45; max-width: 30ch; }
.strip .v { display: block; margin-top: .6rem; padding-top: .6rem; border-top: 1px solid var(--line); font-size: var(--step--1); font-weight: 600; color: var(--ink); max-width: 30ch; }
.strip li.key .v { color: var(--indigo-deep); }

/* ---------- En bonne compagnie ---------- */
.company { padding: var(--space-3xl) 0 var(--space-2xl); }
.companyGrid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-2xl); align-items: center; }
.stats { list-style: none; margin: var(--space-l) 0 0; padding: 0; border-top: 2px solid var(--ink); }
.stats li { padding: var(--space-m) 0; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-m); align-items: baseline; }
.stats .n { font-family: var(--display); font-weight: 700; font-size: var(--step-2); letter-spacing: -0.03em; color: var(--indigo-deep); font-variant-numeric: tabular-nums; white-space: nowrap; }
.stats .t { font-size: var(--step--1); color: var(--ink-2); }
.teamPhoto { width: 100%; border-radius: 10px; border: 1px solid var(--line); }

/* ---------- Mieux qu'un template ---------- */
.vs { padding: var(--space-2xl) 0; background: var(--paper-2); border-top: 1px solid var(--line); }
.vsGrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-l); margin-top: var(--space-xl); }
.vsCol { border-top: 2px solid var(--ink); padding-top: var(--space-m); }
.vsCol h3 { font-size: var(--step-2); }
.vsT { margin-top: .4rem; font-size: var(--step--1); color: var(--ink-2); }
.vsCol ul { margin: var(--space-m) 0 0; padding: 0; list-style: none; }
.vsCol li { padding: .6rem 0; border-bottom: 1px solid var(--line); color: var(--ink-2); }
.vsKern { background: var(--indigo); color: #fff; border-top-color: #fff; padding: var(--space-m) var(--space-l) var(--space-l); border-radius: 10px; }
.vsKern .vsT, .vsKern li { color: rgba(255,255,255,.85); }
.vsKern li { border-bottom-color: rgba(255,255,255,.2); }
.vsKern .btn { margin-top: var(--space-l); background: #fff; color: var(--indigo-deep); }
.vsKern .btn:hover { background: var(--paper); }
.vsLinks { margin-top: var(--space-l); color: var(--ink-2); max-width: var(--measure); }

/* ---------- Formules et tarifs ---------- */
.price { padding: var(--space-3xl) 0 var(--space-2xl); border-top: 1px solid var(--line); }
.priceNotes { max-width: 72ch; color: var(--ink-2); }
.priceNotes.top { margin-top: var(--space-m); font-size: var(--step--1); }
.priceNotes b { color: var(--ink); font-weight: 600; }
.plans { list-style: none; margin: var(--space-xl) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-m); align-items: stretch; }
.plan { position: relative; display: flex; flex-direction: column; padding: var(--space-l); border: 1px solid var(--line); border-radius: 10px; background: var(--paper-2); }
.plan.is-main { border: 2px solid var(--indigo); }
.badge { position: absolute; top: -.8rem; left: var(--space-l); background: var(--indigo); color: #fff; font-family: var(--display); font-weight: 700; font-size: var(--step--1); padding: .25rem .7rem; border-radius: 999px; }
.tier { font-family: var(--display); font-weight: 700; font-size: var(--step-2); letter-spacing: -0.03em; }
.tierSub { margin-top: .2rem; color: var(--ink-2); font-size: var(--step--1); }
.from { margin-top: var(--space-m); font-size: var(--step--1); color: var(--ink-2); }
.amount { margin: 0; font-family: var(--display); font-weight: 800; font-size: var(--step-4); letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; color: var(--indigo-deep); }
.amount small { font-size: .5em; font-weight: 700; }
.pdesc { margin-top: var(--space-m); color: var(--ink-2); font-size: var(--step--1); }
.feats { list-style: none; margin: var(--space-m) 0 0; padding: 0; border-top: 1px solid var(--line); flex: 1; }
.feats li { position: relative; padding: .55rem 0 .55rem 1.4rem; border-bottom: 1px solid var(--line); font-size: var(--step--1); }
.feats li::before { content: ""; position: absolute; left: 0; top: .95rem; width: .55rem; height: .55rem; border-radius: 50%; background: var(--indigo); }
.notin { margin-top: var(--space-m); font-size: var(--step--1); color: var(--ink-2); }
.plan .btn { margin-top: var(--space-m); width: 100%; }
.tableT { margin-top: var(--space-2xl); font-size: var(--step-2); }
.tableWrap { overflow-x: auto; margin-top: var(--space-m); border: 1px solid var(--line); border-radius: 10px; background: var(--paper-2); }
.compare { width: 100%; min-width: 720px; border-collapse: separate; border-spacing: 0; table-layout: fixed; font-size: var(--step--1); }
.compare .c0 { width: 19%; }
.compare th, .compare td { padding: .95rem 1.1rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.compare th { font-family: var(--display); font-weight: 700; font-size: var(--step-0); letter-spacing: -0.02em; border-bottom: 2px solid var(--ink); }
.compare th span { display: block; font-family: var(--body); font-weight: 500; font-size: var(--step--1); color: var(--ink-2); letter-spacing: 0; margin-top: .15rem; }
.compare th.main { color: var(--indigo-deep); }
.compare th.main span { color: var(--indigo-deep); }
.compare col.main { background: rgba(96,96,240,.07); }
.compare tbody td:first-child { font-weight: 600; }
.compare tbody td { color: var(--ink-2); }
.compare tbody tr:last-child td { border-bottom: 0; }
.price .priceNotes:not(.top) { margin-top: var(--space-l); }
.simulator { margin-top: var(--space-2xl); background: var(--indigo); color: #fff; border-radius: 12px; padding: var(--space-xl) var(--space-l); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-2xl); align-items: center; }
.simKicker { color: rgba(255,255,255,.8); }
.simCopy h3 { font-size: var(--step-2); color: #fff; max-width: 22ch; }
.simCopy p:not(.kicker) { margin-top: var(--space-m); color: rgba(255,255,255,.88); max-width: 46ch; }
.simCopy .btn { margin-top: var(--space-l); }
.simDemo { background: var(--paper); color: var(--ink); border-radius: 10px; padding: var(--space-l); }
.simAmount { display: flex; align-items: baseline; gap: .6rem; font-family: var(--display); font-weight: 800; font-size: var(--step-4); letter-spacing: -0.04em; line-height: 1; color: var(--indigo-deep); font-variant-numeric: tabular-nums; }
.simHt { font-size: var(--step--1); font-weight: 600; color: var(--ink-2); letter-spacing: 0; }
#simRange { --p: 50%; width: 100%; margin: var(--space-m) 0 .5rem; appearance: none; height: 6px; border-radius: 999px; background: linear-gradient(90deg, var(--indigo) var(--p), rgba(29,29,47,.15) var(--p)); outline-offset: 6px; cursor: pointer; }
#simRange::-webkit-slider-thumb { appearance: none; width: 26px; height: 26px; border-radius: 50%; background: #fff; border: 3px solid var(--indigo); box-shadow: 0 2px 10px rgba(29,29,47,.2); cursor: grab; }
#simRange::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 3px solid var(--indigo); cursor: grab; }
.simTicks { list-style: none; margin: 0; padding: 0; display: flex; justify-content: space-between; font-size: 12px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.simWhat { margin-top: var(--space-m); padding-top: var(--space-m); border-top: 1px solid var(--line); min-height: 6.5em; color: var(--ink-2); font-size: var(--step--1); }
.simWhat b { display: block; color: var(--ink); font-family: var(--display); font-weight: 700; font-size: var(--step-0); letter-spacing: -0.01em; margin-bottom: .3rem; }

/* ---------- Témoignages ---------- */
.reviews { padding: var(--space-2xl) 0; background: var(--paper-2); border-top: 1px solid var(--line); }
.quotes { list-style: none; margin: var(--space-xl) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-l); }
.quotes li { display: flex; flex-direction: column; padding-top: var(--space-m); border-top: 2px solid var(--ink); }
.stars { color: var(--indigo); letter-spacing: .1em; font-size: var(--step--1); margin-bottom: .6rem; }
.quotes li > p:not(.stars) { color: var(--ink); flex: 1; }
.who { display: flex; align-items: center; gap: var(--space-s); margin-top: var(--space-m); }
.who img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex: none; }
.who b { display: block; font-weight: 600; }
.who span { display: block; font-size: var(--step--1); color: var(--ink-2); }

/* ---------- Guides et articles ---------- */
.blog { padding: var(--space-3xl) 0 var(--space-2xl); }
.blogHead { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-m); flex-wrap: wrap; }
.blogGrid { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: var(--space-2xl); margin-top: var(--space-xl); align-items: start; }
.posts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-m); }
.post { display: flex; flex-direction: column; text-decoration: none; background: var(--paper-2); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; transition: transform .25s var(--ease-out); }
.post:hover { transform: translateY(-3px); }
.post img, .post .cover { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.post .cover { display: flex; align-items: center; justify-content: center; background: var(--indigo); color: #fff; font-family: var(--display); font-weight: 800; font-size: var(--step-2); letter-spacing: -0.03em; text-align: center; padding: var(--space-m); }
.post .chip { align-self: flex-start; margin: var(--space-m) var(--space-m) 0; font-size: 12px; font-weight: 600; color: var(--indigo-deep); border: 1px solid var(--indigo); border-radius: 999px; padding: .15rem .6rem; }
.post h3 { margin: .8rem var(--space-m) 0; font-size: var(--step-0); line-height: 1.25; }
.post p { margin: .6rem var(--space-m) 0; font-size: var(--step--1); color: var(--ink-2); flex: 1; }
.post .meta { margin: var(--space-m); font-size: 12.5px; color: var(--ink-2); }
.guides h3 { font-size: var(--step-1); }
.guides h3 + h3, .guides p + h3, .guides ul + h3 { margin-top: var(--space-l); }
.guides ul { list-style: none; margin: var(--space-s) 0 0; padding: 0; border-top: 2px solid var(--ink); }
.guides li { padding: .7rem 0; border-bottom: 1px solid var(--line); }
.guides li a { text-decoration: none; font-weight: 500; color: var(--ink); }
.guides li a:hover { color: var(--indigo-deep); text-decoration: underline; }
.guides p { margin-top: var(--space-s); color: var(--ink-2); font-size: var(--step--1); }

/* ---------- FAQ ---------- */
.faq { padding: var(--space-2xl) 0; background: var(--paper-2); border-top: 1px solid var(--line); }
.faqGrid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--space-2xl); align-items: start; }
.faqIntro { position: sticky; top: 96px; }
.faqIntro .btn { margin-top: var(--space-m); }
.faqList { border-top: 2px solid var(--ink); }
.faqList details { border-bottom: 1px solid var(--line); }
.faqList summary { cursor: pointer; padding: var(--space-m) 0; font-family: var(--display); font-weight: 700; font-size: var(--step-0); letter-spacing: -0.01em; list-style: none; display: flex; justify-content: space-between; gap: var(--space-m); }
.faqList summary::-webkit-details-marker { display: none; }
.faqList summary::after { content: "+"; color: var(--indigo-deep); font-weight: 500; flex: none; }
.faqList details[open] summary::after { content: "−"; }
.faqList details p { padding: 0 0 var(--space-m); color: var(--ink-2); max-width: var(--measure); }

/* ---------- Clôture ---------- */
.close { background: var(--indigo); color: #fff; padding: var(--space-3xl) 0; }
.close h2 { color: #fff; font-size: var(--step-4); max-width: 22ch; }
.close p { margin-top: var(--space-m); font-size: var(--step-1); line-height: 1.4; max-width: 46ch; color: #fff; }
.close .btn { margin-top: var(--space-l); }

/* ---------- Explorateur ---------- */
.explorer { width: min(100vw - 2rem, 1280px); height: min(100dvh - 2rem, 900px); padding: 0; border: 0; border-radius: 10px; background: var(--paper); color: var(--ink); overflow: hidden; }
.explorer::backdrop { background: rgba(29,29,47,.7); }
.exBar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-m); padding: var(--space-s) var(--space-m); border-bottom: 1px solid var(--line); background: #fff; }
.exName { font-family: var(--display); font-weight: 700; }
.exViews { display: flex; gap: .25rem; border: 1px solid var(--line); border-radius: 6px; padding: .2rem; }
.exViews button { background: none; border: 0; padding: .4rem .8rem; border-radius: 4px; cursor: pointer; font-size: var(--step--1); font-weight: 600; color: var(--ink-2); }
.exViews button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.exClose { background: none; border: 0; cursor: pointer; font-weight: 600; text-decoration: underline; text-underline-offset: .25em; }
.exBody { height: calc(100% - 58px); overflow: auto; background: #E4E4EE; display: flex; justify-content: center; padding: var(--space-m); }
.exBody img { width: min(100%, 1200px); height: auto; border-radius: 6px; box-shadow: 0 10px 40px -20px rgba(29,29,47,.4); }
.exBody.isMobile img { width: 390px; }

/* ---------- Écrans étroits ---------- */
@media (max-width: 1100px) {
  .masonry { columns: 3; }
  .posts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  .logoRow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero { grid-template-columns: 1fr; height: auto; min-height: 0; max-height: none; }
  .heroCopy { padding: var(--space-xl) var(--gutter); max-width: none; }
  .wall { height: 70vh; min-height: 420px; }
  .case .wrap { grid-template-columns: 1fr; }
  .caseMedia, .flip .caseMedia, .caseCopy, .flip .caseCopy { grid-column: 1; grid-row: auto; }
  .masonry { columns: 2; }
  .accWrap { grid-template-columns: 1fr; gap: var(--space-l); }
  .accImg { position: static; }
  .strip { grid-template-columns: 1fr; grid-template-rows: none; gap: var(--space-s); border-top: 0; border-left: 2px solid var(--ink); padding-left: var(--space-m); }
  .strip li { grid-row: auto; grid-template-rows: none; }
  .strip li::before { left: calc(-1 * var(--space-m) - 7px); top: 6px; }
  .benefitGrid { grid-template-columns: 1fr; grid-template-rows: none; }
  .benefitGrid li { grid-row: auto; grid-template-rows: none; padding-bottom: var(--space-m); border-bottom: 1px solid var(--line); }
  .companyGrid { grid-template-columns: 1fr; gap: var(--space-l); }
  .vsGrid { grid-template-columns: 1fr; }
  .plans { grid-template-columns: 1fr; }
  .simulator { grid-template-columns: 1fr; gap: var(--space-l); }
  .quotes { grid-template-columns: 1fr; }
  .blogGrid { grid-template-columns: 1fr; gap: var(--space-l); }
  .posts { grid-template-columns: 1fr; }
  .faqGrid { grid-template-columns: 1fr; gap: var(--space-l); }
  .faqIntro { position: static; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .wallFallback .track { animation: none; }
  .post, .masonry img, .btn { transition: none; }
}

/* ==========================================================================
   Content design system: StreamField landings (.landing-stream), rich text,
   FAQ, CTA, related posts, sector links, projects gallery.
   ========================================================================== */

body.kw-page .container { max-width: var(--wrap); width: min(100% - 2 * var(--gutter), var(--wrap)); margin: 0 auto; padding: 0; }
body:where(.kw-page) :where(section, .landing-stream) { color: var(--ink); font-family: var(--body); }
body:where(.kw-page) :where(h1, h2, h3, .heading-1, .heading-2, .heading-5) { font-family: var(--display); color: var(--ink); letter-spacing: -0.03em; line-height: 1.05; font-weight: 700; }
body.kw-page .landing-stream { position: relative; padding-top: var(--space-xl); }
body.kw-page .landing-stream > * { position: relative; }

/* Hero: eyebrow (h6) + H1 + lead, left aligned on the reading measure */
body.kw-page .block-heading h6 { font-family: var(--display); font-size: var(--step--1); font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--indigo-deep); margin: var(--space-2xl) 0 var(--space-s); }
body.kw-page .landing-stream > .block-heading:first-child h6 { margin-top: 0; }
body.kw-page .block-heading h1 { font-size: clamp(2.2rem, 1.4rem + 2.6vw, 3.6rem); max-width: 22ch; margin: 0 0 var(--space-m); }
body.kw-page .block-heading h1 em, body.kw-page .block-heading h1 i { font-style: normal; }
body.kw-page .landing-stream > .block-heading:first-child + .block-heading + .block-rich_text p { font-size: var(--step-1); line-height: 1.45; color: var(--ink-2); max-width: 52ch; margin-bottom: var(--space-s); }
body.kw-page .block-heading h2 { font-size: var(--step-3); max-width: 28ch; margin: var(--space-xl) 0 var(--space-m); }
body.kw-page .block-heading + .block-heading h2 { margin-top: 0; }

/* Rich text */
body.kw-page .block-rich_text .container, body.kw-page .block-columns3 .container, body.kw-page .block-faqs .container, body.kw-page .block-cta .container, body.kw-page .block-related_links .container { padding-top: var(--space-s); padding-bottom: var(--space-s); }
body.kw-page .block-rich_text p { color: var(--ink-2); font-size: var(--step-0); line-height: 1.65; max-width: var(--measure); margin: 0 0 var(--space-s); }
body.kw-page .block-rich_text h3 { font-size: var(--step-1); margin: var(--space-l) 0 var(--space-xs); max-width: 40ch; }
body.kw-page .block-rich_text b, body.kw-page .block-rich_text strong { color: var(--ink); font-weight: 600; }
body.kw-page .block-rich_text a, body.kw-page .block-columns3 .rich-text a, body.kw-page .block-related_links a, body.kw-page .block-faqs .faq__answer a { color: var(--indigo-deep); text-decoration: underline; text-underline-offset: .2em; display: inline !important; background: none !important; padding: 0 !important; border-radius: 0 !important; font-weight: inherit !important; }
body.kw-page .block-rich_text a::after, body.kw-page .block-columns3 .rich-text a::after, body.kw-page .block-related_links a::after { content: none !important; }
/* Lists: a two column grid of facts, one rule per item */
body.kw-page .block-rich_text ul { list-style: none !important; padding: 0; max-width: 62rem; margin: var(--space-m) 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--space-l); border-top: 2px solid var(--ink); }
body.kw-page .block-rich_text ul li { position: relative; padding: .8rem 0 .8rem 1.4rem; border-bottom: 1px solid var(--line); color: var(--ink); font-size: var(--step--1); line-height: 1.5; }
body.kw-page .block-rich_text ul li::before { content: ""; position: absolute; left: 0; top: 1.25rem; width: .55rem; height: .55rem; border-radius: 50%; background: var(--indigo); }
body.kw-page .block-rich_text ul li:last-child:nth-child(odd) { grid-column: 1 / -1; }
body.kw-page .landing-stream li::marker { content: "" !important; }
/* Blockquote: a client case or a testimonial, on a plain white panel with an indigo rule */
body.kw-page .block-rich_text blockquote { margin: var(--space-m) 0; max-width: var(--measure); padding: .25rem 0 .25rem var(--space-m); border: 0; border-left: 3px solid var(--indigo); border-radius: 0; background: none; }
body.kw-page .block-rich_text blockquote p { color: var(--ink); margin: 0 0 .5rem; text-align: left; font-size: var(--step-0); }
body.kw-page .block-rich_text blockquote + blockquote { margin-top: var(--space-l); }
/* A client case: the capture on the left, the text on the right */
body.kw-page .block-rich_text blockquote:has(> img) { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-s) var(--space-l); align-items: start; max-width: 62rem; padding: 0; border: 0; margin: var(--space-l) 0; }
body.kw-page .block-rich_text blockquote:has(> img) > img { grid-column: 1; grid-row: 1 / span 4; width: 100%; aspect-ratio: 4 / 3; height: auto; max-height: none; object-fit: cover; object-position: center; border-radius: 8px; border: 1px solid var(--line); margin: 0; background: var(--paper-2); }
body.kw-page .block-rich_text blockquote:has(> img) > p { grid-column: 2; }
body.kw-page .block-rich_text blockquote:has(> img) > p:first-child { font-family: var(--display); font-size: var(--step-1); letter-spacing: -0.02em; line-height: 1.2; }
body.kw-page .block-rich_text blockquote:has(> img) > p:first-child b { font-weight: 700; }
body.kw-page .block-rich_text blockquote:has(> img) > p:not(:first-child) { color: var(--ink-2); }
@media (max-width: 760px) { body.kw-page .block-rich_text blockquote:has(> img) { grid-template-columns: 1fr; } body.kw-page .block-rich_text blockquote:has(> img) > img { grid-row: auto; } body.kw-page .block-rich_text blockquote:has(> img) > p { grid-column: 1; } }
body.kw-page .block-cta + .block-rich_text p { font-size: var(--step--1); color: var(--ink-2); }

/* Three columns: editorial columns with a rule on top, no cards */
body.kw-page .block-columns3 h2 { font-size: var(--step-3); max-width: 28ch; margin: var(--space-xl) 0 var(--space-m); }
body.kw-page .block-columns3 .grid { gap: var(--space-l); }
body.kw-page .block-columns3 .rich-text { display: flex; flex-direction: column; height: 100%; padding-top: var(--space-m); border-top: 2px solid var(--ink); background: none; border-radius: 0; }
body.kw-page .block-columns3 .rich-text h3 { font-size: var(--step-1); margin: 0 0 .6rem; color: var(--ink); letter-spacing: -0.02em; }
body.kw-page .block-columns3 .rich-text p { color: var(--ink-2); font-size: var(--step--1); line-height: 1.55; margin: 0; text-align: left; }
body.kw-page .block-columns3 .rich-text p + p { margin-top: .6rem; }
body.kw-page .block-columns3 .rich-text p:first-child { color: var(--ink); }
body.kw-page .block-columns3 .rich-text b, body.kw-page .block-columns3 .rich-text strong { color: var(--ink); font-weight: 600; }
body.kw-page .block-columns3 .rich-text ul { list-style: none !important; padding-left: 0; margin: .6rem 0 0; }
body.kw-page .block-columns3 .rich-text ul li { position: relative; padding: .45rem 0 .45rem 1.2rem; border-bottom: 1px solid var(--line); font-size: var(--step--1); color: var(--ink); }
body.kw-page .block-columns3 .rich-text ul li::before { content: ""; position: absolute; left: 0; top: .95rem; width: .5rem; height: .5rem; border-radius: 50%; background: var(--indigo); }
body.kw-page .block-columns3 .rich-text .kwl-amt { font-family: var(--display); font-weight: 800; font-size: var(--step-3); letter-spacing: -0.04em; line-height: 1; color: var(--indigo-deep); margin: .2rem 0 var(--space-s); font-variant-numeric: tabular-nums; }

/* FAQ */
body.kw-page .block-faqs .max-w-4xl { max-width: none; margin: 0; }
body.kw-page .block-faqs .heading-2 { font-size: var(--step-3); max-width: 28ch; margin: var(--space-xl) 0 var(--space-m); text-align: left; }
body.kw-page .block-faqs dl { border-top: 2px solid var(--ink); max-width: 72ch; margin: 0; }
body.kw-page .block-faqs .divide-gray-900\/10 > * { border-color: var(--line) !important; }
body.kw-page .block-faqs .faq__container { padding: var(--space-s) 0; }
body.kw-page .block-faqs .faq__question span { color: var(--ink) !important; font-family: var(--display); font-size: var(--step-0); font-weight: 700; letter-spacing: -0.01em; }
body.kw-page .block-faqs .faq__caret { color: var(--indigo-deep); }
body.kw-page .block-faqs .faq__answer, body.kw-page .block-faqs .faq__answer p { color: var(--ink-2); font-size: var(--step--1); text-align: left; max-width: var(--measure); }

/* Related links block */
body.kw-page .block-related_links .bg-light { background: var(--paper-2) !important; border: 1px solid var(--line); border-radius: 8px; }
body.kw-page .block-related_links .rich-text, body.kw-page .block-related_links p { color: var(--ink-2); font-size: var(--step--1); }
body.kw-page .block-related_links b, body.kw-page .block-related_links strong { color: var(--ink); }

/* CTA: first = a plain button under the hero; last = the indigo closing band */
body.kw-page .block-cta .bg-primary { background: transparent !important; padding: 0 !important; display: block; align-items: start; }
body.kw-page .block-cta h2, body.kw-page .block-cta .text-white { display: none; }
body.kw-page .block-cta a.call-to-action { display: inline-flex; align-items: center; justify-content: center; font-family: var(--display); font-weight: 700; font-size: var(--step-0); background: var(--ink) !important; color: var(--paper) !important; padding: .95rem 1.5rem; border-radius: 6px; text-decoration: none; border: 0; transition: background .2s; }
body.kw-page .block-cta a.call-to-action:hover { background: var(--indigo) !important; color: #fff !important; transform: none; }
body.kw-page .landing-stream > .block-cta:last-child .bg-primary, body.kw-page .block-cta.cta-final .bg-primary { background: var(--indigo) !important; border-radius: 12px; padding: var(--space-xl) var(--space-l) !important; margin-top: var(--space-2xl); display: flex; flex-direction: column; align-items: flex-start; }
body.kw-page .landing-stream > .block-cta:last-child h2, body.kw-page .block-cta.cta-final h2 { display: block; color: #fff; font-size: var(--step-3); max-width: 24ch; margin: 0 0 var(--space-s); text-align: left; }
body.kw-page .landing-stream > .block-cta:last-child .text-white, body.kw-page .block-cta.cta-final .text-white { display: block; color: rgba(255,255,255,.9) !important; max-width: 52ch; margin: 0 0 var(--space-m); text-align: left; padding: 0 !important; }
body.kw-page .landing-stream > .block-cta:last-child a.call-to-action, body.kw-page .block-cta.cta-final a.call-to-action { background: var(--paper) !important; color: var(--indigo-deep) !important; }
body.kw-page .landing-stream > .block-cta:last-child a.call-to-action:hover, body.kw-page .block-cta.cta-final a.call-to-action:hover { background: #fff !important; }

/* Inherited Tailwind theme colors, on the light theme */
body.kw-page .text-primary { color: var(--ink) !important; }
body.kw-page .text-primaryAlpha { color: var(--ink-2) !important; }
body.kw-page .bg-accentLight { background: var(--paper-2) !important; border: 1px solid var(--line); color: var(--ink) !important; }
body.kw-page .border-accentGrey { border-color: var(--line) !important; }
body.kw-page .blog__post img { border-radius: 8px; border: 1px solid var(--line); }

/* Projects gallery (masonry) */
body.kw-page .kwl-projects { margin: var(--space-2xl) 0 var(--space-l); }
body.kw-page .kwl-projects-head { max-width: var(--measure); margin: 0 0 var(--space-l); }
body.kw-page .kwl-projects-head h2 { font-size: var(--step-3); margin: 0 0 var(--space-s); }
body.kw-page .kwl-projects-head p { color: var(--ink-2); margin: 0; }
body.kw-page .kwl-masonry { columns: 4; column-gap: var(--space-m); }
body.kw-page .kwl-masonry figure { margin: 0 0 var(--space-m); break-inside: avoid; }
body.kw-page .kwl-masonry img { display: block; width: 100%; height: auto; border-radius: 8px; border: 1px solid var(--line); background: var(--paper-2); transition: transform .25s var(--ease-out); }
body.kw-page .kwl-masonry figcaption { padding: .5rem 0 0; font-size: var(--step--1); color: var(--ink-2); }
body.kw-page .kwl-masonry figcaption b { display: block; color: var(--ink); font-weight: 600; }
body.kw-page .kwl-masonry a { display: block; text-decoration: none; }
body.kw-page .kwl-masonry a:hover img { transform: translateY(-3px); }

/* Related articles under a landing */
body.kw-page .kwl-more { margin: var(--space-2xl) 0 var(--space-l); }
body.kw-page .kwl-more .head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-m); margin-bottom: var(--space-l); flex-wrap: wrap; }
body.kw-page .kwl-more h2 { font-size: var(--step-3); margin: 0; text-align: left; }
body.kw-page .kwl-more .all { color: var(--indigo-deep); font-weight: 600; font-size: var(--step--1); text-decoration: underline; text-underline-offset: .25em; }
body.kw-page .kwl-more .grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-m); align-items: stretch; }
body.kw-page .kwl-mcard { display: flex; flex-direction: column; gap: .6rem; background: var(--paper-2); border: 1px solid var(--line); border-radius: 10px; padding: var(--space-m); text-decoration: none; transition: transform .25s var(--ease-out); }
body.kw-page .kwl-mcard:hover { transform: translateY(-3px); }
body.kw-page .kwl-mcard .chip { display: inline-block; width: fit-content; font-size: 12px; font-weight: 600; color: var(--indigo-deep); border: 1px solid var(--indigo); border-radius: 999px; padding: .15rem .6rem; }
body.kw-page .kwl-mcard .t { font-family: var(--display); font-size: var(--step-0); line-height: 1.25; font-weight: 700; color: var(--ink); margin: 0; letter-spacing: -0.01em; }
body.kw-page .kwl-mcard .s { color: var(--ink-2); font-size: var(--step--1); line-height: 1.5; margin: 0; text-align: left; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
body.kw-page .kwl-mcard .r { color: var(--indigo-deep); font-size: var(--step--1); font-weight: 600; margin-top: auto; text-decoration: underline; text-underline-offset: .25em; }

/* Cross links between sector landings */
body.kw-page .kwl-sectors { margin: var(--space-l) 0 var(--space-2xl); }
body.kw-page .kwl-sectors .container { text-align: left; }
body.kw-page .kwl-sectors p { color: var(--ink-2); font-size: var(--step--1); margin: 0 0 var(--space-s); }
body.kw-page .kwl-sectors a { display: inline-block; margin: 0 .5rem .6rem 0; padding: .5rem .9rem; border-radius: 6px; border: 1px solid var(--line); background: var(--paper-2); color: var(--ink); font-size: var(--step--1); text-decoration: none; transition: border-color .2s, color .2s; }
body.kw-page .kwl-sectors a:hover { border-color: var(--indigo); color: var(--indigo-deep); }

@media (max-width: 1000px) { body.kw-page .kwl-masonry { columns: 3; } body.kw-page .kwl-more .grid3 { grid-template-columns: 1fr; } }
@media (max-width: 760px) { body.kw-page .block-rich_text ul { grid-template-columns: 1fr; } body.kw-page .kwl-masonry { columns: 2; } }

/* ---------- Generic prose for standard, legal, cookie, search and orphan pages ---------- */
.prose-kw { max-width: var(--measure); color: var(--ink); font-size: var(--step-0); line-height: 1.65; }
.prose-kw h1 { font-size: var(--step-4); margin: 0 0 var(--space-m); }
.prose-kw h2 { font-size: var(--step-2); margin: var(--space-xl) 0 var(--space-s); }
.prose-kw h3 { font-size: var(--step-1); margin: var(--space-l) 0 var(--space-xs); }
.prose-kw p { margin: 0 0 var(--space-s); color: var(--ink-2); }
.prose-kw p:has(> b:only-child), .prose-kw b, .prose-kw strong { color: var(--ink); font-weight: 600; }
.prose-kw a { color: var(--indigo-deep); text-decoration: underline; text-underline-offset: .2em; display: inline !important; background: none !important; padding: 0 !important; border-radius: 0 !important; font-weight: inherit !important; }
.prose-kw a::after { content: none !important; }
.prose-kw ul, .prose-kw ol { margin: 0 0 var(--space-m); padding-left: 1.2rem; color: var(--ink-2); }
.prose-kw ul { list-style: disc; } .prose-kw ol { list-style: decimal; }
.prose-kw li { margin: .3rem 0; }
.prose-kw li::marker { color: var(--indigo); }
.prose-kw table { width: 100%; border-collapse: collapse; font-size: var(--step--1); margin: var(--space-m) 0; }
.prose-kw th, .prose-kw td { border-bottom: 1px solid var(--line); padding: .7rem .8rem; text-align: left; vertical-align: top; }
.prose-kw th { font-family: var(--display); font-weight: 700; border-bottom: 2px solid var(--ink); }
.prose-kw blockquote { margin: var(--space-m) 0; padding-left: var(--space-m); border-left: 3px solid var(--indigo); color: var(--ink); }
.prose-kw img { border-radius: 8px; border: 1px solid var(--line); }
.prose-kw hr { border: 0; border-top: 1px solid var(--line); margin: var(--space-l) 0; }
.kw-page-head { padding: var(--space-2xl) 0 var(--space-l); }
.kw-page-head .crumb { font-size: var(--step--1); color: var(--ink-2); margin-bottom: var(--space-m); }
.kw-page-head .crumb a { color: inherit; text-decoration: none; } .kw-page-head .crumb a:hover { color: var(--ink); text-decoration: underline; }
.kw-page-head h1 { font-size: var(--step-4); max-width: 22ch; }
.kw-page-head .lead { margin-top: var(--space-m); }
.kw-page-body { padding: 0 0 var(--space-3xl); }

/* ---------- Overrides of the Tailwind #stream typography (id selectors) ---------- */
body.kw-page #stream :is(h1, h2, h3, h4, h5, h6), body.kw-page #stream .block-image_text h3, body.kw-page #stream .block-text_image h3 { font-family: var(--display); font-weight: 700; letter-spacing: -0.03em; line-height: 1.05; color: var(--ink); }
body.kw-page #stream h1 { font-size: clamp(2.2rem, 1.4rem + 2.6vw, 3.6rem); margin: 0 0 var(--space-m); text-align: left; }
body.kw-page #stream h2 { font-size: var(--step-3); margin: var(--space-xl) 0 var(--space-m); text-align: left; }
body.kw-page #stream h3 { font-size: var(--step-1); letter-spacing: -0.02em; margin: 0 0 .6rem; }
body.kw-page #stream h6 { font-family: var(--display); font-size: var(--step--1); font-weight: 700; color: var(--indigo-deep); margin: var(--space-2xl) 0 var(--space-s); text-transform: none; letter-spacing: 0; }
body.kw-page #stream > .block-heading:first-child h6 { margin-top: 0; }
body.kw-page #stream ul, body.kw-page #stream ol { margin-block: 0; padding-inline-start: 0; }
body.kw-page #stream ul > :not([hidden]) ~ :not([hidden]), body.kw-page #stream ol > :not([hidden]) ~ :not([hidden]) { margin-top: 0; margin-bottom: 0; }
body.kw-page #stream .block-rich_text ul { margin: var(--space-m) 0; }
body.kw-page #stream .rich-text p { text-align: left; }
body.kw-page #stream { padding-top: var(--space-xl); }
body.kw-page #stream .block-heading .container, body.kw-page #stream .block-rich_text .container { padding-top: 0; padding-bottom: 0; }
body.kw-page #stream .block-rich_text .container { padding-bottom: var(--space-s); }
body.kw-page #stream .block-cta .container { padding-top: var(--space-s); padding-bottom: var(--space-l); }
body.kw-page #stream .block-columns3 .container, body.kw-page #stream .block-faqs .container { padding-top: 0; padding-bottom: var(--space-l); }

/* ==========================================================================
   Blog: index (.kwb-*) and article (.blog, #article-body, .kwb-hero, .kwb-cta, .kwb-more)
   ========================================================================== */
.kwb { color: var(--ink); font-family: var(--body); padding: var(--space-2xl) 0 var(--space-3xl); }
.kwb * { box-sizing: border-box; }
.kwb-container { width: min(100% - 2 * var(--gutter), var(--wrap)); margin: 0 auto; }
.kwb a { text-decoration: none; color: inherit; }
.kwb-crumb, .kwb-hero .crumb { font-size: var(--step--1); color: var(--ink-2); margin-bottom: var(--space-l); }
.kwb-crumb a:hover, .kwb-hero .crumb a:hover { color: var(--ink); text-decoration: underline; }
.kwb-head { max-width: var(--measure); margin: 0 0 var(--space-xl); text-align: left; }
.kwb-eyebrow { font-family: var(--display); font-size: var(--step--1); font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--indigo-deep); margin: 0 0 var(--space-s); }
.kwb-display { font-family: var(--display); font-size: var(--step-4); line-height: 1.05; font-weight: 700; letter-spacing: -0.03em; margin: 0; color: var(--ink); }
.kwb-serif { font-family: inherit; font-style: normal; font-weight: inherit; }
.kwb-sub { color: var(--ink-2); font-size: var(--step-1); line-height: 1.45; margin: var(--space-m) 0 0; }
.kwb-tools { display: flex; flex-wrap: wrap; gap: var(--space-s); justify-content: space-between; align-items: center; margin-bottom: var(--space-l); padding-bottom: var(--space-m); border-bottom: 1px solid var(--line); }
.kwb-search { display: flex; gap: .5rem; flex-wrap: wrap; }
.kwb-search input { background: var(--paper-2); border: 1px solid var(--line); color: var(--ink); border-radius: 6px; padding: .65rem 1rem; min-width: 260px; font-family: inherit; font-size: var(--step--1); }
.kwb-search input::placeholder { color: var(--ink-2); }
.kwb-search button { background: var(--ink); color: var(--paper); border: 0; border-radius: 6px; padding: .65rem 1.1rem; font-family: var(--display); font-weight: 700; font-size: var(--step--1); cursor: pointer; }
.kwb-search button:hover { background: var(--indigo); color: #fff; }
.kwb-filters { display: flex; flex-wrap: wrap; gap: .5rem; }
.kwb-filters a { padding: .45rem .9rem; border-radius: 6px; font-size: var(--step--1); border: 1px solid var(--line); background: var(--paper-2); color: var(--ink); transition: border-color .15s, color .15s; }
.kwb-filters a:hover { border-color: var(--indigo); color: var(--indigo-deep); }
.kwb-filters a.on { background: var(--ink); color: var(--paper); border-color: var(--ink); font-weight: 600; }
.kwb-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-m); }
.kwb-card { display: flex; flex-direction: column; background: var(--paper-2); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; transition: transform .25s var(--ease-out); }
.kwb-card:hover { transform: translateY(-3px); }
.kwb-thumb img { display: block; width: 100%; aspect-ratio: 16 / 10; height: auto; object-fit: cover; }
.kwb-body { display: flex; flex-direction: column; gap: .6rem; padding: var(--space-m); flex: 1; }
.kwb-chip { display: inline-block; padding: .15rem .6rem; border-radius: 999px; font-size: 12px; font-weight: 600; border: 1px solid var(--indigo); color: var(--indigo-deep); width: fit-content; }
.kwb-title { font-family: var(--display); font-size: var(--step-1); line-height: 1.2; font-weight: 700; letter-spacing: -0.02em; margin: 0; color: var(--ink); }
.kwb-sum { color: var(--ink-2); font-size: var(--step--1); line-height: 1.5; margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.kwb-meta { color: var(--ink-2); font-size: 12.5px; margin-top: auto; }
.kwb-read { color: var(--indigo-deep); font-size: var(--step--1); font-weight: 600; text-decoration: underline; text-underline-offset: .25em; }
.kwb-card--featured { grid-column: 1 / -1; flex-direction: row; align-items: stretch; }
.kwb-card--featured .kwb-body { padding: var(--space-xl); gap: var(--space-s); justify-content: center; }
.kwb-card--featured .kwb-title { font-size: var(--step-3); max-width: 24ch; }
.kwb-card--featured .kwb-sum { font-size: var(--step-0); max-width: 60ch; }
.kwb-card--featured .kwb-thumb { flex: 0 0 44%; }
.kwb-card--featured .kwb-thumb img { height: 100%; aspect-ratio: auto; min-height: 320px; }
.kwb-empty { grid-column: 1 / -1; border: 1px dashed var(--line); border-radius: 10px; padding: var(--space-xl) var(--space-l); text-align: center; color: var(--ink-2); }
.kwb-pager { display: flex; justify-content: center; gap: .5rem; margin-top: var(--space-xl); }
.kwb-pager a, .kwb-pager span { min-width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; border: 1px solid var(--line); color: var(--ink); font-size: var(--step--1); padding: 0 .8rem; background: var(--paper-2); }
.kwb-pager a:hover { border-color: var(--indigo); color: var(--indigo-deep); }
.kwb-pager .on { background: var(--ink); color: var(--paper); border-color: var(--ink); font-weight: 600; }
.kwb-pager .dots { border: 0; background: none; }
@media (max-width: 960px) { .kwb-grid { grid-template-columns: 1fr; } .kwb-card--featured { flex-direction: column; } .kwb-card--featured .kwb-thumb { flex: none; } .kwb-card--featured .kwb-thumb img { min-height: 0; aspect-ratio: 16 / 10; } .kwb-card--featured .kwb-body { padding: var(--space-m); } }

/* Article */
body.kw-page .blog { color: var(--ink); font-family: var(--body); padding: var(--space-xl) 0 var(--space-3xl); }
body.kw-page .blog .container { max-width: var(--wrap); width: min(100% - 2 * var(--gutter), var(--wrap)); margin: 0 auto; padding: 0; }
body.kw-page .kwb-hero { margin: var(--space-s) 0 var(--space-l); }
body.kw-page .kwb-hero .chip, body.kw-page .kwb-mcard .chip { display: inline-block; padding: .15rem .6rem; border-radius: 999px; font-size: 12px; font-weight: 600; border: 1px solid var(--indigo); color: var(--indigo-deep); margin-bottom: var(--space-s); }
body.kw-page .kwb-mcard .chip { margin-bottom: 0; }
body.kw-page .kwb-hero h1 { font-family: var(--display); font-size: clamp(2rem, 1.3rem + 2.2vw, 3rem); line-height: 1.08; font-weight: 700; letter-spacing: -0.03em; color: var(--ink); margin: 0 0 var(--space-s); }
body.kw-page .kwb-hero .meta { color: var(--ink-2); font-size: var(--step--1); }
body.kw-page .kwb-hero .rule { height: 2px; border: 0; margin: var(--space-m) 0 0; background: var(--ink); }
body.kw-page #article-body, body.kw-page .blog__body { color: var(--ink); font-size: var(--step-0); line-height: 1.7; }
body.kw-page #article-body p, body.kw-page .blog__body p, body.kw-page #article-body li, body.kw-page .blog__body li { color: var(--ink) !important; }
body.kw-page #article-body p { margin: 0 0 var(--space-s); }
body.kw-page #article-body h2 { font-family: var(--display); color: var(--ink); margin: var(--space-xl) 0 var(--space-s); font-weight: 700; font-size: var(--step-2); letter-spacing: -0.02em; line-height: 1.15; }
body.kw-page #article-body h3 { font-family: var(--display); color: var(--ink); margin: var(--space-l) 0 var(--space-xs); font-weight: 700; font-size: var(--step-1); letter-spacing: -0.02em; }
body.kw-page #article-body b, body.kw-page #article-body strong { color: var(--ink); font-weight: 600; }
body.kw-page #article-body a { color: var(--indigo-deep); text-decoration: underline; text-underline-offset: .2em; }
body.kw-page #article-body a.definition-link { text-decoration-style: dotted; }
body.kw-page #article-body ul { padding-left: 1.2em; list-style: disc; margin: 0 0 var(--space-s); }
body.kw-page #article-body ol { padding-left: 1.2em; list-style: decimal; margin: 0 0 var(--space-s); }
body.kw-page #article-body li { margin-bottom: .5em; }
body.kw-page #article-body li::marker { color: var(--indigo); }
body.kw-page #article-body blockquote { margin: var(--space-m) 0; padding-left: var(--space-m); border-left: 3px solid var(--indigo); color: var(--ink); }
body.kw-page #article-body .table-wrap { overflow-x: auto; margin: var(--space-m) 0; border: 1px solid var(--line); border-radius: 8px; background: var(--paper-2); }
body.kw-page #article-body table { width: 100%; min-width: 560px; border-collapse: separate; border-spacing: 0; font-size: var(--step--1); margin: 0; }
body.kw-page #article-body th, body.kw-page #article-body td { border-bottom: 1px solid var(--line); padding: .8rem 1rem; text-align: left; vertical-align: top; }
body.kw-page #article-body th { background: var(--paper); color: var(--ink); font-family: var(--display); font-weight: 700; border-bottom: 2px solid var(--ink); }
body.kw-page #article-body tbody tr:last-child td { border-bottom: 0; }
body.kw-page #article-body tbody td:first-child { font-weight: 600; }
body.kw-page .blog img { border-radius: 8px; }
body.kw-page .blog__post img { border: 1px solid var(--line); }
body.kw-page #article-toc a { color: var(--ink-2); }
body.kw-page #article-toc a:hover { color: var(--ink); }
body.kw-page #article-toc p { color: var(--ink-2); }
body.kw-page #article-toc ol { border-left: 2px solid var(--line); }
body.kw-page .kwb-cta { background: var(--indigo); border-radius: 12px; padding: var(--space-xl) var(--space-l); text-align: left; color: #fff; }
body.kw-page .kwb-cta .t { font-family: var(--display); font-size: var(--step-2); font-weight: 700; color: #fff; margin: 0 0 .5rem; letter-spacing: -0.02em; line-height: 1.15; max-width: 24ch; }
body.kw-page .kwb-cta .s { color: rgba(255,255,255,.9); margin: 0 0 var(--space-m); font-size: var(--step-0); max-width: 52ch; }
body.kw-page .kwb-cta .b { display: inline-flex; background: var(--paper); color: var(--indigo-deep); font-family: var(--display); font-weight: 700; padding: .95rem 1.5rem; border-radius: 6px; text-decoration: none; }
body.kw-page .kwb-cta .b:hover { background: #fff; transform: none; }
body.kw-page .kwb-more { margin: var(--space-3xl) 0 0; }
body.kw-page .kwb-more .head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-m); margin-bottom: var(--space-l); flex-wrap: wrap; }
body.kw-page .kwb-more h2 { font-family: var(--display); font-size: var(--step-3); font-weight: 700; letter-spacing: -0.03em; color: var(--ink); margin: 0; }
body.kw-page .kwb-more .all { color: var(--indigo-deep); font-weight: 600; font-size: var(--step--1); text-decoration: underline; text-underline-offset: .25em; }
body.kw-page .kwb-more .grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-m); align-items: stretch; }
body.kw-page .kwb-mcard { display: flex; flex-direction: column; gap: .6rem; background: var(--paper-2); border: 1px solid var(--line); border-radius: 10px; padding: var(--space-m); text-decoration: none; transition: transform .25s var(--ease-out); }
body.kw-page .kwb-mcard:hover { transform: translateY(-3px); }
body.kw-page .kwb-mcard .t { font-family: var(--display); font-size: var(--step-0); line-height: 1.25; font-weight: 700; color: var(--ink); margin: 0; letter-spacing: -0.01em; }
body.kw-page .kwb-mcard .s { color: var(--ink-2); font-size: var(--step--1); line-height: 1.5; margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
body.kw-page .kwb-mcard .m { color: var(--ink-2); font-size: 12.5px; margin-top: auto; padding-top: .4rem; }
body.kw-page .kwb-mcard .r { color: var(--indigo-deep); font-size: var(--step--1); font-weight: 600; text-decoration: underline; text-underline-offset: .25em; }
body.kw-page .blog .bg-accentLight { border-radius: 10px; }
@media (max-width: 960px) { body.kw-page .kwb-more .grid3 { grid-template-columns: 1fr; } }

/* ==========================================================================
   Glossary, legal and other Tailwind-based pages under body.kw-page
   ========================================================================== */
body:where(.kw-page) :where(main, section) { font-family: var(--body); color: var(--ink); }
body:where(.kw-page) :where(.heading-1, .heading-2) { font-family: var(--display); color: var(--ink); letter-spacing: -0.03em; font-weight: 700; }
body.kw-page .heading-1 { font-size: var(--step-4); line-height: 1.05; }
body.kw-page .heading-2 { font-size: var(--step-3); line-height: 1.1; }
body.kw-page .bg-primary { background: var(--indigo) !important; color: #fff !important; }
body.kw-page .bg-primary .text-white, body.kw-page .bg-primary p, body.kw-page .bg-primary h2, body.kw-page .bg-primary h3 { color: #fff !important; }
body.kw-page .bg-primary a.button, body.kw-page .bg-primary .button--primary, body.kw-page .bg-primary .button--secondary { background: var(--paper); color: var(--indigo-deep); }
body.kw-page .border-violet, body.kw-page .border-violet-500 { border-color: var(--indigo) !important; }
body.kw-page .text-violet-600 { color: var(--indigo-deep) !important; }
body.kw-page .bg-violet-500\/10 { background: rgba(96,96,240,.1) !important; }
body.kw-page input[type="text"], body.kw-page input[type="search"], body.kw-page input[type="email"], body.kw-page textarea { background: var(--paper-2); border: 1px solid var(--line) !important; color: var(--ink); padding: .65rem 1rem; border-radius: 6px; font-family: inherit; }
body.kw-page input::placeholder { color: var(--ink-2); }
body.kw-page .button, body.kw-page .button--primary { background: var(--ink); color: var(--paper); border-radius: 6px; padding: .7rem 1.2rem; font-family: var(--display); font-weight: 700; letter-spacing: 0; font-size: var(--step--1); text-transform: none; border: 0; }
body.kw-page .button:hover, body.kw-page .button--primary:hover { background: var(--indigo); color: #fff; }
body.kw-page .rounded-2xl, body.kw-page .rounded-3xl { border-radius: 10px !important; }
body.kw-page .rounded-full { border-radius: 999px !important; }
body.kw-page .blog__body p, body.kw-page .blog__body li { color: var(--ink); }
body.kw-page .blog__body a { color: var(--indigo-deep); text-decoration: underline; }
body.kw-page .blog__body h2 { font-family: var(--display); font-weight: 700; letter-spacing: -0.02em; font-size: var(--step-2); margin: var(--space-l) 0 var(--space-xs); color: var(--ink); }
body.kw-page .blog__body h3 { font-family: var(--display); font-weight: 700; font-size: var(--step-1); margin: var(--space-m) 0 var(--space-xs); color: var(--ink); }
body.kw-page .blog__body ul { list-style: disc; padding-left: 1.2em; }
body.kw-page .blog__body li::marker { color: var(--indigo); }
body.kw-page .def-faqs .container { padding: 0 !important; max-width: 100% !important; width: 100%; }
body.kw-page .def-faqs h2 { font-family: var(--display); font-size: var(--step-1); margin: 0; font-weight: 700; }
body.kw-page .def-faqs dl { margin-top: var(--space-s); border-top: 2px solid var(--ink); }
body.kw-page .def-faqs .faq__container { border-bottom: 1px solid var(--line); padding: var(--space-s) 0; }
body.kw-page .def-faqs .faq__question span { color: var(--ink) !important; font-family: var(--display); font-size: var(--step-0); font-weight: 700; }
body.kw-page .def-faqs .faq__answer, body.kw-page .def-faqs .faq__answer p { color: var(--ink-2); font-size: var(--step--1); }
body.kw-page .def-faqs .divide-gray-900\/10 > * { border-color: var(--line) !important; }
/* Legal pages */
body.kw-page .legal { max-width: 72ch; margin: 0; padding: var(--space-2xl) 0 var(--space-3xl); }
body.kw-page .legal h1, body.kw-page .legal .heading-1 { font-family: var(--display); color: var(--ink); letter-spacing: -0.03em; font-size: var(--step-4); line-height: 1.05; margin: 0 0 var(--space-m); font-weight: 700; }
body.kw-page .legal .updated { color: var(--ink-2); font-size: var(--step--1); margin: 0 0 var(--space-l); }
body.kw-page .legal h2 { font-family: var(--display); color: var(--ink); letter-spacing: -0.02em; font-size: var(--step-2); margin: var(--space-xl) 0 var(--space-s); font-weight: 700; }
body.kw-page .legal h3 { font-family: var(--display); color: var(--ink); font-size: var(--step-1); margin: var(--space-l) 0 var(--space-xs); font-weight: 700; }
body.kw-page .legal p, body.kw-page .legal li { color: var(--ink-2); font-size: var(--step-0); line-height: 1.65; }
body.kw-page .legal p { margin: 0 0 var(--space-s); }
body.kw-page .legal ul { padding-left: 1.2em; margin: 0 0 var(--space-s); list-style: disc; }
body.kw-page .legal li::marker { color: var(--indigo); }
body.kw-page .legal a { color: var(--indigo-deep); text-decoration: underline; }
body.kw-page .legal b, body.kw-page .legal strong { color: var(--ink); font-weight: 600; }
body.kw-page .legal table { width: 100%; border-collapse: collapse; font-size: var(--step--1); margin: var(--space-m) 0; }
body.kw-page .legal th, body.kw-page .legal td { border-bottom: 1px solid var(--line); padding: .7rem .8rem; text-align: left; vertical-align: top; color: var(--ink-2); }
body.kw-page .legal th { font-family: var(--display); font-weight: 700; color: var(--ink); border-bottom: 2px solid var(--ink); }

/* ---------- Contact, search, glossary definition box ---------- */
.contactGrid { list-style: none; margin: 0 0 var(--space-xl); padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-l); border-top: 2px solid var(--ink); }
.contactGrid li { padding-top: var(--space-m); }
.contactGrid .t { display: block; font-family: var(--display); font-weight: 700; margin-bottom: .4rem; }
.contactGrid a { color: var(--ink-2); text-decoration: none; } .contactGrid a:hover { color: var(--indigo-deep); text-decoration: underline; }
.searchList { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink); max-width: var(--measure); }
.searchList li { padding: var(--space-m) 0; border-bottom: 1px solid var(--line); }
.searchList a { color: var(--ink); text-decoration: none; font-family: var(--display); font-size: var(--step-1); } .searchList a:hover { color: var(--indigo-deep); text-decoration: underline; }
.searchList p { color: var(--ink-2); margin-top: .4rem; font-size: var(--step--1); }
.searchPager { display: flex; gap: var(--space-m); margin-top: var(--space-l); }
body.kw-page .defBox { background: var(--indigo); color: #fff; }
body.kw-page .defBox p, body.kw-page .defBox dfn { color: #fff !important; }
body.kw-page .defBox dfn { font-family: var(--display); font-weight: 700; font-size: var(--step-1); letter-spacing: -0.02em; line-height: 1.3; }
@media (max-width: 960px) { .contactGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Landing hero: copy left, real captures right, on the indigo band ---------- */
body.kw-page .kwl-hero { background: var(--indigo); color: #fff; padding: var(--space-2xl) 0 0; overflow: hidden; }
body.kw-page .kwl-heroGrid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--space-2xl); align-items: center; }
body.kw-page .kwl-heroCopy { padding-bottom: var(--space-2xl); }
body.kw-page .kwl-heroCopy .container { width: 100%; }
body.kw-page .kwl-hero h6 { font-family: var(--display); font-size: var(--step--1); font-weight: 700; color: rgba(255,255,255,.8); margin: 0 0 var(--space-s); text-transform: none; letter-spacing: 0; }
body.kw-page .kwl-hero h1 { font-family: var(--display); font-size: clamp(2.2rem, 1.4rem + 2.6vw, 3.4rem); line-height: 1.05; letter-spacing: -0.03em; font-weight: 700; color: #fff; max-width: 20ch; margin: 0 0 var(--space-m); }
body.kw-page .kwl-hero h1 em, body.kw-page .kwl-hero h1 i { font-style: normal; }
body.kw-page .kwl-hero .block-rich_text p { color: rgba(255,255,255,.9); font-size: var(--step-0); line-height: 1.5; max-width: 52ch; margin: 0 0 var(--space-s); }
body.kw-page .kwl-hero .block-rich_text a { color: #fff !important; text-decoration: underline; text-underline-offset: .2em; display: inline !important; background: none !important; padding: 0 !important; font-weight: inherit !important; }
body.kw-page .kwl-hero .block-rich_text a::after { content: none !important; }
body.kw-page .kwl-hero .block-cta .container { padding: var(--space-s) 0 0; }
body.kw-page .kwl-hero .block-cta .bg-primary { background: transparent !important; padding: 0 !important; display: block; }
body.kw-page .kwl-hero .block-cta h2, body.kw-page .kwl-hero .block-cta .text-white { display: none; }
body.kw-page .kwl-hero .block-cta a.call-to-action { display: inline-flex; align-items: center; justify-content: center; font-family: var(--display); font-weight: 700; font-size: var(--step-0); background: var(--paper) !important; color: var(--indigo-deep) !important; padding: .95rem 1.5rem; border-radius: 6px; text-decoration: none; border: 0; }
body.kw-page .kwl-hero .block-cta a.call-to-action:hover { background: #fff !important; transform: none; }
body.kw-page .kwl-hero .block-cta + .block-rich_text p { font-size: var(--step--1); color: rgba(255,255,255,.8); margin-top: var(--space-m); }
body.kw-page .kwl-hero .block-heading .container, body.kw-page .kwl-hero .block-rich_text .container { padding: 0; }
body.kw-page .kwl-heroMedia { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-m); align-self: end; align-items: end; padding-top: var(--space-l); }
body.kw-page .kwl-heroMedia img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: top; border-radius: 8px 8px 0 0; background: #fff; box-shadow: 0 24px 60px -30px rgba(0,0,0,.45); }
body.kw-page .kwl-heroMedia img:nth-child(2) { aspect-ratio: 4 / 6.2; }
body.kw-page .kwl-heroMedia img:nth-child(3) { display: none; }
@media (max-width: 960px) {
  body.kw-page .kwl-heroGrid { grid-template-columns: 1fr; gap: var(--space-l); }
  body.kw-page .kwl-heroCopy { padding-bottom: 0; }
}

/* ---------- Testimonials: cards ---------- */
.reviews { background: var(--paper); }
.quotes { gap: var(--space-m); }
.quotes li { border-top: 0; padding: var(--space-l); background: var(--paper-2); border: 1px solid var(--line); border-radius: 10px; }
.quotes .stars { display: flex; align-items: center; gap: .6rem; font-size: var(--step--1); letter-spacing: .08em; margin-bottom: var(--space-m); }
.quotes .stars::after { content: "Google"; font-family: var(--display); font-weight: 700; letter-spacing: 0; font-size: 12px; color: var(--ink-2); }
.quotes li > p:not(.stars) { font-family: var(--display); font-weight: 500; font-size: var(--step-1); line-height: 1.35; letter-spacing: -0.01em; color: var(--ink); }
.quotes .who { margin-top: var(--space-l); padding-top: var(--space-m); border-top: 1px solid var(--line); }
.quotes .who img { width: 52px; height: 52px; }
body.kw-page .kwl-hero .block-rich_text b, body.kw-page .kwl-hero .block-rich_text strong { color: #fff; font-weight: 700; }
body.kw-page #stream .rich-text, body.kw-page #stream .block-rich_text ul li { text-align: left; }
/* Simulator: included days and gauges */
.simDays { margin-top: var(--space-m); padding-top: var(--space-m); border-top: 1px solid var(--line); }
.simDays b { display: block; font-family: var(--display); font-weight: 700; font-size: var(--step-1); letter-spacing: -0.02em; color: var(--ink); }
.simDays span { display: block; margin-top: .2rem; font-size: var(--step--1); color: var(--ink-2); }
.simGauges { list-style: none; margin: var(--space-m) 0 0; padding: 0; display: grid; gap: .55rem; }
.simGauges li { display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); align-items: center; gap: var(--space-s); font-size: var(--step--1); color: var(--ink-2); }
.simGauges .bar { display: block; height: 8px; border-radius: 999px; background: rgba(29,29,47,.12); overflow: hidden; }
.simGauges .bar i { display: block; height: 100%; width: var(--v, 50%); background: var(--indigo); border-radius: 999px; transition: width .35s var(--ease-out); }
.simWhat { min-height: 0; }
@media (prefers-reduced-motion: reduce) { .simGauges .bar i { transition: none; } }
@media (max-width: 520px) { .simGauges li { grid-template-columns: 1fr; gap: .25rem; } }
/* White text on the indigo comparison column, whatever the generic heading rules say */
.kw .vsKern h3, .kw .vsKern .vsT, .kw .vsKern li { color: #fff; }
.kw .vsKern .vsT, .kw .vsKern li { color: rgba(255,255,255,.9); }

/* ---------- Reviews slider: six cards per view (3 columns x 2 rows), scroll-snap track ---------- */
.revHead { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-l); flex-wrap: wrap; }
.revNav { display: flex; gap: .5rem; }
.revBtn { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: var(--paper-2); color: var(--ink); font-size: 1.1rem; cursor: pointer; transition: background .2s, color .2s; }
.revBtn:hover { background: var(--ink); color: var(--paper); }
.revTrack { display: grid; grid-auto-flow: column; grid-template-rows: 1fr 1fr; grid-auto-columns: calc((100% - 2 * var(--space-m)) / 3); gap: var(--space-m); margin-top: var(--space-xl); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 4px; }
.revTrack::-webkit-scrollbar { display: none; }
.revTrack:focus-visible { outline: 3px solid var(--indigo); outline-offset: 6px; }
.revCard { scroll-snap-align: start; display: flex; flex-direction: column; padding: var(--space-l); background: var(--paper-2); border: 1px solid var(--line); border-radius: 10px; min-width: 0; }
.revCard .stars { display: flex; align-items: center; gap: .6rem; color: var(--indigo); letter-spacing: .08em; font-size: var(--step--1); margin-bottom: var(--space-m); }
.revCard .stars::after { content: "Google"; font-family: var(--display); font-weight: 700; letter-spacing: 0; font-size: 12px; color: var(--ink-2); }
.revCard .q { flex: 1; font-family: var(--display); font-weight: 500; font-size: var(--step-0); line-height: 1.4; letter-spacing: -0.01em; color: var(--ink); }
.revCard .who { display: flex; align-items: center; gap: var(--space-s); margin-top: var(--space-l); padding-top: var(--space-m); border-top: 1px solid var(--line); }
.revCard .who img, .revCard .ini { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; flex: none; }
.revCard .ini { display: inline-flex; align-items: center; justify-content: center; color: #fff; font-family: var(--display); font-weight: 700; font-size: 1rem; letter-spacing: .02em; }
.revCard .who b { display: block; font-weight: 600; }
.revCard .who span { display: block; font-size: var(--step--1); color: var(--ink-2); }
.revCard .who .since { color: var(--indigo-deep); }
@media (max-width: 1100px) { .revTrack { grid-auto-columns: calc((100% - var(--space-m)) / 2); } }
@media (max-width: 700px) { .revTrack { grid-template-rows: 1fr; grid-auto-columns: 100%; } }