/* ═══ GripIQ component layer ═══
   See docs/design-system.md §5.3–5.11.
   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/bg-texture.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;font-size:var(--fs-base)}

.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;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

.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);width:1.1em;height:1.1em}

.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);--accent-tint:color-mix(in srgb,var(--accent) 12%,transparent)}
/* 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}
.nav-logo{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/bg-texture.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 */
/* The field is joined to the button, so its focus ring is drawn on its own edge instead of 2px outside it,
   where it would sit in the seam and run into the button. */
.footer-newsletter .form :is(input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),select,textarea):focus-visible{position:relative;z-index:1;outline-width:2px;outline-offset:-2px}
.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),background-color 600000s,color 600000s}
.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)}
/* Browser autofill (and Chrome's preview of a suggestion while the field has focus) paints its own light
   background and dark text. The very long background-color/color transitions above keep that from ever
   showing; the two inset shadows below cover it as well: the opaque page background, with the
   (translucent in dark sections) card colour on top, as the field looks unfilled. */
.form :is(input,select,textarea):is(:-webkit-autofill,:autofill){-webkit-box-shadow:0 0 0 100vmax var(--bg-card) inset,0 0 0 100vmax var(--bg) inset;box-shadow:0 0 0 100vmax var(--bg-card) inset,0 0 0 100vmax var(--bg) inset;-webkit-text-fill-color:var(--fg-strong);caret-color:var(--fg-strong)}
.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}