@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/AGENTS.md +67 -25
- package/CHANGELOG.md +60 -0
- package/README.md +21 -12
- package/bin/lib/check.mjs +129 -7
- package/bin/lib/contrast.mjs +67 -0
- package/css/base.css +3 -3
- package/css/components.css +93 -3
- package/css/header.css +37 -5
- package/css/layout.css +1 -1
- package/css/prose.css +120 -0
- package/css/tokens.css +21 -0
- package/demo/brand-profiles.html +199 -0
- package/demo/index.html +83 -9
- package/docs/components.md +136 -13
- package/docs/markup-contract.md +51 -7
- package/docs/philosophy.md +14 -9
- package/docs/theming.md +88 -31
- package/js/website.js +39 -2
- package/package.json +1 -1
- package/skill/SKILL.md +5 -2
- package/system.json +34 -8
- package/templates/header.html +3 -1
- package/templates/page.html +2 -0
- package/templates/sections/hero.html +3 -1
- package/templates/sections/pricing.html +15 -3
- package/templates/sections/prose.html +36 -0
- package/templates/sections/showcase.html +3 -2
- package/templates/sections/split.html +3 -1
- package/website.css +277 -13
- package/website.min.css +1 -1
package/website.css
CHANGED
|
@@ -1,8 +1,9 @@
|
|
|
1
|
-
/*! @gemboss/website-ui 0.
|
|
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
|
|
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
|
|
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,
|
|
692
|
-
the raised shadow (it is a popover), 32px inside. The bridge
|
|
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:
|
|
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}}
|