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'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.