/**
 * Hours at Work — marketing surface styles
 *
 * Self-contained (no dependency on in-app frontend.css). Loaded on the
 * network's main site routes: /, /signup, /pricing, /login, /terms, /privacy.
 *
 * Type:  Inter (UI) + Inter Tight (display headings) from Google Fonts.
 * Color: indigo primary, amber accent for compliance/trust signals.
 *
 * @since 2.5.0
 */

/* v2.102.0 E8 (UPHOLD-AUDIT H7): Inter + Inter Tight are now self-hosted
 * via assets/css/fonts.css, enqueued from
 * templates/marketing/partials/layout-header.php +
 * templates/frontend/partials/app-header.php +
 * includes/Frontend/LoginBranding.php. Previously (v2.20.0-v2.101.2) the
 * font <link> pointed at Google Fonts, which disclosed every visitor's IP
 * to Google LLC on page load. The self-hosted bundle removes that fetch
 * without changing the visual result. */

:root {
	/* v2.69.0 Forms Design System — Phase 6 §6.21/§6.22 Path A
	 * (operator decision Q5, 2026-06-19). Republish the in-app
	 * `--haw-color-*` palette here so the marketing surface derives
	 * from a single brand-color source. The marketing markup stays
	 * separate from the in-app cocoon (still `.haw-marketing__field`,
	 * not `.haw-field`); only the COLOR tokens are shared. A future
	 * palette tweak in `frontend.css :: .haw-app` should be mirrored
	 * into this `:root` block — both files live in this repo, so the
	 * single-source idea is documentation + mechanical mirror, not
	 * runtime inheritance.
	 *
	 * Geometry, type stacks, shadows, accent ring alpha, and the state
	 * (danger / ok) shades stay marketing-owned. Marketing intentionally
	 * uses slightly larger radii (10/14/18 vs in-app 4/8/12), darker
	 * state shades (red-700 vs in-app red-600) for higher contrast on
	 * its stone-50 bg, and a softer accent-ring alpha (0.18 vs 0.22).
	 * Those are deliberate brand chrome — not palette. */
	/* v2.76.0 Visual System v1 Phase 1 — palette mirror (cross-boundary
	 * tokens only). Per implementation guide §8.1, the marketing surface
	 * republishes the in-app palette so signup/login/pricing/landing
	 * surfaces match the in-app palette step-for-step. NOT mirrored:
	 * focal-bg / surface-active / focal-accent / pos-deep / active-* /
	 * trust-border / trust-glow / trust-deep / eyebrow — those are
	 * in-app-only tokens (focal pattern, three-tier surface, state
	 * splits, eyebrow chrome) that marketing doesn't consume. */
	--haw-color-text:           #1c1917;  /* stone-900 */
	--haw-color-muted:          #44403c;  /* MODIFIED — stone-600 → stone-700 (Phase 1) */
	--haw-color-muted-2:        #57534e;  /* MODIFIED — stone-500 → stone-600 per v1 §10.1 */
	--haw-color-bg:             #ffffff;
	--haw-color-surface:        #fafaf9;  /* stone-50 */
	--haw-color-surface-2:      #f5f5f4;  /* stone-100 */
	--haw-color-border:         #e7e5e4;  /* stone-200 */
	--haw-color-border-strong:  #d6d3d1;  /* stone-300 */
	--haw-color-accent:         #4338ca;  /* MODIFIED — indigo-600 → indigo-700 (Phase 1) */
	--haw-color-accent-hover:   #3730a3;  /* MODIFIED — indigo-700 → indigo-800 (Phase 1) */
	--haw-color-accent-tint:    #eef2ff;  /* indigo-50 (unchanged) */
	--haw-color-trust:          #f59e0b;  /* amber-500 */
	--haw-color-trust-soft:     #fffbeb;  /* amber-50 */
	--haw-color-trust-text:     #78350f;  /* amber-900 */

	/* Type stacks. */
	--haw-mk-font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
	--haw-mk-font-display: 'Inter Tight', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	--haw-mk-font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;

	/* Neutrals — Tailwind stone family. Warmer than slate; less
	 * institutional. The bg/surface inversion vs in-app is deliberate:
	 * marketing pages use the stone-50 "soft" tone for the body and
	 * pure white for elevated cards (warmer, more inviting); in-app
	 * uses pure white for the body and stone-50 for surface accents
	 * (denser, more workmanlike). Same two colors, swapped roles. */
	--haw-mk-bg:             var(--haw-color-surface);
	--haw-mk-surface:        var(--haw-color-bg);
	--haw-mk-surface-alt:    var(--haw-color-surface-2);
	--haw-mk-border:         var(--haw-color-border);
	--haw-mk-border-strong:  var(--haw-color-border-strong);
	--haw-mk-text:           var(--haw-color-text);
	--haw-mk-muted:          var(--haw-color-muted);
	--haw-mk-faint:          var(--haw-color-muted-2);

	/* Accent — indigo-600 / 700. Shared with the in-app accent so the
	 * brand reads as one product end-to-end. */
	--haw-mk-accent:         var(--haw-color-accent);
	--haw-mk-accent-strong:  var(--haw-color-accent-hover);
	--haw-mk-accent-soft:    var(--haw-color-accent-tint);
	/* Accent-ring stays at 0.18 alpha (in-app uses 0.22 inside the
	 * dense cocoon; marketing keeps the lighter touch). v2.76.0 —
	 * RGB shifts to indigo-700 (67, 56, 202) per Phase 1; alpha preserved. */
	--haw-mk-accent-ring: rgba(67, 56, 202, 0.18);

	/* Trust amber — reserved for compliance / signed-PDF / audit signals. */
	--haw-mk-trust:       var(--haw-color-trust);
	--haw-mk-trust-soft:  var(--haw-color-trust-soft);
	--haw-mk-trust-text:  var(--haw-color-trust-text);

	/* States — marketing uses red-700 / emerald-700 for higher contrast
	 * on its stone-50 background. In-app uses red-600 / emerald-600.
	 * The state colors stay marketing-owned for intent, not for
	 * branding. */
	--haw-mk-danger: #b91c1c;
	--haw-mk-danger-soft: #fee2e2;
	--haw-mk-ok: #047857;
	--haw-mk-ok-soft: #d1fae5;

	/* Geometry. */
	--haw-mk-radius: 10px;
	--haw-mk-radius-lg: 14px;
	--haw-mk-radius-xl: 18px;
	--haw-mk-shadow-sm: 0 1px 2px rgba(28, 25, 23, 0.04);
	--haw-mk-shadow-md: 0 4px 16px rgba(28, 25, 23, 0.06);
	--haw-mk-shadow-lg: 0 12px 40px rgba(67, 56, 202, 0.10);
}

