/*
Theme Name: Faxdirect.ca App
Theme URI: https://faxdirect.ca
Author: NetLayers Inc.
Author URI: https://www.netlayers.ca
Description: The cinematic edition of the Faxdirect.ca theme. Every picture on the site is a fax: photographs are rendered at fax dot pitch, one bit per dot, and scan in a line at a time as you scroll. Built in two materials — a near-black volume and warm paper — with engraved Bodoni headlines, a WebGL document stage behind the page, a scroll-driven camera through eleven acts, and an opt-in sound layer made from the tones a fax call actually makes. Install alongside Faxdirect.ca: this theme inherits that one's Customizer settings and menu assignments, and every effect degrades to the static page.
Version: 3.9.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: faxdirect
Tags: business, technology, one-column, two-columns, right-sidebar, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready, block-styles, wide-blocks, accessibility-ready

Faxdirect.ca Luxe WordPress Theme, (C) 2026 NetLayers Inc.
Distributed under the terms of the GNU GPL v2 or later.

Bundled libraries, all under permissive licences and unmodified:
  three.js r155     MIT        assets/js/vendor/three.min.js
  GSAP 3.13         Standard   assets/js/vendor/gsap.min.js, ScrollTrigger.min.js
  howler.js 2.2.4   MIT        assets/js/vendor/howler.min.js
The design layer this file is the base for lives in assets/css/luxe.css; the
doctrine behind it is in DESIGN-LUXE.md.
*/

/* ==========================================================================
   CONTENTS
   1.  Tokens
   2.  Reset & base
   3.  Typography
   4.  Accessibility
   5.  Layout
   6.  Buttons
   7.  Header & navigation
   8.  Hero
   9.  Console mockup
   10. Transmission timeline
   11. Status chips
   12. Trust drawers
   13. Channel selector
   14. Capability & card grids
   15. Number checker
   16. Pricing
   17. Steps & process
   18. Tables & specs
   19. FAQ
   20. Forms & CTA
   21. Footer
   22. Editorial (blog/page)
   23. WordPress core
   24. Motion
   25. Responsive
   26. Print
   ========================================================================== */


/* ==========================================================================
   1. TOKENS
   Palette from the Faxdirect design direction. Every pairing below has been
   contrast-tested; the ratios in the comments are measured, not estimated.
   ========================================================================== */

:root {
	/* ── PALETTE ──────────────────────────────────────────────────────
	   Merged from the three sources, then contrast-verified:
	     • Stitch design system "Faxdirect" (assets/4940352080148566632),
	       seeded on #1A4F8A with the FIDELITY variant and ROUND_EIGHT
	     • ui-ux-pro-max styles.csv → "Trust & Authority" design variables
	     • the FaxDirect application's own brand values
	   All three independently landed on an 8px radius.
	   Two of the skill's variables fail as text (noted below) and are
	   kept as fills only, each with a text-safe -ink companion. */

	/* Navy — authority. App title bar and logo wordmark. */
	--night: #0B1F3D;
	--night-2: #12306B;
	--night-3: #174A82;
	--night-4: #2D6AA7;
	--navy: #1A4F8A;         /* Stitch seed — primary action, 8.30:1 w/ white */
	--navy-hi: #2D6AA7;
	--navy-dim: #123B68;

	/* Light surfaces — the application's own window background */
	--glacier: #F0F4FA;
	--glacier-2: #EAF2FB;
	--white: #FFFFFF;

	/* Accent — action blue */
	--accent: #0078D4;       /* 4.53:1 with white */
	--accent-hi: #2B8FFF;
	--accent-dim: #0063B1;   /* 5.56:1 — hover and link text */
	--accent-ink: #0063B1;
	--accent-wash: #EBF3FD;

	/* Trust — ui-ux-pro-max --trust-color, 8.72:1 with white */
	--trust: #1E40AF;

	/* Info — the logo's cyan motion lines. Dark surfaces only. */
	--info: #00C2FF;         /* 7.95:1 on --night */
	--info-ink: #0B5A78;
	--info-wash: #E6F7FE;

	/* Security — ui-ux-pro-max --security-green. FILL ONLY: 3.77:1 as text. */
	--success: #059669;
	--success-ink: #047857;  /* 5.48:1 — use this for type */
	--success-hi: #34D399;
	--success-wash: #DCFCE7;

	/* Metric — ui-ux-pro-max --metric-highlight. FILL ONLY: 2.15:1 as text. */
	--metric: #F59E0B;
	--metric-ink: #B45309;   /* 5.02:1 */
	--metric-wash: #FFFBEB;

	/* Alert */
	--alert: #FF6B7A;
	--alert-ink: #B42318;
	--alert-wash: #FFF1F2;

	/* Amber — in progress / retrying */
	--amber: #F59E0B;
	--amber-ink: #B45309;
	--amber-wash: #FFFBEB;

	/* Text on light */
	--ink: #111827;          /* 16.07:1 */
	--body: #374151;         /* 9.34:1 */
	--muted: #5A687E;        /* 5.12:1 */
	--faint: #94A3B8;
	--line: #DDE3ED;
	--line-2: #E9EEF4;

	/* Text on dark */
	--on-night: #C7D6EA;     /* 11.14:1 */
	--on-night-muted: #93A9C6; /* 6.83:1 */
	--line-dark: rgba(255,255,255,0.10);
	--line-dark-2: rgba(255,255,255,0.17);

	/* ── TYPE — one superfamily, sans + mono ──────────────────────────
	   Was Lexend + Source Sans 3, inherited from a Stitch DesignTheme
	   rather than from brand. Lexend is a reading-accessibility face and
	   Source Sans 3 a neutral workhorse; together they read friendly-
	   consumer, which undercuts an infrastructure product.

	   IBM Plex Sans is the ui-ux-pro-max typography.csv match for
	   "technical, precise" ("Developer Mono" pairing), and it shares
	   skeleton, metrics and weight axis with the IBM Plex Mono this theme
	   already uses for every number, ID and timestamp. Sans and mono now
	   read as one voice — which is exactly the "records, not marketing
	   copy" signal the mono split exists to send. */
	--heading: 'IBM Plex Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
	--sans: 'IBM Plex Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
	--mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Consolas, monospace;

	--t-xs: 0.75rem;
	--t-sm: 0.8125rem;
	--t-base: 0.9375rem;
	--t-md: 1.0625rem;
	--t-lg: clamp(1.125rem, 0.3vw + 1.05rem, 1.25rem);
	--t-xl: clamp(1.25rem, 0.5vw + 1.13rem, 1.5rem);
	--t-2xl: clamp(1.5rem, 1vw + 1.25rem, 2rem);
	--t-3xl: clamp(1.875rem, 2vw + 1.4rem, 2.75rem);
	--t-4xl: clamp(2.25rem, 3.5vw + 1.4rem, 3.75rem);

	/* Space */
	--s1: 0.25rem;  --s2: 0.5rem;   --s3: 0.75rem;  --s4: 1rem;
	--s5: 1.5rem;   --s6: 2rem;     --s7: 3rem;     --s8: 4rem;   --s9: 6rem;
	--section-y: clamp(3.5rem, 6.5vw, 6.5rem);

	--container: 1280px;
	--container-narrow: 780px;
	--gutter: clamp(1.125rem, 4vw, 2.5rem);

	/* ── RADIUS — Stitch ROUND_EIGHT === 21st --radius: 0.5rem === 8px ── */
	--r-sm: 5px;
	--r: 8px;
	--r-lg: 12px;
	--r-xl: 18px;
	--r-pill: 999px;

	/* ── SHADOW — 21st.dev decomposed token architecture, tinted navy ── */
	--shadow-color: 11, 31, 61;
	--sh-xs: 0 1px 2px rgba(var(--shadow-color), 0.06);
	--sh-sm: 0 2px 8px rgba(var(--shadow-color), 0.07);
	--sh: 0 6px 20px rgba(var(--shadow-color), 0.09);
	--sh-card: 0 4px 6px rgba(var(--shadow-color), 0.10);  /* --card-shadow */
	--sh-hover: 0 12px 24px rgba(var(--shadow-color), 0.14); /* Hover Standard */
	--sh-lg: 0 18px 44px rgba(var(--shadow-color), 0.16);
	--sh-xl: 0 30px 70px rgba(var(--shadow-color), 0.24);

	/* Trust & Authority badge metric */
	--badge-height: 48px;

	/* ── MOTION — ui-ux-pro-max motion.csv easings, as CSS beziers ──
	   power1.out ≈ cubic-bezier(0.25, 0.46, 0.45, 0.94)
	   power2.out ≈ cubic-bezier(0.215, 0.61, 0.355, 1)
	   elastic.out(1,0.4) approximated by the back curve below */
	--ease-p1: cubic-bezier(0.25, 0.46, 0.45, 0.94);
	--ease-p2: cubic-bezier(0.215, 0.61, 0.355, 1);
	--ease-elastic: cubic-bezier(0.34, 1.56, 0.64, 1);
	--ease: var(--ease-p2);
	--ease-out: var(--ease-p2);
	--fast: 150ms;    /* Hover Subtle  */
	--dur: 250ms;     /* Hover Standard */
	--slow: 500ms;    /* Scroll Reveal Standard */

	--admin-offset: 0px;
}



/* ==========================================================================
   2. RESET & BASE
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: calc(120px + var(--admin-offset));
}

body {
	margin: 0;
	font-family: var(--sans);
	font-size: var(--t-md);
	line-height: 1.6;
	color: var(--body);
	background: var(--white);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
	font-feature-settings: 'cv11', 'ss01';
}

img, svg, video, canvas, iframe { max-width: 100%; height: auto; display: block; }

/* Icons are stroke-based (see inc/icons.php), so no global fill is applied.
   Each icon carries fill="none" stroke="currentColor" of its own. */
svg { flex: none; }

a {
	color: var(--info-ink);
	text-underline-offset: 0.18em;
	transition: color var(--fast) var(--ease);
}
a:hover { color: var(--ink); }

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }

hr { border: 0; border-top: 1px solid var(--line); margin: var(--s6) 0; }

code, kbd, samp, pre { font-family: var(--mono); font-size: 0.9em; }
code {
	background: var(--glacier-2);
	padding: 0.15em 0.4em;
	border-radius: var(--r-sm);
	color: var(--ink);
}
pre {
	background: var(--night);
	color: var(--on-night);
	padding: var(--s5);
	border-radius: var(--r);
	overflow-x: auto;
	line-height: 1.65;
	font-size: var(--t-base);
}
pre code { background: none; color: inherit; padding: 0; }

blockquote {
	margin: var(--s6) 0;
	padding-left: var(--s5);
	border-left: 3px solid var(--accent-dim);
	color: var(--ink);
	font-size: var(--t-lg);
}

/* Monospace utility — fax numbers, IDs, timestamps, metrics.
   The doc calls for this to read as evidence, not developer flavour. */
.mono {
	font-family: var(--mono);
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.01em;
}


/* ==========================================================================
   3. TYPOGRAPHY
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
	font-family: var(--heading);
	color: var(--ink);
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: -0.021em;
	margin: 0 0 var(--s4);
	text-wrap: balance;
}

/* Tracking is eased ~0.004em against the previous Lexend values: IBM Plex
   Sans carries a larger x-height and more open apertures, so the old tight
   negatives closed up the counters at display sizes. */
h1 { font-size: var(--t-4xl); letter-spacing: -0.028em; line-height: 1.06; }
h2 { font-size: var(--t-3xl); letter-spacing: -0.022em; }
h3 { font-size: var(--t-2xl); }
h4 { font-size: var(--t-xl); }
h5 { font-size: var(--t-lg); }
h6 { font-size: var(--t-base); text-transform: uppercase; letter-spacing: 0.08em; }

p { margin: 0 0 var(--s4); text-wrap: pretty; }
ul, ol { margin: 0 0 var(--s4); padding-left: 1.3rem; }
li { margin-bottom: var(--s2); }
strong, b { font-weight: 600; color: var(--ink); }

.lead {
	font-size: var(--t-lg);
	line-height: 1.55;
	color: var(--muted);
}

.eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: var(--s3);
	font-family: var(--mono);
	font-size: var(--t-sm);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--info-ink);
}
.eyebrow::before {
	content: "";
	width: 18px;
	height: 1px;
	background: currentColor;
}

/* On dark surfaces */
.on-dark { color: var(--on-night-muted); }
.on-dark h1, .on-dark h2, .on-dark h3, .on-dark h4, .on-dark h5, .on-dark h6 { color: var(--white); }
.on-dark .lead { color: var(--on-night-muted); }
.on-dark .eyebrow { color: var(--info); }
.on-dark a { color: var(--info); }
.on-dark a:hover { color: var(--white); }


/* ==========================================================================
   4. ACCESSIBILITY
   ========================================================================== */

.screen-reader-text, .sr-only {
	border: 0; clip: rect(1px,1px,1px,1px); clip-path: inset(50%);
	height: 1px; margin: -1px; overflow: hidden; padding: 0;
	position: absolute; width: 1px; word-wrap: normal !important;
}

