/*
Theme Name: Bond
Theme URI: https://example.com/bond
Author: Bond
Description: A quiet, document-first theme for a résumé site. White paper, Inter, one blue for anything you can act on. Built to pair with the Bond Resume Engine plugin, which supplies the generator, the design catalogue and the saved documents.
Version: 1.72.2
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: bond
Tags: one-column, custom-menu, custom-logo, translation-ready, block-styles, wide-blocks
*/

/* ---------------------------------------------------------------- tokens */

:root {
	--bond-theme-ink: #1D1D1F;
	--bond-theme-gray: #6E6E73;
	--bond-theme-hair: #E8E8ED;
	--bond-theme-soft: #F5F5F7;
	--bond-theme-blue: #0071E3;

	--ink: #1D1D1F;
	--gray: #6E6E73;
	--gray-2: #86868B;
	--hair: #E8E8ED;
	--bg: #FFFFFF;
	--bg-soft: #F5F5F7;
	--blue: #0071E3;
	--blue-dark: #0060C2;

	--card-sh: 0 1px 2px rgba(0,0,0,.03), 0 8px 24px -8px rgba(0,0,0,.06);
	--sheet-sh: 0 2px 4px rgba(0,0,0,.04), 0 24px 48px -12px rgba(0,0,0,.12), 0 64px 120px -32px rgba(0,0,0,.18);

	--wrap: 1180px;
	--step: 28px;
}

/* ------------------------------------------------------------------ base */

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

