/* CabGrid landing — warm, friendly light design system. Shared by index/
features/register. Light is the default; [data-theme="dark"] flips to a
warm-tuned dark. Token + class names are preserved so features.html /
register.html inherit the look. No build step, no dependencies. */
:root {
--bg: #fdfbf6; /* warm off-white / cream */
--bg-2: #f6efe2; /* soft warm beige for alt sections */
--surface: #fffdf9; /* warm white cards */
--surface-2: #f6efe2;
--surface-3: #efe6d5;
--border: #ece2d0; /* warm soft border */
--border-soft: #f1ebdd;
--text: #221d15; /* warm near-black */
--text-2: #6a6153; /* warm taupe */
--text-3: #9a9080;
--muted: #b4ab98;
--brand: #f2c216;
--brand-2: #e0b00f;
--brand-on: #1a1200;
--success: #3f9d5a;
--info: #3f74c9;
--brand-ink: #957208; /* warm yellow-brown for labels/links */
--kicker-bg: rgba(242, 194, 22, .16);
--kicker-border: rgba(242, 194, 22, .38);
/* Reliability = warm honey section (replaces the dark tech band). */
--band-bg: radial-gradient(120% 140% at 50% -20%, #fdf3cf 0%, #fbf5e6 55%, #f8f0df 100%);
--band-text: #221d15;
--band-text-2: #6a6153;
--band-kicker-bg: rgba(242, 194, 22, .22);
--band-kicker-border: rgba(242, 194, 22, .45);
--maxw: 1180px;
--radius: 18px;
--radius-lg: 26px;
/* Soft, warm-tinted shadows. */
--shadow-sm: 0 1px 2px rgba(88, 66, 20, .05), 0 2px 6px rgba(88, 66, 20, .05);
--shadow: 0 2px 4px rgba(88, 66, 20, .04), 0 14px 34px -16px rgba(88, 66, 20, .18);
--shadow-lg: 0 30px 64px -28px rgba(88, 66, 20, .3), 0 10px 24px -14px rgba(88, 66, 20, .16);
--font: "Plus Jakarta Sans", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
--header-bg: rgba(253, 251, 246, .82);
--glass-bg: rgba(253, 251, 246, .7);
--section-alt-bg: var(--bg-2);
--footer-bg: var(--bg-2);
--ghost-hover-bg: rgba(34, 29, 21, .04);
/* Laptop / phone shells. */
--device: #55555e;
--device-hi: #6b6b76;
--device-lo: #3f3f47;
--device-screen: #0e0c08;
/* Pinned like the shell colour. --shadow-lg swings from a warm brown on
light to near-opaque black on dark, which put a heavy halo around the
laptop and made the same grey read differently between themes. */
--device-shadow: 0 30px 64px -28px rgba(0, 0, 0, .38), 0 10px 24px -14px rgba(0, 0, 0, .22);
}
/* Dark theme — opt-in via (warm-tuned). */
[data-theme="dark"] {
--bg: #14110c;
--bg-2: #1a1610;
--surface: #1e1913;
--surface-2: #241e16;
--surface-3: #2c251b;
--border: #322a1f;
--border-soft: #262019;
--text: #f3ede1;
--text-2: #b8ac97;
--text-3: #857c6c;
--muted: #5f5748;
--brand-2: #ffd534;
--success: #57c97a;
--info: #6f9be0;
--brand-ink: #f2c216;
--kicker-bg: rgba(242, 194, 22, .14);
--kicker-border: rgba(242, 194, 22, .3);
--band-bg: radial-gradient(120% 140% at 50% -20%, #2a2114 0%, #1a1610 70%);
--band-text: #f3ede1;
--band-text-2: #b8ac97;
--band-kicker-bg: rgba(242, 194, 22, .18);
--band-kicker-border: rgba(242, 194, 22, .34);
--shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
--shadow: 0 2px 6px rgba(0, 0, 0, .4), 0 18px 40px -22px rgba(0, 0, 0, .7);
--shadow-lg: 0 40px 80px -30px rgba(0, 0, 0, .8), 0 12px 30px -16px rgba(0, 0, 0, .6);
--header-bg: rgba(20, 17, 12, .78);
--glass-bg: rgba(26, 22, 16, .72);
--ghost-hover-bg: rgba(255, 255, 255, .03);
/* The device shell deliberately does NOT flip with the theme — one grey in
both, so the laptop reads the same wherever it appears. On dark that is
2.55:1 against the page rather than the 5.5:1 a lighter shell would give;
fine for a large decorative shape with a shadow under it, and it stays
well clear of the ~1:1 near-black that made it invisible before. */
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
/* The header is sticky at 70px, so a bare anchor lands with its heading
hidden behind it. This fixes #pricing and #faq too, which already had it. */
[id] { scroll-margin-top: 88px; }
body {
margin: 0; background: var(--bg); color: var(--text);
font-family: var(--font); line-height: 1.6; -webkit-font-smoothing: antialiased;
overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { letter-spacing: -0.02em; line-height: 1.08; margin: 0; }
::selection { background: rgba(242,194,22,.3); }
.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 28px; }
.container.narrow { max-width: 760px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* ---- Brand / logo -------------------------------------------------------- */
.brand { display: inline-flex; align-items: center; gap: 11px; }
.logo-mark { width: 36px; height: 36px; display: block; flex: none; }
.wm { font-weight: 800; letter-spacing: -0.03em; font-size: 22px; }
.wm b { color: var(--brand); font-weight: 800; }
.wm i { color: var(--text); font-style: normal; }
/* ---- Buttons ------------------------------------------------------------- */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 9px;
padding: 12px 22px; border-radius: 999px; font-weight: 700; font-size: 14.5px;
font-family: inherit; cursor: pointer; border: 1.5px solid transparent;
transition: transform .12s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease; white-space: nowrap;
}
.btn:active { transform: scale(.975); }
.btn svg { width: 18px; height: 18px; }
.btn-lg { padding: 15px 28px; font-size: 16px; }
.btn-primary { background: var(--brand); color: var(--brand-on); box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--brand-2); box-shadow: var(--shadow); }
.btn-ghost { background: var(--surface); color: var(--text); border-color: var(--border); }
.btn-ghost:hover { border-color: var(--text-3); background: var(--ghost-hover-bg); }
/* Third-tier button. The hero carries three CTAs and they must not read as
equal weight — this one only moves you down the page, so it gets no fill
and no border. */
.btn-quiet { background: transparent; color: var(--text-2); border-color: transparent; }
.btn-quiet:hover { color: var(--text); background: var(--ghost-hover-bg); }
.btn-quiet svg { width: 16px; height: 16px; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 8px; }
/* ---- Header -------------------------------------------------------------- */
.site-header {
position: sticky; top: 0; z-index: 50;
background: var(--header-bg); backdrop-filter: saturate(160%) blur(14px);
border-bottom: 1px solid var(--border-soft);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; height: 70px; gap: 20px; }
.nav { display: flex; align-items: center; gap: 24px; }
.nav a:not(.btn) { color: var(--text-2); font-size: 14.5px; font-weight: 600; transition: color .15s; }
.nav a:not(.btn):hover { color: var(--text); }
.lang-select {
background: var(--surface); color: var(--text); border: 1px solid var(--border);
border-radius: 12px; padding: 8px 11px; font-size: 13px; font-weight: 600; font-family: inherit; cursor: pointer;
}
.hamburger { display: none; flex-direction: column; gap: 5px; background: none; border: 0; padding: 8px; cursor: pointer; }
.hamburger span { width: 24px; height: 2px; background: var(--text); border-radius: 2px; }
.header-actions { display: flex; align-items: center; gap: 14px; }
.theme-toggle {
display: inline-grid; place-items: center; flex: none;
width: 40px; height: 40px; padding: 0;
background: var(--surface); color: var(--text);
border: 1px solid var(--border); border-radius: 999px; cursor: pointer;
transition: border-color .15s ease, background .15s ease;
}
.theme-toggle:hover { border-color: var(--text-3); }
.theme-toggle svg { width: 19px; height: 19px; display: block; }
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: block; }
[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
/* ---- Hero (centered) ----------------------------------------------------- */
.hero { position: relative; padding: 108px 0 96px; overflow: hidden; text-align: center; }
/* The features hero has no CTAs under its lede, so the bottom padding —
sized to sit below a row of buttons — reads as a gap where something
was removed. index.html keeps the full spacing; it still has them. */
.hero.hero-plain { padding-bottom: 28px; }
.hero::before {
content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
background:
radial-gradient(860px 500px at 50% -12%, rgba(242,194,22,.22), transparent 60%),
radial-gradient(640px 420px at 50% 116%, rgba(245,178,120,.08), transparent 62%);
}
.hero-inner { position: relative; z-index: 1; }
.hero-copy { max-width: 820px; margin: 0 auto; }
.hero h1 { font-size: clamp(40px, 5.6vw, 66px); margin: 0 0 22px; letter-spacing: -0.035em; line-height: 1.04; }
.hero h1 .accent { color: var(--brand); }
.lede { font-size: clamp(17px, 2.1vw, 21px); color: var(--text-2); margin: 0 auto 32px; max-width: 54ch; }
.hero-cta { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
.hero-more { margin-top: 16px; text-align: center; }
/* ---- Device frames ------------------------------------------------------- */
/* Screenshots sit in a laptop or a phone rather than floating as bare images.
That is not decoration: a full console shrunk into this column is far too
small to read, and inside a device that reads as intended — nobody expects
to read a laptop across a room — where a bare image would just look
low-resolution. It also shows less of the product than a legible crop.
Built in CSS, not an image: sharp at any size, recolours from one token,
costs no bytes. Straight-on, no perspective — depth comes from how the
shell is lit, not from tilting it. A tilt skews the screenshot; shading
does not. */
.laptop { width: 100%; max-width: 560px; }
/* Bezel is padding over a gradient rather than a flat border, so the shell
catches light down its length instead of reading as a printed outline.
The inset pair is the material: a bright top edge where light lands, a
dark bottom edge where it falls away. */
.laptop-screen {
position: relative; aspect-ratio: 16 / 10; padding: 6px;
background: linear-gradient(160deg, var(--device-hi) 0%, var(--device) 46%, var(--device-lo) 100%);
border-radius: 12px 12px 6px 6px;
box-shadow:
var(--device-shadow),
inset 0 1px 0 rgba(255, 255, 255, .28),
inset 0 -1px 0 rgba(0, 0, 0, .35);
}
.laptop-screen img {
width: 100%; height: 100%; object-fit: cover; object-position: top center;
display: block; border-radius: 6px; background: var(--device-screen);
}
/* Glass. One soft diagonal sheen across the panel, plus a hairline inner
edge so the screen sits *in* the bezel rather than on it. */
.laptop-screen::after {
content: ""; position: absolute; inset: 6px; border-radius: 6px; pointer-events: none;
background: linear-gradient(122deg,
rgba(255,255,255,.13) 0%, rgba(255,255,255,.05) 24%, transparent 48%);
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .45);
}
.laptop-notch {
position: absolute; top: 1px; left: 50%; transform: translateX(-50%);
width: 78px; height: 4px; border-radius: 0 0 4px 4px;
background: rgba(0, 0, 0, .34); z-index: 2;
}
/* Deck. Wider than the lid, as a real laptop is, with a brushed highlight
running across it and a finger groove in the front lip. */
.laptop-base {
position: relative; height: 13px; margin: 0 -7%;
border-radius: 0 0 12px 12px;
background:
linear-gradient(180deg, var(--device-hi) 0%, var(--device) 42%, var(--device-lo) 100%);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, .3),
0 10px 22px -10px rgba(0, 0, 0, .5);
}
.laptop-base::after {
content: ""; position: absolute; left: 50%; transform: translateX(-50%);
bottom: 0; width: 92px; height: 4px; border-radius: 4px 4px 0 0;
background: rgba(0, 0, 0, .32);
}
/* Phone: same shell, same light. */
.device-phone {
width: 214px; flex: none; padding: 6px; border-radius: 36px;
background: linear-gradient(154deg, var(--device-hi) 0%, var(--device) 48%, var(--device-lo) 100%);
box-shadow:
var(--device-shadow),
inset 0 1px 0 rgba(255, 255, 255, .26),
inset 0 -1px 0 rgba(0, 0, 0, .35);
}
.device-phone .phone-screen {
position: relative; aspect-ratio: 9 / 19.5; border-radius: 30px; overflow: hidden;
background: var(--device-screen);
}
.device-phone .phone-screen img { width: 100%; height: 100%; object-fit: cover; display: block; }
.device-phone .phone-screen::after {
content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: 30px;
background: linear-gradient(128deg,
rgba(255,255,255,.12) 0%, rgba(255,255,255,.04) 22%, transparent 46%);
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .4);
}
/* One capture per theme; the landing sets data-theme="dark" on . Two
![]()
rather than + prefers-color-scheme, which follows the OS and
would ignore the page toggle. Both decoded means no flash when switching.
These selectors name the element on purpose. `.shot-dark` alone is (0,1,0)
and loses to `.laptop-screen img` at (0,1,1), so display:block won and BOTH
captures rendered — stacked, since they are in flow, which also collapsed
the 16:10 shell. Matching the parent puts these at (0,2,1). */
.laptop-screen img.shot-dark,
.phone-screen img.shot-dark { display: none; }
:root[data-theme="dark"] .laptop-screen img.shot-light,
:root[data-theme="dark"] .phone-screen img.shot-light { display: none; }
:root[data-theme="dark"] .laptop-screen img.shot-dark,
:root[data-theme="dark"] .phone-screen img.shot-dark { display: block; }
/* ---- Trust strip --------------------------------------------------------- */
.chip { font-size: 13.5px; font-weight: 700; color: var(--text-2); padding: 9px 18px; border: 1px solid var(--border); border-radius: 999px; display: inline-flex; align-items: center; gap: 9px; background: var(--surface); box-shadow: var(--shadow-sm); }
.chip svg { width: 16px; height: 16px; color: var(--brand-ink); }
/* ---- Facts strip (real product numbers under the hero) ------------------- */
/* ---- Sections ------------------------------------------------------------ */
.section { padding: 100px 0; }
.section-alt { background: var(--section-alt-bg); border-top: 1px solid var(--border-soft); border-bottom: 1px solid var(--border-soft); }
.section-head { text-align: center; max-width: 640px; margin: 0 auto 56px; }
/* Eyebrow labels: plain small caps in the warm accent, no pill. */
.kicker { display: inline-block; font-size: 12.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--brand-ink); margin: 0 0 14px; }
.section-title { font-size: clamp(30px, 4.2vw, 46px); margin: 0 0 14px; letter-spacing: -0.03em; line-height: 1.08; }
.section-sub { color: var(--text-2); margin: 0; font-size: 18px; }
.grid { display: grid; gap: 20px; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
/* ---- Product spotlights (alternating copy + product) --------------------- */
.spotlight { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.spotlight.reverse .spot-copy { order: 2; }
.spot-visual { display: flex; justify-content: center; align-items: center; }
.spotlight + .spotlight { margin-top: 88px; }
.spot-copy .kicker { margin-bottom: 18px; }
.spot-copy h2 { font-size: clamp(26px, 3.2vw, 38px); letter-spacing: -0.025em; line-height: 1.1; }
.spot-copy > p { margin: 16px 0 0; font-size: 17.5px; color: var(--text-2); }
.spot-list { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 14px; }
.spot-list li { display: flex; gap: 12px; align-items: flex-start; font-weight: 500; color: var(--text-2); font-size: 15.5px; }
.spot-list svg { width: 21px; height: 21px; flex: none; color: var(--brand-ink); margin-top: 1px; }
/* ---- Feature cards ------------------------------------------------------- */
.card {
background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
padding: 28px; box-shadow: var(--shadow-sm); transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.card:hover { border-color: var(--kicker-border); transform: translateY(-3px); box-shadow: var(--shadow); }
.card .ic { width: 52px; height: 52px; border-radius: 16px; background: var(--kicker-bg); color: var(--brand-ink); display: grid; place-items: center; margin-bottom: 20px; }
.card .ic svg { width: 26px; height: 26px; }
.card h3 { font-size: 19px; margin: 0 0 8px; letter-spacing: -0.01em; }
.card p { margin: 0; color: var(--text-2); font-size: 14.5px; line-height: 1.6; }
.card-link { display: flex; flex-direction: column; }
.card-more { margin-top: auto; padding-top: 16px; color: var(--brand-ink); font-weight: 700; font-size: 13.5px; display: inline-flex; align-items: center; gap: 6px; }
.card-link:hover .card-more { gap: 9px; }
/* Compact capability list inside feature cards */
.card-list { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.card-list li { position: relative; padding-left: 25px; font-size: 14px; line-height: 1.5; color: var(--text-2); }
.card-list li::before { content: ""; position: absolute; left: 0; top: 3px; width: 15px; height: 15px; background: var(--brand);
-webkit-mask: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6 9 17l-5-5' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
mask: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6 9 17l-5-5' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
/* ---- Reliability band (warm honey, not a dark tech band) ------------------ */
.reliability { padding: 96px 0; background: var(--band-bg); color: var(--band-text); position: relative; border-top: 1px solid var(--border-soft); border-bottom: 1px solid var(--border-soft); }
.reliability-inner { max-width: 820px; position: relative; text-align: center; margin: 0 auto; }
.reliability h2 { font-size: clamp(28px, 3.6vw, 38px); margin: 0 0 14px; color: var(--band-text); letter-spacing: -0.02em; }
.reliability p { color: var(--band-text-2); font-size: 18px; margin: 0 auto; max-width: 60ch; }
/* ---- Pricing plans ------------------------------------------------------- */
.pricing-grid { max-width: 900px; margin: 0 auto; align-items: stretch; gap: 24px; }
.price-card { display: flex; flex-direction: column; text-align: left; padding: 40px 38px; }
.card.price-card-plus { border-color: var(--brand); border-width: 2px; }
/* Scoped to .card so it beats `.card p` (line 263), which sets 14.5px and has
the higher specificity of the two — a bare `.price-name` lost to it, so the
plan name had been rendering at body size and the 2.15rem here never
applied. Kept as one rule rather than !important so the cascade stays
readable. */
.card .price-name { font-size: 2.6rem; font-weight: 800; letter-spacing: -.03em; color: var(--text); margin: 0 0 12px; line-height: 1.1; }
.price-desc { color: var(--text-2); font-weight: 600; font-size: 15px; line-height: 1.55; margin: 0; }
.price-list { list-style: none; margin: 26px 0 36px; padding: 26px 0 0; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 20px; }
.price-list li { position: relative; padding-left: 30px; font-size: 15px; line-height: 1.5; color: var(--text); }
.price-list li::before { content: ""; position: absolute; left: 0; top: 2px; width: 18px; height: 18px; background: var(--brand);
-webkit-mask: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6 9 17l-5-5' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
mask: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6 9 17l-5-5' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.price-cta { margin-top: auto; width: 100%; }
/* ---- FAQ ----------------------------------------------------------------- */
.faq { display: flex; flex-direction: column; gap: 12px; margin-top: 40px; }
.faq details { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 4px 24px; box-shadow: var(--shadow-sm); transition: border-color .15s; }
.faq details[open] { border-color: var(--kicker-border); }
.faq summary { cursor: pointer; font-weight: 700; font-size: 16px; padding: 19px 0; list-style: none; position: relative; padding-right: 34px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 2px; top: 50%; width: 13px; height: 13px; margin-top: -6px;
background: var(--brand-ink); -webkit-mask: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5v14M5 12h14' stroke='black' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
mask: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5v14M5 12h14' stroke='black' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(135deg); }
.faq details p { margin: 0 0 18px; color: var(--text-2); font-size: 15px; }
/* ---- CTA ----------------------------------------------------------------- */
.cta { padding: 108px 0; }
.cta-inner { position: relative; max-width: 1120px; margin: 0 auto; text-align: center; background: var(--brand); border-radius: 32px; padding: 76px 32px; overflow: hidden; }
.cta-inner::before { content: ""; position: absolute; inset: 0; background: radial-gradient(600px 320px at 50% 130%, rgba(255,255,255,.4), transparent 60%); pointer-events: none; }
.cta h2 { position: relative; font-size: clamp(30px, 4.2vw, 46px); margin: 0 0 14px; color: var(--brand-on); letter-spacing: -0.03em; }
.cta p { position: relative; color: var(--brand-on); opacity: .78; margin: 0 0 30px; font-size: 18px; }
.cta .btn { position: relative; background: var(--brand-on); color: #fff; }
.cta .btn:hover { background: #000; }
/* ---- Footer -------------------------------------------------------------- */
.site-footer { border-top: 1px solid var(--border-soft); background: var(--footer-bg); }
.footer-inner { display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap; padding: 56px 28px 32px; }
.footer-brand { max-width: 320px; }
.footer-brand .brand { margin-bottom: 14px; }
.footer-brand p { color: var(--text-2); font-size: 14px; margin: 0; }
.footer-nav { display: flex; gap: 24px; flex-wrap: wrap; align-items: flex-start; }
.footer-nav a { color: var(--text-2); font-size: 14px; font-weight: 600; }
.footer-nav a:hover { color: var(--text); }
.footer-bottom { padding: 20px 28px 40px; color: var(--muted); font-size: 13px; border-top: 1px solid var(--border-soft); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
}
/* ---- Long-form prose (privacy) ------------------------------------------- */
.prose { margin-top: 36px; }
.prose h2 { font-size: 20px; margin: 34px 0 10px; }
.prose p, .prose li { color: var(--text-2); font-size: 16px; }
.prose p { margin: 0 0 14px; }
.prose ul { margin: 0 0 14px; padding-left: 20px; display: grid; gap: 8px; }
.prose a { color: var(--brand-ink); text-decoration: underline; text-underline-offset: 2px; }
.prose strong { color: var(--text); }
/* ---- Environment banner --------------------------------------------------- */
/* Shown only when config.js carries an envLabel, so production renders nothing
at all. In normal flow rather than fixed: it is seen on arrival, which is when
it matters, and it never covers a CTA or fights the sticky header. */
.envbar {
background: #7a2012; color: #fff9f0;
font-size: 14px; font-weight: 600; text-align: center;
padding: 10px 18px; line-height: 1.45;
}
.envbar strong { color: #ffd534; letter-spacing: .04em; }
/* ---- Responsive ---------------------------------------------------------- */
@media (max-width: 960px) {
.hero { padding: 68px 0 64px; }
.lede { max-width: none; }
.grid-3 { grid-template-columns: repeat(2, 1fr); }
.spotlight, .spotlight.reverse .spot-copy { grid-template-columns: 1fr; gap: 36px; order: 0; }
.spot-visual { order: -1; }
.spotlight + .spotlight { margin-top: 72px; }
}
@media (max-width: 760px) {
/* The closed menu used to be hidden by pushing it off-screen:
`position: fixed; inset: 70px 0 auto 0; transform: translateY(-130%)`.
That relied on two things that are not true.
1. It assumed the viewport was the containing block. `.site-header` has a
`backdrop-filter`, and any non-none backdrop-filter makes an element the
containing block for `position: fixed` descendants — so `70px` was
measured from the header, not the screen. On dev the env banner pushes
the header ~101px down the page, and the closed menu's bottom edge
landed 97px INSIDE the viewport: the Sign in button appeared above the
header, outside the hamburger, which is what this looked like.
2. -130% of the panel's own height only clears a 70px offset when the panel
is at least 233px tall. Ours measured 246.8px — a 4px margin. Even
without the banner it was one line-height away from leaking.
Anchoring to the header instead is correct by construction: `position:
sticky` already makes it a positioned ancestor, so `top: 100%` puts the
panel directly under the bar wherever the bar happens to be, at any panel
height, banner or no banner. */
.nav {
position: absolute; top: 100%; left: 0; right: 0;
flex-direction: column; align-items: stretch; gap: 4px;
background: var(--surface); border-bottom: 1px solid var(--border); padding: 16px 24px 24px;
box-shadow: var(--shadow);
/* Hidden by visibility rather than by being moved somewhere off-screen:
there is no distance to overshoot, and it also takes the closed menu out
of the tab order and the accessibility tree — which the transform never
did, so the links were reachable by keyboard and screen reader while the
menu looked shut. */
opacity: 0; visibility: hidden; pointer-events: none;
transform: translateY(-8px);
transition: opacity .18s ease, transform .22s ease, visibility 0s linear .22s;
}
.nav.open {
opacity: 1; visibility: visible; pointer-events: auto;
transform: translateY(0);
transition: opacity .18s ease, transform .22s ease, visibility 0s;
}
.nav a:not(.btn) { padding: 11px 0; }
.nav .btn-primary { margin-top: 8px; }
.hamburger { display: flex; }
.grid-3, .grid-2 { grid-template-columns: 1fr; }
.section { padding: 68px 0; }
.ph { grid-template-columns: 44px 1fr; }
.ph-map { display: none; }
}
/* ── Contact modal ─────────────────────────────────────────────────────
Opened by the "Contact us" CTA; also the fallback when the demo-booking
link is unset or its script fails to load, so a CTA is never dead. */
.modal-backdrop {
position: fixed; inset: 0; z-index: 100;
background: rgba(34, 29, 21, .5);
display: flex; align-items: center; justify-content: center; padding: 1rem;
}
.modal-backdrop[hidden] { display: none; }
.modal {
background: var(--surface); color: var(--text);
border: 1px solid var(--border); border-radius: var(--radius);
padding: 2rem; position: relative;
width: 100%; max-width: 34rem; max-height: 90vh; overflow-y: auto;
box-shadow: 0 24px 60px rgba(34, 29, 21, .18);
}
.modal h2 { margin: 0 0 .35rem; }
.modal .modal-sub { margin: 0 0 1rem; color: var(--muted); }
.modal-close {
position: absolute; top: .6rem; right: .9rem;
background: none; border: 0; font-size: 1.6rem; line-height: 1;
cursor: pointer; color: var(--muted); padding: .2rem .4rem; border-radius: 8px;
}
.modal-close:hover { color: var(--text); }
.modal label { display: block; margin-top: .9rem; font-weight: 600; font-size: .95rem; }
.modal input, .modal select, .modal textarea {
width: 100%; margin-top: .3rem; padding: .6rem .75rem;
font: inherit; color: inherit; background: var(--bg);
border: 1px solid var(--border); border-radius: 10px;
}
.modal input:focus, .modal select:focus, .modal textarea:focus,
.modal-close:focus-visible { outline: 2px solid var(--brand-ink); outline-offset: 2px; }
.modal .btn { margin-top: 1.25rem; width: 100%; }
.form-error { margin-top: .8rem; color: #b3261e; font-size: .95rem; }
.form-error[hidden] { display: none; }
/* Success panel shared by the signup form (register.html) and the "Talk to
us" modal. Lives here rather than in register.html's scoped