.skip-link:focus, .screen-reader-text:focus {
	background: var(--white);
	border-radius: var(--r-sm);
	box-shadow: var(--sh);
	clip: auto !important; clip-path: none;
	color: var(--ink);
	display: block;
	font-size: var(--t-base); font-weight: 600;
	height: auto; width: auto;
	left: 1rem; top: calc(1rem + var(--admin-offset));
	padding: 0.85rem 1.3rem;
	text-decoration: none;
	z-index: 100000;
}

:focus-visible {
	outline: 2px solid var(--info-ink);
	outline-offset: 2px;
	border-radius: 2px;
}
/* Cyan reads on navy but not on the now-white header, so the header keeps
   the default dark ring. */
.on-dark :focus-visible { outline-color: var(--info); }


/* ==========================================================================
   5. LAYOUT
   ========================================================================== */

.container {
	width: 100%;
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: var(--gutter);
}
.container--narrow { max-width: var(--container-narrow); }

.section { padding-block: var(--section-y); position: relative; }
.section--tight { padding-block: clamp(2.5rem, 4.5vw, 4rem); }
.section--glacier { background: var(--glacier); }
.section--glacier-2 { background: var(--glacier-2); }
.section--night { background: var(--night); }

/*
 * Signal trace on the boundary. Where a surface changes, a hairline draws
 * across as the section enters view — the seam reads as a path the document
 * travels along rather than as a decorative divider. The trace is added by
 * script (.is-traced), so with JavaScript off the boundary is simply the flat
 * colour change it was before.
 */
.section--glacier::before,
.section--glacier-2::before,
.section--night::before {
	content: "";
	position: absolute;
	inset-inline: 0;
	top: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--accent) 22%, var(--accent-hi) 50%, var(--accent) 78%, transparent);
	transform: scaleX(0);
	transform-origin: left center;
	opacity: 0.7;
	pointer-events: none;
}
.js-enabled .section--glacier.is-traced::before,
.js-enabled .section--glacier-2.is-traced::before,
.js-enabled .section--night.is-traced::before {
	transform: scaleX(1);
	transition: transform 1200ms var(--ease-out);
}
/* Without the script the seam should not be a stray hairline. */
html:not(.js-enabled) .section--glacier::before,
html:not(.js-enabled) .section--glacier-2::before,
html:not(.js-enabled) .section--night::before { display: none; }

/* 12-column grid */
.grid12 {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: var(--s5);
}

.split {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(2.25rem, 4.5vw, 4rem);
	align-items: center;
}
.split--reverse .split__media { order: -1; }

.section-head { max-width: 62ch; margin-bottom: clamp(2rem, 3.5vw, 3.25rem); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .eyebrow { justify-content: center; }
.section-head p { font-size: var(--t-lg); color: var(--muted); margin-bottom: 0; }
.on-dark .section-head p { color: var(--on-night-muted); }

.stack > * + * { margin-top: var(--s4); }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; }


/* ==========================================================================
   6. BUTTONS
   Signal Green is the primary action. It is a fill with --night text on it
   (14:1). It is never used as text on a light background.
   ========================================================================== */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-height: 46px;
	padding: 0.7rem 1.35rem;
	font-family: var(--heading);
	font-size: var(--t-base);
	font-weight: 600;
	letter-spacing: -0.005em;
	line-height: 1.2;
	text-decoration: none;
	border: 1px solid transparent;
	border-radius: var(--r);
	cursor: pointer;
	white-space: nowrap;
	transition:
		background-color var(--dur) var(--ease),
		border-color var(--dur) var(--ease),
		color var(--dur) var(--ease),
		transform var(--fast) var(--ease),
		box-shadow var(--dur) var(--ease);
}
.btn svg { flex: none; width: 1.05em; height: 1.05em; }
.btn:active { transform: translateY(1px); }

/* Primary — Signal Green */
.btn--primary {
	background: var(--navy);
	color: var(--white);
	box-shadow: 0 1px 2px rgba(12, 18, 34, 0.16);
}
.btn--primary:hover,
.btn--primary:focus-visible {
	background: var(--navy-hi);
	color: var(--white);
	box-shadow: var(--sh-hover);
}
.btn--primary:active { background: var(--navy-dim); }

/* Secondary on light */
.btn--secondary {
	background: var(--white);
	color: var(--ink);
	border-color: var(--line);
	box-shadow: var(--sh-xs);
}
.btn--secondary:hover,
.btn--secondary:focus-visible {
	background: var(--white);
	border-color: var(--ink);
	color: var(--ink);
}

/* Solid dark on light */
.btn--dark {
	background: var(--night);
	color: var(--white);
}
.btn--dark:hover,
.btn--dark:focus-visible { background: var(--night-3); color: var(--white); }

/* Ghost on dark */
.btn--ghost {
	background: transparent;
	color: var(--white);
	border-color: var(--line-dark-2);
}
.btn--ghost:hover,
.btn--ghost:focus-visible {
	background: rgba(255, 255, 255, 0.07);
	border-color: rgba(255, 255, 255, 0.34);
	color: var(--white);
}

/* Quiet text action */
.btn--quiet {
	background: transparent;
	color: var(--ink);
	padding-inline: 0.5rem;
	min-height: 40px;
}
.btn--quiet:hover { color: var(--info-ink); }
.on-dark .btn--quiet { color: var(--on-night); }
.site-header .btn--quiet { color: var(--ink); }
.on-dark .btn--quiet:hover { color: var(--info); }
.site-header .btn--quiet:hover { color: var(--accent-ink); }

.btn--lg { min-height: 54px; padding: 0.95rem 1.75rem; font-size: var(--t-md); }
.btn--sm { min-height: 38px; padding: 0.4rem 0.9rem; font-size: var(--t-sm); }
.btn--block { width: 100%; }


/* ==========================================================================
   7. HEADER & NAVIGATION
   Night Ledger bar. Utility strip above, primary nav below.
   ========================================================================== */

.site-header {
	position: sticky;
	top: var(--admin-offset);
	z-index: 999;
	background: var(--white);
	color: var(--body);
	border-bottom: 1px solid var(--line);
}

/* --- Utility bar --- */
.utility {
	background: var(--glacier);
	border-bottom: 1px solid var(--line);
	font-size: var(--t-sm);
}
.utility__inner {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: var(--s5);
	min-height: 40px;
}
.utility a {
	color: var(--muted);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	transition: color var(--fast) var(--ease);
}
.utility a:hover { color: var(--ink); }
.utility svg { width: 14px; height: 14px; }

.utility__status {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	font-family: var(--mono);
	font-size: var(--t-xs);
	letter-spacing: 0.02em;
}

.lang-switch { display: inline-flex; gap: 0.15rem; align-items: center; }
.lang-switch a { padding: 0.15rem 0.35rem; border-radius: var(--r-sm); }
.lang-switch a[aria-current="true"] { color: var(--ink); background: var(--glacier-2); }

/* --- Primary bar --- */
.masthead__inner {
	display: flex;
	align-items: center;
	gap: var(--s5);
	min-height: 66px;
}

.brand { display: inline-flex; align-items: center; gap: 0.6rem; text-decoration: none; flex: none; }
.brand img, .brand .custom-logo { height: 30px; width: auto; max-width: 180px; object-fit: contain; }
.brand__text {
	font-size: 1.25rem;
	font-weight: 600;
	letter-spacing: -0.03em;
	color: var(--ink);
}
.brand__text em { font-style: normal; color: var(--accent); }

.nav { margin-left: auto; }
.nav__list, .nav ul {
	list-style: none; margin: 0; padding: 0;
	display: flex; align-items: center; gap: 0.15rem;
}
.nav li { margin: 0; position: relative; }
.nav a {
	display: inline-flex; align-items: center; gap: 0.3rem;
	min-height: 42px; padding: 0.5rem 0.75rem;
	font-size: var(--t-base); font-weight: 500;
	color: var(--body); text-decoration: none;
	border-radius: var(--r-sm);
	transition: color var(--fast) var(--ease), background-color var(--fast) var(--ease);
}
.nav a:hover, .nav a:focus-visible { color: var(--navy); background: var(--accent-wash); }
.nav .current-menu-item > a, .nav .current_page_item > a { color: var(--navy); font-weight: 600; }
.nav__caret { width: 12px; height: 12px; opacity: 0.6; }

/* Dropdown */
.nav ul ul {
	position: absolute; top: 100%; left: 0;
	min-width: 260px;
	flex-direction: column; align-items: stretch; gap: 0;
	padding: 0.45rem;
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	box-shadow: var(--sh-lg);
	opacity: 0; visibility: hidden; transform: translateY(6px);
	transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur);
	z-index: 10;
}
.nav li:hover > ul, .nav li:focus-within > ul { opacity: 1; visibility: visible; transform: translateY(0); }
.nav ul ul a { width: 100%; padding: 0.55rem 0.75rem; border-radius: var(--r-sm); }
.nav ul ul ul { top: 0; left: 100%; }

.masthead__actions { display: flex; align-items: center; gap: var(--s3); flex: none; }

/* Mobile toggle */
.nav-toggle {
	display: none;
	align-items: center; justify-content: center;
	width: 44px; height: 44px; padding: 0;
	background: transparent; color: var(--ink);
	border: 1px solid var(--line); border-radius: var(--r-sm);
}
.nav-toggle:hover { background: var(--glacier-2); }
.nav-toggle__bars { position: relative; width: 18px; height: 12px; display: block; }
.nav-toggle__bars span {
	position: absolute; left: 0; width: 100%; height: 1.5px;
	background: currentColor; border-radius: 2px;
	transition: transform var(--dur) var(--ease), opacity var(--fast) var(--ease);
}
.nav-toggle__bars span:nth-child(1) { top: 0; }
.nav-toggle__bars span:nth-child(2) { top: 5px; }
.nav-toggle__bars span:nth-child(3) { top: 10px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }


/* ==========================================================================
   8. HERO
   ========================================================================== */

.hero {
	background: var(--night);
	color: var(--on-night-muted);
	padding-block: clamp(3rem, 6vw, 5.5rem) clamp(3.5rem, 7vw, 6rem);
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

/* Signal-grid texture: an abstract network field, not a literal map. */
.hero::before {
	content: "";
	position: absolute; inset: 0; z-index: -1;
	background-image:
		linear-gradient(rgba(114, 213, 247, 0.055) 1px, transparent 1px),
		linear-gradient(90deg, rgba(114, 213, 247, 0.055) 1px, transparent 1px);
	background-size: 64px 64px;
	mask-image: radial-gradient(ellipse 80% 65% at 65% 35%, #000 20%, transparent 75%);
	-webkit-mask-image: radial-gradient(ellipse 80% 65% at 65% 35%, #000 20%, transparent 75%);
	pointer-events: none;
}

.hero__inner {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(2.5rem, 5vw, 4rem);
	align-items: center;
}

.hero h1 { color: var(--white); max-width: 15ch; margin-bottom: var(--s5); }
.hero__sub {
	font-size: clamp(1.0625rem, 0.55vw + 0.95rem, 1.25rem);
	line-height: 1.55;
	color: var(--on-night-muted);
	max-width: 54ch;
	margin-bottom: var(--s6);
}
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--s3); margin-bottom: var(--s5); }

.hero__aside {
	display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.25rem;
	font-size: var(--t-base);
	color: var(--on-night-muted);
}
.hero__aside a { color: var(--info); text-decoration: none; border-bottom: 1px solid rgba(56,189,248,0.40); }
.hero__aside a:hover { color: var(--white); border-bottom-color: var(--white); }

.hero-badge {
	display: inline-flex; align-items: center; gap: 0.5rem;
	padding: 0.3rem 0.75rem 0.3rem 0.4rem;
	margin-bottom: var(--s5);
	background: rgba(255,255,255,0.06);
	border: 1px solid var(--line-dark-2);
	border-radius: var(--r-pill);
	font-size: var(--t-sm);
	color: var(--on-night);
}
.hero-badge__tag {
	padding: 0.14rem 0.5rem;
	background: var(--accent);
	color: var(--night);
	border-radius: var(--r-pill);
	font-family: var(--mono);
	font-size: var(--t-xs);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}


/* ==========================================================================
   9. CONSOLE MOCKUP — "mission control for documents"
   ========================================================================== */

/*
 * The console is a window from the application, so it is light — like the
 * application. Until 2.3.0 it was a dark navy panel (#12306B), a colour that
 * appears nowhere in FaxDirect: the app's own palette is #F0F4FA / white
 * surfaces, #3D3D3D and #6B7280 text, #DDE3ED rules, with #1A4F8A reserved for
 * the title bar. Notes set in --on-night-muted on that dark field cleared AA
 * only barely and read as unavailable rather than secondary, which is what
 * prompted the change.
 *
 * Navy survives where the app puts it: the title bar.
 */
.console {
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--r-xl);
	box-shadow: var(--sh-xl);
	overflow: hidden;
}
/* On a white section it needs a surface of its own to sit on. */
.section:not(.section--night):not(.section--glacier):not(.section--glacier-2) .console { background: var(--white); }

