/* ────────────────────────────────────────────────────────────────────
Linq public marketing site — design tokens + page styles.
Used ONLY by templates under templates/marketing_public/.
The in-app UI is unaffected by this file.
──────────────────────────────────────────────────────────────────── */
:root {
--bone: #F2EBDF;
--bone-warm: #EAE2CE;
--bone-soft: #F7F3EA;
--ink: #0F1623;
/* Brand v1.0: ink-2 is the hover/pressed and "lifted chip" surface
that sits inside an ink slab. Used for the hero eyebrow, the loop
card on the hero, and any other inset on a dark ground. */
--ink-2: #1B2230;
--ink-soft: #2A2C33;
--ink-muted: rgba(15,22,35,0.62);
--ink-faint: rgba(15,22,35,0.42);
--signal: #EA6A2C;
--signal-deep: #C9551F;
--ocean: #3B5BDB;
--sage: #1F9D55;
--line: rgba(15,22,35,0.12);
--line-soft: rgba(15,22,35,0.06);
--line-strong: rgba(15,22,35,0.22);
--font-display: 'Public Sans', system-ui, -apple-system, sans-serif;
--font-mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;
/* VIO sub-brand accent — used only on VIO-specific surfaces. The
wider Linq palette stays Bone/Ink/Signal so the rest of the site
stays cohesive. */
--vio: #5B4FE9;
--vio-deep: #3F35C2;
--wrap: 1240px;
--gutter: clamp(20px, 4vw, 56px);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body.linq-marketing {
font-family: var(--font-display);
background: var(--bone);
color: var(--ink);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
line-height: 1.5;
font-weight: 400;
/* `overflow-x: clip` keeps horizontal overflow contained without
breaking sticky positioning on descendants (which `hidden` does). */
overflow-x: clip;
}
body.linq-marketing::before {
content: '';
position: fixed; inset: 0; pointer-events: none; z-index: 0;
background:
radial-gradient(800px 600px at 88% 6%, rgba(234,106,44,0.04), transparent 60%),
radial-gradient(700px 500px at 4% 92%, rgba(59,91,219,0.03), transparent 60%);
}
body.linq-marketing main,
body.linq-marketing footer,
body.linq-marketing section { position: relative; z-index: 1; }
/* Header sits above sections (z-index 100) so the dark hero, which
pulls itself up via negative margin, doesn't paint over the nav. */
body.linq-marketing > .lq-header { position: sticky; top: 0; z-index: 100; }
/* Reset main spacing so the dark hero starts exactly at viewport top
(no 0.8px sub-pixel sliver above it). */
body.linq-marketing main { margin: 0; padding: 0; line-height: 0; }
body.linq-marketing main > * { line-height: 1.5; }
/* ─── Wordmark ─────────────────────────────────────────────────────── */
.wordmark {
display: inline-flex; align-items: baseline; gap: 0;
font-family: var(--font-display);
font-weight: 600;
letter-spacing: -0.045em;
color: var(--ink);
line-height: 1;
text-decoration: none;
}
.wordmark .wm-letters { display: inline-block; }
.wordmark .wm-tab {
display: inline-block;
width: 0.22em; height: 0.22em;
background: var(--signal);
margin-left: 0.05em;
transform: translateY(0.05em);
border-radius: 1px;
}
.wordmark--md { font-size: 1.5rem; }
.wordmark--lg { font-size: 2.25rem; }
.wordmark--xl { font-size: clamp(5rem, 12vw, 10rem); letter-spacing: -0.06em; font-weight: 600; }
/* Image-based wordmark (the actual brand asset). Sized to the wordmark's
font-size so it scales the same way the CSS-typed wordmark used to.
We render two ![]()
tags — bone (cream-on-dark) + ink (dark-on-cream) —
and swap visibility based on the surface underneath the header. */
.wordmark .wm-img {
height: 1.4em;
width: auto;
display: block;
}
/* Default everywhere (Bone surface): show the ink wordmark. */
.wordmark .wm-img--bone { display: none; }
.wordmark .wm-img--ink { display: block; }
/* Flip to the bone wordmark whenever the header band is currently sitting
over a dark surface — the original dark hero (home page) AND any other
dark slab the visitor has scrolled the header over (rate promo, dots,
book section, CTA banner). The home-page dark hero pre-scroll uses the
first selector; the scroll-tracking JS adds body.lq-over-dark for the
rest, on every page that has dark slabs. */
body.has-dark-hero:not(.past-hero) .lq-header .wordmark .wm-img--bone,
body.lq-over-dark .lq-header .wordmark .wm-img--bone { display: block; }
body.has-dark-hero:not(.past-hero) .lq-header .wordmark .wm-img--ink,
body.lq-over-dark .lq-header .wordmark .wm-img--ink { display: none; }
/* Footer sits on Bone — only the ink variant ships in the markup. */
.lq-footer .wordmark .wm-img { height: 1.6em; }
/* ─── Layout primitives ────────────────────────────────────────────── */
.lq-wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.eyebrow {
font-family: var(--font-mono);
font-size: 0.7rem;
font-weight: 400;
text-transform: uppercase;
letter-spacing: 0.16em;
color: var(--ink-muted);
}
.eyebrow .dot {
display: inline-block;
width: 6px; height: 6px;
background: var(--signal);
border-radius: 50%;
vertical-align: middle;
margin-right: 0.6em;
transform: translateY(-1px);
}
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.025em; line-height: 1.05; }
.h-display { font-size: clamp(2.6rem, 5.4vw, 5.4rem); font-weight: 600; letter-spacing: -0.045em; line-height: 0.98; }
.h-hero { font-size: clamp(3rem, 6.8vw, 6.4rem); font-weight: 600; letter-spacing: -0.05em; line-height: 0.96; }
.h-section { font-size: clamp(2rem, 3.6vw, 3.2rem); font-weight: 600; letter-spacing: -0.035em; line-height: 1.05; }
p { color: var(--ink-soft); }
.lead { font-size: clamp(1.1rem, 1.5vw, 1.32rem); color: var(--ink-soft); line-height: 1.55; max-width: 60ch; }
/* ─── Buttons ──────────────────────────────────────────────────────── */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
font-family: var(--font-display);
font-weight: 500;
font-size: 0.95rem;
/* Slightly trimmed vertical padding — the previous 0.85em / 1.05em
read tall on mobile where the lines are punchy. */
padding: 0.65em 1.5em;
border-radius: 999px;
border: 1px solid transparent;
cursor: pointer;
text-decoration: none;
transition: transform 0.15s ease, background-color 0.15s ease,
background-image 0.15s ease, color 0.15s ease,
border-color 0.15s ease, box-shadow 0.15s ease;
white-space: nowrap;
}
.btn--primary { background: var(--ink); color: var(--bone); }
.btn--primary:hover { background: var(--ink-soft); transform: translateY(-1px); }
/* Signal (orange) buttons get a subtle 135° gradient for depth +
a soft signal-tinted shadow so they read as a lifted CTA on cream
surfaces and as a bright accent on ink. The colour stops stay close
to var(--signal) / var(--signal-deep) so the brand reads as one
accent, not a multi-stop gradient. */
.btn--signal,
body.has-dark-hero:not(.past-hero) .lq-header .btn--primary,
body.lq-over-dark .lq-header .btn--primary {
background: linear-gradient(135deg, #F2823F 0%, var(--signal) 50%, var(--signal-deep) 100%);
color: var(--bone);
box-shadow: 0 6px 16px -8px rgba(234,106,44,0.55), inset 0 1px 0 rgba(255,255,255,0.10);
}
.btn--signal:hover,
body.has-dark-hero:not(.past-hero) .lq-header .btn--primary:hover,
body.lq-over-dark .lq-header .btn--primary:hover {
background: linear-gradient(135deg, var(--signal) 0%, var(--signal-deep) 100%);
color: var(--bone);
transform: translateY(-1px);
box-shadow: 0 8px 18px -8px rgba(234,106,44,0.62), inset 0 1px 0 rgba(255,255,255,0.10);
}
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn--ghost:hover { border-color: var(--ink); }
.btn--lg { font-size: 1.05rem; padding: 0.85em 1.85em; }
.btn .arrow { font-size: 1.1em; transition: transform 0.2s; }
.btn:hover .arrow { transform: translateX(3px); }
/* ─── Header / nav ─────────────────────────────────────────────────── */
/* Default: Bone-glass background + Ink text + Ink wordmark. Works on
every page that doesn't have a dark hero (/events, /features,
/pricing, /about, /contact, /privacy, /terms).
The dark-hero treatment (transparent + Bone wordmark + Bone nav)
only activates on the home page, which sets body.has-dark-hero, and
only while the user hasn't scrolled past the hero (body.past-hero
added by JS in _base.html). Past-hero on home reverts to default. */
.lq-header {
position: sticky; top: 0; z-index: 100;
/* Transparent at the top — page hero shows through. Glass-on-scroll
handled by `.lq-header.is-scrolled` (toggled by 8px-threshold JS in
marketing _base.html). */
background: transparent;
backdrop-filter: none;
-webkit-backdrop-filter: none;
border-bottom: 1px solid transparent;
transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, backdrop-filter 0.18s ease;
}
/* Glass on scroll — frosted Bone for default pages. Bone tint is the
marketing surface; ink-themed pages (home + dark-zone overlap) take
the ink-glass override below. */
.lq-header.is-scrolled {
background: rgba(242,237,226,0.78);
-webkit-backdrop-filter: saturate(180%) blur(18px);
backdrop-filter: saturate(180%) blur(18px);
border-bottom-color: var(--line-soft);
}
.lq-header .wordmark,
.lq-header .nav-links a,
.lq-header .nav-signin {
color: var(--ink);
transition: color 0.18s ease;
}
.lq-header .nav-links a:hover { color: var(--ink); }
.lq-header .nav-signin:hover { background: var(--bone-warm); }
.lq-header .nav-toggle { color: var(--ink); border-color: var(--line-strong); }
.lq-header .btn--primary { background: var(--ink); color: var(--bone); }
.lq-header .btn--primary:hover { background: var(--ink-soft); }
/* Header treatment when the band is currently sitting over a dark
surface AND the user has scrolled past the top. Two triggers:
1. body.has-dark-hero:not(.past-hero) — home page, still over the
original dark hero (initial load).
2. body.lq-over-dark — scroll observer detected the header band is
currently overlapping a .lq-dark-zone section (rate promo,
dots, book section, cta banner). Works on any page.
Both are gated on `.lq-header.is-scrolled` so at the very top the
header stays fully transparent — the glass only appears once the
user starts scrolling. */
body.has-dark-hero:not(.past-hero) .lq-header.is-scrolled,
body.lq-over-dark .lq-header.is-scrolled {
/* Frosted-ink glass — semi-transparent so the surface beneath
blurs through, no harsh switch from "transparent" to "solid".
saturate dropped from 180% (which amplified the blue undertone of
#0F1623) to 120% which keeps the section colour reading true. */
background: rgba(15,22,35,0.62);
border-bottom-color: rgba(242,237,226,0.06);
backdrop-filter: saturate(120%) blur(16px);
-webkit-backdrop-filter: saturate(120%) blur(16px);
}
/* Home hero block intentionally empty — the new default `.lq-header`
rule already paints transparent at the top. The is-scrolled +
has-dark-hero combo above handles the ink-glass on scroll. */
body.has-dark-hero:not(.past-hero) .lq-header .wordmark,
body.has-dark-hero:not(.past-hero) .lq-header .nav-links a,
body.has-dark-hero:not(.past-hero) .lq-header .nav-signin,
body.lq-over-dark .lq-header .wordmark,
body.lq-over-dark .lq-header .nav-links a,
body.lq-over-dark .lq-header .nav-signin {
color: var(--bone);
}
body.has-dark-hero:not(.past-hero) .lq-header .nav-links a:hover,
body.lq-over-dark .lq-header .nav-links a:hover { color: #FFFFFF; }
body.has-dark-hero:not(.past-hero) .lq-header .nav-signin:hover,
body.lq-over-dark .lq-header .nav-signin:hover { background: rgba(242,237,226,0.08); }
body.has-dark-hero:not(.past-hero) .lq-header .nav-toggle,
body.lq-over-dark .lq-header .nav-toggle { color: var(--bone); border-color: rgba(242,237,226,0.22); }
/* Note: the .btn--primary background swap to gradient signal is handled
in the .btn--signal block above (combined selector list) so a single
rule defines the gradient + shadow once. */
.nav-row {
display: flex; align-items: center; justify-content: space-between;
height: 72px;
gap: 32px;
}
.nav-links { display: flex; align-items: center; gap: 28px; list-style: none; }
.nav-links a { font-size: 0.94rem; color: var(--ink-soft); text-decoration: none; font-weight: 500; transition: color 0.15s; }
.nav-links a:hover { color: var(--ink); }
.nav-links a.is-active { color: var(--ink); }
.nav-cta { display: flex; align-items: center; gap: 12px; }
.nav-signin {
font-size: 0.94rem; color: var(--ink); text-decoration: none; font-weight: 500;
padding: 0.5em 0.9em; border-radius: 999px; transition: background 0.15s;
}
.nav-signin:hover { background: var(--bone-warm); }
.nav-toggle {
display: none;
background: transparent; border: 1px solid var(--line-strong);
border-radius: 999px; width: 40px; height: 40px;
align-items: center; justify-content: center;
color: var(--ink); cursor: pointer;
}
/* Backdrop scrim + mobile drawer.
Lives OUTSIDE .lq-header in the DOM so it isn't trapped in the
header's stacking context (z-index: 100). */
.lq-nav-drawer { display: none; }
.lq-nav-scrim { display: none; }
@media (max-width: 760px) {
.nav-cta .nav-signin { display: none; }
.nav-toggle { display: inline-flex; }
/* Hide the inline header nav links on mobile — the drawer takes over. */
.lq-header .nav-links { display: none; }
.lq-nav-scrim {
display: block;
position: fixed;
inset: 72px 0 0 0;
background: rgba(15,22,35,0.42);
opacity: 0;
pointer-events: none;
transition: opacity 0.18s ease;
z-index: 9000;
}
body.lq-nav-open .lq-nav-scrim {
opacity: 1;
pointer-events: auto;
}
/* The drawer itself — sibling of the header so its z-index isn't
confined inside the header's stacking context. */
.lq-nav-drawer {
display: block;
position: fixed;
top: 72px; left: 0; right: 0;
background: var(--bone);
background-color: #F2EBDF;
border-bottom: 1px solid var(--line);
padding: 8px 0 18px;
transform: translateY(-12px);
opacity: 0;
pointer-events: none;
transition: transform 0.18s ease, opacity 0.18s ease;
z-index: 9100;
box-shadow: 0 14px 28px rgba(15,22,35,0.18);
}
.lq-nav-drawer.open {
transform: translateY(0);
opacity: 1;
pointer-events: auto;
}
.lq-nav-drawer[hidden] { display: none !important; }
.lq-nav-drawer-list {
list-style: none;
margin: 0; padding: 0;
display: flex; flex-direction: column;
}
.lq-nav-drawer-list li { list-style: none; }
.lq-nav-drawer-list a {
display: block;
padding: 16px var(--gutter);
font-family: var(--font-display);
font-weight: 500;
font-size: 1.02rem;
color: var(--ink);
text-decoration: none;
border-top: 1px solid var(--line-soft);
}
.lq-nav-drawer-list a:hover { background: var(--bone-warm); }
.lq-nav-drawer-list li:first-child a { border-top: 0; }
.lq-nav-drawer-sep {
height: 0;
margin: 6px 0;
border-top: 1px solid var(--line);
}
.lq-nav-drawer-cta {
background: var(--ink);
color: var(--bone) !important;
margin: 8px var(--gutter);
border-radius: 999px;
text-align: center;
padding: 14px 22px !important;
border-top: 0 !important;
}
/* Bump selector specificity to (0,3,1) so this wins over the generic
.lq-nav-drawer-list a:hover (0,2,1), which was setting bone-warm
on hover and washing the CTA text out. Login now darkens on hover
instead of fading. */
.lq-nav-drawer-list a.lq-nav-drawer-cta:hover {
background: var(--ink-soft) !important;
color: var(--bone) !important;
}
/* Dark variant — when the drawer opens over the home page's dark hero
and we haven't scrolled past it yet, mirror the header's bone↔ink
transition so the panel reads as part of the hero instead of a
bone slab on a black surface. Once body.past-hero is set by the
scroll observer, the default light drawer above takes over. */
body.has-dark-hero:not(.past-hero) .lq-nav-drawer {
background: var(--ink);
background-color: #0F1623;
border-bottom-color: rgba(242,235,223,0.10);
box-shadow: 0 14px 28px rgba(0,0,0,0.45);
}
body.has-dark-hero:not(.past-hero) .lq-nav-drawer-list a {
color: #F2EDE2;
border-top-color: rgba(242,235,223,0.08);
}
body.has-dark-hero:not(.past-hero) .lq-nav-drawer-list a:hover {
background: rgba(242,237,226,0.06);
}
body.has-dark-hero:not(.past-hero) .lq-nav-drawer-sep {
border-top-color: rgba(242,235,223,0.10);
}
body.has-dark-hero:not(.past-hero) .lq-nav-drawer-cta {
background: var(--signal);
color: var(--bone) !important;
}
body.has-dark-hero:not(.past-hero) .lq-nav-drawer-list a.lq-nav-drawer-cta:hover {
background: var(--signal-deep) !important;
color: var(--bone) !important;
}
}
/* Lock body scroll while the drawer is open so the underlying page
doesn't bounce around behind it. */
body.lq-nav-open { overflow: hidden; }
/* ─── Hero ─────────────────────────────────────────────────────────── */
/* Negative margin-top pulls the hero up behind the sticky header so
the dark Ink ground extends to viewport top — no cream strip above
the hero. Top padding then bumps the inner content back down so it
doesn't sit under the header. */
.hero {
position: relative;
margin-top: -80px;
padding: calc(80px + clamp(60px, 9vw, 140px)) 0 clamp(60px, 9vw, 120px);
}
.hero-grid {
display: grid;
grid-template-columns: 1.15fr 0.85fr;
gap: clamp(40px, 6vw, 96px);
align-items: center;
}
@media (max-width: 960px) { .hero-grid { grid-template-columns: 1fr; gap: 56px; } }
.hero-eyebrow {
display: inline-flex; align-items: center; gap: 12px;
margin-bottom: 28px;
padding: 8px 14px 8px 10px;
background: var(--bone-soft);
border: 1px solid var(--line);
border-radius: 999px;
font-family: var(--font-mono);
font-size: 0.74rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ink-muted);
}
.hero-eyebrow .pulse {
width: 8px; height: 8px; border-radius: 50%;
background: var(--sage);
position: relative;
}
.hero-eyebrow .pulse::after {
content: ''; position: absolute; inset: -3px;
border-radius: 50%; border: 1px solid var(--sage);
animation: lq-pulse 2s ease-out infinite;
}
@keyframes lq-pulse {
0% { transform: scale(0.6); opacity: 0.9; }
100% { transform: scale(1.6); opacity: 0; }
}
.hero h1 { margin-bottom: 28px; }
.hero h1 .accent { color: var(--ink); position: relative; display: inline-block; }
/* Trailing orange period removed — the .linq-dots animation now sits
immediately after .accent and ends with a single orange dot that
serves as the headline's punctuation. Other headings (cta-banner
.bk-accent, lq-book .bk-accent) keep their static periods. */
.hero p.lead { margin-bottom: 36px; }
.hero-cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-bottom: 48px; }
.hero-meta { display: flex; flex-wrap: wrap; gap: 24px 36px; font-family: var(--font-mono); font-size: 0.8rem; color: var(--ink-muted); }
.hero-meta .item { display: flex; align-items: center; gap: 8px; }
.hero-meta .item::before {
content: ''; width: 5px; height: 5px; border-radius: 50%;
background: var(--ocean); display: inline-block;
}
/* Hero visual — the loop */
.hero-visual { position: relative; aspect-ratio: 1 / 1.05; width: 100%; max-width: 520px; justify-self: end; }
.loop-frame {
position: absolute; inset: 0;
border: 1px solid var(--line);
border-radius: 24px;
background: linear-gradient(135deg, var(--bone-soft) 0%, var(--bone) 100%);
overflow: hidden;
}
.loop-frame::before {
content: ''; position: absolute; inset: 0;
background-image:
linear-gradient(var(--line-soft) 1px, transparent 1px),
linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
background-size: 40px 40px;
opacity: 0.6;
}
.loop-card {
position: absolute;
background: var(--bone);
border: 1px solid var(--line);
border-radius: 12px;
padding: 14px 16px;
font-family: var(--font-mono);
font-size: 0.78rem;
color: var(--ink);
box-shadow: 0 1px 0 rgba(15,22,35,0.04);
display: flex; flex-direction: column; gap: 4px;
}
.loop-card .row1 { display: flex; align-items: center; gap: 8px; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--ink-muted); }
.loop-card .row2 { font-size: 0.92rem; font-family: var(--font-display); font-weight: 500; }
.loop-card .stage { width: 7px; height: 7px; border-radius: 50%; }
/* Brand-kit-only palette for stage dots: ink + orange family. The
period (Signal orange) leads — Quote and Looped carry orange so the
"single-stage status pill" rule reads correctly across the loop.
`--ocean` and `--sage` were retired here — they are not in the linq
brand kit and the kit forbids multiple accent colours per frame. */
.loop-card.lead .stage { background: var(--ink); }
.loop-card.quote .stage { background: var(--signal); }
.loop-card.job .stage { background: var(--ink); }
.loop-card.invoice .stage { background: var(--ink-soft); }
.loop-card.looped .stage { background: var(--signal-deep); }
.loop-card.lead { top: 4%; left: 6%; width: 56%; }
.loop-card.quote { top: 22%; right: 6%; width: 50%; }
.loop-card.job { top: 40%; left: 6%; width: 60%; }
.loop-card.invoice { top: 58%; right: 6%; width: 56%; }
.loop-card.looped { top: 76%; left: 6%; width: 60%; }
.loop-svg { position: absolute; inset: 0; pointer-events: none; }
/* ─── Hero eyebrow chain-mark icon ─────────────────────────────────── */
/* Renders the v3 chain mark inline at eyebrow size. Default colours are
tuned for the cream surface; the .hero--ink block below recolours
the strokes for the dark hero. The orange dot stays Signal in both. */
.hero-eyebrow-mark {
width: 14px; height: 14px;
flex: 0 0 auto;
display: inline-block;
overflow: visible;
}
.hero-eyebrow-mark .hem-square { stroke: var(--ink); fill: none; }
.hero-eyebrow-mark .hem-dot { fill: var(--signal); }
/* ─── Hero — dark variant (used on the home landing) ───────────────── */
/* Wraps the same hero markup in an Ink ground with Bone text. The rest
of the page stays on Bone. Mirrors the .ld-card--ink-2 pattern used
in the in-app shell so the marketing site reads as one design system.
The signal-orange CTA and accent period need no recolouring — they
already pop against either ground. */
/* Brand v1.0 ink: every dark section on the marketing site uses the
same --ink (#0F1623) ground and --ink-2 (#1B2230) for inset chips.
.dots, .lq-rate-promo, .lq-book, .cta-banner all use var(--ink) — the
hero used to use #0E0F12 / #1A1B1F, which read a touch darker and
greyer than the rest of the page. Now they all match. */
.hero--ink {
background: var(--ink);
color: var(--bone);
}
.hero--ink h1 { color: var(--bone); }
.hero--ink h1 .accent { color: var(--bone); }
.hero--ink p.lead { color: rgba(242,237,226,0.72); }
.hero--ink .hero-meta { color: rgba(242,237,226,0.55); }
.hero--ink .hero-meta .item::before { background: var(--signal); }
.hero--ink .hero-eyebrow {
background: var(--ink-2);
border: none;
color: rgba(242,237,226,0.78);
padding: 7px 12px;
font-size: 0.66rem;
letter-spacing: 0.16em;
}
.hero--ink .hero-eyebrow-mark .hem-square { stroke: var(--bone); }
.hero--ink .btn--ghost {
background: transparent;
color: var(--bone);
border-color: rgba(242,237,226,0.22);
}
.hero--ink .btn--ghost:hover {
border-color: var(--bone);
background: rgba(242,237,226,0.06);
}
.hero--ink .loop-frame {
border: 1px solid rgba(242,237,226,0.10);
background: linear-gradient(135deg, var(--ink-2) 0%, var(--ink) 100%);
}
.hero--ink .loop-frame::before {
background-image:
linear-gradient(rgba(242,237,226,0.04) 1px, transparent 1px),
linear-gradient(90deg, rgba(242,237,226,0.04) 1px, transparent 1px);
opacity: 1;
}
.hero--ink .loop-card {
background: var(--ink-2);
border: 1px solid rgba(242,237,226,0.10);
color: var(--bone);
box-shadow: 0 1px 0 rgba(242,237,226,0.04);
}
.hero--ink .loop-card .row1 { color: rgba(242,237,226,0.55); }
/* Ink dots vanish against the ink-2 card on the dark hero — flip the
ink-family stages to bone so they're visible. Orange stages (.quote,
.looped) keep their brand colour against the dark backdrop. */
.hero--ink .loop-card.lead .stage { background: var(--bone); }
.hero--ink .loop-card.job .stage { background: var(--bone); }
.hero--ink .loop-card.invoice .stage { background: rgba(242,237,226,0.55); }
.hero--ink .loop-svg path { stroke: rgba(242,237,226,0.22); }
/* ─── Section frames ───────────────────────────────────────────────── */
.lq-section { padding: clamp(80px, 10vw, 140px) 0; }
.section-head {
display: grid;
grid-template-columns: 1fr 1.2fr;
gap: clamp(24px, 5vw, 80px);
align-items: end;
margin-bottom: clamp(48px, 6vw, 88px);
padding-bottom: 40px;
border-bottom: 1px solid var(--line);
}
@media (max-width: 800px) { .section-head { grid-template-columns: 1fr; align-items: start; } }
.section-head .lead { margin-top: 16px; }
/* ─── Dark "How it works" panel ────────────────────────────────────── */
.dots { background: var(--ink); color: var(--bone); border-radius: 32px; margin: clamp(40px, 6vw, 80px) var(--gutter); }
@media (max-width: 700px) { .dots { margin: 0 12px; border-radius: 20px; } }
.dots .lq-wrap { padding: clamp(60px, 9vw, 120px) clamp(24px, 6vw, 80px); }
.dots .eyebrow { color: rgba(242,237,226,0.6); }
.dots .h-section { color: var(--bone); margin-bottom: 24px; }
.dots .lead { color: rgba(242,237,226,0.74); margin-bottom: 64px; }
.dots-grid {
display: grid; grid-template-columns: repeat(4, 1fr);
gap: 28px; position: relative;
}
@media (max-width: 900px) { .dots-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .dots-grid { grid-template-columns: 1fr; } }
.dot-step {
position: relative;
padding: 28px 24px;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.10);
border-radius: 16px;
}
.dot-step .num { font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.18em; color: var(--signal); margin-bottom: 16px; display: block; }
.dot-step h4 { font-size: 1.18rem; font-weight: 600; margin-bottom: 10px; color: var(--bone); }
.dot-step p { font-size: 0.92rem; color: rgba(242,237,226,0.66); line-height: 1.55; }
/* ─── Signature mock on the Invoicing feature card ─────────────────── */
/* Looks like the in-app signature pad customers see at job-end: white
card, solid hairline border, "Signature" label, hand-drawn squiggle
over a baseline rule, signed name + date in mono caps below. Sits on
the .feature--signed tile between the lead paragraph and the FINANCE
meta tag. */
.feature--signed { padding-bottom: 28px; }
.sig-block {
margin-top: 4px;
padding: 12px 14px 10px;
background: #FFFFFF;
border: 1px solid var(--line);
border-radius: 10px;
box-shadow: 0 1px 0 rgba(15,22,35,0.04);
display: flex; flex-direction: column; gap: 6px;
}
.sig-top {
display: flex; align-items: baseline; justify-content: space-between;
gap: 8px;
}
.sig-label {
font-family: var(--font-mono);
font-size: 0.6rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(15,22,35,0.45);
}
.sig-clock {
font-family: var(--font-mono);
font-size: 0.66rem;
letter-spacing: 0.06em;
font-variant-numeric: tabular-nums;
color: rgba(15,22,35,0.62);
transition: color 0.4s ease, text-shadow 0.4s ease;
}
.sig-area {
position: relative;
height: 56px;
}
.sig-svg { width: 100%; height: 100%; display: block; }
/* Signature draws in left-to-right via stroke-dashoffset animation,
simulating a customer signing live. Animation is GATED on
`.feature.is-in-view` so the ink doesn't burn through invisibly
while the user is still scrolling toward this card. pathLength="100"
normalises both paths so we can dasharray:100/dashoffset:100 → 0
regardless of real path length. */
.sig-path, .sig-flourish {
stroke-dasharray: 100;
stroke-dashoffset: 100;
}
.feature.is-in-view .sig-path,
.feature.is-in-view .sig-flourish {
animation: sig-draw 2.2s cubic-bezier(.6,.05,.4,.95) 0.5s forwards;
}
.feature.is-in-view .sig-flourish {
animation-delay: 1.9s;
animation-duration: 0.6s;
}
@keyframes sig-draw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
.sig-path, .sig-flourish { animation: none; stroke-dashoffset: 0; }
}
.sig-line {
position: absolute;
left: 0; right: 0; bottom: 4px;
height: 1px;
background: rgba(15,22,35,0.28);
}
.sig-foot {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
margin-top: 2px;
font-family: var(--font-mono);
font-size: 0.66rem;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.sig-foot .sig-name { color: rgba(15,22,35,0.78); font-weight: 500; display: inline-flex; align-items: center; gap: 8px; }
.sig-foot .sig-date { color: rgba(15,22,35,0.5); }
.sig-completed-tag {
display: none;
padding: 2px 6px;
border-radius: 4px;
background: rgba(31,157,85,0.16);
color: var(--sage, #1F9D55);
font-size: 0.56rem;
letter-spacing: 0.18em;
text-transform: uppercase;
}
/* Tap-to-confirm button — pulses orange to invite the press. */
.sig-tap {
appearance: none; background: transparent; border: 0; padding: 0;
margin-top: 8px;
display: inline-flex; align-items: center; gap: 10px;
cursor: pointer;
font-family: var(--font-mono);
font-size: 0.62rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: rgba(15,22,35,0.6);
text-align: left;
transition: color 0.3s ease;
}
.sig-tap-box {
position: relative;
width: 18px; height: 18px;
border: 1.5px solid rgba(234,106,44,0.55);
border-radius: 4px;
background: rgba(255,255,255,0.7);
display: inline-flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
/* Pulse only after scroll-trigger so it doesn't draw the eye while the
user is still scrolling toward the card. */
.feature.is-in-view .sig-tap-box {
animation: sig-pulse 1.6s ease-in-out infinite;
}
@keyframes sig-pulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(234,106,44,0.50); border-color: rgba(234,106,44,0.55); }
50% { box-shadow: 0 0 0 6px rgba(234,106,44,0); border-color: rgba(234,106,44,1); }
}
.sig-tap-check {
width: 12px; height: 12px;
color: var(--sage, #1F9D55);
opacity: 0;
transform: scale(0.5);
transition: opacity 0.3s ease, transform 0.3s cubic-bezier(.34,1.56,.64,1);
}
@media (prefers-reduced-motion: reduce) {
.sig-tap-box { animation: none; }
}
/* Completed state — fired by JS after the customer "signs" (taps). */
.sig-block.is-signed .sig-tap-box {
animation: none;
border-color: var(--sage, #1F9D55);
background: rgba(31,157,85,0.18);
box-shadow: 0 0 0 0 rgba(31,157,85,0);
}
.sig-block.is-signed .sig-tap-check { opacity: 1; transform: scale(1); }
.sig-block.is-signed .sig-tap-label { color: var(--sage, #1F9D55); }
.sig-block.is-signed .sig-completed-tag { display: inline-block; animation: sig-flash 0.45s ease-out; }
.sig-block.is-signed .sig-clock {
color: var(--sage, #1F9D55);
font-weight: 600;
text-shadow: 0 0 12px rgba(31,157,85,0.35);
}
.sig-block.is-signed .sig-path,
.sig-block.is-signed .sig-flourish {
animation: sig-draw 2.2s cubic-bezier(.6,.05,.4,.95) forwards, sig-stamp 0.5s ease-out 0.05s;
animation-fill-mode: forwards, none;
}
@keyframes sig-flash {
0% { transform: scale(0.85); opacity: 0; }
60% { transform: scale(1.05); }
100% { transform: scale(1); opacity: 1; }
}
@keyframes sig-stamp {
0% { filter: brightness(1); }
35% { filter: brightness(1.6) drop-shadow(0 0 4px rgba(31,157,85,0.5)); }
100% { filter: brightness(1); }
}
/* ─── Scheduling & dispatch interactive demo ──────────────────────────
Same shell as .sig-block (cream-on-white card, mono header with live PT
clock, mono footer with date, pulsing tap-target). Two stacked states
inside the stage swap on tap — tech "On my way" view → customer "10-15
min away" view — telling the dispatch automation story in one beat.
Reuses .sig-* classes so the green-stamp completion animation lands
exactly the same as the signature card. */
.feature--sched { padding-bottom: 28px; }
.sched-block {
margin-top: 4px;
padding: 12px 14px 10px;
background: #FFFFFF;
border: 1px solid var(--line);
border-radius: 10px;
box-shadow: 0 1px 0 rgba(15,22,35,0.04);
display: flex; flex-direction: column; gap: 6px;
}
.sched-stage {
position: relative;
height: 84px;
margin: 2px 0;
}
.sched-state {
position: absolute; inset: 0;
display: flex; flex-direction: column; gap: 6px;
transition: opacity 0.45s ease, transform 0.45s cubic-bezier(.6,.05,.4,.95);
}
.sched-state--tech { opacity: 1; transform: translateY(0); }
.sched-state--customer { opacity: 0; transform: translateY(8px); pointer-events: none; }
.sched-block.is-flipped .sched-state--tech { opacity: 0; transform: translateY(-8px); pointer-events: none; }
.sched-block.is-flipped .sched-state--customer { opacity: 1; transform: translateY(0); pointer-events: auto; }
/* Tech-side row: avatar dot + name + status pill */
.sched-row {
display: flex; align-items: center; gap: 10px;
font-family: var(--font-mono);
font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase;
color: rgba(15,22,35,0.78);
}
.sched-avatar {
width: 22px; height: 22px; border-radius: 50%;
background: rgba(15,22,35,0.86); color: #FFF;
display: inline-flex; align-items: center; justify-content: center;
font-family: var(--font-mono); font-weight: 600; font-size: 0.62rem;
letter-spacing: 0;
flex-shrink: 0;
}
.sched-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sched-pill {
font-family: var(--font-mono); font-size: 0.56rem;
letter-spacing: 0.18em; text-transform: uppercase;
padding: 2px 7px; border-radius: 4px;
background: rgba(234,106,44,0.14); color: var(--signal);
flex-shrink: 0;
}
.sched-meta {
font-family: var(--font-mono); font-size: 0.6rem;
letter-spacing: 0.06em; color: rgba(15,22,35,0.5);
padding-left: 32px;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sched-cta-hint {
display: inline-flex; align-items: center; gap: 6px;
margin-top: auto;
padding-left: 32px;
font-family: var(--font-mono); font-size: 0.58rem;
letter-spacing: 0.16em; text-transform: uppercase;
color: var(--signal); font-weight: 500;
}
.sched-cta-hint::before {
content: ''; width: 6px; height: 6px; border-radius: 50%;
background: var(--signal); animation: sig-pulse 1.6s ease-in-out infinite;
}
/* Customer-side: route SVG + ETA chip */
.sched-route-row {
position: relative;
flex: 1; min-height: 36px;
display: flex; align-items: center; gap: 10px;
}
.sched-route-svg { width: 100%; height: 36px; display: block; }
.sched-route {
stroke-dasharray: 100;
stroke-dashoffset: 100;
}
.sched-block.is-flipped .sched-route {
animation: sig-draw 1.2s cubic-bezier(.6,.05,.4,.95) 0.15s forwards;
}
.sched-pin {
opacity: 0;
transform: scale(0.4);
transform-origin: center;
transform-box: fill-box;
}
.sched-block.is-flipped .sched-pin {
animation: sig-flash 0.45s ease-out 1.1s forwards;
}
.sched-eta {
position: absolute; right: 4px; top: 50%;
transform: translateY(-50%) scale(0.85);
opacity: 0;
padding: 4px 9px; border-radius: 999px;
background: rgba(31,157,85,0.16); color: var(--sage, #1F9D55);
font-family: var(--font-mono); font-size: 0.6rem;
letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600;
white-space: nowrap;
}
.sched-block.is-flipped .sched-eta {
animation: sig-flash 0.5s cubic-bezier(.34,1.56,.64,1) 1.2s forwards;
}
.sched-live {
display: inline-flex; align-items: center; gap: 6px;
font-family: var(--font-mono); font-size: 0.58rem;
letter-spacing: 0.18em; text-transform: uppercase;
color: rgba(15,22,35,0.5);
}
.sched-live::before {
content: ''; width: 6px; height: 6px; border-radius: 50%;
background: var(--sage, #1F9D55);
}
.sched-block.is-flipped .sched-live::before {
animation: sig-pulse 1.6s ease-in-out infinite;
box-shadow: 0 0 0 0 rgba(31,157,85,0.5);
}
/* When flipped (signed), the same green-stamp aesthetic as the signature
card — clock turns sage, tap-box flips to the check, etc. Inherits all
.is-signed rules above. */
@media (prefers-reduced-motion: reduce) {
.sched-state, .sched-route, .sched-pin, .sched-eta { transition: none; animation: none !important; }
.sched-route { stroke-dashoffset: 0; }
.sched-pin { opacity: 1; transform: scale(1); }
.sched-eta { opacity: 1; transform: translateY(-50%) scale(1); }
}
/* ─── Reports & analytics interactive demo ────────────────────────────
Two-beat animation: bars climb on mount + counter ticks $0 → $24,890,
then a "VIO suggests" pill fades in below offering an actionable
suggestion. Tapping the pill stamps the card green using the same
.is-signed finish as the signature card. */
.feature--reports { padding-bottom: 28px; }
.rep-block {
margin-top: 4px;
padding: 12px 14px 10px;
background: #FFFFFF;
border: 1px solid var(--line);
border-radius: 10px;
box-shadow: 0 1px 0 rgba(15,22,35,0.04);
display: flex; flex-direction: column; gap: 6px;
}
.rep-stage {
display: flex; align-items: flex-end; gap: 14px;
height: 64px;
margin: 4px 0 2px;
}
.rep-bars {
display: flex; align-items: flex-end; gap: 5px;
flex: 1; height: 100%;
padding-bottom: 2px;
border-bottom: 1px solid rgba(15,22,35,0.12);
}
.rep-bar {
flex: 1;
height: 0;
background: linear-gradient(to top, rgba(15,22,35,0.78), rgba(15,22,35,0.55));
border-radius: 2px 2px 0 0;
transition: none;
}
.rep-bar:last-child {
background: linear-gradient(to top, var(--signal), #F08A52);
}
.rep-block.is-mounted .rep-bar {
animation: rep-grow 0.7s cubic-bezier(.34,1.2,.64,1) forwards;
}
.rep-block.is-mounted .rep-bar:nth-child(1) { animation-delay: 0.05s; }
.rep-block.is-mounted .rep-bar:nth-child(2) { animation-delay: 0.11s; }
.rep-block.is-mounted .rep-bar:nth-child(3) { animation-delay: 0.17s; }
.rep-block.is-mounted .rep-bar:nth-child(4) { animation-delay: 0.23s; }
.rep-block.is-mounted .rep-bar:nth-child(5) { animation-delay: 0.29s; }
.rep-block.is-mounted .rep-bar:nth-child(6) { animation-delay: 0.35s; }
.rep-block.is-mounted .rep-bar:nth-child(7) { animation-delay: 0.41s; }
@keyframes rep-grow {
from { height: 0; }
to { height: var(--h, 50%); }
}
.rep-readout {
display: flex; flex-direction: column; align-items: flex-end; gap: 4px;
flex-shrink: 0;
min-width: 96px;
}
.rep-counter {
font-family: var(--font-display, var(--font-mono));
font-size: 1.08rem; font-weight: 700; letter-spacing: -0.02em;
color: var(--ink, #0F1623);
font-variant-numeric: tabular-nums;
line-height: 1;
}
.rep-delta {
font-family: var(--font-mono); font-size: 0.58rem;
letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600;
padding: 2px 6px; border-radius: 4px;
background: rgba(31,157,85,0.16); color: var(--sage, #1F9D55);
opacity: 0;
}
.rep-block.show-delta .rep-delta {
animation: sig-flash 0.45s ease-out forwards;
}
.rep-suggest {
margin-top: 4px;
display: flex; flex-direction: column; gap: 3px;
padding: 8px 10px;
background: rgba(234,106,44,0.08);
border: 1px solid rgba(234,106,44,0.22);
border-radius: 8px;
opacity: 0;
transform: translateY(4px);
transition: opacity 0.35s ease, transform 0.35s ease;
}
.rep-block.show-suggest .rep-suggest {
opacity: 1; transform: translateY(0);
}
.rep-suggest-label {
font-family: var(--font-mono); font-size: 0.56rem;
letter-spacing: 0.18em; text-transform: uppercase;
color: var(--signal); font-weight: 600;
}
.rep-suggest-text {
font-size: 0.74rem; line-height: 1.35;
color: rgba(15,22,35,0.78);
}
.rep-block.is-signed .rep-suggest {
background: rgba(31,157,85,0.10);
border-color: rgba(31,157,85,0.32);
}
.rep-block.is-signed .rep-suggest-label {
color: var(--sage, #1F9D55);
}
@media (prefers-reduced-motion: reduce) {
.rep-bar { animation: none !important; height: var(--h, 50%) !important; }
.rep-suggest { opacity: 1; transform: none; transition: none; }
}
/* Shared .is-signed treatment for sched-block / rep-block — mirrors the
.sig-block.is-signed rules above so all three "magic moment" cards land
on the same green-stamped finish. */
.sched-block.is-signed .sig-tap-box,
.rep-block.is-signed .sig-tap-box {
animation: none;
border-color: var(--sage, #1F9D55);
background: rgba(31,157,85,0.18);
box-shadow: 0 0 0 0 rgba(31,157,85,0);
}
.sched-block.is-signed .sig-tap-check,
.rep-block.is-signed .sig-tap-check { opacity: 1; transform: scale(1); }
.sched-block.is-signed .sig-tap-label,
.rep-block.is-signed .sig-tap-label { color: var(--sage, #1F9D55); }
.sched-block.is-signed .sig-completed-tag,
.rep-block.is-signed .sig-completed-tag { display: inline-block; animation: sig-flash 0.45s ease-out; }
.sched-block.is-signed .sig-clock,
.rep-block.is-signed .sig-clock {
color: var(--sage, #1F9D55);
font-weight: 600;
text-shadow: 0 0 12px rgba(31,157,85,0.35);
}
/* ─── Mobile alternation: interactive · static · interactive · static · …
Source order is S, I, S, I, S, I — at the single-column breakpoint
(≤ 580px) we pair-swap each row so the linear stack starts with an
interactive card. Desktop and tablet (2-column) layouts keep source
order. */
@media (max-width: 580px) {
.features-grid .feature:nth-child(1) { order: 2; } /* Customers (static) */
.features-grid .feature:nth-child(2) { order: 1; } /* Scheduling (interactive) */
.features-grid .feature:nth-child(3) { order: 4; } /* AI answering (static) */
.features-grid .feature:nth-child(4) { order: 3; } /* Signature (interactive) */
.features-grid .feature:nth-child(5) { order: 6; } /* Phone (static) */
.features-grid .feature:nth-child(6) { order: 5; } /* Reports (interactive) */
}
/* ─── Dark "Clients" panel ─────────────────────────────────────────── */
/* Mirrors .dots / .cta-banner: rounded ink slab inset by var(--gutter)
on cream, with rgba-white inset cards inside. Two-up grid that
collapses to single column on narrow screens. Logo block is a dashed
placeholder until real client marks land — swap the inner div for an
![]()
and the rest stays. */
.lq-clients-frame { padding: 0; margin-top: clamp(-100px, -7vw, -56px); }
.clients {
position: relative;
background: var(--ink);
color: var(--bone);
border-radius: 32px;
margin: 0 var(--gutter);
overflow: hidden;
isolation: isolate;
}
@media (max-width: 700px) { .clients { margin: 0 12px; border-radius: 20px; } }
.clients .lq-wrap { position: relative; z-index: 2; padding: clamp(60px, 9vw, 120px) clamp(24px, 6vw, 80px); }
/* Two brand photos sit on the outer .clients section (NOT inside the
.clients-grid wrap, NOT inside the cards). They anchor at the
bottom edges of the section — 35vw wide each, one flush-left and
one flush-right — so the cards float as glass in front of two
large brand photos that bleed into the page background.
We hoist --bg-ssl / --bg-therapy from .clients-grid up to .clients
so both layers can read the same vars; the inline style at the
.clients-grid level cascades to .clients via the parent chain. */
.clients {
position: relative;
isolation: isolate;
--bg-ssl-h: clamp(360px, 56vh, 720px);
}
.clients::before,
.clients::after {
content: '';
position: absolute;
bottom: 0;
width: 35vw;
height: var(--bg-ssl-h);
z-index: 0;
background-repeat: no-repeat;
background-size: cover;
background-position: center bottom;
opacity: 0.85;
pointer-events: none;
/* Soft top fade so the photo's edge melts into the ink page instead
of cutting hard. */
-webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 32%);
mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 32%);
}
.clients::before { left: 0; background-image: var(--bg-ssl); }
.clients::after { right: 0; background-image: var(--bg-therapy); }
@media (max-width: 900px) {
/* On mobile both images become full-width strips stacked at the
bottom — left half visible behind cards, right hidden so the
small-screen layout doesn't double-blur. */
.clients::before,
.clients::after { width: 100%; left: 0; right: auto; opacity: 0.7; }
.clients::after { display: none; }
}
/* Lift the bg vars from the grid up to the section so the
section-level pseudos can read them too. Inline style on
.clients-grid still works (CSS variables cascade down, but the
pseudo selector sits on the parent — so we mirror the values
onto the parent via :has() where supported, with a fallback
in the inline style block on the markup side). */
.clients-grid { /* no positioning change — pseudos removed below. */ }
.clients .eyebrow { color: rgba(242,237,226,0.6); display: block; margin-bottom: 10px; }
.clients .h-section { color: var(--bone); max-width: 24ch; }
.clients .lead { color: rgba(242,237,226,0.74); max-width: 56ch; margin-bottom: clamp(40px, 5vw, 64px); }
.clients-grid {
display: grid; grid-template-columns: 1fr 1fr;
gap: clamp(20px, 3vw, 32px);
}
@media (max-width: 900px) { .clients-grid { grid-template-columns: 1fr; gap: 16px; } }
/* Solid dark card — sits ON TOP of the section-level brand photos
(.clients::before / ::after). Opaque so the photos read as a
distinct background BEHIND the cards rather than bleeding through
the glass and looking like inside-card art. */
.client-card {
position: relative;
z-index: 1;
padding: 28px;
background: var(--ink, #0F1623);
border: 1px solid rgba(255,255,255,0.10);
border-radius: 16px;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.06),
0 16px 36px -18px rgba(0,0,0,0.6);
display: flex; flex-direction: column; gap: 22px;
}
/* Avatar-style header: round client logo flush left, meta beside it.
When a real logo image lands, swap the inner div for an ![]()
with
the same .client-logo class — sizing + circular crop stay. */
.client-header {
display: grid;
grid-template-columns: 76px 1fr;
gap: 18px;
align-items: start;
}
.client-logo {
width: 76px; height: 76px;
border: 1px solid rgba(242,237,226,0.14);
border-radius: 50%;
background: var(--bone);
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
overflow: hidden;
}
/* Dark avatar ground for clients whose mark is light/yellow on transparent
(e.g. Safe & Secure's yellow shield gets lost on a cream disc). */
.client-logo--dark {
background: var(--ink-2);
border-color: rgba(242,237,226,0.22);
}
.client-logo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.client-logo--placeholder {
border-style: dashed;
border-color: rgba(242,237,226,0.22);
background: rgba(15,22,35,0.40);
}
.client-logo--placeholder span {
font-family: var(--font-mono);
font-size: 0.6rem;
text-transform: uppercase;
letter-spacing: 0.18em;
color: rgba(242,237,226,0.5);
}
.client-meta { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.client-meta .kicker {
font-family: var(--font-mono);
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.18em;
color: var(--signal);
}
.client-meta h3 {
font-family: var(--font-display);
font-size: clamp(1.4rem, 2.4vw, 1.7rem);
font-weight: 700;
letter-spacing: -0.015em;
color: var(--bone);
margin-top: 4px;
}
.client-meta .addr { font-size: 0.92rem; color: rgba(242,237,226,0.7); margin-top: 2px; }
.client-link {
font-family: var(--font-mono);
font-size: 0.82rem;
letter-spacing: 0.04em;
color: var(--signal);
text-decoration: none;
margin-top: 6px;
display: inline-flex; align-items: center; gap: 6px;
}
.client-link .arrow { transition: transform 0.2s; }
.client-link:hover { color: #F2823F; }
.client-link:hover .arrow { transform: translateX(3px); }
.client-stack {
list-style: none;
display: flex; flex-direction: column; gap: 10px;
padding-top: 20px;
border-top: 1px solid rgba(242,237,226,0.10);
}
.client-stack li {
font-size: 0.95rem;
color: rgba(242,237,226,0.78);
line-height: 1.45;
display: flex; align-items: flex-start; gap: 10px;
}
/* Same chevron-tile bullet as .plan li::before — visual continuity with
the pricing cards two sections up. */
.client-stack li::before {
content: ''; flex-shrink: 0;
width: 16px; height: 16px; margin-top: 3px;
border: 1px solid rgba(242,237,226,0.32);
border-radius: 4px;
background-image: linear-gradient(135deg, transparent 35%, var(--signal) 35%, var(--signal) 50%, transparent 50%);
}
/* ─── Feature grid (3-up) ──────────────────────────────────────────── */
/* Discrete cards with a real Bone gutter — the previous 1px-gap-on-line-bg
trick made the four tiles read as one continuous block (user feedback). */
.features-grid {
display: grid; grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
@media (max-width: 900px) { .features-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; } }
@media (max-width: 580px) { .features-grid { grid-template-columns: 1fr; gap: 16px; } }
.feature {
background: var(--bone); padding: 32px 28px;
display: flex; flex-direction: column; gap: 14px;
border: 1px solid var(--line);
border-radius: 16px;
transition: background 0.2s, transform 0.2s;
}
.feature:hover { background: var(--bone-soft); }
.feature .icon-frame {
width: 44px; height: 44px;
border: 1px solid var(--ink);
border-radius: 10px;
display: flex; align-items: center; justify-content: center;
margin-bottom: 8px; position: relative;
}
.feature .icon-frame::after {
content: ''; position: absolute; bottom: -1px; right: -1px;
width: 10px; height: 10px;
background: var(--signal);
border-radius: 2px;
}
.feature .icon-frame i { font-size: 1.2rem; color: var(--ink); }
.feature h3 { font-size: 1.18rem; font-weight: 600; }
.feature p { font-size: 0.95rem; color: var(--ink-soft); line-height: 1.55; }
.feature .feat-meta {
margin-top: auto; padding-top: 18px;
font-family: var(--font-mono); font-size: 0.74rem;
text-transform: uppercase; letter-spacing: 0.14em;
color: var(--ink-muted);
}
/* Feature-card row reorder — Sam's spec:
• desktop ≥901px (3-col): top row = 3 static cards, bottom row =
3 interactive (signature, dispatch, reports)
• tablet 581-900px: forced to 3-col here too (overriding the
default 2-col tablet rule above) so the same top/bottom pattern
reads at tablet width
• mobile ≤580px (1-col): alternate I/S/I/S/I/S — dispatch, customers,
credit, ai, reports, phone (so the page opens with a live demo,
never two static cards in a row)
Implemented with CSS `order` so the DOM source order stays
accessible (screen readers + tabbing follow source). */
@media (min-width: 581px) {
.features-grid { grid-template-columns: repeat(3, 1fr); }
.features-grid .feature--customers { order: 1; }
.features-grid .feature--ai { order: 2; }
.features-grid .feature--phone { order: 3; }
.features-grid .feature--signed { order: 4; }
.features-grid .feature--dispatch { order: 5; }
.features-grid .feature--reports { order: 6; }
}
@media (max-width: 580px) {
.features-grid .feature--dispatch { order: 1; }
.features-grid .feature--customers { order: 2; }
.features-grid .feature--signed { order: 3; }
.features-grid .feature--ai { order: 4; }
.features-grid .feature--reports { order: 5; }
.features-grid .feature--phone { order: 6; }
}
/* Scroll-trigger entrance — every feature card starts at rest (slightly
translated + faded) and only animates in once it crosses the viewport
threshold. The IntersectionObserver in home.html adds .is-in-view to
each card exactly once. The interactive bits (signature draw, dispatch
stage drop-in, reports tabs paint) all gate themselves on the same
class so nothing fires while the user is still scrolling toward it. */
.feature {
opacity: 0;
transform: translateY(14px);
transition: opacity .55s ease, transform .55s cubic-bezier(.2,.8,.2,1);
}
.feature.is-in-view {
opacity: 1;
transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
.feature { opacity: 1; transform: none; transition: none; }
}
/* ─── Feature: Scheduling & dispatch (interactive demo) ────────────── */
/* The card carries a fixed-height demo region. Each `.dispatch-stage`
is absolutely positioned and shown only when the parent demo's
`data-dispatch-stage` matches. Transitions use the same ease as the
card entrance so the operator → customer flip feels intentional. */
.feature--dispatch .dispatch-demo {
position: relative;
margin-top: 6px;
height: 178px;
border-radius: 14px;
overflow: hidden;
background: var(--bone-soft, #FAF6EE);
border: 1px solid var(--line);
}
.dispatch-stage {
position: absolute;
inset: 0;
padding: 14px 16px;
display: flex;
flex-direction: column;
gap: 6px;
opacity: 0;
pointer-events: none;
transition: opacity .35s ease, transform .35s cubic-bezier(.4,0,.2,1);
transform: translateY(-100%);
}
.dispatch-demo[data-dispatch-stage="arrived"] .dispatch-stage--arrived,
.dispatch-demo[data-dispatch-stage="enroute"] .dispatch-stage--customer,
.dispatch-demo[data-dispatch-stage="cancelling"] .dispatch-stage--cancelling,
.dispatch-demo[data-dispatch-stage="cancelled"] .dispatch-stage--cancelled {
opacity: 1;
pointer-events: auto;
transform: translateY(0);
}
/* The previous-stage card slides UP and out (so the dispatch flow reads
as "next thing dropped from the top"). */
.dispatch-demo[data-dispatch-stage="enroute"] .dispatch-stage--arrived,
.dispatch-demo[data-dispatch-stage="cancelling"] .dispatch-stage--arrived,
.dispatch-demo[data-dispatch-stage="cancelled"] .dispatch-stage--cancelling {
transform: translateY(-100%);
opacity: 0;
}
/* Eyebrow row — small mono caption on every dispatch stage. */
.dispatch-eyebrow {
display: inline-flex; align-items: center; gap: 8px;
font-family: var(--font-mono);
font-size: 0.6rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--signal);
font-weight: 500;
}
.dispatch-eyebrow--mono { color: var(--ink-muted); }
.dispatch-eyebrow--green { color: var(--sage, #1F9D55); }
.dispatch-pulse {
width: 7px; height: 7px;
border-radius: 50%;
background: var(--signal);
box-shadow: 0 0 0 0 rgba(234,106,44,0.55);
}
.feature.is-in-view .dispatch-pulse {
animation: dispatch-pulse 1.4s ease-out infinite;
}
@keyframes dispatch-pulse {
0% { box-shadow: 0 0 0 0 rgba(234,106,44,0.55); }
100% { box-shadow: 0 0 0 8px rgba(234,106,44,0); }
}
/* Arrived stage — operator sees an incoming-job notification. */
.dispatch-name {
font-family: 'Public Sans', sans-serif;
font-size: 1.05rem;
font-weight: 700;
color: var(--ink);
line-height: 1.1;
margin-top: 2px;
}
.dispatch-addr {
font-family: var(--font-mono);
font-size: 0.72rem;
letter-spacing: 0.04em;
color: var(--ink-soft);
}
.dispatch-service {
display: inline-block;
margin-top: 4px;
padding: 3px 9px;
border-radius: 999px;
background: rgba(234,106,44,0.10);
color: var(--signal);
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.02em;
align-self: flex-start;
}
.dispatch-actions {
display: flex; gap: 8px;
margin-top: auto;
}
.dispatch-btn {
appearance: none;
flex: 1;
padding: 8px 12px;
border-radius: 10px;
font-family: 'Public Sans', sans-serif;
font-size: 0.78rem;
font-weight: 600;
cursor: pointer;
transition: background .15s, border-color .15s, color .15s, transform .05s;
border: 1px solid transparent;
}
.dispatch-btn:active { transform: translateY(1px); }
.dispatch-btn--primary {
background: var(--signal);
color: #fff;
border-color: var(--signal);
}
.dispatch-btn--primary:hover { background: var(--signal-dk, #C9551F); border-color: var(--signal-dk, #C9551F); }
.dispatch-btn--ghost {
background: transparent;
color: var(--ink-soft);
border-color: rgba(15,22,35,0.18);
}
.dispatch-btn--ghost:hover {
background: rgba(15,22,35,0.04);
border-color: rgba(15,22,35,0.32);
color: var(--ink);
}
/* Customer stage — what the customer sees in their tracking portal. */
.dispatch-stage--customer {
background:
linear-gradient(180deg, rgba(234,106,44,0.04), rgba(234,106,44,0)),
var(--bone, #F2EBDF);
}
.dispatch-truck-row {
display: flex; gap: 12px; align-items: center;
margin-top: 6px;
}
.dispatch-truck {
width: 40px; height: 40px;
flex-shrink: 0;
border-radius: 10px;
background: rgba(234,106,44,0.10);
display: flex; align-items: center; justify-content: center;
}
.dispatch-truck svg { width: 28px; height: 28px; }
.dispatch-eta-num {
font-family: 'Public Sans', sans-serif;
font-weight: 800;
font-size: 1.4rem;
color: var(--ink);
letter-spacing: -0.03em;
line-height: 1;
display: flex; align-items: baseline; gap: 1px; flex-wrap: wrap;
}
.dispatch-eta-dot { color: var(--signal); padding: 0 1px; }
.dispatch-eta-unit {
margin-left: 8px;
font-size: 0.78rem;
font-weight: 500;
color: var(--ink-soft);
letter-spacing: 0;
}
.dispatch-eta-sub {
font-family: var(--font-mono);
font-size: 0.66rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--ink-muted);
margin-top: 2px;
}
.dispatch-eta-bar {
position: relative;
margin-top: auto;
height: 4px;
border-radius: 999px;
background: rgba(15,22,35,0.08);
overflow: hidden;
}
.dispatch-eta-bar-fill {
position: absolute;
inset: 0;
width: 38%;
background: var(--signal);
border-radius: 999px;
transform-origin: left;
}
.feature.is-in-view .dispatch-demo[data-dispatch-stage="enroute"] .dispatch-eta-bar-fill {
animation: dispatch-eta-fill 4.2s ease-out forwards;
}
@keyframes dispatch-eta-fill {
from { width: 38%; }
to { width: 88%; }
}
/* Cancelling stage — reason picker. */
.dispatch-reasons {
display: flex; flex-wrap: wrap; gap: 6px;
margin-top: 6px;
}
.dispatch-reason {
appearance: none;
padding: 7px 12px;
border-radius: 999px;
border: 1px solid rgba(15,22,35,0.18);
background: var(--bone, #F2EBDF);
color: var(--ink);
font-family: 'Public Sans', sans-serif;
font-size: 0.78rem;
font-weight: 500;
cursor: pointer;
transition: background .15s, border-color .15s, transform .05s;
}
.dispatch-reason:hover {
background: var(--signal);
border-color: var(--signal);
color: #fff;
}
.dispatch-reason:active { transform: translateY(1px); }
/* Cancelled stage — final green state. */
.dispatch-stage--cancelled {
background: rgba(31,157,85,0.10);
align-items: flex-start;
}
.dispatch-cancelled-check {
width: 36px; height: 36px;
border-radius: 999px;
background: rgba(31,157,85,0.18);
color: var(--sage, #1F9D55);
display: flex; align-items: center; justify-content: center;
margin-top: 4px;
}
.dispatch-cancelled-check svg { width: 22px; height: 22px; }
.dispatch-cancelled-reason {
font-family: 'Public Sans', sans-serif;
font-size: 0.92rem;
font-weight: 600;
color: var(--sage, #1F9D55);
margin-top: 2px;
}
/* ─── Feature: Reports & analytics (tab switcher) ──────────────────── */
.feature--reports .reports-tabs {
display: flex; gap: 4px;
margin-top: 6px;
padding: 4px;
background: rgba(15,22,35,0.05);
border-radius: 999px;
}
.reports-tab {
appearance: none;
flex: 1;
padding: 6px 10px;
border: 0;
border-radius: 999px;
background: transparent;
font-family: 'Public Sans', sans-serif;
font-size: 0.74rem;
font-weight: 600;
color: var(--ink-muted);
cursor: pointer;
transition: background .15s, color .15s;
}
.reports-tab:hover { color: var(--ink); }
.reports-tab.is-active {
background: var(--ink);
color: var(--bone, #F2EBDF);
}
.feature--reports .reports-views {
position: relative;
height: 132px;
margin-top: 10px;
}
.reports-view {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
gap: 8px;
opacity: 0;
pointer-events: none;
transition: opacity .25s ease;
}
.reports-view.is-active {
opacity: 1;
pointer-events: auto;
}
.reports-caption {
margin-top: auto;
font-family: var(--font-mono);
font-size: 0.66rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ink-muted);
}
/* Revenue view — bar chart. Bars grow from 0 → --h once the card is
in view (and only on the active tab; otherwise the bars stay sized
correctly even if the user backtracks to this tab later). */
.reports-bars {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 8px;
align-items: end;
height: 96px;
}
.reports-bar {
position: relative;
display: flex; flex-direction: column; justify-content: flex-end;
align-items: center;
height: 0;
padding-top: 18px;
background: linear-gradient(180deg, rgba(234,106,44,0.18), rgba(234,106,44,0.42));
border-radius: 6px 6px 2px 2px;
font-family: var(--font-mono);
font-size: 0.6rem;
letter-spacing: 0.06em;
color: var(--ink);
transition: height .8s cubic-bezier(.2,.8,.2,1);
}
.feature.is-in-view .reports-bar { height: var(--h); }
.reports-bar b {
position: absolute;
bottom: -16px;
font-weight: 600;
letter-spacing: 0.04em;
color: var(--ink-muted);
text-transform: uppercase;
}
.reports-bar i {
font-style: normal;
font-weight: 700;
color: var(--ink);
font-size: 0.7rem;
letter-spacing: 0;
}
/* Conversion + Response views — single big number with delta. */
.reports-big {
display: flex; flex-direction: column; gap: 4px;
margin-top: 4px;
}
.reports-big-num {
font-family: 'Public Sans', sans-serif;
font-weight: 800;
font-size: 2rem;
letter-spacing: -0.04em;
color: var(--ink);
line-height: 1;
}
.reports-big-pct, .reports-big-unit {
color: var(--signal);
margin-left: 1px;
font-size: 1.4rem;
font-weight: 700;
}
.reports-big-unit { font-size: 1.2rem; margin-right: 4px; }
.reports-big-delta {
font-family: var(--font-mono);
font-size: 0.7rem;
letter-spacing: 0.06em;
color: var(--sage, #1F9D55);
font-weight: 500;
}
.reports-big-delta--down { color: var(--sage, #1F9D55); }
/* ─── Stats strip ──────────────────────────────────────────────────── */
.stats { background: var(--bone-warm); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.stats-row {
display: grid; grid-template-columns: repeat(4, 1fr);
gap: 1px; background: var(--line);
margin: 0 calc(var(--gutter) * -1);
}
@media (max-width: 800px) { .stats-row { grid-template-columns: repeat(2, 1fr); } }
.stat { background: var(--bone-warm); padding: 36px 32px; display: flex; flex-direction: column; gap: 8px; }
.stat .num { font-size: clamp(2.4rem, 4vw, 3.2rem); font-weight: 600; letter-spacing: -0.03em; line-height: 1; }
.stat .num .unit { color: var(--signal); }
.stat .label { font-family: var(--font-mono); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--ink-muted); }
/* ─── Pricing cards ────────────────────────────────────────────────── */
.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 900px) { .pricing-grid { grid-template-columns: 1fr; } }
.plan {
background: var(--bone);
border: 1px solid var(--line);
border-radius: 18px;
padding: 32px;
display: flex; flex-direction: column; gap: 18px;
}
.plan.featured { background: var(--ink); color: var(--bone); border-color: var(--ink); position: relative; }
.plan.featured::before {
content: 'Most popular';
position: absolute; top: -12px; left: 24px;
background: var(--signal); color: var(--bone);
font-family: var(--font-mono); font-size: 0.7rem;
text-transform: uppercase; letter-spacing: 0.14em;
padding: 5px 10px; border-radius: 6px;
}
.plan .plan-name { font-family: var(--font-mono); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.18em; color: var(--ink-muted); }
.plan.featured .plan-name { color: rgba(242,237,226,0.6); }
.plan .plan-price { font-size: 2.4rem; font-weight: 600; letter-spacing: -0.03em; display: flex; align-items: baseline; gap: 4px; }
.plan .plan-price .per { font-size: 0.95rem; font-weight: 400; color: var(--ink-muted); font-family: var(--font-mono); }
.plan.featured .plan-price .per { color: rgba(242,237,226,0.6); }
.plan .plan-blurb { font-size: .95rem; color: var(--ink-soft); }
.plan.featured .plan-blurb { color: rgba(242,237,226,0.75); }
.plan ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.plan li { font-size: 0.95rem; color: var(--ink-soft); display: flex; align-items: flex-start; gap: 10px; }
.plan.featured li { color: rgba(242,237,226,0.78); }
.plan li::before {
content: ''; flex-shrink: 0;
width: 16px; height: 16px;
border: 1px solid var(--ink);
border-radius: 4px; margin-top: 2px;
background-image: linear-gradient(135deg, transparent 35%, var(--signal) 35%, var(--signal) 50%, transparent 50%);
}
.plan.featured li::before { border-color: rgba(242,237,226,0.7); }
.plan .btn { width: 100%; }
/* ─── Proof / quote ────────────────────────────────────────────────── */
.proof { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 80px); align-items: center; }
@media (max-width: 900px) { .proof { grid-template-columns: 1fr; } }
.proof blockquote {
font-size: clamp(1.5rem, 2.4vw, 2.05rem);
font-weight: 500; letter-spacing: -0.025em;
line-height: 1.3; color: var(--ink);
}
.proof blockquote::before {
content: '"'; display: block;
font-size: 4rem; line-height: 0.6;
color: var(--signal); margin-bottom: 12px;
}
.proof cite {
font-style: normal;
display: flex; align-items: center; gap: 12px;
margin-top: 28px;
font-family: var(--font-mono);
font-size: 0.85rem; color: var(--ink-muted);
}
.proof cite .av {
width: 36px; height: 36px; border-radius: 50%;
background: var(--ocean); color: var(--bone);
display: flex; align-items: center; justify-content: center;
font-family: var(--font-display); font-weight: 600; font-size: 0.9rem;
}
.proof-tags { margin-top: 36px; display: flex; gap: 24px; flex-wrap: wrap; font-family: var(--font-mono); font-size: .78rem; color: var(--ink-muted); text-transform: uppercase; letter-spacing: .14em; }
/* ─── CTA banner ───────────────────────────────────────────────────── */
.cta-banner {
background: var(--ink); color: var(--bone);
border-radius: 32px; margin: 0 var(--gutter);
padding: clamp(56px, 8vw, 100px) clamp(24px, 6vw, 80px);
text-align: center; position: relative; overflow: hidden;
}
@media (max-width: 700px) { .cta-banner { margin: 0 12px; border-radius: 20px; } }
.cta-banner::before {
/* Subtle signal halo top-right + ocean bottom-left for depth — same
ambient-light treatment as the booking section's Ink slab. */
content: ''; position: absolute; inset: 0;
background:
radial-gradient(800px 460px at 90% 0%, rgba(234,106,44,0.14), transparent 65%),
radial-gradient(700px 460px at 0% 100%, rgba(59,91,219,0.10), transparent 65%);
pointer-events: none;
}
.cta-banner h2 { font-size: clamp(2.2rem, 4.5vw, 4rem); letter-spacing: -0.04em; margin-bottom: 24px; position: relative; color: var(--bone); }
.cta-banner h2 .bk-accent { position: relative; }
.cta-banner h2 .bk-accent::after { content: '.'; color: var(--signal); font-weight: 700; }
.cta-banner p { font-size: 1.1rem; color: var(--bone); opacity: 0.78; margin: 0 auto 36px; max-width: 520px; position: relative; }
.cta-banner .cta-row { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; position: relative; }
/* Primary CTA pops as the signal-orange gradient accent against the
ink slab — same gradient + glow as .btn--signal so the brand reads
as one accent. */
.cta-banner .btn--primary {
background: linear-gradient(135deg, #F2823F 0%, var(--signal) 50%, var(--signal-deep) 100%);
color: var(--bone);
box-shadow: 0 6px 16px -8px rgba(234,106,44,0.55), inset 0 1px 0 rgba(255,255,255,0.10);
}
.cta-banner .btn--primary:hover {
background: linear-gradient(135deg, var(--signal) 0%, var(--signal-deep) 100%);
color: var(--bone);
box-shadow: 0 8px 18px -8px rgba(234,106,44,0.62), inset 0 1px 0 rgba(255,255,255,0.10);
}
.cta-banner .btn--ghost { border-color: rgba(242,237,226,0.45); color: var(--bone); }
.cta-banner .btn--ghost:hover { border-color: var(--bone); background: rgba(242,237,226,0.08); }
/* ─── Footer ───────────────────────────────────────────────────────── */
.lq-footer {
padding: 80px 0 40px;
background: var(--bone);
border-top: 1px solid var(--line);
margin-top: clamp(80px, 10vw, 140px);
}
.footer-grid {
display: grid;
grid-template-columns: 1.4fr 1fr 1fr 1fr;
gap: clamp(24px, 4vw, 72px);
margin-bottom: 64px;
}
@media (max-width: 800px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; } }
.footer-col h5 {
font-family: var(--font-mono); font-size: 0.74rem;
text-transform: uppercase; letter-spacing: 0.18em;
color: var(--ink-muted); margin-bottom: 18px; font-weight: 400;
}
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.footer-col a { color: var(--ink-soft); text-decoration: none; font-size: 0.95rem; transition: color 0.15s; }
.footer-col a:hover { color: var(--ink); }
.footer-tag { font-size: 0.96rem; color: var(--ink-soft); margin-top: 16px; max-width: 28ch; }
.footer-base {
display: flex; flex-wrap: wrap; gap: 18px 28px;
align-items: center; justify-content: space-between;
padding-top: 32px; border-top: 1px solid var(--line);
font-family: var(--font-mono); font-size: 0.78rem; color: var(--ink-muted);
}
.footer-base .legal { display: flex; gap: 22px; }
.footer-base a { color: var(--ink-muted); text-decoration: none; }
.footer-base a:hover { color: var(--ink); }
/* ─── Generic page hero (used by /features, /pricing, /about, /contact) ─ */
.page-hero { padding: clamp(80px, 10vw, 140px) 0 clamp(40px, 6vw, 80px); border-bottom: 1px solid var(--line); }
.page-hero .eyebrow { display: inline-flex; align-items: center; }
.page-hero h1 { font-size: clamp(2.6rem, 5.4vw, 5rem); letter-spacing: -0.045em; line-height: 1; margin: 16px 0 24px; max-width: 18ch; }
.page-hero .lead { font-size: clamp(1.15rem, 1.7vw, 1.42rem); max-width: 64ch; }
/* ─── Features-page tab nav ─────────────────────────────────────────
Sticky horizontal scroller below the page hero. Tabs jump-scroll
to anchored sections and the active tab updates as you scroll. */
.feat-tabs {
position: sticky;
top: 72px;
z-index: 80;
background: rgba(242,237,226,0.92);
backdrop-filter: saturate(180%) blur(14px);
-webkit-backdrop-filter: saturate(180%) blur(14px);
border-bottom: 1px solid var(--line);
}
.feat-tabs ul {
list-style: none;
display: flex;
gap: 6px;
overflow-x: auto;
scrollbar-width: none;
-ms-overflow-style: none;
padding: 12px 0;
}
.feat-tabs ul::-webkit-scrollbar { display: none; }
.feat-tabs li { flex: 0 0 auto; }
.feat-tabs a {
display: inline-flex;
align-items: center;
font-family: var(--font-mono);
font-size: 0.78rem;
letter-spacing: 0.12em;
text-transform: uppercase;
text-decoration: none;
color: var(--ink-muted);
padding: 9px 14px;
border-radius: 999px;
border: 1px solid transparent;
white-space: nowrap;
transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.feat-tabs a:hover { color: var(--ink); border-color: var(--line-strong); }
.feat-tabs a.is-active {
background: var(--ink);
color: var(--bone);
border-color: var(--ink);
}
.feat-tabs a.is-vio { color: var(--vio); }
.feat-tabs a.is-vio:hover { color: var(--vio-deep); border-color: var(--vio); }
.feat-tabs a.is-vio.is-active {
background: var(--vio);
border-color: var(--vio);
color: var(--bone);
}
.feat-tabs a.is-pay { color: var(--ocean); }
.feat-tabs a.is-pay:hover { color: var(--ocean); border-color: var(--ocean); }
.feat-tabs a.is-pay.is-active { background: var(--ocean); border-color: var(--ocean); color: var(--bone); }
/* Each section gets enough scroll-margin so jump-anchors land below
the sticky header + sticky tabs. */
.feat-row[id] { scroll-margin-top: 140px; }
/* ─── VIO sub-brand swap inside its row ──────────────────────────── */
.feat-row.vio-row .eyebrow.vio { color: var(--vio); }
.feat-row.vio-row .eyebrow.vio .dot { background: var(--vio); }
.feat-row.vio-row ul li::before {
background: linear-gradient(135deg, transparent 38%, var(--vio) 38%, var(--vio) 56%, transparent 56%);
}
.feat-illust.vio .illust-card {
border-color: var(--vio);
}
.feat-illust.vio .illust-card .pill.vio {
background: var(--vio);
border-color: var(--vio);
color: var(--bone);
}
/* ─── Partner callout (used on /features Events section) ───────────
Round-logo + short copy block, sits inside a feat-text column to
credit a real customer running on the Linq events platform. */
.lq-partner {
display: grid;
grid-template-columns: 56px 1fr;
gap: 18px;
align-items: center;
margin-top: 28px;
padding: 18px 20px;
background: var(--bone-soft);
border: 1px solid var(--line);
border-radius: 14px;
position: relative;
}
.lq-partner::after {
content: '';
position: absolute; right: -1px; bottom: -1px;
width: 12px; height: 12px;
background: var(--signal);
border-radius: 3px;
}
.lq-partner-logo {
width: 56px; height: 56px;
border-radius: 50%;
border: 1px solid var(--line);
background: var(--bone);
display: block;
object-fit: cover;
}
.lq-partner-copy { display: flex; flex-direction: column; gap: 4px; }
.lq-partner-eb {
font-family: var(--font-mono);
font-size: 0.7rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--ink-muted);
}
.lq-partner-copy p {
font-size: 0.95rem;
color: var(--ink-soft);
line-height: 1.5;
margin: 0;
}
@media (max-width: 540px) {
.lq-partner { grid-template-columns: 1fr; gap: 12px; }
.lq-partner-logo { width: 48px; height: 48px; }
}
/* ─── Industries trade-chip list (used on /industries inside the
Service trades section to surface every trade with a deep-link
into /service-trades#). Visually a wrap of pill anchors. */
.ind-trade-chips {
list-style: none;
display: flex; flex-wrap: wrap; gap: 8px;
margin: 4px 0 0;
}
.ind-trade-chips li { margin: 0; padding: 0; display: inline-flex; }
.ind-trade-chips li::before { content: none; display: none; }
.ind-trade-chips a {
display: inline-flex; align-items: center;
font-family: var(--font-mono);
font-size: 0.78rem;
letter-spacing: 0.1em;
text-transform: uppercase;
text-decoration: none;
color: var(--ink);
padding: 8px 14px;
border-radius: 999px;
border: 1px solid var(--line-strong);
background: var(--bone-soft);
transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.ind-trade-chips a:hover {
background: var(--ink);
color: var(--bone);
border-color: var(--ink);
}
/* 2×3 grid modifier — used on /industries so the trade chip list reads
as a tight signpost (top 6 trades) instead of a long single-column
wrap on mobile. The full set is reachable via the See all trades
CTA below. */
.ind-trade-chips--grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
max-width: 480px;
}
.ind-trade-chips--grid li { display: block; }
.ind-trade-chips--grid a { width: 100%; justify-content: center; }
/* ─── Industries Events partner figure — Therapy Sound profile shot.
Fills the column edge-to-edge inside the .feat-row so the cream
L/R gutter is the page's gutter, not extra figure padding. */
.ind-events-figure {
margin: 0;
width: 100%;
display: flex; flex-direction: column; gap: 12px;
align-items: center;
}
.ind-events-img {
width: 100%;
height: auto;
display: block;
border-radius: 18px;
border: 1px solid var(--line);
box-shadow: 0 12px 32px -16px rgba(15,22,35,0.32);
}
.ind-events-cap {
font-family: var(--font-mono);
font-size: 0.74rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--ink-muted);
text-align: center;
display: flex; flex-direction: column; gap: 4px;
}
.ind-events-cap-eb {
color: var(--vio);
font-weight: 500;
}
/* ─── Payments / processing accent ───────────────────────────────── */
.feat-row.pay-row .eyebrow.pay { color: var(--ocean); }
.feat-row.pay-row .eyebrow.pay .dot { background: var(--ocean); }
.feat-row.pay-row ul li::before {
background: linear-gradient(135deg, transparent 38%, var(--ocean) 38%, var(--ocean) 56%, transparent 56%);
}
.feat-illust.pay .illust-card { border-color: var(--ocean); }
.feat-illust.pay .illust-card .pill.pay { background: var(--ocean); border-color: var(--ocean); color: var(--bone); }
/* ─── 2% rate promo banner (used on /home + /features) ─────────────
Bottom margin matters: on /home this card sits directly above the
`.lq-book` dark slab. Without bottom space the two ink surfaces
merge into one shape on mobile (the rounded card looks pasted onto
the slab with no breathing cream between them). */
.lq-rate-promo {
background: var(--ink);
color: var(--bone);
border-radius: 24px;
margin: clamp(60px, 8vw, 100px) var(--gutter) clamp(40px, 6vw, 72px);
padding: clamp(36px, 5vw, 56px) clamp(28px, 4vw, 64px);
display: grid;
grid-template-columns: auto 1fr auto;
gap: clamp(20px, 3vw, 44px);
align-items: center;
position: relative;
overflow: hidden;
}
.lq-rate-promo::before {
content: '';
position: absolute; inset: 0; pointer-events: none;
background: radial-gradient(700px 400px at 92% 0%, rgba(234,106,44,0.12), transparent 65%);
}
@media (max-width: 760px) {
.lq-rate-promo { grid-template-columns: 1fr; text-align: left; gap: 18px; }
.lq-rate-promo { margin: clamp(40px,6vw,60px) 12px clamp(32px,5vw,48px); border-radius: 18px; }
}
.lq-rate-num {
font-family: var(--font-display);
font-weight: 600;
font-size: clamp(3rem, 6vw, 5rem);
letter-spacing: -0.045em;
line-height: 1;
color: var(--bone);
position: relative;
}
.lq-rate-num .pct { color: var(--signal); }
.lq-rate-num .small {
display: block;
font-family: var(--font-mono);
font-size: 0.74rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(242,237,226,0.55);
font-weight: 400;
margin-top: 8px;
}
.lq-rate-copy { position: relative; }
.lq-rate-copy h3 {
font-family: var(--font-display);
font-weight: 600;
font-size: clamp(1.4rem, 2.4vw, 2rem);
letter-spacing: -0.03em;
color: var(--bone);
margin: 0 0 8px;
}
.lq-rate-copy p {
font-size: 0.98rem;
color: rgba(242,237,226,0.78);
line-height: 1.55;
margin: 0;
max-width: 56ch;
}
.lq-rate-cta { position: relative; }
/* ─── Features deep-dive (alternating rows) ────────────────────────── */
.feat-row {
display: grid; grid-template-columns: 1fr 1fr;
gap: clamp(40px, 6vw, 96px);
align-items: center;
padding: clamp(60px, 8vw, 120px) 0;
border-bottom: 1px solid var(--line);
}
.feat-row:last-child { border-bottom: 0; }
@media (max-width: 900px) { .feat-row { grid-template-columns: 1fr; } }
.feat-row.reverse .feat-text { order: 2; }
@media (max-width: 900px) { .feat-row.reverse .feat-text { order: 0; } }
.feat-row h2 { font-size: clamp(2rem, 3.4vw, 3rem); letter-spacing: -0.035em; margin: 14px 0 22px; }
.feat-row p { font-size: 1.05rem; color: var(--ink-soft); margin-bottom: 22px; }
.feat-row ul { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.feat-row ul li { display: flex; gap: 14px; font-size: 0.97rem; color: var(--ink-soft); align-items: flex-start; }
.feat-row ul li::before {
content: ''; flex-shrink: 0;
width: 20px; height: 20px;
border: 1px solid var(--ink);
border-radius: 5px;
margin-top: 1px;
background:
linear-gradient(135deg, transparent 38%, var(--signal) 38%, var(--signal) 56%, transparent 56%);
}
.feat-illust {
background: var(--bone-soft);
border: 1px solid var(--line);
border-radius: 20px;
aspect-ratio: 4 / 3;
display: flex; align-items: center; justify-content: center;
position: relative;
overflow: hidden;
}
.feat-illust::before {
content: ''; position: absolute; inset: 0;
background-image:
linear-gradient(var(--line-soft) 1px, transparent 1px),
linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
background-size: 32px 32px; opacity: 0.7;
}
.feat-illust .illust-card {
position: relative;
background: var(--bone);
border: 1px solid var(--line);
border-radius: 14px;
padding: 22px 24px;
width: 76%;
font-family: var(--font-mono);
box-shadow: 0 1px 0 rgba(15,22,35,0.04);
}
.feat-illust .illust-card .ic-eb { font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: 12px; }
.feat-illust .illust-card .ic-row {
display: flex; align-items: center; justify-content: space-between;
padding: 8px 0; border-top: 1px dashed var(--line-soft);
font-size: 0.84rem;
}
.feat-illust .illust-card .ic-row:first-of-type { border-top: 0; }
.feat-illust .illust-card .ic-row .pill {
font-size: 0.66rem; padding: 2px 8px; border-radius: 999px;
background: var(--bone-soft); border: 1px solid var(--line);
}
.feat-illust .illust-card .ic-row .pill.signal { background: var(--signal); border-color: var(--signal); color: var(--bone); }
.feat-illust .illust-card .ic-row .pill.ocean { background: var(--ocean); border-color: var(--ocean); color: var(--bone); }
.feat-illust .illust-card .ic-row .pill.sage { background: var(--sage); border-color: var(--sage); color: var(--bone); }
/* ─── Pricing page ─────────────────────────────────────────────────── */
.pricing-toggle {
display: inline-flex; align-items: center; gap: 4px;
background: var(--bone-soft); border: 1px solid var(--line);
border-radius: 999px; padding: 4px;
font-family: var(--font-mono); font-size: 0.82rem;
margin-bottom: 48px;
}
.pricing-toggle button {
font: inherit; background: transparent; border: 0;
padding: 8px 16px; border-radius: 999px; cursor: pointer;
color: var(--ink-muted); transition: all 0.15s;
}
.pricing-toggle button.is-active { background: var(--ink); color: var(--bone); }
.compare-table { width: 100%; border-collapse: collapse; margin-top: clamp(60px, 8vw, 100px); }
.compare-table th, .compare-table td {
padding: 16px 18px; text-align: left;
border-bottom: 1px solid var(--line);
font-size: 0.95rem;
}
.compare-table thead th {
font-family: var(--font-mono); font-size: 0.78rem;
letter-spacing: 0.14em; text-transform: uppercase;
color: var(--ink-muted); font-weight: 400;
}
.compare-table tbody td:first-child { font-weight: 500; color: var(--ink); }
.compare-table .col-feat { width: 40%; }
.compare-table .check::before { content: '✓'; color: var(--sage); font-weight: 600; }
.compare-table .dash { color: var(--ink-faint); }
/* ─── About page ───────────────────────────────────────────────────── */
.about-grid {
display: grid; grid-template-columns: 1fr 1fr;
gap: clamp(40px, 5vw, 80px);
margin-top: clamp(60px, 8vw, 96px);
}
@media (max-width: 800px) { .about-grid { grid-template-columns: 1fr; } }
.about-grid p { font-size: 1.08rem; color: var(--ink-soft); line-height: 1.7; }
.about-values {
display: grid; grid-template-columns: repeat(3, 1fr);
gap: 20px;
margin-top: clamp(60px, 8vw, 96px);
}
@media (max-width: 800px) { .about-values { grid-template-columns: 1fr; } }
.about-value {
padding: 28px;
background: var(--bone-soft);
border: 1px solid var(--line);
border-radius: 16px;
}
.about-value h4 { font-size: 1.15rem; margin: 16px 0 10px; }
.about-value p { font-size: 0.95rem; color: var(--ink-soft); }
.about-value .vnum { font-family: var(--font-mono); font-size: 0.8rem; letter-spacing: 0.18em; color: var(--signal); }
/* ─── Contact page ─────────────────────────────────────────────────── */
.contact-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(40px, 6vw, 96px); margin-top: clamp(40px, 6vw, 80px); }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }
.contact-info dt { font-family: var(--font-mono); font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.16em; color: var(--ink-muted); margin-top: 24px; }
.contact-info dt:first-child { margin-top: 0; }
.contact-info dd { font-size: 1.05rem; color: var(--ink); margin-top: 4px; }
.contact-info dd a { color: var(--ink); text-decoration: none; border-bottom: 1px dashed var(--line-strong); }
.contact-info dd a:hover { border-bottom-color: var(--ink); }
.contact-form { background: var(--bone-soft); border: 1px solid var(--line); border-radius: 18px; padding: clamp(28px, 4vw, 44px); }
.contact-form .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
@media (max-width: 600px) { .contact-form .form-row { grid-template-columns: 1fr; } }
.contact-form label { display: flex; flex-direction: column; gap: 6px; font-family: var(--font-mono); font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--ink-muted); }
.contact-form input, .contact-form textarea, .contact-form select {
font-family: var(--font-display); font-size: 0.98rem;
padding: 14px 16px; border-radius: 12px;
border: 1px solid var(--line);
background: var(--bone); color: var(--ink);
transition: border-color 0.15s, background 0.15s;
}
.contact-form input:focus, .contact-form textarea:focus, .contact-form select:focus {
outline: 0; border-color: var(--ink); background: white;
}
.contact-form textarea { min-height: 140px; resize: vertical; }
.contact-form .form-actions { margin-top: 8px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.contact-form .form-actions .fine { font-family: var(--font-mono); font-size: 0.74rem; color: var(--ink-muted); }
.flash-stack { margin-bottom: 24px; display: flex; flex-direction: column; gap: 10px; }
.flash {
padding: 14px 18px; border-radius: 12px;
font-size: 0.95rem;
border: 1px solid var(--line);
background: var(--bone-soft);
color: var(--ink);
}
.flash.success { background: rgba(122,140,92,0.16); border-color: var(--sage); }
.flash.error { background: rgba(234,106,44,0.12); border-color: var(--signal); }
/* ─── Universal booking section (_book_section.html) ──────────────────
Reusable across every Linq-built customer site. The visual treatment
is locked; only the form copy/options swap per site. The card on the
right is the brand-mark silhouette blown up — rounded square Bone
surface with a Signal-orange offset tab bottom-right. ────────────── */
.lq-book {
background: var(--ink);
color: var(--bone);
position: relative;
overflow: hidden;
padding: clamp(80px, 11vw, 160px) 0 clamp(80px, 11vw, 160px);
}
.lq-book::before {
/* Soft signal halo top-right + ocean halo bottom-left — gives the
Ink slab some depth without breaking the no-gradient brand rule
(these are background ambient lights, not visible gradients on
content). */
content: '';
position: absolute; inset: 0; pointer-events: none;
background:
radial-gradient(900px 500px at 92% 0%, rgba(234,106,44,0.12), transparent 65%),
radial-gradient(700px 500px at 0% 100%, rgba(59,91,219,0.10), transparent 65%);
}
.lq-book .lq-wrap { position: relative; }
.lq-book-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(40px, 6vw, 96px);
align-items: center;
}
@media (max-width: 980px) {
.lq-book-grid { grid-template-columns: 1fr; gap: 56px; }
}
/* ─── Left column copy ─── */
.lq-book-kicker {
display: inline-flex; align-items: center; gap: 12px;
font-family: var(--font-mono);
font-size: 0.78rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(242,237,226,0.66);
padding: 8px 14px 8px 10px;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.10);
border-radius: 999px;
}
.lq-book-kicker-dot {
width: 7px; height: 7px; border-radius: 50%;
background: var(--signal);
display: inline-block;
box-shadow: 0 0 0 4px rgba(234,106,44,0.18);
}
.lq-book-heading {
font-family: var(--font-display);
font-weight: 600;
font-size: clamp(3rem, 7vw, 6.4rem);
line-height: 0.96;
letter-spacing: -0.05em;
color: var(--bone);
margin: 28px 0 28px;
max-width: 14ch;
}
.lq-book-heading .bk-accent {
position: relative; display: inline;
}
.lq-book-heading .bk-accent::after {
content: '.'; color: var(--signal); font-weight: 700;
}
.lq-book-heading .bk-orange { color: var(--signal); }
.lq-book-subhead {
font-family: var(--font-display);
font-weight: 500;
font-size: clamp(1.25rem, 1.8vw, 1.65rem);
line-height: 1.3;
letter-spacing: -0.02em;
color: rgba(242,237,226,0.78);
margin: -8px 0 24px;
max-width: 32ch;
}
.lq-book-demo-pill {
display: inline-flex; align-items: center;
font-family: var(--font-mono);
font-size: 0.72rem;
letter-spacing: 0.18em;
text-transform: uppercase;
padding: 6px 12px;
background: var(--signal);
color: var(--bone);
border-radius: 4px;
margin-bottom: 18px;
font-weight: 500;
}
.lq-book-lead {
font-size: clamp(1.05rem, 1.4vw, 1.22rem);
color: rgba(242,237,226,0.74);
line-height: 1.55;
max-width: 52ch;
margin-bottom: 40px;
}
.lq-book-meta {
display: grid;
grid-template-columns: repeat(3, auto);
gap: 28px 36px;
align-items: start;
}
@media (max-width: 600px) { .lq-book-meta { grid-template-columns: 1fr 1fr; } }
.lq-book-meta dt {
font-family: var(--font-mono);
font-size: 0.72rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: rgba(242,237,226,0.5);
}
.lq-book-meta dd {
font-size: 1.02rem;
color: var(--bone);
margin-top: 6px;
font-weight: 500;
}
.lq-book-meta dd a { color: var(--signal); text-decoration: none; border-bottom: 1px dashed rgba(234,106,44,0.4); }
.lq-book-meta dd a:hover { border-bottom-color: var(--signal); }
/* ─── Right column: the brand-mark booking card ─── */
.lq-book-card {
background: var(--bone);
color: var(--ink);
border-radius: 28px;
padding: clamp(28px, 3.5vw, 44px);
position: relative;
display: flex; flex-direction: column;
gap: 28px;
}
.lq-book-card::after {
/* The brand-mark "escaping tab" — Signal orange offset square at the
bottom-right corner of the card, exactly mirroring the wordmark q. */
content: '';
position: absolute;
right: -18px;
bottom: -18px;
width: 64px; height: 64px;
background: var(--signal);
border-radius: 8px;
z-index: -1;
}
@media (max-width: 600px) {
.lq-book-card { border-radius: 22px; }
/* On mobile the wrap's gutter is small (clamp 20px), so a negative
right offset on the brand-mark tab consumes the entire visible
dark-slab gutter and the card reads as having zero right padding
(visible asymmetry vs the left gutter). Tuck the tab against the
card's right edge instead — it still pokes downward to keep the
brand mark feel, but no longer eats the side gutter. */
.lq-book-card::after { width: 44px; height: 44px; right: 0; bottom: -12px; }
}
/* ─── Step bar ─── */
.lq-book-stepbar {
display: flex; align-items: center;
gap: 10px;
margin-bottom: 4px;
}
.lq-book-step-pill {
font-family: var(--font-mono);
font-size: 0.74rem;
letter-spacing: 0.14em;
text-transform: uppercase;
padding: 6px 12px;
border-radius: 999px;
background: var(--bone-soft);
border: 1px solid var(--line);
color: var(--ink-muted);
white-space: nowrap;
transition: background 0.18s, color 0.18s, border-color 0.18s;
}
.lq-book-step-pill.is-active {
background: var(--ink);
color: var(--bone);
border-color: var(--ink);
}
.lq-book-step-pill.is-done {
background: var(--bone-warm);
color: var(--ink);
border-color: var(--line-strong);
}
.lq-book-step-divider {
flex: 1;
height: 1px;
background: var(--line);
}
.lq-book-step {
display: flex; flex-direction: column;
gap: 28px;
animation: lq-step-in 0.28s ease;
}
/* Class `display: flex` would otherwise override the `hidden` attribute
from the UA stylesheet — and the form would render as one tall stack. */
.lq-book-step[hidden],
.lq-book-success[hidden],
.lq-book-card[hidden] { display: none !important; }
@keyframes lq-step-in {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: translateY(0); }
}
/* Step 2 sub-header showing what was picked in step 1 */
.lq-book-step-back {
align-self: flex-start;
display: inline-flex; align-items: center; gap: 8px;
background: transparent;
border: 1px solid var(--line-strong);
border-radius: 999px;
padding: 8px 14px;
font-family: var(--font-mono);
font-size: 0.78rem;
letter-spacing: 0.06em;
color: var(--ink);
cursor: pointer;
transition: border-color 0.15s, background 0.15s;
}
.lq-book-step-back:hover { border-color: var(--ink); background: var(--bone-warm); }
.lq-book-step2-head {
display: flex; flex-direction: column; gap: 6px;
padding: 18px 20px;
border: 1px solid var(--ink);
border-radius: 14px;
background: var(--bone-soft);
position: relative;
}
.lq-book-step2-head::after {
content: '';
position: absolute; right: -1px; bottom: -1px;
width: 12px; height: 12px;
background: var(--signal);
border-radius: 3px;
}
.lq-book-step2-eyebrow {
font-family: var(--font-mono);
font-size: 0.7rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ink-muted);
}
.lq-book-step2-line {
font-family: var(--font-display);
font-weight: 500;
font-size: 1.08rem;
letter-spacing: -0.015em;
color: var(--ink);
display: flex; flex-wrap: wrap; gap: 8px;
align-items: baseline;
}
.lq-book-step2-line strong { font-weight: 600; }
.lq-book-step2-sep { color: var(--ink-muted); font-weight: 400; }
/* ─── Calendar ─── */
.lq-book-cal {
display: flex; flex-direction: column; gap: 12px;
}
.lq-book-cal-head {
display: flex; align-items: center; justify-content: space-between;
gap: 12px;
}
.lq-book-cal-title {
font-family: var(--font-display);
font-weight: 600;
font-size: 1.18rem;
letter-spacing: -0.02em;
}
.lq-book-cal-nav {
font-family: var(--font-display);
width: 36px; height: 36px;
border-radius: 999px;
border: 1px solid var(--line-strong);
background: transparent;
font-size: 1.2rem; font-weight: 500;
color: var(--ink); cursor: pointer;
display: inline-flex; align-items: center; justify-content: center;
transition: background 0.15s, border-color 0.15s;
}
.lq-book-cal-nav:hover { background: var(--ink); color: var(--bone); border-color: var(--ink); }
.lq-book-cal-dow {
display: grid; grid-template-columns: repeat(7, 1fr);
gap: 4px; padding: 6px 0;
font-family: var(--font-mono);
font-size: 0.7rem;
letter-spacing: 0.14em;
color: var(--ink-muted);
text-align: center;
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
.lq-book-cal-grid {
display: grid; grid-template-columns: repeat(7, 1fr);
gap: 4px;
padding-top: 6px;
}
.lq-book-cal-blank { aspect-ratio: 1; }
.lq-book-cal-day {
aspect-ratio: 1;
font-family: var(--font-display);
font-weight: 500;
font-size: 0.92rem;
background: transparent;
border: 1px solid transparent;
border-radius: 8px;
color: var(--ink);
cursor: pointer;
transition: background 0.12s, border-color 0.12s, color 0.12s;
display: inline-flex; align-items: center; justify-content: center;
}
.lq-book-cal-day:hover:not(:disabled):not(.is-selected) {
background: var(--bone-warm);
border-color: var(--line-strong);
}
.lq-book-cal-day.is-today {
border-color: var(--ocean);
color: var(--ocean);
font-weight: 600;
}
.lq-book-cal-day.is-selected,
.lq-book-cal-day.is-selected.is-today {
background: var(--signal);
border-color: var(--signal);
color: var(--bone);
font-weight: 600;
}
.lq-book-cal-day.is-past {
color: var(--ink-faint);
cursor: not-allowed;
text-decoration: line-through;
}
/* ─── Time slot pills ─── */
.lq-book-slots {
border: 0; padding: 0; margin: 0;
}
.lq-book-slots legend {
font-family: var(--font-mono);
font-size: 0.72rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--ink-muted);
margin-bottom: 10px;
}
.lq-book-slots-row {
display: flex; flex-wrap: wrap; gap: 8px;
}
.lq-book-slot { position: relative; }
.lq-book-slot input { position: absolute; opacity: 0; pointer-events: none; }
.lq-book-slot span {
display: inline-block;
padding: 9px 14px;
border-radius: 999px;
border: 1px solid var(--line-strong);
background: var(--bone);
font-family: var(--font-mono);
font-size: 0.82rem;
color: var(--ink);
cursor: pointer;
transition: all 0.12s;
}
.lq-book-slot:hover span { border-color: var(--ink); }
.lq-book-slot input:checked + span {
background: var(--ink);
color: var(--bone);
border-color: var(--ink);
}
.lq-book-slot input:focus-visible + span { outline: 2px solid var(--signal); outline-offset: 2px; }
/* ─── Form fields ─── */
.lq-book-fields {
display: grid; grid-template-columns: 1fr 1fr;
gap: 14px;
}
@media (max-width: 540px) { .lq-book-fields { grid-template-columns: 1fr; } }
.lq-book-field { display: flex; flex-direction: column; gap: 6px; }
.lq-book-field--full { grid-column: 1 / -1; }
.lq-book-field span {
font-family: var(--font-mono);
font-size: 0.72rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--ink-muted);
}
.lq-book-field input, .lq-book-field select {
font-family: var(--font-display);
font-size: 0.98rem;
padding: 13px 14px;
border-radius: 12px;
border: 1px solid var(--line);
background: var(--bone-soft);
color: var(--ink);
transition: border-color 0.15s, background 0.15s;
}
.lq-book-field input:focus,
.lq-book-field select:focus {
outline: 0;
border-color: var(--ink);
background: white;
}
/* ─── Submit ─── */
.lq-book-submit {
margin-top: 4px;
background: var(--ink);
color: var(--bone);
border: 0;
border-radius: 14px;
padding: 18px 22px;
font-family: var(--font-display);
font-weight: 500;
font-size: 1.08rem;
letter-spacing: -0.01em;
cursor: pointer;
display: inline-flex; align-items: center; justify-content: center;
gap: 12px;
transition: background 0.15s, transform 0.15s;
}
.lq-book-submit:hover { background: var(--signal); color: var(--bone); transform: translateY(-1px); }
.lq-book-submit svg { transition: transform 0.2s; }
.lq-book-submit:hover svg { transform: translateX(4px); }
.lq-book-fine {
font-family: var(--font-mono);
font-size: 0.74rem;
color: var(--ink-muted);
text-align: center;
margin: 0;
}
/* ─── Demo success panel (linqsystem.com sample only) ─── */
.lq-book-stage { position: relative; }
.lq-book-success {
background: var(--bone);
color: var(--ink);
border-radius: 28px;
padding: clamp(28px, 3.5vw, 44px);
position: relative;
display: flex; flex-direction: column;
gap: 18px;
}
.lq-book-success::after {
content: '';
position: absolute;
right: -18px; bottom: -18px;
width: 64px; height: 64px;
background: var(--signal);
border-radius: 8px;
z-index: -1;
}
@media (max-width: 600px) {
.lq-book-success { border-radius: 22px; }
/* Match the booking-card mobile rule — keep the brand-mark tab tucked
against the card's right edge so it doesn't eat the gutter. */
.lq-book-success::after { width: 44px; height: 44px; right: 0; bottom: -12px; }
}
.lq-book-success-h {
font-family: var(--font-display);
font-weight: 600;
font-size: clamp(2.2rem, 4vw, 3.4rem);
letter-spacing: -0.04em;
line-height: 1;
color: var(--ink);
margin: 0 0 8px;
}
.lq-book-success-h .bk-accent {
position: relative; display: inline;
}
.lq-book-success-h .bk-accent::after {
content: '.'; color: var(--signal); font-weight: 700;
}
.lq-book-success-summary {
font-size: 1rem;
color: var(--ink-soft);
line-height: 1.55;
margin: 0 0 12px;
max-width: 50ch;
}
.lq-book-success-summary strong {
font-family: var(--font-mono);
font-size: 0.9rem;
font-weight: 500;
background: var(--bone-warm);
border: 1px solid var(--line);
padding: 2px 8px;
border-radius: 6px;
margin: 0 2px;
color: var(--ink);
letter-spacing: 0.04em;
}
/* The 3 promo cards — each one mirrors the brand mark frame
(rounded square + signal-orange offset tab). */
.lq-book-promos {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
margin: 12px 0 8px;
}
@media (max-width: 720px) { .lq-book-promos { grid-template-columns: 1fr; } }
.lq-book-promo {
position: relative;
background: var(--bone-soft);
border: 1px solid var(--ink);
border-radius: 14px;
padding: 22px 20px 24px;
display: flex; flex-direction: column;
gap: 10px;
}
.lq-book-promo::after {
content: '';
position: absolute; right: -1px; bottom: -1px;
width: 14px; height: 14px;
background: var(--signal);
border-radius: 3px;
}
.lq-book-promo .iframe--inline {
width: 38px; height: 38px;
border: 1px solid var(--ink);
border-radius: 8px;
display: flex; align-items: center; justify-content: center;
margin-bottom: 4px;
background: var(--bone);
position: relative;
}
.lq-book-promo .iframe--inline::after {
content: '';
position: absolute; right: -1px; bottom: -1px;
width: 8px; height: 8px;
background: var(--signal);
border-radius: 2px;
}
.lq-book-promo .iframe--inline svg { color: var(--ink); display: block; }
.lq-book-promo h4 {
font-family: var(--font-display);
font-weight: 600;
font-size: 1rem;
letter-spacing: -0.015em;
color: var(--ink);
}
.lq-book-promo p {
font-size: 0.88rem;
color: var(--ink-soft);
line-height: 1.5;
margin: 0;
}
.lq-book-success-cta {
display: flex; flex-wrap: wrap; gap: 10px;
margin-top: 12px;
}
.lq-book-success-cta .btn { flex: 0 0 auto; }
@media (max-width: 540px) {
.lq-book-success-cta .btn { flex: 1 1 100%; justify-content: center; }
}
/* ─── Legal pages (privacy / terms) ────────────────────────────────── */
.legal-body { max-width: 72ch; margin: 0 auto; padding: clamp(40px, 6vw, 80px) 0 clamp(80px, 10vw, 140px); }
.legal-body h2 { font-size: 1.4rem; margin: 40px 0 14px; }
.legal-body h3 { font-size: 1.08rem; margin: 24px 0 10px; }
.legal-body p, .legal-body li { font-size: 1.02rem; color: var(--ink-soft); line-height: 1.65; margin-bottom: 14px; }
.legal-body ul { padding-left: 1.2em; }
.legal-body .updated { font-family: var(--font-mono); font-size: 0.78rem; color: var(--ink-muted); margin-bottom: 32px; }
/* ── Start-for-Free band ──────────────────────────────────────────
Replaces the per-tier pricing grid on the home page (pricing detail
still lives on /pricing). Loud signal-orange slab, white type, a
short benefits-chip row and one CTA pill. Sits where the pricing
section used to sit (still id=pricing for the TOC link). */
.lq-start-free{
background: var(--signal);
color: #fff;
padding: clamp(64px, 9vw, 110px) 0;
position: relative;
overflow: hidden;
}
.lq-start-free::before{
/* halftone grain so the orange slab isn't a flat block */
content:''; position:absolute; inset:0;
background-image: radial-gradient(circle at 0.5px 0.5px,
rgba(255,255,255,0.10) 0.5px, transparent 1px);
background-size: 4px 4px;
pointer-events:none; mix-blend-mode: overlay;
}
.lq-start-free-inner{
position: relative; z-index: 1;
max-width: 880px;
text-align: center;
margin: 0 auto;
}
.lq-start-free-eyebrow{
display:inline-block;
font-family: var(--font-mono, 'JetBrains Mono'), monospace;
font-size: 0.74rem;
letter-spacing: 0.24em;
text-transform: uppercase;
color: rgba(255,255,255,0.92);
padding: 6px 14px;
border: 1px solid rgba(255,255,255,0.45);
border-radius: 999px;
margin-bottom: 24px;
}
.lq-start-free-h{
font-family: var(--font-display, 'Big Shoulders Display'), sans-serif;
font-weight: 900;
font-size: clamp(2.6rem, 6vw, 4.8rem);
line-height: 0.95;
letter-spacing: -0.025em;
color: #fff;
margin: 0 0 18px;
}
.lq-start-free-lead{
font-size: clamp(1.02rem, 1.4vw, 1.18rem);
line-height: 1.55;
color: rgba(255,255,255,0.92);
max-width: 640px;
margin: 0 auto 32px;
}
.lq-start-free-chips{
list-style: none; padding: 0; margin: 0 0 36px;
display: flex; flex-wrap: wrap; gap: 8px;
justify-content: center;
}
.lq-start-free-chips li{
font-family: var(--font-mono, 'JetBrains Mono'), monospace;
font-size: 0.74rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: #fff;
padding: 8px 14px;
border: 1px solid rgba(255,255,255,0.45);
border-radius: 999px;
background: rgba(255,255,255,0.06);
}
.lq-start-free-cta{
display: inline-flex; align-items: center; gap: 10px;
background: #fff;
color: var(--signal, #EA6A2C);
font-family: var(--font-display, 'Big Shoulders Display'), sans-serif;
font-weight: 800;
font-size: 1.02rem;
letter-spacing: 0.04em;
text-transform: uppercase;
text-decoration: none;
padding: 18px 32px;
border-radius: 999px;
box-shadow: 0 14px 32px -14px rgba(0,0,0,0.45);
transition: transform 0.15s, background 0.15s, color 0.15s;
}
.lq-start-free-cta:hover{
background: var(--ink, #0F1623);
color: #fff;
transform: translateY(-1px);
}
.lq-start-free-cta .arrow{
transition: transform 0.2s;
}
.lq-start-free-cta:hover .arrow{ transform: translateX(4px); }