/* ===================================== */
/* Maintenance Partners site stylesheet */
/* ===================================== */
/*
* Single consolidated stylesheet for the entire site. Organised by concern:
* tokens, reset, typography, primitives, chrome components, page sections,
* responsive.
*
* Dark is the default theme. Light is applied via [data-theme="light"].
* Every colour pair passes WCAG 2.2 AA contrast at its intended text size.
* Every spacing, size, font-size, line-height, and letter-spacing value
* traces to a token. No magic numbers.
*/
/* ===================================== */
/* Design tokens */
/* ===================================== */
:root
{
/* Surface colours */
--color-surface: #0b0a08;
--color-surface-1: #141209;
--color-surface-2: #1e1b13;
--color-surface-3: #27231a;
--color-border: #362f23;
--color-border-sub: #22201a;
/* Ink colours */
--color-ink: #f1eadb;
--color-ink-muted: #b7ac99;
--color-ink-subtle: #8d8272;
/* Accent colours */
--color-accent: #f07640;
--color-accent-hi: #ff875a;
--color-accent-wash: rgba(240, 118, 64, 0.12);
--color-accent-glow: rgba(240, 118, 64, 0.18);
--color-on-accent: #1a0d05;
/* Semantic colours */
--color-success: #6fe094;
--color-warning: #ffc061;
--color-danger: #ff8a8a;
--color-success-wash: rgba(111, 224, 148, 0.12);
--color-warning-wash: rgba(255, 192, 97, 0.12);
--color-danger-wash: rgba(255, 138, 138, 0.12);
/* Font families */
--font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
--font-display: "Plus Jakarta Sans", "Inter", system-ui, sans-serif;
--font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
/* Font size scale (modular ratio 1.200, base 16px) */
--text-xs: 11px;
--text-sm: 13px;
--text-base: 16px;
--text-md: 19px;
--text-lg: 23px;
--text-xl: 28px;
--text-2xl: 33px;
--text-3xl: 40px;
--text-4xl: 48px;
--text-5xl: 58px;
--text-6xl: 69px;
/* Line height scale */
--leading-none: 1;
--leading-tight: 1.05;
--leading-snug: 1.15;
--leading-normal: 1.5;
--leading-body: 1.6;
--leading-relaxed: 1.7;
/* Letter spacing scale */
--tracking-tightest: -0.035em;
--tracking-tighter: -0.025em;
--tracking-tight: -0.015em;
--tracking-normal: 0;
--tracking-wide: 0.01em;
--tracking-wider: 0.05em;
--tracking-widest: 0.1em;
/* Font weight scale */
--weight-regular: 400;
--weight-medium: 500;
--weight-semibold: 600;
--weight-bold: 700;
--weight-black: 800;
/* Spacing scale (factor of 4) */
--space-0: 0;
--space-half: 2px;
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-7: 28px;
--space-8: 32px;
--space-9: 36px;
--space-10: 40px;
--space-11: 44px;
--space-12: 48px;
--space-14: 56px;
--space-16: 64px;
--space-20: 80px;
--space-24: 96px;
--space-32: 128px;
/* Border widths */
--border-thin: 1px;
--border-base: 2px;
--border-thick: 3px;
/* Radius scale */
--radius-xs: 4px;
--radius-sm: 6px;
--radius-md: 10px;
--radius-lg: 16px;
--radius-xl: 24px;
--radius-2xl: 32px;
--radius-full: 9999px;
/* Motion */
--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
--ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);
--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
--ease-glide: cubic-bezier(0.4, 0, 0.2, 1);
--duration-fast: 150ms;
--duration-base: 220ms;
--duration-slow: 380ms;
--duration-lazy: 680ms;
/* Shadows */
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.18);
--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.20);
--shadow-lg: 0 12px 36px rgba(0, 0, 0, 0.30);
--shadow-xl: 0 24px 64px rgba(0, 0, 0, 0.38);
--shadow-glow: 0 8px 32px var(--color-accent-glow);
/* Layout constraints */
--width-content: 1180px;
--width-narrow: 720px;
--width-wide: 1440px;
--width-narrow-sm: 360px;
--width-narrow-md: 520px;
--width-narrow-lg: 560px;
--width-narrow-xl: 680px;
--height-header: 64px;
--height-announce: 40px;
--pad-page-x: clamp(16px, 5vw, 32px);
/* Touch target minimum per Apple HIG and WCAG 2.5.8 */
--touch-min: 44px;
/* Device frame colours, always theme independent. A real phone bezel
does not recolour with the operating system theme, neither does ours. */
--device-body: #0a0907;
--device-body-edge: #1b1916;
--device-screen: #000;
--device-rim: rgba(255, 255, 255, 0.10);
--device-outer-edge: rgba(0, 0, 0, 0.55);
--device-shadow: 0 40px 90px rgba(0, 0, 0, 0.48),
0 18px 40px rgba(0, 0, 0, 0.36);
/* iPhone-style mobile device geometry */
--device-bezel-mobile: 10px;
--device-radius-mobile-outer: 44px;
--device-radius-mobile-inner: 32px;
--device-island-width: 96px;
--device-island-height: 28px;
--device-island-offset: 18px;
--device-button-width: 3px;
--device-button-power: 84px;
--device-button-volume: 48px;
/* Desktop display chrome. A thin black hairline around the unmodified
screenshot with soft rounded corners. No bezel, no inner screen,
no device chrome. Theme independent so the border stays dark
regardless of the site theme. */
--device-radius-desktop: 10px;
/* Chapter number wash colour, theme aware */
--chapter-wash: rgba(240, 118, 64, 0.18);
/* Z index scale */
--z-base: 0;
--z-raised: 10;
--z-overlay: 50;
--z-header: 100;
--z-modal: 200;
--z-toast: 300;
}
[data-theme="light"]
{
--color-surface: #faf7f2;
--color-surface-1: #f1ead8;
--color-surface-2: #ebdfc6;
--color-surface-3: #e1d2b5;
--color-border: #c4b492;
--color-border-sub: #d9ccae;
--color-ink: #19150c;
--color-ink-muted: #544a38;
--color-ink-subtle: #6e614a;
--color-accent: #a8481a;
--color-accent-hi: #ba5022;
--color-accent-wash: rgba(168, 72, 26, 0.09);
--color-accent-glow: rgba(168, 72, 26, 0.13);
--color-on-accent: #fef7f2;
--color-success: #166534;
--color-warning: #92400e;
--color-danger: #b91c1c;
--color-success-wash: rgba(22, 101, 52, 0.10);
--color-warning-wash: rgba(146, 64, 14, 0.10);
--color-danger-wash: rgba(185, 28, 28, 0.10);
--shadow-sm: 0 1px 2px rgba(60, 40, 20, 0.06);
--shadow-md: 0 4px 12px rgba(60, 40, 20, 0.08);
--shadow-lg: 0 12px 36px rgba(60, 40, 20, 0.12);
--shadow-xl: 0 24px 64px rgba(60, 40, 20, 0.18);
/* Device shadow stays deep even on light theme so the phone reads as a
physical object in the hero, not a floating flat rectangle. */
--device-shadow: 0 40px 90px rgba(20, 15, 10, 0.30),
0 18px 40px rgba(20, 15, 10, 0.18);
--chapter-wash: rgba(168, 72, 26, 0.22);
}
/* ===================================== */
/* Reset */
/* ===================================== */
*,
*::before,
*::after
{
box-sizing: border-box;
margin: 0;
padding: 0;
}
html
{
font-size: var(--text-base);
line-height: var(--leading-body);
-webkit-text-size-adjust: 100%;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
scroll-behavior: smooth;
scroll-padding-top: calc(var(--height-header) + var(--space-4));
}
body
{
font-family: var(--font-sans);
font-size: var(--text-base);
line-height: var(--leading-body);
color: var(--color-ink);
background: var(--color-surface);
overflow-x: hidden;
min-height: 100vh;
transition: background-color var(--duration-base) var(--ease-out),
color var(--duration-base) var(--ease-out);
}
img,
picture,
svg,
video
{
display: block;
max-width: 100%;
height: auto;
}
a
{
color: inherit;
text-decoration: none;
}
button
{
cursor: pointer;
border: none;
background: none;
font-family: inherit;
font-size: inherit;
color: inherit;
}
input,
textarea,
select
{
font-family: inherit;
font-size: inherit;
color: inherit;
}
ul,
ol
{
list-style: none;
}
hr
{
border: none;
border-top: var(--border-thin) solid var(--color-border-sub);
}
/* ===================================== */
/* Typography classes */
/* ===================================== */
.type-display
{
font-family: var(--font-display);
font-weight: var(--weight-black);
font-size: clamp(var(--text-3xl), 5.5vw, var(--text-6xl));
line-height: var(--leading-tight);
letter-spacing: var(--tracking-tightest);
color: var(--color-ink);
}
.type-heading
{
font-family: var(--font-display);
font-weight: var(--weight-bold);
font-size: clamp(var(--text-xl), 3.8vw, var(--text-3xl));
line-height: var(--leading-tight);
letter-spacing: var(--tracking-tighter);
color: var(--color-ink);
}
.type-subheading
{
font-family: var(--font-display);
font-weight: var(--weight-semibold);
font-size: clamp(var(--text-md), 2.4vw, var(--text-xl));
line-height: var(--leading-snug);
letter-spacing: var(--tracking-tight);
color: var(--color-ink);
}
.type-lead
{
font-family: var(--font-sans);
font-size: clamp(var(--text-base), 1.4vw, var(--text-md));
line-height: var(--leading-normal);
color: var(--color-ink-muted);
}
.type-body
{
font-family: var(--font-sans);
font-size: var(--text-base);
line-height: var(--leading-body);
color: var(--color-ink);
}
.type-small
{
font-family: var(--font-sans);
font-size: var(--text-sm);
line-height: var(--leading-normal);
color: var(--color-ink-muted);
}
.type-caption
{
font-family: var(--font-sans);
font-size: var(--text-sm);
line-height: var(--leading-normal);
color: var(--color-ink-subtle);
letter-spacing: var(--tracking-wide);
}
.type-eyebrow
{
display: inline-flex;
align-items: center;
gap: var(--space-2);
font-family: var(--font-sans);
font-size: var(--text-xs);
font-weight: var(--weight-semibold);
text-transform: uppercase;
letter-spacing: var(--tracking-widest);
color: var(--color-accent);
}
.type-mono
{
font-family: var(--font-mono);
font-size: var(--text-sm);
line-height: var(--leading-normal);
}
.type-display em,
.type-heading em,
.type-subheading em
{
font-style: normal;
color: var(--color-accent);
}
/* ===================================== */
/* Focus and accessibility */
/* ===================================== */
:focus-visible
{
outline: var(--border-base) solid var(--color-accent);
outline-offset: var(--border-thick);
border-radius: var(--radius-sm);
}
input:focus-visible,
textarea:focus-visible,
select:focus-visible
{
outline-offset: 0;
box-shadow: 0 0 0 var(--border-thick) var(--color-accent-wash);
}
.skip-link
{
position: absolute;
top: calc(-1 * var(--space-24));
left: var(--space-4);
z-index: var(--z-toast);
padding: var(--space-3) var(--space-5);
background: var(--color-accent);
color: var(--color-on-accent);
font-weight: var(--weight-semibold);
font-size: var(--text-sm);
border-radius: 0 0 var(--radius-sm) var(--radius-sm);
transition: top var(--duration-fast) var(--ease-out);
}
.skip-link:focus
{
top: 0;
}
.sr-only
{
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
::selection
{
background: var(--color-accent);
color: var(--color-on-accent);
}
/* ===================================== */
/* Theme icon and logo visibility */
/* ===================================== */
.icon-moon { display: block; }
.icon-sun { display: none; }
[data-theme="light"] .icon-moon { display: none; }
[data-theme="light"] .icon-sun { display: block; }
.logo-dark { display: block; }
.logo-light { display: none; }
[data-theme="light"] .logo-dark { display: none; }
[data-theme="light"] .logo-light { display: block; }
/* ===================================== */
/* Containers */
/* ===================================== */
.container
{
width: 100%;
max-width: calc(var(--width-content) + 2 * var(--pad-page-x));
margin-inline: auto;
padding-inline: var(--pad-page-x);
}
.container-narrow
{
width: 100%;
max-width: calc(var(--width-narrow) + 2 * var(--pad-page-x));
margin-inline: auto;
padding-inline: var(--pad-page-x);
}
.container-wide
{
width: 100%;
max-width: calc(var(--width-wide) + 2 * var(--pad-page-x));
margin-inline: auto;
padding-inline: var(--pad-page-x);
}
.section
{
padding-block: clamp(var(--space-16), 8vw, var(--space-24));
}
.section-tight
{
padding-block: clamp(var(--space-10), 5vw, var(--space-20));
}
.section-wide
{
padding-block: clamp(var(--space-20), 10vw, var(--space-32));
}
/* ===================================== */
/* Buttons */
/* ===================================== */
.btn
{
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
min-height: var(--touch-min);
padding: var(--space-3) var(--space-5);
border-radius: var(--radius-full);
font-family: var(--font-sans);
font-size: var(--text-sm);
font-weight: var(--weight-semibold);
line-height: var(--leading-none);
letter-spacing: var(--tracking-normal);
white-space: nowrap;
transition: background var(--duration-fast) var(--ease-out),
color var(--duration-fast) var(--ease-out),
border-color var(--duration-fast) var(--ease-out),
box-shadow var(--duration-fast) var(--ease-out),
transform var(--duration-fast) var(--ease-out);
}
.btn-sm
{
min-height: var(--space-9);
padding: var(--space-2) var(--space-4);
font-size: var(--text-sm);
}
.btn-lg
{
padding: var(--space-4) var(--space-6);
font-size: var(--text-base);
}
.btn-full
{
width: 100%;
}
.btn-primary
{
background: var(--color-accent);
color: var(--color-on-accent);
}
.btn-primary:hover
{
background: var(--color-accent-hi);
transform: translateY(-1px);
box-shadow: 0 var(--space-2) var(--space-6) var(--color-accent-glow);
}
/*
* Hero prominence modifier. Bigger padding, larger type, persistent glow,
* subtle pulse. Stacks with btn-primary on the home hero, pricing, and
* final call to action to drive conversions.
*/
.btn-hero
{
padding: var(--space-5) var(--space-8);
font-size: var(--text-lg);
font-weight: var(--weight-bold);
animation: btn-hero-pulse 3.5s ease-in-out infinite;
}
.btn-hero:hover
{
animation: none;
box-shadow: 0 var(--space-4) var(--space-10) var(--color-accent-glow);
}
@keyframes btn-hero-pulse
{
0%, 100%
{
box-shadow: 0 var(--space-2) var(--space-8) var(--color-accent-glow);
}
50%
{
box-shadow: 0 var(--space-3) var(--space-10) var(--color-accent-glow);
}
}
.btn-secondary
{
background: var(--color-surface-2);
color: var(--color-ink);
border: var(--border-thin) solid var(--color-border);
}
.btn-secondary:hover
{
background: var(--color-surface-3);
border-color: var(--color-border);
}
.btn-ghost
{
background: transparent;
color: var(--color-ink-muted);
}
.btn-ghost:hover
{
color: var(--color-ink);
background: var(--color-surface-2);
}
.btn-outline
{
background: transparent;
color: var(--color-ink);
border: var(--border-thin) solid var(--color-border);
}
.btn-outline:hover
{
border-color: var(--color-accent);
color: var(--color-accent);
}
.btn[disabled],
.btn[aria-disabled="true"]
{
cursor: not-allowed;
opacity: 0.85;
transform: none;
}
.btn[aria-busy="true"]
{
position: relative;
color: transparent;
cursor: wait;
pointer-events: none;
}
.btn[aria-busy="true"]::after
{
content: "";
position: absolute;
top: 50%;
left: 50%;
width: var(--space-4);
height: var(--space-4);
margin-top: calc(var(--space-4) * -0.5);
margin-left: calc(var(--space-4) * -0.5);
border: var(--border-thick) solid var(--color-on-accent);
border-right-color: transparent;
border-radius: 50%;
animation: btn-spin 0.7s linear infinite;
}
.btn-secondary[aria-busy="true"]::after,
.btn-ghost[aria-busy="true"]::after,
.btn-outline[aria-busy="true"]::after
{
border-color: var(--color-ink);
border-right-color: transparent;
}
@keyframes btn-spin
{
to
{
transform: rotate(360deg);
}
}
/* ===================================== */
/* Badges */
/* ===================================== */
.badge
{
display: inline-flex;
align-items: center;
gap: var(--space-1);
padding: calc(var(--space-1) / 2) var(--space-2);
border-radius: var(--radius-full);
font-size: var(--text-xs);
font-weight: var(--weight-semibold);
letter-spacing: var(--tracking-wider);
text-transform: uppercase;
}
.badge-accent { background: var(--color-accent-wash); color: var(--color-accent); }
.badge-success { background: var(--color-success-wash); color: var(--color-success); }
.badge-warning { background: var(--color-warning-wash); color: var(--color-warning); }
.badge-danger { background: var(--color-danger-wash); color: var(--color-danger); }
.badge-muted { background: var(--color-surface-3); color: var(--color-ink-muted); }
/* ===================================== */
/* Announcement bar */
/* ===================================== */
.announce
{
position: relative;
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
height: var(--height-announce);
padding-inline: var(--pad-page-x);
background: var(--color-surface-2);
border-bottom: var(--border-thin) solid var(--color-border-sub);
font-size: var(--text-sm);
}
.announce.is-hidden
{
display: none;
}
.announce-link
{
display: inline-flex;
align-items: center;
gap: var(--space-3);
color: var(--color-ink-muted);
transition: color var(--duration-fast) var(--ease-out);
}
.announce-link:hover
{
color: var(--color-ink);
}
.announce-tag
{
padding: calc(var(--space-1) / 2) var(--space-2);
border-radius: var(--radius-full);
background: var(--color-accent-wash);
color: var(--color-accent);
font-size: var(--text-xs);
font-weight: var(--weight-semibold);
text-transform: uppercase;
letter-spacing: var(--tracking-wider);
}
.announce-arrow
{
transition: transform var(--duration-fast) var(--ease-out);
}
.announce-link:hover .announce-arrow
{
transform: translateX(var(--border-thick));
}
.announce-close
{
position: absolute;
right: calc(var(--pad-page-x) / 2);
display: flex;
align-items: center;
justify-content: center;
width: var(--touch-min);
height: var(--touch-min);
border-radius: var(--radius-sm);
color: var(--color-ink-subtle);
transition: background var(--duration-fast) var(--ease-out),
color var(--duration-fast) var(--ease-out);
}
.announce-close:hover
{
background: var(--color-surface-3);
color: var(--color-ink);
}
/* ===================================== */
/* Site header (nav pill) */
/* ===================================== */
.nav-wrap
{
position: sticky;
top: var(--space-3);
z-index: var(--z-header);
display: flex;
justify-content: center;
padding-inline: var(--pad-page-x);
margin-top: var(--space-3);
}
.nav-pill
{
display: flex;
align-items: center;
gap: var(--space-4);
width: auto;
max-width: var(--width-content);
height: var(--height-header);
padding: 0 var(--space-2) 0 var(--space-4);
background: color-mix(in srgb, var(--color-surface-2) 88%, transparent);
border: var(--border-thin) solid var(--color-border-sub);
border-radius: var(--radius-full);
backdrop-filter: blur(18px) saturate(140%);
transition: border-color var(--duration-base) var(--ease-out),
box-shadow var(--duration-base) var(--ease-out);
}
.nav-wrap.is-scrolled .nav-pill
{
border-color: var(--color-border);
box-shadow: var(--shadow-md);
}
.nav-logo
{
display: inline-flex;
align-items: center;
gap: var(--space-3);
font-family: var(--font-display);
font-weight: var(--weight-bold);
font-size: var(--text-base);
color: var(--color-ink);
flex-shrink: 0;
}
.nav-logo-img
{
height: var(--space-7);
width: auto;
}
.nav-links
{
display: flex;
align-items: center;
gap: calc(var(--space-1) / 2);
margin-left: auto;
}
.nav-item
{
position: relative;
}
.nav-link,
.nav-trigger
{
display: inline-flex;
align-items: center;
gap: var(--space-1);
min-height: var(--touch-min);
padding: var(--space-2) var(--space-3);
border-radius: var(--radius-sm);
font-size: var(--text-sm);
font-weight: var(--weight-medium);
color: var(--color-ink-muted);
transition: background var(--duration-fast) var(--ease-out),
color var(--duration-fast) var(--ease-out);
}
.nav-link:hover,
.nav-trigger:hover,
.nav-link.is-active,
.nav-item[data-open="true"] .nav-trigger
{
color: var(--color-ink);
background: var(--color-surface-3);
}
.nav-chevron
{
transition: transform var(--duration-fast) var(--ease-out);
}
.nav-item[data-open="true"] .nav-chevron
{
transform: rotate(180deg);
}
.nav-actions
{
display: flex;
align-items: center;
gap: var(--space-1);
flex-shrink: 0;
}
.nav-icon-btn
{
display: inline-flex;
align-items: center;
justify-content: center;
width: var(--touch-min);
height: var(--touch-min);
border-radius: var(--radius-sm);
color: var(--color-ink-subtle);
transition: background var(--duration-fast) var(--ease-out),
color var(--duration-fast) var(--ease-out);
}
.nav-icon-btn:hover
{
background: var(--color-surface-3);
color: var(--color-ink);
}
.nav-sign-in
{
display: inline-flex;
align-items: center;
min-height: var(--touch-min);
padding: var(--space-2) var(--space-3);
border-radius: var(--radius-sm);
font-size: var(--text-sm);
font-weight: var(--weight-medium);
color: var(--color-ink-muted);
transition: color var(--duration-fast) var(--ease-out),
background var(--duration-fast) var(--ease-out);
}
.nav-sign-in:hover
{
color: var(--color-ink);
background: var(--color-surface-3);
}
.nav-hamburger
{
display: none;
}
.nav-hamburger .icon-close
{
display: none;
}
.nav-hamburger.is-open .icon-hamburger
{
display: none;
}
.nav-hamburger.is-open .icon-close
{
display: block;
}
.nav-cta
{
display: inline-flex;
align-items: center;
min-height: var(--touch-min);
padding: var(--space-2) var(--space-4);
border-radius: var(--radius-full);
background: var(--color-accent);
color: var(--color-on-accent);
font-size: var(--text-sm);
font-weight: var(--weight-semibold);
transition: background var(--duration-fast) var(--ease-out),
transform var(--duration-fast) var(--ease-out),
box-shadow var(--duration-fast) var(--ease-out);
}
.nav-cta:hover
{
background: var(--color-accent-hi);
transform: translateY(-1px);
box-shadow: 0 var(--space-2) var(--space-5) var(--color-accent-glow);
}
/* ===================================== */
/* Mega menu */
/* ===================================== */
.mega
{
position: absolute;
top: calc(100% + var(--space-3));
left: 50%;
transform: translateX(-50%) translateY(var(--space-2));
min-width: var(--width-narrow-md);
padding: var(--space-4);
background: var(--color-surface-2);
border: var(--border-thin) solid var(--color-border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg);
opacity: 0;
pointer-events: none;
visibility: hidden;
transition: opacity var(--duration-fast) var(--ease-out),
transform var(--duration-fast) var(--ease-out),
visibility 0s linear var(--duration-fast);
}
.nav-item[data-open="true"] .mega
{
opacity: 1;
pointer-events: auto;
visibility: visible;
transform: translateX(-50%) translateY(0);
transition: opacity var(--duration-fast) var(--ease-out),
transform var(--duration-fast) var(--ease-out),
visibility 0s linear 0s;
}
.mega-grid
{
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-1);
}
.mega-item
{
display: flex;
gap: var(--space-3);
padding: var(--space-3);
border-radius: var(--radius-md);
transition: background var(--duration-fast) var(--ease-out);
}
.mega-item:hover
{
background: var(--color-surface-3);
}
.mega-item-icon
{
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: var(--space-8);
height: var(--space-8);
border-radius: var(--radius-sm);
background: var(--color-accent-wash);
color: var(--color-accent);
}
.mega-item-text
{
display: flex;
flex-direction: column;
gap: calc(var(--space-1) / 2);
}
.mega-item-title
{
font-size: var(--text-sm);
font-weight: var(--weight-semibold);
color: var(--color-ink);
}
.mega-item-desc
{
font-size: var(--text-sm);
color: var(--color-ink-muted);
}
/* ===================================== */
/* Mobile nav overlay */
/* ===================================== */
.m-nav
{
position: fixed;
inset: 0;
z-index: var(--z-modal);
display: flex;
flex-direction: column;
padding: var(--space-20) var(--pad-page-x) var(--space-10);
background: color-mix(in srgb, var(--color-surface) 96%, transparent);
backdrop-filter: blur(14px);
opacity: 0;
visibility: hidden;
pointer-events: none;
transform: translateY(calc(-1 * var(--space-2)));
transition: opacity var(--duration-base) var(--ease-out),
transform var(--duration-base) var(--ease-out),
visibility 0s linear var(--duration-base);
}
.m-nav.is-open
{
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: none;
transition: opacity var(--duration-base) var(--ease-out),
transform var(--duration-base) var(--ease-out),
visibility 0s linear 0s;
}
.m-nav-inner
{
width: 100%;
max-width: var(--width-narrow-md);
margin-inline: auto;
display: flex;
flex-direction: column;
gap: var(--space-8);
}
.m-nav-links
{
display: flex;
flex-direction: column;
gap: var(--space-1);
}
.m-nav-link
{
display: block;
min-height: var(--touch-min);
padding: var(--space-4);
border-radius: var(--radius-md);
font-family: var(--font-display);
font-size: var(--text-lg);
font-weight: var(--weight-semibold);
color: var(--color-ink);
transition: background var(--duration-fast) var(--ease-out);
}
.m-nav-link:hover
{
background: var(--color-surface-2);
}
.m-nav-footer
{
display: flex;
flex-direction: column;
gap: var(--space-3);
padding-top: var(--space-6);
border-top: var(--border-thin) solid var(--color-border-sub);
}
.m-nav-secondary,
.m-nav-cta
{
display: inline-flex;
align-items: center;
justify-content: center;
min-height: var(--touch-min);
padding: var(--space-4) var(--space-5);
border-radius: var(--radius-full);
font-size: var(--text-base);
font-weight: var(--weight-semibold);
}
.m-nav-secondary
{
border: var(--border-thin) solid var(--color-border);
color: var(--color-ink);
}
.m-nav-cta
{
background: var(--color-accent);
color: var(--color-on-accent);
}
/* ===================================== */
/* Site footer */
/* ===================================== */
.site-footer
{
margin-top: var(--space-24);
padding-block: var(--space-20) var(--space-8);
background: var(--color-surface-1);
border-top: var(--border-thin) solid var(--color-border-sub);
}
.foot-grid
{
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr;
gap: var(--space-12);
}
.foot-brand
{
max-width: var(--width-narrow-sm);
}
.foot-logo
{
display: inline-flex;
align-items: center;
gap: var(--space-3);
font-family: var(--font-display);
font-weight: var(--weight-bold);
font-size: var(--text-base);
color: var(--color-ink);
margin-bottom: var(--space-4);
}
.foot-logo-img
{
height: var(--space-6);
width: auto;
}
.foot-blurb
{
font-size: var(--text-sm);
line-height: var(--leading-normal);
color: var(--color-ink-muted);
margin-bottom: var(--space-6);
}
.foot-contact
{
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.foot-contact-line
{
display: flex;
align-items: baseline;
gap: var(--space-3);
font-size: var(--text-sm);
}
.foot-contact-label
{
color: var(--color-ink-subtle);
flex: 0 0 var(--space-20);
}
.foot-contact-value
{
color: var(--color-ink);
transition: color var(--duration-fast) var(--ease-out);
}
.foot-contact-value:hover
{
color: var(--color-accent);
}
.foot-hours
{
margin-top: var(--space-2);
font-size: var(--text-sm);
color: var(--color-ink-subtle);
}
.foot-col-title
{
font-family: var(--font-sans);
font-size: var(--text-xs);
font-weight: var(--weight-semibold);
text-transform: uppercase;
letter-spacing: var(--tracking-widest);
color: var(--color-ink-subtle);
margin-bottom: var(--space-4);
}
.foot-links
{
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.foot-link
{
font-size: var(--text-sm);
color: var(--color-ink-muted);
transition: color var(--duration-fast) var(--ease-out);
}
.foot-link:hover
{
color: var(--color-ink);
}
.foot-base
{
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-4);
margin-top: var(--space-14);
padding-top: var(--space-6);
border-top: var(--border-thin) solid var(--color-border-sub);
}
.foot-copy
{
font-size: var(--text-sm);
color: var(--color-ink-subtle);
}
.foot-legal
{
display: flex;
gap: var(--space-5);
}
.foot-legal-link
{
font-size: var(--text-sm);
color: var(--color-ink-subtle);
transition: color var(--duration-fast) var(--ease-out);
}
.foot-legal-link:hover
{
color: var(--color-ink);
}
/* ===================================== */
/* Command palette */
/* ===================================== */
/*
* Command palette. Quiet by default with no focus rings on the input, subtle
* surface, thin dividers, small accent-washed icons in results. The input
* carries a single underline bloom when the user begins typing inside the
* palette to reinforce that the field has focus without resorting to a
* loud outline ring.
*/
.cmd-overlay
{
position: fixed;
inset: 0;
z-index: var(--z-modal);
display: flex;
align-items: flex-start;
justify-content: center;
padding-top: 12vh;
padding-inline: var(--pad-page-x);
background: rgba(0, 0, 0, 0.55);
backdrop-filter: blur(6px);
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity var(--duration-fast) var(--ease-out),
visibility 0s linear var(--duration-fast);
}
.cmd-overlay.is-open
{
opacity: 1;
visibility: visible;
pointer-events: auto;
transition: opacity var(--duration-fast) var(--ease-out),
visibility 0s linear 0s;
}
.cmd-panel
{
width: min(620px, 100%);
max-height: 60vh;
background: var(--color-surface-1);
border: var(--border-thin) solid var(--color-border-sub);
border-radius: var(--radius-xl);
box-shadow: var(--shadow-xl);
overflow: hidden;
display: flex;
flex-direction: column;
transform: translateY(calc(-1 * var(--space-3))) scale(0.98);
opacity: 0;
transition: transform var(--duration-base) var(--ease-out),
opacity var(--duration-base) var(--ease-out);
}
.cmd-overlay.is-open .cmd-panel
{
transform: none;
opacity: 1;
}
.cmd-head
{
position: relative;
display: flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-4) var(--space-5);
border-bottom: var(--border-thin) solid var(--color-border-sub);
}
.cmd-head-icon
{
color: var(--color-ink-subtle);
flex-shrink: 0;
}
.cmd-input
{
flex: 1;
background: transparent;
border: none;
outline: none;
font-family: var(--font-sans);
font-size: var(--text-md);
font-weight: var(--weight-medium);
color: var(--color-ink);
padding-block: var(--space-1);
}
.cmd-input::placeholder
{
color: var(--color-ink-subtle);
font-weight: var(--weight-regular);
}
/* Quiet focus, no ring, underline bloom while typing */
.cmd-input:focus,
.cmd-input:focus-visible
{
outline: none;
box-shadow: none;
}
.cmd-head::after
{
content: "";
position: absolute;
left: 0;
right: 0;
bottom: calc(-1 * var(--border-thin));
height: var(--border-base);
background: var(--color-accent);
transform: scaleX(0);
transform-origin: left center;
transition: transform var(--duration-base) var(--ease-out);
}
.cmd-head:focus-within::after
{
transform: scaleX(1);
}
.cmd-kbd
{
display: inline-flex;
align-items: center;
justify-content: center;
min-width: var(--space-6);
height: var(--space-6);
padding: 0 var(--space-2);
font-family: var(--font-mono);
font-size: var(--text-xs);
color: var(--color-ink-subtle);
background: var(--color-surface-2);
border: var(--border-thin) solid var(--color-border-sub);
border-radius: var(--radius-xs);
flex-shrink: 0;
}
.cmd-results
{
flex: 1;
overflow-y: auto;
padding: var(--space-2) var(--space-3);
max-height: 45vh;
}
.cmd-group-title
{
padding: var(--space-4) var(--space-2) var(--space-1);
font-size: var(--text-xs);
font-weight: var(--weight-semibold);
text-transform: uppercase;
letter-spacing: var(--tracking-widest);
color: var(--color-ink-subtle);
}
.cmd-item
{
display: flex;
align-items: center;
gap: var(--space-3);
width: 100%;
padding: var(--space-3);
border-radius: var(--radius-md);
font-size: var(--text-sm);
color: var(--color-ink-muted);
text-align: left;
text-decoration: none;
background: transparent;
border: none;
font-family: inherit;
cursor: pointer;
transition: background var(--duration-fast) var(--ease-out),
color var(--duration-fast) var(--ease-out);
}
.cmd-item:hover,
.cmd-item.is-active
{
background: var(--color-surface-2);
color: var(--color-ink);
}
.cmd-item-icon
{
display: inline-flex;
align-items: center;
justify-content: center;
width: var(--space-6);
height: var(--space-6);
border-radius: var(--radius-sm);
background: var(--color-accent-wash);
color: var(--color-accent);
flex-shrink: 0;
}
.cmd-item-label
{
flex: 1;
min-width: 0;
}
.cmd-item-group
{
margin-left: auto;
font-size: var(--text-xs);
color: var(--color-ink-subtle);
flex-shrink: 0;
}
.cmd-empty
{
padding: var(--space-10) var(--space-4);
text-align: center;
font-size: var(--text-sm);
color: var(--color-ink-subtle);
}
.cmd-foot
{
display: flex;
align-items: center;
gap: var(--space-5);
padding: var(--space-3) var(--space-5);
font-size: var(--text-xs);
color: var(--color-ink-subtle);
border-top: var(--border-thin) solid var(--color-border-sub);
background: var(--color-surface);
}
.cmd-foot-hint
{
display: inline-flex;
align-items: center;
gap: var(--space-2);
}
/* ===================================== */
/* Home hero */
/* ===================================== */
.home-hero
{
display: grid;
grid-template-columns: 1.25fr 1fr;
gap: clamp(var(--space-8), 6vw, var(--space-14));
align-items: center;
padding-top: clamp(var(--space-12), 7vw, var(--space-20));
}
.home-hero-copy
{
display: flex;
flex-direction: column;
gap: var(--space-5);
align-items: flex-start;
}
.hero-trust-pill
{
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-2) var(--space-4);
background: var(--color-accent-wash);
border: var(--border-thin) solid color-mix(in srgb, var(--color-accent) 24%, transparent);
border-radius: var(--radius-full);
font-size: var(--text-xs);
font-weight: var(--weight-semibold);
text-transform: uppercase;
letter-spacing: var(--tracking-widest);
color: var(--color-accent);
}
.hero-trust-pill-dot
{
display: inline-block;
width: var(--space-1);
height: var(--space-1);
border-radius: var(--radius-full);
background: var(--color-accent);
}
.home-hero-title
{
max-width: var(--width-narrow-xl);
}
.home-hero-lead
{
max-width: var(--width-narrow-lg);
}
.home-hero-ctas
{
display: flex;
gap: var(--space-3);
flex-wrap: wrap;
margin-top: var(--space-2);
}
.home-hero-foot
{
margin-top: var(--space-2);
max-width: var(--width-narrow-md);
}
.home-hero-media
{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
/* ===================================== */
/* Device frames */
/* ===================================== */
/*
* Device frames are deliberately theme independent. A real phone bezel does
* not recolour itself when the operating system switches between dark and
* light, neither does ours. The frame colour, rim, shadow, dynamic island,
* and side buttons are all fixed tokens that read as "device" in any context.
*
* Mobile frame emulates a current iPhone silhouette: rounded titanium body,
* thin uniform bezel, Dynamic Island at the top, power button on the right,
* volume buttons on the left. Every dimension traces to a --device-* token.
*/
/*
* Mobile frame structure uses an absolutely positioned screen inset by the
* bezel tokens. This avoids the Safari quirk where aspect-ratio combined
* with padding and box-sizing border-box collapses inside a flex parent
* that carries perspective. The outer frame owns the aspect ratio. The
* screen sits inside at inset = bezel size. The result is rock-solid
* bezel rendering in every container.
*/
.mobile-frame
{
position: relative;
width: 100%;
max-width: 300px;
aspect-ratio: 10 / 20.6;
background: var(--device-body);
border-radius: var(--device-radius-mobile-outer);
box-shadow: inset 0 0 0 var(--border-thin) var(--device-rim),
0 0 0 var(--border-thin) var(--device-outer-edge),
var(--device-shadow);
}
.mobile-frame-screen
{
position: absolute;
inset: var(--device-bezel-mobile);
background: var(--device-screen);
border-radius: var(--device-radius-mobile-inner);
overflow: hidden;
z-index: 1;
}
.mobile-frame-screen img
{
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.mobile-frame-island
{
position: absolute;
top: var(--device-island-offset);
left: 50%;
transform: translateX(-50%);
width: var(--device-island-width);
height: var(--device-island-height);
background: var(--device-screen);
border-radius: var(--radius-full);
box-shadow: inset 0 var(--border-thin) 2px rgba(255, 255, 255, 0.10);
z-index: 3;
pointer-events: none;
}
.mobile-frame-power
{
position: absolute;
top: 22%;
right: calc(-1 * var(--device-button-width));
width: var(--device-button-width);
height: var(--device-button-power);
background: var(--device-body-edge);
border-radius: 0 var(--border-base) var(--border-base) 0;
pointer-events: none;
z-index: 0;
}
.mobile-frame-volume::before,
.mobile-frame-volume::after
{
content: "";
position: absolute;
left: calc(-1 * var(--device-button-width));
width: var(--device-button-width);
height: var(--device-button-volume);
background: var(--device-body-edge);
border-radius: var(--border-base) 0 0 var(--border-base);
}
.mobile-frame-volume::before { top: 18%; }
.mobile-frame-volume::after { top: 30%; }
.mobile-frame-silence
{
position: absolute;
top: 11%;
left: calc(-1 * var(--device-button-width));
width: var(--device-button-width);
height: calc(var(--device-button-volume) / 2);
background: var(--device-body-edge);
border-radius: var(--border-base) 0 0 var(--border-base);
pointer-events: none;
z-index: 0;
}
/*
* Desktop display frame. A clean, generic, thin black border around the
* screenshot with a soft rounded radius and a deep drop shadow that anchors
* the device on the page. Theme independent, a real device frame does not
* recolour with the operating system theme.
*/
/*
* Desktop display frame. A thin black hairline border and a drop shadow
* wrapping the raw screenshot. The image renders at its natural aspect
* ratio. No cropping, no scaling, no device chrome.
*/
.desktop-frame
{
position: relative;
width: 100%;
max-width: 860px;
border: var(--border-thin) solid var(--device-screen);
border-radius: var(--device-radius-desktop);
overflow: hidden;
box-shadow: var(--device-shadow);
}
.desktop-frame img
{
display: block;
width: 100%;
height: auto;
}
/*
* Desktop stage. Applied to one (or two) desktop spotlights to give them the
* same interactive treatment as the hero phone: gentle float, cursor-driven
* tilt, perspective depth. Reuses the same tilt variables and keyframes so
* there is no second implementation. Activated by data-tilt-stage on the
* container; the JS finds the inner [data-tilt] element and writes the
* cursor transform there.
*/
.desktop-stage
{
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
max-width: 860px;
perspective: 2000px;
padding-block: var(--space-6);
}
.desktop-tilt
{
position: relative;
z-index: 2;
width: 100%;
max-width: calc(100% - 2 * var(--space-16));
transform-style: preserve-3d;
transform: rotateY(var(--tilt-x, -3deg)) rotateX(var(--tilt-y, 2deg));
transition: transform var(--duration-slow) var(--ease-out);
will-change: transform;
}
.desktop-float
{
animation: hero-float 7s ease-in-out infinite;
}
/*
* Desktop stage artifacts. Smaller frosted cards than the hero variants, sized
* and positioned over the left and right corners of the desktop frame. One
* toast sits above the top edge. Each artifact slides outward on hover to
* reveal more of the screenshot behind it. Reuses the shared artifact surface
* so there is no second frosted card style.
*/
.desktop-stage .hero-stage-artifact
{
min-width: 160px;
max-width: 210px;
padding: var(--space-3);
}
.artifact-desk-left
{
top: 8%;
left: 0;
--float-delay: 0.6s;
}
.artifact-desk-right
{
bottom: 8%;
right: 0;
--float-delay: 1.4s;
}
.artifact-desk-toast
{
top: calc(-1 * var(--space-1));
right: var(--space-6);
z-index: 5;
--float-delay: 1.0s;
min-width: 200px;
max-width: 230px;
display: flex;
align-items: center;
gap: var(--space-3);
}
/*
* iOS, Android, Desktop caption. Appears under the hero phone to drive home
* multi-platform reach. Subtle, neutral, theme independent like the device
* frame itself.
*/
.device-platforms
{
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-5);
margin-top: var(--space-5);
font-size: var(--text-xs);
font-weight: var(--weight-semibold);
text-transform: uppercase;
letter-spacing: var(--tracking-widest);
color: var(--color-ink-subtle);
}
.device-platform
{
display: inline-flex;
align-items: center;
gap: var(--space-2);
}
.device-platform-dot
{
display: inline-block;
width: var(--space-1);
height: var(--space-1);
border-radius: var(--radius-full);
background: var(--color-accent);
}
/* ===================================== */
/* Mobile stage, interactive phone scene */
/* ===================================== */
/*
* The mobile stage holds a phone plus floating context artifacts. The phone
* gently floats up and down, tilts with cursor movement on devices with a
* fine pointer, and casts a real shadow. Artifacts are decorative and
* aria-hidden so screen reader users hear the real surrounding copy only.
*
* Two wrappers separate the two transform axes: .mobile-tilt reads the
* cursor-driven --tilt-x and --tilt-y custom properties, .mobile-float runs
* the gentle hover keyframes. Without separate wrappers the two would fight
* over the single transform property. The hero uses a slightly larger stage
* via .hero-stage; spotlights use .mobile-stage sized for a grid column.
*/
.hero-stage
{
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
max-width: var(--width-narrow-md);
margin-inline: auto;
min-height: var(--width-narrow-md);
padding-block: var(--space-8);
perspective: 1400px;
}
.mobile-stage
{
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
max-width: var(--width-narrow-md);
margin-inline: auto;
padding-block: var(--space-6);
perspective: 1400px;
}
.mobile-tilt
{
position: relative;
z-index: 2;
width: 100%;
max-width: 300px;
transform-style: preserve-3d;
transform: rotateY(var(--tilt-x, -6deg)) rotateX(var(--tilt-y, 3deg));
transition: transform var(--duration-slow) var(--ease-out);
will-change: transform;
}
.mobile-float
{
animation: hero-float 6s ease-in-out infinite;
}
@keyframes hero-float
{
0%, 100%
{
transform: translate3d(0, 0, 0);
}
50%
{
transform: translate3d(0, calc(-1 * var(--space-2)), 0);
}
}
/*
* Automatic tilt sway on touch devices. With no cursor to drive the tilt
* JavaScript, the device pose would freeze at its default angle. This pair
* of keyframes cycles each stage through its natural tilt range so the
* screenshots read as alive on phones and tablets. Offset durations stop
* the hero and spotlight devices from syncing visually when both are on
* screen together.
*/
@keyframes mobile-tilt-sway
{
0%, 100%
{
transform: rotateY(-6deg) rotateX(3deg);
}
50%
{
transform: rotateY(-2deg) rotateX(1deg);
}
}
@keyframes desktop-tilt-sway
{
0%, 100%
{
transform: rotateY(-3deg) rotateX(2deg);
}
50%
{
transform: rotateY(0deg) rotateX(1deg);
}
}
@media (pointer: coarse)
{
.mobile-tilt
{
animation: mobile-tilt-sway 9s ease-in-out infinite;
}
.desktop-tilt
{
animation: desktop-tilt-sway 11s ease-in-out infinite;
}
}
/*
* Shared artifact surface. Small frosted cards sit in front of every device
* or screenshot and float gently. On hover each card slides outward by six
* steps of spacing to reveal a little more of the screenshot behind it.
*/
.hero-stage-artifact
{
position: absolute;
z-index: 4;
padding: var(--space-3) var(--space-4);
background: color-mix(in srgb, var(--color-surface-2) 92%, transparent);
border: var(--border-thin) solid var(--color-border-sub);
border-radius: var(--radius-md);
box-shadow: var(--shadow-lg);
backdrop-filter: blur(10px) saturate(140%);
min-width: 200px;
max-width: 260px;
animation: hero-float 7.5s ease-in-out infinite;
animation-delay: var(--float-delay, 0s);
transition: transform var(--duration-base) var(--ease-out);
user-select: none;
}
/*
* Subtle outward nudge on hover. Each artifact shifts one step toward its
* nearest corner to let more of the screenshot read through. Pointer and
* hover media queries prevent sticky hover on touch screens.
*/
@media (hover: hover) and (pointer: fine)
{
.artifact-calendar:hover,
.artifact-desk-left:hover,
.artifact-mob-left:hover
{
transform: translate(calc(-1 * var(--space-6)), calc(-1 * var(--space-6)));
}
.artifact-compliance:hover,
.artifact-desk-right:hover,
.artifact-mob-right:hover
{
transform: translate(var(--space-6), var(--space-6));
}
.artifact-toast:hover,
.artifact-desk-toast:hover,
.artifact-mob-toast:hover
{
transform: translate(var(--space-6), calc(-1 * var(--space-6)));
}
}
.artifact-calendar
{
top: 10%;
left: 0;
--float-delay: 0.4s;
}
.artifact-compliance
{
bottom: 8%;
right: 0;
--float-delay: 1.6s;
}
.artifact-toast
{
top: 4%;
right: var(--space-2);
z-index: 5;
--float-delay: 1.0s;
max-width: 240px;
display: flex;
align-items: center;
gap: var(--space-3);
}
/*
* Mobile spotlight artifacts. Same shared frosted surface as the hero, sized
* and positioned over the left and right edges of a portrait phone. One
* toast sits near the top right corner. Each artifact slides outward on
* hover to reveal more of the screenshot behind it.
*/
.mobile-stage .hero-stage-artifact
{
min-width: 170px;
max-width: 210px;
padding: var(--space-3);
}
.artifact-mob-left
{
top: 10%;
left: 0;
--float-delay: 0.5s;
}
.artifact-mob-right
{
bottom: 10%;
right: 0;
--float-delay: 1.3s;
}
.artifact-mob-toast
{
top: 4%;
right: var(--space-2);
z-index: 5;
--float-delay: 1.0s;
min-width: 200px;
max-width: 230px;
display: flex;
align-items: center;
gap: var(--space-3);
}
.artifact-head
{
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--space-3);
margin-bottom: var(--space-2);
padding-bottom: var(--space-2);
border-bottom: var(--border-thin) solid var(--color-border-sub);
}
.artifact-head-title
{
font-family: var(--font-display);
font-size: var(--text-sm);
font-weight: var(--weight-semibold);
color: var(--color-ink);
}
.artifact-head-meta
{
font-size: var(--text-xs);
font-weight: var(--weight-medium);
color: var(--color-ink-subtle);
letter-spacing: var(--tracking-wide);
}
.artifact-row
{
display: flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-1) 0;
font-size: var(--text-xs);
}
.artifact-time
{
font-family: var(--font-mono);
color: var(--color-accent);
font-weight: var(--weight-semibold);
flex-shrink: 0;
}
.artifact-label
{
color: var(--color-ink-muted);
flex: 1;
min-width: 0;
}
.artifact-check
{
display: flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-1) 0;
font-size: var(--text-xs);
color: var(--color-ink-muted);
}
.artifact-check-icon
{
display: inline-flex;
align-items: center;
justify-content: center;
width: var(--space-4);
height: var(--space-4);
border-radius: var(--radius-full);
background: var(--color-surface-3);
color: var(--color-ink-subtle);
flex-shrink: 0;
}
.artifact-check.is-done .artifact-check-icon
{
background: var(--color-accent-wash);
color: var(--color-accent);
}
.artifact-check.is-done
{
color: var(--color-ink);
}
.artifact-toast-pulse
{
display: inline-flex;
align-items: center;
justify-content: center;
width: var(--space-3);
height: var(--space-3);
border-radius: var(--radius-full);
background: var(--color-success);
box-shadow: 0 0 0 var(--space-1) var(--color-success-wash);
flex-shrink: 0;
animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse
{
0%, 100%
{
box-shadow: 0 0 0 var(--space-1) var(--color-success-wash);
opacity: 1;
}
50%
{
box-shadow: 0 0 0 var(--space-2) color-mix(in srgb, var(--color-success) 30%, transparent);
opacity: 0.8;
}
}
.artifact-toast-text
{
display: flex;
flex-direction: column;
gap: var(--space-half);
}
.artifact-toast-lead
{
font-family: var(--font-display);
font-weight: var(--weight-semibold);
font-size: var(--text-sm);
color: var(--color-ink);
}
.artifact-toast-meta
{
font-size: var(--text-xs);
color: var(--color-ink-subtle);
}
/* ===================================== */
/* Trust strip */
/* ===================================== */
.trust-strip
{
display: flex;
flex-wrap: wrap;
gap: 0;
justify-content: center;
padding-block: var(--space-10);
}
.trust-item
{
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-1) var(--space-4);
font-size: var(--text-sm);
color: var(--color-ink-subtle);
border-inline-end: var(--border-thin) solid var(--color-border-sub);
cursor: default;
transition: background var(--duration-fast) var(--ease-out),
border-color var(--duration-fast) var(--ease-out),
color var(--duration-fast) var(--ease-out),
transform var(--duration-fast) var(--ease-out);
}
.trust-item:last-of-type
{
border-inline-end: none;
}
.trust-item-icon
{
display: inline-flex;
align-items: center;
justify-content: center;
color: currentColor;
flex-shrink: 0;
opacity: 0.75;
}
.trust-item-label
{
color: inherit;
}
/* ===================================== */
/* How it works */
/* ===================================== */
.how-it-works
{
display: flex;
flex-direction: column;
gap: var(--space-12);
}
.how-steps
{
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: var(--space-5);
}
.how-step
{
display: flex;
flex-direction: column;
gap: var(--space-3);
padding: var(--space-6);
background: var(--color-surface-1);
border: var(--border-thin) solid var(--color-border-sub);
border-radius: var(--radius-lg);
}
.how-step-num
{
display: inline-flex;
align-items: center;
justify-content: center;
width: var(--space-10);
height: var(--space-10);
border-radius: var(--radius-full);
background: var(--color-accent-wash);
color: var(--color-accent);
font-family: var(--font-display);
font-size: var(--text-md);
font-weight: var(--weight-bold);
letter-spacing: var(--tracking-tight);
}
.how-step-title
{
font-family: var(--font-display);
font-size: var(--text-md);
font-weight: var(--weight-semibold);
color: var(--color-ink);
}
.how-step-body
{
font-size: var(--text-sm);
line-height: var(--leading-normal);
color: var(--color-ink-muted);
}
/* ===================================== */
/* Feature grid */
/* ===================================== */
.feature-grid
{
display: flex;
flex-direction: column;
gap: var(--space-10);
}
.feature-head
{
display: flex;
flex-direction: column;
gap: var(--space-4);
max-width: var(--width-narrow);
}
.feature-cards
{
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-5);
}
.feature-card
{
display: flex;
flex-direction: column;
gap: var(--space-4);
padding: var(--space-6);
background: var(--color-surface-1);
border: var(--border-thin) solid var(--color-border-sub);
border-radius: var(--radius-lg);
transition: border-color var(--duration-base) var(--ease-out),
transform var(--duration-base) var(--ease-out);
}
.feature-card:hover
{
border-color: var(--color-border);
transform: translateY(-2px);
}
.feature-card-icon
{
display: inline-flex;
align-items: center;
justify-content: center;
width: var(--space-10);
height: var(--space-10);
border-radius: var(--radius-md);
background: var(--color-accent-wash);
color: var(--color-accent);
}
.feature-card-title
{
font-family: var(--font-display);
font-size: var(--text-md);
font-weight: var(--weight-semibold);
color: var(--color-ink);
}
.feature-card-body
{
font-size: var(--text-sm);
line-height: var(--leading-normal);
color: var(--color-ink-muted);
}
/* ===================================== */
/* Spotlight */
/* ===================================== */
.spotlight
{
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(var(--space-8), 6vw, var(--space-16));
align-items: center;
}
.spotlight.is-reversed .spotlight-media
{
order: -1;
}
.spotlight-copy
{
display: flex;
flex-direction: column;
gap: var(--space-4);
max-width: var(--width-narrow-md);
}
.spotlight-body
{
font-size: var(--text-base);
line-height: var(--leading-body);
color: var(--color-ink-muted);
}
.spotlight-cta
{
align-self: flex-start;
}
.spotlight-media
{
display: flex;
justify-content: center;
align-items: center;
}
/* ===================================== */
/* Stats band */
/* ===================================== */
.stats-band
{
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--space-6);
padding-block: var(--space-14);
border-top: var(--border-thin) solid var(--color-border-sub);
border-bottom: var(--border-thin) solid var(--color-border-sub);
}
.stat-item
{
display: flex;
flex-direction: column;
gap: var(--space-2);
align-items: center;
text-align: center;
}
.stat-label
{
font-size: var(--text-sm);
color: var(--color-ink-muted);
letter-spacing: var(--tracking-wide);
max-width: 200px;
}
/* ===================================== */
/* Testimonials */
/* ===================================== */
.testi-section
{
display: flex;
flex-direction: column;
gap: var(--space-10);
}
.testi-head
{
display: flex;
flex-direction: column;
gap: var(--space-4);
max-width: var(--width-narrow);
}
.testi-cards
{
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-5);
}
.testi-card
{
display: flex;
flex-direction: column;
gap: var(--space-5);
padding: var(--space-6);
background: var(--color-surface-1);
border: var(--border-thin) solid var(--color-border-sub);
border-radius: var(--radius-lg);
}
.testi-quote
{
font-size: var(--text-base);
line-height: var(--leading-body);
color: var(--color-ink);
flex: 1;
}
.testi-quote::before
{
content: "\201C";
font-family: var(--font-display);
font-size: var(--text-3xl);
line-height: var(--leading-none);
color: var(--color-accent);
display: block;
margin-bottom: var(--space-2);
}
.testi-author
{
display: flex;
align-items: center;
gap: var(--space-3);
padding-top: var(--space-4);
border-top: var(--border-thin) solid var(--color-border-sub);
}
.testi-avatar
{
display: inline-flex;
align-items: center;
justify-content: center;
width: var(--space-11);
height: var(--space-11);
border-radius: var(--radius-full);
background: var(--color-accent-wash);
color: var(--color-accent);
font-family: var(--font-display);
font-weight: var(--weight-bold);
font-size: var(--text-sm);
flex-shrink: 0;
}
.testi-meta
{
display: flex;
flex-direction: column;
}
.testi-name
{
font-size: var(--text-sm);
font-weight: var(--weight-semibold);
color: var(--color-ink);
}
.testi-role
{
font-size: var(--text-xs);
color: var(--color-ink-subtle);
}
/* ===================================== */
/* Pricing */
/* ===================================== */
/*
* Pricing band. Full bleed section that separates the pricing moment
* from surrounding content with a soft warm gradient. Surface fades at
* top and bottom so the band blends cleanly into adjacent sections
* without a hard border line.
*/
.pricing-band
{
background:
radial-gradient(ellipse 60% 45% at 50% 50%,
var(--color-accent-wash),
transparent 70%),
linear-gradient(180deg,
transparent 0%,
var(--color-surface-1) 10%,
var(--color-surface-1) 90%,
transparent 100%);
}
.pricing-section
{
display: flex;
flex-direction: column;
gap: var(--space-10);
align-items: center;
text-align: center;
}
.pricing-head
{
max-width: var(--width-narrow);
display: flex;
flex-direction: column;
gap: var(--space-4);
align-items: center;
}
.pricing-card
{
width: 100%;
max-width: var(--width-narrow-lg);
display: flex;
flex-direction: column;
gap: var(--space-6);
padding: var(--space-10);
background: var(--color-surface-1);
border: var(--border-thin) solid var(--color-border);
border-radius: var(--radius-xl);
box-shadow: var(--shadow-lg);
}
.pricing-price-row
{
display: flex;
align-items: baseline;
justify-content: center;
gap: var(--space-2);
}
.pricing-currency
{
font-family: var(--font-display);
font-size: var(--text-xl);
font-weight: var(--weight-semibold);
color: var(--color-ink-muted);
}
.pricing-amount
{
font-family: var(--font-display);
font-size: clamp(var(--text-4xl), 6vw, var(--text-6xl));
font-weight: var(--weight-black);
letter-spacing: var(--tracking-tightest);
color: var(--color-ink);
line-height: var(--leading-none);
}
.pricing-period
{
font-size: var(--text-base);
color: var(--color-ink-muted);
}
.pricing-caveat
{
font-size: var(--text-sm);
color: var(--color-ink-subtle);
text-align: center;
}
.pricing-includes
{
display: flex;
flex-direction: column;
gap: var(--space-3);
text-align: left;
}
.pricing-include
{
display: flex;
align-items: center;
gap: var(--space-3);
font-size: var(--text-sm);
color: var(--color-ink);
}
.pricing-include-check
{
display: inline-flex;
align-items: center;
justify-content: center;
width: var(--space-5);
height: var(--space-5);
border-radius: var(--radius-full);
background: var(--color-accent-wash);
color: var(--color-accent);
flex-shrink: 0;
}
.pricing-actions
{
display: flex;
flex-direction: column;
gap: var(--space-3);
align-items: center;
}
.pricing-aside
{
font-size: var(--text-sm);
color: var(--color-ink-muted);
}
/* ===================================== */
/* Final CTA */
/* ===================================== */
.final-cta
{
display: flex;
flex-direction: column;
gap: var(--space-6);
align-items: center;
text-align: center;
padding-block: clamp(var(--space-16), 10vw, var(--space-24));
padding-inline: var(--pad-page-x);
background: radial-gradient(
circle at 50% 0%,
var(--color-accent-glow) 0%,
transparent 60%
);
}
.final-cta-copy
{
max-width: var(--width-narrow);
display: flex;
flex-direction: column;
gap: var(--space-4);
align-items: center;
}
.final-cta-actions
{
display: flex;
gap: var(--space-3);
flex-wrap: wrap;
margin-top: var(--space-3);
}
/* ===================================== */
/* Secondary page shells */
/* ===================================== */
/*
* Shared components for secondary pages: the hero block every non-home page
* opens with, the generic section-head used to introduce a block of cards,
* an inline feature list for bullet rhythm, and the platforms band used on
* product and integrations pages to reinforce multi-platform reach.
*/
.page-hero
{
display: flex;
flex-direction: column;
gap: var(--space-6);
align-items: flex-start;
padding-block: clamp(var(--space-16), 9vw, var(--space-24));
}
.page-hero-copy
{
display: flex;
flex-direction: column;
gap: var(--space-4);
max-width: var(--width-narrow);
}
.page-hero-title
{
margin-top: var(--space-2);
}
.page-hero-lead
{
color: var(--color-ink-muted);
}
.page-hero-ctas
{
display: flex;
flex-wrap: wrap;
gap: var(--space-3);
margin-top: var(--space-3);
}
.section-head
{
display: flex;
flex-direction: column;
gap: var(--space-3);
max-width: var(--width-narrow);
margin-bottom: var(--space-10);
}
.feature-list
{
display: flex;
flex-direction: column;
gap: var(--space-2);
margin-top: var(--space-3);
list-style: none;
}
.feature-item
{
position: relative;
padding-left: var(--space-6);
font-size: var(--text-base);
color: var(--color-ink-muted);
}
.feature-item::before
{
content: "";
position: absolute;
left: 0;
top: calc(var(--leading-body) * 0.5em - var(--space-1));
width: var(--space-2);
height: var(--space-2);
border-radius: var(--radius-full);
background: var(--color-accent);
}
.platforms-band
{
display: flex;
flex-direction: column;
gap: var(--space-6);
padding: var(--space-10);
border: var(--border-thin) solid var(--color-border-sub);
border-radius: var(--radius-lg);
background: var(--color-surface-1);
}
.platforms-head
{
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.platforms-list
{
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-6);
}
.platform-item
{
display: flex;
flex-direction: column;
gap: var(--space-1);
padding: var(--space-4);
border: var(--border-thin) solid var(--color-border-sub);
border-radius: var(--radius-md);
background: var(--color-surface);
}
.platform-label
{
font-family: var(--font-display);
font-weight: var(--weight-semibold);
font-size: var(--text-lg);
color: var(--color-ink);
}
.platform-note
{
font-size: var(--text-sm);
color: var(--color-ink-subtle);
}
/* ===================================== */
/* Contact page */
/* ===================================== */
/*
* Contact grid: left column is the lead-capture form, right column is a
* sidebar of direct channels (two directors, a support address, and the
* Newcastle location). Collapses to a single column below 1024 px.
*/
.contact-grid
{
display: grid;
grid-template-columns: 1.3fr 1fr;
grid-template-areas:
"intro ."
"form side"
"success side";
gap: clamp(var(--space-6), 4vw, var(--space-10)) clamp(var(--space-8), 5vw, var(--space-14));
align-items: start;
}
/*
* Intro header placed inside the contact grid. Replaces the separate page
* hero so the form sits above the fold with minimum vertical distance
* between headline and first field.
*/
.contact-intro
{
grid-area: intro;
display: flex;
flex-direction: column;
gap: var(--space-4);
align-items: flex-start;
max-width: var(--width-narrow);
}
.contact-form
{
grid-area: form;
display: flex;
flex-direction: column;
gap: var(--space-8);
padding: var(--space-8);
border: var(--border-thin) solid var(--color-border-sub);
border-radius: var(--radius-lg);
background: var(--color-surface-1);
}
.contact-form[hidden]
{
display: none;
}
.contact-form-honeypot
{
position: absolute;
left: -9999px;
width: 1px;
height: 1px;
opacity: 0;
pointer-events: none;
}
.contact-group
{
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-5);
padding: 0;
border: none;
}
.contact-field
{
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.contact-field-full
{
grid-column: 1 / -1;
}
.contact-label
{
display: inline-flex;
align-items: center;
gap: var(--space-1);
font-size: var(--text-xs);
font-weight: var(--weight-semibold);
text-transform: uppercase;
letter-spacing: var(--tracking-widest);
color: var(--color-ink-subtle);
}
.contact-required
{
color: var(--color-accent);
}
.contact-input,
.contact-textarea,
.contact-select
{
font-family: var(--font-sans);
font-size: var(--text-base);
color: var(--color-ink);
background: var(--color-surface);
border: var(--border-thin) solid var(--color-border);
border-radius: var(--radius-md);
padding: var(--space-3) var(--space-4);
min-height: var(--touch-min);
transition: border-color var(--duration-fast) var(--ease-out),
box-shadow var(--duration-fast) var(--ease-out);
}
.contact-select
{
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right var(--space-4) center;
padding-right: var(--space-10);
cursor: pointer;
}
[data-theme="light"] .contact-select
{
background-image: url("data:image/svg+xml;utf8,");
}
.contact-textarea
{
resize: vertical;
min-height: var(--space-24);
}
.contact-input:focus,
.contact-textarea:focus,
.contact-select:focus
{
outline: none;
border-color: var(--color-accent);
box-shadow: 0 0 0 var(--border-thick) var(--color-accent-wash);
}
.contact-actions
{
display: flex;
align-items: center;
gap: var(--space-5);
flex-wrap: wrap;
padding-top: var(--space-4);
border-top: var(--border-thin) solid var(--color-border-sub);
}
.contact-fineprint
{
font-size: var(--text-sm);
color: var(--color-ink-subtle);
max-width: 52ch;
flex: 1;
min-width: 0;
}
.contact-success
{
grid-area: success;
display: flex;
flex-direction: column;
gap: var(--space-4);
padding: var(--space-10);
border: var(--border-thin) solid var(--color-border);
border-radius: var(--radius-lg);
background: var(--color-surface-1);
text-align: left;
}
.contact-success[hidden]
{
display: none;
}
.contact-success:focus
{
outline: none;
}
.contact-success-actions
{
display: flex;
gap: var(--space-3);
flex-wrap: wrap;
margin-top: var(--space-3);
}
.contact-error
{
display: flex;
flex-direction: column;
gap: var(--space-2);
padding: var(--space-5) var(--space-6);
border: var(--border-thin) solid var(--color-danger);
border-radius: var(--radius-md);
background: var(--color-danger-wash);
}
.contact-error[hidden]
{
display: none;
}
.contact-error:focus
{
outline: none;
box-shadow: 0 0 0 var(--border-thick) var(--color-danger);
}
.contact-progress
{
display: block;
height: var(--space-1);
margin: 0 0 var(--space-2) 0;
border-radius: var(--radius-full);
background: var(--color-surface-2);
overflow: hidden;
position: relative;
}
.contact-progress::after
{
content: "";
display: block;
height: 100%;
width: var(--progress, 0%);
background: var(--color-accent);
border-radius: inherit;
transition: width var(--duration-base) var(--ease-out);
}
.contact-field-hint
{
margin: var(--space-1) 0 0 0;
font-size: var(--text-xs);
color: var(--color-danger);
}
.contact-input[aria-invalid="true"],
.contact-select[aria-invalid="true"],
.contact-textarea[aria-invalid="true"]
{
border-color: var(--color-danger);
}
.contact-input[aria-invalid="true"]:focus,
.contact-select[aria-invalid="true"]:focus,
.contact-textarea[aria-invalid="true"]:focus
{
box-shadow: 0 0 0 var(--border-thick) var(--color-danger-wash);
}
.contact-error-title
{
font-family: var(--font-display);
font-size: var(--text-md);
font-weight: var(--weight-semibold);
color: var(--color-ink);
margin: 0;
}
.contact-error-body
{
font-size: var(--text-sm);
color: var(--color-ink-muted);
margin: 0;
}
.contact-side
{
grid-area: side;
display: flex;
flex-direction: column;
gap: var(--space-6);
}
.contact-block
{
display: flex;
flex-direction: column;
gap: var(--space-2);
padding: var(--space-5) var(--space-6);
border: var(--border-thin) solid var(--color-border-sub);
border-radius: var(--radius-md);
background: var(--color-surface);
}
.contact-block-title
{
font-family: var(--font-display);
font-size: var(--text-lg);
font-weight: var(--weight-semibold);
color: var(--color-ink);
}
.contact-block-note
{
font-size: var(--text-sm);
color: var(--color-ink-subtle);
}
.contact-link
{
font-family: var(--font-mono);
font-size: var(--text-sm);
color: var(--color-accent);
text-decoration: none;
transition: color var(--duration-fast) var(--ease-out);
}
.contact-link:hover
{
color: var(--color-accent-hi);
}
@media (max-width: 1024px)
{
.contact-grid
{
grid-template-columns: 1fr;
}
.platforms-list
{
grid-template-columns: 1fr;
}
}
@media (max-width: 640px)
{
.contact-form
{
padding: var(--space-5);
}
.contact-group
{
grid-template-columns: 1fr;
}
.contact-actions
{
align-items: flex-start;
}
}
/* ===================================== */
/* Holding card */
/* ===================================== */
/*
* Shared holding-state card for the portal, blog, and any other page that is
* honest about its current state rather than pretending to be live. Wide,
* calm, single column. Eyebrow plus title plus CTA row.
*/
.holding-card
{
display: flex;
flex-direction: column;
gap: var(--space-6);
max-width: var(--width-narrow);
margin-inline: auto;
padding: clamp(var(--space-8), 4vw, var(--space-12));
border: var(--border-thin) solid var(--color-border-sub);
border-radius: var(--radius-lg);
background: var(--color-surface-1);
text-align: center;
align-items: center;
}
.holding-card-head
{
display: flex;
flex-direction: column;
gap: var(--space-3);
align-items: center;
}
.holding-card-actions
{
display: flex;
flex-wrap: wrap;
gap: var(--space-3);
justify-content: center;
}
.holding-card-note
{
font-size: var(--text-sm);
color: var(--color-ink-subtle);
max-width: 52ch;
}
/* ===================================== */
/* Portal login */
/* ===================================== */
/*
* Portal sign in is invite only while the platform opens to foundation
* customers. The form is present for familiarity but every submission
* returns the same honest message: no account exists for this email,
* register via the contact form. Credentials are never transmitted.
*/
.login-card
{
display: flex;
flex-direction: column;
gap: var(--space-6);
max-width: var(--width-narrow-lg);
margin-inline: auto;
padding: clamp(var(--space-8), 4vw, var(--space-12));
border: var(--border-thin) solid var(--color-border-sub);
border-radius: var(--radius-lg);
background: var(--color-surface-1);
}
.login-card-head
{
display: flex;
flex-direction: column;
gap: var(--space-3);
padding-bottom: var(--space-4);
border-bottom: var(--border-thin) solid var(--color-border-sub);
}
.login-card-lead
{
font-size: var(--text-base);
line-height: var(--leading-normal);
color: var(--color-ink-muted);
}
.login-notice
{
display: flex;
flex-direction: column;
gap: var(--space-3);
padding: var(--space-5) var(--space-6);
border: var(--border-thin) solid var(--color-border);
border-radius: var(--radius-md);
background: var(--color-surface-2);
}
.login-notice-title
{
font-family: var(--font-display);
font-size: var(--text-md);
font-weight: var(--weight-semibold);
color: var(--color-ink);
margin: 0;
}
.login-notice-body
{
font-size: var(--text-sm);
color: var(--color-ink-muted);
margin: 0;
}
.login-notice-actions
{
display: flex;
gap: var(--space-3);
flex-wrap: wrap;
margin-top: var(--space-2);
}
.login-card-note
{
font-size: var(--text-sm);
color: var(--color-ink-subtle);
}
/* ===================================== */
/* Legal list */
/* ===================================== */
.legal-list
{
list-style: disc;
padding-left: var(--space-5);
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.legal-list li
{
font-size: var(--text-base);
line-height: var(--leading-body);
color: var(--color-ink-muted);
padding-left: var(--space-1);
}
.legal-list li strong
{
color: var(--color-ink);
font-weight: var(--weight-semibold);
}
.legal-section code
{
font-family: var(--font-mono);
font-size: var(--text-sm);
padding: calc(var(--space-1) / 2) var(--space-1);
background: var(--color-surface-2);
border-radius: var(--radius-xs);
color: var(--color-ink);
}
/* ===================================== */
/* Legal document */
/* ===================================== */
/*
* Long-form legal pages (privacy, terms, data processing). Narrow column,
* generous line-height, clear section separation. Mirrors the editorial
* rhythm of the marketing pages but with typography optimised for reading
* dense prose.
*/
.legal-doc
{
max-width: var(--width-narrow);
margin-inline: auto;
display: flex;
flex-direction: column;
gap: var(--space-10);
}
.legal-head
{
display: flex;
flex-direction: column;
gap: var(--space-3);
padding-bottom: var(--space-8);
border-bottom: var(--border-thin) solid var(--color-border-sub);
}
.legal-meta
{
font-size: var(--text-sm);
color: var(--color-ink-subtle);
}
.legal-section
{
display: flex;
flex-direction: column;
gap: var(--space-4);
}
.legal-section p
{
font-size: var(--text-base);
line-height: var(--leading-body);
color: var(--color-ink-muted);
}
.legal-heading
{
font-family: var(--font-display);
font-size: var(--text-xl);
font-weight: var(--weight-semibold);
color: var(--color-ink);
}
.legal-link
{
color: var(--color-accent);
text-decoration: none;
border-bottom: var(--border-thin) solid var(--color-accent-wash);
transition: color var(--duration-fast) var(--ease-out),
border-color var(--duration-fast) var(--ease-out);
}
.legal-link:hover
{
color: var(--color-accent-hi);
border-color: var(--color-accent);
}
/* ===================================== */
/* Chapter divider */
/* ===================================== */
/*
* Large washed-out numeral paired with an eyebrow plus title, used to break
* the page into editorial chapters. Acts as a visual divider and a
* unifying rhythm. The numeral sits in a wash colour derived from the
* accent so it feels continuous with the brand.
*/
.chapter-divider
{
display: flex;
align-items: flex-start;
gap: var(--space-8);
padding-block: var(--space-14) var(--space-8);
}
.chapter-num
{
font-family: var(--font-display);
font-weight: var(--weight-black);
font-size: clamp(96px, 14vw, 180px);
line-height: 0.85;
letter-spacing: var(--tracking-tightest);
color: var(--chapter-wash);
flex-shrink: 0;
user-select: none;
}
.chapter-text
{
flex: 1;
display: flex;
flex-direction: column;
gap: var(--space-3);
padding-top: var(--space-5);
max-width: 620px;
text-wrap: balance;
}
.chapter-title
{
font-family: var(--font-display);
font-weight: var(--weight-bold);
font-size: clamp(var(--text-xl), 3.4vw, var(--text-2xl));
line-height: var(--leading-tight);
letter-spacing: var(--tracking-tighter);
color: var(--color-ink);
}
.chapter-blurb
{
font-size: var(--text-base);
line-height: var(--leading-body);
color: var(--color-ink-muted);
}
/* ===================================== */
/* Word rotator (polling without jump) */
/* ===================================== */
/*
* Rotator container uses inline-grid with a single named area so every word
* occupies the same cell. The grid autosizes to the WIDEST word, which keeps
* layout stable as words swap in and out. Only opacity and transform change
* during the transition. Content width never shifts. The page never jumps.
*/
.word-rotator
{
display: inline-grid;
grid-template-areas: "word";
vertical-align: baseline;
color: var(--color-accent);
font-style: normal;
}
.word-rotator-item
{
grid-area: word;
opacity: 0;
transform: translateY(var(--space-2));
transition: opacity var(--duration-base) var(--ease-out),
transform var(--duration-base) var(--ease-out);
}
.word-rotator-item.is-current
{
opacity: 1;
transform: none;
}
.word-rotator-item.is-leaving
{
opacity: 0;
transform: translateY(calc(-1 * var(--space-2)));
}
/* ===================================== */
/* Stat value (count up + suffix) */
/* ===================================== */
.stat-value
{
font-family: var(--font-display);
font-size: clamp(var(--text-3xl), 4vw, var(--text-5xl));
font-weight: var(--weight-black);
line-height: var(--leading-none);
letter-spacing: var(--tracking-tighter);
color: var(--color-ink);
display: inline-flex;
align-items: baseline;
}
.stat-count
{
font-variant-numeric: tabular-nums;
display: inline-block;
}
.stat-suffix
{
font-style: normal;
color: var(--color-accent);
}
/* ===================================== */
/* Reveal on scroll */
/* ===================================== */
/*
* Progressive enhancement. Without JavaScript, elements are simply
* visible. With JS enabled, each .reveal starts hidden and fades in
* once observed in the viewport.
*/
[data-js="true"] .reveal
{
opacity: 0;
transform: translateY(var(--space-6));
transition: opacity var(--duration-lazy) var(--ease-out),
transform var(--duration-lazy) var(--ease-out);
}
[data-js="true"] .reveal.is-visible
{
opacity: 1;
transform: none;
}
/* ===================================== */
/* Responsive */
/* ===================================== */
@media (max-width: 1024px)
{
.nav-links,
.nav-sign-in,
.nav-cta,
.mega
{
display: none;
}
.nav-hamburger
{
display: inline-flex;
}
.foot-grid
{
grid-template-columns: 1fr 1fr;
gap: var(--space-10);
}
.home-hero
{
grid-template-columns: 1fr;
text-align: center;
}
.home-hero-copy
{
align-items: center;
}
.home-hero-title,
.home-hero-lead,
.home-hero-foot
{
margin-inline: auto;
}
.home-hero-ctas
{
justify-content: center;
}
.hero-stage
{
min-height: 440px;
padding-block: var(--space-6);
}
.hero-stage-artifact
{
min-width: 150px;
max-width: 180px;
padding: var(--space-2) var(--space-3);
}
.artifact-calendar
{
top: 4%;
left: calc(-1 * var(--space-2));
}
.artifact-compliance
{
bottom: 2%;
right: calc(-1 * var(--space-2));
}
.artifact-toast
{
top: 2%;
right: calc(-1 * var(--space-1));
}
.artifact-desk-left
{
top: 4%;
left: 0;
}
.artifact-desk-right
{
bottom: 4%;
right: 0;
}
.artifact-desk-toast
{
top: calc(-1 * var(--space-1));
right: var(--space-4);
}
.how-steps
{
grid-template-columns: repeat(3, 1fr);
}
.feature-cards
{
grid-template-columns: repeat(2, 1fr);
}
.spotlight
{
grid-template-columns: 1fr;
gap: var(--space-10);
text-align: center;
}
.spotlight-copy
{
align-items: center;
margin-inline: auto;
}
.spotlight-cta
{
align-self: center;
}
.spotlight.is-reversed .spotlight-media
{
order: 0;
}
.spotlight-media
{
order: -1;
}
.stats-band
{
grid-template-columns: repeat(2, 1fr);
gap: var(--space-10);
}
.testi-cards
{
grid-template-columns: 1fr;
}
.chapter-divider
{
flex-direction: column;
gap: var(--space-3);
padding-block: var(--space-10) var(--space-6);
}
.chapter-text
{
padding-top: 0;
}
}
@media (min-width: 1025px)
{
.m-nav
{
display: none;
}
}
@media (max-width: 900px)
{
.artifact-calendar,
.artifact-compliance,
.artifact-desk-left,
.artifact-desk-right,
.artifact-desk-toast
{
display: none;
}
}
@media (max-width: 768px)
{
.contact-grid
{
grid-template-columns: 1fr;
grid-template-areas:
"intro"
"form"
"success"
"side";
gap: var(--space-8);
}
.feature-cards
{
grid-template-columns: 1fr;
}
}
@media (max-width: 640px)
{
.announce-message
{
display: none;
}
.nav-logo-text
{
display: none;
}
.foot-grid
{
grid-template-columns: 1fr;
}
.foot-base
{
flex-direction: column;
align-items: flex-start;
}
.foot-legal
{
flex-wrap: wrap;
}
.how-steps
{
grid-template-columns: 1fr;
}
.feature-cards
{
grid-template-columns: 1fr;
}
.stats-band
{
grid-template-columns: 1fr;
}
.pricing-card
{
padding: var(--space-6);
}
.hero-stage
{
min-height: auto;
}
.hero-stage-artifact
{
display: none;
}
.contact-form
{
padding: var(--space-5);
}
.contact-actions
{
position: sticky;
bottom: 0;
z-index: 5;
margin: var(--space-3) calc(-1 * var(--space-5)) calc(-1 * var(--space-5));
padding: var(--space-4) var(--space-5);
background: var(--color-surface-1);
border-top: var(--border-thin) solid var(--color-border-sub);
}
}