/*
 * Headwaters: the public "How It Works" page ([hw_features]).
 *
 * A self-contained, scoped stylesheet. Everything lives under .hw-features so
 * no theme can reach in and nothing here reaches out; class names carry an
 * hwf- prefix for the same reason. The accent is the organization's own brand
 * color (the --hw-primary token, set by HW_Brand on the .hw-root wrapper) with
 * a river-teal fallback, so the page matches whatever site it sits on. The deep
 * band stays a fixed dark slate that any accent reads well against. Dark mode
 * follows the plugin's body.hw-theme-dark convention, not the OS, so the page
 * agrees with the appearance the administrator chose. No em-dashes anywhere.
 */

.hw-features {
	--hwf-ground:    #eef3f2;
	--hwf-surface:   #ffffff;
	--hwf-surface-2: #f2f7f6;
	--hwf-ink:       #14242a;
	--hwf-ink-soft:  #43555a;
	/* Was #6a7c80: 3.9 to 1 on the section ground, under the 4.5 the small
	   tag and who lines need. */
	--hwf-ink-mute:  #566468;
	--hwf-accent-text: color-mix(in srgb, var(--hwf-accent) 55%, var(--hwf-ink));
	--hwf-line:      #dce6e4;
	--hwf-line-2:    #eaf0ee;
	--hwf-accent:    var(--hw-primary, #0b6d76);
	--hwf-current:   var(--hw-primary-dark, #0a5b63);
	--hwf-on-accent: var(--hw-on-primary, #ffffff);
	--hwf-abyss:     #0d1c20;
	--hwf-abyss-2:   #12262b;
	--hwf-abyss-ink: #dceae7;
	--hwf-abyss-mut: #85a3a2;
	--hwf-abyss-line:#22383c;
	--hwf-good:      #2f875a;
	--hwf-shadow:    0 1px 2px rgba(15,36,41,.05), 0 10px 30px rgba(15,36,41,.06);
	--hwf-shadow-lg: 0 2px 6px rgba(15,36,41,.06), 0 24px 60px rgba(15,36,41,.10);
	--hwf-mono: ui-monospace, "SF Mono", "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
	--hwf-maxw: 74rem;
	--hwf-readw: 40rem;

	background: var(--hwf-ground);
	color: var(--hwf-ink);
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

/* Edge to edge. A page builder (Divi, Elementor) or a block theme drops this
   page inside a centered content column, often padded (WordPress block themes
   wrap it in .has-global-padding), so the colored bands stop short of the
   window and sit in a gray frame. Break the wrapper out to the full width of
   the viewport: left:50% lands its left edge on the center of that column, and
   translateX(-50%) slides it back by half its own 100vw width, so it ends up
   flush to both window edges no matter what padding the column carries. A plain
   calc() margin cannot do this: its percentage resolves against the padded
   column, not the window, and leaves a slice of overflow (a stray horizontal
   scrollbar). The inner .hwf-hero-inner / .hwf-wrap keep their own max-width
   and padding, so only the bands widen, never the text. Harmless on a theme
   that is already full width: the column center is the window center. */
.hw-features {
	width: 100vw;
	max-width: 100vw;
	position: relative;
	left: 50%;
	transform: translateX(-50%);
	margin-right: 0;
	margin-left: 0;
	/* Shed the shared .hw-root gutter (20px 16px 64px): it would leave a light
	   frame of --hwf-ground above and beside the bands. The bands stack flush to
	   the window instead; each band's own .hwf-wrap / .hwf-hero-inner still holds
	   the text to its measure. */
	padding: 0;
}

body.hw-theme-dark .hw-features {
	--hwf-ground:    #0b1618;
	--hwf-surface:   #10201f;
	--hwf-surface-2: #152a29;
	--hwf-ink:       #e6efed;
	--hwf-ink-soft:  #b1c5c2;
	--hwf-ink-mute:  #7d9795;
	--hwf-line:      #21403c;
	--hwf-line-2:    #182f2e;
	--hwf-accent:    var(--hw-primary, #3fb1b9);
	--hwf-current:   var(--hw-primary, #48c9b6);
	--hwf-on-accent: var(--hw-on-primary, #052220);
	--hwf-abyss:     #081215;
	--hwf-abyss-2:   #0e2024;
	--hwf-abyss-ink: #dceae7;
	--hwf-abyss-mut: #82a09f;
	--hwf-abyss-line:#183034;
	--hwf-good:      #4cc186;
	--hwf-shadow:    0 1px 2px rgba(0,0,0,.35), 0 12px 34px rgba(0,0,0,.32);
	--hwf-shadow-lg: 0 2px 8px rgba(0,0,0,.4), 0 30px 70px rgba(0,0,0,.45);
}

.hw-features * { box-sizing: border-box; }
.hw-features a { color: var(--hwf-current); text-decoration-thickness: 1px; text-underline-offset: 2px; }
.hw-features ::selection { background: color-mix(in srgb, var(--hwf-accent) 26%, transparent); }

.hwf-wrap { max-width: var(--hwf-maxw); margin: 0 auto; padding: 0 1.5rem; }

.hwf-eyebrow {
	font-family: var(--hwf-mono); font-size: .72rem; letter-spacing: .18em;
	text-transform: uppercase; margin: 0; display: inline-flex; align-items: center; gap: .6rem;
}
.hwf-eyebrow::before { content: ""; width: 1.7rem; height: 2px; background: currentColor; display: inline-block; opacity: .8; }

/* Hero */
.hwf-hero {
	position: relative; overflow: hidden; isolation: isolate;
	background: var(--hwf-abyss); color: var(--hwf-abyss-ink);
	border-bottom: 1px solid var(--hwf-abyss-line);
}
.hwf-hero canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; display: block; }
.hwf-hero::after {
	content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
	background:
		radial-gradient(120% 80% at 82% -10%, color-mix(in srgb, var(--hwf-accent) 30%, transparent), transparent 60%),
		linear-gradient(180deg, transparent 55%, var(--hwf-abyss) 100%);
}
.hwf-hero-inner { max-width: var(--hwf-maxw); margin: 0 auto; padding: 4.4rem 1.5rem 4rem; }
.hwf-hero .hwf-eyebrow { color: color-mix(in srgb, var(--hwf-accent) 60%, var(--hwf-abyss-ink)); }
.hwf-wordmark { display: flex; align-items: center; gap: .7rem; margin-bottom: 2.2rem; }
.hwf-wordmark svg { width: 1.5rem; height: 1.5rem; flex: none; }
.hwf-wordmark b { font-size: 1.05rem; letter-spacing: -.01em; font-weight: 700; }
.hwf-hero h1 {
	font-size: clamp(2.2rem, 6vw, 4rem); line-height: 1.03; letter-spacing: -.03em;
	margin: 0 0 1.1rem; font-weight: 800; max-width: 17ch; text-wrap: balance; color: var(--hwf-abyss-ink);
}
.hwf-hero h1 .hwf-hl { color: color-mix(in srgb, var(--hwf-accent) 58%, var(--hwf-abyss-ink)); }
.hwf-hero .hwf-lede { font-size: clamp(1.02rem, 1.6vw, 1.24rem); color: var(--hwf-abyss-ink); opacity: .86; max-width: 42rem; margin: 0 0 1.9rem; }
.hwf-cred { display: flex; flex-wrap: wrap; gap: .5rem .55rem; margin: 0; padding: 0; list-style: none; }
.hwf-cred li {
	font-family: var(--hwf-mono); font-size: .72rem; letter-spacing: .02em;
	border: 1px solid var(--hwf-abyss-line); background: color-mix(in srgb, var(--hwf-abyss-2) 70%, transparent);
	color: var(--hwf-abyss-ink); padding: .34rem .6rem; border-radius: 999px; display: inline-flex; align-items: center; gap: .4rem;
}
.hwf-cred li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--hwf-accent); display: inline-block; flex: none; }

/* Sections */
.hwf-sec { padding: 4rem 0; }
.hwf-band { background: var(--hwf-surface); border-top: 1px solid var(--hwf-line); border-bottom: 1px solid var(--hwf-line); }
.hwf-head { max-width: var(--hwf-readw); margin: 0 0 2.2rem; }
.hwf-head .hwf-eyebrow { color: var(--hwf-accent); margin-bottom: .8rem; }
.hwf-head h2 { font-size: clamp(1.55rem, 3.2vw, 2.25rem); line-height: 1.09; letter-spacing: -.02em; margin: 0 0 .5rem; font-weight: 780; text-wrap: balance; color: var(--hwf-ink); }
.hwf-head p { color: var(--hwf-ink-soft); font-size: 1.04rem; margin: 0; }

/* Differentiators */
.hwf-theses { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.1rem; }
.hwf-thesis {
	position: relative; background: var(--hwf-surface); border: 1px solid var(--hwf-line);
	border-radius: 16px; padding: 1.5rem 1.5rem 1.6rem; box-shadow: var(--hwf-shadow);
	transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.hwf-thesis:hover { transform: translateY(-3px); box-shadow: var(--hwf-shadow-lg); border-color: color-mix(in srgb, var(--hwf-accent) 40%, var(--hwf-line)); }
.hwf-ic { width: 2.4rem; height: 2.4rem; border-radius: 11px; display: grid; place-items: center; background: color-mix(in srgb, var(--hwf-accent) 12%, var(--hwf-surface)); color: var(--hwf-accent); margin-bottom: 1rem; border: 1px solid color-mix(in srgb, var(--hwf-accent) 26%, transparent); }
.hwf-ic svg { width: 1.3rem; height: 1.3rem; }
.hwf-thesis h3 { font-size: 1.14rem; letter-spacing: -.01em; margin: 0 0 .5rem; font-weight: 720; color: var(--hwf-ink); }
.hwf-thesis p { margin: 0; color: var(--hwf-ink-soft); font-size: .96rem; }
.hwf-tag { position: absolute; top: 1.2rem; right: 1.3rem; font-family: var(--hwf-mono); font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; color: var(--hwf-ink-mute); }

/* Acts */
.hwf-act { display: grid; grid-template-columns: 15rem 1fr; gap: 2.1rem; }
.hwf-act + .hwf-act { margin-top: 2.8rem; padding-top: 2.8rem; border-top: 1px solid var(--hwf-line); }
.hwf-aside { position: sticky; top: 1.4rem; align-self: start; }
.hwf-actnum { font-family: var(--hwf-mono); font-size: .74rem; letter-spacing: .1em; color: var(--hwf-accent-text, var(--hwf-accent)); }
.hwf-aside h3 { font-size: 1.45rem; letter-spacing: -.02em; margin: .5rem 0 .6rem; font-weight: 760; line-height: 1.12; color: var(--hwf-ink); }
.hwf-aside p { color: var(--hwf-ink-soft); font-size: .94rem; margin: 0; }
.hwf-who { display: inline-block; margin-top: 1rem; font-family: var(--hwf-mono); font-size: .66rem; letter-spacing: .06em; text-transform: uppercase; color: var(--hwf-ink-mute); border: 1px solid var(--hwf-line); border-radius: 999px; padding: .28rem .6rem; }
.hwf-flow { display: flex; flex-direction: column; gap: .7rem; }
.hwf-step {
	display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: start;
	background: var(--hwf-surface); border: 1px solid var(--hwf-line); border-radius: 13px;
	padding: 1rem 1.15rem; box-shadow: var(--hwf-shadow); transition: border-color .2s ease, transform .2s ease;
}
.hwf-step:hover { border-color: color-mix(in srgb, var(--hwf-accent) 34%, var(--hwf-line)); transform: translateX(2px); }
.hwf-dot { width: 2rem; height: 2rem; flex: none; border-radius: 8px; display: grid; place-items: center; background: color-mix(in srgb, var(--hwf-accent) 13%, var(--hwf-surface)); color: var(--hwf-accent); }
.hwf-dot svg { width: 1.05rem; height: 1.05rem; }
.hwf-step h4 { margin: .05rem 0 .25rem; font-size: 1rem; font-weight: 680; letter-spacing: -.005em; color: var(--hwf-ink); }
.hwf-step p { margin: 0; color: var(--hwf-ink-soft); font-size: .91rem; }
.hwf-step code { font-family: var(--hwf-mono); font-size: .8em; background: var(--hwf-surface-2); border: 1px solid var(--hwf-line); padding: .05rem .35rem; border-radius: 5px; color: var(--hwf-current); white-space: nowrap; }

/* Index */
.hwf-index { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--hwf-line); border: 1px solid var(--hwf-line); border-radius: 16px; overflow: hidden; }
.hwf-cell { background: var(--hwf-surface); padding: 1.35rem 1.3rem; transition: background .2s ease; }
.hwf-cell:hover { background: var(--hwf-surface-2); }
.hwf-cell .hwf-k { font-family: var(--hwf-mono); font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; color: var(--hwf-accent-text, var(--hwf-accent)); display: block; margin-bottom: .55rem; }
.hwf-cell h4 { margin: 0 0 .4rem; font-size: 1.01rem; font-weight: 680; letter-spacing: -.01em; color: var(--hwf-ink); }
.hwf-cell p { margin: 0; color: var(--hwf-ink-soft); font-size: .89rem; }
.hwf-cell code { font-family: var(--hwf-mono); font-size: .82em; color: var(--hwf-current); }

/* Modules */
.hwf-mods { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.1rem; }
.hwf-mod { background: var(--hwf-surface); border: 1px solid var(--hwf-line); border-radius: 14px; padding: 1.35rem 1.45rem; box-shadow: var(--hwf-shadow); }
.hwf-mod .hwf-modtop { display: flex; align-items: center; gap: .7rem; margin-bottom: .65rem; flex-wrap: wrap; }
.hwf-sw { font-family: var(--hwf-mono); font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; color: var(--hwf-on-accent); background: var(--hwf-accent-text, var(--hwf-accent)); padding: .2rem .5rem; border-radius: 999px; }
.hwf-mod h3 { margin: 0; font-size: 1.08rem; font-weight: 720; letter-spacing: -.01em; color: var(--hwf-ink); }
.hwf-mod p { margin: 0; color: var(--hwf-ink-soft); font-size: .94rem; }
.hwf-mod ul { margin: .8rem 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; }
.hwf-mod li { font-family: var(--hwf-mono); font-size: .7rem; color: var(--hwf-ink-mute); border: 1px solid var(--hwf-line); border-radius: 6px; padding: .2rem .45rem; }

/* Proof */
.hwf-proof { background: var(--hwf-abyss); color: var(--hwf-abyss-ink); border-radius: 20px; padding: 2.4rem 2rem; box-shadow: var(--hwf-shadow-lg); }
.hwf-proof .hwf-eyebrow { color: color-mix(in srgb, var(--hwf-accent) 58%, var(--hwf-abyss-ink)); margin-bottom: .9rem; }
.hwf-proof h2 { color: var(--hwf-abyss-ink); font-size: clamp(1.5rem, 3vw, 2.15rem); letter-spacing: -.02em; margin: 0 0 .6rem; font-weight: 780; }
.hwf-proof > p { color: var(--hwf-abyss-ink); opacity: .82; max-width: 44rem; margin: 0; }
.hwf-harness { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-top: 1.9rem; background: var(--hwf-abyss-line); border: 1px solid var(--hwf-abyss-line); border-radius: 14px; overflow: hidden; }
.hwf-hcell { background: var(--hwf-abyss-2); padding: 1.25rem 1.25rem; }
.hwf-hcell .hwf-n { font-size: 1.85rem; font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; line-height: 1; color: var(--hwf-abyss-ink); }
.hwf-hcell .hwf-n small { font-size: .9rem; color: var(--hwf-abyss-mut); font-weight: 600; margin-left: .15rem; }
.hwf-hcell .hwf-l { font-family: var(--hwf-mono); font-size: .72rem; letter-spacing: .03em; color: var(--hwf-abyss-mut); margin-top: .5rem; }
.hwf-proof .hwf-pfoot { margin-top: 1.4rem; font-size: .9rem; color: var(--hwf-abyss-mut); display: flex; align-items: center; gap: .5rem; }
.hwf-proof .hwf-pfoot b { color: var(--hwf-abyss-ink); font-weight: 600; }

/* Footer */
.hwf-foot { padding: 3rem 0 3.6rem; border-top: 1px solid var(--hwf-line); background: var(--hwf-surface); }
.hwf-footgrid { display: flex; flex-wrap: wrap; gap: 1.3rem 2.4rem; align-items: baseline; justify-content: space-between; }
.hwf-foot .hwf-brand { display: flex; align-items: center; gap: .6rem; font-weight: 700; color: var(--hwf-ink); }
.hwf-foot .hwf-brand svg { width: 1.2rem; height: 1.2rem; }
.hwf-foot p { margin: .5rem 0 0; color: var(--hwf-ink-mute); font-size: .88rem; max-width: 34rem; }
.hwf-foot .hwf-meta { font-family: var(--hwf-mono); font-size: .72rem; color: var(--hwf-ink-mute); text-align: right; line-height: 1.9; }

/* Reveal (only engages once JS marks the root, and never leaves content
   hidden: a print context or any view that does not scroll must still show
   every section, so printing forces them all visible and the script carries a
   timed safety net besides). */
.hwf-js .hwf-reveal { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; }
.hwf-js .hwf-reveal.hwf-in { opacity: 1; transform: none; }
@media print {
	.hw-features .hwf-reveal { opacity: 1 !important; transform: none !important; }
	.hwf-hero canvas { display: none; }
}

.hw-features :focus-visible { outline: 3px solid color-mix(in srgb, var(--hwf-accent) 55%, transparent); outline-offset: 3px; border-radius: 4px; }

@media (prefers-reduced-motion: reduce) {
	.hwf-js .hwf-reveal { opacity: 1; transform: none; transition: none; }
	.hwf-thesis:hover, .hwf-step:hover { transform: none; }
}

@media (max-width: 860px) {
	.hwf-theses, .hwf-index, .hwf-mods, .hwf-harness { grid-template-columns: 1fr; }
	.hwf-act { grid-template-columns: 1fr; gap: 1.2rem; }
	.hwf-aside { position: static; }
	.hwf-hero-inner { padding: 3.2rem 1.5rem 3rem; }
}
@media (max-width: 560px) {
	.hwf-step { grid-template-columns: 1fr; }
	.hwf-dot { display: none; }
}

/*
 * Theme-bleed guard for the dark bands.
 *
 * A host theme that colors generic elements inside its content wrapper
 * (.entry-content p, and the Divi/Elementor equivalents) can out-specify a
 * single-class rule and repaint our text its own ink. On the light bands that
 * only shifts the shade; on the deep hero and proof bands it paints dark text
 * on a near-black ground, which is invisible. The lede was found doing exactly
 * this in a design walk. Re-assert the light band colors at a specificity no
 * ordinary theme paragraph or heading rule beats, so the dark bands stay
 * legible whatever theme wraps them.
 */
.hw-features .hwf-hero h1,
.hw-features .hwf-hero .hwf-lede,
.hw-features .hwf-cred li,
.hw-features .hwf-wordmark b,
.hw-features .hwf-proof h2,
.hw-features .hwf-proof > p,
.hw-features .hwf-hcell .hwf-n { color: var(--hwf-abyss-ink); }
.hw-features .hwf-hcell .hwf-l,
.hw-features .hwf-proof .hwf-pfoot { color: var(--hwf-abyss-mut); }

/* ═══ Industry ═══════════════════════════════════════════════════════════
 * The How It Works page is the one screen a funder or another chapter is
 * most likely to see first, so it wears the system exactly.
 */
.hw-features, .hw-features .hw-feat-card, .hw-features .hw-feat-tile { border-radius: 0; }
.hw-features h1, .hw-features h2, .hw-features h3, .hw-features .hw-feat-kicker {
	font-family: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
	font-weight: 600;
	letter-spacing: .01em;
}
.hw-features .hw-feat-card {
	background: transparent;
	border: 1px solid var(--hw-line, #c8c9ca);
	box-shadow: none;
}
.hw-features :focus-visible { outline: 2px solid var(--hw-primary, #5980a6); outline-offset: 2px; }