body {
	margin: 0;
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	color: var(--ink);
	background: var(--bg);
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
a:hover { color: var(--blue); }
img { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
	letter-spacing: -.025em;
	line-height: 1.1;
	margin: 0 0 12px;
}

h1 { font-size: clamp(34px, 5vw, 60px); font-weight: 700; }
h2 { font-size: clamp(26px, 3.4vw, 42px); font-weight: 700; }
h3 { font-size: 20px; font-weight: 600; letter-spacing: -.015em; }

p { margin: 0 0 16px; }

.wrap {
	max-width: var(--wrap);
	margin: 0 auto;
	padding: 0 var(--step);
}

/*
 * Nothing may push the page sideways. When something does, the whole layout
 * slides under the finger: side padding disappears and a swipe drags the page
 * instead of the carousel underneath it. One rule at the root removes the
 * possibility entirely.
 */
html,
body {
	max-width: 100%;
	/*
	 * overflow-x: hidden turns the page into a scroll container, and a scroll
	 * container is exactly what position: sticky measures against — which is
	 * why the pinned preview in the generator would not stay put. clip hides
	 * the same overflow without creating one. The older keyword stays first
	 * as a fallback for browsers that do not know clip.
	 */
	overflow-x: hidden;
	overflow-x: clip;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

.skip-link:focus {
	position: fixed;
	top: 12px;
	left: 12px;
	z-index: 100;
	background: #fff;
	color: var(--ink);
	padding: 10px 16px;
	border-radius: 100px;
	box-shadow: var(--card-sh);
	width: auto;
	height: auto;
	clip: auto;
}

:focus-visible {
	outline: 2px solid var(--blue);
	outline-offset: 3px;
	border-radius: 4px;
}

/* ---------------------------------------------------------------- header */

.site-header {
	position: sticky;
	top: 0;
	z-index: 40;
	background: rgba(255,255,255,.85);
	backdrop-filter: blur(14px);
	border-bottom: 1px solid var(--hair);
}

.header-inner {
	display: flex;
	align-items: center;
	gap: 26px;
	height: 60px;
}

.site-brand {
	display: flex;
	align-items: center;
	gap: 9px;
	font-weight: 700;
	font-size: 17px;
	letter-spacing: -.01em;
}

.site-brand i {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--blue);
	flex: 0 0 auto;
	position: relative;
	top: 1px; /* optical centre: the dot sits on the text's visual midline,
	             a hair below the geometric one */
	animation: brand-blink 2.2s ease-in-out infinite;
}

@keyframes brand-blink {
	50% { opacity: .2; }
}

.site-brand:hover { color: inherit; }

/* the logo: the sheets mark and the name, drawn inline (assets/logo/lockup.svg) */
.site-brand { color: var(--ink); line-height: 0; }
.site-brand .bond-logo { display: block; height: 26px; width: auto; transition: transform .25s cubic-bezier(.2,.8,.2,1); }
.site-brand:hover .bond-logo { transform: translateY(-1px); }
.foot-logo { line-height: 0; }
.foot-logo .bond-logo { display: block; height: 28px; width: auto; }
@media (max-width: 900px) { .site-brand .bond-logo { height: 23px; } }

/*
 * Beta badge. Deliberately quiet: it is a note about the site's state, not
 * a second logo, so it borrows the muted grey and sits at the brand's
 * cap height rather than on its baseline.
 */
.brand-group {
	display: flex;
	align-items: center;
	gap: 8px;
}

.beta-badge {
	display: inline-block;
	padding: 2px 7px;
	border: 1px solid var(--hair);
	border-radius: 999px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: lowercase;
	color: var(--gray);
	line-height: 1.5;
	white-space: nowrap;
}

.main-nav {
	margin-left: auto;
	display: flex;
	gap: 22px;
	font-size: 14px;
	font-weight: 500;
	color: var(--gray);
}

.main-nav ul {
	display: flex;
	gap: 22px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.main-nav a:hover { color: var(--ink); }
.main-nav .current-menu-item > a { color: var(--ink); }

.header-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1.2;
	white-space: nowrap;
	font-size: 13.5px;
	font-weight: 600;
	color: #fff;
	background: var(--blue);
	padding: 8px 16px;
	border-radius: 100px;
}

.header-cta:hover { background: var(--blue-dark); color: #fff; }

/* The way back into your own account. Quiet by default; once signed in the
   brand dot returns beside your name, so the header says who is logged in
   without an avatar service. */
.header-account {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 13.5px;
	font-weight: 500;
	color: var(--gray);
	white-space: nowrap;
}

.header-account:hover { color: var(--ink); }

.header-account.is-in { color: var(--ink); font-weight: 600; }

.header-account i {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--blue);
	flex: 0 0 auto;
}

.nav-toggle {
	display: none;
	margin-left: auto;
	border: 1px solid var(--hair);
	background: #fff;
	border-radius: 10px;
	padding: 7px 11px;
	font: inherit;
	font-size: 13px;
	cursor: pointer;
}

/* Header, 2026: the menu as one pill group and a gradient call to action,
   the same forms as the buttons on the template pages. */
.site-header{background:rgba(255,255,255,.78);-webkit-backdrop-filter:saturate(1.6) blur(16px);backdrop-filter:saturate(1.6) blur(16px)}
.header-inner{height:68px;gap:18px}
.main-nav{color:var(--ink)}
.main-nav ul{gap:2px;padding:4px;border-radius:999px;background:#fff;border:1px solid var(--hair);box-shadow:0 8px 20px -16px rgba(0,0,0,.3)}
.main-nav ul{align-items:center}
/* each item is its own flex box, so the line box of the list item cannot
   push the label off the pill's centre, whatever the font's metrics */
.main-nav li{display:flex;align-items:center;margin:0;padding:0;line-height:1}
.main-nav a{display:flex;align-items:center;justify-content:center;height:36px;margin:0;padding:0 15px;border-radius:999px;font-size:14px;font-weight:600;line-height:1;color:var(--ink);transition:background .2s,color .2s}
.main-nav a:hover{background:#F5F5F7;color:var(--blue)}
.main-nav .current-menu-item > a,.main-nav .current-menu-ancestor > a,.main-nav .current_page_item > a{background:rgba(0,113,227,.08);color:var(--blue)}
.header-account{height:36px;padding:0 6px;font-weight:600;line-height:1}
.header-cta{gap:8px;height:44px;padding:0 20px;font-size:14.5px;line-height:1;background:linear-gradient(135deg,#0071E3,#5B3AED);box-shadow:0 12px 24px -12px rgba(91,58,237,.8);transition:transform .2s,box-shadow .2s}
.header-cta:hover{background:linear-gradient(135deg,#0071E3,#5B3AED);transform:translateY(-1px);box-shadow:0 16px 28px -12px rgba(91,58,237,.9)}
/* the label a pixel above the box's middle: centred on its line box,
   lowercase text reads low, and on Linux, where hinting sets the baseline
   a pixel lower still, visibly so. The menu pills and the account link
   get the same lift, so every label in the bar sits alike. */
.header-cta{padding-bottom:2px}
.main-nav a,.header-account{padding-bottom:2px}
.nav-toggle{height:40px;padding:0 16px;border-radius:999px;font-weight:600;box-shadow:0 8px 20px -16px rgba(0,0,0,.3)}

/* ------------------------------------------------------------------ hero */

.hero {
	padding: 84px 0 76px;
	border-bottom: 1px solid var(--hair);
}

.hero-grid {
	display: grid;
	grid-template-columns: 1.05fr .95fr;
	gap: 52px;
	align-items: center;
}

.hero h1 span {
	font-style: normal;
	background: linear-gradient(92deg, #0090F7, #5856D6, #BA62FC, #FF6482, #BA62FC, #5856D6, #0090F7);
	background-size: 300% 100%;
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	animation: shimmer 6s linear infinite;
}

@keyframes shimmer {
	0%   { background-position: 0% 50%; }
	100% { background-position: 300% 50%; }
}

.hero-sub {
	font-size: 18px;
	color: var(--gray);
	max-width: 46ch;
	margin: 18px 0 26px;
}

.hero-actions {
	display: flex;
	gap: 12px;
	align-items: center;
	flex-wrap: wrap;
}

.btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-weight: 600;
	font-size: 16px;
	background: var(--blue);
	color: #fff;
	padding: 13px 26px;
	border: 0;
	border-radius: 100px;
	cursor: pointer;
	transition: background .2s;
}

.btn:hover { background: var(--blue-dark); color: #fff; }

.btn.ghost {
	background: #fff;
	color: var(--ink);
	border: 1px solid var(--hair);
}

.btn.ghost:hover { background: var(--bg-soft); color: var(--ink); }

.hero-note {
	margin-top: 16px;
	font-size: 13.5px;
	color: var(--gray);
}

/* The paper is the thesis of this page, so it behaves like paper: it floats,
   it tilts towards the cursor, and light travels across it. */

.stage {
	position: relative;
	perspective: 1600px;
	perspective-origin: 50% 44%;
	display: flex;
	justify-content: center;
}

.floor {
	position: absolute;
	z-index: 0;
	bottom: -4%;
	left: 50%;
	translate: -50% 0;
	width: min(560px, 74%);
	height: 56px;
	background: radial-gradient(50% 50% at 50% 50%, rgba(29,29,31,.16), rgba(29,29,31,0) 70%);
	filter: blur(16px);
}

.rig {
	position: relative;
	z-index: 1;
	transform-style: preserve-3d;
	width: min(380px, 80%);
	aspect-ratio: 8.5 / 11;
	transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
	transition: transform .5s cubic-bezier(.2,.7,.3,1);
	animation: float 9s ease-in-out infinite;
}

@keyframes float {
	0%, 100% { translate: 0 -7px; }
	50%      { translate: 0 10px; }
}

.sheet {
	position: absolute;
	inset: 0;
	border-radius: 10px;
	transform-style: preserve-3d;
	background: #fff;
	box-shadow: var(--sheet-sh);
}

.sheet-back {
	transform: translateZ(-24px) translate(26px, 20px) rotate(2.2deg);
	background: #FAFAFC;
	box-shadow: 0 30px 60px -24px rgba(0,0,0,.14);
}

.sheet-back2 {
	transform: translateZ(-46px) translate(48px, 38px) rotate(4deg);
	background: #F6F6F9;
	box-shadow: 0 24px 48px -20px rgba(0,0,0,.10);
}

.sheen {
	position: absolute;
	inset: 0;
	border-radius: 10px;
	pointer-events: none;
	opacity: .85;
	mix-blend-mode: soft-light;
	background: linear-gradient(118deg, rgba(255,255,255,0) 28%, rgba(255,255,255,.9) var(--sheen, 50%), rgba(214,220,235,.3) 72%);
}

.doc {
	padding: 26px 28px 28px;
	height: 100%;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	overflow: hidden;
}
.doc-name { font-size: 18px; font-weight: 700; letter-spacing: -.02em; margin: 0; }
.doc-role { font-size: 10px; color: var(--gray); margin: 3px 0 0; }
.doc-rule { height: 1px; background: var(--hair); margin: 8px 0; }
.doc-h { font-size: 8px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--gray); margin: 8px 0 3px; }
.doc-sub { display: flex; justify-content: space-between; gap: 10px; font-size: 9.5px; margin: 4px 0 2px; }
.doc-sub b { font-weight: 600; letter-spacing: -.01em; }
.doc-sub span { color: var(--gray-2); white-space: nowrap; }
.doc-line { height: 4px; border-radius: 3px; background: #ECEBE7; margin: 3px 0; transform-origin: left center; }
.doc-line.w1 { width: 96%; }
.doc-line.w2 { width: 88%; }
.doc-line.w3 { width: 68%; }

/* --- the résumé writes itself, then the ATS frame lights up green ------- */

.fill { opacity: 0; }

.stage.play .fill {
	animation: fill-in .4s cubic-bezier(.2,.7,.3,1) forwards;
	animation-delay: calc(var(--i) * .13s);
}

.stage.play .doc-line.fill { animation-name: fill-bar; }

@keyframes fill-in {
	from { opacity: 0; translate: 0 5px; }
	to   { opacity: 1; translate: 0 0; }
}

@keyframes fill-bar {
	from { opacity: 0; transform: scaleX(0); }
	to   { opacity: 1; transform: scaleX(1); }
}

.chip-r {
	opacity: 0;
	translate: 0 8px;
	border: 2px solid transparent;
	transition: opacity .5s ease, translate .5s ease, border-color .55s ease, box-shadow .55s ease;
}

.stage.ats-on .chip-r {
	opacity: 1;
	translate: 0 0;
	border-color: #1FA463;
	box-shadow: 0 0 0 4px rgba(31,164,99,.14), 0 1px 2px rgba(0,0,0,.05), 0 16px 36px -12px rgba(0,0,0,.16);
}

.stage.ats-on .chip-r b { color: #1FA463; }

/* finished state: everything visible, frame on — no motion required */
.stage.done .fill { opacity: 1; transform: none; translate: 0 0; }

/* the two facts worth pinning to the paper */
.chip {
	position: absolute;
	background: rgba(255,255,255,.78);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border-radius: 14px;
	padding: 12px 16px;
	box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 16px 36px -12px rgba(0,0,0,.16);
	text-align: left;
	white-space: nowrap;
	z-index: 2;
}

.chip b { display: block; font-size: 15px; font-weight: 600; letter-spacing: -.02em; }
.chip small { display: block; font-size: 11px; color: var(--gray); margin-top: 2px; }
.chip-l { left: 2%; bottom: 22%; }
.chip-r { right: 0; top: 14%; }

.paper-name { font-size: 21px; font-weight: 700; letter-spacing: -.02em; }
.paper-role { font-size: 11px; color: var(--gray); margin-top: 3px; letter-spacing: .04em; text-transform: uppercase; }
.paper-rule { height: 1px; background: var(--hair); margin: 14px 0; }
.paper-h { font-size: 9.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--gray); margin: 14px 0 6px; }
.paper-line { height: 5px; border-radius: 3px; background: #ECEBE7; margin: 5px 0; }
.paper-line.w1 { width: 96%; }
.paper-line.w2 { width: 88%; }
.paper-line.w3 { width: 68%; }

/* --------------------------------------------------------------- section */

/*
 * These modifiers sit on the same element as .wrap, so a padding shorthand
 * here also rewrites the side padding .wrap sets — and the page loses its
 * left and right margins entirely. Only the vertical sides are set.
 */
.section { padding-block: 88px; }
.section.soft { background: var(--bg-soft); border-block: 1px solid var(--hair); }

.section-head { max-width: 640px; margin-bottom: 44px; }
.section-head p { color: var(--gray); font-size: 17px; margin: 12px 0 0; }

.eyebrow {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--gray);
	margin: 0 0 10px;
}

/* three steps — a real sequence, so the numbers carry meaning */
.steps {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}

.step {
	background: #fff;
	border: 1px solid var(--hair);
	border-radius: 20px;
	padding: 28px;
	box-shadow: var(--card-sh);
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.step-n {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--bg-soft);
	color: var(--gray);
	font-size: 14px;
	font-weight: 600;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 4px;
}

.step p { color: var(--gray); font-size: 14.5px; margin: 0; }

/* ------------------------------------------------------------- the path */

/*
 * How it works: the pinned card on the left and the steps on the right,
 * in the same language as the catalogue and the pay board — the soft
 * aurora, glass cards with a blur, one large display headline, the step
 * nearest the middle of the window lit with a blue glow.
 */
.path {
	/* clip, not hidden: a hidden overflow makes the section a scroll container
	   and the pinned card stops sticking — it stayed put while the steps went by */
	position: relative; overflow: clip; padding: 88px 0 80px;
	background:
		radial-gradient(55% 45% at 12% 10%, rgba(0, 113, 227, .12), transparent 70%),
		radial-gradient(45% 40% at 88% 30%, rgba(168, 120, 255, .14), transparent 70%),
		radial-gradient(60% 50% at 40% 110%, rgba(255, 190, 120, .12), transparent 70%),
		var(--bg-soft);
}
.path-grid { display: grid; grid-template-columns: 1fr 1.25fr; gap: 64px; align-items: start; }
.path-card { align-self: stretch; }
.path-pin {
	position: sticky; top: calc(var(--header-h, 72px) + 24px);
	background: rgba(255, 255, 255, .72); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
	border: 1px solid rgba(255, 255, 255, .95); border-radius: 28px; padding: 40px 40px 36px;
	box-shadow: 0 0 0 8px rgba(0, 113, 227, .06), 0 30px 60px -28px rgba(0, 113, 227, .35);
}
.path-kick { display: flex; align-items: center; gap: 10px; margin: 0 0 18px; font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--blue); }
.path-kick i { width: 10px; height: 10px; border-radius: 3px; background: var(--blue); }
.path-pin h2 { font-size: clamp(34px, 3.6vw, 48px); letter-spacing: -.04em; line-height: 1; margin: 0 0 16px; max-width: 12ch; }
.path-lead { color: var(--gray); font-size: 16px; line-height: 1.6; margin: 0 0 28px; max-width: 34em; }
.path-bar { height: 6px; border-radius: 3px; background: rgba(17, 17, 20, .08); overflow: hidden; }
.path-bar i { display: block; height: 100%; background: var(--blue); border-radius: 3px; transition: width .5s cubic-bezier(.2, .8, .2, 1); }
.path-state { margin: 12px 0 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--blue); }
.path-cta { margin: 28px 0 0; }
.path-cta .btn { background: var(--ink); }
.path-cta .btn:hover { background: var(--blue); }

.path-list { list-style: none; margin: 0; padding: 0 0 0 40px; position: relative; }
.path-list::before { content: ""; position: absolute; left: 11px; top: 28px; bottom: 28px; width: 2px; background: rgba(17, 17, 20, .1); }
.path-step { position: relative; margin: 0 0 20px; }
.path-dot {
	position: absolute; left: -40px; top: 30px; width: 24px; height: 24px; border-radius: 50%;
	background: #fff; border: 2px solid var(--blue); box-sizing: border-box;
	transition: background .3s ease, transform .3s ease, box-shadow .3s ease;
}
.path-step.is-on .path-dot { background: var(--blue); transform: scale(1.15); box-shadow: 0 0 0 8px rgba(0, 113, 227, .14); }
.path-step.is-past .path-dot { background: var(--blue); }
/* the step cards wear the same frame as the pinned card: a glass face, a
   faint blue ring around it and a blue glow beneath */
.path-body {
	background: rgba(255, 255, 255, .72); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
	border: 1px solid rgba(255, 255, 255, .95); border-radius: 28px; padding: 26px 30px 28px;
	box-shadow: 0 0 0 8px rgba(0, 113, 227, .06), 0 30px 60px -28px rgba(0, 113, 227, .35);
	transition: box-shadow .35s ease, transform .35s ease, background .35s ease;
}
.path-step { margin-bottom: 28px; }
.path-step.is-on .path-body { background: #fff; transform: translateX(6px); box-shadow: 0 0 0 8px rgba(0, 113, 227, .10), 0 30px 60px -24px rgba(0, 113, 227, .42); }
.path-meta { display: flex; justify-content: space-between; gap: 16px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--blue); margin-bottom: 14px; }
.path-body h3 { font-size: 26px; letter-spacing: -.03em; margin: 0 0 10px; }
.path-body p { color: var(--gray); font-size: 16px; line-height: 1.6; margin: 0 0 16px; max-width: 42em; }
.path-out { display: inline-block; background: var(--bg-soft); border-radius: 100px; padding: 10px 16px; font-size: 14px; font-weight: 600; }


@media (prefers-reduced-motion: reduce) {
	.path-bar i, .path-dot, .path-body { transition: none; }
}

/* the picture in each step: the generator's own screens, drawn small and
   played the moment the step becomes current */
.path-art { margin: 0 0 20px; }
.pa { background: var(--bg-soft); border-radius: 14px; padding: 12px; display: grid; gap: 12px; min-height: 150px; }

/* the sheet, two columns */
.pa-sheet { position: relative; background: #fff; border: 1px solid var(--hair); border-radius: 8px; display: grid; grid-template-columns: 32% 1fr; min-height: 132px; overflow: hidden; }
.pa-col { background: #EEF1F6; padding: 12px 10px; }
.pa-main { padding: 12px 12px; display: flex; flex-direction: column; gap: 5px; }
.pa-name { display: block; font-size: 13px; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; }
.pa-role { display: block; font-size: 9px; color: var(--gray); }
.pa-h { display: block; font-size: 7.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); margin-top: 5px; }
.pa-col .pa-h:first-child { margin-top: 0; }
.pa-job { display: flex; justify-content: space-between; gap: 8px; font-size: 9px; }
.pa-job b { font-weight: 600; } .pa-job em { font-style: normal; color: var(--gray); white-space: nowrap; }
.pa-line { display: block; height: 4px; border-radius: 2px; background: var(--hair); transform-origin: left; margin: 2px 0; }
.pa-line.is-light { background: #fff; }

/* step 1: the question */
.pa-ui { background: #fff; border: 1px solid var(--hair); border-radius: 10px; padding: 14px; }
.pa-q { margin: 0 0 8px; font-size: 14px; font-weight: 700; letter-spacing: -.02em; }
.pa-q-sm { margin-top: 12px; font-size: 12.5px; }
.pa-opts { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.pa-opts-2 { grid-template-columns: repeat(2, 1fr); max-width: 200px; }
.pa-opts span { display: flex; align-items: center; justify-content: center; min-height: 32px; border: 1px solid var(--hair); border-radius: 8px; padding: 0 4px; text-align: center; font-size: 10px; font-weight: 700; white-space: nowrap; transition: background .3s, color .3s, border-color .3s; }
.path-step.is-on .pa-pick { background: var(--ink); color: #fff; border-color: var(--ink); transition-delay: .6s; }
.path-step.is-on .pa-pick-2 { transition-delay: 1.3s; }
.pa-short { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 4px; }
.pa-short-h { font-size: 11px; font-weight: 600; color: var(--gray); }
.pa-minis { display: flex; gap: 8px; }
.pa-minis i { position: relative; width: 34px; height: 46px; background: #fff; border: 1px solid var(--hair); border-radius: 4px; opacity: 0; transform: translateY(8px); }
.pa-minis i.is-two::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 34%; background: #3A4F7A; border-radius: 3px 0 0 3px; }
.pa-minis i.is-alt::before { background: #8D4437; }
.path-step.is-on .pa-minis i { animation: pa-up .45s cubic-bezier(.2,.8,.2,1) both; }
.path-step.is-on .pa-minis i:nth-child(1) { animation-delay: 1.9s; } .path-step.is-on .pa-minis i:nth-child(2) { animation-delay: 2.05s; } .path-step.is-on .pa-minis i:nth-child(3) { animation-delay: 2.2s; }

/* step 2: three real layouts */
.pa-three { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; align-items: end; padding: 6px 4px 0; }
.pa-tilewrap { position: relative; transition: transform .5s cubic-bezier(.2,.8,.2,1); }
.path-step.is-on .pa-tilewrap.is-pick { transform: translateY(-8px) scale(1.06); transition-delay: .5s; }
.pa-tile { display: block; position: relative; aspect-ratio: 210 / 297; border-radius: 6px; overflow: hidden; background: #fff; border: 1px solid var(--hair); box-shadow: var(--card-sh); }
.pa-tile .bond-frame { display: block; position: absolute; inset: 0; border: 0; border-radius: 6px; overflow: hidden; aspect-ratio: auto; box-shadow: none; }
.pa-tile .bond-host { display: block; transform-origin: 0 0; }
.pa-tile-drawn.is-two::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 34%; background: #3A4F7A; }
.pa-tilewrap.is-pick .pa-tile { border-color: var(--blue); box-shadow: 0 0 0 2px rgba(0,113,227,.2), var(--card-sh); }
.pa-rec { position: absolute; left: 50%; bottom: -10px; translate: -50% 0; font-style: normal; font-size: 9px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; background: #FBE4E8; color: #7A1F35; padding: 3px 7px; border-radius: 5px; white-space: nowrap; }
.pa-swatches { display: flex; align-items: center; gap: 6px; padding: 8px 4px 0; }
.pa-swatches i { width: 14px; height: 14px; border-radius: 50%; opacity: 0; }
.pa-swatches span { font-size: 11px; color: var(--gray); margin-left: 6px; }
.path-step.is-on .pa-swatches i { animation: pa-up .35s ease both; }
.path-step.is-on .pa-swatches i:nth-child(1) { animation-delay: 1.2s; } .path-step.is-on .pa-swatches i:nth-child(2) { animation-delay: 1.3s; } .path-step.is-on .pa-swatches i:nth-child(3) { animation-delay: 1.4s; } .path-step.is-on .pa-swatches i:nth-child(4) { animation-delay: 1.5s; } .path-step.is-on .pa-swatches i:nth-child(5) { animation-delay: 1.6s; }

/* step 3: the form beside the sheet */
.pa-body { grid-template-columns: 1fr 1fr; }
.pa-form { background: #fff; border: 1px solid var(--hair); border-radius: 10px; padding: 12px; display: grid; gap: 8px; align-content: start; }
.pa-form label { position: relative; font-size: 9px; font-weight: 600; color: var(--gray); }
.pa-form label > span { display: block; border: 1px solid var(--hair); border-radius: 6px; padding: 7px 8px; font-size: 11px; font-weight: 400; color: var(--ink); min-height: 28px; margin-top: 3px; }
.pa-drop { position: absolute; left: 0; right: 0; top: 100%; z-index: 2; background: #fff; border: 1px solid var(--hair); border-radius: 6px; box-shadow: var(--card-sh); padding: 4px; display: none; font-style: normal; }
.pa-drop b, .pa-drop em { display: block; font-size: 10px; padding: 4px 6px; border-radius: 4px; font-style: normal; }
.pa-drop b { background: #E6F1FB; color: var(--blue); }
.path-step.is-on .pa-drop { display: block; animation: pa-drop 2.2s ease 1.15s both; }
@keyframes pa-drop { 0% { opacity: 0; } 15%, 80% { opacity: 1; } 100% { opacity: 0; } }
.pa-chiprow { display: flex; gap: 4px; flex-wrap: wrap; }
.pa-chiprow i { font-style: normal; font-size: 9px; background: var(--bg-soft); border-radius: 100px; padding: 3px 7px; }

/* step 4: the editor beside the sheet */
.pa-done { grid-template-columns: 1fr 1fr; }
.pa-editor { background: #fff; border: 1px solid var(--hair); border-radius: 10px; padding: 12px; display: grid; gap: 8px; align-content: start; }
.pa-eh { font-size: 11px; font-weight: 700; }
.pa-row { display: flex; justify-content: space-between; align-items: center; border: 1px solid var(--hair); border-radius: 6px; padding: 5px 8px; font-size: 10px; }
.pa-mv { font-style: normal; background: var(--bg-soft); border-radius: 4px; padding: 1px 6px; }
.path-step.is-on .pa-mv { animation: pa-press .4s ease 1.2s both; }
@keyframes pa-press { 50% { background: var(--blue); color: #fff; } }
.pa-sizes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.pa-sizes i { font-style: normal; border: 1px solid var(--hair); border-radius: 6px; text-align: center; padding: 4px 0; font-weight: 700; }
.pa-sizes i:nth-child(1) { font-size: 9px; } .pa-sizes i:nth-child(2) { font-size: 12px; } .pa-sizes i:nth-child(3) { font-size: 15px; }
.path-step.is-on .pa-sizes i:nth-child(2) { animation: pa-pick 2s ease 2s both; }
@keyframes pa-pick { 0% { border-color: var(--hair); } 30%, 100% { border-color: var(--blue); box-shadow: 0 0 0 2px rgba(0,113,227,.18); } }
.pa-slider { height: 4px; background: var(--hair); border-radius: 2px; position: relative; margin: 6px 0 2px; }
.pa-slider u { position: absolute; top: -4px; left: 55%; width: 12px; height: 12px; border-radius: 50%; background: var(--blue); }
.path-step.is-on .pa-slider u { animation: pa-slide 1s cubic-bezier(.2,.8,.2,1) 2.4s both; }
@keyframes pa-slide { from { left: 55%; } to { left: 38%; } }
.pa-check { background: var(--bg-soft); border-radius: 8px; padding: 7px 9px; font-size: 10px; }
.pa-check b { display: block; color: #1FA463; font-weight: 600; }
.pa-check i { display: block; height: 4px; border-radius: 2px; background: var(--hair); margin-top: 5px; overflow: hidden; }
.pa-check u { display: block; height: 100%; width: 100%; background: #1FA463; transform-origin: left; transform: scaleX(0); }
.path-step.is-on .pa-check u { animation: pa-draw .9s cubic-bezier(.2,.8,.2,1) 3.2s both; }
.pa-edu-side { display: none; }
.path-step.is-on .pa-edu-side { display: block; animation: pa-up .4s ease 1.5s both; }
.path-step.is-on .pa-edu-main { animation: pa-out .4s ease 1.3s both; }
@keyframes pa-out { to { opacity: 0; height: 0; margin: 0; } }
.pa-files { grid-column: 1 / -1; display: flex; gap: 8px; padding-top: 4px; }
.pa-files span {
	flex: 1; position: relative; text-align: center; padding: 10px 0; border-radius: 10px; font-size: 13px; font-weight: 600; color: #fff;
	opacity: 0; transform: translateY(10px); transition: transform .2s ease, box-shadow .2s ease;
}
.pa-files span:hover { transform: translateY(-2px) !important; box-shadow: 0 12px 26px -12px rgba(0, 0, 0, .35); }
.pa-files .is-word { background: #185ABD; } .pa-files .is-pdf { background: #D93025; } .pa-files .is-print { background: #2B2F36; }
.pa-tick { position: absolute; right: -5px; top: -5px; width: 20px; height: 20px; border-radius: 50%; background: #1FA463; border: 2px solid #fff; display: grid; place-items: center; }
.pa-tick svg { width: 10px; height: 10px; }
.path-step.is-on .pa-files span { animation: pa-up .45s cubic-bezier(.2,.8,.2,1) both; }
.path-step.is-on .pa-files span:nth-child(1) { animation-delay: 4.2s; } .path-step.is-on .pa-files span:nth-child(2) { animation-delay: 4.35s; } .path-step.is-on .pa-files span:nth-child(3) { animation-delay: 4.5s; }

/* shared motion */
.path-step.is-on .pa-in { animation: pa-up .45s cubic-bezier(.2,.8,.2,1) var(--d, 0s) both; }
.path-step.is-on .pa-grow { animation: pa-draw .5s cubic-bezier(.2,.8,.2,1) var(--d, 0s) both; }
.path-step:not(.is-on) .pa-in, .path-step:not(.is-on) .pa-grow { opacity: 0; }
@keyframes pa-draw { from { transform: scaleX(0); opacity: 0; } to { transform: scaleX(1); opacity: 1; } }
@keyframes pa-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
	.path-step .pa-in, .path-step .pa-grow, .pa-minis i, .pa-swatches i, .pa-files span { opacity: 1 !important; transform: none !important; animation: none !important; }
	.pa-check u, .pa-slider u, .pa-mv, .pa-sizes i, .pa-tilewrap, .pa-drop, .pa-edu-main { animation: none !important; }
	.pa-check u { transform: none !important; } .pa-drop { display: none !important; } .pa-edu-side { display: block; } .pa-edu-main { display: none; }
	.pa-pick { background: var(--ink); color: #fff; border-color: var(--ink); }
	.pa-type::after { content: attr(data-text); }
}

/* grid children may shrink below their content; without this the option
   buttons' nowrap width stretched the whole column past a phone screen */
.path-grid > *, .path-list, .path-step, .path-body, .pa, .pa > * { min-width: 0; }

@media (max-width: 900px) {
	.path { padding: 60px 0 56px; }
	.path-grid { grid-template-columns: 1fr; gap: 28px; }
	.path-pin { position: static; padding: 28px 22px; border-radius: 22px; }
	/* no rail on a phone: the cards stack full width, the current one is
	   still outlined in blue */
	.path-list { padding-left: 0; }
	.path-list::before, .path-dot { display: none; }
	.path-body { padding: 18px 16px 20px; border-radius: 22px; }
	.path-step.is-on .path-body { transform: none; }
	.pa-opts { grid-template-columns: repeat(3, 1fr); }
	.pa-opts span { white-space: normal; line-height: 1.15; padding: 4px; }
	.pa-body, .pa-done { grid-template-columns: 1fr; }
	.pa-body .pa-sheet { display: none; }
	.pa-three { gap: 6px; }
}

@media (prefers-reduced-motion: reduce) {
	.path-bar i, .path-dot, .path-body { transition: none; }
}

/* --------------------------------------------------------------- examples */

/*
 * A strip of the examples' own sheets, drifting sideways over the aurora;
 * hovering pauses it. Each item is a container so the engine's thumbnail
 * scales to the card, exactly as on the archive.
 */
.exstrip {
	position: relative; overflow: hidden; padding: 88px 0 80px;
	background:
		radial-gradient(50% 45% at 15% 10%, rgba(0, 113, 227, .12), transparent 70%),
		radial-gradient(45% 40% at 85% 40%, rgba(255, 190, 120, .14), transparent 70%),
		var(--bg-soft);
}
.exstrip-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; margin-bottom: 34px; }
.exstrip-head h2 { font-size: clamp(36px, 5vw, 64px); letter-spacing: -.04em; line-height: 1; max-width: 12ch; margin: 0; }
.exstrip-head .btn { background: var(--ink); }
.exstrip-head .btn:hover { background: var(--blue); }
.exstrip-band { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.exstrip-lane { display: flex; gap: 28px; width: max-content; padding: 14px 0 20px; animation: exstrip-drift var(--speed, 90s) linear infinite; will-change: transform; }
.exstrip-band:hover .exstrip-lane, .exstrip-band:focus-within .exstrip-lane { animation-play-state: paused; }
@keyframes exstrip-drift { to { transform: translateX(-50%); } }
/* wide enough that the sheet's own type reads — a 794px page at 300px is a
   third scale, the same as a card on the archive */
.exstrip-item { display: block; width: 300px; text-decoration: none; color: var(--ink); transition: transform .3s ease; }
.exstrip-item:hover, .exstrip-item:focus-visible { transform: translateY(-8px); outline: none; }
.exstrip-sheet { display: block; position: relative; aspect-ratio: 210 / 297; border-radius: 10px; overflow: hidden; box-shadow: var(--sheet-sh); background: #fff; }
.exstrip-sheet .bond-frame { position: absolute; inset: 0; display: block; border: 0; border-radius: 0; box-shadow: none; aspect-ratio: auto; overflow: hidden; }
.exstrip-sheet .bond-host { display: block; transform-origin: 0 0; }
.exstrip-item:hover .exstrip-sheet, .exstrip-item:focus-visible .exstrip-sheet { box-shadow: 0 30px 60px -24px rgba(0, 113, 227, .4); }
.exstrip-title { display: block; margin: 14px 0 6px; font-size: 16px; font-weight: 600; letter-spacing: -.01em; line-height: 1.3; }
.exstrip-chip { display: inline-block; font-size: 11px; font-weight: 600; padding: 4px 9px; border-radius: 100px; background: rgba(255, 255, 255, .8); border: 1px solid rgba(255, 255, 255, .95); box-shadow: var(--card-sh); color: var(--gray); }

@media (max-width: 820px) {
	.exstrip { padding: 60px 0 56px; }
	.exstrip-head { display: block; }
	.exstrip-head h2 { margin-bottom: 14px; }
	.exstrip-item { width: 220px; }
}
@media (prefers-reduced-motion: reduce) { .exstrip-lane { animation: none; } }

/* ---------------------------------------------------------- examples archive */

/*
 * The examples archive: glass cards on the aurora, each with the whole
 * sheet, and cluster chips that filter the grid in place.
 */
.exarch {
	position: relative; overflow: clip; padding: 72px 0 80px;
	background:
		radial-gradient(55% 45% at 10% 15%, rgba(0, 113, 227, .13), transparent 70%),
		radial-gradient(45% 40% at 90% 20%, rgba(168, 120, 255, .15), transparent 70%),
		radial-gradient(60% 50% at 50% 110%, rgba(255, 190, 120, .13), transparent 70%),
		var(--bg-soft);
}
.exarch h1 { font-size: clamp(36px, 5vw, 64px); letter-spacing: -.04em; line-height: 1; margin: 0 0 14px; max-width: 12ch; }
.exarch-lead { color: var(--gray); font-size: 17px; line-height: 1.5; max-width: 52ch; margin: 0 0 24px; }
.exarch-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 30px; }
.exarch-chip {
	font-size: 13px; font-weight: 600; padding: 9px 14px; border-radius: 100px; text-decoration: none; color: var(--ink);
	background: rgba(255, 255, 255, .78); border: 1px solid rgba(255, 255, 255, .95); box-shadow: var(--card-sh);
}
.exarch-chip b { font-weight: 500; color: var(--gray); margin-left: 4px; }
.exarch-chip.is-on { background: var(--ink); color: #fff; }
.exarch-chip.is-on b { color: rgba(255, 255, 255, .7); }
.exarch-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.exarch-card {
	display: block; text-decoration: none; color: var(--ink);
	/* the card is the same white as the page it holds: against a tinted
	   glass card the sheet's edges read as a frame; now only the shadow at
	   its foot sets it apart */
	background: #fff;
	border: 1px solid rgba(255, 255, 255, .95); border-radius: 22px; padding: 14px;
	box-shadow: 0 0 0 8px rgba(0, 113, 227, .05), 0 14px 34px -20px rgba(17, 17, 20, .3);
	transition: transform .3s ease, box-shadow .3s ease;
}
.exarch-card:hover, .exarch-card:focus-visible { transform: translateY(-6px); box-shadow: 0 0 0 8px rgba(0, 113, 227, .08), 0 30px 60px -24px rgba(0, 113, 227, .4); outline: none; }
.exarch-card[hidden] { display: none; }
/* the sheet sits flat on the card: no frame of its own, only a soft shadow
   under its foot so the page reads as paper lying on glass */
.exarch-sheet { display: block; container-type: inline-size; position: relative; aspect-ratio: 794 / 1123; border-radius: 6px 6px 0 0; overflow: hidden; background: #fff; box-shadow: 0 16px 14px -14px rgba(17, 17, 20, .35); } /* blur equal to the negative spread: the shadow shows only under the foot, not along the sides */
.exarch-sheet .bond-ex-thumb { margin: 0; border: 0 !important; border-radius: 0; aspect-ratio: auto; position: absolute; inset: 0; box-shadow: none !important; }
.exarch-sheet .paper, .exarch-sheet .sheet, .exarch-sheet .paper-stack, .exarch-sheet .paper-wrap, .exarch-sheet .gpaper, .exarch-sheet .edit-paper, .exarch-sheet .bond-example { box-shadow: none !important; border: 0 !important; border-radius: 0 !important; margin: 0 !important; outline: 0 !important; }
.exarch-title { display: block; margin: 14px 6px 8px; font-size: 17px; font-weight: 700; letter-spacing: -.01em; line-height: 1.25; }
.exarch-meta { display: flex; gap: 6px; margin: 0 6px; flex-wrap: wrap; }
.exarch-tag { display: inline-block; font-size: 11px; font-weight: 600; padding: 4px 9px; border-radius: 100px; background: rgba(255, 255, 255, .85); border: 1px solid rgba(255, 255, 255, .95); color: var(--gray); box-shadow: var(--card-sh); }
.exarch .pagination { margin-top: 30px; }
@media (max-width: 900px) { .exarch { padding: 48px 0 56px; } .exarch-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } }
@media (max-width: 560px) { .exarch-grid { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------ questions */

/*
 * The page's closing band: a dark panel with the questions on the left and
 * the answer beside them. They take their turn on a timer; a tap holds the
 * one chosen. Below 900px the same questions are plain details/summary, so
 * a phone — and a page with no script at all — still opens every answer.
 */
:root {
	--tint-blue: #E6F1FB;   --ink-blue: #0C447C;
	--tint-green: #E1F5EE;  --ink-green: #085041;
	--tint-violet: #EEEDFE; --ink-violet: #3C3489;
	--tint-coral: #FAECE7;  --ink-coral: #712B13;
	--tint-amber: #FAEEDA;  --ink-amber: #633806;
	--tint-pink: #FBEAF0;   --ink-pink: #72243E;
}

.faq-band {
	position: relative;
	overflow: hidden;
	padding: 44px 48px 40px;
	border-radius: 28px;
	color: #f4f4f2;
	/* a saturated blue-violet sweep instead of near-black: still the page's
	   closing accent, but in the site's own blue rather than a void */
	background: radial-gradient(60% 80% at 85% 0%, rgba(255, 255, 255, .14), transparent 65%), linear-gradient(135deg, #2B4FB8 0%, #3B3BA8 55%, #5A3FA8 100%);
}
.faq-band .eyebrow { color: #D6E2FF; }
.faq-band h2 { color: #fff; margin: 0; }
.faq-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; margin-bottom: 28px; }
.faq-count { margin: 0 0 6px; color: #C9D3FF; font-size: 15px; }

.faq-wide { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 40px; align-items: start; }
.faq-q {
	position: relative; overflow: hidden; display: flex; gap: 14px; align-items: baseline; width: 100%; text-align: left;
	background: none; border: 0; border-radius: 12px; padding: 14px 16px; font: inherit; font-size: 16px; color: #D3DBFF; cursor: pointer;
}
.faq-q em { font-style: normal; font-size: 12px; font-weight: 600; color: #A9B6F0; min-width: 22px; }
.faq-q.is-on { background: rgba(255, 255, 255, .16); color: #fff; font-weight: 600; }
.faq-q.is-on em { color: #fff; }
.faq-timer { position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: #fff; }
.faq-band.is-auto .faq-q.is-on .faq-timer { animation: faq-timer var(--faqstep, 4.5s) linear forwards; }
@keyframes faq-timer { to { width: 100%; } }

.faq-answer { border-left: 1px solid rgba(255, 255, 255, .22); padding: 4px 0 0 36px; min-height: 240px; }
.faq-answer.is-in { animation: faq-in .45s ease; }
@keyframes faq-in { from { opacity: 0; transform: translateY(10px); } }
.faq-answer h3 { color: #fff; font-size: 24px; margin: 0 0 12px; }
.faq-answer p { font-size: 17px; line-height: 1.65; color: #E4E9FF; max-width: 46ch; margin: 0 0 18px; }
.faq-answer a { color: #fff; text-decoration: underline; text-underline-offset: 3px; font-weight: 600; font-size: 15px; }
.faq-tag { display: inline-block; font-size: 12px; font-weight: 600; letter-spacing: .04em; padding: 5px 11px; border-radius: 100px; margin-bottom: 14px; }
.faq-tag.is-blue { background: var(--tint-blue); color: var(--ink-blue); }
.faq-tag.is-green { background: var(--tint-green); color: var(--ink-green); }
.faq-tag.is-violet { background: var(--tint-violet); color: var(--ink-violet); }
.faq-tag.is-amber { background: var(--tint-amber); color: var(--ink-amber); }
.faq-tag.is-coral { background: var(--tint-coral); color: var(--ink-coral); }
.faq-tag.is-pink { background: var(--tint-pink); color: var(--ink-pink); }

.faq-narrow { display: none; }
.faq-item { border-bottom: 1px solid rgba(255, 255, 255, .22); }
.faq-item summary { cursor: pointer; list-style: none; font-size: 16px; font-weight: 600; padding: 14px 32px 14px 0; position: relative; color: #fff; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; position: absolute; right: 2px; top: 8px; font-size: 24px; font-weight: 300; color: #fff; }
.faq-item[open] summary::after { content: "–"; }
.faq-item p { color: #E4E9FF; margin: 0 0 14px; line-height: 1.6; }
.faq-item a { color: #fff; }

.faq-foot { margin-top: 30px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, .22); display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.faq-foot p { margin: 0; font-size: 19px; color: #fff; letter-spacing: -.01em; }
.faq-foot .btn { background: #fff; color: #2B4FB8; }
.faq-foot .btn:hover { background: #EEF3FF; color: #1D3A8F; }
.faq-foot p span { color: #D3DBFF; font-size: 15px; }

@media (max-width: 900px) {
	.faq-band { padding: 32px 22px 28px; border-radius: 22px; }
	.faq-wide { display: none; }
	.faq-narrow { display: block; }
	/* the last question already draws a rule under itself: no second one */
	.faq-foot { flex-direction: column; align-items: flex-start; border-top: 0; padding-top: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.faq-timer { animation: none !important; }
	.faq-answer.is-in { animation: none; }
}

/* ---------------------------------------------------------------- pages */

.page-head { padding-block: 64px 8px; }
.page-head .lead { font-size: 18px; color: var(--gray); max-width: 62ch; }

.entry-content {
	max-width: 720px;
	font-size: 17px;
}

.entry-content h2 { margin-top: 40px; }
.entry-content h3 { margin-top: 28px; }
.entry-content ul,
.entry-content ol { padding-left: 22px; }
.entry-content li { margin: 6px 0; }

.entry-content blockquote {
	margin: 24px 0;
	padding: 4px 0 4px 20px;
	border-left: 2px solid var(--blue);
	color: var(--gray);
}

.entry-content img { border-radius: 12px; }

.post-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}

.post-card {
	background: #fff;
	border: 1px solid var(--hair);
	border-radius: 16px;
	padding: 22px;
	box-shadow: var(--card-sh);
	transition: transform .25s cubic-bezier(.2,.8,.3,1), box-shadow .25s;
}

.post-card:hover { transform: translateY(-3px); box-shadow: var(--sheet-sh); }
.post-card h3 { margin-bottom: 6px; }
.post-card p { color: var(--gray); font-size: 14px; margin: 0; }

.pagination {
	margin-top: 40px;
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.pagination .page-numbers {
	border: 1px solid var(--hair);
	border-radius: 100px;
	padding: 7px 14px;
	font-size: 14px;
	font-weight: 500;
}

.pagination .current {
	background: var(--ink);
	color: #fff;
	border-color: var(--ink);
}


/* Admin-only hint: visible to editors, invisible to visitors. Deliberately
   small — a sticky note, not a section. */
.bond-admin-hint {
	margin: 26px 0;
	padding: 10px 14px;
	border: 1px dashed var(--hair);
	border-radius: 10px;
	color: var(--gray-2);
	font-size: 13px;
	max-width: 640px;
}

/* ---------------------------------------------------------------- footer */

.site-footer {
	border-top: 1px solid var(--hair);
	padding: 60px 0 26px;
	margin-top: 0; /* sections carry their own rhythm; a mute band above the
	                  footer reads as a mistake, not as air */
	background:
		radial-gradient(900px 380px at 6% 0, rgba(0, 113, 227, .07), rgba(0, 113, 227, 0) 70%),
		radial-gradient(760px 360px at 94% 12%, rgba(124, 58, 237, .07), rgba(124, 58, 237, 0) 70%),
		var(--bg-soft);
}
/* the head: the brand, one line on what the site does, the main action */
.foot-head { display: flex; align-items: center; gap: 28px; padding-bottom: 30px; margin-bottom: 30px; border-bottom: 1px solid var(--hair); }
.foot-logo { display: inline-block; flex: 0 0 auto; font-size: 22px; font-weight: 700; letter-spacing: -.03em; color: var(--ink); text-decoration: none; }
.foot-head p { flex: 1 1 auto; min-width: 0; margin: 0; color: var(--gray); font-size: 15.5px; line-height: 1.5; text-wrap: balance; }
.foot-acts { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; margin-left: auto; }
.foot-btn {
	flex: 0 0 auto;
	gap: 8px; height: 44px; padding: 0 20px 2px; border-radius: 999px; /* label a pixel up, as in the header */
	font-size: 14.5px; font-weight: 600; color: #fff; text-decoration: none;
	background: linear-gradient(135deg, #0071E3, #5B3AED);
	box-shadow: 0 12px 24px -12px rgba(91, 58, 237, .8);
	transition: transform .2s, box-shadow .2s;
}
.foot-btn:hover { color: #fff; transform: translateY(-1px); box-shadow: 0 16px 28px -12px rgba(91, 58, 237, .9); }
/* the ATS check: a button of its own, quieter than the main action */
.foot-btn.is-ghost { color: var(--ink); background: rgba(255, 255, 255, .85); border: 1px solid #DCE3F4; box-shadow: 0 8px 20px -16px rgba(15, 23, 42, .35); }
.foot-btn.is-ghost svg { color: #16A34A; }
.foot-btn.is-ghost:hover { color: var(--blue); background: #fff; border-color: rgba(0, 113, 227, .35); box-shadow: 0 12px 24px -16px rgba(0, 113, 227, .45); }
/* the ATS check sits beside "Write my resume" in the head, on every screen;
   the copy in the Create column is not shown */
.foot-col .foot-ats-col { display: none; }

/* the columns: one row of any number; the two data columns are wider */
.foot-top { display: flex; align-items: stretch; gap: 28px; }
.foot-col { flex: .8 1 0; min-width: 0; padding-top: 20px; }
.foot-col.foot-data { flex: 1.32 1 0; }
/* Help sits at the far right, as wide as its longest link, so its edge
   lines up with the head's buttons */
@media (min-width: 901px) { .foot-col.foot-col-help { flex: 0 0 auto; min-width: 0; margin-left: auto; } }
/* in one row the link columns are as wide as their longest link and the
   two cards share the rest, so the four columns stand the same distance
   apart: Create to the first card, card to card, card to Help */
@media (min-width: 1101px) {
	.foot-top { gap: 40px; }
	.foot-col { flex: 0 0 auto; }
	.foot-col.foot-data { flex: 1 1 0; }
}

.foot-col summary {
	list-style: none; cursor: default; margin: 0 0 16px;
	font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--gray-2);
}
.foot-col summary::-webkit-details-marker { display: none; }
.foot-col ul, .foot-col ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.foot-col a { color: var(--ink); text-decoration: none; font-size: 15px; line-height: 1.35; transition: color .2s; }
.foot-col a:hover { color: var(--blue); }

/* the two data columns sit on glass cards */
.foot-data {
	padding: 20px 20px 18px;
	border: 1px solid rgba(255, 255, 255, .95);
	border-radius: 22px;
	background: rgba(255, 255, 255, .72);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 24px 48px -36px rgba(15, 23, 42, .4);
}
.foot-data a { font-size: 14.5px; }
.foot-rank a { display: flex; align-items: baseline; gap: 12px; }
.foot-rank i {
	flex: 0 0 auto; font: 600 11.5px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
	letter-spacing: .04em; color: #A1A1AA; font-style: normal; font-variant-numeric: tabular-nums; transition: color .2s;
}
.foot-rank a:hover i { color: var(--blue); }
.foot-pay a { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.foot-pay span { min-width: 0; }
.foot-pay b {
	flex: 0 0 auto; padding: 3px 8px; border-radius: 999px;
	background: rgba(0, 113, 227, .08); color: #0071E3;
	font-size: 12.5px; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums;
	transition: background .2s, color .2s;
}
.foot-pay a:hover b { background: linear-gradient(135deg, #0071E3, #5B3AED); color: #fff; }
.foot-note { margin: 14px 0 0; font-size: 12px; line-height: 1.4; color: var(--gray-2); }
.foot-col .foot-more { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; font-size: 14px; font-weight: 600; color: var(--blue); }
.foot-col .foot-more span { transition: transform .2s; }
.foot-col .foot-more:hover span { transform: translateX(3px); }

.foot-bar {
	display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
	margin-top: 44px; padding-top: 18px; border-top: 1px solid var(--hair);
	font-size: 13px; color: var(--gray-2);
}
.foot-bar-links { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
/* the bottom-bar menu wraps onto a second line on a phone instead of
   running off the edge; each link keeps its words together */
.foot-bar-links { min-width: 0; max-width: 100%; }
.foot-bar-links ul { display: flex; flex-wrap: wrap; gap: 8px 18px; list-style: none; margin: 0; padding: 0; min-width: 0; }
.foot-bar-links a { color: var(--gray); text-decoration: none; white-space: nowrap; }
.foot-bar-links a:hover { color: var(--ink); }

/*
 * Build credit. Sits in the bottom bar rather than in a menu: the menus are
 * editable content, this line is not, and mixing them would let it be
 * dragged away or deleted by accident.
 */
.foot-credit a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
	text-decoration-thickness: 1px;
	text-decoration-color: var(--hair-2, #D6D6DE);
}
.foot-credit a:hover { color: var(--ink); text-decoration-color: currentColor; }

/* below 1100px the four columns go two by two */
@media (max-width: 1100px) and (min-width: 901px) {
	.foot-top { flex-wrap: wrap; row-gap: 16px; }
	.foot-col, .foot-col.foot-data { flex: 1 1 calc(50% - 14px); }
	.foot-col.foot-data { order: 2; } /* the link columns share the first row, the cards the second */
}

@media (max-width: 900px) {
	.site-footer { padding: 40px 0 20px; }
	.foot-head { flex-wrap: wrap; gap: 14px 20px; padding-bottom: 22px; margin-bottom: 4px; border-bottom: 0; }
	.foot-head p { flex-basis: 100%; order: 2; }
	.foot-acts { order: 3; margin-left: 0; flex-wrap: wrap; }
	.foot-top { flex-direction: column; align-items: stretch; gap: 0; }
	.foot-col, .foot-col.foot-data { flex: none; padding: 0; border: 0; border-top: 1px solid var(--hair); border-radius: 0; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
	.foot-col summary { cursor: pointer; margin: 0; padding: 14px 0; position: relative; }
	.foot-col summary::after { content: "+"; position: absolute; right: 2px; top: 10px; font-size: 20px; font-weight: 400; color: var(--gray); letter-spacing: 0; }
	.foot-col[open] summary::after { content: "–"; }
	.foot-col > ul, .foot-col > ol { padding-bottom: 14px; }
	.foot-data > ul, .foot-data > ol { padding-bottom: 0; }
	.foot-note { margin-top: 12px; }
	.foot-col .foot-more { margin: 10px 0 16px; }
	.foot-bar { margin-top: 20px; }
}

/* ------------------------------------------------------------ responsive */

@media (max-width: 900px) {
	.hero-grid { grid-template-columns: 1fr; gap: 36px; }
	.hero { padding-block: 56px 52px; }
	.steps,
	.post-grid { grid-template-columns: 1fr; }
	.section { padding-block: 60px; }

	.nav-toggle { display: inline-flex; align-items: center; justify-content: center; line-height: 1.2; }

	.main-nav {
		display: none;
		position: absolute;
		top: 60px;
		left: 0;
		right: 0;
		background: #fff;
		border-bottom: 1px solid var(--hair);
		padding: 14px var(--step);
	}

	.main-nav.open { display: block; }
	.main-nav ul { flex-direction: column; gap: 14px; }
	.header-cta { display: none; }
	.header-account { margin-left: 14px; }
}

@media (prefers-reduced-motion: reduce) {
	.post-card:hover { transform: none; }
	.rig { animation: none; }
	.fill { opacity: 1 !important; transform: none !important; translate: 0 0 !important; }
	.site-brand i { animation: none; }
	.chip-r { opacity: 1; translate: 0 0; }
	.hero h1 span {
		animation: none;
		background: linear-gradient(92deg, #0090F7 0%, #5856D6 50%, #BA62FC 100%);
		-webkit-background-clip: text;
		background-clip: text;
	}
	* { scroll-behavior: auto !important; }
}

@media (max-width: 900px) {
	.rig { width: min(330px, 78%); animation: none; }
	.doc { padding: 20px 22px 22px; }
	.doc-line[style*="--i:15"],
	.doc-sub[style*="--i:16"],
	.doc-line[style*="--i:17"],
	.doc-line[style*="--i:18"] { display: none; }
	.chip { padding: 9px 12px; }
	.chip b { font-size: 13px; }
	.chip small { font-size: 10px; }
	.chip-l { left: 0; bottom: 8%; }
	.chip-r { right: 0; top: 6%; }
}

/*
 * The example cards draw themselves: the plugin's card styles carry the tint,
 * the name and the sheet, so the theme's own card chrome would only add a box
 * around a box.
 */
.post-card-ex { background: none; border: 0; padding: 0; box-shadow: none; }


/*
 * The hero sheet on a phone. At full desktop spacing the paper came out as a
 * narrow card with its lines spread thin and both chips sitting on the text.
 * Here the page is set tighter from the top, the lines are a touch darker so
 * they read at this size, the paper stack sits closer, and the chips move to
 * the paper's edges: the ATS badge above the top-right corner, the page size
 * below the bottom-left one.
 */
@media (max-width: 600px) {
	.rig { width: min(320px, 84%); }
	.sheet-back { transform: translateZ(-16px) translate(12px, 10px) rotate(1.6deg); }
	.sheet-back2 { transform: translateZ(-30px) translate(22px, 20px) rotate(3deg); }
	.stage { margin-bottom: 52px; }
	/* everything on the paper is sized in units of the paper's own width, so
	   the page keeps the same proportions — and fits — on any phone */
	.rig { container-type: inline-size; }
	.doc { padding: 5.8cqw 5.8cqw 4.64cqw; justify-content: flex-start; gap: 0; }
	.doc > * { flex-shrink: 0; }
	/* the third job leaves the phone's paper so the rest fits whole */
	.doc-opt { display: none; }
	.doc-name { font-size: 5.22cqw; }
	.doc-role { font-size: 3.04cqw; margin-top: 0.87cqw; }
	.doc-rule { margin: 2.9cqw 0 1.16cqw; }
	.doc-h { font-size: 2.46cqw; margin: 2.9cqw 0 1.16cqw; }
	.doc-sub { font-size: 2.9cqw; margin: 1.45cqw 0 0.58cqw; gap: 2.32cqw; }
	.doc-line { height: 1.16cqw; margin: 0.93cqw 0; background: #E2E1DC; }
	.chip { padding: 8px 11px; border-radius: 12px; }
	.chip b { font-size: 13px; }
	.chip small { font-size: 10px; }
	.chip-r { right: -8px; top: -14px; }
	.chip-l { left: -6px; bottom: -50px; }
}


/* --------------------------------------------------------------- kinetic */

/*
 * Two lanes of occupations in large display type under the first screen,
 * drifting in opposite directions, solid and outlined in turn. A lane stops
 * under the pointer and the word it points at turns blue.
 */
.kinetic { padding: 26px 0 24px; overflow: hidden; border-block: 1px solid var(--hair); }
.kinetic-band { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.kinetic-band + .kinetic-band { margin-top: 8px; }
.kinetic-lane { display: flex; align-items: center; width: max-content; animation: kinetic-drift var(--speed, 46s) linear infinite; will-change: transform; }
.kinetic-lane.is-rev { animation-direction: reverse; --speed: 58s; }
.kinetic-band:hover .kinetic-lane, .kinetic-band:focus-within .kinetic-lane { animation-play-state: paused; }
@keyframes kinetic-drift { to { transform: translateX(-50%); } }
.kinetic-word {
	padding: 0 20px; white-space: nowrap; text-decoration: none; color: var(--ink);
	font-size: clamp(22px, 2.6vw, 36px); font-weight: 700; letter-spacing: -.04em; line-height: 1.1;
	transition: color .2s ease, -webkit-text-stroke-color .2s ease;
}
.kinetic-word.is-outline { color: transparent; -webkit-text-stroke: 1.1px var(--ink); }
.kinetic-word:hover, .kinetic-word:focus-visible { color: var(--blue); -webkit-text-stroke-color: var(--blue); outline: none; }
.kinetic-dot { flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; background: var(--blue); }
@media (max-width: 820px) { .kinetic { padding: 18px 0 16px; } .kinetic-word { padding: 0 14px; } .kinetic-dot { width: 7px; height: 7px; } }
@media (prefers-reduced-motion: reduce) { .kinetic-lane { animation: none; } }

/* the outlined words of the kinetic strip turn into a soft solid on a phone —
   a hairline stroke at this size breaks up into broken letters */
@media (max-width: 820px) {
	.kinetic-word.is-outline { color: #B4B9C4; -webkit-text-stroke: 0; }
	.kinetic-word { font-weight: 700; letter-spacing: -.03em; }
}


/* ------------------------------------------------------------- pay board */

/*
 * Pay: the search as a glass pill with a glow, and under it a board of real
 * wage rows drifting upward without end over the same aurora the catalogue
 * sits on. Hovering the board pauses it; typing filters it while it moves.
 */
.payboard {
	position: relative; overflow: hidden; padding: 88px 0 80px;
	background:
		radial-gradient(55% 45% at 10% 15%, rgba(0, 113, 227, .13), transparent 70%),
		radial-gradient(45% 40% at 90% 20%, rgba(120, 200, 255, .18), transparent 70%),
		radial-gradient(60% 50% at 50% 110%, rgba(255, 190, 120, .13), transparent 70%),
		var(--bg-soft);
}
.payboard-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; margin-bottom: 30px; }
.payboard-head h2 { font-size: clamp(36px, 5vw, 66px); letter-spacing: -.04em; line-height: 1; max-width: 11ch; margin: 0; }
.payboard-lead { color: var(--gray); font-size: 17px; max-width: 30ch; line-height: 1.5; margin: 0 0 6px; }

.payboard-search {
	position: relative; z-index: 3; display: flex; align-items: center; gap: 12px; padding: 10px 10px 10px 22px; border-radius: 100px;
	background: rgba(255, 255, 255, .74); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
	border: 1px solid rgba(255, 255, 255, .95); color: var(--blue);
	box-shadow: 0 0 0 8px rgba(0, 113, 227, .08), 0 30px 60px -24px rgba(0, 113, 227, .45);
	transition: box-shadow .3s ease, transform .3s ease;
}
.payboard-search:focus-within { box-shadow: 0 0 0 8px rgba(0, 113, 227, .16), 0 34px 70px -24px rgba(0, 113, 227, .55); transform: translateY(-2px); }
.payboard-search input { flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; font-size: 21px; color: var(--ink); outline: none; }
.payboard-search input::placeholder { color: #9AA3B2; }
.payboard-search select { border: 1px solid var(--hair); border-radius: 100px; font: inherit; font-size: 14px; padding: 10px 40px 10px 16px; color: var(--ink); max-width: 180px; cursor: pointer;
	/* the browser's own arrow sat on the rounded edge (on Android against
	   the border itself); a drawn chevron keeps a steady inset instead.
	   A V carries its weight in its arms, so centred by its box it reads
	   high: it sits a pixel below the middle */
	-webkit-appearance: none; appearance: none;
	background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%236B7280' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 16px top calc(50% + 1px) / 12px 8px; }
.payboard-search button { border: 0; background: var(--ink); color: #fff; font: inherit; font-weight: 600; font-size: 16px; border-radius: 100px; padding: 15px 26px; cursor: pointer; transition: background .25s, transform .25s; white-space: nowrap; }
.payboard-search button:hover { background: var(--blue); transform: translateY(-1px); }

.payboard-board {
	position: relative; margin-top: -30px; padding-top: 70px; height: 420px; overflow: hidden;
	mask-image: linear-gradient(transparent 0, #000 22%, #000 86%, transparent);
	-webkit-mask-image: linear-gradient(transparent 0, #000 22%, #000 86%, transparent);
}
.payboard-lane { display: grid; gap: 10px; animation: payboard-up var(--speed, 48s) linear infinite; will-change: transform; }
.payboard-board:hover .payboard-lane, .payboard-board:focus-within .payboard-lane { animation-play-state: paused; }
@keyframes payboard-up { to { transform: translateY(-50%); } }

.payboard-row {
	display: grid; grid-template-columns: 1.6fr 1fr auto auto; gap: 18px; align-items: center; padding: 16px 22px; border-radius: 16px;
	background: rgba(255, 255, 255, .72); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
	border: 1px solid rgba(255, 255, 255, .9); box-shadow: 0 10px 30px -18px rgba(17, 17, 20, .25);
	text-decoration: none; color: var(--ink); transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.payboard-row:hover, .payboard-row:focus-visible { transform: translateX(6px) scale(1.01); background: #fff; box-shadow: 0 24px 50px -20px rgba(0, 113, 227, .35); }
.payboard-job { font-weight: 600; font-size: 17px; letter-spacing: -.01em; }
.payboard-state { color: var(--gray); font-size: 15px; }
.payboard-num { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 500; font-size: 18px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.payboard-delta { font-size: 12px; font-weight: 600; padding: 6px 10px; border-radius: 100px; min-width: 84px; text-align: center; }
.payboard-delta.is-up { background: #E1F5EE; color: #0B6E4F; }
.payboard-delta.is-down { background: #FBEFE6; color: #9A3F1F; }

.payboard-foot { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-top: 20px; font-size: 14px; color: var(--gray); }
.payboard-foot a { color: var(--blue); font-weight: 600; text-decoration: none; }

@media (max-width: 820px) {
	.payboard { padding: 60px 0 56px; }
	.payboard-head { display: block; }
	.payboard-head h2 { margin-bottom: 14px; }
	.payboard-search { flex-wrap: wrap; border-radius: 22px; padding: 12px; }
	.payboard-search input { font-size: 18px; flex-basis: 100%; padding: 6px 4px 10px; }
	.payboard-search select { flex: 1; max-width: none; }
	.payboard-row { grid-template-columns: 1fr auto; gap: 6px 14px; }
	.payboard-state { grid-column: 1; }
	.payboard-delta { grid-column: 2; grid-row: 1; }
	.payboard-foot { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) { .payboard-lane { animation: none; } }

/* ------------------------------------------------------- floating sheets */

/*
 * The catalogue: nine real sheets hanging in space over a soft aurora —
 * three faint colour washes instead of a flat panel. Each sheet has its own
 * angle and depth; the chosen one comes forward, flat and lit, the rest
 * settle back. Everything positional is a variable per card, so a tenth
 * category only needs one more line in the table below.
 */
.float-band {
	position: relative;
	overflow: hidden;
	padding: 96px 0 100px;
	background:
		radial-gradient(60% 50% at 15% 20%, rgba(0, 113, 227, .13), transparent 70%),
		radial-gradient(50% 45% at 85% 25%, rgba(168, 120, 255, .15), transparent 70%),
		radial-gradient(60% 50% at 60% 100%, rgba(255, 176, 120, .13), transparent 70%),
		var(--bg-soft);
}
.float-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; margin-bottom: 40px; }
.float-head h2 { font-size: clamp(38px, 5.4vw, 72px); letter-spacing: -.04em; line-height: 1; max-width: 12ch; margin: 0; }
.float-aside p { color: var(--gray); font-size: 17px; max-width: 30ch; margin: 0 0 10px; line-height: 1.5; }
.float-count {
	display: inline-flex; gap: 8px; align-items: baseline; font-size: 15px; font-weight: 600;
	background: rgba(255, 255, 255, .72); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
	border: 1px solid rgba(255, 255, 255, .9); border-radius: 100px; padding: 10px 16px; box-shadow: var(--card-sh);
}
.float-count b { color: var(--blue); }

/* the arc: each card's place comes from data-pos, its distance from the
   chosen one; five are in view, the rest wait behind the edges */
.arc { position: relative; padding: 24px 0 78px; }
.arc-track { position: relative; height: 480px; perspective: 1500px; }
.arc-sheet {
	position: absolute; left: 50%; bottom: 0; width: 230px; aspect-ratio: 210 / 297;
	background: #fff; border-radius: 10px; box-shadow: var(--sheet-sh);
	text-decoration: none; color: inherit; outline: none; overflow: hidden;
	transform-origin: center bottom; opacity: 0; pointer-events: none;
	transform: translateX(-50%) scale(.5);
	transition: transform .6s cubic-bezier(.2, .8, .2, 1), opacity .5s, width .6s cubic-bezier(.2, .8, .2, 1), box-shadow .5s;
}
.arc-sheet[data-pos="0"] { width: 320px; opacity: 1; pointer-events: auto; z-index: 5; transform: translateX(-50%); box-shadow: 0 60px 120px -30px rgba(0, 113, 227, .32), 0 12px 30px -12px rgba(17, 17, 20, .25); }
.arc-sheet[data-pos="1"]  { opacity: .95; pointer-events: auto; z-index: 4; transform: translateX(calc(-50% + 300px)) rotateY(-28deg); }
.arc-sheet[data-pos="-1"] { opacity: .95; pointer-events: auto; z-index: 4; transform: translateX(calc(-50% - 300px)) rotateY(28deg); }
.arc-sheet[data-pos="2"]  { width: 180px; opacity: .6; pointer-events: auto; z-index: 3; transform: translateX(calc(-50% + 540px)) rotateY(-42deg); }
.arc-sheet[data-pos="-2"] { width: 180px; opacity: .6; pointer-events: auto; z-index: 3; transform: translateX(calc(-50% - 540px)) rotateY(42deg); }
.arc-sheet[data-pos="3"]  { width: 130px; opacity: 0; transform: translateX(calc(-50% + 720px)) rotateY(-50deg); }
.arc-sheet[data-pos="-3"] { width: 130px; opacity: 0; transform: translateX(calc(-50% - 720px)) rotateY(50deg); }
.arc-sheet:focus-visible { box-shadow: 0 0 0 4px rgba(0, 113, 227, .35), var(--sheet-sh); }
.arc-sheet .bond-frame { display: block; position: absolute; inset: 0; border-radius: 10px; border: 0; overflow: hidden; aspect-ratio: auto; box-shadow: none; }
.arc-sheet .bond-host { display: block; transform-origin: 0 0; }
.arc-sheet[data-pos="0"] { animation: float-bob 7s ease-in-out infinite; }
@keyframes float-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }

.arc-btn {
	position: absolute; bottom: 22px; z-index: 6; width: 46px; height: 46px; border-radius: 50%;
	background: rgba(255, 255, 255, .8); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
	border: 1px solid rgba(255, 255, 255, .9); box-shadow: var(--card-sh); font: inherit; font-size: 26px; line-height: 1;
	color: var(--ink); cursor: pointer; display: grid; place-items: center; transition: transform .2s;
}
/* the arrows are drawn, not typed: a ‹ › glyph sits wherever its font puts
   it, low and off to one side of the circle */
.arc-btn { padding: 0; }
.arc-btn svg { display: block; flex: none; }
.arc-btn:hover { transform: scale(1.06); }
.arc-prev { left: calc(50% - 150px); } .arc-next { right: calc(50% - 150px); }

.arc-label {
	position: absolute; left: 50%; bottom: 30px; z-index: 6; translate: -50% 0; margin: 0; white-space: nowrap;
	font-size: 14px; font-weight: 600; color: var(--ink);
	background: rgba(255, 255, 255, .8); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
	border: 1px solid rgba(255, 255, 255, .9); border-radius: 100px; padding: 9px 16px; box-shadow: var(--card-sh);
}
.arc-label small { color: var(--gray); font-weight: 500; margin-left: 6px; font-size: 12px; }
.arc-dots { position: absolute; left: 50%; bottom: 0; translate: -50% 0; display: flex; gap: 6px; }
.arc-dots i { width: 6px; height: 6px; border-radius: 3px; background: rgba(17, 17, 20, .18); transition: width .3s, background .3s; }
.arc-dots i.is-on { width: 22px; background: var(--blue); }

/* without the engine: drawn lines, so the arc is never empty */
.float-doc {
	position: absolute; inset: 16px 14px; border-radius: 6px;
	background:
		linear-gradient(var(--ink) 8px, transparent 8px) 0 0 / 52% 18px no-repeat,
		linear-gradient(var(--hair) 4px, transparent 4px) 0 26px / 88% 9px repeat-y;
}

/* every shape and its count, passing under the field */
.float-marq { margin-top: 44px; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.float-marq div { display: flex; gap: 10px; width: max-content; animation: float-marq 32s linear infinite; }
.float-marq span { white-space: nowrap; border: 1px solid var(--hair); background: #fff; border-radius: 100px; padding: 9px 16px; font-size: 14px; font-weight: 500; }
.float-marq span b { color: var(--blue); font-weight: 600; margin-left: 6px; }
@keyframes float-marq { to { translate: -50% 0; } }
.float-cta { margin: 30px 0 0; }

@media (max-width: 900px) {
	.float-band { padding: 64px 0 72px; }
	.float-head { display: block; }
	.float-head h2 { margin-bottom: 14px; }
	.arc-track { height: 340px; }
	.arc-sheet[data-pos="0"] { width: 210px; }
	.arc-sheet[data-pos="1"]  { width: 150px; transform: translateX(calc(-50% + 150px)) rotateY(-30deg); opacity: .7; }
	.arc-sheet[data-pos="-1"] { width: 150px; transform: translateX(calc(-50% - 150px)) rotateY(30deg); opacity: .7; }
	.arc-sheet[data-pos="2"], .arc-sheet[data-pos="-2"] { opacity: 0; pointer-events: none; }
	.arc-btn { width: 40px; height: 40px; }
}

@media (prefers-reduced-motion: reduce) {
	.arc-sheet, .float-marq div { animation: none !important; }
	.arc-sheet, .arc-dots i { transition: none; }
}

/* The edit button on an example page. */
.bond-edit-example { margin-top: 18px; }

/* ------------------------------------------------------------ not found */

/*
 * The 404: the number itself, very large, in the middle of the window over
 * the same soft aurora as the catalogue, with a headline, the way out and
 * search under it. The section fills the window between header and footer,
 * so the number sits in the middle of the screen, not at the top of it.
 */
.nf {
	position: relative; overflow: clip;
	min-height: calc(100vh - var(--header-h, 72px));
	min-height: calc(100svh - var(--header-h, 72px));
	display: grid; place-items: center;
	padding: 48px 20px 64px;
	background:
		radial-gradient(45% 40% at 20% 25%, rgba(0, 113, 227, .14), transparent 70%),
		radial-gradient(40% 38% at 82% 30%, rgba(168, 120, 255, .16), transparent 70%),
		radial-gradient(55% 45% at 50% 105%, rgba(255, 190, 120, .14), transparent 70%),
		var(--bg-soft);
}
.nf-inner { text-align: center; max-width: 640px; }
.nf-code {
	margin: 0; line-height: .85; font-weight: 800; letter-spacing: -.06em;
	font-size: clamp(140px, 30vw, 320px);
	background: linear-gradient(135deg, #6E56CF 0%, #0071E3 55%, #35A0FF 100%);
	-webkit-background-clip: text; background-clip: text; color: transparent;
	user-select: none;
}
.nf-code span { display: inline-block; }
/* the zero drifts a little, the only motion on the page */
.nf-zero { animation: nf-float 5s ease-in-out infinite; }
@keyframes nf-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4%); } }
@media (prefers-reduced-motion: reduce) { .nf-zero { animation: none; } }
.nf-title { margin: 18px 0 10px; font-size: clamp(26px, 3.4vw, 40px); letter-spacing: -.03em; line-height: 1.1; }
.nf-lead { margin: 0 auto 28px; max-width: 34em; color: var(--gray); font-size: 17px; line-height: 1.55; }
.nf-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.nf-actions .btn.ghost { background: rgba(255, 255, 255, .7); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.nf-search { margin: 28px auto 0; max-width: 420px; }
@media (max-width: 600px) {
	.nf { padding: 32px 16px 48px; }
	.nf-actions .btn { flex: 1 1 100%; justify-content: center; text-align: center; }
}

/* ------------------------------------------------ home, first screen: phone */

/* Made for the phone (up to 700px): job-title field first, taps for common
   titles, the sheet peeking in at the fold. The desktop hero is hidden there;
   this one is hidden above it. */
.mh { display: none; }
@media (max-width: 700px) {
	.home .hero, .page-template-default.home .hero { display: none; }
	.mh {
		display: block;
		padding: 14px 20px 0;
		background:
			radial-gradient(60% 40% at 15% 12%, rgba(0, 113, 227, .10), transparent 70%),
			radial-gradient(50% 35% at 95% 30%, rgba(168, 120, 255, .12), transparent 70%),
			#fff;
		overflow: hidden;
	}
	.mh-chip {
		display: inline-flex; align-items: center; gap: 6px; width: max-content; max-width: 100%;
		margin: 18px 0 0; padding: 6px 10px; border-radius: 999px;
		background: #F2F4F8; font-size: 12px; font-weight: 600; color: #3A3A3F;
	}
	.mh-chip b { color: #0071E3; }
	.mh-title { margin: 14px 0 8px; font-size: 38px; line-height: 1.02; letter-spacing: -.035em; font-weight: 800; color: #1D1D1F; }
	.mh-title span { background: linear-gradient(90deg, #6E56CF, #0071E3); -webkit-background-clip: text; background-clip: text; color: transparent; }
	.mh-sub { margin: 0 0 18px; font-size: 16px; line-height: 1.45; color: #5F5F66; }
	.mh-form {
		display: flex; gap: 8px; padding: 6px; margin: 0;
		border-radius: 18px; background: #fff; border: 1px solid #E5E5EA;
		box-shadow: 0 10px 30px rgba(0, 0, 0, .08);
	}
	.mh-form input {
		flex: 1; min-width: 0; border: 0; font: inherit; font-size: 16px;
		padding: 10px 12px; background: transparent; outline: 0; color: #1D1D1F;
	}
	.mh-form:focus-within { border-color: #0071E3; box-shadow: 0 0 0 3px rgba(0, 113, 227, .15), 0 10px 30px rgba(0, 0, 0, .08); }
	.mh-form .go {
		flex: 0 0 auto; padding: 12px 16px; border-radius: 13px; border: 0;
		background: #0071E3; color: #fff; font: inherit; font-weight: 700; font-size: 15px; cursor: pointer;
	}
	.mh-tags {
		display: flex; gap: 8px; margin: 12px -20px 0; padding: 0 20px;
		overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
	}
	.mh-tags::-webkit-scrollbar { display: none; }
	.mh-tags a {
		flex: 0 0 auto; padding: 8px 12px; border-radius: 999px; border: 1px solid #E5E5EA;
		font-size: 13px; color: #3A3A3F; white-space: nowrap; background: #fff; text-decoration: none;
	}
	.mh-tags a:active { background: #F2F4F8; }
	.mh-trust { margin: 12px 0 0; font-size: 12.5px; color: #8A8A90; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
	.mh-trust i { width: 3px; height: 3px; border-radius: 50%; background: #C7C7CC; }
	.mh-stage { position: relative; margin: 26px -20px 0; padding: 14px 20px 0; overflow: hidden; }
	.mh-sheet {
		position: relative; width: 100%; max-width: 330px; height: 230px; margin: 0 auto;
		padding: 22px 22px 0; overflow: hidden; background: #fff; border-radius: 14px 14px 0 0;
		box-shadow: 0 -6px 30px rgba(0, 0, 0, .10), 0 0 0 1px rgba(0, 0, 0, .04);
	}
	.mh-sheet::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 70px; background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff); }
	.mh-sheet .n { font-weight: 800; font-size: 17px; margin: 0; color: #1D1D1F; }
	.mh-sheet .r { font-size: 11px; color: #7A7A80; margin: 2px 0 10px; }
	.mh-sheet .h { font-size: 9px; letter-spacing: .14em; font-weight: 700; color: #8A8A90; margin: 10px 0 6px; text-transform: uppercase; }
	.mh-sheet .l { height: 6px; border-radius: 3px; background: #E9E9EE; margin: 5px 0; }
	.mh-sheet .l.w2 { width: 85%; }
	.mh-sheet .l.w3 { width: 60%; }
	.mh-sheet .s { display: flex; justify-content: space-between; font-size: 11px; margin: 6px 0 4px; }
	.mh-sheet .s b { font-weight: 700; }
	.mh-sheet .s span { color: #8A8A90; }
	.mh-badge {
		position: absolute; right: 16px; top: 0; padding: 8px 12px; border-radius: 14px;
		background: #fff; border: 1.5px solid #34C759; box-shadow: 0 8px 22px rgba(0, 0, 0, .10);
	}
	.mh-badge b { display: block; color: #1E9E44; font-size: 14px; }
	.mh-badge small { font-size: 11px; color: #6E6E73; }
	.mh-badge.l2 { right: auto; left: 16px; top: auto; bottom: 22px; border-color: #0071E3; }
	.mh-badge.l2 b { color: #0071E3; }
}

/* ------------------------------------------------- example cards: window */

/*
 * The sheet stands in a soft window and shows its upper part, about 70% of
 * the card; the foot fades into the white. On hover the card lifts, gains a
 * thin blue ring and the sheet slides up inside the window to show more.
 * The cluster sits as a chip in the window's corner; an open arrow and an
 * "Open example" hint appear on hover. Touch screens get the resting state;
 * the whole card is the link either way.
 */
.exarch-card {
	padding: 0; overflow: hidden; border: 0;
	box-shadow: 0 1px 0 rgba(0, 0, 0, .04), 0 12px 30px rgba(20, 30, 60, .06);
	transition: transform .35s cubic-bezier(.2, .7, .2, 1), box-shadow .35s ease;
}
.exarch-card:hover, .exarch-card:focus-visible {
	transform: translateY(-10px);
	box-shadow: 0 30px 60px rgba(20, 30, 60, .16), 0 0 0 1.5px rgba(0, 113, 227, .35);
	outline: none;
}
.exarch-win {
	display: block; position: relative; overflow: hidden;
	/* the sheet takes 88% of the card's width; the window shows about 70%
	   of its height (0.88 × 1.414 × 0.7 ≈ 0.87 of the width) plus the gap
	   above it */
	aspect-ratio: 1 / .93;
	background: linear-gradient(180deg, #EEF1F6, #E6EAF1);
}
.exarch-win::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 60px; z-index: 1;
	background: linear-gradient(to bottom, rgba(230, 234, 241, 0), #fff); pointer-events: none;
}
.exarch-win .exarch-sheet {
	position: absolute; left: 6%; right: 6%; top: 6.5%;
	border-radius: 6px 6px 0 0;
	box-shadow: 0 10px 30px rgba(20, 30, 60, .14), 0 0 0 1px rgba(0, 0, 0, .04);
	transition: transform .5s cubic-bezier(.2, .7, .2, 1);
}
.exarch-card:hover .exarch-sheet, .exarch-card:focus-visible .exarch-sheet { transform: translateY(-9%); }
.exarch-badge {
	position: absolute; top: 10px; left: 10px; z-index: 2;
	padding: 5px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600; color: #3A3A3F;
	background: rgba(255, 255, 255, .85); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
	box-shadow: 0 2px 8px rgba(0, 0, 0, .06);
}
.exarch-open {
	position: absolute; right: 10px; top: 10px; z-index: 2;
	width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
	background: #111; color: #fff; font-size: 15px;
	opacity: 0; transform: translateY(-4px); transition: opacity .3s ease, transform .3s ease;
}
.exarch-hint {
	position: absolute; left: 50%; bottom: 14px; z-index: 2; transform: translateX(-50%);
	font-size: 12px; color: #fff; background: rgba(17, 17, 17, .75); padding: 6px 10px; border-radius: 999px;
	white-space: nowrap; opacity: 0; transition: opacity .3s ease;
}
.exarch-card:hover .exarch-open, .exarch-card:focus-visible .exarch-open { opacity: 1; transform: none; }
.exarch-card:hover .exarch-hint, .exarch-card:focus-visible .exarch-hint { opacity: 1; }
.exarch-card .exarch-title { margin: 16px 20px 8px; }
.exarch-card:hover .exarch-title, .exarch-card:focus-visible .exarch-title { color: var(--ink); }
.exarch-card .exarch-meta { margin: 0 20px 18px; }
.exarch-card .exarch-tag { font-size: 12px; font-weight: 500; padding: 5px 9px; background: #F2F4F8; border: 0; color: #3A3A3F; box-shadow: none; }
@media (hover: none) {
	.exarch-card:hover { transform: none; }
	.exarch-card:hover .exarch-sheet { transform: none; }
	.exarch-card:hover .exarch-open, .exarch-card:hover .exarch-hint { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
	.exarch-card, .exarch-win .exarch-sheet { transition: box-shadow .35s ease; }
	.exarch-card:hover, .exarch-card:focus-visible { transform: none; }
	.exarch-card:hover .exarch-sheet, .exarch-card:focus-visible .exarch-sheet { transform: none; }
}

/* ------------------------------------------- home, first screen: desktop */

/* The desktop first screen: field and proof on the left, the builder in a
   browser window on the right. Carried over from the approved mock-up. */
.hero.dh {
	position: relative; overflow: hidden; padding: 0;
	background:
		radial-gradient(45% 45% at 12% 20%, rgba(0, 113, 227, .10), transparent 70%),
		radial-gradient(40% 40% at 88% 22%, rgba(168, 120, 255, .13), transparent 70%),
		radial-gradient(50% 40% at 60% 110%, rgba(255, 190, 120, .10), transparent 70%),
		#fff;
}
.dh-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center; padding: 72px 40px 60px; }
.dh-chip { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 7px 12px; border-radius: 999px; background: #F2F4F8; font-size: 13px; font-weight: 600; color: #3A3A3F; }
.dh-chip b { color: #0071E3; }
.hero.dh h1 { margin: 22px 0 14px; font-size: 66px; line-height: 1; letter-spacing: -.04em; font-weight: 800; }
.hero.dh h1 span { background: linear-gradient(90deg, #6E56CF, #0071E3); -webkit-background-clip: text; background-clip: text; color: transparent; }
.dh-sub { margin: 0 0 28px; font-size: 19px; line-height: 1.5; color: #5F5F66; max-width: 34em; }
.dh-form { display: flex; gap: 8px; padding: 8px; margin: 0; max-width: 560px; border-radius: 22px; background: #fff; border: 1px solid #E5E5EA; box-shadow: 0 18px 50px rgba(0, 0, 0, .09); }
.dh-form:focus-within { border-color: #0071E3; box-shadow: 0 0 0 3px rgba(0, 113, 227, .15), 0 18px 50px rgba(0, 0, 0, .09); }
.dh-form input { flex: 1; min-width: 0; border: 0; font: inherit; font-size: 18px; padding: 14px 16px; background: transparent; outline: 0; color: #1D1D1F; }
.dh-form .go { flex: 0 0 auto; padding: 14px 22px; border-radius: 15px; border: 0; background: #0071E3; color: #fff; font: inherit; font-weight: 700; font-size: 16px; cursor: pointer; }
.dh-form .go:hover { background: var(--blue-dark, #0062C4); }
.dh-tags { display: flex; gap: 8px; margin: 14px 0 0; flex-wrap: wrap; }
.dh-tags a { padding: 8px 13px; border-radius: 999px; border: 1px solid #E5E5EA; font-size: 13.5px; color: #3A3A3F; background: #fff; text-decoration: none; }
.dh-tags a:hover { border-color: #0071E3; color: #0071E3; }
.dh-trust { margin: 18px 0 0; font-size: 13.5px; color: #8A8A90; display: flex; gap: 8px; align-items: center; }
.dh-trust i { width: 3px; height: 3px; border-radius: 50%; background: #C7C7CC; }
.dh-proof { display: flex; gap: 28px; margin-top: 40px; padding-top: 24px; border-top: 1px solid #ECECF1; }
.dh-proof div b { display: block; font-size: 22px; letter-spacing: -.02em; }
.dh-proof div small { font-size: 13px; color: #7A7A80; }

/* the window */
.dh-stage { position: relative; height: 620px; }
.dh-win {
	position: absolute; left: 0; right: -20px; top: 40px; height: 560px; border-radius: 18px; overflow: hidden;
	background: #fff; box-shadow: 0 40px 100px rgba(20, 30, 60, .18), 0 0 0 1px rgba(0, 0, 0, .06);
}
/*
 * The lean and the drift belong to the wrapper, not the window: the ATS and
 * PDF · Word badges sit inside it too, so they share the window's angle and
 * move with it instead of hanging flat in front of a tilted screen. The
 * pivot is the window's own left-hand middle (it starts 40px down and is
 * 560px tall).
 */
.dh-tilt {
	position: absolute; inset: 0;
	transform: perspective(1600px) rotateY(-6deg) rotateX(2deg); transform-origin: 0 320px;
	animation: float 9s ease-in-out infinite;
}
.dh-wbar { height: 40px; display: flex; align-items: center; gap: 7px; padding: 0 14px; border-bottom: 1px solid #EEF0F3; background: #FAFAFC; }
.dh-wbar i { width: 10px; height: 10px; border-radius: 50%; background: #E5E5EA; }
.dh-url { margin-left: 12px; flex: 1; height: 22px; border-radius: 7px; background: #F0F1F5; font-size: 11px; color: #8A8A90; display: flex; align-items: center; padding: 0 10px; }
.dh-wbody { display: grid; grid-template-columns: 215px 1fr; height: 520px; }
.dh-wform { padding: 18px 18px 0; border-right: 1px solid #EEF0F3; background: #fff; }
.dh-wl { margin: 10px 0 5px; font-size: 8.5px; letter-spacing: .14em; font-weight: 700; color: #8A8A90; text-transform: uppercase; }
.dh-wi { height: 30px; border-radius: 9px; background: #F5F5F7; font-size: 12px; display: flex; align-items: center; padding: 0 10px; margin-bottom: 6px; color: #1D1D1F; }
.dh-wi.is-on { background: #fff; box-shadow: 0 0 0 2px rgba(0, 113, 227, .35); }
.dh-cur { width: 1.5px; height: 14px; background: #0071E3; margin-left: 3px; animation: dh-blink 1s steps(2) infinite; }
@keyframes dh-blink { 50% { opacity: 0; } }
.dh-wtones { display: flex; gap: 5px; margin-bottom: 6px; }
.dh-wtones span { display: inline-flex; align-items: center; justify-content: center; line-height: 1; min-height: 22px; padding: 0 8px; border-radius: 999px; background: #F5F5F7; font-size: 10.5px; }
.dh-wtones .on { background: #111; color: #fff; }
.dh-wta { border-radius: 9px; background: #F5F5F7; padding: 10px; }
.dh-wta .l { height: 5px; border-radius: 3px; background: #DADCE2; margin: 5px 0; }
.dh-wta .w2 { width: 80%; } .dh-wta .w3 { width: 55%; }
.dh-wprev { position: relative; padding: 22px 26px; background: linear-gradient(180deg, #F5F6FA, #EEF0F5); }
.dh-wsheet { background: #fff; border-radius: 6px; box-shadow: 0 14px 40px rgba(20, 30, 60, .14); padding: 24px 26px; height: 380px; overflow: hidden; }
.dh-wsheet .n { font-weight: 800; font-size: 19px; margin: 0; letter-spacing: -.02em; }
.dh-wsheet .r { font-size: 8.5px; letter-spacing: .14em; color: #7A7A80; margin: 3px 0 10px; text-transform: uppercase; }
.dh-wsheet .rule { height: 1px; background: #E5E5EA; margin-bottom: 10px; }
.dh-wsheet .h { font-size: 8.5px; letter-spacing: .16em; font-weight: 700; color: #8A8A90; margin: 10px 0 5px; text-transform: uppercase; }
.dh-wsheet .l { height: 5px; border-radius: 3px; background: #E9E9EE; margin: 5px 0; }
.dh-wsheet .w2 { width: 85%; } .dh-wsheet .w3 { width: 60%; }
.dh-wsheet .s { display: flex; justify-content: space-between; font-size: 10.5px; margin: 5px 0 3px; }
.dh-wsheet .s span { color: #8A8A90; }
/* the dock stays inside the preview pane whatever the pane's width: the
   pills may shrink and clip, the blue button never leaves the dock */
.dh-wdock { position: absolute; left: 18px; right: 18px; bottom: 16px; display: flex; align-items: center; gap: 4px; padding: 6px; border-radius: 999px; background: rgba(255, 255, 255, .85); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 10px 30px rgba(20, 30, 60, .12); border: 1px solid rgba(255, 255, 255, .9); overflow: hidden; box-sizing: border-box; }
.dh-wdock span { display: inline-flex; align-items: center; justify-content: center; line-height: 1; min-height: 26px; flex: 0 1 auto; min-width: 0; overflow: hidden; padding: 0 8px; border-radius: 999px; background: #F2F4F8; font-size: 9px; letter-spacing: .08em; font-weight: 600; text-transform: uppercase; }
.dh-wdock b { display: inline-flex; align-items: center; justify-content: center; line-height: 1; min-height: 28px; flex: 0 0 auto; margin-left: auto; padding: 0 12px; border-radius: 999px; background: #0071E3; color: #fff; font-size: 11px; white-space: nowrap; }
/*
 * The two badges: frosted glass like the dock, a round mark on the left
 * (a progress ring for the ATS score, a disc for the file formats) and two
 * lines of text. Both share one shape; the colour tells them apart.
 */
.dh-badge {
	position: absolute; display: flex; align-items: center; gap: 12px; padding: 10px 16px 10px 10px; border-radius: 18px;
	background: rgba(255, 255, 255, .8); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
	border: 1px solid rgba(255, 255, 255, .95); white-space: nowrap;
	box-shadow: 0 0 0 6px var(--dh-glow, rgba(30, 158, 68, .08)), 0 18px 40px -14px rgba(20, 30, 60, .35);
}
.dh-badge b { display: block; color: #1D1D1F; font-size: 14px; line-height: 1.2; }
.dh-badge small { display: block; font-size: 12px; color: #6E6E73; line-height: 1.3; margin-top: 2px; }
.dh-badge.a { right: -30px; top: 8px; --dh-glow: rgba(30, 158, 68, .09); }
.dh-badge.c { left: -20px; bottom: 24px; --dh-glow: rgba(0, 113, 227, .09); }
/* each badge also drifts on its own, off the window's beat, so they read as
   floating just above the screen. The translate property is used, so the
   ATS badge's own entrance (a transform) is left untouched. */
.dh-badge.a { animation: dh-bob 6s ease-in-out infinite; }
.dh-badge.c { animation: dh-bob 7.5s ease-in-out -2.5s infinite; }
@keyframes dh-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
@media (prefers-reduced-motion: reduce) { .dh-badge.a, .dh-badge.c, .dh-tilt { animation: none; } }
.dh-ring { --p: 96; flex: 0 0 auto; width: 42px; height: 42px; border-radius: 50%; background: conic-gradient(#1E9E44 calc(var(--p) * 1%), #E6EAEF 0); display: grid; place-items: center; }
.dh-ring i { width: 32px; height: 32px; border-radius: 50%; background: #fff; display: grid; place-items: center; font-style: normal; font-weight: 700; font-size: 12px; color: #1E9E44; }
.dh-disc { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 50%; background: linear-gradient(160deg, #2F8CFF, #0057FF); color: #fff; display: grid; place-items: center; box-shadow: 0 6px 14px -6px rgba(0, 87, 255, .6); }
@media (prefers-reduced-motion: reduce) { .dh-cur { animation: none; } }
@media (max-width: 1100px) {
	.dh-grid { grid-template-columns: 1fr; gap: 40px; }
	.hero.dh h1 { font-size: 54px; }
	.dh-stage { height: 600px; max-width: 700px; margin: 0 auto; width: 100%; }
	.dh-win { right: 0; }
	.dh-tilt { transform: none; }
	.dh-badge.a { right: 0; }
	.dh-badge.c { left: 0; }
}
@media (max-width: 700px) { .hero.dh { display: none; } }

/* "finished" shimmers: the violet-to-blue gradient is twice as wide as the
   word and slides across it, so the colour flows through the letters. */
.hero.dh h1 span, .mh-title span {
	background-image: linear-gradient(90deg, #6E56CF 0%, #0071E3 30%, #8FD0FF 45%, #0071E3 60%, #6E56CF 80%, #6E56CF 100%);
	background-size: 200% 100%;
	-webkit-background-clip: text; background-clip: text; color: transparent;
	animation: bond-shimmer 4s linear infinite;
}
@keyframes bond-shimmer { from { background-position: 0% 50%; } to { background-position: -200% 50%; } }
@media (prefers-reduced-motion: reduce) { .hero.dh h1 span, .mh-title span { animation: none; } }

/* The window shows a resume being made: the job title is typed, the form
   fills in, then the sheet writes itself section by section, and the dock
   confirms it fits one page. The script (theme.js) sets the phases; without
   it — or with reduced motion — everything simply shows. */
.dh-stage.is-anim .dh-f,
.dh-stage.is-anim .dh-s { opacity: 0; transform: translateY(6px); transition: opacity .35s ease, transform .35s ease; }
.dh-stage.is-anim .dh-s.l { transform: none; clip-path: inset(0 100% 0 0); transition: clip-path .45s ease, opacity .2s ease; }
.dh-stage.is-anim.is-form .dh-f { opacity: 1; transform: none; transition-delay: calc(var(--i) * 90ms); }
.dh-stage.is-anim.is-sheet .dh-s { opacity: 1; transform: none; clip-path: inset(0 0 0 0); transition-delay: calc(var(--i) * 140ms); }
.dh-stage.is-anim .dh-fit { opacity: .35; transform: scale(.96); transition: opacity .3s ease, transform .3s ease, box-shadow .3s ease; }
.dh-stage.is-anim.is-done .dh-fit { opacity: 1; transform: none; box-shadow: 0 0 0 6px rgba(0, 113, 227, .18); }
.dh-stage.is-anim .dh-badge.a { opacity: 0; transform: translateY(8px) scale(.96); transition: opacity .4s ease, transform .4s ease; }
.dh-stage.is-anim.is-done .dh-badge.a { opacity: 1; transform: none; }
.dh-stage.is-anim.is-fade .dh-wsheet, .dh-stage.is-anim.is-fade .dh-wform { opacity: 0; transition: opacity .5s ease; }
.dh-stage .dh-wsheet, .dh-stage .dh-wform { transition: opacity .5s ease; }
/* the sheet slides its content up as it grows, like a page being written */
.dh-stage.is-anim .dh-wsheet .dh-s { will-change: opacity, transform; }

/* ---------------------------------------------- labels centred in buttons */
/*
 * Every button, pill and switch centres its label on both axes: the label
 * sits in a flex box rather than on a text baseline, so a taller line-height
 * or uneven padding never pushes it off centre.
 */
/* the header button and the Menu toggle are left out here: each is shown or
   hidden by the phone breakpoint, and a display set here, later in the
   file, overrode that — the blue button squeezed into a phone header and
   the Menu toggle turned up on a desktop. They are centred in their own
   rules instead. */
.btn, .foot-btn, .dh-tags a, .mh-tags a, .dh-form button, .mh-form button,
.arc-btn, .pagination a, .pagination span, .cta, .searchform button, input[type="submit"], button.button {
	display: inline-flex; align-items: center; justify-content: center; line-height: 1.2; text-align: center; box-sizing: border-box;
}
.btn[hidden], .dh-tags a[hidden], .mh-tags a[hidden], .cta[hidden] { display: none; }

/* ------------------------------------------------ job-title suggestions */

.occ-form { position: relative; }
.occ-pop {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	right: 0;
	z-index: 30;
	list-style: none;
	margin: 0;
	padding: 6px;
	background: rgba(255, 255, 255, .97);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	border: 1px solid #E5E5EA;
	border-radius: 18px;
	box-shadow: 0 24px 60px rgba(0, 0, 0, .14);
	text-align: left;
}
.occ-pop[hidden] { display: none; }
.occ-pop li {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 11px 14px;
	border-radius: 12px;
	cursor: pointer;
	font-size: 16px;
	color: #1D1D1F;
}
.occ-pop li i { flex: 0 0 auto; width: 10px; height: 10px; border-radius: 50%; }
.occ-pop li span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.occ-pop li b { font-weight: 700; }
.occ-pop li small { flex: 0 0 auto; font-size: 12.5px; color: #86868B; }
.occ-pop li:hover, .occ-pop li.is-on { background: #F0F6FE; }
@media (max-width: 700px) {
	.occ-pop li { font-size: 15px; padding: 12px; }
	.occ-pop li small { display: none; }
}

/* The job suggestions open over what follows (the moving job names), not
   under it: the hero clips sideways only, and sits above the next section
   while its list is open. */
.hero.dh, .mh { overflow-x: clip; overflow-y: visible; }
.hero.dh:has(.occ-pop:not([hidden])), .mh:has(.occ-pop:not([hidden])) { position: relative; z-index: 40; }

/* Header, 2026, phones: after the older phone rules so these win. */
@media (max-width:900px){
	.main-nav{top:68px;left:12px;right:12px;border:1px solid var(--hair);border-radius:22px;padding:10px;box-shadow:0 30px 60px -30px rgba(15,23,42,.35)}
	.main-nav ul{flex-direction:column;gap:4px;padding:0;border:0;box-shadow:none;background:none}
	.main-nav li{display:block}
	.main-nav a{display:flex;justify-content:flex-start;height:46px;padding:0 16px;border-radius:14px;font-size:16px}
}