/* ═══ GripIQ component layer ═══
   Owned by WP0 — see docs/design-system.md §5.3–5.11. Do not edit outside WP0/WP6.
   Cascade rule: never use IDs or !important here; specificity stays at one class (two for states). */

/* ── 5.3 Layout components ── */
.container{max-width:var(--container);margin-inline:auto;width:100%}
.container--md{max-width:var(--container-md)}
.container--sm{max-width:var(--container-sm)}

.section{position:relative;padding:var(--section-pad-y) var(--section-pad-x)}
.section--light{background:var(--color-white)}
.section--panel{background:var(--color-gray-50)}
.section--dark{background:var(--color-ink-deep)}
.section--navy{background:var(--color-navy-deep)}
.section--flush{padding-block:0}
.section--tight{padding-block:var(--space-12)}
/* textures: the two background images used by the marketing sections */
.section--textured{overflow:hidden}
.section--textured::before{content:'';position:absolute;inset:0;z-index:0;pointer-events:none}
.section--dark.section--textured::before{background:url('../assets/input/screens design/d73299c6e40c3b420b5fab083b0efe04cfdbe497.jpg') center center/cover no-repeat;opacity:.2}
.section--light.section--textured::before{background:url('../assets/twist.png') center center/cover no-repeat;opacity:.05}
.section--textured.section--flip::before{transform:scaleX(-1)}
.section--textured>.container{position:relative;z-index:var(--z-raised)}
/* centred marketing sections */
.section--center .eyebrow,.section--center .section-title,.section--center .section-lead{text-align:center}
.section--center .section-lead{margin-inline:auto}

.grid{display:grid;gap:var(--space-6)}
.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))}
.grid--split{grid-template-columns:minmax(0,1.2fr) minmax(18rem,.8fr);gap:var(--space-16);align-items:end}
.grid--split-rev{grid-template-columns:minmax(0,.82fr) minmax(20rem,1.18fr);gap:var(--space-16);align-items:center}
.grid--tight{gap:var(--space-4)}
.grid--loose{gap:var(--space-8)}
@media(max-width:1024px){.grid--3,.grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}.grid--split,.grid--split-rev{grid-template-columns:1fr;gap:var(--space-10)}}
@media(max-width:640px){.grid--2,.grid--3,.grid--4{grid-template-columns:1fr}.section{padding:var(--space-16) var(--space-5)}}
@media(max-width:320px){.section{padding:var(--space-12) var(--space-4)}}

.u-text-center{text-align:center}
.u-visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* Grows a visually small control to the 44x44 minimum tap target without changing how it looks. */
.u-tap-44{position:relative}
.u-tap-44::after{content:'';position:absolute;top:50%;left:50%;width:44px;height:44px;transform:translate(-50%,-50%)}

/* ── 5.4 Typography components ── */
.eyebrow{display:block;margin-bottom:var(--space-4);font-family:var(--font-body);font-size:var(--fs-2xs);font-weight:var(--fw-bold);line-height:1.3;letter-spacing:var(--ls-widest);text-transform:uppercase;color:var(--accent-fg)}
.eyebrow--dot{display:inline-flex;align-items:center;gap:var(--space-2)}
.eyebrow--dot::before{content:'';width:.5rem;height:.5rem;border-radius:var(--radius-full);background:var(--accent);box-shadow:0 0 1rem var(--accent)}
.eyebrow--muted{color:var(--fg-muted)}
.eyebrow--lg{font-size:var(--fs-md);font-weight:var(--fw-medium);letter-spacing:var(--ls-wider);margin-bottom:var(--space-3)}
.eyebrow--lg em{font-style:normal;color:var(--fg-strong)}

.section-title{font-family:var(--font-heading);font-size:var(--fs-4xl);font-weight:var(--fw-medium);line-height:var(--lh-tight);letter-spacing:var(--ls-tight);color:var(--heading);margin-bottom:var(--space-5)}
.section-title--sm{font-size:var(--fs-3xl)}
.section-title strong{font-weight:var(--fw-bold);color:var(--fg-strong)}
@media(max-width:640px){.section-title{font-size:clamp(1.7rem,6vw,2.4rem)}}
.section-title,.hero-title,.card-title,.section-lead,.hero-lead{overflow-wrap:break-word}