.console__bar {
	display: flex; align-items: center; gap: 0.6rem;
	padding: 0.6rem 0.9rem;
	background: var(--navy);
	border-bottom: 1px solid var(--navy-dim);
	font-family: var(--mono);
	font-size: var(--t-xs);
	color: #D6E4F5;
	letter-spacing: 0.04em;
}
.console__dots { display: flex; gap: 0.3rem; }
.console__dots span { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.34); }
.console__bar-title { margin-left: 0.4rem; }
/*
 * The label is white and the dot carries the green. Success-hi as text on the
 * navy bar lands at 4.32:1, which is under AA for a 12px label; as a 6px dot
 * it only needs 3:1 and clears it comfortably.
 */
.console__live { margin-left: auto; display: inline-flex; align-items: center; gap: 0.4rem; color: var(--white); }

.console__body { padding: var(--s5); background: var(--glacier); }

/* Address samples — email-to-fax strings and the like. */
.console__sample {
	font-size: var(--t-base);
	color: var(--info-ink);
	margin-bottom: 1.25rem;
	word-break: break-all;
	background: var(--info-wash);
	border: 1px solid #BAE6FD;
	border-radius: var(--r-sm);
	padding: 0.55rem 0.7rem;
}

.console__row {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: var(--s4);
	align-items: center;
	padding: 0.75rem 0;
	border-bottom: 1px solid var(--line);
}
.console__row:last-child { border-bottom: 0; }
.console__to {
	font-family: var(--mono);
	font-size: var(--t-base);
	color: var(--ink);
	letter-spacing: -0.01em;
}
.console__meta {
	font-size: var(--t-sm);
	color: var(--body);
	margin-top: 0.15rem;
}

/* Metric strip inside the console */
.console__metrics {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1px;
	background: var(--line);
	border-top: 1px solid var(--line);
}
.console__metric { background: var(--white); padding: var(--s4) var(--s5); }
.console__metric dt {
	font-size: var(--t-xs);
	text-transform: uppercase;
	letter-spacing: 0.09em;
	color: var(--muted);
	margin-bottom: 0.3rem;
}
.console__metric dd {
	margin: 0;
	font-family: var(--mono);
	font-size: 1.25rem;
	font-weight: 500;
	color: var(--ink);
	font-variant-numeric: tabular-nums;
}
.console__metric dd small { font-size: var(--t-sm); color: var(--muted); font-weight: 400; }


/* ==========================================================================
   10. TRANSMISSION TIMELINE — the signature component
   Uploaded → Encrypted → Dialling → Connected → Transmitting → Delivered →
   Receipt available
   ========================================================================== */

.timeline {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0;
}

.timeline__step {
	position: relative;
	display: grid;
	grid-template-columns: 26px 1fr auto;
	gap: var(--s4);
	align-items: start;
	padding: 0.85rem 0;
	margin: 0;
}

/*
 * Connector rail — a signal path, so it carries the accent rather than the
 * success colour. The green rail against blue dots was a leftover from the
 * retired Signal Green direction and read as two unrelated systems; green now
 * appears only where it is semantic, on the delivered chip.
 *
 * The rail ahead of the transmission stays dim, so progress is legible from
 * the rail alone without reading a single label.
 */
.timeline__step::before {
	content: "";
	position: absolute;
	left: 12px;
	top: 32px;
	bottom: -8px;
	width: 2px;
	background: var(--line);
	transition: background-color var(--slow) var(--ease-out);
}
.timeline__step:last-child::before { display: none; }
.on-dark .timeline__step::before,
.section--night .timeline__step::before { background: var(--line-dark-2); }

.timeline__dot {
	position: relative;
	z-index: 1;
	width: 26px; height: 26px;
	display: inline-flex; align-items: center; justify-content: center;
	border-radius: 50%;
	background: var(--white);
	border: 2px solid var(--line);
	color: var(--muted);
	transition:
		background-color var(--dur) var(--ease-out),
		border-color var(--dur) var(--ease-out),
		color var(--dur) var(--ease-out),
		transform var(--dur) var(--ease-p2);
}
.timeline__dot svg { width: 13px; height: 13px; transition: opacity var(--fast) var(--ease); }
.section--night .timeline__dot { background: var(--night-3); border-color: var(--night-4); color: var(--on-night-muted); }

/*
 * Three visibly different states, so the eye can sort the list without
 * reading it: pending is hollow and quiet, active is ringed and pulsing,
 * done is filled and ticked.
 */

/* Pending — hollow, and the icon recedes until the step is reached. */
.timeline__step:not(.is-done):not(.is-active) .timeline__dot {
	background: transparent;
	border-style: dashed;
}
.timeline__step:not(.is-done):not(.is-active) .timeline__dot svg { opacity: 0.45; }
.section--night .timeline__step:not(.is-done):not(.is-active) .timeline__dot { background: transparent; }

/* Completed */
.timeline__step.is-done .timeline__dot {
	background: var(--accent);
	border-color: var(--accent);
	color: var(--white);
}
.timeline__step.is-done::before { background: var(--accent); }
.section--night .timeline__step.is-done::before { background: var(--accent-hi); }
.section--night .timeline__step.is-done .timeline__dot { background: var(--accent); border-color: var(--accent); color: var(--white); }

/* Active — ringed, pulsing, and fractionally larger so it reads as "now". */
.timeline__step.is-active .timeline__dot {
	background: var(--white);
	border-color: var(--accent);
	color: var(--accent-ink);
	transform: scale(1.12);
}
.section--night .timeline__step.is-active .timeline__dot { background: var(--night); color: var(--accent-hi); border-color: var(--accent-hi); }
.timeline__step.is-active .timeline__dot::after {
	content: "";
	position: absolute; inset: -5px;
	border-radius: 50%;
	border: 2px solid var(--accent);
	opacity: 0;
	animation: ping 1.9s var(--ease-out) infinite;
}
.section--night .timeline__step.is-active .timeline__dot::after { border-color: var(--accent-hi); }

/* The active row's label leads; rows still to come sit back. */
.timeline__step:not(.is-done):not(.is-active) .timeline__label { color: var(--muted); font-weight: 500; }
.section--night .timeline__step:not(.is-done):not(.is-active) .timeline__label { color: var(--on-night-muted); }

.timeline__label {
	font-size: var(--t-base);
	font-weight: 600;
	color: var(--ink);
	line-height: 1.35;
}
.section--night .timeline__label { color: var(--white); }
.timeline__note {
	display: block;
	font-size: var(--t-sm);
	font-weight: 400;
	color: var(--muted);
	margin-top: 0.1rem;
}
.section--night .timeline__note { color: var(--on-night-muted); }

.timeline__time {
	font-family: var(--mono);
	font-size: var(--t-sm);
	color: var(--muted);
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
	padding-top: 0.15rem;
	transition: color var(--dur) var(--ease);
}
.section--night .timeline__time { color: var(--on-night-muted); }

/* A stamped time is a record; an unreached one is just a placeholder. */
.timeline__step.is-done .timeline__time { color: var(--body); }
.section--night .timeline__step.is-done .timeline__time { color: var(--on-night); }
.timeline__step:not(.is-done):not(.is-active) .timeline__time { color: var(--faint); }

/* Horizontal variant for wide sections */
.timeline--flow {
	grid-auto-flow: column;
	grid-auto-columns: 1fr;
	gap: var(--s4);
}
.timeline--flow .timeline__step {
	grid-template-columns: 1fr;
	gap: var(--s3);
	padding: 0;
}
.timeline--flow .timeline__step::before {
	left: 30px; right: -1rem; top: 12px; bottom: auto;
	width: auto; height: 2px;
}
.timeline--flow .timeline__time { padding-top: 0; }


/* ==========================================================================
   11. STATUS CHIPS
   ========================================================================== */

.chip {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.24rem 0.6rem 0.24rem 0.5rem;
	border-radius: var(--r-pill);
	font-family: var(--mono);
	font-size: var(--t-xs);
	font-weight: 500;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	white-space: nowrap;
	border: 1px solid transparent;
}
.chip__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }

/*
 * Only the unsettled states move. "In progress" and "Retrying" describe a
 * transmission that is still happening, so their dot pulses; delivered,
 * action-required and securely-received are finished outcomes and must sit
 * still. A chip that pulses on every state says nothing.
 */
.chip--progress .chip__dot,
.chip--retrying .chip__dot { position: relative; }
.chip--progress .chip__dot::after,
.chip--retrying .chip__dot::after {
	content: "";
	position: absolute; inset: 0;
	border-radius: 50%;
	background: currentColor;
	animation: ping 2.1s var(--ease-out) infinite;
}

