/*
  Talents Performance Hub — public site.
  Ported from the design canvas (Talents Public Website, rev 2). Colours and type follow the Performance
  Hub design system: Coastal Teal seed #1A6C7A, tonal surface ladder, IBM Plex Sans / Sans Arabic / Mono.
  Logical properties throughout so the same rules serve Arabic (RTL) and English (LTR).
  No inline styles anywhere in the markup: the page runs under a strict CSP (style-src 'self').
*/

/* ---------- fonts (self-hosted, OFL — see /fonts/OFL.txt) ---------- */
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/ibm-plex-sans-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/ibm-plex-sans-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/ibm-plex-sans-arabic-arabic-400-normal.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FEFC; }
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/ibm-plex-sans-arabic-arabic-500-normal.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FEFC; }
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/ibm-plex-sans-arabic-arabic-600-normal.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FEFC; }
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/ibm-plex-sans-arabic-arabic-700-normal.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FEFC; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2"); }

/* ---------- tokens ---------- */
:root {
  --primary: #1A6C7A;
  --on-primary: #FFFFFF;
  --primary-container: #B2EBF8;
  --on-primary-container: #001F26;
  --secondary: #4B6269;
  --secondary-container: #CEE7EF;
  --tertiary: #6C5D31;
  --brand-deep: #00363F;
  --brand-deep-border: #004E5A;
  --brand-accent: #8FD2E2;
  --surface: #F8FAFB;
  --surface-lowest: #FFFFFF;
  --surface-low: #F2F4F5;
  --surface-container: #ECEEF0;
  --surface-high: #E7E9EB;
  --surface-highest: #E1E4E5;
  --on-surface: #191C1E;
  --on-surface-variant: #3F484C;
  --muted: #5C676B;
  --outline: #6F797C;
  --outline-variant: #BFC8CC;
  --info: #31628D;
  --info-container: #D0E4FF;
  --on-info-container: #001D34;
  --warning: #7A5900;
  --error: #BA1A1A;
  --tint-us: #E8F4F7;
  --on-dark: #E4E7E8;
  --on-dark-variant: #BEC6C9;
  --focus: 0 0 0 3px rgba(26, 108, 122, 0.35);
  --font-ar: "IBM Plex Sans Arabic", "IBM Plex Sans", system-ui, sans-serif;
  --font-en: "IBM Plex Sans", "IBM Plex Sans Arabic", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;
  --content: 1312px;
  --gutter: 64px;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--surface); color: var(--on-surface); -webkit-font-smoothing: antialiased; }