.section-lead{font-family:var(--font-body);font-size:1.05rem;font-weight:var(--fw-regular);line-height:var(--lh-relaxed);color:var(--fg-muted);max-width:var(--measure)}
.section-lead strong{color:var(--fg-strong);font-weight:var(--fw-bold)}
.section-lead p+p{margin-top:var(--space-4)}
.section-head{max-width:var(--measure);margin-bottom:var(--space-10)}   /* optional wrapper (landing) */

.card-title{font-family:var(--font-heading);font-size:var(--fs-lg);font-weight:var(--fw-bold);line-height:var(--lh-heading);color:var(--fg-strong);margin-bottom:var(--space-2)}
.card-title--lg{font-size:var(--fs-xl);font-weight:var(--fw-medium);letter-spacing:var(--ls-tight);line-height:var(--lh-tight)}
.card-title--accent{color:var(--accent-fg)}
.card-text{font-size:var(--fs-md);font-weight:var(--fw-regular);line-height:var(--lh-relaxed);color:var(--fg-muted)}
.card-text--base{font-size:var(--fs-base)}

.prose{font-size:var(--fs-lg);line-height:var(--lh-loose);color:var(--fg)}
.prose h2{font-family:var(--font-heading);font-size:var(--fs-2xl);font-weight:var(--fw-medium);line-height:var(--lh-snug);letter-spacing:var(--ls-snug);color:var(--fg-strong);margin:var(--space-12) 0 var(--space-4)}
.prose h3{font-family:var(--font-heading);font-size:1.25rem;font-weight:var(--fw-medium);color:var(--fg-strong);margin:var(--space-8) 0 var(--space-3)}
.prose p,.prose ul,.prose ol{margin-bottom:var(--space-6)}
.prose ul{padding-left:1.4rem;list-style:disc}
.prose li{margin-bottom:var(--space-3)}
.prose strong{font-weight:var(--fw-bold);color:var(--fg-strong)}
.prose a{color:var(--accent-fg);text-decoration:underline;text-underline-offset:3px}
.prose a:hover{color:var(--fg-strong)}

.highlight{color:var(--accent)}                 /* cyan word inside a heading on dark */
:is(.section--light,.section--panel,.card--light) .highlight{color:var(--accent-fg)}

/* ── 5.5 Buttons ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);min-height:3rem;padding:var(--space-3) var(--space-6);border:var(--border-w-ctl) solid transparent;border-radius:var(--radius-md);background:transparent;font-family:var(--font-body);font-size:var(--fs-md);font-weight:var(--fw-bold);line-height:1.2;letter-spacing:.01em;color:var(--fg-strong);text-decoration:none;white-space:nowrap;cursor:pointer;transition:transform var(--dur-base) var(--ease-standard),background-color var(--dur-base),border-color var(--dur-base),box-shadow var(--dur-base),color var(--dur-base)}
.btn:hover{transform:translateY(var(--lift))}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.6;cursor:not-allowed;transform:none;box-shadow:none}
.btn svg{width:1em;height:1em;flex-shrink:0}

.btn--primary{background:var(--color-cyan);border-color:var(--color-cyan);color:var(--color-navy)}
.btn--primary:hover{background:var(--color-cyan-bright);border-color:var(--color-cyan-bright);box-shadow:var(--shadow-glow)}

.btn--secondary{border-color:var(--btn-outline);color:var(--fg-strong)}
.btn--secondary:hover{background:color-mix(in srgb,var(--color-cyan) 8%,transparent)}
.btn--secondary svg{color:var(--accent-fg)}

.btn--ghost{border-color:var(--line-strong);color:var(--fg)}
.btn--ghost:hover{border-color:var(--btn-outline);color:var(--fg-strong);background:color-mix(in srgb,var(--color-cyan) 6%,transparent)}

.btn--inverse{background:rgba(255,255,255,.9);border-color:transparent;color:var(--color-navy);box-shadow:0 2px 8px rgba(0,0,0,.1);backdrop-filter:blur(4px)}
.btn--inverse:hover{background:var(--color-white);box-shadow:0 4px 16px rgba(0,0,0,.15)}

.btn--sm{min-height:2.75rem;padding:var(--space-2) var(--space-5);font-size:var(--fs-sm);font-weight:var(--fw-bold)}
.btn--lg{min-height:3.3rem;padding:var(--space-3-5) var(--space-7);font-size:var(--fs-base)}
.btn--block{width:100%}
.btn--medium{font-weight:var(--fw-medium)}       /* hero secondary / pill-btn used weight 500 */

