@property --a4m-ink { syntax: '<color>'; inherits: true; initial-value: #0D1411; }
@property --a4m-panel { syntax: '<color>'; inherits: true; initial-value: #141D18; }
@property --a4m-panel-alt { syntax: '<color>'; inherits: true; initial-value: #1B2620; }
@property --a4m-panel-alt2 { syntax: '<color>'; inherits: true; initial-value: #223029; }
@property --a4m-line { syntax: '<color>'; inherits: true; initial-value: #2C3B32; }
@property --a4m-control-edge { syntax: '<color>'; inherits: true; initial-value: #718478; }
@property --a4m-gold { syntax: '<color>'; inherits: true; initial-value: #C9A961; }
@property --a4m-gold-text { syntax: '<color>'; inherits: true; initial-value: #C9A961; }
@property --a4m-gold-dim { syntax: '<color>'; inherits: true; initial-value: #8A7440; }
@property --a4m-gold-deep { syntax: '<color>'; inherits: true; initial-value: #B8934C; }
@property --a4m-gold-lift { syntax: '<color>'; inherits: true; initial-value: #D9BC77; }
@property --a4m-gold-hi { syntax: '<color>'; inherits: true; initial-value: #E8D5A3; }
@property --a4m-gold-soft { syntax: '<color>'; inherits: true; initial-value: #C9A9611F; }
@property --a4m-gold-a0 { syntax: '<color>'; inherits: true; initial-value: rgba(201,169,97,0); }
@property --a4m-tick { syntax: '<color>'; inherits: true; initial-value: #C9A961B3; }
@property --a4m-nav-quiet { syntax: '<color>'; inherits: true; initial-value: #F2EFE68C; }
@property --a4m-mark-ring { syntax: '<color>'; inherits: true; initial-value: #C9A961; }
@property --a4m-cream { syntax: '<color>'; inherits: true; initial-value: #F2EFE6; }
@property --a4m-mute { syntax: '<color>'; inherits: true; initial-value: #8FA096; }
@property --a4m-disabled-ink { syntax: '<color>'; inherits: true; initial-value: #8FA096; }
@property --a4m-disabled-edge { syntax: '<color>'; inherits: true; initial-value: #8FA096; }
@property --a4m-placeholder { syntax: '<color>'; inherits: true; initial-value: #87988E; }
@property --a4m-green { syntax: '<color>'; inherits: true; initial-value: #6FBF8F; }
@property --a4m-red { syntax: '<color>'; inherits: true; initial-value: #D96A4F; }
@property --a4m-brand-viber { syntax: '<color>'; inherits: true; initial-value: #A99BF9; }
@property --a4m-svc-blue { syntax: '<color>'; inherits: true; initial-value: #7EA6CC; }
@property --a4m-svc-violet { syntax: '<color>'; inherits: true; initial-value: #AC8ED6; }
@property --a4m-surf-1 { syntax: '<color>'; inherits: true; initial-value: #141D18; }
@property --a4m-surf-2 { syntax: '<color>'; inherits: true; initial-value: #1B2620; }
@property --a4m-surf-3 { syntax: '<color>'; inherits: true; initial-value: #22302A; }
@property --a4m-surf-4 { syntax: '<color>'; inherits: true; initial-value: #2B3A32; }
@property --a4m-edge { syntax: '<color>'; inherits: true; initial-value: rgba(242,239,230,.06); }
@property --a4m-gold-edge { syntax: '<color>'; inherits: true; initial-value: rgba(242,239,230,0); }
@property --a4m-scrim { syntax: '<color>'; inherits: true; initial-value: rgba(8,12,10,.72); }
@property --a4m-ink-a0 { syntax: '<color>'; inherits: true; initial-value: rgba(13,20,17,0); }
@property --a4m-surf-1-a0 { syntax: '<color>'; inherits: true; initial-value: rgba(20,29,24,0); }
@property --a4m-skel-sheen { syntax: '<color>'; inherits: true; initial-value: #2A3A31; }
@property --a4m-skel-sheen-a0 { syntax: '<color>'; inherits: true; initial-value: rgba(42,58,49,0); }
:root { --z-chrome: 40; --z-floating: 50; --z-workflow: 60; --z-modal: 80; --z-gate: 95; --z-notice: 100; --z-skip: 220; --a4m-layer-section: calc(var(--z-chrome) - 20); --a4m-layer-underChrome: calc(var(--z-chrome) - 1); --a4m-layer-chrome: var(--z-chrome); --a4m-layer-floating: var(--z-floating); --a4m-layer-membership: var(--z-workflow); --a4m-layer-checkout: calc(var(--z-workflow) + 10); --a4m-layer-listing: calc(var(--z-workflow) + 12); --a4m-layer-menu: calc(var(--z-workflow) + 15); --a4m-layer-dialog: var(--z-modal); --a4m-layer-raised: calc(var(--z-modal) + 5); --a4m-layer-whatsnew: calc(var(--z-modal) + 6); --a4m-layer-boost: calc(var(--z-modal) + 7); --a4m-layer-document: calc(var(--z-modal) + 8); --a4m-layer-priority: calc(var(--z-modal) + 10); --a4m-layer-gate: var(--z-gate); --a4m-layer-gateControl: calc(var(--z-gate) + 1); --a4m-layer-notice: var(--z-notice); --a4m-layer-skip: var(--z-skip); }
.a4m-z-chrome { z-index: var(--a4m-layer-chrome); }
.a4m-z-floating { z-index: var(--a4m-layer-floating); }
.a4m-z-menu { z-index: var(--a4m-layer-menu); }
.a4m-z-raised { z-index: var(--a4m-layer-raised); }
.a4m-z-priority { z-index: var(--a4m-layer-priority); }
.a4m-z-gate { z-index: var(--a4m-layer-gate); }
.a4m-z-gateControl { z-index: var(--a4m-layer-gateControl); }
.a4m-z-notice { z-index: var(--a4m-layer-notice); }
:root { --a4m-ink:#0D1411;--a4m-panel:#141D18;--a4m-panel-alt:#1B2620;--a4m-panel-alt2:#223029;--a4m-line:#2C3B32;--a4m-control-edge:#718478;--a4m-gold:#C9A961;--a4m-gold-text:#C9A961;--a4m-gold-dim:#8A7440;--a4m-gold-deep:#B8934C;--a4m-gold-lift:#D9BC77;--a4m-gold-hi:#E8D5A3;--a4m-gold-soft:#C9A9611F;--a4m-gold-a0:rgba(201,169,97,0);--a4m-tick:#C9A961B3;--a4m-nav-quiet:#F2EFE68C;--a4m-mark-ring:#C9A961;--a4m-cream:#F2EFE6;--a4m-mute:#8FA096;--a4m-disabled-ink:#8FA096;--a4m-disabled-edge:#8FA096;--a4m-placeholder:#87988E;--a4m-green:#6FBF8F;--a4m-red:#D96A4F;--a4m-brand-viber:#A99BF9;--a4m-svc-k:1;--a4m-svc-glyph-o:.16;--a4m-svc-blue:#7EA6CC;--a4m-svc-violet:#AC8ED6;--a4m-surf-1:#141D18;--a4m-surf-2:#1B2620;--a4m-surf-3:#22302A;--a4m-surf-4:#2B3A32;--a4m-edge:rgba(242,239,230,.06);--a4m-gold-edge:rgba(242,239,230,0);--a4m-elev-1:inset 0 1px 0 var(--a4m-edge), 0 1px 2px rgba(0,0,0,.30), 0 6px 16px -9px rgba(0,0,0,.55);--a4m-elev-2:inset 0 1px 0 var(--a4m-edge), 0 2px 5px rgba(0,0,0,.30), 0 20px 42px -18px rgba(0,0,0,.68);--a4m-scrim:rgba(8,12,10,.72);--a4m-wall-drop:grayscale(.8) brightness(.72);--a4m-wall-drop-o:.5;--a4m-lockdim-o:.6;--a4m-shadow-rgb:0,0,0;--a4m-shadow-lift-o:.75;--a4m-shadow-drop-o:.8;--a4m-ink-a0:rgba(13,20,17,0);--a4m-surf-1-a0:rgba(20,29,24,0);--a4m-skel-sheen:#2A3A31;--a4m-skel-sheen-a0:rgba(42,58,49,0);--surf-1:var(--a4m-surf-1);--surf-2:var(--a4m-surf-2);--surf-3:var(--a4m-surf-3);--surf-4:var(--a4m-surf-4);--edge:var(--a4m-edge); }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --a4m-ink:#F2EFE6;--a4m-panel:#F7F5EE;--a4m-panel-alt:#FBFAF6;--a4m-panel-alt2:#FFFFFF;--a4m-line:#D8D2C3;--a4m-control-edge:#77857C;--a4m-gold:#7A6538;--a4m-gold-text:#6B5730;--a4m-gold-dim:#8A7440;--a4m-gold-deep:#6B5730;--a4m-gold-lift:#7A6538;--a4m-gold-hi:#A98D52;--a4m-gold-soft:#8A744024;--a4m-gold-a0:rgba(122,101,56,0);--a4m-tick:#7A6538;--a4m-nav-quiet:#0D1411B3;--a4m-mark-ring:#8A7440;--a4m-cream:#0D1411;--a4m-mute:#55645B;--a4m-disabled-ink:#55645B;--a4m-disabled-edge:#55645B;--a4m-placeholder:#5F6E64;--a4m-green:#256A45;--a4m-red:#A03C24;--a4m-brand-viber:#4F3FB5;--a4m-svc-k:2.2;--a4m-svc-glyph-o:.23;--a4m-svc-blue:#3A658A;--a4m-svc-violet:#5E478A;--a4m-surf-1:#F7F5EE;--a4m-surf-2:#FBFAF6;--a4m-surf-3:#FFFFFF;--a4m-surf-4:#FFFFFF;--a4m-edge:rgba(255,255,255,.85);--a4m-gold-edge:rgba(255,255,255,.85);--a4m-elev-1:inset 0 1px 0 var(--a4m-edge), 0 0 0 1px rgba(13,20,17,.06), 0 1px 2px rgba(13,20,17,.07), 0 6px 16px -9px rgba(13,20,17,.22);--a4m-elev-2:inset 0 1px 0 var(--a4m-edge), 0 0 0 1px rgba(13,20,17,.07), 0 2px 5px rgba(13,20,17,.08), 0 20px 42px -18px rgba(13,20,17,.28);--a4m-scrim:rgba(8,12,10,.72);--a4m-wall-drop:grayscale(.8) brightness(.9);--a4m-wall-drop-o:.64;--a4m-lockdim-o:.72;--a4m-shadow-rgb:13,20,17;--a4m-shadow-lift-o:.32;--a4m-shadow-drop-o:.42;--a4m-ink-a0:rgba(242,239,230,0);--a4m-surf-1-a0:rgba(247,245,238,0);--a4m-skel-sheen:#FFFFFF;--a4m-skel-sheen-a0:rgba(255,255,255,0);--surf-1:var(--a4m-surf-1);--surf-2:var(--a4m-surf-2);--surf-3:var(--a4m-surf-3);--surf-4:var(--a4m-surf-4);--edge:var(--a4m-edge); } }
:root[data-theme="light"] { --a4m-ink:#F2EFE6;--a4m-panel:#F7F5EE;--a4m-panel-alt:#FBFAF6;--a4m-panel-alt2:#FFFFFF;--a4m-line:#D8D2C3;--a4m-control-edge:#77857C;--a4m-gold:#7A6538;--a4m-gold-text:#6B5730;--a4m-gold-dim:#8A7440;--a4m-gold-deep:#6B5730;--a4m-gold-lift:#7A6538;--a4m-gold-hi:#A98D52;--a4m-gold-soft:#8A744024;--a4m-gold-a0:rgba(122,101,56,0);--a4m-tick:#7A6538;--a4m-nav-quiet:#0D1411B3;--a4m-mark-ring:#8A7440;--a4m-cream:#0D1411;--a4m-mute:#55645B;--a4m-disabled-ink:#55645B;--a4m-disabled-edge:#55645B;--a4m-placeholder:#5F6E64;--a4m-green:#256A45;--a4m-red:#A03C24;--a4m-brand-viber:#4F3FB5;--a4m-svc-k:2.2;--a4m-svc-glyph-o:.23;--a4m-svc-blue:#3A658A;--a4m-svc-violet:#5E478A;--a4m-surf-1:#F7F5EE;--a4m-surf-2:#FBFAF6;--a4m-surf-3:#FFFFFF;--a4m-surf-4:#FFFFFF;--a4m-edge:rgba(255,255,255,.85);--a4m-gold-edge:rgba(255,255,255,.85);--a4m-elev-1:inset 0 1px 0 var(--a4m-edge), 0 0 0 1px rgba(13,20,17,.06), 0 1px 2px rgba(13,20,17,.07), 0 6px 16px -9px rgba(13,20,17,.22);--a4m-elev-2:inset 0 1px 0 var(--a4m-edge), 0 0 0 1px rgba(13,20,17,.07), 0 2px 5px rgba(13,20,17,.08), 0 20px 42px -18px rgba(13,20,17,.28);--a4m-scrim:rgba(8,12,10,.72);--a4m-wall-drop:grayscale(.8) brightness(.9);--a4m-wall-drop-o:.64;--a4m-lockdim-o:.72;--a4m-shadow-rgb:13,20,17;--a4m-shadow-lift-o:.32;--a4m-shadow-drop-o:.42;--a4m-ink-a0:rgba(242,239,230,0);--a4m-surf-1-a0:rgba(247,245,238,0);--a4m-skel-sheen:#FFFFFF;--a4m-skel-sheen-a0:rgba(255,255,255,0);--surf-1:var(--a4m-surf-1);--surf-2:var(--a4m-surf-2);--surf-3:var(--a4m-surf-3);--surf-4:var(--a4m-surf-4);--edge:var(--a4m-edge); }
:root[data-theme="dark"] { --a4m-ink:#0D1411;--a4m-panel:#141D18;--a4m-panel-alt:#1B2620;--a4m-panel-alt2:#223029;--a4m-line:#2C3B32;--a4m-control-edge:#718478;--a4m-gold:#C9A961;--a4m-gold-text:#C9A961;--a4m-gold-dim:#8A7440;--a4m-gold-deep:#B8934C;--a4m-gold-lift:#D9BC77;--a4m-gold-hi:#E8D5A3;--a4m-gold-soft:#C9A9611F;--a4m-gold-a0:rgba(201,169,97,0);--a4m-tick:#C9A961B3;--a4m-nav-quiet:#F2EFE68C;--a4m-mark-ring:#C9A961;--a4m-cream:#F2EFE6;--a4m-mute:#8FA096;--a4m-disabled-ink:#8FA096;--a4m-disabled-edge:#8FA096;--a4m-placeholder:#87988E;--a4m-green:#6FBF8F;--a4m-red:#D96A4F;--a4m-brand-viber:#A99BF9;--a4m-svc-k:1;--a4m-svc-glyph-o:.16;--a4m-svc-blue:#7EA6CC;--a4m-svc-violet:#AC8ED6;--a4m-surf-1:#141D18;--a4m-surf-2:#1B2620;--a4m-surf-3:#22302A;--a4m-surf-4:#2B3A32;--a4m-edge:rgba(242,239,230,.06);--a4m-gold-edge:rgba(242,239,230,0);--a4m-elev-1:inset 0 1px 0 var(--a4m-edge), 0 1px 2px rgba(0,0,0,.30), 0 6px 16px -9px rgba(0,0,0,.55);--a4m-elev-2:inset 0 1px 0 var(--a4m-edge), 0 2px 5px rgba(0,0,0,.30), 0 20px 42px -18px rgba(0,0,0,.68);--a4m-scrim:rgba(8,12,10,.72);--a4m-wall-drop:grayscale(.8) brightness(.72);--a4m-wall-drop-o:.5;--a4m-lockdim-o:.6;--a4m-shadow-rgb:0,0,0;--a4m-shadow-lift-o:.75;--a4m-shadow-drop-o:.8;--a4m-ink-a0:rgba(13,20,17,0);--a4m-surf-1-a0:rgba(20,29,24,0);--a4m-skel-sheen:#2A3A31;--a4m-skel-sheen-a0:rgba(42,58,49,0);--surf-1:var(--a4m-surf-1);--surf-2:var(--a4m-surf-2);--surf-3:var(--a4m-surf-3);--surf-4:var(--a4m-surf-4);--edge:var(--a4m-edge); }
.a4m-on-dark { --a4m-ink:#0D1411;--a4m-panel:#141D18;--a4m-panel-alt:#1B2620;--a4m-panel-alt2:#223029;--a4m-line:#2C3B32;--a4m-control-edge:#718478;--a4m-gold:#C9A961;--a4m-gold-text:#C9A961;--a4m-gold-dim:#8A7440;--a4m-gold-deep:#B8934C;--a4m-gold-lift:#D9BC77;--a4m-gold-hi:#E8D5A3;--a4m-gold-soft:#C9A9611F;--a4m-gold-a0:rgba(201,169,97,0);--a4m-tick:#C9A961B3;--a4m-nav-quiet:#F2EFE68C;--a4m-mark-ring:#C9A961;--a4m-cream:#F2EFE6;--a4m-mute:#8FA096;--a4m-disabled-ink:#8FA096;--a4m-disabled-edge:#8FA096;--a4m-placeholder:#87988E;--a4m-green:#6FBF8F;--a4m-red:#D96A4F;--a4m-brand-viber:#A99BF9;--a4m-svc-k:1;--a4m-svc-glyph-o:.16;--a4m-svc-blue:#7EA6CC;--a4m-svc-violet:#AC8ED6;--a4m-surf-1:#141D18;--a4m-surf-2:#1B2620;--a4m-surf-3:#22302A;--a4m-surf-4:#2B3A32;--a4m-edge:rgba(242,239,230,.06);--a4m-gold-edge:rgba(242,239,230,0);--a4m-elev-1:inset 0 1px 0 var(--a4m-edge), 0 1px 2px rgba(0,0,0,.30), 0 6px 16px -9px rgba(0,0,0,.55);--a4m-elev-2:inset 0 1px 0 var(--a4m-edge), 0 2px 5px rgba(0,0,0,.30), 0 20px 42px -18px rgba(0,0,0,.68);--a4m-scrim:rgba(8,12,10,.72);--a4m-wall-drop:grayscale(.8) brightness(.72);--a4m-wall-drop-o:.5;--a4m-lockdim-o:.6;--a4m-shadow-rgb:0,0,0;--a4m-shadow-lift-o:.75;--a4m-shadow-drop-o:.8;--a4m-ink-a0:rgba(13,20,17,0);--a4m-surf-1-a0:rgba(20,29,24,0);--a4m-skel-sheen:#2A3A31;--a4m-skel-sheen-a0:rgba(42,58,49,0);--surf-1:var(--a4m-surf-1);--surf-2:var(--a4m-surf-2);--surf-3:var(--a4m-surf-3);--surf-4:var(--a4m-surf-4);--edge:var(--a4m-edge); color-scheme: dark; color: var(--a4m-cream); }
.a4m-on-light { --a4m-ink:#F2EFE6;--a4m-panel:#F7F5EE;--a4m-panel-alt:#FBFAF6;--a4m-panel-alt2:#FFFFFF;--a4m-line:#D8D2C3;--a4m-control-edge:#77857C;--a4m-gold:#7A6538;--a4m-gold-text:#6B5730;--a4m-gold-dim:#8A7440;--a4m-gold-deep:#6B5730;--a4m-gold-lift:#7A6538;--a4m-gold-hi:#A98D52;--a4m-gold-soft:#8A744024;--a4m-gold-a0:rgba(122,101,56,0);--a4m-tick:#7A6538;--a4m-nav-quiet:#0D1411B3;--a4m-mark-ring:#8A7440;--a4m-cream:#0D1411;--a4m-mute:#55645B;--a4m-disabled-ink:#55645B;--a4m-disabled-edge:#55645B;--a4m-placeholder:#5F6E64;--a4m-green:#256A45;--a4m-red:#A03C24;--a4m-brand-viber:#4F3FB5;--a4m-svc-k:2.2;--a4m-svc-glyph-o:.23;--a4m-svc-blue:#3A658A;--a4m-svc-violet:#5E478A;--a4m-surf-1:#F7F5EE;--a4m-surf-2:#FBFAF6;--a4m-surf-3:#FFFFFF;--a4m-surf-4:#FFFFFF;--a4m-edge:rgba(255,255,255,.85);--a4m-gold-edge:rgba(255,255,255,.85);--a4m-elev-1:inset 0 1px 0 var(--a4m-edge), 0 0 0 1px rgba(13,20,17,.06), 0 1px 2px rgba(13,20,17,.07), 0 6px 16px -9px rgba(13,20,17,.22);--a4m-elev-2:inset 0 1px 0 var(--a4m-edge), 0 0 0 1px rgba(13,20,17,.07), 0 2px 5px rgba(13,20,17,.08), 0 20px 42px -18px rgba(13,20,17,.28);--a4m-scrim:rgba(8,12,10,.72);--a4m-wall-drop:grayscale(.8) brightness(.9);--a4m-wall-drop-o:.64;--a4m-lockdim-o:.72;--a4m-shadow-rgb:13,20,17;--a4m-shadow-lift-o:.32;--a4m-shadow-drop-o:.42;--a4m-ink-a0:rgba(242,239,230,0);--a4m-surf-1-a0:rgba(247,245,238,0);--a4m-skel-sheen:#FFFFFF;--a4m-skel-sheen-a0:rgba(255,255,255,0);--surf-1:var(--a4m-surf-1);--surf-2:var(--a4m-surf-2);--surf-3:var(--a4m-surf-3);--surf-4:var(--a4m-surf-4);--edge:var(--a4m-edge); color-scheme: light; color: var(--a4m-cream); }
html { color-scheme: dark; }
@media (prefers-color-scheme: light) { html:not([data-theme="dark"]) { color-scheme: light; } }
html[data-theme="light"] { color-scheme: light; }
html[data-theme="dark"] { color-scheme: dark; }
html, body { background: var(--a4m-ink); color: var(--a4m-cream); }
@font-face { font-family: 'Manrope-fb'; src: local('Arial'); size-adjust: 100.24%; ascent-override: 106.35%; descent-override: 29.93%; line-gap-override: 0%; }
@font-face { font-family: 'Inter-fb'; src: local('Arial'); size-adjust: 105.49%; ascent-override: 91.83%; descent-override: 22.87%; line-gap-override: 0%; }
.disp { font-family: 'Manrope','Manrope-fb',sans-serif; letter-spacing: -0.03em; text-wrap: balance; }
.hero-display { font-family:'Manrope','Manrope-fb',sans-serif; font-weight:200; letter-spacing:-0.04em; line-height:0.98; }
.glass { backdrop-filter: saturate(180%) blur(18px); -webkit-backdrop-filter: saturate(180%) blur(18px); background: color-mix(in srgb, var(--a4m-ink) 72%, transparent); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .glass { background: var(--a4m-ink); } }
.a4m-chatpanel { background: var(--a4m-ink); }
.a4m-topbar { flex-wrap: nowrap; border-bottom: 1px solid color-mix(in srgb, var(--a4m-cream) 8%, transparent) !important; }
.a4m-topbar::before { content: ""; position: absolute; inset: 0; z-index: -1;
background: color-mix(in srgb, var(--a4m-ink) 97%, transparent); backdrop-filter: saturate(180%) blur(18px); -webkit-backdrop-filter: saturate(180%) blur(18px); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .a4m-topbar::before { background: var(--a4m-ink); } }
.a4m-navlink { font-size: 13px; font-weight: 500; letter-spacing: .01em; color: var(--a4m-nav-quiet); }
.a4m-navlink[aria-current="page"], .a4m-navlink:hover { color: var(--a4m-cream); }
.a4m-mega { position: fixed; left: 0; right: 0; z-index: var(--a4m-layer-underChrome);
background: var(--a4m-ink);
border-bottom: 1px solid color-mix(in srgb, var(--a4m-cream) 8%, transparent);
visibility: hidden; opacity: 0; transform: translateY(-6px);
transition: opacity var(--dur-2) var(--e-out), transform var(--dur-2) var(--e-out), visibility 0s step-end var(--dur-2); }
.a4m-mega[data-open="1"] { visibility: visible; opacity: 1; transform: none;
transition: opacity var(--dur-2) var(--e-out), transform var(--dur-2) var(--e-out), visibility 0s step-start; }
.a4m-mega-in { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 8px 24px;
padding: 22px 24px 26px; }
.a4m-mega-h { font-size: 10px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
color: var(--a4m-mute); padding: 6px 10px 8px; }
.a4m-mega-row { display: block; width: 100%; text-align: left; border-radius: 10px; padding: 7px 10px;
opacity: 0; transform: translateY(8px);
transition: opacity var(--dur-2) var(--e-out), transform var(--dur-2) var(--e-out), background-color var(--dur-1) var(--e-out);
transition-delay: calc(var(--i, 0) * 20ms); }
.a4m-mega[data-open="1"] .a4m-mega-row { opacity: 1; transform: none; }
.a4m-mega-row:hover, .a4m-rowhover:hover { background-color: color-mix(in srgb, var(--a4m-cream) 5%, transparent); }
.a4m-mega-row .rl { display: block; font-size: 13px; font-weight: 500; color: var(--a4m-cream); line-height: 1.35; }
.a4m-mega-row .rd { display: block; font-size: 11.5px; color: var(--a4m-mute); line-height: 1.4; margin-top: 1px; }
.a4m-mega-row[aria-current="page"] .rl { color: var(--a4m-gold); }
@media (prefers-reduced-motion: reduce) {
.a4m-mega, .a4m-mega-row { transition-duration: 0s; transition-delay: 0s; }
.a4m-mega { transform: none; }
.a4m-mega-row { transform: none; }
}
.section-pad { padding-top: 5rem; padding-bottom: 5rem; }
@media (max-width: 767px) { .section-pad { padding-top: 2.75rem; padding-bottom: 2.75rem; } }
.a4m-bottomnav { background: var(--a4m-ink) !important; }
.a4m-navtick { box-shadow: 0 0 18px -6px color-mix(in srgb, var(--a4m-gold) 55%, transparent); }
@media (max-width: 767px) { main { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); } }
@media (max-width: 767px) { .a4m-pausechip { bottom: calc(76px + env(safe-area-inset-bottom, 0px) + 14px); } }
::selection { background: var(--a4m-gold); color: var(--a4m-ink); }
*:focus-visible { outline: 2px solid var(--a4m-gold); outline-offset: 2px; }
:where(.a4m-on-dark:focus-visible, .a4m-on-light:focus-visible, .a4m-tile-hit:focus-visible) { position: relative; }
:is(.a4m-on-dark, .a4m-on-light, .a4m-tile-hit):focus-visible { outline: 2px solid transparent; outline-offset: -3px; }
:is(.a4m-on-dark, .a4m-on-light, .a4m-tile-hit):focus-visible::before { content: ""; position: absolute; inset: 3px; z-index: 2; pointer-events: none; border: 2px solid var(--a4m-cream); border-radius: inherit; box-shadow: 0 0 0 2px var(--a4m-ink); }
@media (forced-colors: active) {
:is(.a4m-on-dark, .a4m-on-light, .a4m-tile-hit):focus-visible { outline-color: Highlight; }
:is(.a4m-on-dark, .a4m-on-light, .a4m-tile-hit):focus-visible::before { display: none; }
}
button { transition: opacity .15s ease, transform .12s ease; }
button:active { transform: scale(.97); }
.a4m-map { isolation: isolate; }
.a4m-map .leaflet-tile { filter: grayscale(1) invert(1) brightness(.92) contrast(.88) hue-rotate(180deg) sepia(.10); }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .a4m-map .leaflet-tile { filter: grayscale(.55) brightness(1.02) contrast(.94) sepia(.06); } }
:root[data-theme="light"] .a4m-map .leaflet-tile { filter: grayscale(.55) brightness(1.02) contrast(.94) sepia(.06); }
.a4m-map.leaflet-container { background: var(--a4m-panel-alt); font: inherit; }
.a4m-map.leaflet-container .leaflet-control-attribution { background: var(--a4m-ink); color: var(--a4m-mute); font-size: 0.625rem; }
.a4m-map .leaflet-control-attribution a { color: var(--a4m-gold-text); }
.a4m-map .leaflet-control-zoom a { background: var(--a4m-panel); color: var(--a4m-cream); border-color: var(--a4m-line); }
.a4m-map .leaflet-control-zoom a:hover, .a4m-map .leaflet-control-zoom a:focus { background: var(--a4m-panel); color: var(--a4m-cream); }
.a4m-map .leaflet-control-zoom a.leaflet-disabled { background: var(--a4m-panel); color: var(--a4m-mute); }
.a4m-map .a4m-map-route { stroke: var(--a4m-gold); }
.a4m-pin { display: block; width: 14px; height: 14px; border-radius: 999px; background: var(--a4m-gold); border: 2px solid var(--a4m-ink); box-shadow: 0 0 12px -2px color-mix(in srgb, var(--a4m-gold) 80%, transparent); }
.a4m-pin-user { background: var(--a4m-green); box-shadow: 0 0 12px -2px color-mix(in srgb, var(--a4m-green) 80%, transparent); }
.a4m-pin-muted { background: var(--a4m-mute); box-shadow: none; }
.a4m-map-tip { background: var(--a4m-panel) !important; color: var(--a4m-cream) !important; border: 1px solid var(--a4m-gold-dim) !important; border-radius: 8px !important; font-size: 0.6875rem !important; padding: 3px 8px !important; box-shadow: none !important; }
.a4m-map-tip { width: max-content; white-space: normal !important; overflow-wrap: anywhere; box-sizing: border-box; }
.a4m-map-tip[hidden] { display: none !important; }
.a4m-map-tip::before { display: none !important; }
@keyframes a4m-spin { to { transform: rotate(360deg); } }
.a4m-spin { animation: a4m-spin .7s linear infinite; }
.a4m-field:focus { outline: none; border-color: var(--a4m-gold) !important; box-shadow: 0 0 0 3px var(--a4m-gold-soft); }
.a4m-fieldwrap:focus-within { border-color: var(--a4m-gold) !important; box-shadow: 0 0 0 3px var(--a4m-gold-soft); }
input[type=search]::-webkit-search-cancel-button { -webkit-appearance: none; }
input[type=number]::-webkit-outer-spin-button, input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type=number] { appearance: textfield; -moz-appearance: textfield; }
input::placeholder, textarea::placeholder { color: var(--a4m-placeholder); opacity: 1; }
input::-moz-placeholder, textarea::-moz-placeholder { color: var(--a4m-placeholder); opacity: 1; }
:root { --sat: env(safe-area-inset-top, 0px); --sab: env(safe-area-inset-bottom, 0px); --sal: env(safe-area-inset-left, 0px); --sar: env(safe-area-inset-right, 0px); }
html, body { overscroll-behavior-y: none; }
.a4m-contain { overscroll-behavior: contain; }
input[type=range] { touch-action: pan-y; }
.a4m-range { accent-color: var(--a4m-gold); height: 26px; width: 100%; cursor: pointer; }
.a4m-range { -webkit-appearance: none; appearance: none; background: transparent; }
.a4m-range::-webkit-slider-runnable-track { height: 3px; border-radius: 2px; background: linear-gradient(90deg, var(--a4m-gold) 0 var(--a4m-range-fill, 0%), var(--a4m-line) var(--a4m-range-fill, 0%) 100%); }
.a4m-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 16px; height: 16px; border-radius: 50%; background: var(--a4m-gold); border: 3px solid var(--a4m-ink); box-shadow: 0 0 0 1px var(--a4m-gold-dim); margin-top: -6.5px; }
.a4m-range::-moz-range-track { height: 3px; border-radius: 2px; background: var(--a4m-line); }
.a4m-range::-moz-range-progress { height: 3px; border-radius: 2px; background: var(--a4m-gold); }
.a4m-range::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--a4m-gold); border: 3px solid var(--a4m-ink); box-shadow: 0 0 0 1px var(--a4m-gold-dim); }
.a4m-range:focus-visible { outline: none; }
.a4m-range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 1px var(--a4m-gold-dim), 0 0 0 4px var(--a4m-gold); }
.a4m-range:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 1px var(--a4m-gold-dim), 0 0 0 4px var(--a4m-gold); }
.a4m-range:disabled { opacity: 1; cursor: not-allowed; accent-color: var(--a4m-disabled-ink); }
.a4m-range:disabled::-webkit-slider-runnable-track { background: linear-gradient(90deg, var(--a4m-disabled-ink) 0 var(--a4m-range-fill, 0%), var(--a4m-panel-alt) var(--a4m-range-fill, 0%) 100%); border: 1px dashed var(--a4m-disabled-edge); box-sizing: border-box; }
.a4m-range:disabled::-webkit-slider-thumb { background: var(--a4m-disabled-ink); border-color: var(--a4m-panel-alt); box-shadow: 0 0 0 1px var(--a4m-disabled-edge); }
.a4m-range:disabled::-moz-range-track { background: var(--a4m-panel-alt); border: 1px dashed var(--a4m-disabled-edge); box-sizing: border-box; }
.a4m-range:disabled::-moz-range-progress { background: var(--a4m-disabled-ink); }
.a4m-range:disabled::-moz-range-thumb { background: var(--a4m-disabled-ink); border-color: var(--a4m-panel-alt); box-shadow: 0 0 0 1px var(--a4m-disabled-edge); }
.a4m-grade-img { filter: saturate(.78) contrast(1.05) brightness(.9); }
.a4m-svcart { position: relative; height: 5.25rem; overflow: hidden; background: var(--a4m-panel-alt); border-bottom: 1px solid var(--a4m-line); }
.a4m-svcart::before { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, var(--svcTint, color-mix(in srgb, var(--a4m-gold) 10%, transparent)) 0%, transparent 62%); }
.a4m-svcart > svg { position: absolute; right: -0.8rem; bottom: -1.5rem; opacity: var(--a4m-svc-glyph-o); transform: rotate(-8deg); }
.a4m-gallery-strip { touch-action: pan-x pan-y; scroll-snap-type: x proximity; scrollbar-width: none; }
.a4m-gallery-strip::-webkit-scrollbar { display: none; }
.a4m-railscroll { scrollbar-width: none; }
.a4m-railscroll::-webkit-scrollbar { display: none; }
.a4m-gallery-strip > * { scroll-snap-align: start; }
.a4m-rail-fade { -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 24px), transparent 100%); mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 24px), transparent 100%); }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
button, [role="tablist"], .a4m-bottomnav, .a4m-topbar { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
:root { view-transition-name: none; }
::view-transition { pointer-events: none; }
::view-transition-group(*) { animation-duration: .44s; animation-timing-function: var(--e-out); }
@media (prefers-reduced-motion: reduce) { ::view-transition-old(*), ::view-transition-new(*), ::view-transition-group(*) { animation: none !important; } }
.a4m-lightbox-img { touch-action: pinch-zoom; }
.h-hero { height: 92vh; height: 92dvh; }
.minh-hero { min-height: 72vh; min-height: 72dvh; }
.maxh-modal { max-height: 92vh; max-height: 92dvh; }
@media (min-width: 1024px) and (max-width: 1750px) {
.a4m-topbar { column-gap: 6px; }
}
.maxh-sheet { max-height: 86vh; max-height: 86dvh; }
.maxh-lightbox { max-height: 88vh; max-height: 88dvh; }
.maxh-chat { max-height: 72vh; max-height: 72dvh; }
@media (max-width: 767px), (pointer: coarse) {
.a4m-field, select, textarea, input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]) { font-size: 16px !important; }
}
@media (max-width: 767px) {
.glass { backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.section-pad { padding-top: 3rem; padding-bottom: 3rem; }
}
@media (pointer: coarse) {
.tap { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
.hit:not(.absolute):not(.fixed), .hit-y:not(.absolute):not(.fixed) { position: relative; }
.hit::after { content: ""; position: absolute; inset: -10px; }
.hit-y::after { content: ""; position: absolute; inset: -6px -2px; }
.a4m-chmatrix [role="switch"]::after { content: ""; position: absolute; inset: -8px -10px; }
.a4m-btn { min-height: 44px; }
}
.a4m-bottomnav { position: fixed; bottom: 0; left: 0; right: 0; z-index: var(--a4m-layer-chrome); border-top: 1px solid var(--a4m-line); padding-bottom: var(--sab); transition: transform .15s ease; }
.a4m-bottomnav.kb-hidden { transform: translateY(110%); }
.a4m-fab { transition: transform .15s ease, bottom .15s ease; }
.a4m-fab.kb-hidden { transform: translateY(calc(100% + 9.5rem + var(--sab))); pointer-events: none; }
.a4m-fab.a4m-fab-bar { bottom: calc(var(--a4m-fixed-bottom-inset, calc(5.5rem + var(--sab))) + 0.75rem); }
@media (max-width: 767px), (max-height: 500px) and (pointer: coarse) {
.a4m-topbar { padding-top: calc(0.5rem + var(--sat)); padding-left: calc(1rem + var(--sal)); padding-right: calc(1rem + var(--sar)); }
.a4m-bottomnav { padding-left: var(--sal); padding-right: var(--sar); }
.a4m-safe-x { padding-left: calc(0.75rem + var(--sal)) !important; padding-right: calc(0.75rem + var(--sar)) !important; }
.a4m-fab { right: calc(1rem + var(--sar)) !important; }
}
@media (max-width: 767px) {
.a4m-fab { bottom: calc(4.25rem + var(--sab)) !important; }
.a4m-fab.a4m-fab-hi { bottom: calc(8.5rem + var(--sab)) !important; }
.a4m-chatpanel {
bottom: calc(1rem + var(--sab)) !important;
max-height: calc(100vh - 2rem - var(--sat) - var(--sab));
max-height: calc(100dvh - 2rem - var(--sat) - var(--sab));
}
.a4m-above-nav { bottom: calc(3.75rem + var(--sab)) !important; }
}
@media (min-width: 768px) {
.a4m-topbar { padding-top: calc(0.75rem + var(--sat)); }
}
@media (prefers-reduced-motion: reduce) { .a4m-bottomnav, .a4m-fab, .a4m-skip { transition: none; } }
@media (prefers-reduced-motion: reduce) { .a4m-spin { animation-duration: 1.6s; } button, button:active { transition: none; transform: none; } .img-skel, .scanning::after, .turn-idle, .dot, .heart-pop svg, .toast-item, .confetti span { animation: none !important; } }
@media (hover: hover) and (pointer: fine) {
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--a4m-ink); }
::-webkit-scrollbar-thumb { background: var(--a4m-line); border-radius: 6px; border: 2px solid var(--a4m-ink); }
::-webkit-scrollbar-thumb:hover { background: var(--a4m-gold-dim); }
}
.btn-gold { background: linear-gradient(180deg, var(--a4m-gold-lift) 0%, var(--a4m-gold) 55%, var(--a4m-gold-deep) 100%); color: var(--a4m-ink); position: relative; overflow: hidden; box-shadow: inset 0 1px 0 var(--a4m-gold-edge); }
.btn-gold::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.45) 50%, transparent 70%); transform: translateX(-120%); transition: transform .7s; }
.btn-gold:not(:disabled):hover::after { transform: translateX(120%); }
.a4m-btn { border: 1px solid transparent; }
.a4m-disabled:disabled, .a4m-field:disabled, .a4m-btn:disabled { opacity: 1; background: var(--a4m-panel-alt) !important; color: var(--a4m-disabled-ink) !important; border: 1px dashed var(--a4m-disabled-edge) !important; box-shadow: none; transform: none; }
.a4m-disabled:disabled::after, .a4m-btn:disabled::after { display: none; }
.a4m-disabled:disabled[aria-busy="true"], .a4m-btn[aria-busy="true"] { cursor: progress; border-style: solid !important; }
.a4m-field[aria-invalid="true"] { border-color: var(--a4m-red) !important; }
.a4m-field[aria-invalid="true"]:focus { outline: 2px solid var(--a4m-red); outline-offset: 2px; box-shadow: none; }
:lang(sr-Latn) { hyphens: auto; }
.card-lux { position: relative; background: linear-gradient(165deg, var(--a4m-panel-alt) 0%, var(--a4m-panel) 60%); }
.card-lux::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: linear-gradient(160deg, color-mix(in srgb, var(--a4m-gold) 45%, transparent), color-mix(in srgb, var(--a4m-gold) 6%, transparent) 40%, transparent 70%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
.veh-card { transition: transform .35s var(--e-out), box-shadow .35s; }
@media (hover: hover) and (pointer: fine) { .veh-card:hover { box-shadow: 0 24px 48px -18px rgba(var(--a4m-shadow-rgb),var(--a4m-shadow-lift-o)), 0 0 0 1px var(--a4m-gold-dim), 0 0 34px -8px color-mix(in srgb, var(--a4m-gold) 35%, transparent); } }
.veh-card img { transition: transform .6s var(--e-out); }
@media (hover: hover) and (pointer: fine) { .veh-card:hover img { transform: scale(1.06); } }
@media (pointer: coarse) { .veh-card:active { transform: scale(.985); transition: transform var(--dur-1) linear; } }
@media (prefers-reduced-motion: reduce) { .veh-card:active { transform: none; transition: none; } }
@keyframes heartPop { 0% { transform: scale(1); } 40% { transform: scale(1.45); } 100% { transform: scale(1); } }
.heart-pop svg { animation: heartPop .35s var(--e-out); }
@keyframes toastIn { from { opacity: 0; transform: translate(-50%, -10px) scale(.96); } to { opacity: 1; transform: translate(-50%, 0) scale(1); } }
.toast-item { animation: toastIn .3s var(--e-out); }
@keyframes confettiFly { 0% { transform: translate(0,0) rotate(0); opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)) rotate(var(--rot)); opacity: 0; } }
.confetti span { position: absolute; left: 50%; top: 40%; width: 7px; height: 7px; border-radius: 2px; background: var(--a4m-gold); transform: translate(var(--dx), var(--dy)) rotate(var(--rot)); opacity: 0; animation: confettiFly 1s cubic-bezier(.2,.7,.3,1) forwards; }
.confetti span:nth-child(3n) { background: var(--a4m-cream); border-radius: 50%; }
@keyframes shimmerX { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
.img-skel { background: var(--a4m-panel-alt); overflow: hidden; }
.img-skel:not(.absolute):not(.fixed), .skel:not(.absolute):not(.fixed) { position: relative; }
.img-skel::after, .skel::after { content: ""; position: absolute; inset: 0; pointer-events: none;
background: linear-gradient(100deg, var(--a4m-skel-sheen-a0) 35%, var(--a4m-skel-sheen) 50%, var(--a4m-skel-sheen-a0) 65%);
transform: translateX(-100%); animation: shimmerX 1.4s ease-in-out infinite; }
.img-fade { opacity: 0; transition: opacity .5s ease; }
.img-loaded { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .img-fade { transition: none; } }
@keyframes msgIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.msg-in { animation: msgIn .28s var(--e-out); }
@keyframes turnSway { 0%,100% { transform: rotateY(-9deg); } 50% { transform: rotateY(9deg); } }
.turn-idle { animation: turnSway 6s ease-in-out infinite; }
.turn-card { transition: transform .1s linear; transform-style: preserve-3d; will-change: transform; }
@keyframes reticle { 0%,100% { opacity: .55; } 50% { opacity: 1; } }
.ar-corner { position: absolute; width: 22px; height: 22px; border-color: var(--a4m-gold); animation: reticle 2.2s ease-in-out infinite; }
@keyframes scanline { 0% { top: -8%; } 100% { top: 104%; } }
.scanning { position: relative; overflow: hidden; }
.scanning::after { content: ""; position: absolute; left: 0; right: 0; height: 26%; top: -8%;
background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--a4m-gold) 28%, transparent), transparent);
border-top: 1px solid color-mix(in srgb, var(--a4m-gold) 55%, transparent); animation: scanline 1.1s linear infinite; pointer-events: none; }
.mono { font-family: 'JetBrains Mono', monospace; }
body { font-family: 'Inter','Inter-fb',sans-serif; -webkit-font-smoothing: antialiased; }
:root {
--e-out: cubic-bezier(0.16, 1, 0.3, 1);
--e-spring: cubic-bezier(.34,1.4,.5,1);
--e-exit: cubic-bezier(.3,0,.8,.15);
--dur-1: .12s; --dur-2: .26s; --dur-3: .4s; --dur-hero: .85s;
--step-hero: clamp(2.75rem, 1.3rem + 6vw, 5.75rem);
--step-1: clamp(1.85rem, 1.15rem + 3vw, 3rem);
--step-2: clamp(1.35rem, 1.05rem + 1.4vw, 1.9rem);
--step-3: clamp(1.1rem, 1rem + .55vw, 1.35rem);
--brand-visa: #1A1F71; --brand-mastercard: #EB001B; --brand-amex: #2E77BC; --brand-discover: #F76B1C;
}
.elev-1 { box-shadow: var(--a4m-elev-1); }
.elev-2 { box-shadow: var(--a4m-elev-2); }
.figures { font-family: 'Manrope','Manrope-fb','Inter','Inter-fb',sans-serif; font-variant-numeric: tabular-nums lining-nums; font-feature-settings: 'tnum' 1,'lnum' 1; letter-spacing: -.01em; }
@keyframes a4mRise { from { opacity: 1; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@supports (animation-timeline: view()) {
@media (prefers-reduced-motion: no-preference) {
.reveal { animation: a4mRise linear both; animation-timeline: view(); animation-range: entry 2% cover 30%; }
}
}
.a4m-tile { display: block; min-height: 440px; isolation: isolate; container-type: inline-size; }
.a4m-tile-stage { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; z-index: 0; }
.a4m-tile-scale { position: absolute; top: 0; left: 0; width: 100%; transform-origin: 0 0; will-change: transform;
transform: translate(var(--tx, 0px), var(--ty, 0px)) scale(var(--ts, 1)); }
.a4m-tile-veil { position: absolute; inset: 0; z-index: 1; border-radius: inherit; pointer-events: none;
background:
linear-gradient(180deg, color-mix(in srgb, var(--a4m-ink) 80%, transparent) 0%, color-mix(in srgb, var(--a4m-ink) 30%, transparent) 18%, transparent 34%),
linear-gradient(0deg, var(--a4m-ink) 0%, color-mix(in srgb, var(--a4m-ink) 95%, transparent) 16%, color-mix(in srgb, var(--a4m-ink) 65%, transparent) 30%, transparent 52%); }
.a4m-tile-body { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: space-between;
min-height: 440px; padding: 28px; gap: 24px; }
.a4m-tile-h { font-size: clamp(26px, 3.2vw, 38px); font-size: clamp(26px, 6.4cqi, 38px); line-height: 1.05; letter-spacing: -.015em; }
.a4m-tile-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; }
.a4m-tile-go { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px;
border-radius: 999px; border: 1px solid var(--a4m-line); color: var(--a4m-cream);
transition: background-color var(--dur-2) var(--e-out), border-color var(--dur-2) var(--e-out), transform var(--dur-2) var(--e-out); }
@media (hover: hover) and (pointer: fine) {
.a4m-tile:hover .a4m-tile-go { background-color: var(--a4m-gold-soft); border-color: var(--a4m-gold-dim); transform: translateX(3px); }
}
@media (prefers-reduced-motion: reduce) { .a4m-tile-go { transition: none; } .a4m-tile:hover .a4m-tile-go { transform: none; } }
.a4m-wall { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; align-content: start; }
.a4m-wall-cell { transform-origin: 50% 50%; }
@keyframes a4mWallDrop { from { opacity: 1; filter: none; transform: none; }
to { opacity: var(--a4m-wall-drop-o); filter: var(--a4m-wall-drop); transform: scale(.94); } }
@keyframes a4mWallKeep { from { transform: none; } to { transform: scale(1.04); } }
@keyframes a4mCutIn { from { opacity: .4; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@supports (animation-timeline: view()) {
@media (prefers-reduced-motion: no-preference) {
.a4m-wall-cell[data-keep="0"] { animation: a4mWallDrop var(--e-out) both; animation-timeline: --berth;
animation-range: entry 70% contain 36%; }
.a4m-wall-cell[data-keep="1"] { animation: a4mWallKeep var(--e-out) both; animation-timeline: --berth;
animation-range: contain 18% contain 58%; }
.a4m-stage-cut { animation: a4mCutIn var(--e-out) both; animation-timeline: --berth; animation-range: contain 50% contain 88%; }
}
}
@media (max-width: 767px) { .a4m-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }
@keyframes a4mTradeOut { from { transform: none; opacity: 1; } to { transform: translateX(-46%) rotate(-3deg); opacity: 0; } }
@keyframes a4mTradeIn { from { transform: translateX(30%) rotate(2deg); opacity: .35; } to { transform: none; opacity: 1; } }
@keyframes a4mDeltaGrow { from { transform: scaleX(.08); } to { transform: scaleX(1); } }
@keyframes a4mAccrue { from { opacity: .42; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.a4m-delta { transform-origin: 0 50%; }
@supports (animation-timeline: view()) {
@media (prefers-reduced-motion: no-preference) {
.a4m-trade-out { animation: a4mTradeOut var(--e-out) both; animation-timeline: --berth; animation-range: entry 70% contain 34%; }
.a4m-trade-in { animation: a4mTradeIn var(--e-out) both; animation-timeline: --berth; animation-range: contain 22% contain 60%; }
.a4m-delta { animation: a4mDeltaGrow var(--e-out) both; animation-timeline: --berth; animation-range: contain 62% contain 88%; }
.a4m-accrue { animation: a4mAccrue var(--e-out) both; animation-timeline: --berth;
animation-range: contain calc(4% + var(--i) * 9%) contain calc(24% + var(--i) * 9%); }
}
}
.a4m-shelf { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; align-content: start; }
.a4m-shelf-cell { position: relative; aspect-ratio: 1; border-radius: 14px; overflow: clip;
background: var(--a4m-panel-alt); border: 1px solid var(--a4m-line); transform-origin: 50% 50%; }
.a4m-shelf-cell img { width: 100%; height: 100%; object-fit: cover; display: block; }
.a4m-shelf-cap { position: absolute; inset: auto 0 0 0; padding: 22px 10px 8px;
background: linear-gradient(0deg, color-mix(in srgb, var(--a4m-ink) 94%, transparent) 0%, color-mix(in srgb, var(--a4m-ink) 65%, transparent) 55%, transparent 100%); }
@keyframes a4mCtxIn { from { opacity: .55; transform: translateY(-14px); } to { opacity: 1; transform: none; } }
@keyframes a4mShelfOut { from { opacity: 1; filter: none; transform: none; }
to { opacity: .12; filter: grayscale(1) brightness(.5); transform: scale(.88); } }
@keyframes a4mShelfFit { from { border-color: var(--a4m-line); transform: none; }
to { border-color: var(--a4m-gold); transform: translateY(-5px) scale(1.03); } }
.a4m-svc-row { display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
padding: 13px 16px; border-radius: 14px; background: color-mix(in srgb, var(--a4m-ink) 82%, transparent); border: 1px solid var(--a4m-line);
backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
@keyframes a4mSvcPick { from { background-color: color-mix(in srgb, var(--a4m-ink) 82%, transparent); border-color: var(--a4m-line); }
to { background-color: color-mix(in srgb, var(--a4m-panel-alt) 94%, transparent); border-color: var(--a4m-gold); } }
@keyframes a4mSvcBooked { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@supports (animation-timeline: view()) {
@media (prefers-reduced-motion: no-preference) {
.a4m-ctx-in { animation: a4mCtxIn var(--e-out) both; animation-timeline: --berth; animation-range: entry 70% contain 12%; }
.a4m-shelf-cell[data-fit="out"] { animation: a4mShelfOut var(--e-out) both; animation-timeline: --berth; animation-range: contain 10% contain 42%; }
.a4m-shelf-cell[data-fit="fit"] { animation: a4mShelfFit var(--e-out) both; animation-timeline: --berth; animation-range: contain 28% contain 60%; }
.a4m-svc-pick { animation: a4mSvcPick var(--e-out) both; animation-timeline: --berth; animation-range: contain 48% contain 72%; }
.a4m-svc-booked { animation: a4mSvcBooked var(--e-out) both; animation-timeline: --berth; animation-range: contain 66% contain 88%; }
}
}
@media (max-width: 767px) { .a4m-shelf { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } }
.a4m-rail { --lap: 56vh; --dwell: 52vh; }
.a4m-rail.a4m-noscrub { --lap: 0vh; --dwell: 0vh; }
.a4m-rail.a4m-noscrub .a4m-berth { height: auto; margin-bottom: 18px; }
.a4m-rail.a4m-noscrub .a4m-stage { position: relative; top: 0; height: auto; min-height: 480px; }
.a4m-berth { position: relative; height: calc(100svh + var(--dwell)); margin-bottom: calc(-1 * var(--lap)); }
.a4m-berth:last-child { margin-bottom: 0; }
.a4m-stage { position: sticky; top: 72px; height: calc(100svh - 84px); overflow: clip;
border-radius: 28px; background: var(--a4m-ink); isolation: isolate; container-type: inline-size; }
.a4m-stage-surface { position: absolute; inset: 0; transform-origin: 0 0; will-change: transform; }
.a4m-stage-chrome { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column;
justify-content: space-between; padding: 28px 30px; pointer-events: none; }
.a4m-stage-chrome > * { pointer-events: auto; }
.a4m-stage-h { font-size: clamp(30px, 4.2vw, 54px); font-size: clamp(30px, 4.6cqi, 54px); line-height: 1.02; letter-spacing: -.022em; }
.a4m-stage-veil { position: absolute; inset: 0; z-index: 2; pointer-events: none;
background: linear-gradient(180deg, color-mix(in srgb, var(--a4m-ink) 77%, transparent) 0%, color-mix(in srgb, var(--a4m-ink) 25%, transparent) 16%, transparent 30%),
linear-gradient(0deg, var(--a4m-ink) 0%, color-mix(in srgb, var(--a4m-ink) 90%, transparent) 11%, color-mix(in srgb, var(--a4m-ink) 45%, transparent) 24%, transparent 40%); }
@keyframes a4mStageLift { from { transform: translateY(9%) scale(.972); } to { transform: none; } }
@keyframes a4mStageSink { from { transform: none; filter: none; } to { transform: scale(.94); filter: brightness(.45); } }
@keyframes a4mChromeOut { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-8px); } }
@supports (animation-timeline: view()) {
@media (prefers-reduced-motion: no-preference) {
.a4m-berth { view-timeline-name: --berth; view-timeline-axis: block; }
.a4m-stage-lift { animation: a4mStageLift var(--e-out) both; animation-timeline: --berth; animation-range: entry 0% entry 100%; }
.a4m-stage-sink { animation: a4mStageSink linear both; animation-timeline: --berth; animation-range: exit 0% exit 100%; }
.a4m-stage-chrome { animation: a4mChromeOut var(--e-out) both; animation-timeline: --berth; animation-range: exit 0% exit 30%; }
}
}
@media (max-width: 767px) {
.a4m-rail { --lap: 0px; --dwell: 8vh; }
.a4m-stage { top: 68px; height: calc(100svh - 80px); border-radius: 22px; }
.a4m-stage-chrome { padding: 20px 20px; }
}
@media (max-width: 1023px), (prefers-reduced-motion: reduce) {
.a4m-rail { --lap: 0vh; --dwell: 0vh; }
.a4m-rail .a4m-berth { height: auto; margin-bottom: 18px; view-timeline-name: none; }
.a4m-rail .a4m-stage { position: relative; top: 0; height: auto; min-height: 480px; }
.a4m-rail .a4m-stage-lift, .a4m-rail .a4m-stage-sink, .a4m-rail .a4m-stage-chrome { animation: none; }
}
@media (max-width: 767px) {
.a4m-tile, .a4m-tile-body { min-height: 380px; }
.a4m-tile-body { padding: 22px; }
.a4m-tile-scale { transform: translate(var(--mtx, 0px), var(--mty, 0px)) scale(var(--mts, 1)); }
}
.cascade > * { animation: a4mRise var(--dur-3) var(--e-out) both; animation-delay: calc(var(--i,0) * clamp(16ms, 300ms / var(--n,12), 42ms)); }
@media (hover: hover) and (pointer: fine) {
.spotlight { position: relative; }
.spotlight::before { content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; opacity:0; transition:opacity var(--dur-2) var(--e-out); background:radial-gradient(300px circle at var(--mx,50%) var(--my,50%), color-mix(in srgb, var(--a4m-gold) 10%, transparent), transparent 60%); z-index:0; }
.spotlight:hover::before { opacity:1; }
}
@media (prefers-reduced-motion: reduce) {
.cascade > * { animation: none; opacity: 1; }
.reveal { animation: none; }
}
@keyframes rollIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.roll { animation: rollIn 0.35s ease-out; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.fade-up { animation: fadeUp 0.4s ease-out; }
@keyframes blink { 0%,100% { opacity: 0.2; } 50% { opacity: 1; } }
.dot { animation: blink 1.2s infinite; }
.dot:nth-child(2) { animation-delay: 0.2s; }
.dot:nth-child(3) { animation-delay: 0.4s; }
.a4m-scrim { background: var(--a4m-scrim); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: scrimIn .18s ease-out; }
@keyframes scrimIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes modalIn { from { opacity: 0; transform: translateY(12px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } }
.a4m-modal-in { animation: modalIn .26s var(--e-out); }
@media (prefers-reduced-motion: reduce) { .a4m-scrim, .a4m-modal-in, .fade-up, .roll, .msg-in { animation: none !important; transition: none !important; } }
.a4m-check { accent-color: var(--a4m-gold); width: 14px; height: 14px; cursor: pointer; }
.a4m-check:disabled { cursor: not-allowed; accent-color: var(--a4m-disabled-ink); outline: 1px dashed var(--a4m-disabled-edge); outline-offset: 1px; }
.a4m-select:disabled { cursor: not-allowed; color: var(--a4m-disabled-ink) !important; border: 1px dashed var(--a4m-disabled-edge) !important; }
.a4m-select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23C9A961' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 4l4 4 4-4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.75rem center; padding-right: 2rem; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .a4m-select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%237A6538' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 4l4 4 4-4'/%3E%3C/svg%3E"); } }
:root[data-theme="light"] .a4m-select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%237A6538' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 4l4 4 4-4'/%3E%3C/svg%3E"); }
.a4m-hov-gold { transition: color var(--dur-2) var(--e-out), border-color var(--dur-2) var(--e-out); }
@media (hover: hover) and (pointer: fine) { .a4m-btn-outline:not(:disabled):hover { background-color: var(--a4m-gold-soft); } }
@media (hover: hover) and (pointer: fine) {
.a4m-hov-gold:not(:disabled):hover { color: var(--a4m-gold-text) !important; border-color: var(--a4m-gold) !important; }
}
.skel { background: var(--a4m-panel-alt); border-radius: 8px; overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .skel::after, .img-skel::after { animation: none; content: none; } }
@keyframes pulse24 { 0% { transform: scale(.92); opacity: .9; } 70%, 100% { transform: scale(1.45); opacity: 0; } }
.pulse24:not(.absolute):not(.fixed) { position: relative; }
.pulse24::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
box-shadow: 0 0 0 5px color-mix(in srgb, var(--a4m-gold) 30%, transparent); opacity: 0; animation: pulse24 2.2s infinite; }
input[type=range] { accent-color: var(--a4m-gold); }
.hero-img { transition: transform 0.7s var(--e-out); }
@media (hover: hover) and (pointer: fine) { .hero-wrap:hover .hero-img { transform: scale(1.03); } }
.gold-rule { height: 1px; background: linear-gradient(90deg, transparent, var(--a4m-gold-dim), transparent); }
.swipe-card { touch-action: pan-y; user-select: none; -webkit-user-select: none; transition: transform .3s var(--e-out), opacity .3s; will-change: transform; }
.swipe-card img { -webkit-user-drag: none; }
.swipe-card.dragging { transition: none; }
.swipe-out-left { transform: translateX(-130%) rotate(-18deg) !important; opacity: 0; }
.swipe-out-right { transform: translateX(130%) rotate(18deg) !important; opacity: 0; }
.cv-auto { content-visibility: auto; contain-intrinsic-size: 600px; }
[data-a4m-seller-layout] .cv-auto { content-visibility: visible; }
.grid > * { min-width: 0; }
.a4m-panelgrid > * { min-width: 0; max-width: 100%; }
select { max-width: 100%; }
.recharts-responsive-container { max-width: 100%; overflow: hidden; }
@media (min-width: 640px) { @supports (justify-content: safe center) { .a4m-rail-center { justify-content: safe center; } } }
@media (min-width: 640px) { .a4m-rail-center { scroll-snap-type: none; } }
.cv-card { content-visibility: auto; contain-intrinsic-size: auto 420px; }
@media (prefers-reduced-motion: reduce) {
.pulse24::after, .roll, .fade-up { animation: none !important; }
.hero-img { transition: none !important; }
}
.type-caret { display: inline-block; width: .55em; height: 1em; margin-left: 3px; vertical-align: -0.12em; background: var(--a4m-gold); animation: blink 1.1s steps(1) infinite; }
@media (prefers-reduced-motion: reduce) {
.type-caret, .ar-corner { animation: none !important; }
}
.t-hero { font-size: var(--step-hero); }
.t-1 { font-size: var(--step-1); }
.t-2 { font-size: var(--step-2); }
.t-3 { font-size: var(--step-3); }
@property --a4m-ang { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.card-beam { position: relative; }
.card-beam::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
background: conic-gradient(from var(--a4m-ang), transparent 0 70%, color-mix(in srgb, var(--a4m-gold) 50%, transparent) 84%, var(--a4m-gold-hi) 90%, color-mix(in srgb, var(--a4m-gold) 50%, transparent) 94%, transparent 100%);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
pointer-events: none; opacity: 0; transition: opacity var(--dur-2) var(--e-out); }
@media (hover: hover) and (pointer: fine) {
.card-beam:hover::after, .card-beam:focus-within::after { opacity: 1; }
}
.hud-frame, .hud-frame-2 { position: relative; }
.hud-frame::before, .hud-frame-2::before { content: ""; position: absolute; inset: 10px; pointer-events: none; opacity: .45; z-index: 1;
--hb: color-mix(in srgb, var(--a4m-gold) 55%, transparent);
background:
linear-gradient(var(--hb), var(--hb)) top left / 16px 1px,
linear-gradient(var(--hb), var(--hb)) top left / 1px 16px,
linear-gradient(var(--hb), var(--hb)) top right / 16px 1px,
linear-gradient(var(--hb), var(--hb)) top right / 1px 16px,
linear-gradient(var(--hb), var(--hb)) bottom left / 16px 1px,
linear-gradient(var(--hb), var(--hb)) bottom left / 1px 16px,
linear-gradient(var(--hb), var(--hb)) bottom right / 16px 1px,
linear-gradient(var(--hb), var(--hb)) bottom right / 1px 16px;
background-repeat: no-repeat; }
.hud-frame-2::before { background:
linear-gradient(var(--hb), var(--hb)) top left / 20px 1px,
linear-gradient(var(--hb), var(--hb)) top left / 1px 20px,
linear-gradient(var(--hb), var(--hb)) bottom right / 20px 1px,
linear-gradient(var(--hb), var(--hb)) bottom right / 1px 20px;
background-repeat: no-repeat; }
.microlabel { font-family: 'JetBrains Mono', monospace; font-size: 0.625rem; text-transform: uppercase; letter-spacing: .32em; }
.fs9 { font-size: 0.5625rem; }
.fs10 { font-size: 0.625rem; }
.fs11 { font-size: 0.6875rem; }
@media print {
body[data-a4m-print-sheet] { background: white !important; overflow: visible !important; height: auto !important; min-height: 0 !important; max-height: none !important; }
body[data-a4m-print-sheet] * { visibility: hidden !important; }
body[data-a4m-print-sheet] :not(.a4m-sheet-print[data-a4m-print-selected]):not(.a4m-sheet-print[data-a4m-print-selected] *):not(:has(.a4m-sheet-print[data-a4m-print-selected])) { display: none !important; }
body[data-a4m-print-sheet] :has(.a4m-sheet-print[data-a4m-print-selected]) { display: block !important; position: static !important; transform: none !important; contain: none !important; content-visibility: visible !important; overflow: visible !important; height: auto !important; min-height: 0 !important; max-height: none !important; max-width: none !important; margin: 0 !important; padding: 0 !important; border: 0 !important; box-shadow: none !important; background: none !important; }
body[data-a4m-print-sheet] .a4m-sheet-print[data-a4m-print-selected], body[data-a4m-print-sheet] .a4m-sheet-print[data-a4m-print-selected] * { visibility: visible !important; }
body[data-a4m-print-sheet] .a4m-sheet-print[data-a4m-print-selected] .a4m-sheet-print { display: none !important; }
body[data-a4m-print-sheet] .a4m-scrim { position: static !important; display: block !important; padding: 0 !important; background: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; overflow: visible !important; animation: none !important; }
body[data-a4m-print-sheet] .a4m-scrim:not(:has(.a4m-sheet-print[data-a4m-print-selected])) { display: none !important; }
body[data-a4m-print-sheet] .a4m-scrim > .maxh-modal { max-height: none !important; max-width: none !important; overflow: visible !important; border: 0 !important; box-shadow: none !important; background: white !important; animation: none !important; }
.a4m-sheet-print { background: white !important; color: black !important; }
.a4m-sheet-print[data-a4m-print-selected] { position: static !important; transform: none !important; contain: none !important; overflow: visible !important; height: auto !important; min-height: 0 !important; max-height: none !important; width: auto !important; max-width: none !important; }
.a4m-sheet-print * { background: transparent !important; color: black !important; border-color: gray !important; box-shadow: none !important; text-shadow: none !important; }
.a4m-sheet-print[data-a4m-print-selected] * { overflow: visible !important; max-height: none !important; }
.a4m-sheet-print .a4m-print-badge { display: inline-block !important; border: 1px solid black !important; padding: 1px 4px !important; color: black !important; background: white !important; font-weight: 600 !important; }
.a4m-print-hide { display: none !important; }
}
.a4m-staged { filter: contrast(1.06) saturate(1.08) brightness(1.03); }
:root { --a4m-series-1: #B08D3E; --a4m-series-2: #35A08A; --a4m-series-3: #C06848; }
.a4m-stage-studio, .a4m-staged.a4m-stage-studio { filter: contrast(1.08) saturate(1.04) brightness(1.03); }
.a4m-stage-showroom, .a4m-staged.a4m-stage-showroom { filter: contrast(1.05) saturate(1.12) brightness(1.06); }
.a4m-stage-coastal, .a4m-staged.a4m-stage-coastal { filter: contrast(1.03) saturate(1.16) brightness(1.05) hue-rotate(6deg); }
@media (pointer: coarse) {
.chk-cta { position: sticky; bottom: 0; z-index: 5; padding-top: .625rem;
background: linear-gradient(180deg, var(--a4m-surf-1-a0) 0%, var(--surf-1) 34%); }
}
html.a4m-comfort { font-size: 115%; }
html.a4m-comfort [class*="text-[8px]"]:where(:not([class*=":text-"])) { font-size: 0.5rem; }
html.a4m-comfort [class*="text-[9px]"]:where(:not([class*=":text-"])) { font-size: 0.5625rem; }
html.a4m-comfort [class*="text-[9.5px]"]:where(:not([class*=":text-"])) { font-size: 0.59375rem; }
html.a4m-comfort [class*="text-[10px]"]:where(:not([class*=":text-"])) { font-size: 0.625rem; }
html.a4m-comfort [class*="text-[10.5px]"]:where(:not([class*=":text-"])) { font-size: 0.65625rem; }
html.a4m-comfort [class*="text-[11px]"]:where(:not([class*=":text-"])) { font-size: 0.6875rem; }
html.a4m-comfort [class*="text-[12px]"]:where(:not([class*=":text-"])) { font-size: 0.75rem; }
html.a4m-comfort [class*="text-[12.5px]"]:where(:not([class*=":text-"])) { font-size: 0.78125rem; }
@media (max-width: 639.98px) {
html.a4m-comfort [class*="text-[8px]"] { font-size: 0.5rem; }
html.a4m-comfort [class*="text-[9px]"] { font-size: 0.5625rem; }
html.a4m-comfort [class*="text-[9.5px]"] { font-size: 0.59375rem; }
html.a4m-comfort [class*="text-[10px]"] { font-size: 0.625rem; }
html.a4m-comfort [class*="text-[10.5px]"] { font-size: 0.65625rem; }
html.a4m-comfort [class*="text-[11px]"] { font-size: 0.6875rem; }
html.a4m-comfort [class*="text-[12px]"] { font-size: 0.75rem; }
html.a4m-comfort [class*="text-[12.5px]"] { font-size: 0.78125rem; }
}
@keyframes a4mProgress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@supports (animation-timeline: scroll()) {
.scroll-progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; transform-origin: left;
background: linear-gradient(90deg, var(--a4m-gold-dim), var(--a4m-gold) 60%, var(--a4m-gold-hi)); transform: scaleX(0);
animation: a4mProgress linear both; animation-timeline: scroll(root); pointer-events: none; }
}
.a4m-topbar { transition: background-color var(--dur-2) var(--e-out), box-shadow var(--dur-2) var(--e-out); }
.a4m-topbar.scrolled { background: color-mix(in srgb, var(--a4m-ink) 88%, transparent); box-shadow: var(--a4m-elev-2); }
.a4m-skip { position: fixed; top: 0; left: 12px; z-index: var(--a4m-layer-skip); transform: translateY(-140%); padding: 10px 18px; border-radius: 0 0 12px 12px; background: var(--a4m-ink); color: var(--a4m-gold); border: 1px solid var(--a4m-gold); border-top: 0; font-size: 12px; font-weight: 600; letter-spacing: .02em; transition: transform .15s ease-out; }
.a4m-skip:focus { transform: translateY(0); outline: none; box-shadow: 0 14px 34px -14px rgba(var(--a4m-shadow-rgb),var(--a4m-shadow-drop-o)); }
#main:focus { outline: none; }
@media (hover: hover) and (pointer: fine) {
.tilt-card { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--lift, 0px));
transition: transform var(--dur-1) linear, box-shadow .35s var(--e-out); }
.tilt-card:hover { --lift: -3px; will-change: transform; }
}
.stage-xfade .img-skel { background: none; animation: none; }
.stage-xfade .img-skel::after { content: none; }
.paystage { font-family: 'JetBrains Mono', monospace; font-size: 0.6875rem; letter-spacing: .08em; color: var(--a4m-gold); display: flex; align-items: center; gap: 8px; }
.paystage .stage-dot { width: 6px; height: 6px; border-radius: 999px; background: var(--a4m-gold); animation: blink 1.1s steps(1) infinite; }
::view-transition-group(nav-ink) { animation-duration: .3s; animation-timing-function: var(--e-out); }
@keyframes vtStepOut { to { opacity: 0; transform: translateX(-14px); } }
@keyframes vtStepIn { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
::view-transition-old(checkout-step) { animation: vtStepOut var(--dur-2) var(--e-exit) both; }
::view-transition-new(checkout-step) { animation: vtStepIn var(--dur-3) var(--e-out) both; }
@media (prefers-reduced-motion: reduce) {
.card-beam::after, .paystage .stage-dot { animation: none !important; }
.a4m-topbar { transition: none; }
.tilt-card, .tilt-card:hover { transform: none; }
::view-transition-old(checkout-step), ::view-transition-new(checkout-step), ::view-transition-group(nav-ink) { animation: none !important; }
}
p { text-wrap: pretty; }
.hit-24 { min-width: 24px; min-height: 24px; display: inline-flex; align-items: center; justify-content: center; }
@media (pointer: coarse) { .hit-24 { min-width: 44px; min-height: 44px; } }
.a4m-tick { display: block; width: 18px; height: 2px; background: var(--a4m-tick); transform-origin: left; }
.a4m-lockdim { opacity: var(--a4m-lockdim-o); }
.a4m-pop { margin: 0; padding: 10px 12px; max-width: 280px; border-radius: 12px; border: 1px solid var(--a4m-line); background: var(--surf-3); color: var(--a4m-cream); font-size: 12px; line-height: 1.45; box-shadow: var(--a4m-elev-2); }
@supports selector(:popover-open) {
.a4m-pop[popover] { opacity: 0; translate: 0 4px; transition: opacity var(--dur-1) var(--e-exit), translate var(--dur-1) var(--e-exit), overlay var(--dur-1) allow-discrete, display var(--dur-1) allow-discrete; }
.a4m-pop:popover-open { opacity: 1; translate: 0 0; transition-duration: .2s; transition-timing-function: var(--e-out); }
@starting-style { .a4m-pop:popover-open { opacity: 0; translate: 0 4px; } }
}
@supports (anchor-name: --a) {
.a4m-pop-anchored { inset: auto; width: max-content; max-width: min(280px, calc(100vw - 32px)); position-area: block-end center; margin-block-start: 6px; position-try-fallbacks: flip-block; }
}
@media (prefers-reduced-motion: reduce) {
.a4m-pop, .a4m-pop:popover-open { transition: none; }
}
.a4m-market { background: var(--a4m-ink); }
.a4m-market-shell { padding-top: clamp(24px, 4vw, 48px); }
.a4m-market-heading { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 24px; }
.a4m-market-heading > div { min-width: 0; }
.a4m-market-heading > button { flex-shrink: 0; }
.a4m-workspace-title { font-size: clamp(2rem, 1rem + 3vw, 3.5rem); line-height: 1.1; letter-spacing: -.045em; margin-top: 10px; }
.a4m-market-intro { max-width: 48rem; line-height: 1.6; margin-top: 12px; }
.a4m-market-search { width: 100%; }
.a4m-market-search > .card-lux { padding-top: 16px; padding-bottom: 16px; }
.a4m-market-toolbar { padding-top: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--a4m-line); }
.a4m-market-body, .a4m-market-results { min-width: 0; }
.a4m-market-results { container-type: inline-size; scroll-margin-top: calc(80px + var(--sat, 0px)); }
.a4m-market-selection:empty { display: none; }
@media (min-width: 1152px) {
.a4m-market-filter-footer { display: none; }
.a4m-market-body.has-filters { display: grid; grid-template-columns: 296px minmax(0, 1fr); gap: 24px; align-items: start; }
.a4m-market-filters { position: sticky; top: 80px; max-height: calc(100svh - 104px); overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
.a4m-market-filter-fields { grid-template-columns: minmax(0, 1fr); }
.a4m-market-filter-fields > * { grid-column: 1 / -1; }
.a4m-market-filter-fields .grid { grid-template-columns: minmax(0, 1fr); }
.a4m-market-filter-fields .grid > * { grid-column: 1 / -1; }
.a4m-market-body.has-filters .a4m-market-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@supports (container-type: inline-size) {
.a4m-market-grid { grid-template-columns: minmax(0, 1fr); }
@container (min-width: 480px) { .a4m-market-grid, .a4m-market-body.has-filters .a4m-market-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container (min-width: 840px) { .a4m-market-grid, .a4m-market-body.has-filters .a4m-market-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@container (min-width: 1240px) { .a4m-market-grid, .a4m-market-body.has-filters .a4m-market-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
}
@media (max-width: 639px) {
.a4m-market-heading { align-items: flex-start; gap: 12px; margin-bottom: 20px; }
.a4m-market-heading > button { font-size: 12px; padding: 8px 12px; }
.a4m-market-intro { font-size: 12px; }
}
.a4m-dealbar-actions { display: contents; }
@media (max-width: 1023px) {
.a4m-dealbar-layout { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; }
.a4m-dealbar-spacer { display: none; }
.a4m-dealbar-price { min-width: 0; overflow-wrap: anywhere; }
.a4m-dealbar-actions { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 0.5rem; }
.a4m-dealbar-actions-single { grid-template-columns: minmax(0, 1fr); }
.a4m-dealbar-actions > button { min-width: 0; white-space: normal; overflow-wrap: anywhere; }
}
.a4m-footer { padding-bottom: calc(5.5rem + var(--sab)); }
@media (min-width: 768px) { .a4m-footer-vehicle { padding-bottom: calc(9.5rem + var(--sab)); } }
@media (max-width: 767px) { .a4m-footer { padding-bottom: calc(12.5rem + var(--sab)); } }
.a4m-datefield { text-align: left; }
.a4m-datefield-empty { color: var(--a4m-mute); }
.a4m-dp-cell { width: 100%; min-height: 34px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; border: 1px solid transparent; color: var(--a4m-cream); transition: background-color var(--dur-1) var(--e-out), border-color var(--dur-1) var(--e-out); }
.a4m-dp-today { border-color: var(--a4m-gold-dim); font-weight: 600; }
.a4m-dp-on { background: var(--a4m-gold); color: var(--a4m-ink); font-weight: 600; }
.a4m-dp-off { color: var(--a4m-mute); }
.a4m-dp-nav { border-radius: 999px; padding: 0.25rem 0.6rem; border: 1px solid var(--a4m-line); color: var(--a4m-gold-text); }
@media (pointer: coarse) { .a4m-dp-cell { min-height: 44px; } }
@media (prefers-reduced-motion: reduce) { .a4m-dp-cell { transition: none; } }
.a4m-plate { background: color-mix(in srgb, var(--a4m-ink) 82%, transparent); color: var(--a4m-cream); }
.a4m-photo-ctl { border: 1px solid var(--a4m-gold); box-shadow: 0 0 0 1px var(--a4m-ink); }
@media (prefers-reduced-transparency: reduce) {
.glass, .a4m-topbar::before, .a4m-scrim, .a4m-plate {
background: var(--a4m-ink); backdrop-filter: none; -webkit-backdrop-filter: none;
}
}
@media (prefers-contrast: more) {
:root:not([data-theme="dark"]), :root[data-theme="dark"], .a4m-on-dark, .a4m-on-light {
--a4m-mute: var(--a4m-cream); --a4m-nav-quiet: var(--a4m-cream);
--a4m-line: var(--a4m-control-edge);
}
.a4m-topbar { border-bottom-color: var(--a4m-control-edge) !important; }
}
@media (forced-colors: active) {
*:focus-visible { outline-color: Highlight; }
.glass, .a4m-topbar::before, .a4m-scrim, .a4m-plate { background: Canvas; backdrop-filter: none; -webkit-backdrop-filter: none; }
.a4m-btn, .a4m-photo-ctl, .a4m-dp-nav { border: 1px solid ButtonText !important; box-shadow: none; }
.a4m-disabled:disabled, .a4m-field:disabled, .a4m-btn:disabled, .a4m-check:disabled, .a4m-dp-off { color: GrayText !important; opacity: 1 !important; border-color: GrayText !important; }
.a4m-select { appearance: auto; -webkit-appearance: auto; background-image: none; }
.a4m-dp-on { outline: 2px solid Highlight; outline-offset: -2px; }
.a4m-navlink[aria-current="page"] { text-decoration: underline; text-underline-offset: .3em; }
.a4m-range:focus-visible { outline: 2px solid Highlight; outline-offset: 2px; }
.a4m-range:disabled { forced-color-adjust: none; opacity: 1; accent-color: GrayText; }
.a4m-range:disabled::-webkit-slider-runnable-track { background: Canvas; border-color: GrayText; }
.a4m-range:disabled::-webkit-slider-thumb { background: GrayText; border-color: Canvas; box-shadow: none; }
.a4m-range:disabled::-moz-range-track { background: Canvas; border-color: GrayText; }
.a4m-range:disabled::-moz-range-progress { background: GrayText; }
.a4m-range:disabled::-moz-range-thumb { background: GrayText; border-color: Canvas; box-shadow: none; }
}
@media screen {
[data-operator-root][data-density="compact"] .a4m-density-card:not([role="dialog"] *):not(.a4m-sheet-print *) { padding: .75rem; }
[data-operator-root][data-density="compact"] .a4m-density-heading:not([role="dialog"] *) { margin-bottom: .5rem; }
[data-operator-root][data-density="compact"] .a4m-density-layout { gap: 1rem; }
[data-operator-root][data-density="compact"] .a4m-density-table td { padding-top: .25rem; padding-bottom: .25rem; height: 1.5rem; }
}