.chip--delivered { background: var(--success-wash); color: var(--success-ink); border-color: #A7F3D0; }
.chip--progress  { background: var(--info-wash);    color: var(--info-ink);    border-color: #BAE6FD; }
.chip--retrying  { background: var(--amber-wash);  color: var(--amber-ink);  border-color: #FDE68A; }
.chip--action    { background: var(--alert-wash);  color: var(--alert-ink);  border-color: #FECACA; }
.chip--received  { background: var(--glacier-2);   color: var(--body);       border-color: var(--line); }

/* On dark surfaces the chips invert to translucent fills */
.section--night .chip, .on-dark .chip { border-color: transparent; }
.section--night .chip--delivered, .on-dark .chip--delivered { background: rgba(74,222,128,0.16); color: var(--success-hi); }
.section--night .chip--progress,  .on-dark .chip--progress  { background: rgba(56,189,248,0.16); color: var(--info); }
.section--night .chip--retrying,  .on-dark .chip--retrying  { background: rgba(251,191,36,0.16); color: var(--amber); }
.section--night .chip--action,    .on-dark .chip--action    { background: rgba(252,165,165,0.16); color: var(--alert); }
.section--night .chip--received,  .on-dark .chip--received  { background: rgba(255,255,255,0.08); color: var(--on-night); }

/* Live pulse dot */
.pulse { position: relative; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--success-hi); flex: none; }
.pulse::after {
	content: ""; position: absolute; inset: 0; border-radius: 50%;
	background: inherit; animation: ping 2s var(--ease-out) infinite;
}
@keyframes ping {
	0%   { transform: scale(1); opacity: 0.7; }
	70%  { transform: scale(2.6); opacity: 0; }
	100% { transform: scale(2.6); opacity: 0; }
}


/* ==========================================================================
   9b. AI CONTENT SEARCH DEMO
   The search field keeps the violet treatment it has in the application
   (#F5F3FF / #C4B5FD / #6D5BA8) so the demo reads as the same feature rather
   than a website illustration of it.
   ========================================================================== */

.sd__field {
	display: flex; align-items: center; gap: 0.5rem;
	padding: 0.5rem 0.65rem;
	margin-bottom: var(--s4);
	background: #F5F3FF;
	border: 1.5px solid #C4B5FD;
	border-radius: var(--r-sm);
	color: #6D5BA8;
}
.sd__field > svg { flex: none; color: #7C6BC4; }

.sd__query {
	flex: 1 1 auto;
	min-width: 0;
	display: inline-flex; align-items: center;
	font-family: var(--mono);
	font-size: var(--t-base);
	color: #4C3D80;
	letter-spacing: 0.01em;
}

/* The caret blinks only while the term is being typed. */
.sd__caret {
	display: none;
	width: 1px; height: 1.05em;
	margin-left: 1px;
	background: #6D5BA8;
}
.js-enabled .sd.is-typing .sd__caret { display: inline-block; animation: sd-caret 900ms steps(1) infinite; }
@keyframes sd-caret { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

.sd__nav { display: inline-flex; align-items: center; gap: 0.3rem; flex: none; }
.sd__count {
	font-size: var(--t-xs);
	color: #6D5BA8;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	min-width: 4.5em;
	text-align: right;
}
.sd__arrow {
	display: inline-flex; align-items: center; justify-content: center;
	width: 20px; height: 20px;
	border-radius: 4px;
	background: rgba(109,91,168,0.10);
	color: #6D5BA8;
}
.sd__up { transform: rotate(180deg); }

/* The fax page itself */
.sd__page {
	padding: var(--s4);
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--r-sm);
	font-size: var(--t-sm);
	color: var(--body);
	line-height: 1.65;
}
.sd__page p { margin: 0 0 0.7rem; }
.sd__page p:last-child { margin-bottom: 0; }
.sd__letterhead {
	font-size: var(--t-xs);
	color: var(--muted);
	padding-bottom: 0.6rem;
	margin-bottom: 0.8rem;
	border-bottom: 1px solid var(--line-2);
	letter-spacing: 0.02em;
}
.sd__re { font-weight: 600; color: var(--ink); }

/*
 * Matches. Rendered lit, because the finished state is a completed search;
 * .is-armed is added by the script to take them back down before it plays.
 */
.sd__mark {
	background: #FDE68A;
	color: var(--ink);
	border-radius: 3px;
	padding: 0.05em 0.18em;
	transition: background-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.js-enabled .sd.is-armed .sd__mark {
	background: transparent;
	color: inherit;
	box-shadow: none;
}
.js-enabled .sd.is-armed .sd__mark.is-lit { background: #FDE68A; color: var(--ink); }

/* The one the navigator is sitting on. */
.sd__mark.is-current { background: var(--metric); box-shadow: 0 0 0 2px rgba(180,83,9,0.45); }

.sd__foot {
	margin: var(--s4) 0 0;
	font-size: var(--t-xs);
	color: var(--muted);
	line-height: 1.5;
}

@media (prefers-reduced-motion: reduce) {
	.sd__caret { display: none !important; }
	.sd__mark { transition: none; }
}


/* ==========================================================================
   10b. SECTOR TILES
   Six sectors, one row. The full industry cards said too much for a section
   whose only job is "is this for an office like ours?", and at four-across
   with six items two were always stranded on a second row.
   ========================================================================== */

.sectors {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
	gap: var(--s3);
}
@media (min-width: 1000px) {
	.sectors { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

.sector {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.15rem;
	min-height: 128px;
	padding: 1rem 0.9rem;
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	text-decoration: none;
	transition:
		border-color var(--dur) var(--ease),
		box-shadow var(--dur) var(--ease),
		transform var(--dur) var(--ease);
}
a.sector:hover {
	border-color: #BFD7F2;
	box-shadow: var(--sh-hover);
	transform: translateY(-3px);
}

.sector__icon {
	display: inline-flex; align-items: center; justify-content: center;
	width: 34px; height: 34px;
	margin-bottom: 0.5rem;
	border-radius: var(--r-sm);
	background: var(--glacier-2);
	color: var(--accent-ink);
	transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
a.sector:hover .sector__icon { background: var(--night); color: var(--info); }

.sector__name {
	font-size: var(--t-base);
	font-weight: 600;
	color: var(--ink);
	line-height: 1.25;
}
.sector__short {
	font-family: var(--mono);
	font-size: var(--t-xs);
	color: var(--muted);
	line-height: 1.35;
}

@media (prefers-reduced-motion: reduce) {
	a.sector:hover { transform: none; }
}


/* ==========================================================================
   11b. LIGHT CONSOLE ON A DARK SECTION
   The console became a light surface in 2.3.0, but it still appears inside
   .section--night and .on-dark blocks — the channel selector, for one. Those
   contexts invert the timeline and the chips for a dark field, which would
   leave white text on the console's white panel. Everything inside a console
   is therefore pinned back to its light treatment, regardless of the section
   it sits in. These selectors must stay after both §10 and §11.
   ========================================================================== */

.section--night .console .timeline__step::before,
.on-dark .console .timeline__step::before { background: var(--line); }
.section--night .console .timeline__step.is-done::before,
.on-dark .console .timeline__step.is-done::before { background: var(--accent); }

.section--night .console .timeline__dot,
.on-dark .console .timeline__dot {
	background: var(--white);
	border-color: var(--line);
	color: var(--muted);
}
.section--night .console .timeline__step:not(.is-done):not(.is-active) .timeline__dot,
.on-dark .console .timeline__step:not(.is-done):not(.is-active) .timeline__dot { background: transparent; }
.section--night .console .timeline__step.is-done .timeline__dot,
.on-dark .console .timeline__step.is-done .timeline__dot {
	background: var(--accent);
	border-color: var(--accent);
	color: var(--white);
}
.section--night .console .timeline__step.is-active .timeline__dot,
.on-dark .console .timeline__step.is-active .timeline__dot {
	background: var(--white);
	border-color: var(--accent);
	color: var(--accent-ink);
}
.section--night .console .timeline__step.is-active .timeline__dot::after,
.on-dark .console .timeline__step.is-active .timeline__dot::after { border-color: var(--accent); }

.section--night .console .timeline__label,
.on-dark .console .timeline__label { color: var(--ink); }
.section--night .console .timeline__step:not(.is-done):not(.is-active) .timeline__label,
.on-dark .console .timeline__step:not(.is-done):not(.is-active) .timeline__label { color: var(--muted); }
.section--night .console .timeline__note,
.on-dark .console .timeline__note { color: var(--body); }
.section--night .console .timeline__time,
.on-dark .console .timeline__time { color: var(--muted); }
.section--night .console .timeline__step.is-done .timeline__time,
.on-dark .console .timeline__step.is-done .timeline__time { color: var(--body); }

/* Chips inside a console keep their light fills. */
.section--night .console .chip,
.on-dark .console .chip { border-width: 1px; border-style: solid; }
.section--night .console .chip--delivered,
.on-dark .console .chip--delivered { background: var(--success-wash); color: var(--success-ink); border-color: #A7F3D0; }
.section--night .console .chip--progress,
.on-dark .console .chip--progress { background: var(--info-wash); color: var(--info-ink); border-color: #BAE6FD; }
.section--night .console .chip--retrying,
.on-dark .console .chip--retrying { background: var(--amber-wash); color: var(--amber-ink); border-color: #FDE68A; }
.section--night .console .chip--action,
.on-dark .console .chip--action { background: var(--alert-wash); color: var(--alert-ink); border-color: #FECACA; }
.section--night .console .chip--received,
.on-dark .console .chip--received { background: var(--glacier-2); color: var(--body); border-color: var(--line); }


/* ==========================================================================
   12. TRUST DRAWERS
   ========================================================================== */

.drawers { display: grid; gap: var(--s3); }

.drawer {
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	overflow: hidden;
	transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.drawer.is-open { border-color: #CBD5E1; box-shadow: var(--sh-sm); }
.section--night .drawer { background: var(--night-2); border-color: var(--line-dark-2); }
.section--night .drawer.is-open { border-color: rgba(56,189,248,0.45); }

.drawer__trigger {
	display: flex; align-items: center; justify-content: space-between;
	gap: var(--s4);
	width: 100%; min-height: 58px;
	padding: 1rem 1.15rem;
	background: transparent; border: 0; text-align: left;
	font-family: var(--heading);
	font-size: var(--t-md); font-weight: 600; color: var(--ink);
}
.section--night .drawer__trigger { color: var(--white); }

.drawer__lead {
	display: flex; align-items: center; gap: 0.7rem;
	min-width: 0;
}
.drawer__lead svg { width: 17px; height: 17px; flex: none; color: var(--info-ink); }
.section--night .drawer__lead svg { color: var(--info); }

.drawer__icon { flex: none; position: relative; width: 16px; height: 16px; }
.drawer__icon::before, .drawer__icon::after {
	content: ""; position: absolute; background: currentColor; border-radius: 2px;
	transition: transform var(--dur) var(--ease), opacity var(--fast) var(--ease);
}
.drawer__icon::before { top: 7px; left: 0; width: 16px; height: 2px; }
.drawer__icon::after { top: 0; left: 7px; width: 2px; height: 16px; }
.drawer.is-open .drawer__icon::after { transform: rotate(90deg); opacity: 0; }

.drawer__panel { display: grid; grid-template-rows: 1fr; transition: grid-template-rows var(--slow) var(--ease-out); }
.js-enabled .drawer__panel { grid-template-rows: 0fr; }
.js-enabled .drawer.is-open .drawer__panel { grid-template-rows: 1fr; }
.drawer__panel > div { overflow: hidden; }
.drawer__panel p, .drawer__panel ul {
	padding: 0 1.15rem 1.15rem;
	margin: 0;
	font-size: var(--t-base);
	color: var(--muted);
	line-height: 1.6;
}
.section--night .drawer__panel p, .section--night .drawer__panel ul { color: var(--on-night-muted); }
.drawer__panel ul { padding-left: 2.4rem; }

@supports not (grid-template-rows: 0fr) {
	.drawer__panel { display: block; overflow: hidden; }
	.js-enabled .drawer__panel { max-height: 0; transition: max-height var(--slow) var(--ease-out); }
	.js-enabled .drawer.is-open .drawer__panel { max-height: 520px; }
}


/* ==========================================================================
   13. CHANNEL SELECTOR — "use the tools you already have"
   ========================================================================== */

.channels__tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	padding: 0.35rem;
	margin-bottom: var(--s5);
	background: var(--glacier-2);
	border: 1px solid var(--line);
	border-radius: var(--r-pill);
	width: fit-content;
	max-width: 100%;
}
.section--night .channels__tabs { background: rgba(255,255,255,0.05); border-color: var(--line-dark-2); }

.channels__tab {
	display: inline-flex; align-items: center; gap: 0.45rem;
	min-height: 40px;
	padding: 0.45rem 1rem;
	background: transparent; border: 0;
	border-radius: var(--r-pill);
	font-size: var(--t-base); font-weight: 500; color: var(--muted);
	transition: background-color var(--fast) var(--ease), color var(--fast) var(--ease);
}
.channels__tab svg { width: 16px; height: 16px; }
.channels__tab:hover { color: var(--ink); }
.channels__tab[aria-selected="true"] {
	background: var(--night);
	color: var(--white);
	box-shadow: var(--sh-xs);
}
.section--night .channels__tab { color: var(--on-night-muted); }
.section--night .channels__tab:hover { color: var(--white); }
.section--night .channels__tab[aria-selected="true"] { background: var(--accent); color: var(--white); }

.channels__panel[hidden] { display: none; }
.channels__panel { animation: fade-up 320ms var(--ease-out); }


/* ==========================================================================
   14. CAPABILITY & CARD GRIDS
   ========================================================================== */

.cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(276px, 1fr));
	gap: var(--s5);
}
.cards--2 { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
.cards--4 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }

.card {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: clamp(1.35rem, 2vw, 1.75rem);
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.card { box-shadow: var(--sh-card); }
.card:hover, .card:focus-within {
	border-color: transparent;
	box-shadow: var(--sh-hover);
	transform: translateY(-4px) scale(1.02);
}

.card__icon {
	display: inline-flex; align-items: center; justify-content: center;
	width: 40px; height: 40px;
	margin-bottom: var(--s4);
	border-radius: var(--r);
	background: var(--glacier-2);
	color: var(--info-ink);
	transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.card__icon svg { width: 20px; height: 20px; }
.card:hover .card__icon { background: var(--night); color: var(--accent); }

.card h3 { font-size: var(--t-lg); margin-bottom: var(--s2); }
.card p { font-size: var(--t-base); color: var(--muted); margin-bottom: 0; line-height: 1.6; }
.card__foot { margin-top: auto; padding-top: var(--s4); }

/* Dark variant */
.card--dark {
	background: var(--night-2);
	border-color: var(--line-dark-2);
}
.card--dark:hover { border-color: rgba(56,189,248,0.40); box-shadow: none; }
.card--dark h3 { color: var(--white); }
.card--dark p { color: var(--on-night-muted); }
.card--dark .card__icon { background: rgba(255,255,255,0.06); color: var(--info); }
.card--dark:hover .card__icon { background: var(--accent); color: var(--white); }

/* Compact list item used for capability inventories */
.speclist { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3); }
.speclist li { display: flex; gap: 0.7rem; margin: 0; font-size: var(--t-base); }
.speclist svg { flex: none; width: 18px; height: 18px; margin-top: 3px; color: var(--accent-ink); }
.section--night .speclist svg, .on-dark .speclist svg { color: var(--accent); }
.speclist strong { display: block; color: var(--ink); font-weight: 600; margin-bottom: 0.1rem; }
.section--night .speclist strong, .on-dark .speclist strong { color: var(--white); }
.speclist span { color: var(--muted); }
.section--night .speclist span, .on-dark .speclist span { color: var(--on-night-muted); }


/* ==========================================================================
   15. NUMBER CHECKER
   ========================================================================== */

.checker {
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--r-xl);
	box-shadow: var(--sh);
	padding: clamp(1.35rem, 2.5vw, 2rem);
}
.section--night .checker { background: var(--night-2); border-color: var(--line-dark-2); box-shadow: none; }

.checker__form { display: grid; gap: var(--s3); }
.checker__row { display: grid; grid-template-columns: 1fr; gap: var(--s3); }

.checker__result {
	margin-top: var(--s4);
	padding: var(--s4);
	border-radius: var(--r);
	border: 1px solid var(--line);
	background: var(--glacier);
	font-size: var(--t-base);
}
.checker__result[hidden] { display: none; }
.checker__result--ok { border-color: #A7F3D0; background: var(--success-wash); color: var(--success-ink); }
.checker__result--info { border-color: #BAE6FD; background: var(--info-wash); color: var(--info-ink); }
.checker__result strong { display: block; margin-bottom: 0.25rem; }
.checker__result .mono { font-size: 1.05rem; }


/* ==========================================================================
   16. PRICING
   ========================================================================== */

.pricing__controls {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
	gap: var(--s4);
	margin-bottom: var(--s6);
}

.toggle {
	display: inline-flex;
	padding: 0.3rem;
	background: var(--glacier-2);
	border: 1px solid var(--line);
	border-radius: var(--r-pill);
}
.section--night .toggle { background: rgba(255,255,255,0.05); border-color: var(--line-dark-2); }
.toggle button {
	min-height: 36px;
	padding: 0.35rem 0.95rem;
	background: transparent; border: 0;
	border-radius: var(--r-pill);
	font-size: var(--t-base); font-weight: 500; color: var(--muted);
	transition: background-color var(--fast) var(--ease), color var(--fast) var(--ease);
}
.toggle button[aria-pressed="true"] { background: var(--night); color: var(--white); }
.section--night .toggle button { color: var(--on-night-muted); }
.section--night .toggle button[aria-pressed="true"] { background: var(--accent); color: var(--white); }

.toggle__save {
	font-family: var(--mono);
	font-size: var(--t-xs);
	color: var(--accent-ink);
	background: var(--accent-wash);
	border: 1px solid #A7F3D0;
	padding: 0.2rem 0.55rem;
	border-radius: var(--r-pill);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

/*
 * Two self-service plans sit side by side; the negotiated tier spans the full
 * width beneath them. Two equal cards read as "this is the product" — a third
 * equal column would read as "this is a range", which is exactly what the
 * five-tier version used to say.
 */
.plans {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(288px, 1fr));
	gap: var(--s5);
	align-items: stretch;
}

.plan {
	position: relative;
	display: flex; flex-direction: column;
	padding: clamp(1.4rem, 2.2vw, 1.9rem);
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.plan:hover { border-color: #BFD7F2; box-shadow: var(--sh-hover); transform: translateY(-4px); }

.plan--featured {
	border-color: var(--night);
	border-width: 2px;
	box-shadow: var(--sh-lg);
}
.plan--featured:hover { border-color: var(--night); transform: translateY(-6px); }

/*
 * The negotiated tier is a conversation, not a purchase: Glacier, flat, and
 * always full width — so it never sits in a half-empty row when auto-fit
 * happens to give the grid two columns.
 */
.plan--custom { background: var(--glacier); grid-column: 1 / -1; }
.plan--custom:hover { transform: none; box-shadow: none; border-color: var(--line); }

@media (min-width: 900px) {
	.plans { grid-template-columns: 1fr 1fr; }

	.plan--custom {
		grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
		grid-template-rows: auto auto 1fr;
		grid-template-areas:
			"head list"
			"money list"
			"cta   list";
		display: grid;
		column-gap: clamp(2rem, 4vw, 3.5rem);
		align-items: start;
	}
	.plan--custom .plan__head  { grid-area: head; }
	.plan--custom .plan__money { grid-area: money; }
	.plan--custom .plan__list  { grid-area: list; margin-bottom: 0; }
	.plan--custom .plan__cta   { grid-area: cta; align-self: end; max-width: 20rem; }
}

.plan__flag {
	position: absolute; top: -11px; left: 50%; transform: translateX(-50%);
	padding: 0.22rem 0.7rem;
	background: var(--accent);
	color: var(--white);
	border-radius: var(--r-pill);
	font-family: var(--mono);
	font-size: var(--t-xs);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	white-space: nowrap;
}

.plan__name { font-size: var(--t-lg); font-weight: 600; color: var(--ink); margin-bottom: 0.5rem; }

/*
 * With two plans the buyer's question stops being "how much do we send?" and
 * becomes "which one are we?" — so the practice types are the selector, set in
 * mono because they are a category, not a sales line.
 */
.plan__practices {
	list-style: none; margin: 0 0 0.7rem; padding: 0;
	display: flex; flex-wrap: wrap; gap: 0.3rem;
}
.plan__practices li {
	margin: 0;
	padding: 0.18rem 0.5rem;
	background: var(--glacier-2);
	border: 1px solid var(--line-2);
	border-radius: var(--r-pill);
	font-family: var(--mono);
	font-size: var(--t-xs);
	color: var(--body);
}
.plan--custom .plan__practices { display: none; }

.plan__for { font-size: var(--t-sm); color: var(--muted); margin-bottom: var(--s4); line-height: 1.5; }

.plan__money { margin-bottom: var(--s4); }
.plan__price {
	display: flex; align-items: baseline; gap: 0.25rem;
	font-family: var(--mono);
	margin-bottom: 0.2rem;
}
.plan__cur { font-size: var(--t-base); color: var(--muted); }
.plan__amt { font-size: 2.6rem; font-weight: 600; color: var(--ink); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.plan__per { font-size: var(--t-sm); color: var(--muted); }
.plan__price--talk {
	font-family: var(--sans);
	font-size: var(--t-lg);
	font-weight: 600;
	color: var(--ink);
	letter-spacing: -0.02em;
}
.plan__annual { font-size: var(--t-sm); color: var(--muted); margin-bottom: 0; }

/*
 * The meter that isn't. Mono carries every figure on this site because mono
 * reads as a record; a word standing in the figure's slot, in the figure's own
 * typeface, on the site's one dark chip, is the single loudest thing on the
 * card — and the whole pricing change in one component. Info Cyan is legal
 * here and only here: 7.95:1 on Night, and never on a light surface.
 */
.plan__meter {
	position: relative;
	overflow: hidden;
	padding: 0.9rem 1rem;
	margin-bottom: var(--s4);
	background: var(--night);
	border-radius: var(--r-sm);
	text-align: center;
}

/*
 * A meter that never fills. The sweep is deliberately slow and very low
 * contrast — it should register as the chip being live, not as an animation
 * demanding attention. Nine seconds, most of it spent off-screen.
 */
.plan__meter::after {
	content: "";
	position: absolute;
	top: 0; bottom: 0;
	left: -40%;
	width: 40%;
	pointer-events: none;
	background: linear-gradient(90deg, transparent, rgba(0,194,255,0.11), transparent);
	animation: meter-sweep 9s var(--ease) infinite;
}
@keyframes meter-sweep {
	0%, 18%   { left: -40%; }
	82%, 100% { left: 100%; }
}
.plan__meter b {
	display: block;
	font-family: var(--mono);
	font-size: var(--t-md);
	font-weight: 600;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--info);
}
.plan__meter span { display: block; margin-top: 0.15rem; font-size: var(--t-xs); color: var(--on-night); }

.plan__emr {
	display: flex; align-items: center; gap: 0.45rem;
	margin-bottom: var(--s4);
	font-size: var(--t-sm); font-weight: 500;
	color: var(--accent-ink);
}
.plan__emr svg { flex: none; color: var(--accent); }

.plan__list { list-style: none; margin: 0 0 var(--s5); padding: 0; display: grid; gap: 0.5rem; }
.plan__list li { display: flex; gap: 0.5rem; margin: 0; font-size: var(--t-base); color: var(--body); line-height: 1.45; }
.plan__list svg { flex: none; width: 15px; height: 15px; margin-top: 3px; color: var(--accent-ink); }

.plan__cta { margin-top: auto; }

.plans__fairuse,
.pricing__allnote {
	max-width: 64ch;
	margin-left: auto; margin-right: auto;
	text-align: center;
	font-size: var(--t-sm);
	color: var(--muted);
	line-height: 1.6;
}
.plans__fairuse { margin-top: var(--s5); }
.pricing__allnote { margin-top: var(--s6); font-size: var(--t-base); }

/* Comparison-table cells */
.cell-yes { font-weight: 500; color: var(--success-ink); }
.cell-no { color: var(--faint); }


/* ==========================================================================
   16b. FEATURE BROWSER
   ========================================================================== */

/*
 * Sixty-odd application features, laid out the way the application itself is
 * organized, so reading the section is a tour rather than a specification
 * dump. Without JavaScript every panel renders, so nothing is hidden from a
 * reader or a crawler.
 */
.features { display: grid; grid-template-columns: 1fr; gap: var(--s5); }

@media (min-width: 900px) {
	.features { grid-template-columns: minmax(190px, 244px) minmax(0, 1fr); align-items: start; }
}

.features__rail {
	display: flex;
	gap: 0.3rem;
	overflow-x: auto;
	padding-bottom: 0.4rem;
	scrollbar-width: thin;
}
@media (min-width: 900px) {
	.features__rail {
		flex-direction: column;
		overflow: visible;
		padding-bottom: 0;
		position: sticky;
		top: 5.5rem;
	}
}

.features__tab {
	display: flex; align-items: center; gap: 0.55rem;
	flex: none;
	min-height: 44px;
	padding: 0.6rem 0.85rem;
	background: transparent;
	border: 1px solid transparent;
	border-radius: var(--r);
	font-family: var(--sans);
	font-size: var(--t-base); font-weight: 500;
	color: var(--muted);
	text-align: left;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color var(--fast) var(--ease), color var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
@media (min-width: 900px) { .features__tab { width: 100%; } }
.features__tab svg { flex: none; }
.features__tab:hover { color: var(--ink); background: var(--glacier-2); }
.features__tab[aria-selected="true"] { background: var(--night); border-color: var(--night); color: var(--white); }

.features__count { margin-left: auto; font-size: var(--t-xs); font-variant-numeric: tabular-nums; opacity: 0.6; }

.features__panel[hidden] { display: none; }
.features__panel {
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	padding: clamp(1.35rem, 2.5vw, 2rem);
}

/*
 * The panel enters from the direction the rail moved, so the rail reads as
 * driving one surface rather than swapping seven. A fade-up in both
 * directions is what made it feel like a generic tab widget.
 */
.features__panel[data-dir="down"] { animation: panel-down 340ms var(--ease-out); }
.features__panel[data-dir="up"]   { animation: panel-up 340ms var(--ease-out); }
.features__panel[data-dir="none"] { animation: fade-up 320ms var(--ease-out); }

@keyframes panel-down {
	from { opacity: 0; transform: translateY(14px); }
	to   { opacity: 1; transform: none; }
}
@keyframes panel-up {
	from { opacity: 0; transform: translateY(-14px); }
	to   { opacity: 1; transform: none; }
}

.features__title { font-size: clamp(1.3rem, 1vw + 1.05rem, 1.6rem); margin-bottom: 0.4rem; }
.features__lede { font-size: var(--t-base); color: var(--body); margin-bottom: var(--s5); max-width: 62ch; }

.features__list {
	list-style: none; margin: 0; padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(252px, 1fr));
	gap: var(--s4) clamp(1.25rem, 3vw, 2.25rem);
}
.features__list li { display: flex; gap: 0.55rem; margin: 0; }
.features__list svg { flex: none; margin-top: 4px; color: var(--accent-ink); }
.features__list b { display: block; font-size: var(--t-base); font-weight: 600; color: var(--ink); margin-bottom: 0.1rem; }
.features__list span { display: block; font-size: var(--t-sm); color: var(--muted); line-height: 1.5; }

/* On the dark field the rail inverts, per the status-chip precedent. */
.section--night .features__tab { color: var(--on-night-muted); }
.section--night .features__tab:hover { color: var(--white); background: rgba(255,255,255,0.06); }
.section--night .features__tab[aria-selected="true"] { background: var(--white); border-color: var(--white); color: var(--night); }
.section--night .features__panel { background: var(--night-2); border-color: var(--line-dark-2); }
.section--night .features__title { color: var(--white); }
.section--night .features__lede { color: var(--on-night); }
.section--night .features__list svg { color: var(--info); }
.section--night .features__list b { color: var(--white); }
.section--night .features__list span { color: var(--on-night-muted); }


/* ==========================================================================
   17. STEPS & PROCESS
   ========================================================================== */

.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--s6); counter-reset: st; }
.step { position: relative; counter-increment: st; }
.step__n {
	display: inline-flex; align-items: center; justify-content: center;
	width: 34px; height: 34px;
	margin-bottom: var(--s4);
	border-radius: var(--r-sm);
	background: var(--night);
	color: var(--accent);
	font-family: var(--mono);
	font-size: var(--t-base);
	font-weight: 500;
}
.section--night .step__n { background: var(--accent); color: var(--white); }
.step h3 { font-size: var(--t-lg); margin-bottom: var(--s2); }
.step p { font-size: var(--t-base); color: var(--muted); margin-bottom: 0; }
.section--night .step p { color: var(--on-night-muted); }


/* ==========================================================================
   18. TABLES & SPECS
   ========================================================================== */

.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--white); }
.table-wrap table { margin: 0; }

table { width: 100%; border-collapse: collapse; margin-bottom: var(--s5); font-size: var(--t-base); }
th, td { padding: 0.75rem 1rem; text-align: left; border-bottom: 1px solid var(--line-2); }
th {
	background: var(--glacier);
	font-weight: 600;
	color: var(--ink);
	font-size: var(--t-sm);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	white-space: nowrap;
}
tbody tr:last-child td { border-bottom: 0; }
td.num, th.num, .table--specs td:not(:first-child) {
	font-family: var(--mono);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
.table--specs td:first-child { font-weight: 500; color: var(--ink); }


/* ==========================================================================
   19. FAQ
   ========================================================================== */

.faq { display: grid; gap: var(--s3); }
.faq__item {
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	overflow: hidden;
	transition: border-color var(--dur) var(--ease);
}
.faq__item.is-open { border-color: #CBD5E1; box-shadow: var(--sh-sm); }
.faq__trigger {
	display: flex; align-items: center; justify-content: space-between; gap: var(--s4);
	width: 100%; min-height: 58px;
	padding: 1rem 1.15rem;
	background: transparent; border: 0; text-align: left;
	font-family: var(--heading); font-size: var(--t-md); font-weight: 600; color: var(--ink);
}
.faq__trigger:hover { color: var(--info-ink); }
.faq__icon { flex: none; position: relative; width: 16px; height: 16px; }
.faq__icon::before, .faq__icon::after {
	content: ""; position: absolute; background: var(--accent-ink); border-radius: 2px;
	transition: transform var(--dur) var(--ease), opacity var(--fast) var(--ease);
}
.faq__icon::before { top: 7px; left: 0; width: 16px; height: 2px; }
.faq__icon::after { top: 0; left: 7px; width: 2px; height: 16px; }
.faq__item.is-open .faq__icon::after { transform: rotate(90deg); opacity: 0; }

.faq__panel { display: grid; grid-template-rows: 1fr; transition: grid-template-rows var(--slow) var(--ease-out); }
.js-enabled .faq__panel { grid-template-rows: 0fr; }
.js-enabled .faq__item.is-open .faq__panel { grid-template-rows: 1fr; }
.faq__panel > div { overflow: hidden; }
.faq__panel p { padding: 0 1.15rem 1.15rem; margin: 0; font-size: var(--t-base); color: var(--muted); line-height: 1.6; }

@supports not (grid-template-rows: 0fr) {
	.faq__panel { display: block; overflow: hidden; }
	.js-enabled .faq__panel { max-height: 0; transition: max-height var(--slow) var(--ease-out); }
	.js-enabled .faq__item.is-open .faq__panel { max-height: 460px; }
}


/* ==========================================================================
   20. FORMS & CTA
   ========================================================================== */

.field { margin-bottom: var(--s4); }
.field label {
	display: block; margin-bottom: 0.35rem;
	font-size: var(--t-base); font-weight: 500; color: var(--ink);
}
.section--night .field label, .on-dark .field label { color: var(--white); }
.field .req { color: var(--alert-ink); margin-left: 0.15rem; }
.section--night .field .req { color: var(--alert); }

.field input[type="text"], .field input[type="email"], .field input[type="tel"],
.field input[type="url"], .field input[type="search"], .field input[type="number"],
.field select, .field textarea {
	width: 100%;
	min-height: 46px;
	padding: 0.65rem 0.85rem;
	font-family: var(--sans);
	font-size: var(--t-md);
	color: var(--ink);
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--r);
	transition: border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}
.field textarea { min-height: 120px; resize: vertical; line-height: 1.55; }
.field input:focus, .field select:focus, .field textarea:focus {
	outline: none;
	border-color: var(--info-ink);
	box-shadow: 0 0 0 3px rgba(11, 90, 120, 0.14);
}
.field input::placeholder, .field textarea::placeholder { color: var(--faint); }
.field__hint { display: block; margin-top: 0.3rem; font-size: var(--t-sm); color: var(--muted); }
.field--row { display: grid; grid-template-columns: 1fr; gap: var(--s4); }

.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

.notice {
	display: flex; align-items: flex-start; gap: 0.6rem;
	padding: 0.85rem 1rem;
	margin-bottom: var(--s5);
	border-radius: var(--r);
	font-size: var(--t-base);
	line-height: 1.5;
}
.notice svg { flex: none; width: 18px; height: 18px; margin-top: 1px; }
.notice--success { background: var(--success-wash); border: 1px solid #A7F3D0; color: var(--success-ink); }
.notice--error { background: var(--alert-wash); border: 1px solid #FECACA; color: var(--alert-ink); }

.form-card {
	padding: clamp(1.4rem, 2.5vw, 2rem);
	background: var(--white);
	border-radius: var(--r-xl);
	box-shadow: var(--sh-lg);
}
.form-card h3 { font-size: var(--t-xl); margin-bottom: var(--s2); }
.form-card > p { font-size: var(--t-base); color: var(--muted); margin-bottom: var(--s5); }

/* Enquiry-type router */
.router { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.5rem; margin-bottom: var(--s5); }
.router__opt { position: relative; }
.router__opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.router__opt span {
	display: flex; align-items: center; gap: 0.5rem;
	min-height: 46px;
	padding: 0.6rem 0.8rem;
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--r);
	font-size: var(--t-base);
	color: var(--body);
	cursor: pointer;
	transition: border-color var(--fast) var(--ease), background-color var(--fast) var(--ease), color var(--fast) var(--ease);
}
.router__opt span svg { width: 16px; height: 16px; flex: none; color: var(--muted); }
.router__opt input:checked + span {
	border-color: var(--night);
	background: var(--night);
	color: var(--white);
}
.router__opt input:checked + span svg { color: var(--accent); }
.router__opt input:focus-visible + span { outline: 2px solid var(--info-ink); outline-offset: 2px; }

/* CTA band */
/*
 * The conversion band sits directly above the footer, and both were --night,
 * so the seam between them disappeared and the page ended in one long dark
 * slab. The band now takes the raised navy a step up from the footer's Night.
 */
.cta-band { background: var(--night-2); color: var(--on-night); }
.cta-band__grid { display: grid; grid-template-columns: 1fr; gap: clamp(2rem, 4vw, 3.5rem); align-items: center; }
.cta-band h2 { color: var(--white); }
.cta-band__list { list-style: none; margin: var(--s5) 0 0; padding: 0; display: grid; gap: var(--s3); }
.cta-band__list li { display: flex; align-items: center; gap: 0.6rem; margin: 0; font-size: var(--t-base); }
.cta-band__list svg { flex: none; width: 17px; height: 17px; color: var(--accent); }


/* ==========================================================================
   21. FOOTER
   ========================================================================== */

.site-footer {
	background: var(--night);
	color: var(--on-night-muted);
	padding-block: clamp(3rem, 5vw, 4.5rem) 0;
	/* A crisp seam, so the boundary reads even where both surfaces are dark. */
	border-top: 1px solid var(--line-dark-2);
}
.site-footer__grid { display: grid; grid-template-columns: 1fr; gap: var(--s6); padding-bottom: var(--s7); }

.site-footer__brand img { height: 28px; width: auto; margin-bottom: var(--s4); }
.site-footer__brand p { font-size: var(--t-base); max-width: 40ch; line-height: 1.6; }

.site-footer__col h4 {
	font-size: var(--t-sm); font-weight: 600; color: var(--white);
	text-transform: uppercase; letter-spacing: 0.09em;
	margin-bottom: var(--s4);
}
.site-footer__col ul, .site-footer .menu { list-style: none; margin: 0; padding: 0; }
.site-footer__col li, .site-footer .menu li { margin-bottom: 0.55rem; }
.site-footer__col a, .site-footer .menu a {
	color: var(--on-night-muted); text-decoration: none; font-size: var(--t-base);
	transition: color var(--fast) var(--ease);
}
.site-footer__col a:hover, .site-footer .menu a:hover { color: var(--white); }

.site-footer__id { display: grid; gap: 0.4rem; font-size: var(--t-base); }
.site-footer__id .mono { color: var(--white); }

.site-footer__bottom {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
	gap: var(--s4);
	padding-block: var(--s5);
	border-top: 1px solid var(--line-dark);
	font-size: var(--t-sm);
}
.site-footer__bottom p { margin: 0; }
.site-footer__legal { display: flex; flex-wrap: wrap; gap: var(--s4); list-style: none; margin: 0; padding: 0; }
.site-footer__legal li { margin: 0; }

.to-top {
	position: fixed; right: clamp(1rem, 3vw, 2rem); bottom: clamp(1rem, 3vw, 2rem);
	display: inline-flex; align-items: center; justify-content: center;
	width: 44px; height: 44px;
	background: var(--night); color: var(--accent);
	border: 1px solid var(--night-4); border-radius: var(--r);
	box-shadow: var(--sh-lg);
	opacity: 0; visibility: hidden; transform: translateY(10px);
	transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur);
	z-index: 900;
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.to-top:hover { background: var(--night-3); }
.to-top svg { width: 18px; height: 18px; }


/* ==========================================================================
   22. EDITORIAL
   ========================================================================== */

.page-hero {
	background: var(--night);
	color: var(--on-night-muted);
	padding-block: clamp(2.75rem, 5vw, 4.5rem);
}
.page-hero h1 { color: var(--white); margin-bottom: var(--s4); max-width: 20ch; }
.page-hero p { font-size: var(--t-lg); color: var(--on-night-muted); max-width: 62ch; margin-bottom: 0; }
.page-hero__cta { margin-top: var(--s6); }

.content-area { display: grid; grid-template-columns: 1fr; gap: clamp(2rem, 4vw, 3.5rem); padding-block: var(--section-y); }
.content-area--sidebar { grid-template-columns: 1fr; }

.entry { max-width: 72ch; }
.entry__content > * + * { margin-top: var(--s4); }
.entry__content h2 { margin-top: var(--s7); }
.entry__content h3 { margin-top: var(--s6); }
.entry__content img { border-radius: var(--r); }

.posts { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: var(--s6); }
.post-card {
	display: flex; flex-direction: column;
	background: var(--white); border: 1px solid var(--line);
	border-radius: var(--r-lg); overflow: hidden;
	transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.post-card:hover { border-color: transparent; box-shadow: var(--sh-hover); transform: translateY(-4px) scale(1.02); }
.post-card__thumb { display: block; aspect-ratio: 16/9; overflow: hidden; background: var(--glacier-2); }
.post-card__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--slow) var(--ease-out); }
.post-card:hover .post-card__thumb img { transform: scale(1.04); }
.post-card__body { display: flex; flex-direction: column; flex: 1; padding: var(--s5); }
.post-card__meta {
	display: flex; flex-wrap: wrap; gap: 0.3rem 0.85rem;
	margin-bottom: var(--s3);
	font-family: var(--mono); font-size: var(--t-xs); color: var(--muted);
	text-transform: uppercase; letter-spacing: 0.05em;
}
.post-card h2, .post-card h3 { font-size: var(--t-lg); margin-bottom: var(--s3); line-height: 1.3; }
.post-card h2 a, .post-card h3 a { color: inherit; text-decoration: none; }
.post-card h2 a:hover, .post-card h3 a:hover { color: var(--info-ink); }
.post-card p { font-size: var(--t-base); color: var(--muted); margin-bottom: var(--s4); }
.post-card__more {
	margin-top: auto; display: inline-flex; align-items: center; gap: 0.4rem;
	font-size: var(--t-base); font-weight: 600; color: var(--ink); text-decoration: none;
}
.post-card__more svg { width: 15px; height: 15px; transition: transform var(--dur) var(--ease); }
.post-card__more:hover svg { transform: translateX(3px); }

.pagination { margin-top: var(--s7); }
.pagination .nav-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.35rem; }
.pagination .page-numbers {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 42px; height: 42px; padding: 0 0.7rem;
	background: var(--white); border: 1px solid var(--line); border-radius: var(--r-sm);
	font-family: var(--mono); font-size: var(--t-base); color: var(--body); text-decoration: none;
	transition: border-color var(--fast) var(--ease), color var(--fast) var(--ease);
}
.pagination .page-numbers:hover { border-color: var(--ink); color: var(--ink); }
.pagination .page-numbers.current { background: var(--night); border-color: var(--night); color: var(--white); }

.sidebar { display: grid; gap: var(--s5); align-content: start; }
.widget { padding: var(--s5); background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); }
.widget__title { font-size: var(--t-lg); margin-bottom: var(--s4); padding-bottom: var(--s3); border-bottom: 1px solid var(--line); }
.widget ul { list-style: none; margin: 0; padding: 0; }
.widget li { margin-bottom: 0.55rem; padding-bottom: 0.55rem; border-bottom: 1px solid var(--line-2); }
.widget li:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }
.widget a { color: var(--body); text-decoration: none; font-size: var(--t-base); }
.widget a:hover { color: var(--info-ink); }

.searchform { display: flex; gap: 0.45rem; }
.searchform input[type="search"] {
	flex: 1; min-width: 0; min-height: 46px; padding: 0.65rem 0.85rem;
	font-size: var(--t-md); background: var(--white);
	border: 1px solid var(--line); border-radius: var(--r);
}
.searchform input[type="search"]:focus { outline: none; border-color: var(--info-ink); box-shadow: 0 0 0 3px rgba(11,90,120,0.14); }
.searchform button {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 46px; min-height: 46px; padding: 0 0.9rem;
	background: var(--night); color: var(--accent); border: 0; border-radius: var(--r);
}
.searchform button:hover { background: var(--night-3); }
.searchform button svg { width: 17px; height: 17px; }

/* Comments */
.comments { margin-top: var(--s8); padding-top: var(--s6); border-top: 1px solid var(--line); max-width: 72ch; }
.comment-list { list-style: none; margin: 0 0 var(--s7); padding: 0; }
.comment-list ol.children { list-style: none; margin: var(--s4) 0 0; padding-left: clamp(1rem, 4vw, 2.25rem); }
.comment-body { padding: var(--s5); margin-bottom: var(--s4); background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); }
.comment-meta { display: flex; align-items: center; gap: 0.7rem; margin-bottom: var(--s3); }
.comment-author img { border-radius: 50%; }
.comment-author .fn { font-weight: 600; font-style: normal; color: var(--ink); }
.comment-metadata { font-family: var(--mono); font-size: var(--t-xs); color: var(--muted); }
.comment-metadata a { color: inherit; text-decoration: none; }
.comment-reply-link {
	display: inline-flex; align-items: center; min-height: 34px; padding: 0.25rem 0.75rem;
	background: var(--glacier-2); border: 1px solid var(--line); border-radius: var(--r-sm);
	font-size: var(--t-sm); font-weight: 600; color: var(--ink); text-decoration: none;
}
.comment-reply-link:hover { background: var(--night); color: var(--white); border-color: var(--night); }
.comment-respond { padding: var(--s6); background: var(--glacier); border-radius: var(--r-xl); }
.comment-reply-title { font-size: var(--t-xl); margin-bottom: var(--s4); }
.comment-form label { display: block; margin-bottom: 0.35rem; font-size: var(--t-base); font-weight: 500; color: var(--ink); }
.comment-form input[type="text"], .comment-form input[type="email"],
.comment-form input[type="url"], .comment-form textarea {
	width: 100%; min-height: 46px; padding: 0.65rem 0.85rem;
	font-family: var(--sans); font-size: var(--t-md);
	background: var(--white); border: 1px solid var(--line); border-radius: var(--r);
}
.comment-form textarea { min-height: 130px; resize: vertical; }
.comment-form input:focus, .comment-form textarea:focus { outline: none; border-color: var(--info-ink); box-shadow: 0 0 0 3px rgba(11,90,120,0.14); }
.comment-form p { margin-bottom: var(--s4); }
.comment-form .submit {
	min-height: 46px; padding: 0.7rem 1.35rem;
	background: var(--accent); color: var(--night); border: 0; border-radius: var(--r);
	font-family: var(--heading); font-size: var(--t-base); font-weight: 600;
}
.comment-form .submit:hover { background: var(--accent-hi); }

.no-results { max-width: 62ch; padding: var(--s7) 0; }


/* ==========================================================================
   23. WORDPRESS CORE
   ========================================================================== */

.alignleft { float: left; margin: 0.3rem var(--s5) var(--s4) 0; }
.alignright { float: right; margin: 0.3rem 0 var(--s4) var(--s5); }
.aligncenter { display: block; margin-inline: auto; margin-bottom: var(--s4); }
.alignwide { width: min(100% + 8vw, var(--container)); max-width: 100vw; margin-inline: auto; }
.alignfull { width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }
.wp-caption { max-width: 100%; }
.wp-caption-text, .gallery-caption { font-size: var(--t-sm); color: var(--muted); text-align: center; margin-top: var(--s2); }
.sticky .post-card { border-color: var(--night); }
.bypostauthor > .comment-body .fn::after { content: " • Author"; font-size: var(--t-xs); color: var(--info-ink); }
.wp-block-button__link { border-radius: var(--r); }
.clearfix::after { content: ""; display: table; clear: both; }


/* ==========================================================================
   24. MOTION
   Short and purposeful. The doc is explicit: no constantly animated
   backgrounds, no fake real-time counters.
   ========================================================================== */

/* Motion spec source: ui-ux-pro-max, motion.csv, "Scroll Reveal / Standard" —
   400-600ms, power2.out, y: 24, stagger 0.08, trigger at top 85%.
   Implemented in CSS rather than GSAP: the preset is a fade-and-rise, which
   needs no 70KB runtime, and the skill's own Result 3 warns against revealing
   below-the-fold content invisible-by-default without a no-JS fallback —
   handled here by gating the whole rule on .js-enabled.
   power2.out ≈ cubic-bezier(0.215, 0.61, 0.355, 1). */
.js-enabled [data-reveal] {
	opacity: 0;
	transform: translateY(24px);
	transition:
		opacity 500ms cubic-bezier(0.215, 0.61, 0.355, 1),
		transform 500ms cubic-bezier(0.215, 0.61, 0.355, 1);
	transition-delay: var(--reveal-delay, 0ms);
}
.js-enabled [data-reveal="left"] { transform: translateX(-24px); }
.js-enabled [data-reveal="right"] { transform: translateX(24px); }
.js-enabled [data-reveal].is-revealed { opacity: 1; transform: none; }

@keyframes fade-up {
	from { opacity: 0; transform: translateY(10px); }
	to { opacity: 1; transform: none; }
}
.anim-in { animation: fade-up 620ms var(--ease-out) backwards; }
.anim-1 { animation-delay: 60ms; }
.anim-2 { animation-delay: 140ms; }
.anim-3 { animation-delay: 220ms; }
.anim-4 { animation-delay: 300ms; }
.anim-5 { animation-delay: 380ms; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
	.js-enabled [data-reveal] { opacity: 1 !important; transform: none !important; }
	.card:hover, .plan:hover, .post-card:hover, .plan--featured { transform: none; }
}


/* ==========================================================================
   25. RESPONSIVE
   ========================================================================== */

@media (min-width: 600px) {
	.field--row, .checker__row { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 782px) {
	.site-footer__grid { grid-template-columns: 1.5fr 1fr 1fr; }
}

@media (min-width: 900px) {
	.hero__inner { grid-template-columns: 1.05fr 0.95fr; }
	.split { grid-template-columns: 1fr 1fr; }
	.cta-band__grid { grid-template-columns: 1.1fr 0.9fr; }
	.content-area--sidebar { grid-template-columns: minmax(0, 1fr) 300px; }
	.site-footer__grid { grid-template-columns: 1.6fr 1fr 1fr 1fr 1.2fr; }
}

/* Mobile navigation */
@media (max-width: 1023px) {
	.nav-toggle { display: inline-flex; }
	.utility__inner { justify-content: space-between; gap: var(--s3); overflow-x: auto; }

	.nav {
		position: absolute; top: 100%; left: 0; right: 0;
		background: var(--white);
		border-top: 1px solid var(--line);
		max-height: 0; overflow: hidden; visibility: hidden;
		transition: max-height var(--slow) var(--ease-out), visibility var(--slow);
	}
	.nav.is-open { max-height: min(76vh, 620px); overflow-y: auto; visibility: visible; }
	.nav__list, .nav ul {
		flex-direction: column; align-items: stretch; gap: 0;
		padding: var(--s3) var(--gutter) var(--s5);
	}
	.nav a { width: 100%; min-height: 50px; padding: 0.7rem 0.4rem; border-bottom: 1px solid var(--line-2); border-radius: 0; }
	.nav ul ul {
		position: static; opacity: 1; visibility: visible; transform: none;
		min-width: 0; padding: 0 0 0 var(--s4);
		border: 0; box-shadow: none; background: transparent;
	}
	.nav ul ul a { font-size: var(--t-base); color: var(--muted); }
	.masthead__actions .btn--quiet { display: none; }
}

@media (max-width: 767px) {
	.hero h1 { max-width: none; }
	.hero__cta .btn { width: 100%; }
	.console__metrics { grid-template-columns: 1fr; }
	.plan__amt { font-size: 2.25rem; }
	.timeline--flow { grid-auto-flow: row; }
	.timeline--flow .timeline__step::before { left: 12px; top: 30px; bottom: -6px; right: auto; width: 2px; height: auto; }
	.site-footer__bottom { flex-direction: column; align-items: flex-start; }
	.alignleft, .alignright { float: none; margin-inline: auto; display: block; }
	.utility__inner { font-size: var(--t-xs); }
}

@media (max-width: 479px) {
	.channels__tabs { width: 100%; border-radius: var(--r-lg); }
	.channels__tab { flex: 1 1 auto; justify-content: center; }
}


/* ==========================================================================
   26. PRINT
   ========================================================================== */

@media print {
	.site-header, .site-footer, .to-top, .nav-toggle, .cta-band, .comment-respond, .sidebar { display: none !important; }
	body { color: #000; background: #fff; font-size: 11pt; }
	a { color: #000; text-decoration: underline; }
	.entry__content a::after { content: " (" attr(href) ")"; font-size: 0.85em; color: #555; }
}


/* ==========================================================================
   27. SIGNATURE EFFECTS
   Restores the richer motion of the first design, with every value taken
   from a named source rather than chosen by feel:

     ui-ux-pro-max motion.csv
       · Hover Micro-interaction / Subtle   → y:-1, 150ms, power1.out
       · Hover Micro-interaction / Standard → y:-4, scale 1.02,
                                              shadow 0 12px 24px, 250ms, power2.out
     ui-ux-pro-max styles.csv "Trust & Authority"
       · badge hover effects · metric pulse · smooth stat reveal

   Hover / Complex (the magnetic pull) was dropped in 2.2.0. Motion here has
   to describe the product, and a cursor-chasing button describes nothing.
   What replaced it depicts real system state: the fax arriving in the hero
   inbox (§28), the transmission timeline advancing (§10), the boundary signal
   traces (§5), and pulsing confined to genuinely unsettled chips (§11).
   ========================================================================== */

/* --- Button sheen: a light band crossing the surface on hover.
       Transform-only, clipped by overflow, so it never triggers layout. --- */
.btn {
	position: relative;
	isolation: isolate;
	overflow: hidden;
}
.btn::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(115deg, transparent 32%, rgba(255,255,255,0.26) 50%, transparent 68%);
	transform: translateX(-120%);
	transition: transform var(--slow) var(--ease-p2);
}
.btn:hover::after,
.btn:focus-visible::after { transform: translateX(120%); }

/* The secondary button reads on light, so its sheen is a navy tint. */
.btn--secondary::after {
	background: linear-gradient(115deg, transparent 32%, rgba(26,79,138,0.10) 50%, transparent 68%);
}

/*
 * The magnetic primary CTA was removed in 2.2.0. It was a decorative
 * portfolio effect with no counterpart in the product, and the motion budget
 * is now spent on the two things that depict real system behaviour: the fax
 * arriving in the hero inbox, and the transmission timeline advancing.
 */

/* --- Feature card: accent bar wipes in, icon lifts and tilts --- */
.card {
	position: relative;
	overflow: hidden;
	transition:
		transform var(--dur) var(--ease-p2),
		box-shadow var(--dur) var(--ease-p2),
		border-color var(--dur) var(--ease-p2);
}
.card::before {
	content: "";
	position: absolute;
	top: 0; left: 0;
	width: 100%; height: 3px;
	background: var(--card-accent, var(--accent));
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform var(--slow) var(--ease-p2);
}
.card:hover::before,
.card:focus-within::before { transform: scaleX(1); }

.card__icon {
	transition:
		transform var(--dur) var(--ease-p2),
		background-color var(--dur) var(--ease-p2),
		color var(--dur) var(--ease-p2);
}
.card:hover .card__icon { transform: scale(1.08) rotate(-4deg); }

/* --- Trust & Authority: badge hover --- */
.badge {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-height: var(--badge-height);
	padding: 0.5rem 1rem;
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--r);
	font-family: var(--heading);
	font-size: var(--t-base);
	font-weight: 600;
	color: var(--ink);
	box-shadow: var(--sh-card);
	transition: transform var(--dur) var(--ease-p2), box-shadow var(--dur) var(--ease-p2);
}
.badge:hover { transform: translateY(-4px) scale(1.02); box-shadow: var(--sh-hover); }
.badge svg { width: 20px; height: 20px; color: var(--success-ink); }

/* --- Trust & Authority: metric pulse + smooth stat reveal --- */
.metric {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
}
.metric__value {
	font-family: var(--mono);
	font-size: clamp(1.75rem, 2.5vw, 2.5rem);
	font-weight: 600;
	line-height: 1;
	color: var(--ink);
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.02em;
}
.section--night .metric__value, .on-dark .metric__value { color: var(--white); }
.metric__label {
	font-size: var(--t-base);
	color: var(--muted);
}
.section--night .metric__label, .on-dark .metric__label { color: var(--on-night-muted); }

/* The pulse marks a live figure. One slow cycle, not a loop that nags. */
.metric--live .metric__value::after {
	content: "";
	display: inline-block;
	width: 7px; height: 7px;
	margin-left: 0.45rem;
	border-radius: 50%;
	background: var(--success-hi);
	vertical-align: middle;
	animation: metric-pulse 2.4s var(--ease-p1) infinite;
}
@keyframes metric-pulse {
	0%, 100% { opacity: 1; transform: scale(1); }
	50%      { opacity: 0.45; transform: scale(0.82); }
}

/* Smooth stat reveal — the figure rises as the row enters view. */
.js-enabled [data-stat] .metric__value {
	opacity: 0;
	transform: translateY(12px);
	transition: opacity var(--slow) var(--ease-p2), transform var(--slow) var(--ease-p2);
	transition-delay: var(--reveal-delay, 0ms);
}
.js-enabled [data-stat].is-revealed .metric__value { opacity: 1; transform: none; }

/* --- Console: the product frame tilts, then eases flat on hover --- */
.console {
	transform: perspective(1600px) rotateY(-6deg) rotateX(2deg);
	transform-style: preserve-3d;
	transition: transform var(--slow) var(--ease-p2), box-shadow var(--slow) var(--ease-p2);
	will-change: transform;
}
.hero__visual .console:hover {
	transform: perspective(1600px) rotateY(-2deg) rotateX(0.5deg) translateY(-6px);
	box-shadow: var(--sh-xl);
}
/* Only the hero frame is tilted; in-page consoles stay square. */
.split__media .console,
.channels__panel .console {
	transform: none;
}

/* --- Nav underline wipe (first design) --- */
.nav a { position: relative; }
.nav a::after {
	content: "";
	position: absolute;
	left: 0.75rem; right: 0.75rem; bottom: 0.35rem;
	height: 2px;
	background: var(--info);
	border-radius: 2px;
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform var(--dur) var(--ease-p2);
}
.nav a:hover::after,
.nav a:focus-visible::after,
.nav .current-menu-item > a::after,
.nav .current_page_item > a::after { transform: scaleX(1); }
.nav ul ul a::after { display: none; }

/* --- Subtle tier: quiet actions get feedback, not movement --- */
.post-card__more,
.utility a,
.site-footer__col a {
	transition: color var(--fast) var(--ease-p1), transform var(--fast) var(--ease-p1);
}
.post-card__more:hover { transform: translateY(-1px); }

/* --- Reduced motion: everything above collapses to nothing --- */
@media (prefers-reduced-motion: reduce) {
	.btn::after { display: none; }
	.card:hover, .card:focus-within,
	.plan:hover, .post-card:hover, .badge:hover { transform: none; }
	.card:hover .card__icon { transform: none; }
	.card::before, .nav a::after { transition: none; }

	/* Motion added in 2.2.0 — all of it collapses to its finished state. */
	.plan__meter::after { animation: none; display: none; }
	.features__panel[data-dir] { animation: none; }
	.chip--progress .chip__dot::after,
	.chip--retrying .chip__dot::after { animation: none; display: none; }
	.timeline__step.is-active .timeline__dot::after { animation: none; }
	.timeline__step.is-active .timeline__dot { transform: none; }
	.timeline__dot, .timeline__step::before, .timeline__time { transition: none; }
	.appwin__row--new { transition: none; animation: none; }
	.appwin__nav li b, .appwin__listhead span { transition: none; }
	.js-enabled .section--glacier.is-traced::before,
	.js-enabled .section--glacier-2.is-traced::before,
	.js-enabled .section--night.is-traced::before { transition: none; transform: scaleX(1); }
	.console, .hero__visual .console:hover { transform: none; }
	.metric--live .metric__value::after { animation: none; }
	.js-enabled [data-stat] .metric__value { opacity: 1; transform: none; }
}


/* ==========================================================================
   28. HERO APPLICATION WINDOW
   The first design's hero visual: a light recreation of the FaxDirect
   three-pane desktop window, which reads as a real product in a way the
   dark console frame did not. Entrance choreography is the original's —
   copy rises in sequence, the window scales up into its tilt, and the
   delivery toast lands last, once the headline has been read.
   ========================================================================== */

.appwin {
	position: relative;
	border-radius: var(--r-lg);
	background: var(--white);
	box-shadow: var(--sh-xl), 0 0 0 1px rgba(255, 255, 255, 0.10);
	overflow: hidden;
	transform: perspective(1600px) rotateY(-7deg) rotateX(2.5deg);
	transform-style: preserve-3d;
	transition: transform var(--slow) var(--ease-p2), box-shadow var(--slow) var(--ease-p2);
	will-change: transform;
}
.appwin:hover {
	transform: perspective(1600px) rotateY(-3deg) rotateX(1deg) translateY(-6px);
}

/* Title bar — the application's own navy */
.appwin__bar {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	height: 46px;
	padding-inline: 0.95rem;
	background: var(--navy);
}
.appwin__bar img { height: 21px; width: auto; }
.appwin__dots { display: flex; gap: 0.35rem; margin-left: auto; }
.appwin__dots span { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,0.32); }

.appwin__body {
	display: grid;
	grid-template-columns: 112px 1fr;
	min-height: 330px;
	background: var(--glacier);
}

.appwin__side {
	background: var(--white);
	border-right: 1px solid var(--line);
	padding: 0.7rem 0;
}

.appwin__tabs {
	display: grid;
	grid-template-columns: 1fr 1fr;
	margin-bottom: 0.6rem;
	font-family: var(--heading);
	font-size: 0.5938rem;
	font-weight: 600;
	text-align: center;
}
.appwin__tabs span {
	padding: 0.42rem 0;
	color: var(--muted);
	border-bottom: 2px solid var(--line-2);
}
.appwin__tabs span.is-active {
	color: var(--accent);
	background: #CCE4F7;
	border-bottom-color: var(--accent);
}

.appwin__nav { list-style: none; margin: 0; padding: 0; }
.appwin__nav li {
	display: flex; align-items: center; justify-content: space-between;
	margin: 0; padding: 0.42rem 0.75rem;
	font-size: 0.6563rem; color: #3D3D3D;
}
.appwin__nav li.is-active {
	background: var(--accent-wash);
	font-weight: 600;
	color: var(--navy);
	box-shadow: inset 2px 0 0 var(--accent);
}
.appwin__nav b { color: var(--accent); font-size: 0.5938rem; }

.appwin__main { background: var(--white); }

.appwin__listhead {
	display: flex; align-items: center; justify-content: space-between;
	padding: 0.65rem 0.85rem 0.5rem;
	border-bottom: 1px solid var(--line-2);
}
.appwin__listhead strong { font-family: var(--heading); font-size: 0.7813rem; color: var(--ink); }
.appwin__listhead span { font-size: 0.625rem; color: var(--faint); font-family: var(--mono); }

/* The AI content search field keeps its violet treatment from the product */
.appwin__search {
	display: flex; align-items: center; gap: 0.4rem;
	margin: 0.55rem 0.85rem;
	padding: 0.38rem 0.55rem;
	background: #F5F3FF;
	border: 1.5px solid #C4B5FD;
	border-radius: 5px;
	font-size: 0.6563rem;
	color: #6D5BA8;
}

.appwin__list { list-style: none; margin: 0; padding: 0 0 0.6rem; }
.appwin__list li {
	display: grid; grid-template-columns: 6px 1fr auto;
	gap: 0.55rem; align-items: center;
	margin: 0; padding: 0.55rem 0.85rem;
	border-bottom: 1px solid #F1F4F8;
	font-size: 0.6563rem;
}
.appwin__list li.is-unread { background: #F7FBFF; }
.appwin__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.appwin__list li:not(.is-unread) .appwin__dot { background: transparent; }
.appwin__list strong {
	display: block; font-family: var(--heading);
	font-size: 0.7188rem; font-weight: 600; color: var(--ink); line-height: 1.3;
}
.appwin__list small { color: var(--muted); font-size: 0.625rem; }
.appwin__time { color: var(--faint); font-size: 0.5938rem; white-space: nowrap; font-family: var(--mono); }

/* Delivery toast, overlapping the window's lower-right corner */
.appwin__toast {
	position: absolute;
	right: -14px;
	bottom: 26px;
	display: flex; align-items: center; gap: 0.65rem;
	padding: 0.7rem 0.95rem;
	background: var(--white);
	border: 1px solid var(--line);
	border-left: 3px solid var(--success-ink);
	border-radius: var(--r);
	box-shadow: var(--sh-lg);
	max-width: 236px;
}
.appwin__toast svg { flex: none; width: 21px; height: 21px; color: var(--success-ink); }
.appwin__toast strong {
	display: block; font-family: var(--heading);
	font-size: 0.7813rem; color: var(--ink); line-height: 1.3;
}
.appwin__toast span { font-size: 0.7188rem; color: var(--muted); }

/* --- Entrance choreography, from the original design --- */
@keyframes hero-rise {
	from { opacity: 0; transform: translateY(22px); }
	to   { opacity: 1; transform: translateY(0); }
}
@keyframes hero-window {
	from { opacity: 0; transform: perspective(1600px) rotateY(-7deg) rotateX(2.5deg) translateY(34px) scale(0.965); }
	to   { opacity: 1; transform: perspective(1600px) rotateY(-7deg) rotateX(2.5deg) translateY(0) scale(1); }
}
@keyframes hero-toast {
	from { opacity: 0; transform: translateY(14px) scale(0.96); }
	to   { opacity: 1; transform: translateY(0) scale(1); }
}

.anim-in { animation: hero-rise 760ms var(--ease-p2) backwards; }
.anim-1 { animation-delay: 80ms; }
.anim-2 { animation-delay: 180ms; }
.anim-3 { animation-delay: 280ms; }
.anim-4 { animation-delay: 380ms; }
.anim-5 { animation-delay: 480ms; }

.hero__visual .appwin { animation: hero-window 900ms var(--ease-p2) 320ms backwards; }
/* The toast reports the arrival, so it lands after the row does. */
.appwin__toast { animation: hero-toast 620ms var(--ease-p2) 2050ms backwards; }

@media (prefers-reduced-motion: reduce) {
	.appwin, .appwin:hover { transform: none; }
	.hero__visual .appwin, .appwin__toast, .anim-in { animation: none; }
}

@media (max-width: 767px) {
	.appwin, .appwin:hover { transform: none; }
	.appwin__body { grid-template-columns: 92px 1fr; }
	.appwin__toast { right: 8px; bottom: 8px; max-width: 200px; }
}


/* ==========================================================================
   29. HERO DEPTH
   Three additions, each from a ui-ux-pro-max motion.csv preset, each
   implemented in CSS so the theme stays dependency-free.
   ========================================================================== */

/* --- Headline measure ---------------------------------------------------
   15ch broke the h1 across four short lines at display size, which read as
   a stack of fragments rather than a sentence. 18ch gives three lines with
   a settled rag; text-wrap: balance (set globally on headings) does the
   rest. */
.hero h1 { max-width: 18ch; }

/* --- Parallax Scroll / Subtle tier --------------------------------------
   Preset: yPercent 5-15, linear scrub, "background/decorative layers only,
   never text or interactive controls". Only the signal-grid texture moves.
   The layer is over-sized vertically so the drift never exposes an edge;
   .hero already clips with overflow: hidden. main.js writes --hero-par. */
.hero::before {
	inset: -18% 0;
	transform: translate3d(0, var(--hero-par, 0px), 0);
}

/* --- Stagger List / Subtle tier -----------------------------------------
   Preset: y 8, 250-350ms, power1.out, 0.02-0.04s per item. The inbox
   populates row by row instead of arriving as one finished block, so the
   window reads as a live application. Starts at 980ms — after the window
   has scaled into place (320ms delay + 900ms) and before the toast lands
   at 1150ms, so the delivery notice still resolves the sequence. */
/*
 * The four faxes already in the inbox stagger in with the window. Row one is
 * excluded: that is the fax that arrives while you are watching, and the
 * script brings it in afterwards.
 */
.js-enabled .hero__visual .appwin__list li:not(.appwin__row--new) {
	animation: hero-row 300ms var(--ease-p1) backwards;
}
.js-enabled .hero__visual .appwin__list li:nth-child(2) { animation-delay: 980ms; }
.js-enabled .hero__visual .appwin__list li:nth-child(3) { animation-delay: 1015ms; }
.js-enabled .hero__visual .appwin__list li:nth-child(4) { animation-delay: 1050ms; }
.js-enabled .hero__visual .appwin__list li:nth-child(5) { animation-delay: 1085ms; }

@keyframes hero-row {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: none; }
}

/*
 * The arriving fax. The script hides it, then releases it: the row opens from
 * zero height so the list below is pushed down the way a real inbox behaves,
 * and a brief accent wash marks it as the new one before settling into the
 * ordinary unread state.
 */
/*
 * The collapsed start state is applied inline by the script, not by a class,
 * so the row keeps its grid layout throughout and nothing re-flows when the
 * transition ends.
 */
.appwin__row--new {
	transition:
		height 420ms var(--ease-p2),
		padding-top 420ms var(--ease-p2),
		padding-bottom 420ms var(--ease-p2),
		opacity 300ms var(--ease-out);
}
.js-enabled .appwin__row--new.is-arriving { animation: row-flash 1500ms var(--ease-out); }

@keyframes row-flash {
	0%   { background: rgba(0,120,212,0.22); }
	100% { background: #F7FBFF; }
}

/* The counters tick when the fax lands. */
.appwin__nav li b, .appwin__listhead span { transition: transform 260ms var(--ease-p2), color 260ms var(--ease); }
.appwin__nav li b.is-ticking, .appwin__listhead span.is-ticking { transform: scale(1.28); color: var(--accent); }

@media (prefers-reduced-motion: reduce) {
	.hero::before { transform: none; }
	.js-enabled .hero__visual .appwin__list li { animation: none; }
}