@media (max-width: 959.98px) {
@keyframes weigh {
100% { --w: 600; }
}
@keyframes pop {
0% { transform: translateY(6px) scale(0.985); }
}
@keyframes pulse {
50% { transform: scale(0.55); opacity: 0.5; }
}
@keyframes blink {
50% { opacity: 0; }
}
@keyframes arrive {
0% { transform: translateY(14px); }
100% { transform: none; }
}
@keyframes grow {
100% { max-width: 12ch; }
}
.tcanvas { position: relative; width: 100%; aspect-ratio: 1 / 0.78; min-height: 300px; }
.tlab { position: absolute; max-width: 196px; white-space: normal; background: rgb(var(--surface)); border: 1px solid rgb(var(--hair2)); border-radius: 10px; padding: 7px 10px; font-size: 12.5px; line-height: 1.35; box-shadow: var(--shadow); animation: 0.3s ease 0s 1 normal both running pop; }
.tlab b { display: block; font-weight: 600; font-size: 13px; }
.tlab span { color: rgb(var(--muted)); }
.tlab u { text-decoration: none; border-bottom: 1px dotted rgb(var(--hair2)); }
.card { border: 1px solid rgb(var(--hair)); border-radius: 18px; background: rgb(var(--surface)); box-shadow: var(--shadow); overflow: hidden; }
.mhero { padding: 56px 0px 24px; display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; align-items: center; }
.mhero .vlock { font-size: 13px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: rgb(var(--siva)); }
.mhero h1 { font-size: clamp(56px, 10vw, 148px); line-height: 0.9; letter-spacing: -0.045em; margin: 10px 0px 8px; font-variation-settings: "wght" var(--w); --w: 300; animation: 1.6s cubic-bezier(0.2, 0.7, 0.2, 1) 0.2s 1 normal forwards running weigh; }
.mhero .lede { margin-top: 18px; }
@media (max-width: 960px) { .tcanvas { min-height: 280px; aspect-ratio: 1 / 0.85; } }
@media (max-width: 960px) { .two, .versus, .mhero, .kv { grid-template-columns: 1fr; } }
@media (max-width: 960px) { .tlab { font-size: 11.5px; padding: 5px 8px; } }
@media (max-width: 960px) { .tlab span { display: none; } }
.acro { display: grid; gap: 0px; font-size: clamp(40px, 6.4vw, 92px); line-height: 0.98; letter-spacing: -0.035em; font-variation-settings: "wght" var(--w); --w: 300; animation: 1.6s cubic-bezier(0.2, 0.7, 0.2, 1) 0.2s 1 normal forwards running weigh; margin: 12px 0px 10px; }
.acro span { display: block; }
.tcanvas { transition: transform 0.35s; transform-style: preserve-3d; will-change: transform; }
@media (max-width: 960px) { .tcanvas { aspect-ratio: 1 / 0.62; min-height: 220px; } }
.arc { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: rgb(var(--hair)); border: 1px solid rgb(var(--hair)); border-radius: 14px; overflow: hidden; margin: 8px auto 24px; }
.arc > div { background: rgb(var(--surface)); padding: 14px 18px; display: grid; gap: 4px; font-size: 15px; color: rgb(var(--ink2)); }
.arc .k { font-size: 11.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: rgb(var(--muted)); }
.arc .with { background: rgb(var(--siva-tint)); color: rgb(var(--ink)); }
.arc .with .k { color: rgb(var(--siva)); }
@media (max-width: 960px) { .arc { grid-template-columns: 1fr; } }
.mhero.plate { grid-template-columns: 1.1fr 1fr; gap: 40px; align-items: stretch; padding: 28px 0px 20px; min-height: calc(100svh - 64px - var(--composer-h)); }
.mhero.plate > .lead { display: grid; align-content: center; }
.mhero.plate h1.acro { font-size: clamp(40px, 6vw, 84px); line-height: 0.96; margin: 10px 0px 18px; }
.mhero.plate .lede { max-width: 46ch; font-size: 17px; }
.mplate { display: grid; grid-template-rows: minmax(180px, 1fr) auto; border: 1px solid rgb(var(--hair)); border-radius: 22px; background: rgb(var(--surface)); box-shadow: var(--shadow); overflow: hidden; }
.mplate .facts { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid rgb(var(--hair)); }
.mplate .facts div { padding: 14px 18px; border-inline-end: 1px solid rgb(var(--hair)); border-bottom: 1px solid rgb(var(--hair)); }
.mplate .facts div:nth-child(2n) { border-inline-end: 0px; }
.mplate .facts div:nth-last-child(-n+2) { border-bottom: 0px; }
.mplate .facts .k { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600; color: rgb(var(--muted)); }
.mplate .foot { display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-top: 1px solid rgb(var(--hair)); font-size: 13px; color: rgb(var(--muted)); }
.mplate .foot a { margin-inline-start: auto; }
@media (max-width: 960px) { .mhero.plate { grid-template-columns: 1fr; min-height: 0px; } }
@media (max-width: 960px) { .mplate { grid-template-rows: 200px auto; } }
@media (max-width: 960px) { .mplate .facts { grid-template-columns: 1fr; } }
@media (max-width: 960px) { .mplate .facts div { border-inline-end: 0px; } }
.dtitle { position: absolute; left: 16px; top: 14px; display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: rgb(var(--siva)); }
.dtitle i { width: 9px; height: 9px; border-radius: 50%; background: rgb(var(--siva)); }
.dform .facts div { display: grid; gap: 6px; }
.dform input, .dform select, .dform textarea { font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; line-height: inherit; font-family: inherit; font-optical-sizing: inherit; font-size-adjust: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-size: 15px; color: rgb(var(--ink)); background: rgb(var(--raised)); border: 1px solid rgb(var(--hair2)); border-radius: 10px; padding: 9px 12px; width: 100%; }
.dform .hp { position: absolute; inset-inline-start: -9999px; width: 1px; height: 1px; overflow: hidden; }
.dform .consent { display: flex; gap: 8px; align-items: flex-start; font-size: 13.5px; color: rgb(var(--ink2)); }
.dform .consent input { width: auto; margin-top: 3px; }
.dform label.k { font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600; color: rgb(var(--muted)); }
.dtitle { left: auto; right: 16px; top: 14px; }
.dtitle { left: 16px; right: auto; top: 14px; }
.mhero.plate { align-items: start; }
.demoterr { position: relative; height: 260px; min-height: 0px; aspect-ratio: auto; border: 1px solid rgb(var(--hair)); border-radius: 16px; overflow: hidden; background: linear-gradient(180deg, rgb(var(--raised)), rgb(var(--surface))); margin-top: 18px; }
.demoterr canvas { position: absolute; inset: 0px; width: 100%; height: 100%; }
.demoterr .labels { position: absolute; inset: 0px; pointer-events: none; }
.demoterr .tlab { font-size: 11.5px; padding: 5px 8px; }
.demoterr .tlab span { display: none; }
.demoterr .dtitle { font-size: 11px; }
.tcanvas { overflow: hidden; }
.tcanvas > canvas, .tcanvas > .labels { position: absolute; inset: 0px; width: 100%; height: 100%; }
@media (max-width: 640px) { .mhero.plate.dhero { display: flex; flex-direction: column; } }
@media (max-width: 640px) { .mhero.plate.dhero > .lead { display: contents; } }
@media (max-width: 640px) { .dhero .vlock { order: 1; } }
@media (max-width: 640px) { .dhero h1 { order: 2; } }
@media (max-width: 640px) { .dhero .lede { order: 3; } }
@media (max-width: 640px) { .dhero .dform { order: 4; margin-top: 18px; } }
@media (max-width: 640px) { .dhero .demoterr { order: 5; margin-top: 18px; } }
@media (max-width: 640px) { .dhero .arc { order: 6; } }
.mk .skip:not(.x-skip), .mk .cx.x-head ~ header.top, .mk .cx.x-head:not([data-x-form]) ~ main#main, .mk .cx.x-head ~ footer.site, .mk .cx.x-head ~ aside.dock { display: none !important; }
@font-face { font-family: "Google Sans Flex Fallback"; font-style: normal; font-weight: 100 500; unicode-range: U+20-7E, U+A0, U+A3, U+A9, U+AB, U+AE, U+B0, U+B7, U+BB, U+D7, U+2013-2014, U+2018-2019, U+201C-201D, U+2022, U+2026, U+2039-203A, U+20AC, U+2122, U+2212; src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("LiberationSans-Regular"); size-adjust: 99.0%; ascent-override: 97.6%; descent-override: 28.9%; line-gap-override: 0%; }
@font-face { font-family: "Google Sans Flex Fallback"; font-style: normal; font-weight: 600 900; unicode-range: U+20-7E, U+A0, U+A3, U+A9, U+AB, U+AE, U+B0, U+B7, U+BB, U+D7, U+2013-2014, U+2018-2019, U+201C-201D, U+2022, U+2026, U+2039-203A, U+20AC, U+2122, U+2212; src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("LiberationSans-Bold"); size-adjust: 98.0%; ascent-override: 98.6%; descent-override: 29.2%; line-gap-override: 0%; }
@font-face { font-family: "IBM Plex Sans Arabic Fallback"; font-style: normal; font-weight: 100 500; unicode-range: U+600, U+60C-60D, U+61B, U+61F, U+621-652, U+65F-66D, U+670, U+6FF; src: local("DejaVu Sans"), local("DejaVuSans"); size-adjust: 90.0%; ascent-override: 120.6%; descent-override: 46.1%; line-gap-override: 0%; }
@font-face { font-family: "IBM Plex Sans Arabic Fallback"; font-style: normal; font-weight: 600 900; unicode-range: U+600, U+60C-60D, U+61B, U+61F, U+621-652, U+65F-66D, U+670, U+6FF; src: local("DejaVu Sans Bold"), local("DejaVuSans-Bold"); size-adjust: 76.0%; ascent-override: 142.8%; descent-override: 54.6%; line-gap-override: 0%; }
.mk .cx, .mk .cx button, .mk .cx input, .mk .cx select, .mk .cx textarea { font-family: "Google Sans Flex", "Google Sans Flex Fallback", Inter, ui-sans-serif, system-ui, -apple-system, sans-serif; }
.mk .ar .cx, .mk .ar .cx button, .mk .ar .cx input, .mk .ar .cx select, .mk .ar .cx textarea { font-family: "Google Sans Flex Optional", "IBM Plex Sans Arabic", "Google Sans Flex Fallback", "IBM Plex Sans Arabic Fallback", ui-sans-serif, system-ui, -apple-system, sans-serif; }
html { scroll-padding-top: 64px; }
html.x-lock { overflow: hidden; }
body:has(.cx.x-head) { padding-bottom: 0; }
:root .mk .cx [role="main"] { background: rgb(var(--bg)); }
.cx { --top: 56px; --dock: 72px; --gut: 16px; --siva-p3: rgb(var(--siva)); --brand-p3: rgb(var(--brand)); overflow-x: clip; }
@supports (color: color(display-p3 1 1 1)) { .cx { --siva-p3: color(display-p3 .58 .40 .06); --brand-p3: color(display-p3 .06 .24 .58); }
:root[data-theme="dark"] .cx, :root:not([data-theme="light"]) .cx { --siva-p3: color(display-p3 .86 .66 .28); --brand-p3: color(display-p3 .45 .58 .85); }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .cx { --siva-p3: color(display-p3 .58 .40 .06); --brand-p3: color(display-p3 .06 .24 .58); } } }
.cx .wrap { width: min(640px, 100% - 2 * var(--gut)); margin-inline: auto; }
.cx * { min-width: 0; }
.cx h1, .cx h2, .cx h3 { overflow-wrap: anywhere; }
.cx h1 { font-size: clamp(32px, 9vw, 40px); line-height: 1.06; letter-spacing: -.03em; text-wrap: balance; font-variation-settings: "wght" 580; }
.cx h1 em { font-style: normal; color: var(--siva-p3); }
.cx h2 { font-size: clamp(24px, 6.6vw, 30px); line-height: 1.12; letter-spacing: -.025em; text-wrap: balance; }
.cx h3 { font-size: 18px; line-height: 1.25; letter-spacing: -.01em; }
.cx p { text-wrap: pretty; }
.cx .lede { font-size: 17px; line-height: 1.5; color: rgb(var(--ink2)); max-width: 34ch; }
.cx .x-eyebrow { font-size: 12.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--siva-p3); }
.ar .cx .x-eyebrow { text-transform: none; }
.cx .x-lock { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; letter-spacing: .14em; font-size: 12.5px; }
.cx .x-lock .sg { width: 10px; height: 10px; border-radius: 50%; background: var(--siva-p3); flex: none; }
.cx .x-lock small { font-weight: 500; letter-spacing: .02em; font-size: 12.5px; color: rgb(var(--muted)); }
.cx .btn { min-height: 48px; font-size: 16px; border-radius: 14px; padding-inline: 18px; white-space: normal; text-align: center; }
.cx .btn.primary { background: var(--brand-p3); }
.cx .x-cap { font-size: 12.5px; line-height: 1.45; color: rgb(var(--muted)); }
.cx .x-card { border: 1px solid rgb(var(--hair2)); border-radius: 18px; background: rgb(var(--surface)); box-shadow: var(--shadow); overflow: hidden; }
.cx .x-pill { display: inline-flex; align-items: center; min-height: 24px; padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600; letter-spacing: .02em; line-height: 1.3; }
.cx .x-pill.x-ok { background: rgb(var(--siva-tint)); color: rgb(var(--gold)); }
.cx .x-pill.x-no { background: rgb(var(--coral-tint)); color: rgb(var(--coral)); }
.cx .x-pill.x-s { background: rgb(var(--brand-soft)); color: rgb(var(--brand-ink)); }
.cx .x-av { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; font-size: 12.5px; font-weight: 700; color: #fff; flex: none; letter-spacing: .04em; background: color-mix(in oklab, var(--hue, var(--v1)), #000 30%); }
.cx .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cx .x-top { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; height: var(--top); padding-inline: var(--gut); background: rgb(var(--bg)); border-bottom: 1px solid rgb(var(--hair)); }
.cx .wordmark { min-height: 44px; }
.cx .x-top .wordmark { font-size: 16px; gap: 8px; }
.cx .x-top .mark { width: 24px; height: 24px; }
.cx .x-menu { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 4px 0 12px; border: 1px solid rgb(var(--hair2)); border-radius: 12px; background: transparent; font-weight: 600; font-size: 14px; color: rgb(var(--ink)); }
.cx .x-menu i { display: grid; gap: 4px; width: 40px; height: 40px; place-content: center; }
.cx .x-menu i::before, .cx .x-menu i::after { content: ""; display: block; width: 18px; height: 2px; border-radius: 2px; background: currentColor; }
.cx .x-sheet { display: none; position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgb(var(--bg)); color: rgb(var(--ink)); overflow-y: auto; overscroll-behavior: contain; }
.cx .x-sheet:popover-open { display: grid; }
.cx .x-sheet.x-open { display: grid; z-index: 50; }
.cx .x-sheet { grid-template-rows: auto 1fr auto; align-content: start; }
.cx .x-sheet .x-stop { display: flex; align-items: center; justify-content: space-between; height: var(--top); padding-inline: var(--gut); border-bottom: 1px solid rgb(var(--hair)); position: sticky; top: 0; background: rgb(var(--bg)); }
.cx .x-sheet .x-stop .wordmark { font-size: 16px; gap: 8px; } .cx .x-sheet .x-stop .mark { width: 24px; height: 24px; }
.cx .x-close { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border: 1px solid rgb(var(--hair2)); border-radius: 12px; background: transparent; font-weight: 600; font-size: 14px; color: rgb(var(--ink)); }
.cx .x-sheet ul { list-style: none; margin: 0; padding: 8px var(--gut); display: grid; }
.cx .x-sheet li a { display: flex; align-items: center; justify-content: space-between; min-height: 56px; padding: 6px 4px; border-bottom: 1px solid rgb(var(--hair)); font-size: 22px; font-weight: 560; letter-spacing: -.02em; color: rgb(var(--ink)); }
.cx .x-sheet li a[aria-current="page"] { color: var(--siva-p3); }
.cx .x-sheet li a small { font-size: 13px; font-weight: 500; color: rgb(var(--muted)); letter-spacing: 0; }
.cx .x-sheet .x-sfoot { display: grid; gap: 10px; padding: 12px var(--gut) calc(16px + env(safe-area-inset-bottom)); }
.cx .x-sheet .x-sfoot .x-row2 { display: flex; gap: 10px; }
.cx .x-sheet .x-sfoot .x-row2 .btn { flex: 1 1 0; }
.cx .x-sheet .x-cap { text-align: center; }
@media (prefers-reduced-motion: no-preference) {
.cx .x-sheet { transition: transform .28s cubic-bezier(.2,.7,.2,1), display .28s allow-discrete, overlay .28s allow-discrete; transform: translateY(0); }
.cx .x-sheet:not(:popover-open) { transform: translateY(16px); }
@starting-style { .cx .x-sheet:popover-open { transform: translateY(16px); } }
}
.cx .x-dock { position: fixed; inset-inline: 0; bottom: 0; z-index: 30; display: flex; gap: 8px; padding: 10px var(--gut) calc(10px + env(safe-area-inset-bottom)); background: rgb(var(--bg)); border-top: 1px solid rgb(var(--hair)); transform: translateY(calc(100% + 8px)); visibility: hidden; }
.cx .x-dock[data-on="true"] { transform: none; visibility: visible; }
@media (prefers-reduced-motion: no-preference) { .cx .x-dock { transition: transform .26s cubic-bezier(.2,.7,.2,1), visibility .26s; } }
.cx .x-dock .btn.primary { flex: 1 1 auto; }
.cx .x-dock .x-share { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 16px; border: 1px solid rgb(var(--hair2)); border-radius: 14px; background: transparent; font-weight: 600; font-size: 15px; color: rgb(var(--ink)); }
.cx .x-cta { padding: 48px 0 40px; display: grid; gap: 12px; }
.cx .x-cta p { color: rgb(var(--ink2)); max-width: 36ch; }
.cx .x-cta .x-acts { display: grid; gap: 10px; margin-top: 6px; }
.cx .x-foot { border-top: 1px solid rgb(var(--hair)); padding: 28px 0 calc(28px + env(safe-area-inset-bottom)); font-size: 14px; color: rgb(var(--muted)); }
.cx .x-foot .wordmark { font-size: 16px; gap: 8px; color: rgb(var(--ink)); } .cx .x-foot .mark { width: 24px; height: 24px; }
.cx .x-foot .x-tag { margin-top: 10px; max-width: 36ch; line-height: 1.5; }
.cx .x-foot .x-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 16px; margin-top: 22px; }
.cx .x-foot h2 { font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; color: rgb(var(--ink2)); margin: 0 0 8px; font-weight: 700; }
.ar .cx .x-foot h2 { text-transform: none; }
.cx .x-foot ul { list-style: none; margin: 0; padding: 0; display: grid; }
.cx .x-foot li a { display: flex; align-items: center; min-height: 44px; color: rgb(var(--ink2)); }
.cx .x-foot .x-legal { margin-top: 18px; padding-top: 14px; border-top: 1px solid rgb(var(--hair)); display: grid; gap: 6px; font-size: 13px; }
.cx .x-foot .x-legal a { color: rgb(var(--ink2)); display: inline-flex; min-height: 44px; min-width: 44px; align-items: center; }
@media (hover: hover) { .cx a:hover { text-decoration: none; } .cx .btn.ghost:hover, .cx .x-menu:hover, .cx .x-close:hover { border-color: rgb(var(--ink)); } }
@media (prefers-reduced-motion: no-preference) { @view-transition { navigation: auto; } }
::view-transition-old(lock), ::view-transition-new(lock) { animation-duration: .36s; }
.ar .cx { line-height: 1.7; }
.ar .cx h1 { font-size: clamp(30px, 8.4vw, 38px); line-height: 1.25; letter-spacing: 0; }
.ar .cx h2 { line-height: 1.32; letter-spacing: 0; }
.ar .cx h3 { line-height: 1.4; }
.ar .cx * { letter-spacing: 0; }
.ar .cx .x-sheet li a { letter-spacing: 0; }
.cx .x-terr, .cx .x-dial { width: 100%; height: auto; display: block; direction: ltr; }
.cx .f-t { fill: rgb(var(--sunken)); } .cx .f-l { fill: rgb(var(--raised)); } .cx .f-r { fill: rgb(var(--hair2)); }
.cx .x-ground { fill: rgb(var(--band)); } .cx .x-water { fill: rgb(var(--brand-soft)); }
.cx .x-road { fill: none; stroke: rgb(var(--hair2)); stroke-width: 3; }
.cx .d0 { stop-color: rgb(var(--siva-tint)); stop-opacity: .95; } .cx .d1 { stop-color: rgb(var(--siva-tint)); stop-opacity: 0; }
.cx .x-origin { fill: var(--siva-p3); }
.cx .lit .f-t { fill: rgb(var(--siva-tint)); } .cx .lit .f-l { fill: color-mix(in oklab, rgb(var(--siva-tint)), rgb(var(--siva)) 18%); } .cx .lit .f-r { fill: color-mix(in oklab, rgb(var(--siva-tint)), rgb(var(--siva)) 34%); }
.cx .lit .win rect { fill: var(--siva-p3); }
.cx .x-blk .x-n circle { fill: rgb(var(--ink)); } .cx .x-blk .x-n text { fill: rgb(var(--bg)); font-size: 13px; font-weight: 700; }
.cx .x-dial .x-ring { fill: none; stroke: rgb(var(--hair)); stroke-width: 22; }
.cx .x-dial .x-band { fill: none; stroke: var(--brand-p3); stroke-width: 22; stroke-dasharray: 100; stroke-dashoffset: 100; }
.cx .x-dial .x-band.on { stroke-dashoffset: 0; }
.cx .x-dial .x-echo-ring { fill: none; stroke: rgb(var(--hair2)); stroke-width: 2; stroke-dasharray: 4 6; }
.cx .x-dial .pt { fill: var(--siva-p3); }
.cx .x-dial .x-n { font-size: 13px; font-weight: 700; fill: rgb(var(--muted)); }
@media (prefers-reduced-motion: no-preference) { @supports (animation-timeline: view()) {
.cx .x-dial .x-band.on { animation: x-fill linear both; animation-timeline: view(); animation-range: entry 10% entry 70%; }
.cx .x-dial .x-band.k2 { animation-range: entry 20% entry 80%; } .cx .x-dial .x-band.k3 { animation-range: entry 30% entry 90%; }
.cx .x-dial .x-band.k4 { animation-range: entry 40% entry 100%; } .cx .x-dial .x-band.k5 { animation-range: entry 50% cover 40%; } .cx .x-dial .x-band.k6 { animation-range: entry 60% cover 50%; }
@keyframes x-fill { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
} }
.cx .x-msg { display: grid; }
.cx .x-msg .x-status { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 10px 14px; border-bottom: 1px solid rgb(var(--hair)); font-size: 12.5px; color: rgb(var(--muted)); font-variant-numeric: tabular-nums; }
.cx .x-msg .x-status .x-st { white-space: nowrap; }
.cx .x-msg .x-status .x-ct { white-space: nowrap; margin-inline-start: auto; }
.cx .x-msg .x-k { padding: 10px 14px 0; font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgb(var(--muted)); }
.ar .cx .x-msg .x-k { text-transform: none; letter-spacing: 0; }
.cx .x-msg .x-hd { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid rgb(var(--hair)); }
.cx .x-msg .x-hd > div { flex: 1; }
.cx .x-msg .x-hd b { font-size: 15px; display: block; }
.cx .x-msg .x-hd small { display: block; font-size: 12.5px; color: rgb(var(--muted)); }
.cx .x-msg .x-why { padding: 12px 14px; font-size: 15px; line-height: 1.45; color: rgb(var(--ink2)); border-bottom: 1px solid rgb(var(--hair)); }
.cx .x-msg .x-why u { text-decoration: none; color: rgb(var(--siva)); font-weight: 600; }
.cx .x-msg .x-row { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid rgb(var(--hair)); font-size: 14px; }
.cx .x-msg .x-row > div { flex: 1; }
.cx .x-msg .x-row b { display: block; font-size: 14.5px; }
.cx .x-msg .x-row span:not(.x-av):not(.x-pill) { color: rgb(var(--muted)); font-size: 12.5px; display: block; line-height: 1.35; }
.cx .x-msg .x-row .x-pill { flex: none; max-width: 42%; text-align: center; }
.cx .x-msg .x-draft { margin: 0; padding: 12px 14px; font-family: inherit; font-size: 14.5px; line-height: 1.5; white-space: pre-line; color: rgb(var(--ink)); background: rgb(var(--raised)); }
.cx .x-decide { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 10px 12px 12px; }
.cx .x-decide .x-ym { grid-column: 1 / -1; font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgb(var(--siva)); }
.ar .cx .x-decide .x-ym { text-transform: none; }
.cx .x-decide label { position: relative; display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 10px; border-radius: 12px; border: 1px solid rgb(var(--hair2)); font-weight: 600; font-size: 14px; cursor: pointer; text-align: center; }
.cx .x-decide label.x-go { grid-column: 1 / -1; background: var(--brand-p3); color: #fff; border-color: transparent; }
.cx .x-decide input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.cx .x-decide label:has(input:focus-visible) { outline: 2px solid rgb(var(--brand)); outline-offset: 3px; }
.cx .x-after { display: none; align-items: center; gap: 10px; padding: 12px 14px; font-size: 13.5px; line-height: 1.45; color: rgb(var(--ink2)); }
.cx .x-after b { color: rgb(var(--ink)); font-weight: 500; }
.cx .x-msg:has(input:checked) .x-decide { display: none; }
.cx .x-msg:has(input:checked) .x-after { display: flex; animation: x-in .32s cubic-bezier(.2,.7,.2,1) both; }
@keyframes x-in { from { transform: translateY(8px); } to { transform: none; } }
.cx .x-msg:has(.hold:checked) .x-after .sent, .cx .x-msg:has(.later:checked) .x-after .sent, .cx .x-msg:has(.hold:checked) .x-after .late, .cx .x-msg:has(.send:checked) .x-after .late, .cx .x-msg:has(.send:checked) .x-after .held, .cx .x-msg:has(.later:checked) .x-after .held { display: none; }
.d { --gut: 20px; --sweep: #0B3D91; }
@supports (color: color(display-p3 1 1 1)) { .d { --sweep: color(display-p3 .06 .24 .58); } }
.d .x-stage { --bg: 23 22 20; --surface: 30 29 27; --raised: 38 37 34; --sunken: 46 45 42; --band: 18 17 16; --hair: 46 44 41; --hair2: 64 62 58; --ink: 236 234 230; --ink2: 201 198 192; --muted: 160 157 151; --brand: 110 147 214; --brand-ink: 143 176 232; --brand-soft: 36 44 60; --siva: 217 164 65; --siva-tint: 44 38 24; --gold: 217 179 92; --coral: 224 138 116; --coral-tint: 48 31 26; --siva-p3: rgb(217 164 65); --brand-p3: rgb(110 147 214); color-scheme: dark; position: relative; isolation: isolate; overflow: clip; background: rgb(var(--bg)); color: rgb(var(--ink)); }
@supports (color: color(display-p3 1 1 1)) { .d .x-stage { --siva-p3: color(display-p3 .86 .66 .28); --brand-p3: color(display-p3 .45 .58 .85); } }
.d .x-sweep { position: absolute; left: -8%; bottom: -10%; width: 132%; aspect-ratio: 1; max-width: 760px; border-radius: 0 100% 0 0; background: var(--sweep); transform-origin: 0 100%; z-index: -1; pointer-events: none; }
.d .x-sweep::after { content: ""; position: absolute; width: 16px; height: 16px; border-radius: 50%; background: var(--siva-p3); left: calc(70.7% - 8px); top: calc(29.3% - 8px); }
.d .x-field { position: relative; margin-top: 26px; }
.d .x-field .x-sweep { left: calc(-1 * var(--gut) - 8vw); bottom: -40vw; top: -56px; width: auto; max-width: none; }
.d .x-field .x-sweep::after { left: calc(20.8% - 8px); top: calc(2.2% - 8px); }
.d .x-hero { padding: 26px 0 28px; display: grid; gap: 14px; }
.d .x-tick { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: 13px; color: rgb(var(--ink2)); font-variant-numeric: tabular-nums; }
.d .x-tick .sg { width: 10px; height: 10px; border-radius: 50%; background: var(--siva-p3); }
.d .x-tick b { color: rgb(var(--ink)); font-weight: 600; }
.d .x-tick i { font-style: normal; color: rgb(var(--muted)); }
.d .x-tick.x-named { display: grid; grid-template-columns: 10px minmax(0, 1fr); align-items: start; gap: 8px; font-size: 14px; line-height: 1.5; }
.d .x-tick.x-named .sg { margin-top: 6px; }
.d .x-tick.x-named b { font-weight: 700; color: rgb(var(--ink)); }
.d .x-tick.x-named [dir="ltr"] { display: inline-block; unicode-bidi: isolate; }
.d .x-tick.x-named a { color: var(--siva-p3); text-decoration: underline; text-underline-offset: .18em; white-space: nowrap; }
.d .x-hero h1 { font-size: clamp(38px, 11.2vw, 46px); line-height: 1.02; letter-spacing: -.035em; font-variation-settings: "wght" 600; margin-top: 4px; }
.d .x-hero h1 em { display: block; }
.d .x-hero .lede { font-size: 17px; line-height: 1.45; max-width: none; color: rgb(var(--ink2)); }
.d .x-hero .x-acts { display: grid; gap: 10px; margin-top: 2px; }
.d .x-stage .btn.primary { background: rgb(250 250 248); color: #1C1C1C; }
.d .x-stage .btn.ghost { color: rgb(var(--ink)); border-color: rgb(var(--hair2)); }
.d .x-stage .x-decide label.x-go { color: #1C1C1C; }
.d .x-hero .x-field > .x-card { margin-top: 0; }
.d .x-stage .x-card { border-color: rgb(var(--hair2)); box-shadow: 0 24px 60px rgba(0,0,0,.45); }
.d .x-stage .x-cap { margin-top: 10px; color: rgb(var(--ink2)); position: relative; }
.d .x-field .x-fig figcaption { color: rgb(var(--ink2)); position: relative; }
@media (prefers-reduced-motion: no-preference) {
.d .x-sweep { animation: d-sweep .9s cubic-bezier(.2,.7,.2,1) both; }
@keyframes d-sweep { from { transform: rotate(-90deg); } to { transform: none; } }
.d .x-hero .x-field > .x-card, .d .x-hero .x-field > .x-fig { animation: d-rise .7s .2s cubic-bezier(.2,.7,.2,1) both; }
@keyframes d-rise { from { transform: translateY(36px); } to { transform: none; } }
}
.d .x-sec { padding: 40px 0 10px; display: grid; gap: 14px; }
.d .x-sec + .x-sec { border-top: 1px solid rgb(var(--hair)); margin-top: 26px; }
.d .x-mark { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 700; color: rgb(var(--ink2)); }
.d .x-mark i { position: relative; width: 16px; height: 16px; border-radius: 0 100% 0 0; background: var(--brand-p3); flex: none; }
.d .x-mark i::after { content: ""; position: absolute; width: 6px; height: 6px; border-radius: 50%; background: var(--siva-p3); right: -3px; top: -3px; }
.d .x-sec > p.lede { font-size: 16px; }
.d .x-link { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; color: rgb(var(--brand-ink)); text-decoration: underline; text-underline-offset: .18em; }
.d .x-fig { margin: 0; display: grid; gap: 8px; }
.d .x-fig .x-terr { border-radius: 16px; background: rgb(var(--band)); }
.d .x-fig figcaption { font-size: 12.5px; color: rgb(var(--muted)); }
.d .x-six { list-style: none; margin: 0; padding: 0; display: grid; }
.d .x-six li { display: grid; grid-template-columns: 30px 1fr; gap: 10px; padding: 12px 0; border-top: 1px solid rgb(var(--hair)); }
.d .x-six li:first-child { border-top: 0; }
.d .x-six i { font-style: normal; display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--brand-p3); color: #fff; font-size: 12.5px; font-weight: 700; margin-top: 1px; }
.d .x-six b { display: block; font-size: 16px; letter-spacing: -.01em; }
.d .x-six span { display: block; font-size: 14px; color: rgb(var(--ink2)); line-height: 1.45; margin-top: 2px; }
.d .x-stories { display: grid; gap: 16px; }
.d .x-story { display: grid; text-decoration: none; color: inherit; }
.d .x-story .x-top2 { --bg: 23 22 20; --surface: 30 29 27; --raised: 38 37 34; --sunken: 46 45 42; --band: 18 17 16; --hair: 46 44 41; --hair2: 64 62 58; --ink: 236 234 230; --ink2: 201 198 192; --muted: 160 157 151; --brand: 110 147 214; --brand-ink: 143 176 232; --brand-soft: 36 44 60; --siva: 217 164 65; --siva-tint: 44 38 24; --gold: 217 179 92; --coral: 224 138 116; --coral-tint: 48 31 26; --siva-p3: rgb(217 164 65); --brand-p3: rgb(110 147 214); color-scheme: dark; position: relative; isolation: isolate; overflow: clip; background: rgb(var(--bg)); color: rgb(var(--ink)); padding: 14px 16px 0; }
.d .x-story .x-top2 .x-sweep { width: 70%; left: -12%; bottom: -24%; max-width: 320px; background: color-mix(in oklab, var(--hue), #000 25%); animation: none; }
.d .x-story .x-top2 .x-sweep::after { display: none; }
.d .x-story .x-trade { font-size: 12.5px; font-weight: 600; color: rgb(var(--ink2)); display: flex; align-items: center; gap: 8px; }
.d .x-story .x-trade .x-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--siva-p3); flex: none; }
.d .x-story h3 { font-size: 22px; letter-spacing: -.02em; margin-top: 6px; }
.d .x-story .x-terr { margin-top: 8px; width: 82%; margin-inline-start: auto; }
.d .x-story .x-body { padding: 14px 16px 16px; display: grid; gap: 8px; }
.d .x-story .x-read { font-size: 14px; color: rgb(var(--ink2)); line-height: 1.45; }
.d .x-story .x-out { display: flex; gap: 10px; align-items: flex-start; padding-top: 10px; border-top: 1px solid rgb(var(--hair)); font-size: 14.5px; line-height: 1.45; }
.d .x-story .x-out .x-pill { flex: none; margin-top: 1px; }
.d .x-story .x-more { font-size: 14px; font-weight: 600; color: rgb(var(--brand-ink)); min-height: 24px; }
.d .x-snap { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px var(--gut) 10px; margin-inline: calc(-1 * var(--gut)); scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.d .x-snap::-webkit-scrollbar { display: none; }
.d .x-snap > span { scroll-snap-align: start; flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 16px; border: 1px solid rgb(var(--hair2)); border-radius: 999px; font-size: 14.5px; font-weight: 500; white-space: nowrap; background: rgb(var(--surface)); }
.d .x-snap > span.x-live { border-color: rgb(var(--siva)); }
.d .x-rules { display: grid; }
.d .x-rules > div { padding: 12px 0; border-top: 1px solid rgb(var(--hair)); font-size: 14.5px; color: rgb(var(--ink2)); line-height: 1.45; }
.d .x-rules > div:first-child { border-top: 0; }
.d .x-rules b { display: block; color: rgb(var(--ink)); font-size: 16px; margin-bottom: 2px; }
.d .x-faq { display: grid; }
.d .x-faq details { border-top: 1px solid rgb(var(--hair)); }
.d .x-faq details:first-child { border-top: 0; }
.d .x-faq summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; padding: 8px 0; font-size: 17px; font-weight: 560; letter-spacing: -.01em; cursor: pointer; }
.d .x-faq summary::-webkit-details-marker { display: none; }
.d .x-faq summary::after { content: "+"; flex: none; width: 28px; height: 28px; border-radius: 50%; border: 1px solid rgb(var(--hair2)); display: grid; place-items: center; font-weight: 500; color: rgb(var(--ink2)); }
.d .x-faq details[open] summary::after { content: "–"; }
.d .x-faq p { padding: 0 0 16px; font-size: 15px; line-height: 1.5; color: rgb(var(--ink2)); }
.d .x-cta { --bg: 23 22 20; --surface: 30 29 27; --raised: 38 37 34; --sunken: 46 45 42; --band: 18 17 16; --hair: 46 44 41; --hair2: 64 62 58; --ink: 236 234 230; --ink2: 201 198 192; --muted: 160 157 151; --brand: 110 147 214; --brand-ink: 143 176 232; --brand-soft: 36 44 60; --siva: 217 164 65; --siva-tint: 44 38 24; --gold: 217 179 92; --coral: 224 138 116; --coral-tint: 48 31 26; --siva-p3: rgb(217 164 65); --brand-p3: rgb(110 147 214); color-scheme: dark; position: relative; isolation: isolate; overflow: hidden; background: rgb(var(--bg)); color: rgb(var(--ink)); width: min(640px, 100% - 2 * var(--gut)); border-radius: 22px; padding: 28px 20px 30px; margin: 34px auto 28px; }
.d .x-cta .x-sweep { width: 78%; left: -14%; bottom: -34%; max-width: 360px; animation: none; }
.d .x-cta .x-sweep { background: none; }
.d .x-cta .x-sweep::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--sweep); }
.d .x-cta .btn.primary { background: rgb(250 250 248); color: #1C1C1C; }
.d .x-cta .btn.ghost { color: rgb(var(--ink)); border-color: rgb(var(--hair2)); }
.d .x-cta p { color: rgb(var(--ink2)); }
.d .x-acro { display: grid; font-size: clamp(40px, 11.6vw, 52px); line-height: .98; letter-spacing: -.04em; font-variation-settings: "wght" 600; }
.d .x-acro b { color: var(--siva-p3); font-weight: inherit; }
.d .x-facts { display: grid; }
.d .x-facts > div { display: grid; grid-template-columns: 92px 1fr; gap: 10px; padding: 10px 0; border-top: 1px solid rgb(var(--hair)); font-size: 14.5px; line-height: 1.4; }
.d .x-facts > div:first-child { border-top: 0; }
.d .x-facts .x-k { font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgb(var(--muted)); padding-top: 3px; }
.ar .d .x-facts .x-k { text-transform: none; letter-spacing: 0; }
.d .x-dialrow { display: grid; grid-template-columns: 1fr; gap: 14px; }
.d .x-dialrow .x-dial { width: 70%; margin-inline-start: auto; }
.d .x-card-rows { display: grid; gap: 18px; }
.d .x-card-rows .x-k { font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--siva-p3); margin-bottom: 4px; display: block; }
.d .x-card-rows p, .d .x-card-rows li { font-size: 15px; line-height: 1.5; color: rgb(var(--ink2)); }
.d .x-card-rows ul { margin: 0; padding-inline-start: 18px; display: grid; gap: 5px; }
.d .x-vs { display: grid; gap: 12px; }
.d .x-vs .x-q { font-size: 18px; font-weight: 560; letter-spacing: -.01em; }
.d .x-vs .x-ans { padding: 14px 16px; display: grid; gap: 8px; }
.d .x-vs .x-ans .x-who { font-size: 12.5px; font-weight: 700; color: rgb(var(--muted)); }
.d .x-vs .x-ans p { font-size: 15px; line-height: 1.5; }
.d .x-vs .x-ans.x-siva { border-color: rgb(var(--siva)); }
.d .x-vs .x-ans.x-siva .x-who { color: var(--siva-p3); }
.d .x-vs .x-marks { display: flex; flex-wrap: wrap; gap: 6px; }
.d .x-suites { display: grid; }
.d .x-suites > div { padding: 12px 0; border-top: 1px solid rgb(var(--hair)); display: grid; gap: 4px; }
.d .x-suites > div:first-child { border-top: 0; }
.d .x-suites b { font-size: 16px; }
.d .x-suites span { font-size: 14px; color: rgb(var(--ink2)); line-height: 1.45; }
.d .x-suites small { font-size: 12.5px; color: var(--siva-p3); font-weight: 600; }
.d .x-vers { display: grid; }
.d .x-vers > div { padding: 12px 0; border-top: 1px solid rgb(var(--hair)); display: grid; gap: 3px; }
.d .x-vers > div:first-child { border-top: 0; }
.d .x-vers b { font-size: 17px; letter-spacing: -.01em; }
.d .x-vers small { font-size: 12.5px; font-weight: 600; color: var(--siva-p3); }
.d .x-vers span { font-size: 14px; color: rgb(var(--ink2)); line-height: 1.45; }
.d .x-stops { display: grid; gap: 22px; }
.d .x-stop { display: grid; gap: 8px; }
.d .x-stop .x-t { display: flex; align-items: baseline; gap: 10px; }
.d .x-stop .x-t b { font-size: 20px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.d .x-stop .x-t span { font-size: 15px; font-weight: 560; }
.d .x-lines { display: grid; }
.d .x-lines > div { display: flex; gap: 10px; align-items: flex-start; justify-content: space-between; padding: 10px 14px; border-top: 1px solid rgb(var(--hair)); font-size: 14px; line-height: 1.4; }
.d .x-lines > div:first-child { border-top: 0; }
.d .x-lines .x-pill { flex: none; max-width: 40%; text-align: center; }
.d .x-why { padding: 10px 14px; font-size: 14px; line-height: 1.45; color: rgb(var(--ink2)); background: rgb(var(--raised)); }
.d .x-reply { padding: 14px; display: grid; gap: 4px; }
.d .x-reply .x-q { font-size: 17px; font-weight: 560; letter-spacing: -.01em; }
.d .x-reply .x-m { font-size: 12.5px; color: rgb(var(--muted)); }
.d .x-next { display: grid; gap: 12px; }
.d .x-intro { padding: 22px 0 0; display: grid; gap: 10px; }
.d .x-intro .lede { font-size: 16px; max-width: none; }
.d .x-sec > .x-rows, .d .x-sec > .x-rules, .d .x-sec > .x-vers, .d .x-sec > .x-card, .d .x-sec > .x-vs, .d .x-sec > .x-fig { margin-top: 2px; }
.d .x-k { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgb(var(--muted)); margin-bottom: 3px; }
.ar .d .x-k { text-transform: none; letter-spacing: 0; font-size: 12.5px; }
.d .x-rows { display: grid; }
.d .x-rows > div { padding: 12px 0; border-top: 1px solid rgb(var(--hair)); }
.d .x-rows > div:first-child { border-top: 0; padding-top: 4px; }
.d .x-v, .d .x-prose { font-size: 15px; line-height: 1.55; color: rgb(var(--ink)); }
.d .x-v small, .d .x-prose small { display: block; margin-top: 4px; font-size: 13px; color: rgb(var(--muted)); }
.d .x-v ul, .d .x-prose ul, .d .x-dated ul { margin: 4px 0 0; padding-inline-start: 18px; display: grid; gap: 5px; }
.d .x-v a, .d .x-prose a, .d .x-sec .lede a, .d .x-rules a, .d .x-vers a, .d .x-why a, .d .x-cap a, .d .x-plain a, .d .x-ans a { color: rgb(var(--brand-ink)); text-decoration: underline; text-underline-offset: .18em; }
.d .x-rules > div > span, .d .x-rules > div > p { display: block; }
.d .x-rules p .x-k { margin-top: 8px; }
.d .x-eth > div { display: grid; gap: 2px; }
.d .x-dated small { color: rgb(var(--muted)); font-weight: 500; }
.d .x-dated li { font-size: 14px; color: rgb(var(--ink2)); line-height: 1.45; }
.d .x-plain { font-size: 15px; line-height: 1.55; color: rgb(var(--ink2)); }
.d .x-lines { display: grid; }
.d .x-lines > .x-rows { padding: 4px 14px 2px; border-top: 1px solid rgb(var(--hair)); }
.d .x-lhd { padding: 12px 14px; font-size: 14px; font-weight: 600; border-bottom: 1px solid rgb(var(--hair)); display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.d .x-lhd small, .d .x-lhd span:not(.x-pill) { font-weight: 500; color: rgb(var(--muted)); font-size: 13px; }
.d .x-line { display: flex; gap: 10px; align-items: flex-start; justify-content: space-between; padding: 10px 14px; border-top: 1px solid rgb(var(--hair)); font-size: 14px; line-height: 1.45; }
.d .x-lhd + .x-line { border-top: 0; }
.d .x-line > span:first-child { flex: 1; }
.d .x-line b { display: block; font-size: 14.5px; }
.d .x-line .x-pill { flex: none; white-space: nowrap; }
.d .x-lines .x-why { padding: 10px 14px; font-size: 14px; line-height: 1.45; color: rgb(var(--ink2)); background: rgb(var(--raised)); }
.d .x-lines .x-draft { margin: 0; padding: 12px 14px; font-family: inherit; font-size: 14.5px; line-height: 1.5; white-space: pre-line; background: rgb(var(--raised)); }
.d .x-cal { display: grid; padding: 4px 14px; }
.d .x-cal > div { display: grid; gap: 2px; padding: 8px 0; border-top: 1px solid rgb(var(--hair)); font-size: 14px; line-height: 1.45; }
.d .x-cal > div:first-child { border-top: 0; }
.d .x-stop .x-t { font-size: 15px; font-weight: 600; }
.d .x-stop .x-t small { font-weight: 500; color: rgb(var(--muted)); }
.d .x-stops { margin-top: 14px; }
.d .x-week { display: grid; }
.d .x-rep { display: grid; gap: 4px; padding: 12px 14px; border-top: 1px solid rgb(var(--hair)); font-size: 14px; line-height: 1.45; }
.d .x-rep:first-child { border-top: 0; }
.d .x-rep b { font-size: 15px; }
.d .x-marks { display: flex; flex-wrap: wrap; gap: 4px 12px; color: rgb(var(--ink2)); font-size: 13px; }
.d .x-mk { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.d .x-mk i { width: 8px; height: 8px; border-radius: 50%; background: var(--brand-p3); }
.d .x-mk-r i { background: var(--siva-p3); } .d .x-mk-m i { background: rgb(var(--ink)); }
.d .x-repwhy { color: rgb(var(--ink2)); }
.d .x-checks { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 6px; }
.d .x-checks li { position: relative; padding-inline-start: 22px; font-size: 14px; line-height: 1.45; color: rgb(var(--ink2)); }
.d .x-checks li::before { content: ""; position: absolute; inset-inline-start: 2px; top: .45em; width: 10px; height: 6px; border-inline-start: 2px solid var(--siva-p3); border-bottom: 2px solid var(--siva-p3); transform: rotate(-45deg); }
.ar .d .x-checks li::before { transform: rotate(45deg); }
.d .x-model .x-rows { padding: 4px 14px 4px; }
.d .x-model .x-link { padding: 0 14px 6px; }
.d .x-swatches { display: flex; gap: 10px; margin: 6px 0 8px; }
.d .x-sw { display: grid; place-items: center; width: 96px; height: 96px; border-radius: 16px; border: 1px solid rgb(var(--hair2)); }
.d .x-sw .mark { width: 56px; height: 56px; }
.d .x-sw-l { background: #FAFAF8; } .d .x-sw-d { background: #171614; }
.d .x-sw .disc { fill: #0B3D91; } .d .x-sw-d .disc { fill: #6E93D6; } .d .x-sw .pt { fill: #C28E1A; }
.d .x-dialfig { width: 82%; margin-inline-start: auto; }
.d .x-rows .x-terr, .d .x-rows .x-dial { margin: 8px 0; }
.cx .x-foot .x-fshare { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; margin-top: 14px; padding: 0 18px; border: 1px solid rgb(var(--hair2)); border-radius: 14px; font-weight: 600; font-size: 15px; color: rgb(var(--ink)); }
.d .x-stage .x-plate { padding: 6px 16px 8px; background: rgb(var(--surface)); }
.d .x-stage .x-plate .x-rows > div { padding: 10px 0; }
.d .x-stage .x-plate .x-v { font-weight: 600; }
.d .x-stage .x-plate .x-k { color: rgb(var(--ink2)); }
.d .x-stage .x-plate .x-week { margin: 0 -16px -8px; }
.d .x-toc { padding: 12px 16px 6px; background: rgb(var(--surface)); }
.d .x-toc ol { margin: 0; padding: 0; list-style: none; counter-reset: x-toc; display: grid; }
.d .x-toc li { counter-increment: x-toc; border-top: 1px solid rgb(var(--hair)); }
.d .x-toc li:first-child { border-top: 0; }
.d .x-toc a { display: flex; align-items: center; gap: 12px; min-height: 48px; font-size: 16px; font-weight: 560; color: rgb(var(--ink)); text-decoration: none; }
.d .x-toc a::before { content: counter(x-toc); flex: none; width: 24px; font-variant-numeric: tabular-nums; color: var(--siva-p3); font-weight: 700; font-size: 13px; }
.d .x-field.x-bare { min-height: 56px; margin-top: 4px; }
.d .x-field.x-bare .x-sweep { top: -24px; bottom: -80vw; }
.d .x-acro .x-acro-ar { display: block; font-size: 22px; line-height: 1.4; letter-spacing: 0; margin-top: 10px; color: rgb(var(--ink2)); }
.d [data-x-id] { scroll-margin-top: 64px; }
.mk .cx[data-x-form] ~ main#main { background: rgb(var(--bg)); }
.mk .cx[data-x-form] ~ main#main .dhero { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; width: min(640px, 100% - 40px); margin-inline: auto; padding: 22px 0 8px; }
.mk .cx[data-x-form] ~ main#main .dhero .lead { order: 2; }
.mk .cx[data-x-form] ~ main#main .dhero .lead > .vlock, .mk .cx[data-x-form] ~ main#main .dhero .lead > h1, .mk .cx[data-x-form] ~ main#main .dhero .lead > .lede, .mk .cx[data-x-form] ~ main#main .dhero .tcanvas { display: none; }
.mk .cx[data-x-form] ~ main#main .dform { grid-template-rows: auto auto; }
.mk .cx[data-x-form] ~ main#main .dform .facts > div { padding: 12px 16px; }
.mk .cx[data-x-form] ~ main#main .dform .foot { display: grid; gap: 12px; padding: 14px 16px 16px; }
.mk .cx[data-x-form] ~ main#main .dform .foot > div { width: 100%; }
.mk .cx[data-x-form] ~ main#main .dform input, .mk .cx[data-x-form] ~ main#main .dform select, .mk .cx[data-x-form] ~ main#main .dform textarea { font-size: 16px; min-height: 48px; width: 100%; }
.mk .cx[data-x-form] ~ main#main .dform textarea { min-height: 88px; }
.mk .cx[data-x-form] ~ main#main .dform .btn.primary { min-height: 48px; font-size: 16px; width: 100%; justify-content: center; }
.mk .cx[data-x-form] ~ main#main .dform .consent { display: block; position: relative; padding-inline-start: 34px; min-height: 44px; font-size: 14px; line-height: 1.5; }
.mk .cx[data-x-form] ~ main#main .dform .consent input { position: absolute; inset-inline-start: 0; top: 0; width: 24px; height: 24px; min-height: 24px; margin: 0; }
.mk .cx[data-x-form] ~ main#main section.wrap { width: min(640px, 100% - 40px); margin-inline: auto; }
.mk .cx[data-x-form] ~ main#main section.wrap > .card { grid-template-columns: minmax(0, 1fr) !important; }
.mk .cx[data-x-form] ~ main#main .btn { min-height: 48px; }
.see { padding: 14px 14px 10px; }
.see-play .see-e, .see-play .see-n, .see-play .see-dot, .see-play .see-sm { animation-duration: .2s; animation-delay: calc(var(--d) * 15ms); }
.see[data-a="group"] .see-pic, .see[data-a="why"] .see-pic, .see[data-a="group"] .see-tg, .see[data-a="why"] .see-tg, .see-svg-pd { display: none; }
.see-svg-pp { display: block; aspect-ratio: 16 / 10; }
.see[data-a="group"] .see-tw, .see[data-a="why"] .see-tw { position: static; width: auto; height: auto; clip: auto; }
.see ol.see-tw { list-style: none; padding: 0; }
.see ol.see-gl, .see ol.see-wl { border-inline-start: 2px solid rgb(var(--hair2)); margin: 0; margin-inline-start: 8px; }
.see-tw li { min-height: 48px; padding: 10px 12px; border: 0; align-items: center; }
.see-tw li { cursor: pointer; }
.see-gl li:first-child .see-pm > span { color: rgb(var(--ink2)); }
.see-gl li:first-child { border: 1px solid rgb(var(--brand)); border-radius: 12px; background: rgb(var(--brand-soft)); margin-inline-start: 8px; margin-bottom: 6px; }
.see-p-none { color: rgb(var(--muted)); }
.see-ev::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: rgb(var(--brand)); margin-inline-start: -18px; flex: none; }
.see-js ol.see-tw .see-pw { display: none; }
.see-nums { justify-content: space-between; gap: 8px; }
.see-ifb { min-height: 48px; flex: 1; }
.see-sms { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.see-sm { cursor: pointer; } .see-sm.see-big { grid-column: 1 / -1; }
.see-sm:not(.see-big) .see-smw { font-size: 12.5px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.see-cmp th, .see-cmp td { padding: 8px 4px; font-size: 13px; }
.see-sheet { position: fixed; inset: auto 0 0; margin: 0; width: 100%; max-width: none; max-height: 70dvh; overflow: auto; border: 0; border-radius: 18px 18px 0 0; padding: 18px 16px calc(14px + env(safe-area-inset-bottom)); background: rgb(var(--surface)); color: rgb(var(--ink2)); font-size: 15px; }
.see-sheet::backdrop { background: rgb(0 0 0 / .45); }
.see-shk { display: grid; color: rgb(var(--ink)); margin-bottom: 8px; } .see-shk > span { font-size: 13px; color: rgb(var(--muted)); }
.see-x { min-height: 48px; width: 100%; margin-top: 14px; border-radius: 12px; border: 1px solid rgb(var(--hair2)); background: none; font-weight: 600; }
.x-dialq { padding: 12px 0 0; }
.x-dialq .dq { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px 16px 10px; margin: 0 -16px; mask-image: linear-gradient(90deg, #000 85%, transparent); }
.x-dialq .dq .chip { flex: none; min-height: 48px; padding: 0 16px; border-radius: 999px; border: 1px solid rgb(var(--hair2)); background: rgb(var(--surface)); font-size: 14px; white-space: nowrap; }
.x-dialq .dq .chip[aria-pressed="true"] { border-color: rgb(var(--siva)); background: rgb(var(--siva-tint)); }
.x-dialq .dans { padding: 0; min-height: 0; font-size: 15px; }
.x-dialq .dans > b { display: block; color: rgb(var(--ink)); margin-bottom: 6px; }
.ar .x-dialq .dq { mask-image: linear-gradient(270deg, #000 85%, transparent); }
}