PageSourceSearch

https://madebrighter.com/platform/how-it-works

html madebrighter.com collected 2026-10-09 22:58:16 UTC 60,120 bytes, 2,382 lines download raw bytes

1<!doctype html><html lang="en-US"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover"><meta name="htmx-config" content='{"globalViewTransitions": false, "historyRestoreAsHxRequest": false}'><title>How it works</title><link rel="icon" type="image/svg+xml" href="/assets/favicon.svg"><link rel="stylesheet" href="/cdn/static/vendor/phosphor-icons/2.1.1/regular/style.css"><link rel="stylesheet" href="/cdn/static/vendor/phosphor-icons/2.1.1/bold/style.css"><style>
2		@font-face {
3			font-family: "Poppins";
4			font-style: normal;
5			font-weight: 400;
6			font-display: swap;
7			src: url("/assets/fonts/poppins-normal-400.woff2") format("woff2");
8		}
9		@font-face {
10			font-family: "Poppins";
11			font-style: normal;
12			font-weight: 600;
13			font-display: swap;
14			src: url("/assets/fonts/poppins-normal-600.woff2") format("woff2");
15		}
16		@font-face {
17			font-family: "Poppins";
18			font-style: normal;
19			font-weight: 700;
20			font-display: swap;
21			src: url("/assets/fonts/poppins-normal-700.woff2") format("woff2");
22		}
23		@font-face {
24			font-family: "Noto Serif";
25			font-style: normal;
26			font-weight: 400;
27			font-display: swap;
28			src: url("/assets/fonts/noto-serif-normal-400.woff2") format("woff2");
29		}
30		@font-face {
31			font-family: "Noto Serif";
32			font-style: normal;
33			font-weight: 700;
34			font-display: swap;
35			src: url("/assets/fonts/noto-serif-normal-700.woff2") format("woff2");
36		}
37		@font-face {
38			font-family: "Noto Serif";
39			font-style: italic;
40			font-weight: 400;
41			font-display: swap;
42			src: url("/assets/fonts/noto-serif-italic-400.woff2") format("woff2");
43		}
44
45		:root {
46			--c-primary: #4338ca;
47			--c-primary-light: #6366f1;
48			--c-accent: #e5446f;
49			--c-accent-light: #fda4af;
50			--c-bg: #f6f1e8;
51			--hiw-result-wash: #e3d6f8;
52			--c-surface: #fffdf8;
53			--c-inset: #f8f4ea;
54			--c-border: rgba(15, 23, 42, 0.08);
55			--c-border-hover: rgba(15, 23, 42, 0.16);
56			--c-text-900: #0f172a;
57			--c-text-700: #334155;
58			--c-text-500: #64748b;
59			--c-text-inverse: #ffffff;
60			--c-link: var(--c-primary);
61			--font-sans: "Poppins", -apple-system, BlinkMacSystemFont, sans-serif;
62			--font-serif: "Noto Serif", Georgia, serif;
63			--s-1: 0.25rem;
64			--s-2: 0.5rem;
65			--s-3: 1rem;
66			--s-4: 1.5rem;
67			--s-5: 2.5rem;
68			--r-sm: 0.5rem;
69			--r-md: 1rem;
70			--r-lg: 1.5rem;
71			--r-xl: 2rem;
72			--r-full: 9999px;
73			--radius-sm: var(--r-sm);
74			--radius-md: var(--r-md);
75			--radius-lg: var(--r-lg);
76			--radius-full: var(--r-full);
77			--space-1: var(--s-1);
78			--space-2: var(--s-2);
79			--space-3: var(--s-3);
80			--surface-main: var(--c-surface);
81			--border-subtle: var(--c-border);
82			--content-primary: var(--c-text-900);
83			--text-tertiary: var(--c-text-500);
84			--shadow-color: color-mix(in srgb, var(--c-primary) 28%, transparent);
85			--chip-info-bg: var(--c-primary);
86			--s-6: 4rem;
87			--s-7: 6rem;
88			--s-8: 10rem;
89			--ease-out: cubic-bezier(0.23, 1, 0.32, 1);
90			--ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
91			--ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
92			--duration-press: 160ms;
93			--duration-enter: 280ms;
94			--duration-creating: 4s;
95			--duration-creating-reduce: 0.7s;
96			--duration-creating-in: 0.42s;
97			--duration-creating-out: 0.4s;
98			--duration-creating-idle: 2.7s;
99			--duration-creating-veil-out: 0.38s;
100			--duration-creating-veil-delay: 3.14s;
101			--duration-result-reveal: 0.56s;
102			--duration-result-reveal-delay: 3.36s;
103			--duration-choice: 220ms;
104			--duration-swap: 180ms;
105			--duration-drawer: 400ms;
106			--scale-press: 0.97;
107			--focus-ring: var(--c-primary);
108			--shadow-md: 0 18px 40px -18px rgba(67, 56, 202, 0.28);
109			color-scheme: light dark;
110		}
111
112		@media (prefers-color-scheme: dark) {
113			:root {
114				--c-bg: #1c1712;
115				--hiw-result-wash: color-mix(in srgb, var(--c-primary) 34%, #1c1712);
116				--c-surface: #2a241c;
117				--c-inset: #221c16;
118				--c-border: rgba(255, 253, 248, 0.14);
119				--c-border-hover: rgba(255, 253, 248, 0.28);
120				--c-text-900: #fffdf8;
121				--c-text-700: #e8e0d4;
122				--c-text-500: #d4c8b8;
123				--c-link: #c7d2fe;
124				--shadow-md: 0 18px 40px -16px rgba(0, 0, 0, 0.55);
125			}
126		}
127
128		*,
129		*::before,
130		*::after {
131			box-sizing: border-box;
132		}
133
134		html,
135		body {
136			margin: 0;
137			min-height: 100%;
138			background: var(--c-bg);
139			color: var(--c-text-700);
140			font-family: var(--font-sans);
141			line-height: 1.5;
142			-webkit-font-smoothing: antialiased;
143		}
144
145		.hiw {
146			position: relative;
147			isolation: isolate;
148			overflow-x: hidden;
149			min-height: 100vh;
150			min-height: 100dvh;
151			display: flex;
152			flex-direction: column;
153			color: var(--c-text-900);
154			background-color: var(--c-bg);
155			background-image: radial-gradient(circle at 1px 1px, rgba(28, 23, 18, 0.07) 1px, transparent 0);
156			background-size: 18px 18px;
157			-webkit-tap-highlight-color: transparent;
158			touch-action: manipulation;
159		}
160
161		@media (prefers-color-scheme: dark) {
162			.hiw {
163				background-image: radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--c-surface) 12%, transparent) 1p
163x, transparent 0);
164			}
165		}
166
167		.hiw:has(.hiw-stage--result) {
168			background-image: linear-gradient(180deg, var(--hiw-result-wash) 0%, color-mix(in srgb, var(--hiw-result-wash) 42%, var(--c-bg)) 30%, var(--c-bg) 58%);
169			background-size: auto;
170		}
171
172		@media (prefers-color-scheme: dark) {
173			.hiw:has(.hiw-stage--result) {
174				background-image: linear-gradient(180deg, var(--hiw-result-wash) 0%, color-mix(in srgb, var(--hiw-result-wash) 45%, var(--c-bg)) 34%, var(--c-bg) 62%);
175			}
176		}
177
178		.hiw-logo {
179			position: relative;
180			z-index: 2;
181			flex: none;
182			display: inline-flex;
183			align-self: flex-start;
184			padding: 1.25rem 1.5rem 0.5rem;
185			padding-left: max(1.5rem, env(safe-area-inset-left));
186			padding-top: max(1.25rem, env(safe-area-inset-top));
187		}
188		.hiw > .language-toggle {
189			position: absolute;
190			top: max(1rem, env(safe-area-inset-top));
191			right: max(1.25rem, env(safe-area-inset-right));
192			z-index: 3;
193		}
194
195		.hiw-logo img {
196			display: block;
197			height: 1.75rem;
198			width: auto;
199		}
200
201		.hiw-stage {
202			position: relative;
203			z-index: 2;
204			flex: 1 1 auto;
205			display: flex;
206			justify-content: center;
207			align-items: start;
208			width: 100%;
209			padding: 1.5rem 1.25rem 2.5rem;
210			padding-bottom: max(2.5rem, env(safe-area-inset-bottom));
211		}
212
213		.hiw-frame {
214			--hiw-tower-ground: 33.25rem;
215			position: relative;
216			overflow: visible;
217			width: 100%;
218			max-width: 38rem;
219		}
220
221		.hiw-tower {
222			--hiw-tower-fade-top: rgb(0 0 0 / 0.95);
223			--hiw-tower-fade-bottom: rgb(0 0 0 / 0.80);
224			--hiw-tower-tint-top: color-mix(in srgb, var(--c-bg) 5%, transparent);
225			--hiw-tower-tint-bottom: color-mix(in srgb, var(--c-bg) 25%, transparent);
226			display: none;
227			position: absolute;
228			z-index: 0;
229			top: var(--hiw-tower-ground);
230			bottom: auto;
231			height: auto;
232			pointer-events: none;
233			user-select: none;
234			transform: translateY(-100%);
235		}
236
237		.hiw-tower img {
238			display: block;
239			width: 100%;
240			height: auto;
241			-webkit-mask-image: linear-gradient(to bottom, var(--hiw-tower-fade-top), var(--hiw-tower-fade-bottom));
242			mask-image: linear-gradient(to bottom, var(--hiw-tower-fade-top), var(--hiw-tower-fade-bottom));
243		}
244
245		.hiw-tower::after {
246			content: "";
247			position: absolute;
248			inset: 0;
249			pointer-events: none;
250			background: linear-gradient(to bottom, var(--hiw-tower-tint-top), var(--hiw-tower-tint-bottom));
251			-webkit-mask-image: var(--hiw-tower-art);
252			mask-image: var(--hiw-tower-art);
253			-webkit-mask-size: 100% 100%;
254			mask-size: 100% 100%;
255			-webkit-mask-repeat: no-repeat;
256			mask-repeat: no-repeat;
257		}
258
259		.hiw-tower--left {
260			right: calc(100% - 2.25rem);
261			width: 9.5rem;
262		}
263
264		.hiw-tower--right {
265			left: calc(100% - 2.5rem);
266			width: 10.25rem;
267		}
268
269		.hiw-stage--result {
270			flex-direction: column;
271			align-items: center;
272			padding-bottom: max(2.5rem, env(safe-area-inset-bottom));
273		}
274
275		.hiw-result-hero,
276		.hiw-stage--result > .hiw-card--result,
277		.hiw-stage--result > .hiw-result-cta {
278			width: 100%;
279			max-width: 38rem;
280		}
281
282		.hiw-result-hero {
283			margin: 0 0 1.5rem;
284			text-align: center;
285		}
286
287		.hiw-result-title {
288			margin: 0 0 0.7rem;
289			font-family: var(--font-serif);
290			font-size: clamp(1.65rem, 2.2vw + 0.9rem, 2.25rem);
291			font-weight: 700;
292			line-height: 1.18;
293			letter-spacing: -0.02em;
294			color: var(--c-text-900);
295			text-wrap: balance;
296		}
297
298		.hiw-result-title em {
299			font-style: italic;
300			font-weight: 700;
301			background: linear-gradient(135deg, var(--c-primary), var(--c-accent));
302			-webkit-background-clip: text;
303			background-clip: text;
304			-webkit-text-fill-color: transparent;
305			color: var(--c-primary);
306		}
307		@media (prefers-color-scheme: dark) {
308			.hiw-result-title em {
309				background: linear-gradient(135deg, var(--c-link), var(--c-accent-light));
310				-webkit-background-clip: text;
311				background-clip: text;
312				-webkit-text-fill-color: transparent;
313				color: var(--c-link);
314			}
315		}
316
317		.hiw-result-lede {
318			margin: 0 auto 1.15rem;
319			max-width: 36ch;
320			color: var(--c-text-500);
321			font-size: 1.02rem;
322			font-weight: 400;
323			line-height: 1.45;
324			text-wrap: pretty;
325		}
326
327		.hiw-edit-row {
328			margin: 0.55rem 0 0;
329			text-align: center;
330		}
331
332		.hiw-edit {
333			color: var(--c-text-500);
334			font-size: 0.85rem;
335			font-weight: 500;
336			text-decoration: underline;
337			text-decoration-thickness: 1px;
338			text-underline-offset: 0.18em;
339			text-decoration-color: color-mix(in srgb, var(--c-text-500) 45%, transparent);
340			transition:
341				color 160ms ease,
342				text-decoration-color 160ms ease;
343		}
344
345		.hiw-edit:focus-visible {
346			outline: 2px solid var(--focus-ring);
347			outline-offset: 2px;
348		}
349
350		@media (hover: hover) and (pointer: fine) {
351			.hiw-edit:hover {
352				color: var(--c-text-700);
353				text-decoration-color: color-mix(in srgb, var(--c-text-700) 55%, transparent);
354			}
355		}
356
357		.hiw-creating {
358			position: fixed;
359			inset: 0;
360			z-index: 20;
361			display: flex;
362			flex-direction: column;
363			align-items: center;
364			justify-content: center;
365			padding: 1.5rem;
366			background: transparent;
367			animation: hiw-creating-release 1ms linear var(--duration-creating-veil-delay) forwards;
368		}
369
370		.hiw-creating::before {
371			content: "";
372			position: absolute;
373			inset: 0;
374			z-index: 0;
375			background: linear-gradient(180deg, var(--hiw-result-wash) 0%, var(--c-bg) 72%);
376			animation: hiw-creating-veil-out var(--duration-creating-veil-out) var(--ease-out) var(--duration-creating-veil-delay) forwards;
377		}
378
379		.hiw-creating-mark {
380			position: relative;
381			z-index: 1;
382			display: flex;
383			flex-direction: column;
384			align-items: center;
385			gap: 1rem;
386			transform-origin: 50% 42%;
387			animation:
388				hiw-progress-orb-in var(--duration-creating-in) var(--ease-out) both,
389				hiw-progress-orb-out var(--duration-creating-out) var(--ease-out) var(--duration-creating-idle) forwards;
390		}
391
392		.hiw-creating-copy {
393			margin: 0;
394			color: var(--c-text-700);
395			font-family: var(--font-serif);
396			font-style: italic;
397			font-size: 1.05rem;
398			letter-spacing: -0.01em;
399		}
400
401		.hiw-creating[hidden] {
402			display: none;
403			animation: none;
404		}
405
406		.hiw-card {
407			position: relative;
408			z-index: 1;
409			width: 100%;
410			max-width: 38rem;
411			min-width: 0;
412			background: var(--c-surface);
413			border: 1px solid var(--c-border);
414			border-radius: var(--r-xl);
415			padding: 1.5rem 1.5rem 1.25rem;
416			box-shadow: var(--shadow-md);
417		}
418
419		.hiw-card--result {
420			padding-bottom: 1.25rem;
421		}
422
423		.hiw-toolbar {
424			flex: none;
425			display: flex;
426			align-items: center;
427			gap: 0.75rem;
428			min-height: 2.75rem;
429			margin: 0 0 1.25rem;
430		}
431
432		.hiw-back {
433			flex: none;
434			width: 2.75rem;
435			height: 2.75rem;
436			display: inline-flex;
437			align-items: center;
438			justify-content: center;
439			border-radius: var(--r-full);
440			color: var(--c-text-700);
441			background: var(--c-inset);
442			border: 1px solid var(--c-border);
443			text-decoration: none;
444			transition:
445				transform var(--duration-press) var(--ease-out),
446				background-color 160ms ease,
447				border-color 160ms ease,
448				color 160ms ease;
449		}
450
451		.hiw-back:focus-visible {
452			outline: 2px solid var(--focus-ring);
453			outline-offset: 2px;
454		}
455
456		.hiw-back:active {
457			transform: scale(var(--scale-press));
458		}
459
460		.hiw-progress {
461			--hiw-from: 0;
462			--hiw-to: 0;
463			flex: 1 1 auto;
464			height: 4px;
465			border-radius: var(--r-full);
466			background: var(--c-border);
467			overflow: hidden;
468		}
469
470		.hiw-progress-fill {
471			display: block;
472			width: 100%;
473			height: 100%;
474			border-radius: 0;
475			background: var(--c-primary);
476			transform: scaleX(calc(var(--hiw-to) / 100));
477			transform-origin: left center;
478		}
479
480		.hiw-title {
481			margin: 0 0 0.65rem;
482			font-family: var(--font-serif);
483			font-size: clamp(1.35rem, 2.4vw, 1.7rem);
484			font-weight: 700;
485			line-height: 1.25;
486			letter-spacing: -0.015em;
487			color: var(--c-text-900);
488			text-wrap: balance;
489			min-height: 2.125rem;
490		}
491
492		.hiw-setup {
493			margin: 0 0 1.15rem;
494			color: var(--c-text-700);
495			font-size: 1.02rem;
496			font-weight: 400;
497			line-height: 1.5;
498		}
499
500		.hiw-setup:has(+ .hiw-hint) {
501			margin-bottom: 0.5rem;
502		}
503
504		.hiw-hint {
505			margin: 0 0 1.15rem;
506			color: var(--c-text-500);
507			font-size: 0.95rem;
508			line-height: 1.45;
509		}
510
511		.hiw-hint--error {
512			color: var(--c-accent);
513			font-weight: 600;
514		}
515
516		.hiw-disclaimer {
517			margin: 1.15rem 0 0;
518			color: var(--c-text-500);
519			font-size: 0.875rem;
520			line-height: 1.45;
521		}
522
523		.hiw-choices {
524			list-style: none;
525			margin: 0;
526			padding: 0;
527			display: flex;
528			flex-direction: column;
529			gap: 0.75rem;
530		}
531
532		.hiw-choices--chips {
533			display: grid;
534			grid-template-columns: repeat(2, minmax(0, 1fr));
535			gap: 0.5rem;
536			margin-bottom: 1.25rem;
537		}
538
539		.hiw-choice {
540			display: block;
541			width: 100%;
542			min-height: 2.75rem;
543			text-align: left;
544			border: 1px solid var(--c-border-hover);
545			border-radius: var(--r-sm);
546			background: var(--c-inset);
547			color: var(--c-text-900);
548			padding: 0.75rem 1rem;
549			font: inherit;
550			font-size: 1rem;
551			font-weight: 600;
552			line-height: 1.3;
553			cursor: pointer;
554			transition:
555				transform var(--duration-press) var(--ease-out),
556				border-color 160ms ease,
557				background-color 160ms ease;
558		}
559
560		.hiw-choice:focus-visible,
561		.hiw-continue:focus-visible,
562		.hiw-skip-link:focus-visible {
563			outline: 2px solid var(--focus-ring);
564			outline-offset: 2px;
565		}
566
567		.hiw-choice:active,
568		.hiw-continue:active {
569			transform: scale(var(--scale-press));
570		}
571
572		.hiw-pager-dot:active {
573			transform: scale(var(--scale-press));
574		}
575
576		.hiw-continue {
577			display: inline-flex;
578			align-items: center;
579			justify-content: center;
580			width: 100%;
581			margin-top: 0.25rem;
582			padding: 0.85rem 1.5rem;
583			font: inherit;
584			font-size: 1rem;
585			font-weight: 600;
586			color: var(--c-text-inverse);
587			background: var(--c-primary);
588			border: 2px solid transparent;
589			border-radius: var(--r-full);
590			text-decoration: none;
591			cursor: pointer;
592			box-shadow: 0 4px 14px 0 rgba(67, 56, 202, 0.39);
593			transition:
594				transform var(--duration-press) var(--ease-out),
595				background-color 160ms ease,
596				box-shadow 160ms ease;
597		}
598
599		.hiw-skip {
600			display: flex;
601			flex-wrap: wrap;
602			align-items: baseline;
603			justify-content: center;
604			column-gap: 0.5em;
605			row-gap: 0.15em;
606			margin: 1.25rem 0 0;
607			padding-top: 1rem;
608			border-top: 1px solid var(--c-border);
609			color: var(--c-text-500);
610			font-size: 0.95rem;
611			text-align: center;
612		}
613
614		.hiw-skip-prompt {
615			font-family: var(--font-serif);
616			font-style: italic;
617			font-weight: 400;
618		}
619
620		.hiw-skip-link {
621			color: var(--c-link);
622			font-weight: 500;
623			text-decoration: underline;
624			text-decoration-thickness: 1px;
625			text-underline-offset: 0.2em;
626			text-decoration-color: color-mix(in srgb, var(--c-link) 55%, transparent);
627			transition:
628				color 160ms ease,
629				text-decoration-color 160ms ease,
630				text-underline-offset 160ms ease;
631		}
632
633		.hiw-result-cta {
634			margin-top: 1.15rem;
635		}
636
637		.hiw-plan-sheet {
638			padding: 0;
639			border: 0;
640			background: transparent;
641			color: var(--c-text-900);
642			overflow: visible;
643		}
644		.hiw-plan-sheet::backdrop {
645			background: color-mix(in srgb, #1c1712 42%, transparent);
646		}
647		.hiw-plan-sheet-panel {
648			display: flex;
649			flex-direction: column;
650			min-height: 0;
651			background: var(--c-surface);
652			box-shadow: var(--shadow-md);
653			overflow: hidden;
654		}
655		.hiw-plan-sheet-chrome {
656			flex: none;
657			display: flex;
658			align-items: center;
659			justify-content: space-between;
660			gap: 0.75rem;
661			padding: 0.85rem 1rem 0.65rem;
662			border-bottom: 1px solid var(--c-border);
663		}
664		.hiw-plan-sheet-handle {
665			display: none;
666		}
667		.hiw-plan-sheet-title {
668			margin: 0;
669			font-family: var(--font-serif);
670			font-size: 1.15rem;
671			font-weight: 700;
672			letter-spacing: -0.02em;
673		}
674		.hiw-plan-sheet-close {
675			display: inline-flex;
676			align-items: center;
677			justify-content: center;
678			width: 2.5rem;
679			height: 2.5rem;
680			margin: 0;
681			padding: 0;
682			border: 1px solid var(--c-border);
683			border-radius: var(--r-full);
684			background: var(--c-inset);
685			color: var(--c-text-700);
686			cursor: pointer;
687		}
688		.hiw-plan-sheet-close:focus-visible {
689			outline: 2px solid var(--focus-ring);
690			outline-offset: 2px;
691		}
692		.hiw-plan-sheet-close:active {
693			transform: scale(var(--scale-press));
694		}
695		@media (hover: hover) and (pointer: fine) {
696			.hiw-plan-sheet-close:hover {
697				border-color: var(--c-border-hover);
698				color: var(--c-text-900);
699			}
700		}
701		.hiw-plan-sheet-body {
702			flex: 1 1 auto;
703			min-height: 0;
704			overflow: auto;
705			padding: var(--s-3);
706			padding-bottom: max(var(--s-3), env(safe-area-inset-bottom));
707		}
708		.hiw-plan-sheet:has(.plans-mobile-trial, .hiw-sheet-steps > *) .hiw-plan-sheet-handle,
709		.hiw-plan-sheet:has(.plans-mobile-trial, .hiw-sheet-steps > *) .hiw-plan-sheet-title {
710			display: none;
711		}
712		.hiw-plan-sheet:has(.plans-mobile-trial, .hiw-sheet-steps > *) .hiw-plan-sheet-chrome {
713			display: flex;
714			justify-content: flex-end;
715			border-bottom: 0;
716			padding: 0.65rem 0.85rem 0;
717		}
718		.hiw-plan-sheet:has(.plans-mobile-trial, .hiw-sheet-steps > *) .hiw-plan-sheet-panel {
719			position: relative;
720			isolation: isolate;
721		}
722		.hiw-plan-sheet:has(.plans-mobile-trial, .hiw-sheet-steps > *) .hiw-plan-sheet-panel::before {
723			content: "";
724			position: absolute;
725			z-index: 0;
726			top: 0;
727			left: 0;
728			right: 0;
729			height: 13rem;
730			pointer-events: none;
731			background-image:
732				linear-gradient(to bottom, rgba(28, 23, 18, 0.42) 0%, var(--c-surface) 82%),
733				url("/cdn/static/images/hero_bg.webp");
734			background-repeat: no-repeat;
735			background-size: cover, cover;
736			background-position: center, center 35%;
737		}
738		.hiw-plan-sheet:has(.plans-mobile-trial, .hiw-sheet-steps > *) .hiw-plan-sheet-chrome,
739		.hiw-plan-sheet:has(.plans-mobile-trial, .hiw-sheet-steps > *) .hiw-plan-sheet-body {
740			position: relative;
741			z-index: 1;
742		}
743		.hiw-plan-sheet:has(.plans-mobile-trial, .hiw-sheet-steps > *) .hiw-plan-sheet-body {
744			display: flex;
745			flex-direction: column;
746			overflow: hidden;
747		}
748		.hiw-plan-sheet-body .plan-cta {
749			appearance: none;
750			cursor: pointer;
751			font-family: inherit;
752			font-size: inherit;
753			font-weight: 700;
754		}
755		@media (prefers-color-scheme: dark) {
756			.hiw-plan-sheet {
757				color-scheme: dark;
758				--plans-green: #cde7b0;
759				--plans-green-deep: #cde7b0;
760				--plans-primary-strong: #c7d2fe;
761				--text-secondary: var(--c-text-500);
762			}
763			.hiw-plan-sheet::backdrop {
764				background: color-mix(in srgb, #1c1712 62%, transparent);
765			}
766			.hiw-plan-sheet .plans-hero {
767				background-color: var(--c-inset);
768				box-shadow: var(--shadow-md);
769			}
770			.hiw-plan-sheet .plans-hero-included {
771				background-color: var(--c-surface);
772			}
773			.hiw-plan-sheet .plans-hero .plan-cta {
774				color: var(--c-text-inverse);
775			}
776			.hiw-plan-sheet .plans-hero .plan-cta:hover {
777				background-color: var(--c-primary-light);
778				border-color: var(--c-primary-light);
779				color: var(--c-text-inverse);
780			}
781			.hiw-plan-sheet .plans-hero-included .plan-features li i {
782				color: var(--c-link);
783			}
784			.hiw-plan-sheet .plan-price-save {
785				background-color: color-mix(in srgb, var(--c-primary) 28%, var(--c-surface));
786				color: var(--c-link);
787			}
788			.hiw-plan-sheet .plan-founding-badge,
789			.hiw-plan-sheet .toggle-save-badge {
790				background-color: color-mix(in srgb, var(--plans-green) 16%, var(--c-surface));
791				color: var(--plans-green);
792			}
793			.hiw-plan-sheet .toggle-active {
794				background-color: var(--c-inset);
795				box-shadow: none;
796			}
797		}
798		@media (min-width: 48rem) {
799			.hiw-plan-sheet {
800				width: min(26rem, 100vw);
801				max-width: 26rem;
802				height: 100%;
803				max-height: 100%;
804				margin: 0 0 0 auto;
805			}
806			.hiw-plan-sheet-panel {
807				height: 100%;
808				border-radius: 0;
809			}
810			.hiw-plan-sheet[open] {
811				transform: translateX(0);
812				transition:
813					transform var(--duration-drawer) var(--ease-drawer),
814					overlay var(--duration-drawer) var(--ease-drawer) allow-discrete;
815			}
816			@starting-style {
817				.hiw-plan-sheet[open] {
818					transform: translateX(100%);
819				}
820			}
821		}
822		@media (max-width: 47.99rem) {
823			.hiw-plan-sheet {
824				width: 100%;
825				max-width: 100%;
826				height: fit-content;
827				max-height: 100dvh;
828				margin: auto 0 0 0;
829				overflow: hidden;
830			}
831			.hiw-plan-sheet-panel {
832				height: auto;
833				max-height: 100dvh;
834				overflow: hidden;
835				border-radius: var(--r-xl) var(--r-xl) 0 0;
836			}
837			.hiw-plan-sheet-chrome {
838				display: grid;
839				grid-template-columns: 1fr auto;
840				grid-template-areas:
841					"handle handle"
842					"title close";
843				align-items: center;
844				column-gap: 0.75rem;
845				row-gap: 0.15rem;
846				padding: 0.4rem 0.85rem 0.5rem;
847			}
848			.hiw-plan-sheet-handle {
849				display: block;
850				grid-area: handle;
851				width: 2.6rem;
852				height: 0.28rem;
853				justify-self: center;
854				margin: 0.1rem 0 0.15rem;
855				border-radius: var(--r-full);
856				background: color-mix(in srgb, var(--c-text-500) 55%, transparent);
857			}
858			.hiw-plan-sheet-title {
859				grid-area: title;
860				min-width: 0;
861			}
862			.hiw-plan-sheet-close {
863				grid-area: close;
864			}
865			.hiw-plan-sheet-body {
866				flex: 0 1 auto;
867				overflow: visible;
868				padding: var(--s-2) var(--s-3) max(var(--s-3), env(safe-area-inset-bottom));
869			}
870			.hiw-plan-sheet[open] {
871				transform: translateY(0);
872				transition:
873					transform var(--duration-drawer) var(--ease-drawer),
874					overlay var(--duration-drawer) var(--ease-drawer) allow-discrete;
875			}
876			@starting-style {
877				.hiw-plan-sheet[open] {
878					transform: translateY(100%);
879				}
880			}
881			.hiw-plan-sheet:has(.plans-mobile-trial, .hiw-sheet-steps > *) {
882				height: 100dvh;
883				max-height: 100dvh;
884				margin: 0;
885			}
886			.hiw-plan-sheet:has(.plans-mobile-trial, .hiw-sheet-steps > *) .hiw-plan-sheet-panel {
887				height: 100%;
888				max-height: 100%;
889				min-height: 0;
890				border-radius: 0;
891			}
892			.hiw-plan-sheet:has(.plans-mobile-trial, .hiw-sheet-steps > *) .hiw-plan-sheet-body {
893				flex: 1 1 auto;
894				min-height: 0;
895				overflow: hidden;
896			}
897		}
898		@media (min-width: 48rem) and (max-height: 46.5rem) {
899			.hiw-plan-sheet:has(.plans-mobile-trial, .hiw-sheet-steps > *) .hiw-plan-sheet-chrome {
900				padding: 0.35rem 0.75rem 0;
901			}
902			.hiw-plan-sheet:has(.plans-mobile-trial, .hiw-sheet-steps > *) .hiw-plan-sheet-close {
903				width: 2rem;
904				height: 2rem;
905			}
906			.hiw-plan-sheet:has(.plans-mobile-trial, .hiw-sheet-steps > *) .hiw-plan-sheet-body {
907				padding: var(--s-2) var(--s-3) var(--s-2);
908			}
909		}
910		@media (min-width: 48rem) and (orientation: landscape) {
911			.hiw-plan-sheet:has(.plans-mobile-trial, .hiw-sheet-steps > *) .hiw-plan-sheet-body {
912				padding-bottom: var(--s-5);
913			}
914		}
915
916		.hiw-result-cta .hiw-continue {
917			margin-top: 0;
918			animation-delay: 0ms;
919		}
920
921		.hiw-picker {
922			user-select: none;
923			-webkit-tap-highlight-color: transparent;
924		}
925
926		.hiw-plan-stack {
927			position: relative;
928			isolation: isolate;
929			margin: 0 0 1.25rem;
930			padding-bottom: 1.5rem;
931		}
932
933		.hiw-plan {
934			position: relative;
935			z-index: 2;
936			margin: 0;
937			padding: 1.15rem 1.15rem 0.9rem;
938			background: var(--c-inset);
939			border: 1px solid var(--c-border);
940			border-radius: var(--r-sm);
941			box-shadow: var(--shadow-md);
942		}
943
944		.hiw-plan[hidden] {
945			display: none;
946		}
947
948		.hiw-plan-stack[data-count="2"]::before,
949		.hiw-plan-stack[data-count="3"]::before,
950		.hiw-plan-stack[data-count="3"]::after {
951			content: "";
952			position: absolute;
953			z-index: 0;
954			left: 0.55rem;
955			right: 0.55rem;
956			top: 0.45rem;
957			bottom: 0.35rem;
958			background: var(--c-surface);
959			border: 1px solid var(--c-border);
960			border-radius: var(--r-sm);
961			box-shadow: var(--shadow-md);
962		}
963
964		.hiw-plan-stack[data-count="2"]::before,
965		.hiw-plan-stack[data-count="3"]::before {
966			transform: rotate(-2.15deg);
967		}
968
969		.hiw-plan-stack[data-count="3"]::after {
970			z-index: 1;
971			left: 0.95rem;
972			right: 0.3rem;
973			transform: rotate(1.85deg);
974		}
975
976		.hiw-plan-name {
977			margin: 0 0 0.2rem;
978			font-family: var(--font-serif);
979			font-size: clamp(1.2rem, 2.2vw, 1.4rem);
980			font-weight: 400;
981			line-height: 1.25;
982			color: var(--c-text-900);
983			text-wrap: balance;
984			overflow-wrap: break-word;
985		}
986
987		.hiw-plan-length {
988			margin: 0 0 0.85rem;
989			font-family: var(--font-serif);
990			font-style: italic;
991			font-size: 0.98rem;
992			line-height: 1.4;
993			color: var(--c-text-500);
994		}
995
996		.hiw-phases {
997			list-style: none;
998			margin: 0;
999			padding: 0;
1000		}
1001
1002		.hiw-phase {
1003			margin: 0;
1004			padding: 0.8rem 0 0.85rem;
1005			border-top: 1px solid var(--c-border);
1006		}
1007
1008		.hiw-phase:first-child {
1009			padding-top: 0.15rem;
1010			border-top: 0;
1011		}
1012
1013		.hiw-phase-name {
1014			margin: 0 0 0.15rem;
1015			color: var(--c-link);
1016			font-size: 0.875rem;
1017			font-weight: 600;
1018			letter-spacing: 0.01em;
1019			line-height: 1.3;
1020		}
1021
1022		.hiw-phase-title {
1023			margin: 0;
1024			font-family: var(--font-sans);
1025			font-size: 1.05rem;
1026			font-weight: 400;
1027			line-height: 1.35;
1028			color: var(--c-text-900);
1029			text-wrap: pretty;
1030			overflow-wrap: break-word;
1031		}
1032
1033		.hiw-pager {
1034			display: grid;
1035			grid-template-columns: 2.75rem minmax(0, 1fr) 2.75rem;
1036			align-items: center;
1037			column-gap: 0.5rem;
1038			margin: 0 0 1.15rem;
1039		}
1040
1041		.hiw-pager-slot {
1042			display: grid;
1043			justify-items: center;
1044		}
1045
1046		.hiw-pager-btn {
1047			display: inline-flex;
1048			align-items: center;
1049			justify-content: center;
1050			width: 2.75rem;
1051			height: 2.75rem;
1052			border-radius: var(--r-full);
1053			color: var(--c-text-700);
1054			background: var(--c-surface);
1055			border: 1px solid var(--c-border);
1056			text-decoration: none;
1057			cursor: pointer;
1058			transition:
1059				transform var(--duration-press) var(--ease-out),
1060				border-color 160ms ease,
1061				color 160ms ease;
1062		}
1063
1064		.hiw-pager-btn:focus-visible {
1065			outline: 2px solid var(--focus-ring);
1066			outline-offset: 2px;
1067		}
1068
1069		.hiw-pager-btn:active {
1070			transform: scale(var(--scale-press));
1071		}
1072
1073		.hiw-pager-dots {
1074			display: flex;
1075			align-items: center;
1076			justify-content: center;
1077			gap: 0.15rem;
1078		}
1079
1080		.hiw-pager-dot {
1081			position: relative;
1082			display: inline-flex;
1083			align-items: center;
1084			justify-content: center;
1085			flex: none;
1086			width: 2.75rem;
1087			height: 2.75rem;
1088			text-decoration: none;
1089			cursor: pointer;
1090		}
1091
1092		.hiw-pager-dot-mark {
1093			width: 0.55rem;
1094			height: 0.55rem;
1095			border-radius: var(--r-full);
1096			border: 1.5px solid var(--c-border-hover);
1097			background: var(--c-surface);
1098			transition:
1099				background-color 160ms ease,
1100				border-color 160ms ease,
1101				transform var(--duration-swap) var(--ease-out);
1102		}
1103
1104		.hiw-picker[data-index="0"] .hiw-pager-dot[data-index="0"] .hiw-pager-dot-mark,
1105		.hiw-picker[data-index="1"] .hiw-pager-dot[data-index="1"] .hiw-pager-dot-mark,
1106		.hiw-picker[data-index="2"] .hiw-pager-dot[data-index="2"] .hiw-pager-dot-mark {
1107			background: var(--c-primary);
1108			border-color: var(--c-primary);
1109			transform: scale(1.2);
1110		}
1111
1112		.hiw-pager-dot:focus-visible .hiw-pager-dot-mark {
1113			outline: 2px solid var(--focus-ring);
1114			outline-offset: 3px;
1115		}
1116
1117		@media (hover: hover) and (pointer: fine) {
1118			.hiw-choice:hover {
1119				border-color: var(--c-primary);
1120				background: color-mix(in srgb, var(--c-primary) 8%, var(--c-inset));
1121			}
1122			.hiw-continue:hover {
1123				background: var(--c-primary-light);
1124				transform: translateY(-2px);
1125				box-shadow: 0 8px 20px rgba(67, 56, 202, 0.3);
1126			}
1127			.hiw-skip-link:hover {
1128				color: var(--c-link);
1129				text-decoration-color: var(--c-link);
1130				text-underline-offset: 0.28em;
1131			}
1132			.hiw-back:hover {
1133				color: var(--c-primary);
1134				border-color: color-mix(in srgb, var(--c-primary) 35%, var(--c-border));
1135				transform: translateX(-2px);
1136			}
1137			.hiw-pager-btn:hover {
1138				color: var(--c-primary);
1139				border-color: color-mix(in srgb, var(--c-primary) 35%, var(--c-border));
1140			}
1141		}
1142
1143		@media (max-width: 47.99rem) {
1144			.hiw-stage--result {
1145				padding: 0.85rem 1.1rem 8.75rem;
1146				padding-left: max(1.1rem, env(safe-area-inset-left));
1147				padding-right: max(1.1rem, env(safe-area-inset-right));
1148				padding-bottom: max(8.75rem, calc(7.75rem + env(safe-area-inset-bottom)));
1149			}
1150			.hiw-result-title {
1151				font-size: clamp(1.5rem, 6.5vw, 1.85rem);
1152				margin-bottom: 0.55rem;
1153			}
1154			.hiw-result-hero {
1155				margin-bottom: 1.1rem;
1156			}
1157			.hiw-result-lede {
1158				font-size: 0.95rem;
1159				margin-bottom: 0.85rem;
1160			}
1161			.hiw-card--result {
1162				padding: 1.1rem 1rem 0.9rem;
1163			}
1164			.hiw-result-cta {
1165				position: fixed;
1166				left: 0;
1167				right: 0;
1168				bottom: 0;
1169				z-index: 6;
1170				margin: 0;
1171				padding: 0.75rem 1.25rem;
1172				padding-left: max(1.25rem, env(safe-area-inset-left));
1173				padding-right: max(1.25rem, env(safe-area-inset-right));
1174				padding-bottom: max(0.75rem, env(safe-area-inset-bottom));
1175				background: var(--c-surface);
1176				border-top: 1px solid var(--c-border);
1177				box-shadow: 0 -16px 28px -16px rgba(28, 23, 18, 0.35);
1178			}
1179			.hiw-result-cta .hiw-continue {
1180				max-width: 38rem;
1181				margin: 0 auto;
1182			}
1183		}
1184
1185		@media (max-width: 32rem) {
1186			.hiw-stage {
1187				padding: 1rem 0.75rem 2rem;
1188				padding-left: max(0.75rem, env(safe-area-inset-left));
1189				padding-right: max(0.75rem, env(safe-area-inset-right));
1190				padding-bottom: max(2rem, env(safe-area-inset-bottom));
1191			}
1192			.hiw-stage--result {
1193				padding-top: 0.75rem;
1194				padding-left: max(0.9rem, env(safe-area-inset-left));
1195				padding-right: max(0.9rem, env(safe-area-inset-right));
1196				padding-bottom: 9rem;
1197				padding-bottom: max(9rem, calc(8rem + env(safe-area-inset-bottom)));
1198			}
1199			.hiw-card--result {
1200				padding: 1rem 0.9rem 0.85rem;
1201			}
1202			.hiw-result-title {
1203				font-size: 1.45rem;
1204			}
1205			.hiw-toolbar {
1206				gap: 0.55rem;
1207			}
1208			.hiw-back {
1209				width: 2.5rem;
1210				height: 2.5rem;
1211			}
1212			.hiw-card {
1213				padding: 1.1rem 1rem 1rem;
1214				border-radius: var(--r-lg);
1215			}
1216			.hiw-result-cta {
1217				padding: 0.7rem 0.75rem;
1218				padding-left: max(0.75rem, env(safe-area-inset-left));
1219				padding-right: max(0.75rem, env(safe-area-inset-right));
1220				padding-bottom: max(0.7rem, env(safe-area-inset-bottom));
1221			}
1222			.hiw-title {
1223				font-size: 1.28rem;
1224				min-height: 0;
1225				overflow-wrap: break-word;
1226			}
1227			.hiw-plan {
1228				padding: 1rem 0.9rem 0.75rem;
1229			}
1230			.hiw-plan-name {
1231				font-size: 1.15rem;
1232			}
1233			.hiw-pager {
1234				grid-template-columns: 2.5rem minmax(0, 1fr) 2.5rem;
1235				column-gap: 0.15rem;
1236			}
1237			.hiw-pager-btn,
1238			.hiw-pager-dot {
1239				width: 2.5rem;
1240				height: 2.5rem;
1241			}
1242			.hiw-choices--chips {
1243				grid-template-columns: 1fr;
1244				gap: 0.4rem;
1245			}
1246		}
1247
1248		@media (min-width: 48rem) {
1249			.hiw-tower {
1250				display: block;
1251			}
1252			.hiw-frame > .hiw-card {
1253				min-height: 32rem;
1254			}
1255			.hiw:has(.hiw-card--result) {
1256				min-height: 100dvh;
1257			}
1258			.hiw-logo {
1259				padding: 1rem 1.5rem 0.35rem;
1260				padding-left: max(1.5rem, env(safe-area-inset-left));
1261				padding-top: max(1rem, env(safe-area-inset-top));
1262			}
1263			.hiw-logo img {
1264				height: 1.5rem;
1265			}
1266			.hiw-stage--result {
1267				padding: 1.5rem 1.5rem 8vh;
1268				padding-bottom: max(8vh, env(safe-area-inset-bottom));
1269			}
1270			.hiw-card--result {
1271				padding: 1.35rem 1.5rem 1.25rem;
1272			}
1273			.hiw-toolbar {
1274				min-height: 2.5rem;
1275				margin-bottom: 1rem;
1276			}
1277			.hiw-result-hero {
1278				margin-bottom: 1.15rem;
1279			}
1280			.hiw-plan {
1281				padding: 1.1rem 1.15rem 0.9rem;
1282			}
1283			.hiw-plan-name {
1284				font-size: 1.2rem;
1285			}
1286			.hiw-plan-length {
1287				margin-bottom: 0.75rem;
1288			}
1289			.hiw-phase {
1290				padding: 0.65rem 0 0.7rem;
1291			}
1292			.hiw-plan-stack {
1293				margin-bottom: 1.35rem;
1294				padding-bottom: 1.6rem;
1295			}
1296			.hiw-pager {
1297				margin: 0 0 1.15rem;
1298			}
1299		}
1300
1301		@media (min-width: 64rem) {
1302			.hiw-stage--result {
1303				padding-top: 2.75rem;
1304				padding-bottom: 18vh;
1305			}
1306			.hiw-tower--left {
1307				right: calc(100% - 2.75rem);
1308				width: clamp(12rem, 18vw, 16.5rem);
1309			}
1310			.hiw-tower--right {
1311				left: calc(100% - 3rem);
1312				width: clamp(13rem, 20vw, 18rem);
1313			}
1314		}
1315
1316		@media (max-width: 22rem) {
1317			.hiw-choices--chips {
1318				grid-template-columns: 1fr;
1319			}
1320		}
1321
1322		@media (prefers-reduced-motion: no-preference) {
1323			.hiw-card {
1324				animation: hiw-in var(--duration-enter) var(--ease-out);
1325			}
1326			.hiw-tower {
1327				animation: hiw-in var(--duration-enter) var(--ease-out);
1328			}
1329			.hiw-setup {
1330				animation: hiw-in var(--duration-enter) var(--ease-out);
1331			}
1332			.hiw-title {
1333				animation: hiw-in var(--duration-enter) var(--ease-out);
1334			}
1335			.hiw-progress-fill {
1336				animation: hiw-progress var(--duration-enter) var(--ease-out);
1337			}
1338			.hiw-continue {
1339				animation: hiw-choice-in var(--duration-choice) var(--ease-out) 80ms both;
1340			}
1341			.hiw-skip {
1342				animation: hiw-choice-in var(--duration-choice) var(--ease-out) 110ms both;
1343			}
1344			.hiw-choices > li,
1345			.hiw-phases > li {
1346				animation: hiw-choice-in var(--duration-choice) var(--ease-out) both;
1347			}
1348			#hiw-plan.htmx-swapping {
1349				opacity: 0;
1350				transition: opacity 80ms var(--ease-out);
1351			}
1352			#hiw-plan.htmx-settling {
1353				animation: hiw-choice-in var(--duration-swap) var(--ease-out);
1354			}
1355			.hiw-choices > li:nth-child(1),
1356			.hiw-phases > li:nth-child(1) { animation-delay: 20ms; }
1357			.hiw-choices > li:nth-child(2),
1358			.hiw-phases > li:nth-child(2) { animation-delay: 40ms; }
1359			.hiw-choices > li:nth-child(3),
1360			.hiw-phases > li:nth-child(3) { animation-delay: 60ms; }
1361			.hiw-choices > li:nth-child(4) { animation-delay: 80ms; }
1362			.hiw-choices > li:nth-child(5) { animation-delay: 100ms; }
1363			.hiw-choices > li:nth-child(6) { animation-delay: 120ms; }
1364			.hiw-choices > li:nth-child(7) { animation-delay: 140ms; }
1365			.hiw-choices > li:nth-child(8) { animation-delay: 160ms; }
1366			.hiw-choices > li:nth-child(n + 9) { animation-delay: 170ms; }
1367			.hiw-stage--creating .hiw-result-hero,
1368			.hiw-stage--creating .hiw-card--result,
1369			.hiw-stage--creating .hiw-result-cta {
1370				opacity: 0;
1371				transform-origin: 50% 24%;
1372				animation: hiw-result-reveal var(--duration-result-reveal) var(--ease-out) var(--duration-result-reveal-delay) both;
1373			}
1374			.hiw-stage--creating .hiw-card--result {
1375				animation-delay: calc(var(--duration-result-reveal-delay) + 70ms);
1376			}
1377			.hiw-stage--creating .hiw-result-cta {
1378				animation-delay: calc(var(--duration-result-reveal-delay) + 140ms);
1379			}
1380			.hiw-stage--creating .hiw-result-cta .hiw-continue {
1381				animation: none;
1382			}
1383		}
1384
1385		@media (prefers-reduced-motion: reduce) {
1386			.hiw-creating {
1387				animation: hiw-creating-out var(--duration-creating-reduce) var(--ease-out) forwards;
1388			}
1389			.hiw-creating::before {
1390				animation: none;
1391			}
1392			.hiw-creating-mark {
1393				animation:
1394					hiw-fade-in 0.2s var(--ease-out) both,
1395					hiw-fade-out 0.25s var(--ease-out) 0.35s forwards;
1396			}
1397			.hiw-card,
1398			.hiw-tower,
1399			.hiw-setup,
1400			.hiw-title,
1401			.hiw-progress-fill,
1402			.hiw-continue,
1403			.hiw-skip,
1404			.hiw-choices > li,
1405			.hiw-phases > li {
1406				animation: none;
1407			}
1408			.hiw-stage--creating .hiw-result-hero,
1409			.hiw-stage--creating .hiw-card--result,
1410			.hiw-stage--creating .hiw-result-cta {
1411				animation: none;
1412				opacity: 1;
1413				transform: none;
1414			}
1415			.hiw-plan-sheet[open],
1416			.hiw-plan-sheet-close:active {
1417				transition: none;
1418				transform: none;
1419			}
1420			@starting-style {
1421				.hiw-plan-sheet[open] {
1422					transform: none;
1423				}
1424			}
1425			.hiw-choice,
1426			.hiw-continue,
1427			.hiw-back,
1428			.hiw-edit,
1429			.hiw-pager-btn,
1430			.hiw-skip-link {
1431				transition: none;
1432			}
1433			.hiw-pager-dot-mark {
1434				transition: background-color 120ms ease, border-color 120ms ease;
1435				transform: none;
1436			}
1437			#hiw-plan.htmx-swapping,
1438			#hiw-plan.htmx-settling {
1439				animation: none;
1440				transition: none;
1441				opacity: 1;
1442			}
1443			.hiw-plan-stack[data-count="2"]::before,
1444			.hiw-plan-stack[data-count="3"]::before,
1445			.hiw-plan-stack[data-count="3"]::after {
1446				transform: none;
1447			}
1448		}
1449
1450		@keyframes hiw-creating-out {
1451			0%, 82% {
1452				opacity: 1;
1453				visibility: visible;
1454				pointer-events: auto;
1455			}
1456			100% {
1457				opacity: 0;
1458				visibility: hidden;
1459				pointer-events: none;
1460			}
1461		}
1462
1463		@keyframes hiw-creating-release {
1464			to {
1465				pointer-events: none;
1466			}
1467		}
1468
1469		@keyframes hiw-creating-veil-out {
1470			from {
1471				opacity: 1;
1472			}
1473			to {
1474				opacity: 0;
1475			}
1476		}
1477
1478		@keyframes hiw-progress-orb-in {
1479			from {
1480				opacity: 0;
1481				transform: translateY(0.85rem) scale(0.9);
1482			}
1483			to {
1484				opacity: 1;
1485				transform: none;
1486			}
1487		}
1488
1489		@keyframes hiw-progress-orb-out {
1490			from {
1491				opacity: 1;
1492				transform: none;
1493			}
1494			to {
1495				opacity: 0;
1496				transform: translateY(-0.7rem) scale(0.92);
1497			}
1498		}
1499
1500		@keyframes hiw-result-reveal {
1501			from {
1502				opacity: 0;
1503				transform: translateY(1.05rem) scale(0.97);
1504			}
1505			to {
1506				opacity: 1;
1507				transform: none;
1508			}
1509		}
1510
1511		@keyframes hiw-fade-in {
1512			from {
1513				opacity: 0;
1514			}
1515			to {
1516				opacity: 1;
1517			}
1518		}
1519
1520		@keyframes hiw-fade-out {
1521			from {
1522				opacity: 1;
1523			}
1524			to {
1525				opacity: 0;
1526			}
1527		}
1528
1529		@keyframes hiw-in {
1530			from {
1531				opacity: 0.55;
1532			}
1533			to {
1534				opacity: 1;
1535			}
1536		}
1537
1538		@keyframes hiw-choice-in {
1539			from {
1540				opacity: 0.45;
1541				transform: translateY(6px);
1542			}
1543			to {
1544				opacity: 1;
1545				transform: none;
1546			}
1547		}
1548
1549		@keyframes hiw-progress {
1550			from {
1551				transform: scaleX(max(0.12, calc(var(--hiw-from) / 100)));
1552			}
1553			to {
1554				transform: scaleX(calc(var(--hiw-to) / 100));
1555			}
1556		}
1557	</style><style>
1558		hiw-progress-orb,
1559		.hiw-progress-orb {
1560			display: block;
1561			width: 4rem;
1562			height: 4rem;
1563			color: var(--c-primary);
1564			transform-origin: center;
1565		}
1566
1567		.hiw-progress-orb canvas {
1568			display: block;
1569			width: 4rem;
1570			height: 4rem;
1571		}
1572	</style><style>
1573		.hiw-overview .hiw-title {
1574			min-height: 0;
1575			margin-bottom: 0.4rem;
1576		}
1577
1578		.hiw-overview .hiw-setup {
1579			margin-bottom: 1rem;
1580			font-size: 0.95rem;
1581			color: var(--c-text-500);
1582		}
1583
1584		.hiw-flow {
1585			list-style: none;
1586			margin: 0 0 1rem;
1587			padding: 0;
1588		}
1589
1590		.hiw-flow-stage {
1591			position: relative;
1592			display: grid;
1593			grid-template-columns: 2rem minmax(0, 1fr);
1594			column-gap: 0.85rem;
1595			padding-bottom: 1rem;
1596		}
1597
1598		.hiw-flow-stage:last-child {
1599			padding-bottom: 0;
1600		}
1601
1602		.hiw-flow-stage:not(:last-child)::before {
1603			content: "";
1604			position: absolute;
1605			left: 1rem;
1606			top: 2rem;
1607			bottom: 0;
1608			width: 0;
1609			border-left: 2px dashed color-mix(in srgb, var(--c-primary) 45%, transparent);
1610			transform: translateX(-1px);
1611			transform-origin: top center;
1612		}
1613
1614		.hiw-flow-badge {
1615			display: inline-flex;
1616			align-items: center;
1617			justify-content: center;
1618			width: 2rem;
1619			height: 2rem;
1620			border-radius: var(--r-full);
1621			background: var(--c-primary);
1622			color: var(--c-text-inverse);
1623			font-size: 0.9rem;
1624			font-weight: 700;
1625			box-shadow:
1626				0 0 0 4px var(--c-surface),
1627				0 6px 14px -4px rgba(67, 56, 202, 0.55);
1628		}
1629
1630		.hiw-flow-title {
1631			margin: 0.3rem 0 0.15rem;
1632			font-family: var(--font-serif);
1633			font-size: 1.05rem;
1634			font-weight: 700;
1635			line-height: 1.25;
1636			color: var(--c-text-900);
1637		}
1638
1639		.hiw-flow-copy {
1640			margin: 0 0 0.55rem;
1641			font-size: 0.88rem;
1642			line-height: 1.4;
1643			color: var(--c-text-500);
1644		}
1645
1646		.hiw-flow-chips,
1647		.hiw-flow-tiles,
1648		.hiw-flow-branches,
1649		.hiw-promises {
1650			list-style: none;
1651			margin: 0;
1652			padding: 0;
1653		}
1654
1655		.hiw-flow-chips {
1656			display: flex;
1657			flex-wrap: wrap;
1658			gap: 0.35rem;
1659		}
1660
1661		.hiw-flow-chips li,
1662		.hiw-flow-branches li {
1663			display: inline-flex;
1664			align-items: center;
1665			gap: 0.35rem;
1666			padding: 0.25rem 0.7rem;
1667			border-radius: var(--r-full);
1668			border: 1px solid color-mix(in srgb, var(--c-primary) 22%, var(--c-border));
1669			background: color-mix(in srgb, var(--c-primary) 9%, var(--c-surface));
1670			color: var(--c-text-900);
1671			font-size: 0.82rem;
1672			font-weight: 600;
1673		}
1674
1675		.hiw-flow-chips li {
1676			border-color: color-mix(in srgb, var(--c-link) 45%, transparent);
1677			background: var(--c-surface);
1678			color: var(--c-link);
1679		}
1680
1681		.hiw-flow-tiles {
1682			display: grid;
1683			grid-template-columns: repeat(3, minmax(0, 1fr));
1684			gap: 0.9rem;
1685		}
1686
1687		.hiw-flow-tiles li {
1688			position: relative;
1689			display: flex;
1690			flex-direction: column;
1691			align-items: center;
1692			gap: 0.2rem;
1693			padding: 0.55rem 0.25rem 0.45rem;
1694			border-radius: var(--r-md);
1695			border: 1px solid var(--c-border);
1696			background: var(--c-surface);
1697			box-shadow: 0 6px 14px -10px rgba(28, 23, 18, 0.35);
1698			color: var(--c-text-900);
1699			font-size: 0.78rem;
1700			font-weight: 600;
1701		}
1702
1703		.hiw-flow-tiles li i {
1704			display: inline-flex;
1705			align-items: center;
1706			justify-content: center;
1707			width: 2rem;
1708			height: 2rem;
1709			border-radius: var(--r-full);
1710			background: color-mix(in srgb, var(--c-link) 14%, var(--c-surface));
1711			font-size: 1.15rem;
1712			color: var(--c-link);
1713		}
1714
1715		.hiw-flow-tiles li + li::before {
1716			content: "";
1717			position: absolute;
1718			left: -0.6rem;
1719			top: 50%;
1720			width: 0.35rem;
1721			height: 0.35rem;
1722			border-top: 2px solid color-mix(in srgb, var(--c-primary) 70%, transparent);
1723			border-right: 2px solid color-mix(in srgb, var(--c-primary) 70%, transparent);
1724			transform: translate(-50%, -50%) rotate(45deg);
1725		}
1726
1727		.hiw-flow-branches {
1728			display: flex;
1729			flex-wrap: wrap;
1730			gap: 0.4rem;
1731		}
1732
1733		.hiw-flow-branches li i {
1734			color: var(--c-primary);
1735		}
1736
1737		.hiw-flow-branches li:first-child {
1738			border-color: color-mix(in srgb, #d97706 30%, var(--c-border));
1739			background: color-mix(in srgb, #f59e0b 12%, var(--c-surface));
1740		}
1741
1742		.hiw-flow-branches li:first-child i {
1743			color: color-mix(in srgb, #b45309 85%, var(--c-text-900));
1744		}
1745
1746		.hiw-flow-branches li:last-child {
1747			border-color: color-mix(in srgb, #059669 30%, var(--c-border));
1748			background: color-mix(in srgb, #10b981 12%, var(--c-surface));
1749		}
1750
1751		.hiw-flow-branches li:last-child i {
1752			color: color-mix(in srgb, #047857 85%, var(--c-text-900));
1753		}
1754
1755		.hiw-promises {
1756			display: flex;
1757			flex-wrap: wrap;
1758			justify-content: center;
1759			gap: 0.3rem 0.85rem;
1760			margin: 0 0 1rem;
1761			color: var(--c-text-700);
1762			font-size: 0.8rem;
1763			font-weight: 500;
1764		}
1765
1766		.hiw-overview .hiw-promises {
1767			padding-top: 0.85rem;
1768			border-top: 1px dashed var(--c-border-hover);
1769		}
1770
1771		.hiw-promises li {
1772			display: inline-flex;
1773			align-items: center;
1774			gap: 0.3rem;
1775		}
1776
1777		.hiw-promises li i {
1778			color: var(--c-primary);
1779			font-size: 1rem;
1780		}
1781
1782		.hiw-overview .hiw-continue {
1783			margin-top: 0;
1784		}
1785
1786		.hiw-sheet-steps {
1787			display: none;
1788			align-items: center;
1789			gap: 0.6rem;
1790			margin-right: auto;
1791		}
1792
1793		.hiw-sheet-steps:has(*) {
1794			display: flex;
1795		}
1796
1797		.hiw-plan-sheet:has(.hiw-sheet-steps > *) .hiw-plan-sheet-title {
1798			display: none;
1799		}
1800
1801		.hiw-sheet-dots {
1802			display: inline-flex;
1803			align-items: center;
1804			gap: 0.35rem;
1805		}
1806
1807		.hiw-sheet-dot {
1808			width: 0.5rem;
1809			height: 0.5rem;
1810			border-radius: var(--r-full);
1811			border: 1.5px solid var(--c-border-hover);
1812			background: var(--c-surface);
1813		}
1814
1815		.hiw-sheet-dot--current {
1816			width: 1.25rem;
1817			border-color: var(--c-primary);
1818			background: var(--c-primary);
1819		}
1820
1821		.hiw-sheet-back {
1822			display: inline-flex;
1823			align-items: center;
1824			gap: 0.2rem;
1825			margin: 0;
1826			padding: 0.35rem 0.6rem 0.35rem 0.4rem;
1827			border: 1px solid var(--c-border);
1828			border-radius: var(--r-full);
1829			background: var(--c-inset);
1830			color: var(--c-text-700);
1831			font: inherit;
1832			font-size: 0.82rem;
1833			font-weight: 600;
1834			cursor: pointer;
1835		}
1836
1837		.hiw-sheet-back:focus-visible {
1838			outline: 2px solid var(--focus-ring);
1839			outline-offset: 2px;
1840		}
1841
1842		.hiw-founder {
1843			display: flex;
1844			flex: 1 1 auto;
1845			flex-direction: column;
1846			gap: 0.7rem;
1847			min-height: min-content;
1848			color: var(--c-text-700);
1849		}
1850
1851		.hiw-founder-title {
1852			margin: 0;
1853			font-family: var(--font-serif);
1854			font-size: 1.2rem;
1855			font-weight: 700;
1856			line-height: 1.22;
1857			letter-spacing: -0.015em;
1858			color: var(--c-text-900);
1859			text-wrap: balance;
1860			padding: 0.55rem 0.8rem;
1861			border: 1px solid var(--c-border);
1862			border-radius: var(--r-md);
1863			background: color-mix(in srgb, var(--c-surface) 94%, transparent);
1864			-webkit-backdrop-filter: blur(6px);
1865			backdrop-filter: blur(6px);
1866		}
1867
1868		.hiw-founder-lead {
1869			display: block;
1870			margin-top: 0.2rem;
1871			font-family: var(--font-sans);
1872			font-size: 0.9rem;
1873			font-weight: 400;
1874			letter-spacing: 0;
1875			line-height: 1.35;
1876			color: var(--c-text-700);
1877			text-wrap: pretty;
1878		}
1879
1880		.hiw-founder-card {
1881			display: flex;
1882			flex-direction: column;
1883			align-items: center;
1884			padding: 0.9rem 0.9rem 0.85rem;
1885			border: 1px solid var(--c-border);
1886			border-radius: var(--r-md);
1887			background: var(--c-inset);
1888			text-align: center;
1889		}
1890
1891		.hiw-founder-card p {
1892			margin: 0;
1893		}
1894
1895		.hiw-founder-stack {
1896			display: flex;
1897			justify-content: center;
1898			margin-bottom: 0.65rem;
1899		}
1900
1901		.hiw-founder-photo {
1902			width: 4.6rem;
1903			height: 5.4rem;
1904			border: 3px solid var(--c-surface);
1905			border-radius: 1.1rem;
1906			box-shadow: 0 8px 16px -8px rgba(15, 23, 42, 0.45);
1907			object-fit: cover;
1908			object-position: 50% 15%;
1909			transform: rotate(-7deg) translateY(0.15rem);
1910		}
1911
1912		.hiw-founder-photo + .hiw-founder-photo {
1913			margin-left: -1rem;
1914			transform: rotate(6deg) translateY(-0.2rem);
1915		}
1916
1917		.hiw-founder-names {
1918			font-family: var(--font-serif);
1919			font-size: 1.08rem;
1920			font-weight: 700;
1921			line-height: 1.25;
1922			color: var(--c-text-900);
1923		}
1924
1925		.hiw-founder-role {
1926			margin-bottom: 0.4rem;
1927			font-size: 0.76rem;
1928			font-weight: 600;
1929			line-height: 1.3;
1930			color: var(--c-link);
1931		}
1932
1933		.hiw-founder-bio {
1934			margin-bottom: 0.4rem;
1935			font-size: 0.84rem;
1936			font-weight: 600;
1937			line-height: 1.35;
1938			color: var(--c-text-900);
1939			text-wrap: balance;
1940		}
1941
1942		.hiw-founder-story {
1943			font-size: 0.84rem;
1944			line-height: 1.4;
1945			color: var(--c-text-700);
1946			text-wrap: pretty;
1947		}
1948
1949		@media (min-height: 46rem) {
1950			.hiw-founder-card {
1951				padding-top: 1.3rem;
1952			}
1953			.hiw-founder-stack {
1954				margin-bottom: 0.9rem;
1955			}
1956			.hiw-founder-photo {
1957				width: 6rem;
1958				height: 7.2rem;
1959			}
1960			.hiw-founder-photo + .hiw-founder-photo {
1961				margin-left: -1.4rem;
1962			}
1963			.hiw-founder-names {
1964				font-size: 1.2rem;
1965			}
1966			.hiw-founder-bio,
1967			.hiw-founder-story {
1968				font-size: 0.9rem;
1969			}
1970		}
1971
1972		@media (prefers-reduced-motion: no-preference) {
1973			.hiw-founder-photo {
1974				animation: hiw-founder-pop 520ms var(--ease-out) both;
1975			}
1976			.hiw-founder-photo + .hiw-founder-photo {
1977				animation-delay: 90ms;
1978			}
1979		}
1980
1981		@keyframes hiw-founder-pop {
1982			from {
1983				opacity: 0;
1984				transform: translateY(0.8rem) scale(0.85) rotate(0deg);
1985			}
1986		}
1987
1988		.hiw-founder .hiw-promises {
1989			margin: 0;
1990			justify-content: flex-start;
1991		}
1992
1993		.hiw-founder-cta {
1994			position: sticky;
1995			bottom: 0;
1996			z-index: 1;
1997			margin: auto calc(-1 * var(--s-3)) 0;
1998			padding: 0.6rem var(--s-3) 0;
1999			background: linear-gradient(to bottom, transparent, var(--c-surface) 0.6rem);
2000		}
2001
2002		.hiw-founder .hiw-continue {
2003			margin-top: 0;
2004		}
2005
2006		.hiw-plan-sheet:has(.hiw-sheet-steps > *) .hiw-plan-sheet-body {
2007			overflow: auto;
2008		}
2009
2010		.hiw-plan-sheet .hiw-sheet-steps {
2011			grid-area: title;
2012		}
2013
2014		@media (prefers-reduced-motion: no-preference) {
2015			.hiw-plan-sheet:has(.hiw-sheet-steps > *) .hiw-plan-sheet-body > * {
2016				animation: hiw-sheet-page-in 320ms var(--ease-out) both;
2017			}
2018		}
2019
2020		@keyframes hiw-sheet-page-in {
2021			from {
2022				opacity: 0;
2023				transform: translateX(1.25rem);
2024			}
2025			to {
2026				opacity: 1;
2027				transform: none;
2028			}
2029		}
2030
2031		@media (max-width: 32rem) {
2032			.hiw-overview {
2033				padding-bottom: 1rem;
2034			}
2035			.hiw-flow-copy {
2036				font-size: 0.84rem;
2037			}
2038			.hiw-flow-stage {
2039				padding-bottom: 0.8rem;
2040			}
2041			.hiw-flow-title {
2042				margin-top: 0.2rem;
2043			}
2044			.hiw-flow-tiles li {
2045				padding: 0.45rem 0.2rem 0.4rem;
2046			}
2047			.hiw-flow-tiles li i {
2048				width: 1.6rem;
2049				height: 1.6rem;
2050				font-size: 1rem;
2051			}
2052			.hiw-overview .hiw-promises {
2053				padding-top: 0.6rem;
2054				margin-bottom: 0.8rem;
2055			}
2056		}
2057
2058		@media (max-width: 32rem) and (max-height: 52.5rem), (max-height: 40rem) {
2059			.hiw-logo {
2060				padding: 0.7rem 1rem 0.2rem;
2061				padding-left: max(1rem, env(safe-area-inset-left));
2062			}
2063			.hiw-logo img {
2064				height: 1.35rem;
2065			}
2066			.hiw-stage {
2067				padding-top: 0.4rem;
2068				padding-bottom: 1rem;
2069			}
2070			.hiw-overview {
2071				padding: 0.8rem 0.9rem 0.9rem;
2072			}
2073			.hiw-overview .hiw-toolbar {
2074				margin-bottom: 0.65rem;
2075			}
2076			.hiw-overview .hiw-title {
2077				font-size: 1.2rem;
2078				margin-bottom: 0.7rem;
2079			}
2080			.hiw-overview .hiw-setup,
2081			.hiw-flow-copy {
2082				display: none;
2083			}
2084			.hiw-flow-stage {
2085				padding-bottom: 0.65rem;
2086			}
2087			.hiw-flow-title {
2088				margin-bottom: 0.3rem;
2089			}
2090			.hiw-flow-tiles li {
2091				padding: 0.4rem 0.2rem 0.35rem;
2092			}
2093			.hiw-promises,
2094			.hiw-overview .hiw-promises {
2095				margin-bottom: 0.7rem;
2096			}
2097			.hiw-overview .hiw-promises {
2098				padding-top: 0.5rem;
2099			}
2100			.hiw-founder-lead {
2101				display: none;
2102			}
2103		}
2104
2105		@media (max-height: 37.5rem) {
2106			.hiw-overview .hiw-promises,
2107			.hiw-founder .hiw-promises {
2108				display: none;
2109			}
2110			.hiw-founder {
2111				gap: 0.5rem;
2112			}
2113			.hiw-founder-card {
2114				padding: 0.55rem 0.7rem;
2115			}
2116			.hiw-founder-stack {
2117				margin-bottom: 0.4rem;
2118			}
2119			.hiw-founder-photo {
2120				width: 3.4rem;
2121				height: 4rem;
2122			}
2123			.hiw-founder-story {
2124				font-size: 0.78rem;
2125				line-height: 1.3;
2126			}
2127		}
2128
2129		@media (prefers-reduced-motion: no-preference) {
2130			.hiw-flow-stage {
2131				--hiw-stage-at: 60ms;
2132				animation: hiw-flow-in 360ms var(--ease-out) var(--hiw-stage-at) backwards;
2133			}
2134			.hiw-flow-stage:nth-child(2) { --hiw-stage-at: 150ms; }
2135			.hiw-flow-stage:nth-child(3) { --hiw-stage-at: 240ms; }
2136			.hiw-flow-badge {
2137				animation: hiw-flow-badge-in 380ms var(--ease-out) var(--hiw-stage-at) backwards;
2138			}
2139			.hiw-flow-stage:not(:last-child)::before {
2140				animation: hiw-flow-line 300ms var(--ease-out) calc(var(--hiw-stage-at) + 140ms) backwards;
2141			}
2142			.hiw-flow-chips li,
2143			.hiw-flow-tiles li,
2144			.hiw-flow-branches li {
2145				animation: hiw-flow-pop 320ms var(--ease-out) calc(var(--hiw-stage-at) + 110ms) backwards;
2146			}
2147			.hiw-flow-chips li:nth-child(2),
2148			.hiw-flow-tiles li:nth-child(2),
2149			.hiw-flow-branches li:nth-child(2) {
2150				animation-delay: calc(var(--hiw-stage-at) + 160ms);
2151			}
2152			.hiw-flow-chips li:nth-child(n + 3),
2153			.hiw-flow-tiles li:nth-child(3) {
2154				animation-delay: calc(var(--hiw-stage-at) + 210ms);
2155			}
2156			.hiw-overview .hiw-promises {
2157				animation: hiw-flow-in 320ms var(--ease-out) 380ms backwards;
2158			}
2159			.hiw-overview .hiw-continue {
2160				animation: hiw-flow-in 320ms var(--ease-out) 430ms backwards;
2161			}
2162		}
2163
2164		@keyframes hiw-flow-in {
2165			from {
2166				opacity: 0;
2167				transform: translateY(8px);
2168			}
2169		}
2170
2171		@keyframes hiw-flow-badge-in {
2172			from {
2173				transform: scale(0.4);
2174			}
2175			70% {
2176				transform: scale(1.08);
2177			}
2178		}
2179
2180		@keyframes hiw-flow-line {
2181			from {
2182				transform: translateX(-1px) scaleY(0);
2183			}
2184		}
2185
2186		@keyframes hiw-flow-pop {
2187			from {
2188				opacity: 0;
2189				transform: translateY(4px) scale(0.92);
2190			}
2191		}
2192
2193		@media (prefers-reduced-motion: reduce) {
2194			.hiw-flow-stage,
2195			.hiw-flow-badge,
2196			.hiw-flow-stage::before,
2197			.hiw-flow-chips li,
2198			.hiw-flow-tiles li,
2199			.hiw-flow-branches li,
2200			.hiw-overview .hiw-promises {
2201				animation: none;
2202			}
2203		}
2204	</style>
2204<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/htmx.min.js" integrity="sha384-/TgkGk7p307TH7EXJDuUlgG3Ce1UVolAOFopFekQkkXihi5u/6OCvVKyz1W+idaz" crossorigin="anonymous" defer></script>
2204</head><body><div class="hiw"><a class="hiw-logo" href="/" aria-label="Brighter home"><picture><source srcset="/static/images/logo_dark.svg" media="(prefers-color-scheme: dark)"> <img src="/static/images/logo_light.svg" alt="Brighter"></picture></a><style>
2205		.language-toggle {
2206			position: relative;
2207			display: inline-flex;
2208			align-items: center;
2209		}
2210		.language-toggle-trigger {
2211			appearance: none;
2212			box-sizing: border-box;
2213			min-height: 2.25rem;
2214			display: inline-flex;
2215			align-items: center;
2216			gap: var(--space-1);
2217			margin: 0;
2218			padding: 0 0.5rem;
2219			border: 0;
2220			border-radius: var(--radius-sm);
2221			background: transparent;
2222			color: var(--text-tertiary);
2223			font: inherit;
2224			cursor: pointer;
2225			transition: transform var(--duration-press, 160ms) var(--ease-out);
2226		}
2227		.language-toggle-trigger i {
2228			flex: none;
2229			font-size: 1.25rem;
2230			line-height: 1;
2231			font-weight: 400;
2232		}
2233		.language-toggle--icon .language-toggle-trigger {
2234			min-width: 2.25rem;
2235			padding: 0 0.25rem;
2236			justify-content: center;
2237			color: inherit;
2238			font-weight: 400;
2239		}
2240		.language-toggle--named .language-toggle-trigger {
2241			min-height: 0;
2242			padding: var(--s-2);
2243			gap: 0.2rem;
2244			color: inherit;
2245			font-weight: 500;
2246			font-size: inherit;
2247		}
2248		.language-toggle-caret {
2249			font-size: 0.7em;
2250			line-height: 1;
2251			opacity: 0.7;
2252		}
2253		.language-toggle-label {
2254			font-size: 1rem;
2255			font-weight: 600;
2256			line-height: 1.2;
2257		}
2258		.language-toggle-trigger:focus-visible {
2259			outline: 2px solid var(--chip-info-bg, currentColor);
2260			outline-offset: 2px;
2261		}
2262		.language-toggle-trigger:active {
2263			transform: scale(var(--scale-press, 0.97));
2264		}
2265		@media (hover: hover) and (pointer: fine) {
2266			.language-toggle-trigger:not(.sidebar-link):hover {
2267				background: color-mix(in srgb, currentColor 10%, transparent);
2268			}
2269		}
2270		.language-toggle-menu[popover] {
2271			box-sizing: border-box;
2272			position: fixed;
2273			inset: auto;
2274			margin: 0;
2275			top: anchor(bottom);
2276			left: anchor(left);
2277			translate: 0 0.35rem;
2278			min-width: 10.5rem;
2279			padding: var(--space-1, 0.25rem);
2280			border: 1px solid var(--border-subtle, rgba(28, 23, 18, 0.1));
2281			border-radius: var(--radius-sm, 0.5rem);
2282			background: var(--surface-main, #fff);
2283			color: var(--content-primary, #1c1712);
2284			box-shadow: 0 8px 24px var(--shadow-color, rgba(28, 23, 18, 0.12));
2285			transform-origin: top left;
2286			position-try-fallbacks: flip-block;
2287		}
2288		@supports not (anchor-name: --language-toggle-trigger) {
2289			.language-toggle-menu[popover] {
2290				position: absolute;
2291				top: calc(100% + 0.35rem);
2292				left: 0;
2293			}
2294		}
2295		.language-toggle-menu[popover] form {
2296			margin: 0;
2297		}
2298		.language-toggle-item {
2299			appearance: none;
2300			display: flex;
2301			align-items: center;
2302			justify-content: space-between;
2303			gap: var(--space-3);
2304			width: 100%;
2305			margin: 0;
2306			padding: var(--space-2, 0.75rem) var(--space-3, 1rem);
2307			border: 0;
2308			border-radius: calc(var(--radius-sm) - 2px);
2309			background: transparent;
2310			color: inherit;
2311			font: inherit;
2312			font-size: 0.875rem;
2313			font-weight: 600;
2314			text-align: left;
2315			cursor: pointer;
2316		}
2317		.language-toggle-item.is-active {
2318			background: color-mix(in srgb, currentColor 10%, transparent);
2319		}
2320		@media (hover: hover) and (pointer: fine) {
2321			.language-toggle-item:hover {
2322				background: color-mix(in srgb, currentColor 8%, transparent);
2323			}
2324		}
2325		.language-toggle-item:focus-visible {
2326			outline: 2px solid var(--chip-info-bg, currentColor);
2327			outline-offset: -2px;
2328		}
2329		.language-toggle-item i {
2330			font-size: 0.95rem;
2331			line-height: 1;
2332		}
2333		.language-toggle--inline .language-toggle-item {
2334			justify-content: flex-start;
2335			gap: 0.35rem;
2336			width: auto;
2337			font-weight: 500;
2338		}
2339		.language-toggle--inline .language-toggle-item.is-active {
2340			background: transparent;
2341		}
2342		@media (hover: hover) and (pointer: fine) {
2343			.language-toggle--inline .language-toggle-item:hover {
2344				background: transparent;
2345			}
2346		}
2347		.language-toggle--end .language-toggle-menu[popover] {
2348			top: anchor(bottom);
2349			left: auto;
2350			right: anchor(right);
2351			translate: 0 0.35rem;
2352			transform-origin: top right;
2353			position-try-fallbacks: flip-block;
2354		}
2355		@supports not (anchor-name: --language-toggle-trigger) {
2356			.language-toggle--end .language-toggle-menu[popover] {
2357				top: calc(100% + 0.35rem);
2358				left: auto;
2359				right: 0;
2360			}
2361		}
2362		.language-toggle--inline {
2363			display: flex;
2364			flex-direction: column;
2365			align-items: stretch;
2366			width: 100%;
2367		}
2368		.language-toggle-choices {
2369			display: flex;
2370			flex-direction: column;
2371			width: 100%;
2372		}
2373		.language-toggle--inline .language-toggle-item {
2374			font-weight: 500;
2375			padding-left: 0;
2376		}
2377		.page-language .language-toggle-item {
2378			padding: 0.75rem 1rem;
2379			min-height: 2.5rem;
2380		}
2381	</style> <div class="language-toggle language-toggle--end"><button type="button" class="language-toggle-trigger" popovertarget="parent-language-menu" aria-haspopup="menu" aria-label="English" data-tooltip="Language" style="anchor-name: --parent-language-menu;"><i class="ph-bold ph-globe" aria-hidden="true"></i> <span class="app-sidebar-link-label language-toggle-label">English</span></button><div id="parent-language-menu" class="language-toggle-menu" popover="auto" role="menu" aria-label="Language" style="position-anchor: --parent-language-menu;"><form method="post" action="/platform/language" role="none"><input type="hidden" name="language" value="en-US"> <button type="submit" class="language-toggle-item is-active" role="menuitem" aria-current="true"><span>English</span> <i class="ph-bold ph-check" aria-hidden="true"></i></button></form><form method="post" action="/platform/language" role="none"><input type="hidden" name="language" value="zh-US"> <button type="submit" class="language-toggle-item" role="menuitem"><span>中文</span> </button></form></div></div><main class="hiw-stage"><div class="hiw-frame"><span class="hiw-tower hiw-tower--left" style="--hiw-tower-art:url(/cdn/static/images/hiw-tower-left.webp);"><img src="/cdn/static/images/hiw-tower-left.webp" alt="" width="719" height="1323" decoding="async" fetchpriority="low" aria-hidden="true"></span><span class="hiw-tower hiw-tower--right" style="--hiw-tower-art:url(/cdn/static/images/hiw-tower-right.webp);"><img src="/cdn/static/images/hiw-tower-right.webp" alt="" width="989" height="1119" decoding="async" fetchpriority="low" aria-hidden="true"></span><section class="hiw-card"><div class="hiw-toolbar">
2381<div class="hiw-progress" role="progressbar" aria-label="How it works progress" aria-valuemin="0" aria-valuemax="100" aria-valuenow="14" style="--hiw-from:0;--hiw-to:14;"><span class="hiw-progress-fill"></span></div></div><h1 class="hiw-title">How old is your child?</h1><p class="hiw-setup">A 7-year-old and a 12-year-old can like the same topic and still need different lessons. We&#39;ll match the reading and the difficulty to this age.</p><ul class="hiw-choices"><li><form method="post" action="/platform/how-it-works"><input type="hidden" name="step" value="age"> <input type="hidden" name="value" value="6-7"> <button class="hiw-choice" type="submit">6–7</button></form></li><li><form method="post" action="/platform/how-it-works"><input type="hidden" name="step" value="age"> <input type="hidden" name="value" value="8-9"> <button class="hiw-choice" type="submit">8–9</button></form></li><li><form method="post" action="/platform/how-it-works"><input type="hidden" name="step" value="age"> <input type="hidden" name="value" value="10-11"> <button class="hiw-choice" type="submit">10–11</button></form></li><li><form method="post" action="/platform/how-it-works"><input type="hidden" name="step" value="age"> <input type="hidden" name="value" value="12-13"> <button class="hiw-choice" type="submit">12–13</button></form></li></ul><p class="hiw-disclaimer">If you have more than one child, we support up to 5. We can set up the rest later.</p></section></div></main></div>
2381<script type="module" src="https://static.cloudflareinsights.com/beacon.min.js/v4bc70e2c01a94c73b74392e4234840661791215815920" integrity="sha512-L0ha0OXavK/8okipN9F8BtP84dg9DUhPERbBXzwI6dgTA55d2+yweo3pn5CSFYs45/r8md2+xvUPtTdvTNRfjA==" data-cf-beacon='{"version":"2024.11.0","token":"6c486fb0eeac4037ad8358a837e69f1b","r":1,"spa":2}' crossorigin="anonymous"></script>
2381
2382</body></html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.