@gemboss/website-ui 0.1.0 → 0.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/website.css CHANGED
@@ -1,8 +1,9 @@
1
- /*! @gemboss/website-ui 0.1.0 | generated by scripts/build.mjs from the files in css/. Edit those and not this file */
1
+ /*! @gemboss/website-ui 0.3.0 | generated by scripts/build.mjs from the files in css/. Edit those and not this file */
2
2
  /* @gemboss/website-ui tokens. GENERATED from system.json by scripts/build.mjs: do not edit by hand. */
3
3
  :root {
4
4
  color-scheme: light;
5
5
  --gw-font: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
6
+ --gw-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
6
7
  --gw-text-11: 11px;
7
8
  --gw-text-12: 12px;
8
9
  --gw-text-13: 13px;
@@ -46,11 +47,13 @@
46
47
  --gw-radius-12: 12px;
47
48
  --gw-radius-16: 16px;
48
49
  --gw-radius-20: 20px;
50
+ --gw-radius-24: 24px;
49
51
  --gw-radius-999: 999px;
50
52
  --gw-radius-action: 8px;
51
53
  --gw-radius-chip: 999px;
52
54
  --gw-radius-card: 12px;
53
55
  --gw-radius-panel: 16px;
56
+ --gw-radius-popover: 20px;
54
57
  --gw-shadow: 0 1px 2px rgba(31,30,29,.04), 0 2px 6px rgba(31,30,29,.06);
55
58
  --gw-shadow-sm: 0 1px 2px rgba(31,30,29,.04);
56
59
  --gw-shadow-raised: 0 4px 16px rgba(31,30,29,.10);
@@ -58,10 +61,14 @@
58
61
  --gw-wrap-narrow: 780px;
59
62
  --gw-gutter: 22px;
60
63
  --gw-header-height: 64px;
64
+ --gw-header-gap: 16px;
65
+ --gw-header-surface: 85%;
66
+ --gw-header-blur: 10px;
61
67
  --gw-button-height: 40px;
62
68
  --gw-tap-min: 44px;
63
69
  --gw-ease: cubic-bezier(.22,1,.36,1);
64
70
  --gw-reveal-ms: 700ms;
71
+ --gw-spin-ms: 700ms;
65
72
  --gw-wash-pink: #ff6f5e;
66
73
  --gw-wash-violet: #7c8af7;
67
74
  --gw-wash-sky: #43b0ff;
@@ -197,6 +204,20 @@
197
204
  --gw-success-soft: #132a22;
198
205
  --gw-warning: #e0b341;
199
206
  }
207
+ /* action profile "accent": data-gw-action="accent" on <html>. In night bands too, where the dark palette applies. */
208
+ :root[data-gw-action="accent"],
209
+ :root[data-gw-action="accent"] :is(.gw-band--night, .gw-showcase) {
210
+ --gw-action: var(--gw-accent);
211
+ --gw-action-hover: var(--gw-accent-strong);
212
+ --gw-on-action: var(--gw-on-accent);
213
+ }
214
+ /* radius profile "soft": data-gw-radius="soft" on <html> */
215
+ :root[data-gw-radius="soft"] {
216
+ --gw-radius-action: 12px;
217
+ --gw-radius-card: 20px;
218
+ --gw-radius-panel: 24px;
219
+ --gw-radius-popover: 24px;
220
+ }
200
221
 
201
222
  /* base: reset, type, links, focus, skip link, reveal. Colours, radii and shadows only from tokens. */
202
223
  *, *::before, *::after { box-sizing: border-box; }
@@ -261,8 +282,8 @@ h5, h6 { font-size: 16px; font-weight: 600; letter-spacing: 0; }
261
282
  background: var(--gw-accent);
262
283
  }
263
284
 
264
- /* links inside running text get a visible link style; everything else opts in with .gw-link */
265
- :where(p, dd, td, figcaption, .gw-list--check li) a:not([class]),
285
+ /* links inside running text (and anywhere in .gw-prose) get a visible link style; everything else opts in with .gw-link */
286
+ :where(p, dd, td, figcaption, .gw-list--check li, .gw-prose) a:not([class]),
266
287
  .gw-link {
267
288
  color: var(--gw-accent-strong);
268
289
  font-weight: 500;
@@ -271,7 +292,7 @@ h5, h6 { font-size: 16px; font-weight: 600; letter-spacing: 0; }
271
292
  text-underline-offset: 4px;
272
293
  text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
273
294
  }
274
- :where(p, dd, td, figcaption, .gw-list--check li) a:not([class]):hover,
295
+ :where(p, dd, td, figcaption, .gw-list--check li, .gw-prose) a:not([class]):hover,
275
296
  .gw-link:hover { text-decoration-color: currentColor; }
276
297
 
277
298
  :focus-visible { outline: 2px solid var(--gw-accent); outline-offset: 2px; }
@@ -327,7 +348,7 @@ h5, h6 { font-size: 16px; font-weight: 600; letter-spacing: 0; }
327
348
  @media (min-width: 768px) { .gw-section__head:not(:last-child) { margin-bottom: 48px; } }
328
349
 
329
350
  :where(.gw-section__head, .gw-hero > .gw-wrap, .gw-split > :not(.gw-window), .gw-cta, .gw-card, .gw-feature, .gw-plan) > * + * { margin-top: 16px; }
330
- :where(.gw-section__head, .gw-hero > .gw-wrap, .gw-split > :not(.gw-window), .gw-cta, .gw-card, .gw-plan) > .gw-actions { margin-top: 32px; }
351
+ :where(.gw-section__head, .gw-hero > .gw-wrap, .gw-split > :not(.gw-window), .gw-cta, .gw-card, .gw-plan) > :is(.gw-actions, .gw-segmented) { margin-top: 32px; }
331
352
  :where(.gw-section__head, .gw-hero > .gw-wrap, .gw-split > :not(.gw-window), .gw-cta, .gw-card, .gw-plan) > .gw-list--check { margin-top: 24px; }
332
353
 
333
354
  /* a row of actions: one .gw-btn, then a secondary or a link */
@@ -368,7 +389,9 @@ h5, h6 { font-size: 16px; font-weight: 600; letter-spacing: 0; }
368
389
 
369
390
  /* components: buttons, links, chips, badges, cards, windows, icons, lists, tables, FAQ. */
370
391
 
371
- /* actions are rectangles: 40px, radius 8, 14px/600, sentence case, ink fill (never the accent) */
392
+ /* actions are rectangles: 40px, the action radius of the site's profile (8, 12 in soft), 14px/600, sentence case.
393
+ The fill is the action colour: ink, or the brand's accent under data-gw-action="accent" (tokens.css). Never a
394
+ gradient, a wash hue or a shadow. */
372
395
  .gw-btn {
373
396
  position: relative;
374
397
  display: inline-flex;
@@ -403,6 +426,43 @@ h5, h6 { font-size: 16px; font-weight: 600; letter-spacing: 0; }
403
426
  .gw-btn--lg { height: 48px; padding: 0 24px; font-size: 16px; }
404
427
  .gw-btn--block { display: flex; width: 100%; }
405
428
  .gw-btn:disabled, .gw-btn[aria-disabled="true"] { opacity: 0.48; cursor: not-allowed; pointer-events: none; }
429
+ /* pressed: the ink one step darker (the hover ink, as the dashboard's primary), nothing moves; the frameless variants
430
+ take one more step of tint */
431
+ .gw-btn:active { background: var(--gw-action-hover); }
432
+ .gw-btn--secondary:active { background: var(--gw-bg-soft); border-color: var(--gw-ink); }
433
+ .gw-btn--ghost:active { background: var(--gw-line); }
434
+ .gw-btn--on-night:active { background: var(--gw-on-night); opacity: 0.76; }
435
+ /* loading: aria-busy="true" on the <button>. The label stays (it keeps the width and the accessible name) but is not
436
+ painted; a 16px ring in the button's own ink turns in its place, the dashboard's spinner. ::before, because
437
+ .gw-btn--sm draws its hit area with ::after. website.js ignores presses on a busy button (no double submit). */
438
+ .gw-btn[aria-busy="true"] { cursor: progress; -webkit-text-fill-color: transparent; }
439
+ .gw-btn[aria-busy="true"] svg { opacity: 0; }
440
+ .gw-btn[aria-busy="true"]::before {
441
+ content: "";
442
+ position: absolute;
443
+ top: 50%;
444
+ left: 50%;
445
+ width: 16px;
446
+ height: 16px;
447
+ margin: -8px 0 0 -8px;
448
+ border: 2px solid color-mix(in srgb, currentColor 18%, transparent);
449
+ border-top-color: currentColor;
450
+ border-radius: var(--gw-radius-chip);
451
+ animation: gw-spin var(--gw-spin-ms) linear infinite;
452
+ }
453
+ @keyframes gw-spin { to { transform: rotate(360deg); } }
454
+ /* reduced motion: the ring stands still as an ellipsis, three dots in the button's ink */
455
+ @media (prefers-reduced-motion: reduce) {
456
+ .gw-btn[aria-busy="true"]::before {
457
+ border: 0;
458
+ border-radius: var(--gw-radius-0);
459
+ background:
460
+ radial-gradient(circle at 3px 50%, currentColor 1.5px, transparent 2px),
461
+ radial-gradient(circle at 8px 50%, currentColor 1.5px, transparent 2px),
462
+ radial-gradient(circle at 13px 50%, currentColor 1.5px, transparent 2px);
463
+ animation: none;
464
+ }
465
+ }
406
466
 
407
467
  /* inline text link with an arrow that moves 2px on hover */
408
468
  .gw-link--arrow {
@@ -440,6 +500,45 @@ h5, h6 { font-size: 16px; font-weight: 600; letter-spacing: 0; }
440
500
  color: var(--gw-accent-strong);
441
501
  }
442
502
 
503
+ /* segmented control: one choice out of two to four (Monthly / Yearly), a radio group of buttons. The dashboard's look
504
+ (@gemboss/ui .ui-seg): one hairline group, the action radius, a hairline between options, the chosen one on the
505
+ accent tint, so it follows a brand's accent. The weight never changes with the choice: the labels do not move. */
506
+ .gw-segmented {
507
+ display: inline-flex;
508
+ max-width: 100%;
509
+ border: 1px solid var(--gw-line-strong);
510
+ border-radius: var(--gw-radius-action);
511
+ background: var(--gw-surface);
512
+ overflow: hidden;
513
+ overflow: clip;
514
+ vertical-align: middle;
515
+ }
516
+ .gw-segmented--block { display: flex; width: 100%; }
517
+ .gw-segmented > button {
518
+ display: inline-flex;
519
+ flex: 0 1 auto;
520
+ align-items: center;
521
+ justify-content: center;
522
+ min-width: 0;
523
+ height: calc(var(--gw-button-height) - 2px);
524
+ padding: 0 16px;
525
+ border: 0;
526
+ background: transparent;
527
+ color: var(--gw-muted);
528
+ font-size: 14px;
529
+ font-weight: 500;
530
+ line-height: 1.4;
531
+ white-space: nowrap;
532
+ cursor: pointer;
533
+ }
534
+ .gw-segmented--block > button { flex: 1 1 0; }
535
+ .gw-segmented > button + button { border-left: 1px solid var(--gw-line-strong); }
536
+ .gw-segmented > button:hover { background: var(--gw-bg-soft); color: var(--gw-ink); }
537
+ .gw-segmented > button:active { background: var(--gw-line); }
538
+ /* inside the group: the group clips its corners, so the ring sits within the option */
539
+ .gw-segmented > button:focus-visible { outline-offset: -2px; }
540
+ .gw-segmented > button[aria-checked="true"] { background: var(--gw-accent-soft); color: var(--gw-accent-strong); }
541
+
443
542
  /* badges: small status, pill */
444
543
  .gw-badge {
445
544
  display: inline-flex;
@@ -462,8 +561,8 @@ h5, h6 { font-size: 16px; font-weight: 600; letter-spacing: 0; }
462
561
  .gw-badge--success::before, .gw-badge--warning::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: var(--gw-radius-chip); background: var(--gw-success); }
463
562
  .gw-badge--warning::before { background: var(--gw-warning); }
464
563
 
465
- /* cards sit: white, 1px hairline, radius 12, the dashboard's resting shadow (Chris 24/10/2026: one language with the
466
- app); no hover lift. A soft card is a tint and carries no shadow. */
564
+ /* cards sit: white, 1px hairline, the card radius of the site's profile (12, 20 in soft), the dashboard's resting
565
+ shadow (Chris 24/10/2026: one language with the app); no hover lift. A soft card is a tint and carries no shadow. */
467
566
  .gw-card {
468
567
  padding: 24px;
469
568
  border: 1px solid var(--gw-line);
@@ -513,6 +612,17 @@ h5, h6 { font-size: 16px; font-weight: 600; letter-spacing: 0; }
513
612
  .gw-window__body { padding: 16px; }
514
613
  .gw-window__body:has(> img:only-child) { padding: 0; }
515
614
  .gw-window__body > img { width: 100%; }
615
+ /* what the numbers in the window are: "Illustrative data." under a drawn mock-up, or the source of real ones. The
616
+ last child of .gw-window, after __body (a <figcaption> when the window is a <figure>). */
617
+ .gw-window__caption {
618
+ margin: 0;
619
+ padding: 0 16px 12px;
620
+ color: var(--gw-muted);
621
+ font-size: 12px;
622
+ line-height: 1.5;
623
+ text-align: end;
624
+ }
625
+ .gw-window__body:has(> img:only-child) + .gw-window__caption { padding-top: 12px; }
516
626
 
517
627
  /* icon: 20px inline stroke SVG (1.7 to 2px stroke, currentColor) */
518
628
  .gw-icon { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 20px; height: 20px; }
@@ -601,10 +711,12 @@ h5, h6 { font-size: 16px; font-weight: 600; letter-spacing: 0; }
601
711
  }
602
712
  .gw-btn--lg { min-height: 48px; }
603
713
  :is(a, button, label).gw-chip { min-height: var(--gw-tap-min); }
714
+ .gw-segmented > button { height: auto; min-height: var(--gw-tap-min); padding-block: 8px; white-space: normal; text-wrap: balance; }
604
715
  }
605
716
 