html[dir="rtl"] body { font-family: var(--font-ar); line-height: 1.7; }
html[dir="ltr"] body { font-family: var(--font-en); line-height: 1.6; }
html[dir="rtl"] em, html[dir="rtl"] i { font-style: normal; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--primary); }
a:hover { color: var(--brand-deep); }
:focus-visible { outline: none; box-shadow: var(--focus); border-radius: 4px; }
input::placeholder, textarea::placeholder { color: var(--outline); }
.ltr { direction: ltr; unicode-bidi: isolate; font-family: var(--font-en); }
.rtl { direction: rtl; unicode-bidi: isolate; font-family: var(--font-ar); }
.mono { direction: ltr; unicode-bidi: isolate; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.num { font-variant-numeric: tabular-nums; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; inset-inline-start: 16px; top: -48px; background: var(--surface-lowest); padding: 8px 16px; border-radius: 8px; z-index: 60; }
.skip:focus { top: 8px; }

/* ---------- layout ---------- */
.wrap { max-width: var(--content); margin: 0 auto; }
.section { padding: 72px var(--gutter); }
.section--surface { background: var(--surface); }
.section--low { background: var(--surface-low); }
.section--container { background: var(--surface-container); }
.stack { display: flex; flex-direction: column; }
.gap-8 { gap: 8px; } .gap-12 { gap: 12px; } .gap-16 { gap: 16px; } .gap-24 { gap: 24px; } .gap-32 { gap: 32px; } .gap-40 { gap: 40px; } .gap-56 { gap: 56px; }
.grid { display: grid; gap: 24px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.grid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.grid-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
.grid-demo { grid-template-columns: 1.6fr 1fr; gap: 32px; align-items: start; }
.cluster { display: flex; flex-wrap: wrap; gap: 8px; }
.mt-auto { margin-top: auto; }

/* ---------- section heads ---------- */
.head { display: flex; flex-direction: column; gap: 16px; max-width: 840px; }
.overline { margin: 0; font-size: 13px; font-weight: 600; color: var(--primary); }
html[dir="ltr"] .overline { text-transform: uppercase; letter-spacing: 0.06em; }
.h1 { margin: 0; font-size: 60px; line-height: 1.3; font-weight: 600; color: #FFFFFF; }
html[dir="ltr"] .h1 { line-height: 1.12; letter-spacing: -0.01em; }
.h2 { margin: 0; font-size: 40px; line-height: 1.35; font-weight: 600; color: var(--on-surface); }
html[dir="ltr"] .h2 { line-height: 1.2; letter-spacing: -0.01em; }
.h3 { margin: 0; font-size: 22px; line-height: 1.4; font-weight: 600; color: var(--on-surface); }
.h3--lg { font-size: 28px; }
.lead { margin: 0; font-size: 18px; line-height: 1.75; color: var(--on-surface-variant); }
.body { margin: 0; font-size: 15px; line-height: 1.75; color: var(--on-surface-variant); }
.body--16 { font-size: 16px; }
.small { font-size: 13px; color: var(--muted); }

/* ---------- header ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--brand-deep); border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.site-header__inner { max-width: var(--content); margin: 0 auto; padding: 0 var(--gutter); min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--on-dark); }
.brand:hover { color: #FFFFFF; }
/* Transparent: the mark sits directly on the surface (product-owner decision 2026-10-09). */
.brand__tile { width: 40px; height: 40px; border-radius: 10px; background: transparent; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.brand__tile--sm { width: 36px; height: 36px; border-radius: 9px; }
.brand__text { display: flex; flex-direction: column; line-height: 1.25; }
.brand__name { font-weight: 600; font-size: 17px; color: #FFFFFF; }
.brand__sub { font-size: 12px; color: var(--on-dark-variant); }
.nav { display: flex; gap: 24px; font-size: 15px; font-weight: 500; }
.nav a { color: var(--on-dark); text-decoration: none; }
.nav a:hover { color: #FFFFFF; }
.header-actions { display: flex; align-items: center; gap: 12px; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 24px; border-radius: 999px; text-decoration: none; font: inherit; font-weight: 600; font-size: 15px; cursor: pointer; border: 0; }
.btn--lg { min-height: 52px; padding: 0 28px; font-size: 16px; }
.btn--sm { min-height: 44px; padding: 0 20px; font-size: 14px; }
.btn--accent { background: var(--primary-container); color: var(--on-primary-container); }
.btn--accent:hover { color: var(--on-primary-container); background: #9FE3F3; }
.btn--primary { background: var(--primary); color: var(--on-primary); }
.btn--primary:hover { color: var(--on-primary); background: #155C68; }
.btn--primary:disabled { background: var(--outline-variant); cursor: not-allowed; }
.btn--ghost-dark { border: 1px solid rgba(255, 255, 255, 0.35); color: var(--on-dark); background: transparent; }
.btn--ghost-dark:hover { color: #FFFFFF; border-color: rgba(255, 255, 255, 0.6); }
.btn--outline { border: 1px solid var(--outline-variant); color: var(--primary); background: transparent; }
.lang-switch { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 40px; padding: 0 12px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.3); color: var(--on-dark); text-decoration: none; font-size: 13px; font-weight: 600; }
.lang-switch:hover { color: #FFFFFF; }

/* ---------- chips ---------- */
.chip { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px; border-radius: 8px; font-size: 13px; font-weight: 500; }
.chip--primary { background: var(--primary-container); color: var(--on-primary-container); align-self: flex-start; }
.chip--neutral { background: var(--surface-container); color: var(--on-surface); }
.chip--info { background: var(--info-container); color: var(--on-info-container); padding: 6px 12px; align-self: flex-start; }
.chip--dark { padding: 6px 12px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.14); color: var(--on-dark); }
.chip--solid { background: var(--primary); color: #FFFFFF; font-weight: 600; }
.dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; flex: none; background: var(--primary); }
.dot--accent { background: var(--brand-accent); }
.dot--info { background: var(--info); }
.sym-full { color: var(--primary); }
.sym-partial { color: var(--secondary); }
.sym-none { color: var(--outline); }
.warn { font-weight: 600; color: var(--warning); }

/* ---------- hero ---------- */
.hero { background: var(--brand-deep); color: var(--on-dark); padding: 64px var(--gutter) 72px; }
.hero__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; align-items: center; }
.hero__overline { margin: 0; font-size: 14px; font-weight: 600; color: var(--brand-accent); }
.hero__lead { margin: 0; font-size: 19px; line-height: 1.8; color: var(--on-dark-variant); max-width: 60ch; }
html[dir="ltr"] .hero__lead { line-height: 1.6; }
.hero__chips { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.hero__figure { margin: 0; display: flex; flex-direction: column; gap: 12px; }
.hero__frame { border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 16px; overflow: hidden; background: var(--surface); box-shadow: 0 16px 48px rgba(0, 0, 0, 0.32); }
.hero__caption { font-size: 13px; color: var(--on-dark-variant); display: flex; align-items: center; gap: 8px; }

/* ---------- screenshot placeholder ---------- */
.shot { aspect-ratio: 1800 / 1040; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 24px; text-align: center; background: repeating-linear-gradient(135deg, var(--surface-low) 0 12px, var(--surface-container) 12px 24px); color: var(--on-surface-variant); }
.shot--tile { aspect-ratio: 16 / 9; padding: 12px; }
.shot__label { font-size: 13px; font-weight: 600; color: var(--primary); }
.shot__desc { font-size: 13px; line-height: 1.6; max-width: 46ch; }
.shot--tile .shot__desc { display: none; }
.shot--img { padding: 0; width: 100%; height: auto; object-fit: cover; object-position: top; background: var(--surface-lowest); }

/* ---------- cards ---------- */
.card { background: var(--surface-lowest); border: 1px solid var(--surface-highest); border-radius: 12px; padding: 28px; display: flex; flex-direction: column; gap: 16px; }
.card--24 { padding: 24px; gap: 8px; }
.card--20 { padding: 20px; gap: 6px; }
.card--dark { background: var(--brand-deep); border-color: var(--brand-deep-border); color: var(--on-dark); gap: 10px; }
.card__title { font-size: 17px; font-weight: 600; color: var(--on-surface); }
.card__title--16 { font-size: 16px; }
.card__label { font-size: 13px; font-weight: 600; color: var(--primary); }
.card__label--tertiary { color: var(--tertiary); }
.card__label--dark { color: var(--brand-accent); }
.card__value { font-size: 17px; font-weight: 500; color: var(--on-surface); text-decoration: none; }
.card__text { font-size: 14px; line-height: 1.75; color: var(--on-surface-variant); }
html[dir="ltr"] .card__text { line-height: 1.6; }
.artefact { margin-top: auto; background: var(--surface-low); border: 1px solid var(--surface-high); border-radius: 8px; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.artefact--plain { margin-top: 0; padding: 14px; gap: 4px; }
.artefact__title { font-size: 14px; font-weight: 600; color: var(--on-surface); }
.artefact__text { font-size: 13px; line-height: 1.7; color: var(--on-surface-variant); }
.sample-type { font-size: 28px; line-height: 1.4; font-weight: 600; color: var(--on-surface); }
.sample-type .sep { color: var(--primary); }
.formula { font-size: 14px; color: var(--on-surface); text-align: start; }
.weights { display: flex; height: 10px; border-radius: 999px; overflow: hidden; background: var(--surface-highest); direction: ltr; }
.weights span:nth-child(1) { flex: 0 0 30%; background: var(--primary); }
.weights span:nth-child(2) { flex: 0 0 30%; background: var(--secondary); }
.weights span:nth-child(3) { flex: 0 0 40%; background: var(--tertiary); }
.weights-legend { display: flex; justify-content: space-between; font-size: 12px; color: var(--on-surface-variant); }
.mini-matrix { display: grid; grid-template-columns: 1.6fr repeat(3, minmax(0, 1fr)); gap: 6px; font-size: 12px; color: var(--on-surface-variant); }
.mini-matrix .h { font-weight: 500; color: var(--muted); }
.mini-matrix .c { text-align: center; }
.notice { background: var(--surface-lowest); border: 1px solid var(--surface-highest); border-radius: 8px; padding: 10px 12px; font-size: 13px; line-height: 1.6; color: var(--on-surface); }
.bubble-out { background: var(--surface-lowest); border: 1px solid var(--surface-highest); border-radius: 12px; padding: 12px 16px; font-size: 14px; line-height: 1.7; color: var(--on-surface); max-width: 46ch; }
.flow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; color: var(--on-surface-variant); }
.flow .step { padding: 4px 12px; border-radius: 8px; background: var(--surface-container); }
.flow .step.chip--solid { background: var(--primary); }
.box { background: var(--surface-low); border: 1px solid var(--surface-high); border-radius: 8px; padding: 16px; display: flex; flex-direction: column; gap: 6px; }
.box__title { font-size: 15px; font-weight: 600; color: var(--on-surface); }
.link-strong { font-size: 13px; font-weight: 600; color: var(--primary); text-decoration: none; }

/* ---------- tables (comparison, roles) ---------- */
.scroll-x { overflow-x: auto; }
.matrix { background: var(--surface-lowest); border: 1px solid var(--surface-highest); border-radius: 12px; overflow: hidden; border-collapse: separate; border-spacing: 0; width: 100%; }
.matrix--compare { min-width: 960px; font-size: 14px; line-height: 1.6; }
.matrix--roles { min-width: 620px; font-size: 13px; line-height: 1.5; }
.matrix th, .matrix td { padding: 16px; text-align: start; vertical-align: top; border-top: 1px solid var(--surface-high); }
.matrix thead th { background: var(--surface-container); font-size: 13px; font-weight: 600; color: var(--on-surface-variant); border-top: 0; padding: 14px 16px; }
html[dir="ltr"] .matrix--compare thead th { font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; }
.matrix tbody th { font-weight: 500; color: var(--on-surface); padding-inline: 20px; }
.matrix--compare td + td, .matrix--compare th + td, .matrix--compare thead th + th { border-inline-start: 1px solid var(--surface-high); }
.matrix--compare td { color: var(--on-surface-variant); }
.matrix--compare thead th.us { background: var(--primary); color: #FFFFFF; text-transform: none; letter-spacing: 0; }
.matrix--compare td.us { background: var(--tint-us); color: var(--on-primary-container); font-weight: 500; }
.matrix--roles th, .matrix--roles td { padding: 12px 10px; vertical-align: middle; }
.matrix--roles tbody th { padding-inline: 16px; }
.matrix--roles thead th { font-size: 12px; padding: 12px 10px; }
.matrix--roles thead th:not(:first-child), .matrix--roles td { text-align: center; }
.header-cta__short { display: none; }
.legend { display: flex; flex-wrap: wrap; gap: 20px; font-size: 13px; color: var(--on-surface-variant); }
.legend .note { color: var(--muted); }

/* ---------- feature rows and tiles ---------- */
.feat { display: flex; gap: 48px; align-items: center; }
.feat--reverse { flex-direction: row-reverse; }
.feat__text { flex: 0 0 38%; display: flex; flex-direction: column; gap: 16px; }
.feat__media { flex: 1 1 0; min-width: 0; margin: 0; border: 1px solid var(--surface-highest); border-radius: 12px; overflow: hidden; background: var(--surface-lowest); }
.tile { text-decoration: none; color: inherit; background: var(--surface-lowest); border: 1px solid var(--surface-highest); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; }
.tile:hover { color: inherit; border-color: var(--outline-variant); }
.tile__body { padding: 16px; display: flex; flex-direction: column; gap: 6px; }
.tile__title { font-size: 16px; font-weight: 600; color: var(--on-surface); }
.tile__text { font-size: 13px; line-height: 1.7; color: var(--on-surface-variant); }
.tile .shot { border-bottom: 1px solid var(--surface-high); }

/* ---------- privacy band ---------- */
.band { background: var(--secondary-container); border: 1px solid var(--primary-container); border-radius: 16px; padding: 32px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; align-items: start; color: var(--on-primary-container); }
.band__title { font-size: 22px; font-weight: 600; }
.band__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 15px; }
.band__list li { display: flex; align-items: center; gap: 10px; }
.band__body { margin: 0; font-size: 15px; line-height: 1.8; }

/* ---------- assistant ---------- */
.chat { background: var(--surface-lowest); border: 1px solid var(--surface-highest); border-radius: 16px; padding: 24px; display: flex; flex-direction: column; gap: 16px; }
.msg { display: flex; flex-direction: column; gap: 6px; }
.msg--user { align-items: flex-end; }
.msg--bot { align-items: flex-start; }
.msg__bubble { border-radius: 12px; padding: 10px 14px; font-size: 15px; max-width: 80%; }
.msg--user .msg__bubble { background: var(--primary-container); color: var(--on-primary-container); border-end-end-radius: 4px; }
.msg--bot .msg__bubble { background: var(--surface-low); color: var(--on-surface); line-height: 1.7; max-width: 88%; padding: 12px 14px; border-end-start-radius: 4px; }
.msg__tool { font-size: 12px; color: var(--muted); }
.steps { display: flex; flex-direction: column; gap: 10px; }
.step-card { display: flex; align-items: center; gap: 12px; background: var(--surface-lowest); border: 1px solid var(--surface-highest); border-radius: 12px; padding: 14px 18px; font-size: 15px; color: var(--on-surface); }
.step-card--final { background: var(--primary); border-color: var(--primary); color: #FFFFFF; font-size: 16px; font-weight: 600; padding: 16px 18px; }
.step-card__n { width: 28px; height: 28px; border-radius: 50%; background: var(--surface-container); color: var(--on-surface); display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; flex: none; }
.step-card--final .step-card__n { background: var(--primary-container); color: var(--on-primary-container); }
.step-arrow { align-self: center; color: var(--outline); line-height: 1; }

/* ---------- pricing ---------- */
/* Cards share their parent's row tracks (subgrid), so name, price, features and button line up across
   every card in a row and all cards in a row are the same height. Column count follows the plan count. */
.plans { display: grid; grid-template-columns: repeat(var(--plan-cols, 3), minmax(0, 1fr)); column-gap: 24px; row-gap: 24px; align-items: stretch; }
.plans--1 { --plan-cols: 1; max-width: 420px; }
.plans--2 { --plan-cols: 2; }
.plans--3 { --plan-cols: 3; }
.plans--4 { --plan-cols: 4; }
.plan { position: relative; display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 24px; background: var(--surface-lowest); border: 1px solid var(--surface-highest); border-radius: 16px; padding: 32px 28px; }
.plan--highlight { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary), 0 12px 32px rgba(0, 54, 63, 0.10); }
.plan__head { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
/* Sits on the card's top edge so the highlighted plan's name stays level with the others. */
.plan__badge { position: absolute; top: -13px; inset-inline-start: 28px; display: inline-flex; align-items: center; min-height: 26px; padding: 0 12px; border-radius: 999px; background: var(--primary); color: #FFFFFF; font-size: 12px; font-weight: 600; }
.plan__name { margin: 0; font-size: 22px; font-weight: 600; line-height: 1.4; color: var(--on-surface); }
.plan__seats { font-size: 14px; color: var(--on-surface-variant); }
.plan__price-block { display: flex; flex-direction: column; gap: 6px; padding-bottom: 24px; border-bottom: 1px solid var(--surface-highest); }
.plan__price { font-size: 32px; font-weight: 600; color: var(--on-surface); line-height: 1.2; }
.plan__price-sub { font-size: 14px; color: var(--on-surface-variant); }
.plan__features { display: flex; flex-direction: column; gap: 12px; }
.plan__list-title { font-size: 13px; font-weight: 600; color: var(--muted); }
.plan__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: 14px; line-height: 1.7; color: var(--on-surface); }
.plan__list li { display: flex; gap: 10px; }
.plan__cta { align-self: end; width: 100%; justify-content: center; }
.tick { color: var(--primary); flex: none; }

/* ---------- demo form ---------- */
.form { background: var(--surface-lowest); border: 1px solid var(--surface-highest); border-radius: 16px; padding: 32px; display: flex; flex-direction: column; gap: 20px; }
.fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 20px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label, .field legend, .fieldset legend { font-size: 14px; font-weight: 500; color: var(--on-surface); padding: 0; }
.input { width: 100%; height: 48px; padding: 0 14px; border: 1px solid var(--outline); border-radius: 4px; font: inherit; font-size: 15px; line-height: 1.5; color: var(--on-surface); background-color: var(--surface-lowest); }
.input:hover { border-color: var(--on-surface-variant); }
.input:focus-visible { border-color: var(--primary); }
.input--ltr { direction: ltr; text-align: left; }
textarea.input { height: auto; min-height: 96px; padding-block: 12px; line-height: 1.7; resize: vertical; }
/* Lists match the text inputs: no native widget chrome, one chevron at the inline end in either direction. */
select.input { appearance: none; cursor: pointer; padding-inline-end: 40px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%233F484C' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 12px 8px; }
select.input:dir(rtl) { background-position: left 14px center; }
.req { color: var(--error); font-weight: 600; margin-inline-start: 2px; }
.required-note { margin: 0; font-size: 13px; color: var(--muted); }
.field-error { margin: 0; font-size: 13px; line-height: 1.6; color: var(--error); }
.input[aria-invalid="true"], .input[aria-invalid="true"]:hover { border-color: var(--error); box-shadow: inset 0 0 0 1px var(--error); }
.consent input[aria-invalid="true"] { outline: 2px solid var(--error); outline-offset: 2px; }
.phone { display: flex; gap: 8px; direction: ltr; }
.phone select { flex: 0 0 120px; }
.help { font-size: 13px; line-height: 1.6; color: var(--muted); }
.fieldset { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.toggle-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border: 1px solid var(--outline-variant); background: var(--surface-lowest); border-radius: 999px; font-size: 14px; color: var(--on-surface); cursor: pointer; }
.toggle-chip:has(input:checked) { border-color: var(--primary); background: var(--secondary-container); color: var(--on-primary-container); }
.toggle-chip input, .radio input, .consent input { accent-color: var(--primary); width: 16px; height: 16px; margin: 0; }
.radios { display: flex; gap: 16px; font-size: 15px; }
.radio { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; }
.consent { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.7; color: var(--on-surface-variant); }
.consent input { margin-top: 5px; }
.submit-row { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; font-size: 14px; color: var(--muted); }
.aside-accent { background: var(--secondary-container); border: 1px solid var(--primary-container); border-radius: 16px; padding: 24px; display: flex; flex-direction: column; gap: 14px; color: var(--on-primary-container); }
.aside-accent__title { font-size: 18px; font-weight: 600; }
.ticks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: 14px; line-height: 1.7; }
.ticks li { display: flex; gap: 10px; }

/* ---------- footer ---------- */
.site-footer { background: var(--brand-deep); color: var(--on-dark-variant); padding: 56px var(--gutter) 32px; }
.footer-grid { display: grid; grid-template-columns: 2fr repeat(4, minmax(0, 1fr)); gap: 32px; }
.footer-col { display: flex; flex-direction: column; gap: 4px; }
.footer-col__title { font-size: 13px; font-weight: 600; color: #FFFFFF; margin-bottom: 6px; }
.footer-col a, .footer-col span.item { color: var(--on-dark-variant); text-decoration: none; font-size: 14px; line-height: 2; }
.footer-col a:hover { color: #FFFFFF; }
.footer-col .current { color: #FFFFFF; }
.footer-tagline { margin: 0; font-size: 14px; line-height: 1.75; max-width: 40ch; }
.footer-bottom { border-top: 1px solid rgba(255, 255, 255, 0.12); padding-top: 24px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-size: 13px; }

/* ---------- back to top ---------- */
.to-top { position: fixed; bottom: 24px; inset-inline-end: 24px; z-index: 40; width: 48px; height: 48px; border-radius: 50%; background: var(--brand-deep); color: #FFFFFF; display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgba(255, 255, 255, 0.2); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25); text-decoration: none; }
.to-top:hover { color: #FFFFFF; background: var(--primary); }

/* ---------- legal pages ---------- */
.legal-hero { background: var(--brand-deep); padding: 56px var(--gutter) 48px; }
.legal-hero__title { margin: 0; font-size: 44px; line-height: 1.3; font-weight: 600; color: #FFFFFF; }
.legal-hero__meta { margin: 0; font-size: 14px; color: var(--on-dark-variant); }
.legal { max-width: 760px; display: flex; flex-direction: column; gap: 40px; }
.legal__section { display: flex; flex-direction: column; gap: 12px; }
.legal__list { margin: 0; padding-inline-start: 22px; display: flex; flex-direction: column; gap: 8px; font-size: 16px; line-height: 1.75; color: var(--on-surface-variant); }
.legal__list li::marker { color: var(--primary); }
.inline-link { color: var(--primary); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.ltr.inline-link { display: inline-block; }
/* An unconfigured legal fact (Storefront:Legal): visible on purpose until legal review fills it. */
mark.placeholder { background: #FFF1C2; color: var(--warning); border-radius: 4px; padding: 0 4px; font-weight: 600; }

/* ---------- key messages band (under the hero) ---------- */
.messages { background: var(--surface); padding: 48px var(--gutter); border-bottom: 1px solid var(--surface-highest); }
.messages__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.message { display: flex; flex-direction: column; gap: 12px; background: var(--surface-lowest); border: 1px solid var(--surface-highest); border-radius: 16px; padding: 28px; }
.message__icon { width: 44px; height: 44px; border-radius: 12px; background: var(--tint-us); color: var(--primary); display: inline-flex; align-items: center; justify-content: center; }
.message__title { margin: 0; font-size: 20px; font-weight: 600; line-height: 1.4; color: var(--on-surface); }
.message__body { margin: 0; font-size: 15px; line-height: 1.8; color: var(--on-surface-variant); }
.message__link { margin-top: auto; padding-top: 4px; }

/* ---------- comparison, collapsed to one line ---------- */
.section--compact { padding-block: 32px; }
.compare { background: var(--surface-lowest); border: 1px solid var(--surface-highest); border-radius: 16px; }
.compare__summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 28px; font-size: 18px; font-weight: 600; color: var(--on-surface); cursor: pointer; border-radius: 16px; }
.compare__summary::-webkit-details-marker { display: none; }
.compare__summary::after { content: "+"; flex: none; font-size: 24px; font-weight: 400; line-height: 1; color: var(--primary); }
.compare[open] .compare__summary::after { content: "−"; }
.compare__body { padding: 8px 28px 28px; }

/* ---------- footer social row ---------- */
.social { list-style: none; margin: 4px 0 0; padding: 0; display: flex; gap: 10px; }
.social a { width: 40px; height: 40px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.18); color: var(--on-dark); display: inline-flex; align-items: center; justify-content: center; }
.social a:hover { color: #FFFFFF; background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.32); }

/* ---------- newsletter: footer trigger + dialog (2026-10-09) ---------- */
.newsletter-trigger { width: 40px; height: 40px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.18); color: var(--on-dark); display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.newsletter-trigger:hover { color: #FFFFFF; background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.32); }
.social { flex-wrap: wrap; }
.modal { width: min(460px, calc(100% - 32px)); max-height: calc(100% - 32px); padding: 0; border: 0; border-radius: 16px; background: var(--surface-lowest); color: var(--on-surface); box-shadow: 0 24px 64px rgba(0, 20, 25, 0.35); }
.modal::backdrop { background: rgba(0, 24, 29, 0.6); }
.modal__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 24px 28px 0; }
.modal__title { margin: 0; font-size: 20px; font-weight: 600; line-height: 1.4; }
.modal__close { width: 40px; height: 40px; flex: none; border: 0; border-radius: 999px; background: transparent; color: var(--on-surface-variant); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.modal__close:hover { background: var(--surface-low); color: var(--on-surface); }
.modal .newsletter { padding: 12px 28px 28px; }
.newsletter { display: flex; flex-direction: column; gap: 16px; max-width: 460px; }
.newsletter__lead { margin: 0; font-size: 14px; line-height: 1.7; color: var(--on-surface-variant); }
.newsletter__submit { align-self: stretch; }
.newsletter__submit:disabled { opacity: 0.6; cursor: progress; }
.newsletter__status { margin: 0; font-size: 14px; }
.newsletter__status:empty { display: none; }
.newsletter__status.is-ok { color: var(--primary); font-weight: 600; }
.newsletter__status.is-error { color: var(--error); }

/* ---------- demo form result, shown in place ---------- */
.form-status { margin: 0; font-size: 15px; line-height: 1.7; }
.form-status:empty { display: none; }
.form-status.is-ok { color: var(--primary); font-weight: 600; }
.form-status.is-error { color: var(--error); }

/* ---------- FAQ (no script: <details>) ---------- */
.faq { display: flex; flex-direction: column; gap: 12px; max-width: 840px; }
.faq__item { background: var(--surface-lowest); border: 1px solid var(--surface-highest); border-radius: 12px; }
.faq__item[open] { border-color: var(--outline-variant); }
.faq__q { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 24px; font-size: 17px; font-weight: 600; line-height: 1.5; color: var(--on-surface); cursor: pointer; border-radius: 12px; }
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after { content: "+"; flex: none; font-size: 22px; font-weight: 400; line-height: 1; color: var(--primary); }
.faq__item[open] .faq__q::after { content: "−"; }
.faq__a { padding: 0 24px 20px; }

/* ---------- mobile menu (no script: <details>) ---------- */
.mobile-nav { display: none; position: relative; }
.mobile-nav summary { list-style: none; width: 44px; height: 44px; border-radius: 999px; color: var(--on-dark); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.mobile-nav summary::-webkit-details-marker { display: none; }
.mobile-nav nav { position: absolute; inset-inline-end: 0; top: 52px; min-width: 220px; background: var(--surface-lowest); border: 1px solid var(--surface-highest); border-radius: 12px; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18); padding: 8px; display: flex; flex-direction: column; }
.mobile-nav nav a { color: var(--on-surface); text-decoration: none; padding: 10px 12px; border-radius: 8px; min-height: 44px; display: flex; align-items: center; }
.mobile-nav nav a:hover { background: var(--surface-low); }

/* ---------- responsive ---------- */
@media (max-width: 1199px) {
  .plans--4 { --plan-cols: 2; }
}
@media (max-width: 1100px) {
  .grid-5, .grid-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .plans--3 { --plan-cols: 1; }
}
@media (max-width: 640px) {
  .plans--2, .plans--4 { --plan-cols: 1; }
}
@media (max-width: 900px) {
  .messages__grid { grid-template-columns: 1fr; gap: 16px; }
  .messages { padding: 32px 16px; }
  .nav { display: none; }
  .mobile-nav { display: block; }
  :root { --gutter: 16px; }
  .section { padding: 56px 16px; }
  .hero { padding: 40px 16px 48px; }
  .h1 { font-size: 38px; }
  .h2 { font-size: 28px; }
  .legal-hero { padding: 40px 16px 32px; }
  .legal-hero__title { font-size: 30px; }
  .grid-2, .grid-3, .grid-4, .grid-demo, .hero__grid, .band, .fields, .footer-grid { grid-template-columns: 1fr; }
  .grid-5, .grid-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feat, .feat--reverse { flex-direction: column; }
  .feat__text, .feat__media { flex: 1 1 auto; width: 100%; }
  /* The demo button stays in the header on phones, with a short label; the full one stays the accessible name. */
  .header-actions { gap: 8px; }
  .header-cta { min-height: 40px; padding: 0 14px; font-size: 14px; white-space: nowrap; }
  .header-cta__long { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .header-cta__short { display: inline; }
  .brand__sub { display: none; }
  .to-top { bottom: 16px; inset-inline-end: 16px; }
}
@media (max-width: 480px) {
  .grid-5, .grid-6 { grid-template-columns: 1fr; }
  .brand__name { font-size: 14px; }
}

/* Narrow phones: the header keeps the logo tile, language switch, demo button and menu; the brand name
   would wrap to three lines beside them. The link keeps its accessible name (brand.homeLabel). */
@media (max-width: 420px) {
  .site-header .brand__text { display: none; }
}

/* ---------- tables on phones: one card per row ---------- */
@media (max-width: 640px) {
  .scroll-x:has(> .matrix--stack) { overflow: visible; }
  .matrix--stack { min-width: 0; border: 0; border-radius: 0; background: transparent; overflow: visible; }
  .matrix--stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .matrix--stack, .matrix--stack tbody, .matrix--stack tr, .matrix--stack th, .matrix--stack td { display: block; }
  .matrix--stack tbody { display: flex; flex-direction: column; gap: 12px; }
  .matrix--stack tbody tr { background: var(--surface-lowest); border: 1px solid var(--surface-highest); border-radius: 12px; overflow: hidden; }
  .matrix--stack tbody th { border-top: 0; padding: 14px 16px; font-size: 15px; font-weight: 600; background: var(--surface-container); }
  .matrix--stack td { display: flex; align-items: baseline; gap: 8px; padding: 10px 16px; border-top: 1px solid var(--surface-high); border-inline-start: 0 !important; text-align: start !important; font-size: 14px; }
  .matrix--stack td::before { content: attr(data-label); flex: 0 0 38%; font-size: 12px; font-weight: 600; line-height: 1.5; color: var(--muted); }
  .matrix--compare.matrix--stack td.us::before { color: var(--primary); }
}


/* ---------- motion (UX review 2026-10-09, items 1–4) ----------
   Small and functional only: it shows what opened, what is clickable, what changed, and which plan is
   highlighted. Nothing loops, nothing animates on scroll except the one pricing cue. All of it is off
   when the visitor asks for reduced motion (last rule). */
:root { --ease: cubic-bezier(0.2, 0, 0, 1); }

/* 1. Expanders (FAQ answers, the comparison) open and close smoothly where the browser supports
      animating to auto height; elsewhere they snap, as before. The mobile menu is a dropdown, not an
      expander, and keeps its instant toggle. */
:root { interpolate-size: allow-keywords; }
.faq__item::details-content, .compare::details-content {
  block-size: 0; opacity: 0; overflow: clip;
  transition: block-size 220ms var(--ease), opacity 220ms var(--ease), content-visibility 220ms allow-discrete;
}
.faq__item[open]::details-content, .compare[open]::details-content { block-size: auto; opacity: 1; }
.faq__q::after, .compare__summary::after { transition: transform 220ms var(--ease); }
.faq__item[open] .faq__q::after, .compare[open] .compare__summary::after { transform: rotate(180deg); }

/* 2. Pointer feedback: buttons and links ease their colour; clickable cards (the platform tiles) lift.
      Cards that are not links do not move, so movement always means "this can be clicked". */
.btn, .nav a, .footer-col a, .social a, .lang-switch, .to-top, .link-strong, .inline-link, .mobile-nav nav a {
  transition: background-color 150ms var(--ease), color 150ms var(--ease), border-color 150ms var(--ease), text-decoration-color 150ms var(--ease);
}
.btn--outline:hover { border-color: var(--primary); background: var(--tint-us); color: var(--primary); }
.link-strong { text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 4px; }
.link-strong:hover { text-decoration-color: currentColor; }
.tile { transition: transform 150ms var(--ease), box-shadow 150ms var(--ease), border-color 150ms var(--ease); }
.tile:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(0, 54, 63, 0.10); }

/* 3. Form feedback: borders ease into their hover, focus and error states, and an error message fades in
      each time it appears. */
.input { transition: border-color 150ms var(--ease), box-shadow 150ms var(--ease); }
.field-error:not([hidden]) { animation: field-error-in 180ms var(--ease); }
@keyframes field-error-in { from { opacity: 0; transform: translateY(-3px); } }

/* 4. The highlighted plan: site.js marks it pending before it is seen and releases it once, when the
      pricing section scrolls into view, so its border and badge arrive as a cue. Without the script, or
      with reduced motion, the class is never added and the card is simply highlighted. */
.plan--highlight, .plan--highlight .plan__badge { transition: border-color 500ms var(--ease), box-shadow 500ms var(--ease), opacity 400ms var(--ease) 150ms, transform 400ms var(--ease) 150ms; }
.plan--highlight.is-pending { border-color: var(--surface-highest); box-shadow: none; }
.plan--highlight.is-pending .plan__badge { opacity: 0; transform: translateY(6px); }

/* The newsletter dialog fades and rises in; its backdrop fades. */
.modal[open] { animation: modal-in 200ms var(--ease); }
.modal[open]::backdrop { animation: backdrop-in 200ms var(--ease); }
@keyframes modal-in { from { opacity: 0; transform: translateY(8px) scale(0.98); } }
@keyframes backdrop-in { from { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after, *::details-content, *::backdrop { transition: none !important; animation: none !important; }
  .tile:hover { transform: none; }
}