html, body {
	height: auto;
	min-height: 100%;
}

body.haw-marketing {
	margin: 0;
	background: var(--haw-mk-bg);
	color: var(--haw-mk-text);
	font: 16px/1.6 var(--haw-mk-font-ui);
	font-feature-settings: 'ss01', 'cv11';
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* ----- Shared chrome ---------------------------------------------------- */

.haw-mk-top {
	background: var(--haw-mk-surface);
	border-bottom: 1px solid var(--haw-mk-border);
}
.haw-mk-top__inner {
	/* v2.58.25 — widened from 1140 to 1280 to match the page-content max-width
	 * used elsewhere (`.haw-settings-shell`, `.haw-app__content`, etc.), so
	 * the top bar reads as one continuous canvas with the body below it. */
	max-width: 1280px;
	margin: 0 auto;
	padding: 16px 28px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}
.haw-mk-top__brand {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: var(--haw-mk-text);
	font-family: var(--haw-mk-font-display);
	font-weight: 600;
	font-size: 17px;
	text-decoration: none;
	letter-spacing: -0.01em;
}
.haw-mk-top__brand-mark {
	color: var(--haw-mk-accent);
	font-size: 22px;
	line-height: 1;
	display: inline-flex;
	align-items: center;
}
/* 2.19.1: swap from the ◐ unicode glyph to the inline-SVG brand mark.
 * The SVG inherits color via currentColor and sits with the text via
 * a small negative baseline nudge. */
.haw-mk-top__brand-mark .haw-brand-mark { display: block; }
.haw-mk-footer__brand .haw-brand-mark {
	vertical-align: -0.22em;
	margin-right: 2px;
	/* v2.106.0 workstream E — clock logo color consistency. The parent
	 * `.haw-mk-footer__brand` sets `color: var(--haw-mk-text)` (stone-900)
	 * for the wordmark, which cascaded through `currentColor` on the SVG
	 * and painted the clock in near-black. Force the SVG's stroke to
	 * indigo-700 so the mark reads as the same brand purple used in the
	 * top nav (`.haw-mk-top__brand-mark`), the tenant app nav
	 * (`.haw-app-nav__brand .haw-brand-mark`), and the marketing-v7
	 * `.brand__mark`. Wordmark text stays stone-900 — this rule only
	 * overrides the SVG. */
	color: var(--haw-mk-accent);
}
.haw-mk-top__nav {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.haw-mk-top__nav a {
	color: var(--haw-mk-muted);
	font-weight: 500;
	font-size: 14.5px;
	text-decoration: none;
	padding: 8px 14px;
	border-radius: 8px;
	transition: color 120ms ease, background 120ms ease;
}
.haw-mk-top__nav a:hover { color: var(--haw-mk-text); background: var(--haw-mk-surface-alt); }
.haw-mk-top__nav a.is-active { color: var(--haw-mk-text); }
.haw-mk-top__nav a.haw-mk-top__cta {
	background: var(--haw-mk-text);
	color: #fff;
	padding: 9px 16px;
}
.haw-mk-top__nav a.haw-mk-top__cta:hover { background: var(--haw-mk-accent); }

/*
 * v2.58.25 — User menu (in-app top bar only).
 *
 * The username trigger reads as a rounded pill so it's clearly distinct
 * from the plain text-link nav items to its left (Timesheet / Approvals /
 * Reports). It opens a small dropdown carrying My account, Settings (cap-
 * gated), Help, and Sign out — items that previously sprawled across the
 * top-level nav. Mobile collapses the menu into the standard hamburger
 * panel so the layout stays consistent with the existing pattern.
 */
.haw-mk-top__user {
	position: relative;
	margin-left: 4px;
}
.haw-mk-top__user-trigger {
	background: var(--haw-mk-surface-alt);
	border: 1px solid var(--haw-mk-border);
	color: var(--haw-mk-text);
	font: inherit;
	font-weight: 600;
	font-size: 14.5px;
	padding: 6px 14px;
	border-radius: 999px;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
	white-space: nowrap;
}
.haw-mk-top__user-trigger:hover,
.haw-mk-top__user-trigger[aria-expanded="true"] {
	background: var(--haw-mk-text);
	border-color: var(--haw-mk-text);
	color: #fff;
}
.haw-mk-top__user-trigger.is-active {
	border-color: var(--haw-mk-text);
}
.haw-mk-top__user-trigger:focus-visible {
	outline: 2px solid var(--haw-mk-accent-ring);
	outline-offset: 2px;
}
.haw-mk-top__user-chevron {
	font-size: 11px;
	line-height: 1;
	transition: transform 120ms ease;
}
.haw-mk-top__user-trigger[aria-expanded="true"] .haw-mk-top__user-chevron {
	transform: rotate(180deg);
}

.haw-mk-top__user-menu {
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	background: var(--haw-mk-surface);
	border: 1px solid var(--haw-mk-border);
	border-radius: 10px;
	box-shadow: var(--haw-mk-shadow-md);
	min-width: 200px;
	padding: 6px;
	display: flex;
	flex-direction: column;
	gap: 0;
	z-index: 50;
}
.haw-mk-top__user-menu[hidden] { display: none; }
.haw-mk-top__user-menu a {
	display: block;
	padding: 9px 12px;
	border-radius: 6px;
	color: var(--haw-mk-muted);
	font-weight: 500;
	font-size: 14.5px;
	text-decoration: none;
	transition: background 120ms ease, color 120ms ease;
}
.haw-mk-top__user-menu a:hover {
	background: var(--haw-mk-surface-alt);
	color: var(--haw-mk-text);
}
.haw-mk-top__user-menu a.is-active {
	color: var(--haw-mk-text);
	background: var(--haw-mk-surface-alt);
}
/* v2.58.26 — small ↗ glyph on the Help menu item indicates "external link,
 * opens in a new tab". Sized down and de-emphasized so it reads as a marker
 * rather than a second word. */
.haw-mk-top__ext {
	font-size: 0.9em;
	opacity: 0.7;
	margin-left: 2px;
}

/*
 * v2.43.0: hamburger toggle. Hidden at desktop widths; visible below
 * the breakpoint where the horizontal nav collapses into a drop-down
 * panel. Three short bars stacked vertically — classic affordance,
 * recognized at-a-glance.
 */
.haw-mk-top__toggle {
	display: none;
	background: transparent;
	border: 0;
	padding: 8px 10px;
	cursor: pointer;
	border-radius: 8px;
	margin-left: auto;
}
.haw-mk-top__toggle:hover { background: var(--haw-mk-surface-alt); }
.haw-mk-top__toggle:focus-visible {
	outline: 2px solid var(--haw-mk-accent-ring);
	outline-offset: 2px;
}
.haw-mk-top__toggle > span {
	display: block;
	width: 22px;
	height: 2px;
	background: var(--haw-mk-text);
	border-radius: 2px;
	margin: 5px 0;
}

@media (max-width: 959px) {
	.haw-mk-top__toggle { display: inline-flex; flex-direction: column; align-items: center; }

	/* Collapse the horizontal nav into a vertical drop-down panel
	 * beneath the top bar. Hidden by default; toggling .is-open
	 * reveals it. Full-width so links remain comfortable tap targets. */
	.haw-mk-top__nav {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background: var(--haw-mk-surface);
		border-bottom: 1px solid var(--haw-mk-border);
		box-shadow: var(--haw-mk-shadow-md);
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: 8px 12px;
		z-index: 60;
	}
	.haw-mk-top__nav.is-open { display: flex; }
	.haw-mk-top__nav a {
		padding: 14px 12px;
		font-size: 16px;
		border-radius: 6px;
	}
	.haw-mk-top__nav a.haw-mk-top__cta {
		text-align: center;
		margin-top: 6px;
	}

	/* v2.58.25 — user menu inline within the collapsed nav panel.
	 * Trigger goes full-width to read as a normal panel item; the
	 * dropdown menu flows underneath in the panel instead of popping
	 * over (avoids stacking issues with the panel itself). */
	.haw-mk-top__user { margin-left: 0; width: 100%; }
	.haw-mk-top__user-trigger {
		width: 100%;
		justify-content: space-between;
		border-radius: 6px;
		padding: 14px 12px;
		font-size: 16px;
	}
	.haw-mk-top__user-menu {
		position: static;
		box-shadow: none;
		border: none;
		background: transparent;
		padding: 0 0 0 12px;
		min-width: 0;
	}
	.haw-mk-top__user-menu a {
		font-size: 16px;
		padding: 12px;
	}

	/* The top-bar inner is the positioning context for the absolute
	 * panel. Add some space-between so the toggle sits at the right. */
	.haw-mk-top__inner {
		position: relative;
		justify-content: space-between;
	}
}

/*
 * v2.44.0: setup-progress notification bar. Replaces the v2.36 pill
 * that lived inside the top nav. Full-width band, white text on the
 * brand-purple accent, sticky to viewport top so it stays visible
 * while the admin scrolls. Pulls the eye to the unfinished onboarding
 * without competing with the rest of the top-nav for space.
 *
 * Lives in marketing.css because both surfaces use the marketing CSS
 * bundle for shared chrome and this bar belongs to the in-app surface
 * (only tenant admins on tenant routes see it).
 */
.haw-setup-bar {
	display: block;
	background: var(--haw-mk-accent);
	color: #fff;
	text-decoration: none;
	font-weight: 500;
	transition: background 120ms ease;
}
.haw-setup-bar:hover { background: var(--haw-mk-accent-strong); }
.haw-setup-bar:focus-visible {
	outline: 2px solid #fff;
	outline-offset: -3px;
}
.haw-setup-bar__inner {
	max-width: 1140px;
	margin: 0 auto;
	padding: 10px 28px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	font-size: 14px;
}
.haw-setup-bar__msg {
	flex: 1 1 auto;
	color: #fff;
}
.haw-setup-bar__cta {
	white-space: nowrap;
	font-weight: 600;
	color: #fff;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
@media (max-width: 640px) {
	.haw-setup-bar__inner {
		padding: 10px 16px;
		font-size: 13px;
		gap: 10px;
	}
	.haw-setup-bar__cta { font-size: 13px; }
}

.haw-mk-main { display: block; }
.haw-mk-muted { color: var(--haw-mk-muted); }

.haw-mk-footer {
	border-top: 1px solid var(--haw-mk-border);
	background: var(--haw-mk-surface);
	margin-top: 80px;
}
.haw-mk-footer__inner {
	max-width: 1140px;
	margin: 0 auto;
	padding: 32px 28px;
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	gap: 16px;
	align-items: center;
}
.haw-mk-footer__brand {
	font-family: var(--haw-mk-font-display);
	font-weight: 600;
	margin: 0;
	color: var(--haw-mk-text);
}
.haw-mk-footer__nav {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 22px;
	justify-content: center;
}
.haw-mk-footer__nav a {
	color: var(--haw-mk-muted);
	text-decoration: none;
	font-size: 14px;
}
.haw-mk-footer__nav a:hover { color: var(--haw-mk-text); }
.haw-mk-footer__copy { margin: 0; text-align: right; font-size: 13px; color: var(--haw-mk-faint); }

@media (max-width: 720px) {
	.haw-mk-footer__inner { grid-template-columns: 1fr; text-align: center; }
	.haw-mk-footer__copy { text-align: center; }
}

/* ----- Buttons --------------------------------------------------------- */

.haw-landing__cta,
.haw-marketing__submit {
	display: inline-block;
	background: var(--haw-mk-accent);
	color: #fff;
	font-family: var(--haw-mk-font-ui);
	font-weight: 600;
	font-size: 15.5px;
	letter-spacing: -0.005em;
	text-decoration: none;
	padding: 14px 24px;
	border: 0;
	border-radius: var(--haw-mk-radius);
	box-shadow: var(--haw-mk-shadow-sm);
	transition: background 120ms ease, transform 60ms ease, box-shadow 120ms ease;
	cursor: pointer;
}
.haw-landing__cta:hover,
.haw-marketing__submit:hover:not([disabled]) {
	background: var(--haw-mk-accent-strong);
	box-shadow: var(--haw-mk-shadow-md);
}
.haw-landing__cta:active:not([disabled]),
.haw-marketing__submit:active:not([disabled]) {
	/* Tactile press from innage's active:scale-95 — gated by reduced-motion. */
	transform: scale(0.97);
}
@media (prefers-reduced-motion: reduce) {
	.haw-landing__cta:active:not([disabled]),
	.haw-marketing__submit:active:not([disabled]) { transform: none; }
}
.haw-landing__cta:focus-visible,
.haw-marketing__submit:focus-visible {
	outline: 3px solid var(--haw-mk-accent-ring);
	outline-offset: 2px;
}
.haw-landing__cta--alt {
	background: var(--haw-mk-surface);
	color: var(--haw-mk-text);
	border: 1px solid var(--haw-mk-border-strong);
	box-shadow: var(--haw-mk-shadow-sm);
}
.haw-landing__cta--alt:hover {
	background: var(--haw-mk-surface-alt);
	color: var(--haw-mk-text);
	box-shadow: var(--haw-mk-shadow-md);
}

/* ----- Landing page --------------------------------------------------- */

.haw-landing__hero {
	padding: 96px 28px 56px;
	text-align: center;
	max-width: 800px;
	margin: 0 auto;
}
.haw-landing__hero h1 {
	font-family: var(--haw-mk-font-display);
	font-weight: 600;
	font-size: 56px;
	line-height: 1.05;
	letter-spacing: -0.025em;
	margin: 0 0 18px;
}
.haw-landing__hero p {
	font-size: 19px;
	line-height: 1.55;
	color: var(--haw-mk-muted);
	margin: 0 0 36px;
}
.haw-landing__hero-cta-row {
	display: inline-flex;
	gap: 12px;
	flex-wrap: wrap;
	justify-content: center;
}
.haw-landing__hero-foot {
	margin-top: 22px;
	font-size: 14px;
	color: var(--haw-mk-faint);
}

/* v2.41.0: Trust band — sits below the hero product mock, anchored by a
 * hairline so it reads as the hero's footer rather than a floating chip row. */
.haw-landing__trust-band {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px 26px;
	margin: 24px auto 0;
	max-width: 720px;
	padding: 20px 28px 0;
	border-top: 1px solid var(--haw-mk-border);
}
.haw-landing__trust-item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	color: var(--haw-mk-trust-text);
	background: var(--haw-mk-trust-soft);
	border: 1px solid #fde68a;
	border-radius: 999px;
	padding: 5px 12px;
	font-weight: 500;
}
.haw-landing__trust-item::before {
	content: '✓';
	color: var(--haw-mk-trust);
	font-weight: 700;
}

/* v2.41.0: single-line audience strip. Replaces the v2.40 3-card grid;
 * the hero subhead already locks in the buyer mental model, so this is
 * confirmation, not introduction. */
.haw-landing__audience-strip {
	max-width: 760px;
	margin: 22px auto 0;
	padding: 0 28px;
	color: var(--haw-mk-faint);
	font-size: 14px;
	text-align: center;
}
.haw-landing__audience-strip strong {
	color: var(--haw-mk-text);
	font-weight: 600;
	margin: 0 4px;
}

/* v2.41.0: hero product mock — CSS-only weekly-grid silhouette. Pure
 * decoration; no real data. Chrome bar + 5x7 cell grid with a few
 * highlighted cells + an amber "Signed" pill in the chrome. */
.haw-landing__mock {
	max-width: 720px;
	margin: 40px auto 0;
	background: var(--haw-mk-surface);
	border: 1px solid var(--haw-mk-border);
	border-radius: var(--haw-mk-radius-lg);
	box-shadow: var(--haw-mk-shadow-md);
	overflow: hidden;
}
.haw-landing__mock-chrome {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 10px 14px;
	background: var(--haw-mk-surface-alt);
	border-bottom: 1px solid var(--haw-mk-border);
}
.haw-landing__mock-dot {
	width: 9px;
	height: 9px;
	border-radius: 999px;
	background: var(--haw-mk-border-strong);
}
.haw-landing__mock-label {
	margin-left: 10px;
	font-size: 12.5px;
	color: var(--haw-mk-faint);
	font-weight: 500;
}
.haw-landing__mock-pill {
	margin-left: auto;
	font-size: 11.5px;
	font-weight: 600;
	color: var(--haw-mk-trust-text);
	background: var(--haw-mk-trust-soft);
	border: 1px solid #fde68a;
	border-radius: 999px;
	padding: 3px 9px;
}
.haw-landing__mock-grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 8px;
	padding: 20px;
}
.haw-landing__mock-cell {
	height: 22px;
	border-radius: 4px;
	background: var(--haw-mk-surface-alt);
}
.haw-landing__mock-cell--filled {
	background: var(--haw-mk-accent);
	opacity: 0.85;
}

/* v2.41.0: full-bleed band wrappers so sections alternate white ↔ stone.
 * The wrapper handles full-width background; the inner container sets
 * the content max-width. */
.haw-landing__band {
	width: 100%;
	margin-top: 80px;
}
.haw-landing__band--alt {
	background: var(--haw-mk-surface-alt);
	padding: 64px 0;
	margin-top: 0;
}
.haw-landing__band--alt + .haw-landing__band--alt {
	margin-top: 0;
}

/* Section header shared by Roles. */
.haw-landing__section-header {
	max-width: 760px;
	margin: 0 auto 32px;
	padding: 0 28px;
	text-align: center;
}
.haw-landing__eyebrow {
	color: var(--haw-mk-accent);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	margin: 0 0 8px;
}
.haw-landing__section-header h2 {
	font-family: var(--haw-mk-font-display);
	font-weight: 600;
	font-size: 28px;
	letter-spacing: -0.02em;
	line-height: 1.15;
	margin: 0 0 14px;
}
.haw-landing__section-lede {
	color: var(--haw-mk-muted);
	font-size: 16px;
	line-height: 1.55;
	margin: 0;
}

/* v2.41.0: "How it works" — 2-column on desktop (intro left, steps right)
 * to break the centered-rhythm trance of repeating section headers. */
.haw-landing__how {
	max-width: 1140px;
	margin: 0 auto;
	padding: 0 28px;
	display: grid;
	grid-template-columns: minmax(240px, 320px) 1fr;
	gap: 48px;
	align-items: start;
}
.haw-landing__how-intro {
	padding-top: 4px;
}
.haw-landing__how-intro h2 {
	font-family: var(--haw-mk-font-display);
	font-weight: 600;
	font-size: 28px;
	letter-spacing: -0.02em;
	line-height: 1.15;
	margin: 8px 0 14px;
}
.haw-landing__how-steps {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: 14px;
}
.haw-landing__how-step {
	background: var(--haw-mk-surface);
	border: 1px solid var(--haw-mk-border);
	border-radius: var(--haw-mk-radius-lg);
	padding: 22px 26px;
	display: grid;
	grid-template-columns: 44px 1fr;
	gap: 4px 16px;
	align-items: start;
}
.haw-landing__how-num {
	grid-row: 1 / span 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 999px;
	background: var(--haw-mk-accent-soft);
	color: var(--haw-mk-accent);
	font-family: var(--haw-mk-font-display);
	font-weight: 700;
	font-size: 17px;
}
.haw-landing__how-step h3 {
	font-family: var(--haw-mk-font-display);
	font-weight: 600;
	font-size: 18px;
	letter-spacing: -0.01em;
	margin: 4px 0 4px;
	color: var(--haw-mk-text);
}
.haw-landing__how-step p {
	margin: 0;
	color: var(--haw-mk-muted);
	font-size: 15px;
	line-height: 1.55;
}

/* v2.41.0: features — 2-tier layout. Top row = 2 hero cards with glyph + sub-bullet.
 * Bottom row = 4 compact cards, borderless, hairline separator between rows. */
.haw-landing__features-wrap {
	max-width: 1140px;
	margin: 96px auto 0;
	padding: 0 28px;
}
.haw-landing__features-header {
	margin-bottom: 24px;
}
.haw-landing__features-header h2 {
	font-family: var(--haw-mk-font-display);
	font-weight: 600;
	font-size: 40px;
	letter-spacing: -0.02em;
	line-height: 1.1;
	margin: 0;
}
.haw-landing__features-hero {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
	margin-bottom: 32px;
}
.haw-landing__feature--hero {
	background: var(--haw-mk-surface);
	border: 1px solid var(--haw-mk-border);
	border-radius: var(--haw-mk-radius-lg);
	padding: 28px;
	box-shadow: var(--haw-mk-shadow-sm);
}
.haw-landing__feature-glyph {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 999px;
	background: var(--haw-mk-accent-soft);
	font-size: 18px;
	margin-bottom: 14px;
}
.haw-landing__feature--hero h3 {
	font-family: var(--haw-mk-font-display);
	font-weight: 600;
	font-size: 22px;
	letter-spacing: -0.01em;
	margin: 0 0 10px;
	color: var(--haw-mk-text);
}
.haw-landing__feature--hero p {
	margin: 0 0 10px;
	color: var(--haw-mk-muted);
	font-size: 15.5px;
	line-height: 1.6;
}
.haw-landing__feature-sub {
	color: var(--haw-mk-faint) !important;
	font-size: 13.5px !important;
	font-style: italic;
}
.haw-landing__features-compact {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
	padding-top: 24px;
	border-top: 1px solid var(--haw-mk-border);
}
.haw-landing__feature--compact {
	background: transparent;
	border: 0;
	box-shadow: none;
	padding: 0;
}
.haw-landing__feature--compact h3 {
	font-family: var(--haw-mk-font-display);
	font-weight: 600;
	font-size: 16.5px;
	letter-spacing: -0.005em;
	margin: 0 0 8px;
	color: var(--haw-mk-text);
}
.haw-landing__feature--compact p {
	margin: 0;
	color: var(--haw-mk-muted);
	font-size: 14.5px;
	line-height: 1.55;
}

/* v2.41.0: role-manuals — borderless 2-col list, demoted from cards. */
.haw-landing__roles {
	max-width: 880px;
	margin: 0 auto;
	padding: 0 28px;
}
.haw-landing__roles-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 32px;
}
.haw-landing__roles-list li {
	border-bottom: 1px solid var(--haw-mk-border);
}
.haw-landing__roles-list a {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 12px;
	padding: 14px 4px;
	color: inherit;
	text-decoration: none;
	position: relative;
	transition: padding-left 120ms ease;
}
.haw-landing__roles-list a::after {
	content: '→';
	position: absolute;
	right: 4px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--haw-mk-accent);
	opacity: 0;
	transition: opacity 120ms ease, transform 120ms ease;
}
.haw-landing__roles-list a:hover {
	padding-left: 10px;
}
.haw-landing__roles-list a:hover::after {
	opacity: 1;
	transform: translateY(-50%) translateX(4px);
}
.haw-landing__roles-list strong {
	font-family: var(--haw-mk-font-display);
	font-weight: 600;
	font-size: 15.5px;
	color: var(--haw-mk-text);
}
.haw-landing__roles-list span {
	color: var(--haw-mk-muted);
	font-size: 14px;
	line-height: 1.5;
}
.haw-landing__roles-all strong { color: var(--haw-mk-accent); }
.haw-landing__roles-all:hover strong { color: var(--haw-mk-accent-strong); }