/* hero treatment: cyan glow + travelling shine */
.btn--shine{position:relative;overflow:hidden;box-shadow:var(--shadow-glow-sm)}
.btn--shine:hover{box-shadow:var(--shadow-glow-lg)}
.btn--shine::after{content:'';position:absolute;top:0;left:0;width:60%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.12),transparent);animation:btnShine 3s ease-in-out infinite;pointer-events:none}
.btn--shine+.btn--shine::after{animation-delay:1.5s}
/* translateX, niet left: de shine loopt zo op de compositor in plaats van elke frame layout te forceren */
@keyframes btnShine{0%{transform:translateX(-167%) skewX(-20deg)}50%,100%{transform:translateX(167%) skewX(-20deg)}}

/* split button: icon cell + two-line label (hero primary) */
.btn--split{padding:0;align-items:stretch;gap:0;white-space:normal;text-align:left}
.btn-split-icon{display:flex;align-items:center;justify-content:center;padding:var(--space-3) var(--space-3-5);border-right:var(--border-w) solid color-mix(in srgb,var(--color-cyan) 30%,transparent);color:var(--accent-fg)}
.btn-split-icon svg{width:22px;height:22px}
.btn-split-text{display:flex;flex-direction:column;justify-content:center;padding:var(--space-3) 1.4rem var(--space-3) var(--space-4)}
.btn-split-text strong{font-size:var(--fs-base);font-weight:var(--fw-bold);color:var(--fg-strong)}
.btn-split-text span{margin-top:var(--space-0-5);font-size:var(--fs-xs);font-weight:var(--fw-regular);color:var(--fg-muted)}

.btn-row{display:flex;flex-wrap:wrap;gap:var(--space-3);align-items:stretch}
.btn-row--center{justify-content:center}
@media(max-width:640px){.btn-row--stack{flex-direction:column;align-items:center}.btn-row--stack .btn{width:100%}}

/* ── 5.6 Cards ── */
.card{position:relative;background:var(--bg-card);border:var(--border-w) solid var(--line);border-radius:var(--radius-xl);padding:var(--space-8);box-shadow:var(--shadow-md);color:var(--fg)}
.card--sm{padding:var(--space-6);border-radius:var(--radius-lg)}
.card--lift{transition:transform var(--dur-slow),box-shadow var(--dur-slow),border-color var(--dur-slow)}
.card--lift:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
/* glass: only meaningful inside a dark context (tokens already give bg white .06) */
.card--glass{backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 4px 24px rgba(0,0,0,.15),var(--shadow-inset-top)}
.card--glass.card--lift:hover{box-shadow:var(--shadow-dark-md),var(--shadow-inset-top);border-color:color-mix(in srgb,var(--color-cyan) 40%,transparent)}
/* solid navy card (cta option) */
.card--navy{background:linear-gradient(180deg,color-mix(in srgb,var(--color-navy-light) 35%,var(--color-navy-deep)),var(--color-navy));border-color:color-mix(in srgb,var(--color-cyan) 12%,transparent);box-shadow:var(--shadow-dark-md)}
/* accent-tinted tile: set --accent / --accent-tint / --accent-fg on the element or via a modifier below */
.card--tint{background:var(--accent-tint);border-top:var(--accent-rule) solid var(--accent);border-radius:var(--radius-lg);box-shadow:none;padding:var(--space-6)}
.card--tint .card-title{color:var(--accent-fg)}
/* engine accents — usable on any component that reads --accent */
.accent-live,.accent-cyan{--accent:var(--color-cyan);--accent-fg:var(--color-cyan-ink);--accent-tint:var(--color-cyan-tint)}
.accent-intent,.accent-coral{--accent:var(--color-coral);--accent-fg:var(--color-coral-ink);--accent-tint:var(--color-coral-tint)}
.accent-expansion,.accent-green{--accent:var(--color-green);--accent-fg:var(--color-green-ink);--accent-tint:var(--color-green-tint)}
.accent-content,.accent-purple{--accent:var(--color-purple);--accent-fg:var(--color-purple-ink);--accent-tint:var(--color-purple-tint)}
/* On a dark ground the pastel itself is AA (7-9:1), so the accent classes drop their light-context
   ink variant. The accent classes must re-declare --accent-fg here: a custom property is
   substituted on the element that declares it, so the dark block in tokens.css cannot do it. */
