@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fonts/files/bricolage-grotesque-latin-ext-fdb6b064da.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fonts/files/bricolage-grotesque-latin-40c2cb34af.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/files/instrument-serif-latin-ext-7f73269f28.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/files/instrument-serif-latin-253e49fe39.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/files/instrument-serif-latin-ext-73b57d1238.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/files/instrument-serif-latin-d65c264453.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/fonts/files/geist-latin-ext-f8181936a8.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/fonts/files/geist-latin-04ce1a617b.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(/fonts/files/geist-mono-latin-ext-341e823880.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(/fonts/files/geist-mono-latin-749b501ebd.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face { font-family: "Bricolage Fallback"; src: local("Arial"); size-adjust: 104%; ascent-override: 88%; descent-override: 24%; line-gap-override: 0%; }
@font-face { font-family: "Instrument Fallback"; src: local("Georgia"); size-adjust: 88%; ascent-override: 110%; descent-override: 30%; line-gap-override: 0%; }
@font-face { font-family: "Geist Fallback"; src: local("Arial"); size-adjust: 102%; ascent-override: 92%; descent-override: 24%; line-gap-override: 0%; }
@font-face { font-family: "Geist Mono Fallback"; src: local("Courier New"); size-adjust: 96%; ascent-override: 92%; descent-override: 24%; line-gap-override: 0%; }
:root {
  color-scheme: light dark;
  
  --green: #4A614B; --green-700: #3A4F3C; --green-900: #2C3E2E;
  --cream: #F6F1E6; --cream-2: #ECE5D5;
  --ink: #0F1A11; --ink-2: #1C2A1E;
  --bone: var(--cream); --bone-2: var(--cream-2);
  --coral: #E56055; --coral-700: #B92E22; --coral-tint: #F5A294;
  --red: #EC4537;
  --blue: var(--green); --blue-700: var(--green-900); --blue-300: #CAD8C2;
  --lemon: var(--coral-tint); --lilac: var(--coral-tint);
  --mint: #B5E8BE; --mint-700: #286337;
  --white: #FFFCF6;
  
  --font-display: "Bricolage Grotesque", "Bricolage Fallback", "Arial Black", system-ui, sans-serif;
  --font-accent: "Instrument Serif", "Instrument Fallback", "Iowan Old Style", Georgia, serif;
  --font-ui: "Geist", "Geist Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "Geist Mono", "Geist Mono Fallback", ui-monospace, "SF Mono", Menlo, monospace;
  
  --fs-label: .6875rem;                                  
  --fs-small: .8125rem;                                  
  --fs-body: clamp(1rem, .96rem + .2vw, 1.125rem);       
  --fs-lead: clamp(1.1875rem, 1.05rem + .6vw, 1.5rem);   
  --fs-title: clamp(1.5rem, 1.2rem + 1.3vw, 2.25rem);    
  --fs-h2: clamp(2rem, 1.3rem + 3vw, 3.75rem);           
  --fs-display: clamp(2.75rem, 1.4rem + 6vw, 6.5rem);    
  --fs-hero: clamp(3.25rem, 1rem + 11vw, 11.5rem);       
  --lh-tight: .92; --lh-snug: 1.08; --lh-body: 1.5; --lh-loose: 1.65;
  --track-hero: -.045em; --track-display: -.03em; --track-title: -.02em; --track-label: .08em;
  --fw-regular: 400; --fw-medium: 500; --fw-semi: 600; --fw-bold: 700; --fw-extra: 800;
  
  --r-xs: 6px; --r-sm: 10px; --r-ctl: 14px; --r-card: 24px; --r-panel: var(--r-card); --r-hero: 40px; --r-pill: 999px;
  
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;
  --sp-9: 96px; --sp-10: 128px; --sp-11: 192px;
  --pad: clamp(20px, 5vw, 64px);           
  --measure: 62ch;
  --touch: 44px;
  --z-sticky: 20; --z-dropdown: 40; --z-dialog: 60; --z-toast: 80; --z-cursor: 100;
  
  --dur-instant: 90ms; --dur-fast: 140ms; --dur: 240ms; --dur-slow: 360ms; --dur-turn: 520ms; --dur-stage: 760ms;
  --ease-out: cubic-bezier(.2, .7, .2, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --ease-overshoot: cubic-bezier(.34, 1.56, .64, 1);                 
  --ease-spring: var(--ease-overshoot);
  --stagger: 55ms;
  --persp: 1200px;
  --tilt-max: 12deg;
  --motion: 1;                              
  
  color-scheme: light;
  --page: var(--cream); --raise-1: #FFFCF6; --raise-2: var(--cream-2); --raise-3: #DFE3D3;
  --fg: var(--ink); --fg-2: #344936; --fg-3: #4C604D;
  --hair: rgba(15, 26, 17, .12); --hair-strong: rgba(15, 26, 17, .24);
  --action: var(--green-700); --action-hover: var(--green-900); --action-fg: var(--cream); --action-soft: #E1E8DA;
  --link: #304733; --focus: var(--green-700); --celebrate: var(--coral); --celebrate-fg: var(--ink); --spark: var(--coral-tint);
  --ok: var(--mint-700); --ok-soft: #DEEFDA; --warn: #805112; --warn-soft: #F5E6C7; --bad: #A72C25; --bad-soft: #FCE0D8;
  --scrim: rgba(15, 26, 17, .48);
  --shadow-1: 0 2px 8px -4px rgba(15, 26, 17, .16);
  --shadow-2: 0 16px 36px -24px rgba(15, 26, 17, .35);
  --shadow-3: 0 28px 64px -24px rgba(15, 26, 17, .4);
  --glass-bg: rgba(246, 241, 230, .9); --glass-line: rgba(255, 252, 246, .5); --grain-opacity: .03;
}
:root[data-theme="dark"], .stage {
  color-scheme: dark;
  --page: var(--green); --raise-1: var(--green-700); --raise-2: var(--green-900); --raise-3: #203224;
  --fg: var(--cream); --fg-2: #ECE5D5; --fg-3: #D4DDC9;
  --hair: rgba(246, 241, 230, .15); --hair-strong: rgba(246, 241, 230, .3);
  --action: var(--coral); --action-hover: var(--coral-tint); --action-fg: var(--ink); --action-soft: #304432;
  --link: var(--coral-tint); --focus: var(--coral-tint); --celebrate: var(--coral); --celebrate-fg: var(--ink); --spark: var(--coral-tint);
  --ok: var(--mint); --ok-soft: #293F2E; --warn: #F5D49A; --warn-soft: #48412B; --bad: #FFB5A5; --bad-soft: #593B32;
  --scrim: rgba(8, 16, 9, .65);
  --shadow-1: 0 2px 8px -4px rgba(8, 16, 9, .25);
  --shadow-2: 0 16px 36px -24px rgba(8, 16, 9, .55);
  --shadow-3: 0 28px 64px -24px rgba(8, 16, 9, .65);
  --glass-bg: rgba(44, 62, 46, .92); --glass-line: rgba(246, 241, 230, .18); --grain-opacity: .03;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
  color-scheme: dark;
  --page: var(--green); --raise-1: var(--green-700); --raise-2: var(--green-900); --raise-3: #203224;
  --fg: var(--cream); --fg-2: #ECE5D5; --fg-3: #D4DDC9;
  --hair: rgba(246, 241, 230, .15); --hair-strong: rgba(246, 241, 230, .3);
  --action: var(--coral); --action-hover: var(--coral-tint); --action-fg: var(--ink); --action-soft: #304432;
  --link: var(--coral-tint); --focus: var(--coral-tint); --celebrate: var(--coral); --celebrate-fg: var(--ink); --spark: var(--coral-tint);
  --ok: var(--mint); --ok-soft: #293F2E; --warn: #F5D49A; --warn-soft: #48412B; --bad: #FFB5A5; --bad-soft: #593B32;
  --scrim: rgba(8, 16, 9, .65);
  --shadow-1: 0 2px 8px -4px rgba(8, 16, 9, .25);
  --shadow-2: 0 16px 36px -24px rgba(8, 16, 9, .55);
  --shadow-3: 0 28px 64px -24px rgba(8, 16, 9, .65);
  --glass-bg: rgba(44, 62, 46, .92); --glass-line: rgba(246, 241, 230, .18); --grain-opacity: .03;
  }
}
.paper {
  color-scheme: light;
  --page: var(--cream); --raise-1: #FFFCF6; --raise-2: var(--cream-2); --raise-3: #DFE3D3;
  --fg: var(--ink); --fg-2: #344936; --fg-3: #4C604D;
  --hair: rgba(15, 26, 17, .12); --hair-strong: rgba(15, 26, 17, .24);
  --action: var(--green-700); --action-hover: var(--green-900); --action-fg: var(--cream); --action-soft: #E1E8DA;
  --link: #304733; --focus: var(--green-700); --celebrate: var(--coral); --celebrate-fg: var(--ink); --spark: var(--coral-tint);
  --ok: var(--mint-700); --ok-soft: #DEEFDA; --warn: #805112; --warn-soft: #F5E6C7; --bad: #A72C25; --bad-soft: #FCE0D8;
  --scrim: rgba(15, 26, 17, .48);
  --shadow-1: 0 2px 8px -4px rgba(15, 26, 17, .16);
  --shadow-2: 0 16px 36px -24px rgba(15, 26, 17, .35);
  --shadow-3: 0 28px 64px -24px rgba(15, 26, 17, .4);
  --glass-bg: rgba(246, 241, 230, .9); --glass-line: rgba(255, 252, 246, .5); --grain-opacity: .03;
 }
.stage, .paper { background: var(--page); color: var(--fg); }
.on-blue { background: var(--green-700); color: var(--cream); --fg: var(--cream); --fg-2: var(--cream-2); --hair: rgba(246,241,230,.24); --action: var(--coral); --action-fg: var(--ink); --link: var(--coral-tint); --focus: var(--coral-tint); }
.on-coral, .on-lemon { background: var(--coral); color: var(--ink); --fg: var(--ink); --fg-2: #2C3E2E; --hair: rgba(15,26,17,.22); --action: var(--ink); --action-fg: var(--cream); --focus: var(--ink); }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: var(--fw-regular) var(--fs-body)/var(--lh-body) var(--font-ui); background: var(--page); color: var(--fg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-optical-sizing: auto; }
::selection { background: var(--lemon); color: var(--ink); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.focus-ring:focus-visible { outline: 0; box-shadow: var(--ring); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.t-hero { font: var(--fw-extra) var(--fs-hero)/var(--lh-tight) var(--font-display); letter-spacing: var(--track-hero); font-variation-settings: "opsz" 96; text-wrap: balance; }
.t-display { font: var(--fw-extra) var(--fs-display)/var(--lh-tight) var(--font-display); letter-spacing: var(--track-display); font-variation-settings: "opsz" 96; text-wrap: balance; }
.t-h2 { font: var(--fw-bold) var(--fs-h2)/var(--lh-snug) var(--font-display); letter-spacing: var(--track-display); text-wrap: balance; }
.t-title { font: var(--fw-bold) var(--fs-title)/var(--lh-snug) var(--font-display); letter-spacing: var(--track-title); text-wrap: balance; }
.t-lead { font: var(--fw-regular) var(--fs-lead)/1.4 var(--font-ui); color: var(--fg-2); text-wrap: pretty; }
.t-body { font: var(--fw-regular) var(--fs-body)/var(--lh-body) var(--font-ui); text-wrap: pretty; max-width: var(--measure); }
.t-label { font: var(--fw-medium) var(--fs-label)/1.2 var(--font-mono); text-transform: uppercase; letter-spacing: var(--track-label); color: var(--fg-3); }
.t-mono { font-family: var(--font-mono); }
.accent, em.accent { font-family: var(--font-accent); font-style: italic; font-weight: 400; letter-spacing: 0; font-variation-settings: normal; }
.t-hero .accent, .t-display .accent { font-size: 1.04em; padding-inline: .02em; }
.hairline { border: 1px solid var(--hair); }
.card, .panel { background: var(--raise-1); border: 1px solid var(--hair); border-radius: var(--r-card); box-shadow: var(--shadow-2); }
.panel { border-radius: var(--r-panel); }
.card--accent { background: var(--blue); color: var(--bone); border-color: transparent; --fg: var(--bone); --fg-2: var(--cream-2); --hair: rgba(245, 240, 230, .24); --action: var(--lemon); --action-fg: var(--ink); --link: var(--lemon); --focus: var(--lemon); }
.card--accent.card--coral { background: var(--coral); color: var(--ink); --fg: var(--ink); --fg-2: var(--green-900); --hair: rgba(13, 10, 30, .22); --action: var(--ink); --action-fg: var(--bone); --link: var(--ink); --focus: var(--ink); }
.grain { position: relative; isolation: isolate; }
.grain::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit; opacity: var(--grain-opacity); mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 220px; }
.glass { background: var(--glass-bg); -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3); border: 1px solid var(--hair); box-shadow: inset 0 1px 0 var(--glass-line), var(--shadow-2); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .glass { background: var(--raise-1); } }
@media (prefers-reduced-motion: reduce) {
  :root { --motion: 0; --dur-instant: 1ms; --dur-fast: 1ms; --dur: 1ms; --dur-slow: 1ms; --dur-turn: 1ms; --dur-stage: 1ms; --stagger: 0ms; --tilt-max: 0deg; }
  html { scroll-behavior: auto !important; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0ms !important; scroll-behavior: auto !important; }
}
:root, .stage, .paper, .on-blue, .on-coral, .on-lemon {   
  --font-body: var(--font-ui);
  --bg: var(--page); --surface: var(--raise-1); --surface-2: var(--raise-2); --surface-3: var(--raise-3);
  --border: var(--hair); --border-strong: var(--hair-strong);
  --text: var(--fg); --text-2: var(--fg-2); --text-3: var(--fg-3);
  --accent: var(--action); --accent-hover: var(--action-hover); --accent-ink: var(--action-fg); --accent-soft: var(--action-soft);
  --success: var(--ok); --success-soft: var(--ok-soft); --warning: var(--warn); --warning-soft: var(--warn-soft); --danger: var(--bad); --danger-soft: var(--bad-soft);
  --info: var(--link); --info-soft: var(--action-soft);
  --radius-xs: 4px; --radius-sm: 6px; --radius: 10px; --radius-lg: var(--r-ctl); --radius-xl: var(--r-card); --radius-full: var(--r-pill);
  --space-1: var(--sp-1); --space-2: var(--sp-2); --space-3: var(--sp-3); --space-4: var(--sp-4); --space-5: var(--sp-5); --space-6: var(--sp-6); --space-7: var(--sp-7); --space-8: var(--sp-8);
  --text-xs: .75rem; --text-sm: .8125rem; --text-base: .9375rem; --text-md: 1.0625rem; --text-lg: 1.25rem; --text-xl: 1.625rem; --text-2xl: 2.25rem;
  --leading-tight: 1.2; --leading: 1.5;
  --shadow-sm: var(--shadow-1); --shadow: var(--shadow-2); --shadow-lg: var(--shadow-3);
  --ring: 0 0 0 2px var(--page), 0 0 0 4px var(--focus);
  --ease: var(--ease-out); --spring: var(--ease-spring);
}
.v-icon { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; vertical-align: -.2em; }
.v-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 36px; padding: 0 var(--space-4); border-radius: var(--r-ctl); border: 1px solid var(--hair-strong); background: var(--raise-1); color: var(--fg); font: var(--fw-medium) var(--text-base)/1 var(--font-ui); cursor: pointer; transition: background var(--dur-fast), border-color var(--dur-fast), transform var(--dur-fast) var(--ease-out); }
.v-btn:hover { background: var(--raise-2); }
.v-btn:active { transform: translateY(1px) scale(.985); }
.v-btn[disabled] { opacity: .5; cursor: not-allowed; }
.v-btn--primary { background: var(--action); border-color: var(--action); color: var(--action-fg); }
.v-btn--primary:hover { background: var(--action-hover); border-color: var(--action-hover); }
.v-btn--danger { background: var(--bad); border-color: var(--bad); color: var(--white); }
.v-btn--ghost { background: transparent; border-color: transparent; }
@media (pointer: coarse) { .v-btn { min-height: var(--touch); } }
.v-toasts { position: fixed; z-index: var(--z-toast); inset: auto var(--space-4) var(--space-4) auto; display: flex; flex-direction: column; gap: var(--space-2); max-width: min(380px, calc(100vw - 32px)); pointer-events: none; }
.v-toast { pointer-events: auto; display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-3) var(--space-4); border-radius: var(--r-ctl); background: var(--fg); color: var(--page); box-shadow: var(--shadow-3); font-size: var(--text-sm); animation: v-toast-in var(--dur-turn) var(--ease-spring) both; transform-origin: 100% 100%; }
.v-toast--success { background: var(--ok); color: var(--page); } .v-toast--error { background: var(--bad); color: var(--page); }
.v-toast__body { flex: 1; } .v-toast button { all: unset; cursor: pointer; opacity: .8; } .v-toast button:hover { opacity: 1; }
@keyframes v-toast-in { from { opacity: 0; transform: perspective(900px) rotateY(-50deg) translateY(10px) scale(.96); } }
.v-dialog { border: 1px solid var(--hair); border-radius: var(--r-card); background: var(--raise-1); color: var(--fg); padding: 0; box-shadow: var(--shadow-3); width: min(480px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); }
.v-dialog::backdrop { background: var(--scrim); backdrop-filter: blur(3px); }
.v-dialog[open] { animation: v-dialog-in var(--dur-turn) var(--ease-spring) both; }
.v-dialog__head { padding: var(--space-5) var(--space-5) var(--space-2); font: var(--fw-bold) var(--text-md)/1.3 var(--font-display); letter-spacing: var(--track-title); }
.v-dialog__body { padding: 0 var(--space-5) var(--space-4); color: var(--fg-2); overflow: auto; }
.v-dialog__foot { display: flex; justify-content: flex-end; gap: var(--space-2); padding: var(--space-3) var(--space-5) var(--space-5); }
@keyframes v-dialog-in { from { opacity: 0; transform: perspective(1000px) rotateX(-12deg) translateY(12px) scale(.97); } }
@supports (transition-timing-function: linear(0, 1)) {
  :root { --ease-spring: linear(0, 0.044, 0.153, 0.297, 0.454, 0.605, 0.741, 0.855, 0.945, 1.01, 1.054, 1.079, 1.09, 1.09, 1.082, 1.07, 1.056, 1.042, 1.029, 1.018, 1.009, 1.002, 0.997, 0.994, 0.992, 0.992, 0.992, 0.993, 0.994, 0.996, 0.997, 0.998, 1); }
}
.js .reveal:not(.is-in) { opacity: 0; transform: perspective(var(--persp)) rotateY(-70deg) translateY(16px) scale(.96); }
.turn { transform-style: preserve-3d; backface-visibility: hidden; }
@media (prefers-reduced-motion: reduce) { .js .reveal:not(.is-in) { opacity: 1; transform: none; } }
.tilt { --rx: 0; --ry: 0; --mx: 50%; --my: 50%; --spec: 0; --tilt-scale: 1; position: relative; transform: perspective(var(--persp)) rotateX(calc(var(--rx) * 1deg)) rotateY(calc(var(--ry) * 1deg)) scale(var(--tilt-scale)); transform-style: preserve-3d; touch-action: pan-y; will-change: transform; transition: scale var(--dur) var(--ease-out); }
.tilt::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: calc(var(--spec) * .55); mix-blend-mode: soft-light;
  background: radial-gradient(circle at var(--mx) var(--my), rgba(255, 255, 255, .95), rgba(255, 255, 255, 0) 55%); }
