/* ==========================================================================
AIMan microsite
--------------------------------------------------------------------------
Taken over from the EnvCraft microsite (../../brandcompete.com/envcraft-www), so the two
brandcompete product sites share one component system. AIMan's own touch: the dark surfaces
use the charcoal of the product's sign-in screen instead of EnvCraft's navy.
The tokens below are brandcompete's own, read from the stylesheet the
company site serves (--red #a91212, --teal #15779b, the grey ramp, Rubik,
the 1200px container, the radius and shadow scales). They are copied rather
than approximated so the two sites cannot drift into two different reds.
Rubik is SELF-HOSTED, in assets/fonts/. That is deliberate and matches
brandcompete.com: a Google Fonts sends every visitor's IP address to
a third country on page load, which a German court has already held to be a
GDPR breach. This site makes NO third-party requests of any kind - no fonts,
no analytics, no embeds, no cookies - which is also why it needs no consent
banner.
========================================================================== */
@font-face {
font-family: Rubik;
font-style: normal;
font-weight: 300 700;
font-display: swap;
src: url(../fonts/rubik-latin.woff2) format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
U+2212, U+2215, U+FEFF, U+FFFD;
}
:root {
/* brandcompete palette */
--red: #a91212;
--red-dark: #8a0e0e;
--red-light: #c41515;
--teal: #15779b;
--teal-dark: #0f5f7d;
--dark: #18181b;
--dark-red: #2e1215;
--gray-900: #1a1a1a;
--gray-700: #4d4d4d;
--gray-500: #757575;
--gray-300: #c0c0c0;
--gray-100: #f0f2f5;
--white: #ffffff;
/* semantic */
--text: var(--gray-700);
--text-light: var(--gray-500);
--heading: var(--gray-900);
--bg: var(--white);
--bg-alt: #f8f9fa;
--border: #e2e5ea;
--card-bg: #ffffff;
/* scale */
--container: 1200px;
--pad: clamp(1rem, 4vw, 1.5rem);
--r-sm: 4px;
--r-md: 8px;
--r-lg: 16px;
--r-xl: 24px;
--r-full: 9999px;
--shadow-sm: 0 1px 4px rgba(0, 0, 0, .06), 0 2px 8px rgba(0, 0, 0, .06);
--shadow-md: 0 4px 16px rgba(0, 0, 0, .1), 0 2px 6px rgba(0, 0, 0, .06);
--shadow-lg: 0 8px 32px rgba(0, 0, 0, .14), 0 2px 8px rgba(0, 0, 0, .06);
--ease: .25s ease;
/* prose measure - past ~75 characters the eye loses the start of the next
line on the return sweep, which is why a newspaper column stays narrow */
--measure: 68ch;
--section-y: clamp(3.5rem, 8vw, 6.5rem);
}
/* --------------------------------------------------------------- base ---- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 5.5rem; }
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
body {
margin: 0;
font-family: Rubik, system-ui, -apple-system, "Segoe UI", sans-serif;
font-weight: 400;
font-size: 1.0625rem;
line-height: 1.65;
color: var(--text);
background: var(--bg);
-webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { color: var(--heading); line-height: 1.2; margin: 0 0 .5em; font-weight: 600; letter-spacing: -.01em; }
h1 { font-size: clamp(2.1rem, 5.5vw, 3.4rem); letter-spacing: -.025em; }
h2 { font-size: clamp(1.7rem, 3.6vw, 2.5rem); letter-spacing: -.02em; }
h3 { font-size: clamp(1.15rem, 2vw, 1.375rem); }
h4 { font-size: 1.0625rem; }
p { margin: 0 0 1rem; max-width: var(--measure); }
a { color: var(--red); text-decoration-thickness: 1px; text-underline-offset: .15em; }
a:hover { color: var(--red-dark); }
img { max-width: 100%; height: auto; display: block; }
ul { padding-left: 1.15rem; }
li { margin-bottom: .4rem; }
strong { color: var(--heading); font-weight: 600; }
:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; border-radius: var(--r-sm); }
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--pad); }
.section { padding-block: var(--section-y); }
.section--alt { background: var(--bg-alt); border-block: 1px solid var(--border); }
.section--dark { background: var(--dark); color: #c8c8d4; }
.section--dark h2, .section--dark h3, .section--dark h4 { color: #fff; }
.skip-link {
position: absolute; left: .5rem; top: -4rem; z-index: 200;
background: var(--red); color: #fff; padding: .6rem 1rem; border-radius: var(--r-md);
transition: top var(--ease);
}
.skip-link:focus { top: .5rem; color: #fff; }
.eyebrow {
font-size: .8125rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase;
color: var(--red); margin: 0 0 .75rem;
}
.section--dark .eyebrow { color: #ff8a8a; }
.lead { font-size: clamp(1.0625rem, 1.6vw, 1.25rem); color: var(--text); }
.section-head { margin-bottom: clamp(2rem, 4vw, 3rem); }
.section-head p { font-size: 1.125rem; }
/* ------------------------------------------------------------- buttons ---- */
.btn {
display: inline-flex; align-items: center; gap: .5rem; justify-content: center;
font: inherit; font-weight: 500; line-height: 1;
padding: .85rem 1.5rem; border-radius: var(--r-md); border: 1px solid transparent;
cursor: pointer; text-decoration: none; transition: background var(--ease), color var(--ease), border-color var(--ease);
}
.btn--primary { background: var(--red); color: #fff; }
.btn--primary:hover { background: var(--red-dark); color: #fff; }
.btn--outline { background: transparent; color: var(--red); border-color: var(--red); }
.btn--outline:hover { background: var(--red); color: #fff; }
.btn--on-dark { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .45); }
.btn--on-dark:hover { background: #fff; color: var(--dark); }
.btn--sm { padding: .55rem 1rem; font-size: .9375rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; }
/* -------------------------------------------------------------- header ---- */
.site-header {
position: sticky; top: 0; z-index: 100;
background: rgba(255, 255, 255, .97);
backdrop-filter: saturate(180%) blur(8px);
border-bottom: 1px solid var(--border);
}
.site-header__inner { display: flex; align-items: center; gap: 1.5rem; min-height: 4.5rem; }
.brand { display: flex; align-items: center; gap: .7rem; text-decoration: none; flex: 0 0 auto; }
.brand:hover { color: inherit; }
.brand img { width: 34px; height: 34px; }
.brand__name { font-size: 1.25rem; font-weight: 600; color: var(--heading); letter-spacing: -.02em; line-height: 1.1; }
.brand__claim { display: block; font-size: .6875rem; font-weight: 400; color: var(--text-light); letter-spacing: .01em; }
.nav { margin-left: auto; display: flex; align-items: center; gap: .25rem; }
.nav a { color: var(--text); text-decoration: none; padding: .5rem .7rem; border-radius: var(--r-sm); font-size: .9375rem; white-space: nowrap; }
.nav a:hover { color: var(--red); background: var(--gray-100); }
/* .nav a outranks .btn--primary, so the header CTA needs its colours restated at nav specificity */
.nav .btn--primary { color: #fff; background: var(--red); }
.nav .btn--primary:hover { color: #fff; background: var(--red-dark); }
.lang { display: flex; align-items: center; gap: .3rem; font-size: .875rem; margin-left: .35rem; padding-left: .85rem; border-left: 1px solid var(--border); }
.lang a { padding: .25rem .4rem; color: var(--text-light); text-decoration: none; border-radius: var(--r-sm); }
.lang a:hover { color: var(--red); }
.lang [aria-current] { color: var(--heading); font-weight: 600; }
.nav-toggle { display: none; margin-left: auto; background: none; border: 1px solid var(--border); border-radius: var(--r-md); padding: .5rem .65rem; cursor: pointer; color: var(--heading); }
@media (max-width: 960px) {
.nav-toggle { display: block; }
.nav {
position: absolute; inset: 100% 0 auto 0; flex-direction: column; align-items: stretch;
background: #fff; border-bottom: 1px solid var(--border); padding: .5rem var(--pad) 1rem;
box-shadow: var(--shadow-md); margin-left: 0;
}
.nav:not(.is-open) { display: none; }
.nav a { padding: .7rem .5rem; }
.lang { border-left: 0; border-top: 1px solid var(--border); margin: .4rem 0 0; padding: .6rem 0 0; }
.nav .btn { margin-top: .5rem; }
}
/* ---------------------------------------------------------------- hero ---- */
.hero {
background:
radial-gradient(1100px 500px at 78% -10%, rgba(169, 18, 18, .38), transparent 62%),
linear-gradient(160deg, var(--dark) 0%, var(--dark-red) 120%);
color: #c8c8d4;
padding-block: clamp(3.5rem, 7vw, 6rem) 0;
overflow: hidden;
}
.hero h1 { color: #fff; max-width: 15ch; }
.hero__grid { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: center; }
@media (min-width: 900px) { .hero__grid { grid-template-columns: 1.05fr 1fr; } }
.hero__lead { font-size: clamp(1.0625rem, 1.7vw, 1.3125rem); color: #d7d7e0; max-width: 46ch; }
.hero__note { font-size: .9375rem; color: #9a9aad; margin-top: 1.5rem; }
.hero__note strong { color: #d7d7e0; }
.hero__shot {
border-radius: var(--r-lg) var(--r-lg) 0 0;
box-shadow: 0 -2px 0 rgba(255, 255, 255, .12), 0 24px 60px rgba(0, 0, 0, .45);
border: 1px solid rgba(255, 255, 255, .14);
border-bottom: 0;
margin-bottom: -1px;
}
.hero__figure { margin: clamp(2.5rem, 5vw, 4rem) 0 0; }
.hero__figure figcaption { font-size: .875rem; color: #9a9aad; text-align: center; padding: .9rem 0 1.5rem; margin: 0; }
.clouds { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .9rem; margin-top: 2rem; font-size: .875rem; color: #9a9aad; }
.cloud-pill {
display: inline-flex; align-items: center; gap: .45rem;
border: 1px solid rgba(255, 255, 255, .2); border-radius: var(--r-full);
padding: .3rem .8rem; color: #d7d7e0;
}
.cloud-pill--soon { color: #9a9aad; border-style: dashed; }
.dot { width: .5rem; height: .5rem; border-radius: 50%; background: #3ec46d; flex: 0 0 auto; }
.dot--soon { background: #6f6f85; }
/* --------------------------------------------------------------- trust ---- */
.trust { border-bottom: 1px solid var(--border); background: var(--bg-alt); }
.trust__inner { display: grid; gap: 1.25rem 2rem; padding-block: 2rem; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.trust__item { font-size: .9375rem; }
.trust__item strong { display: block; color: var(--heading); font-size: 1.0625rem; }
.trust__note { font-size: .8125rem; color: var(--text-light); margin: 0; max-width: none; }
/* --------------------------------------------------------------- cards ---- */
.grid { display: grid; gap: clamp(1rem, 2.2vw, 1.75rem); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(265px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); }
.card {
background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--r-lg);
padding: clamp(1.25rem, 2.5vw, 1.75rem); box-shadow: var(--shadow-sm);
}
.card h3 { margin-bottom: .4rem; }
.card p:last-child { margin-bottom: 0; }
.card--plain { box-shadow: none; }
.section--dark .card { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .13); box-shadow: none; }
.num {
display: inline-flex; align-items: center; justify-content: center;
width: 2.25rem; height: 2.25rem; border-radius: var(--r-full);
background: var(--red); color: #fff; font-weight: 600; font-size: 1rem;
margin-bottom: .9rem; flex: 0 0 auto;
}
.section--dark .num { background: var(--red-light); }
.stat { font-size: clamp(2rem, 4vw, 2.75rem); font-weight: 600; color: var(--red); line-height: 1; letter-spacing: -.03em; }
.stat + p { margin-top: .5rem; font-size: .9375rem; }
.hero .card { color: var(--text); } /* white cards on the dark hero restate the body text colour */
/* ------------------------------------------------------------ features ---- */
.feature { display: grid; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; padding-block: clamp(2rem, 4vw, 3rem); }
@media (min-width: 900px) {
.feature { grid-template-columns: 5fr 7fr; }
.feature--flip .feature__text { order: 2; }
}
.feature + .feature { border-top: 1px solid var(--border); }
.feature__text ul { list-style: none; padding: 0; margin: 1.25rem 0 0; }
.feature__text li { position: relative; padding-left: 1.6rem; margin-bottom: .6rem; }
.feature__text li::before {
content: ""; position: absolute; left: 0; top: .55em;
width: .55rem; height: .55rem; border-radius: 2px; background: var(--teal); transform: rotate(45deg);
}
figure { margin: 0; }
.shot {
border: 1px solid var(--border); border-radius: var(--r-md);
box-shadow: var(--shadow-md); background: #fff; overflow: hidden;
}
.shot img { width: 100%; }
.shot-caption { font-size: .875rem; color: var(--text-light); margin: .75rem 0 0; max-width: none; }
/* a screenshot that opens larger on click; without JS it is still a link to the file */
.shot-link { display: block; position: relative; cursor: zoom-in; border-radius: var(--r-md); }
.shot-link::after {
content: "";
position: absolute; inset: 0; border-radius: var(--r-md);
box-shadow: inset 0 0 0 2px transparent; transition: box-shadow var(--ease);
}
.shot-link:hover::after { box-shadow: inset 0 0 0 2px var(--red); }
/* ------------------------------------------------------------- gallery ---- */
/* Several screenshots of one feature, side by side in a strip that scrolls sideways. Without JS
it is a scroll-snapping strip with a row of tabs that link to each slide; site.js hides the
scrollbar, adds previous/next buttons and keeps the current tab marked (.is-enhanced). */
.gallery { position: relative; min-width: 0; display: flex; flex-direction: column; }
.gallery__track {
display: flex; align-items: flex-start; gap: 3rem; list-style: none; margin: 0;
/* room for the screenshot's shadow, which the scrolling box would otherwise clip */
padding: .75rem 1.25rem 1.5rem; scroll-padding-inline: 1.25rem;
overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; overscroll-behavior-x: contain;
}
.gallery__slide { flex: 0 0 100%; min-width: 0; scroll-snap-align: start; margin: 0; }
/* a portrait screenshot (a dialog) is shown no taller than a landscape one, centred */
.gallery__slide .shot { display: block; width: fit-content; max-width: 100%; margin-inline: auto; }
.gallery__slide .shot img { display: block; width: auto; height: auto; max-width: 100%; max-height: 26rem; }
.gallery.is-enhanced .gallery__track { scrollbar-width: none; }
.gallery.is-enhanced .gallery__track::-webkit-scrollbar { display: none; }
/* the tabs sit above the strip: slides differ in height, and the space a short one leaves is then below it */
.gallery__bar { display: flex; align-items: center; gap: .75rem; order: -1; margin-bottom: .1rem; }
.gallery__tabs { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; padding: 0; margin: 0; flex: 1; }
.gallery__tabs a {
display: inline-block; font-size: .8125rem; line-height: 1.3; padding: .3rem .75rem;
border: 1px solid var(--border); border-radius: var(--r-full); color: var(--text-light);
text-decoration: none; background: var(--card-bg); transition: background var(--ease), color var(--ease), border-color var(--ease);
}
.gallery__tabs a:hover { border-color: var(--red); color: var(--red); }
.gallery__tabs a[aria-current="true"] { background: var(--red); border-color: var(--red); color: var(--white); }
.gallery__nav { display: none; gap: .4rem; }
.gallery.is-enhanced .gallery__nav { display: flex; }
.gallery__nav button {
width: 2.25rem; height: 2.25rem; border-radius: var(--r-full); border: 1px solid var(--border);
background: var(--card-bg); color: var(--heading); font-size: 1.1rem; line-height: 1; cursor: pointer;
}
.gallery__nav button:hover:not(:disabled) { border-color: var(--red); color: var(--red); }
.gallery__nav button:disabled { opacity: .35; cursor: default; }
.gallery__count { font-size: .8125rem; color: var(--text-light); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .gallery__track { scroll-behavior: auto; } }
/* --------------------------------------------------------------- steps ---- */
.steps { counter-reset: step; display: grid; gap: clamp(1rem, 2.2vw, 1.75rem); grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.step { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; }
.step__shot { background: var(--gray-100); border-bottom: 1px solid var(--border); }
.step__body { padding: 1.1rem 1.25rem 1.4rem; }
.step__body h3 { font-size: 1.0625rem; margin-bottom: .3rem; }
.step__body p { font-size: .9375rem; margin: 0; }
.step__n { font-size: .75rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--red); display: block; margin-bottom: .35rem; }
/* ---------------------------------------------------------- deployment ---- */
.split { display: grid; gap: clamp(1rem, 2.5vw, 2rem); grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.plan { display: flex; flex-direction: column; }
.plan ul { list-style: none; padding: 0; margin: 1rem 0 0; }
.plan li { position: relative; padding-left: 1.6rem; font-size: .9375rem; }
.plan li::before { content: "✓"; position: absolute; left: 0; color: var(--teal); font-weight: 700; }
.plan__tag { display: inline-block; font-size: .75rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--teal); margin-bottom: .5rem; }
/* ------------------------------------------------------------- roadmap ---- */
.roadmap { display: grid; gap: clamp(1rem, 2.5vw, 2rem); grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); }
.roadmap ul { list-style: none; padding: 0; margin: .75rem 0 0; }
.roadmap li { position: relative; padding-left: 1.5rem; font-size: .9375rem; }
.roadmap li::before { content: ""; position: absolute; left: .15rem; top: .62em; width: .5rem; height: .5rem; border-radius: 50%; background: var(--gray-300); }
.roadmap__col--now li::before { background: #3ec46d; }
.roadmap__col--next li::before { background: var(--teal); }
.roadmap__label { font-size: .75rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; }
.roadmap__col--now .roadmap__label { color: #2e9e57; }
.roadmap__col--next .roadmap__label { color: var(--teal); }
.roadmap__col--later .roadmap__label { color: var(--text-light); }
/* ----------------------------------------------------------------- faq ---- */
.faq { max-width: 52rem; }
.faq details { border-bottom: 1px solid var(--border); padding: .35rem 0; }
.faq summary {
cursor: pointer; padding: 1rem 2rem 1rem 0; font-weight: 500; color: var(--heading);
list-style: none; position: relative; font-size: 1.0625rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
content: "+"; position: absolute; right: .25rem; top: 50%; transform: translateY(-50%);
font-size: 1.5rem; font-weight: 300; color: var(--red); line-height: 1;
}
.faq details[open] summary::after { content: "–"; }
.faq summary:hover { color: var(--red); }
.faq__a { padding: 0 2rem 1.1rem 0; }
.faq__a p:last-child { margin-bottom: 0; }
/* ----------------------------------------------------------- downloads ---- */
.dl { display: flex; gap: 1rem; align-items: flex-start; text-decoration: none; color: inherit; }
.dl:hover { color: inherit; }
.dl:hover .dl__title { color: var(--red); }
.dl__icon {
flex: 0 0 auto; width: 2.75rem; height: 2.75rem; border-radius: var(--r-md);
background: #fdecea; color: var(--red); display: grid; place-items: center; font-size: .6875rem; font-weight: 700; letter-spacing: .04em;
}
.dl__title { font-weight: 600; color: var(--heading); display: block; margin-bottom: .15rem; }
.dl__meta { font-size: .8125rem; color: var(--text-light); }
/* ------------------------------------------------------------------ cta --- */
.cta { background: var(--dark); color: #c8c8d4; text-align: center; }
.cta h2 { color: #fff; }
.cta p { margin-inline: auto; }
.cta .btn-row { justify-content: center; }
.cta__mail { font-size: 1.125rem; }
.cta__mail a { color: #fff; }
/* ------------------------------------------------------------ contact form --- */
/* A white card inside the dark .cta band, so it restates colour and alignment. */
.contact-form {
max-width: 44rem; margin: 2rem auto 1.75rem; padding: clamp(1.25rem, 3vw, 2rem);
background: var(--card-bg); color: var(--text); text-align: left;
border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
}
.contact-form__grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.field { display: flex; flex-direction: column; gap: .35rem; }
.field--wide { grid-column: 1 / -1; }
.field label { font-size: .875rem; font-weight: 500; color: var(--heading); }
.field label span { color: var(--red); }
.field input, .field select, .field textarea {
font: inherit; font-size: 1rem; color: var(--heading); background: var(--white);
border: 1px solid var(--border); border-radius: var(--r-md); padding: .65rem .8rem; width: 100%;
}
.field input, .field select { height: 3rem; }
.field textarea { resize: vertical; min-height: 9rem; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible {
outline: 3px solid var(--teal); outline-offset: 1px; border-color: var(--teal);
}
/* Honeypot: off-screen rather than display:none, which some bots detect and skip */
.field--hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.cta .contact-form__note { margin: 1rem 0 0; font-size: .8125rem; color: var(--text-light); }
.contact-form__note a { color: var(--red); }
.contact-form__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; margin-top: 1.25rem; }
.contact-form__actions .btn[disabled] { opacity: .6; cursor: progress; }
.contact-form__required { font-size: .8125rem; color: var(--text-light); }
.cta .contact-form__status { margin: .75rem 0 0; font-size: .9375rem; }
.contact-form__status:empty { display: none; }
.contact-form__status.is-sent { color: #2e7d4f; font-weight: 500; }
.contact-form__status.is-error { color: var(--red-dark); font-weight: 500; }
/* --------------------------------------------------------------- footer --- */
.site-footer { background: #101020; color: #9a9aad; font-size: .9375rem; padding-block: clamp(2.5rem, 5vw, 3.5rem) 2rem; }
.site-footer a { color: #c8c8d4; text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.site-footer h4 { color: #fff; font-size: .8125rem; letter-spacing: .09em; text-transform: uppercase; margin-bottom: .9rem; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: .5rem; }
.footer__grid { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.footer__brand p { max-width: 34ch; font-size: .875rem; }
.footer__bottom {
display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: space-between;
margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid rgba(255, 255, 255, .1);
font-size: .8125rem;
}
.footer__bottom p { margin: 0; max-width: none; }
/* ------------------------------------------------------------- lightbox --- */
/* A