:is(.section--dark,.section--navy,.hero,.engine-modal,.card--navy) :is(.accent-live,.accent-intent,.accent-expansion,.accent-content){--accent-fg:var(--accent)}
/* floating tag pinned to the top edge (usecase / step cards) */
.card--tag{padding-top:var(--space-10);text-align:center}
.card--tag>.badge{position:absolute;top:-14px;left:50%;transform:translateX(-50%)}

/* ── 5.7 Badges and chips ── */
.badge{display:inline-flex;align-items:center;gap:var(--space-1-5);padding:var(--space-1) var(--space-3);border:var(--border-w) solid transparent;border-radius:var(--radius-pill);font-family:var(--font-body);font-size:var(--fs-2xs);font-weight:var(--fw-bold);line-height:1.2;letter-spacing:var(--ls-wider);text-transform:uppercase;white-space:nowrap;background:var(--accent-tint);color:var(--accent-fg)}
.badge--solid{background:var(--accent);color:var(--color-navy)}
.badge--outline{background:transparent;border-color:var(--line);color:var(--fg-muted);text-transform:none;letter-spacing:var(--ls-normal);font-weight:var(--fw-bold)}
.badge--sm{font-size:var(--fs-3xs);padding:var(--space-1) var(--space-2)}
.badge--live{gap:var(--space-2);--accent:var(--color-green);--accent-fg:var(--color-green-ink);--accent-tint:var(--color-green-tint)}
.badge--live::before{content:'';width:6px;height:6px;border-radius:var(--radius-full);background:var(--accent);animation:pulse 1.5s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}

.chip{display:inline-flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-5);border:var(--border-w-ctl) solid var(--line-strong);border-radius:var(--radius-pill);background:transparent;font-family:var(--font-body);font-size:var(--fs-sm);font-weight:var(--fw-medium);line-height:1.2;color:var(--fg);cursor:pointer;text-decoration:none;transition:border-color var(--dur-base),background-color var(--dur-base),color var(--dur-base)}
.chip:hover{border-color:color-mix(in srgb,var(--accent) 50%,transparent);color:var(--fg-strong)}
.chip.is-active,.chip[aria-current]{border-color:var(--accent);background:var(--accent-tint);color:var(--fg-strong)}
.chip--sm{padding:var(--space-1) var(--space-2-5);font-size:var(--fs-2xs);font-weight:var(--fw-bold);letter-spacing:var(--ls-wider);text-transform:uppercase;line-height:1}
.chip--sm.is-active{color:var(--accent-fg)}
/* chip--sm doubles as a static label ("rectangles act, pills label"), so the tap target is
   grown only on the chips that are actually buttons -- with .u-tap-44 in the markup. */

/* ── 5.8 Nav and footer ── */
.nav{position:fixed;top:0;left:0;right:0;z-index:var(--z-nav);width:100svw;display:flex;align-items:center;justify-content:space-between;gap:var(--space-10);padding:var(--space-3) calc((100vw - var(--container))/2 + var(--space-10));background:rgba(0,0,0,.3);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:var(--border-w) solid rgba(255,255,255,.15);transition:background-color var(--dur-slow),border-color var(--dur-slow)}
.nav.nav-scrolled{background:var(--color-black);border-bottom-color:transparent}
.nav-brand{display:block;line-height:0}
.nav-logo{display:block;height:50px;width:auto}
.nav-links{display:flex;align-items:center;gap:var(--space-8)}
/* Login, demo CTA and the language dropdown as one right-aligned group: the auto margin takes all
   the free space, so the section links stay next to the logo instead of floating in the middle. */
