/* ===== Who We Help pages (page-scoped, .wwh). Design mockup v1, 2026-09-30. =====
   Same vocabulary as the approved How It Works page (DESIGN-SYSTEM 4.8): hairline
   panels, 20px corners, numbered gold rings, short gold rule above each heading,
   real dark surfaces. Nothing in premium.css changes. */

.wwh {
	--w-max: 75rem;                      /* 1200px: the hero's own width, so every section shares its edges */
	--w-pad: var(--space-xl, 2rem);
	--w-line: rgba(26, 26, 32, .10);
	--w-line-strong: rgba(26, 26, 32, .18);
	--w-band: #FFFFFF;
	--w-tint: #F8F6F2;
	--w-surface: #FFFFFF;
	--w-ink: #1A1A20;
	--w-body: #2C2C34; --w-soft: #4A4A55;
	--w-muted: #66625C;
	--w-link: #8B7232;
	--w-track: rgba(201, 168, 76, .8);
	--w-radius: 20px;
	--w-shadow: 0 1px 2px rgba(26, 26, 32, .04), 0 18px 40px -20px rgba(26, 26, 32, .18);
	--w-grain-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
	--w-grain-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (max-width: 599px) { .wwh { --w-pad: 1.25rem; } }

/* ---------- Section frame ---------- */
.wwh-sec {
	position: relative; isolation: isolate;
	padding: clamp(4rem, 8vw, 6rem) 0;
	background: var(--w-band); color: var(--w-body);
	font-family: var(--font-body); font-size: 1.125rem; line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}
.wwh-sec *, .wwh-sec *::before, .wwh-sec *::after { box-sizing: border-box; }
.wwh-sec--tint { background: var(--w-tint); }
.wwh-sec--tint::before, .wwh-sec--dark::before {
	content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
	background-image: var(--w-grain-dark); opacity: .05;
}
.wwh-sec--dark { background: #1A1A20; color: #D1CFCB; }
.wwh-sec--dark::before { background-image: var(--w-grain-light); opacity: .045; }
.wwh-sec--flush-top { padding-top: 0; }
.wwh-wrap { max-width: var(--w-max); margin: 0 auto; padding: 0 max(var(--w-pad), env(safe-area-inset-right)) 0 max(var(--w-pad), env(safe-area-inset-left)); }
.wwh-sec p { margin: 0 0 1rem; text-wrap: pretty; }
.wwh-sec li, .wwh-sec td, .wwh-sec dd { text-wrap: pretty; }
.wwh-sec ul, .wwh-sec ol { list-style: none; margin: 0; padding: 0; }
.wwh-sec li { list-style: none; margin: 0; }
.wwh-sec a { color: var(--w-link); }
.wwh-sec ::selection { background: rgba(201, 168, 76, .30); color: inherit; }
.wwh .wwh-nb, .wwh-nb { white-space: nowrap; color: inherit !important; font: inherit; }
.wwh .wwh-st, .wwh .wwh-tie, .wwh .wwh-ph, .wwh .wwh-clause { color: inherit !important; }
@media (min-width: 600px) { .wwh-tie { white-space: nowrap; } }
/* small words hold on to the next word only where the column is wide enough to afford it */
@media (min-width: 360px) and (max-width: 999px), (min-width: 1160px) { .wwh-st { white-space: nowrap; } }

/* Heading block: short gold rule, heading, one lead paragraph */
.wwh-head { max-width: 46rem; margin: 0 0 clamp(2rem, 4vw, 2.75rem); }
.wwh-sec h2 {
	position: static; margin: 0 0 1rem; padding: 0;
	font-family: var(--font-display); font-weight: 700; font-size: clamp(1.875rem, 3.6vw, 2.5rem); line-height: 1.1; letter-spacing: -0.015em;
	color: var(--w-ink); text-wrap: balance;
}
.wwh-sec h2::before { content: ''; display: block; width: 2.5rem; height: 2px; background: #C9A84C; margin-bottom: 1.25rem; }
.wwh-sec h2::after { content: none !important; }
.wwh-ask, .wwh .wwh-ask {
	margin: 0 0 0.75rem !important; font-family: var(--font-body); font-weight: 500; font-size: 1.125rem; line-height: 1.4; color: var(--w-body); max-width: 34rem; text-wrap: balance;
}
.wwh-ask > span { display: block; text-indent: -0.45em; }       /* the quote mark hangs, so the words share the heading's left edge */
.wwh-ask::before { content: ''; display: block; width: 2.5rem; height: 2px; background: #C9A84C; margin-bottom: 1.25rem; }
.wwh .wwh-ask + h2::before, .wwh .wwh-ask + .hivelaw-form-cta-block__heading::before { content: none !important; }
.wwh-cost .wwh-ask { color: #D1CFCB; }
/* closing: the ticked rings stand in for the gold dash */
.wwh .wwh-route--done + .wwh-ask::before { content: none; }
.wwh .wwh-ask + .hivelaw-form-cta-block__heading { margin-top: 0; }
.wwh-head > p .wwh-line + .wwh-line { margin-top: 0.625rem; }
.wwh-head > p:not(.wwh-ask) { margin: 0; font-size: clamp(1.125rem, 1.5vw, 1.25rem); line-height: 1.6; color: var(--w-body); }
.wwh-sec h3 { font-family: var(--font-display); color: var(--w-ink); margin: 0; }
.wwh-label {
	font-family: var(--font-display); font-weight: 600; font-size: 0.8125rem; letter-spacing: 0.09em; text-transform: uppercase; line-height: 1.5;
	color: var(--w-muted);
}
.wwh-arrow { width: 1rem; height: 1rem; flex: 0 0 auto; transition: transform .2s ease; }
.wwh-more {
	display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.375rem 0;
	font-family: var(--font-display); font-weight: 600; font-size: 1.0625rem; line-height: 1.3;
	color: var(--w-link); text-decoration: underline; text-decoration-color: rgba(139, 114, 50, .4); text-decoration-thickness: 1.5px; text-underline-offset: 0.24em;
}
.wwh-more:hover { text-decoration-color: #C9A84C; }
.wwh-more:hover .wwh-arrow { transform: translateX(3px); }

/* ---------- Shared: numbered ring ---------- */
.wwh-ring {
	position: relative; z-index: 1; flex: 0 0 auto;
	display: inline-flex; align-items: center; justify-content: center;
	width: 3rem; height: 3rem; border-radius: 50%;
	border: 1.5px solid #C9A84C; background: var(--w-ring-bg, var(--w-surface));
	font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; line-height: 1; color: var(--w-ink);
	font-variant-numeric: tabular-nums;
}
.wwh-ring--solid { background: #C9A84C; color: #1A1A20; }
.wwh-ring svg { width: 1.375rem; height: 1.375rem; }
.wwh-ring--icon { color: var(--w-link); background: radial-gradient(circle at 50% 35%, rgba(201, 168, 76, .12), rgba(201, 168, 76, 0) 70%); }

/* ---------- Opening (the site's own hero with form; everything here is page-scoped) ---------- */
/* band: one dark piece from the menu down, with paper grain and a soft light behind the three rings */
.wwh .hivelaw-breadcrumbs { background: #1A1A20; border-bottom: 0; position: relative; isolation: isolate; }
.wwh .hivelaw-breadcrumbs::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: var(--w-grain-light); opacity: .045; }
.wwh-body .hivelaw-hero { padding-top: clamp(1.25rem, 2.2vw, 1.75rem); padding-bottom: clamp(2.5rem, 5vw, 4rem); }
.wwh .hivelaw-breadcrumbs { padding-top: 0.875rem; padding-bottom: 0.5rem; }
.wwh .hivelaw-breadcrumbs a, .wwh .hivelaw-breadcrumbs .separator { color: #A8A5A0; }
.wwh .hivelaw-breadcrumbs .last { color: #F1EEE8; }
.wwh .hivelaw-hero__content, .wwh .hivelaw-breadcrumbs .hivelaw-container { max-width: var(--w-max); padding-left: var(--w-pad); padding-right: var(--w-pad); }
.wwh .hivelaw-breadcrumbs .hivelaw-container { max-width: var(--w-max); }
.wwh-body .hivelaw-hero { isolation: isolate; }
.wwh-body .hivelaw-hero::before { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: var(--w-grain-light); opacity: .045; }


/* layout: the copy column and the form panel share one top edge and one bottom edge */
@media (min-width: 961px) {
	.wwh-body .hivelaw-hero--with-form .hivelaw-hero__content { align-items: stretch; }
	.wwh-body .hivelaw-hero__copy { display: flex; flex-direction: column; justify-content: space-between; }
}
.wwh-hero__base { margin-top: 2.5rem; }
@media (min-width: 961px) {
	/* the headline sets on the lines the page asks for; the rings sit in the middle of the spare room;
	   the column's top and foot sit exactly on the form's top and foot */
	.wwh-body .hivelaw-hero__title { font-size: clamp(3.5rem, 6.1vw, 4.75rem); line-height: 1.02; }
	.wwh-body .hivelaw-hero__copy[style*="--h1-measure"] .wwh-h1-main { max-width: var(--h1-measure); text-wrap: wrap; }
	.wwh-hero__base { margin-top: auto; padding-top: 2.5rem; }
	.wwh-h1-kicker { margin-top: -0.22em; }
	.wwh-hero__base .wwh-signpost { margin-top: 0; padding-top: 1.8125rem; }
	.wwh-hero__base .wwh-signpost ul { margin-bottom: -0.375rem; flex-wrap: nowrap; }
}
@media (min-width: 961px) and (max-width: 1180px) {
	.wwh-signpost ul { gap: 0 0.875rem; }
	.wwh-signpost a { font-size: 0.875rem; }
}

/* headline */
.wwh-body .hivelaw-hero__title { text-wrap: balance; font-size: clamp(2.125rem, 3.2vw + 1.375rem, 4.25rem); line-height: 1.04; letter-spacing: -0.03em; max-width: none; margin-bottom: 1.75rem; }
.wwh-h1-kicker {
	display: block; margin-bottom: 0.875rem;
	font-family: var(--font-display); font-weight: 600; font-size: clamp(1.125rem, 1.5vw, 1.375rem); line-height: 1.3; letter-spacing: 0; text-transform: none;
	color: #C9A84C;
}
.wwh-h1-main { display: block; }
/* the page's one emphasis: the same gold underline the body uses for "no court" */
.wwh-h1-mark {
	background-image: linear-gradient(#C9A84C, #C9A84C); background-repeat: no-repeat; background-position: 0 100%; background-size: 100% 0.055em;
	padding-bottom: 0.06em; white-space: nowrap;
}
.wwh-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.wwh-body .hivelaw-hero__subtitle { text-wrap: balance; max-width: 36rem; margin-bottom: 0; font-size: clamp(1.125rem, 1.4vw, 1.25rem); line-height: 1.6; color: #C9C6C0; }
.wwh-sub-lead { color: #FFFFFF; font-weight: 500; }

/* the three moments, named: three stops on one dashed line, each a jump link to its row below */
.wwh-route { --r: 2.75rem; --row: 3.75rem; --gap: 1.25rem; position: relative; isolation: isolate; list-style: none; margin: 2.75rem 0 0; padding: 0; --w-ring-bg: #1A1A20; }
.wwh-route li { list-style: none; margin: 0; position: relative; }
.wwh-route::before { content: ''; position: absolute; z-index: -1; left: calc(var(--r) / 2); top: 0.75rem; bottom: calc(var(--row) / 2); border-left: 1px dashed rgba(201, 168, 76, .85); transform: translateX(-0.5px); }
.wwh-route:not(.wwh-route--done)::after {
	content: ''; position: absolute; z-index: -2; pointer-events: none; left: -22%; top: -18%; width: 95%; height: 136%;
	background: radial-gradient(ellipse 50% 50% at 42% 52%, rgba(201, 168, 76, .12), rgba(201, 168, 76, 0) 72%);
}
.wwh-route__now { display: flex; align-items: center; gap: var(--gap); height: 1.5rem; margin-bottom: 0.375rem !important; font-size: 0.9375rem; line-height: 1; color: #B5B2AC; }
.wwh-route__now::before { content: ''; flex: 0 0 auto; width: 0.625rem; height: 0.625rem; border-radius: 50%; background: #C9A84C; margin: 0 calc(var(--r) / 2 - 0.3125rem); box-shadow: 0 0 0 4px #1A1A20; }
.wwh-route a, .wwh-route__item { display: flex; align-items: center; gap: var(--gap); min-height: var(--row); text-decoration: none; color: #F1EEE8; }
.wwh-route .wwh-ring { width: var(--r); height: var(--r); font-size: 1.125rem; font-weight: 700; color: #F1EEE8; border-color: #C9A84C; transition: box-shadow .25s ease, border-width .15s ease; }
.wwh-route__name { display: block; font-family: var(--font-display); font-weight: 600; font-size: clamp(1.25rem, 1.7vw, 1.4375rem); line-height: 1.25; letter-spacing: -0.005em; color: #F1EEE8; }
.wwh-route__go { flex: 0 0 auto; width: 1.125rem; height: 1.125rem; margin-left: -0.5rem; color: #C9A84C; opacity: .7; transition: transform .2s ease, opacity .2s ease; }
.wwh-route a:hover .wwh-ring, .wwh-route a:focus-visible .wwh-ring { border-width: 2px; box-shadow: 0 0 0 6px rgba(201, 168, 76, .2); }
.wwh-route a:hover .wwh-route__name { text-decoration: underline; text-decoration-color: #C9A84C; text-decoration-thickness: 2px; text-underline-offset: 0.22em; }
.wwh-route a:hover .wwh-route__go { transform: translateX(4px); opacity: 1; }
.wwh-route a:focus-visible { outline: 2px solid #C9A84C; outline-offset: 4px; border-radius: 10px; }

/* "Not quite you?" */
.wwh-signpost { margin: 2rem 0 0; padding-top: 1.375rem; border-top: 1px solid rgba(241, 238, 232, .14); font-size: 0.9375rem; line-height: 1.4; }
.wwh-signpost__q { display: block; margin-bottom: 0.25rem; font-size: 0.9375rem; color: #B5B2AC; }
.wwh-signpost ul { display: flex; flex-wrap: wrap; gap: 0 1.25rem; list-style: none; margin: 0; padding: 0; }
.wwh-signpost li { list-style: none; margin: 0; }
.wwh-signpost a {
	display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.375rem 0; white-space: nowrap;
	color: #E4E1DB; font-weight: 500; text-decoration: underline; text-decoration-color: rgba(201, 168, 76, .7); text-underline-offset: 0.24em;
}
.wwh-signpost .wwh-arrow { color: #C9A84C; }
.wwh-signpost a:hover { color: #FFFFFF; text-decoration-color: #C9A84C; }
.wwh-signpost a:hover .wwh-arrow { transform: translateX(3px); }
.wwh-signpost .wwh-arrow { width: 0.875rem; height: 0.875rem; }

/* the form panel (shared site piece; adjusted for these pages only, its own file is untouched) */
.wwh-body .hivelaw-hero__form-panel { border-radius: var(--w-radius); border-color: rgba(241, 238, 232, .16); background: #222228; padding: 2rem; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .6); }
.wwh-body .hivelaw-hero__form-title { font-size: 1.375rem; }
.wwh-body .hivelaw-hero__form-panel .gfield_label, .wwh-body .hivelaw-hero__form-panel .gfield label { font-size: 0.8125rem !important; color: rgba(255, 255, 255, .86) !important; }
.wwh-body .hivelaw-hero__form-panel .name_first label, .wwh-body .hivelaw-hero__form-panel .name_last label { font-size: 0.75rem !important; color: rgba(255, 255, 255, .6) !important; }
.wwh-body .hivelaw-hero__form-panel .gfield_required, .wwh-body .hivelaw-hero__form-panel .gfield_required * { color: #C9C6C0 !important; }
.wwh-body .hivelaw-hero__form-panel { display: flex; flex-direction: column; }
.wwh-body .hivelaw-hero__form-panel .gform_wrapper { margin: 0 !important; }
.wwh-body .hivelaw-hero__form-panel .ginput_container input::placeholder { font-size: 0.9375rem; }
.wwh-body .hivelaw-hero__form-panel .hivelaw-form-call { margin: auto 0 0; }
.wwh-body .hivelaw-hero__form-panel .ginput_container input, .wwh-body .hivelaw-hero__form-panel .ginput_container select { min-height: 3rem; font-size: 1rem !important; }
.wwh-body .hivelaw-hero__form-panel .gform_footer input[type="submit"], .wwh-body .hivelaw-hero__form-panel .gform_button { min-height: 3.5rem; font-size: 1.0625rem; }
.wwh-body:not(.wwh-form-light) .hivelaw-hero__form-panel .ginput_container input, .wwh-body:not(.wwh-form-light) .hivelaw-hero__form-panel .ginput_container select {
	background-color: #2C2C34 !important; color: #F0EEE9 !important; border: 1.5px solid rgba(241, 238, 232, .22) !important;
}
.wwh-body:not(.wwh-form-light) .hivelaw-hero__form-panel .ginput_container input::placeholder { color: #A8A5A0 !important; }
.wwh-body.wwh-form-light .hivelaw-hero__form-panel .ginput_container input::placeholder { color: #666666 !important; }
.wwh-body .hivelaw-hero__form-panel .ginput_container input:focus, .wwh-body .hivelaw-hero__form-panel .ginput_container select:focus { border-color: #C9A84C !important; outline: 2px solid rgba(201, 168, 76, .35); outline-offset: 1px; }
.wwh-body .hivelaw-hero__form-title { color: #F1EEE8 !important; }
.wwh-form-note { margin: 0.375rem 0 0.5rem; font-size: 0.9375rem; line-height: 1.5; color: #C9C6C0; text-wrap: balance; }
.wwh-body .hivelaw-hero__form-panel .hivelaw-hero__form-rule { display: none; }
.wwh-body .hivelaw-hero__form-panel .gform_footer { margin-top: 1rem !important; }
.wwh-body .hivelaw-hero__form-panel li.gfield { margin-top: 0.75rem !important; }
.wwh-body .hivelaw-hero__form-panel li.gfield:first-child { margin-top: 0.25rem !important; }
.wwh-hero-phone { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.125rem 0.625rem; margin: 1.125rem 0 0; padding-top: 1.125rem; border-top: 1px solid rgba(241, 238, 232, .12); font-size: 0.9375rem; line-height: 1.4; color: rgba(255, 255, 255, .78); }
@media (min-width: 641px) {
	.wwh-body .hivelaw-hero__form-panel li.gfield, .wwh-body .hivelaw-hero__form-panel .gform_footer { padding-right: 0 !important; }
}
.wwh-hero-phone a { font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; color: #C9A84C; text-decoration: none; white-space: nowrap; }

/* phone and small tablet */
.wwh-hero-call { display: none; }
@media (max-width: 699px) {
	.wwh-hero__base { margin-top: 0; }
	/* the same line on a phone: smaller rings, each row a tap target with its chevron at the edge */
	.wwh-route { --r: 2rem; --row: 3rem; --gap: 0.875rem; margin-top: 1.75rem; }
	.wwh-route li:nth-child(n+3) a::before { content: ''; position: absolute; top: 0; left: calc(var(--r) + var(--gap)); right: 0; border-top: 1px solid rgba(241, 238, 232, .1); }
	.wwh-route a:active { background: rgba(255, 255, 255, .05); }
	.wwh-route .wwh-ring { font-size: 0.9375rem; border-width: 1.25px; }
	.wwh-route__name { flex: 1; font-size: 1.0625rem; }
	.wwh-route__go { margin-left: 0; }
	/* a real button for a thumb, before the form */
	.wwh-hero-call {
		display: grid; grid-template-columns: minmax(0, 1fr) 2.75rem; align-items: center; column-gap: 1rem;
		margin: 1.5rem 0 0; padding: 0.875rem 0.875rem 0.875rem 1.125rem; text-decoration: none;
		border: 1px solid rgba(241, 238, 232, .16); border-radius: 16px; background: #222228;
	}
	.wwh-hero-call .wwh-label { grid-column: 1; color: #C9C6C0; font-family: var(--font-body); font-weight: 400; font-size: 0.9375rem; letter-spacing: 0; text-transform: none; }
	.wwh-body .hivelaw-hero__form-panel .hivelaw-form-call { display: none; }
	.wwh-hero-call__num { grid-column: 1; font-family: var(--font-display); font-weight: 700; font-size: 1.625rem; line-height: 1.15; letter-spacing: -0.015em; color: #FFFFFF; white-space: nowrap; }
	.wwh-hero-call__icon { grid-column: 2; grid-row: 1 / span 2; width: 2.75rem; height: 2.75rem; padding: 0.75rem; border-radius: 50%; background: #C9A84C; color: #1A1A20; }
	.wwh-signpost { margin-top: 1.5rem; padding-top: 1.25rem; }
	.wwh-signpost ul { display: block; }
	.wwh-signpost li + li { border-top: 1px solid rgba(241, 238, 232, .1); }
	.wwh-signpost a { display: flex; justify-content: space-between; min-height: 2.75rem; padding: 0; font-size: 0.9375rem; text-decoration: none; }
	.wwh .hivelaw-form-cta-block__subhead, .wwh .hivelaw-form-cta-block__body { text-wrap: balance; }
	.wwh-body .hivelaw-hero__form-panel { padding: 1.5rem 1.25rem 1.375rem; }
}

/* arrival: the copy rises once, the underline and the line draw, the rings land one by one. Off for reduced motion. */
@media (prefers-reduced-motion: no-preference) {
	html:has(.wwh) { scroll-behavior: smooth; }
	/* 2026-10-07 (Shawn's OK): the headline and subtitle slide up but are visible from the first frame. Fading them in
	   from invisible delayed the page's main-content paint by about 2 seconds on a slow phone. */
	.wwh-hero__top > * { animation: wwh-slide .8s cubic-bezier(.2, .7, .2, 1) both; }
	.wwh-hero__base > * { animation: wwh-rise .8s cubic-bezier(.2, .7, .2, 1) both; }
	.wwh-hero__top > :nth-child(2) { animation-delay: .08s; }
	.wwh-hero__base > :nth-child(1) { animation-delay: .16s; }
	.wwh-hero__base > :nth-child(2) { animation-delay: .22s; }
	.wwh-hero__base > :nth-child(3) { animation-delay: .28s; }
	.wwh-h1-mark { animation: wwh-mark .7s cubic-bezier(.2, .7, .2, 1) .55s both; }
	.wwh-route:not(.wwh-route--done)::before { animation: wwh-down 1.2s cubic-bezier(.4, 0, .2, 1) .5s both; }
	.wwh-route:not(.wwh-route--done) .wwh-ring { animation: wwh-pop .5s cubic-bezier(.3, 1.4, .5, 1) both; }
	.wwh-route:not(.wwh-route--done) li:nth-child(2) .wwh-ring { animation-delay: .75s; }
	.wwh-route:not(.wwh-route--done) li:nth-child(3) .wwh-ring { animation-delay: 1.1s; }
	.wwh-route:not(.wwh-route--done) li:nth-child(4) .wwh-ring { animation-delay: 1.45s; }
}
@keyframes wwh-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes wwh-slide { from { transform: translateY(12px); } to { transform: none; } }
@keyframes wwh-mark { from { background-size: 0 0.055em; } to { background-size: 100% 0.055em; } }
@keyframes wwh-down { from { clip-path: inset(0 -2px 100% -2px); } to { clip-path: inset(0 -2px 0 -2px); } }
@keyframes wwh-pop { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }

/* landing on a moment from the opening: its row warms briefly */
.wwh-moment[id] { scroll-margin-top: 5.75rem; }
.wwh-moment:target { animation: wwh-arrive 2.4s ease-out both; }
.wwh-moment:target .wwh-ring { border-width: 2px; box-shadow: 0 0 0 6px rgba(201, 168, 76, .22); }
@keyframes wwh-arrive { 0%, 25% { background-color: rgba(201, 168, 76, .16); } 100% { background-color: rgba(201, 168, 76, 0); } }

/* ---------- The moments: one panel, three ruled rows on one line (round 2) ----------
   The line runs down through the rings at every width: dashed with open rings where nothing is
   in place, solid gold with filled rings once the plan is. Rows are as tall as their own text,
   so there are no empty holes, and phone, tablet and desktop are the same structure. */
.wwh-sec { --w-here: var(--w-band); }
.wwh-sec--tint { --w-here: var(--w-tint); }
.wwh-moments {
	--m-pad: 1.375rem; --m-top: 1.625rem; --m-ring: 3rem;
	border: 1px solid var(--w-line); border-radius: var(--w-radius); overflow: hidden;
	background: var(--w-tint); --w-ring-bg: var(--w-tint);
}
.wwh-sec--tint .wwh-moments { background: var(--w-band); --w-ring-bg: var(--w-band); }
.wwh-moments--after, .wwh-sec--tint .wwh-moments--after { background: var(--w-surface); --w-ring-bg: var(--w-surface); box-shadow: var(--w-shadow); }
.wwh-moments { --m-gap: 0.875rem; --m-dot: 1.25rem; }
.wwh-moments__head { position: relative; display: flex; align-items: center; margin: 0 !important; padding: 1rem var(--m-pad); border-bottom: 1px solid var(--w-line); color: var(--w-body); font-family: var(--font-display); font-weight: 600; font-size: 1.0625rem; line-height: 1.3; }
/* the line starts at the panel's own mark, as the opening's line starts at "Today" */
.wwh-moments__head::after { content: ''; position: absolute; left: calc(var(--m-pad) + var(--m-ring) / 2); top: calc(50% + var(--m-dot) / 2); bottom: 0; width: 2px; background: repeating-linear-gradient(to bottom, var(--w-dashgold, #B08A34) 0 5px, transparent 5px 10px); transform: translateX(-1px); }
.wwh-moments--after .wwh-moments__head::after { background: #C9A84C; }
.wwh-moments__head::before {
	content: ''; flex: 0 0 auto; width: var(--m-dot); height: var(--m-dot); border-radius: 50%; border: 2px dashed var(--w-dashgold, #B08A34);
	margin: 0 calc(var(--m-ring) / 2 - var(--m-dot) / 2 + var(--m-gap)) 0 calc(var(--m-ring) / 2 - var(--m-dot) / 2);
}
.wwh-moments--after .wwh-moments__head { color: var(--w-ink); }
.wwh-moments--after .wwh-moments__head::before { border: 2px solid #C9A84C; background: #C9A84C; }
.wwh-moments__row { display: block; }
.wwh-moment {
	position: relative; display: grid; grid-template-columns: var(--m-ring) minmax(0, 1fr); column-gap: 1rem;
	grid-template-areas: "node title" "node text" "node next"; align-items: baseline;
	padding: var(--m-top) var(--m-pad) calc(var(--m-top) + 0.125rem);
}
/* hairlines start at the text, so the line through the rings is never cut (both panels) */
.wwh-moment > .wwh-moment__title::before { content: ''; position: absolute; top: 0; right: 0; left: calc(var(--m-pad) + var(--m-ring) + var(--m-gap)); border-top: 1px solid var(--w-line); }
.wwh-moments--after .wwh-moments__head { border-bottom: 0; }
.wwh-moment::before {
	content: ''; position: absolute; left: calc(var(--m-pad) + var(--m-ring) / 2); top: 0; bottom: 0; width: 0;
	width: 2px; background: repeating-linear-gradient(to bottom, var(--w-dashgold, #B08A34) 0 5px, transparent 5px 10px); transform: translateX(-1px);
}
.wwh-moments--after .wwh-moment::before { background: #C9A84C; }
.wwh-moment:first-child::before { top: 0; }
.wwh-moments:not(:has(.wwh-moments__head)) .wwh-moment:first-child::before { top: calc(var(--m-top) + var(--m-ring) / 2); }
.wwh-moment:last-child::before { bottom: auto; height: calc(var(--m-top) + var(--m-ring) / 2); }
.wwh-moment__node { grid-area: node; position: relative; z-index: 1; }
.wwh-moment__node .wwh-ring { width: var(--m-ring); height: var(--m-ring); }
.wwh-moment__title { grid-area: title; font-weight: 600; font-size: 1.25rem; line-height: 1.25; margin: 0 0 0.5rem !important; text-wrap: balance; }
.wwh-moment__text { grid-area: text; margin: 0 !important; font-size: 1.125rem; line-height: 1.6; }
.wwh-sec a.wwh-moment__next {
	grid-area: next; justify-self: start; display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.75rem; margin: 0.375rem 0 -0.625rem; 
	font-family: var(--font-display); font-weight: 600; font-size: 1.0625rem; line-height: 1.2; color: var(--w-ink); text-decoration: none;
}
.wwh-moment__next span { text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 38%, transparent); text-decoration-thickness: 1px; text-underline-offset: 0.26em; }
.wwh-moment__next:active { opacity: .7; }
/* a small filled gold dot: the "plan in place" half of the signature, answering the open mark beside "Without a plan" */
.wwh-moment__next::before { content: ''; flex: 0 0 auto; width: 0.625rem; height: 0.625rem; border-radius: 50%; background: #C9A84C; }
.wwh-moment__next .wwh-arrow { color: var(--w-ink); width: 1.0625rem; height: 1.0625rem; stroke-width: 2; }
.wwh-moment__next:hover span, .wwh-moment__next:focus-visible span { text-decoration: underline; text-decoration-color: currentColor; text-decoration-thickness: 1.5px; text-underline-offset: 0.24em; }
.wwh-moment__next:focus-visible { outline: 2px solid var(--w-link); outline-offset: 4px; border-radius: 6px; }
.wwh-moment__next:hover .wwh-arrow { transform: translateY(3px); }
.wwh-sec .wwh-moments__foot { text-wrap: balance; }
.wwh-moments__foot { margin: 0 !important; padding: 1.5rem var(--m-pad) 1.625rem; border-top: 1px solid var(--w-line); font-size: 1.125rem; line-height: 1.6; color: var(--w-body); }
.wwh-moments__foot strong { font-family: var(--font-display); font-weight: 600; color: var(--w-ink); }
@media (min-width: 768px) { .wwh-moments__foot strong { display: block; } }
.wwh-sec .wwh-split--m > .wwh-head p:not(.wwh-ask) { text-wrap: balance; }
.wwh-q { display: block; text-wrap: wrap; }
@media (min-width: 1160px) and (max-width: 1199px) {
	/* small laptops: the left column is narrow, so its type steps down to keep each question on one line */
	.wwh-sec .wwh-split--m > .wwh-head h2 { font-size: 2rem; }
	.wwh-sec .wwh-split--m > .wwh-head p:not(.wwh-ask) { font-size: 1rem; }
	.wwh-sec .wwh-split--m > .wwh-head .wwh-ask { font-size: 1rem; }
}
/* a heading with no paragraph under it owns its column */
@media (min-width: 1160px) { .wwh-sec .wwh-split--m > .wwh-head--solo h2 { font-size: 2.625rem; line-height: 1.06; letter-spacing: -0.02em; } }
@media (min-width: 1200px) { .wwh-sec .wwh-split--m > .wwh-head--solo h2 { font-size: clamp(2.75rem, 3.7vw, 3.375rem); } }
.wwh-q:first-of-type { margin-top: 0.375rem; }
.wwh-q:last-of-type { margin-bottom: 0.375rem; }
.wwh-hl--phrase { white-space: normal !important; }
.wwh-hl {
	font-weight: 600; color: var(--w-ink); white-space: nowrap; text-decoration: none; padding-bottom: 0.1em;
	background-image: linear-gradient(#C9A84C, #C9A84C); background-repeat: no-repeat; background-position: 0 100%; background-size: 100% 2px;
	-webkit-box-decoration-break: clone; box-decoration-break: clone;
}
@media (max-width: 599px) {
	/* Phones: no box, so the text gets the width. The rows sit straight on the page. */
	.wwh-moments, .wwh-sec--tint .wwh-moments, .wwh-moments--after, .wwh-sec--tint .wwh-moments--after {
		--m-pad: 0rem; --m-ring: 1.875rem; --m-top: 1.375rem; --m-gap: 0.5rem;
		border: 0; border-top: 1px solid var(--w-line); border-radius: 0; background: transparent; box-shadow: none; --w-ring-bg: var(--w-here);
	}
	.wwh-moment { column-gap: 0.5rem; }
	.wwh-sec a.wwh-moment__next { display: flex; justify-self: stretch; min-height: 3rem; margin: 0.75rem 0 -0.5rem; border-top: 1px dashed var(--w-line-strong); }
	.wwh-moment__next .wwh-arrow { margin-left: auto; }
	.wwh-moments:not(.wwh-moments--after) .wwh-moments__foot { --foot-drop: 2.85rem; padding-top: 2rem; }
	.wwh-moment__node .wwh-ring { font-size: 0.9375rem; }
	.wwh-moment__text { font-size: 1.0625rem; }
	.wwh-moments__foot { padding: 1.375rem 0 0; font-size: 1.0625rem; }
	.wwh-split--m > .wwh-head p:not(.wwh-ask) { font-size: 1.0625rem; }
}
@media (min-width: 600px) { .wwh-moments { --m-pad: 1.75rem; --m-top: 1.75rem; --m-gap: 1.25rem; --m-ring: 2.75rem; } .wwh-moment { column-gap: 1.25rem; } }
@media (min-width: 960px) {
	.wwh-moments { --m-pad: 2rem; --m-top: 2rem; --m-gap: 1.25rem; }
	.wwh-moment__title { font-size: 1.4375rem; letter-spacing: -0.005em; text-wrap: wrap; }
	.wwh-moment__text { max-width: 38rem; font-size: 1.1875rem; }
	.wwh-moments__foot { padding-left: calc(var(--m-pad) + var(--m-ring) + var(--m-gap)); }
	.wwh-split--m > .wwh-head p:not(.wwh-ask) { font-size: 1.125rem; line-height: 1.65; }
}
@media (min-width: 960px) and (max-width: 1159px) {
	/* not enough room for two columns yet (sideways iPads up to the iPad mini): heading above, panel below, panel the full width as on a tablet */
	.wwh-wrap.wwh-split.wwh-split--m { grid-template-columns: minmax(0, 1fr); }
	.wwh-wrap.wwh-split.wwh-split--m > .wwh-head { position: static; margin-bottom: 2.25rem; }
}
/* ---------- "Without a plan" (round 3): nothing is in place, so nothing holds it. No box at any width:
   the three moments sit bare on the page, on one unbroken dashed line. The answer panel further down
   ("With your plan") is the one that is held: a raised panel, a solid line, filled rings. ---------- */
.wwh-moments:not(.wwh-moments--after), .wwh-sec--tint .wwh-moments:not(.wwh-moments--after) {
	--m-pad: 0rem; border: 0; border-radius: 0; background: transparent; box-shadow: none; overflow: visible; --w-ring-bg: var(--w-here);
}
.wwh-moments:not(.wwh-moments--after) .wwh-moments__head { border-bottom: 0; padding-top: 0; padding-bottom: 1.25rem; }
.wwh-moments:not(.wwh-moments--after) .wwh-moments__head::after { top: 1.5rem; }
.wwh-moments:not(.wwh-moments--after) .wwh-moment:last-child::before { bottom: 0; height: auto; }
.wwh-moments:not(.wwh-moments--after) .wwh-moments__foot {
	--foot-drop: 3.4rem;
	position: relative; border-top: 0; padding: 2.5rem 0 0 calc(var(--m-ring) + var(--m-gap)); margin-top: 0 !important;
}
/* the line ends in a small open mark beside the closing words: still open, nothing in place */
.wwh-moments:not(.wwh-moments--after) .wwh-moments__foot::before {
	content: ''; position: absolute; left: calc(var(--m-ring) / 2 - 0.375rem); top: var(--foot-drop); width: 0.75rem; height: 0.75rem; border-radius: 50%;
	border: 2px solid var(--w-dashgold, #B08A34); background: var(--w-here);
}
.wwh-moments:not(.wwh-moments--after) .wwh-moments__foot::after {
	content: ''; position: absolute; left: calc(var(--m-ring) / 2); top: 0; height: var(--foot-drop); width: 2px; background: repeating-linear-gradient(to bottom, var(--w-dashgold, #B08A34) 0 5px, transparent 5px 10px); transform: translateX(-1px);
}
.wwh-moments:not(.wwh-moments--after) .wwh-moments__foot { font-size: 1.125rem; line-height: 1.55; }
.wwh-moments:not(.wwh-moments--after) .wwh-moments__foot strong { display: block; margin-bottom: 0.5rem; font-family: var(--font-body); font-weight: 400; font-size: clamp(1.5rem, 2.3vw, 1.875rem); line-height: 1.3; letter-spacing: -0.015em; color: var(--w-ink); text-wrap: balance; }
.wwh-moments:not(.wwh-moments--after) .wwh-moment:last-child { padding-bottom: calc(var(--m-top) + 0.75rem); }
@media (min-width: 600px) {
	.wwh-moments:not(.wwh-moments--after) { --m-ring: 3.25rem; --m-gap: 1.5rem; --m-top: 2.25rem; }
	.wwh-moments:not(.wwh-moments--after) .wwh-moment { column-gap: var(--m-gap); }
	.wwh-moments:not(.wwh-moments--after) .wwh-ring { font-size: 1.3125rem; }
	.wwh-moments:not(.wwh-moments--after) .wwh-moment__title { font-size: clamp(1.5rem, 2vw, 1.6875rem); letter-spacing: -0.01em; margin-bottom: 0.625rem !important; }
	.wwh-moments:not(.wwh-moments--after) .wwh-moments__head { font-size: 1.125rem; }
}
/* ---------- "With your plan": the held panel. On phones it stays a panel (the bare rows above are the contrast). ---------- */
@media (max-width: 599px) {
	.wwh-moments--after, .wwh-sec--tint .wwh-moments--after {
		--m-pad: 0.75rem; --m-ring: 1.875rem; --m-gap: 0.625rem; --m-top: 1.375rem; --m-dot: 0.875rem;
		border: 1px solid var(--w-line); border-radius: 16px; background: var(--w-surface); box-shadow: var(--w-shadow); overflow: hidden; overflow: clip; --w-ring-bg: var(--w-surface);
	}
	.wwh-moments--after .wwh-moment { column-gap: var(--m-gap); }
	/* the label stays pinned to the top of the panel while the panel is being read, so "With your plan" never scrolls away */
	.wwh-moments--after .wwh-moments__head {
		padding: 0.625rem var(--m-pad); min-height: calc(var(--m-ring) + 1.25rem); position: sticky; top: var(--wwh-pin, 0px); z-index: 3;
		background: linear-gradient(var(--w-line), var(--w-line)) no-repeat 100% 100% / calc(100% - var(--m-pad) - var(--m-ring) - var(--m-gap)) 1px, var(--w-surface);
	}
	.wwh-moments--after .wwh-moment:first-child > .wwh-moment__title::before { content: none; }
	/* while pinned, the dot becomes the ring of the moment being read (set by the script; a plain dot without it) */
	.wwh-moments--after .wwh-moments__head::before { display: grid; place-items: center; box-sizing: border-box; font: 700 0.9375rem/1 var(--font-display); color: #1A1A20; transition: width .28s ease, height .28s ease, margin .28s ease; }
	.wwh-moments--after .wwh-moments__head[data-n] { --m-dot: var(--m-ring); }
	.wwh-moments--after .wwh-moments__head[data-n]::before { content: attr(data-n); box-shadow: 0 0 0 6px rgba(201, 168, 76, .2); }
	.wwh-moments--after .wwh-moments__head > span::after {
		content: ''; position: absolute; top: 100%; right: 0; left: calc(var(--m-pad) + var(--m-ring) + var(--m-gap)); height: 0.875rem; pointer-events: none;
		background: linear-gradient(to bottom, var(--w-surface), transparent);
	}
	.wwh-moments--after .wwh-moments__head::after { transition: opacity .25s ease; }
	.wwh-moments--after .wwh-moments__head.is-end::after { opacity: 0; }
}
/* the two panels are a matched pair: same ring, same name size, same text edge */
@media (min-width: 600px) {
	.wwh-moments--after { --m-ring: 3.25rem; --m-gap: 1.5rem; --m-top: 2.25rem; }
	.wwh-moments--after .wwh-moment { column-gap: var(--m-gap); }
	.wwh-moments--after .wwh-ring { font-size: 1.3125rem; }
	.wwh-moments--after .wwh-moment__title { font-size: clamp(1.5rem, 2vw, 1.6875rem); letter-spacing: -0.01em; margin-bottom: 0.625rem !important; }
	.wwh-moments--after .wwh-moments__head { font-size: 1.125rem; padding-top: 1.125rem; padding-bottom: 1.125rem; }
}
@media (min-width: 960px) { .wwh-moments--after { --m-pad: 2.25rem; } }
/* beside the heading column, the panel's label sits on the same line as the reader's question */
@media (min-width: 1160px) { .wwh-split--m .wwh-moments--after .wwh-moments__head { padding-top: 1.25rem; padding-bottom: 1.25rem; } }
@media (min-width: 1200px) { .wwh-split--m .wwh-moments--after .wwh-moments__head { padding-top: 1.375rem; padding-bottom: 1.375rem; } }
/* in each moment, the sentence that carries the takeaway reads first: full ink, a touch heavier */
.wwh-moment__text .wwh-line { color: var(--w-soft, var(--w-body)); }
.wwh-moment__text .wwh-line--key { color: var(--w-ink); font-weight: 500; }
.wwh-lead-in { max-width: 46rem; }

/* ---------- Two-column table (what people assume / will a trust mess things up), round 2 ----------
   An editorial table, not a card: a firm rule on top, their words on the left in the heading face,
   the answer on the right, hairlines between. Its two columns sit on the page's own grid, so "their words"
   start on the page edge and "what really happens" starts where the neighbouring sections' right column starts. */
.wwh-table-wrap { background: transparent; border: 0; border-radius: 0; box-shadow: none; overflow: visible; }
.wwh-table, .wwh-table thead, .wwh-table tbody { display: block; width: 100%; margin: 0; border: 0; background: transparent; }
.wwh-table tr { display: grid; grid-template-columns: minmax(0, 1fr); background: transparent; border: 0; }
.wwh-table th, .wwh-table td { display: block; text-align: left; border: 0; background: transparent; padding: 0; }
.wwh-table { position: relative; padding: 2px 0; }
.wwh-table::before, .wwh-table::after { content: ''; position: absolute; left: 0; right: 0; height: 2px; background: var(--w-rule, #1A1A20); }
.wwh-table::before { top: 0; }
.wwh-table::after { bottom: 0; }
.wwh-table thead tr { border-bottom: 1px solid var(--w-line-strong); }
.wwh-table tbody tr { position: relative; }
/* the row being read: the short gold rule (the same mark that opens every section) draws at the start of its line */
.wwh-table tbody tr::before { content: ''; position: absolute; top: -1px; left: 0; width: 2.5rem; height: 2px; background: #C9A84C; transform: scaleX(0); transform-origin: left center; transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
.wwh-table tbody tr.is-now::before { transform: none; }
/* the one piece of good news: its answer cell carries a flat warm tint, flush from hairline to hairline (a table's own device, not a card) */
.wwh-table tbody tr.is-good::after {
	content: ''; position: absolute; z-index: -1;
	top: 0; bottom: 0; left: calc(-1 * var(--w-pad)); right: calc(-1 * var(--w-pad));
	background: rgba(201, 168, 76, .10);
}
/* the header row is a quiet key to the two columns, not a second heading */
.wwh-table thead th { padding: 0.875rem 0; font-family: var(--font-body); font-weight: 400; font-size: 1rem; line-height: 1.4; letter-spacing: 0; text-transform: none; color: var(--w-muted); }
.wwh-table tbody tr { --pt: 2rem; --pb: 2.125rem; padding: var(--pt) 0 var(--pb); border-bottom: 1px solid var(--w-line); }
.wwh-table tbody tr:last-child { border-bottom: 0; }
/* their words: something said. The reader's voice is set in the plain body face at regular weight, as the
   questions above the headings are; the firm's answer carries the darkest ink and the one bold phrase. */
.wwh-table tbody th {
	font-family: var(--font-body); font-weight: 400; font-size: clamp(1.25rem, 1.9vw, 1.5625rem); line-height: 1.32; letter-spacing: -0.012em; color: var(--w-voice, #57534D);
	text-wrap: balance; text-indent: -0.45em;
}
.wwh-table tbody td { position: relative; font-size: 1.125rem; line-height: 1.6; color: var(--w-ink); max-width: 38rem; }
/* each sentence of an answer sits on its own line: one idea at a time */
.wwh-sec .wwh-line { display: block; text-wrap: balance; }
.wwh-line + .wwh-line { margin-top: 0.75rem; }
/* the belief beside the answer being read steps forward to full ink; the others stay soft */
.wwh-table tbody th { transition: color .5s ease; }
.wwh-table tbody tr.is-now th { color: #45423F; }
.wwh-table__good { position: absolute; width: 1.5rem; height: 1.5rem; color: #8B7232; stroke-width: 3; }
@media (min-width: 700px) {
	.wwh-table tr { grid-template-columns: minmax(0, 18.5rem) minmax(0, 1fr); column-gap: 2.75rem; align-items: baseline; }
	.wwh-table tbody th { font-size: 1.375rem; }
	.wwh-table tbody tr { --pt: 2.25rem; --pb: 2.5rem; }
	.wwh-table tbody tr.is-good::after { grid-area: 1 / 2 / 2 / 3; top: calc(-1 * var(--pt)); bottom: calc(-1 * var(--pb)); left: -3.5rem; right: 0; }
	/* the tick hangs in the gutter, so the answers keep one left edge */
	.wwh-table__good { left: -2.25rem; right: auto; top: 0.12em; }
}
@media (min-width: 960px) {
	.wwh-table tr { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); column-gap: clamp(3rem, 6vw, 5.5rem); }
	.wwh-table tbody tr { --pt: 2.75rem; --pb: 3rem; }
	.wwh-table tbody th { font-size: clamp(1.375rem, 2vw, 1.6875rem); }
	.wwh-table tbody td { font-size: 1.1875rem; }
	.wwh-line + .wwh-line { margin-top: 1rem; }
}
@media (max-width: 699px) {
	/* phone and tablet: their words, a quiet label, then the answer */
	.wwh-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
	.wwh-table tbody tr { row-gap: 0.75rem; --pt: 1.625rem; --pb: 1.75rem; }
	/* stacked: the tick follows the words it confirms */
	.wwh-table .is-good .wwh-line:first-child { display: flex; align-items: center; flex-wrap: wrap; }
	.wwh-table .is-good .wwh-table__good { position: static; order: 2; margin-left: 0.625rem; width: 1.375rem; height: 1.375rem; }
	.wwh-table tbody td::before {
		content: attr(data-label); display: block; margin-bottom: 0.25rem;
		font-family: var(--font-body); font-weight: 400; font-size: 1rem; line-height: 1.4; color: var(--w-muted);
	}

}

/* ---------- What it costs (dark) ----------
   The page's own two columns: the price sits on the left, where every heading sits, and stays in view;
   what it buys is one ruled list on the right (no box, no cells), read top to bottom. Gold is kept to the
   ticks and the one link. */
.wwh-cost { overflow: hidden; overflow: clip; border-top: 1px solid rgba(201, 168, 76, .38); border-bottom: 1px solid rgba(201, 168, 76, .38); }
.wwh-cost h2 { color: #FFFFFF; }
.wwh-cost .wwh-cost__grid { row-gap: 3rem; }
.wwh-cost .wwh-cost__head { margin-bottom: 0; }
.wwh-cost .wwh-cost__head > .wwh-cost__lead { font-size: clamp(1.125rem, 1.5vw, 1.25rem); line-height: 1.6; color: #D1CFCB; margin: 0 0 0.625rem !important; text-wrap: balance; }
.wwh-cost__lead .wwh-nb { display: block; margin-top: 1.5rem; }
.wwh-price { margin: 0 !important; position: relative; isolation: isolate; }
/* a faint warm glow sits behind the figure and travels with it */
.wwh-price__figure { width: fit-content; }
@media (min-width: 1000px) { .wwh-price__figure { position: relative; } .wwh-price__figure::before { content: ''; position: absolute; z-index: -1; top: 50%; left: 50%; width: 34rem; height: 22rem; transform: translate(-50%, -50%); pointer-events: none; background: radial-gradient(closest-side, rgba(201, 168, 76, .10), rgba(201, 168, 76, 0)); } }
.wwh-price__figure {
	display: block; font-family: var(--font-display); font-weight: 700; font-size: clamp(3.75rem, 7.4vw, 6rem); line-height: 0.92; letter-spacing: -0.04em;
	color: #FFFFFF; font-variant-numeric: tabular-nums; margin-left: -0.04em;
}
.wwh-cost .wwh-cost__terms { display: grid; row-gap: 0.5rem; margin: 2.25rem 0 0 !important; padding: 0 !important; max-width: 26rem; }
.wwh-cost__terms li { font-size: 1.125rem; line-height: 1.5; color: #D1CFCB; text-wrap: balance; }
.wwh-cost__terms li:first-child { font-weight: 500; font-size: 1.1875rem; line-height: 1.4; color: #F1EEE8; }
.wwh-cost__more { margin: 1rem 0 0 !important; }
.wwh-cost__more .wwh-more { min-height: 2.75rem; }

.wwh-cost .wwh-more { color: #C9A84C; text-decoration-color: rgba(201, 168, 76, .5); }
/* OPTION A (Shawn's pick, 2026-10-01): the price statement runs across the top; what it buys sits below in three short
   columns that share one set of row lines. The top row sits on the same three columns as the list. */
.wwh-cost .wwh-cost__grid { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 3rem; }
.wwh-cost .wwh-cost__head { max-width: none; }
.wwh-cost { --c-gap: clamp(2rem, 3.4vw, 3rem); }
@media (min-width: 700px) {
	.wwh-cost .wwh-cost__head {
		display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(2.5rem, 6vw, 4.5rem);
		grid-template-rows: auto auto auto auto 1fr;
		grid-template-areas: "h2 h2" "lead terms" "price terms" "more terms" ". terms";
	}
	.wwh-cost .wwh-cost__terms li:first-child { font-weight: 400; font-size: 1.625rem; line-height: 1.2; letter-spacing: -0.015em; margin-bottom: 0.25rem; }
	.wwh-cost .wwh-cost__head > .wwh-ask { grid-column: 1 / -1; }
	.wwh-cost .wwh-cost__head > h2 { grid-area: h2; }
	.wwh-cost .wwh-cost__head > .wwh-cost__lead { grid-area: lead; align-self: baseline; }
	.wwh-cost .wwh-cost__head > .wwh-price { grid-area: price; align-self: baseline; }
	.wwh-cost .wwh-cost__head > .wwh-cost__terms { grid-area: terms; align-self: baseline; margin: 0 !important; max-width: none; }
	.wwh-cost .wwh-cost__head > .wwh-cost__more { grid-area: more; align-self: start; margin: 1.25rem 0 0 !important; }
}
@media (min-width: 1000px) {
	.wwh-cost__body > .wwh-cost__foot > svg { margin-left: -0.25rem; }
	.wwh-cost .wwh-cost__head { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: none; column-gap: var(--c-gap); grid-template-areas: "h2 h2 h2" "lead terms ." "price terms more"; }
	.wwh-cost .wwh-cost__head > .wwh-price { align-self: baseline; }
	/* right of the price: ONE block across the second and third columns, on the text edge of the list columns below it.
	   It sits against the bottom, so the figure is read first and the link lands on the price's own baseline. */
	.wwh-cost .wwh-cost__head > .wwh-cost__lead { align-self: baseline; }
	.wwh-cost .wwh-cost__head > .wwh-cost__terms { grid-area: auto; grid-row: 2 / 4; grid-column: 2 / 4; align-self: baseline; margin: 0 !important; padding: 0 0 0 2.5rem !important; row-gap: 0.625rem; }
	.wwh-cost .wwh-cost__head > .wwh-cost__more { grid-area: auto; grid-column: 2 / 4; grid-row: 3; align-self: baseline; margin: 0 !important; padding-left: 2.5rem; }
	/* the reassurance is a calm large statement, the way the "three moments" section closes */
	.wwh-cost .wwh-cost__terms li:first-child { font-weight: 400; font-size: clamp(1.75rem, 2.5vw, 2.25rem); line-height: 1.2; letter-spacing: -0.02em; margin-bottom: 0.375rem; color: #F1EEE8 !important; }
	.wwh-cost .wwh-cost__terms li:first-child .wwh-line { color: #F1EEE8 !important; }
	.wwh-price__figure { font-size: clamp(4.75rem, 7.4vw, 7rem); }
	.wwh-cost .wwh-cost__terms li { font-size: 1.1875rem; }
	.wwh-cost .wwh-cost__terms .wwh-line { text-wrap: balance; }
	.wwh-cost .wwh-cost__grid { row-gap: 3.5rem; }
	.wwh-cost__body { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(5, auto); grid-auto-flow: column; column-gap: var(--c-gap); }
	.wwh-cost__body > .wwh-col, .wwh-cost__body > .wwh-col > .wwh-checks { display: contents; }
	.wwh-cost .wwh-cost__body::after { grid-column: 1 / -1; grid-row: 6; }
	.wwh-cost .wwh-cost__body .wwh-checks__label { align-self: end; }
	.wwh-cost .wwh-checks li, .wwh-cost .wwh-cost__body > .wwh-cost__foot { font-size: 1.0625rem; padding: 1.25rem 0 1.5rem; }
	.wwh-cost .wwh-item__help { font-size: 1rem; }
}
@media (min-width: 1240px) {
	.wwh-cost .wwh-checks li, .wwh-cost .wwh-cost__body > .wwh-cost__foot { font-size: 1.125rem; }
	.wwh-cost .wwh-item__help { font-size: 1.0625rem; }
}
@media (max-width: 999px) {
	.wwh-col + .wwh-col { margin-top: 0.625rem; border-top: 1px solid rgba(241, 238, 232, .22); }
	.wwh-cost { --c-band: #1A1A20; }
	/* no line of its own under the pinned head: rows dissolve under a short strip of the band colour, so two lines never meet */
	.wwh-cost .wwh-checks__label { position: sticky; top: 0; z-index: 2; isolation: isolate; padding-top: 1.125rem; padding-bottom: 0.625rem; background: var(--c-band); }
	.wwh-cost .wwh-checks__label::after { content: ''; position: absolute; top: 100%; right: 0; left: 0; height: 1rem; pointer-events: none; background: linear-gradient(to bottom, var(--c-band), transparent); }
	.wwh-cost .wwh-checks__label::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: var(--w-grain-light); opacity: .045; }
	.wwh-cost .wwh-checks__label + .wwh-checks > li:first-child { padding-top: 0.75rem; }
	.wwh-cost__body > .wwh-cost__foot { margin-top: 0.625rem !important; }
}
/* the list opens and closes on a firm rule, as the "what families assume" table does */
.wwh-cost__panel { --c-gut: 2.5rem; display: flex; flex-direction: column; }
.wwh-cost__panel::before, .wwh-cost__body::after { content: ''; display: block; height: 2px; background: rgba(241, 238, 232, .86); }
.wwh-cost__panel::before { order: 1; }
.wwh-cost__panel > .wwh-cost__panel-head { order: 0; }
.wwh-cost__panel > .wwh-cost__body { order: 2; }
.wwh-cost__panel > .wwh-cost__foot { order: 3; }
/* two short groups, each under its own quiet label */
.wwh-checks__label { margin: 0 !important; padding: 1.75rem 0 0.375rem var(--c-gut); font-family: var(--font-display); font-size: 1.25rem; line-height: 1.3; font-weight: 600; letter-spacing: -0.005em; color: #F1EEE8; }
.wwh-checks__label + .wwh-checks > li:first-child::before { content: none; }
.wwh-cost .wwh-checks__label + .wwh-checks > li:first-child { padding-top: 0.75rem; }
.wwh-cost__body > .wwh-col:first-child > .wwh-checks__label { padding-top: 1.125rem; }
@media (min-width: 1000px) { .wwh-cost__body > .wwh-col > .wwh-checks__label { padding-top: 1.25rem; padding-bottom: 0.5rem; } }
.wwh-cost .wwh-hl { color: #F1EEE8; font-weight: 500; }
.wwh-cost .wwh-cost__lead .wwh-hl { color: #F1EEE8 !important; }
.wwh-cost__panel-head { margin: 0 !important; padding: 0 0 0.875rem; font-family: var(--font-display); font-weight: 600; font-size: 1.5rem; line-height: 1.3; letter-spacing: -0.005em; color: #F1EEE8; }
.wwh-checks { display: grid; grid-template-columns: minmax(0, 1fr); }
.wwh-checks li {
	position: relative; display: grid; grid-template-columns: 1.5rem minmax(0, 1fr); column-gap: 1rem; align-items: start;
	padding: 1.125rem 0 1.1875rem; font-size: 1.125rem; line-height: 1.5; color: #F1EEE8;
}
.wwh-checks li::before { content: ''; position: absolute; top: 0; right: 0; left: 0; border-top: 1px solid rgba(241, 238, 232, .22); }
.wwh-checks svg { width: 1.5rem; height: 1.5rem; margin: 0.0625rem 0 0 -0.25rem; color: #C9A84C; stroke-width: 2; }
.wwh-checks li > span { text-wrap: balance; }
/* an item is its name, then one plain line saying what it does */
.wwh-item__name { display: block; font-weight: 500; }
@media (hover: hover) { .wwh-cost .wwh-item__help, .wwh-cost .wwh-item__help .wwh-line { transition: color .25s ease; } .wwh-cost .wwh-checks li:hover .wwh-item__help, .wwh-cost .wwh-checks li:hover .wwh-item__help .wwh-line, .wwh-cost__body > .wwh-cost__foot:hover .wwh-item__help .wwh-line { color: #F1EEE8 !important; } }
.wwh-item__help { display: block; margin-top: 0.375rem; font-size: 1.0625rem; line-height: 1.5; color: #C9C6C0; }
.wwh-cost .wwh-item__help .wwh-line + .wwh-line { margin-top: 0.4375rem; }
.wwh-cost .wwh-cost__terms .wwh-line + .wwh-line { margin-top: 0.25rem; }
/* long items: one clause per line where the line is long enough to hold a clause */
.wwh-clause { display: block; text-wrap: balance; }
.wwh-ph { display: inline; }
@media (min-width: 700px) and (max-width: 999px) { .wwh-ph { display: inline-block; max-width: 100%; vertical-align: top; } }
.wwh-cost .wwh-item__help, .wwh-cost .wwh-item__help .wwh-line { text-wrap: pretty; }
.wwh-clause + .wwh-clause { margin-top: 0.0625rem; }

.wwh-ledger { display: grid; grid-template-columns: minmax(0, 1fr); }
.wwh-ledger li {
	display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); column-gap: 1.25rem; align-items: baseline;
	padding: 1.25rem 0 1.25rem var(--c-gut); border-top: 1px solid rgba(241, 238, 232, .22);
	font-size: 1.125rem; line-height: 1.5; color: #F1EEE8;
}
.wwh-ledger__price { font-family: var(--font-display); font-weight: 700; font-size: 2rem; line-height: 1; letter-spacing: -0.02em; color: #FFFFFF; font-variant-numeric: tabular-nums; }
.wwh-ledger__price::before { content: '+'; margin-right: 0.125em; color: #C9A84C; font-weight: 600; }
/* a note under the closing rule, on the list's text edge */
.wwh-cost__foot { position: relative; display: grid; grid-template-columns: 1.5rem minmax(0, 1fr); column-gap: 1rem; align-items: start; margin: 0 !important; padding: 1.5rem 0 0 var(--c-gut); font-size: 1.125rem; line-height: 1.5; color: #C9C6C0; }
.wwh-cost__foot > svg { display: none; }
.wwh-cost__foot > span { grid-column: 1 / -1; text-wrap: balance; }
/* inside the grid it is a row like the others: a hairline above, a gold "+" where the others carry a tick */
.wwh-cost__body > .wwh-cost__foot { padding: 1.125rem 0 1.25rem; align-self: start; }
.wwh-cost__body > .wwh-cost__foot::before { content: ''; position: absolute; top: 0; right: 0; left: 0; border-top: 1px dashed rgba(241, 238, 232, .42); }
.wwh-cost__body > .wwh-cost__foot > svg { display: block; box-sizing: border-box; width: 1.5rem; height: 1.5rem; padding: 0.1875rem; margin: 0.0625rem 0 0 0; border: 1px dashed rgba(201, 168, 76, .8); border-radius: 50%; color: #C9A84C; stroke-width: 2.25; }
.wwh-cost__body > .wwh-cost__foot .wwh-item__name { color: #C9C6C0; font-weight: 400; }
.wwh-cost__body > .wwh-cost__foot > span { grid-column: 2; }
.wwh-cost__foot .wwh-line { color: #C9C6C0; }
.wwh-cost__panel > .wwh-cost__foot .wwh-line:first-child { color: #F1EEE8; font-weight: 500; }
.wwh-cost__foot .wwh-line + .wwh-line { margin-top: 0.25rem; }
@media (min-width: 960px) {
	.wwh-checks li { font-size: 1.1875rem; padding: 1.25rem 0 1.3125rem; }
}
@media (max-width: 599px) {
	.wwh-cost__panel { --c-gut: 2.25rem; }
	.wwh-checks li { grid-template-columns: 1.375rem minmax(0, 1fr); column-gap: 0.875rem; padding: 1rem 0 1.0625rem; font-size: 1.0625rem; }
	.wwh-cost__body > .wwh-cost__foot { grid-template-columns: 1.375rem minmax(0, 1fr); column-gap: 0.875rem; padding: 1rem 0 1.0625rem; }
	.wwh-cost__body > .wwh-cost__foot > svg { width: 1.375rem; height: 1.375rem; }
	.wwh-checks svg { width: 1.375rem; height: 1.375rem; }
	.wwh-cost__foot { font-size: 1.0625rem; }
	.wwh-ledger li { grid-template-columns: 5.75rem minmax(0, 1fr); column-gap: 1rem; }
	.wwh-ledger__price { font-size: 1.625rem; }
}

/* ---------- How it works: OPTION A (Shawn's pick, 2026-10-02) ----------
   Shawn on the list version: "this one should be redesigned as well. especially on the left side, which feels bunched
   together." Now: the three answers to the reader's question run ACROSS the top with room around each; the four steps
   run LEFT TO RIGHT under one firm rule, on shared rows so numerals, names and text line up across. Plain numerals:
   the gold ring belongs to the three moments only. Step 1 is where every reader starts, so its numeral is the gold one.
   Under 700px the steps are one ruled list down the page. */
.wwh-steps { --s-n: 1.75rem; --s-gap: 0.75rem; --c-gap: clamp(2rem, 3.4vw, 3rem); display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 2.5rem; }
.wwh-steps__side > .wwh-head { margin-bottom: 1.75rem; }
/* the three answers: plain ruled rows on phones, three columns from 900px (no icons; the answers are the content) */
.wwh-notes li { position: relative; padding: 1.25rem 0 1.375rem; font-size: 1.125rem; line-height: 1.5; }
.wwh-notes li::before { content: ''; position: absolute; top: 0; right: 0; left: 0; border-top: 1px solid var(--w-line-mid, rgba(26, 26, 32, .16)); }
.wwh-notes p { margin: 0 !important; }
.wwh-sec .wwh-notes .wwh-line { color: var(--w-soft, var(--w-body)); text-wrap: pretty; }
.wwh-sec .wwh-notes .wwh-line + .wwh-line { margin-top: 0.375rem; }
/* each answer opens on the answer itself: full ink, a touch heavier, a size up */
.wwh-sec .wwh-note__lead .wwh-line { color: var(--w-ink); font-weight: 500; font-size: 1.25rem; line-height: 1.5; text-wrap: pretty; }
/* an answer that is one long sentence: regular weight, so its underlined phrase is the one strong part */
.wwh-sec .wwh-note__lead--solo .wwh-line { font-weight: 400; }
.wwh-sec .wwh-note__rest { margin-top: 0.625rem !important; }
.wwh-steplist { position: relative; padding: 2px 0; }
.wwh-steplist::before, .wwh-steplist::after { content: ''; position: absolute; left: 0; right: 0; height: 2px; background: var(--w-rule, #1A1A20); }
.wwh-steplist::before { top: 0; }
.wwh-steplist::after { bottom: 0; }
.wwh-step {
	position: relative; display: grid; grid-template-columns: var(--s-n) minmax(0, 1fr); column-gap: var(--s-gap); grid-template-areas: "n name" ". text"; align-items: baseline;
	padding: 1.5rem 0 1.75rem;
}
.wwh-step + .wwh-step { border-top: 1px solid var(--w-line-mid, rgba(26, 26, 32, .16)); }
/* a short gold mark at the start of the step's line, and its numeral in full ink: the step being read (phones), or the one under the pointer (wider) */
.wwh-step::before { content: ''; position: absolute; top: -1px; left: 0; width: 1rem; height: 2px; background: #C9A84C; transform: scaleX(0); transform-origin: left center; transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
.wwh-step:first-child::before { top: 0; }
.wwh-step__n { grid-area: n; font-family: var(--font-display); font-weight: 700; font-size: 1.625rem; line-height: 1; color: #6E6A64; transition: color .45s ease; }
/* step 1 is where every reader starts: the one numeral in gold */
.wwh-step--first .wwh-step__n { color: #6F5A22; }
@media (max-width: 699px) {
	.wwh-step.is-now::before { transform: none; }
}
.wwh-step__name { grid-area: name; font-weight: 600; font-size: 1.3125rem; line-height: 1.25; text-wrap: balance; }
.wwh-step__text { grid-area: text; margin: 0.625rem 0 0 !important; font-size: 1.125rem; line-height: 1.5; }
.wwh-sec .wwh-step__text .wwh-line { color: var(--w-soft, var(--w-body)); text-wrap: pretty; }
.wwh-sec .wwh-step__text .wwh-line--key { color: var(--w-ink); font-weight: 500; }
.wwh-sec .wwh-step__text .wwh-line + .wwh-line { margin-top: 0.4375rem; }
/* "Free." is the word this section leaves behind */
.wwh-sec .wwh-step__text .wwh-line--big { font-family: var(--font-display); font-size: 1.75rem; line-height: 1.2; font-weight: 600; letter-spacing: -0.01em; margin-top: 1rem !important; }
.wwh-sec .wwh-step__text .wwh-line--big .wwh-hl { font-weight: 600; padding-bottom: 0.08em; }
.wwh-steps__more { margin: -1rem 0 0 !important; padding-left: calc(var(--s-n) + var(--s-gap)); }
.wwh-sec .wwh-steps__more .wwh-more { font-size: 1.125rem; min-height: 2.75rem; color: #6F5A22; }
@media (max-width: 599px) { .wwh-steps .wwh-st { white-space: normal; } .wwh-sec .wwh-step__text .wwh-line { text-wrap: balance; } }
.wwh .wwh-nb .wwh-st, .wwh .wwh-hl:not(.wwh-hl--phrase) .wwh-st { white-space: nowrap; }
.wwh .wwh-hl:not(.wwh-hl--phrase) { white-space: nowrap; }
@media (min-width: 600px) and (max-width: 699px) {
	.wwh-steps { --s-n: 3.5rem; --s-gap: 1.25rem; }
	.wwh-step::before { width: 1.375rem; }
	.wwh-step { padding: 2rem 0 2.25rem; }
	.wwh-step__n { font-size: 2.5rem; }
	.wwh-step__name { font-size: 1.5rem; letter-spacing: -0.01em; }
}
@media (min-width: 700px) {
	/* the steps run across: two by two on tablets, four in a row on a computer */
	.wwh-steps { row-gap: 3.25rem; }
	.wwh-steplist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--c-gap); }
	/* shared rows (subgrid): numerals, names and the first line of text each sit on one line across */
	.wwh-step { grid-template-columns: minmax(0, 1fr); grid-template-areas: "n" "name" "text"; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; align-content: start; padding: 1.75rem 0 2.5rem; }
	.wwh-step + .wwh-step { border-top: 0; }
	.wwh-step:nth-child(n + 3) { border-top: 1px solid var(--w-line-mid, rgba(26, 26, 32, .16)); }
	.wwh-step::before { top: -0.5px; width: 2.75rem; height: 3px; }
	.wwh-step__n { font-size: 3rem; margin-bottom: 1.125rem; }
	.wwh-step__name { font-size: 1.375rem; letter-spacing: -0.01em; line-height: 1.2; }
	.wwh-step__text { margin-top: 0.875rem !important; font-size: 1.125rem; }
	.wwh-steps__more { margin-top: -1.5rem !important; padding-left: 0; }
}
@media (min-width: 700px) {
	/* at rest the short gold mark sits on step 1: start here */
	.wwh-step--first::before, .wwh-step.is-walk::before { transform: none; }
	.wwh-step.is-walk:not(.wwh-step--first) .wwh-step__n { color: var(--w-ink); }
	.wwh-steplist.is-prewalk .wwh-step--first:not(.is-walk)::before { transform: scaleX(0); }
}
@media (min-width: 700px) and (hover: hover) {
	.wwh-step:hover::before { transform: none; }
	.wwh-step:hover:not(.wwh-step--first) .wwh-step__n { color: var(--w-ink); }
	/* the step under the pointer steps forward: its softer sentences come up to full ink */
	.wwh-sec .wwh-step__text .wwh-line { transition: color .3s ease; }
	.wwh-sec .wwh-step:hover .wwh-step__text .wwh-line { color: var(--w-ink); }
}
@media (min-width: 700px) { .wwh-sec .wwh-step__text .wwh-line { text-wrap: balance; } .wwh-steplist .wwh-st, .wwh-steplist .wwh-tie { white-space: normal; } }
@media (max-width: 339px) { .wwh-sec .wwh-note__lead .wwh-line { font-size: 1.125rem; } }
/* three across only from the width where every answer's opening line fits on one line */
@media (min-width: 1000px) {
	/* three across on shared rows: the answers on one row, their detail on the next, so the detail lines up even where an answer wraps */
	.wwh-notes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto auto; column-gap: var(--c-gap); }
	.wwh-notes li { display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: 0; align-items: start; padding: 1.375rem 0 0; }
	.wwh-note__lead--solo { grid-row: span 2; }
	/* four answers (Landlords): two by two, so lines stay a comfortable length */
	.wwh-notes:has(> li:nth-child(4)) { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 0.5rem; }
	.wwh-notes .wwh-st { white-space: normal; }
}
@media (min-width: 1200px) {
	/* four in a row, from the width where the widest underlined phrase fits its column */
	.wwh-steplist { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.wwh-step { padding: 2rem 0 2.75rem; }
	.wwh-step:nth-child(n + 3) { border-top: 0; }
	.wwh-step__n { font-size: 3.25rem; }
	.wwh-sec .wwh-note__lead .wwh-line { font-size: 1.375rem; line-height: 1.5; }
	/* four narrow columns: lines simply fill, nothing is held together except the underlined phrases */
	.wwh-steplist .wwh-st, .wwh-steplist .wwh-tie { white-space: normal; }
}

/* ---------- Who you'll work with: OPTION A (Shawn's pick, 2026-10-02) ----------
   One section, no boxes. Melissa first (photo, name, what she does), the client's own words beside her; then three
   reviews as plain columns between two firm rules (upright type, no cards); the guarantee closes the section.
   The same words the shared attorney and reviews blocks print; restyled on these pages only (Shawn, 2026-10-01). */
.wwh-who { --c-gap: clamp(2rem, 3.4vw, 3rem); }
.wwh-who > .wwh-wrap > .wwh-head { margin-bottom: 2rem; }
.wwh-who__top { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); column-gap: 1.125rem; row-gap: 1.5rem; align-items: start; }
.wwh-who__photo { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 14px; box-shadow: 0 0 0 1px var(--w-line-mid, rgba(26, 26, 32, .16)); }
.wwh-who__bio { display: contents; }
.wwh-sec .wwh-who__name { align-self: end; margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 1.625rem; line-height: 1.15; letter-spacing: -0.01em; color: var(--w-ink); }
.wwh-sec .wwh-who__role { grid-column: 2; align-self: start; margin: -1.125rem 0 0 !important; font-size: 1.0625rem; line-height: 1.4; color: var(--w-muted); }
.wwh-sec .wwh-who__text, .wwh-sec .wwh-roles { grid-column: 1 / -1; margin: 0 !important; font-size: 1.125rem; line-height: 1.5; }
@media (max-width: 339px) { .wwh-sec .wwh-who__text { font-size: 1rem; } }
.wwh-sec .wwh-who__text .wwh-line { color: var(--w-soft, var(--w-body)); text-wrap: pretty; }
.wwh-sec .wwh-who__text .wwh-line + .wwh-line { margin-top: 0.4375rem; }
.wwh-sec .wwh-who__text .wwh-line--key { color: var(--w-ink); font-weight: 500; }
.wwh-who__photo { grid-row: 1 / 3; }
.wwh-pull { grid-column: 1 / -1; margin: 0.5rem 0 0; padding: 1.75rem 0 0; border-top: 1px solid var(--w-line-mid, rgba(26, 26, 32, .16)); }
.wwh-sec .wwh-pull blockquote { margin: 0; padding: 0; border: 0; background: none; quotes: none; }
.wwh-sec .wwh-pull blockquote::before { content: '\201C'; display: block; height: 2.625rem; font-family: var(--font-display); font-weight: 700; font-size: 4.25rem; line-height: 1; color: #C9A84C; }
.wwh-sec .wwh-pull blockquote p { margin: 0; font-family: var(--font-body); font-weight: 400; font-size: clamp(1.375rem, 2vw, 1.75rem); line-height: 1.38; letter-spacing: -0.012em; color: var(--w-ink); text-wrap: balance; }
.wwh-pull figcaption { display: flex; align-items: baseline; gap: 0.625rem; margin-top: 1.125rem; font-size: 1.0625rem; color: var(--w-muted); }
.wwh-pull__name { font-family: var(--font-display); font-weight: 600; font-size: 1.0625rem; color: var(--w-ink); }
.wwh-pull__name::after { content: ''; display: inline-block; width: 1px; height: 0.875em; margin-left: 0.625rem; background: var(--w-line-strong); vertical-align: -0.08em; }
/* what clients say: three plain columns between two firm rules */
.wwh-revs { position: relative; margin-top: 3rem; padding: 2px 0; }
.wwh-revs::before, .wwh-revs::after { content: ''; position: absolute; left: 0; right: 0; height: 2px; background: var(--w-rule, #1A1A20); }
.wwh-revs::before { top: 0; }
.wwh-revs::after { bottom: 0; }
.wwh-revs__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; column-gap: 1.5rem; row-gap: 0.25rem; padding: 1.375rem 0 0.25rem; }
.wwh-sec .wwh-revs__head h3 { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: 1.5rem; line-height: 1.25; letter-spacing: -0.005em; color: var(--w-ink); }
.wwh-sec .wwh-revs__head p { margin: 0 !important; font-size: 1.0625rem; color: var(--w-muted); }
.wwh-rev { position: relative; padding: 1.5rem 0 1.75rem; }
.wwh-rev + .wwh-rev::before { content: ''; position: absolute; top: 0; right: 0; left: 0; border-top: 1px solid var(--w-line-mid, rgba(26, 26, 32, .16)); }
.wwh-stars { display: flex; gap: 0.25rem; color: #C9A84C; }
.wwh-stars svg { width: 1.125rem; height: 1.125rem; }
.wwh-rev { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; }
.wwh-rev > .wwh-stars { order: 1; }
.wwh-rev > .wwh-rev__by { order: 2; }
.wwh-rev > blockquote { order: 3; }
.wwh-sec .wwh-rev blockquote { margin: 0.875rem 0 0; padding: 0; border: 0; background: none; quotes: none; }
.wwh-sec .wwh-rev blockquote p { margin: 0; font-style: normal; font-size: 1.125rem; line-height: 1.55; color: var(--w-body); text-wrap: pretty; }
.wwh-sec .wwh-rev__by { display: flex; align-items: baseline; gap: 0.625rem; margin: 0.625rem 0 0 !important; font-size: 1rem; color: var(--w-muted); }
.wwh-rev__name { font-family: var(--font-display); font-weight: 600; font-size: 1.0625rem; color: var(--w-ink); }
.wwh-rev__name::after { content: ''; display: inline-block; width: 1px; height: 0.875em; margin-left: 0.625rem; background: var(--w-line-strong); vertical-align: -0.08em; }
/* phones: ONE review at a time; the next one peeks in from the right, so a sideways swipe is the obvious next move.
   (Three full reviews stacked ran to about three phone screens.) No buttons, no script, no added words. */
@media (max-width: 699px) {
	.wwh-revs__list { display: flex; gap: 1rem; margin: 0 calc(-1 * var(--w-pad)); padding: 0 var(--w-pad); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 var(--w-pad); -webkit-overflow-scrolling: touch; scrollbar-width: none; }
	.wwh-revs__list::-webkit-scrollbar { display: none; }
	.wwh-rev { flex: 0 0 86%; scroll-snap-align: start; padding: 1.25rem 0 1.5rem; }
	.wwh-rev + .wwh-rev::before { top: 1.25rem; bottom: 1.5rem; right: auto; left: -0.5rem; border-top: 0; border-left: 1px solid var(--w-line-mid, rgba(26, 26, 32, .16)); }
	.wwh-rev:last-child { flex-basis: 92%; }
}
/* the guarantee closes the section: a calm statement under the closing rule */
.wwh-pledge { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 0.625rem; padding-top: 2rem; }
.wwh-sec .wwh-pledge__label { display: flex; align-items: center; gap: 0.625rem; margin: 0 !important; font-family: var(--font-display); font-weight: 600; font-size: 1.1875rem; line-height: 1.3; color: var(--w-ink); }
.wwh-pledge__label svg { width: 1.5rem; height: 1.5rem; flex: 0 0 auto; color: var(--w-link); }
.wwh-sec .wwh-pledge__text { margin: 0 !important; font-size: clamp(1.25rem, 2.2vw, 1.625rem); line-height: 1.42; letter-spacing: -0.01em; color: var(--w-ink); max-width: 46rem; text-wrap: balance; }
.wwh-pledge__small { color: var(--w-muted); }
.wwh-sec .wwh-pledge__more { margin: 0.25rem 0 0 !important; }
.wwh-sec .wwh-pledge__more .wwh-more { font-size: 1.125rem; min-height: 2.75rem; color: #6F5A22; }
@media (min-width: 700px) {
	.wwh-who__top { grid-template-columns: 11rem minmax(0, 1fr); column-gap: var(--c-gap); row-gap: 0; }
	.wwh-who__photo { grid-row: 1 / 5; border-radius: 16px; }
	.wwh-who__bio { display: block; }
	.wwh-sec .wwh-who__name { font-size: 2rem; }
	.wwh-sec .wwh-who__role { margin: 0.25rem 0 1rem !important; font-size: 1.125rem; }
	.wwh-sec .wwh-who__text { font-size: 1.1875rem; max-width: 38rem; }
	.wwh-pull { margin-top: 2.25rem; }
	.wwh-sec .wwh-pull blockquote p { font-size: 1.75rem; max-width: 46rem; }
	.wwh-sec .wwh-rev blockquote p { max-width: 44rem; }
	.wwh-pledge { padding-top: 2.25rem; }
}
@media (min-width: 1100px) {
	/* three reviews side by side from the width where a column holds a comfortable line */
	.wwh-revs__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--c-gap); }
	.wwh-rev + .wwh-rev::before { content: none; }
	.wwh-rev { padding: 1.5rem 0 2.25rem; }
}
@media (min-width: 1200px) {
	/* photo, what she does, and the client's words: three across on the page's three columns */
	.wwh-who__top { grid-template-columns: 15rem minmax(0, 1fr) calc((100% - 2 * var(--c-gap)) / 3); align-items: start; }
	.wwh-who__top--solo { grid-template-columns: 15rem minmax(0, 1fr); }
	.wwh-who__photo { grid-row: auto; }
	.wwh-pull { position: relative; grid-column: auto; margin: 0; padding: 0; border-top: 0; align-self: center; }
	.wwh-pull::before { content: ''; position: absolute; top: -1rem; bottom: -1rem; left: calc(var(--c-gap) / -2); width: 1px; background: var(--w-line-mid, rgba(26, 26, 32, .16)); }
	.wwh-sec .wwh-pull blockquote p { font-size: clamp(1.5rem, 1.95vw, 1.75rem); }
	.wwh-revs { margin-top: 4rem; }
}

.wwh-emphasis {
	position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 0.875rem;
	background: var(--w-surface); border: 1px solid var(--w-line); border-radius: var(--w-radius); box-shadow: var(--w-shadow);
	padding: 1.875rem clamp(1.375rem, 3vw, 2.5rem) 1.75rem;
}
.wwh-emphasis::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: #C9A84C; }
.wwh-emphasis__head { display: flex; align-items: center; gap: 0.75rem; margin: 0; }
.wwh-emphasis__head svg { width: 1.75rem; height: 1.75rem; flex: 0 0 auto; color: var(--w-link); }
.wwh-emphasis__label { color: var(--w-ink); }
.wwh-emphasis p { margin: 0 !important; font-size: clamp(1.1875rem, 1.7vw, 1.375rem); line-height: 1.5; color: var(--w-ink); max-width: 52rem; }
.wwh-sec .wwh-emphasis p { text-wrap: balance; }
.wwh-emphasis__small { color: var(--w-muted); }
.wwh-emphasis .wwh-more { justify-self: start; }
@media (min-width: 960px) {
	.wwh-emphasis { grid-template-columns: minmax(0, 1fr) auto; column-gap: 3rem; align-items: end; }
	.wwh-emphasis__head, .wwh-emphasis p { grid-column: 1; }
	.wwh-emphasis .wwh-more { grid-column: 2; grid-row: 2; white-space: nowrap; }
}

/* ---------- Heading on the left, list on the right ---------- */
.wwh-split { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 0.5rem; }
@media (min-width: 960px) {
	.wwh-split { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); column-gap: clamp(3rem, 6vw, 5.5rem); align-items: start; }
	.wwh-split > .wwh-head { position: sticky; top: 8rem; margin-bottom: 0; }
}

/* Branch rows: OPTION A (Shawn's pick, 2026-10-02). One plain list between two firm rules: no box, no all-caps.
   Each row is one big tap target. Under the pointer a row steps forward: a short gold mark draws at the start of its
   line, its name moves a few pixels toward the arrow, and "Read the guide" appears beside the arrow. */
.wwh-rows { position: relative; padding: 2px 0; }
.wwh-rows::before, .wwh-rows::after { content: ''; position: absolute; left: 0; right: 0; height: 2px; background: var(--w-rule, #1A1A20); }
.wwh-rows::before { top: 0; }
.wwh-rows::after { bottom: 0; }
.wwh-rows li { position: relative; }
.wwh-rows li + li { border-top: 1px solid var(--w-line-mid, rgba(26, 26, 32, .16)); }
.wwh-row {
	position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 1.5rem; align-items: center;
	min-height: 4.75rem; padding: 1.25rem 0; text-decoration: none !important;
}
.wwh-row::before { content: ''; position: absolute; top: -1px; left: 0; width: 2.5rem; height: 2px; background: #C9A84C; transform: scaleX(0); transform-origin: left center; transition: transform .45s cubic-bezier(.2, .7, .2, 1); }
.wwh-rows li:first-child .wwh-row::before { top: 0; }
.wwh-row:hover::before, .wwh-row:focus-visible::before, .wwh-row:active::before { transform: none; }
.wwh-rows li:last-child .wwh-row { padding-bottom: calc(1.25rem + 2px); }
.wwh-row:focus-visible { outline: 2px solid #8B7232; outline-offset: 2px; border-radius: 4px; }
.wwh-row__title { font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; line-height: 1.3; letter-spacing: -0.005em; color: var(--w-ink); text-wrap: balance; transition: transform .35s cubic-bezier(.2, .7, .2, 1); }
.wwh-row__cta { position: relative; display: inline-flex; align-items: center; gap: 0.625rem; font-family: var(--font-display); font-weight: 600; font-size: 1.0625rem; color: #6F5A22; white-space: nowrap; }
.wwh-row__cta .wwh-arrow { width: 1.5rem; height: 1.5rem; stroke-width: 2; transform: translateX(-4px); transition: transform .35s cubic-bezier(.2, .7, .2, 1); }
/* the arrow rests a few pixels in and moves OUT to the list's edge, never past it */
.wwh-row:hover .wwh-arrow, .wwh-row:focus-visible .wwh-arrow, .wwh-row:active .wwh-arrow { transform: none; }
@media (hover: hover) { .wwh-row:hover .wwh-row__title { transform: translateX(6px); } }
@media (min-width: 600px) {
	.wwh-row { min-height: 5.25rem; }
	.wwh-row__title { font-size: 1.5rem; letter-spacing: -0.01em; }
}
/* "Read the guide" is there for screen readers everywhere; it is SHOWN only with a pointer and only where the list is wide
   enough for the longest name plus the words. It sits out of the flow, so it never squeezes a name onto two lines. */
.wwh-row__cta span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
@media (min-width: 1240px) and (hover: hover) {
	.wwh-row__cta span { top: 50%; right: 2.25rem; width: auto; height: auto; overflow: visible; clip-path: none; opacity: 0; transform: translate(-6px, -50%); transition: opacity .25s ease, transform .35s cubic-bezier(.2, .7, .2, 1); }
	.wwh-row:hover .wwh-row__cta span, .wwh-row:focus-visible .wwh-row__cta span { opacity: 1; transform: translate(0, -50%); }
}
@media (max-width: 599px) { .wwh-row { column-gap: 1rem; } }
.wwh .hivelaw-faq__question span { text-wrap: balance; }


/* ---------- Questions: the site's own FAQ block, set on this page's grid ---------- */
.wwh .hivelaw-faq { background: var(--w-band) !important; }
.wwh .hivelaw-faq::before { content: none !important; }
.wwh .hivelaw-faq > .hivelaw-container { max-width: var(--w-max); padding-left: var(--w-pad); padding-right: var(--w-pad); }
.wwh .hivelaw-faq h2 { padding-bottom: 0; text-wrap: balance; font-size: clamp(1.875rem, 3.6vw, 2.5rem); line-height: 1.1; letter-spacing: -0.015em; }
.wwh .hivelaw-faq__list { max-width: none; margin-left: 0; margin-right: 0; }
.wwh-faq__call { margin: 1.75rem 0 0 !important; padding-top: 1.5rem; border-top: 1px solid var(--w-line); }
.wwh-faq__call .wwh-label { display: block; margin-bottom: 0.25rem; color: var(--w-link); }
.wwh-faq__call a { font-family: var(--font-display); font-weight: 700; font-size: 1.75rem; line-height: 1.15; letter-spacing: -0.015em; color: var(--w-ink); text-decoration: none; white-space: nowrap; }
@media (max-width: 959px) { .wwh-faq__call { display: none; } }
.wwh .hivelaw-faq__question { font-size: 1.125rem; line-height: 1.35; }
.wwh .hivelaw-faq__answer-inner p { font-size: 1.125rem; line-height: 1.65; }
.wwh .hivelaw-faq h2::before { content: ''; display: block; width: 2.5rem; height: 2px; background: #C9A84C; margin-bottom: 1.25rem; }
.wwh .hivelaw-faq h2::after { content: none !important; }
@media (min-width: 960px) {
	.wwh .hivelaw-faq > .hivelaw-container { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); column-gap: clamp(3rem, 6vw, 5.5rem); align-items: start; }
	.wwh-faq__head { position: sticky; top: 8rem; }
	.wwh .hivelaw-faq h2 { margin: 0; }
	.wwh .hivelaw-faq__list { margin-top: 0; }
}

/* ---------- Closing: the site's bottom form block, with this page's words ---------- */
.wwh .hivelaw-form-cta-block > .hivelaw-container { max-width: var(--w-max); padding-left: var(--w-pad); padding-right: var(--w-pad); }
@media (min-width: 960px) {
	.wwh .hivelaw-form-cta-block__inner { grid-template-columns: 55fr 45fr; gap: var(--space-3xl, 4rem); }
	.wwh-contact { flex-wrap: nowrap; justify-content: space-between; }
	.wwh-share a { min-height: 3.25rem; }
}
.wwh .hivelaw-form-cta-block__heading { font-size: clamp(1.875rem, 3.6vw, 2.5rem); line-height: 1.1; letter-spacing: -0.015em; padding-bottom: 0; margin-bottom: 1.25rem; text-wrap: balance; }
.wwh .hivelaw-form-cta-block__heading::before { content: ''; display: block; width: 2.5rem; height: 2px; background: #C9A84C; margin-bottom: 1.25rem; }
.wwh .hivelaw-form-cta-block__heading::after { content: none !important; }
.wwh .hivelaw-form-cta-block__rule { display: none; }
.wwh .hivelaw-form-cta-block__subhead, .wwh .hivelaw-form-cta-block__body { font-size: 1.125rem; line-height: 1.65; text-wrap: pretty; }

.wwh .hivelaw-form-cta-block .hivelaw-form-call { display: none; }
.wwh .hivelaw-form-cta-block.wwh-close--plain { background: var(--w-band); }
/* The ending answers the opening: the same three stops, now ticked, on a solid line */
.wwh-route--done { --r: 2.25rem; --row: 3rem; --gap: 1rem; --w-ring-bg: #C9A84C; margin: 0 0 1.75rem; }
.wwh-route--done::before { top: calc(var(--row) / 2); border-left: 2px solid #C9A84C; transform: translateX(-1px); }
.wwh-route--done .wwh-ring { background: #C9A84C; border-color: #C9A84C; color: #1A1A20; }
.wwh-route--done .wwh-ring svg { width: 1.0625rem; height: 1.0625rem; stroke-width: 2.25; }
.wwh-route--done .wwh-route__name { color: var(--w-ink); font-size: 1.1875rem; }
.wwh .hivelaw-form-cta-block__content-col .wwh-route--done + .hivelaw-form-cta-block__heading::before { content: none; }
@media (max-width: 699px) { .wwh-route--done { --r: 2rem; --gap: 0.875rem; } .wwh-route--done .wwh-route__name { font-size: 1.0625rem; } }
.wwh-contact { margin: 2rem 0 0; padding-top: 1.75rem; border-top: 1px solid var(--w-line); display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem 2rem; }
.wwh-phone { margin: 0; }
.wwh-phone a { display: inline-grid; grid-template-columns: auto; text-decoration: none; }
.wwh-phone .wwh-label { display: block; margin-bottom: 0.25rem; color: var(--w-link); }
.wwh-phone--plain .wwh-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.wwh-phone__num { font-family: var(--font-display); font-weight: 700; font-size: clamp(2rem, 4vw, 2.5rem); line-height: 1.1; letter-spacing: -0.02em; color: var(--w-ink); white-space: nowrap; }
.wwh-phone__icon { display: none; }
.wwh-share { margin: 0; }
.wwh-share a {
	display: inline-flex; align-items: center; gap: 0.625rem; min-height: 3rem; padding: 0.625rem 1.25rem;
	border: 1.5px solid var(--w-line-strong); border-radius: 9999px; text-decoration: none;
	font-family: var(--font-display); font-weight: 600; font-size: 1rem; line-height: 1.2; color: var(--w-ink); transition: border-color .2s ease, background-color .2s ease;
}
.wwh-share a:hover, .wwh-share a:focus-visible { border-color: #C9A84C; background: var(--w-hover, #F8F6F2); }
.wwh-share svg { width: 1.25rem; height: 1.25rem; color: var(--w-link); flex: 0 0 auto; }
@media (max-width: 699px) {
	/* On a phone the number is a full-width button for a thumb, and so is the share link */
	.wwh-contact { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.75rem; padding-top: 0; border-top: 0; margin-top: 1.75rem; }
	.wwh-phone a { display: grid; grid-template-columns: minmax(0, 1fr) 3rem; align-items: center; column-gap: 1rem; padding: 1rem 1rem 1rem 1.25rem; border: 1.5px solid #C9A84C; border-radius: 16px; background: var(--w-surface); }
	.wwh-phone .wwh-label, .wwh-phone--plain .wwh-label { position: static; width: auto; height: auto; clip-path: none; grid-column: 1; }
	.wwh-phone__num { grid-column: 1; font-size: 1.75rem; }
	.wwh-phone__icon { display: block; grid-column: 2; grid-row: 1 / span 2; width: 3rem; height: 3rem; padding: 0.8125rem; border-radius: 50%; background: #C9A84C; color: #1A1A20; }
	.wwh-share a { display: flex; justify-content: center; min-height: 3.5rem; border-radius: 16px; }
}

/* ---------- Landlords: LLC and trust, one panel in two halves ---------- */
/* ---------- Landlords: "Do you need an LLC?", OPTION A (Shawn's pick, 2026-10-02) ----------
   Two jobs side by side between firm rules (no boxes), the answer across the page, the short answers in two columns,
   then the offer. */
.wwh-llc__pair { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); padding: 2px 0; }
.wwh-llc__pair::before, .wwh-llc__pair::after { content: ''; position: absolute; left: 0; right: 0; height: 2px; background: var(--w-rule, #1A1A20); }
.wwh-llc__pair::before { top: 0; }
.wwh-llc__pair::after { bottom: 0; }
.wwh-llc__side { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 1rem; padding: 1.75rem 0 2rem; }
.wwh-llc__side + .wwh-llc__side { border-top: 1px solid var(--w-line-mid, rgba(26, 26, 32, .16)); }
.wwh-sec .wwh-llc__name { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; line-height: 1.2; letter-spacing: -0.01em; color: var(--w-ink); }
.wwh-sec .wwh-llc__line { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr); column-gap: 0.875rem; align-items: start; margin: 0 !important; font-size: 1.1875rem; line-height: 1.5; }
.wwh-llc__line svg { width: 1.5rem; height: 1.5rem; margin-top: 0.0625rem; stroke-width: 2.25; color: #8B7232; }
.wwh-llc__line--not svg { color: var(--w-muted); }
.wwh-sec .wwh-llc__line .wwh-line { color: var(--w-ink); font-weight: 500; }
.wwh-sec .wwh-llc__line--not .wwh-line { color: var(--w-soft, var(--w-body)); font-weight: 400; }
/* the answer: a calm statement across the page */
.wwh-llc__answer { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 1rem; padding: clamp(2.5rem, 5vw, 3.5rem) 0 0; }
.wwh-sec .wwh-llc__answer h3 { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.375rem, 2vw, 1.625rem); line-height: 1.2; letter-spacing: -0.01em; color: var(--w-ink); }
.wwh-sec .wwh-llc__answer p { margin: 0 !important; }
.wwh-sec .wwh-llc__answer .wwh-line { color: var(--w-soft, var(--w-body)); font-size: 1.1875rem; line-height: 1.5; text-wrap: pretty; }
.wwh-sec .wwh-llc__answer .wwh-line + .wwh-line { margin-top: 0.5rem; }
.wwh-sec .wwh-llc__answer .wwh-line:first-child { color: var(--w-ink); font-size: clamp(1.625rem, 3.05vw, 2.5rem); line-height: 1.2; letter-spacing: -0.022em; margin-bottom: 1.375rem; text-wrap: balance; max-width: none !important; }
.wwh-sec .wwh-llc__answer .wwh-line:first-child .wwh-hl { font-weight: 600; background-size: 100% 3px; }
@media (max-width: 719px) { .wwh-sec .wwh-llc__answer .wwh-line:first-child { line-height: 1.42; } .wwh-sec .wwh-llc__answer .wwh-line:first-child .wwh-hl { padding-bottom: 0; background-size: 100% 2px; } }
/* the short answers: plain, all showing */
.wwh-llc__qas { display: grid; grid-template-columns: minmax(0, 1fr); margin: clamp(2.25rem, 4vw, 3rem) 0 0; }
.wwh-llc__qa { border-top: 1px solid var(--w-line-mid, rgba(26, 26, 32, .16)); }
.wwh-llc__qa { padding: 1.375rem 0 1.5rem; }
.wwh-llc__qa:last-child { border-bottom: 1px solid var(--w-line-mid, rgba(26, 26, 32, .16)); }
.wwh-llc__qa summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 2.75rem; list-style: none; cursor: pointer; font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; line-height: 1.3; color: var(--w-ink); }
.wwh-llc__qa summary::-webkit-details-marker { display: none; }
.wwh-llc__qa summary span { text-wrap: balance; }
.wwh-llc__chev { flex: 0 0 auto; width: 1.25rem; height: 1.25rem; color: var(--w-muted); stroke-width: 2; transition: transform .3s cubic-bezier(.2, .7, .2, 1); }
.wwh-llc__qa[open] .wwh-llc__chev { transform: rotate(180deg); }
.wwh-llc__qa summary:focus-visible { outline: 2px solid #8B7232; outline-offset: 3px; border-radius: 4px; }
.wwh-llc__a { margin-top: 0.375rem; font-size: 1.125rem; line-height: 1.5; }
.wwh-sec .wwh-llc__a .wwh-line, .wwh-sec .wwh-llc__line .wwh-line, .wwh-sec .wwh-llc__answer .wwh-line { text-wrap: pretty; }   /* phones: never a one-word last line */
@media (min-width: 720px) { .wwh-sec .wwh-llc__line .wwh-line { text-wrap: balance; } .wwh-sec .wwh-llc__a .wwh-line { text-wrap: pretty; } }
@media (max-width: 719px) { .wwh-llc__qa { padding: 0.75rem 0; } .wwh-llc__qa[open] { padding-bottom: 1.25rem; } }
/* on a computer every answer shows and the questions are plain headings, not buttons */
@media (min-width: 720px) { .wwh-llc__qa summary { pointer-events: none; cursor: default; min-height: 0; margin-bottom: 0.25rem; } .wwh-llc__chev { display: none; } }
@media (min-width: 720px) { .wwh-llc__qa summary { align-items: flex-start; } }   /* a pair of questions shares one height only when one of them wraps: set by wwh-pick.js */
.wwh-sec .wwh-llc__qa .wwh-line { color: var(--w-soft, var(--w-body)); text-wrap: pretty; }
.wwh-sec .wwh-llc__qa .wwh-line + .wwh-line { margin-top: 0.375rem; }
.wwh-sec .wwh-llc__qa .wwh-line:first-child { color: var(--w-ink); font-weight: 600; }
/* the offer: the price section's "+" mark */
.wwh-sec .wwh-llc__offer { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr); column-gap: 0.875rem; align-items: start; max-width: 46rem; text-wrap: balance; margin: clamp(2.5rem, 4.5vw, 3.5rem) 0 0 !important; font-size: 1.1875rem; line-height: 1.5; color: var(--w-ink); }
.wwh-llc__offer svg { box-sizing: border-box; width: 1.5rem; height: 1.5rem; padding: 0.1875rem; margin-top: 0.0625rem; border: 1px dashed rgba(139, 114, 50, .8); border-radius: 50%; color: #8B7232; stroke-width: 2.25; }
.wwh-llc__offer strong { font-family: var(--font-display); font-weight: 700; white-space: nowrap; }
@media (min-width: 720px) {
	.wwh-llc__pair { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto auto auto; column-gap: var(--c-gap, clamp(2rem, 3.4vw, 3rem)); }
	.wwh-llc__side { grid-row: span 3; grid-template-rows: subgrid; padding: 2rem 0 2.25rem; }
	.wwh-llc__side + .wwh-llc__side { border-top: 0; }
	.wwh-llc__side + .wwh-llc__side::before { content: ''; position: absolute; top: 2rem; bottom: 2.25rem; left: 50%; width: 1px; background: var(--w-line-mid, rgba(26, 26, 32, .16)); }
	.wwh-llc__qas { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--c-gap, clamp(2rem, 3.4vw, 3rem)); }
	.wwh-llc__qa:nth-last-child(2) { border-bottom: 1px solid var(--w-line-mid, rgba(26, 26, 32, .16)); }
	.wwh-llc__answer .wwh-line { max-width: 46rem; }
}
@media (min-width: 1100px) { .wwh-sec .wwh-llc__name { font-size: 1.75rem; } .wwh-sec .wwh-llc__line { font-size: 1.25rem; } .wwh-llc__side { row-gap: 1.125rem; } }
/* under the pointer a short answer steps forward */
@media (hover: hover) and (min-width: 720px) { .wwh-sec .wwh-llc__a .wwh-line { transition: color .3s ease; } .wwh-sec .wwh-llc__qa:hover .wwh-llc__a .wwh-line { color: var(--w-ink) !important; } }

.wwh-pair {
	display: grid; grid-template-columns: minmax(0, 1fr);
	background: var(--w-tint); --w-ring-bg: var(--w-tint); border: 1px solid var(--w-line); border-radius: var(--w-radius); overflow: hidden;
}
.wwh-pair__side { display: grid; grid-template-columns: minmax(0, 1fr); padding: 1.75rem 1.375rem 1.875rem; }
.wwh-pair__side + .wwh-pair__side { border-top: 1px solid var(--w-line); }
.wwh-pair__head { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.25rem; }
.wwh-pair__head h3 { font-weight: 700; font-size: 1.375rem; line-height: 1.25; }
.wwh-pair__line { display: grid; grid-template-columns: 1.375rem minmax(0, 1fr); column-gap: 0.875rem; align-items: start; margin: 0 !important; padding: 0.875rem 0; border-top: 1px solid var(--w-line); font-size: 1.0625rem; line-height: 1.6; }
.wwh-pair__line svg { width: 1.375rem; height: 1.375rem; margin-top: 0.1875rem; color: var(--w-link); }
.wwh-pair__line--not svg { color: var(--w-muted); }
.wwh-pair__line:last-child { padding-bottom: 0; }
@media (min-width: 860px) {
	.wwh-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto auto auto; }
	.wwh-pair__side { grid-row: span 3; grid-template-rows: subgrid; padding: 2rem 2rem 2.125rem; }
	.wwh-pair__side + .wwh-pair__side { border-top: 0; border-left: 1px solid var(--w-line); }
}
.wwh-answer { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 0.75rem; margin-top: clamp(2.25rem, 4vw, 3rem); padding-top: clamp(2.25rem, 4vw, 3rem); border-top: 1px solid var(--w-line); }
.wwh-answer h3 { font-weight: 700; font-size: clamp(1.5rem, 2.6vw, 1.875rem); line-height: 1.2; letter-spacing: -0.01em; text-wrap: balance; }
.wwh-answer p { margin: 0 !important; font-size: clamp(1.1875rem, 1.8vw, 1.3125rem); line-height: 1.6; color: var(--w-ink); }
.wwh-qa-head { margin: clamp(2.25rem, 4vw, 3rem) 0 0 !important; padding-bottom: 0.875rem; }
.wwh-qa { border-top: 1px solid var(--w-line); border-bottom: 1px solid var(--w-line); margin: 0; }
.wwh-qa > div { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 0.5rem; padding: 1.5rem 0 1.625rem; }
.wwh-qa > div + div { border-top: 1px solid var(--w-line); }
.wwh-qa dt { font-family: var(--font-display); font-weight: 600; font-size: 1.1875rem; line-height: 1.35; color: var(--w-ink); margin: 0; text-wrap: balance; }
.wwh-qa dd { margin: 0; font-size: 1.0625rem; line-height: 1.65; }
@media (min-width: 960px) {
	.wwh-answer, .wwh-qa > div { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); column-gap: clamp(3rem, 6vw, 5.5rem); align-items: start; }
}
.wwh-offer {
	display: grid; grid-template-columns: 2.75rem minmax(0, 1fr); column-gap: 1.125rem; align-items: center;
	margin: clamp(2rem, 4vw, 2.75rem) 0 0 !important; padding: 1.25rem 1.5rem;
	border: 1px solid rgba(201, 168, 76, .55); border-radius: 16px; background: rgba(201, 168, 76, .07);
	font-size: 1.0625rem; line-height: 1.6; color: var(--w-ink);
}
.wwh-offer .wwh-ring { width: 2.75rem; height: 2.75rem; --w-ring-bg: transparent; }
@media (max-width: 599px) { .wwh-offer { align-items: start; padding: 1.125rem 1.25rem; } }
.wwh-offer strong { font-family: var(--font-display); font-weight: 700; white-space: nowrap; }

/* ---------- Landlords: the guides library, grouped, closed until asked for ---------- */
.wwh-guides { background: var(--w-surface); border: 1px solid var(--w-line); border-radius: var(--w-radius); box-shadow: var(--w-shadow); overflow: hidden; }
.wwh-guides details + details { border-top: 1px solid var(--w-line); }
.wwh-guides summary {
	display: grid; grid-template-columns: minmax(0, 1fr) auto auto; column-gap: 1.25rem; align-items: center;
	min-height: 4.75rem; padding: 1.125rem 1.75rem; cursor: pointer; list-style: none; transition: background-color .2s ease;
}
.wwh-guides summary::-webkit-details-marker { display: none; }
.wwh-guides summary:hover { background: var(--w-hover, #F8F6F2); }
.wwh-guides summary:focus-visible { outline: 2px solid #8B7232; outline-offset: -4px; }
.wwh-guides__q { font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; line-height: 1.3; color: var(--w-ink); }
.wwh-guides__n { font-family: var(--font-display); font-weight: 600; font-size: 0.8125rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--w-muted); white-space: nowrap; }
.wwh-guides__chev { width: 1.25rem; height: 1.25rem; color: var(--w-link); transition: transform .25s ease; }
.wwh-guides details[open] .wwh-guides__chev { transform: rotate(180deg); }
.wwh-guides__list { display: grid; grid-template-columns: minmax(0, 1fr); padding: 0 1.75rem 1.5rem !important; }
@media (min-width: 760px) { .wwh-guides__list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2.5rem; } }
.wwh-guides__list a {
	display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 1rem; align-items: center;
	padding: 0.9375rem 0; border-top: 1px solid var(--w-line); text-decoration: none !important;
	font-size: 1rem; font-weight: 500; line-height: 1.4; color: var(--w-ink);
}
.wwh-guides__list a .wwh-arrow { color: var(--w-link); }
.wwh-guides__list a:hover { color: var(--w-link); }
.wwh-guides__list a:hover .wwh-arrow { transform: translateX(3px); }
@media (max-width: 599px) {
	.wwh-guides summary { padding: 1rem 1.25rem; grid-template-columns: minmax(0, 1fr) auto; }
	.wwh-guides__n { display: none; }
	.wwh-guides__list { padding: 0 1.25rem 1.25rem !important; }
}

/* ---------- This page's grid for the remaining shared blocks ---------- */
/* From the Journal: OPTION B (Shawn's pick, 2026-10-02): one article featured large on a dark panel, two smaller beside it on
   white. Same markup as the shared journal block (restyled on these pages only): the first card is the feature. */
.wwh .hivelaw-journal-preview.wwh-journal--white { background: var(--w-band) !important; }
.wwh .hivelaw-journal-preview { background: var(--w-tint); padding-top: clamp(4rem, 8vw, 6rem); padding-bottom: clamp(4rem, 8vw, 6rem); }
.wwh .hivelaw-journal-preview > .hivelaw-container { max-width: var(--w-max); padding-left: var(--w-pad); padding-right: var(--w-pad); }
.wwh .hivelaw-journal-preview__header { margin: 0 0 2.25rem; text-align: left; }
.wwh .hivelaw-journal-preview__header::before { content: ''; display: block; width: 2.5rem; height: 2px; background: #C9A84C; margin-bottom: 1.25rem; }
.wwh .hivelaw-journal-preview .hivelaw-section__eyebrow { margin: 0 0 0.75rem; font-family: var(--font-body); font-weight: 500; font-size: 1.125rem; line-height: 1.4; letter-spacing: 0; text-transform: none; color: var(--w-body); }
.wwh .hivelaw-journal-preview .hivelaw-section__heading { margin: 0; padding: 0; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.875rem, 3.6vw, 2.5rem); line-height: 1.1; letter-spacing: -0.015em; color: var(--w-ink); text-wrap: balance; }
.wwh .hivelaw-journal-preview .hivelaw-section__heading::after, .wwh .hivelaw-journal-preview .hivelaw-section__heading::before { content: none !important; }
.wwh .hivelaw-journal__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; margin: 0; max-width: none; }
.wwh .hivelaw-journal__card {
	position: relative; display: flex; flex-direction: column; justify-content: space-between; row-gap: 1.5rem; min-height: 0; margin: 0; padding: 1.5rem 1.5rem 1.375rem;
	background: var(--w-surface) !important; border: 1px solid var(--w-line) !important; border-radius: 20px !important; box-shadow: var(--w-shadow) !important;
	text-decoration: none !important; transform: none; transition: transform .35s cubic-bezier(.2, .7, .2, 1), box-shadow .35s ease, border-color .3s ease;
}
.wwh .hivelaw-journal__card::before, .wwh .hivelaw-journal__card::after { content: none !important; }
.wwh .hivelaw-journal__title { margin: 0 !important; font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; line-height: 1.3; letter-spacing: -0.005em; color: var(--w-ink) !important; text-wrap: balance;
	text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 2px; text-underline-offset: 0.2em; transition: text-decoration-color .3s ease; }
.wwh .hivelaw-journal__excerpt:empty { display: none; }
.wwh .hivelaw-journal__read-more { display: inline-flex; align-items: center; gap: 0.5rem; margin: 0; font-family: var(--font-display); font-weight: 600; font-size: 1.0625rem; letter-spacing: 0; text-transform: none; color: #6F5A22 !important; }
.wwh .hivelaw-journal__read-more svg { width: 1.125rem; height: 1.125rem; transition: transform .35s cubic-bezier(.2, .7, .2, 1); }
.wwh .hivelaw-journal__card:hover, .wwh .hivelaw-journal__card:focus-visible { transform: translateY(-3px); box-shadow: 0 2px 4px rgba(26, 26, 32, .05), 0 26px 48px -22px rgba(26, 26, 32, .28) !important; }
.wwh .hivelaw-journal__card:hover .hivelaw-journal__title, .wwh .hivelaw-journal__card:focus-visible .hivelaw-journal__title { text-decoration-color: #C9A84C; }
.wwh .hivelaw-journal__card:hover .hivelaw-journal__read-more svg, .wwh .hivelaw-journal__card:focus-visible .hivelaw-journal__read-more svg { transform: translateX(4px); }
.wwh .hivelaw-journal__card:focus-visible { outline: 2px solid #8B7232; outline-offset: 3px; }
/* the feature: dark, its headline at the top (on the same line as the headline beside it) and its link at the bottom
   (on the same line as the lower panel's link). One gold rule for the section: the header's. */
.wwh .hivelaw-journal__card:first-child { background: #1A1A20 !important; border-color: #1A1A20 !important; }
.wwh .hivelaw-journal__card:first-child .hivelaw-journal__title { font-size: 1.75rem; line-height: 1.15; letter-spacing: -0.02em; font-weight: 700; color: #F1EEE8 !important; }
.wwh .hivelaw-journal__card:first-child .hivelaw-journal__read-more { color: #C9A84C !important; }
.wwh .hivelaw-journal__title { text-decoration-skip-ink: none; }
@media (max-width: 599px) { .wwh .hivelaw-journal__card { padding: 1.25rem 1.25rem 1.125rem; row-gap: 1.125rem; } .wwh .hivelaw-journal__card:first-child { row-gap: 1.75rem; padding-top: 1.5rem; } }
@media (min-width: 1000px) {
	.wwh .hivelaw-journal__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-rows: 1fr 1fr; gap: 1.25rem; }
	.wwh .hivelaw-journal__card { padding: 1.75rem 2rem 1.625rem; }
	.wwh .hivelaw-journal__card:first-child { grid-row: 1 / 3; }
	.wwh .hivelaw-journal__card:first-child .hivelaw-journal__title { font-size: clamp(2rem, 2.9vw, 2.5rem); max-width: 12em; }
	.wwh .hivelaw-journal__title { font-size: 1.375rem; }
}

/* ---------- TRUST FIGURES: three options for Shawn (the credibility bar is a locked site-wide block;
   these only apply on Who We Help pages, by a class on <body>, and the block's own file is untouched) ---------- */
/* shared by all three: the four figures become cells of one row */
.wwh-cred-strip .hivelaw-credibility__inner, .wwh-cred-line .hivelaw-credibility__inner, .wwh-cred-dark .hivelaw-credibility__inner {
	display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0;
	max-width: calc(var(--w-max) - 2 * var(--w-pad)); width: calc(100% - 2 * var(--w-pad)); margin: 0 auto; padding: 0;
}
.wwh-cred-strip .hivelaw-credibility__card, .wwh-cred-line .hivelaw-credibility__card, .wwh-cred-dark .hivelaw-credibility__card {
	width: auto; max-width: none; min-width: 0; margin: 0; padding: 1.5rem 1rem 1.625rem;
	background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; transform: none !important;
}
.wwh-cred-strip .hivelaw-credibility__card:nth-child(even), .wwh-cred-line .hivelaw-credibility__card:nth-child(even), .wwh-cred-dark .hivelaw-credibility__card:nth-child(even) { border-left: 1px solid var(--c-line) !important; }
.wwh-cred-strip .hivelaw-credibility__card:nth-child(n+3), .wwh-cred-line .hivelaw-credibility__card:nth-child(n+3), .wwh-cred-dark .hivelaw-credibility__card:nth-child(n+3) { border-top: 1px solid var(--c-line) !important; }
@media (min-width: 860px) {
	.wwh-cred-strip .hivelaw-credibility__inner, .wwh-cred-line .hivelaw-credibility__inner, .wwh-cred-dark .hivelaw-credibility__inner { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.wwh-cred-strip .hivelaw-credibility__card:nth-child(n+3), .wwh-cred-line .hivelaw-credibility__card:nth-child(n+3), .wwh-cred-dark .hivelaw-credibility__card:nth-child(n+3) { border-top: 0 !important; }
	.wwh-cred-strip .hivelaw-credibility__card + .hivelaw-credibility__card, .wwh-cred-line .hivelaw-credibility__card + .hivelaw-credibility__card, .wwh-cred-dark .hivelaw-credibility__card + .hivelaw-credibility__card { border-left: 1px solid var(--c-line) !important; }
}
@media (max-width: 859px) {
	/* phones and tablets, 2 by 2: every cell the same height, every name on one line */
	[class*="wwh-cred-"] .hivelaw-credibility__card { padding: 1.25rem 0.5rem 1.375rem; }
	[class*="wwh-cred-"] .hivelaw-credibility__primary { font-size: 1.0625rem; white-space: nowrap; }
	[class*="wwh-cred-"] .hivelaw-credibility__label { font-size: 0.6875rem; letter-spacing: 0.06em; line-height: 1.45; max-width: 9.5rem; margin-left: auto; margin-right: auto; text-wrap: balance; }
}
/* A. one raised panel on the parchment band */
.wwh-cred-strip .hivelaw-credibility { --c-line: var(--w-line); padding: clamp(2rem, 4vw, 2.75rem) 0; }
.wwh-cred-strip .hivelaw-credibility__inner { background: var(--w-surface); border: 1px solid var(--w-line); border-radius: var(--w-radius); box-shadow: var(--w-shadow); overflow: hidden; }
@media (min-width: 860px) { .wwh-cred-strip .hivelaw-credibility__card { padding: 1.75rem 1.25rem 1.875rem; } }
/* B. one ruled row straight on the band: no box at all */
.wwh-cred-line .hivelaw-credibility { --c-line: var(--w-line-strong); padding: clamp(1.5rem, 3vw, 2rem) 0; }
@media (min-width: 860px) { .wwh-cred-line .hivelaw-credibility__card { padding: 0.75rem 1.25rem 0.875rem; } }
/* C. a dark base band under the opening: the opening and the trust figures read as one piece */
.wwh-cred-dark .hivelaw-credibility { --c-line: rgba(241, 238, 232, .14); background: #222228 !important; padding: clamp(1.25rem, 2.5vw, 1.75rem) 0; border: 0; border-bottom: 1px solid rgba(201, 168, 76, .38); }
.wwh-cred-dark .hivelaw-credibility::before { content: none !important; }
.wwh-cred-dark .hivelaw-credibility__primary { color: #FFFFFF !important; }
.wwh-cred-dark .hivelaw-credibility__label { color: #C9C6C0 !important; }
@media (min-width: 860px) { .wwh-cred-dark .hivelaw-credibility__card { padding: 0.75rem 1.25rem 0.875rem; } }
/* D. the slimmest: the same dark base band, each figure with its mark beside it */
.wwh-cred-slim .hivelaw-credibility { background: #222228 !important; padding: 0; border: 0; border-bottom: 1px solid rgba(201, 168, 76, .38); }
.wwh-cred-slim .hivelaw-credibility::before { content: none !important; }
.wwh-cred-slim .hivelaw-credibility__inner { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; max-width: calc(var(--w-max) - 2 * var(--w-pad)); width: calc(100% - 2 * var(--w-pad)); margin: 0 auto; padding: 0; }
.wwh-cred-slim .hivelaw-credibility__card {
	display: grid !important; grid-template-columns: 6.75rem minmax(0, 1fr); column-gap: 1rem; align-items: center; justify-items: start; text-align: left;
	width: auto; max-width: none; min-width: 0; margin: 0; padding: 0.875rem 0;
	background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; transform: none !important;
}
.wwh-cred-slim .hivelaw-credibility__card + .hivelaw-credibility__card { border-top: 1px solid rgba(241, 238, 232, .12) !important; }
.wwh-cred-slim .hivelaw-credibility__icon-row { grid-row: 1 / span 2; margin: 0; justify-content: flex-start; }
.wwh-cred-slim .hivelaw-credibility__primary { color: #FFFFFF !important; font-size: 1.0625rem; line-height: 1.25; margin: 0; align-self: end; white-space: nowrap; }
.wwh-cred-slim .hivelaw-credibility__label { color: #C9C6C0 !important; font-size: 0.6875rem; letter-spacing: 0.07em; line-height: 1.4; margin: 0 !important; max-width: none !important; align-self: start; white-space: nowrap; }
.wwh-cred-slim .hivelaw-credibility__card { padding: 0.875rem 0 !important; }
@media (min-width: 1100px) { .wwh-cred-slim .hivelaw-credibility__card { padding: 1.375rem 1.5rem !important; } .wwh-cred-slim .hivelaw-credibility__card:first-child { padding-left: 0 !important; } }
.wwh-cred-slim .hivelaw-credibility { border-bottom: 0; position: relative; }
.wwh-cred-slim .hivelaw-credibility::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(201, 168, 76, .7), transparent); }
@media (max-width: 1099px) {
	.wwh-cred-slim .hivelaw-credibility { padding: 0.375rem 0 0.5rem; }
	/* phone and tablet: every row has a mark of the same width (one star stands for the five) */
	.wwh-cred-slim .hivelaw-credibility__card { grid-template-columns: 1.75rem minmax(0, 1fr); column-gap: 1rem; }
	.wwh-cred-slim .hivelaw-credibility__icon-row { justify-content: center; width: 1.75rem; }
	.wwh-cred-slim .hivelaw-credibility__stars svg:nth-child(n+2) { display: none; }
	.wwh-cred-slim .hivelaw-credibility__stars svg { width: 1.5rem; height: 1.5rem; margin: 0; }
}
@media (min-width: 600px) and (max-width: 1099px) {
	.wwh-cred-slim .hivelaw-credibility__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2rem; }
	.wwh-cred-slim .hivelaw-credibility__card:nth-child(2) { border-top: 0 !important; }
}
@media (min-width: 1100px) {
	.wwh-cred-slim .hivelaw-credibility__inner { grid-template-columns: 1.25fr 1fr 1fr 1fr; }
	.wwh-cred-slim .hivelaw-credibility__card { grid-template-columns: auto minmax(0, 1fr); column-gap: 0.875rem; padding: 1.375rem 1.5rem; }
	.wwh-cred-slim .hivelaw-credibility__card:first-child { padding-left: 0; }
	.wwh-cred-slim .hivelaw-credibility__card + .hivelaw-credibility__card { border-top: 0 !important; border-left: 1px solid rgba(241, 238, 232, .12) !important; }
}

/* ---------- Dark mode: real dark surfaces, not white cards on black ---------- */
@media (prefers-color-scheme: dark) {
	.wwh {
		--w-band: #1A1A20; --w-tint: #222228; --w-surface: #2C2C34; --w-ink: #F1EEE8; --w-body: #D1CFCB; --w-soft: #D1CFCB; --w-muted: #A8A5A0; --w-link: #C9A84C;
		--w-line: rgba(241, 238, 232, .10); --w-line-mid: rgba(241, 238, 232, .17); --w-line-strong: rgba(241, 238, 232, .24); --w-hover: #33333C; --w-cell-tint: rgba(26, 26, 32, .35);
		--w-shadow: 0 18px 40px -20px rgba(0, 0, 0, .6); --w-dash: rgba(241, 238, 232, .34); --w-foot: rgba(0, 0, 0, .16);
	}
	.wwh-sec { background: var(--w-band) !important; color: var(--w-body) !important; }
	.wwh-sec--tint { background: var(--w-tint) !important; }
	.wwh-sec--dark { background: #111115 !important; }
	.wwh-cost { --c-band: #111115 !important; }
	.wwh-sec--tint::before { background-image: var(--w-grain-light); opacity: .035; }
	.wwh-sec h2, .wwh-sec h3, .wwh-sec dt, .wwh-row__title, .wwh-guides__q { color: var(--w-ink) !important; }
	.wwh-sec p, .wwh-sec li, .wwh-sec dd, .wwh-sec td { color: var(--w-body) !important; }
	.wwh-sec th { color: var(--w-ink) !important; }
	.wwh-sec thead th, .wwh-label, .wwh-guides__n { color: var(--w-muted) !important; }
	.wwh-sec a, .wwh-row__cta, .wwh-more { color: var(--w-link) !important; }
	.wwh-h1-kicker { color: #C9A84C !important; }
	.wwh-row__cta, .wwh-row__cta span { color: #C9A84C !important; }
	.wwh-sec .wwh-pick__call a, .wwh-pick__count b, .wwh-sec .wwh-pick__text .wwh-line:first-child { color: var(--w-ink) !important; }
	.wwh-sec .wwh-pick__call, .wwh-sec .wwh-pick__nav { color: var(--w-muted) !important; }
	.wwh-sec .wwh-pick__text .wwh-line { color: var(--w-body) !important; }
	.wwh-pick__q { color: var(--w-ink) !important; }
	.wwh { --w-pick-line: rgba(241, 238, 232, .30); --w-pick-on: #3A3A46; --w-pick-on-line: #C9A84C; }
	.wwh-pick__body.is-ready .wwh-pick__q.is-on { color: #F1EEE8 !important; }
	.wwh-pick__chev { color: #C9A84C; }
	.wwh-pick__body.is-ready .wwh-pick__chev { opacity: .9; }
	.wwh-sec .wwh-pick__body.is-ready .wwh-pick__title { color: var(--w-muted) !important; }
	.wwh-pick__next { box-shadow: inset 0 0 0 1px #C9A84C; }
	.wwh-sec .wwh-head > p .wwh-line { color: var(--w-body) !important; }
	.wwh-ring { color: var(--w-ink) !important; }
	.wwh-ring--solid, .wwh .wwh-route--done .wwh-ring { color: #1A1A20 !important; }
	.wwh .wwh-ask { color: var(--w-body) !important; }
	.wwh-moments__head { color: var(--w-body) !important; }
	.wwh-moments--after .wwh-moments__head { color: var(--w-ink) !important; }
	.wwh-sec a.wwh-moment__next { color: var(--w-ink) !important; }
	.wwh-moment__next .wwh-arrow { color: var(--w-ink); }
	.wwh-moments__foot { color: var(--w-body) !important; }
	.wwh-moments__foot strong { color: var(--w-ink) !important; }
	.wwh-sec .wwh-pull blockquote p, .wwh-pull__name, .wwh-rev__name, .wwh-sec .wwh-who__name, .wwh-sec .wwh-revs__head h3, .wwh-sec .wwh-pledge__label, .wwh-sec .wwh-pledge__text, .wwh-sec .wwh-who__text .wwh-line--key { color: var(--w-ink) !important; }
	.wwh-sec .wwh-who__role, .wwh-sec .wwh-revs__head p, .wwh-sec .wwh-rev__by, .wwh-pledge__small { color: var(--w-muted) !important; }
	.wwh-sec .wwh-pledge__more .wwh-more { color: var(--w-link) !important; }
	.wwh .wwh-stars, .wwh .wwh-stars svg { color: #C9A84C !important; }
	.wwh .wwh-rev__by span:not(.wwh-rev__name), .wwh .wwh-pull figcaption span:not(.wwh-pull__name) { color: var(--w-muted) !important; }
	.wwh-pull figcaption { color: var(--w-muted) !important; }
	.wwh .wwh-cost__panel-head, .wwh .wwh-checks__label { color: #F1EEE8 !important; }
	.wwh-step__n { color: var(--w-muted) !important; }
	.wwh-step--first .wwh-step__n { color: #C9A84C !important; }
	.wwh-step:hover:not(.wwh-step--first) .wwh-step__n, .wwh-step.is-walk:not(.wwh-step--first) .wwh-step__n { color: var(--w-ink) !important; }
	.wwh-sec .wwh-step:hover .wwh-step__text .wwh-line { color: var(--w-ink) !important; }
	.wwh-sec .wwh-steps__more .wwh-more { color: var(--w-link) !important; }
	.wwh-sec .wwh-note__lead .wwh-line, .wwh-sec .wwh-step__text .wwh-line--key { color: var(--w-ink) !important; }
	.wwh-route--done .wwh-route__name { color: var(--w-ink) !important; }
	.wwh-share a { color: var(--w-ink) !important; }
	.wwh .hivelaw-journal-preview { background: var(--w-tint) !important; }
	.wwh .hivelaw-journal-preview .hivelaw-section__eyebrow { color: var(--w-body) !important; }
	.wwh .hivelaw-journal-preview .hivelaw-section__heading, .wwh .hivelaw-journal__title { color: var(--w-ink) !important; }
	.wwh .hivelaw-journal__card { background: var(--w-surface) !important; border-color: var(--w-line) !important; }
	.wwh .hivelaw-journal__read-more { color: #C9A84C !important; }
	.wwh .hivelaw-journal__card:first-child { background: #33333D !important; border-color: rgba(201, 168, 76, .55) !important; }
	.wwh .hivelaw-journal__card:first-child .hivelaw-journal__title { color: #F1EEE8 !important; }
	.wwh-faq__call .wwh-label, .wwh-who-group .hivelaw-reviews__count { color: #C9A84C !important; }
	.wwh .hivelaw-breadcrumbs { background: #111115 !important; }
	.wwh-body .hivelaw-hero__form-panel .ginput_container input, .wwh-body .hivelaw-hero__form-panel .ginput_container select {
		background-color: #2C2C34 !important; color: #F0EEE9 !important; border-color: rgba(201, 168, 76, .3) !important;
	}
	.wwh-body .hivelaw-hero__form-panel .ginput_container input::placeholder { color: #A8A5A0 !important; }
	.wwh-hero-call .wwh-label { color: #C9C6C0 !important; }
	.wwh-sub-lead { color: #FFFFFF !important; }
	.wwh-body .hivelaw-hero__title .wwh-h1-mark { color: inherit !important; }
	.wwh-hero-call__num { color: #FFFFFF !important; }
	.wwh-faq__call a { color: var(--w-ink) !important; }
	.wwh-cred-dark .hivelaw-credibility, .wwh-cred-slim .hivelaw-credibility { background: #1A1A20 !important; }
	.wwh .hivelaw-form-cta-block.wwh-close--plain { background: var(--w-band) !important; }
	.wwh-ring--icon { color: #C9A84C !important; }
	.wwh-pair { --w-ring-bg: #222228; }
	.wwh-llc__qa summary, .wwh-sec .wwh-llc__name, .wwh-sec .wwh-llc__offer, .wwh-sec .wwh-llc__line:not(.wwh-llc__line--not) .wwh-line, .wwh-sec .wwh-llc__answer .wwh-line:first-child, .wwh-sec .wwh-llc__qa .wwh-line:first-child { color: var(--w-ink) !important; }
	.wwh-sec .wwh-llc__answer h3 { color: var(--w-ink) !important; }
	.wwh-llc__line svg { color: #C9A84C; }
	.wwh-llc__line--not svg { color: var(--w-muted) !important; }
	.wwh-sec .wwh-llc__line--not .wwh-line, .wwh-sec .wwh-llc__a .wwh-line:not(:first-child) { color: var(--w-soft) !important; }
	.wwh-llc__qa summary { color: var(--w-ink) !important; }
	.wwh-llc__offer svg { color: #C9A84C; border-color: rgba(201, 168, 76, .8); }
	.wwh-hl { color: var(--w-ink) !important; }
	.wwh-sec .wwh-moment__text .wwh-line--key { color: var(--w-ink) !important; }
	.wwh-moments--after, .wwh-sec--tint .wwh-moments--after { --w-surface: #33333D; border-color: rgba(241, 238, 232, .16); box-shadow: inset 0 1px 0 rgba(241, 238, 232, .10), var(--w-shadow); }
	.wwh-emphasis p, .wwh-answer p, .wwh-offer, .wwh-offer p { color: var(--w-ink) !important; }
	.wwh-emphasis__label { color: var(--w-ink) !important; }
	.wwh-emphasis__small { color: var(--w-muted) !important; }
	.wwh-price__figure, .wwh-ledger__price { color: #FFFFFF !important; }
	.wwh-cost__terms li:first-child { color: #F1EEE8 !important; }
	.wwh-cost__terms li, .wwh-cost__lead { color: #D1CFCB !important; }
	.wwh-checks li, .wwh-checks li span, .wwh-ledger li { color: #F1EEE8 !important; }
	.wwh-checks li .wwh-item__help, .wwh-checks li .wwh-item__help span { color: #C9C6C0 !important; }
	.wwh-cost__foot, .wwh-cost__foot .wwh-line { color: #C9C6C0 !important; }
	.wwh-cost__panel > .wwh-cost__foot .wwh-line:first-child { color: #F1EEE8 !important; }
	.wwh-cost__body > .wwh-cost__foot .wwh-item__name { color: #C9C6C0 !important; }
	.wwh-guides__list a { color: var(--w-ink) !important; }
	.wwh-phone__num { color: var(--w-ink) !important; }
	.wwh-body .hivelaw-hero__title, .wwh-body .hivelaw-hero__title .wwh-h1-main, .wwh-cost h2, .wwh .hivelaw-form-cta-block__heading { color: #F1EEE8 !important; }
	.wwh-route .wwh-ring, .wwh-route__name { color: #F1EEE8 !important; }
	.wwh-route { --w-ring-bg: #111115; }
	.wwh-phone .wwh-label, .wwh-share a { color: #C9A84C !important; }
	.wwh-table tbody td::before { color: var(--w-muted); }
	.wwh { --w-rule: #D1CFCB; }
	.wwh-sec .wwh-table tbody th { color: #A8A5A0 !important; }
	.wwh-sec .wwh-table tbody tr.is-now th { color: #D1CFCB !important; }
	.wwh-sec .wwh-table tbody td, .wwh-sec .wwh-table .wwh-line { color: #F1EEE8 !important; }
	.wwh-table__good { color: #C9A84C !important; }
	.wwh-sec .wwh-table tbody td { color: var(--w-ink) !important; }
	.wwh-sec .wwh-table thead th { color: var(--w-muted) !important; }
	.wwh-table__good { color: #C9A84C; }
	.wwh { --w-dashgold: #C9A84C; }
	.wwh-who-group { background: var(--w-band) !important; }
	.wwh .hivelaw-faq { background: var(--w-band) !important; }
	.wwh .hivelaw-faq h2 { color: #F1EEE8 !important; }
}

/* ---------- Closing: OPTION A, the dark finale (Shawn's pick, 2026-10-02) ----------
   The page opens dark with the three moments ahead and a form; it closes dark with the three moments ticked on one gold
   line, the same form with the same dark fields, and a real phone number. Dark for every visitor, like the opening. */
.wwh .hivelaw-form-cta-block.wwh-fin {
	--w-band: #1A1A20; --w-surface: #2C2C34; --w-ink: #F1EEE8; --w-body: #D1CFCB; --w-soft: #C9C6C0; --w-muted: #A8A5A0; --w-link: #C9A84C;
	--w-line: rgba(241, 238, 232, .12); --w-line-strong: rgba(241, 238, 232, .30); --w-hover: #2C2C34;
	position: relative; isolation: isolate; background: #1A1A20 !important; color: #D1CFCB; border-top: 1px solid rgba(201, 168, 76, .38); border-bottom: 1px solid rgba(201, 168, 76, .38);
	padding-top: clamp(4rem, 8vw, 6rem); padding-bottom: clamp(4rem, 8vw, 6rem);
}
.wwh .wwh-fin::before { content: '' !important; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: var(--w-grain-light); opacity: .045; }
.wwh .wwh-fin .hivelaw-form-cta-block__inner { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 2.5rem; align-items: start; }
/* the three moments, ticked, on one line */
.wwh-fin__route { list-style: none; margin: 0; padding: 0; display: grid; row-gap: 0.75rem; position: relative; }
.wwh-fin__route li { position: relative; display: flex; align-items: center; gap: 0.875rem; margin: 0; padding: 0; }
.wwh-fin__route .wwh-ring { position: relative; z-index: 1; flex: 0 0 auto; width: 2.25rem; height: 2.25rem; background: #C9A84C; border-color: #C9A84C; color: #1A1A20 !important; }
.wwh-fin__route .wwh-ring svg { width: 1.125rem; height: 1.125rem; stroke-width: 2.75; }
.wwh .wwh-fin .wwh-fin__name { font-family: var(--font-display); font-weight: 600; font-size: 1.0625rem; line-height: 1.3; color: #F1EEE8 !important; text-wrap: balance; }
.wwh-fin__route li:not(:last-child)::after { content: ''; position: absolute; left: calc(1.125rem - 1px); top: 2.25rem; width: 2px; height: 0.75rem; background: #C9A84C; }
.wwh .wwh-fin .wwh-ask { color: #D1CFCB !important; }
.wwh .wwh-fin .hivelaw-form-cta-block__heading { color: #F1EEE8 !important; font-size: clamp(2.25rem, 4.6vw, 3.5rem); line-height: 1.05; letter-spacing: -0.025em; margin-bottom: 1.5rem; }
.wwh .wwh-fin .wwh-ask::before { content: ''; }
.wwh .wwh-fin .hivelaw-form-cta-block__subhead, .wwh .wwh-fin .hivelaw-form-cta-block__body { margin: 0 0 1.75rem; font-size: 1.1875rem; line-height: 1.5; color: #D1CFCB !important; max-width: 36rem; }
.wwh .wwh-fin .wwh-line, .wwh .wwh-fin .wwh-line span { color: #C9C6C0 !important; }
.wwh .wwh-fin .wwh-line { display: block; text-wrap: pretty; }
/* each sentence is a visible unit: a clear gap between sentences, a larger one between the two paragraphs */
.wwh .wwh-fin .wwh-line + .wwh-line { margin-top: 0.875rem; }
.wwh .wwh-fin .wwh-line--key, .wwh .wwh-fin .wwh-line--key span { color: #F1EEE8 !important; }
.wwh .wwh-fin .wwh-line--key { font-weight: 500; }
.wwh .wwh-fin .wwh-hl { color: #F1EEE8 !important; }
.wwh .wwh-fin .wwh-contact { border-top-color: rgba(241, 238, 232, .14); }
.wwh .wwh-fin .wwh-phone .wwh-label { font-family: var(--font-body); font-weight: 400; font-size: 1rem; letter-spacing: 0; text-transform: none; color: #D1CFCB !important; }
.wwh .wwh-fin .wwh-phone--plain .wwh-label { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden; clip-path: inset(50%) !important; }
.wwh .wwh-fin .wwh-phone__icon { background: transparent !important; color: #C9A84C !important; box-shadow: inset 0 0 0 1.5px #C9A84C; grid-row: 1 !important; }
.wwh .wwh-fin .wwh-phone--plain .wwh-phone__num { grid-row: 1; }
@media (max-width: 359px) {
	.wwh .wwh-fin .wwh-fin__name { font-size: 0.9375rem; }
	.wwh .wwh-fin .hivelaw-form-cta-block__form-card .gform_footer input[type="submit"], .wwh .wwh-fin .hivelaw-form-cta-block__form-card .gform_button { font-size: 0.9375rem !important; padding-left: 0.5rem !important; padding-right: 0.5rem !important; letter-spacing: 0 !important; }
	.wwh .wwh-fin .hivelaw-form-cta-block__form-card .ginput_container input::placeholder { font-size: 0.8125rem; }
	.wwh .wwh-fin .hivelaw-form-cta-block__form-card { padding: 1.25rem 1rem !important; }
}
@media (max-width: 599px) { .wwh .wwh-fin .wwh-st { white-space: normal; } .wwh .wwh-fin .wwh-line { text-wrap: balance; } }
.wwh .wwh-fin .wwh-phone__num { color: #F1EEE8 !important; }
.wwh .wwh-fin .wwh-share a { color: #F1EEE8 !important; border-color: rgba(241, 238, 232, .30); }
.wwh .wwh-fin .wwh-share a:hover, .wwh .wwh-fin .wwh-share a:focus-visible { border-color: #C9A84C; background: rgba(241, 238, 232, .06); }
.wwh .wwh-fin .wwh-share svg { color: #C9A84C; }
/* the form: the opening's panel and dark fields */
.wwh .wwh-fin .hivelaw-form-cta-block__form-card { border: 1px solid rgba(241, 238, 232, .16) !important; border-radius: var(--w-radius) !important; background: #222228 !important; padding: 2rem !important; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .6) !important; }
.wwh .wwh-fin .hivelaw-form-cta-block__form-card::before, .wwh .wwh-fin .hivelaw-form-cta-block__form-card::after { content: none !important; }
.wwh .wwh-fin .hivelaw-form-cta-block__form-card .gform_wrapper { margin: 0 !important; }
.wwh .wwh-fin .hivelaw-form-cta-block__form-card .gfield_label, .wwh .wwh-fin .hivelaw-form-cta-block__form-card .gfield label { font-size: 0.875rem !important; color: rgba(255, 255, 255, .86) !important; }
.wwh .wwh-fin .hivelaw-form-cta-block__form-card .name_first label, .wwh .wwh-fin .hivelaw-form-cta-block__form-card .name_last label { font-size: 0.75rem !important; color: rgba(255, 255, 255, .6) !important; }
.wwh .wwh-fin .hivelaw-form-cta-block__form-card .gfield_required, .wwh .wwh-fin .hivelaw-form-cta-block__form-card .gfield_required * { color: #C9C6C0 !important; }
.wwh .wwh-fin .hivelaw-form-cta-block__form-card .ginput_container input, .wwh .wwh-fin .hivelaw-form-cta-block__form-card .ginput_container select {
	min-height: 3rem; font-size: 1rem !important; background-color: #2C2C34 !important; color: #F0EEE9 !important; border: 1.5px solid rgba(241, 238, 232, .22) !important;
}
.wwh .wwh-fin .hivelaw-form-cta-block__form-card .ginput_container input::placeholder { font-size: 0.9375rem; color: #A8A5A0 !important; }
.wwh .wwh-fin .hivelaw-form-cta-block__form-card .ginput_container input:focus, .wwh .wwh-fin .hivelaw-form-cta-block__form-card .ginput_container select:focus { border-color: #C9A84C !important; outline: 2px solid rgba(201, 168, 76, .35); outline-offset: 1px; }
.wwh .wwh-fin .hivelaw-form-cta-block__form-card .gform_footer input[type="submit"], .wwh .wwh-fin .hivelaw-form-cta-block__form-card .gform_button { min-height: 3.5rem; font-size: 1.0625rem; }
.wwh .wwh-fin .hivelaw-form-cta-block__form-card .gform_footer { margin-top: 1rem !important; }
.wwh .wwh-fin .hivelaw-form-cta-block__form-card li.gfield { margin-top: 0.75rem !important; }
.wwh .wwh-fin .hivelaw-form-cta-block__form-card li.gfield:first-child { margin-top: 0 !important; }
@media (max-width: 599px) { .wwh .wwh-fin .hivelaw-form-cta-block__form-card { padding: 1.5rem 1.25rem 1.375rem !important; } }
@media (min-width: 641px) { .wwh .wwh-fin .hivelaw-form-cta-block__form-card li.gfield, .wwh .wwh-fin .hivelaw-form-cta-block__form-card .gform_footer { padding-right: 0 !important; } }
@media (min-width: 700px) and (max-width: 1099px) {
	/* across, with each name under its ring, on one continuous gold line */
	.wwh-fin__route { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 0; row-gap: 0; }
	.wwh-fin__route li { display: block; padding-right: 1.5rem; }
	.wwh .wwh-fin .wwh-fin__name { display: block; margin-top: 0.75rem; font-size: 1.125rem; }
	.wwh-fin__route li:not(:last-child)::after { top: calc(1.125rem - 1px); left: 2.75rem; right: 0.5rem; width: auto; height: 2px; }
}
@media (min-width: 1100px) {
	.wwh-fin__route .wwh-ring { width: 2.5rem; height: 2.5rem; }
	/* across: ring, name, then the gold line running to the next ring */
	.wwh-fin__route { display: flex; align-items: center; row-gap: 0; }
	.wwh-fin__route li { flex: 1 1 auto; }
	.wwh-fin__route li:last-child { flex: 0 0 auto; }
	.wwh-fin__route li:not(:last-child)::after { position: static; flex: 1 1 2rem; width: auto; height: 2px; margin: 0 1.25rem 0 0.375rem; }
	.wwh .wwh-fin .wwh-fin__name { font-size: 1.25rem; white-space: nowrap; }
	.wwh .wwh-fin .hivelaw-form-cta-block__inner { row-gap: 3.5rem; }
}
@media (min-width: 960px) {
	.wwh .wwh-fin .hivelaw-form-cta-block__inner { grid-template-columns: minmax(0, 55fr) minmax(0, 45fr); column-gap: clamp(3rem, 6vw, 5rem); align-items: stretch; }
	.wwh-fin__route { grid-column: 1 / -1; }
	.wwh .wwh-fin .hivelaw-form-cta-block__form-col { align-self: start; }
}
@media (min-width: 1200px) {
	/* the number, the share button and the gold form button share one centre line */
	.wwh .wwh-fin .hivelaw-form-cta-block__content-col { display: flex; flex-direction: column; }
	.wwh .wwh-fin .wwh-contact { margin-top: auto; margin-bottom: 2.5rem; }
}

/* ---------- Common questions: OPTION C, the question picker (Shawn's pick, 2026-10-02) ----------
   Deliberately NOT the heading-left / ruled-list-right pattern the sections above use (Shawn: "we're basically
   replicating the same design for each section"). The questions are large buttons; one answer shows beside them in
   large type on a quiet panel and changes when a question is picked. Phones and scripts-off: each answer sits under its
   own question. */
.wwh-pick__wrap { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "body" "call"; row-gap: 1.75rem; }
.wwh-pick__wrap > .wwh-head { grid-area: head; margin-bottom: 0; }
.wwh-pick__body { grid-area: body; display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 0.625rem; }
.wwh-sec .wwh-pick__call { grid-area: call; display: flex; flex-direction: column; gap: 0.125rem; margin: 0.5rem 0 0 !important; font-size: 1.0625rem; line-height: 1.4; color: var(--w-muted); }
.wwh-sec .wwh-pick__call a { align-self: flex-start; font-family: var(--font-display); font-weight: 700; font-size: 1.75rem; line-height: 1.2; letter-spacing: -0.015em; color: var(--w-ink); text-decoration: none; white-space: nowrap; }
.wwh-pick__q {
	display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%; min-height: 3.75rem; margin: 0; padding: 0.9375rem 1.25rem;
	border: 1px solid var(--w-pick-line, rgba(60, 52, 36, .34)); border-radius: 14px; background: transparent; color: var(--w-ink); cursor: pointer; text-align: left;
	font-family: var(--font-display); font-weight: 600; font-size: 1.125rem; line-height: 1.3; letter-spacing: -0.005em;
	transition: background-color .3s ease, color .3s ease, border-color .3s ease;
}
.wwh-pick__q > span { text-wrap: balance; }
.wwh-ph2 { display: inline-block; max-width: 100%; }
.wwh-pick__q:hover { border-color: var(--w-ink); }
.wwh-pick__q:focus-visible { outline: 2px solid #8B7232; outline-offset: 3px; }
.wwh-pick__chev { flex: 0 0 auto; width: 1.25rem; height: 1.25rem; color: #8B7232; stroke-width: 2; transition: transform .35s cubic-bezier(.2, .7, .2, 1), color .3s ease; }
/* under its question the answer keeps the question's own left edge and stays clear of the arrow column */
.wwh-pick__a { padding: 0.5rem 3.5rem 1rem calc(1.25rem + 1px); }
.wwh-sec .wwh-pick__text { max-width: 44rem; }
.wwh-pick__body:not(.is-ready) .wwh-pick__chev { display: none; }
.wwh-pick__title { display: none; }
.wwh-sec .wwh-pick__text { margin: 0 !important; font-size: 1.125rem; line-height: 1.55; }
.wwh-sec .wwh-pick__text .wwh-line { color: var(--w-body); text-wrap: pretty; }
.wwh-pick .wwh-st { white-space: normal; }
.wwh-sec .wwh-pick__text .wwh-line + .wwh-line { margin-top: 0.5rem; }
/* the first sentence is the direct answer */
.wwh-sec .wwh-pick__text .wwh-line:first-child { color: var(--w-ink); font-weight: 500; }
.wwh-pick__nav { display: none; }
@media (max-width: 999px) { .wwh-sec .wwh-pick__call a { padding-bottom: 0.125rem; background: linear-gradient(#C9A84C, #C9A84C) no-repeat 0 100% / 100% 2px; } }
/* with the script running: the picked question is filled, and only its answer shows */
.wwh-pick__body.is-ready .wwh-pick__q.is-on { background: var(--w-pick-on, #1A1A20); border-color: var(--w-pick-on-line, #1A1A20); color: #F1EEE8; }
.wwh-pick__body.is-ready .wwh-pick__q.is-on > span, .wwh-pick__body.is-ready .wwh-pick__q.is-on .wwh-ph2 { color: #F1EEE8 !important; }
.wwh-pick__body.is-ready .wwh-pick__q.is-on .wwh-pick__chev { color: #C9A84C; transform: rotate(180deg); }
.wwh-pick__body.is-ready .wwh-pick__a:not(.is-on) { display: none; }
@media (min-width: 1000px) {
	.wwh-pick__wrap { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "head call" "body body"; column-gap: 3rem; row-gap: 2.5rem; align-items: end; align-items: last baseline; }
	.wwh-pick__wrap > .wwh-head h2 { margin-bottom: 0; }
	.wwh-sec .wwh-pick__call { margin: 0 !important; align-items: flex-end; text-align: right; }
	.wwh-sec .wwh-pick__call a { align-self: flex-end; }
	.wwh-pick__body.is-ready { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 1.25rem; row-gap: 0.625rem; align-items: stretch; }
	.wwh-pick__body.is-ready .wwh-pick__q { grid-column: 1; }
	/* every question carries its arrow at rest, so it reads as something to press (a sideways iPad has no pointer) */
	.wwh-pick__body.is-ready .wwh-pick__chev { transform: rotate(-90deg); opacity: .6; }
	.wwh-pick__body.is-ready .wwh-pick__q.is-on .wwh-pick__chev { transform: rotate(-90deg) translateY(3px); opacity: 1; }
	.wwh-pick__body.is-ready .wwh-pick__q:hover .wwh-pick__chev { opacity: 1; transform: rotate(-90deg) translateY(3px); }
	/* every answer sits in the same place, so the panel is as tall as the longest one and never jumps */
	.wwh-pick__body.is-ready .wwh-pick__a, .wwh-pick__body.is-ready .wwh-pick__a:not(.is-on) {
		display: block; grid-column: 2; grid-row: 1 / span var(--n, 7); margin-left: 1.75rem; padding: 2.5rem 2.75rem 5.5rem;
		background: var(--w-tint); border-radius: 20px;
	}
	.wwh-pick__body.is-ready .wwh-pick__a:not(.is-on) { visibility: hidden; }
	/* in the panel the question is a quiet repeat; the direct answer is the biggest line */
	.wwh-sec .wwh-pick__body.is-ready .wwh-pick__title { display: block; margin: 0 0 1rem !important; font-family: var(--font-display); font-weight: 600; font-size: 1.125rem; line-height: 1.3; color: var(--w-muted); }
	.wwh-sec .wwh-pick__body.is-ready .wwh-pick__text { font-size: 1.25rem; line-height: 1.55; max-width: 35rem; }
	.wwh-sec .wwh-pick__body.is-ready .wwh-pick__text .wwh-line { text-wrap: balance; }
	.wwh-sec .wwh-pick__body.is-ready .wwh-pick__text .wwh-line + .wwh-line { margin-top: 0.75rem; }
	.wwh-sec .wwh-pick__body.is-ready .wwh-pick__text .wwh-line:first-child { font-size: clamp(1.625rem, 2.2vw, 1.875rem); line-height: 1.3; letter-spacing: -0.015em; font-weight: 500; }
	.wwh-sec .wwh-pick__body.is-ready .wwh-pick__text .wwh-line:first-child + .wwh-line { margin-top: 1.125rem; }
	.wwh-sec .wwh-pick__body.is-ready .wwh-pick__nav {
		display: flex; align-items: center; justify-content: space-between; grid-column: 2; grid-row: 1 / span var(--n, 7); align-self: end; z-index: 1;
		margin: 0 0 0 1.75rem !important; padding: 0 2.75rem 2rem; font-size: 1.0625rem; color: var(--w-muted); pointer-events: none;
	}
	.wwh-pick__count b { font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; color: var(--w-ink); }
	.wwh-pick__next { pointer-events: auto; display: grid; place-items: center; width: 3rem; height: 3rem; padding: 0; border: 0; border-radius: 50%; background: var(--w-pick-on, #1A1A20); color: #F1EEE8; cursor: pointer; transition: transform .25s ease; }
	.wwh-pick__next .wwh-arrow { color: #F1EEE8 !important; }
	.wwh-pick__next:focus-visible { outline: 2px solid #8B7232; outline-offset: 3px; }
	.wwh-pick__next .wwh-arrow { width: 1.25rem; height: 1.25rem; transition: transform .3s cubic-bezier(.2, .7, .2, 1); }
	.wwh-pick__next:hover .wwh-arrow { transform: translateX(3px); }
}
@media (min-width: 1200px) { .wwh-pick__q { font-size: 1.1875rem; padding-left: 1.5rem; padding-right: 1.25rem; } }
/* a picked answer arrives: its title, then its sentences, one after another */
@media screen and (prefers-reduced-motion: no-preference) {
	.wwh-pick__body.is-ready .wwh-pick__a.is-on .wwh-pick__title, .wwh-pick__body.is-ready .wwh-pick__a.is-on .wwh-line { animation: wwh-pick-in .5s cubic-bezier(.2, .7, .2, 1) both; }
	.wwh-pick__body.is-ready .wwh-pick__a.is-on .wwh-line:nth-child(1) { animation-delay: .08s; }
	.wwh-pick__body.is-ready .wwh-pick__a.is-on .wwh-line:nth-child(2) { animation-delay: .16s; }
	.wwh-pick__body.is-ready .wwh-pick__a.is-on .wwh-line:nth-child(3) { animation-delay: .24s; }
	.wwh-pick__body.is-ready .wwh-pick__a.is-on .wwh-line:nth-child(n + 4) { animation-delay: .32s; }
}
@keyframes wwh-pick-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ================= MOTION (see wwh-motion.js) =================
   One quiet language: things arrive once, a short way, slowly; the gold line follows the reader; the ring
   beside the moment being read carries a soft halo. Every "before" state needs .wwh-motion, which only the
   script adds, so nothing is hidden with scripts off, with reduced motion, or in print. */
.wwh-moment .wwh-ring { transition: box-shadow .45s ease, background-color .5s ease, color .5s ease; }
.wwh-moment.is-now .wwh-ring { box-shadow: 0 0 0 7px rgba(201, 168, 76, .16); }
.wwh-moments--after .wwh-moment.is-now .wwh-ring { box-shadow: 0 0 0 7px rgba(201, 168, 76, .2); }
@media screen and (prefers-reduced-motion: no-preference) {
	/* arrivals */
	.wwh-motion .wwh-rv { transition: opacity .6s cubic-bezier(.2, .7, .2, 1) var(--d, 0s), transform .8s cubic-bezier(.2, .7, .2, 1) var(--d, 0s); }
	.wwh-motion .is-pre { opacity: 0; transform: translateY(14px); }
	.wwh-motion .is-pre-fade { opacity: 0; }
	/* the short gold rule above a heading draws itself */
	.wwh-motion .wwh-rv.wwh-ask::before, .wwh-motion h2.wwh-rv::before { transition: width .7s cubic-bezier(.2, .7, .2, 1) calc(var(--d, 0s) + .1s); }
	.wwh-motion .is-pre.wwh-ask::before, .wwh-motion h2.is-pre::before { width: 0; }
	/* call and response: their words arrive, then the answer one line at a time, then its key words are underlined */
	/* the table's opening rule draws across as it arrives; the closing rule draws when the last row is reached */
	.wwh-motion .wwh-table::before, .wwh-motion .wwh-table::after, .wwh-motion .wwh-steplist::before, .wwh-motion .wwh-steplist::after, .wwh-motion .wwh-rows::before, .wwh-motion .wwh-rows::after, .wwh-motion .wwh-cost__panel::before, .wwh-motion .wwh-cost__body::after { clip-path: inset(-1px 0 -1px 0); will-change: clip-path; transition: clip-path 1.25s cubic-bezier(.6, .05, .35, 1); }
	.wwh-motion .wwh-table.is-pre-top::before, .wwh-motion .wwh-table.is-pre-end::after, .wwh-motion .wwh-steplist.is-pre-top::before, .wwh-motion .wwh-steplist.is-pre-end::after, .wwh-motion .wwh-rows.is-pre-top::before, .wwh-motion .wwh-rows.is-pre-end::after, .wwh-motion .wwh-cost__panel.is-pre-top::before, .wwh-motion .wwh-cost__panel.is-pre-end .wwh-cost__body::after { clip-path: inset(-1px 100% -1px 0); }
	/* How it works: each answer's hairline draws as the answer arrives; each numeral is drawn top to bottom as it settles;
	   then, once, the gold mark walks 1, 2, 3, 4 and comes back to rest on step 1 (see wwh-motion.js) */
	.wwh-motion .wwh-notes li.wwh-rv::before { clip-path: inset(-1px 0 -1px 0); transition: clip-path .9s cubic-bezier(.6, .05, .35, 1) calc(var(--d, 0s) + .1s); }
	.wwh-motion .wwh-notes li.is-pre::before { clip-path: inset(-1px 100% -1px 0); }
	/* (the inner span is clipped, not the numeral itself: a fully clipped element is never "seen" arriving) */
	.wwh-step__n > span { display: inline-block; }
	.wwh-motion .wwh-step__n.wwh-rv > span { clip-path: inset(0 0 -12% 0); transition: transform .7s cubic-bezier(.2, .8, .2, 1) var(--d, 0s), clip-path .7s cubic-bezier(.3, .6, .2, 1) var(--d, 0s); }
	.wwh-motion .wwh-step__n.is-pre-fade > span { transform: translateY(0.35em); clip-path: inset(0 0 100% 0); }
	.wwh-motion .wwh-step__text .wwh-line--big.wwh-rv { transition-duration: .6s, .9s; }
	.wwh-motion .wwh-step__text .wwh-line--big.is-pre { transform: translateY(20px); }
	/* Who you'll work with: the quote mark lands, the stars arrive one by one, the two rules draw, the guarantee's underline draws */
	.wwh-motion .wwh-pull.wwh-rv blockquote::before { transform-origin: 0 60%; transition: transform .6s cubic-bezier(.3, 1.4, .5, 1) calc(var(--d, 0s) + .25s), opacity .4s ease calc(var(--d, 0s) + .25s); }
	.wwh-motion .wwh-pull.is-pre blockquote::before { transform: scale(.5); opacity: 0; }
	.wwh-motion .wwh-rev.wwh-rv .wwh-stars { justify-self: start; clip-path: inset(0 0 0 0); transition: clip-path .7s cubic-bezier(.4, 0, .2, 1) calc(var(--d, 0s) + .3s); }
	.wwh-motion .wwh-rev.is-pre .wwh-stars { clip-path: inset(0 100% 0 0); }
	.wwh-motion .wwh-revs::before, .wwh-motion .wwh-revs::after { clip-path: inset(-1px 0 -1px 0); will-change: clip-path; transition: clip-path 1s cubic-bezier(.6, .05, .35, 1); }
	.wwh-motion .wwh-revs.is-pre-top::before, .wwh-motion .wwh-revs.is-pre-end::after { clip-path: inset(-1px 100% -1px 0); }
	.wwh-motion .wwh-pledge__text.wwh-rv .wwh-hl { transition: background-size .8s cubic-bezier(.2, .7, .2, 1) calc(var(--d, 0s) + .5s); }
	.wwh-motion .wwh-pledge__text.is-pre .wwh-hl { background-size: 0 2px; }
	.wwh-motion .wwh-who__photo.wwh-rv { transition-duration: .8s, 1s; }
	/* the guides list: each row's arrow slides in from the left as the row arrives */
	.wwh-motion .wwh-rows li.wwh-rv .wwh-row__cta .wwh-arrow { transition: transform .6s cubic-bezier(.2, .7, .2, 1) calc(var(--d, 0s) + .2s), opacity .4s ease calc(var(--d, 0s) + .2s); }
	.wwh-motion .wwh-rows li.is-pre .wwh-row__cta .wwh-arrow { transform: translateX(-12px); opacity: 0; }
	/* From the Journal: the three panels rise one after another; the feature's short gold rule draws */
	.wwh-motion .hivelaw-journal__card.wwh-rv { transition: opacity .6s cubic-bezier(.2, .7, .2, 1) var(--d, 0s), transform .8s cubic-bezier(.2, .7, .2, 1) var(--d, 0s), box-shadow .35s ease; }
	/* the finale: ring, tick, then the line runs on to the next ring */
	.wwh-motion .wwh-fin__route.is-pre-ticks .wwh-ring { opacity: 0; transform: scale(.6); transition: opacity .4s ease, transform .55s cubic-bezier(.3, 1.4, .5, 1); }
	.wwh-motion .wwh-fin__route.is-pre-ticks svg polyline { stroke-dasharray: 24; stroke-dashoffset: 24; transition: stroke-dashoffset .3s ease; }
	.wwh-motion .wwh-fin__route.is-pre-ticks .wwh-fin__name { opacity: 0; transition: opacity .6s ease; }
	.wwh-motion .wwh-fin__route.is-pre-ticks li::after { transform: scale(0); transform-origin: 0 0; transition: transform .35s cubic-bezier(.4, 0, .2, 1); }
	.wwh-motion .wwh-fin__route.is-in .wwh-ring { opacity: 1; transform: none; }
	.wwh-motion .wwh-fin__route.is-in svg polyline { stroke-dashoffset: 0; }
	.wwh-motion .wwh-fin__route.is-in .wwh-fin__name { opacity: 1; }
	.wwh-motion .wwh-fin__route.is-in li::after { transform: none; }
	.wwh-motion .wwh-fin__route.is-pre-ticks li:nth-child(1) .wwh-ring, .wwh-motion .wwh-fin__route.is-pre-ticks li:nth-child(1) .wwh-fin__name { transition-delay: .05s; }
	.wwh-motion .wwh-fin__route.is-pre-ticks li:nth-child(1) polyline { transition-delay: .25s; }
	.wwh-motion .wwh-fin__route.is-pre-ticks li:nth-child(1)::after { transition-delay: .3s; }
	.wwh-motion .wwh-fin__route.is-pre-ticks li:nth-child(2) .wwh-ring, .wwh-motion .wwh-fin__route.is-pre-ticks li:nth-child(2) .wwh-fin__name { transition-delay: .5s; }
	.wwh-motion .wwh-fin__route.is-pre-ticks li:nth-child(2) polyline { transition-delay: .7s; }
	.wwh-motion .wwh-fin__route.is-pre-ticks li:nth-child(2)::after { transition-delay: .75s; }
	.wwh-motion .wwh-fin__route.is-pre-ticks li:nth-child(3) .wwh-ring, .wwh-motion .wwh-fin__route.is-pre-ticks li:nth-child(3) .wwh-fin__name { transition-delay: .95s; }
	.wwh-motion .wwh-fin__route.is-pre-ticks li:nth-child(3) polyline { transition-delay: 1.1s; }
	.wwh-motion .wwh-fin .wwh-line.wwh-rv .wwh-hl { transition: background-size .7s cubic-bezier(.2, .7, .2, 1) calc(var(--d, 0s) + .4s); }
	/* LLC: the two rules draw, the two jobs arrive side by side */
	.wwh-motion .wwh-llc__pair::before, .wwh-motion .wwh-llc__pair::after { clip-path: inset(-1px 0 -1px 0); transition: clip-path 1s cubic-bezier(.6, .05, .35, 1); }
	.wwh-motion .wwh-llc__pair.is-pre-top::before, .wwh-motion .wwh-llc__pair.is-pre-end::after { clip-path: inset(-1px 100% -1px 0); }
	/* the hairline between the two jobs draws downward; each tick and each dash draws as its line arrives; the trust column follows the LLC column */
	.wwh-motion .wwh-llc__side + .wwh-llc__side::before { clip-path: inset(0 -1px 0 -1px); transition: clip-path .9s cubic-bezier(.4, 0, .2, 1) .35s; }
	.wwh-motion .wwh-llc__pair.is-pre-top .wwh-llc__side + .wwh-llc__side::before { clip-path: inset(0 -1px 100% -1px); }
	.wwh-motion .wwh-llc__line.wwh-rv svg { stroke-dasharray: 24; stroke-dashoffset: 0; transition: stroke-dashoffset .5s ease calc(var(--d, 0s) + .3s); }
	.wwh-motion .wwh-llc__line.is-pre svg { stroke-dashoffset: 24; }
	.wwh-motion .wwh-llc__offer.wwh-rv svg { stroke-dasharray: 16; stroke-dashoffset: 0; transition: stroke-dashoffset .5s ease .35s; }
	.wwh-motion .wwh-llc__offer.is-pre svg { stroke-dashoffset: 16; }
	/* the answer: its short gold rule draws, the statement rises a little further and slower than the rest, then its underline draws */
	.wwh-motion .wwh-llc__answer .wwh-line:first-child.wwh-rv { transition-duration: .7s, 1s; }
	.wwh-motion .wwh-llc__answer .wwh-line:first-child.is-pre { transform: translateY(22px); }
	.wwh-motion .wwh-llc__answer .wwh-line:first-child.wwh-rv .wwh-hl { transition: background-size .9s cubic-bezier(.2, .7, .2, 1) .55s; }
	/* the price warms: a faint glow comes up behind the figure once it has arrived; the one underline draws after its words */
	.wwh-motion .wwh-price.wwh-rv .wwh-price__figure::before { transition: opacity 1.1s ease calc(var(--d, 0s) + .3s); }
	.wwh-motion .wwh-price.is-pre .wwh-price__figure::before { opacity: 0; }
	.wwh-motion .wwh-cost__terms.wwh-rv .wwh-hl, .wwh-motion .wwh-cost__lead.wwh-rv .wwh-hl { transition: background-size .7s cubic-bezier(.2, .7, .2, 1) calc(var(--d, 0s) + .55s); }
	.wwh-motion .wwh-cost__terms.is-pre .wwh-hl, .wwh-motion .wwh-cost__lead.is-pre .wwh-hl { background-size: 0 2px; }
	.wwh-motion .wwh-cost__foot.wwh-rv svg { stroke-dasharray: 16; stroke-dashoffset: 0; transition: stroke-dashoffset .5s ease calc(var(--d, 0s) + .28s), opacity .6s cubic-bezier(.2, .7, .2, 1) var(--d, 0s), transform .8s cubic-bezier(.2, .7, .2, 1) var(--d, 0s); }
	.wwh-motion .wwh-cost__foot.is-pre svg { stroke-dashoffset: 16; }
	.wwh-motion .wwh-table tr.is-good::after { transition: opacity .6s ease .1s; }
	.wwh-motion .wwh-table tr.is-good:has(th.is-pre-fade)::after { opacity: 0; }
	/* the whole row settles in about 0.6s; the underline draws with its own line, not after the row */
	.wwh-motion .wwh-table th.wwh-rv { transition-duration: .4s; }
	.wwh-motion .wwh-line.wwh-rv { transition-duration: .45s, .5s; transition-delay: calc(var(--d, 0s) * 1.4); }
	.wwh-motion .wwh-line.wwh-rv .wwh-hl { transition: background-size .5s cubic-bezier(.2, .7, .2, 1) calc(var(--d, 0s) * 1.4 + .12s); }
	.wwh-motion .wwh-line.is-pre .wwh-hl { background-size: 0 2px; }
	.wwh-motion .wwh-table__good polyline { stroke-dasharray: 24; stroke-dashoffset: 0; transition: stroke-dashoffset .45s ease .25s; }
	.wwh-motion .wwh-table tr:has(th.is-pre-fade) .wwh-table__good polyline { stroke-dashoffset: 24; }
	/* ticks in the price list draw as each line arrives */
	.wwh-motion .wwh-checks li.wwh-rv, .wwh-motion .wwh-checks li.is-pre, .wwh-motion .wwh-cost__body > .wwh-cost__foot.wwh-rv, .wwh-motion .wwh-cost__body > .wwh-cost__foot.is-pre { opacity: 1; transform: none; transition: none; }
	.wwh-motion .wwh-checks li.wwh-rv > *, .wwh-motion .wwh-cost__body > .wwh-cost__foot.wwh-rv > * { transition: opacity .6s cubic-bezier(.2, .7, .2, 1) var(--d, 0s), transform .8s cubic-bezier(.2, .7, .2, 1) var(--d, 0s); }
	.wwh-motion .wwh-checks li.is-pre > *, .wwh-motion .wwh-cost__body > .wwh-cost__foot.is-pre > * { opacity: 0; transform: translateY(12px); }
	.wwh-motion .wwh-checks li.wwh-rv::before, .wwh-motion .wwh-cost__body > .wwh-cost__foot.wwh-rv::before { transition: opacity .5s ease var(--d, 0s); }
	.wwh-motion .wwh-checks li.is-pre::before, .wwh-motion .wwh-cost__body > .wwh-cost__foot.is-pre::before { opacity: 0; }
	.wwh-motion .wwh-cost__panel::before { transition-duration: .55s; }
	.wwh-motion .wwh-checks li.wwh-rv svg { stroke-dasharray: 24; stroke-dashoffset: 0; transition: stroke-dashoffset .5s ease calc(var(--d, 0s) + .28s), opacity .6s cubic-bezier(.2, .7, .2, 1) var(--d, 0s), transform .8s cubic-bezier(.2, .7, .2, 1) var(--d, 0s); }
	.wwh-motion .wwh-checks li.is-pre svg { stroke-dashoffset: 24; }

	/* the line follows the reader down the three moments */
	.wwh-motion .wwh-moments.is-live .wwh-moment::before { clip-path: inset(0 -4px calc(100% - var(--seg, 0px)) -4px); }
	.wwh-motion .wwh-moments.is-live .wwh-moments__head::after { clip-path: inset(0 -4px 100% -4px); transition: clip-path .4s ease; }
	.wwh-motion .wwh-moments.is-live .wwh-moments__head.is-reached::after { clip-path: inset(0 -4px 0 -4px); }
	.wwh-motion .wwh-moments.is-live .wwh-moments__head::before { transform: scale(.4); opacity: 0; transition: transform .5s cubic-bezier(.3, 1.4, .5, 1), opacity .4s ease; }
	.wwh-motion .wwh-moments.is-live .wwh-moments__head.is-reached::before { transform: none; opacity: 1; }
	/* without a plan: each open ring lands as the line reaches it, then its consequence is underlined */
	.wwh-motion .wwh-moments.is-live:not(.wwh-moments--after) .wwh-ring { opacity: 0; transform: scale(.7); transition: opacity .4s ease, transform .55s cubic-bezier(.3, 1.4, .5, 1), box-shadow .45s ease; }
	.wwh-motion .wwh-moments.is-live:not(.wwh-moments--after) .is-reached .wwh-ring { opacity: 1; transform: none; }
	.wwh-motion .wwh-moments.is-live .wwh-hl { transition: background-size .8s cubic-bezier(.2, .7, .2, 1) .45s; }
	.wwh-motion .wwh-moments.is-live .wwh-moment:not(.is-reached) .wwh-hl { background-size: 0 2px; }
	.wwh-motion .wwh-moments.is-live .wwh-moments__foot::after { clip-path: inset(0 -4px 100% -4px); transition: clip-path .4s ease; }
	.wwh-motion .wwh-moments.is-live .wwh-moments__foot.is-reached::after { clip-path: inset(0 -4px 0 -4px); }
	.wwh-motion .wwh-moments.is-live .wwh-moments__foot::before { transform: scale(0); transition: transform .5s cubic-bezier(.3, 1.4, .5, 1) .3s; }
	.wwh-motion .wwh-moments.is-live .wwh-moments__foot.is-reached::before { transform: none; }
	/* with your plan: the rings start open and fill as the line reaches them. The plan falls into place. */
	.wwh-motion .wwh-moments--after.is-live .wwh-moment:not(.is-reached) .wwh-ring { background: var(--w-surface); color: var(--w-ink) !important; }
	.wwh-motion .wwh-moments--after.is-live .wwh-moment.is-reached .wwh-ring { animation: wwh-set .6s cubic-bezier(.3, 1.4, .5, 1); }
	/* the tip of the solid line fades out over a few pixels, so a paused frame never shows a blunt cut */
	.wwh-motion .wwh-moments--after.is-live .wwh-moment::before {
		clip-path: none;
		-webkit-mask-image: linear-gradient(to bottom, #000 calc(var(--seg, 0px) - 18px), transparent var(--seg, 0px));
		mask-image: linear-gradient(to bottom, #000 calc(var(--seg, 0px) - 18px), transparent var(--seg, 0px));
	}
	.wwh-motion .wwh-moments--after.is-live .wwh-moment.is-full::before { -webkit-mask-image: none; mask-image: none; }

	/* the ending: three ticks land one by one on a line that draws down (or across) */
	.wwh-motion .wwh-route--done.is-pre-ticks .wwh-ring { opacity: 0; transform: scale(.6); transition: opacity .4s ease, transform .55s cubic-bezier(.3, 1.4, .5, 1); }
	.wwh-motion .wwh-route--done.is-pre-ticks svg polyline { stroke-dasharray: 24; stroke-dashoffset: 24; transition: stroke-dashoffset .45s ease; }
	.wwh-motion .wwh-route--done.is-pre-ticks::before { clip-path: inset(0 -3px 100% -3px); transition: clip-path 1.1s cubic-bezier(.4, 0, .2, 1) .15s; }
	.wwh-motion .wwh-route--done.is-pre-ticks .wwh-route__name { opacity: 0; transition: opacity .6s ease; }
	.wwh-motion .wwh-route--done.is-in .wwh-ring { opacity: 1; transform: none; }
	.wwh-motion .wwh-route--done.is-in svg polyline { stroke-dashoffset: 0; }
	.wwh-motion .wwh-route--done.is-in::before { clip-path: inset(0 -3px 0 -3px); }
	.wwh-motion .wwh-route--done.is-in .wwh-route__name { opacity: 1; }
	.wwh-motion .wwh-route--done.is-pre-ticks li:nth-child(1) .wwh-ring, .wwh-motion .wwh-route--done.is-pre-ticks li:nth-child(1) .wwh-route__name { transition-delay: .1s; }
	.wwh-motion .wwh-route--done.is-pre-ticks li:nth-child(1) polyline { transition-delay: .35s; }
	.wwh-motion .wwh-route--done.is-pre-ticks li:nth-child(2) .wwh-ring, .wwh-motion .wwh-route--done.is-pre-ticks li:nth-child(2) .wwh-route__name { transition-delay: .5s; }
	.wwh-motion .wwh-route--done.is-pre-ticks li:nth-child(2) polyline { transition-delay: .75s; }
	.wwh-motion .wwh-route--done.is-pre-ticks li:nth-child(3) .wwh-ring, .wwh-motion .wwh-route--done.is-pre-ticks li:nth-child(3) .wwh-route__name { transition-delay: .9s; }
	.wwh-motion .wwh-route--done.is-pre-ticks li:nth-child(3) polyline { transition-delay: 1.15s; }

	/* the opening: "Today" breathes, very slowly. You are here. */
	.wwh-route__now::after {
		content: ''; position: absolute; left: calc(var(--r) / 2 - 0.3125rem); top: 50%; width: 0.625rem; height: 0.625rem; margin-top: -0.3125rem;
		border-radius: 50%; border: 1px solid #C9A84C; pointer-events: none; animation: wwh-pulse 3.6s ease-out 2.2s infinite;
	}
	.wwh-body .hivelaw-hero__form-panel { animation: wwh-rise .9s cubic-bezier(.2, .7, .2, 1) .25s both; }
}
@keyframes wwh-set { 0% { transform: scale(.82); } 60% { transform: scale(1.08); } 100% { transform: none; } }
@keyframes wwh-pulse { 0% { transform: scale(1); opacity: .7; } 70%, 100% { transform: scale(3.4); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
	.wwh-arrow, .wwh-row, .wwh-guides__chev, .wwh-guides summary { transition: none !important; }
}

/* LLC short answers, dark mode: the question outranks the answer, as it does in light mode */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .wwh-sec .wwh-llc__qa summary, :root:not([data-theme="light"]) .wwh-sec .wwh-llc__qa summary span { color: #F8F6F2 !important; } }

/* ---------- GUIDES LIST, OPTION A (2026-10-03): one guide per question, the rest tucked under "N more guides" ---------- */
.wwh-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.wwh-nb { white-space: nowrap; }
.wwh-lib-sec .wwh-head { max-width: 44rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.wwh-lib { margin: 0 !important; padding: 0 !important; list-style: none; border-bottom: 1px solid var(--w-line-mid, rgba(26, 26, 32, .16)); }
.wwh-lib__item { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 0.375rem; padding: 1.5rem 0 0.75rem; border-top: 1px solid var(--w-line-mid, rgba(26, 26, 32, .16)); }
.wwh-sec .wwh-lib__q { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: 1.25rem !important; line-height: 1.3; letter-spacing: -0.005em; color: var(--w-ink); text-wrap: pretty; }
.wwh-lib__a { min-width: 0; }
.wwh-sec .wwh-lib__start { margin: 0; padding: 0.375rem 0; font-size: 1.125rem; line-height: 1.5; max-width: none; text-wrap: wrap; }
.wwh-sec .wwh-lib__hint { display: block; color: var(--w-muted); font-size: 1rem; line-height: 1.5; margin-bottom: 0.125rem; }   /* its own short line until there is room for it beside the guide */
.wwh-sec a.wwh-lib__lead { font-weight: 500; color: #2C2C34; text-decoration: none; }
.wwh-lib__t { text-decoration: underline; text-decoration-color: rgba(26, 26, 32, .5); text-decoration-thickness: 1px; text-underline-offset: 0.3em; transition: text-decoration-color .3s ease; }
.wwh-lib__lead:hover .wwh-lib__t, .wwh-lib__lead:focus-visible .wwh-lib__t { text-decoration-color: #C9A84C; text-decoration-thickness: 2px; }
.wwh-lib__lead .wwh-arrow { display: inline-block; vertical-align: -0.22em; margin-left: 0.625rem; width: 1.375rem; height: 1.375rem; stroke-width: 2; color: #8B7232; transition: transform .35s cubic-bezier(.2, .7, .2, 1); }
.wwh-lib__lead:hover .wwh-arrow, .wwh-lib__lead:focus-visible .wwh-arrow { transform: translateX(4px); }
.wwh-lib__lead:focus-visible, .wwh-lib__more summary:focus-visible, .wwh-lib__list a:focus-visible { outline: 2px solid #8B7232; outline-offset: 3px; border-radius: 4px; }
.wwh-lib__more { margin-top: 0.25rem; }
.wwh-lib__more summary { display: flex; align-items: center; gap: 0.5rem; width: 100%; min-height: 2.75rem; cursor: pointer; list-style: none; font-size: 1rem; color: var(--w-muted); }
.wwh-lib__more summary::-webkit-details-marker { display: none; }
.wwh-lib__more summary:hover { color: var(--w-ink); }
.wwh-lib__opened, .wwh-lib__more[open] .wwh-lib__closed { display: none; }
.wwh-lib__more[open] .wwh-lib__opened { display: inline; }
.wwh-lib__chev { width: 1.125rem; height: 1.125rem; transition: transform .25s ease; }
.wwh-lib__more[open] .wwh-lib__chev { transform: rotate(180deg); }
.wwh-lib__list { margin: 0 0 0.75rem !important; padding: 0 !important; list-style: none; }
.wwh-sec .wwh-lib__list a { display: inline-block; padding: 0.5rem 0; font-size: 1.0625rem; line-height: 1.4; color: #2C2C34; text-decoration: underline; text-decoration-color: rgba(26, 26, 32, .5); text-underline-offset: 0.3em; text-decoration-thickness: 1px; }
.wwh-sec .wwh-lib__list a:hover { text-decoration-color: #C9A84C; }
@media (min-width: 720px) {
	.wwh-lib__item { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: clamp(1.5rem, 4vw, 5rem); align-items: start; padding: 1.75rem 0 1rem; }
	.wwh-sec .wwh-lib__q { padding-top: 0.375rem; }
	.wwh-lib__more { margin-top: 0; }
}
@media (max-width: 359px) { .wwh-sec .wwh-lib__start { font-size: 1rem; } .wwh-lib__lead .wwh-arrow { margin-left: 0.5rem; width: 1.25rem; height: 1.25rem; } .wwh-sec .wwh-lib__list a { font-size: 1rem; } }
@media (min-width: 720px) and (max-width: 999px) { .wwh-lib__item { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 1.5rem; } }
@media (min-width: 1000px) {
	.wwh-sec .wwh-lib__q { font-size: 1.5rem !important; letter-spacing: -0.01em; padding-top: 0.25rem; }
	.wwh-sec .wwh-lib__start { font-size: 1.25rem; }
	.wwh-sec .wwh-lib__hint { display: inline; margin: 0 0.25rem 0 0; }
}
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .wwh-sec .wwh-lib__q { color: #F8F6F2 !important; }
	:root:not([data-theme="light"]) .wwh-sec a.wwh-lib__lead, :root:not([data-theme="light"]) .wwh-sec a.wwh-lib__lead span, :root:not([data-theme="light"]) .wwh-sec .wwh-lib__list a { color: #E4E0D8 !important; }
	:root:not([data-theme="light"]) .wwh-lib__t, :root:not([data-theme="light"]) .wwh-sec .wwh-lib__list a { text-decoration-color: rgba(248, 246, 242, .55); }
	:root:not([data-theme="light"]) .wwh-lib__lead .wwh-arrow { color: #C9A84C; }
	:root:not([data-theme="light"]) .wwh-lib, :root:not([data-theme="light"]) .wwh-lib__item { border-color: rgba(248, 246, 242, .16); }
	:root:not([data-theme="light"]) .wwh-lib__more summary, :root:not([data-theme="light"]) .wwh-lib__more summary span, :root:not([data-theme="light"]) .wwh-sec .wwh-lib__hint { color: #B9B4AB !important; }
}
@media (prefers-reduced-motion: reduce) { .wwh-lib__t, .wwh-lib__lead .wwh-arrow, .wwh-lib__chev { transition: none !important; } }

/* ---------- OPENING WITH NO MOMENTS LIST (2026-10-03): the phone line takes that spot, at every width ---------- */
.wwh-hero-call__after { grid-column: 1; margin-top: 0.25rem; color: #C9C6C0; font-size: 0.9375rem; line-height: 1.4; }
@media (max-width: 699px) { .wwh-hero-call__icon { grid-row: 1 / span 3; } }
@media (min-width: 700px) {
	.wwh-hero--call .wwh-hero-call {
		display: grid; grid-template-columns: minmax(0, 1fr) 3rem; align-items: center; column-gap: 1.25rem; max-width: 27rem;
		margin: 2.25rem 0 2.5rem; padding: 1.125rem 1.125rem 1.125rem 1.5rem; text-decoration: none;
		border: 1px solid rgba(241, 238, 232, .16); border-radius: 16px; background: #222228; transition: border-color .3s ease;
	}
	.wwh-hero--call .wwh-hero-call:hover { border-color: rgba(201, 168, 76, .6); }
	.wwh-hero--call .wwh-hero-call .wwh-label { grid-column: 1; color: #C9C6C0; font-family: var(--font-body); font-weight: 400; font-size: 1rem; letter-spacing: 0; text-transform: none; }
	.wwh-hero--call .wwh-hero-call__num { grid-column: 1; font-family: var(--font-display); font-weight: 700; font-size: 1.875rem; line-height: 1.15; letter-spacing: -0.015em; color: #FFFFFF; white-space: nowrap; }
	.wwh-hero--call .wwh-hero-call__icon { grid-column: 2; grid-row: 1 / span 3; width: 3rem; height: 3rem; padding: 0.8125rem; border-radius: 50%; background: #C9A84C; color: #1A1A20; }
}