606
717
  /* header: announcement, a flat 64px bar with one hairline, mega menu, mobile menu below 1080px.
607
- Not a floating pill: no radius, no blur, no shadow on the bar. Nothing tucks under it. */
718
+ Not a floating pill: no radius, no blur, no shadow on the bar. Nothing tucks under it. A brand may choose the one
719
+ other shape, .gw-header--float (an inset card from 1080px, at the end of this file). */
608
720
  .gw-announce {
609
721
  padding: 8px var(--gw-gutter);
610
722
  border-bottom: 1px solid var(--gw-line);
@@ -688,9 +800,9 @@ h5, h6 { font-size: 16px; font-weight: 600; letter-spacing: 0; }
688
800
  text-underline-offset: 8px;
689
801
  }
690
802
 
691
- /* mega menu: a floating card centred under the bar, as on gemboss.ai (Chris 24/10/2026): one hairline, radius 20,
692
- the raised shadow (it is a popover), 32px inside. The bridge (::before) keeps the pointer inside while it crosses
693
- the 8px gap from the trigger. */
803
+ /* mega menu: a floating card centred under the bar, as on gemboss.ai (Chris 24/10/2026): one hairline, the popover
804
+ radius of the site's profile (20, 24 in soft), the raised shadow (it is a popover), 32px inside. The bridge
805
+ (::before) keeps the pointer inside while it crosses the 8px gap from the trigger. */
694
806
  .gw-mega {
695
807
  position: absolute;
696
808
  top: calc(100% + 8px);
@@ -700,7 +812,7 @@ h5, h6 { font-size: 16px; font-weight: 600; letter-spacing: 0; }
700
812
  overflow-y: auto;
701
813
  transform: translateX(-50%);
702
814
  border: 1px solid var(--gw-line);
703
- border-radius: 20px;
815
+ border-radius: var(--gw-radius-popover);
704
816
  background: var(--gw-surface);
705
817
  box-shadow: var(--gw-shadow-raised);
706
818
  }
@@ -835,6 +947,37 @@ html.is-menu-open .gw-header { position: fixed; top: 0; left: 0; right: 0; }
835
947
  .gw-theme-toggle, .gw-menu-toggle { width: var(--gw-tap-min); height: var(--gw-tap-min); }
836
948
  }
837
949
 
950
+ /* floating header (0.3.0), a brand's header profile: <header class="gw-header gw-header--float">. The same bar, mega
951
+ menu and script, drawn from 1080px as an inset card: the panel radius of the site's profile (16, 24 in soft), the
952
+ surface at 85% over a 10px blur, one hairline, the raised shadow, a 16px gap above it and when it sticks. It is
953
+ wrap + 2 x 24px + its border wide, so the bar's content lines up with the page's from 1170px. Below 1080px it is
954
+ the flat bar, so the phone menu is unchanged. Solid for a visitor who asks for less transparency, and where the
955
+ browser cannot blur. No other floating or blurred header: it is a profile, not a style to copy. */
956
+ @media (min-width: 1080px) {
957
+ .gw-header--float {
958
+ top: var(--gw-header-gap);
959
+ width: min(100% - 32px, var(--gw-wrap) + 50px);
960
+ margin: var(--gw-header-gap) auto 0;
961
+ border: 1px solid var(--gw-line);
962
+ border-radius: var(--gw-radius-panel);
963
+ background: color-mix(in srgb, var(--gw-surface) var(--gw-header-surface), transparent);
964
+ -webkit-backdrop-filter: blur(var(--gw-header-blur));
965
+ backdrop-filter: blur(var(--gw-header-blur));
966
+ box-shadow: var(--gw-shadow-raised);
967
+ }
968
+ .gw-header--float.is-scrolled { border-color: var(--gw-line-strong); }
969
+ .gw-header--float > .gw-header__bar { width: auto; padding-inline: 24px; }
970
+ .gw-header--float .gw-mega { max-height: calc(100vh - var(--gw-header-height) - var(--gw-header-gap) - 24px); }
971
+ /* an anchor lands below the card, not under it */
972
+ :root:has(.gw-header--float) [id] { scroll-margin-top: calc(var(--gw-header-height) + var(--gw-header-gap) + 18px); }
973
+ }
974
+ @media (min-width: 1080px) and (prefers-reduced-transparency: reduce) {
975
+ .gw-header--float { background: var(--gw-surface); -webkit-backdrop-filter: none; backdrop-filter: none; }
976
+ }
977
+ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
978
+ .gw-header--float { background: var(--gw-surface); }
979
+ }
980
+
838
981
  /* footer: brand block, link columns, bottom row. One hairline on top, white like the page. */