.nav-actions{display:flex;align-items:center;gap:var(--space-6);margin-left:auto}
.nav-links a,.nav-link,.nav-login{font-family:var(--font-heading);font-size:var(--fs-base);font-weight:var(--fw-medium);color:var(--fg-strong);transition:color var(--dur-fast)}
.nav-links a:hover,.nav-link:hover,.nav-login:hover{color:var(--accent)}
.nav-lang{position:relative}
.nav-lang-caret{transition:transform var(--dur-fast)}
[aria-expanded="true"]>.nav-lang-caret{transform:rotate(180deg)}
.nav-lang-menu{position:absolute;top:calc(100% + var(--space-2));right:0;z-index:var(--z-popover);display:flex;flex-direction:column;min-width:4.5rem;padding:var(--space-1);border:var(--border-w) solid var(--line);border-radius:var(--radius-md);background:var(--color-black);box-shadow:0 12px 40px rgba(0,0,0,.5)}
.nav-lang-menu[hidden]{display:none}
.nav-lang-option{padding:var(--space-3) var(--space-3);border-radius:var(--radius-sm);font-size:var(--fs-xs);font-weight:var(--fw-medium);letter-spacing:var(--ls-wider);text-transform:uppercase;color:var(--fg-muted);transition:background-color var(--dur-fast),color var(--dur-fast)}
.nav-lang-option:hover{background:var(--accent-tint);color:var(--fg-strong)}
.nav-lang-option.is-active{color:var(--accent)}
.nav-hamburger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:var(--space-3-5) 11px;z-index:var(--z-top)}
.nav-hamburger span{display:block;width:22px;height:2px;background:var(--color-white);border-radius:2px;transition:transform var(--dur-slow),opacity var(--dur-slow)}
.nav-hamburger.active span:nth-child(1){transform:rotate(45deg) translate(5px,5px)}
.nav-hamburger.active span:nth-child(2){opacity:0}
.nav-hamburger.active span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px)}
.nav-mobile{display:none;position:fixed;inset:0;z-index:calc(var(--z-nav) - 1);flex-direction:column;align-items:center;justify-content:center;gap:var(--space-8);background:rgba(0,0,0,.95);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);opacity:0;pointer-events:none;transition:opacity var(--dur-slow)}
.nav-mobile.active{opacity:1;pointer-events:auto}
.nav-mobile a:not(.btn):not(.chip){font-family:var(--font-heading);font-size:1.4rem;font-weight:var(--fw-medium);color:var(--fg-strong)}
.nav-mobile a:not(.btn):not(.chip):hover{color:var(--accent)}
/* Login + register read as one platform group, split by a hairline "/" like the legacy nav. */
.nav-platform{display:inline-flex;align-items:center;gap:var(--space-2)}
.nav-platform-sep{color:var(--fg-faint)}
.nav-mobile-platform{display:flex;gap:var(--space-6);padding-top:var(--space-6);border-top:var(--border-w) solid var(--line-strong)}
.nav-mobile-langs{display:flex;gap:var(--space-2-5)}
/* landing variant: static, transparent, sits inside the hero */
.nav--inline{position:relative;z-index:var(--z-raised);width:auto;max-width:var(--container);margin-inline:auto;padding:var(--space-5) var(--space-8);background:transparent;backdrop-filter:none;border-bottom:0;gap:var(--space-4)}
@media(max-width:1280px){.nav-actions{gap:var(--space-4)}.nav-platform{gap:var(--space-1-5)}.nav-login{font-size:var(--fs-sm)}}
@media(max-width:1100px){.nav{padding:var(--space-3) var(--space-6);gap:var(--space-6)}.nav-links{gap:var(--space-5)}.nav-actions{gap:var(--space-4)}.nav-links a{font-size:var(--fs-sm)}}
@media(max-width:860px){.nav-links,.nav-actions{display:none}.nav-hamburger{display:flex}.nav-mobile{display:flex}}
@media(max-width:640px){.nav{padding:var(--space-2-5) var(--space-4)}.nav--inline{padding:var(--space-4) var(--space-5)}}
@media(max-width:320px){.nav{padding:var(--space-2) var(--space-3-5)}}