/* v2.41.0: pricing secondary link (under the primary CTA). */
.haw-landing__pricing-secondary {
	margin: 12px 0 0;
	font-size: 14px;
	color: var(--haw-mk-faint);
}
.haw-landing__pricing-secondary a {
	color: var(--haw-mk-muted);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.haw-landing__pricing-secondary a:hover { color: var(--haw-mk-text); }

/* v2.41.0: consolidated responsive rules. */
@media (max-width: 1100px) {
	.haw-landing__features-compact { grid-template-columns: repeat(2, 1fr); gap: 28px 24px; }
	.haw-landing__how { grid-template-columns: 1fr; gap: 28px; }
	.haw-landing__how-intro { padding-top: 0; }
}
@media (max-width: 880px) {
	.haw-landing__hero { padding-top: 56px; }
	.haw-landing__hero h1 { font-size: 38px; letter-spacing: -0.02em; }
	.haw-landing__features-header h2 { font-size: 28px; }
	.haw-landing__section-header h2 { font-size: 24px; }
	.haw-landing__how-intro h2 { font-size: 24px; }
	.haw-landing__features-hero,
	.haw-landing__roles-list {
		grid-template-columns: 1fr;
	}
	.haw-landing__features-compact { grid-template-columns: 1fr; gap: 22px; }
	.haw-landing__band { margin-top: 56px; }
	.haw-landing__band--alt { padding: 48px 0; }
	.haw-landing__features-wrap { margin-top: 56px; }
	.haw-landing__mock { margin-top: 28px; }
	.haw-landing__mock-grid { padding: 14px; gap: 6px; }
	.haw-landing__mock-cell { height: 18px; }
}

/* Testimonials. */
.haw-landing__quotes {
	max-width: 1080px;
	margin: 72px auto;
	padding: 0 28px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
}
.haw-landing__quote {
	background: var(--haw-mk-surface);
	border: 1px solid var(--haw-mk-border);
	border-left: 3px solid var(--haw-mk-accent);
	border-radius: var(--haw-mk-radius-lg);
	padding: 24px 26px;
}
.haw-landing__quote blockquote {
	margin: 0 0 14px;
	font-size: 16px;
	line-height: 1.6;
	color: var(--haw-mk-text);
}
.haw-landing__quote cite {
	font-style: normal;
	font-size: 13.5px;
	color: var(--haw-mk-muted);
	display: block;
}
.haw-landing__quote cite strong {
	display: block;
	color: var(--haw-mk-text);
	font-weight: 600;
	margin-bottom: 2px;
}
@media (max-width: 720px) {
	.haw-landing__quotes { grid-template-columns: 1fr; }
}

/* Pricing teaser on landing. */
.haw-landing__pricing {
	max-width: 760px;
	margin: 0 auto;
	padding: 64px 28px;
	text-align: center;
}
.haw-landing__pricing h2 {
	font-family: var(--haw-mk-font-display);
	font-weight: 600;
	font-size: 30px;
	letter-spacing: -0.02em;
	margin: 0 0 12px;
}
.haw-landing__pricing-lede {
	color: var(--haw-mk-muted);
	font-size: 17px;
	margin: 0 0 24px;
}
.haw-landing__price {
	margin: 16px 0 6px;
	font-size: 18px;
	color: var(--haw-mk-muted);
}
.haw-landing__price-amount {
	font-family: var(--haw-mk-font-display);
	font-size: 52px;
	font-weight: 700;
	color: var(--haw-mk-text);
	letter-spacing: -0.025em;
	margin-right: 8px;
}
.haw-landing__pricing-foot {
	color: var(--haw-mk-faint);
	font-size: 14px;
	margin: 0 0 24px;
}

.haw-landing__final {
	max-width: 760px;
	margin: 0 auto;
	padding: 0 28px;
	text-align: center;
}
.haw-landing__final h2 {
	font-family: var(--haw-mk-font-display);
	font-weight: 600;
	font-size: 44px;
	letter-spacing: -0.025em;
	line-height: 1.1;
	margin: 0 0 28px;
}
@media (max-width: 880px) {
	.haw-landing__final h2 { font-size: 32px; }
}

/* ----- Pricing page --------------------------------------------------- */

.haw-pricing__hero {
	max-width: 760px;
	margin: 0 auto;
	padding: 80px 28px 24px;
	text-align: center;
}
.haw-pricing__hero h1 {
	font-family: var(--haw-mk-font-display);
	font-weight: 600;
	font-size: 44px;
	letter-spacing: -0.025em;
	margin: 0 0 18px;
}
.haw-pricing__hero p {
	color: var(--haw-mk-muted);
	font-size: 18px;
	line-height: 1.55;
	margin: 0;
}
.haw-pricing__cards {
	max-width: 920px;
	margin: 48px auto;
	padding: 0 28px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
}
.haw-pricing__card {
	background: var(--haw-mk-surface);
	border: 1px solid var(--haw-mk-border);
	border-radius: var(--haw-mk-radius-xl);
	padding: 36px 32px;
	text-align: left;
	display: flex;
	flex-direction: column;
}
.haw-pricing__card--paid {
	border-color: var(--haw-mk-accent);
	box-shadow: var(--haw-mk-shadow-lg);
	position: relative;
}
.haw-pricing__card--paid::after {
	content: 'Most teams';
	position: absolute;
	top: -12px;
	left: 32px;
	background: var(--haw-mk-accent);
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	padding: 4px 10px;
	border-radius: 999px;
}
.haw-pricing__card h2 {
	font-family: var(--haw-mk-font-display);
	margin: 0 0 14px;
	font-size: 20px;
	font-weight: 600;
	letter-spacing: -0.01em;
}
/* Innage-style eyebrow above each pricing card heading — small, uppercase,
 * wide tracking. Pairs with the big-number amount underneath. */
.haw-pricing__eyebrow {
	color: var(--haw-mk-faint);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.08em;
	margin: 0 0 8px;
	text-transform: uppercase;
}
.haw-pricing__amount {
	margin: 8px 0 4px;
	font-size: 18px;
	color: var(--haw-mk-muted);
}
.haw-pricing__amount span {
	font-family: var(--haw-mk-font-display);
	font-size: 54px;
	font-weight: 700;
	color: var(--haw-mk-text);
	letter-spacing: -0.025em;
}
/* Trial amount uses the emerald positive color — "you're saving" cue,
 * adapted from innage's net-result number treatment. */
/* v2.76.0 Visual System v1 Phase 1 — emerald-600 → emerald-700 for visual
 * continuity with in-app `.haw-num--positive` and `.haw-pill--positive`. */
.haw-pricing__amount--pos { color: #047857; }
.haw-pricing__amount--pos span { color: #047857; }
.haw-pricing__amount-unit {
	margin: 0 0 18px;
	color: var(--haw-mk-muted);
	font-size: 14px;
}
.haw-pricing__features {
	list-style: none;
	padding: 0;
	margin: 20px 0 28px;
}
.haw-pricing__features li {
	padding: 9px 0 9px 28px;
	position: relative;
	color: var(--haw-mk-muted);
	font-size: 15px;
	line-height: 1.55;
}
.haw-pricing__features li::before {
	content: '✓';
	position: absolute;
	left: 0;
	top: 9px;
	color: var(--haw-mk-accent);
	font-weight: 700;
}
.haw-pricing__card .haw-landing__cta {
	margin-top: auto;
	text-align: center;
}

.haw-pricing__yearly-note {
	max-width: 920px;
	margin: -28px auto 0;
	padding: 0 28px;
	text-align: center;
	color: var(--haw-mk-muted);
	font-size: 15px;
	line-height: 1.55;
}
.haw-pricing__yearly-note a {
	color: var(--haw-mk-accent);
	font-weight: 600;
	text-decoration: underline;
}

@media (max-width: 720px) {
	.haw-pricing__cards { grid-template-columns: 1fr; }
	.haw-pricing__hero h1 { font-size: 32px; }
}

.haw-pricing__faq {
	max-width: 760px;
	margin: 64px auto;
	padding: 0 28px;
}
.haw-pricing__faq h2 {
	font-family: var(--haw-mk-font-display);
	font-size: 26px;
	font-weight: 600;
	letter-spacing: -0.02em;
	margin: 0 0 28px;
}
.haw-pricing__faq dt {
	font-family: var(--haw-mk-font-display);
	font-weight: 600;
	font-size: 16.5px;
	letter-spacing: -0.01em;
	margin-top: 26px;
	color: var(--haw-mk-text);
}
.haw-pricing__faq dd {
	margin: 6px 0 0;
	color: var(--haw-mk-muted);
	line-height: 1.6;
}

/* ----- Login (workspace finder) --------------------------------------- */

.haw-login__hero {
	max-width: 520px;
	margin: 0 auto;
	padding: 80px 28px 48px;
	text-align: center;
}
.haw-login__hero h1 {
	font-family: var(--haw-mk-font-display);
	font-size: 32px;
	font-weight: 600;
	letter-spacing: -0.02em;
	margin: 0 0 14px;
}
.haw-login__hero p {
	color: var(--haw-mk-muted);
	font-size: 16px;
}
.haw-login__form {
	background: var(--haw-mk-surface);
	border: 1px solid var(--haw-mk-border);
	border-radius: var(--haw-mk-radius-xl);
	padding: 28px;
	text-align: left;
	margin-top: 28px;
	box-shadow: var(--haw-mk-shadow-md);
}

/* ----- Signup form ---------------------------------------------------- */

.haw-marketing__container {
	max-width: 560px;
	margin: 0 auto;
	padding: 56px 28px 96px;
}

.haw-marketing__hero h1 {
	font-family: var(--haw-mk-font-display);
	font-size: 36px;
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: -0.02em;
	margin: 0 0 14px;
}
.haw-marketing__lede {
	font-size: 16.5px;
	color: var(--haw-mk-muted);
	margin: 0 0 36px;
	line-height: 1.55;
}

.haw-marketing__form {
	background: var(--haw-mk-surface);
	border: 1px solid var(--haw-mk-border);
	border-radius: var(--haw-mk-radius-xl);
	padding: 32px;
	box-shadow: var(--haw-mk-shadow-md);
}

.haw-marketing__row + .haw-marketing__row { margin-top: 16px; }
.haw-marketing__row--two {
	display: grid;
	gap: 12px;
	grid-template-columns: 1fr 1fr;
}

.haw-marketing__field { display: block; }
.haw-marketing__label {
	display: block;
	font-weight: 600;
	font-size: 13.5px;
	margin-bottom: 8px;
	color: var(--haw-mk-text);
	letter-spacing: -0.005em;
}

/* v2.71.0 Forms Design System — Phase 8 (operator decision Q3). Marketing
 * mirror of the in-app `.haw-field--required` rule: every required field
 * gets a visible red asterisk after the label so the requirement is
 * surfaced before submission. Marketing uses its own modifier name so
 * the markup stays separate from the in-app cocoon (per Q5 Path A). */
.haw-marketing__field--required .haw-marketing__label::after {
	color: #dc2626;
	content: " *";
	font-weight: 700;
}

.haw-marketing__field input[type="text"],
.haw-marketing__field input[type="email"],
.haw-marketing__field input[type="password"] {
	width: 100%;
	box-sizing: border-box;
	font: inherit;
	font-size: 15px;
	color: inherit;
	background: #fff;
	border: 1px solid var(--haw-mk-border-strong);
	border-radius: var(--haw-mk-radius);
	padding: 11px 13px;
	transition: border-color 120ms ease, box-shadow 120ms ease;
}
.haw-marketing__field input:focus {
	outline: 2px solid transparent;
	border-color: var(--haw-mk-accent);
	box-shadow: 0 0 0 3px var(--haw-mk-accent-ring);
}

.haw-marketing__slug-row {
	display: flex;
	align-items: stretch;
	border: 1px solid var(--haw-mk-border-strong);
	border-radius: var(--haw-mk-radius);
	background: #fff;
	overflow: hidden;
}
.haw-marketing__slug-row:focus-within {
	border-color: var(--haw-mk-accent);
	box-shadow: 0 0 0 3px var(--haw-mk-accent-ring);
}
.haw-marketing__slug-row input {
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	padding: 11px 13px;
	flex: 1 1 auto;
	min-width: 0;
}
.haw-marketing__slug-suffix {
	display: inline-flex;
	align-items: center;
	padding: 0 14px;
	background: var(--haw-mk-surface-alt);
	border-left: 1px solid var(--haw-mk-border);
	color: var(--haw-mk-muted);
	font-family: var(--haw-mk-font-mono);
	font-size: 13.5px;
	white-space: nowrap;
}

.haw-marketing__hint {
	display: block;
	font-size: 13px;
	color: var(--haw-mk-faint);
	margin-top: 6px;
	min-height: 18px;
}
.haw-marketing__hint.is-ok { color: var(--haw-mk-ok); }
.haw-marketing__hint.is-error { color: var(--haw-mk-danger); }

.haw-marketing__terms {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-top: 24px;
	font-size: 13.5px;
	color: var(--haw-mk-muted);
	line-height: 1.55;
}
.haw-marketing__terms input[type="checkbox"] {
	margin-top: 3px;
	accent-color: var(--haw-mk-accent);
}
.haw-marketing__terms a {
	color: var(--haw-mk-accent-strong);
	text-decoration: underline;
}

.haw-marketing__submit { width: 100%; margin-top: 26px; }
.haw-marketing__submit[disabled] { opacity: 0.6; cursor: progress; }

.haw-marketing__status {
	min-height: 22px;
	margin: 12px 0 0;
	font-size: 14px;
	font-weight: 500;
}
.haw-marketing__status.is-ok { color: var(--haw-mk-ok); }
.haw-marketing__status.is-error { color: var(--haw-mk-danger); }
.haw-marketing__status.is-info { color: var(--haw-mk-muted); }

.haw-marketing__footer {
	margin-top: 28px;
	font-size: 14.5px;
	color: var(--haw-mk-muted);
	text-align: center;
}
.haw-marketing__footer a {
	color: var(--haw-mk-accent-strong);
	font-weight: 500;
	text-decoration: underline;
}

@media (max-width: 480px) {
	.haw-marketing__container { padding: 32px 16px 64px; }
	.haw-marketing__form { padding: 22px; }
	.haw-marketing__row--two { grid-template-columns: 1fr; }
	.haw-marketing__hero h1 { font-size: 28px; }
}

/* ----- Legal docs (terms / privacy) ---------------------------------- */

.haw-doc {
	max-width: 760px;
	margin: 0 auto;
	padding: 64px 28px 96px;
}
.haw-doc h1 {
	font-family: var(--haw-mk-font-display);
	font-size: 38px;
	font-weight: 600;
	letter-spacing: -0.025em;
	margin: 0 0 10px;
}
.haw-doc h2 {
	font-family: var(--haw-mk-font-display);
	font-size: 19px;
	font-weight: 600;
	letter-spacing: -0.01em;
	margin: 32px 0 10px;
}
.haw-doc p {
	color: var(--haw-mk-muted);
	line-height: 1.7;
	margin: 0 0 14px;
}
.haw-doc__placeholder-banner {
	background: var(--haw-mk-danger-soft);
	border-left: 4px solid var(--haw-mk-danger);
	color: var(--haw-mk-text);
	padding: 14px 16px;
	border-radius: 8px;
	margin: 24px 0;
	font-size: 14.5px;
}
.haw-doc__placeholder-banner strong {
	display: block;
	color: var(--haw-mk-danger);
	margin-bottom: 4px;
}

/* ----- v2.39.0: /docs/ surface ----------------------------------------- */

.haw-docs {
	max-width: 1180px;
	margin: 0 auto;
	padding: 36px 24px 80px;
}
.haw-docs__shell {
	display: grid;
	grid-template-columns: 220px minmax(0, 1fr);
	gap: 48px;
	align-items: start;
}
.haw-docs__sidebar {
	position: sticky;
	top: 28px;
	padding-right: 8px;
	font-size: 14.5px;
}
.haw-docs__sidebar-heading {
	color: var(--haw-mk-faint);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	margin: 0 0 8px;
}
.haw-docs__sidebar-nav {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin-bottom: 24px;
}
.haw-docs__sidebar-nav a {
	color: var(--haw-mk-muted);
	text-decoration: none;
	padding: 8px 12px;
	border-radius: 8px;
	font-weight: 500;
	transition: color 120ms ease, background 120ms ease;
}
.haw-docs__sidebar-nav a:hover {
	color: var(--haw-mk-text);
	background: var(--haw-mk-surface-alt);
}
.haw-docs__sidebar-nav a.is-active {
	color: var(--haw-mk-text);
	background: var(--haw-mk-accent-soft);
	font-weight: 600;
}
.haw-docs__sidebar-foot {
	color: var(--haw-mk-faint);
	font-size: 13.5px;
	margin: 0;
	padding: 12px 12px 0;
	border-top: 1px solid var(--haw-mk-border);
}
.haw-docs__sidebar-foot a {
	color: var(--haw-mk-accent);
	text-decoration: none;
	font-weight: 600;
	display: block;
	margin-top: 4px;
}
.haw-docs__sidebar-foot a:hover { color: var(--haw-mk-accent-strong); }

.haw-docs__article {
	max-width: 720px;
	color: var(--haw-mk-text);
	font-size: 16.5px;
	line-height: 1.7;
}
.haw-docs__article-header {
	margin-bottom: 28px;
	padding-bottom: 24px;
	border-bottom: 1px solid var(--haw-mk-border);
}
.haw-docs__eyebrow {
	color: var(--haw-mk-faint);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	margin: 0 0 6px;
}
.haw-docs__article h1 {
	font-family: var(--haw-mk-font-display);
	font-size: 38px;
	letter-spacing: -0.02em;
	margin: 0 0 12px;
	line-height: 1.1;
}
.haw-docs__lede {
	color: var(--haw-mk-muted);
	font-size: 18px;
	line-height: 1.55;
	margin: 0;
}
.haw-docs__article h2 {
	font-family: var(--haw-mk-font-display);
	font-size: 22px;
	letter-spacing: -0.01em;
	margin: 36px 0 12px;
	line-height: 1.25;
}
.haw-docs__article h3 {
	font-size: 17px;
	margin: 24px 0 8px;
	font-weight: 600;
}
.haw-docs__article p,
.haw-docs__article ul,
.haw-docs__article ol {
	margin: 0 0 14px;
}
.haw-docs__article ul,
.haw-docs__article ol {
	padding-left: 22px;
}
.haw-docs__article li {
	margin-bottom: 6px;
}
.haw-docs__article code {
	background: var(--haw-mk-surface-alt);
	padding: 1px 6px;
	border-radius: 4px;
	font-family: var(--haw-mk-font-mono);
	font-size: 0.9em;
	color: var(--haw-mk-text);
}
.haw-docs__article a {
	color: var(--haw-mk-accent);
	text-decoration: underline;
	text-underline-offset: 2px;
}
.haw-docs__article a:hover { color: var(--haw-mk-accent-strong); }

/* Role-card grid on /docs/ index. */
.haw-docs__role-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 16px;
	margin: 24px 0 40px;
}
.haw-docs__role-card {
	display: block;
	background: var(--haw-mk-surface);
	border: 1px solid var(--haw-mk-border);
	border-radius: var(--haw-mk-radius-lg);
	padding: 22px 22px 56px;
	text-decoration: none;
	color: inherit;
	position: relative;
	transition: border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}
.haw-docs__role-card:hover {
	border-color: var(--haw-mk-accent);
	box-shadow: var(--haw-mk-shadow-md);
	transform: translateY(-2px);
}
.haw-docs__role-card h2 {
	font-family: var(--haw-mk-font-display);
	font-size: 19px;
	margin: 0 0 8px;
	letter-spacing: -0.01em;
}
.haw-docs__role-card p {
	color: var(--haw-mk-muted);
	font-size: 14.5px;
	line-height: 1.55;
	margin: 0;
}
.haw-docs__role-arrow {
	position: absolute;
	bottom: 18px;
	right: 22px;
	color: var(--haw-mk-accent);
	font-size: 22px;
	font-weight: 700;
	transition: transform 120ms ease;
}
.haw-docs__role-card:hover .haw-docs__role-arrow { transform: translateX(4px); }

/* Quick-help FAQ on /docs/ index. */
.haw-docs__quick-help {
	margin-top: 48px;
	padding-top: 24px;
	border-top: 1px solid var(--haw-mk-border);
}
.haw-docs__quick-help h2 {
	font-family: var(--haw-mk-font-display);
	font-size: 22px;
	margin: 0 0 16px;
}
.haw-docs__faq {
	margin: 0;
}
.haw-docs__faq dt {
	font-weight: 600;
	margin-top: 18px;
	color: var(--haw-mk-text);
}
.haw-docs__faq dd {
	margin: 6px 0 0;
	color: var(--haw-mk-muted);
	line-height: 1.6;
}

/* Mobile: sidebar stacks above the article. */
@media (max-width: 880px) {
	.haw-docs { padding: 20px 18px 60px; }
	.haw-docs__shell {
		grid-template-columns: minmax(0, 1fr);
		gap: 24px;
	}
	.haw-docs__sidebar {
		position: static;
		padding-right: 0;
	}
	.haw-docs__sidebar-nav {
		flex-direction: row;
		flex-wrap: wrap;
		gap: 4px;
		margin-bottom: 12px;
	}
	.haw-docs__sidebar-foot {
		display: none;
	}
	.haw-docs__article h1 { font-size: 30px; }
	.haw-docs__article h2 { font-size: 20px; margin-top: 28px; }
	.haw-docs__lede { font-size: 16.5px; }
}