.tilt > .lift { transform: translateZ(40px); }          
@media (prefers-reduced-motion: reduce) { .tilt { transform: none; will-change: auto; } .tilt::after { display: none; } }
.roll { display: inline-flex; font-variant-numeric: tabular-nums; line-height: 1; vertical-align: baseline; }
.roll__d { display: inline-block; height: 1em; overflow: hidden; }
.roll__strip { display: block; --n: 0; transform: translateY(calc(var(--n) * -1em)); transition: transform var(--dur-stage) var(--ease-spring) var(--roll-delay, 0ms); will-change: transform; }
.roll__strip > i { display: block; height: 1em; font-style: normal; }
.roll__c { display: inline-block; }
.kinetic .w { display: inline-block; overflow: clip; overflow-clip-margin: .12em; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.kinetic .w__in { display: inline-block; transform-origin: 0 100%; }
.js .kinetic:not(.is-in) .w__in { transform: translateY(110%) rotate(6deg); opacity: 0; }
.kinetic.is-in .w__in { transform: none; opacity: 1; transition: transform var(--dur-turn) var(--ease-spring) calc(var(--i) * var(--stagger)), opacity var(--dur) var(--ease-out) calc(var(--i) * var(--stagger)); }
.kinetic .ch { display: inline-block; }
.js .kinetic[data-split="letters"]:not(.is-in) .w__in { transform: none; opacity: 1; }
.js .kinetic[data-split="letters"]:not(.is-in) .ch { transform: translateY(105%) rotateX(-80deg); opacity: 0; }
.kinetic[data-split="letters"].is-in .ch { transform: none; opacity: 1; transition: transform var(--dur-turn) var(--ease-spring) calc(var(--i) * 22ms), opacity var(--dur) var(--ease-out) calc(var(--i) * 22ms); }
.kinetic[data-split="letters"] .w__in { perspective: 600px; }
.marquee { display: flex; overflow: hidden; --gap: var(--sp-6); gap: var(--gap); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee__track { display: flex; flex: none; gap: var(--gap); min-width: 100%; align-items: center; justify-content: space-around; animation: marquee var(--marquee-dur, 32s) linear infinite; }
.marquee[data-dir="rtl"] .marquee__track { animation-direction: reverse; }
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(calc(-100% - var(--gap))); } }
@media (prefers-reduced-motion: reduce) { .marquee { overflow-x: auto; mask-image: none; } .marquee__track { animation: none; } .marquee__track[aria-hidden="true"] { display: none; } }
@keyframes scroll-turn { from { transform: perspective(var(--persp)) rotateY(var(--turn-from, -40deg)) translateY(40px); opacity: .0; } to { transform: perspective(var(--persp)) rotateY(0) translateY(0); opacity: 1; } }
@keyframes scroll-spin { from { transform: perspective(var(--persp)) rotateY(0deg); } to { transform: perspective(var(--persp)) rotateY(360deg); } }
@keyframes scroll-drift { from { transform: translateY(var(--drift, 60px)); } to { transform: translateY(calc(var(--drift, 60px) * -1)); } }
@supports (animation-timeline: view()) {
  .scroll-turn { animation: scroll-turn linear both; animation-timeline: view(); animation-range: entry 0% cover 40%; }
  .scroll-spin { animation: scroll-spin linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
  .scroll-drift { animation: scroll-drift linear both; animation-timeline: view(); }
  .scroll-progress { position: fixed; inset: 0 0 auto 0; height: 3px; background: var(--action); transform-origin: 0 50%; z-index: var(--z-cursor); animation: grow linear both; animation-timeline: scroll(root); }
  @keyframes grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
}
@media (prefers-reduced-motion: reduce) { .scroll-turn, .scroll-spin, .scroll-drift, .scroll-progress { animation: none !important; } }
@supports (view-transition-name: x) {
  ::view-transition-group(root) { animation-duration: var(--dur-turn); animation-timing-function: var(--ease-in-out); }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; backface-visibility: hidden; }
  html[data-turn] { perspective: var(--persp); }
  html[data-turn] ::view-transition-old(root) { animation: pt-out var(--dur-slow) var(--ease-in-out) both; transform-origin: 0 50%; }
  html[data-turn] ::view-transition-new(root) { animation: pt-in var(--dur-turn) var(--ease-spring) both; transform-origin: 100% 50%; }
  html[data-turn="back"] ::view-transition-old(root) { animation-name: pt-out-back; transform-origin: 100% 50%; }
  html[data-turn="back"] ::view-transition-new(root) { animation-name: pt-in-back; transform-origin: 0 50%; }
}
@keyframes pt-out { to { transform: perspective(1400px) rotateY(-55deg) translateX(-6%); opacity: 0; } }
@keyframes pt-in { from { transform: perspective(1400px) rotateY(55deg) translateX(6%); opacity: 0; } }
@keyframes pt-out-back { to { transform: perspective(1400px) rotateY(55deg) translateX(6%); opacity: 0; } }
@keyframes pt-in-back { from { transform: perspective(1400px) rotateY(-55deg) translateX(-6%); opacity: 0; } }
.spin-slow { animation: spin-y 9s linear infinite; transform-style: preserve-3d; }
@keyframes spin-y { to { transform: perspective(var(--persp)) rotateY(360deg); } }
.skeleton { position: relative; overflow: hidden; background: var(--raise-2); border-radius: var(--r-sm); }
.skeleton::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--fg) 8%, transparent), transparent); animation: sweep 1.4s var(--ease-in-out) infinite; }
@keyframes sweep { to { transform: translateX(100%); } }
.paused * { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) { .spin-slow { animation: none; } .skeleton::after { animation: none; display: none; } }
:root { --p3d-ink: var(--ink, #0D0A1E); --p3d-ink2: var(--ink-2, #1A1433); --p3d-bone: var(--bone, #F5F0E6); --p3d-blue: var(--blue, #3B2CFF); --p3d-coral: var(--coral, #FF5A3C); --p3d-lilac: var(--lilac, #C8B8FF); }
cabriola-hero { display: block; position: relative; aspect-ratio: 4 / 3; min-height: 320px; contain: layout paint; isolation: isolate; border-radius: inherit; overflow: hidden; background: var(--p3d-ink); }
cabriola-hero[mood="light"] { background: var(--p3d-bone); }
cabriola-hero .p3d-fallback, cabriola-hero .p3d-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
cabriola-hero .p3d-canvas { opacity: 0; transition: opacity 700ms cubic-bezier(.2, .7, .2, 1); pointer-events: auto; touch-action: pan-y; }
cabriola-hero.p3d-live .p3d-canvas { opacity: 1; }
cabriola-hero .p3d-fallback { transition: opacity 700ms cubic-bezier(.2, .7, .2, 1) 120ms; }
cabriola-hero.p3d-live .p3d-fallback { opacity: 0; pointer-events: none; }
.p3d-fallback { perspective: 1400px; perspective-origin: 50% 42%; display: grid; place-items: center; overflow: hidden;
  background: radial-gradient(60% 55% at 50% 48%, color-mix(in oklab, var(--p3d-blue) 26%, transparent), transparent 70%), var(--p3d-ink); }
cabriola-hero[mood="light"] .p3d-fallback { background: radial-gradient(60% 55% at 50% 48%, #fff, transparent 70%), var(--p3d-bone); }
.p3d-stack { position: relative; width: min(38%, 340px); min-width: 150px; aspect-ratio: 4 / 5; transform-style: preserve-3d; transform: rotateX(6deg) rotateY(-14deg); }
.p3d-stack .p3d-card { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 6%; background: var(--p3d-bone); box-shadow: 0 1px 0 rgba(255,255,255,.5) inset, 0 40px 60px -24px rgba(0,0,0,.55), 0 12px 24px -10px rgba(0,0,0,.4); backface-visibility: hidden; }
.p3d-stack .p3d-card:nth-child(1) { transform: translate3d(-62%, 4%, -140px) rotateY(32deg) rotateZ(-5deg) scale(.92); filter: saturate(.9) brightness(.82); }
.p3d-stack .p3d-card:nth-child(2) { transform: translate3d(0, 0, 40px) rotateZ(-1.5deg); }
.p3d-stack .p3d-card:nth-child(3) { transform: translate3d(66%, 6%, -150px) rotateY(-32deg) rotateZ(5deg) scale(.9); filter: saturate(.9) brightness(.8); }
.p3d-ribbon { position: absolute; left: 50%; top: 52%; width: 74%; aspect-ratio: 2.4; translate: -50% -50%; pointer-events: none; transform: rotate(-14deg) rotateX(62deg); transform-style: preserve-3d; }
.p3d-ribbon::before, .p3d-ribbon::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 5px solid var(--p3d-coral); border-left-color: transparent; border-bottom-color: color-mix(in oklab, var(--p3d-coral) 60%, transparent); filter: drop-shadow(0 6px 10px rgba(0,0,0,.35)); }
.p3d-ribbon::after { inset: 7% 4%; border-width: 3px; border-color: var(--p3d-lilac); border-right-color: transparent; border-top-color: color-mix(in oklab, var(--p3d-lilac) 60%, transparent); transform: rotate(42deg); }
@media (prefers-reduced-motion: no-preference) {
  .p3d-stack { animation: p3d-enter 900ms cubic-bezier(.2, .9, .25, 1.15) both, p3d-sway 9s ease-in-out 1s infinite alternate; }
  @keyframes p3d-enter { from { transform: rotateX(6deg) rotateY(-70deg); opacity: 0; } to { transform: rotateX(6deg) rotateY(-14deg); opacity: 1; } }
  @keyframes p3d-sway { from { transform: rotateX(6deg) rotateY(-14deg); } to { transform: rotateX(4deg) rotateY(10deg); } }
}
.p3d-tilt { display: grid; place-items: center; width: 100%; height: 100%; perspective: 1200px; }
.p3d-tilt-body { position: relative; transform-style: preserve-3d; transition: transform 120ms linear; will-change: transform; max-height: 100%; }
.p3d-tilt-screen { display: block; max-width: 100%; max-height: 100%; width: 100%; height: auto; object-fit: cover; }
.p3d-tilt-phone .p3d-tilt-body { aspect-ratio: 9 / 19; height: min(100%, 560px); padding: 8px; background: #2B2745; border-radius: 34px; box-shadow: 0 0 0 1.5px rgba(255,255,255,.18) inset, 0 40px 60px -22px rgba(0,0,0,.6); }
.p3d-tilt-phone .p3d-tilt-screen { height: 100%; border-radius: 27px; }
.p3d-tilt-browser .p3d-tilt-body { width: min(100%, 720px); padding: 28px 7px 7px; background: #1A1433; border-radius: 14px; box-shadow: 0 0 0 1.5px rgba(255,255,255,.14) inset, 0 40px 60px -26px rgba(0,0,0,.6); }
.p3d-tilt-browser .p3d-tilt-body::before { content: ""; position: absolute; left: 12px; top: 10px; width: 8px; height: 8px; border-radius: 50%; background: #FF5A3C; box-shadow: 14px 0 #E8FF4F, 28px 0 #7DF0C0; }
.p3d-tilt-browser .p3d-tilt-screen { border-radius: 8px; }
.p3d-tilt-card .p3d-tilt-body { width: min(100%, 340px); border-radius: 6%; overflow: hidden; box-shadow: 0 1px 0 rgba(255,255,255,.5) inset, 0 40px 60px -24px rgba(0,0,0,.5); }
.p3d-tilt-glare { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(60% 50% at var(--gx, 50%) var(--gy, 30%), rgba(255,255,255,.28), transparent 62%); mix-blend-mode: soft-light; }
@media (prefers-reduced-motion: reduce) { .p3d-tilt-body { transition: none; transform: rotateX(-2deg) rotateY(-8deg); } }
.p3d-ring-fallback { display: flex; gap: 14px; overflow-x: auto; padding: 8px 4px 20px; scroll-snap-type: x mandatory; perspective: 1000px; list-style: none; margin: 0; }
.p3d-ring-fallback li { flex: 0 0 clamp(150px, 22vw, 220px); scroll-snap-align: center; }
.p3d-ring-fallback button { all: unset; cursor: pointer; display: block; border-radius: 10px; overflow: hidden; box-shadow: 0 24px 40px -22px rgba(0,0,0,.55); transform: rotateY(var(--ry, 0deg)); transition: transform 280ms cubic-bezier(.2, .9, .25, 1.1); }
.p3d-ring-fallback button:hover, .p3d-ring-fallback button:focus-visible { transform: rotateY(0) translateY(-4px) scale(1.03); }
.p3d-ring-fallback button:focus-visible { outline: 2px solid var(--p3d-blue); outline-offset: 3px; }
.p3d-ring-fallback img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.p3d-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
:root {
  color-scheme: dark; --hdr-h: 64px; --sec-y: clamp(64px, 7.2vw, 104px); --gut: clamp(20px, 5vw, 64px);
  --fg: var(--bone); --fg-2: rgba(245, 240, 230, .76); --fg-3: rgba(245, 240, 230, .6); --line: rgba(245, 240, 230, .14); --line-2: rgba(245, 240, 230, .26);
  --card: var(--ink-2); --e-out: cubic-bezier(.2, .7, .2, 1); --spring: var(--ease-spring, cubic-bezier(.34, 1.56, .64, 1)); interpolate-size: allow-keywords;
}
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 88px; background: var(--ink); }
body { margin: 0; background: var(--ink); color: var(--fg); font: 400 1rem/1.6 var(--font-ui); -webkit-font-smoothing: antialiased; overflow-x: clip; }
img, svg, video, iframe { max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--lemon); outline-offset: 3px; border-radius: 8px; }
.paper :focus-visible, .btn--lemon:focus-visible { outline-color: var(--blue); }
.skip { position: absolute; left: 12px; top: -90px; z-index: 120; background: var(--lemon); color: var(--ink); padding: 14px 20px; border-radius: var(--r-ctl); font-weight: 600; }
.skip:focus { top: 12px; }
.wrap { width: min(1240px, 100%); margin-inline: auto; padding-inline: var(--gut); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sec { position: relative; padding-block: var(--sec-y); }
.sec + .sec { border-top: 1px solid var(--line); }
.sec--tight { padding-block: clamp(32px, 4vw, 56px); }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: none; }
.card--accent { background: var(--blue); border-color: transparent; color: var(--bone); --fg-2: rgba(245, 240, 230, .9); --line: rgba(245, 240, 230, .28); }
.card--accent.card--coral { background: var(--coral); color: var(--ink); --fg-2: rgba(13, 10, 30, .84); --line: rgba(13, 10, 30, .24); }
.paper { background: var(--bone); color: var(--ink); border-radius: var(--r-card); --fg: var(--ink); --fg-2: rgba(13, 10, 30, .76); --fg-3: rgba(13, 10, 30, .62); --line: rgba(13, 10, 30, .14); --card: #FBF8F2; }
.paper h1 em, .paper h2 em, .paper h3 em { color: var(--blue); }
h1, h2, h3, h4 { font-family: var(--font-display); margin: 0; text-wrap: balance; font-variation-settings: "opsz" 96; }
h1 { font-weight: 800; font-size: clamp(2.6rem, 1.15rem + 5.3vw, 6rem); line-height: .96; letter-spacing: -.04em; }
h2 { font-weight: 800; font-size: clamp(2rem, 1.1rem + 3.7vw, 4.25rem); line-height: 1; letter-spacing: -.035em; }
h3 { font-weight: 700; font-size: clamp(1.25rem, 1.05rem + .8vw, 1.75rem); line-height: 1.12; letter-spacing: -.025em; }
h1 em, h2 em, h3 em { font-family: var(--font-accent); font-style: italic; font-weight: 400; letter-spacing: -.01em; font-size: 1.1em; padding-inline: .02em .04em; font-variation-settings: normal; }
h1 em { color: var(--lemon); }
p { margin: 0 0 1em; text-wrap: pretty; }
.lede { font-size: clamp(1.0625rem, 1rem + .35vw, 1.3125rem); line-height: 1.5; color: var(--fg-2); max-width: 36em; }
.eyebrow { display: block; font: 500 .75rem/1.3 var(--font-mono); text-transform: uppercase; letter-spacing: .1em; color: var(--fg-3); margin: 0 0 18px; }
.sec-head { max-width: 860px; margin-bottom: clamp(32px, 4.5vw, 56px); }
.sec-head .lede { margin: 20px 0 0; }
.note { font-size: .875rem; color: var(--fg-3); max-width: 60ch; }
.kin .w { display: inline-block; overflow: clip; overflow-clip-margin: .14em; vertical-align: top; padding-bottom: .1em; margin-bottom: -.1em; }
.kin em .w { overflow: visible; }
.kin .w__in { display: inline-block; }
@media (prefers-reduced-motion: no-preference) { .kin--auto .w__in { animation: kin-rise 800ms var(--e-out) calc(80ms + var(--i, 0) * 60ms) both; } }
@keyframes kin-rise { from { transform: translateY(105%); opacity: 0; } }
.btn { --b: var(--lemon); --f: var(--ink); display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 26px; border-radius: 999px; border: 1.5px solid var(--b); background: var(--b); color: var(--f); font: 600 1rem/1 var(--font-ui); text-decoration: none; cursor: pointer; white-space: nowrap; transition: transform .25s var(--e-out), background .2s, color .2s, border-color .2s; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: none; }
.btn svg { width: 1.1em; height: 1.1em; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s var(--e-out); }
.btn:hover svg { transform: translateX(3px); }
.btn--primary { --b: var(--lemon); --f: var(--ink); }
.btn--lemon { --b: var(--lemon); --f: var(--ink); }
.btn--ghost { background: transparent; color: var(--fg); border-color: var(--line-2); }
.btn--ghost:hover { border-color: var(--fg); }
.paper .btn--primary, .paper .btn--ink { --b: var(--ink); --f: var(--bone); }
.paper .btn--ghost { color: var(--ink); border-color: rgba(13, 10, 30, .3); }
.btn--sm { min-height: 44px; padding: 0 18px; font-size: .9375rem; }
.btn--prov { --b: var(--bone); --f: var(--ink); width: 100%; }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.hdr { position: fixed; z-index: 60; top: 0; left: 0; right: 0; padding-top: env(safe-area-inset-top); transition: background .25s, border-color .25s; border-bottom: 1px solid transparent; }
.hdr.is-scrolled, body:has(.mnav.is-open) .hdr { background: rgba(13, 10, 30, .9); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom-color: var(--line); }
.hdr__bar { max-width: 1240px; margin-inline: auto; display: flex; align-items: center; gap: 8px; min-height: var(--hdr-h); padding-inline: var(--gut); position: relative; z-index: 2; }
.logo { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; text-decoration: none; font: 800 1.3rem/1 var(--font-display); letter-spacing: -.04em; color: var(--bone); }
.logo__m { flex: none; }
.nav { display: none; gap: 2px; margin-left: 18px; }
.nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 999px; text-decoration: none; font-weight: 500; font-size: .9375rem; color: var(--fg-2); transition: color .2s, background .2s; }
.nav a:hover { color: var(--bone); background: rgba(245, 240, 230, .08); }
.nav a[aria-current="page"] { color: var(--bone); box-shadow: inset 0 -2px 0 var(--lemon); border-radius: 0; }
.hdr__r { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.burger { width: 44px; height: 44px; border: 0; background: transparent; border-radius: 50%; display: grid; place-items: center; cursor: pointer; color: var(--bone); }
.burger span { display: block; width: 20px; height: 2px; background: currentColor; border-radius: 2px; box-shadow: 0 -6px 0 currentColor, 0 6px 0 currentColor; transition: box-shadow .2s, transform .3s var(--e-out); }
.burger[aria-expanded="true"] span { box-shadow: none; transform: rotate(45deg); }
.burger[aria-expanded="true"] span::after { content: ""; display: block; width: 20px; height: 2px; background: currentColor; transform: rotate(90deg); }
.mnav { position: fixed; inset: 0; z-index: 1; background: var(--ink); display: none; flex-direction: column; padding: calc(var(--hdr-h) + 16px + env(safe-area-inset-top)) var(--gut) max(24px, env(safe-area-inset-bottom)); overflow: auto; }
.mnav.is-open { display: flex; }
.mnav a { display: flex; align-items: center; justify-content: space-between; min-height: 60px; text-decoration: none; font: 700 clamp(1.6rem, 7vw, 2.2rem)/1.1 var(--font-display); letter-spacing: -.03em; border-bottom: 1px solid var(--line); }
.mnav a small { font: 500 .75rem/1 var(--font-mono); color: var(--fg-3); letter-spacing: .1em; order: 2; }
@media (min-width: 1020px) { .nav { display: inline-flex; } .burger, .mnav { display: none !important; } }
@media (max-width: 380px) { .hdr__cta { padding: 0 14px; font-size: .875rem; } .logo { font-size: 1.15rem; } }
@media (max-width: 340px) { .hdr__cta { display: none; } }
.dock { position: fixed; z-index: 55; left: 50%; bottom: calc(12px + env(safe-area-inset-bottom)); display: none; align-items: center; gap: 8px; min-height: 48px; padding: 0 22px; border-radius: 999px; background: var(--lemon); color: var(--ink); text-decoration: none; font: 600 .9375rem/1 var(--font-ui); white-space: nowrap; box-shadow: 0 10px 30px -8px rgba(0, 0, 0, .7), 0 0 0 1px rgba(13, 10, 30, .2); transform: translate(-50%, 160%); opacity: 0; pointer-events: none; transition: transform .4s var(--e-out), opacity .25s; }
.dock svg { width: 1.05em; height: 1.05em; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.dock.is-on { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }
@media (max-width: 759px) { .dock { display: flex; } }
.device { --dw: 280px; position: relative; width: min(100%, var(--dw)); margin-inline: auto; padding: 9px; border-radius: 44px; background: #07050f; box-shadow: 0 0 0 1px rgba(245, 240, 230, .16), 0 40px 80px -30px rgba(0, 0, 0, .8); transform: perspective(1200px) rotateY(calc(var(--ry, 0) * 7deg)) rotateX(calc(var(--rx, 0) * -5deg)); transition: transform .2s linear; }
.device__screen { position: relative; aspect-ratio: 1 / 2; border-radius: 36px; overflow: hidden; background: #0d0a1e; }
.device__screen::after { content: ""; position: absolute; z-index: 3; top: 9px; left: 50%; width: 27%; height: 20px; margin-left: -13.5%; border-radius: 999px; background: #07050f; pointer-events: none; }
.device__screen > img, .device__screen > iframe, .device__screen > video { position: absolute; inset: 0; width: 100%; height: 100%; display: block; border: 0; object-fit: cover; }
.device__screen > iframe { width: 390px; height: 780px; transform-origin: 0 0; transform: scale(var(--k, .7)); background: var(--bone); opacity: 0; transition: opacity .5s; pointer-events: none; }
.device__screen > iframe.is-on { opacity: 1; }
.device--sm { --dw: 210px; padding: 7px; border-radius: 34px; } .device--sm .device__screen { border-radius: 28px; } .device--sm .device__screen::after { height: 14px; top: 7px; }
@media (prefers-reduced-motion: reduce) { .device { transform: none; } }
.cards { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); }
.cards--3 { grid-template-columns: 1fr; }
@media (min-width: 820px) { .cards--3 { grid-template-columns: repeat(3, 1fr); } }
.step, .case { padding: clamp(22px, 2.4vw, 32px); }
.step__n { display: block; font: 500 .75rem/1 var(--font-mono); letter-spacing: .1em; color: var(--fg-3); margin-bottom: 36px; }
.step p, .case p { margin: 10px 0 0; color: var(--fg-2); font-size: .9688rem; }
.case__i { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--r-ctl); border: 1px solid var(--line-2); color: var(--lemon); margin-bottom: 28px; }
.case__i svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.kit { display: grid; gap: 16px; }
@media (min-width: 900px) { .kit { grid-template-columns: repeat(3, 1fr); } }
.kitc { display: flex; flex-direction: column; gap: 12px; padding: clamp(22px, 2.4vw, 32px); }
.kitc p { margin: 0; color: var(--fg-2); font-size: .9688rem; }
.kitc__art { margin-top: auto; padding-top: 20px; display: grid; place-items: center; min-height: 260px; }
.lnk { width: min(100%, 300px); border-radius: var(--r-ctl); overflow: hidden; background: var(--bone); color: var(--ink); text-align: left; }
.lnk img { display: block; width: 100%; height: 150px; object-fit: cover; object-position: top; }
.lnk div { padding: 12px 16px 14px; display: grid; gap: 2px; }
.lnk b { font: 700 .9375rem/1.2 var(--font-display); letter-spacing: -.02em; }
.lnk span { font-size: .8125rem; color: rgba(13, 10, 30, .76); line-height: 1.3; }
.lnk small { font: 500 .6875rem/1 var(--font-mono); text-transform: uppercase; letter-spacing: .08em; color: rgba(13, 10, 30, .62); margin-top: 4px; }
.qr { width: min(60%, 180px); aspect-ratio: 1; padding: 14px; border-radius: var(--r-ctl); background: var(--bone); }
.qr svg { display: block; width: 100%; height: 100%; }
.collect { display: grid; gap: clamp(32px, 5vw, 72px); align-items: center; }
@media (min-width: 960px) { .collect { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); } }
.ticks { list-style: none; padding: 0; margin: 24px 0 0; display: grid; }
.ticks li { display: flex; gap: 14px; padding: 14px 0; border-top: 1px solid var(--line); color: var(--fg-2); }
.ticks li::before { content: ""; flex: none; width: 8px; height: 8px; margin-top: .6em; background: var(--lemon); border-radius: 2px; }
.ticks b { font-weight: 600; color: var(--fg); }
.win { overflow: hidden; border: 1px solid var(--line); }
.win__bar { padding: 14px 18px; border-bottom: 1px solid var(--line); font: 500 .75rem/1.2 var(--font-mono); letter-spacing: .04em; color: var(--fg-3); }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--line); }
.stats div { padding: 16px 18px; border-right: 1px solid var(--line); } .stats div:last-child { border: 0; }
.stats b { display: block; font: 800 clamp(2rem, 1.4rem + 2.4vw, 3.2rem)/1 var(--font-display); letter-spacing: -.05em; }
.stats small { font: 500 .6875rem/1.2 var(--font-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--fg-3); }
.scrollx { position: relative; overflow-x: auto; }
.tbl { width: 100%; border-collapse: collapse; font-size: .9375rem; min-width: 460px; }
.tbl th { text-align: left; font: 500 .6875rem/1 var(--font-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--fg-3); padding: 14px 18px; }
.tbl td { padding: 12px 18px; border-top: 1px solid var(--line); white-space: nowrap; }
.tbl .is-new { animation: rowin .6s var(--e-out) both; }
@keyframes rowin { from { opacity: 0; transform: translateY(-8px); } }
.pill { display: inline-flex; align-items: center; padding: 5px 12px; border-radius: 999px; font: 600 .8125rem/1 var(--font-ui); }
.pill--y { background: #CBF7E3; color: #06583a; } .pill--n { background: #FFDDD5; color: #8a2108; }
.fields { display: grid; gap: 10px; }
.fld { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 20px; font-weight: 600; }
.fld small { font: 500 .75rem/1.2 var(--font-mono); letter-spacing: .06em; color: var(--fg-3); text-align: right; }
.edit { display: grid; gap: clamp(32px, 5vw, 72px); align-items: center; }
@media (min-width: 960px) { .edit { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); } }
.shot { margin: 0; padding: 8px; border-radius: var(--r-card); background: var(--card); border: 1px solid var(--line); }
.shot img { display: block; width: 100%; height: auto; border-radius: calc(var(--r-card) - 8px); background: var(--ink); }
.shot figcaption { padding: 12px 8px 6px; font: 500 .75rem/1.3 var(--font-mono); letter-spacing: .04em; color: var(--fg-3); }
.shots { display: grid; gap: 16px; align-items: end; grid-template-columns: 1fr; }
@media (min-width: 640px) { .shots { grid-template-columns: 1fr 34%; } }
.shots .shot--phone img { aspect-ratio: auto; }
.con { display: grid; gap: clamp(32px, 5vw, 72px); align-items: center; }
@media (min-width: 900px) { .con { grid-template-columns: 1fr 1fr; } }
.thread { display: grid; gap: 12px; }
.msg { max-width: 90%; padding: 16px 20px 18px; border-radius: var(--r-card); font-size: 1.0625rem; line-height: 1.4; }
.msg b { display: block; font: 500 .6875rem/1 var(--font-mono); text-transform: uppercase; letter-spacing: .1em; margin-bottom: 8px; opacity: .8; }
.msg--me { justify-self: end; background: var(--blue); color: var(--bone); }
.msg--them { justify-self: start; background: var(--card); border: 1px solid var(--line); }
.plans { display: grid; gap: 16px; }
@media (min-width: 760px) { .plans--3 { grid-template-columns: repeat(3, 1fr); } .plans--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .plans--4 { grid-template-columns: repeat(4, 1fr); } }
.plan { position: relative; display: flex; flex-direction: column; gap: 12px; padding: clamp(22px, 2.4vw, 32px); border-radius: var(--r-card); background: var(--card); border: 1px solid var(--line); }
.plan--accent { background: var(--blue); border-color: transparent; --fg-2: rgba(245, 240, 230, .9); --line: rgba(245, 240, 230, .28); }
.plan--accent .btn { --b: var(--lemon); --f: var(--ink); }
.plan h3 { font-size: clamp(1.35rem, 1.1rem + .9vw, 1.9rem); }
.plan > p { margin: 0; color: var(--fg-2); font-size: .9375rem; }
.price { font: 800 clamp(2.8rem, 2rem + 3vw, 4.4rem)/.95 var(--font-display); letter-spacing: -.055em; margin: 8px 0 2px; display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }
.price small { font: 500 .875rem/1.2 var(--font-ui); letter-spacing: 0; color: var(--fg-2); }
.plan ul { list-style: none; margin: 6px 0 16px; padding: 0; }
.plan li { display: flex; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); font-size: .9375rem; }
.plan li::before { content: ""; flex: none; width: 6px; height: 6px; margin-top: .62em; background: currentColor; border-radius: 2px; opacity: .7; }
.plan .btn { margin-top: auto; width: 100%; white-space: normal; text-align: center; line-height: 1.15; padding-block: 12px; }
.is-skel { min-height: 380px; background: linear-gradient(100deg, rgba(245, 240, 230, .04) 30%, rgba(245, 240, 230, .1) 50%, rgba(245, 240, 230, .04) 70%) 0 0 / 220% 100%; animation: skel 1.6s linear infinite; }
@keyframes skel { to { background-position: -220% 0; } }
.alert { padding: 16px 18px; border-radius: var(--r-ctl); background: var(--card); color: var(--bone); border: 1px solid var(--line); }
.alert--ok { background: #CBF7E3; color: #06583a; border-color: transparent; }
.cmp-wrap { position: relative; overflow-x: auto; padding: 0; }
.cmp { width: 100%; border-collapse: collapse; min-width: 720px; }
.cmp th, .cmp td { padding: 16px 20px; text-align: left; border-bottom: 1px solid var(--line); font-size: .9375rem; }
.cmp thead th { font: 700 1.0625rem/1.2 var(--font-display); letter-spacing: -.02em; }
.cmp tbody tr:last-child td { border-bottom: 0; }
.cmp .yes { color: var(--mint-700); font-weight: 700; } .cmp .no { color: var(--fg-3); }
.faq { max-width: 880px; border-bottom: 1px solid var(--line); }
.faq details { border-top: 1px solid var(--line); }
.faq summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 24px; cursor: pointer; min-height: 64px; padding: 18px 0; font: 700 clamp(1.1rem, 1rem + .6vw, 1.4rem)/1.25 var(--font-display); letter-spacing: -.02em; }
.faq summary::-webkit-details-marker { display: none; }
.faq__i { position: relative; flex: none; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line-2); transition: transform .3s var(--e-out); }
.faq__i::before, .faq__i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; margin: -1px 0 0 -6px; background: currentColor; border-radius: 2px; }
.faq__i::after { transform: rotate(90deg); }
.faq details[open] .faq__i { transform: rotate(45deg); }
.faq__a { padding: 0 48px 24px 0; color: var(--fg-2); font-size: 1.0625rem; max-width: 40em; }
.faq__a p { margin: 0; }
.faq details::details-content { block-size: 0; overflow: clip; transition: block-size .3s var(--e-out), content-visibility .3s allow-discrete; }
.faq details[open]::details-content { block-size: auto; }
@media (prefers-reduced-motion: reduce) { .faq details::details-content, .faq__i { transition: none; } }
.final { padding-block: var(--sec-y); border-top: 1px solid var(--line); }
.final__card { position: relative; isolation: isolate; overflow: clip; display: grid; gap: 28px; padding: clamp(28px, 6vw, 72px); }
.final__bg, .final__scrim { position: absolute; inset: 0; z-index: -1; }
.final__bg { width: 100%; height: 100%; object-fit: cover; }
.final__scrim { background: rgba(13, 10, 30, .7); }
.final h2 { font-size: clamp(2.1rem, 1.1rem + 4.4vw, 4.6rem); max-width: 12em; }
.crumbs { margin-bottom: 22px; font: 500 .75rem/1.3 var(--font-mono); text-transform: uppercase; letter-spacing: .08em; }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 0 4px; list-style: none; padding: 0; margin: 0; }
.crumbs li { display: inline-flex; align-items: center; min-height: 32px; }
.crumbs li + li::before { content: "/"; margin-right: 6px; opacity: .5; }
.crumbs a { display: inline-flex; align-items: center; min-height: 32px; color: var(--fg-2); text-decoration: none; } .crumbs a:hover { color: var(--bone); text-decoration: underline; }
.crumbs [aria-current] { color: var(--fg); }
.tpl-fit .lede { max-width: 40em; }
.tags, .tcard__tags { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; margin: 0; }
.tag { display: inline-flex; align-items: center; min-height: 28px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line-2); font: 500 .6875rem/1 var(--font-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--fg-2); }
.tpl-tags { margin-top: 18px; }
.swatches { list-style: none; display: flex; flex-wrap: wrap; gap: 10px 20px; padding: 0; margin: 18px 0 0; }
.swatches li { display: inline-flex; align-items: center; gap: 8px; font-size: .9375rem; }
.sw { display: inline-block; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--line-2); }
.pagehead { padding: calc(var(--hdr-h) + clamp(40px, 6vw, 88px)) 0 clamp(32px, 4vw, 56px); }
.pagehead h1 { font-size: clamp(2.6rem, 1.1rem + 6vw, 6.4rem); max-width: 11em; }
.pagehead .lede { margin: 22px 0 0; }
.filters { position: sticky; top: calc(var(--hdr-h) + env(safe-area-inset-top)); z-index: 40; background: rgba(13, 10, 30, .92); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-block: 1px solid var(--line); }
.filters__in { display: flex; gap: 6px 24px; align-items: center; overflow-x: auto; padding-block: 6px; scrollbar-width: none; }
.filters__in::-webkit-scrollbar { display: none; }
.fgroup { display: flex; align-items: center; gap: 2px; flex: none; }
.fgroup b { font: 500 .6875rem/1 var(--font-mono); text-transform: uppercase; letter-spacing: .1em; color: var(--fg-3); margin-right: 8px; }
.fbtn { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 14px; border: 0; border-radius: 999px; background: transparent; color: var(--fg-2); font: 500 .875rem/1 var(--font-ui); cursor: pointer; white-space: nowrap; transition: background .2s, color .2s; }
.fbtn:hover { background: rgba(245, 240, 230, .08); }
.fbtn[aria-pressed="true"] { background: var(--lemon); color: var(--ink); }
.fbtn .sw { width: 14px; height: 14px; }
.grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); }
.tcard[hidden] { display: none; }
.empty { padding: 64px 0; text-align: center; font: 700 1.5rem/1.2 var(--font-display); }
.posts { display: grid; border-top: 1px solid var(--line); }
.post { position: relative; display: grid; gap: 8px; padding: clamp(24px, 3.4vw, 44px) 0; border-bottom: 1px solid var(--line); }
.post h2 { font-size: clamp(1.7rem, 1.1rem + 2.4vw, 3.2rem); line-height: 1.04; max-width: 18em; }
.post h2 a { text-decoration: none; } .post h2 a::after { content: ""; position: absolute; inset: 0; }
.post:hover h2 a { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.post p { margin: 0; color: var(--fg-2); max-width: 44em; }
.post__meta { font: 500 .75rem/1.3 var(--font-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--fg-3) !important; font-size: .75rem !important; }
.post-page { padding-top: calc(var(--hdr-h) + clamp(24px, 4vw, 56px)); padding-bottom: var(--sec-y); }
.post-card { padding: clamp(22px, 5vw, 64px); max-width: 1080px; margin-inline: auto; }
.post-head { margin-bottom: clamp(24px, 4vw, 48px); }
.post-head h1 { font-size: clamp(2rem, 1.1rem + 3.8vw, 4.4rem); line-height: 1; margin-bottom: 18px; max-width: 16em; }
.post-body { display: grid; gap: clamp(24px, 4vw, 56px); }
@media (min-width: 1000px) { .post-body { grid-template-columns: 220px minmax(0, 1fr); align-items: start; } .toc { position: sticky; top: calc(var(--hdr-h) + 24px); } }
.toc { padding: 20px; border-radius: var(--r-ctl); background: var(--bone-2); font-size: .9375rem; }
.toc b { display: block; font: 500 .6875rem/1 var(--font-mono); text-transform: uppercase; letter-spacing: .1em; color: var(--fg-3); margin-bottom: 10px; }
.toc ol { margin: 0; padding: 0; list-style: none; display: grid; counter-reset: t; }
.toc li { counter-increment: t; }
.toc a { display: flex; gap: 10px; align-items: baseline; padding: 8px 0; min-height: 44px; text-decoration: none; color: var(--ink); line-height: 1.3; }
.toc a::before { content: counter(t, decimal-leading-zero); font: 500 .6875rem/1 var(--font-mono); color: var(--fg-3); }
.toc a:hover { text-decoration: underline; }
.prose { max-width: 40rem; font-size: clamp(1.0625rem, 1rem + .25vw, 1.1875rem); line-height: 1.72; color: rgba(13, 10, 30, .92); hyphens: auto; }
.prose > * + * { margin-top: 1.25em; }
.prose > p:first-of-type { font-size: 1.18em; line-height: 1.5; color: var(--ink); font-weight: 500; }
.prose h2 { font: 800 clamp(1.7rem, 1.2rem + 1.8vw, 2.4rem)/1.05 var(--font-display); letter-spacing: -.03em; margin-top: 2em; scroll-margin-top: 100px; }
.prose h3 { font: 700 clamp(1.3rem, 1.1rem + .8vw, 1.6rem)/1.15 var(--font-display); letter-spacing: -.025em; margin-top: 1.8em; scroll-margin-top: 100px; }
.prose a { color: var(--blue); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; font-weight: 500; }
.prose ul, .prose ol { padding-left: 1.3em; display: grid; gap: .5em; }
.prose li::marker { color: var(--blue); font-weight: 700; }
.prose blockquote { margin-inline: 0; padding: .2em 0 .2em 1.2em; border-left: 3px solid var(--blue); font: italic 400 1.4em/1.25 var(--font-accent); color: var(--ink); }
.prose code { font: 500 .88em var(--font-mono); background: var(--bone-2); padding: .15em .4em; border-radius: 6px; }
.prose pre { overflow-x: auto; padding: 18px 20px; border-radius: var(--r-ctl); background: var(--ink); color: var(--bone); }
.prose pre code { background: none; padding: 0; }
.prose table { width: 100%; border-collapse: collapse; font-size: .9em; display: block; overflow-x: auto; }
.prose th, .prose td { padding: 10px 14px; border-bottom: 1px solid rgba(13, 10, 30, .14); text-align: left; }
.prose th { font: 600 .75em var(--font-mono); text-transform: uppercase; letter-spacing: .06em; }
.prose hr { border: 0; height: 1px; background: rgba(13, 10, 30, .2); margin-block: 2.4em; }
.prose img { height: auto; border-radius: var(--r-ctl); }
.post-cta { margin-top: clamp(36px, 5vw, 64px); padding: clamp(24px, 4vw, 40px); border-radius: var(--r-card); background: var(--ink); color: var(--bone); --fg: var(--bone); --fg-2: rgba(245, 240, 230, .8); max-width: 40rem; }
.post-cta h2 { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.3rem); margin-bottom: 12px; } .post-cta p { color: var(--fg-2); }
.post-cta .btn--primary { --b: var(--lemon); --f: var(--ink); } .post-cta .btn--ghost { color: var(--bone); border-color: var(--line-2); }
.post-more { margin-top: 48px; max-width: 40rem; }
.post-more h2 { font: 800 1.5rem/1 var(--font-display); letter-spacing: -.03em; margin-bottom: 12px; }
.post-more ul { list-style: none; padding: 0; margin: 0; }
.post-more a { display: flex; align-items: center; min-height: 56px; padding-block: 8px; border-top: 1px solid var(--line); text-decoration: none; font: 600 1.0625rem/1.2 var(--font-display); letter-spacing: -.02em; }
.post-more a:hover { text-decoration: underline; }
.legal-page { padding-top: calc(var(--hdr-h) + clamp(24px, 4vw, 56px)); padding-bottom: var(--sec-y); }
.legal-card { padding: clamp(22px, 5vw, 64px); max-width: 980px; margin-inline: auto; }
.legal-head h1 { font-size: clamp(2.2rem, 1.2rem + 3.6vw, 4.2rem); line-height: 1; margin: 24px 0 14px; max-width: 12em; }
.legal__nav { display: flex; flex-wrap: wrap; gap: 8px; }
.legal-head .post__meta { margin: 0; }
.legal { margin-top: clamp(24px, 3vw, 40px); max-width: 46rem; }
.legal h2 { font: 800 clamp(1.5rem, 1.2rem + 1.2vw, 2rem)/1.08 var(--font-display); letter-spacing: -.03em; margin: 2em 0 .6em; }
.legal p, .legal li { font-size: 1.0625rem; line-height: 1.7; color: rgba(13, 10, 30, .9); }
.legal ul { padding-left: 1.2em; display: grid; gap: .4em; }
.legal a { color: var(--blue); text-underline-offset: 4px; }
.legal table { width: 100%; border-collapse: collapse; display: block; overflow-x: auto; font-size: .9375rem; }
.legal th, .legal td { padding: 10px 14px; border-bottom: 1px solid rgba(13, 10, 30, .14); text-align: left; vertical-align: top; }
.legal th { font: 600 .75rem var(--font-mono); text-transform: uppercase; letter-spacing: .06em; }
.draft { display: block; padding: 12px 16px; border-radius: var(--r-ctl); background: var(--lemon); color: var(--ink); font: 500 .75rem/1.3 var(--font-mono); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 20px; }
h2.h3 { font-size: var(--fs-title); line-height: 1.05; letter-spacing: -.03em; margin-bottom: 8px; }
.auth { min-height: 100vh; min-height: 100svh; display: grid; place-items: center; padding: calc(var(--hdr-h) + 24px) 16px 56px; }
.authc { width: min(440px, 100%); padding: clamp(28px, 6vw, 44px); border-radius: var(--r-card); background: var(--card); border: 1px solid var(--line); }
.authc__mark { display: grid; place-items: center; margin-bottom: 20px; }
.authc__mark svg { width: 44px; height: 44px; }
.authc h1 { font-size: clamp(2rem, 1.5rem + 2.2vw, 2.7rem); line-height: 1; letter-spacing: -.04em; margin-bottom: 12px; text-align: center; }
.authc > p { text-align: center; color: var(--fg-2); }
.prov { display: grid; gap: 10px; margin: 24px 0 0; }
.btn--prov svg { width: 20px; height: 20px; fill: currentColor; stroke: none; }
.or { display: flex; align-items: center; gap: 14px; margin: 20px 0; font: 500 .75rem/1 var(--font-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--fg-3); }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.field { display: grid; gap: 8px; margin-top: 20px; }
.field label { font: 500 .75rem/1 var(--font-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--fg-3); }
.field input { width: 100%; min-height: 52px; padding: 0 16px; border-radius: var(--r-ctl); border: 1.5px solid var(--line-2); background: var(--ink); color: var(--bone); font: 500 1.0625rem/1 var(--font-ui); }
.field input::placeholder { color: var(--fg-3); }
.field input:focus { outline: 0; border-color: var(--lemon); box-shadow: 0 0 0 3px rgba(232, 255, 79, .22); }
.field input[aria-invalid="true"] { border-color: var(--coral); }
.err { margin: 0; color: #FF9B86; font-size: .875rem; font-weight: 500; } .err:empty { display: none; }
.authc .alert { margin: 18px 0 0; background: #FFDDD5; color: #8a2108; border-color: transparent; }
.auth__fine { font-size: .8125rem; color: var(--fg-3); margin: 22px 0 0; text-align: center; } .auth__fine a { color: var(--fg-2); }
.rootpage { min-height: 100vh; min-height: 100svh; display: grid; }
.rootpage__in { display: grid; place-content: center; justify-items: center; gap: 14px; text-align: center; padding: 48px 20px; }
.rootpage h1 { font-size: clamp(3rem, 1rem + 10vw, 8rem); }
.rootpage p { margin: 0; color: var(--fg-2); max-width: 34em; }
.rootpage .logo--xl svg { width: 64px; height: 64px; }
.rootpage__nav { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 22px; }
.logo--xl { min-height: 0; }
.collect > *, .edit > *, .con > *, .kit > *, .cards > *, .tiles > *, .plans > *, .post-body > * { min-width: 0; }
h2 + .lede, h1 + .lede { margin-top: 20px; }
.shot picture { display: block; }
@media (max-width: 639px) { .shot { max-width: 340px; margin-inline: auto; } .shot img { height: auto; } }
.crumbs { margin-bottom: 10px; }
.crumbs li, .crumbs a { min-height: 44px; }
.grid > * { min-width: 0; }
.filters-toggle {display:none}.filter-details{display:contents}.qr{display:block;min-width:140px;min-height:140px}
@media(max-width:767px){
 .filters__in{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;overflow:visible;align-items:center}
 .filters__in>[data-group=kind]{overflow-x:auto;min-width:0;max-width:100%;padding-bottom:4px}.filters-toggle{display:inline-flex;min-height:44px;padding:0 12px}
 .filter-details{display:none;grid-column:1/-1;min-width:0}.filters--open .filter-details{display:grid;gap:12px}.filter-details .fgroup{flex-wrap:wrap;white-space:normal}
 .fbtn[aria-pressed=true]{background:var(--bone);color:var(--ink)}
}
:root { --sec-y: clamp(44px, 5vw, 80px); --lilac: #C8B8FF; --r-panel: clamp(28px, 4.5vw, 64px); --r-tile: 28px; --spring2: cubic-bezier(.34, 1.56, .64, 1); }
.device__screen > iframe, .tcard__screen iframe, .player__frame iframe { max-width: none; }
.player__frame iframe { max-width: 100%; }
svg[viewBox="0 0 24 24"]:not([class]) { width: 1.2em; height: 1.2em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.btn--lg { min-height: 58px; padding: 0 32px; font-size: 1.0625rem; }
.btn--ink { --b: var(--ink); --f: var(--bone); }
.btn--ink:hover { --b: #1f1842; }
.btn--lemon { box-shadow: 0 10px 30px -10px rgba(232, 255, 79, .55); }
.btn--lemon:hover { box-shadow: 0 16px 36px -10px rgba(232, 255, 79, .7); }
.logo { gap: 11px; }
.logo span { text-transform: lowercase; font-size: 1.4rem; letter-spacing: -.045em; }
.logo__m { overflow: visible; transition: transform .4s var(--spring2); }
.logo:hover .logo__m { transform: rotate(-6deg) scale(1.06); }
.logo__ball { transform-box: fill-box; transform-origin: 50% 100%; }
.logo:hover .logo__ball { animation: ball-hop .8s cubic-bezier(.3, .7, .4, 1); }
@keyframes ball-hop { 0% { transform: none; } 30% { transform: translate(2px, -7px) scale(.9, 1.15); } 62% { transform: translate(0, 2px) scale(1.25, .78); } 100% { transform: none; } }
@media (prefers-reduced-motion: no-preference) { .hdr .logo__ball { animation: ball-hop 1s cubic-bezier(.3, .7, .4, 1) .9s both; } }
.hdr.is-scrolled, body:has(.mnav.is-open) .hdr { background: none; -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom-color: transparent; }
.hdr::before { content: ""; position: absolute; inset: 0; z-index: 0; background: rgba(13, 10, 30, .82); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); opacity: 0; transition: opacity .25s; pointer-events: none; }
.hdr.is-scrolled::before { opacity: 1; }
body:has(.mnav.is-open) .hdr::before { opacity: 1; background: var(--ink); -webkit-backdrop-filter: none; backdrop-filter: none; }
.hdr__r { gap: 10px; }
.flag { display: block; flex: none; width: 24px; height: 24px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(245, 240, 230, .28); }
.lang { position: relative; display: none; }
.lang__btn { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 0 12px 0 10px; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(245, 240, 230, .06); color: var(--bone); font: 600 .8125rem/1 var(--font-ui); letter-spacing: .06em; cursor: pointer; transition: background .2s, border-color .2s; }
.lang__btn:hover, .lang.is-open .lang__btn { background: rgba(245, 240, 230, .12); border-color: var(--bone); }
.lang__btn svg:last-child { width: 14px; height: 14px; transition: transform .3s var(--e-out); }
.lang.is-open .lang__btn svg:last-child { transform: rotate(180deg); }
.lang__menu { position: absolute; z-index: 5; right: 0; top: calc(100% + 10px); min-width: 210px; margin: 0; padding: 8px; list-style: none; border-radius: 22px; background: var(--ink-2); border: 1px solid var(--line-2); box-shadow: 0 30px 70px -20px rgba(0, 0, 0, .8); opacity: 0; visibility: hidden; translate: 0 -8px; scale: .96; transform-origin: top right; transition: opacity .2s, translate .3s var(--spring2), scale .3s var(--spring2), visibility 0s .3s; }
.lang.is-open .lang__menu, .lang:not(.is-js):focus-within .lang__menu { opacity: 1; visibility: visible; translate: 0 0; scale: 1; transition-delay: 0s; }
.lang__menu a { display: flex; align-items: center; gap: 13px; min-height: 50px; padding: 0 14px; border-radius: 14px; text-decoration: none; font-weight: 500; color: var(--bone); }
.lang__menu a:hover, .lang__menu a:focus-visible { background: rgba(245, 240, 230, .1); }
.lang__menu a[aria-current] { background: rgba(232, 255, 79, .12); }
.lang__menu a svg:last-child { margin-left: auto; color: var(--lemon); }
@media (min-width: 1020px) { .lang { display: block; } }
.mnav .lang-m { display: flex; flex-wrap: wrap; gap: 10px; padding-top: 28px; }
.mnav .lang-m a { display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 16px 0 10px; gap: 8px; font: 600 .9375rem/1 var(--font-ui); border: 1px solid var(--line-2); border-radius: 999px; border-bottom: 1px solid var(--line-2); }
.mnav .lang-m a[aria-current="true"] { background: var(--lemon); color: var(--ink); border-color: var(--lemon); }
.ftr { position: relative; z-index: 3; overflow: hidden; margin-top: calc(var(--r-panel) * -1); padding: calc(var(--r-panel) * .6 + 36px) 0 28px; border-top: 0; border-radius: var(--r-panel) var(--r-panel) 0 0; background: var(--ink); }
.ftr__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 32px; }
.ftr__row + .ftr__row { margin-top: 12px; }
.ftr__brand { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.ftr__brand p { margin: 0; font: italic 400 1.3rem/1 var(--font-accent); color: var(--fg-2); }
.ftr__links { display: flex; flex-wrap: wrap; gap: 0 4px; }
.ftr__links a, .ftr__fine a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; text-decoration: none; font-size: .9375rem; color: var(--fg-2); }
.ftr__links a:hover, .ftr__fine a:hover { color: var(--bone); text-decoration: underline; text-underline-offset: 4px; }
.ftr__fine { display: flex; flex-wrap: wrap; align-items: center; gap: 0 4px; color: var(--fg-3); font-size: .875rem; border-top: 1px solid var(--line); padding-top: 12px; margin-top: 18px; }
.ftr__fine a { font-size: .875rem; color: var(--fg-3); padding: 0 10px; }
.ftr__fine .ftr__c { padding-right: 10px; }
.ftr__lang { display: inline-flex; gap: 4px; }
.ftr__lang a { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; opacity: .6; transition: opacity .2s, transform .3s var(--spring2); }
.ftr__lang a:hover, .ftr__lang a[aria-current="true"] { opacity: 1; transform: scale(1.08); }
.ftr__lang a[aria-current="true"] .flag { box-shadow: 0 0 0 2px var(--lemon); }
@media (max-width: 759px) { .ftr__links a { padding: 0 8px; } }
.panel { --p-bg: var(--ink); --p-fg: var(--bone); --p-btn: var(--lemon); --p-btn-f: var(--ink); --em: var(--lemon); --dot: var(--lemon);
  position: relative; margin-top: calc(var(--r-panel) * -1); padding: calc(var(--sec-y) * .9 + var(--r-panel) * .25) 0 calc(var(--sec-y) * .75 + var(--r-panel)); background: var(--p-bg); color: var(--p-fg); --fg: var(--p-fg); border-radius: var(--r-panel) var(--r-panel) 0 0; }
.panel h2 em, .panel h3 em, .panel h1 em { color: var(--em); }
.panel .btn--primary { --b: var(--p-btn); --f: var(--p-btn-f); }
.panel .btn--ghost { color: var(--p-fg); border-color: var(--line-2); }
.panel .btn--ghost:hover { border-color: var(--p-fg); background: color-mix(in srgb, var(--p-fg) 8%, transparent); }
.panel :focus-visible { outline-color: var(--outline, var(--lemon)); }
.panel--ink { --p-bg: var(--ink); --card: var(--ink-2); }
.panel--blue { --p-bg: var(--blue); --p-fg: var(--bone); --fg-2: rgba(245, 240, 230, .92); --fg-3: rgba(245, 240, 230, .8); --line: rgba(245, 240, 230, .26); --line-2: rgba(245, 240, 230, .44); --em: var(--lemon); --dot: var(--lemon); }
.panel--coral { --p-bg: var(--coral); --p-fg: var(--ink); --fg-2: rgba(13, 10, 30, .86); --fg-3: rgba(13, 10, 30, .72); --line: rgba(13, 10, 30, .24); --line-2: rgba(13, 10, 30, .45); --em: var(--blue-700); --dot: var(--ink); --p-btn: var(--ink); --p-btn-f: var(--bone); --outline: var(--ink); }
.panel--lemon { --p-bg: var(--lemon); --p-fg: var(--ink); --fg-2: rgba(13, 10, 30, .84); --fg-3: rgba(13, 10, 30, .7); --line: rgba(13, 10, 30, .2); --line-2: rgba(13, 10, 30, .4); --em: var(--blue); --dot: var(--ink); --p-btn: var(--ink); --p-btn-f: var(--lemon); --outline: var(--blue); }
.panel--lilac { --p-bg: var(--lilac); --p-fg: var(--ink); --fg-2: rgba(13, 10, 30, .84); --fg-3: rgba(13, 10, 30, .7); --line: rgba(13, 10, 30, .2); --line-2: rgba(13, 10, 30, .4); --em: var(--blue); --dot: var(--blue); --p-btn: var(--ink); --p-btn-f: var(--bone); --outline: var(--blue); }
.panel--bone { --p-bg: var(--bone); --p-fg: var(--ink); --fg-2: rgba(13, 10, 30, .78); --fg-3: rgba(13, 10, 30, .64); --line: rgba(13, 10, 30, .14); --line-2: rgba(13, 10, 30, .32); --em: var(--blue); --dot: var(--blue); --p-btn: var(--blue); --p-btn-f: var(--bone); --outline: var(--blue); }
.panel .eyebrow, .panel .note { color: var(--fg-3); }
.panel .note a { color: inherit; }
.bands + .panel { margin-top: -34px; padding-top: calc(var(--sec-y) * .9 + 34px); }
.hero + .panel { margin-top: calc(var(--r-panel) * -1); }
.panel .lede { color: var(--fg-2); }
.panel .ticks li::before { background: var(--dot); }
.tiles { display: grid; gap: 16px; list-style: none; padding: 0; margin: 0; }
.tiles--3 { grid-template-columns: 1fr; }
.tiles--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); }
@media (min-width: 860px) { .tiles--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .tiles--4 { grid-template-columns: repeat(4, 1fr); } }
.tile { --t-bg: var(--ink-2); --t-fg: var(--bone); --t-fg2: rgba(245, 240, 230, .8); --t-line: rgba(245, 240, 230, .18); --t-em: var(--lemon);
  position: relative; display: flex; flex-direction: column; min-width: 0; padding: clamp(22px, 2.4vw, 32px); border-radius: var(--r-tile); background: var(--t-bg); color: var(--t-fg); border: 0; overflow: hidden;
  --fg: var(--t-fg); --fg-2: var(--t-fg2); --fg-3: var(--t-fg2); --line: var(--t-line); }
.tile--ink { --t-bg: var(--ink); }
.tile--bone { --t-bg: var(--bone); --t-fg: var(--ink); --t-fg2: rgba(13, 10, 30, .78); --t-line: rgba(13, 10, 30, .16); --t-em: var(--blue); }
.tile--lemon { --t-bg: var(--lemon); --t-fg: var(--ink); --t-fg2: rgba(13, 10, 30, .82); --t-line: rgba(13, 10, 30, .2); --t-em: var(--blue); }
.tile--blue { --t-bg: var(--blue); --t-fg2: rgba(245, 240, 230, .9); --t-line: rgba(245, 240, 230, .3); }
.tile--coral { --t-bg: var(--coral); --t-fg: var(--ink); --t-fg2: rgba(13, 10, 30, .85); --t-line: rgba(13, 10, 30, .24); --t-em: var(--blue-700); }
.tile--lilac { --t-bg: var(--lilac); --t-fg: var(--ink); --t-fg2: rgba(13, 10, 30, .84); --t-line: rgba(13, 10, 30, .22); --t-em: var(--blue); }
.tile h3 { color: var(--t-fg); }
.tile p { margin: 10px 0 0; color: var(--t-fg2); font-size: .9688rem; }
.tile__n { display: block; margin-bottom: 14px; font: 500 .75rem/1 var(--font-mono); letter-spacing: .1em; color: var(--t-fg2); }
.tile .case__i { border-color: currentColor; color: var(--t-fg); }
.tile .note, .tile .note a { color: var(--t-fg2); }
.menu-steps .tile { min-height: 220px; }
.case.tile { min-height: 200px; }
.case.tile .case__i { margin-bottom: auto; }
.case.tile h3 { margin-top: 28px; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  [data-tilt] { transform: perspective(1000px) rotateX(calc(var(--rx, 0) * 1deg)) rotateY(calc(var(--ry, 0) * 1deg)); transition: transform .25s var(--e-out); will-change: transform; }
  [data-tilt].is-tilting { transition: transform .08s linear; }
  [data-tilt]::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .3s; background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .28), transparent 55%); mix-blend-mode: soft-light; }
  [data-tilt].is-tilting::after { opacity: 1; }
}
.js .rv:not(.is-in) { opacity: 0; translate: 0 56px; scale: .96; }
.rv { transition: opacity .7s var(--e-out) calc(var(--d, 0) * 90ms), translate .9s var(--e-out) calc(var(--d, 0) * 90ms), scale .9s var(--e-out) calc(var(--d, 0) * 90ms), transform .25s var(--e-out); }
.panel .sec-head { max-width: 920px; margin-bottom: clamp(24px, 3.2vw, 40px); }
.panel .sec-head .chip, .panel .chip { margin-bottom: 16px; }
@property --o { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --a { syntax: "<number>"; inherits: true; initial-value: 0; }
.hero { --stg: min(600px, 62svh, 100vw); position: relative; isolation: isolate; overflow: clip; min-height: 100svh; display: grid; align-items: center; padding: calc(var(--hdr-h) + 4px) 0 calc(var(--r-panel) + 10px); background: var(--ink); }
.hero__bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.hero > .wrap { width: min(1560px, 100%); }
.hero__in { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
.hero__top { position: relative; z-index: 1; min-width: 0; }
.hero h1 { margin: 0 auto; max-width: 9.2em; font-size: clamp(3rem, .5rem + 7.6vw, 8.6rem); line-height: .9; letter-spacing: -.05em; text-wrap: balance; }
.hero--land h1, .hero--tpl h1 { font-size: clamp(2.5rem, .4rem + 5.2vw, 6.2rem); max-width: 11em; }
.hero--tpl .hstage { margin-top: calc(var(--stg) * .05); }
.hero .crumbs { margin-bottom: 18px; justify-content: center; }
.hero .crumbs ol { justify-content: center; }
.hero__bot { position: relative; z-index: 6; margin-top: calc(var(--stg) * -.27); display: grid; justify-items: center; gap: 16px; }
.hero .cta-row { justify-content: center; }
.hstage { position: relative; z-index: 2; width: 100%; height: calc(var(--stg) * 1.02); margin-top: 0; perspective: 1500px; perspective-origin: 50% 38%; display: flex; align-items: center; justify-content: center; }
.stage__rot { position: relative; flex: none; width: var(--stg); aspect-ratio: 1 / 1.08; transform-style: preserve-3d; transform: rotateY(calc(var(--sx, 0) * 15deg + var(--sp, 0) * -34deg)) rotateX(calc(var(--sy, 0) * -9deg + var(--sp, 0) * 8deg)) translateY(calc(var(--sp, 0) * -40px)); will-change: transform; }
.stage__ph { position: absolute; left: 50%; top: 50%; width: 47%; transform-style: preserve-3d; cursor: pointer;
  transform: translate(calc(-50% + var(--o) * 66%), calc(-50% - var(--o) * 3%)) translateZ(calc(70px - var(--a) * 150px)) rotateY(calc(var(--o) * -24deg)) rotateZ(calc(var(--o) * 4deg)) scale(calc(1 - var(--a) * .16));
  opacity: calc(1 - clamp(0, var(--a) - 1, 1)); z-index: calc(10 - var(--a) * 3); transition: --o 1.25s cubic-bezier(.55, 0, .1, 1), --a 1.25s cubic-bezier(.55, 0, .1, 1); }
.stage__ph.is-c { cursor: default; }
.stage__ph[style*="--a:2"], .stage__ph[style*="--a: 2"] { pointer-events: none; }
.hero--tpl .stage__ph { width: 54%; }
.stage__ph .device { --dw: 100%; width: 100%; transform: none; margin: 0; animation: bob 7s ease-in-out infinite; }
.stage__ph:nth-child(2n) .device { animation-delay: -2.4s; } .stage__ph:nth-child(3n) .device { animation-delay: -4.6s; }
.stage__ph .device { box-shadow: 0 0 0 1px rgba(245, 240, 230, .18), 0 40px 70px -30px rgba(0, 0, 0, .8); }
.stage__ph.is-c .device { box-shadow: 0 0 0 1px rgba(245, 240, 230, .22), 0 50px 90px -30px rgba(0, 0, 0, .85), 0 0 120px -30px rgba(59, 44, 255, .8); }
@keyframes bob { 50% { translate: 0 -14px; } }
.stage__ph .device__screen::before { content: ""; position: absolute; inset: 0; z-index: 4; background: rgb(13 10 30 / calc(var(--a) * .34)); pointer-events: none; }
.stage__dots { display: flex; gap: 7px; pointer-events: none; }
@keyframes float { 50% { translate: 0 -12px; } }
@media (prefers-reduced-motion: no-preference) {
  .stage__rot { animation: stage-in 1.3s var(--e-out) .15s both; }
  @keyframes stage-in { from { translate: 0 90px; scale: .86; opacity: 0; } }
  .hero__bot { animation: bot-in 1s var(--e-out) .9s both; }
  @keyframes bot-in { from { translate: 0 30px; opacity: 0; } }
}
@media (max-width: 520px) { .hero .btn--glass { display: none; } }
@media (max-width: 959px) {
  .hero { --stg: min(124vw, 560px, 68svh); align-items: center; }
  .hero h1, .hero--land h1, .hero--tpl h1 { font-size: clamp(2.4rem, 12.4vw, 5rem); }
  .stage__rot { aspect-ratio: 1 / .96; transform: rotateY(calc(var(--sx, 0) * 10deg)) rotateX(calc(var(--sy, 0) * -6deg)) translateY(calc(var(--sp, 0) * -30px)); }
  .stage__ph { width: 50%; transform: translate(calc(-50% + var(--o) * 62%), calc(-50% - var(--o) * 3%)) translateZ(calc(70px - var(--a) * 150px)) rotateY(calc(var(--o) * -22deg)) rotateZ(calc(var(--o) * 4deg)) scale(calc(1 - var(--a) * .2)); }
  .hstage { margin-top: calc(var(--stg) * .03); }
  .hero .cta-row .btn { min-height: 54px; }
  .hero__sub { padding: 9px 16px; font-size: .9688rem; }
}
.bands { position: relative; z-index: 4; margin-top: calc(var(--r-panel) * -1 - 20px); padding-block: 26px 0; overflow: clip; pointer-events: none; }
.band { display: flex; width: 108%; margin-left: -4%; padding: 15px 0; overflow: hidden; white-space: nowrap; }
.band--lemon { background: var(--lemon); color: var(--ink); rotate: -1.8deg; box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .5); }
.band--coral { background: var(--coral); color: var(--ink); rotate: 1.4deg; margin-top: -10px; box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .5); }
.band__track { display: flex; flex: none; align-items: center; gap: 30px; padding-right: 30px; animation: run 42s linear infinite; }
.band--coral .band__track { animation-direction: reverse; animation-duration: 50s; }
@keyframes run { to { transform: translateX(-100%); } }
.band__t { font: 800 clamp(1.6rem, 1rem + 2.4vw, 3.1rem)/1 var(--font-display); letter-spacing: -.035em; }
.band__s { font: italic 400 clamp(1.7rem, 1rem + 2.6vw, 3.3rem)/1 var(--font-accent); }
.band i { font-style: normal; font-size: 1.1rem; }
.scene { display: grid; place-items: center; min-height: 190px; margin: 0 0 18px; }
.tile:not(.is-in) .scene *, .tile:not(.is-in) .scene { animation-play-state: paused !important; }
.typebox { width: 100%; padding: 15px 16px 14px; border-radius: 20px; background: #fff; color: var(--ink); box-shadow: 0 24px 44px -22px rgba(13, 10, 30, .5); rotate: -1.5deg; }
.typebox small { display: block; margin-bottom: 8px; font: 500 .6875rem/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: rgba(13, 10, 30, .62); }
.typebox p { margin: 0 0 12px; min-height: 3.2em; color: var(--ink); font: 500 .875rem/1.6 var(--font-mono); }
.typebox p span { display: block; width: calc(var(--n) * 1ch); max-width: 100%; overflow: hidden; white-space: nowrap; border-right: 2px solid var(--blue); animation: ty1 8s steps(var(--n)) infinite; }
.typebox p span[style*="--w"] { animation-name: ty2; }
@keyframes ty1 { 0% { width: 0; border-color: var(--blue); } 30%, 100% { width: calc(var(--n) * 1ch); } 31%, 100% { border-color: transparent; } }
@keyframes ty2 { 0%, 31% { width: 0; border-color: transparent; } 32% { border-color: var(--blue); } 62%, 100% { width: calc(var(--n) * 1ch); } 88% { border-color: var(--blue); } 89%, 100% { border-color: transparent; } }
.typebox__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.typebox__chips b { display: inline-flex; align-items: center; gap: 5px; padding: 6px 10px; border-radius: 999px; background: #eceafe; color: var(--blue); font: 600 .75rem/1 var(--font-ui); animation: chipin 8s infinite; }
.typebox__chips b:nth-child(2) { animation-delay: .25s; } .typebox__chips b:nth-child(3) { animation-delay: .5s; }
.typebox__chips svg { width: 13px; height: 13px; }
@keyframes chipin { 0%, 60% { scale: 1; } 66% { scale: 1.12; } 72%, 100% { scale: 1; } }
.scene--ten { align-content: center; gap: 14px; justify-items: start; padding-left: 6px; }
.ten { display: flex; align-items: baseline; gap: 6px; line-height: .8; }
.ten b { font: 800 clamp(6rem, 11vw, 8.6rem)/.78 var(--font-display); letter-spacing: -.07em; }
.ten span { font: italic 400 2.2rem/1 var(--font-accent); }
.ticks2 { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 18px; }
.ticks2 li { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: .9375rem; opacity: .28; animation: tickin 6s infinite; animation-delay: calc(var(--k) * .8s); }
.ticks2 svg { width: 22px; height: 22px; padding: 4px; border-radius: 50%; background: var(--ink); color: var(--lemon); stroke-width: 3; }
@keyframes tickin { 0%, 4% { opacity: .28; } 12%, 84% { opacity: 1; } 94%, 100% { opacity: .28; } }
.scene--share { position: relative; display: block; }
.sh { position: absolute; display: inline-flex; align-items: center; gap: 9px; padding: 13px 20px; border-radius: 999px; font: 600 .9375rem/1 var(--font-ui); color: var(--ink); animation: pill 6.4s infinite; box-shadow: 0 14px 28px -14px rgba(0, 0, 0, .6); }
.sh--1 { left: 2%; top: 4px; background: var(--lemon); rotate: -4deg; }
.sh--2 { left: 30%; top: 62px; background: var(--bone); rotate: 3deg; animation-delay: .35s; }
.sh--3 { left: 6%; top: 120px; background: var(--coral); rotate: -2deg; animation-delay: .7s; }
.toast { position: absolute; right: 0; bottom: 0; display: inline-flex; align-items: center; gap: 8px; padding: 12px 16px; border-radius: 16px; background: #7DF0C0; color: var(--ink); font: 600 .875rem/1.1 var(--font-ui); animation: toast 6.4s infinite; box-shadow: 0 16px 30px -14px rgba(0, 0, 0, .7); }
.toast svg { stroke-width: 3; }
@keyframes pill { 0%, 4% { opacity: 0; translate: 0 -22px; scale: .8; } 12%, 90% { opacity: 1; translate: 0 0; scale: 1; } 97%, 100% { opacity: 0; translate: 0 6px; } }
@keyframes toast { 0%, 34% { opacity: 0; translate: 16px 14px; scale: .85; } 44%, 90% { opacity: 1; translate: 0 0; scale: 1; } 97%, 100% { opacity: 0; } }
.tcard { position: relative; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.tcard__ph { --k: .72; position: relative; z-index: 2; width: 100%; aspect-ratio: 390 / 700; border-radius: 30px; overflow: hidden; isolation: isolate; background: #0a0818; box-shadow: 0 34px 60px -30px rgba(0, 0, 0, .8), 0 0 0 1px rgba(245, 240, 230, .16); cursor: pointer; transition: box-shadow .4s, translate .5s var(--e-out); touch-action: pan-y; }
.tcard:hover .tcard__ph { translate: 0 -6px; box-shadow: 0 44px 80px -28px rgba(0, 0, 0, .85), 0 0 0 2px var(--lemon); }
.tcard__ph.is-live:has(iframe.is-on) { cursor: auto; }
.tcard__screen { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; background: #0a0818; }
.tcard__screen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.tcard__screen iframe { position: absolute; left: 0; top: 0; width: 390px; height: 700px; border: 0; background: var(--bone); transform-origin: 0 0; transform: scale(var(--k, .7)); opacity: 0; transition: opacity .45s; pointer-events: none; }
.tcard__screen iframe.is-on { opacity: 1; }
.tcard__ph.is-live .tcard__screen iframe.is-on { pointer-events: auto; }
.tcard__hint { position: absolute; z-index: 3; top: 14px; left: 50%; translate: -50% -8px; opacity: 0; display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px; border-radius: 999px; background: rgba(13, 10, 30, .82); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: var(--bone); font: 600 .75rem/1 var(--font-ui); pointer-events: none; transition: opacity .3s, translate .4s var(--spring2); white-space: nowrap; }
.tcard__hint svg { width: 14px; height: 14px; animation: nudge-y 1.4s ease-in-out infinite; }
@keyframes nudge-y { 50% { translate: 0 3px; } }
.tcard__ph.is-live:not(.is-touched):has(iframe.is-on) .tcard__hint { opacity: 1; translate: -50% 0; }
.tcard__prev { position: absolute; z-index: 4; right: 12px; bottom: 12px; display: grid; place-items: center; width: 54px; height: 54px; border: 0; border-radius: 50%; background: var(--lemon); color: var(--ink); cursor: pointer; box-shadow: 0 12px 26px -8px rgba(0, 0, 0, .7); transition: transform .35s var(--spring2), background .2s; }
.tcard__prev:hover { transform: scale(1.12); }
.tcard__prev svg { width: 20px; height: 20px; fill: currentColor; margin-left: 3px; }
.tcard__body { position: relative; display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; padding: 0 4px; }
.tcard h3 { flex: 1 1 100%; margin: 0; font-size: 1.45rem; }
.tcard__link { text-decoration: none; color: var(--fg); }
.tcard__link::after { content: ""; position: absolute; z-index: 1; inset: 0; border-radius: 34px; }
.tcard__link:focus-visible { outline: 3px solid var(--lemon); outline-offset: 4px; }
.tcard__tags { display: flex; flex-wrap: wrap; gap: 6px; flex: 1 1 auto; }
.tcard__go { display: grid; place-items: center; flex: none; width: 44px; height: 44px; margin-left: auto; border-radius: 50%; border: 1.5px solid var(--line-2); transition: background .25s, color .25s, translate .35s var(--spring2), border-color .25s; }
.tcard:hover .tcard__go { background: var(--lemon); color: var(--ink); border-color: var(--lemon); translate: 4px 0; }
.tcard .tag { color: var(--fg-2); border-color: var(--line-2); }
.panel--bone .tcard__tags .tag { color: var(--fg-2); }
.panel--rail { overflow: clip; }
.rail { display: flex; gap: clamp(14px, 2vw, 28px); overflow-x: auto; scroll-snap-type: x mandatory; width: 100vw; margin-left: calc(50% - 50vw); padding: 10px calc(50vw - min(37vw, 150px)) 30px; scrollbar-width: none; overscroll-behavior-x: contain; perspective: 1700px; perspective-origin: 50% 40%; }
.rail::-webkit-scrollbar { display: none; }
.rail > div { flex: 0 0 min(74vw, 300px); min-width: 0; scroll-snap-align: center; }
.rail:focus-visible { outline-offset: -4px; }
@supports (animation-timeline: view(inline)) {
  @media (prefers-reduced-motion: no-preference) {
    .rail > div { animation: coverflow linear both; animation-timeline: view(inline); }
    @keyframes coverflow { 0% { transform: rotateY(38deg) translateZ(-120px) scale(.84); opacity: .35; } 50% { transform: none; opacity: 1; } 100% { transform: rotateY(-38deg) translateZ(-120px) scale(.84); opacity: .35; } }
  }
}
.rail-nav { display: none; gap: 10px; flex: none; }
.rail-nav__b { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; border: 1.5px solid var(--line-2); background: transparent; color: var(--p-fg); cursor: pointer; transition: background .2s, color .2s, transform .3s var(--spring2); }
.rail-nav__b:hover { background: var(--lemon); color: var(--ink); border-color: var(--lemon); transform: scale(1.08); }
.rail-more { margin: 0; text-align: center; }
@media (min-width: 760px) { .rail-nav { display: flex; } }
.grid { gap: 28px 22px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); perspective: 1600px; }
@media (max-width: 479px) { .grid { grid-template-columns: 1fr; } .grid .tcard { max-width: 320px; margin-inline: auto; width: 100%; } }
.pagehead { position: relative; isolation: isolate; overflow: clip; padding: calc(var(--hdr-h) + clamp(40px, 6vw, 88px)) 0 calc(var(--r-panel) + clamp(32px, 4vw, 56px)); }
.pagehead .hero__bg { z-index: -1; -webkit-mask-image: linear-gradient(#000 55%, transparent); mask-image: linear-gradient(#000 55%, transparent); }
.pagehead h1 { font-size: clamp(2.7rem, 1rem + 6.4vw, 6.6rem); max-width: 11em; }
.filters { background: rgba(13, 10, 30, .88); }
.sec--tight { border-top: 0 !important; }
.player { padding: 0; border: 0; background: transparent; color: var(--bone); width: 100vw; max-width: none; height: 100dvh; max-height: none; inset: 0; overflow: hidden; }
.player::backdrop { background: rgba(13, 10, 30, .86); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.player[open] { display: grid; }
.player__in { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; justify-items: center; gap: 14px; padding: max(14px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom)); height: 100%; min-height: 0; }
.player__top { width: min(100%, 520px); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.player__top h2 { font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem); letter-spacing: -.03em; }
.player__x { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; border: 1.5px solid var(--line-2); background: rgba(245, 240, 230, .08); color: var(--bone); cursor: pointer; transition: background .2s, transform .3s var(--spring2); }
.player__x:hover { background: var(--bone); color: var(--ink); transform: rotate(90deg); }
.player__frame { position: relative; height: 100%; max-height: 860px; aspect-ratio: 9 / 18.2; max-width: 100%; padding: 9px; border-radius: 46px; background: #07050f; box-shadow: 0 0 0 1px rgba(245, 240, 230, .22), 0 60px 120px -30px rgba(0, 0, 0, .9), 0 0 140px -40px rgba(59, 44, 255, .9); min-height: 0; }
.player__frame iframe { display: block; width: 100%; max-width: 100%; height: 100%; border: 0; border-radius: 38px; background: var(--bone); }
.player[open] .player__frame { animation: pop-in .6s var(--spring2) both; }
@keyframes pop-in { from { opacity: 0; transform: translateY(40px) scale(.9) rotateX(12deg); } }
.player__bar { width: min(100%, 520px); display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; }
.player__nav { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; border: 1.5px solid var(--line-2); background: transparent; color: var(--bone); cursor: pointer; transition: background .2s, color .2s; }
.player__nav:hover { background: var(--bone); color: var(--ink); }
.player__more { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; color: var(--fg-2); font-size: .9375rem; }
.player__more:hover { color: var(--bone); }
@media (max-height: 700px) { .player__more { display: none; } }
.win { --fg: var(--ink); --fg-2: rgba(13, 10, 30, .76); --fg-3: rgba(13, 10, 30, .6); --line: rgba(13, 10, 30, .12); position: relative; background: #fff; color: var(--ink); border: 0; border-radius: var(--r-tile); box-shadow: 0 50px 90px -40px rgba(13, 10, 30, .55), 0 0 0 1px rgba(13, 10, 30, .08); }
.win__bar { display: flex; align-items: center; gap: 7px; }
.win__bar i { width: 11px; height: 11px; border-radius: 50%; background: #ff5f57; } .win__bar i:nth-child(2) { background: #febc2e; } .win__bar i:nth-child(3) { background: #28c840; }
.win__bar span { margin-left: 8px; }
.win .stats b { color: var(--blue); }
.pill--y { background: #CBF7E3; color: #06583a; }
.shot { border: 0; background: var(--ink); border-radius: var(--r-tile); padding: 10px; box-shadow: 0 50px 90px -40px rgba(0, 0, 0, .7); }
.shot figcaption { color: rgba(245, 240, 230, .78); }
.thread .msg--them { background: var(--ink); color: var(--bone); border: 0; }
.thread .msg--me { background: var(--blue); }
.thread .note { margin-bottom: 14px; }
.fields { gap: 12px; }
.fld.tile { flex-direction: row; padding: 20px 24px; border-radius: 22px; font-size: 1.0625rem; }
.fld small { color: var(--t-fg2); }
.kitc.tile h3 { margin-top: 0; }
.kitc.tile p { color: var(--t-fg2); }
.qr--scan { position: relative; overflow: hidden; }
.qr--scan i { position: absolute; left: 0; right: 0; height: 3px; top: 0; background: var(--coral); box-shadow: 0 0 14px 2px var(--coral); animation: scan 2.6s ease-in-out infinite; }
@keyframes scan { 0%, 100% { translate: 0 0; } 50% { translate: 0 138px; } }
.menu-qr { display: grid; justify-items: center; align-content: center; gap: 20px; padding: 32px; text-align: center; }
.menu-qr .qr { width: 180px; height: 180px; }
.menu-qr figcaption { font-size: .875rem; color: var(--t-fg2); }
.qr { display: block; min-width: 140px; min-height: 140px; }
.plan { border-radius: var(--r-tile); border: 0; background: var(--ink-2); color: var(--bone); --fg: var(--bone); --fg-2: rgba(245, 240, 230, .82); --line: rgba(245, 240, 230, .2); transition: transform .3s var(--e-out); }
.plan--free { background: var(--ink-2); box-shadow: inset 0 0 0 1px rgba(245, 240, 230, .16); }
.plan--self, .plan--accent { background: var(--blue); --fg-2: rgba(245, 240, 230, .92); --line: rgba(245, 240, 230, .3); }
.plan--self_plus { background: var(--lilac); color: var(--ink); --fg: var(--ink); --fg-2: rgba(13, 10, 30, .84); --line: rgba(13, 10, 30, .2); }
.plan--concierge { background: var(--lemon); color: var(--ink); --fg: var(--ink); --fg-2: rgba(13, 10, 30, .84); --line: rgba(13, 10, 30, .2); }
.plan--pro { background: var(--coral); color: var(--ink); --fg: var(--ink); --fg-2: rgba(13, 10, 30, .86); --line: rgba(13, 10, 30, .24); }
.plan--self .btn, .plan--accent .btn { --b: var(--lemon); --f: var(--ink); }
.plan .btn { border-color: transparent; }
.plan--free .btn { background: var(--bone); color: var(--ink); border-color: var(--bone); }
.plan--self .btn, .plan--accent .btn { background: var(--lemon); color: var(--ink); }
.plan--self_plus .btn, .plan--concierge .btn, .plan--pro .btn { background: var(--ink); color: var(--bone); }
.plan .tag { color: inherit; border-color: currentColor; }
.plan:hover { transform: translateY(-6px); }
.cmp-wrap.paper { border-radius: var(--r-tile); }
.panel .faq { border-bottom-color: var(--line); }
.faq summary { font-size: clamp(1.15rem, 1rem + .6vw, 1.5rem); }
.faq details[open] summary { color: var(--em); }
.final { overflow: clip; padding-bottom: calc(var(--sec-y) + var(--r-panel)); }
.final__in { display: grid; gap: 32px; align-items: center; }
.final h2 { font-size: clamp(2.6rem, 1rem + 6.2vw, 6.6rem); max-width: 9em; line-height: .95; margin-bottom: 30px; }
.fan { position: relative; height: clamp(260px, 38vw, 440px); perspective: 1300px; }
.fan__c { position: absolute; top: 50%; left: 50%; width: clamp(120px, 15vw, 200px); height: auto; border-radius: 24px; box-shadow: 0 40px 70px -26px rgba(13, 10, 30, .6); will-change: transform; }
.fan__c--0 { translate: -50% -50%; rotate: -5deg; z-index: 2; width: clamp(150px, 18vw, 240px); }
.fan__c--1 { translate: -168% -44%; rotate: -14deg; transform: rotateY(24deg); }
.fan__c--2 { translate: 66% -58%; rotate: 11deg; transform: rotateY(-24deg); }
@supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) {
  .fan__c { animation: fan-rise linear both; animation-timeline: view(); animation-range: entry 0% cover 70%; }
  @keyframes fan-rise { from { scale: .72; opacity: .25; } to { scale: 1; opacity: 1; } }
} }
@media (min-width: 900px) { .final__in { grid-template-columns: 1.1fr .9fr; } }
.collect { align-items: center; }
.tpl-fit .tags { margin-top: 8px; }
.panel .swatches li { color: var(--fg); }
.dock { z-index: 70; }
.panel .crumbs a { color: var(--fg-2); }
@media (max-width: 759px) { .panel { padding-top: calc(var(--sec-y) * .75 + var(--r-panel) * .2); padding-bottom: calc(var(--sec-y) * .6 + var(--r-panel)); } }
@media (prefers-reduced-motion: reduce) {
  .blob, .band__track, .stage__ph .device, .hero__down, .qr--scan i, .tcard__hint svg, .logo__ball { animation: none !important; }
  .scene *, .typebox p span { animation: none !important; }
  .typebox p span { width: auto !important; border-color: transparent !important; white-space: normal; }
  .ticks2 li, .sh, .toast { opacity: 1 !important; }
  .sh, .toast { position: static; display: inline-flex; margin: 0 8px 8px 0; rotate: 0deg; }
  .scene--share { display: flex; flex-wrap: wrap; align-content: center; }
  .band { rotate: 0deg; }
  .band__track[aria-hidden="true"] { display: none; }
  .band { overflow-x: auto; }
  .rv { transition: none; }
  .js .rv:not(.is-in) { opacity: 1; translate: none; scale: none; }
  .stage__rot { transform: none !important; }
  .tcard:hover .tcard__ph { translate: none; }
}
.btn--lg[data-mag] { transition: transform .35s var(--spring2), background .2s, color .2s, box-shadow .3s; }
.scroll-progress { background: var(--lemon) !important; height: 3px; z-index: 90; }
@supports not (animation-timeline: view()) { .scroll-progress { display: none; } }
.tlinks { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.win .scrollx { min-height: 438px; }   
.hdr__bar { max-width: 1320px; }
.nav { position: relative; display: none; gap: 2px; margin: 0 auto; padding: 5px; border-radius: 999px; background: rgba(245, 240, 230, .07); border: 1px solid var(--line); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.nav a { position: relative; z-index: 1; min-height: 44px; padding: 0 20px; font-weight: 600; font-size: .9375rem; letter-spacing: -.005em; color: var(--fg-2); background: none; box-shadow: none; border-radius: 999px; transition: color .25s; }
.nav a:hover { color: var(--bone); background: none; }
.nav a[aria-current="page"] { color: var(--bone); background: none; box-shadow: none; border-radius: 999px; }
.nav__ind { position: absolute; z-index: 0; top: 5px; bottom: 5px; left: 0; width: var(--w, 0); translate: var(--x, 0) 0; border-radius: 999px; background: rgba(245, 240, 230, .14); opacity: 0; transition: translate .45s var(--spring2), width .45s var(--spring2), opacity .2s, background .3s; pointer-events: none; }
.nav.has-ind .nav__ind { opacity: 1; }
.nav.is-current .nav__ind { background: var(--lemon); }
.nav.is-current a[aria-current="page"] { color: var(--ink); }
.nav.is-hover:not(.is-current) .nav__ind { background: rgba(245, 240, 230, .14); }
.nav:not(.has-ind) a[aria-current="page"] { background: var(--lemon); }
@media (min-width: 1020px) { .nav { display: inline-flex; } .hdr__r { margin-left: 0; } .hdr__bar { display: grid; grid-template-columns: 1fr auto 1fr; } .hdr__r { justify-self: end; } }
.hdr__cta { box-shadow: 0 8px 22px -8px rgba(232, 255, 79, .5); }
.lang__menu { min-width: 230px; padding: 10px; }
.lang__menu a { min-height: 54px; font-weight: 600; }
.lang__menu .flag { width: 28px; height: 28px; }
.mnav { padding-top: calc(var(--hdr-h) + 12px + env(safe-area-inset-top)); }
.mnav > a:not(.mnav__cta) { min-height: 68px; font-size: clamp(2rem, 9vw, 2.8rem); }
.mnav.is-open > a:not(.mnav__cta) { animation: mnav-in .6s var(--e-out) both; animation-delay: calc(var(--i, 0) * 70ms + 60ms); }
@keyframes mnav-in { from { opacity: 0; translate: 0 26px; } }
.mnav > a small { order: 0; margin-right: 16px; color: var(--lemon); }
.mnav > a:not(.mnav__cta) { justify-content: flex-start; }
.mnav .mnav__cta { justify-content: center; margin-top: 26px; min-height: 60px; border: 0; font: 700 1.125rem/1 var(--font-ui); letter-spacing: 0; }
.mnav.is-open .mnav__cta, .mnav.is-open .lang-m { animation: mnav-in .6s var(--e-out) .4s both; }
.tile--wa { --t-bg: #0B141A; }
.wa { width: 100%; max-width: 330px; margin-inline: auto; border-radius: 22px; overflow: hidden; background: #0B141A; box-shadow: 0 30px 60px -28px rgba(0, 0, 0, .8), 0 0 0 1px rgba(245, 240, 230, .12); color: #E9EDEF; text-align: left; }
.wa__top { display: flex; align-items: center; gap: 10px; padding: 11px 14px; background: #1F2C34; }
.wa__av { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--lilac); color: var(--ink); font: 700 .9rem/1 var(--font-ui); }
.wa__top b { display: block; font: 600 .875rem/1.1 var(--font-ui); } .wa__top small { display: block; margin-top: 2px; font-size: .6875rem; color: #8696A0; }
.wa__chat { padding: 16px 12px 14px; background: #0B141A radial-gradient(circle at 20% 20%, rgba(255, 255, 255, .04) 0 2px, transparent 3px) 0 0 / 22px 22px; }
.wa__msg { margin-left: auto; width: 88%; padding: 4px; border-radius: 12px 4px 12px 12px; background: #005C4B; position: relative; transform-origin: 100% 0; }
.rv.is-in .wa__msg, .no-js .wa__msg { animation: wa-pop .7s var(--spring2) .5s both; }
@keyframes wa-pop { from { opacity: 0; scale: .7; translate: 10px 14px; } }
.wa__card { display: block; overflow: hidden; border-radius: 9px; background: #0b3d33; }
.wa__card img { display: block; width: 100%; height: auto; aspect-ratio: 1200 / 630; object-fit: cover; }
.wa__meta { display: grid; gap: 2px; padding: 8px 10px 9px; }
.wa__meta b { font: 600 .8125rem/1.25 var(--font-ui); } .wa__meta span { font-size: .75rem; line-height: 1.3; color: #B7D0C9; } .wa__meta small { font-size: .6875rem; color: #7FA89E; }
.wa__msg p { margin: 6px 6px 1px; font-size: .875rem; line-height: 1.35; color: #E9EDEF; }
.wa__msg time { display: block; margin: 0 6px 3px; text-align: right; font-size: .625rem; color: #8DBFB2; }
.other { position: relative; min-height: 270px; text-decoration: none; transition: translate .5s var(--spring2), box-shadow .4s; }
.other:hover { translate: 0 -8px; box-shadow: 0 30px 50px -28px rgba(13, 10, 30, .55); }
.other h3 { margin-top: auto; padding-top: 28px; font-size: clamp(1.5rem, 1.1rem + 1.1vw, 2.1rem); }
.other p { max-width: 17em; }
.other__go { position: absolute; top: 22px; right: 22px; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; border: 1.5px solid currentColor; transition: background .25s, color .25s, rotate .4s var(--spring2); }
.other:hover .other__go { background: var(--t-fg); color: var(--t-bg); rotate: -45deg; }
.other__img { position: absolute; right: -14px; bottom: -70px; width: 38%; height: auto; border-radius: 22px; rotate: 9deg; box-shadow: 0 30px 40px -18px rgba(13, 10, 30, .55); transition: translate .6s var(--spring2), rotate .6s var(--spring2); }
.other:hover .other__img { translate: -8px -22px; rotate: 4deg; }
.other:has(.other__img) h3, .other:has(.other__img) p { max-width: 62%; }
.ptabs__list { position: relative; display: flex; gap: 4px; width: fit-content; max-width: 100%; margin: 0 0 clamp(24px, 3vw, 36px); padding: 5px; border-radius: 999px; background: rgba(13, 10, 30, .07); overflow-x: auto; scrollbar-width: none; }
.ptabs__list::-webkit-scrollbar { display: none; }
.ptab { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 9px; flex: none; min-height: 48px; padding: 0 22px; border: 0; border-radius: 999px; background: none; color: var(--fg-2); font: 600 .9688rem/1 var(--font-ui); cursor: pointer; transition: color .25s; white-space: nowrap; }
.ptab[aria-selected="true"] { color: var(--bone); }
.ptab:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.ptabs__ind { position: absolute; z-index: 0; top: 5px; bottom: 5px; left: 0; width: var(--w, 0); translate: var(--x, 0) 0; border-radius: 999px; background: var(--ink); transition: translate .5s var(--spring2), width .5s var(--spring2); display: none; }
.ptabs.is-js .ptabs__ind { display: block; }
.ptabs:not(.is-js) .ptab[aria-selected="true"] { background: var(--ink); }
.ptabs__pan { padding-top: 4px; }
.ptabs.is-js .ptabs__pan.is-in > * { animation: pan-in .6s var(--e-out) both; }
.ptabs.is-js .ptabs__pan.is-in > *:nth-child(2) { animation-delay: .08s; } .ptabs.is-js .ptabs__pan.is-in > *:nth-child(3) { animation-delay: .16s; }
@keyframes pan-in { from { opacity: 0; translate: 0 22px; } }
.ptabs:not(.is-js) .ptabs__pan + .ptabs__pan { margin-top: 56px; }
.pan-head { max-width: 760px; margin-bottom: 26px; } .pan-head h2 { font-size: clamp(1.8rem, 1.2rem + 2vw, 3rem); }
.plans--2 { grid-template-columns: 1fr; } @media (min-width: 760px) { .plans--2 { grid-template-columns: repeat(2, 1fr); max-width: 900px; } }
.plan .price small { max-width: 11em; }
.contact { display: grid; gap: clamp(24px, 4vw, 56px); align-items: start; }
@media (min-width: 900px) { .contact { grid-template-columns: .9fr 1.1fr; } }
.contact__side h2 { font-size: clamp(1.8rem, 1.2rem + 2vw, 3rem); margin-bottom: 14px; }
.contact__form { padding: clamp(22px, 3vw, 36px); }
.cform { display: grid; gap: 16px; }
.cform__row { display: grid; gap: 16px; } @media (min-width: 640px) { .cform__row { grid-template-columns: 1fr 1fr; } }
.fl { display: grid; gap: 8px; min-width: 0; }
.fl > span { font: 600 .75rem/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: rgba(13, 10, 30, .66); }
.fl input, .fl select, .fl textarea { width: 100%; min-height: 54px; padding: 14px 16px; border-radius: 16px; border: 1.5px solid rgba(13, 10, 30, .2); background: #fff; color: var(--ink); font: 500 1.0625rem/1.3 var(--font-ui); transition: border-color .2s, box-shadow .2s; }
.fl textarea { min-height: 140px; resize: vertical; }
.fl input:focus, .fl select:focus, .fl textarea:focus { outline: 0; border-color: var(--blue); box-shadow: 0 0 0 4px rgba(59, 44, 255, .18); }
.fl input:user-invalid, .fl textarea:user-invalid { border-color: #c7391d; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.cform .note { color: rgba(13, 10, 30, .64); margin: 0; }
.cform__msg { min-height: 1.4em; margin: 0; font-weight: 600; } .cform__msg[data-kind="ok"] { color: #087a4d; } .cform__msg[data-kind="err"] { color: #b3321a; }
.cform .btn { justify-self: start; }
.cform.is-sent .btn { background: #087a4d; }
.js .sec-head .kin:not(.kin--auto) .w__in { transform: translateY(108%); opacity: 0; transition: transform .9s var(--e-out) calc(var(--i, 0) * 55ms + 120ms), opacity .5s ease calc(var(--i, 0) * 55ms + 120ms); }
.js .sec-head.is-in .kin .w__in { transform: none; opacity: 1; }
.btn { position: relative; overflow: hidden; isolation: isolate; }
.btn::after { content: ""; position: absolute; inset: 0; z-index: -1; translate: -120% 0; background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .45) 50%, transparent 70%); transition: translate .7s var(--e-out); pointer-events: none; }
.btn:hover::after { translate: 120% 0; }
.btn svg { transition: translate .35s var(--spring2); }
.btn:hover svg { translate: 4px 0; }
.btn--off::after, .plan--off .btn::after { display: none; }
@supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) {
  .other__img, .fan__c--1, .fan__c--2 { animation: drift-y linear both; animation-timeline: view(); }
  @keyframes drift-y { from { translate: 0 60px; } to { translate: 0 -40px; } }
  .panel > .wrap > .sec-head .chip { animation: chip-in linear both; animation-timeline: view(); animation-range: entry 10% entry 70%; }
  @keyframes chip-in { from { scale: .6; opacity: 0; } }
  .panel::after { content: ""; position: absolute; inset: 0; z-index: 0; border-radius: inherit; background: #0D0A1E; opacity: 0; pointer-events: none; animation: tuck linear both; animation-timeline: view(); animation-range: exit 25% exit 100%; }
  @keyframes tuck { to { opacity: .4; } }
  .hero__top { animation: copy-out linear both; animation-timeline: scroll(root); animation-range: 0 70vh; }
  @keyframes copy-out { to { translate: 0 -48px; opacity: .15; } }
  .final h2 { animation: final-h linear both; animation-timeline: view(); animation-range: entry 0% cover 55%; }
  @keyframes final-h { from { scale: .9; opacity: .2; translate: -3% 0; } }
    @keyframes word-rise { from { translate: 0 60%; -webkit-text-stroke-color: rgba(232, 255, 79, .05); } to { translate: 0 14%; } }
} }
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  .hdr { view-transition-name: hdr; }
  ::view-transition-old(root) { animation: vt-out .28s ease-in both; }
  ::view-transition-new(root) { animation: vt-in .5s var(--e-out) both; }
  @keyframes vt-out { to { opacity: 0; translate: 0 -14px; } }
  @keyframes vt-in { from { opacity: 0; translate: 0 22px; } }
}
@media (prefers-reduced-motion: reduce) {
  .chip::before, .stage__rot, .hero__bot { animation: none !important; }
  .js .sec-head .kin:not(.kin--auto) .w__in { transform: none; opacity: 1; transition: none; }
  .wa__msg, .mnav > a, .mnav .mnav__cta, .mnav .lang-m, .ptabs__pan > * { animation: none !important; }
  .stage__ph { transition: none; }
  .btn::after { display: none; }
}
:root { --hdr-h: 72px; }
.hdr::before { background: rgba(13, 10, 30, .6); -webkit-backdrop-filter: blur(28px) saturate(1.7); backdrop-filter: blur(28px) saturate(1.7); border-bottom: 1px solid rgba(245, 240, 230, .12); box-shadow: 0 10px 30px -18px rgba(0, 0, 0, .55); }
.hdr__bar { min-height: var(--hdr-h); }
.nav { height: 44px; padding: 3px; gap: 0; background: rgba(13, 10, 30, .38); -webkit-backdrop-filter: blur(16px) saturate(1.6); backdrop-filter: blur(16px) saturate(1.6); border: 1px solid rgba(245, 240, 230, .18); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08); align-items: stretch; }
.nav a { min-height: 0; height: 100%; display: inline-flex; align-items: center; padding: 0 20px; }
.nav__ind { top: 3px; bottom: 3px; background: rgba(245, 240, 230, .18); }
.nav.is-current .nav__ind { background: var(--lemon); }
.nav a:hover { color: var(--bone); }
.nav.is-hover:not(.is-current) a[aria-current="page"] { color: var(--fg-2); }
.nav.is-hover:not(.is-current) a[aria-current="page"]:hover { color: var(--bone); }
.nav.is-current a[aria-current="page"], .nav:not(.has-ind) a[aria-current="page"] { color: var(--ink); }
.lang__btn { min-height: 44px; height: 44px; background: rgba(13, 10, 30, .38); -webkit-backdrop-filter: blur(16px) saturate(1.6); backdrop-filter: blur(16px) saturate(1.6); border-color: rgba(245, 240, 230, .16); }
.hdr__cta { min-height: 44px; height: 44px; }
.hdr__r { gap: 10px; align-items: center; }
.plans-more { margin: 28px 0 0; text-align: center; }
.taxline { margin: 22px auto 0; text-align: center; font-size: .8125rem; color: var(--fg-3); }
.plans { max-width: 1240px; margin-inline: auto; align-items: stretch; }
.plans--4, .plans--3 { grid-template-columns: 1fr; }
@media (min-width: 700px) { .plans--4, .plans--3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1160px) { .plans--4 { grid-template-columns: repeat(4, 1fr); } .plans--3 { grid-template-columns: repeat(3, 1fr); } }
.plans--2 { max-width: 820px; }
.plan { gap: 14px; padding: 28px 24px 24px; overflow: hidden; isolation: isolate; transition: transform .5s var(--spring2), box-shadow .4s; }
.plan::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(320px circle at var(--sx, 50%) var(--sy, 0%), rgba(255, 255, 255, .2), transparent 62%); opacity: 0; transition: opacity .35s; pointer-events: none; }
.plan:hover::before { opacity: 1; }
.plan:hover { transform: translateY(-8px); box-shadow: 0 34px 50px -30px rgba(13, 10, 30, .6); }
.plan--pop { transform: translateY(-14px); box-shadow: 0 40px 60px -32px rgba(59, 44, 255, .8); }
.plan--pop:hover { transform: translateY(-22px); }
@media (max-width: 1159px) { .plan--pop, .plan--pop:hover { transform: none; } .plan--pop:hover { transform: translateY(-8px); } }
.plan__pop { position: absolute; top: 0; left: 50%; translate: -50% 0; padding: 8px 16px 9px; border-radius: 0 0 14px 14px; white-space: nowrap; background: var(--lemon); color: var(--ink); font: 700 .75rem/1 var(--font-ui); letter-spacing: .02em; }
.plan__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
@media (min-width: 1160px) { .plans--4 .plan__head { min-height: 2.6em; align-content: flex-start; } .plans--4 .plan h3 { font-size: 1.55rem; } }
.plan--pop { padding-top: 44px; }
.plan > .plan__lead { margin: 0; min-height: 2.8em; }
.plan .price { display: flex; flex-direction: column; gap: 6px; font: 800 clamp(2.8rem, 2rem + 1.6vw, 3.8rem)/1 var(--font-display); letter-spacing: -.05em; }
.plan .price small { font: 500 .8125rem/1.3 var(--font-ui); letter-spacing: 0; opacity: .82; max-width: none; }
.plan__lim { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 2px 0; }
.plan__lim > div { padding: 12px 14px; border-radius: 16px; background: rgba(255, 255, 255, .1); }
.plan--self_plus .plan__lim > div, .plan--concierge .plan__lim > div, .plan--pro .plan__lim > div { background: rgba(13, 10, 30, .09); }
.plan__lim b { display: block; font: 800 1.9rem/1 var(--font-display); letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.plan__lim span { display: block; margin-top: 4px; font-size: .8125rem; opacity: .85; }
.plan ul { margin: 4px 0 18px; }
.plan li { gap: 10px; padding: 9px 0; font-size: .9063rem; line-height: 1.35; }
.plan li::before { content: "✓"; width: auto; height: auto; margin-top: 0; background: none; border-radius: 0; opacity: 1; font-weight: 800; }
.plan__soon { display: inline-block; margin-left: 4px; padding: 2px 8px; font-style: normal; border-radius: 99px; border: 1px solid currentColor; font: 600 .6875rem/1.4 var(--font-ui); letter-spacing: .02em; opacity: .85; white-space: nowrap; }
.plan--off .price, .plan--off .plan__lim { opacity: .92; }
.pagehead--c { text-align: center; }
.pagehead--c h1, .pagehead--c .lede { margin-inline: auto; }
.pagehead--c .lede { max-width: 36em; }
.ptabs__list { margin-inline: auto; }
.pan-head { margin-inline: auto; text-align: center; }
.wid__tabs { position: relative; display: flex; gap: 4px; padding: 6px 10px 0; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.wid__tabs::-webkit-scrollbar { display: none; }
.wid__tab { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 16px; border: 0; background: none; color: var(--fg-2); font: 600 .9063rem/1 var(--font-ui); cursor: pointer; white-space: nowrap; transition: color .2s; }
.wid__tab svg { width: 17px; height: 17px; }
.wid__tab:hover, .wid__tab.is-on { color: var(--ink); }
.wid__tab:focus-visible { outline: 3px solid var(--blue); outline-offset: -3px; border-radius: 10px; }
.wid__n { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 99px; background: var(--coral); color: var(--ink); font: 700 .75rem/1 var(--font-ui); transition: background .3s, scale .3s var(--spring2); }
.wid__n.is-zero { background: #7DF0C0; scale: 1.1; }
.wid__ind { position: absolute; z-index: 0; left: 0; bottom: -1px; height: 3px; width: var(--w, 0); translate: var(--x, 0) 0; border-radius: 3px 3px 0 0; background: var(--blue); transition: translate .45s var(--spring2), width .45s var(--spring2); display: none; }
.wid.is-js .wid__ind { display: block; }
.wid__panes { min-height: 508px; }
.js .wid.is-js .wid__pan.is-on { animation: pan-in .5s var(--e-out) both; }
.wid__pan[hidden] { display: none; }
.wid:not(.is-js) .wid__pan[hidden] { display: block; }
.sum { display: flex; align-items: center; gap: clamp(18px, 3vw, 36px); padding: 26px 24px 8px; flex-wrap: wrap; justify-content: center; }
.donut { position: relative; margin: 0; width: 176px; height: 176px; flex: none; }
.donut svg { width: 100%; height: 100%; rotate: -90deg; }
.donut circle { fill: none; stroke-width: 6.4; }
.donut__bg { stroke: rgba(13, 10, 30, .08); }
.donut__a { stroke-linecap: butt; transition: stroke-dasharray 1s var(--e-out); }
.donut__a--y { stroke: #1fbf7a; } .donut__a--n { stroke: var(--coral); } .donut__a--p { stroke: #D6D1E4; }
.wid:not(.is-seen) .wid__pan:not(.is-on) .donut__a { stroke-dasharray: 0 100; }
.wid__pan.is-on .donut__a { animation: draw 1.1s var(--e-out) both; }
@keyframes draw { from { stroke-dasharray: 0 100; } }
.donut figcaption { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.donut figcaption b { font: 800 2.6rem/1 var(--font-display); letter-spacing: -.05em; color: var(--ink); }
.donut figcaption small { font: 500 .6875rem/1.2 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--fg-3); }
.legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: .9688rem; color: var(--ink); }
.legend li { display: flex; align-items: center; gap: 10px; }
.legend b { font-variant-numeric: tabular-nums; }
.lg { width: 12px; height: 12px; border-radius: 50%; } .lg--y { background: #1fbf7a; } .lg--n { background: var(--coral); } .lg--p { background: #D6D1E4; }
.bars { padding: 14px 24px 26px; display: grid; gap: 10px; }
.bars small { font: 500 .6875rem/1.2 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--fg-3); }
.bar { display: grid; grid-template-columns: 92px 1fr 28px; align-items: center; gap: 12px; font-size: .9063rem; color: var(--ink); }
.bar i { display: block; height: 12px; border-radius: 99px; background: rgba(13, 10, 30, .08); overflow: hidden; }
.bar u { display: block; height: 100%; width: calc(var(--v) * 100%); border-radius: inherit; background: var(--blue); transform-origin: 0 50%; }
.wid__pan.is-on .bar u { animation: grow .9s var(--e-out) calc(var(--k) * 120ms + .15s) both; }
@keyframes grow { from { transform: scaleX(0); } }
.bar b { text-align: right; font-variant-numeric: tabular-nums; }
.pend__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 18px 22px 8px; }
.pend__head p { margin: 0; font: 600 .9688rem/1.2 var(--font-ui); color: var(--ink); }
.pend { list-style: none; margin: 0; padding: 4px 12px 8px; }
.pend li { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 16px; transition: background .3s; }
.pend li:hover { background: rgba(13, 10, 30, .04); }
.pend__av { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--lilac); color: var(--ink); font: 700 .9375rem/1 var(--font-ui); flex: none; }
.pend__n { flex: 1; min-width: 0; color: var(--ink); font-weight: 600; }
.pend__b { min-height: 38px; padding: 0 16px; border-radius: 99px; border: 1.5px solid rgba(13, 10, 30, .3); background: none; color: var(--ink); font: 600 .875rem/1 var(--font-ui); cursor: pointer; transition: background .25s, color .25s, border-color .25s, scale .3s var(--spring2); }
.pend__b:hover { background: var(--ink); color: var(--bone); scale: 1.05; }
.pend__b.is-done { background: #CBF7E3; color: #06583a; border-color: transparent; cursor: default; scale: 1; }
.pend__b.is-done::before { content: "✓ "; }
.pend li.is-done .pend__av { background: #CBF7E3; }
.pend__toast { margin: 8px 22px 18px; padding: 10px 14px; border-radius: 14px; background: #0B141A; color: #E9EDEF; font-size: .875rem; opacity: 0; translate: 0 8px; transition: opacity .3s, translate .4s var(--spring2); width: fit-content; }
.pend__toast.is-on { opacity: 1; translate: 0 0; }
.win .btn--primary { --b: var(--ink); --f: var(--bone); }
.wa__msg p { overflow-wrap: anywhere; }
.wa__msg p u { color: #53BDEB; text-decoration: none; font-size: .8125rem; }
.wa__meta span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.qrcard { position: relative; display: grid; justify-items: center; gap: 8px; width: min(100%, 236px); padding: 26px 22px 22px; border-radius: 8px; background: #F5F0E6; color: var(--ink); text-decoration: none; rotate: -3deg; box-shadow: 0 34px 50px -26px rgba(0, 0, 0, .65), 0 2px 0 rgba(255, 255, 255, .5) inset; transition: rotate .5s var(--spring2), translate .5s var(--spring2); }
.qrcard::before { content: ""; position: absolute; inset: 9px; border: 1px solid rgba(13, 10, 30, .22); border-radius: 3px; pointer-events: none; }
.qrcard:hover { rotate: 0deg; translate: 0 -6px; }
.qrcard__k { font: 500 .6563rem/1 var(--font-mono); letter-spacing: .16em; text-transform: uppercase; color: rgba(13, 10, 30, .62); }
.qrcard__n { font: 400 2.1rem/1 var(--font-accent); letter-spacing: -.01em; text-align: center; }
.qrcard__n i { color: var(--coral); }
.qrcard__code { position: relative; display: block; width: 138px; margin: 8px 0 4px; padding: 9px; border-radius: 14px; background: #fff; overflow: hidden; box-shadow: 0 0 0 1px rgba(13, 10, 30, .1); }
.qrcard__code svg { display: block; width: 100%; height: auto; }
.qrcard__code i { position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--coral); box-shadow: 0 0 14px 2px var(--coral); animation: scan 2.6s ease-in-out infinite; }
.qrcard__s { font: 700 .75rem/1 var(--font-ui); letter-spacing: .14em; text-transform: uppercase; }
.qrcard__d { font: 500 .6875rem/1 var(--font-mono); letter-spacing: .06em; color: rgba(13, 10, 30, .62); }
@keyframes scan { 0%, 100% { translate: 0 0; } 50% { translate: 0 118px; } }
.con--p { grid-template-columns: 1fr; gap: clamp(22px, 3.4vw, 44px); }
@media (min-width: 900px) { .con--p { grid-template-columns: .85fr 1.15fr; } }
.panel:has(.con--p) { padding-block: calc(var(--sec-y) * .6 + var(--r-panel) * .25) calc(var(--sec-y) * .5 + var(--r-panel)); }
.con--p h2 { font-size: clamp(2rem, 1.2rem + 2.6vw, 3.6rem); margin-bottom: 14px; }
.con--p h2 em { font-family: var(--font-accent); font-weight: 400; font-size: 1.1em; letter-spacing: -.01em; }
.con--p .lede { font-size: 1.0625rem; margin-bottom: 20px; }
.con__ex { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
@media (min-width: 560px) { .con__ex { grid-template-columns: 1fr 1fr; } }
.con__c { padding: 20px 22px 22px; border-radius: 24px; background: var(--ink); color: var(--bone); box-shadow: 0 24px 40px -28px rgba(13, 10, 30, .7); transition: translate .5s var(--spring2); }
.con__c:hover { translate: 0 -5px; }
.con__c h3 { color: var(--bone); font-size: 1.1875rem; margin: 0 0 6px; }
.con__c p { margin: 0; color: rgba(245, 240, 230, .78); font-size: .9063rem; line-height: 1.45; }
.con__i { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 14px; border-radius: 50%; background: rgba(200, 184, 255, .16); color: var(--lilac); }
.con__i svg { width: 22px; height: 22px; }
@media (prefers-reduced-motion: reduce) {
  .wid__pan.is-on .donut__a, .wid__pan.is-on .bar u, .js .wid.is-js .wid__pan.is-on, .qrcard__code i { animation: none !important; }
  .qrcard, .qrcard:hover, .plan, .plan:hover, .con__c, .con__c:hover { transition: none; }
}
:root, :root:not([data-theme="light"]) {
  color-scheme: dark;
  --green: #4A614B; --green-900: #2C3E2E; --green-700: #3A4F3C; --red: #EC4537; --red-700: #B92E22; --coral: #E56055; --coral-tint: #F5A294;
  --cream: #F6F1E6; --cream-2: #ECE5D5; --ink: #0F1A11; --ink-2: #1C2A1E;
  --snow: var(--cream); --snow-2: var(--cream-2); --bone: var(--cream); --bone-2: var(--cream-2); --punk: var(--coral); --lemon: var(--coral); --lilac: var(--cream-2);
  --blue: var(--red); --blue-700: var(--red-700); --blue-300: var(--coral-tint); --coral-700: var(--red-700);
  --fg: var(--cream); --fg-2: rgba(246, 241, 230, .84); --fg-3: rgba(246, 241, 230, .68); --line: rgba(246, 241, 230, .18); --line-2: rgba(246, 241, 230, .36);
  --card: var(--green-700); --page: var(--green); --focus: var(--coral-tint); --r-panel: clamp(28px, 4.5vw, 60px);
  --soft: 0 30px 60px -28px rgba(8, 16, 9, .65); --soft-s: 0 14px 30px -14px rgba(8, 16, 9, .55);
}
html, body { background: var(--green); color: var(--cream); }
::selection { background: var(--coral); color: var(--ink); }
:focus-visible { outline: 3px solid var(--coral-tint); outline-offset: 3px; box-shadow: none; }
.paper { background: var(--cream); color: var(--ink); border: 0; box-shadow: var(--soft); --fg: var(--ink); --fg-2: rgba(15, 26, 17, .8); --fg-3: rgba(15, 26, 17, .66); --line: rgba(15, 26, 17, .14); }
.paper h1 em, .paper h2 em, .paper h3 em { color: var(--red-700); }
h1 em { color: var(--coral-tint); }
.logo { color: var(--cream); }
.btn { --b: var(--coral); --f: var(--ink); min-height: 50px; padding: 0 26px; border: 0; color: var(--f); font-weight: 700; letter-spacing: -.012em;
  background: linear-gradient(180deg, color-mix(in srgb, var(--b) 82%, #fff), var(--b) 78%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .42), inset 0 -1px 0 rgba(0, 0, 0, .14), 0 1px 2px rgba(8, 16, 9, .35), 0 14px 26px -12px color-mix(in srgb, var(--b) 80%, #000);
  transition: transform .3s var(--e-out), background .2s, color .2s, box-shadow .3s; }
.btn:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), inset 0 -1px 0 rgba(0, 0, 0, .14), 0 2px 4px rgba(8, 16, 9, .35), 0 20px 34px -12px color-mix(in srgb, var(--b) 85%, #000); }
.btn:active { transform: translateY(0) scale(.985); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), inset 0 2px 4px rgba(0, 0, 0, .18), 0 6px 14px -8px color-mix(in srgb, var(--b) 80%, #000); }
.btn--lg { min-height: 56px; }
.btn--primary, .btn--lemon { --b: var(--coral); --f: var(--ink); }
.btn--ink { --b: var(--ink-2); --f: var(--cream); }
.btn--primary > svg:last-child, .btn--lemon > svg:last-child, .btn--ink > svg:last-child { box-sizing: content-box; width: 1em; height: 1em; padding: 6px; margin: 0 -15px 0 2px; border-radius: 50%; background: rgba(15, 26, 17, .14); transition: background .25s, color .25s, translate .35s var(--spring2); }
.btn--primary:hover > svg:last-child, .btn--lemon:hover > svg:last-child { background: var(--ink); color: var(--coral-tint); }
.btn--ink > svg:last-child { background: rgba(246, 241, 230, .16); }
.btn--ink:hover > svg:last-child { background: var(--coral); color: var(--ink); }
.btn--ghost { background: rgba(246, 241, 230, .08); color: var(--cream); box-shadow: inset 0 0 0 1.5px rgba(246, 241, 230, .42), inset 0 1px 0 rgba(255, 255, 255, .1); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.btn--ghost:hover { background: rgba(246, 241, 230, .16); box-shadow: inset 0 0 0 1.5px var(--cream), 0 14px 26px -16px rgba(8, 16, 9, .6); }
.btn--off { background: rgba(246, 241, 230, .1) !important; color: rgba(246, 241, 230, .6) !important; box-shadow: inset 0 0 0 1.5px rgba(246, 241, 230, .2) !important; }
.paper .btn--primary, .paper .btn--ink, .win .btn--primary { --b: var(--ink-2); --f: var(--cream); }
.paper .btn--ghost { color: var(--ink); background: transparent; box-shadow: inset 0 0 0 1.5px rgba(15, 26, 17, .35); }
.paper .btn--ghost:hover { background: rgba(15, 26, 17, .06); box-shadow: inset 0 0 0 1.5px var(--ink); }
.scroll-progress { background: var(--coral) !important; }
.hdr::before { background: rgba(58, 79, 60, .62); -webkit-backdrop-filter: blur(26px) saturate(1.5); backdrop-filter: blur(26px) saturate(1.5); border-bottom: 1px solid rgba(246, 241, 230, .12); box-shadow: 0 12px 30px -20px rgba(0, 0, 0, .55); }
body:has(.mnav.is-open) .hdr::before { background: var(--green-900); -webkit-backdrop-filter: none; backdrop-filter: none; }
.nav { background: rgba(246, 241, 230, .1); border: 1px solid rgba(246, 241, 230, .2); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12); -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4); }
.nav a { color: var(--fg-2); } .nav a:hover { color: var(--cream); }
.nav__ind { background: rgba(246, 241, 230, .16); }
.nav.is-current .nav__ind { background: var(--coral); box-shadow: none; }
.nav.is-current a[aria-current="page"], .nav:not(.has-ind) a[aria-current="page"] { color: var(--ink); }
.nav:not(.has-ind) a[aria-current="page"] { background: var(--coral); }
.nav.is-hover:not(.is-current) a[aria-current="page"] { color: var(--fg-2); }
.nav.is-hover:not(.is-current) a[aria-current="page"]:hover { color: var(--cream); }
.nav.is-hover:not(.is-current) .nav__ind { background: rgba(246, 241, 230, .16); }
.flag { box-shadow: 0 0 0 1px rgba(246, 241, 230, .35); }
.lang__btn { background: rgba(246, 241, 230, .1); border: 1px solid rgba(246, 241, 230, .22); color: var(--cream); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.lang__btn:hover, .lang.is-open .lang__btn { background: rgba(246, 241, 230, .18); border-color: var(--cream); }
.lang__menu { background: var(--green-900); border: 1px solid rgba(246, 241, 230, .2); box-shadow: var(--soft); }
.lang__menu a { color: var(--cream); }
.lang__menu a:hover, .lang__menu a:focus-visible { background: rgba(246, 241, 230, .1); }
.lang__menu a[aria-current] { background: rgba(229, 96, 85, .22); }
.lang__menu a svg:last-child { color: var(--coral-tint); }
.hdr__cta { box-shadow: 0 10px 24px -10px rgba(229, 96, 85, .7); }
.burger { color: var(--cream); }
.mnav { background: var(--green-900); }
.mnav a { color: var(--cream); border-bottom-color: rgba(246, 241, 230, .16); }
.mnav > a small { color: var(--coral-tint); }
.mnav .mnav__cta { color: var(--ink); border: 0; }
.mnav .lang-m a { border: 1px solid rgba(246, 241, 230, .35); color: var(--cream); }
.mnav .lang-m a[aria-current="true"] { background: var(--coral); border-color: var(--coral); color: var(--ink); }
.dock { background: var(--coral); color: var(--ink); border: 0; box-shadow: 0 10px 30px -8px rgba(0, 0, 0, .6); }
.panel { --p-bg: var(--green); --p-fg: var(--cream); --p-btn: var(--coral); --p-btn-f: var(--ink); --em: var(--coral-tint); --dot: var(--coral); --outline: var(--coral-tint);
  --fg: var(--cream); --fg-2: rgba(246, 241, 230, .86); --fg-3: rgba(246, 241, 230, .7); --line: rgba(246, 241, 230, .18); --line-2: rgba(246, 241, 230, .36); --card: var(--green-700); }
.panel--snow, .panel--ink, .panel--green { --p-bg: var(--green); }
.panel--red, .panel--blue, .panel--orange { --p-bg: var(--red); --p-fg: var(--ink); --p-btn: var(--ink); --p-btn-f: var(--cream); --em: var(--cream); --dot: var(--ink); --outline: var(--ink); --fg: var(--ink); --fg-2: rgba(15, 26, 17, .88); --fg-3: rgba(15, 26, 17, .76); --line: rgba(15, 26, 17, .26); --line-2: rgba(15, 26, 17, .5); --card: var(--cream); }
.panel--coral, .panel--yellow, .panel--lemon { --p-bg: var(--coral); --p-fg: var(--ink); --p-btn: var(--ink); --p-btn-f: var(--cream); --em: var(--cream); --dot: var(--ink); --outline: var(--ink); --fg: var(--ink); --fg-2: rgba(15, 26, 17, .86); --fg-3: rgba(15, 26, 17, .74); --line: rgba(15, 26, 17, .24); --line-2: rgba(15, 26, 17, .48); --card: var(--cream); }
.panel--cream, .panel--sand, .panel--bone, .panel--lilac { --p-bg: var(--cream); --p-fg: var(--ink); --p-btn: var(--ink); --p-btn-f: var(--cream); --em: var(--red-700); --dot: var(--red); --outline: var(--ink); --fg: var(--ink); --fg-2: rgba(15, 26, 17, .8); --fg-3: rgba(15, 26, 17, .66); --line: rgba(15, 26, 17, .14); --line-2: rgba(15, 26, 17, .32); --card: #fff; }
.panel { color: var(--p-fg); }
.panel h2 em, .panel h3 em, .panel h1 em { color: var(--em); }
.panel--red h2, .panel--red h3, .panel--coral h2, .panel--coral h3 { color: var(--ink); }
.panel::after { display: none !important; }
.panel .lede, .panel .note { color: var(--fg-2); }
.panel .btn--primary { --b: var(--p-btn); --f: var(--p-btn-f); }
.panel--red .btn--ghost, .panel--coral .btn--ghost, .panel--cream .btn--ghost, .panel--sand .btn--ghost { color: var(--ink); background: rgba(255, 255, 255, .14); box-shadow: inset 0 0 0 1.5px rgba(15, 26, 17, .55); }
.panel--red .btn--ghost:hover, .panel--coral .btn--ghost:hover, .panel--cream .btn--ghost:hover, .panel--sand .btn--ghost:hover { background: rgba(255, 255, 255, .3); box-shadow: inset 0 0 0 1.5px var(--ink); }
.panel .ticks li::before { background: var(--coral); }
.panel--red .ticks li::before, .panel--coral .ticks li::before, .panel--sand .ticks li::before { background: var(--ink); }
.panel .faq, .panel .faq details { border-color: var(--line-2); }
.panel .faq details[open] summary { color: var(--em); }
.faq__i { border-color: currentColor; }
.tag { color: var(--fg-2); border-color: var(--line-2); }
.panel--red :focus-visible, .panel--coral :focus-visible, .panel--sand :focus-visible { outline-color: var(--ink); }
.tile { --t-bg: var(--cream); --t-fg: var(--ink); --t-fg2: rgba(15, 26, 17, .8); --t-line: rgba(15, 26, 17, .16); --t-em: var(--red-700); border: 0; box-shadow: var(--soft-s); }
.tile--bone, .tile--ink, .tile--lilac, .tile--cream { --t-bg: var(--cream); }
.tile--deep { --t-bg: var(--green-900); --t-fg: var(--cream); --t-fg2: rgba(246, 241, 230, .86); --t-line: rgba(246, 241, 230, .22); --t-em: var(--coral-tint); }
.tile--deep .scene--ten .ten span { color: var(--coral-tint); }
.panel .tile--deep, .panel .tile--deep h3, .panel .tile--deep .ticks2 li, .panel .tile--deep .tile__n { color: var(--cream); }
.panel .tile--deep p { color: var(--t-fg2); }
.panel--cream .tile--bone, .panel--sand .tile--bone { --t-bg: #FFFCF5; box-shadow: 0 0 0 1px rgba(15, 26, 17, .08), var(--soft-s); }
:is(.panel--red, .panel--blue, .panel--orange, .panel--coral, .panel--yellow, .panel--lemon) :is(.tile--lemon, .tile--yellow, .tile--coral, .tile--red, .tile--blue) { --t-bg: var(--green-900); --t-fg: var(--cream); --t-fg2: rgba(246, 241, 230, .86); --t-line: rgba(246, 241, 230, .22); --t-em: var(--coral-tint); }
.tile--lemon, .tile--yellow, .tile--coral { --t-bg: var(--coral); --t-fg: var(--ink); --t-fg2: rgba(15, 26, 17, .86); --t-line: rgba(15, 26, 17, .24); --t-em: var(--cream); }
.tile--blue, .tile--red { --t-bg: var(--red); --t-fg: var(--ink); --t-fg2: rgba(15, 26, 17, .88); --t-line: rgba(15, 26, 17, .28); --t-em: var(--cream); }
.tile--wa { --t-bg: #0B141A; --t-fg: #E9EDEF; --t-fg2: rgba(233, 237, 239, .82); --t-line: rgba(233, 237, 239, .2); }
.tile--wa h3 { color: #E9EDEF; }
.other:hover { box-shadow: 0 30px 50px -26px rgba(8, 16, 9, .7); }
.case__i { border-color: currentColor; color: var(--t-fg); background: none; }
.menu-qr { background: var(--cream); }
.panel--green .tile .case__i { color: var(--t-fg); }
.band--lemon { background: var(--coral); color: var(--ink); box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .5); border: 0; }
.band--coral { background: var(--red); color: var(--ink); box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .5); border: 0; }
.band i { color: var(--ink); }
.hero { --stg: min(560px, 52svh, 100vw); background: var(--green); padding: calc(var(--hdr-h) + 10px) 0 calc(var(--r-panel) + 12px); align-items: start; }
.hero__bg { z-index: -1; }
.hero__bg::before { content: ""; position: absolute; inset: 0; z-index: 0; background: radial-gradient(52% 46% at 50% 68%, rgba(236, 69, 55, .46), transparent 72%), radial-gradient(60% 40% at 50% 0%, rgba(246, 241, 230, .1), transparent 70%), radial-gradient(40% 40% at 6% 80%, rgba(44, 62, 46, .6), transparent 70%); opacity: 1; }
.hero__bg::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(246, 241, 230, .06) 1px, transparent 1.4px); background-size: 4px 4px; opacity: .5; -webkit-mask-image: none; mask-image: none; }
.arch { position: absolute; left: 50%; bottom: -2px; translate: -50% 0; width: calc(var(--stg) * 1.5); max-width: 118vw; height: calc(var(--stg) * 1.2); border: 1.5px solid rgba(246, 241, 230, .34); border-bottom: 0; border-radius: 999px 999px 0 0; background: linear-gradient(rgba(236, 69, 55, 0), rgba(236, 69, 55, .26)); z-index: 1; }
.arch--in { width: calc(var(--stg) * 1.5 + 54px); height: calc(var(--stg) * 1.2 + 27px); border-color: rgba(246, 241, 230, .14); background: none; }
.sun, .bunting, .petals, .sticker { display: none !important; }
.hero > .wrap { width: min(1560px, 100%); }
.hero__in { grid-template-rows: auto auto auto; }
.hero__top { z-index: 3; display: grid; justify-items: center; gap: 14px; padding-top: clamp(30px, 4.6vw, 70px); }
.hero h1 { max-width: 11.2em; font-size: clamp(2.6rem, .5rem + 5.4vw, 6.4rem); line-height: .94; letter-spacing: -.045em; color: var(--cream); }
.hero h1 em { color: var(--coral-tint); font-size: 1.06em; }
.hero__sub { margin: 0; max-width: 34em; padding: 0; border: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; font: 500 clamp(1.0625rem, .95rem + .45vw, 1.3rem)/1.4 var(--font-ui); color: rgba(246, 241, 230, .9); text-wrap: balance; }
.hstage { margin-top: clamp(0px, .6vw, 10px); height: calc(var(--stg) * .98); z-index: 2; }
.hero__bot { margin-top: calc(var(--stg) * -.02); z-index: 6; }
.hero .cta-row { justify-content: center; }
.stage__ph .device { box-shadow: 0 0 0 1px rgba(246, 241, 230, .2), 0 40px 70px -30px rgba(0, 0, 0, .8); }
.stage__ph.is-c .device { box-shadow: 0 0 0 1px rgba(246, 241, 230, .26), 0 50px 90px -30px rgba(0, 0, 0, .85), 0 0 110px -30px rgba(236, 69, 55, .85); }
.stage__ph .device__screen::before { background: rgb(44 62 46 / calc(var(--a) * .34)); }
.deco { position: absolute; height: auto; pointer-events: none; user-select: none; opacity: .92; z-index: 1; }
.deco--olive { bottom: 4%; width: clamp(120px, 15vw, 230px); }
.deco--l { left: calc(50% - var(--stg) * .86 - clamp(40px, 6vw, 110px)); rotate: -6deg; }
.deco--r { right: calc(50% - var(--stg) * .86 - clamp(40px, 6vw, 110px)); scale: -1 1; rotate: -6deg; }
.deco--toast, .deco--cake { display: none; }
@media (max-width: 959px) {
  .hero { --stg: min(112vw, 480px, 54svh); }
  .hero h1, .hero--land h1, .hero--tpl h1 { font-size: clamp(2.5rem, 11.6vw, 4.6rem); }
  .hero__sub { font-size: 1.0313rem; }
  .deco--olive { width: 110px; bottom: 13%; } .deco--l { left: -34px; } .deco--r { right: -34px; }
}
.hero--land h1, .hero--tpl h1 { font-size: clamp(2.4rem, .5rem + 4.8vw, 5.4rem); }
@media (max-width: 959px) { .hero--land h1, .hero--tpl h1 { font-size: clamp(2.4rem, 10.4vw, 4.2rem); } }
@media (max-width: 520px) { .hero .cta-row .btn--ghost { display: none; } }
@media (prefers-reduced-motion: no-preference) {
  .deco--olive { transform-origin: 50% 100%; animation: olive-sway 6s ease-in-out infinite alternate; }
  @keyframes olive-sway { to { rotate: 3deg; } }
  .hero__top { animation: bot-in 1s var(--e-out) .1s both; }
}
.stage__dots { display: flex; gap: 7px; pointer-events: none; }
.stage__dots i { width: 7px; height: 7px; border-radius: 99px; background: rgba(246, 241, 230, .3); transition: width .5s var(--spring2), background .3s; }
.stage__dots i.is-on { width: 26px; background: var(--coral); }
.sec-head--row { max-width: none !important; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.sec-head--row > div:first-child { max-width: 820px; }
.hero + .panel, .bands + .panel { margin-top: calc(var(--r-panel) * -1); }
.ftr { background: var(--green-900); border-top: 0; color: var(--cream); }
.ftr .logo, .ftr__brand p { color: var(--cream); }
.ftr__links a, .ftr__fine a { color: var(--fg-2); }
.ftr__links a:hover, .ftr__fine a:hover { color: var(--cream); }
.ftr__fine { color: var(--fg-3); border-top-color: rgba(246, 241, 230, .16); }
.ftr__lang a[aria-current="true"] .flag { box-shadow: 0 0 0 2px var(--coral); }
.ftr__lang a { opacity: .6; }
.tcard__ph { background: var(--green-900); box-shadow: 0 34px 60px -30px rgba(0, 0, 0, .8), 0 0 0 1px rgba(246, 241, 230, .16); }
.tcard:hover .tcard__ph { box-shadow: 0 44px 80px -28px rgba(0, 0, 0, .85), 0 0 0 2px var(--coral); }
.tcard__screen { background: var(--green-900); }
.tcard__hint { background: rgba(15, 26, 17, .82); color: var(--cream); }
.tcard__prev { background: var(--coral); border: 0; color: var(--ink); box-shadow: 0 12px 26px -8px rgba(0, 0, 0, .7); }
.tcard__link { color: var(--fg); }
.tcard__link:focus-visible { outline-color: var(--coral-tint); }
.tcard:hover .tcard__go { background: var(--coral); color: var(--ink); border-color: var(--coral); }
.tcard__go { border: 1.5px solid var(--line-2); }
.rail-nav__b { border: 1.5px solid var(--line-2); color: var(--p-fg); background: transparent; box-shadow: none; }
.rail-nav__b:hover { background: var(--coral); color: var(--ink); border-color: var(--coral); }
.filters { background: rgba(58, 79, 60, .9); border-block: 1px solid var(--line); }
.fbtn:hover { background: rgba(246, 241, 230, .1); }
.fbtn[aria-pressed="true"] { background: var(--coral); color: var(--ink); box-shadow: none; }
.pagehead { background: var(--green); position: relative; isolation: isolate; padding-top: calc(var(--hdr-h) + clamp(48px, 6vw, 90px)); }
.pagehead .hero__bg { z-index: -1; -webkit-mask-image: linear-gradient(#000 55%, transparent); mask-image: linear-gradient(#000 55%, transparent); }
.pagehead .hero__bg::before { background: radial-gradient(50% 70% at 85% 10%, rgba(236, 69, 55, .4), transparent 70%), radial-gradient(40% 60% at 5% 0%, rgba(246, 241, 230, .08), transparent 70%); }
.pagehead h1 { color: var(--cream); }
.typebox { border: 0; box-shadow: 0 24px 44px -22px rgba(15, 26, 17, .55); background: #fff; }
.typebox p span { border-right-color: var(--red); }
.typebox__chips b { background: var(--cream-2); color: var(--ink); border: 0; }
.ticks2 svg { background: var(--ink); color: var(--coral-tint); }
.sh { border: 0; box-shadow: 0 14px 28px -14px rgba(0, 0, 0, .6); }
.sh--1 { background: var(--coral); } .sh--2 { background: var(--cream); } .sh--3 { background: var(--red); }
.toast { background: var(--cream); border: 0; box-shadow: 0 16px 30px -14px rgba(0, 0, 0, .7); }
.scene--ten .ten span { color: var(--red-700); }
.win { background: var(--cream); border: 0; box-shadow: 0 50px 90px -40px rgba(8, 16, 9, .7), 0 0 0 1px rgba(15, 26, 17, .08); --fg: var(--ink); --fg-2: rgba(15, 26, 17, .78); --fg-3: rgba(15, 26, 17, .62); --line: rgba(15, 26, 17, .13); }
.win__bar i, .win__bar i:nth-child(2), .win__bar i:nth-child(3) { background: rgba(15, 26, 17, .25); opacity: 1; box-shadow: none; }
.win__bar i:nth-child(2) { background: var(--coral); } .win__bar i:nth-child(3) { background: var(--green); }
.win .stats b { color: var(--red-700); }
.pill--y { background: #D5E2D2; color: #1F3A22; box-shadow: none; }
.pill--n { background: #F7D3CD; color: #8E2218; box-shadow: none; }
.wid__tab:hover, .wid__tab.is-on { color: var(--ink); }
.wid__ind { background: var(--red); height: 3px; }
.wid__n { background: var(--red); color: var(--cream); }
.wid__n.is-zero { background: var(--green); }
.donut__bg { stroke: rgba(15, 26, 17, .08); }
.donut__a--y { stroke: var(--green); } .donut__a--n { stroke: var(--red); } .donut__a--p { stroke: #D9CFB9; }
.lg--y { background: var(--green); } .lg--n { background: var(--red); } .lg--p { background: #D9CFB9; box-shadow: none; }
.bar u { background: var(--red); }
.pend__av { background: var(--cream-2); box-shadow: none; }
.pend__b { border-color: rgba(15, 26, 17, .35); }
.pend__b:hover { background: var(--ink); color: var(--cream); }
.pend__b.is-done { background: #D5E2D2; color: #1F3A22; border-color: transparent; }
.pend li.is-done .pend__av { background: #D5E2D2; }
.thread .msg--them { background: var(--green-700); color: var(--cream); border: 0; }
.thread .msg--me { background: var(--coral); color: var(--ink); border: 0; }
.qrcard { background: var(--cream); border: 0; border-radius: 8px; box-shadow: 0 34px 50px -26px rgba(0, 0, 0, .65); }
.qrcard__n i { color: var(--red); }
.qrcard__code { box-shadow: 0 0 0 1px rgba(15, 26, 17, .12); }
.qrcard__code i { background: var(--red); box-shadow: 0 0 14px 2px var(--red); }
.wa { box-shadow: 0 30px 60px -28px rgba(0, 0, 0, .8), 0 0 0 1px rgba(246, 241, 230, .12); }
.con__c { background: var(--cream); color: var(--ink); border: 0; box-shadow: var(--soft-s); }
.con__c:hover { translate: 0 -5px; }
.con__c h3 { color: var(--ink); } .con__c p { color: rgba(15, 26, 17, .8); }
.con__i { background: var(--coral); color: var(--ink); border: 0; }
.con--p h2 em { color: var(--cream); }
.plans { align-items: stretch; }
.plan { --pl-bg: #FFFCF5; --pl-fg: var(--ink); --pl-fg2: rgba(15, 26, 17, .76); --pl-line: rgba(15, 26, 17, .13); --pl-tile: rgba(15, 26, 17, .06); --pl-btn: var(--ink-2); --pl-btn-f: var(--cream); --pl-chk: var(--red-700); --pl-line-2: rgba(15, 26, 17, .16);
  overflow: visible; background: var(--pl-bg); color: var(--pl-fg); --fg: var(--pl-fg); --fg-2: var(--pl-fg2); --line: var(--pl-line); border: 0; transform: none;
  box-shadow: 0 0 0 1px var(--pl-line-2), 0 26px 40px -26px rgba(8, 16, 9, .5); }
.plan::before { border-radius: inherit; }
.plan:hover { transform: translateY(-4px); box-shadow: 0 0 0 1px var(--pl-line-2), 0 36px 50px -30px rgba(8, 16, 9, .55); }
.plan--pop, .plan--pop:hover { padding-top: clamp(22px, 2.4vw, 32px); }
.plan--pop { --pl-bg: var(--green-900); --pl-fg: var(--cream); --pl-fg2: rgba(246, 241, 230, .84); --pl-line: rgba(246, 241, 230, .2); --pl-tile: rgba(246, 241, 230, .09); --pl-btn: var(--coral); --pl-btn-f: var(--ink); --pl-chk: var(--coral-tint); --pl-line-2: transparent; transform: none; box-shadow: 0 40px 60px -30px rgba(8, 16, 9, .75); }
.plan--pop:hover { transform: translateY(-4px); }
.panel--green .plan, .panel--snow .plan, .panel--ink .plan { --pl-bg: rgba(246, 241, 230, .07); --pl-fg: var(--cream); --pl-fg2: rgba(246, 241, 230, .84); --pl-line: rgba(246, 241, 230, .2); --pl-tile: rgba(246, 241, 230, .09); --pl-btn: var(--cream); --pl-btn-f: var(--ink); --pl-chk: var(--coral-tint); --pl-line-2: rgba(246, 241, 230, .22); box-shadow: 0 0 0 1px var(--pl-line-2); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.panel--green .plan:hover, .panel--snow .plan:hover { box-shadow: 0 0 0 1px rgba(246, 241, 230, .4), 0 30px 46px -30px rgba(0, 0, 0, .6); }
.panel--green .plan--pop, .panel--snow .plan--pop, .panel--ink .plan--pop { --pl-bg: #FFFCF5; --pl-fg: var(--ink); --pl-fg2: rgba(15, 26, 17, .76); --pl-line: rgba(15, 26, 17, .13); --pl-tile: rgba(15, 26, 17, .06); --pl-btn: var(--coral); --pl-btn-f: var(--ink); --pl-chk: var(--red-700); --pl-line-2: transparent; box-shadow: 0 40px 60px -28px rgba(0, 0, 0, .65); -webkit-backdrop-filter: none; backdrop-filter: none; }
.plan .price { color: inherit; }
.plan .btn { --b: var(--pl-btn); --f: var(--pl-btn-f); }
.plan__pop { top: -14px; padding: 7px 15px 8px; border-radius: 999px; background: var(--coral); color: var(--ink); border: 0; box-shadow: 0 8px 18px -8px rgba(229, 96, 85, .8), inset 0 1px 0 rgba(255, 255, 255, .45); }
.plan__lim > div { background: var(--pl-tile); box-shadow: none; }
.plan li { border-top-color: var(--pl-line); }
.plan li::before { color: var(--pl-chk); }
.plan__soon { border-color: currentColor; }
.plan .tag { color: inherit; border-color: currentColor; }
.ptabs__list { background: rgba(246, 241, 230, .1); border: 0; }
.ptab { color: var(--fg-2); }
.ptab[aria-selected="true"] { color: var(--ink); }
.ptabs__ind { background: var(--coral); box-shadow: none; }
.ptabs:not(.is-js) .ptab[aria-selected="true"] { background: var(--coral); }
.ptab:focus-visible { outline-color: var(--coral-tint); }
.taxline { color: var(--fg-2); }
.fl > span { color: rgba(15, 26, 17, .7); }
.fl input, .fl select, .fl textarea { border: 1.5px solid rgba(15, 26, 17, .25); border-radius: 14px; background: #fff; }
.fl input:focus, .fl select:focus, .fl textarea:focus { border-color: var(--red); box-shadow: 0 0 0 4px rgba(236, 69, 55, .22); }
.cform.is-sent .btn { background: var(--green); color: var(--cream); }
.contact__form.paper { box-shadow: var(--soft); }
.final h2 { color: var(--ink); }
.fan__c { border: 0; box-shadow: 0 40px 70px -26px rgba(15, 26, 17, .7); border-radius: 24px; }
.shot { background: var(--green-700); border: 0; box-shadow: 0 50px 90px -40px rgba(0, 0, 0, .7); }
.shot figcaption { color: var(--fg-2); }
.alert { background: var(--green-700); color: var(--cream); border: 0; }
.alert--ok { background: #D5E2D2; color: #1F3A22; }
.post-cta { background: var(--red); color: var(--ink); border: 0; box-shadow: var(--soft); --fg: var(--ink); --fg-2: rgba(15, 26, 17, .9); }
.post-cta .btn--primary { --b: var(--ink); --f: var(--cream); }
.post-cta .btn--ghost { color: var(--ink); border-color: var(--ink); }
.toc { background: var(--cream-2); border: 0; }
.prose a, .legal a { color: var(--red-700); }
.prose li::marker { color: var(--red-700); }
.prose blockquote { border-left-color: var(--red); }
.prose pre { background: var(--ink); color: var(--cream); }
.authc { background: var(--green-700); border: 1px solid var(--line); box-shadow: var(--soft); }
.field input { background: var(--green-900); color: var(--cream); border: 1.5px solid var(--line-2); }
.field input:focus { border-color: var(--coral); box-shadow: 0 0 0 3px rgba(229, 96, 85, .3); }
.err { color: var(--coral-tint); }
.draft { background: var(--coral); color: var(--ink); border: 0; }
.crumbs a:hover { color: var(--cream); }
.is-skel { background: linear-gradient(100deg, rgba(246, 241, 230, .04) 30%, rgba(246, 241, 230, .1) 50%, rgba(246, 241, 230, .04) 70%) 0 0 / 220% 100%; }
.post:hover h2 a { text-decoration-color: var(--coral); }
.player { color: var(--cream); }
@media (max-width: 759px) { .plan:hover { transform: none; } }
.fs { display: grid; gap: clamp(16px, 2.4vw, 32px); align-items: stretch; }
@media (min-width: 900px) { .fs { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); } }
.fs__tabs { display: grid; gap: 10px; grid-template-columns: 1fr 1fr; align-content: start; }
@media (min-width: 900px) { .fs__tabs { grid-template-columns: 1fr; } }
.fs__tab { position: relative; overflow: hidden; display: flex; align-items: center; gap: 14px; min-height: 60px; padding: 8px 18px 8px 10px; border: 0; border-radius: 18px; background: var(--cream); color: var(--ink); color: var(--ink); font: 700 1.0625rem/1.15 var(--font-display); letter-spacing: -.02em; text-align: left; cursor: pointer; box-shadow: 0 16px 26px -16px rgba(15,26,17,.5); transition: transform .25s var(--spring2), box-shadow .25s, background .2s; }
.fs__tab:hover { transform: translate(-1px, -2px); box-shadow: 0 16px 26px -16px rgba(15,26,17,.5); }
.fs__tab:active { transform: translate(2px, 2px); box-shadow: 0 0 0 var(--ink); }
.fs__tab.is-on { background: var(--punk); transform: translateX(8px); box-shadow: 0 16px 26px -16px rgba(15,26,17,.5); }
@media (max-width: 899px) { .fs__tab.is-on { transform: none; } .fs__tab { font-size: .875rem; gap: 9px; padding: 6px 8px; min-width: 0; } .fs__i { width: 34px; height: 34px; border-radius: 10px; } .fs__n { min-width: 0; overflow-wrap: anywhere; hyphens: auto; } }
.fs__i { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 12px; border: 1.5px solid rgba(15,26,17,.26); background: #fff; transition: rotate .4s var(--spring2), background .2s; }
.fs__tab.is-on .fs__i { background: var(--ink); color: var(--punk); rotate: -8deg; }
.fs__bar { position: absolute; left: 0; bottom: 0; height: 4px; width: 100%; background: var(--ink); transform-origin: 0 50%; transform: scaleX(0); }
.fs.is-auto .fs__tab.is-on .fs__bar { animation: fs-bar var(--ms, 5600ms) linear forwards; }
@keyframes fs-bar { to { transform: scaleX(1); } }
.fs__stage { position: relative; min-height: 360px; border: 1.5px solid rgba(15,26,17,.26); border-radius: 28px; background: #fff; box-shadow: 0 16px 26px -16px rgba(15,26,17,.5); overflow: hidden; }
.fs__pan { position: absolute; inset: 0; display: grid; grid-template-rows: 1fr auto; }
.fs__pan[hidden] { display: none; }
.fs__pan.is-on { animation: pan-in .5s var(--e-out) both; }
.fs__cap { margin: 0; padding: 14px 22px 18px; font-size: 1.0313rem !important; border-top: 1.5px solid rgba(15,26,17,.26); background: var(--snow-2); font-size: .9688rem; line-height: 1.4; color: var(--fg-2); }
.fs__cap b { color: var(--ink); }
.sc { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 24px; min-height: 0; zoom: 1.3; }
@media (max-width: 899px) { .sc { zoom: 1.1; } }
.sc__q { margin: 0; font: 600 .6875rem/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--fg-3); }
.sc .av { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--punk); border: 1.5px solid rgba(15,26,17,.26); font: 800 1rem/1 var(--font-display); }
.rv-t { margin: 0; font-size: .9375rem; color: var(--fg-2); } .rv-t b { color: var(--ink); font-size: 1.1em; }
.rv-bar { width: min(100%, 300px); height: 16px; border-radius: 99px; border: 1.5px solid rgba(15,26,17,.26); background: #fff; overflow: hidden; }
.rv-bar u { display: block; height: 100%; width: 45%; background: var(--red); border-right: 1.5px solid rgba(15,26,17,.26); }
.fs__pan.is-on .rv-bar u { animation: bar-fill 1.6s var(--e-out) both; }
@keyframes bar-fill { from { width: 0; } }
.g-row { display: flex; align-items: center; gap: 12px; font: 700 1.5rem/1 var(--font-display); letter-spacing: -.02em; }
.g-plus { padding: 4px 10px; border-radius: 99px; background: var(--ink); color: var(--punk); font: 700 .875rem/1 var(--font-ui); font-style: normal; }
.fs__pan.is-on .g-plus { animation: pop .6s var(--spring2) .4s both; }
.g-opts, .g-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.g-opts span, .g-tags span { padding: 10px 16px; border-radius: 99px; border: 1.5px solid rgba(15,26,17,.26); background: #fff; font: 600 .9375rem/1 var(--font-ui); }
.g-tags span { background: var(--snow-2); padding: 7px 12px; font-size: .8125rem; }
.fs__pan.is-on .g-opts span { animation: pick 4.2s ease-in-out infinite; }
.fs__pan.is-on .g-opts span:nth-child(2) { animation-delay: 1.4s; } .fs__pan.is-on .g-opts span:nth-child(3) { animation-delay: 2.8s; }
@keyframes pick { 0%, 28%, 100% { background: #fff; transform: none; } 6%, 24% { background: var(--punk); transform: translateY(-4px) rotate(-2deg); box-shadow: 0 16px 26px -16px rgba(15,26,17,.5); } }
.fs__pan.is-on .g-tags span { animation: pop .5s var(--spring2) both; } .fs__pan.is-on .g-tags span:nth-child(2) { animation-delay: .25s; }
@keyframes pop { from { opacity: 0; transform: scale(.5); } }
.p-list { list-style: none; margin: 0; padding: 0 0 0 26px; display: grid; gap: 14px; position: relative; }
.p-list::before { content: ""; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 3px; background: var(--ink); border-radius: 3px; }
.p-list li { position: relative; display: flex; align-items: baseline; gap: 14px; opacity: .45; }
.p-list li::before { content: ""; position: absolute; left: -26px; top: 50%; translate: 0 -50%; width: 17px; height: 17px; border-radius: 50%; border: 1.5px solid rgba(15,26,17,.26); background: #fff; }
.p-list time { font: 600 .9375rem/1 var(--font-mono); } .p-list b { font: 700 1.45rem/1 var(--font-display); letter-spacing: -.02em; }
.fs__pan.is-on .p-list li { animation: p-on 6s ease-in-out infinite; animation-delay: calc(var(--k) * 1.3s); }
@keyframes p-on { 0%, 100% { opacity: .45; } 6%, 24% { opacity: 1; translate: 6px 0; } }
.fs__pan.is-on .p-list li::before { animation: p-dot 6s ease-in-out infinite; animation-delay: calc(var(--k) * 1.3s); }
@keyframes p-dot { 0%, 100% { background: #fff; } 6%, 24% { background: var(--red); } }
.m-map { position: relative; width: min(100%, 360px); aspect-ratio: 1.15; border: 1.5px solid rgba(15,26,17,.26); border-radius: 18px; background: var(--snow-2); overflow: hidden; }
.m-road { position: absolute; background: #fff; box-shadow: 0 0 0 2px rgba(28, 16, 12, .5); }
.m-road--1 { left: -5%; right: -5%; top: 32%; height: 11%; rotate: -8deg; } .m-road--2 { top: -5%; bottom: -5%; left: 58%; width: 10%; rotate: 12deg; } .m-road--3 { left: -5%; right: -5%; bottom: 14%; height: 8%; rotate: 5deg; }
.m-route { position: absolute; left: 12%; bottom: 22%; width: 56%; height: 44%; border: 3px dashed var(--ink); border-radius: 0 90% 0 90%; border-right: 0; border-bottom: 0; opacity: .7; }
.m-pin { position: absolute; left: 56%; top: 22%; width: 34px; height: 34px; border-radius: 50% 50% 50% 0; rotate: -45deg; background: var(--red); border: 1.5px solid rgba(15,26,17,.26); box-shadow: -10px 10px 0 -2px rgba(28, 16, 12, .25); }
.m-pin::after { content: ""; position: absolute; inset: 8px; border-radius: 50%; background: var(--snow); border: 1.5px solid rgba(15,26,17,.26); }
.fs__pan.is-on .m-pin { animation: pin-drop 2.4s var(--spring2) infinite; }
@keyframes pin-drop { 0% { translate: 0 -120px; opacity: 0; } 25%, 90% { translate: 0 0; opacity: 1; } 100% { translate: 0 0; opacity: 0; } }
.m-chip { position: absolute; padding: 7px 11px; border-radius: 99px; border: 1.5px solid rgba(15,26,17,.26); background: var(--punk); font: 700 .75rem/1 var(--font-ui); box-shadow: 0 16px 26px -16px rgba(15,26,17,.5); }
.m-chip--1 { left: 6%; top: 8%; } .m-chip--2 { left: 8%; bottom: 8%; background: #fff; }
.fs__pan.is-on .m-chip { animation: pop .6s var(--spring2) .6s both; } .fs__pan.is-on .m-chip--2 { animation-delay: .9s; }
.gf { position: relative; width: 120px; height: 120px; }
.gf-box { position: absolute; left: 8px; right: 8px; bottom: 0; height: 74px; background: var(--red); border: 1.5px solid rgba(15,26,17,.26); border-radius: 6px 6px 12px 12px; }
.gf-box::before { content: ""; position: absolute; left: 50%; top: -2px; bottom: -2px; width: 22px; translate: -50% 0; background: var(--punk); border-inline: 1.5px solid rgba(15,26,17,.26); }
.gf-lid { position: absolute; left: 0; right: 0; bottom: 70px; height: 34px; background: var(--red); border: 1.5px solid rgba(15,26,17,.26); border-radius: 8px; z-index: 2; transform-origin: 0 100%; }
.gf-lid::before { content: ""; position: absolute; left: 50%; top: -2px; bottom: -2px; width: 22px; translate: -50% 0; background: var(--punk); border-inline: 1.5px solid rgba(15,26,17,.26); }
.gf-lid::after { content: "✦"; position: absolute; left: 50%; top: -22px; translate: -50% 0; font-size: 1.6rem; color: var(--ink); }
.fs__pan.is-on .gf-lid { animation: lid 4.4s var(--spring2) infinite; }
@keyframes lid { 0%, 14% { rotate: 0deg; translate: 0 0; } 26%, 82% { rotate: -28deg; translate: -10px -14px; } 100% { rotate: 0deg; translate: 0 0; } }
.gf-pill { display: flex; align-items: center; gap: 14px; padding: 6px 6px 6px 18px; border-radius: 99px; border: 1.5px solid rgba(15,26,17,.26); background: var(--snow); font: 600 .9375rem/1 var(--font-mono); }
.gf-pill b { position: relative; display: grid; min-width: 86px; height: 38px; border-radius: 99px; background: var(--punk); border: 1.5px solid rgba(15,26,17,.26); font: 700 .8125rem/1 var(--font-ui); }
.gf-pill em { grid-area: 1 / 1; display: grid; place-items: center; font-style: normal; }
.fs__pan.is-on .gf-pill em:first-child { animation: cp-a 4.4s steps(1) infinite; } .fs__pan.is-on .gf-pill em:last-child { animation: cp-b 4.4s steps(1) infinite; }
@keyframes cp-a { 0%, 55% { opacity: 1; } 56%, 92% { opacity: 0; } 93%, 100% { opacity: 1; } } @keyframes cp-b { 0%, 55% { opacity: 0; } 56%, 92% { opacity: 1; } 93%, 100% { opacity: 0; } }
.gf-pill em:last-child { opacity: 0; }
.lk-url { max-width: 100%; padding: 12px 18px; border-radius: 99px; border: 1.5px solid rgba(15,26,17,.26); background: var(--snow-2); font: 600 clamp(.75rem, 2.6vw, .9375rem)/1 var(--font-mono); overflow: hidden; }
.lk-url span { display: block; width: 0; overflow: hidden; white-space: nowrap; border-right: 2px solid var(--red); animation: type-url 4.6s steps(34) infinite; }
.fs:not(.is-js) .lk-url span { width: auto; border: 0; animation: none; }
@keyframes type-url { 0% { width: 0; } 55%, 100% { width: 34ch; } }
.lk-hello { display: grid; gap: 4px; padding: 16px 22px; border-radius: 20px; border: 1.5px solid rgba(15,26,17,.26); background: var(--punk); box-shadow: 0 16px 26px -16px rgba(15,26,17,.5); text-align: center; }
.lk-hello b { font: 800 1.7rem/1 var(--font-display); letter-spacing: -.03em; } .lk-hello span { font-size: .9063rem; }
.fs__pan.is-on .lk-hello { animation: pop .7s var(--spring2) 1.6s both; }
.cd { display: flex; gap: 10px; }
.cd div { display: grid; justify-items: center; gap: 6px; min-width: 70px; padding: 14px 10px 10px; border: 1.5px solid rgba(15,26,17,.26); border-radius: 18px; background: var(--punk); box-shadow: 0 16px 26px -16px rgba(15,26,17,.5); }
.cd div:nth-child(2n) { background: #fff; } .cd div:last-child { background: var(--red); }
.cd b { font: 800 clamp(1.8rem, 6vw, 2.8rem)/1 var(--font-display); letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.cd small { font: 600 .6563rem/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.fs__pan.is-on .cd div { animation: pop .6s var(--spring2) both; } .fs__pan.is-on .cd div:nth-child(2) { animation-delay: .1s; } .fs__pan.is-on .cd div:nth-child(3) { animation-delay: .2s; } .fs__pan.is-on .cd div:nth-child(4) { animation-delay: .3s; }
.st-card { position: relative; display: grid; place-items: center; width: min(100%, 300px); aspect-ratio: 1.5; border: 1.5px solid rgba(15,26,17,.26); border-radius: 18px; background: var(--snow); box-shadow: 0 16px 26px -16px rgba(15,26,17,.5); }
.st-n { grid-area: 1 / 1; opacity: 0; font-size: clamp(1.9rem, 7vw, 2.8rem); line-height: 1; text-align: center; }
.st-n--1 { font-family: var(--font-accent); font-style: italic; opacity: 1; } .st-n--2 { font-family: var(--font-display); font-weight: 800; letter-spacing: -.04em; } .st-n--3 { font-family: Georgia, serif; letter-spacing: .02em; font-variant: small-caps; }
.fs__pan.is-on .st-card { animation: card-col 7.5s steps(1) infinite; }
.fs__pan.is-on .st-n--1 { animation: nm-1 7.5s steps(1) infinite; } .fs__pan.is-on .st-n--2 { animation: nm-2 7.5s steps(1) infinite; } .fs__pan.is-on .st-n--3 { animation: nm-3 7.5s steps(1) infinite; }
@keyframes card-col { 0% { background: var(--snow); } 33% { background: var(--punk); } 66% { background: var(--red); } }
@keyframes nm-1 { 0% { opacity: 1; } 33% { opacity: 0; } } @keyframes nm-2 { 0%, 32% { opacity: 0; } 33% { opacity: 1; } 66% { opacity: 0; } } @keyframes nm-3 { 0%, 65% { opacity: 0; } 66% { opacity: 1; } }
.st-sw { display: flex; gap: 10px; } .st-sw i { width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid rgba(15,26,17,.26); background: var(--snow); } .st-sw i:nth-child(2) { background: var(--punk); } .st-sw i:nth-child(3) { background: var(--red); }
.fs__pan.is-on .st-sw i { animation: sw 7.5s steps(1) infinite; } .fs__pan.is-on .st-sw i:nth-child(2) { animation-delay: 2.5s; } .fs__pan.is-on .st-sw i:nth-child(3) { animation-delay: 5s; }
@keyframes sw { 0% { box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--ink); } 33% { box-shadow: none; } }
.sy { display: flex; align-items: center; gap: 22px; }
.sy-pic { flex: none; width: 118px; padding: 9px 9px 30px; background: #fff; border: 1.5px solid rgba(15,26,17,.26); box-shadow: 0 16px 26px -16px rgba(15,26,17,.5); rotate: -5deg; }
.sy-pic span { display: block; aspect-ratio: 1; background: var(--red); border: 1.5px solid rgba(15,26,17,.26); position: relative; overflow: hidden; }
.sy-pic span::after { content: ""; position: absolute; left: 50%; top: 46%; width: 46%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: var(--punk); border: 1.5px solid rgba(15,26,17,.26); }
.sy-txt { display: grid; gap: 10px; width: 160px; } .sy-txt i { height: 11px; border-radius: 99px; background: var(--ink); } .sy-txt i:nth-child(2) { width: 90%; } .sy-txt i:nth-child(3) { width: 96%; } .sy-txt i:nth-child(4) { width: 55%; background: var(--red); }
.fs__pan.is-on .sy-pic { animation: pic-in .8s var(--spring2) both; } .fs__pan.is-on .sy-txt i { animation: line-in .7s var(--e-out) both; transform-origin: 0 50%; }
.fs__pan.is-on .sy-txt i:nth-child(2) { animation-delay: .2s; } .fs__pan.is-on .sy-txt i:nth-child(3) { animation-delay: .4s; } .fs__pan.is-on .sy-txt i:nth-child(4) { animation-delay: .6s; }
@keyframes pic-in { from { translate: -40px 20px; rotate: -18deg; opacity: 0; } } @keyframes line-in { from { transform: scaleX(0); } }
.rv-av { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 320px; }
.fs__pan.is-on .rv-a { animation: pop .5s var(--spring2) both; animation-delay: calc(var(--k) * .12s); }
.ls { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; min-width: 220px; }
.ls li { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border: 1.5px solid rgba(15,26,17,.26); border-radius: 16px; background: #fff; font: 700 1.0625rem/1 var(--font-display); }
.ls i { position: relative; width: 22px; height: 22px; border: 1.5px solid rgba(15,26,17,.26); border-radius: 7px; background: #fff; }
.ls i::after { content: ""; position: absolute; left: 5px; top: 1px; width: 6px; height: 12px; border: solid var(--ink); border-width: 0 3px 3px 0; rotate: 40deg; opacity: 0; }
.fs__pan.is-on .ls i { animation: tick-bg 6s ease-in-out infinite; animation-delay: calc(var(--k) * 1.1s); } .fs__pan.is-on .ls i::after { animation: tick-ck 6s ease-in-out infinite; animation-delay: calc(var(--k) * 1.1s); }
@keyframes tick-bg { 0%, 6% { background: #fff; } 12%, 80% { background: var(--punk); } 92%, 100% { background: #fff; } } @keyframes tick-ck { 0%, 6% { opacity: 0; } 12%, 80% { opacity: 1; } 92%, 100% { opacity: 0; } }
.sl { display: flex; gap: 10px; } .sl span { display: grid; gap: 6px; justify-items: center; padding: 14px 16px; border: 1.5px solid rgba(15,26,17,.26); border-radius: 16px; background: #fff; }
.sl b { font: 800 1.35rem/1 var(--font-display); } .sl small { font-size: .75rem; color: var(--fg-2); }
.fs__pan.is-on .sl span { animation: pick 4.2s ease-in-out infinite; animation-delay: calc(var(--k) * 1.4s); }
.ds { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; width: min(100%, 340px); }
.ds li { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1.5px solid rgba(15,26,17,.26); border-radius: 14px; background: #fff; }
.ds b { flex: 1; font: 700 1.0625rem/1.1 var(--font-display); } .ds u { text-decoration: none; font: 700 .9375rem/1 var(--font-mono); }
.ds span { display: flex; gap: 4px; } .ds em { display: grid; place-items: center; min-width: 26px; height: 26px; padding: 0 6px; border-radius: 99px; border: 1.5px solid rgba(15,26,17,.26); background: var(--punk); font: 800 .6875rem/1 var(--font-ui); font-style: normal; }
.fs__pan.is-on .ds li { animation: line-up .6s var(--e-out) both; animation-delay: calc(var(--k) * .15s); } @keyframes line-up { from { opacity: 0; translate: 0 16px; } }
.qs { position: relative; width: 150px; height: 150px; padding: 12px; border: 1.5px solid rgba(15,26,17,.26); border-radius: 14px; background: #fff; background-image: linear-gradient(90deg, var(--ink) 50%, transparent 0), linear-gradient(var(--ink) 50%, transparent 0); background-size: 14px 14px, 14px 14px; background-clip: content-box; overflow: hidden; }
.qs span { position: absolute; inset: 12px; background: #fff; mask: radial-gradient(circle at 20% 25%, #000 0 14%, transparent 15%) 0 0 / 100% 100%; }
.qs i { position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--red); box-shadow: 0 0 14px 3px var(--red); }
.fs__pan.is-on .qs i { animation: scan2 2.2s ease-in-out infinite; } @keyframes scan2 { 0%, 100% { translate: 0 0; } 50% { translate: 0 146px; } }
.lg-b { position: relative; display: grid; place-items: center; min-width: 260px; min-height: 90px; padding: 18px 22px; border: 1.5px solid rgba(15,26,17,.26); border-radius: 22px 22px 22px 4px; background: var(--punk); box-shadow: 0 16px 26px -16px rgba(15,26,17,.5); font: 700 1.5rem/1 var(--font-display); letter-spacing: -.02em; text-align: center; }
.lg-t { grid-area: 1 / 1; opacity: 0; } .lg-t--1 { opacity: 1; }
.fs__pan.is-on .lg-t--1 { animation: nm-1 6s steps(1) infinite; } .fs__pan.is-on .lg-t--2 { animation: nm-2 6s steps(1) infinite; } .fs__pan.is-on .lg-t--3 { animation: nm-3 6s steps(1) infinite; }
.lg-s { display: flex; gap: 8px; } .lg-s span { padding: 8px 14px; border: 1.5px solid rgba(15,26,17,.26); border-radius: 99px; background: #fff; font: 700 .8125rem/1 var(--font-ui); }
.fs__pan.is-on .lg-s span { animation: pick 6s ease-in-out infinite; } .fs__pan.is-on .lg-s span:nth-child(2) { animation-delay: 2s; } .fs__pan.is-on .lg-s span:nth-child(3) { animation-delay: 4s; }
.al { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; } .al i { display: grid; place-items: center; width: 36px; height: 36px; border: 1.5px solid rgba(15,26,17,.26); border-radius: 50%; background: #fff; font: 700 .8125rem/1 var(--font-mono); font-style: normal; }
.fs__pan.is-on .al i { animation: al-on 4.2s ease-in-out infinite; animation-delay: calc(var(--k) * .12s); } @keyframes al-on { 0%, 100% { background: #fff; } 6%, 16% { background: var(--red); transform: scale(1.12); } }
.pr { position: relative; width: 130px; aspect-ratio: .72; padding: 18px 14px; border: 1.5px solid rgba(15,26,17,.26); background: #fff; box-shadow: 0 16px 26px -16px rgba(15,26,17,.5); display: grid; align-content: start; gap: 9px; }
.pr span { height: 9px; border-radius: 99px; background: var(--ink); } .pr span:nth-child(2) { width: 70%; } .pr span:nth-child(3) { width: 88%; background: var(--red); }
.pr i { position: absolute; left: 50%; bottom: 14px; width: 54px; aspect-ratio: 1; translate: -50% 0; background: repeating-linear-gradient(90deg, var(--ink) 0 6px, #fff 6px 12px); border: 1.5px solid rgba(15,26,17,.26); }
.fs__pan.is-on .pr { animation: print-in 1.2s var(--e-out) both; } @keyframes print-in { from { translate: 0 -40px; clip-path: inset(100% 0 0 0); } }
@media (prefers-reduced-motion: reduce) {
  .fs *, .fs *::before, .fs *::after { animation: none !important; }
  .fs .lk-url span { width: auto; border: 0; } .fs .gf-lid { rotate: -20deg; translate: -8px -10px; }
  .fs .gf-pill em:last-child { display: none; } .fs .st-n--2, .fs .st-n--3, .fs .lg-t--2, .fs .lg-t--3 { display: none; }
  .fs .p-list li { opacity: 1; }
}
@media (max-width: 899px) { .fs__stage { min-height: 400px; } }
.tile--deep .ticks2 svg { background: var(--coral); color: var(--ink); }
.show { padding:0; overflow:clip; }
.show__pin { padding:64px 0; }
.show__in { display:grid;gap:20px; }
.show__heading {display:flex;align-items:end;justify-content:space-between;gap:32px;}
.show__heading h2 {font-size:clamp(2rem,3.4vw,3.8rem);line-height:1;margin:8px 0 0;}
.show__intro {max-width:25ch;margin:0;font-size:16px;line-height:1.5;color:var(--fg-2);}
.show__cinema {position:relative;height:min(70svh,760px);min-height:320px;border-radius:28px;overflow:hidden;background:var(--cream);isolation:isolate;box-shadow:0 24px 64px -40px rgba(0,0,0,.4);}
.show__slide {position:relative;overflow:hidden;background:var(--cream);height:100%;}
.show__poster {width:100%;height:100%;object-fit:contain;background:var(--cream);}
.show__slide iframe {position:absolute;inset:0;width:100%;height:100%;border:0;pointer-events:none;opacity:0;transition:opacity .2s var(--e-out);}
.show__slide iframe.is-ready {opacity:1;}
.show__fallback {position:absolute;bottom:80px;left:24px;color:#26372a;background:var(--cream);padding:12px 20px;border-radius:99px;display:inline-flex;gap:12px;align-items:center;min-height:44px;}
.show__fallback svg,.show__caption svg,.show__more svg {width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;}
.show__caption {position:absolute;inset:auto 16px 16px;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 16px;background:#26372a;color:#fff9ef;border-radius:18px;font-weight:650;}
.show__caption a {display:inline-flex;gap:12px;align-items:center;min-height:44px;color:inherit;text-decoration:none;}
.show__controls {display:flex;gap:24px;align-items:center;justify-content:space-between;min-width:0;}
.show__choices {display:flex;gap:12px;flex:1;min-width:0;overflow-x:auto;scrollbar-width:thin;}
.show__choices button {position:relative;flex:1;min-width:100px;display:flex;gap:8px;align-items:center;justify-content:start;min-height:52px;padding:8px 0 14px;background:none;border:0;color:var(--fg-2);font:600 14px/1.2 var(--font-ui);cursor:pointer;text-align:left;}
.show__choices button[aria-pressed=true] {color:var(--cream);}
.show__number {font:500 12px var(--font-mono);opacity:.6;}
.show__meter {position:absolute;inset:auto 0 0;height:2px;background:var(--line-2);overflow:hidden;}
.show__meter>i {display:block;height:100%;width:100%;background:var(--cream);transform:scaleX(0);transform-origin:left;}
.show__langs {display:flex;gap:0;flex:none;margin:0;}
.show__langs button {min-height:44px;min-width:44px;background:none;border:0;color:var(--fg-2);font:600 12px var(--font-mono);cursor:pointer;border-radius:12px;}
.show__langs button[aria-pressed=true] {color:var(--ink);background:var(--cream);}
.show__more {justify-self:start;display:inline-flex;align-items:center;gap:12px;color:var(--cream);font-size:14px;min-height:44px;}
.show__track {display:none;}
.show:not(.is-js) .show__cinema {display:flex;overflow-x:auto;scroll-snap-type:x mandatory;}
.show:not(.is-js) .show__slide {flex:0 0 100%;scroll-snap-align:center;}
.show.is-js .show__pin {position:sticky;top:0;height:100svh;box-sizing:border-box;padding:calc(var(--hdr-h) + 16px) 0 24px;display:flex;align-items:center;}
.show.is-js .show__in {grid-template-rows:auto minmax(0,1fr) auto;gap:16px;height:100%;}
.show.is-js .show__cinema {height:auto;min-height:0;}
.show.is-js .show__slide {position:absolute;inset:0;will-change:transform,opacity;}
.show.is-js .show__fallback,.show.is-js .show__more {display:none;}
.show.is-js .show__track {display:block;}
@media(max-width:759px){
 .show__heading{gap:8px}.show__heading h2{font-size:clamp(26px,6.8vw,36px)}.show__intro{display:none}.show__heading .eyebrow{font-size:10px}
 .show__in{gap:12px}.show.is-js .show__pin{padding-top:calc(var(--hdr-h) + 12px);padding-bottom:16px}.show.is-js .show__in{gap:12px}
 .show__cinema{border-radius:20px}.show__caption{inset:auto 8px 8px;padding:4px 12px;border-radius:12px;font-size:13px}.show__caption a{gap:6px;white-space:nowrap}
 .show__controls{gap:8px;align-items:start;flex-direction:column}.show__choices{width:100%;gap:16px}.show__choices button{min-width:104px;font-size:12px;min-height:44px}.show__langs{align-self:end}
}
@media(max-height:650px) and (min-width:760px){.show__heading h2{font-size:28px}.show__heading .eyebrow,.show__intro{display:none}.show.is-js .show__in{gap:8px}.show.is-js .show__pin{padding-top:calc(var(--hdr-h) + 8px);padding-bottom:8px}}
@media(prefers-reduced-motion:reduce){.show__slide iframe{transition:none}.show__slide{will-change:auto}}
.show__in.wrap { width:min(1640px,100%); }
.usage-choice{position:fixed;z-index:1000;left:16px;bottom:16px;width:440px;max-width:calc(100vw - 32px);padding:20px;border:1px solid #4A614B;border-radius:20px;background:#F6F1E6;color:#0F1A11;box-shadow:0 12px 40px #0f1a1133;font:400 14px/1.55 Geist,system-ui,sans-serif}
.usage-choice strong{font-size:17px}.usage-choice p{margin:8px 0 14px}.usage-choice__actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.usage-choice button{padding:10px 16px;min-height:44px;background:#4A614B;color:#F6F1E6;border:0;border-radius:12px;cursor:pointer;font:600 14px Geist,system-ui,sans-serif}.usage-choice a{color:#344734;text-decoration:underline}.usage-choice button:focus-visible,.usage-settings:focus-visible{outline:2px solid #E56055;outline-offset:3px}.usage-settings{border:0;background:none;color:inherit;font:inherit;padding:0;cursor:pointer;text-decoration:underline}
.preference-choice{display:flex;align-items:flex-start;gap:12px;margin:14px 0;line-height:1.5}.preference-choice input{flex:0 0 auto;margin-top:5px;width:18px;height:18px;accent-color:var(--accent,#E56055)}.preference-choice small{display:block;color:var(--fg-2);margin-top:4px}.welcome-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}.insight-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}.insight-value{font:700 32px/1.2 var(--font-ui);margin:6px 0}.insight-row{display:flex;justify-content:space-between;gap:20px;padding:10px 0;border-bottom:1px solid var(--hair)}
.customer-preferences{margin-bottom:20px}.customer-preferences select{display:block;width:100%;margin-top:8px}.usage-choice button:disabled{opacity:.6;cursor:wait}
.insight-grid{grid-template-columns:repeat(4,minmax(0,1fr));margin-bottom:20px}@media(max-width:1100px){.insight-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:700px){.insight-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.insight-grid .card{padding:16px}.insight-grid p{overflow-wrap:anywhere}}
.preference-choice{min-height:44px;padding-block:6px;cursor:pointer}.preference-choice:focus-within{outline:2px solid var(--focus);outline-offset:4px;border-radius:var(--r-sm)}