.footer{position:relative;overflow:hidden;background:var(--color-ink-deep);color:var(--fg-faint)}
.footer::before{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;background:url('../assets/input/screens design/d73299c6e40c3b420b5fab083b0efe04cfdbe497.jpg') center bottom/cover no-repeat;opacity:.12;transform:scaleX(-1)}
.footer-top,.footer-bottom{position:relative;z-index:var(--z-raised);max-width:var(--container);margin-inline:auto}
.footer-top{display:grid;grid-template-columns:2fr 1fr 1fr;gap:var(--space-12);align-items:start;padding:var(--space-14) var(--space-10) var(--space-10)}
.footer-brand{display:flex;flex-direction:column;gap:var(--space-3)}
.footer-brand .brand-gripiq{font-size:var(--fs-lg);color:var(--fg-strong)}
.footer-brand-desc{font-size:var(--fs-sm);color:var(--fg-faint);line-height:var(--lh-body);max-width:320px}
/* Newsletter signup, inside .footer-brand (see templates/base.html.twig). Stacked, not a fixed
   width: .footer-brand is the widest of the three .footer-top grid cells (2fr) but still narrows on
   smaller viewports (see the grid-template-columns changes below), and the German button/label text
   runs longer than the English/Dutch, so the field and button are full-width and wrap freely rather
   than forcing a fixed inline layout. */
/* scroll-margin-top: the blog page's closing CTA links here with #newsletter, and the global
   rule only covers section[id] — without this the fixed nav can overlap the form on arrival. */
.footer-newsletter{margin-top:var(--space-2);display:flex;flex-direction:column;gap:var(--space-2-5);scroll-margin-top:var(--nav-offset)}
.footer-newsletter-title{margin:0;font-size:var(--fs-2xs);font-weight:var(--fw-bold);letter-spacing:var(--ls-wider);text-transform:uppercase;color:var(--fg-faint)}
/* Email + submit read as one joined control: field in column 1, button butted against it in
   column 2 (both on grid row 1), sharing a single rounded outline. .form-legal keeps its
   grid-column:1/-1 and drops to the next row. */
.footer-newsletter .form{grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:var(--space-2-5) 0;text-align:left}
/* The email field is labelled by its placeholder + the block heading, so its label is visually
   hidden (but present for AT). Scoped to a DIRECT child so the consent checkbox's own label --
   which sits inside .choice and carries the visible consent wording -- stays visible. */
.footer-newsletter .form .form-field > label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.footer-newsletter .form ::placeholder{color:var(--fg-muted);opacity:1}
.footer-newsletter .form-field{min-width:0}
/* Every visible item is placed explicitly. Grid's auto-placement resolves items with a
   definite row before fully-auto ones, so leaving the email field on auto let the button
   (grid-row:1) claim column 1 and render before the input. */
.footer-newsletter .form .form-field--wide{grid-column:1;grid-row:1}
.footer-newsletter .form :is(input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),select,textarea){border-right-color:transparent;border-radius:var(--radius-sm) 0 0 var(--radius-sm)}
/* lift the focus ring above the adjoining button so it is not clipped by it */
.footer-newsletter .form :is(input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),select,textarea):focus-visible{position:relative;z-index:1}
.footer-newsletter .form .btn{grid-column:2;grid-row:1;justify-self:stretch;width:auto;margin-top:0;padding-inline:var(--space-5);border-radius:0 var(--radius-sm) var(--radius-sm) 0}
/* Mailchimp consent checkbox: its own full-width row under the email+button pair. */
.footer-newsletter .form .form-field--wide:has(.choice){grid-column:1/-1;grid-row:2}
.footer-newsletter .form .form-legal{grid-column:1/-1;grid-row:3}
/* below ~360px of footer width the two no longer fit side by side */
@media (max-width:26.25em){
    .footer-newsletter .form{grid-template-columns:1fr;gap:var(--space-2-5)}
    .footer-newsletter .form .form-field--wide,.footer-newsletter .form .form-field--wide:has(.choice),.footer-newsletter .form .form-legal{grid-column:1;grid-row:auto}
    .footer-newsletter .form :is(input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),select,textarea){border-right-color:var(--fg-muted);border-radius:var(--radius-sm)}
    .footer-newsletter .form .btn{grid-column:1;grid-row:auto;border-radius:var(--radius-md)}
}
.footer-newsletter .choice{display:flex;align-items:flex-start;gap:var(--space-2)}
.footer-newsletter .choice input[type="checkbox"]{flex-shrink:0;width:1.15rem;height:1.15rem;margin:.15rem 0 0;accent-color:var(--accent);cursor:pointer}
.footer-newsletter .choice label{font-size:var(--fs-2xs);line-height:var(--lh-normal);color:var(--fg-muted);cursor:pointer}
.footer-newsletter .form-status,.footer-newsletter .form-success{margin-top:0}
.footer-newsletter .form-success{padding:0}
.footer-newsletter .form-success p{margin:0;font-size:var(--fs-sm);color:var(--fg-muted)}
.footer-col-title{margin-bottom:var(--space-4);font-size:var(--fs-2xs);font-weight:var(--fw-bold);letter-spacing:var(--ls-wider);text-transform:uppercase;color:var(--fg-faint)}
/* A second heading inside a column -- the campaign landing pages under "Platform" -- needs air
   above it to read as a new group rather than as one more link. */