839
982
  .gw-footer {
840
983
  padding-block: 64px 40px;
@@ -1062,3 +1205,124 @@ html.is-menu-open .gw-header { position: fixed; top: 0; left: 0; right: 0; }
1062
1205
  .gw-cta { max-width: 780px; margin-inline: auto; text-align: center; }
1063
1206
  .gw-cta .gw-lead { margin-inline: auto; }
1064
1207
  .gw-cta .gw-actions { justify-content: center; }
1208
+
1209
+ /* prose: long-form reading (a blog post, a docs page, terms and privacy) inside one wrapper, .gw-prose. The plain HTML a
1210
+ CMS or a markdown renderer writes is styled as it comes: headings, paragraphs, lists, quotes, code, tables, images
1211
+ and captions, on the kit's scales. The rules sit at :where() weight and reach bare elements only (lists without a
1212
+ class, the wrapper's own headings, quotes and tables), so a kit component placed inside the prose (.gw-table,
1213
+ .gw-window, .gw-list--check, .gw-quote, .gw-btn) keeps its own look. --sm: a 16px body for docs and legal. */
1214
+ .gw-prose {
1215
+ max-width: 68ch;
1216
+ min-width: 0;
1217
+ color: var(--gw-ink);
1218
+ font-size: var(--gw-body-size);
1219
+ line-height: var(--gw-body-leading);
1220
+ overflow-wrap: break-word;
1221
+ }
1222
+ .gw-prose--sm { font-size: 16px; }
1223
+
1224
+ /* the flow: each block 20px below the one before it (16px in --sm); more air around headings and large blocks */
1225
+ :where(.gw-prose) > * + * { margin-top: 20px; }
1226
+ :where(.gw-prose--sm) > * + * { margin-top: 16px; }
1227
+ :where(.gw-prose) > * + :where(figure, img, video, pre, table, hr, .gw-table, .gw-window),
1228
+ :where(.gw-prose) > :where(figure, img, video, pre, table, hr, .gw-table, .gw-window) + * { margin-top: 32px; }
1229
+ :where(.gw-prose) > * + h2 { margin-top: 48px; }
1230
+ :where(.gw-prose) > * + h3 { margin-top: 40px; }
1231
+ :where(.gw-prose) > * + h4 { margin-top: 32px; }
1232
+ :where(.gw-prose--sm) > * + h2 { margin-top: 40px; }
1233
+ :where(.gw-prose--sm) > * + h3 { margin-top: 32px; }
1234
+ :where(.gw-prose--sm) > * + h4 { margin-top: 24px; }
1235
+ :where(.gw-prose) > h1 + * { margin-top: 24px; }
1236
+ :where(.gw-prose) > :is(h2, h3, h4) + * { margin-top: 12px; }
1237
+
1238
+ /* headings: the article's own steps of the type scale, not the page's display sizes (an h2 in a post is not a
1239
+ section headline); h1 is the article's title at the section-headline size */
1240
+ :where(.gw-prose) > :is(h1, h2, h3, h4) {
1241
+ color: var(--gw-ink);
1242
+ font-weight: var(--gw-heading-weight);
1243
+ letter-spacing: var(--gw-heading-tracking);
1244
+ line-height: 1.25;
1245
+ }
1246
+ :where(.gw-prose) > h1 { font-size: var(--gw-display-h2); font-weight: var(--gw-display-weight); letter-spacing: var(--gw-display-tracking); line-height: var(--gw-heading-leading); }
1247
+ :where(.gw-prose) > h2 { font-size: 30px; line-height: 1.2; }
1248
+ :where(.gw-prose) > h3 { font-size: 24px; }
1249
+ :where(.gw-prose) > h4 { font-size: 20px; }
1250
+ :where(.gw-prose--sm) > h2 { font-size: 24px; }
1251
+ :where(.gw-prose--sm) > h3 { font-size: 20px; }
1252
+ :where(.gw-prose--sm) > h4 { font-size: 18px; }
1253
+
1254
+ /* lists without a class: plain bullets and numbers, the markers muted */
1255
+ :where(.gw-prose :is(ul, ol):not([class])) { padding-left: 24px; }
1256
+ :where(.gw-prose ul:not([class])) { list-style: disc; }
1257
+ :where(.gw-prose ol:not([class])) { list-style: decimal; }
1258
+ :where(.gw-prose :is(ul, ol):not([class]) > li + li),
1259
+ :where(.gw-prose :is(ul, ol):not([class]) > li > * + *),
1260
+ :where(.gw-prose :is(ul, ol):not([class]) > li > :is(ul, ol)) { margin-top: 8px; }
1261
+ :where(.gw-prose :is(ul, ol):not([class]) > li)::marker { color: var(--gw-muted); font-variant-numeric: tabular-nums; }
1262
+
1263
+ /* a quotation: a rule on its left and muted words, as the dashboard's reader draws it */
1264
+ :where(.gw-prose) > blockquote { padding-left: 20px; border-left: 3px solid var(--gw-line-strong); color: var(--gw-muted); }
1265
+ :where(.gw-prose) > blockquote > * + * { margin-top: 12px; }
1266
+
1267
+ :where(.gw-prose) > hr { height: 0; border: 0; border-top: 1px solid var(--gw-line); }
1268
+ :where(.gw-prose) :is(sup, sub) { line-height: 0; }
1269
+
1270
+ /* code: inline, a tint chip that wraps on a phone (radius 6 in every profile: it follows the text, not the shapes);
1271
+ a block scrolls inside its own box */
1272
+ :where(.gw-prose) :is(pre, code, kbd, samp) { font-family: var(--gw-font-mono); }
1273
+ :where(.gw-prose) code {
1274
+ padding: 2px 6px;
1275
+ border-radius: var(--gw-radius-6);
1276
+ background: color-mix(in srgb, var(--gw-ink) 8%, transparent);
1277
+ color: var(--gw-ink);
1278
+ font-size: 16px;
1279
+ overflow-wrap: anywhere;
1280
+ -webkit-box-decoration-break: clone;
1281
+ box-decoration-break: clone;
1282
+ }
1283
+ :where(.gw-prose--sm) code { font-size: 14px; }
1284
+ :where(.gw-prose) :is(h1, h2, h3, h4) code { font-size: inherit; }
1285
+ :where(.gw-prose) figcaption code { font-size: 13px; }
1286
+ /* in a table a name stays whole: the table scrolls instead */
1287
+ :where(.gw-prose) :is(th, td) code { font-size: 13px; overflow-wrap: normal; white-space: nowrap; }
1288
+ :where(.gw-prose) pre {
1289
+ overflow-x: auto;
1290
+ padding: 16px 20px;
1291
+ border: 1px solid var(--gw-line);
1292
+ border-radius: var(--gw-radius-card);
1293
+ background: var(--gw-bg-soft);
1294
+ color: var(--gw-ink);
1295
+ font-size: 14px;
1296
+ line-height: 1.6;
1297
+ tab-size: 2;
1298
+ }
1299
+ :where(.gw-prose) pre code { padding: 0; border-radius: var(--gw-radius-0); background: none; font-size: inherit; overflow-wrap: normal; }
1300
+
1301
+ /* images and captions (an image inside a .gw-window keeps the window's square edges) */
1302
+ :where(.gw-prose) > :is(img, video),
1303
+ :where(.gw-prose) > :is(p, figure) > :is(img, video) { border-radius: var(--gw-radius-card); }
1304
+ :where(.gw-prose) figcaption { margin-top: 12px; color: var(--gw-muted); font-size: 14px; line-height: 1.5; }
1305
+
1306
+ /* a table straight from markdown scrolls inside its own box, never the page. When you write the markup, the .gw-table
1307
+ wrapper (a region with a name and tabindex="0") is the better choice. */
1308
+ :where(.gw-prose) > table {
1309
+ display: block;
1310
+ width: max-content;
1311
+ max-width: 100%;
1312
+ overflow-x: auto;
1313
+ border: 1px solid var(--gw-line);
1314
+ border-radius: var(--gw-radius-card);
1315
+ background: var(--gw-surface);
1316
+ border-collapse: collapse;
1317
+ font-size: 14px;
1318
+ line-height: 1.5;
1319
+ -webkit-overflow-scrolling: touch;
1320
+ }
1321
+ :where(.gw-prose) > table :is(th, td) { padding: 12px 16px; border-bottom: 1px solid var(--gw-line); text-align: left; vertical-align: top; }
1322
+ :where(.gw-prose) > table thead th { background: var(--gw-bg-soft); color: var(--gw-ink); font-size: 13px; font-weight: 600; white-space: nowrap; }
1323
+ :where(.gw-prose) > table tbody th { font-weight: 500; }
1324
+ :where(.gw-prose) > table td { color: var(--gw-ink-2); font-variant-numeric: tabular-nums; }
1325
+ :where(.gw-prose) > table tbody tr:last-child > * { border-bottom: 0; }
1326
+ :where(.gw-prose) > table caption { padding: 12px 16px; color: var(--gw-muted); font-size: 13px; text-align: left; }
1327
+ /* on a phone a cell keeps room for a few words a line: the table scrolls further instead of squeezing its text */
1328
+ @media (max-width: 767px) { :where(.gw-prose) > table td { min-width: 160px; } }
package/website.min.css CHANGED
@@ -1 +1 @@
1
- /*! @gemboss/website-ui 0.1.0 | generated by scripts/build.mjs from the files in css/. Edit those and not this file */ :root{color-scheme: light;--gw-font: Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;--gw-text-11: 11px;--gw-text-12: 12px;--gw-text-13: 13px;--gw-text-14: 14px;--gw-text-16: 16px;--gw-text-18: 18px;--gw-text-20: 20px;--gw-text-22: 22px;--gw-text-24: 24px;--gw-text-30: 30px;--gw-display-h1: clamp(40px,4.6vw,68px);--gw-display-h2: clamp(32px,3.4vw,52px);--gw-display-weight: 600;--gw-display-tracking: -0.03em;--gw-heading-weight: 650;--gw-heading-tracking: -0.022em;--gw-heading-leading: 1.08;--gw-body-size: 18px;--gw-body-leading: 1.6;--gw-space-0: 0;--gw-space-2: 2px;--gw-space-4: 4px;--gw-space-6: 6px;--gw-space-8: 8px;--gw-space-12: 12px;--gw-space-16: 16px;--gw-space-20: 20px;--gw-space-24: 24px;--gw-space-32: 32px;--gw-space-40: 40px;--gw-space-48: 48px;--gw-space-64: 64px;--gw-space-80: 80px;--gw-space-96: 96px;--gw-space-120: 120px;--gw-space-section: clamp(56px,38px + 5vw,110px);--gw-radius-0: 0;--gw-radius-4: 4px;--gw-radius-6: 6px;--gw-radius-8: 8px;--gw-radius-12: 12px;--gw-radius-16: 16px;--gw-radius-20: 20px;--gw-radius-999: 999px;--gw-radius-action: 8px;--gw-radius-chip: 999px;--gw-radius-card: 12px;--gw-radius-panel: 16px;--gw-shadow: 0 1px 2px rgba(31,30,29,.04),0 2px 6px rgba(31,30,29,.06);--gw-shadow-sm: 0 1px 2px rgba(31,30,29,.04);--gw-shadow-raised: 0 4px 16px rgba(31,30,29,.10);--gw-wrap: 1120px;--gw-wrap-narrow: 780px;--gw-gutter: 22px;--gw-header-height: 64px;--gw-button-height: 40px;--gw-tap-min: 44px;--gw-ease: cubic-bezier(.22,1,.36,1);--gw-reveal-ms: 700ms;--gw-wash-pink: #ff6f5e;--gw-wash-violet: #7c8af7;--gw-wash-sky: #43b0ff;--gw-wash-mint: #1fcf9f;--gw-accent-light: #5661f5;--gw-accent-strong-light: #3a44de;--gw-accent-soft-light: #eef0fe;--gw-on-accent-light: #ffffff;--gw-accent-dark: #7c84ff;--gw-accent-strong-dark: #a3a9ff;--gw-accent-soft-dark: #1f2140;--gw-on-accent-dark: #0d0d12;--gw-bg: #ffffff;--gw-bg-soft: #f2f3f5;--gw-surface: #ffffff;--gw-ink: #1b1c1e;--gw-ink-2: #3b3d42;--gw-muted: #686b71;--gw-line: #e5e7ea;--gw-line-strong: #d5d8dd;--gw-action: #1b1c1e;--gw-action-hover: #000000;--gw-on-action: #ffffff;--gw-accent: var(--gw-accent-light);--gw-accent-strong: var(--gw-accent-strong-light);--gw-accent-soft: var(--gw-accent-soft-light);--gw-on-accent: var(--gw-on-accent-light);--gw-success: #007f5f;--gw-success-soft: #e3f1df;--gw-warning: #9a6700;--gw-night: #0c0e14;--gw-night-2: #141722;--gw-on-night: #e3e4e8;--gw-on-night-muted: #9aa3ff}@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){color-scheme: dark;--gw-bg: #0d0d12;--gw-bg-soft: #121318;--gw-surface: #16171d;--gw-ink: #e3e4e8;--gw-ink-2: #c4c6cc;--gw-muted: #9a9ca6;--gw-line: #2a2b33;--gw-line-strong: #383944;--gw-action: #f2f3f5;--gw-action-hover: #ffffff;--gw-on-action: #0d0d12;--gw-accent: var(--gw-accent-dark);--gw-accent-strong: var(--gw-accent-strong-dark);--gw-accent-soft: var(--gw-accent-soft-dark);--gw-on-accent: var(--gw-on-accent-dark);--gw-success: #34c38f;--gw-success-soft: #132a22;--gw-warning: #e0b341;--gw-night: #0a0b10;--gw-night-2: #12141c;--gw-on-night: #e3e4e8;--gw-on-night-muted: #9aa3ff}}:root[data-theme="dark"]{color-scheme: dark;--gw-bg: #0d0d12;--gw-bg-soft: #121318;--gw-surface: #16171d;--gw-ink: #e3e4e8;--gw-ink-2: #c4c6cc;--gw-muted: #9a9ca6;--gw-line: #2a2b33;--gw-line-strong: #383944;--gw-action: #f2f3f5;--gw-action-hover: #ffffff;--gw-on-action: #0d0d12;--gw-accent: var(--gw-accent-dark);--gw-accent-strong: var(--gw-accent-strong-dark);--gw-accent-soft: var(--gw-accent-soft-dark);--gw-on-accent: var(--gw-on-accent-dark);--gw-success: #34c38f;--gw-success-soft: #132a22;--gw-warning: #e0b341;--gw-night: #0a0b10;--gw-night-2: #12141c;--gw-on-night: #e3e4e8;--gw-on-night-muted: #9aa3ff}:root[data-theme="light"]{color-scheme: light;--gw-bg: #ffffff;--gw-bg-soft: #f2f3f5;--gw-surface: #ffffff;--gw-ink: #1b1c1e;--gw-ink-2: #3b3d42;--gw-muted: #686b71;--gw-line: #e5e7ea;--gw-line-strong: #d5d8dd;--gw-action: #1b1c1e;--gw-action-hover: #000000;--gw-on-action: #ffffff;--gw-accent: var(--gw-accent-light);--gw-accent-strong: var(--gw-accent-strong-light);--gw-accent-soft: var(--gw-accent-soft-light);--gw-on-accent: var(--gw-on-accent-light);--gw-success: #007f5f;--gw-success-soft: #e3f1df;--gw-warning: #9a6700;--gw-night: #0c0e14;--gw-night-2: #141722;--gw-on-night: #e3e4e8;--gw-on-night-muted: #9aa3ff}.gw-band--night,.gw-showcase{color-scheme: dark;--gw-bg: var(--gw-night);--gw-bg-soft: var(--gw-night-2);--gw-surface: var(--gw-night-2);--gw-ink: #e3e4e8;--gw-ink-2: #c4c6cc;--gw-muted: #9a9ca6;--gw-line: #2a2b33;--gw-line-strong: #383944;--gw-action: #f2f3f5;--gw-action-hover: #ffffff;--gw-on-action: #0d0d12;--gw-accent: var(--gw-accent-dark);--gw-accent-strong: var(--gw-accent-strong-dark);--gw-accent-soft: var(--gw-accent-soft-dark);--gw-on-accent: var(--gw-on-accent-dark);--gw-success: #34c38f;--gw-success-soft: #132a22;--gw-warning: #e0b341}*,*::before,*::after{box-sizing: border-box}[hidden]{display: none !important}html{-webkit-text-size-adjust: 100%;text-size-adjust: 100%}body{margin: 0;background: var(--gw-bg);color: var(--gw-ink);font-family: var(--gw-font);font-size: var(--gw-body-size);line-height: var(--gw-body-leading);-webkit-font-smoothing: antialiased;text-rendering: optimizeLegibility}:where(h1,h2,h3,h4,h5,h6,p,ul,ol,dl,dd,figure,blockquote){margin: 0}img,svg,video{display: block;max-width: 100%}img,video{height: auto}button,input,select,textarea{font: inherit;color: inherit}button{cursor: pointer}a{color: inherit;text-decoration: none}b,strong{font-weight: 600}.gw-page{display: flex;flex-direction: column;min-height: 100vh;min-height: 100dvh}.gw-page > main{flex: 1 0 auto}h1,h2,h3,h4,h5,h6,.gw-h1,.gw-h2,.gw-h3,.gw-h4{font-weight: var(--gw-heading-weight);letter-spacing: var(--gw-heading-tracking);line-height: var(--gw-heading-leading);text-wrap: balance}h1,.gw-h1,h2,.gw-h2{font-weight: var(--gw-display-weight);letter-spacing: var(--gw-display-tracking)}h1,.gw-h1{font-size: var(--gw-display-h1)}h2,.gw-h2{font-size: var(--gw-display-h2)}h3,.gw-h3{font-size: 24px}h4,.gw-h4{font-size: 20px;font-weight: 600;letter-spacing: -0.01em}h5,h6{font-size: 16px;font-weight: 600;letter-spacing: 0}.gw-lead{font-size: 18px;line-height: 1.55;color: var(--gw-muted);max-width: 60ch}.gw-note{font-size: 14px;color: var(--gw-muted)}.gw-dim{color: var(--gw-muted)}.gw-label{display: inline-flex;align-items: center;gap: 8px;font-size: 13px;font-weight: 500;line-height: 1.4;color: var(--gw-muted)}.gw-label::before{content: "";flex: none;width: 8px;height: 8px;border-radius: var(--gw-radius-0);background: var(--gw-accent)}:where(p,dd,td,figcaption,.gw-list--check li) a:not([class]),.gw-link{color: var(--gw-accent-strong);font-weight: 500;text-decoration: underline;text-decoration-thickness: 1px;text-underline-offset: 4px;text-decoration-color: color-mix(in srgb,currentColor 40%,transparent)}:where(p,dd,td,figcaption,.gw-list--check li) a:not([class]):hover,.gw-link:hover{text-decoration-color: currentColor}:focus-visible{outline: 2px solid var(--gw-accent);outline-offset: 2px}[id]{scroll-margin-top: calc(var(--gw-header-height) + 16px)}.gw-skip{position: absolute;left: -9999px;top: 8px;z-index: 100;padding: 12px 16px;border-radius: var(--gw-radius-action);background: var(--gw-action);color: var(--gw-on-action);font-size: 14px;font-weight: 600}.gw-skip:focus{left: 16px}.gw-reveal{opacity: 0;transform: translateY(24px);transition: opacity var(--gw-reveal-ms) var(--gw-ease),transform var(--gw-reveal-ms) var(--gw-ease);animation: gw-reveal-failsafe 1ms linear 2.5s forwards}.gw-reveal.is-in{opacity: 1;transform: none}@keyframes gw-reveal-failsafe{to{opacity: 1;transform: none}}@media (prefers-reduced-motion: reduce){*,*::before,*::after{scroll-behavior: auto !important}.gw-reveal{opacity: 1;transform: none;transition: none;animation: none}}.gw-wrap,.gw-wrap--narrow{width: min(100% - 2 * var(--gw-gutter),var(--gw-wrap));margin-inline: auto}.gw-wrap--narrow{max-width: var(--gw-wrap-narrow)}.gw-section{padding-block: var(--gw-space-section)}.gw-section--soft{background: var(--gw-bg-soft)}.gw-section--tight{padding-block: 40px}@media (min-width: 768px){.gw-section--tight{padding-block: 64px}}.gw-section__head{max-width: 660px}.gw-section__head--center{margin-inline: auto;text-align: center}.gw-section__head--center .gw-lead{margin-inline: auto}.gw-section__head:not(:last-child){margin-bottom: 40px}@media (min-width: 768px){.gw-section__head:not(:last-child){margin-bottom: 48px}}:where(.gw-section__head,.gw-hero > .gw-wrap,.gw-split > :not(.gw-window),.gw-cta,.gw-card,.gw-feature,.gw-plan) > * + *{margin-top: 16px}:where(.gw-section__head,.gw-hero > .gw-wrap,.gw-split > :not(.gw-window),.gw-cta,.gw-card,.gw-plan) > .gw-actions{margin-top: 32px}:where(.gw-section__head,.gw-hero > .gw-wrap,.gw-split > :not(.gw-window),.gw-cta,.gw-card,.gw-plan) > .gw-list--check{margin-top: 24px}.gw-actions{display: flex;flex-wrap: wrap;align-items: center;gap: 12px}.gw-grid,.gw-grid--2,.gw-grid--3,.gw-grid--4{display: grid;grid-template-columns: minmax(0,1fr);gap: 16px}@media (min-width: 480px){.gw-grid--4{grid-template-columns: repeat(2,minmax(0,1fr))}}@media (min-width: 768px){.gw-grid,.gw-grid--2,.gw-grid--3,.gw-grid--4{gap: 24px}.gw-grid--2{grid-template-columns: repeat(2,minmax(0,1fr))}.gw-grid--3{grid-template-columns: repeat(3,minmax(0,1fr))}}@media (min-width: 1080px){.gw-grid--4{grid-template-columns: repeat(4,minmax(0,1fr))}}.gw-band--night,.gw-showcase{position: relative;isolation: isolate;color: var(--gw-ink);background: radial-gradient(800px 360px at 50% 0%,color-mix(in srgb,var(--gw-accent) 22%,transparent),transparent 72%),var(--gw-night)}.gw-btn{position: relative;display: inline-flex;align-items: center;justify-content: center;gap: 8px;max-width: 100%;height: var(--gw-button-height);padding: 0 20px;border: 1px solid transparent;border-radius: var(--gw-radius-action);background: var(--gw-action);color: var(--gw-on-action);font-size: 14px;font-weight: 600;line-height: 1.4;letter-spacing: 0;text-align: center;white-space: nowrap;cursor: pointer}.gw-btn:hover{background: var(--gw-action-hover)}.gw-btn svg{flex: none;width: 16px;height: 16px}.gw-btn--secondary{background: transparent;border-color: var(--gw-line-strong);color: var(--gw-ink)}.gw-btn--secondary:hover{background: transparent;border-color: var(--gw-ink)}.gw-btn--ghost{background: transparent;color: var(--gw-ink)}.gw-btn--ghost:hover{background: var(--gw-bg-soft)}.gw-btn--on-night{background: var(--gw-on-night);color: var(--gw-night)}.gw-btn--on-night:hover{background: var(--gw-on-night);opacity: 0.88}.gw-btn--sm{height: 36px;padding: 0 16px}.gw-btn--sm::after{content: "";position: absolute;top: -6px;right: 0;bottom: -6px;left: 0}.gw-btn--lg{height: 48px;padding: 0 24px;font-size: 16px}.gw-btn--block{display: flex;width: 100%}.gw-btn:disabled,.gw-btn[aria-disabled="true"]{opacity: 0.48;cursor: not-allowed;pointer-events: none}.gw-link--arrow{display: inline-flex;align-items: center;gap: 6px;min-height: 24px;font-weight: 600;text-decoration: none}.gw-link--arrow::after{content: "\2192";transition: transform 0.18s var(--gw-ease)}.gw-link--arrow:hover::after{transform: translateX(2px)}.gw-chip{display: inline-flex;align-items: center;gap: 6px;min-height: 32px;padding: 4px 12px;border: 1px solid var(--gw-line-strong);border-radius: var(--gw-radius-chip);background: var(--gw-surface);color: var(--gw-ink-2);font-size: 13px;font-weight: 500;line-height: 1.4;white-space: nowrap}:is(a,button,label).gw-chip{cursor: pointer}:is(a,button,label).gw-chip:hover{border-color: var(--gw-ink);color: var(--gw-ink)}.gw-chip.is-active,.gw-chip[aria-pressed="true"],.gw-chip[aria-selected="true"]{border-color: var(--gw-accent);background: var(--gw-accent-soft);color: var(--gw-accent-strong)}.gw-badge{display: inline-flex;align-items: center;gap: 6px;min-height: 24px;padding: 2px 8px;border-radius: var(--gw-radius-chip);background: color-mix(in srgb,var(--gw-ink) 8%,transparent);color: var(--gw-ink-2);font-size: 12px;font-weight: 500;line-height: 1.4;white-space: nowrap;vertical-align: middle}.gw-badge--accent{background: var(--gw-accent-soft);color: var(--gw-accent-strong)}.gw-badge--success{background: var(--gw-success-soft);color: var(--gw-ink)}.gw-badge--success::before,.gw-badge--warning::before{content: "";flex: none;width: 6px;height: 6px;border-radius: var(--gw-radius-chip);background: var(--gw-success)}.gw-badge--warning::before{background: var(--gw-warning)}.gw-card{padding: 24px;border: 1px solid var(--gw-line);border-radius: var(--gw-radius-card);background: var(--gw-surface);box-shadow: var(--gw-shadow)}@media (min-width: 768px){.gw-card{padding: 32px}}.gw-card--soft{background: var(--gw-bg-soft);box-shadow: none}.gw-card--link{display: block;color: inherit}.gw-card--link:hover{border-color: var(--gw-line-strong)}:where(.gw-card,.gw-feature,.gw-plan) > :is(h3,h4) + p{margin-top: 8px}:where(.gw-card,.gw-feature) h3{font-size: 20px}:where(.gw-card,.gw-feature) p{font-size: 16px;color: var(--gw-muted)}.gw-window{overflow: hidden;border: 1px solid var(--gw-line);border-radius: var(--gw-radius-card);background: var(--gw-surface);color: var(--gw-ink);box-shadow: var(--gw-shadow);font-size: 13px;line-height: 1.5}.gw-window__bar{display: flex;align-items: center;gap: 12px;min-height: 40px;padding: 8px 16px;border-bottom: 1px solid var(--gw-line);color: var(--gw-muted);font-size: 12px}.gw-window__bar::before{content: "";flex: none;width: 36px;height: 8px;background: radial-gradient(circle at 4px 4px,var(--gw-line-strong) 4px,transparent 4px),radial-gradient(circle at 18px 4px,var(--gw-line-strong) 4px,transparent 4px),radial-gradient(circle at 32px 4px,var(--gw-line-strong) 4px,transparent 4px)}.gw-window__body{padding: 16px}.gw-window__body:has(> img:only-child){padding: 0}.gw-window__body > img{width: 100%}.gw-icon{display: inline-flex;align-items: center;justify-content: center;flex: none;width: 20px;height: 20px}.gw-icon svg{width: 20px;height: 20px}.gw-list--check{display: grid;gap: 12px;padding: 0;list-style: none}.gw-list--check > li{position: relative;padding-left: 24px}.gw-list--check > li::before{content: "";position: absolute;left: 0;top: 6px;top: calc((1lh - 16px) / 2);width: 16px;height: 16px;background: var(--gw-accent);-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.4l2.9 2.8L12.5 5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat;mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.4l2.9 2.8L12.5 5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat}.gw-table{overflow-x: auto;border: 1px solid var(--gw-line);border-radius: var(--gw-radius-card);background: var(--gw-surface);-webkit-overflow-scrolling: touch}.gw-table table{width: 100%;border-collapse: collapse;font-size: 14px;line-height: 1.5}.gw-table caption{padding: 16px;text-align: left;font-size: 13px;color: var(--gw-muted)}.gw-table th,.gw-table td{padding: 12px 16px;border-bottom: 1px solid var(--gw-line);text-align: left;vertical-align: top}.gw-table thead th{background: var(--gw-bg-soft);color: var(--gw-ink);font-size: 13px;font-weight: 600;white-space: nowrap}.gw-table tbody th{font-weight: 500}.gw-table tbody tr:last-child > *{border-bottom: 0}.gw-table td{color: var(--gw-ink-2);font-variant-numeric: tabular-nums}.gw-table--compare table{min-width: 640px}.gw-table--compare td{text-align: center}.gw-table--compare thead th:not(:first-child){text-align: center}.gw-table--compare tbody th{position: sticky;left: 0;z-index: 1;background: var(--gw-surface);min-width: 160px}.gw-faq{display: grid;gap: 12px}.gw-faq__item{padding: 0 24px;border: 1px solid var(--gw-line);border-radius: var(--gw-radius-card);background: var(--gw-surface)}.gw-faq__item[open]{border-color: var(--gw-line-strong)}.gw-faq__item > summary{display: flex;align-items: center;justify-content: space-between;gap: 16px;min-height: 44px;padding: 20px 0;font-size: 18px;font-weight: 600;line-height: 1.4;list-style: none;cursor: pointer}.gw-faq__item > summary::-webkit-details-marker{display: none}.gw-faq__item > summary::after{content: "";flex: none;width: 16px;height: 16px;background: linear-gradient(var(--gw-accent),var(--gw-accent)) center / 16px 2px no-repeat,linear-gradient(var(--gw-accent),var(--gw-accent)) center / 2px 16px no-repeat;transition: transform 0.2s var(--gw-ease)}.gw-faq__item[open] > summary::after{transform: rotate(45deg)}.gw-faq__item > :not(summary){margin: 0 0 20px;max-width: 68ch;color: var(--gw-muted);font-size: 16px}@media (max-width: 768px),(pointer: coarse){.gw-btn,.gw-btn--sm,.gw-btn--lg{height: auto;min-height: var(--gw-tap-min);padding-block: 8px;white-space: normal;text-wrap: balance}.gw-btn--lg{min-height: 48px}:is(a,button,label).gw-chip{min-height: var(--gw-tap-min)}}.gw-announce{padding: 8px var(--gw-gutter);border-bottom: 1px solid var(--gw-line);background: var(--gw-bg-soft);color: var(--gw-ink-2);font-size: 13px;line-height: 1.5;text-align: center}.gw-announce a{color: var(--gw-ink);font-weight: 600;text-decoration: underline;text-underline-offset: 4px}.gw-header{position: sticky;top: 0;z-index: 50;border-bottom: 1px solid var(--gw-line);background: var(--gw-surface)}.gw-header.is-scrolled{border-bottom-color: var(--gw-line-strong)}.gw-header__bar{display: flex;align-items: center;gap: 16px;height: var(--gw-header-height)}.gw-brand{display: inline-flex;align-items: center;gap: 8px;flex: none;min-height: 44px;color: var(--gw-ink);font-size: 18px;font-weight: 700;letter-spacing: -0.01em;white-space: nowrap}.gw-brand__mark{flex: none;width: 26px;height: 26px}.gw-brand__name{line-height: 1.2}.gw-nav{display: none}.gw-nav__list{display: flex;align-items: center;gap: 4px;margin: 0;padding: 0;list-style: none}.gw-nav__trigger,.gw-nav__link{display: inline-flex;align-items: center;gap: 6px;height: 40px;padding: 0 12px;border: 0;border-radius: var(--gw-radius-action);background: transparent;color: var(--gw-ink-2);font-size: 14px;font-weight: 500;line-height: 1.4;white-space: nowrap;cursor: pointer}.gw-nav__trigger:hover,.gw-nav__link:hover,.gw-nav__item.is-open > .gw-nav__trigger{background: var(--gw-bg-soft);color: var(--gw-ink)}.gw-nav__trigger::after,.gw-mobile-menu__group > summary::after{content: "";flex: none;width: 12px;height: 12px;background: currentColor;opacity: 0.6;-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat;mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat;transition: transform 0.18s var(--gw-ease)}.gw-nav__trigger[aria-expanded="true"]::after,.gw-mobile-menu__group[open] > summary::after{transform: rotate(180deg)}.gw-nav__link[aria-current="page"]{color: var(--gw-ink);font-weight: 600;text-decoration: underline;text-decoration-color: var(--gw-accent);text-decoration-thickness: 2px;text-underline-offset: 8px}.gw-mega{position: absolute;top: calc(100% + 8px);left: 50%;width: min(960px,calc(100vw - 40px));max-height: calc(100vh - var(--gw-header-height) - 24px);overflow-y: auto;transform: translateX(-50%);border: 1px solid var(--gw-line);border-radius: 20px;background: var(--gw-surface);box-shadow: var(--gw-shadow-raised)}.gw-mega::before{content: "";position: absolute;top: -12px;left: 0;right: 0;height: 12px}.gw-mega:not([hidden]){animation: gw-mega-in 0.16s var(--gw-ease)}@keyframes gw-mega-in{from{opacity: 0;transform: translateX(-50%) translateY(8px)}}@media (prefers-reduced-motion: reduce){.gw-mega:not([hidden]){animation: none}}.gw-mega > .gw-wrap{width: auto;margin: 0}.gw-mega__grid{display: grid;grid-auto-flow: column;grid-auto-columns: minmax(0,1fr);gap: 32px;padding: 32px}.gw-mega__col{display: flex;flex-direction: column;gap: 2px}.gw-mega__heading{padding: 0 8px 8px;color: var(--gw-muted);font-size: 12px;font-weight: 500}.gw-mega__link{display: grid;grid-template-columns: 32px minmax(0,1fr);align-items: start;gap: 12px;padding: 8px;border-radius: var(--gw-radius-action);color: var(--gw-ink)}.gw-mega__link:hover{background: var(--gw-bg-soft)}.gw-mega__link b{display: block;font-size: 14px;font-weight: 500;line-height: 20px}.gw-mega__link i{display: block;margin-top: 2px;color: var(--gw-muted);font-size: 13px;font-style: normal;line-height: 18px}.gw-mega__link[aria-current="page"] b{color: var(--gw-accent-strong);font-weight: 600}.gw-mega__icon{display: grid;place-items: center;width: 32px;height: 32px;border: 1px solid var(--gw-line);border-radius: var(--gw-radius-action);background: var(--gw-surface);color: var(--gw-muted)}.gw-mega__icon svg{width: 16px;height: 16px}.gw-mega__link:hover .gw-mega__icon{border-color: var(--gw-accent-soft);background: var(--gw-accent-soft);color: var(--gw-accent-strong)}.gw-mega__feature{display: flex;flex-direction: column;justify-content: flex-end;gap: 4px;min-height: 216px;padding: 24px;border-radius: var(--gw-radius-panel);background: radial-gradient(360px 260px at 12% 112%,color-mix(in srgb,var(--gw-accent) 78%,transparent),transparent 62%),radial-gradient(300px 220px at 92% -14%,color-mix(in srgb,var(--gw-wash-violet) 44%,transparent),transparent 70%),var(--gw-night);color: var(--gw-on-night)}.gw-mega__feature b{font-size: 18px;font-weight: 650;line-height: 1.25}.gw-mega__feature i{color: var(--gw-on-night);font-size: 13px;font-style: normal;line-height: 1.5;opacity: 0.9}.gw-mega__feature .gw-link--arrow{margin-top: 16px;color: var(--gw-on-night);font-size: 13px;font-weight: 600}.gw-header__actions{display: flex;align-items: center;gap: 8px;margin-left: auto}.gw-header__signin{display: none}.gw-header__actions > .gw-btn{display: none}.gw-theme-toggle,.gw-menu-toggle{display: inline-flex;align-items: center;justify-content: center;flex: none;width: 40px;height: 40px;padding: 0;border: 0;border-radius: var(--gw-radius-action);background: transparent;color: var(--gw-ink)}.gw-theme-toggle:hover,.gw-menu-toggle:hover{background: var(--gw-bg-soft)}.gw-theme-toggle svg,.gw-menu-toggle svg{width: 20px;height: 20px}.gw-menu-toggle[aria-expanded="true"] .gw-menu-toggle__open,.gw-menu-toggle:not([aria-expanded="true"]) .gw-menu-toggle__close{display: none}.gw-mobile-menu{position: fixed;top: calc(var(--gw-header-height) + 1px);left: 0;right: 0;bottom: 0;overflow-y: auto;overscroll-behavior: contain;padding-block: 8px 32px;background: var(--gw-bg)}html.is-menu-open{overflow: hidden}html.is-menu-open .gw-header{position: fixed;top: 0;left: 0;right: 0}.gw-mobile-menu__group > summary,.gw-mobile-menu__top{display: flex;align-items: center;justify-content: space-between;min-height: 48px;padding-block: 8px;border-bottom: 1px solid var(--gw-line);color: var(--gw-ink);font-size: 18px;font-weight: 500;list-style: none;cursor: pointer}.gw-mobile-menu__group > summary::-webkit-details-marker{display: none}.gw-mobile-menu__list{margin: 0;padding: 8px 0 16px;list-style: none}.gw-mobile-menu__link{display: flex;align-items: center;min-height: 44px;color: var(--gw-ink-2);font-size: 16px}.gw-mobile-menu__link[aria-current="page"],.gw-mobile-menu__top[aria-current="page"]{color: var(--gw-accent-strong);font-weight: 600}.gw-mobile-menu__actions{display: grid;gap: 8px;margin-top: 24px}@media (min-width: 480px){.gw-header__actions > .gw-btn:not(.gw-btn--secondary){display: inline-flex}}@media (min-width: 768px){.gw-header__actions > .gw-btn--secondary{display: inline-flex}}@media (min-width: 1080px){.gw-header__bar{gap: 32px}.gw-nav{display: block}.gw-header__signin{display: inline-flex}.gw-menu-toggle,.gw-mobile-menu{display: none !important}html.is-menu-open{overflow: visible}html.is-menu-open .gw-header{position: sticky}}@media (max-width: 768px),(pointer: coarse){.gw-theme-toggle,.gw-menu-toggle{width: var(--gw-tap-min);height: var(--gw-tap-min)}}.gw-footer{padding-block: 64px 40px;border-top: 1px solid var(--gw-line);background: var(--gw-bg);color: var(--gw-ink);font-size: 14px}.gw-footer__grid{display: grid;grid-template-columns: repeat(2,minmax(0,1fr));gap: 32px 24px}.gw-footer__brand{grid-column: 1 / -1;max-width: 320px}.gw-footer__brand p{margin-top: 16px;color: var(--gw-muted)}.gw-footer__heading{margin: 0 0 8px;color: var(--gw-ink);font-size: 13px;font-weight: 600;letter-spacing: 0}.gw-footer__col ul{margin: 0;padding: 0;list-style: none}.gw-footer__col a{display: block;padding-block: 6px;color: var(--gw-muted)}.gw-footer__col a:hover{color: var(--gw-ink)}.gw-footer__col a[aria-current="page"]{color: var(--gw-accent-strong)}.gw-footer__bottom{display: flex;flex-wrap: wrap;align-items: center;justify-content: space-between;gap: 8px 24px;margin-top: 48px;padding-top: 24px;border-top: 1px solid var(--gw-line);color: var(--gw-muted);font-size: 13px}.gw-footer__bottom:first-child{margin-top: 0;padding-top: 0;border-top: 0}.gw-footer__bottom ul{display: flex;flex-wrap: wrap;gap: 0 16px;margin: 0;padding: 0;list-style: none}.gw-footer__bottom a{display: inline-flex;align-items: center;justify-content: center;min-width: 24px;min-height: 24px;color: var(--gw-muted)}.gw-footer__bottom a:hover{color: var(--gw-ink)}@media (min-width: 768px){.gw-footer__grid{grid-template-columns: repeat(3,minmax(0,1fr))}}@media (min-width: 1080px){.gw-footer__grid{grid-auto-flow: column;grid-template-columns: minmax(0,1.6fr);grid-auto-columns: minmax(0,1fr)}.gw-footer__brand{grid-column: auto}}@media (max-width: 768px),(pointer: coarse){.gw-footer__bottom a{min-height: var(--gw-tap-min)}}.gw-hero{position: relative;isolation: isolate;padding-block: 48px 64px}.gw-hero__wash{position: absolute;inset: 0;z-index: -1;pointer-events: none;background: radial-gradient(640px 460px at 88% -10%,color-mix(in srgb,var(--gw-accent) 16%,transparent),transparent 62%),radial-gradient(560px 480px at 6% 108%,color-mix(in srgb,var(--gw-wash-violet) 12%,transparent),transparent 62%),radial-gradient(420px 320px at 52% 118%,color-mix(in srgb,var(--gw-wash-mint) 10%,transparent),transparent 62%)}.gw-hero h1 .gw-dim{display: block}.gw-hero > .gw-wrap > .gw-window{margin-top: 48px}.gw-hero--center{text-align: center}.gw-hero--center > .gw-wrap > *{margin-inline: auto}.gw-hero--center .gw-actions{justify-content: center}.gw-hero--compact{padding-block: 40px 48px}.gw-hero--compact h1{font-size: var(--gw-display-h2)}@media (min-width: 768px){.gw-hero{padding-block: 80px 96px}.gw-hero--compact{padding-block: 64px}.gw-hero .gw-lead{font-size: 20px}.gw-hero > .gw-wrap > .gw-window{margin-top: 64px}}@media (max-width: 479px){:is(.gw-hero,.gw-cta) .gw-actions > .gw-btn{flex: 1 1 100%}}.gw-logos{padding-block: 40px;border-block: 1px solid var(--gw-line)}.gw-logos p{color: var(--gw-muted);font-size: 13px;text-align: center}.gw-logos ul{display: flex;flex-wrap: wrap;align-items: center;justify-content: center;gap: 16px 40px;margin-top: 20px;padding: 0;list-style: none}.gw-logos li{color: var(--gw-muted);font-size: 22px;font-weight: 600;letter-spacing: -0.02em;line-height: 1.2}.gw-logos img{width: auto;height: 28px}.gw-stats{display: grid;grid-template-columns: minmax(0,1fr);gap: 24px;margin: 0;padding: 0;list-style: none}.gw-stats__value{font-size: var(--gw-display-h2);font-weight: 600;letter-spacing: -0.03em;line-height: 1.1;font-variant-numeric: tabular-nums}.gw-stats__label{margin-top: 8px;max-width: 28ch;color: var(--gw-muted);font-size: 14px}.gw-stats__source{margin-top: 8px;color: var(--gw-muted);font-size: 12px}@media (min-width: 480px){.gw-stats{grid-template-columns: repeat(2,minmax(0,1fr))}}@media (min-width: 1080px){.gw-stats{grid-template-columns: none;grid-auto-flow: column;grid-auto-columns: minmax(0,1fr);gap: 0}.gw-stats__item{padding: 4px 24px;border-left: 1px solid var(--gw-line)}.gw-stats__item:first-child{padding-left: 0;border-left: 0}}.gw-features{row-gap: 40px}.gw-feature .gw-icon{width: 40px;height: 40px;border: 1px solid var(--gw-line);border-radius: var(--gw-radius-action);background: var(--gw-surface);color: var(--gw-accent)}.gw-split{display: grid;grid-template-columns: minmax(0,1fr);align-items: center;gap: 40px}@media (min-width: 768px){.gw-split{grid-template-columns: repeat(2,minmax(0,1fr))}.gw-split--reverse > :first-child{order: 2}}.gw-split h2{font-size: 30px}@media (min-width: 1080px){.gw-split{gap: 64px}}.gw-showcase .gw-window{max-width: 960px;margin-inline: auto}.gw-showcase .gw-window + *{margin-top: 48px}.gw-steps{display: grid;grid-template-columns: minmax(0,1fr);gap: 32px 24px;margin: 0;padding: 0;list-style: none;counter-reset: gw-step}.gw-steps > li{counter-increment: gw-step}.gw-steps > li::before{content: counter(gw-step,decimal-leading-zero);display: block;margin-bottom: 16px;padding-bottom: 12px;border-bottom: 1px solid var(--gw-line);color: var(--gw-accent-strong);font-size: 13px;font-weight: 600;font-variant-numeric: tabular-nums}.gw-steps h3{font-size: 20px}.gw-steps p{margin-top: 8px;color: var(--gw-muted);font-size: 16px}@media (min-width: 768px){.gw-steps{grid-template-columns: repeat(2,minmax(0,1fr))}}@media (min-width: 1080px){.gw-steps{grid-template-columns: none;grid-auto-flow: column;grid-auto-columns: minmax(0,1fr)}}.gw-quote{max-width: 880px;margin-inline: auto;padding: 40px 24px;border: 1px solid var(--gw-line);border-radius: var(--gw-radius-panel);background: var(--gw-surface);text-align: center}.gw-quote::before{content: "";display: block;width: 32px;height: 24px;margin: 0 auto 24px;background: var(--gw-accent);-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 24'%3E%3Cpath d='M0 24V14C0 6 4 1 12 0l1 4c-4 1-6 4-6 8h5v12zm19 0V14c0-8 4-13 12-14l1 4c-4 1-6 4-6 8h5v12z'/%3E%3C/svg%3E") center / contain no-repeat;mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 24'%3E%3Cpath d='M0 24V14C0 6 4 1 12 0l1 4c-4 1-6 4-6 8h5v12zm19 0V14c0-8 4-13 12-14l1 4c-4 1-6 4-6 8h5v12z'/%3E%3C/svg%3E") center / contain no-repeat}.gw-quote blockquote{font-size: 24px;font-weight: 500;line-height: 1.4;letter-spacing: -0.01em;text-wrap: balance}.gw-quote figcaption{margin-top: 24px;color: var(--gw-muted);font-size: 14px}.gw-quote figcaption b{color: var(--gw-ink)}.gw-quote figcaption img{width: 40px;height: 40px;margin: 0 auto 12px;border-radius: var(--gw-radius-chip)}@media (min-width: 768px){.gw-quote{padding: 64px}.gw-quote blockquote{font-size: 30px}}.gw-pricing{display: grid;grid-template-columns: repeat(auto-fit,minmax(min(100%,260px),1fr));align-items: start;gap: 16px}.gw-plan{display: flex;flex-direction: column;padding: 24px;border: 1px solid var(--gw-line);border-radius: var(--gw-radius-panel);background: var(--gw-surface);box-shadow: var(--gw-shadow)}.gw-plan--featured{border-color: var(--gw-accent)}.gw-plan{position: relative}.gw-plan > .gw-badge{align-self: flex-start}.gw-plan > .gw-badge:first-child{position: absolute;top: -12px;left: 24px}.gw-plan > .gw-badge:first-child + *{margin-top: 0}.gw-plan h3{font-size: 20px}:where(.gw-plan) p{color: var(--gw-muted);font-size: 14px}.gw-plan__price{display: flex;flex-wrap: wrap;align-items: baseline;gap: 6px;color: var(--gw-ink);font-size: var(--gw-display-h2);font-weight: 600;letter-spacing: -0.03em;line-height: 1.1;font-variant-numeric: tabular-nums}.gw-plan__price small{color: var(--gw-muted);font-size: 14px;font-weight: 500;letter-spacing: 0}.gw-plan .gw-list--check{font-size: 14px}@media (min-width: 768px){.gw-plan{padding: 32px}.gw-plan > .gw-badge:first-child{left: 32px}}.gw-cta{max-width: 780px;margin-inline: auto;text-align: center}.gw-cta .gw-lead{margin-inline: auto}.gw-cta .gw-actions{justify-content: center}
1
+ /*! @gemboss/website-ui 0.3.0 | generated by scripts/build.mjs from the files in css/. Edit those and not this file */ :root{color-scheme: light;--gw-font: Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;--gw-font-mono: ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;--gw-text-11: 11px;--gw-text-12: 12px;--gw-text-13: 13px;--gw-text-14: 14px;--gw-text-16: 16px;--gw-text-18: 18px;--gw-text-20: 20px;--gw-text-22: 22px;--gw-text-24: 24px;--gw-text-30: 30px;--gw-display-h1: clamp(40px,4.6vw,68px);--gw-display-h2: clamp(32px,3.4vw,52px);--gw-display-weight: 600;--gw-display-tracking: -0.03em;--gw-heading-weight: 650;--gw-heading-tracking: -0.022em;--gw-heading-leading: 1.08;--gw-body-size: 18px;--gw-body-leading: 1.6;--gw-space-0: 0;--gw-space-2: 2px;--gw-space-4: 4px;--gw-space-6: 6px;--gw-space-8: 8px;--gw-space-12: 12px;--gw-space-16: 16px;--gw-space-20: 20px;--gw-space-24: 24px;--gw-space-32: 32px;--gw-space-40: 40px;--gw-space-48: 48px;--gw-space-64: 64px;--gw-space-80: 80px;--gw-space-96: 96px;--gw-space-120: 120px;--gw-space-section: clamp(56px,38px + 5vw,110px);--gw-radius-0: 0;--gw-radius-4: 4px;--gw-radius-6: 6px;--gw-radius-8: 8px;--gw-radius-12: 12px;--gw-radius-16: 16px;--gw-radius-20: 20px;--gw-radius-24: 24px;--gw-radius-999: 999px;--gw-radius-action: 8px;--gw-radius-chip: 999px;--gw-radius-card: 12px;--gw-radius-panel: 16px;--gw-radius-popover: 20px;--gw-shadow: 0 1px 2px rgba(31,30,29,.04),0 2px 6px rgba(31,30,29,.06);--gw-shadow-sm: 0 1px 2px rgba(31,30,29,.04);--gw-shadow-raised: 0 4px 16px rgba(31,30,29,.10);--gw-wrap: 1120px;--gw-wrap-narrow: 780px;--gw-gutter: 22px;--gw-header-height: 64px;--gw-header-gap: 16px;--gw-header-surface: 85%;--gw-header-blur: 10px;--gw-button-height: 40px;--gw-tap-min: 44px;--gw-ease: cubic-bezier(.22,1,.36,1);--gw-reveal-ms: 700ms;--gw-spin-ms: 700ms;--gw-wash-pink: #ff6f5e;--gw-wash-violet: #7c8af7;--gw-wash-sky: #43b0ff;--gw-wash-mint: #1fcf9f;--gw-accent-light: #5661f5;--gw-accent-strong-light: #3a44de;--gw-accent-soft-light: #eef0fe;--gw-on-accent-light: #ffffff;--gw-accent-dark: #7c84ff;--gw-accent-strong-dark: #a3a9ff;--gw-accent-soft-dark: #1f2140;--gw-on-accent-dark: #0d0d12;--gw-bg: #ffffff;--gw-bg-soft: #f2f3f5;--gw-surface: #ffffff;--gw-ink: #1b1c1e;--gw-ink-2: #3b3d42;--gw-muted: #686b71;--gw-line: #e5e7ea;--gw-line-strong: #d5d8dd;--gw-action: #1b1c1e;--gw-action-hover: #000000;--gw-on-action: #ffffff;--gw-accent: var(--gw-accent-light);--gw-accent-strong: var(--gw-accent-strong-light);--gw-accent-soft: var(--gw-accent-soft-light);--gw-on-accent: var(--gw-on-accent-light);--gw-success: #007f5f;--gw-success-soft: #e3f1df;--gw-warning: #9a6700;--gw-night: #0c0e14;--gw-night-2: #141722;--gw-on-night: #e3e4e8;--gw-on-night-muted: #9aa3ff}@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){color-scheme: dark;--gw-bg: #0d0d12;--gw-bg-soft: #121318;--gw-surface: #16171d;--gw-ink: #e3e4e8;--gw-ink-2: #c4c6cc;--gw-muted: #9a9ca6;--gw-line: #2a2b33;--gw-line-strong: #383944;--gw-action: #f2f3f5;--gw-action-hover: #ffffff;--gw-on-action: #0d0d12;--gw-accent: var(--gw-accent-dark);--gw-accent-strong: var(--gw-accent-strong-dark);--gw-accent-soft: var(--gw-accent-soft-dark);--gw-on-accent: var(--gw-on-accent-dark);--gw-success: #34c38f;--gw-success-soft: #132a22;--gw-warning: #e0b341;--gw-night: #0a0b10;--gw-night-2: #12141c;--gw-on-night: #e3e4e8;--gw-on-night-muted: #9aa3ff}}:root[data-theme="dark"]{color-scheme: dark;--gw-bg: #0d0d12;--gw-bg-soft: #121318;--gw-surface: #16171d;--gw-ink: #e3e4e8;--gw-ink-2: #c4c6cc;--gw-muted: #9a9ca6;--gw-line: #2a2b33;--gw-line-strong: #383944;--gw-action: #f2f3f5;--gw-action-hover: #ffffff;--gw-on-action: #0d0d12;--gw-accent: var(--gw-accent-dark);--gw-accent-strong: var(--gw-accent-strong-dark);--gw-accent-soft: var(--gw-accent-soft-dark);--gw-on-accent: var(--gw-on-accent-dark);--gw-success: #34c38f;--gw-success-soft: #132a22;--gw-warning: #e0b341;--gw-night: #0a0b10;--gw-night-2: #12141c;--gw-on-night: #e3e4e8;--gw-on-night-muted: #9aa3ff}:root[data-theme="light"]{color-scheme: light;--gw-bg: #ffffff;--gw-bg-soft: #f2f3f5;--gw-surface: #ffffff;--gw-ink: #1b1c1e;--gw-ink-2: #3b3d42;--gw-muted: #686b71;--gw-line: #e5e7ea;--gw-line-strong: #d5d8dd;--gw-action: #1b1c1e;--gw-action-hover: #000000;--gw-on-action: #ffffff;--gw-accent: var(--gw-accent-light);--gw-accent-strong: var(--gw-accent-strong-light);--gw-accent-soft: var(--gw-accent-soft-light);--gw-on-accent: var(--gw-on-accent-light);--gw-success: #007f5f;--gw-success-soft: #e3f1df;--gw-warning: #9a6700;--gw-night: #0c0e14;--gw-night-2: #141722;--gw-on-night: #e3e4e8;--gw-on-night-muted: #9aa3ff}.gw-band--night,.gw-showcase{color-scheme: dark;--gw-bg: var(--gw-night);--gw-bg-soft: var(--gw-night-2);--gw-surface: var(--gw-night-2);--gw-ink: #e3e4e8;--gw-ink-2: #c4c6cc;--gw-muted: #9a9ca6;--gw-line: #2a2b33;--gw-line-strong: #383944;--gw-action: #f2f3f5;--gw-action-hover: #ffffff;--gw-on-action: #0d0d12;--gw-accent: var(--gw-accent-dark);--gw-accent-strong: var(--gw-accent-strong-dark);--gw-accent-soft: var(--gw-accent-soft-dark);--gw-on-accent: var(--gw-on-accent-dark);--gw-success: #34c38f;--gw-success-soft: #132a22;--gw-warning: #e0b341}:root[data-gw-action="accent"],:root[data-gw-action="accent"] :is(.gw-band--night,.gw-showcase){--gw-action: var(--gw-accent);--gw-action-hover: var(--gw-accent-strong);--gw-on-action: var(--gw-on-accent)}:root[data-gw-radius="soft"]{--gw-radius-action: 12px;--gw-radius-card: 20px;--gw-radius-panel: 24px;--gw-radius-popover: 24px}*,*::before,*::after{box-sizing: border-box}[hidden]{display: none !important}html{-webkit-text-size-adjust: 100%;text-size-adjust: 100%}body{margin: 0;background: var(--gw-bg);color: var(--gw-ink);font-family: var(--gw-font);font-size: var(--gw-body-size);line-height: var(--gw-body-leading);-webkit-font-smoothing: antialiased;text-rendering: optimizeLegibility}:where(h1,h2,h3,h4,h5,h6,p,ul,ol,dl,dd,figure,blockquote){margin: 0}img,svg,video{display: block;max-width: 100%}img,video{height: auto}button,input,select,textarea{font: inherit;color: inherit}button{cursor: pointer}a{color: inherit;text-decoration: none}b,strong{font-weight: 600}.gw-page{display: flex;flex-direction: column;min-height: 100vh;min-height: 100dvh}.gw-page > main{flex: 1 0 auto}h1,h2,h3,h4,h5,h6,.gw-h1,.gw-h2,.gw-h3,.gw-h4{font-weight: var(--gw-heading-weight);letter-spacing: var(--gw-heading-tracking);line-height: var(--gw-heading-leading);text-wrap: balance}h1,.gw-h1,h2,.gw-h2{font-weight: var(--gw-display-weight);letter-spacing: var(--gw-display-tracking)}h1,.gw-h1{font-size: var(--gw-display-h1)}h2,.gw-h2{font-size: var(--gw-display-h2)}h3,.gw-h3{font-size: 24px}h4,.gw-h4{font-size: 20px;font-weight: 600;letter-spacing: -0.01em}h5,h6{font-size: 16px;font-weight: 600;letter-spacing: 0}.gw-lead{font-size: 18px;line-height: 1.55;color: var(--gw-muted);max-width: 60ch}.gw-note{font-size: 14px;color: var(--gw-muted)}.gw-dim{color: var(--gw-muted)}.gw-label{display: inline-flex;align-items: center;gap: 8px;font-size: 13px;font-weight: 500;line-height: 1.4;color: var(--gw-muted)}.gw-label::before{content: "";flex: none;width: 8px;height: 8px;border-radius: var(--gw-radius-0);background: var(--gw-accent)}:where(p,dd,td,figcaption,.gw-list--check li,.gw-prose) a:not([class]),.gw-link{color: var(--gw-accent-strong);font-weight: 500;text-decoration: underline;text-decoration-thickness: 1px;text-underline-offset: 4px;text-decoration-color: color-mix(in srgb,currentColor 40%,transparent)}:where(p,dd,td,figcaption,.gw-list--check li,.gw-prose) a:not([class]):hover,.gw-link:hover{text-decoration-color: currentColor}:focus-visible{outline: 2px solid var(--gw-accent);outline-offset: 2px}[id]{scroll-margin-top: calc(var(--gw-header-height) + 16px)}.gw-skip{position: absolute;left: -9999px;top: 8px;z-index: 100;padding: 12px 16px;border-radius: var(--gw-radius-action);background: var(--gw-action);color: var(--gw-on-action);font-size: 14px;font-weight: 600}.gw-skip:focus{left: 16px}.gw-reveal{opacity: 0;transform: translateY(24px);transition: opacity var(--gw-reveal-ms) var(--gw-ease),transform var(--gw-reveal-ms) var(--gw-ease);animation: gw-reveal-failsafe 1ms linear 2.5s forwards}.gw-reveal.is-in{opacity: 1;transform: none}@keyframes gw-reveal-failsafe{to{opacity: 1;transform: none}}@media (prefers-reduced-motion: reduce){*,*::before,*::after{scroll-behavior: auto !important}.gw-reveal{opacity: 1;transform: none;transition: none;animation: none}}.gw-wrap,.gw-wrap--narrow{width: min(100% - 2 * var(--gw-gutter),var(--gw-wrap));margin-inline: auto}.gw-wrap--narrow{max-width: var(--gw-wrap-narrow)}.gw-section{padding-block: var(--gw-space-section)}.gw-section--soft{background: var(--gw-bg-soft)}.gw-section--tight{padding-block: 40px}@media (min-width: 768px){.gw-section--tight{padding-block: 64px}}.gw-section__head{max-width: 660px}.gw-section__head--center{margin-inline: auto;text-align: center}.gw-section__head--center .gw-lead{margin-inline: auto}.gw-section__head:not(:last-child){margin-bottom: 40px}@media (min-width: 768px){.gw-section__head:not(:last-child){margin-bottom: 48px}}:where(.gw-section__head,.gw-hero > .gw-wrap,.gw-split > :not(.gw-window),.gw-cta,.gw-card,.gw-feature,.gw-plan) > * + *{margin-top: 16px}:where(.gw-section__head,.gw-hero > .gw-wrap,.gw-split > :not(.gw-window),.gw-cta,.gw-card,.gw-plan) > :is(.gw-actions,.gw-segmented){margin-top: 32px}:where(.gw-section__head,.gw-hero > .gw-wrap,.gw-split > :not(.gw-window),.gw-cta,.gw-card,.gw-plan) > .gw-list--check{margin-top: 24px}.gw-actions{display: flex;flex-wrap: wrap;align-items: center;gap: 12px}.gw-grid,.gw-grid--2,.gw-grid--3,.gw-grid--4{display: grid;grid-template-columns: minmax(0,1fr);gap: 16px}@media (min-width: 480px){.gw-grid--4{grid-template-columns: repeat(2,minmax(0,1fr))}}@media (min-width: 768px){.gw-grid,.gw-grid--2,.gw-grid--3,.gw-grid--4{gap: 24px}.gw-grid--2{grid-template-columns: repeat(2,minmax(0,1fr))}.gw-grid--3{grid-template-columns: repeat(3,minmax(0,1fr))}}@media (min-width: 1080px){.gw-grid--4{grid-template-columns: repeat(4,minmax(0,1fr))}}.gw-band--night,.gw-showcase{position: relative;isolation: isolate;color: var(--gw-ink);background: radial-gradient(800px 360px at 50% 0%,color-mix(in srgb,var(--gw-accent) 22%,transparent),transparent 72%),var(--gw-night)}.gw-btn{position: relative;display: inline-flex;align-items: center;justify-content: center;gap: 8px;max-width: 100%;height: var(--gw-button-height);padding: 0 20px;border: 1px solid transparent;border-radius: var(--gw-radius-action);background: var(--gw-action);color: var(--gw-on-action);font-size: 14px;font-weight: 600;line-height: 1.4;letter-spacing: 0;text-align: center;white-space: nowrap;cursor: pointer}.gw-btn:hover{background: var(--gw-action-hover)}.gw-btn svg{flex: none;width: 16px;height: 16px}.gw-btn--secondary{background: transparent;border-color: var(--gw-line-strong);color: var(--gw-ink)}.gw-btn--secondary:hover{background: transparent;border-color: var(--gw-ink)}.gw-btn--ghost{background: transparent;color: var(--gw-ink)}.gw-btn--ghost:hover{background: var(--gw-bg-soft)}.gw-btn--on-night{background: var(--gw-on-night);color: var(--gw-night)}.gw-btn--on-night:hover{background: var(--gw-on-night);opacity: 0.88}.gw-btn--sm{height: 36px;padding: 0 16px}.gw-btn--sm::after{content: "";position: absolute;top: -6px;right: 0;bottom: -6px;left: 0}.gw-btn--lg{height: 48px;padding: 0 24px;font-size: 16px}.gw-btn--block{display: flex;width: 100%}.gw-btn:disabled,.gw-btn[aria-disabled="true"]{opacity: 0.48;cursor: not-allowed;pointer-events: none}.gw-btn:active{background: var(--gw-action-hover)}.gw-btn--secondary:active{background: var(--gw-bg-soft);border-color: var(--gw-ink)}.gw-btn--ghost:active{background: var(--gw-line)}.gw-btn--on-night:active{background: var(--gw-on-night);opacity: 0.76}.gw-btn[aria-busy="true"]{cursor: progress;-webkit-text-fill-color: transparent}.gw-btn[aria-busy="true"] svg{opacity: 0}.gw-btn[aria-busy="true"]::before{content: "";position: absolute;top: 50%;left: 50%;width: 16px;height: 16px;margin: -8px 0 0 -8px;border: 2px solid color-mix(in srgb,currentColor 18%,transparent);border-top-color: currentColor;border-radius: var(--gw-radius-chip);animation: gw-spin var(--gw-spin-ms) linear infinite}@keyframes gw-spin{to{transform: rotate(360deg)}}@media (prefers-reduced-motion: reduce){.gw-btn[aria-busy="true"]::before{border: 0;border-radius: var(--gw-radius-0);background: radial-gradient(circle at 3px 50%,currentColor 1.5px,transparent 2px),radial-gradient(circle at 8px 50%,currentColor 1.5px,transparent 2px),radial-gradient(circle at 13px 50%,currentColor 1.5px,transparent 2px);animation: none}}.gw-link--arrow{display: inline-flex;align-items: center;gap: 6px;min-height: 24px;font-weight: 600;text-decoration: none}.gw-link--arrow::after{content: "\2192";transition: transform 0.18s var(--gw-ease)}.gw-link--arrow:hover::after{transform: translateX(2px)}.gw-chip{display: inline-flex;align-items: center;gap: 6px;min-height: 32px;padding: 4px 12px;border: 1px solid var(--gw-line-strong);border-radius: var(--gw-radius-chip);background: var(--gw-surface);color: var(--gw-ink-2);font-size: 13px;font-weight: 500;line-height: 1.4;white-space: nowrap}:is(a,button,label).gw-chip{cursor: pointer}:is(a,button,label).gw-chip:hover{border-color: var(--gw-ink);color: var(--gw-ink)}.gw-chip.is-active,.gw-chip[aria-pressed="true"],.gw-chip[aria-selected="true"]{border-color: var(--gw-accent);background: var(--gw-accent-soft);color: var(--gw-accent-strong)}.gw-segmented{display: inline-flex;max-width: 100%;border: 1px solid var(--gw-line-strong);border-radius: var(--gw-radius-action);background: var(--gw-surface);overflow: hidden;overflow: clip;vertical-align: middle}.gw-segmented--block{display: flex;width: 100%}.gw-segmented > button{display: inline-flex;flex: 0 1 auto;align-items: center;justify-content: center;min-width: 0;height: calc(var(--gw-button-height) - 2px);padding: 0 16px;border: 0;background: transparent;color: var(--gw-muted);font-size: 14px;font-weight: 500;line-height: 1.4;white-space: nowrap;cursor: pointer}.gw-segmented--block > button{flex: 1 1 0}.gw-segmented > button + button{border-left: 1px solid var(--gw-line-strong)}.gw-segmented > button:hover{background: var(--gw-bg-soft);color: var(--gw-ink)}.gw-segmented > button:active{background: var(--gw-line)}.gw-segmented > button:focus-visible{outline-offset: -2px}.gw-segmented > button[aria-checked="true"]{background: var(--gw-accent-soft);color: var(--gw-accent-strong)}.gw-badge{display: inline-flex;align-items: center;gap: 6px;min-height: 24px;padding: 2px 8px;border-radius: var(--gw-radius-chip);background: color-mix(in srgb,var(--gw-ink) 8%,transparent);color: var(--gw-ink-2);font-size: 12px;font-weight: 500;line-height: 1.4;white-space: nowrap;vertical-align: middle}.gw-badge--accent{background: var(--gw-accent-soft);color: var(--gw-accent-strong)}.gw-badge--success{background: var(--gw-success-soft);color: var(--gw-ink)}.gw-badge--success::before,.gw-badge--warning::before{content: "";flex: none;width: 6px;height: 6px;border-radius: var(--gw-radius-chip);background: var(--gw-success)}.gw-badge--warning::before{background: var(--gw-warning)}.gw-card{padding: 24px;border: 1px solid var(--gw-line);border-radius: var(--gw-radius-card);background: var(--gw-surface);box-shadow: var(--gw-shadow)}@media (min-width: 768px){.gw-card{padding: 32px}}.gw-card--soft{background: var(--gw-bg-soft);box-shadow: none}.gw-card--link{display: block;color: inherit}.gw-card--link:hover{border-color: var(--gw-line-strong)}:where(.gw-card,.gw-feature,.gw-plan) > :is(h3,h4) + p{margin-top: 8px}:where(.gw-card,.gw-feature) h3{font-size: 20px}:where(.gw-card,.gw-feature) p{font-size: 16px;color: var(--gw-muted)}.gw-window{overflow: hidden;border: 1px solid var(--gw-line);border-radius: var(--gw-radius-card);background: var(--gw-surface);color: var(--gw-ink);box-shadow: var(--gw-shadow);font-size: 13px;line-height: 1.5}.gw-window__bar{display: flex;align-items: center;gap: 12px;min-height: 40px;padding: 8px 16px;border-bottom: 1px solid var(--gw-line);color: var(--gw-muted);font-size: 12px}.gw-window__bar::before{content: "";flex: none;width: 36px;height: 8px;background: radial-gradient(circle at 4px 4px,var(--gw-line-strong) 4px,transparent 4px),radial-gradient(circle at 18px 4px,var(--gw-line-strong) 4px,transparent 4px),radial-gradient(circle at 32px 4px,var(--gw-line-strong) 4px,transparent 4px)}.gw-window__body{padding: 16px}.gw-window__body:has(> img:only-child){padding: 0}.gw-window__body > img{width: 100%}.gw-window__caption{margin: 0;padding: 0 16px 12px;color: var(--gw-muted);font-size: 12px;line-height: 1.5;text-align: end}.gw-window__body:has(> img:only-child) + .gw-window__caption{padding-top: 12px}.gw-icon{display: inline-flex;align-items: center;justify-content: center;flex: none;width: 20px;height: 20px}.gw-icon svg{width: 20px;height: 20px}.gw-list--check{display: grid;gap: 12px;padding: 0;list-style: none}.gw-list--check > li{position: relative;padding-left: 24px}.gw-list--check > li::before{content: "";position: absolute;left: 0;top: 6px;top: calc((1lh - 16px) / 2);width: 16px;height: 16px;background: var(--gw-accent);-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.4l2.9 2.8L12.5 5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat;mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.4l2.9 2.8L12.5 5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat}.gw-table{overflow-x: auto;border: 1px solid var(--gw-line);border-radius: var(--gw-radius-card);background: var(--gw-surface);-webkit-overflow-scrolling: touch}.gw-table table{width: 100%;border-collapse: collapse;font-size: 14px;line-height: 1.5}.gw-table caption{padding: 16px;text-align: left;font-size: 13px;color: var(--gw-muted)}.gw-table th,.gw-table td{padding: 12px 16px;border-bottom: 1px solid var(--gw-line);text-align: left;vertical-align: top}.gw-table thead th{background: var(--gw-bg-soft);color: var(--gw-ink);font-size: 13px;font-weight: 600;white-space: nowrap}.gw-table tbody th{font-weight: 500}.gw-table tbody tr:last-child > *{border-bottom: 0}.gw-table td{color: var(--gw-ink-2);font-variant-numeric: tabular-nums}.gw-table--compare table{min-width: 640px}.gw-table--compare td{text-align: center}.gw-table--compare thead th:not(:first-child){text-align: center}.gw-table--compare tbody th{position: sticky;left: 0;z-index: 1;background: var(--gw-surface);min-width: 160px}.gw-faq{display: grid;gap: 12px}.gw-faq__item{padding: 0 24px;border: 1px solid var(--gw-line);border-radius: var(--gw-radius-card);background: var(--gw-surface)}.gw-faq__item[open]{border-color: var(--gw-line-strong)}.gw-faq__item > summary{display: flex;align-items: center;justify-content: space-between;gap: 16px;min-height: 44px;padding: 20px 0;font-size: 18px;font-weight: 600;line-height: 1.4;list-style: none;cursor: pointer}.gw-faq__item > summary::-webkit-details-marker{display: none}.gw-faq__item > summary::after{content: "";flex: none;width: 16px;height: 16px;background: linear-gradient(var(--gw-accent),var(--gw-accent)) center / 16px 2px no-repeat,linear-gradient(var(--gw-accent),var(--gw-accent)) center / 2px 16px no-repeat;transition: transform 0.2s var(--gw-ease)}.gw-faq__item[open] > summary::after{transform: rotate(45deg)}.gw-faq__item > :not(summary){margin: 0 0 20px;max-width: 68ch;color: var(--gw-muted);font-size: 16px}@media (max-width: 768px),(pointer: coarse){.gw-btn,.gw-btn--sm,.gw-btn--lg{height: auto;min-height: var(--gw-tap-min);padding-block: 8px;white-space: normal;text-wrap: balance}.gw-btn--lg{min-height: 48px}:is(a,button,label).gw-chip{min-height: var(--gw-tap-min)}.gw-segmented > button{height: auto;min-height: var(--gw-tap-min);padding-block: 8px;white-space: normal;text-wrap: balance}}.gw-announce{padding: 8px var(--gw-gutter);border-bottom: 1px solid var(--gw-line);background: var(--gw-bg-soft);color: var(--gw-ink-2);font-size: 13px;line-height: 1.5;text-align: center}.gw-announce a{color: var(--gw-ink);font-weight: 600;text-decoration: underline;text-underline-offset: 4px}.gw-header{position: sticky;top: 0;z-index: 50;border-bottom: 1px solid var(--gw-line);background: var(--gw-surface)}.gw-header.is-scrolled{border-bottom-color: var(--gw-line-strong)}.gw-header__bar{display: flex;align-items: center;gap: 16px;height: var(--gw-header-height)}.gw-brand{display: inline-flex;align-items: center;gap: 8px;flex: none;min-height: 44px;color: var(--gw-ink);font-size: 18px;font-weight: 700;letter-spacing: -0.01em;white-space: nowrap}.gw-brand__mark{flex: none;width: 26px;height: 26px}.gw-brand__name{line-height: 1.2}.gw-nav{display: none}.gw-nav__list{display: flex;align-items: center;gap: 4px;margin: 0;padding: 0;list-style: none}.gw-nav__trigger,.gw-nav__link{display: inline-flex;align-items: center;gap: 6px;height: 40px;padding: 0 12px;border: 0;border-radius: var(--gw-radius-action);background: transparent;color: var(--gw-ink-2);font-size: 14px;font-weight: 500;line-height: 1.4;white-space: nowrap;cursor: pointer}.gw-nav__trigger:hover,.gw-nav__link:hover,.gw-nav__item.is-open > .gw-nav__trigger{background: var(--gw-bg-soft);color: var(--gw-ink)}.gw-nav__trigger::after,.gw-mobile-menu__group > summary::after{content: "";flex: none;width: 12px;height: 12px;background: currentColor;opacity: 0.6;-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat;mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat;transition: transform 0.18s var(--gw-ease)}.gw-nav__trigger[aria-expanded="true"]::after,.gw-mobile-menu__group[open] > summary::after{transform: rotate(180deg)}.gw-nav__link[aria-current="page"]{color: var(--gw-ink);font-weight: 600;text-decoration: underline;text-decoration-color: var(--gw-accent);text-decoration-thickness: 2px;text-underline-offset: 8px}.gw-mega{position: absolute;top: calc(100% + 8px);left: 50%;width: min(960px,calc(100vw - 40px));max-height: calc(100vh - var(--gw-header-height) - 24px);overflow-y: auto;transform: translateX(-50%);border: 1px solid var(--gw-line);border-radius: var(--gw-radius-popover);background: var(--gw-surface);box-shadow: var(--gw-shadow-raised)}.gw-mega::before{content: "";position: absolute;top: -12px;left: 0;right: 0;height: 12px}.gw-mega:not([hidden]){animation: gw-mega-in 0.16s var(--gw-ease)}@keyframes gw-mega-in{from{opacity: 0;transform: translateX(-50%) translateY(8px)}}@media (prefers-reduced-motion: reduce){.gw-mega:not([hidden]){animation: none}}.gw-mega > .gw-wrap{width: auto;margin: 0}.gw-mega__grid{display: grid;grid-auto-flow: column;grid-auto-columns: minmax(0,1fr);gap: 32px;padding: 32px}.gw-mega__col{display: flex;flex-direction: column;gap: 2px}.gw-mega__heading{padding: 0 8px 8px;color: var(--gw-muted);font-size: 12px;font-weight: 500}.gw-mega__link{display: grid;grid-template-columns: 32px minmax(0,1fr);align-items: start;gap: 12px;padding: 8px;border-radius: var(--gw-radius-action);color: var(--gw-ink)}.gw-mega__link:hover{background: var(--gw-bg-soft)}.gw-mega__link b{display: block;font-size: 14px;font-weight: 500;line-height: 20px}.gw-mega__link i{display: block;margin-top: 2px;color: var(--gw-muted);font-size: 13px;font-style: normal;line-height: 18px}.gw-mega__link[aria-current="page"] b{color: var(--gw-accent-strong);font-weight: 600}.gw-mega__icon{display: grid;place-items: center;width: 32px;height: 32px;border: 1px solid var(--gw-line);border-radius: var(--gw-radius-action);background: var(--gw-surface);color: var(--gw-muted)}.gw-mega__icon svg{width: 16px;height: 16px}.gw-mega__link:hover .gw-mega__icon{border-color: var(--gw-accent-soft);background: var(--gw-accent-soft);color: var(--gw-accent-strong)}.gw-mega__feature{display: flex;flex-direction: column;justify-content: flex-end;gap: 4px;min-height: 216px;padding: 24px;border-radius: var(--gw-radius-panel);background: radial-gradient(360px 260px at 12% 112%,color-mix(in srgb,var(--gw-accent) 78%,transparent),transparent 62%),radial-gradient(300px 220px at 92% -14%,color-mix(in srgb,var(--gw-wash-violet) 44%,transparent),transparent 70%),var(--gw-night);color: var(--gw-on-night)}.gw-mega__feature b{font-size: 18px;font-weight: 650;line-height: 1.25}.gw-mega__feature i{color: var(--gw-on-night);font-size: 13px;font-style: normal;line-height: 1.5;opacity: 0.9}.gw-mega__feature .gw-link--arrow{margin-top: 16px;color: var(--gw-on-night);font-size: 13px;font-weight: 600}.gw-header__actions{display: flex;align-items: center;gap: 8px;margin-left: auto}.gw-header__signin{display: none}.gw-header__actions > .gw-btn{display: none}.gw-theme-toggle,.gw-menu-toggle{display: inline-flex;align-items: center;justify-content: center;flex: none;width: 40px;height: 40px;padding: 0;border: 0;border-radius: var(--gw-radius-action);background: transparent;color: var(--gw-ink)}.gw-theme-toggle:hover,.gw-menu-toggle:hover{background: var(--gw-bg-soft)}.gw-theme-toggle svg,.gw-menu-toggle svg{width: 20px;height: 20px}.gw-menu-toggle[aria-expanded="true"] .gw-menu-toggle__open,.gw-menu-toggle:not([aria-expanded="true"]) .gw-menu-toggle__close{display: none}.gw-mobile-menu{position: fixed;top: calc(var(--gw-header-height) + 1px);left: 0;right: 0;bottom: 0;overflow-y: auto;overscroll-behavior: contain;padding-block: 8px 32px;background: var(--gw-bg)}html.is-menu-open{overflow: hidden}html.is-menu-open .gw-header{position: fixed;top: 0;left: 0;right: 0}.gw-mobile-menu__group > summary,.gw-mobile-menu__top{display: flex;align-items: center;justify-content: space-between;min-height: 48px;padding-block: 8px;border-bottom: 1px solid var(--gw-line);color: var(--gw-ink);font-size: 18px;font-weight: 500;list-style: none;cursor: pointer}.gw-mobile-menu__group > summary::-webkit-details-marker{display: none}.gw-mobile-menu__list{margin: 0;padding: 8px 0 16px;list-style: none}.gw-mobile-menu__link{display: flex;align-items: center;min-height: 44px;color: var(--gw-ink-2);font-size: 16px}.gw-mobile-menu__link[aria-current="page"],.gw-mobile-menu__top[aria-current="page"]{color: var(--gw-accent-strong);font-weight: 600}.gw-mobile-menu__actions{display: grid;gap: 8px;margin-top: 24px}@media (min-width: 480px){.gw-header__actions > .gw-btn:not(.gw-btn--secondary){display: inline-flex}}@media (min-width: 768px){.gw-header__actions > .gw-btn--secondary{display: inline-flex}}@media (min-width: 1080px){.gw-header__bar{gap: 32px}.gw-nav{display: block}.gw-header__signin{display: inline-flex}.gw-menu-toggle,.gw-mobile-menu{display: none !important}html.is-menu-open{overflow: visible}html.is-menu-open .gw-header{position: sticky}}@media (max-width: 768px),(pointer: coarse){.gw-theme-toggle,.gw-menu-toggle{width: var(--gw-tap-min);height: var(--gw-tap-min)}}@media (min-width: 1080px){.gw-header--float{top: var(--gw-header-gap);width: min(100% - 32px,var(--gw-wrap) + 50px);margin: var(--gw-header-gap) auto 0;border: 1px solid var(--gw-line);border-radius: var(--gw-radius-panel);background: color-mix(in srgb,var(--gw-surface) var(--gw-header-surface),transparent);-webkit-backdrop-filter: blur(var(--gw-header-blur));backdrop-filter: blur(var(--gw-header-blur));box-shadow: var(--gw-shadow-raised)}.gw-header--float.is-scrolled{border-color: var(--gw-line-strong)}.gw-header--float > .gw-header__bar{width: auto;padding-inline: 24px}.gw-header--float .gw-mega{max-height: calc(100vh - var(--gw-header-height) - var(--gw-header-gap) - 24px)}:root:has(.gw-header--float) [id]{scroll-margin-top: calc(var(--gw-header-height) + var(--gw-header-gap) + 18px)}}@media (min-width: 1080px) and (prefers-reduced-transparency: reduce){.gw-header--float{background: var(--gw-surface);-webkit-backdrop-filter: none;backdrop-filter: none}}@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){.gw-header--float{background: var(--gw-surface)}}.gw-footer{padding-block: 64px 40px;border-top: 1px solid var(--gw-line);background: var(--gw-bg);color: var(--gw-ink);font-size: 14px}.gw-footer__grid{display: grid;grid-template-columns: repeat(2,minmax(0,1fr));gap: 32px 24px}.gw-footer__brand{grid-column: 1 / -1;max-width: 320px}.gw-footer__brand p{margin-top: 16px;color: var(--gw-muted)}.gw-footer__heading{margin: 0 0 8px;color: var(--gw-ink);font-size: 13px;font-weight: 600;letter-spacing: 0}.gw-footer__col ul{margin: 0;padding: 0;list-style: none}.gw-footer__col a{display: block;padding-block: 6px;color: var(--gw-muted)}.gw-footer__col a:hover{color: var(--gw-ink)}.gw-footer__col a[aria-current="page"]{color: var(--gw-accent-strong)}.gw-footer__bottom{display: flex;flex-wrap: wrap;align-items: center;justify-content: space-between;gap: 8px 24px;margin-top: 48px;padding-top: 24px;border-top: 1px solid var(--gw-line);color: var(--gw-muted);font-size: 13px}.gw-footer__bottom:first-child{margin-top: 0;padding-top: 0;border-top: 0}.gw-footer__bottom ul{display: flex;flex-wrap: wrap;gap: 0 16px;margin: 0;padding: 0;list-style: none}.gw-footer__bottom a{display: inline-flex;align-items: center;justify-content: center;min-width: 24px;min-height: 24px;color: var(--gw-muted)}.gw-footer__bottom a:hover{color: var(--gw-ink)}@media (min-width: 768px){.gw-footer__grid{grid-template-columns: repeat(3,minmax(0,1fr))}}@media (min-width: 1080px){.gw-footer__grid{grid-auto-flow: column;grid-template-columns: minmax(0,1.6fr);grid-auto-columns: minmax(0,1fr)}.gw-footer__brand{grid-column: auto}}@media (max-width: 768px),(pointer: coarse){.gw-footer__bottom a{min-height: var(--gw-tap-min)}}.gw-hero{position: relative;isolation: isolate;padding-block: 48px 64px}.gw-hero__wash{position: absolute;inset: 0;z-index: -1;pointer-events: none;background: radial-gradient(640px 460px at 88% -10%,color-mix(in srgb,var(--gw-accent) 16%,transparent),transparent 62%),radial-gradient(560px 480px at 6% 108%,color-mix(in srgb,var(--gw-wash-violet) 12%,transparent),transparent 62%),radial-gradient(420px 320px at 52% 118%,color-mix(in srgb,var(--gw-wash-mint) 10%,transparent),transparent 62%)}.gw-hero h1 .gw-dim{display: block}.gw-hero > .gw-wrap > .gw-window{margin-top: 48px}.gw-hero--center{text-align: center}.gw-hero--center > .gw-wrap > *{margin-inline: auto}.gw-hero--center .gw-actions{justify-content: center}.gw-hero--compact{padding-block: 40px 48px}.gw-hero--compact h1{font-size: var(--gw-display-h2)}@media (min-width: 768px){.gw-hero{padding-block: 80px 96px}.gw-hero--compact{padding-block: 64px}.gw-hero .gw-lead{font-size: 20px}.gw-hero > .gw-wrap > .gw-window{margin-top: 64px}}@media (max-width: 479px){:is(.gw-hero,.gw-cta) .gw-actions > .gw-btn{flex: 1 1 100%}}.gw-logos{padding-block: 40px;border-block: 1px solid var(--gw-line)}.gw-logos p{color: var(--gw-muted);font-size: 13px;text-align: center}.gw-logos ul{display: flex;flex-wrap: wrap;align-items: center;justify-content: center;gap: 16px 40px;margin-top: 20px;padding: 0;list-style: none}.gw-logos li{color: var(--gw-muted);font-size: 22px;font-weight: 600;letter-spacing: -0.02em;line-height: 1.2}.gw-logos img{width: auto;height: 28px}.gw-stats{display: grid;grid-template-columns: minmax(0,1fr);gap: 24px;margin: 0;padding: 0;list-style: none}.gw-stats__value{font-size: var(--gw-display-h2);font-weight: 600;letter-spacing: -0.03em;line-height: 1.1;font-variant-numeric: tabular-nums}.gw-stats__label{margin-top: 8px;max-width: 28ch;color: var(--gw-muted);font-size: 14px}.gw-stats__source{margin-top: 8px;color: var(--gw-muted);font-size: 12px}@media (min-width: 480px){.gw-stats{grid-template-columns: repeat(2,minmax(0,1fr))}}@media (min-width: 1080px){.gw-stats{grid-template-columns: none;grid-auto-flow: column;grid-auto-columns: minmax(0,1fr);gap: 0}.gw-stats__item{padding: 4px 24px;border-left: 1px solid var(--gw-line)}.gw-stats__item:first-child{padding-left: 0;border-left: 0}}.gw-features{row-gap: 40px}.gw-feature .gw-icon{width: 40px;height: 40px;border: 1px solid var(--gw-line);border-radius: var(--gw-radius-action);background: var(--gw-surface);color: var(--gw-accent)}.gw-split{display: grid;grid-template-columns: minmax(0,1fr);align-items: center;gap: 40px}@media (min-width: 768px){.gw-split{grid-template-columns: repeat(2,minmax(0,1fr))}.gw-split--reverse > :first-child{order: 2}}.gw-split h2{font-size: 30px}@media (min-width: 1080px){.gw-split{gap: 64px}}.gw-showcase .gw-window{max-width: 960px;margin-inline: auto}.gw-showcase .gw-window + *{margin-top: 48px}.gw-steps{display: grid;grid-template-columns: minmax(0,1fr);gap: 32px 24px;margin: 0;padding: 0;list-style: none;counter-reset: gw-step}.gw-steps > li{counter-increment: gw-step}.gw-steps > li::before{content: counter(gw-step,decimal-leading-zero);display: block;margin-bottom: 16px;padding-bottom: 12px;border-bottom: 1px solid var(--gw-line);color: var(--gw-accent-strong);font-size: 13px;font-weight: 600;font-variant-numeric: tabular-nums}.gw-steps h3{font-size: 20px}.gw-steps p{margin-top: 8px;color: var(--gw-muted);font-size: 16px}@media (min-width: 768px){.gw-steps{grid-template-columns: repeat(2,minmax(0,1fr))}}@media (min-width: 1080px){.gw-steps{grid-template-columns: none;grid-auto-flow: column;grid-auto-columns: minmax(0,1fr)}}.gw-quote{max-width: 880px;margin-inline: auto;padding: 40px 24px;border: 1px solid var(--gw-line);border-radius: var(--gw-radius-panel);background: var(--gw-surface);text-align: center}.gw-quote::before{content: "";display: block;width: 32px;height: 24px;margin: 0 auto 24px;background: var(--gw-accent);-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 24'%3E%3Cpath d='M0 24V14C0 6 4 1 12 0l1 4c-4 1-6 4-6 8h5v12zm19 0V14c0-8 4-13 12-14l1 4c-4 1-6 4-6 8h5v12z'/%3E%3C/svg%3E") center / contain no-repeat;mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 24'%3E%3Cpath d='M0 24V14C0 6 4 1 12 0l1 4c-4 1-6 4-6 8h5v12zm19 0V14c0-8 4-13 12-14l1 4c-4 1-6 4-6 8h5v12z'/%3E%3C/svg%3E") center / contain no-repeat}.gw-quote blockquote{font-size: 24px;font-weight: 500;line-height: 1.4;letter-spacing: -0.01em;text-wrap: balance}.gw-quote figcaption{margin-top: 24px;color: var(--gw-muted);font-size: 14px}.gw-quote figcaption b{color: var(--gw-ink)}.gw-quote figcaption img{width: 40px;height: 40px;margin: 0 auto 12px;border-radius: var(--gw-radius-chip)}@media (min-width: 768px){.gw-quote{padding: 64px}.gw-quote blockquote{font-size: 30px}}.gw-pricing{display: grid;grid-template-columns: repeat(auto-fit,minmax(min(100%,260px),1fr));align-items: start;gap: 16px}.gw-plan{display: flex;flex-direction: column;padding: 24px;border: 1px solid var(--gw-line);border-radius: var(--gw-radius-panel);background: var(--gw-surface);box-shadow: var(--gw-shadow)}.gw-plan--featured{border-color: var(--gw-accent)}.gw-plan{position: relative}.gw-plan > .gw-badge{align-self: flex-start}.gw-plan > .gw-badge:first-child{position: absolute;top: -12px;left: 24px}.gw-plan > .gw-badge:first-child + *{margin-top: 0}.gw-plan h3{font-size: 20px}:where(.gw-plan) p{color: var(--gw-muted);font-size: 14px}.gw-plan__price{display: flex;flex-wrap: wrap;align-items: baseline;gap: 6px;color: var(--gw-ink);font-size: var(--gw-display-h2);font-weight: 600;letter-spacing: -0.03em;line-height: 1.1;font-variant-numeric: tabular-nums}.gw-plan__price small{color: var(--gw-muted);font-size: 14px;font-weight: 500;letter-spacing: 0}.gw-plan .gw-list--check{font-size: 14px}@media (min-width: 768px){.gw-plan{padding: 32px}.gw-plan > .gw-badge:first-child{left: 32px}}.gw-cta{max-width: 780px;margin-inline: auto;text-align: center}.gw-cta .gw-lead{margin-inline: auto}.gw-cta .gw-actions{justify-content: center}.gw-prose{max-width: 68ch;min-width: 0;color: var(--gw-ink);font-size: var(--gw-body-size);line-height: var(--gw-body-leading);overflow-wrap: break-word}.gw-prose--sm{font-size: 16px}:where(.gw-prose) > * + *{margin-top: 20px}:where(.gw-prose--sm) > * + *{margin-top: 16px}:where(.gw-prose) > * + :where(figure,img,video,pre,table,hr,.gw-table,.gw-window),:where(.gw-prose) > :where(figure,img,video,pre,table,hr,.gw-table,.gw-window) + *{margin-top: 32px}:where(.gw-prose) > * + h2{margin-top: 48px}:where(.gw-prose) > * + h3{margin-top: 40px}:where(.gw-prose) > * + h4{margin-top: 32px}:where(.gw-prose--sm) > * + h2{margin-top: 40px}:where(.gw-prose--sm) > * + h3{margin-top: 32px}:where(.gw-prose--sm) > * + h4{margin-top: 24px}:where(.gw-prose) > h1 + *{margin-top: 24px}:where(.gw-prose) > :is(h2,h3,h4) + *{margin-top: 12px}:where(.gw-prose) > :is(h1,h2,h3,h4){color: var(--gw-ink);font-weight: var(--gw-heading-weight);letter-spacing: var(--gw-heading-tracking);line-height: 1.25}:where(.gw-prose) > h1{font-size: var(--gw-display-h2);font-weight: var(--gw-display-weight);letter-spacing: var(--gw-display-tracking);line-height: var(--gw-heading-leading)}:where(.gw-prose) > h2{font-size: 30px;line-height: 1.2}:where(.gw-prose) > h3{font-size: 24px}:where(.gw-prose) > h4{font-size: 20px}:where(.gw-prose--sm) > h2{font-size: 24px}:where(.gw-prose--sm) > h3{font-size: 20px}:where(.gw-prose--sm) > h4{font-size: 18px}:where(.gw-prose :is(ul,ol):not([class])){padding-left: 24px}:where(.gw-prose ul:not([class])){list-style: disc}:where(.gw-prose ol:not([class])){list-style: decimal}:where(.gw-prose :is(ul,ol):not([class]) > li + li),:where(.gw-prose :is(ul,ol):not([class]) > li > * + *),:where(.gw-prose :is(ul,ol):not([class]) > li > :is(ul,ol)){margin-top: 8px}:where(.gw-prose :is(ul,ol):not([class]) > li)::marker{color: var(--gw-muted);font-variant-numeric: tabular-nums}:where(.gw-prose) > blockquote{padding-left: 20px;border-left: 3px solid var(--gw-line-strong);color: var(--gw-muted)}:where(.gw-prose) > blockquote > * + *{margin-top: 12px}:where(.gw-prose) > hr{height: 0;border: 0;border-top: 1px solid var(--gw-line)}:where(.gw-prose) :is(sup,sub){line-height: 0}:where(.gw-prose) :is(pre,code,kbd,samp){font-family: var(--gw-font-mono)}:where(.gw-prose) code{padding: 2px 6px;border-radius: var(--gw-radius-6);background: color-mix(in srgb,var(--gw-ink) 8%,transparent);color: var(--gw-ink);font-size: 16px;overflow-wrap: anywhere;-webkit-box-decoration-break: clone;box-decoration-break: clone}:where(.gw-prose--sm) code{font-size: 14px}:where(.gw-prose) :is(h1,h2,h3,h4) code{font-size: inherit}:where(.gw-prose) figcaption code{font-size: 13px}:where(.gw-prose) :is(th,td) code{font-size: 13px;overflow-wrap: normal;white-space: nowrap}:where(.gw-prose) pre{overflow-x: auto;padding: 16px 20px;border: 1px solid var(--gw-line);border-radius: var(--gw-radius-card);background: var(--gw-bg-soft);color: var(--gw-ink);font-size: 14px;line-height: 1.6;tab-size: 2}:where(.gw-prose) pre code{padding: 0;border-radius: var(--gw-radius-0);background: none;font-size: inherit;overflow-wrap: normal}:where(.gw-prose) > :is(img,video),:where(.gw-prose) > :is(p,figure) > :is(img,video){border-radius: var(--gw-radius-card)}:where(.gw-prose) figcaption{margin-top: 12px;color: var(--gw-muted);font-size: 14px;line-height: 1.5}:where(.gw-prose) > table{display: block;width: max-content;max-width: 100%;overflow-x: auto;border: 1px solid var(--gw-line);border-radius: var(--gw-radius-card);background: var(--gw-surface);border-collapse: collapse;font-size: 14px;line-height: 1.5;-webkit-overflow-scrolling: touch}:where(.gw-prose) > table :is(th,td){padding: 12px 16px;border-bottom: 1px solid var(--gw-line);text-align: left;vertical-align: top}:where(.gw-prose) > table thead th{background: var(--gw-bg-soft);color: var(--gw-ink);font-size: 13px;font-weight: 600;white-space: nowrap}:where(.gw-prose) > table tbody th{font-weight: 500}:where(.gw-prose) > table td{color: var(--gw-ink-2);font-variant-numeric: tabular-nums}:where(.gw-prose) > table tbody tr:last-child > *{border-bottom: 0}:where(.gw-prose) > table caption{padding: 12px 16px;color: var(--gw-muted);font-size: 13px;text-align: left}@media (max-width: 767px){:where(.gw-prose) > table td{min-width: 160px}}