:root {
--brand-lapis-deep: #152e6e;
--brand-lapis: #1b3a8f;
--brand-gold: #c9a24b;
--brand-gold-soft: #dcc480;
--brand-ink: #1a2440;
--brand-cream: #ebe7dc;
--brand-lapis-black: #0b1428;

--space-4: 4px; 
--space-8: 8px; 
--space-12: 12px; 
--space-16: 16px; 
--space-20: 20px; 
--space-24: 24px; 
--space-32: 32px; 
--space-40: 40px; 
--space-48: 48px; 
--space-64: 64px; 
--space-96: 96px; 
--space-128: 128px; 
--row-plain: 56px; 
--row-thumb: 96px; 
--row-slot: 64px; 

--radius-inner: 6px; 
--radius-control: 10px; 
--radius-card: 16px; 
--radius-sheet: 24px; 
--radius-full: 9999px; 

--hit-min: 44px; 
--btn-primary-phone: 52px;
--btn-primary-desk: 48px; 
--btn-ghost-phone: 48px;
--btn-ghost-desk: 44px;
--input-phone: 52px;
--input-desk: 48px;
--chip-visible: 40px; 
--slot-width: 64px;
--slot-height: 44px;
--tab-height: 56px;
--tab-min-width: 72px;
--code-box: 48px; 
--thumb: 80px;
--mark-min: 24px; 
--mark-full-min: 48px; 

--duration-quick: 120ms;
--duration-base: 200ms;
--duration-slow: 320ms;
--duration-sheet: 360ms;
--ease-enter: cubic-bezier(0.2, 0, 0, 1);
--ease-exit: cubic-bezier(0.4, 0, 1, 1);
--ease-move: cubic-bezier(0.4, 0, 0.2, 1);

--layer-page: 0;
--layer-header: 100;
--layer-bottombar: 110;
--layer-float: 120;
--layer-dropdown: 200;
--layer-sheet: 300;
--layer-player: 350;
--layer-dialog: 400;
--layer-toast: 500;

--font-sans: Vazirmatn, "Vazirmatn Fallback", "Vazirmatn Fallback Naskh", Tahoma, sans-serif;

--type-display-size: clamp(26px, 19.1px + 2.286vw, 52px); 
--type-display-leading: 1.12;
--type-display-weight: 800;
--type-h1-size: clamp(30px, 25.33px + 1.296vw, 44px);
--type-h1-leading: 1.25;
--type-h1-weight: 700;
--type-h2-size: clamp(24px, 21.33px + 0.741vw, 32px);
--type-h2-leading: 1.3;
--type-h2-weight: 700;
--type-h3-size: clamp(18px, 17.33px + 0.185vw, 20px);
--type-h3-leading: 1.4;
--type-h3-weight: 600;
--type-lead-size: clamp(17px, 16px + 0.278vw, 20px);
--type-lead-leading: 1.7;
--type-lead-weight: 400;
--type-body-size: 17px; 
--type-body-app-size: 16px; 
--type-body-leading: 1.8;
--type-body-weight: 400;
--type-ui-size: 15px; 
--type-ui-leading: 1.4;
--type-ui-weight: 500;
--type-small-size: 14px; 
--type-small-leading: 1.6;
--type-small-weight: 400;
--type-caption-size: 13px; 
--type-caption-leading: 1.4;
--type-caption-weight: 500;
--type-numeral-size: clamp(24px, 21.33px + 0.741vw, 32px); 
--type-numeral-leading: 1.2;
--type-numeral-weight: 600;
--type-wordmark-size: 25px; 
--type-wordmark-leading: 1;
--type-wordmark-weight: 600;
--type-wordmark-tracking: 4px;

--ground-light:
radial-gradient(120% 90% at 50% 0%, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0) 62%),
linear-gradient(to top, rgba(11, 20, 40, 0.42), rgba(11, 20, 40, 0) 58%);
}
:root,
[data-theme="light"] {
color-scheme: light;

--surface-ground: #ebe7dc; 
--surface-card: #ffffff; 
--surface-raised: #ffffff; 
--surface-recessed: #f1ece2; 
--surface-sunken: #f1ece2; 
--surface-hover: #f1ece2; 

--text-ink: #1a2440; 
--text-heading: #152e6e; 
--text-muted: #5d667b; 
--text-on-accent: #ffffff; 
--text-on-gold: #1a2440; 
--text-gold: #7f6420; 

--border-control: #767d92; 
--border-hairline: #dad4c7; 

--accent: #1b3a8f; 
--accent-hover: #16307a; 
--accent-pressed: #122760; 
--accent-tint: #e1e8f7; 
--focus-ring: var(--accent); 
--selected-bg: var(--accent-tint);
--selected-edge: var(--accent);

--gold-fill: #c9a24b; 
--gold-selected-bg: #f5ecd2; 
--gold-selected-border: #7f6420; 

--status-success: #1a6b3c; 
--status-success-tint: #e2f0e6;
--status-danger: #b42318; 
--status-danger-tint: #fbe6e3;

--disabled-fill: #e3e5eb;
--disabled-ink: #666d80; 

--mark-arch: #152e6e; 
--mark-star: #c9a24b;
--mark-single: var(--brand-lapis); 

--overlay-scrim: rgba(11, 20, 40, 0.48); 
--hero-scrim: rgba(11, 20, 40, 0.64); 
--video-band: rgba(11, 20, 40, 0.78);
--video-press: rgba(255, 255, 255, 0.24);
--video-hover: rgba(255, 255, 255, 0.16);
--video-track: rgba(255, 255, 255, 0.42);
--text-on-scrim: #ffffff; 
--pattern-ink: rgba(21, 46, 110, 0.04); 

--shadow-float: 0 1px 2px rgba(11, 20, 40, 0.1), 0 6px 16px rgba(11, 20, 40, 0.12);
--shadow-overlay: 0 2px 6px rgba(11, 20, 40, 0.1), 0 18px 48px rgba(11, 20, 40, 0.2);
--shadow-elev:
0 1px 2px rgba(11, 20, 40, 0.06), 0 12px 32px rgba(11, 20, 40, 0.1),
0 40px 96px rgba(11, 20, 40, 0.16);
}
[data-theme="dark"] {
color-scheme: dark;
--surface-ground: #0f1218;
--surface-card: #1a1f29; 
--surface-raised: #262c38; 
--surface-recessed: #0f1218; 
--surface-sunken: #0f1218; 
--surface-hover: #232936; 
--text-ink: #ece8df; 
--text-heading: #f3f0e8; 
--text-muted: #a3aabb; 
--text-on-accent: #0b1428; 
--text-on-gold: #0b1428; 
--text-gold: #dcc480; 
--border-control: #7f889c; 
--border-hairline: #2e3441;
--accent: #9db4f2; 
--accent-hover: #b3c6f6;
--accent-pressed: #88a2ea;
--accent-tint: #1f2a45;
--focus-ring: var(--accent);
--selected-bg: var(--accent-tint);
--selected-edge: var(--accent);
--gold-fill: #dcc480;
--gold-selected-bg: #3a3322;
--gold-selected-border: #dcc480;
--status-success: #6fcb91;
--status-success-tint: #16291e;
--status-danger: #ff8f85;
--status-danger-tint: #33191a;
--disabled-fill: #262c38;
--disabled-ink: #8e96aa; 
--mark-arch: #ffffff;
--mark-star: #dcc480;
--mark-single: #ffffff; 
--overlay-scrim: rgba(0, 0, 0, 0.6);
--hero-scrim: rgba(11, 20, 40, 0.64);
--text-on-scrim: #ffffff;
--pattern-ink: rgba(220, 196, 128, 0.04);
--shadow-float: none; 
--shadow-overlay: none; 
--shadow-elev: 0 0 0 1px var(--border-hairline), 0 24px 72px rgba(0, 0, 0, 0.55);
}
:root {
--header-height: 56px;
--content-max: 30rem; 

--on-brand: #ffffff;

--text-on-bg: #f8f5f0; 
--text-on-bg-muted: color-mix(in srgb, var(--text-on-bg) 90%, transparent);
--text-shadow-on-bg: 0 1px 2px rgba(0, 0, 0, 0.72), 0 2px 10px rgba(0, 0, 0, 0.55);
--icon-shadow-on-bg: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.55));
--border-on-bg: color-mix(in srgb, var(--text-on-bg) 68%, transparent);
--scrim-chip: color-mix(in srgb, #000 58%, transparent);

--plan-contrast-dark: #0b1428;
--plan-contrast-light: #ffffff;

--table-1: #1b3a8f; 
--table-2: #142b6b; 
--table-3: #0f2054; 
--table-bloom: #24499f;
--gradient-table:
radial-gradient(
88% 120% at var(--table-light-x, 78%) -10%,
var(--table-bloom) 0%,
transparent 62%
),
linear-gradient(155deg, var(--table-1) 0%, var(--table-2) 52%, var(--table-3) 100%);
--table-grid: color-mix(in srgb, var(--on-brand) 7%, transparent);
--table-grid-major: color-mix(in srgb, var(--on-brand) 13%, transparent);
--table-edge: #091430;
}
:root,
[data-theme="light"] {
--text-subtle: #8a8fa0;

--border-strong: #cdd3e2; 
--brand-strong: #152e6e; 
--brand-soft-border: #9db1e0; 
--brand-secondary: #2e6fb0; 
--success-border: #9ccbb4;
--accent-bg: #fbf6e9;
--accent-border: #ead9a8;

--outline-soft: #6580bd;

--brand-lockup-tile: #152e6e;
--brand-lockup-tile-stroke: transparent;
--brand-lockup-arch: #ffffff;
--brand-lockup-star: #dcc480;
--brand-lockup-ink: #152e6e;
--brand-lockup-latin: #c9a24b;

--hero-ink: #1b3a8f; 
--hero-plate: #f7f1e3; 
--hero-fill: #dce4f2; 
--hero-lite: #ffffff; 
--hero-gold: #e8d3a0; 

--gradient-hero: linear-gradient(155deg, #1b3a8f, #152e6e);

--edge-light: rgba(255, 255, 255, 0.9);
--backdrop-blur: blur(2px);

--photo-scrim-edge: rgba(8, 12, 24, 0.8);
--photo-scrim-mid: rgba(8, 12, 24, 0.64);

--shadow-sm: 0 1px 2px rgba(21, 40, 90, 0.06), 0 1px 3px rgba(21, 40, 90, 0.08);
--shadow-md: 0 4px 12px rgba(21, 40, 90, 0.1);

--spot-available: #2e7d5b;
--spot-available-fill: rgba(46, 125, 91, 0.26);
--spot-locked: #9db1e0; 
--spot-locked-fill: rgba(157, 177, 224, 0.3);
--spot-booked: #1b3a8f; 
--spot-booked-fill: rgba(27, 58, 143, 0.3);
--spot-unavailable: #6c7488; 
--spot-unavailable-fill: rgba(108, 116, 136, 0.26);
--spot-inactive: #8a8fa0; 
--spot-inactive-fill: rgba(138, 143, 160, 0.3);
--spot-contact: #9a7c30;
--spot-contact-fill: rgba(154, 124, 48, 0.24);
--spot-selected: #c9a24b; 
--spot-selected-fill: rgba(201, 162, 75, 0.34);
--spot-fallback: #e6e8f0; 
--zone-seating: #2e6fb0;
--zone-standing: #2e7d5b;
--zone-vip: #c9a24b;
--zone-bar: #963b58;
--zone-stage: #1b3a8f;
}
[data-theme="dark"] {
--text-subtle: #8a93ac;
--border-strong: #3a4670;
--brand-strong: var(--accent);
--brand-soft-border: #34508c;
--brand-secondary: #3e86c9;
--success-border: #2e6b4c;
--accent-bg: #241c12;
--accent-border: #5a4a24;
--outline-soft: #5c79b6;

--brand-lockup-tile: rgba(255, 255, 255, 0.08);
--brand-lockup-tile-stroke: rgba(201, 162, 75, 0.5);
--brand-lockup-arch: #ffffff;
--brand-lockup-star: #dcc480;
--brand-lockup-ink: #ffffff;
--brand-lockup-latin: #dcc480;

--hero-ink: #16307a;
--hero-plate: #ded7c6;
--hero-fill: #bcc8de;
--hero-lite: #efeade;
--hero-gold: #cdb079;
--gradient-hero: linear-gradient(155deg, #13245a, #0a1126);

--edge-light: rgba(255, 255, 255, 0.07);
--backdrop-blur: blur(2px);

--photo-scrim-edge: rgba(0, 0, 0, 0.84);
--photo-scrim-mid: rgba(0, 0, 0, 0.66);
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
--shadow-md: 0 6px 18px rgba(0, 0, 0, 0.55);

--spot-available: #5fb98c;
--spot-available-fill: rgba(95, 185, 140, 0.34);
--spot-locked: #34508c;
--spot-locked-fill: rgba(52, 80, 140, 0.36);
--spot-booked: #3457c5;
--spot-booked-fill: rgba(52, 87, 197, 0.34);
--spot-unavailable: #9aa6c0;
--spot-unavailable-fill: rgba(154, 166, 192, 0.32);
--spot-inactive: #8a93ac;
--spot-inactive-fill: rgba(138, 147, 172, 0.3);
--spot-contact: #d8b461;
--spot-contact-fill: rgba(216, 180, 97, 0.28);
--spot-selected: #c9a24b; 
--spot-selected-fill: rgba(201, 162, 75, 0.42);
--spot-fallback: #2b3556;
--zone-seating: #3e86c9;
--zone-standing: #5fb98c;
--zone-vip: #c9a24b;
--zone-bar: #c4688a;
--zone-stage: #3457c5;
}
:root,
[data-theme] {
--bg: var(--surface-ground);
--bg-elevated: var(--surface-raised);
--surface: var(--surface-card);
--surface-2: var(--surface-recessed);
--text: var(--text-ink);
--border: var(--border-hairline);
--border-subtle: var(--border-hairline); 
--brand: var(--accent);
--brand-soft: var(--accent-tint);
--link: var(--accent);
--link-strong: var(--accent-hover);
--danger: var(--status-danger);
--success: var(--status-success);
--success-text: var(--status-success);
--success-bg: var(--status-success-tint);
--overlay: var(--overlay-scrim);
--shadow-lg: var(--shadow-overlay); 
}
:root {
--radius-sm: var(--radius-inner);
--radius-md: var(--radius-control);
--radius-lg: var(--radius-card);
--radius-xl: var(--radius-sheet);
--z-base: var(--layer-page);
--z-background: -1; 
--z-header: var(--layer-header);
--z-overlay: var(--layer-dropdown); 
--z-sheet: var(--layer-sheet);
--z-music: var(--layer-player);
--z-modal: var(--layer-dialog);
--z-toast: var(--layer-toast);

--transition-fast: var(--duration-quick) ease;
--transition-base: var(--duration-base) ease;
--transition-slow: var(--duration-slow) ease;

--text-xs: 13px; 
--text-sm: 14px; 
--text-base: 16px; 
--text-lg: 18px; 
--text-xl: 22px; 
--text-2xl: 28px; 
--text-3xl: 36px; 
--leading-tight: 1.2; 
--leading-normal: var(--type-body-leading);
--weight-regular: 400;
--weight-medium: 500;
--weight-semibold: 600;
--weight-bold: 700;
--weight-extrabold: 800; 
--tracking-wide: 0; 
}
:root:not([data-theme="dark"]) [data-app-bg="empty"] {
--text-on-bg: var(--text-heading); 
--text-on-bg-muted: color-mix(in srgb, var(--text-muted) 70%, var(--text));
--border-on-bg: var(--border-control);
--text-shadow-on-bg: none; 
--icon-shadow-on-bg: none;
}
[lang|="en"] {
--type-body-leading: 1.6; 
--leading-normal: var(--type-body-leading);
--tracking-wide: 0.02em;
}
[lang|="fa"],
[lang|="ar"] {
--type-body-leading: 1.8;
--leading-normal: var(--type-body-leading);
--tracking-wide: 0; 
}
[data-venue-hue],
[data-venue-hue] [data-theme="light"] {
--accent: var(--venue-accent);
--accent-hover: var(--venue-accent-hover);
--accent-pressed: var(--venue-accent-pressed);
--accent-tint: var(--venue-accent-tint);
--focus-ring: var(--venue-accent);
--selected-bg: var(--venue-accent-tint);
--selected-edge: var(--venue-accent);
}
[data-venue-hue][data-theme="dark"],
[data-venue-hue] [data-theme="dark"] {
--accent: var(--venue-accent-dark);
--accent-hover: var(--venue-accent-dark-hover);
--accent-pressed: var(--venue-accent-dark-pressed);
--accent-tint: var(--venue-accent-dark-tint);
--focus-ring: var(--venue-accent-dark);
--selected-bg: var(--venue-accent-dark-tint);
--selected-edge: var(--venue-accent-dark);
}
[data-venue-hue][data-theme="dark"] .vp-ground,
[data-venue-hue] [data-theme="dark"] .vp-ground {
background: var(--venue-ground-dark);
}
*,
*::before,
*::after {
box-sizing: border-box;
}
* {
margin: 0;
}
html,
body,
#root {
height: 100%;
}
body {
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
img,
picture,
svg,
video,
canvas {
display: block;
max-width: 100%;
}
[hidden]:not([hidden='until-found']) {
display: none !important;
}
input,
button,
textarea,
select {
font: inherit;
color: inherit;
}
a,
button,
input,
select,
textarea,
label {
touch-action: manipulation;
}
button {
background: none;
border: none;
cursor: pointer;
padding: 0;
}
a {
color: inherit;
text-decoration: none;
}
ul,
ol {
list-style: none;
padding: 0;
}
p,
h1,
h2,
h3,
h4 {
overflow-wrap: break-word;
}
:focus-visible {
outline: 2px solid var(--brand);
outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
}
}
@font-face {
font-family: "Vazirmatn";
font-style: normal;
font-weight: 400 800;
font-display: swap;
src: url("/fonts/vazirmatn-variable.woff2") format("woff2-variations"),
url("/fonts/vazirmatn-variable.woff2") format("woff2");
}
@font-face {
font-family: "Vazirmatn Fallback";
src: local("Noto Sans Arabic UI"), local("NotoSansArabicUI-Regular"), local("Noto Sans Arabic"), local("NotoSansArabic-Regular");
size-adjust: 94.3%;
ascent-override: 108.7%;
descent-override: 57%;
line-gap-override: 0%;
}
@font-face {
font-family: "Vazirmatn Fallback Naskh";
src: local("Noto Naskh Arabic UI"), local("NotoNaskhArabicUI-Regular"), local("Noto Naskh Arabic"), local("NotoNaskhArabic-Regular");
size-adjust: 108%;
ascent-override: 94.9%;
descent-override: 49.7%;
line-gap-override: 0%;
}
.visually-hidden {
position: absolute;
inline-size: 1px;
block-size: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
.navlink {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
min-block-size: var(--hit-min);
padding-inline: var(--space-12);
border-radius: var(--radius-control);
font-size: var(--type-ui-size);
line-height: var(--type-ui-leading);
font-weight: var(--type-ui-weight);
white-space: nowrap;
text-decoration: none;
}
a.navlink:is(:link, :visited, :hover, :focus, :active) {
color: var(--text-ink);
text-decoration: none;
}
.navlink::before {
content: '';
position: absolute;
inset-block: 0;
inset-inline: min(0px, calc((100% - var(--hit-min)) / 2));
}
.navlink__text {
position: relative;
}
.navlink__text::after {
content: '';
position: absolute;
inset-inline: 0;
inset-block-end: calc(6px - (var(--hit-min) - 1lh) / 2);
block-size: 2px;
border-radius: 1px;
background: transparent;
}
@media (hover: hover) {
a.navlink:hover {
color: var(--text-heading);
}
a.navlink:hover .navlink__text::after {
background: var(--border-control);
}
}
a.navlink.is-current:is(:link, :visited, :hover, :focus, :active),
a.navlink.is-current {
color: var(--text-heading);
font-weight: var(--weight-bold);
}
.navlink.is-current .navlink__text::after,
.navlink.is-current:hover .navlink__text::after,
.navlink:active .navlink__text::after {
background: var(--accent);
}
.navlink:focus-visible {
outline: 2px solid var(--focus-ring);
outline-offset: 2px;
}
.navlink--footer,
.navlink--crumb {
padding-inline: 0;
}
.navlink--crumb {
font-size: var(--type-small-size);
line-height: var(--type-small-leading);
}
.navlink--crumb .navlink__text::after {
inset-block-end: calc(10px - (var(--hit-min) - 1lh) / 2);
block-size: 1px;
background: var(--border-control);
}
@media (hover: hover) {
a.navlink--crumb:hover .navlink__text::after {
block-size: 2px;
background: var(--text-heading);
}
}
.tile {
display: flex;
flex-direction: column;
gap: var(--space-4);
box-sizing: border-box;
min-block-size: 96px;
padding: var(--space-16);
border-radius: var(--radius-card);
background: var(--surface-card);
text-decoration: none;
}
a.tile:is(:link, :visited, :hover, :focus, :active) {
color: var(--text-ink);
text-decoration: none;
}
.tile__title {
font-size: var(--type-ui-size);
line-height: var(--type-ui-leading);
font-weight: var(--weight-semibold);
color: var(--text-heading);
overflow-wrap: break-word;
word-break: normal;
hyphens: manual;
text-wrap: pretty;
}
.tile__sub {
font-size: var(--type-caption-size);
line-height: var(--type-caption-leading);
font-weight: var(--type-caption-weight);
color: var(--text-muted);
overflow-wrap: break-word;
word-break: normal;
}
.tile__icon {
display: block;
flex: none;
inline-size: 32px;
block-size: 32px;
margin-block-end: var(--space-4);
}
.tile__icon > img {
display: block;
inline-size: 100%;
block-size: 100%;
object-fit: contain;
}
.tile__icon--line {
display: flex;
align-items: center;
justify-content: center;
color: var(--accent);
}
.tile__mask {
display: block;
inline-size: 28px;
block-size: 28px;
background-color: currentColor;
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
}
@media (hover: hover) {
.tile:hover {
box-shadow: inset 0 0 0 1.5px var(--border-control);
}
}
.tile:active {
background: var(--accent-tint);
box-shadow: inset 0 0 0 1.5px var(--border-control);
}
.tile:focus-visible {
outline: 2px solid var(--focus-ring);
outline-offset: 2px;
}
.ctl {
--ctl-press-drop: 1px;
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-8);
box-sizing: border-box;
margin: 0;
border: 0;
border-radius: var(--radius-control);
background: none;
color: inherit;
font: inherit;
font-size: var(--type-ui-size);
line-height: var(--type-ui-leading);
font-weight: var(--type-ui-weight);
min-block-size: var(--hit-min);
min-inline-size: var(--hit-min);
cursor: pointer;
user-select: none;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
text-decoration: none;
transition:
transform var(--duration-quick) var(--ease-enter),
opacity var(--duration-quick) var(--ease-enter);
}
.ctl:focus {
outline: none;
}
.ctl:focus-visible {
outline: 2px solid var(--focus-ring);
outline-offset: 2px;
}
.ctl:active:not(:disabled):not([aria-disabled='true']):not([aria-busy='true']) {
transform: translateY(var(--ctl-press-drop));
}
.ctl:disabled,
.ctl[aria-disabled='true'] {
cursor: not-allowed;
}
.ctl[aria-busy='true'] {
cursor: progress;
}
.ctl-btn[aria-busy='true'] > .ctl-label {
visibility: hidden;
}
.ctl-btn > .ctl-spinner {
position: absolute;
inset: 0;
margin: auto;
color: inherit;
}
.ctl-btn:not([aria-busy='true']) > .ctl-spinner {
display: none;
}
.ctl-label {
display: inline-flex;
align-items: center;
gap: var(--space-8);
}
.ctl-label > .ctl-icon:lang(fa),
.ctl-label > .ctl-icon:lang(ar) {
translate: 0 1px;
}
.ctl-label > .ctl-icon--pin:lang(fa),
.ctl-label > .ctl-icon--pin:lang(ar) {
translate: 0 0.5px;
}
.ctl-label > .ctl-icon--pin:lang(en) {
translate: 0 -0.5px;
}
.ctl-reason {
display: block;
margin-block-start: var(--space-8);
font-size: var(--type-small-size);
line-height: var(--type-small-leading);
color: var(--text-muted);
}
@media (prefers-reduced-motion: reduce) {
.ctl {
--ctl-press-drop: 0px;
transition: opacity var(--duration-quick) linear;
}
}
.ctl-icon {
flex: none;
}
.ctl-icon--mirror:dir(rtl) {
transform: scaleX(-1);
}
@supports not selector(:dir(rtl)) {
[dir='rtl'] .ctl-icon--mirror {
transform: scaleX(-1);
}
}
.ctl-btn {
padding-inline: var(--space-20);
white-space: nowrap;
}
.ctl-btn--primary {
min-block-size: var(--btn-primary-phone);
background: var(--accent);
color: var(--text-on-accent);
}
.ctl-btn--ghost {
min-block-size: var(--btn-ghost-phone);
background: transparent;
color: var(--accent);
box-shadow: inset 0 0 0 1px var(--border-control);
}
.ctl-btn--block {
display: flex;
inline-size: 100%;
}
.ctl-btn--wrap {
white-space: normal;
text-align: center;
padding-block: var(--space-12);
}
.ctl-btn--wrap > .ctl-label {
min-inline-size: 0;
}
.ctl-btn-wrap {
display: inline-block;
}
.ctl-btn-wrap--block {
display: block;
}
@media (max-width: 479px) {
.ctl-btn--primary {
display: flex;
inline-size: 100%;
}
}
@media (hover: hover) {
.ctl-btn--primary:hover:not(:disabled):not([aria-busy='true']) {
background: var(--accent-hover);
}
.ctl-btn--ghost:hover:not(:disabled):not([aria-busy='true']) {
background: var(--accent-tint);
}
}
.ctl-btn--primary:active:not(:disabled):not([aria-busy='true']) {
background: var(--accent-pressed);
}
.ctl-btn--ghost:active:not(:disabled):not([aria-busy='true']) {
background: var(--accent-tint);
box-shadow: inset 0 0 0 2px var(--accent);
}
.ctl-btn--primary:disabled {
background: var(--disabled-fill);
color: var(--disabled-ink);
}
.ctl-btn--ghost:disabled {
background: transparent;
color: var(--disabled-ink);
box-shadow: inset 0 0 0 1px var(--disabled-ink);
}
a.ctl-btn--primary:is(:link, :visited, :hover, :focus, :active) {
color: var(--text-on-accent);
}
a.ctl-btn--ghost:is(:link, :visited, :hover, :focus, :active) {
color: var(--accent);
}
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
.ctl-btn--primary {
min-block-size: var(--btn-primary-desk);
}
.ctl-btn--ghost {
min-block-size: var(--btn-ghost-desk);
}
.ctl-btn--wrap {
padding-block: 10px;
}
}
.ctl-icon-btn {
inline-size: var(--hit-min);
block-size: var(--hit-min);
padding: 0;
color: var(--text-ink);
list-style: none;
}
.ctl-icon-btn::-webkit-details-marker {
display: none;
}
.ctl-icon-btn--outline {
box-shadow: inset 0 0 0 1px var(--border-control);
}
@media (hover: hover) {
.ctl-icon-btn:hover:not(:disabled) {
background: var(--accent-tint);
color: var(--accent);
}
}
.ctl-icon-btn:active:not(:disabled) {
background: var(--accent-tint);
color: var(--accent);
}
a.ctl-icon-btn:is(:link, :visited, :focus) {
color: var(--text-ink);
}
.ctl-badge {
display: inline-flex;
align-items: center;
gap: var(--space-4);
box-sizing: border-box;
min-block-size: 28px;
max-inline-size: 100%;
padding: var(--space-4) var(--space-12);
border-radius: var(--radius-full);
font-size: var(--type-caption-size);
font-weight: var(--weight-bold);
line-height: 1.25;
text-wrap: balance;
}
.ctl-badge--success {
background: var(--status-success-tint);
color: var(--status-success);
}
.ctl-badge--success,
.ctl-badge--danger {
font-size: 14px;
}
.ctl-badge > .ctl-icon:lang(en) {
translate: 0 -1px;
}
.ctl-badge--neutral {
background: var(--surface-recessed);
color: var(--text-muted);
box-shadow: inset 0 0 0 1px var(--border-hairline);
}
.ctl-chip {
min-block-size: var(--hit-min);
max-inline-size: 100%;
padding-inline: 0;
background: transparent;
border-radius: var(--radius-full);
}
.ctl-chip:focus-visible {
outline-offset: 0;
}
.ctl-chip__face {
position: relative;
display: inline-flex;
align-items: center;
gap: var(--space-4);
box-sizing: border-box;
min-block-size: var(--chip-visible);
max-inline-size: 100%;
padding-inline: var(--space-16);
padding-block: 7px;
border-radius: calc(var(--chip-visible) / 2);
text-align: start;
background: var(--surface-card);
color: var(--text-ink);
box-shadow: inset 0 0 0 1px var(--border-control);
}
.ctl-chip__check {
color: var(--selected-edge);
}
.ctl-chip:not(.is-selected) .ctl-chip__check {
display: none;
}
.ctl-chip__check:lang(en) {
translate: 0 -0.75px;
}
.ctl-chip.is-selected .ctl-chip__face {
padding-inline-start: var(--space-12);
background: var(--selected-bg);
box-shadow: inset 0 0 0 2px var(--selected-edge);
font-weight: var(--weight-semibold);
}
@media (hover: hover) {
.ctl-chip:hover:not(:disabled):not(.is-selected) .ctl-chip__face {
background: var(--accent-tint);
}
}
.ctl-chip:active:not(:disabled) .ctl-chip__face {
box-shadow: inset 0 0 0 2px var(--border-control);
}
.ctl-chip.is-selected:active:not(:disabled) .ctl-chip__face {
box-shadow: inset 0 0 0 3px var(--selected-edge);
}
.ctl-slot {
inline-size: auto;
block-size: var(--slot-height);
padding: 0 var(--space-4);
font-size: var(--type-ui-size);
line-height: var(--type-ui-leading);
font-weight: var(--weight-semibold);
font-variant-numeric: tabular-nums;
background: var(--surface-card);
color: var(--text-ink);
box-shadow: inset 0 0 0 1px var(--border-control);
}
a.ctl-slot:is(:link, :visited, :hover, :focus, :active) {
color: var(--text-ink);
}
@media (hover: hover) {
.ctl-slot:hover:not([aria-busy='true']) {
background: var(--accent-tint);
}
}
.ctl-slot:active:not([aria-busy='true']) {
box-shadow: inset 0 0 0 2px var(--accent);
}
.ctl-slot.is-selected {
background: var(--selected-bg);
box-shadow: inset 0 0 0 2px var(--selected-edge);
font-weight: var(--weight-extrabold);
}
.ctl-slot.is-unavailable {
background: transparent;
color: var(--disabled-ink);
box-shadow: inset 0 0 0 1px var(--border-hairline);
cursor: not-allowed;
}
.ctl-slot.is-unavailable > .ctl-label {
text-decoration: line-through;
text-decoration-thickness: 1.5px;
}
.ctl-slot[aria-busy='true'] > .ctl-label {
visibility: hidden;
}
.ctl-slot > .ctl-spinner {
position: absolute;
inset: 0;
margin: auto;
}
.ctl-slot:not([aria-busy='true']) > .ctl-spinner {
display: none;
}
.ctl-spinner {
display: inline-block;
flex: none;
box-sizing: border-box;
inline-size: 20px;
block-size: 20px;
border: 2px solid currentColor;
border-inline-end-color: transparent;
border-radius: 50%;
color: var(--text-muted);
animation: ctl-spin 800ms linear infinite;
}
@keyframes ctl-spin {
to {
transform: rotate(360deg);
}
}
@keyframes ctl-pulse {
50% {
opacity: 0.35;
}
}
@media (prefers-reduced-motion: reduce) {
.ctl-spinner {
border-inline-end-color: currentColor;
animation-name: ctl-pulse;
animation-duration: 900ms !important;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite !important;
}
}
.ctl-row {
--ctl-press-drop: 0px;
display: flex;
justify-content: flex-start;
gap: var(--space-12);
inline-size: 100%;
min-block-size: var(--row-plain);
padding-block: var(--space-8);
padding-inline: var(--space-16);
border-radius: 0;
text-align: start;
background: var(--surface-card);
color: var(--text-ink);
}
a.ctl-row:is(:link, :visited, :hover, :focus, :active) {
color: var(--text-ink);
}
.ctl-row:focus-visible {
outline-offset: -2px;
}
.ctl-row__text {
display: flex;
flex: 1;
flex-direction: column;
min-inline-size: 0;
}
.ctl-row__title {
font-size: 16px;
line-height: 1.5;
font-weight: var(--weight-semibold);
}
.ctl-row__sub {
overflow: hidden;
font-size: var(--type-small-size);
line-height: var(--type-small-leading);
font-weight: var(--weight-medium);
color: var(--text-muted);
white-space: nowrap;
text-overflow: ellipsis;
}
.ctl-row__trail {
display: flex;
flex: none;
align-items: center;
color: var(--text-muted);
}
.ctl-row + .ctl-row {
box-shadow: inset 0 1px 0 var(--border-hairline);
}
@media (hover: hover) {
.ctl-row:hover {
background: var(--surface-hover);
}
}
.ctl-row:active {
background: var(--surface-hover);
}
.ctl-ornament {
display: flex;
align-items: center;
gap: var(--space-12);
color: var(--border-control);
}
.ctl-ornament::before,
.ctl-ornament::after {
content: '';
flex: 1;
block-size: 1px;
background: var(--border-hairline);
}
.ctl-ornament > svg {
flex: none;
fill: currentColor;
}
.ctl-credit {
display: inline-flex;
align-items: center;
gap: var(--space-12);
box-sizing: border-box;
min-block-size: 48px;
padding-block: var(--space-12);
font-size: var(--type-caption-size);
font-weight: var(--type-caption-weight);
color: var(--text-muted);
text-decoration: none;
}
a.ctl-credit:is(:link, :visited, :hover, :focus, :active) {
color: var(--text-muted);
}
.ctl-credit:focus-visible {
outline: 2px solid var(--focus-ring);
outline-offset: 2px;
border-radius: var(--radius-inner);
}
.ctl-mark {
display: inline-block;
flex: none;
}
.ctl-mark__ink {
stroke: var(--mark-single);
}
.ctl-mark__star {
fill: var(--mark-single);
}
.vp-body {
font-family: var(--font-sans);
background: var(--surface-ground);
color: var(--text-ink);
}
:root:has(> body.vp-body) {
scroll-padding-block-start: var(--space-16);
}
.vp {
--g: 16px;
--hero-h: clamp(164px, max(184px + 0.8 * (100vw - 360px), 184px + 0.5 * (100vw - 360px)), 208px);
display: flex;
flex-direction: column;
min-block-size: 100dvh;
max-inline-size: 1440px;
margin-inline: auto;
font-size: 16px;
line-height: 1.8;
text-align: start;
}
.vp:lang(en) {
line-height: 1.6;
}
.vp {
padding-left: max(0px, env(safe-area-inset-left) - var(--g));
padding-right: max(0px, env(safe-area-inset-right) - var(--g));
}
@media (min-width: 390px) {
.vp {
--g: 20px;
}
}
@media (min-width: 744px) {
.vp {
--g: max(24px, 3.125vw); 
--col-gap: max(24px, 3.125vw);
--side: max(320px, 224px + 12.5vw); 
--hero-photo: max(400px, 280px + 15.625vw); 
}
}
@media (min-width: 1024px) {
.vp {
--g: clamp(32px, 3.84615vw - 7.3846px, 48px); 
--col-gap: clamp(32px, 7.6923vw - 46.769px, 64px); 
--side: clamp(352px, 194.4615px + 15.3846vw, 416px); 
--hero-photo: clamp(440px, 243.077px + 19.2308vw, 520px); 
}
}
.vp-tnum {
font-variant-numeric: tabular-nums;
}
.vp-muted {
margin: 0;
font-size: var(--type-small-size);
line-height: var(--type-small-leading);
color: var(--text-muted);
}
.vp-h2 {
margin: 0;
font-size: 18px;
line-height: 1.3;
font-weight: var(--weight-bold);
color: var(--text-heading);
}
.vp-section {
display: flex;
flex-direction: column;
gap: var(--space-16);
min-inline-size: 0;
}
.vp-card {
margin: 0;
background: var(--surface-card);
border-radius: var(--radius-card);
overflow: hidden;
}
.vp-phrase {
white-space: nowrap;
}
.vp-phrase:has(+ .vp-phrase) {
white-space: normal;
}
.vp-phrase__text {
white-space: nowrap;
}
.vp-phrase:first-child > .vp-phrase__text {
display: inline-block;
max-inline-size: 100%;
white-space: normal;
}
.vp-strip {
position: relative;
display: flex;
align-items: center;
justify-content: flex-end;
gap: var(--space-4);
block-size: 56px;
padding-inline: calc(var(--g) - 8px);
}
.vp-me {
margin-inline-end: auto;
}
.vp-page {
display: flex;
flex-direction: column;
padding-inline: var(--g);
min-inline-size: 0;
}
.vp-main {
display: flex;
flex-direction: column;
gap: var(--space-24);
min-inline-size: 0;
}
.vp-part {
min-inline-size: 0;
}
.vp-arch {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 1000' width='100' height='1000' preserveAspectRatio='none'%3E%3Cpath d='M0 1000L0 26C0 11.4 21.4 3.25 50 0C78.6 3.25 100 11.4 100 26L100 1000Z'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 1000' width='100' height='1000' preserveAspectRatio='none'%3E%3Cpath d='M0 1000L0 26C0 11.4 21.4 3.25 50 0C78.6 3.25 100 11.4 100 26L100 1000Z'/%3E%3C/svg%3E");
-webkit-mask-size: 100% auto;
mask-size: 100% auto;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: top center;
mask-position: top center;
}
.vp-hero__frame {
position: relative;
box-sizing: border-box;
block-size: var(--hero-h);
overflow: hidden;
border-radius: 0 0 var(--radius-card) var(--radius-card);
}
.vp-hero__frame--photo {
background: var(--surface-recessed);
}
.vp-ground {
position: relative;
background: var(--accent);
color: var(--text-on-accent);
isolation: isolate;
}
[data-theme='dark'] .vp-ground {
background: var(--brand-lapis-deep);
--text-on-accent: var(--on-brand);
}
.vp-ground__tile,
.vp-ground__light {
position: absolute;
inset: 0;
}
.vp-ground__light {
pointer-events: none;
background: var(--ground-light);
}
.vp-ground__star {
fill: var(--brand-lapis-black);
fill-opacity: 0.14;
stroke: var(--brand-lapis-black);
stroke-opacity: 0.55;
stroke-width: 1;
}
.vp-ground__square {
fill: none;
stroke: var(--brand-lapis-black);
stroke-opacity: 0.35;
stroke-width: 1;
}
.vp-ground__corners {
stroke: var(--brand-lapis-black);
stroke-opacity: 0.45;
stroke-width: 1;
}
.vp-hero__frame > .vp-photo {
position: absolute;
inset: 0;
inline-size: 100%;
block-size: 100%;
object-fit: cover;
background-size: cover;
background-position: center;
}
.vp-hero__band {
position: absolute;
inset-inline: 0;
inset-block-end: 0;
display: flex;
flex-direction: column;
gap: var(--space-4);
padding: 12px 16px 14px;
}
.vp-hero__frame--photo > .vp-hero__band {
background: var(--hero-scrim);
color: var(--text-on-scrim);
}
.vp-hero__name {
margin: 0;
font-size: clamp(26px, 19.1px + 2.286vw, 52px);
line-height: 1.12;
font-weight: var(--weight-extrabold);
color: inherit;
overflow-wrap: break-word;
}
.vp-hero__meta {
margin: 0;
font-size: var(--type-small-size);
line-height: var(--type-small-leading);
font-weight: var(--weight-medium);
color: inherit;
}
.vp-trial {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-8);
margin: var(--space-16) 0 0;
font-size: 15px;
line-height: 1.6;
color: var(--text-muted);
}
.vp-plain-meta {
margin: var(--space-16) 0 0;
font-size: 15px;
line-height: 1.6;
color: var(--text-muted);
}
.vp-side {
display: flex;
flex-direction: column;
gap: var(--space-16);
margin-block-start: var(--space-16);
min-inline-size: 0;
}
.vp-open {
display: flex;
align-items: center;
gap: var(--space-8);
min-block-size: 28px;
}
.vp-open:not(:has([data-state]:not([hidden]))) {
display: none;
}
.vp-open__until {
font-size: 15px;
font-weight: var(--weight-medium);
}
.vp-panel {
position: relative;
display: flex;
flex-direction: column;
gap: var(--space-16);
padding: var(--space-20);
background: var(--surface-raised);
border-radius: var(--radius-card);
outline: 1.5px solid var(--border-control);
outline-offset: -1.5px;
box-shadow: var(--shadow-overlay);
}
.vp-panel__kicker {
margin: 0;
font-size: var(--type-small-size);
line-height: 1.6;
font-weight: var(--weight-medium);
color: var(--text-muted);
}
.vp-panel__headline {
margin: 0;
font-size: 18px;
line-height: 1.4;
font-weight: var(--weight-bold);
color: var(--text-heading);
}
.vp-panel__party,
.vp-panel__chips {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var(--space-8);
font-size: 15px;
line-height: 1.4;
font-weight: var(--weight-medium);
}
.vp-panel__note {
margin: 0;
font-size: var(--type-small-size);
line-height: 1.6;
color: var(--text-muted);
}
.vp-slots {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 6px;
}
html:not(.vp-js) .vp-panel,
.vp-side.is-failed .vp-panel {
display: none;
}
html.vp-js .vp-side:not(.is-failed) .vp-book-plain {
display: none;
}
.vp-actions {
display: flex;
gap: var(--space-8);
}
.vp-actions > * {
flex: 1 1 0;
min-inline-size: 0;
}
.vp:has([data-panel] [data-call]:not([hidden])) .vp-actions > .venue-call {
display: none;
}
.vp-today {
display: none;
}
.vp-about {
margin: 0;
max-inline-size: 576px; 
font-size: 17px;
line-height: 1.8;
}
.vp-about:lang(en) {
line-height: 1.6;
}
.vp-tags {
display: flex;
flex-wrap: wrap;
gap: var(--space-8);
}
.vp-section--amenities {
container-type: inline-size;
}
.vp-amenities {
margin: 0;
padding: 0 var(--space-16);
list-style: none;
background: var(--surface-card);
border-radius: var(--radius-card);
}
.vp-amenity {
display: flex;
flex-direction: column;
gap: 2px;
padding-block: var(--space-12);
}
.vp-amenity + .vp-amenity {
border-block-start: 1px solid var(--border-hairline);
}
.vp-amenity__name {
font-size: 16px;
line-height: 1.5;
font-weight: var(--weight-semibold);
}
.vp-amenity__detail {
font-size: 14px;
line-height: 1.6;
color: var(--text-muted);
}
.vp-section--amenities .vp-amenity:nth-child(n + 5) {
display: none;
}
@container (min-width: 520px) {
.vp-section--amenities .vp-amenities {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-12);
padding: 0;
background: none;
}
.vp-section--amenities .vp-amenity {
gap: var(--space-4);
padding: 14px var(--space-16);
border-block-start: 0;
border-radius: var(--radius-card);
background: var(--surface-card);
}
.vp-section--amenities .vp-amenity:nth-child(n + 5) {
display: flex;
}
.vp-section--amenities .vp-amenity:nth-child(n + 7),
.vp-amenities__all[data-tiles-hold-all] {
display: none;
}
}
@container (min-width: 800px) {
.vp-section--amenities .vp-amenities {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
.vp-pair {
display: flex;
flex-direction: column;
gap: var(--space-24);
}
.vp-hours,
.vp-special {
padding: 2px var(--space-16);
}
.vp-hours__row,
.vp-special__row {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: baseline;
column-gap: var(--space-16);
padding-block: 11px;
}
.vp-hours__row {
font-size: 15px;
line-height: 1.5;
}
.vp-special__date,
.vp-special__value {
font-size: 15px;
}
.vp-hours__row {
row-gap: var(--space-4);
}
.vp-special__row {
row-gap: 2px;
}
.vp-hours__row + .vp-hours__row,
.vp-special__row + .vp-special__row {
border-block-start: 1px solid var(--border-hairline);
}
.vp-hours__day,
.vp-special__when {
display: flex;
flex-direction: column;
gap: 2px;
min-inline-size: 0;
}
.vp-hours__name,
.vp-special__date {
white-space: nowrap;
}
.vp-hours__note,
.vp-special__note {
font-size: 14px;
color: var(--text-muted);
}
.vp-hours__value,
.vp-special__value {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 2px;
margin-inline-start: auto;
}
.vp-range {
white-space: nowrap;
font-variant-numeric: tabular-nums;
}
.vp-hours__row.is-today {
font-weight: var(--weight-bold);
color: var(--text-heading);
}
.vp-hours__mark {
margin-inline-start: 6px;
font-size: var(--type-caption-size);
font-weight: var(--weight-medium);
color: var(--text-muted);
white-space: nowrap;
}
.vp-special__row.is-today {
font-weight: var(--weight-bold);
}
.vp-sheet {
display: none;
}
.vp-sheet:target {
position: fixed;
inset: 0;
z-index: var(--layer-sheet);
display: flex;
flex-direction: column;
}
html:has(.vp-sheet:target) {
overflow: hidden;
}
.vp-sheet__scrim {
position: absolute;
inset: 0;
background: var(--overlay-scrim);
}
.vp-sheet__frame {
position: relative;
display: flex;
flex-direction: column;
flex: 1;
min-block-size: 0;
margin-block-start: 72px;
background: var(--surface-raised);
color: var(--text-ink);
border-start-start-radius: var(--radius-sheet);
border-start-end-radius: var(--radius-sheet);
box-shadow: var(--shadow-overlay);
overflow: hidden;
}
@media (min-width: 744px) {
.vp-sheet__frame {
inline-size: min(100%, 560px);
margin-inline: auto;
}
}
.vp-sheet__grab {
align-self: center;
inline-size: 36px;
block-size: 4px;
border-radius: 2px;
background: var(--border-control);
margin-block-start: var(--space-8);
}
.vp-sheet__head {
display: flex;
align-items: center;
gap: var(--space-8);
min-block-size: 64px;
padding-inline: var(--space-8) var(--space-16);
box-shadow: inset 0 -1px 0 var(--border-hairline);
}
.vp-sheet__titles {
flex: 1;
min-inline-size: 0;
display: flex;
flex-direction: column;
}
.vp-sheet__title {
margin: 0;
font-size: 18px;
line-height: 1.4;
font-weight: var(--weight-semibold);
color: var(--text-heading);
}
.vp-sheet__sub {
margin: 0;
font-size: 14px;
line-height: 1.5;
color: var(--text-muted);
}
.vp-sheet__body {
flex: 1;
min-block-size: 0;
overflow-x: hidden;
overflow-y: auto;
overscroll-behavior: contain;
padding: var(--space-16) var(--space-20);
display: flex;
flex-direction: column;
gap: var(--space-16);
}
.vp-sheet__month {
margin: var(--space-16) 0 var(--space-4);
font-size: 14px;
font-weight: var(--weight-semibold);
color: var(--text-muted);
}
.vp-sheet__month:first-child {
margin-block-start: 0;
}
.vp-pick:target {
justify-content: flex-end;
}
.vp-pick__frame {
flex: 0 1 auto;
max-block-size: calc(100% - 72px);
}
.vp-pick__list {
display: flex;
flex-direction: column;
gap: var(--space-12);
}
.vp-pick__note {
margin: 0;
font-size: 14px;
line-height: 1.7;
color: var(--text-muted);
}
.vp-pick .ctl-row[aria-pressed='true'] {
background: var(--selected-bg);
box-shadow: inset 0 0 0 2px var(--selected-edge);
}
.vp-pick__check {
visibility: hidden;
}
.vp-pick .ctl-row[aria-pressed='true'] .vp-pick__check {
visibility: visible;
}
@media (min-width: 744px) {
.vp-pick:target {
justify-content: center;
padding: var(--space-24);
}
.vp-pick__frame {
inline-size: min(100%, 480px);
max-block-size: 100%;
margin: 0 auto;
border-radius: var(--radius-sheet);
}
.vp-pick__frame > .vp-sheet__grab {
display: none;
}
}
.vp-gallery {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-8);
}
.vp-gallery__big,
.vp-gallery__tile {
display: block;
overflow: hidden;
background: var(--surface-recessed);
}
.vp-gallery__big {
grid-column: 1 / -1;
aspect-ratio: 1 / 0.72;
border-radius: 0 0 var(--radius-card) var(--radius-card);
}
.vp-gallery__tile {
aspect-ratio: 3 / 2;
border-radius: var(--radius-card);
}
.vp-gallery__big:focus-visible,
.vp-gallery__tile:focus-visible {
outline: 2px solid var(--focus-ring);
outline-offset: 2px;
}
.vp-gallery .vp-photo {
display: block;
inline-size: 100%;
block-size: 100%;
object-fit: cover;
background-size: cover;
}
.vp-section--video {
gap: var(--space-12);
}
.vp-videos,
.vp-videos__lead {
display: flex;
flex-direction: column;
gap: var(--space-12);
}
.vp-videos__rest {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-12);
}
.vp-videos__item {
display: flex;
flex-direction: column;
gap: 6px;
}
.vp-vtiles {
display: flex;
flex-wrap: wrap;
gap: var(--space-8);
}
@media (min-width: 744px) {
.vp-vtiles {
gap: var(--space-12);
}
}
.vp-vtile {
position: relative;
display: block;
flex: var(--r) 1 calc(var(--r) * 160px);
aspect-ratio: var(--r);
overflow: hidden;
border-radius: var(--radius-card);
background: var(--brand-lapis-black);
color: var(--on-brand);
isolation: isolate;
text-decoration: none;
}
.vp-vtiles.is-laid .vp-vtile {
flex: none;
aspect-ratio: auto;
}
.vp-vtile__poster {
position: absolute;
inset: 0;
inline-size: 100%;
block-size: 100%;
object-fit: contain;
}
.vp-player__fill {
position: absolute;
inset: -24px;
inline-size: calc(100% + 48px);
block-size: calc(100% + 48px);
object-fit: cover;
filter: blur(24px) brightness(0.45);
pointer-events: none;
}
.vp-vtile:not(.is-wide) .vp-vtile__fill {
display: none;
}
.vp-vtile {
margin: 0;
}
.vp-vtile .vp-vtile__play {
inline-size: 44px;
block-size: 44px;
}
.vp-vtile__play::after {
content: '';
position: absolute;
inset: -100vmax;
}
.vp-vtile .vp-vtile__dur {
inset-block-end: auto;
inset-block-start: 6px;
inset-inline-end: 6px;
}
.vp-vtile__cap {
position: absolute;
inset-inline: 0;
inset-block-end: 0;
z-index: 2;
padding: 28px 10px 8px;
background: linear-gradient(to top, color-mix(in srgb, var(--brand-lapis-black) 78%, transparent) 55%, transparent);
color: var(--on-brand);
font-size: 13px;
line-height: 1.4;
font-weight: var(--weight-semibold);
}
.vp-vtile:focus-within {
outline: 2px solid var(--focus-ring, var(--accent));
outline-offset: 2px;
}
.vp-player--portrait {
max-block-size: min(480px, 75svh);
}
.vp-player--fit {
inline-size: min(100%, calc((100dvh - 184px) * var(--r)));
}
.vp-player__caption {
margin: 0;
font-size: 14px;
line-height: 1.6;
font-weight: var(--weight-medium);
}
.vp-player {
position: relative;
margin: 0;
inline-size: 100%;
border-radius: var(--radius-card);
overflow: hidden;
background: var(--brand-lapis-black);
color: var(--on-brand);
isolation: isolate;
}
.vp-player__media {
position: absolute;
inset: 0;
display: block;
inline-size: 100%;
block-size: 100%;
object-fit: contain;
}
.vp-player:not(.is-on) .vp-player__play,
.vp-player:not(.is-on) .vp-player__bar {
display: none;
}
.vp-player__play {
position: absolute;
inset-block-start: 50%;
inset-inline-start: 50%;
z-index: 3;
display: inline-flex;
align-items: center;
justify-content: center;
inline-size: 64px;
block-size: 64px;
padding: 0;
border: 0;
border-radius: 50%;
background: var(--surface-raised);
color: var(--accent);
box-shadow: var(--shadow-float);
transform: translate(50%, -50%);
cursor: pointer;
}
[dir='ltr'] .vp-player__play {
transform: translate(-50%, -50%);
}
.vp-player__play .ctl-icon path {
fill: currentColor;
}
.vp-player__play:focus-visible {
outline: 2px solid var(--on-brand);
outline-offset: 3px;
}
.vp-player--compact .vp-player__play {
inline-size: 44px;
block-size: 44px;
}
.vp-player--compact .vp-player__play .ctl-icon {
inline-size: 20px;
block-size: 20px;
}
.vp-player[data-state='playing'] .vp-player__play {
display: none;
}
.vp-player__dur {
position: absolute;
inset-block-end: 10px;
inset-inline-end: 10px;
z-index: 2;
padding: 2px 8px;
border-radius: 6px;
background: var(--video-band);
color: var(--on-brand);
font-size: 13px;
line-height: 1.5;
font-weight: var(--weight-semibold);
font-variant-numeric: tabular-nums;
white-space: nowrap;
pointer-events: none;
}
.vp-player--compact .vp-player__dur {
inset-block-end: auto;
inset-block-start: 6px;
inset-inline-end: 6px;
}
.vp-player:not([data-state='rest']) .vp-player__dur {
display: none;
}
.vp-player__bar {
position: absolute;
inset-inline: 0;
inset-block-end: 0;
z-index: 2;
display: flex;
align-items: center;
gap: 2px;
padding: 0 4px;
block-size: 48px;
background: var(--video-band);
transition: opacity 200ms ease-out;
}
.vp-player__bar::before {
content: '';
position: absolute;
inset-inline: 0;
inset-block-end: 100%;
block-size: 24px;
background: linear-gradient(to top, var(--video-band), transparent);
pointer-events: none;
}
.vp-player[data-state='rest'] .vp-player__bar {
display: none;
}
.vp-player.is-idle .vp-player__bar {
opacity: 0;
}
.vp-player.is-idle:focus-within .vp-player__bar {
opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
.vp-player__bar {
transition: none;
}
}
.vp-player__btn.ctl-icon-btn {
flex: none;
color: var(--on-brand);
background: transparent;
}
@media (hover: hover) {
.vp-player__btn.ctl-icon-btn:hover {
background: var(--video-hover);
}
}
.vp-player__btn.ctl-icon-btn:active {
background: var(--video-press);
}
.vp-player__btn.ctl-icon-btn:focus-visible {
outline: 2px solid var(--on-brand);
outline-offset: -2px;
}
.vp-player[data-state='playing'] .vp-i-play,
.vp-player:not([data-state='playing']) .vp-i-pause,
.vp-player[data-muted='true'] .vp-i-volume,
.vp-player:not([data-muted='true']) .vp-i-mute {
display: none;
}
.vp-player__time {
flex: none;
padding-inline: 4px;
font-size: 13px;
line-height: 1.5;
font-weight: var(--weight-semibold);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.vp-player__seek {
flex: 1 1 auto;
min-inline-size: 0;
block-size: 44px;
margin: 0 6px;
padding: 0;
background: transparent;
appearance: none;
cursor: pointer;
}
.vp-player__seek::-webkit-slider-runnable-track {
block-size: 4px;
border-radius: 2px;
background: linear-gradient(to right, var(--on-brand) var(--p, 0%), var(--video-track) var(--p, 0%));
}
.vp-player__seek::-moz-range-track {
block-size: 4px;
border-radius: 2px;
background: linear-gradient(to right, var(--on-brand) var(--p, 0%), var(--video-track) var(--p, 0%));
}
.vp-player__seek::-webkit-slider-thumb {
appearance: none;
inline-size: 14px;
block-size: 14px;
margin-block-start: -5px;
border: 0;
border-radius: 50%;
background: var(--on-brand);
}
.vp-player__seek::-moz-range-thumb {
inline-size: 14px;
block-size: 14px;
border: 0;
border-radius: 50%;
background: var(--on-brand);
}
.vp-player__seek:focus-visible {
outline: 2px solid var(--on-brand);
outline-offset: 2px;
}
.vp-address__row {
display: flex;
flex-direction: column;
gap: var(--space-16);
}
.vp-address__text {
display: flex;
flex-direction: column;
gap: var(--space-4);
}
.vp-address__lines {
display: flex;
flex-direction: column;
font-style: normal;
font-size: 16px;
line-height: 1.8;
}
.vp-address__postal {
line-height: 1.8; 
}
.vp-rows {
display: flex;
flex-direction: column;
}
.vp-close {
margin-block-start: var(--space-48);
overflow: hidden;
background: var(--surface-card);
border-radius: var(--radius-card);
}
.vp-close__ground {
padding: 28px var(--space-20) var(--space-24);
}
.vp-close__copy {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-8);
text-align: center;
}
.vp-close__name {
margin: 0;
font-size: 18px;
line-height: 1.4;
font-weight: var(--weight-extrabold);
color: var(--text-on-accent);
}
.vp-close__today {
margin: 0;
font-size: 15px;
line-height: 1.6;
color: var(--text-on-accent);
}
.vp-close__foot {
padding: var(--space-16) var(--space-20) var(--space-20);
}
.vp-foot {
display: flex;
justify-content: center;
margin-block-start: var(--space-32);
padding: var(--space-8) var(--g) var(--space-24);
}
.vp--nothing-yet .vp-foot {
margin-block-start: auto;
padding-block-start: var(--space-32);
}
.vp-main {
margin-block-start: var(--space-48);
}
.vp-address__go {
inline-size: 100%;
}
.vp--nothing-yet {
--hero-h: 240px;
}
.vp--nothing-yet .vp-hero__band {
padding: var(--space-20);
}
.vp--nothing-yet .vp-plain-meta + .vp-side {
margin-block-start: var(--space-16);
}
.vp-viewer__slide {
display: none;
}
.vp-viewer__slide:target {
position: fixed;
inset: 0;
z-index: var(--layer-dialog);
display: flex;
flex-direction: column;
background: var(--surface-ground);
color: var(--text-ink);
}
@media (max-width: 743.98px) {
.vp-viewer {
--g: 16px;
}
}
.vp-viewer__top {
display: flex;
align-items: center;
gap: var(--space-8);
block-size: 56px;
padding-inline: calc(var(--g, 16px) - 8px);
}
.vp-viewer__count {
flex: 1;
margin: 0;
font-size: 15px;
line-height: 1.4;
font-weight: var(--weight-medium);
font-variant-numeric: tabular-nums;
}
.vp-viewer__stage {
display: flex;
flex: 1;
align-items: center;
justify-content: center;
min-block-size: 0;
padding: var(--space-16) var(--g, 16px);
}
.vp-viewer__img {
max-inline-size: 100%;
max-block-size: 100%;
object-fit: contain;
border-radius: var(--radius-card);
}
.vp-viewer__bottom {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-12);
block-size: 96px;
padding-inline: var(--g, 16px);
}
.vp-viewer__spacer {
inline-size: var(--hit-min);
}
.vp-viewer__caption {
flex: 1;
text-align: center;
}
@media (min-width: 744px) {
.vp-page {
display: grid;
grid-template-columns: minmax(0, 1fr) var(--side);
column-gap: var(--col-gap);
row-gap: var(--space-32);
align-items: start;
}
.vp-hero,
.vp-plain-meta,
.vp-close {
grid-column: 1 / -1;
}
.vp-main {
grid-column: 1;
grid-row: span 1;
gap: var(--space-32);
margin: 0;
}
.vp-side {
grid-column: 2;
position: sticky;
inset-block-start: var(--space-24);
margin: 0;
}
.vp-hero + .vp-side,
.vp-plain-meta + .vp-side {
grid-row: 2;
}
.vp-plain-meta + .vp-side {
grid-row: 3;
}
.vp-side + .vp-main {
grid-row: 2;
}
.vp-page:not(:has(> .vp-main)) > .vp-side {
grid-column: 1;
inline-size: var(--side);
}
.vp-plain-meta {
margin: 0;
}
.vp-hero__frame {
block-size: calc(0.55 * var(--hero-photo)); 
}
.vp--photo .vp-hero__frame {
block-size: var(--hero-photo);
}
.vp-arch {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 1000' width='100' height='1000' preserveAspectRatio='none'%3E%3Cpath d='M0 1000L0 12C0 5.25 21.4 1.5 50 0C78.6 1.5 100 5.25 100 12L100 1000Z'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 1000' width='100' height='1000' preserveAspectRatio='none'%3E%3Cpath d='M0 1000L0 12C0 5.25 21.4 1.5 50 0C78.6 1.5 100 5.25 100 12L100 1000Z'/%3E%3C/svg%3E");
}
.vp-gallery__big.vp-arch {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 1000' width='100' height='1000' preserveAspectRatio='none'%3E%3Cpath d='M0 1000L0 26C0 11.4 21.4 3.25 50 0C78.6 3.25 100 11.4 100 26L100 1000Z'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 1000' width='100' height='1000' preserveAspectRatio='none'%3E%3Cpath d='M0 1000L0 26C0 11.4 21.4 3.25 50 0C78.6 3.25 100 11.4 100 26L100 1000Z'/%3E%3C/svg%3E");
}
.vp-hero__band {
padding: var(--space-20);
}
.vp-today {
display: flex;
flex-direction: column;
gap: var(--space-4);
}
.vp-today__hours {
font-size: 15px;
}
.vp-pair {
gap: var(--space-32);
}
.vp-orn--phone {
display: none;
}
.vp-address__row {
flex-direction: row;
flex-wrap: wrap;
align-items: flex-end;
justify-content: space-between;
gap: var(--space-24);
}
.vp-address__go {
inline-size: 220px;
}
.vp-close {
justify-self: center;
inline-size: 100%;
max-inline-size: 560px; 
margin: 0;
}
.vp-foot {
margin-block-start: 0;
}
}
.vp-cols,
.vp-cols__col {
display: contents;
}
.vp-cols__col + .vp-cols__col > :first-child {
border-block-start: 1px solid var(--border-hairline);
}
@media (min-width: 1024px) {
.vp-cols {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: 48px;
align-items: start;
}
.vp-cols__col {
display: flex;
flex-direction: column;
min-inline-size: 0;
}
.vp-cols__col + .vp-cols__col > :first-child {
border-block-start: 0;
}
}
@media (min-width: 1024px) {
.vp-pair {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-24);
align-items: start;
}
.vp-orn--unpaired {
display: none;
}
.vp-gallery--five {
grid-template-columns: 2fr 1fr 1fr;
grid-template-rows: repeat(2, minmax(0, 1fr));
gap: var(--space-12);
block-size: 440px;
}
.vp-gallery--five > .vp-gallery__big {
grid-column: auto;
grid-row: span 2;
aspect-ratio: auto;
}
.vp-gallery--five > .vp-gallery__tile {
aspect-ratio: auto;
}
.vp-gallery--five ~ .ctl-btn-wrap,
.vp-gallery--five ~ .vp-gallery__all {
max-inline-size: 320px;
}
}
.st-body {
--g0: 16px;
--g: max(var(--g0), env(safe-area-inset-left), env(safe-area-inset-right));
--air: 96px;
--iair: 64px;
--over: 56px;
--pad: 16px;
--win-pad: 16px;
--st-display: clamp(40px, calc(40px + (100vw - 360px) * 32 / 1080), 72px);
--st-title: clamp(30px, calc(30px + (100vw - 360px) * 18 / 1080), 48px);
--st-figure: clamp(48px, calc(48px + (100vw - 360px) * 32 / 1080), 80px);
--st-gold-hair: color-mix(in srgb, var(--brand-gold-soft) 18%, transparent);
min-block-size: 100dvh;
margin: 0;
font-family: var(--font-sans);
font-size: var(--type-body-size);
line-height: var(--type-body-leading);
background: var(--surface-ground);
color: var(--text-ink);
overflow-x: hidden;
}
@media (min-width: 390px) {
.st-body {
--g0: 20px;
}
}
@media (min-width: 600px) and (max-width: 743.98px) {
.st-body {
--g0: max(20px, (100vw - 560px) / 2);
}
}
@media (min-width: 744px) {
.st-body {
--g0: 24px;
--air: 128px;
--iair: 96px;
--over: 72px;
--pad: 24px;
--win-pad: 24px;
}
}
@media (min-width: 1024px) {
.st-body {
--g0: 32px;
--air: 160px;
--iair: 112px;
--over: 88px;
}
}
html[lang='en'] .st-body {
line-height: 1.6;
}
html:has(details[data-st-sheet][open]),
html.st-locked {
overflow: hidden;
}
.st-defs {
position: absolute;
inline-size: 0;
block-size: 0;
overflow: hidden;
}
.st-skip {
position: absolute;
inset-inline-start: var(--space-8);
inset-block-start: var(--space-8);
z-index: var(--layer-toast);
padding: var(--space-8) var(--space-16);
border-radius: var(--radius-control);
background: var(--surface-raised);
color: var(--text-ink);
transform: translateY(-200%);
}
.st-skip:focus-visible {
transform: none;
outline: 2px solid var(--focus-ring);
outline-offset: 2px;
}
.st-nw {
display: inline-block;
max-inline-size: 100%;
}
.st-ph {
color: var(--text-muted);
font-weight: var(--weight-medium);
white-space: nowrap;
}
.st-display {
margin: 0;
font-size: var(--st-display);
line-height: 1.1;
font-weight: var(--weight-extrabold);
color: var(--text-heading);
}
.st-title {
margin: 0;
font-size: var(--st-title);
line-height: 1.2;
font-weight: var(--weight-extrabold);
color: var(--text-heading);
}
.st-figure {
font-size: var(--st-figure);
line-height: 1;
font-weight: var(--weight-bold);
font-variant-numeric: tabular-nums;
color: var(--text-heading);
}
.st-numeral {
font-size: var(--type-numeral-size);
line-height: 1.2;
font-weight: var(--weight-semibold);
font-variant-numeric: tabular-nums;
color: var(--text-heading);
}
.st-lead {
margin: 0;
max-inline-size: 34em;
font-size: var(--type-lead-size);
line-height: var(--type-lead-leading);
color: var(--text-ink);
}
.st-lead--muted {
color: var(--text-muted);
}
.st-kicker {
margin: 0;
font-size: var(--type-small-size);
line-height: 1.6;
font-weight: var(--weight-medium);
color: var(--text-gold);
}
.st-kicker--600 {
font-weight: var(--weight-semibold);
}
.st-h3 {
margin: 0;
font-size: 18px;
line-height: 1.4;
font-weight: var(--weight-semibold);
color: var(--text-heading);
}
.st-h4 {
margin: 0;
font-size: 15px;
line-height: 1.4;
font-weight: var(--weight-semibold);
color: var(--text-heading);
}
.st-body-text,
.st-body-15 {
margin: 0;
font-size: 15px;
line-height: 1.7;
color: var(--text-ink);
}
.st-body-17 {
margin: 0;
font-size: 17px;
line-height: 1.8;
}
.st-muted {
color: var(--text-muted);
}
.st-muted-15 {
margin: 0;
font-size: 15px;
line-height: 1.7;
color: var(--text-muted);
}
.st-price__fig .st-muted-15 {
line-height: 1.8;
}
.st-calc__box [data-calc-none] {
line-height: 1.7;
}
.st-count-line {
line-height: 1.6;
}
.st-muted-14 {
margin: 0;
font-size: var(--type-small-size);
line-height: 1.6;
color: var(--text-muted);
}
.st-caption {
margin: 0;
font-size: var(--type-caption-size);
line-height: var(--type-caption-leading);
font-weight: var(--type-caption-weight);
color: var(--text-muted);
}
.st-label {
margin: 0;
font-size: 15px;
line-height: 1.4;
font-weight: var(--weight-semibold);
color: var(--text-heading);
}
.st-link {
color: var(--accent);
font-weight: var(--weight-semibold);
text-decoration: underline;
text-underline-offset: 3px;
}
.st-link:focus-visible {
outline: 2px solid var(--focus-ring);
outline-offset: 2px;
border-radius: var(--radius-inner);
}
.st-plate {
position: relative;
background: var(--brand-lapis-deep);
overflow: hidden;
}
.st-plate__body {
position: relative;
}
.st-header {
position: relative;
z-index: var(--layer-header);
box-shadow: inset 0 -1px 0 var(--st-gold-hair);
}
.st-header__brand {
display: flex;
align-items: center;
}
.st-header__bar {
display: flex;
align-items: center;
justify-content: space-between;
block-size: 56px;
padding-inline: calc(var(--g) - 4px) calc(var(--g) - 8px);
}
.st-header__nav,
.st-header__spacer,
.st-header__find,
.st-header__tools {
display: none;
}
@media (min-width: 1024px) {
.st-header__bar {
justify-content: flex-start;
box-sizing: content-box;
block-size: 64px;
max-inline-size: 1056px;
margin-inline: auto;
padding-inline: var(--g);
}
.st-header__nav {
display: flex;
align-items: center;
gap: var(--space-4);
margin-inline-start: var(--space-24);
}
.st-header__spacer {
display: block;
flex: 1 1 auto;
}
.st-header__find {
display: block;
}
.st-header__tools {
display: flex;
gap: var(--space-4);
margin-inline-start: var(--space-8);
}
.st-sheet-menu {
display: none;
}
}
@media (min-width: 1024px) and (max-width: 1099.98px) {
:root:lang(en) .st-header__nav,
:root:lang(en) .st-header__find,
:root:lang(en) .st-header__tools {
display: none;
}
:root:lang(en) .st-header__bar {
justify-content: space-between;
}
:root:lang(en) .st-sheet-menu {
display: block;
}
:root:lang(en) .st-sheet,
:root:lang(en) .st-sheet-menu[open]::before {
inset-block-start: 64px;
}
}
.st-onplate {
list-style: none;
color: var(--text-ink);
}
.st-onplate::-webkit-details-marker {
display: none;
}
details[open] > .st-onplate {
background: var(--accent-tint);
color: var(--accent);
}
.st-lockup {
display: inline-flex;
align-items: center;
gap: 14px;
min-block-size: var(--hit-min);
text-decoration: none;
}
.st-lockup:focus-visible {
outline: 2px solid var(--focus-ring);
outline-offset: 2px;
}
.st-lockup--32 {
gap: 16px;
}
.st-lockup--40 {
gap: 20px;
}
.st-lockup__word {
flex: none;
overflow: visible;
--st-wm-word: var(--mark-arch);
--st-wm-flourish: var(--mark-star);
--st-wm-latin: var(--mark-arch);
}
[data-theme='dark'] .st-lockup__word,
.st-lockup__word[data-theme='dark'] {
--st-wm-latin: var(--brand-gold-soft);
}
@media (min-width: 1024px) {
.st-header .st-lockup {
gap: 16px;
}
.st-header .ctl-mark {
inline-size: 33.45px;
block-size: 32px;
}
.st-header .st-lockup__word {
inline-size: 45px;
block-size: 38px;
}
html[lang='en'] .st-header .st-lockup__word {
inline-size: 113px;
block-size: 20px;
}
}
.ctl-mark--single .ctl-mark__ink {
stroke: var(--mark-single);
}
.ctl-mark--single .ctl-mark__star {
fill: var(--mark-single);
}
.ctl-mark--full .ctl-mark__ink {
stroke: var(--mark-arch);
}
.ctl-mark--full .ctl-mark__star {
fill: var(--mark-star);
}
.st-sheet-menu > summary {
list-style: none;
}
.st-sheet {
position: fixed;
inset: 56px 0 0;
z-index: var(--layer-sheet);
display: flex;
flex-direction: column;
overflow: hidden;
background: var(--surface-raised);
color: var(--text-ink);
border-start-start-radius: var(--radius-sheet);
border-start-end-radius: var(--radius-sheet);
box-shadow: var(--shadow-overlay);
}
.st-sheet-menu[open]::before {
content: '';
position: fixed;
inset: 56px 0 0;
z-index: calc(var(--layer-sheet) - 1);
background: var(--overlay-scrim);
}
.st-sheet__head {
display: flex;
align-items: center;
gap: var(--space-8);
min-block-size: 64px;
padding-inline: var(--space-8) var(--space-16);
box-shadow: inset 0 -1px 0 var(--border-hairline);
}
.st-sheet__title {
margin: 0;
font-size: 18px;
line-height: 1.4;
font-weight: var(--weight-semibold);
color: var(--text-heading);
}
.st-sheet__body {
display: flex;
flex: 1;
flex-direction: column;
gap: 20px;
min-block-size: 0;
overflow: auto;
padding: var(--space-16) var(--space-20) calc(var(--space-20) + env(safe-area-inset-bottom));
}
.st-group {
display: flex;
flex-direction: column;
gap: var(--space-8);
}
.st-sheet__grab {
align-self: center;
flex: none;
inline-size: 36px;
block-size: 4px;
border-radius: 2px;
background: var(--border-control);
margin-block-start: var(--space-8);
}
.st-chips {
display: flex;
flex-wrap: wrap;
gap: var(--space-8);
}
.st-rows {
overflow: hidden;
border-radius: var(--radius-card);
background: var(--surface-card);
}
.st-sheet .st-rows {
box-shadow: inset 0 0 0 1px var(--border-hairline);
}
a.ctl-chip:is(:link, :visited, :hover, :focus, :active) {
color: var(--text-ink);
text-decoration: none;
}
.st-menu {
position: relative;
}
.st-menu > summary {
list-style: none;
}
.st-menu__panel {
position: absolute;
inset-block-start: calc(100% + var(--space-8));
inset-inline-end: 0;
z-index: var(--layer-dropdown);
min-inline-size: 200px;
padding: var(--space-8);
border-radius: var(--radius-card);
background: var(--surface-raised);
color: var(--text-ink);
box-shadow: var(--shadow-overlay);
outline: 1px solid var(--border-hairline);
}
.st-menu__rows {
display: flex;
flex-direction: column;
}
.st-menu__row {
justify-content: space-between;
inline-size: 100%;
padding-inline: var(--space-12);
border-radius: var(--radius-control);
text-decoration: none;
color: var(--text-ink);
}
a.st-menu__row:is(:link, :visited, :hover, :focus, :active) {
color: var(--text-ink);
}
.st-menu__check {
color: var(--selected-edge);
}
.st-menu__row[aria-pressed='false'] .st-menu__check {
visibility: hidden;
}
@media (hover: hover) {
.st-menu__row:hover {
background: var(--accent-tint);
}
}
.st-menu__row:active,
.st-menu__row[aria-current='page'],
.st-menu__row[aria-pressed='true'] {
background: var(--selected-bg);
}
.st-footer {
padding: 32px var(--g);
background: var(--surface-recessed);
}
.st-footer__inner {
display: flex;
flex-direction: column;
gap: var(--space-24);
max-inline-size: 1056px;
margin-inline: auto;
}
.st-footer__top {
display: flex;
flex-direction: column;
gap: var(--space-12);
}
.st-footer__tagline {
margin: 0;
font-size: 15px;
line-height: 1.7;
color: var(--text-muted);
}
.st-footer__cols {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-16);
}
.st-footer__title {
margin: 0 0 var(--space-4);
font-size: var(--type-caption-size);
line-height: 1.4;
font-weight: var(--weight-semibold);
color: var(--text-muted);
}
.st-footer__list {
display: flex;
flex-direction: column;
margin: 0;
padding: 0;
list-style: none;
}
@media (min-width: 744px) {
.st-footer__cols {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (min-width: 1024px) {
.st-footer__inner {
display: grid;
grid-template-columns: 1fr 2fr;
gap: 48px;
}
}
.st-head {
padding: 32px var(--g) calc(var(--over) + 40px);
}
.st-head__box {
max-inline-size: 1056px;
margin-inline: auto;
}
.st-head__col {
display: flex;
flex-direction: column;
gap: var(--space-12);
max-inline-size: 720px;
}
.st-head__col--narrow {
max-inline-size: 640px;
}
.st-head__col--full {
max-inline-size: none;
}
@media (min-width: 744px) {
.st-head {
padding-block-start: 56px;
}
}
.st-page--inner .st-main {
position: relative;
padding: 0 var(--g) var(--iair);
}
.st-inner {
display: flex;
flex-direction: column;
gap: var(--iair);
max-inline-size: 1056px;
margin: calc(-1 * var(--over)) auto 0;
}
.st-sheet-lift {
padding: var(--pad);
border-radius: var(--radius-sheet);
background: var(--surface-card);
color: var(--text-ink);
box-shadow: var(--shadow-elev);
}
.st-sheet-lift--8 {
padding: var(--space-8);
}
.st-sheet-lift--16 {
padding: var(--space-16);
}
.st-card {
border-radius: var(--radius-card);
background: var(--surface-card);
color: var(--text-ink);
}
.st-card--pad {
display: flex;
flex-direction: column;
gap: var(--space-12);
padding: var(--pad);
}
.st-card--flat {
overflow: hidden;
}
.st-feature-plan {
gap: var(--space-8);
box-shadow: inset 0 0 0 1px var(--border-hairline);
}
.st-feature-plan > .st-body-15 {
font-size: 16px;
}
.st-card--rows {
padding: var(--space-4) var(--pad);
}
.st-features {
display: flex;
flex-direction: column;
gap: var(--space-32);
}
@media (min-width: 1024px) {
.st-features {
padding: var(--space-32);
}
}
.st-features__group {
display: flex;
flex-direction: column;
gap: var(--space-16);
}
.st-features__group + .st-features__group {
padding-block-start: var(--space-32);
border-block-start: 1px solid var(--border-hairline);
}
.st-features__open {
display: flex;
flex-direction: column;
gap: var(--space-4);
}
.st-features__name {
margin: 0;
font-size: 20px;
line-height: 1.4;
font-weight: var(--weight-bold);
color: var(--text-heading);
}
.st-features__sub {
margin: 0;
font-size: 15px;
line-height: 1.7;
color: var(--text-muted);
}
.st-features__grid {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--space-12);
}
@media (min-width: 744px) {
.st-features__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 1024px) {
.st-features__grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
.st-feature-card {
display: flex;
flex-direction: column;
gap: 6px;
min-block-size: 44px;
padding: var(--space-16);
border-radius: var(--radius-card);
background: var(--surface-card);
box-shadow: inset 0 0 0 1px var(--border-hairline);
color: var(--text-ink);
text-decoration: none;
transition: box-shadow var(--duration-quick) var(--ease-enter), background-color var(--duration-quick) var(--ease-enter);
}
a.st-feature-card:is(:link, :visited, :hover, :focus, :active) {
color: var(--text-ink);
text-decoration: none;
}
@media (hover: hover) {
.st-feature-card:hover {
box-shadow: inset 0 0 0 1.5px var(--border-control);
}
}
.st-feature-card:active {
background: var(--accent-tint);
box-shadow: inset 0 0 0 1.5px var(--border-control);
}
.st-feature-card:focus {
outline: none;
}
.st-feature-card:focus-visible {
outline: 2px solid var(--focus-ring);
outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
.st-feature-card {
transition: none;
}
}
.st-feature-card__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-8);
}
.st-feature-card__name {
margin: 0;
font-size: 15px;
line-height: 1.4;
font-weight: var(--weight-semibold);
color: var(--text-heading);
}
.st-feature-card__head > :not(.st-feature-card__name) {
flex: none;
}
.st-feature-card__chevron {
display: inline-flex;
color: var(--accent);
}
.st-feature-card__line {
margin: 0;
font-size: 15px;
line-height: 1.7;
color: var(--text-muted);
}
.st-section {
display: flex;
flex-direction: column;
gap: var(--space-24);
}
.st-section--16 {
gap: var(--space-16);
}
.st-section--32 {
gap: var(--space-32);
}
.st-section--evening {
gap: var(--space-32);
}
.st-section--panel {
gap: var(--space-40);
}
@media (min-width: 744px) {
.st-section--evening {
gap: var(--space-48);
}
.st-section--panel {
gap: 56px;
}
}
.st-open {
display: flex;
flex-direction: column;
gap: var(--space-12);
max-inline-size: 704px;
}
.st-open__kicker {
margin: 0;
font-size: var(--type-small-size);
line-height: 1.6;
font-weight: var(--weight-semibold);
color: var(--text-gold);
}
.st-open .st-lead {
max-inline-size: none;
}
.ctl-row__badge {
display: flex;
margin-block-start: var(--space-4);
}
.ctl-row__badge:has(.st-card-badge):not(:has([data-state]:not([hidden]))) {
display: none;
}
.ctl-row__price {
min-inline-size: 7.5em;
text-align: start;
white-space: nowrap;
font-size: var(--type-ui-size);
font-weight: var(--weight-semibold);
font-variant-numeric: tabular-nums;
color: var(--text-ink);
}
.ctl-row__trail {
gap: var(--space-8);
}
.ctl-row__chevron {
display: flex;
}
.ctl-row[aria-current] {
background: var(--selected-bg);
box-shadow: inset 0 0 0 2px var(--selected-edge);
}
.ctl-row--wrap .ctl-row__sub {
white-space: normal;
overflow: visible;
text-overflow: clip;
overflow-wrap: anywhere;
}
.ctl-row--sample {
cursor: default;
}
@media (hover: hover) {
.ctl-row--sample:hover {
background: var(--surface-card);
}
}
.ctl-badge--vip {
background: var(--gold-fill);
color: var(--text-on-gold);
}
.ctl-badge--confirmed {
background: var(--gold-selected-bg);
color: var(--text-ink);
box-shadow: inset 0 0 0 1.5px var(--gold-selected-border);
}
.ctl-badge--confirmed > .ctl-icon {
color: var(--gold-selected-border); 
}
.ctl-badge--danger {
background: var(--status-danger-tint);
color: var(--status-danger);
}
.ctl-field {
display: block;
}
.ctl-field__label {
display: block;
margin-block-end: var(--space-8);
font-size: var(--type-ui-size);
line-height: var(--type-ui-leading);
font-weight: var(--type-ui-weight);
color: var(--text-ink);
}
.ctl-field__input {
box-sizing: border-box;
inline-size: 100%;
min-block-size: var(--input-phone);
margin: 0;
padding-inline: var(--space-16);
border: 0;
border-radius: var(--radius-control);
font: inherit;
font-size: 16px;
line-height: 1.4;
color: var(--text-ink);
background: var(--surface-card);
box-shadow: inset 0 0 0 1px var(--border-control);
text-align: start;
}
.ctl-field__input--area {
display: block;
min-block-size: 0;
padding-block: var(--space-12);
line-height: 1.7;
resize: vertical;
}
.ctl-field__input::placeholder {
color: var(--text-muted);
opacity: 1;
}
.ctl-field__input:focus {
outline: none;
}
.ctl-field__input:focus-visible {
outline: 2px solid var(--focus-ring);
outline-offset: 2px;
box-shadow: inset 0 0 0 2px var(--accent);
}
@media (hover: hover) {
.ctl-field__input:hover:not(:disabled):not(:focus):not([aria-invalid='true']) {
box-shadow: inset 0 0 0 2px var(--border-control);
}
}
.ctl-field__input[aria-invalid='true'] {
box-shadow: inset 0 0 0 2px var(--status-danger);
}
.ctl-field__error {
display: flex;
align-items: flex-start;
gap: var(--space-8);
margin-block-start: var(--space-8);
font-size: var(--type-small-size);
line-height: var(--type-small-leading);
color: var(--status-danger);
}
.ctl-field__error > svg {
flex: none;
margin-block-start: calc((1lh - 18px) / 2 + 0.4px);
}
.ctl-field__error > svg:lang(en) {
translate: 0 -1.5px;
}
.ctl-field__input:disabled {
background: var(--disabled-fill);
color: var(--disabled-ink);
box-shadow: inset 0 0 0 1px var(--disabled-ink);
cursor: not-allowed;
}
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
.ctl-field__input:not(.ctl-field__input--area) {
min-block-size: var(--input-desk);
}
}
.ctl-stepper {
display: inline-flex;
flex: none;
align-items: center;
gap: var(--space-4);
}
.ctl-stepper__btn {
inline-size: var(--hit-min);
block-size: var(--hit-min);
padding: 0;
color: var(--accent);
box-shadow: inset 0 0 0 1px var(--border-control);
}
@media (hover: hover) {
.ctl-stepper__btn:hover:not(:disabled) {
background: var(--accent-tint);
}
}
.ctl-stepper__btn:active:not(:disabled) {
box-shadow: inset 0 0 0 2px var(--accent);
}
.ctl-stepper__btn:disabled {
color: var(--disabled-ink);
box-shadow: inset 0 0 0 1px var(--disabled-ink);
}
.ctl-stepper__value {
min-inline-size: 48px;
text-align: center;
font-size: 18px;
font-weight: var(--weight-semibold);
font-variant-numeric: tabular-nums;
color: inherit;
}
.ctl-stamp {
display: block;
flex: none;
transform: rotate(var(--tilt, -6deg));
}
.ctl-stamp__rule {
fill: none;
stroke: var(--accent);
}
.ctl-stamp__ink circle {
fill: var(--accent);
}
.ctl-stamp__arc,
.ctl-stamp__big,
.ctl-stamp__small {
font-family: var(--font-sans);
fill: var(--accent);
}
.ctl-stamp__arc {
font-size: 21px;
font-weight: var(--weight-bold);
}
.ctl-stamp__name {
fill: var(--accent);
}
.ctl-stamp__big {
font-size: 27px;
font-weight: var(--weight-bold);
}
.ctl-stamp__small {
font-size: 21px;
font-weight: var(--weight-semibold);
}
.ctl-hold {
position: relative;
display: inline-flex;
flex: none;
align-items: center;
justify-content: center;
inline-size: var(--hit-min);
block-size: var(--hit-min);
color: var(--text-ink);
}
.ctl-hold__arc {
position: absolute;
inset: 0;
margin: auto;
}
.ctl-hold__track {
fill: none;
stroke: var(--border-hairline);
stroke-width: 3;
}
.ctl-hold__fill {
fill: none;
stroke: var(--accent);
stroke-width: 3;
stroke-linecap: round;
}
.ctl-hold__number {
position: relative;
font-size: var(--type-caption-size);
font-weight: var(--weight-bold);
font-variant-numeric: tabular-nums;
}
.ctl-copy {
display: inline-flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-8);
}
.ctl-copy__box {
flex: none;
display: inline-flex;
align-items: center;
gap: var(--space-8);
min-block-size: var(--hit-min);
padding-inline: var(--space-12);
border-radius: var(--radius-control);
background: var(--surface-recessed);
color: var(--text-ink);
font-size: var(--type-ui-size);
line-height: var(--type-ui-leading);
font-weight: var(--weight-semibold);
}
.ctl-copy__value {
font-variant-numeric: tabular-nums;
letter-spacing: 0.5px;
white-space: nowrap; 
}
.ctl-slot--sample {
inline-size: var(--slot-width);
cursor: default;
}
.ctl-slot--sample.is-selected {
background: var(--selected-bg);
box-shadow: inset 0 0 0 2px var(--selected-edge);
font-weight: var(--weight-extrabold);
}
.ctl-chip--sample {
cursor: default;
}
.st-crumbs {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-4);
}
.st-crumbs__item {
display: inline-flex;
align-items: center;
gap: var(--space-4);
}
.st-crumbs__sep {
display: inline-flex;
color: var(--text-muted);
pointer-events: none;
}
.st-crumbs__sep--latin {
translate: 0 -1px;
}
.st-crumbs__current {
display: inline-flex;
align-items: center;
min-block-size: var(--hit-min);
font-size: var(--type-small-size);
font-weight: var(--weight-semibold);
color: var(--text-ink);
}
.st-filters {
display: flex;
flex-direction: column;
gap: var(--space-16);
padding-block-start: var(--space-12);
}
.st-filter {
display: flex;
flex-direction: column;
gap: var(--space-8);
}
.st-filter__label {
margin: 0;
font-size: 15px;
line-height: 1.4;
font-weight: var(--weight-semibold);
color: var(--text-heading);
}
.st-filter__chips {
display: flex;
flex-wrap: wrap;
gap: var(--space-8);
max-block-size: calc(2 * var(--hit-min) + var(--space-8));
overflow: clip;
overflow-clip-margin: 4px;
}
.st-filter__chips[data-bound] {
max-block-size: none;
overflow: visible;
}
.st-filter-sheet .vp-sheet__frame {
margin-block-start: 56px;
}
.st-filter-sheet__rows {
display: flex;
flex-direction: column;
}
.st-cards {
display: grid;
grid-template-columns: minmax(0, 1fr);
column-gap: var(--space-16);
margin: 0;
padding: 0;
list-style: none;
}
.st-cards__item {
display: flex;
min-inline-size: 0;
}
.st-cards__item + .st-cards__item > .ctl-row {
box-shadow: inset 0 1px 0 var(--border-hairline);
}
@media (min-width: 744px) {
.st-cards {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.st-cards__item:nth-child(2) > .ctl-row {
box-shadow: none;
}
}
@media (min-width: 1024px) {
.st-cards {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.st-cards__item:nth-child(3) > .ctl-row {
box-shadow: none;
}
}
.st-card-badge {
display: inline-flex;
}
.st-paging {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-12);
}
.st-paging__slot {
min-inline-size: 0;
}
.st-paging__label {
font-size: 15px;
font-weight: var(--weight-medium);
color: var(--text-muted);
white-space: nowrap;
}
.st-empty__col {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-16);
padding: 40px var(--space-8);
text-align: center;
}
.st-cities {
overflow: hidden;
border-radius: var(--radius-card);
}
@media (min-width: 744px) {
.st-cities--grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-12);
overflow: visible;
}
.st-cities--grid .ctl-row + .ctl-row {
box-shadow: none;
}
}
@media (min-width: 1024px) {
.st-cities--grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
.st-segs {
padding-block: var(--space-8);
}
.st-segs__grid {
display: grid;
grid-template-columns: minmax(0, 1fr);
column-gap: var(--space-32);
}
@media (min-width: 744px) {
.st-segs__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 1024px) {
.st-segs__grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
.st-seg {
display: flex;
flex-direction: column;
gap: 6px;
padding: var(--space-16) var(--space-4);
border-block-end: 1px solid var(--border-hairline);
scroll-margin-block-start: var(--space-24);
}
.st-seg--closed {
border-block-end: 0;
}
.st-seg__closed-name {
display: inline-block;
max-inline-size: 100%;
}
.st-notlisted {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--space-12);
max-inline-size: 36rem;
}
.st-empty-index {
text-align: start;
}
#cities {
scroll-margin-block-start: var(--space-24);
}
.st-plans {
display: flex;
flex-direction: column;
gap: var(--iair);
max-inline-size: 1056px;
margin: calc(-1 * var(--over)) auto 0;
}
.st-plans__top {
display: flex;
flex-direction: column;
gap: var(--space-16);
}
.st-plans__cards {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--space-16);
align-items: stretch;
}
@media (min-width: 744px) {
.st-plans__cards {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-24);
}
}
.st-plans__cats {
display: flex;
flex-direction: column;
gap: 6px;
}
.st-plans__sold,
.st-plans__soon {
margin: 0;
font-size: 15px;
line-height: 1.7;
color: var(--text-ink);
}
.st-plans__ask {
padding: var(--pad);
border-radius: var(--radius-sheet);
background: var(--surface-card);
box-shadow: var(--shadow-elev);
}
.st-plans__ask > p {
margin: 0;
font-size: 15px;
line-height: 1.7;
font-weight: var(--weight-semibold);
color: var(--text-heading);
}
.st-plans__soon {
color: var(--text-muted);
}
.st-plans__cats strong {
font-weight: var(--weight-semibold);
}
.st-plan {
display: flex;
flex-direction: column;
gap: var(--space-16);
padding: var(--pad);
border-radius: var(--radius-sheet);
background: var(--surface-card);
color: var(--text-ink);
box-shadow: var(--shadow-elev);
outline: 1.5px solid var(--border-control);
outline-offset: -1.5px;
}
.st-plan__name {
display: flex;
flex-direction: column;
gap: var(--space-4);
}
.st-plan__title {
margin: 0;
font-size: 18px;
line-height: 1.4;
font-weight: var(--weight-bold);
color: var(--text-heading);
}
.st-plan__titlerow {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-8);
}
.st-plan__notsold {
margin: 0;
font-size: 15px;
line-height: 1.7;
font-weight: 500;
color: var(--text-heading);
}
.st-plan__campaigns {
display: flex;
flex-direction: column;
gap: var(--space-16);
}
.st-plan__campaign {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-8);
}
.st-plan__off {
font-size: var(--type-small-size);
line-height: 1.6;
}
.st-plan__price,
.st-price__fig {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: var(--space-8);
}
.st-plan__unit {
font-size: 15px;
color: var(--text-muted);
}
.st-plan__noprice {
margin: 0;
font-size: 17px;
line-height: 1.7;
font-weight: var(--weight-semibold);
}
.st-plan__figure {
display: flex;
flex-direction: column;
gap: var(--space-4);
}
.st-plan__charged {
display: flex;
flex-direction: column;
gap: 2px;
}
.st-plan__vat {
margin: 0;
font-size: 14px;
line-height: 1.6;
color: var(--text-muted);
}
.st-plan__trial {
margin: 0;
font-size: 15px;
line-height: 1.6;
color: var(--text-heading);
font-weight: var(--weight-semibold);
}
.st-termsx {
gap: var(--space-16);
}
.st-termsx__title {
margin: 0;
font-size: 20px;
line-height: 1.4;
font-weight: var(--weight-bold);
color: var(--text-heading);
}
.st-termsx__card {
border-radius: var(--radius-card);
background: var(--surface-card);
color: var(--text-ink);
}
.st-termsx__rows {
padding: 0 var(--pad) var(--space-4);
}
.st-termsx__head,
.st-termsx__row {
display: grid;
grid-template-columns: minmax(0, 1.1fr) repeat(var(--plans, 2), minmax(0, 1fr));
column-gap: var(--space-12);
}
.st-termsx__head {
padding-block: 10px;
font-size: 14px;
line-height: 1.4;
font-weight: var(--weight-semibold);
color: var(--text-muted);
}
.st-termsx__row {
align-items: baseline;
padding-block: 11px;
font-size: 15px;
line-height: 1.4;
border-block-start: 1px solid var(--border-hairline);
}
.st-termsx__num {
text-align: end;
font-variant-numeric: tabular-nums;
}
.st-feature {
display: flex;
flex-direction: column;
gap: 2px;
padding-block: var(--space-12);
}
.st-feature + .st-feature {
border-block-start: 1px solid var(--border-hairline);
}
.st-feature > p {
margin: 0;
}
.st-feature__name {
margin: 0;
font-size: 15px;
line-height: 1.4;
font-weight: var(--weight-semibold);
}
a.st-feature__link:is(:link, :visited) {
color: var(--accent);
text-decoration: none;
}
a.st-feature__link:hover {
color: var(--accent-hover);
text-decoration: underline;
}
a.st-feature__link:focus-visible {
outline: 2px solid var(--focus-ring);
outline-offset: 2px;
border-radius: 2px;
}
.st-feature__price {
font-size: 14px;
line-height: 1.6;
font-weight: var(--weight-medium);
color: var(--text-ink);
font-variant-numeric: tabular-nums;
}
.st-fgroups {
display: flex;
flex-direction: column;
gap: var(--space-24);
}
.st-fgroup {
display: flex;
flex-direction: column;
gap: var(--space-8);
}
.st-fgroup > p {
margin: 0;
}
.st-fgroup__title {
margin: 0;
font-size: 18px;
line-height: 1.4;
font-weight: var(--weight-bold);
color: var(--text-heading);
}
.st-card--recessed {
background: var(--surface-recessed);
}
.st-plan__was,
.st-terms__was {
color: var(--text-muted);
font-weight: var(--weight-regular, 400);
}
.st-plan__was {
font-size: 15px;
line-height: 1.5;
}
.st-terms__was {
font-size: 14px;
}
.st-struck {
text-decoration-thickness: 1px;
}
.st-terms__stack {
display: flex;
flex-direction: column;
align-items: flex-end;
}
.st-faq {
display: flex;
flex-direction: column;
gap: var(--space-8);
}
.st-faq__item {
display: flex;
flex-direction: column;
gap: var(--space-4);
padding-block: var(--space-8);
scroll-margin-block-start: var(--space-24);
}
.st-faq__item + .st-faq__item {
border-block-start: 1px solid var(--border-hairline);
}
.st-plans-failed {
display: flex;
flex-direction: column;
gap: var(--space-12);
}
@media (max-width: 743.98px) {
.st-plans-failed .ctl-btn,
.st-signup__demo .ctl-btn,
.st-price__cta .ctl-btn {
display: flex;
inline-size: 100%;
}
}
.st-contact {
display: flex;
flex-direction: column;
gap: var(--iair);
}
@media (min-width: 744px) {
.st-contact {
display: grid;
grid-template-columns: minmax(0, 1fr) 440px;
align-items: start;
gap: 32px;
}
}
@media (min-width: 1024px) {
.st-contact {
grid-template-columns: minmax(0, 1fr) 480px;
gap: 48px;
}
}
.st-form .ctl-btn--primary:disabled {
color: var(--text-muted);
}
.st-form {
display: flex;
flex-direction: column;
gap: var(--space-16);
padding: var(--pad);
border-radius: var(--radius-sheet);
background: var(--surface-card);
color: var(--text-ink);
box-shadow: var(--shadow-elev);
}
.st-form__trap {
position: absolute;
inline-size: 1px;
block-size: 1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
.st-form__failed {
display: flex;
align-items: center;
gap: var(--space-8);
margin: 0;
font-size: 15px;
color: var(--status-danger);
}
.st-form__failed > svg {
flex: none;
}
.st-form--sent {
gap: 0;
}
.st-form__sent {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-12);
padding: var(--space-32) var(--space-16);
text-align: center;
}
.st-form__sent-title {
margin: 0;
font-size: 18px;
line-height: 1.4;
font-weight: 700;
color: var(--text-heading);
}
.st-form__sent-title:focus {
outline: none;
}
.st-form__sent-title:focus-visible {
outline: 2px solid var(--focus-ring);
outline-offset: 2px;
}
.st-form__sent-next {
margin: 0;
font-size: 15px;
line-height: 1.7;
color: var(--text-muted);
}
.st-signup {
padding: var(--space-16);
}
.st-signup__steps {
display: flex;
flex-direction: column;
gap: var(--space-32);
margin: 0;
padding: 0;
list-style: none;
}
.st-signup__step {
display: flex;
align-items: flex-start;
gap: var(--space-16);
}
.st-signup__n {
min-inline-size: 32px;
font-size: 40px;
line-height: 1;
font-weight: var(--weight-bold);
font-variant-numeric: tabular-nums;
color: var(--text-gold);
}
.st-signup__text {
display: flex;
flex-direction: column;
gap: var(--space-4);
min-inline-size: 0;
padding-block-start: var(--space-4);
}
.st-signup__link {
align-self: flex-start;
padding: var(--space-8) var(--space-12);
border-radius: var(--radius-control);
background: var(--surface-recessed);
font-size: 15px;
font-weight: var(--weight-semibold);
}
@media (min-width: 744px) {
.st-signup {
padding: var(--space-32);
}
}
@media (min-width: 744px) {
.st-signup__steps {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--space-24);
}
}
@media (min-width: 1024px) {
.st-signup__steps {
gap: var(--space-32);
}
}
.st-bring {
margin: 0;
padding: var(--space-4) var(--space-16);
list-style: none;
border-radius: var(--radius-card);
background: var(--surface-card);
}
.st-bring__row {
box-sizing: content-box;
display: flex;
align-items: center;
gap: var(--space-12);
min-block-size: var(--hit-min);
font-size: 15px;
}
.st-bring__row + .st-bring__row {
border-block-start: 1px solid var(--border-hairline);
}
@media (min-width: 744px) {
.st-bring {
display: flex;
flex-wrap: wrap;
gap: var(--space-12) var(--space-32);
padding: var(--space-24);
}
.st-bring__row {
white-space: nowrap;
}
.st-bring__row + .st-bring__row {
border-block-start: 0;
}
}
.st-bring__check {
color: var(--status-success);
}
.st-bring__check:lang(en) {
translate: 0 -1.25px;
}
.st-about {
padding: var(--space-16);
}
@media (min-width: 744px) {
.st-about {
padding: 40px;
}
}
.st-prose {
display: flex;
flex-direction: column;
gap: 20px;
max-inline-size: 36em;
}
.st-prose > p {
margin: 0;
font-size: 17px;
line-height: 1.8;
color: var(--text-ink);
}
.st-talk {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--space-16);
}
.st-talk__lead {
margin: 0;
font-size: 17px;
line-height: 1.8;
color: var(--text-muted);
}
.st-legal {
padding: var(--space-16);
}
@media (min-width: 744px) {
.st-legal {
padding: 40px;
}
}
.st-legal__text {
display: flex;
flex-direction: column;
gap: 32px;
max-inline-size: 640px;
}
.st-legal__section {
display: flex;
flex-direction: column;
gap: var(--space-12);
}
.st-legal__title {
margin: 0;
font-size: 22px;
line-height: 1.4;
font-weight: var(--weight-bold);
color: var(--text-heading);
}
@media (min-width: 744px) {
.st-legal__title {
font-size: 24px;
}
}
.st-legal__p {
margin: 0;
font-size: 17px;
line-height: 1.8;
color: var(--text-ink);
}
.st-legal__version {
margin: 0;
font-size: 14px;
line-height: 1.7;
color: var(--text-muted);
}
.st-holder {
max-inline-size: 512px;
}
.st-holder__row {
display: flex;
justify-content: space-between;
gap: var(--space-16);
padding: 10px 0;
border-block-end: 1px solid var(--border-hairline);
font-size: 15px;
line-height: 1.6;
}
.st-holder__label {
color: var(--text-muted);
}
.st-holder__value {
text-align: end;
min-inline-size: 0;
overflow-wrap: anywhere;
}
.st-holder__value a:is(:link, :visited, :hover, :focus, :active) {
color: inherit;
text-decoration: none;
}
.st-contact__ways {
display: flex;
flex-direction: column;
gap: 24px;
min-inline-size: 0;
}
.st-contact__holder {
padding: var(--space-16);
}
@media (min-width: 744px) {
.st-contact__holder {
padding: 24px;
}
}
.st-holder-block {
display: flex;
flex-direction: column;
gap: var(--space-12);
}
.st-holder-block .st-h3 {
font-size: 20px;
line-height: 1.4;
font-weight: var(--weight-bold);
}
@media (min-width: 744px) {
.st-holder-block .st-h3 {
font-size: 22px;
}
}
.st-holder-block__note {
margin: 0;
font-size: 14px;
line-height: 1.7;
color: var(--text-muted);
}
.st-nf__head {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--space-16);
}
.st-nf__lift {
box-sizing: border-box;
max-inline-size: 640px;
}
.st-page--home .st-main {
padding-inline: var(--g);
}
.st-home {
display: flex;
flex-direction: column;
gap: var(--air);
max-inline-size: 1056px;
margin-inline: auto;
padding-block: var(--air);
}
.st-hero {
container-type: inline-size;
display: flex;
flex-direction: column;
gap: 40px;
padding: 24px var(--g) 0;
}
.st-hero__copy {
display: flex;
flex-direction: column;
gap: 20px;
min-inline-size: 0;
}
.st-hero__lead {
max-inline-size: 30em;
}
.st-hero__count {
margin: 0;
font-size: var(--type-small-size);
line-height: 1.6;
color: var(--text-muted);
}
@property --st-hero-a {
syntax: '<length>';
inherits: false;
initial-value: 0px;
}
.st-hero__pic {
--st-hero-a: 100cqi;
--k: tan(atan2(var(--st-hero-a), 540px));
position: relative;
flex: none;
inline-size: calc(540px * var(--k));
block-size: calc(700px * var(--k));
}
.st-hero__pic::after {
content: '';
position: absolute;
inset-block-end: 0;
inset-inline-start: 0;
inline-size: calc(390px * var(--k));
block-size: 56px;
background: linear-gradient(to bottom, transparent, var(--brand-lapis-deep));
pointer-events: none;
}
.st-stage {
--phone-w: 390px;
--phone-h: 700px;
--stamp: 232px;
--tilt: -7deg;
position: absolute;
inset-block-start: 0;
inset-inline-start: 0;
inline-size: 540px;
block-size: 700px;
transform: scale(var(--k));
transform-origin: top right;
}
[dir='ltr'] .st-stage {
transform-origin: top left;
}
.st-stage > .st-phone {
position: absolute;
inset-block-start: 0;
inset-inline-start: 0;
}
.st-stage > .st-stamp {
position: absolute;
inset-inline-end: 0;
inset-block-end: 56px;
margin: 0;
}
.st-hero__cap {
margin: 0;
padding-block-start: var(--space-12);
font-size: var(--type-caption-size);
line-height: var(--type-caption-leading);
font-weight: var(--type-caption-weight);
color: var(--text-muted);
}
@media (min-width: 744px) {
.st-hero {
gap: var(--space-48);
padding: 56px var(--g) 0;
}
.st-hero__copy {
max-inline-size: 560px;
}
.st-hero__pic {
--st-hero-a: min(100cqi, 349.92px + (100vw - 390px) * 0.07236);
margin-inline: auto;
}
.st-hero__cap {
display: none;
}
}
@media (min-width: 1024px) {
.st-hero {
flex-direction: row;
align-items: center;
gap: var(--space-64);
box-sizing: content-box;
max-inline-size: 1056px;
margin-inline: auto;
padding: 72px var(--g) 0;
}
.st-hero__copy {
flex: 1 1 0;
max-inline-size: none;
padding-block-end: 72px;
}
.st-hero__pic {
--st-hero-a: min(100cqi - 564px, 540px);
margin-inline: 0;
}
}
@media (min-width: 744px) and (max-width: 1023.98px) and (min-aspect-ratio: 1/1) {
.st-hero {
flex-direction: row;
align-items: flex-start;
gap: var(--space-48);
padding: 24px var(--g) 0;
}
.st-hero__copy {
flex: 1 1 0;
gap: var(--space-16);
max-inline-size: none;
padding-block-end: 32px;
}
.st-hero__pic {
--st-hero-a: min(100cqi - 468px, 540px);
margin-inline: 0;
}
}
@media (min-width: 1388px) {
.st-hero {
gap: var(--space-96);
}
.st-hero__pic {
--k: 1;
inline-size: 390px;
}
}
.st-doors {
display: flex;
flex-direction: column;
gap: var(--space-8);
}
.st-doors .ctl-btn,
.st-doors .ctl-btn-wrap {
display: flex;
inline-size: 100%;
}
@media (min-width: 1024px) {
.st-hero .st-doors {
flex-direction: row;
align-items: flex-start;
gap: var(--space-12);
}
.st-hero .st-doors .ctl-btn,
.st-hero .st-doors .ctl-btn-wrap {
display: inline-flex;
inline-size: auto;
}
.st-hero .st-doors__demo {
min-inline-size: 200px;
}
}
.st-phone {
box-sizing: border-box;
inline-size: var(--phone-w);
block-size: var(--phone-h);
padding: 6px 6px 0;
overflow: hidden;
border-start-start-radius: var(--radius-sheet);
border-start-end-radius: var(--radius-sheet);
background: var(--brand-lapis-black);
box-shadow: 0 0 0 1px var(--st-gold-hair);
}
.st-phone__screen {
block-size: 100%;
overflow: hidden;
border-radius: 18px 18px 0 0;
background: var(--surface-ground);
color: var(--text-ink);
}
.st-phone__page {
display: flex;
flex-direction: column;
gap: var(--space-12);
padding: 32px var(--space-8) var(--space-16);
}
.st-phone__arch {
position: relative;
display: flex;
align-items: flex-end;
block-size: 170px;
overflow: hidden;
border-radius: 0 0 var(--radius-card) var(--radius-card);
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 1000' width='100' height='1000' preserveAspectRatio='none'%3E%3Cpath d='M0 1000L0 26C0 11.4 21.4 3.25 50 0C78.6 3.25 100 11.4 100 26L100 1000Z'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 1000' width='100' height='1000' preserveAspectRatio='none'%3E%3Cpath d='M0 1000L0 26C0 11.4 21.4 3.25 50 0C78.6 3.25 100 11.4 100 26L100 1000Z'/%3E%3C/svg%3E");
-webkit-mask-size: 100% auto;
mask-size: 100% auto;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
.st-phone__arch > .vp-ground__tile,
.st-phone__arch > .vp-ground__light {
z-index: -1;
}
.st-phone__sign {
position: relative;
display: flex;
flex-direction: column;
gap: var(--space-4);
padding: 12px 16px 14px;
color: var(--text-on-accent);
}
.st-phone__name {
margin: 0;
font-size: calc(19.1px + 0.02286 * (var(--phone-w) + 12px));
font-size: round(nearest, calc(19.1px + 0.02286 * (var(--phone-w) + 12px)), 1px);
line-height: 1.12;
font-weight: var(--weight-extrabold);
}
.st-phone__meta {
margin: 0;
font-size: var(--type-small-size);
line-height: 1.6;
font-weight: var(--weight-medium);
}
.st-phone__open {
display: flex;
align-items: center;
gap: var(--space-8);
min-block-size: 28px;
font-size: 15px;
font-weight: var(--weight-medium);
}
.st-phone__panel {
display: flex;
flex-direction: column;
gap: var(--space-16);
padding: var(--space-20);
border-radius: var(--radius-card);
background: var(--surface-raised);
outline: 1.5px solid var(--border-control);
outline-offset: -1.5px;
box-shadow: var(--shadow-overlay);
}
.st-phone__kicker {
margin: 0;
font-size: var(--type-small-size);
line-height: 1.6;
font-weight: var(--weight-medium);
color: var(--text-muted);
}
.st-phone__headline {
margin: 0;
font-size: 18px;
line-height: 1.4;
font-weight: var(--weight-bold);
color: var(--text-heading);
}
.st-phone__party {
display: flex;
align-items: center;
gap: var(--space-8);
font-size: 15px;
line-height: 1.4;
font-weight: var(--weight-medium);
}
.st-phone__actions {
display: flex;
gap: var(--space-8);
}
.st-phone__actions > .ctl-btn {
flex: 1 1 0;
}
.st-phone__next {
margin: 0;
padding-block-start: var(--space-24);
font-size: 18px;
line-height: 1.3;
font-weight: var(--weight-bold);
color: var(--text-heading);
}
.st-phone__slots {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 6px;
}
.st-phone__slots .ctl-slot--sample {
inline-size: auto;
}
.st-phone .ctl-btn--primary {
min-block-size: var(--btn-primary-phone);
}
.st-phone .ctl-btn--ghost {
min-block-size: var(--btn-ghost-phone);
}
.st-phone .ctl-btn,
.st-phone .ctl-chip,
.st-phone .ctl-slot {
cursor: default;
}
.st-stamp {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-12);
padding: 20px 24px 18px;
border-radius: var(--radius-sheet);
background: var(--surface-raised);
color: var(--text-ink);
box-shadow: var(--shadow-elev);
outline: 1.5px solid var(--gold-selected-border);
outline-offset: -7px;
}
.st-stamp .ctl-stamp {
inline-size: var(--stamp);
block-size: var(--stamp);
}
.st-stamp__line {
display: flex;
align-items: center;
gap: 10px;
}
.st-stamp__ref {
font-size: 15px;
font-weight: var(--weight-semibold);
white-space: nowrap;
}
.st-win {
display: flex;
flex-direction: column;
margin: 0;
overflow: clip;
border-radius: var(--radius-sheet);
background: var(--surface-card);
color: var(--text-ink);
box-shadow: var(--shadow-elev);
}
.st-win__bar {
display: flex;
align-items: center;
gap: 10px;
padding: 14px var(--win-pad);
border-block-end: 1px solid var(--border-hairline);
}
.st-win__dots {
display: flex;
gap: 6px;
}
.st-win__dots > span {
inline-size: 8px;
block-size: 8px;
border-radius: 50%;
background: var(--border-hairline);
}
.st-win__title {
flex: 1 1 auto;
min-inline-size: 0;
font-size: 15px;
font-weight: var(--weight-semibold);
color: var(--text-heading);
}
.st-win__body {
display: flex;
flex-direction: column;
gap: 14px;
padding: var(--win-pad);
}
.st-floor__head {
display: flex;
flex-direction: column;
gap: var(--space-4);
}
.st-floor__date {
font-size: 15px;
font-weight: var(--weight-semibold);
}
.st-floor__stats {
display: flex;
flex-wrap: wrap;
gap: var(--space-4) var(--space-16);
font-size: var(--type-small-size);
color: var(--text-muted);
}
.st-floor__grid {
display: flex;
flex-direction: column;
gap: 14px;
}
.st-floor__plan {
display: flex;
flex-direction: column;
gap: var(--space-12);
}
@media (min-width: 744px) {
.st-floor__grid {
display: grid;
grid-template-columns: clamp(300px, 120px + 23.4375vw, 360px) minmax(0, 1fr);
align-items: start;
gap: clamp(32px, 8px + 3.125vw, 40px);
}
.st-floor__rows {
grid-column: 1;
grid-row: 1;
}
.st-floor__plan {
grid-column: 2;
grid-row: 1;
}
}
.st-floor__grid[data-switched] .st-zone {
animation: st-as-fade 200ms ease-out;
}
@keyframes st-as-fade {
from {
opacity: 0;
}
}
@media (prefers-reduced-motion: reduce) {
.st-floor__grid[data-switched] .st-zone {
animation: none;
}
}
.st-roombox {
container-type: inline-size;
}
@property --st-rw {
syntax: '<length>';
inherits: false;
initial-value: 640px;
}
.st-room {
--st-rw: min(100cqi, 640px);
--rt: calc(15px * tan(atan2(640px, var(--st-rw))));
display: block;
inline-size: 100%;
max-inline-size: 640px;
block-size: auto;
font-family: inherit;
color: var(--text-muted);
}
.rm-ground {
fill: var(--surface-recessed);
}
.rm-top--occupied {
fill: var(--accent);
stroke: var(--accent);
}
.rm-top--booked {
fill: var(--surface-card);
stroke: var(--border-control);
}
.rm-top--free {
fill: var(--status-success-tint);
stroke: var(--status-success);
}
.rm-top--late {
fill: var(--status-danger-tint);
stroke: var(--status-danger);
}
.rm-sets--on {
color: var(--text-on-accent);
--rm-sets-o: 0.7;
}
.rm-mark {
fill: none;
stroke: var(--accent);
stroke-width: 2.5;
stroke-dasharray: 7 6;
}
.rm-word {
font-size: var(--rt, 28px);
font-weight: var(--weight-semibold);
}
.rm-num {
font-size: var(--rt, 28px);
font-weight: var(--weight-bold);
font-variant-numeric: tabular-nums;
paint-order: stroke;
stroke-width: 6px;
stroke-linejoin: round;
}
.rm-word--occupied {
fill: var(--accent);
}
.rm-word--booked {
fill: var(--text-heading);
}
.rm-word--free {
fill: var(--status-success);
}
.rm-word--late {
fill: var(--status-danger);
}
.rm-num--occupied {
fill: var(--text-on-accent);
stroke: var(--accent);
}
.rm-num--booked {
fill: var(--text-heading);
stroke: var(--surface-card);
}
.rm-num--free {
fill: var(--text-heading);
stroke: var(--status-success-tint);
}
.rm-num--late {
fill: var(--text-heading);
stroke: var(--status-danger-tint);
}
.st-legend {
display: flex;
flex-wrap: wrap;
gap: var(--space-8) var(--space-16);
}
.st-legend__key {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: var(--type-caption-size);
font-weight: var(--weight-medium);
color: var(--text-muted);
white-space: nowrap;
}
.st-legend__swatch {
inline-size: 14px;
block-size: 14px;
border-radius: 4px;
}
.st-legend__swatch--occupied {
background: var(--accent);
}
.st-legend__swatch--late {
background: var(--status-danger-tint);
box-shadow: inset 0 0 0 2px var(--status-danger);
}
.st-legend__swatch--booked {
background: var(--surface-card);
box-shadow: inset 0 0 0 2px var(--border-control);
}
.st-legend__swatch--free {
background: var(--status-success-tint);
box-shadow: inset 0 0 0 2px var(--status-success);
}
.st-guestpair {
display: flex;
flex-direction: column;
gap: var(--space-40);
}
.st-guestpair__note {
margin: 0;
font-size: var(--type-caption-size);
line-height: var(--type-caption-leading);
font-weight: var(--type-caption-weight);
color: var(--text-muted);
}
@media (min-width: 744px) {
.st-guestpair {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
align-items: center;
gap: 32px;
}
.st-guestpair__note {
font-size: 17px;
line-height: 1.8;
font-weight: var(--weight-regular);
}
}
@media (min-width: 1024px) {
.st-guestpair {
gap: 56px;
}
}
.st-guest__who {
display: flex;
align-items: center;
gap: var(--space-12);
}
.st-guest__avatar {
display: inline-flex;
flex: none;
align-items: center;
justify-content: center;
inline-size: 48px;
block-size: 48px;
border-radius: 50%;
background: var(--gold-selected-bg);
box-shadow: inset 0 0 0 2px var(--gold-selected-border);
font-size: 18px;
font-weight: var(--weight-bold);
color: var(--text-heading);
}
.st-guest__name {
font-size: 18px;
font-weight: var(--weight-bold);
color: var(--text-heading);
}
.st-guest__facts {
display: flex;
flex-direction: column;
}
.st-guest__note {
margin: 0;
padding: var(--space-12) 14px;
border-radius: var(--radius-control);
background: var(--surface-recessed);
font-size: 15px;
line-height: 1.7;
}
.st-chips--badges {
gap: var(--space-8);
}
.st-as {
display: flex;
flex-direction: column;
gap: 14px;
font-size: 16px;
}
.st-as__bar {
box-sizing: border-box;
min-block-size: 64px;
padding: 10px 24px;
}
.st-as__chips {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: var(--space-8);
}
.st-as__body {
display: grid;
grid-template-columns: minmax(0, 1fr) 488px;
block-size: 540px;
}
.st-as__conv {
grid-column: 1;
grid-row: 1;
display: flex;
flex-direction: column;
min-inline-size: 0;
min-block-size: 0;
}
.st-as__plan {
grid-column: 2;
grid-row: 1;
display: flex;
flex-direction: column;
justify-content: center;
gap: 10px;
min-inline-size: 0;
padding: 20px 24px;
border-inline-start: 1px solid var(--border-hairline);
}
.st-as__cap {
margin: 0;
font-size: 15px;
line-height: 1.5;
font-weight: var(--weight-semibold);
color: var(--text-heading);
}
.st-as__plan--phone,
.st-as__room--phone,
.st-as__legend--out {
display: none;
}
.st-as__pane {
flex: 1 1 0;
display: grid;
grid-template-rows: minmax(0, 1fr);
min-block-size: 0;
padding: 24px 24px 16px;
overflow: hidden;
mask-image: linear-gradient(to bottom, transparent 0, currentColor 24px);
}
.st-as__log {
grid-area: 1 / 1;
display: flex;
flex-direction: column;
justify-content: flex-end;
gap: 10px;
min-block-size: 0;
}
.st-as__log--size {
display: none;
visibility: hidden;
}
.st-as__composer {
flex: none;
display: flex;
align-items: flex-end;
gap: var(--space-8);
padding: 12px 24px 24px;
border-block-start: 1px solid var(--border-hairline);
}
.st-as__field {
flex: 1 1 0;
min-inline-size: 0;
}
.st-as__me {
align-self: flex-end;
box-sizing: content-box;
max-inline-size: 82%;
padding: 9px 14px;
border-radius: var(--radius-card);
border-end-end-radius: var(--radius-inner);
background: var(--accent-tint);
color: var(--text-ink);
font-size: 15px;
line-height: 1.7;
}
.st-as__yes {
align-self: flex-end;
padding: 5px 18px;
border-radius: var(--radius-card);
border-end-end-radius: var(--radius-inner);
background: var(--accent);
color: var(--text-on-accent);
font-size: 15px;
line-height: 1.6;
font-weight: var(--weight-bold);
}
.st-as__it {
display: flex;
align-self: flex-start;
align-items: flex-start;
gap: 6px;
box-sizing: content-box;
max-inline-size: 86%;
padding: 9px 14px;
border-radius: var(--radius-card);
border-end-start-radius: var(--radius-inner);
background: var(--surface-recessed);
color: var(--text-ink);
font-size: 15px;
line-height: 1.7;
}
.st-as__check {
display: inline-flex;
flex: none;
padding-block-start: 4.5px;
color: var(--status-success);
}
.st-as__check:lang(en) {
padding-block-start: 3px;
}
.st-as__turn {
display: flex;
flex-direction: column;
align-self: stretch;
}
.st-as__card {
display: flex;
flex-direction: column;
gap: var(--space-8);
padding: 14px var(--space-16);
border-radius: var(--radius-card);
background: var(--surface-card);
box-shadow: inset 0 0 0 1px var(--border-hairline);
}
.st-as__card--wait {
box-shadow: inset 0 0 0 2px var(--accent);
}
.st-as__cardhead {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-12);
}
.st-as__badge {
flex: none;
white-space: nowrap;
}
.st-as__cardtitle {
font-size: var(--type-small-size);
font-weight: var(--weight-semibold);
color: var(--text-muted);
}
.st-as__lines {
display: flex;
flex-direction: column;
}
.st-as__line {
font-size: 15px;
line-height: 1.6;
font-weight: var(--weight-medium);
color: var(--text-ink);
}
.st-as__line--first {
font-size: 16px;
font-weight: var(--weight-semibold);
color: var(--text-heading);
}
.st-as__arrow {
display: inline-block;
inline-size: 1em;
block-size: 1em;
vertical-align: -0.125em;
margin-inline: 0.25em;
}
.st-as__box {
display: flex;
flex-direction: column;
gap: 2px;
margin-block-start: 10px;
padding: 10px var(--space-12);
border-radius: var(--radius-control);
background: var(--surface-recessed);
}
.st-as__boxhead {
font-size: var(--type-caption-size);
line-height: 1.5;
font-weight: var(--weight-semibold);
color: var(--text-muted);
}
.st-as__pair {
display: flex;
justify-content: space-between;
gap: var(--space-12);
font-size: 15px;
line-height: 1.7;
}
.st-as__strong {
font-weight: var(--weight-semibold);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.st-as__tell {
padding-block-start: var(--space-4);
font-size: var(--type-small-size);
line-height: 1.6;
color: var(--text-ink);
}
.st-as__gate {
margin: 0;
padding-block-start: 10px;
border-block-start: 1px solid var(--border-hairline);
font-size: var(--type-small-size);
line-height: 1.6;
color: var(--text-muted);
}
.st-as__rule {
margin: 0;
font-size: var(--type-small-size);
line-height: 1.6;
color: var(--text-muted);
}
@media (min-width: 744px) and (max-width: 1023.98px) {
.st-as__body {
grid-template-columns: minmax(0, 1fr) round(46%, 1px);
block-size: 580px;
}
}
@media (max-width: 743.98px) {
.st-as__bar {
min-block-size: 0;
padding: 12px var(--space-16);
}
.st-as__bar > .st-win__dots,
.st-as__name {
display: none;
}
.st-as__chips {
justify-content: flex-start;
}
.st-as__body {
display: flex;
flex-direction: column;
block-size: auto;
}
.st-as__plan {
padding: 14px var(--space-16);
border-inline-start: 0;
border-block-end: 1px solid var(--border-hairline);
}
.st-as__plan--desk,
.st-as__room--desk,
.st-as__legend--in {
display: none;
}
.st-as__plan--phone {
display: flex;
}
.st-as__room--phone,
.st-as__legend--out {
display: block;
}
.st-as__pane {
flex: none;
grid-template-rows: auto;
padding: 24px var(--space-16) 16px;
}
.st-as__log--size {
display: flex;
}
.st-as__composer {
padding: 12px var(--space-16) 16px;
}
}
.st-evening {
margin-inline: calc(-1 * var(--g));
padding: var(--space-8) var(--g) var(--space-40);
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-padding-inline: var(--g);
scrollbar-width: none;
}
.st-evening::-webkit-scrollbar {
display: none;
}
.st-evening__cards {
display: flex;
gap: var(--space-16);
inline-size: max-content;
}
.st-evening__card {
display: flex;
flex: none;
flex-direction: column;
gap: 14px;
box-sizing: border-box;
inline-size: 332px;
padding: var(--space-16);
border-radius: var(--radius-sheet);
background: var(--surface-card);
color: var(--text-ink);
box-shadow: var(--shadow-elev);
scroll-snap-align: start;
}
.st-evening__cap {
margin: 0;
font-size: 15px;
font-weight: var(--weight-semibold);
color: var(--text-heading);
}
@media (min-width: 744px) {
.st-evening {
margin-inline: 0;
padding: 0;
overflow: visible;
}
.st-evening__cards {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-24);
inline-size: auto;
}
.st-evening__card {
inline-size: auto;
padding: var(--space-20);
}
}
@media (min-width: 1024px) {
.st-evening__cards {
gap: var(--space-32);
}
}
.st-calc {
display: grid;
grid-template-columns: minmax(0, 1fr);
align-items: start;
gap: var(--space-24);
padding: var(--space-20);
border-radius: var(--radius-sheet);
background: var(--surface-card);
color: var(--text-ink);
box-shadow: var(--shadow-elev);
}
@media (min-width: 744px) {
.st-calc {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-40);
padding: var(--space-32);
}
}
.st-calc__fields,
.st-calc__result {
display: flex;
flex-direction: column;
gap: var(--space-16);
min-inline-size: 0;
}
.st-calc__fields {
gap: 20px;
}
.st-calc__row {
box-sizing: content-box;
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-16);
min-block-size: 56px;
padding-block: var(--space-4);
border-block-end: 1px solid var(--border-hairline);
}
.st-calc__label {
font-size: 15px;
line-height: 1.5;
font-weight: var(--weight-semibold);
color: var(--text-heading);
}
.st-calc__box {
display: flex;
flex-direction: column;
gap: var(--space-8);
padding: var(--space-24);
border-radius: var(--radius-card);
background: var(--surface-recessed);
container-type: inline-size;
}
.st-calc__out {
margin: 0;
font-size: var(--type-small-size);
font-weight: var(--weight-semibold);
color: var(--text-muted);
}
.st-calc__has {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 10px;
}
.st-calc__has .st-figure {
font-size: min(var(--st-figure), calc(166cqi / var(--calc-n, 1)));
white-space: nowrap;
}
.st-calc__unit {
font-size: 17px;
font-weight: var(--weight-semibold);
}
.st-steps {
display: flex;
flex-direction: column;
gap: var(--space-24);
margin: 0;
padding: 0;
list-style: none;
}
.st-step {
display: grid;
grid-template-columns: 32px minmax(0, 1fr);
gap: var(--space-8) var(--space-12);
align-items: start;
}
.st-step__n {
position: relative;
z-index: 1;
display: inline-flex;
grid-row: span 2;
align-items: center;
justify-content: center;
inline-size: 32px;
block-size: 32px;
border-radius: var(--radius-full);
background: var(--surface-card);
box-shadow: inset 0 0 0 1.5px var(--border-control);
font-size: 15px;
font-weight: var(--weight-semibold);
color: var(--text-heading);
}
.st-step__text {
display: flex;
flex-direction: column;
gap: var(--space-4);
min-inline-size: 0;
}
.st-step__text > .ctl-badge {
align-self: flex-start;
}
.st-offline__title strong {
font-weight: var(--weight-extrabold);
}
.st-offline__soon {
align-self: flex-start;
}
.st-moments {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--space-16);
margin: 0;
padding: 0;
list-style: none;
}
@media (min-width: 744px) {
.st-moments {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-24);
}
}
.st-moment {
gap: var(--space-8);
}
.st-moment > .ctl-badge {
align-self: flex-start;
}
.st-feature-soon {
display: flex;
flex-direction: column;
gap: 8px;
}
.st-moment__at {
margin: 0;
font-size: var(--type-small-size);
line-height: 1.6;
font-weight: var(--weight-semibold);
color: var(--text-gold);
}
.st-moment__features {
display: flex;
flex-wrap: wrap;
gap: var(--space-8);
margin: 0;
padding: 0;
list-style: none;
}
.st-moment__features > li {
display: flex;
}
.st-pill {
position: relative;
display: inline-flex;
align-items: center;
gap: var(--space-8);
min-block-size: 40px;
padding-inline: 14px;
border-radius: var(--radius-full);
box-shadow: inset 0 0 0 1px var(--border-control);
color: var(--accent);
font-size: 15px;
font-weight: var(--weight-semibold);
text-decoration: none;
}
.st-pill::before {
content: '';
position: absolute;
inset-block: -2px;
inset-inline: 0;
}
@media (hover: hover) {
.st-pill:hover {
background: var(--surface-recessed);
}
}
.st-pill:active {
box-shadow: inset 0 0 0 2px var(--accent);
}
.st-pill:focus-visible {
outline: 2px solid var(--focus-ring);
outline-offset: 2px;
}
.st-door {
display: inline-flex;
align-items: center;
align-self: flex-start;
min-block-size: var(--hit-min);
font-size: 15px;
}
.st-findex {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--space-24);
}
@media (min-width: 1024px) {
.st-findex {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
.st-findex__group {
display: flex;
flex-direction: column;
gap: var(--space-8);
}
.st-facts {
margin: 0;
padding: var(--space-4) var(--space-16);
list-style: none;
border-radius: var(--radius-card);
background: var(--surface-card);
}
.st-facts__row {
padding-block: var(--space-12);
font-size: 15px;
line-height: 1.7;
}
.st-facts__row + .st-facts__row {
border-block-start: 1px solid var(--border-hairline);
}
.st-feature-who {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--space-16);
}
@media (min-width: 744px) {
.st-feature-who {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.st-feature-who > :only-child {
grid-column: 1 / -1;
}
}
.st-qa {
display: flex;
flex-direction: column;
gap: var(--space-4);
}
.st-qa + .st-qa {
padding-block-start: var(--space-12);
border-block-start: 1px solid var(--border-hairline);
}
.st-talk__doors {
display: flex;
flex-wrap: wrap;
gap: var(--space-12);
}
.st-talk__doors--feature {
flex-direction: column;
}
@media (min-width: 744px) {
.st-talk__doors--feature {
flex-direction: row;
}
}
.st-step__demo {
display: flex;
min-inline-size: 0;
}
.st-step__slots {
display: flex;
gap: 6px;
}
.st-step__sms {
max-inline-size: 260px;
margin: 0;
padding: 10px 14px;
border-radius: var(--radius-card) var(--radius-card) var(--radius-card) var(--radius-inner);
background: var(--surface-recessed);
font-size: 15px;
line-height: 1.6;
}
@media (min-width: 744px) {
.st-card--steps {
padding-block: 10px;
}
.st-steps {
gap: 0;
}
.st-step {
position: relative;
grid-template-columns: 32px minmax(0, 1fr) minmax(0, 1fr);
gap: 20px;
align-items: center;
padding-block: 14px;
}
.st-step__n {
grid-row: auto;
}
.st-step__demo {
display: block;
justify-self: start;
max-inline-size: 100%;
font-size: 16px;
}
.st-step:not(:first-child)::before,
.st-step:not(:last-child)::after {
content: '';
position: absolute;
inset-inline-start: 15.25px;
inline-size: 1.5px;
block-size: calc(50% - 16px);
background: var(--border-hairline);
}
.st-step:not(:first-child)::before {
inset-block-start: 0;
}
.st-step:not(:last-child)::after {
inset-block-end: 0;
}
}
.st-tiles {
--tile-w: calc((100vw - var(--g) - 16px) / 2.5);
--half: calc(100vw - var(--g) - 2 * var(--tile-w) - 16px);
margin-inline: calc(-1 * var(--g));
padding: var(--space-4) var(--g);
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-padding-inline: var(--g);
scrollbar-width: none;
-webkit-mask-image: linear-gradient(to right, transparent 0, color-mix(in srgb, currentColor 35%, transparent) calc(var(--half) / 2), currentColor calc(var(--half) + 8px));
mask-image: linear-gradient(to right, transparent 0, color-mix(in srgb, currentColor 35%, transparent) calc(var(--half) / 2), currentColor calc(var(--half) + 8px));
}
[dir='ltr'] .st-tiles {
-webkit-mask-image: linear-gradient(to left, transparent 0, color-mix(in srgb, currentColor 35%, transparent) calc(var(--half) / 2), currentColor calc(var(--half) + 8px));
mask-image: linear-gradient(to left, transparent 0, color-mix(in srgb, currentColor 35%, transparent) calc(var(--half) / 2), currentColor calc(var(--half) + 8px));
}
.st-tiles::-webkit-scrollbar {
display: none;
}
.st-tiles__track {
display: flex;
align-items: stretch;
gap: var(--space-8);
inline-size: max-content;
}
.st-tiles__cell {
display: grid;
flex: 0 0 var(--tile-w);
scroll-snap-align: start;
}
@media (min-width: 744px) {
.st-tiles {
margin-inline: 0;
padding: 0;
overflow: visible;
-webkit-mask-image: none;
mask-image: none;
}
[dir='ltr'] .st-tiles {
-webkit-mask-image: none;
mask-image: none;
}
.st-tiles__track {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
grid-auto-rows: 1fr;
gap: var(--space-12);
inline-size: auto;
}
}
.st-menuphotos__head {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--space-12);
}
.st-menuphotos {
display: flex;
flex-direction: column;
gap: var(--space-16);
padding: var(--space-12);
border-radius: var(--radius-sheet);
background: var(--surface-card);
color: var(--text-ink);
box-shadow: inset 0 0 0 1px var(--border-hairline);
}
.st-menuphotos__pair {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-8);
}
.st-menuphotos__fig {
display: flex;
flex: none;
flex-direction: column;
gap: 10px;
margin: 0;
}
.st-menuphotos__fig img {
inline-size: 100%;
block-size: auto;
object-fit: cover;
border-radius: var(--radius-card);
}
.st-menuphotos__fig--before {
inline-size: 100%;
}
.st-menuphotos__fig--before img {
aspect-ratio: 915 / 576;
}
.st-menuphotos__fig--after {
inline-size: calc(100% / 1.176);
}
.st-menuphotos__fig--after img {
aspect-ratio: 1;
}
.st-menuphotos__fig figcaption {
font-size: var(--type-small-size);
line-height: 1.5;
font-weight: var(--weight-semibold);
color: var(--text-heading);
}
.st-menuphotos__arrow {
display: inline-flex;
color: var(--text-muted);
transform: rotate(-90deg);
}
[dir='ltr'] .st-menuphotos__arrow {
transform: rotate(90deg);
}
.st-menuphotos__same {
margin: 0;
font-size: 16px;
line-height: 1.7;
font-weight: var(--weight-semibold);
color: var(--text-heading);
}
@media (min-width: 744px) {
.st-menuphotos {
--mp-a: calc((min(100vw - 2 * var(--g), 1056px) - 128px) / 2.176);
gap: var(--space-24);
padding: var(--space-32);
}
.st-menuphotos__pair {
flex-direction: row;
justify-content: center;
gap: 20px;
}
.st-menuphotos__fig--before {
inline-size: calc(var(--mp-a) * 1.176);
}
.st-menuphotos__fig--after {
inline-size: var(--mp-a);
}
.st-menuphotos__fig figcaption {
font-size: 15px;
}
.st-menuphotos__arrow,
[dir='ltr'] .st-menuphotos__arrow {
transform: none;
}
}
.st-support__card {
padding: var(--space-24);
display: flex;
flex-direction: column;
gap: var(--space-8);
}
.st-support__hours {
margin: 0;
font-size: 20px;
line-height: 1.5;
font-weight: var(--weight-bold);
color: var(--text-heading);
}
.st-support__sub {
margin: 0;
font-size: 16px;
line-height: 1.7;
color: var(--text-ink);
}
.st-contact__hours {
padding: var(--space-12) var(--space-16);
}
.st-contact__hours p {
margin: 0;
}
.st-split {
display: flex;
flex-direction: column;
gap: var(--space-16);
}
.st-split__head,
.st-split__body {
display: flex;
flex-direction: column;
gap: var(--space-12);
min-inline-size: 0;
}
@media (min-width: 1024px) {
.st-split {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
align-items: start;
gap: var(--space-48);
}
}
.st-price__cta {
display: flex;
}
.st-price__row,
.st-price__info {
display: contents;
}
@media (min-width: 744px) {
.st-price__row {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--space-16) var(--space-32);
}
.st-price__info {
display: flex;
flex-direction: column;
gap: var(--space-8);
min-inline-size: 0;
}
}
.st-trust {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--space-12);
}
.st-trust__card {
gap: var(--space-4);
}
@media (min-width: 744px) {
.st-trust {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
.st-closing {
padding: var(--air) var(--g);
}
.st-closing__inner {
position: relative;
display: flex;
flex-direction: column;
gap: var(--space-32);
max-inline-size: 1056px;
margin-inline: auto;
}
.st-closing__centre {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-16);
text-align: center;
}
.st-closing__centre .st-lead {
max-inline-size: none;
}
.st-closing__doors {
inline-size: 100%;
max-inline-size: 380px;
margin-inline: auto;
}
@media (prefers-reduced-motion: reduce) {
.st-tiles,
.st-evening {
scroll-behavior: auto;
}
}
.vp-inapp {
display: flex;
flex-direction: column;
gap: var(--space-12);
padding: var(--space-16);
border-radius: var(--radius-card);
background: var(--surface-card);
}
.vp-inapp__head {
display: flex;
align-items: flex-start;
gap: var(--space-12);
}
.vp-inapp__mark {
display: block;
flex: none;
inline-size: 48px;
block-size: 48px;
overflow: hidden;
border-radius: var(--radius-control);
}
.vp-inapp__words {
display: flex;
flex: 1 1 0;
flex-direction: column;
gap: 2px;
min-inline-size: 0;
}
.vp-inapp__title {
margin: 0;
font-size: 16px;
line-height: 1.4;
font-weight: var(--weight-semibold);
color: var(--text-heading);
}
.vp-inapp__body {
margin: 0;
font-size: 14px;
line-height: 1.6;
color: var(--text-muted);
}
.vp-inapp__copy {
align-self: flex-start;
padding: 0;
border: 0;
background: none;
font: inherit;
color: inherit;
cursor: pointer;
}
.vp-inapp__done {
font-size: 13px;
color: var(--status-success);
}
#install-ios .vp-sheet__frame {
flex: none;
margin-block-start: auto;
}
.vp-sheet__foot {
padding: var(--space-12) var(--space-20) calc(var(--space-16) + env(safe-area-inset-bottom));
box-shadow: inset 0 1px 0 var(--border-hairline);
}
.vp-install__steps {
display: flex;
flex-direction: column;
gap: var(--space-16);
margin: 0;
padding: 0;
list-style: none;
}
.vp-install__steps li {
display: flex;
align-items: flex-start;
gap: var(--space-12);
color: var(--text-ink);
}
.vp-install__steps svg {
flex: none;
color: var(--accent);
}
.vp-install__after {
margin: 0;
color: var(--text-muted);
}
.nv-picture,
.nv-picture * {
pointer-events: none;
}
.nv-picture__inside {
display: contents;
}
@media (min-width: 744px) and (min-height: 600px) {
.vp-page > .vp-close,
.vp-address .vp-address__go {
display: none;
}
}
@media (min-width: 744px) and (max-height: 599.98px) {
.vp-side {
position: static;
}
.vp-page > .vp-close {
max-inline-size: none;
}
.vp-address .vp-address__go {
inline-size: 100%;
}
}
.vp-chain,
.vp-chain-veil {
position: fixed;
inset: 0;
z-index: var(--layer-sheet);
inline-size: 100%;
block-size: 100%;
border: 0;
}
.vp-chain {
background: transparent;
opacity: 0;
}
.vp-chain.is-ready {
opacity: 1;
}
.vp-chain-veil {
display: grid;
place-items: center;
background: var(--overlay-scrim);
}
html.vp-chain-open {
overflow: hidden;
}
@media (max-width: 359.98px) {
.st-body,
.st-page {
--st-display: 11.111vw; 
--st-title: 8.333vw; 
--st-figure: 13.333vw; 
}
.vp-hero__name {
font-size: calc(0.075 * (100vw + 8px));
font-size: round(nearest, calc(0.075 * (100vw + 8px)), 1px);
}
}
@media (min-width: 360px) and (max-width: 743.98px) {
.vp-hero__name {
font-size: clamp(26px, 19.1px + 0.02286 * (min(100vw, 560px) + 40px - 2 * var(--g)), 52px);
font-size: round(nearest, clamp(26px, 19.1px + 0.02286 * (min(100vw, 560px) + 40px - 2 * var(--g)), 52px), 1px);
}
}
@media (max-height: 499.98px) and (min-aspect-ratio: 3/2) {
.vp-hero__frame,
.vp--photo .vp-hero__frame {
block-size: min(var(--hero-h), 35vh);
block-size: min(var(--hero-h), 35svh);
}
.vp-arch {
-webkit-mask-size: 100% 1000%;
mask-size: 100% 1000%;
}
}
@media (max-height: 499.98px) and (min-aspect-ratio: 3/2) and (min-width: 744px) {
.vp-hero__frame,
.vp--photo .vp-hero__frame {
block-size: min(var(--hero-photo), 35vh);
block-size: min(var(--hero-photo), 35svh);
}
}
html[dir='ltr'] .vp [dir='rtl'] {
text-align: left;
}
@media (min-width: 600px) and (max-width: 743.98px) {
.vp {
max-inline-size: 560px;
margin-inline: auto;
}
}
.st-scene-still {
position: absolute !important;
inline-size: 1px !important;
block-size: 1px !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
clip-path: inset(50%) !important;
white-space: nowrap !important;
}
@media print {
[data-m-clone][data-m-clone],
.st-m-show.st-m-show {
display: none;
}
.st-scene-still {
position: static !important;
inline-size: auto !important;
block-size: auto !important;
overflow: visible !important;
clip-path: none !important;
white-space: normal !important;
}
}
.st-m-pending {
opacity: 0;
transform: translateY(8px);
}
.st-m-in {
transition:
opacity var(--duration-slow) var(--ease-enter),
transform var(--duration-slow) var(--ease-enter);
}
.st-m-w {
opacity: 0;
}
.st-m-w.is-on {
opacity: 1;
}
.st-m-caret {
position: absolute;
inline-size: 2px;
border-radius: 1px;
background: var(--accent);
pointer-events: none;
}
.st-m-work {
position: absolute;
inset-inline-start: 0;
}
.st-m-fade {
position: absolute;
inset-inline: 0;
inset-block-start: 0;
background: var(--surface-card);
transition: opacity var(--duration-base) var(--ease-exit);
pointer-events: none;
}
.st-m-ring {
fill: none;
stroke: var(--accent);
stroke-width: 3;
opacity: 0;
transform-box: fill-box;
transform-origin: center;
animation: st-m-ring calc(var(--duration-slow) * 3) var(--ease-enter) forwards;
}
@keyframes st-m-ring {
0% {
opacity: 0;
transform: scale(1.14);
}
30% {
opacity: 1;
transform: scale(1);
}
70% {
opacity: 1;
transform: scale(1);
}
100% {
opacity: 0;
transform: scale(1);
}
}
.st-m-over {
position: absolute;
inset-inline: 12px;
padding: 10px 12px;
background: var(--surface-card);
border-radius: var(--radius-control);
box-shadow: inset 0 0 0 1px var(--border-hairline);
transition: opacity var(--duration-quick) var(--ease-exit);
}
.st-m-show {
position: absolute;
z-index: 1;
display: flex;
transform: translateY(-50%);
}
.st-m-ghost {
position: absolute;
inset-block-start: 0;
left: 0;
z-index: 2;
padding: 8px 14px;
border-radius: var(--radius-control);
background: var(--surface-raised);
color: var(--text-heading);
font-size: 15px;
line-height: 1.5;
font-weight: var(--weight-semibold);
white-space: nowrap;
box-shadow:
var(--shadow-float),
inset 0 0 0 1.5px var(--accent);
pointer-events: none;
}
.st-m-finger {
position: absolute;
inset-block-start: 0;
left: 0;
z-index: 3;
inline-size: 36px;
block-size: 36px;
border-radius: 50%;
background: color-mix(in srgb, var(--accent) 22%, transparent);
box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 55%, transparent);
pointer-events: none;
}
.st-m-lifted {
opacity: 0.45;
}
.st-m-target {
outline: 2px dashed var(--accent);
outline-offset: -3px;
}
.st-m-target-rect {
fill: none;
stroke: var(--accent);
stroke-width: 2.5;
stroke-dasharray: 7 6;
}
.ctl-progress {
display: flex;
flex-direction: column;
gap: 8px;
inline-size: 100%;
min-inline-size: 0;
}
.ctl-progress__head {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 12px;
font-size: 14px;
line-height: 1.5;
}
.ctl-progress__label {
min-inline-size: 0;
font-weight: var(--weight-semibold);
color: var(--text-ink);
}
.ctl-progress__value {
flex: none;
color: var(--text-muted);
font-variant-numeric: tabular-nums;
}
.ctl-progress__track {
position: relative;
block-size: 4px;
overflow: hidden;
border-radius: var(--radius-full);
background: var(--border-hairline);
}
.ctl-progress__fill {
position: absolute;
inset: 0;
border-radius: inherit;
background: var(--accent);
transform-origin: left center;
transition: transform var(--duration-base) linear;
}
.ctl-progress__fill:dir(rtl) {
transform-origin: right center;
}
.ctl-progress.is-indeterminate .ctl-progress__fill {
inset-inline-end: auto;
inline-size: 32%;
transition: none;
animation: ctl-travel 1400ms var(--ease-enter) infinite;
}
.ctl-progress.is-indeterminate .ctl-progress__fill:dir(rtl) {
animation-name: ctl-travel-rtl;
}
@keyframes ctl-travel {
from {
transform: translateX(-100%);
}
to {
transform: translateX(312.5%);
}
}
@keyframes ctl-travel-rtl {
from {
transform: translateX(100%);
}
to {
transform: translateX(-312.5%);
}
}
.ctl-dots {
display: inline-flex;
align-items: center;
gap: 5px;
block-size: 24px;
padding-inline: 2px;
}
.ctl-dots > span {
inline-size: 7px;
block-size: 7px;
border-radius: 50%;
background: var(--text-muted);
opacity: 0.35;
animation: ctl-dot 1200ms ease-in-out infinite;
}
.ctl-dots > span:nth-child(2) {
animation-delay: 160ms;
}
.ctl-dots > span:nth-child(3) {
animation-delay: 320ms;
}
@keyframes ctl-dot {
0%,
70%,
100% {
opacity: 0.35;
}
35% {
opacity: 1;
}
}
@keyframes ctl-pulse {
50% {
opacity: 0.35;
}
}
@media (prefers-reduced-motion: reduce) {
.ctl-progress.is-indeterminate .ctl-progress__fill,
.ctl-progress.is-indeterminate .ctl-progress__fill:dir(rtl) {
inline-size: 100%;
animation: ctl-pulse 1400ms ease-in-out infinite;
}
}
.st-menuphotos__empty {
display: flex;
align-items: center;
justify-content: center;
inline-size: 100%;
border-radius: var(--radius-card);
background: var(--surface-recessed);
color: var(--text-muted);
}
.st-menuphotos__fig--before .st-menuphotos__empty {
aspect-ratio: 915 / 576;
}
.st-menuphotos__fig--after .st-menuphotos__empty {
aspect-ratio: 1;
}
.st-win__slot {
flex: none;
white-space: nowrap;
}
.st-devices {
display: flex;
flex-direction: column;
gap: 20px;
}
.st-devices__words {
display: flex;
flex-direction: column;
gap: 8px;
max-inline-size: 640px;
}
.st-devices__title {
margin: 0;
font-size: 15px;
line-height: 1.4;
font-weight: var(--weight-semibold);
color: var(--text-heading);
}
.st-devices__lead {
margin: 0;
font-size: 16px;
line-height: 1.8;
color: var(--text-ink);
}
@media (min-width: 744px) {
.st-devices {
gap: 28px;
}
.st-devices__lead {
font-size: 17px;
}
}
@media (min-width: 1024px) {
.st-devices {
display: grid;
grid-template-columns: 380px minmax(0, 1fr);
align-items: center;
gap: 56px;
}
}
.st-devices__pic {
container-type: inline-size;
}
@property --st-wc {
syntax: '<length>';
inherits: false;
initial-value: 0px;
}
.st-cluster {
--st-wc: min(100cqi, 640px);
--wc: var(--st-wc);
--lw: round(var(--wc) * 0.68, 1px);
--tw: round(var(--wc) * 0.44, 1px);
--pw: round(var(--wc) * 0.17, 1px);
--floor: round(var(--wc) * 0.16, 1px);
position: relative;
inline-size: var(--wc);
block-size: calc(round(max(var(--lw) * 0.625 + 23px + var(--floor), var(--tw) * 820 / 1180 + 14px, var(--pw) * 844 / 390 + 8px), 1px) + 4px);
margin-inline: auto;
}
.st-dev {
position: absolute;
inset-block-end: 4px;
}
.st-dev--laptop {
--cw: 1280px;
--sw: var(--lw);
--sh: round(var(--lw) * 0.625, 1px);
--bez: 7px;
--rad: 12px;
--pg: 32px;
--win-pad: 24px;
inset-inline-end: calc(round(var(--lw) * 0.07, 1px) + 4px);
inset-block-end: var(--floor);
}
.st-dev--tablet {
--cw: 1180px;
--sw: var(--tw);
--sh: round(var(--tw) * 820 / 1180, 1px);
--bez: 7px;
--rad: 16px;
--pg: 32px;
--win-pad: 24px;
inset-inline-start: round(var(--wc) * 0.1, 1px);
}
.st-dev--phone {
--cw: 390px;
--sw: var(--pw);
--sh: round(var(--pw) * 844 / 390, 1px);
--bez: 4px;
--rad: 16px;
--pg: 20px;
--win-pad: 16px;
inset-inline-start: 4px;
}
.st-dev__body {
padding: var(--bez);
border-radius: var(--rad);
background: var(--surface-card);
box-shadow:
inset 0 0 0 2px var(--border-control),
0 0 0 4px var(--surface-ground);
}
.st-dev__glass {
overflow: hidden;
border-radius: calc(var(--rad) - var(--bez));
}
.st-dev__screen {
position: relative;
overflow: hidden;
inline-size: var(--sw);
block-size: var(--sh);
border-radius: inherit;
}
.st-dev__page {
position: absolute;
top: 0;
left: 0;
box-sizing: border-box;
overflow: hidden;
inline-size: var(--cw);
padding: var(--pg);
background: var(--surface-ground);
transform: scale(tan(atan2(var(--sw), var(--cw))));
transform-origin: 0 0;
}
.st-dev--laptop .st-dev__page {
block-size: 800px;
}
.st-dev--tablet .st-dev__page {
block-size: 820px;
}
.st-dev--phone .st-dev__page {
block-size: 844px;
}
.st-dev__col {
max-inline-size: 1056px;
margin-inline: auto;
}
.st-dev__base {
block-size: 9px;
margin-inline: -7%;
border-radius: 0 0 9px 9px;
background: var(--surface-card);
box-shadow:
inset 0 0 0 2px var(--border-control),
0 0 0 4px var(--surface-ground);
}
.st-dev--laptop .st-floor__grid,
.st-dev--tablet .st-floor__grid {
display: grid;
grid-template-columns: 360px minmax(0, 1fr);
align-items: start;
gap: 40px;
}
.st-dev--laptop .st-floor__rows,
.st-dev--tablet .st-floor__rows {
grid-column: 1;
grid-row: 1;
}
.st-dev--laptop .st-floor__plan,
.st-dev--tablet .st-floor__plan {
grid-column: 2;
grid-row: 1;
}
.st-dev--phone .st-floor__grid {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 14px;
}
.st-dev--phone .st-floor__rows,
.st-dev--phone .st-floor__plan {
grid-column: auto;
grid-row: auto;
}