.footer-col-title--sub{margin-top:var(--space-7)}
.footer-col a{display:block;margin-bottom:var(--space-2-5);font-size:var(--fs-sm);color:var(--fg-muted);transition:color var(--dur-fast)}
.footer-col a:hover{color:var(--accent)}
/* Article titles are full sentences, not one-word nav labels: they wrap, so the links get the
   body line-height and a little more air between them than the link columns above. */
.footer-col--articles a{margin-bottom:var(--space-3);line-height:var(--lh-body)}
.footer-col-more{font-weight:var(--fw-bold);color:var(--accent-fg)}
.footer-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:var(--space-4);padding:var(--space-6) var(--space-10);border-top:var(--border-w) solid var(--line)}
.footer-copy,.footer-legal a{font-size:var(--fs-xs);color:var(--fg-faint)}
.footer-copy .brand-gripiq{color:var(--fg-faint)}
.footer-copy a,.footer-legal a{transition:color var(--dur-fast)}
.footer-copy a:hover,.footer-legal a:hover{color:var(--accent)}
.footer-legal{display:flex;flex-wrap:wrap;gap:var(--space-3) var(--space-6)}
@media(max-width:1024px){.footer-top{grid-template-columns:1fr 1fr;gap:var(--space-8)}.footer-brand{grid-column:1/-1}}
@media(max-width:640px){.footer-top{grid-template-columns:1fr;gap:var(--space-6);padding:var(--space-10) var(--space-6) var(--space-8)}.footer-bottom{flex-direction:column;text-align:center;padding:var(--space-5) var(--space-6)}}

/* ── 5.9 Content-facing classes (kept verbatim — they live inside CMS rich text) ── */
/* "GripIQ.AI": Satoshi bold, GripIQ in navy on light / white on dark, ".AI" cyan */
.brand-gripiq{font-family:var(--font-body);font-weight:var(--fw-bold);font-size:inherit;color:var(--heading)}
.brand-gripiq .brand-ai{color:var(--color-cyan)}
.brand-riq{font-weight:var(--fw-bold);font-size:inherit;color:var(--heading)}
:is(.section--dark,.section--navy,.hero,.engine-modal,.card--navy) .brand-riq{color:var(--color-cyan)}
/* landing headline highlight, stored inside content.headline */
.dmx-highlight{color:var(--color-cyan)}
:is(.section--light,.section--panel,.card--light) .dmx-highlight{color:var(--color-cyan-ink)}

/* ── 5.10 Forms ──
   Rendered by templates/form/theme.html.twig for both forms. Element selectors are used for
   controls so Sulu's widget blocks need no class injection.
   Default layout is single column: unrelated full-length fields (name, email, company...) should
   not sit two-across -- it breaks the vertical scan and is a known cause of skipped fields.
   .form-field--wide is a no-op against this one-column base (kept so the form theme's class stays
   meaningful if a form ever opts a specific field pair back into two columns via a page-level
   override, as .footer-newsletter does below). */
.form{display:grid;grid-template-columns:1fr;gap:var(--space-4);text-align:left}
.form-field{display:flex;flex-direction:column;gap:var(--space-1-5)}
.form-field--wide{grid-column:1/-1}
.form label,.form-label{font-size:var(--fs-xs);font-weight:var(--fw-bold);letter-spacing:var(--ls-wide);text-transform:uppercase;color:var(--fg-strong)}
.form :is(input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),select,textarea){width:100%;min-height:3rem;padding:var(--space-2-5) var(--space-3-5);border:var(--border-w) solid var(--fg-muted);border-radius:var(--radius-sm);background:var(--bg-card);color:var(--fg-strong);font:inherit;font-size:var(--fs-md);transition:border-color var(--dur-fast),box-shadow var(--dur-fast)}
.form textarea{min-height:120px;resize:vertical}
.form :is(input,select,textarea):focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px;border-color:var(--accent-fg)}
.form select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%235B6879' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1rem center;padding-right:2.4rem}
.form .btn{grid-column:1/-1;justify-self:start;margin-top:var(--space-1-5)}
.form .btn--block{justify-self:stretch}
.form-note,.form-legal{grid-column:1/-1;margin:0;color:var(--fg-muted);line-height:1.45}
.form-note{font-size:var(--fs-sm)}
.form-legal{font-size:var(--fs-xs)}
.form-legal a{color:inherit;text-decoration:underline}
.form-honeypot{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.form-intro{margin:0 0 var(--space-6);font-size:var(--fs-md);color:var(--fg-muted)}
.form-title{margin:0 0 var(--space-1-5);font-family:var(--font-heading);font-size:1.8rem;font-weight:var(--fw-medium);color:var(--fg-strong)}
.form-status{display:none;margin:var(--space-4) 0 0;font-size:var(--fs-sm);color:var(--error)}
.form-success{display:none;padding:var(--space-8) 0;text-align:center}
.form-success :is(h2,h3){margin:0 0 var(--space-3);font-family:var(--font-heading);font-size:var(--fs-2xl);font-weight:var(--fw-medium);line-height:1.2;color:var(--fg-strong)}
.form-success p{margin:0;color:var(--fg-muted);line-height:var(--lh-relaxed)}
/* state contract with public/js/forms.js */
[data-form-shell].is-error .form-status{display:block}
[data-form-shell].is-success :is(.form,.form-intro,.form-title){display:none}
[data-form-shell].is-success .form-success{display:block}
[data-form-shell].is-sending .btn{opacity:.6;cursor:not-allowed;transform:none}
/* form card (landing signup) */
.form-card{padding:var(--space-6);border-radius:var(--radius-xl);box-shadow:0 1.25rem 3rem rgba(6,29,66,.08)}
/* Fancybox inline modal shell (contact) */
.modal-shell{width:min(92vw,680px);padding:var(--space-8);border-radius:var(--radius-xl);background:var(--color-white)}
.contact-form-modal{display:none}
.fancybox__container{--fancybox-bg:rgba(5,43,93,.9)}
.fancybox__backdrop{background:rgba(0,0,0,.72)}
.contact-fancybox .fancybox__content{padding:0;border-radius:var(--radius-xl);overflow:hidden;box-shadow:0 24px 90px rgba(0,0,0,.45);background:transparent}
.fancybox__toolbar{--fancybox-color:#fff}
@media(max-width:640px){.form{grid-template-columns:1fr}.form-field--wide,.form .btn,.form-note,.form-legal{grid-column:auto}.modal-shell{width:calc(100vw - 1rem);padding:var(--space-3)}}

/* ── 5.11 Lists ── */
.list-check{list-style:none;margin:0;padding:0}
.list-check li{position:relative;padding:var(--space-2) 0 var(--space-2) var(--space-6);font-size:var(--fs-md);line-height:1.45;color:var(--fg)}
.list-check li::before{content:'';position:absolute;left:.1rem;top:1.05rem;width:.65rem;height:.35rem;border-bottom:2px solid var(--accent);border-left:2px solid var(--accent);transform:rotate(-45deg)}
.list-check--boxed{padding:var(--space-6);border:var(--border-w) solid var(--line);border-radius:var(--radius-lg);background:var(--bg-card);max-width:var(--measure)}
.list-dash{list-style:none;margin:0;padding:0}
.list-dash li{display:flex;align-items:center;gap:var(--space-2-5);padding:var(--space-1) 0;font-size:var(--fs-sm);line-height:var(--lh-normal);color:var(--fg)}
.list-dash li::before{content:'';width:16px;height:2px;border-radius:1px;flex-shrink:0;background:var(--accent);opacity:.9}