/* ==========================================================================
   Salonessa's landing page: "The Vanity". Pearl and blush light, rose gold and
   deep plum; an arched mirror ringed in pearls holds a salon's app. English first,
   Arabic beside it (logical properties, so the page mirrors). Every class is sn-
   so nothing here reaches the apps, and nothing of theirs reaches this page.
   ========================================================================== */
@font-face {
  font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url(fonts/cormorant-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 300 700; font-display: swap;
  src: url(fonts/cormorant-italic-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Jost'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(fonts/jost-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Arabic headlines: Markazi Text beside Cormorant; Arabic text in Readex (app.css) beside Jost. */
@font-face {
  font-family: 'Markazi Text'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(fonts/markazi-arabic.woff2) format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}

html:has(.sn), body:has(.sn) { background: #2a1524; }
.sn {
  --pearl: #fbf6f1; --pearl-2: #f7eee8; --blush: #f3e2dc;
  --rose: #c98f86; --rose-ink: #96594b; --rose-lit: #e7b9a7;
  --plum: #2a1524; --plum-2: #3a2131; --ink: #2a1524; --ink-2: #6e5865;
  --line: rgb(150 89 75 / .2);
  --rg: linear-gradient(135deg, #f0d4bd 0%, #d6a08c 38%, #b77565 70%, #9a5b4e 100%);
  --rg-soft: linear-gradient(135deg, #f6e1d3, #e2b6a5 60%, #c98f86);
  --serif: 'Cormorant Garamond', 'Markazi Text', 'Times New Roman', serif;
  --sans: 'Jost', 'Readex', system-ui, sans-serif;
  position: relative; overflow-x: clip; background: var(--pearl); color: var(--ink);
  font: 400 16px/1.6 var(--sans);
}
.sn *, .sn *::before, .sn *::after { box-sizing: border-box; }
.sn :focus-visible { outline: 2px solid #c98f86; outline-offset: 3px; border-radius: 6px; }
/* Above app.css's bare h1–h3, below every class here (margins stay app.css's 0 until a class sets one). */
.sn :where(h1, h2, h3, h4) { font-family: var(--serif); font-weight: 500; letter-spacing: -.01em; line-height: 1.05; }
:where(.sn) :where(p, ol, ul, figure) { margin: 0; padding: 0; }
.sn svg { display: block; flex: none; }
.sn .icon { width: 1em; height: 1em; }
.sn-wrap { width: min(1200px, 100% - 32px); margin-inline: auto; }
.sn-rg { background: var(--rg); -webkit-background-clip: text; background-clip: text; color: transparent; font-style: italic; padding-inline-end: .06em; }
[dir='rtl'] .sn-rg { font-style: normal; }
.sn-pad { padding: 88px 0; position: relative; }

/* type */
.sn-kicker { display: inline-flex; align-items: center; gap: 10px; font: 500 11.5px/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--rose-ink); }
[dir='rtl'] .sn-kicker { letter-spacing: 0; font-size: 14px; }
.sn-kicker::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #f3e4dc 45%, #cfb1a5); box-shadow: 0 1px 2px rgb(122 74 64 / .35); }
.sn-h2 { font-size: clamp(38px, 9.6vw, 72px); margin-top: 18px; }
.sn-deck { font-size: 16.5px; line-height: 1.65; color: var(--ink-2); max-width: 34em; margin-top: 18px; }

/* buttons */
.sn-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 54px; padding: 0 28px; border-radius: 999px; font: 500 15.5px/1 var(--sans); letter-spacing: .02em; color: #fff; background: linear-gradient(135deg, #3a2131, #2a1524); box-shadow: 0 14px 30px -12px rgb(42 21 36 / .55), inset 0 1px 0 rgb(255 255 255 / .12); position: relative; overflow: hidden; text-decoration: none; }
.sn-btn::after { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 35%, rgb(255 225 205 / .28) 50%, transparent 65%); transform: translateX(-120%); animation: sn-sheen 5s ease-in-out 1.5s infinite; }
.sn-btn .icon { width: 19px; height: 19px; }
.sn-btn.rose { background: var(--rg); color: #2a1524; box-shadow: 0 14px 30px -12px rgb(150 89 75 / .6), inset 0 1px 0 rgb(255 255 255 / .45); }
.sn-soon { display: inline-flex; align-items: center; height: 54px; padding: 0 24px; border-radius: 999px; border: 1px dashed var(--rose); color: var(--rose-ink); font-weight: 500; }
.sn-textlink { display: inline-flex; align-items: center; gap: 8px; font: 500 15px/1 var(--sans); color: inherit; border-bottom: 1px solid currentColor; border-bottom-color: rgb(150 89 75 / .3); padding-bottom: 4px; text-decoration: none; background: none; border-top: 0; border-inline: 0; cursor: pointer; }
.sn-textlink .icon { width: 15px; height: 15px; }
@keyframes sn-sheen { 0%, 70% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }

/* the top bar */
.sn-top { position: sticky; top: 0; z-index: 50; background: rgb(42 21 36 / .95); color: var(--pearl); backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4); border-bottom: 1px solid rgb(255 255 255 / .06); padding-top: env(safe-area-inset-top); transition: background .35s, color .35s, border-color .35s; }
.sn-top[data-mode='paper'] { background: rgb(251 246 241 / .82); color: var(--ink); border-bottom-color: rgb(150 89 75 / .12); }
.sn-top .sn-wrap { display: flex; align-items: center; justify-content: space-between; height: 62px; }
.sn-wm { font: 500 27px/1 var(--serif); letter-spacing: .005em; color: inherit; text-decoration: none; direction: ltr; unicode-bidi: isolate; }
.sn-wm i { font-style: italic; background: var(--rg); -webkit-background-clip: text; background-clip: text; color: transparent; padding-inline-end: .04em; }
.sn-acts { display: flex; align-items: center; gap: 8px; }
.sn-lang { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 12px; border-radius: 999px; border: 0; background: none; color: inherit; font: 500 14px/1 var(--sans); cursor: pointer; }
.sn-lang .icon { width: 17px; height: 17px; color: var(--rose); }
.sn-lang [lang='ar'] { font-family: 'Markazi Text', var(--sans); font-size: 18px; line-height: 1; }
.sn-contact { display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 16px; border-radius: 999px; border: 1px solid rgb(251 246 241 / .25); font: 500 13.5px/1 var(--sans); color: inherit; text-decoration: none; }
.sn-top[data-mode='paper'] .sn-contact { border-color: rgb(42 21 36 / .16); }
.sn-contact .icon { width: 16px; height: 16px; }

/* the hero, by night */
.sn-hero { padding: 26px 0 44px; color: var(--pearl); overflow: hidden; background: radial-gradient(80% 50% at 50% 70%, #5a3148 0%, rgb(90 49 72 / 0) 70%), radial-gradient(70% 40% at 80% 0%, #3f2234, rgb(63 34 52 / 0) 70%), var(--plum); }
.sn-hero .sn-wrap { display: grid; gap: 14px; grid-template-areas: 'copy' 'vanity' 'more'; }
.sn-copy { grid-area: copy; display: grid; justify-items: center; text-align: center; }
.sn-eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: rgb(255 255 255 / .06); border: 1px solid rgb(231 185 167 / .25); font: 500 11.5px/1.2 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--rose-lit); }
[dir='rtl'] .sn-eyebrow { letter-spacing: 0; font-size: 13.5px; }
.sn-eyebrow b { width: 6px; height: 6px; border-radius: 50%; background: var(--rose); box-shadow: 0 0 0 3px rgb(201 143 134 / .2); }
.sn-hero h1 { font-size: clamp(50px, 13.4vw, 104px); line-height: .96; margin-top: 22px; }
[dir='rtl'] .sn-hero h1 { line-height: 1.12; font-size: clamp(46px, 12vw, 92px); }
.sn-hero h1 .sn-rg { display: inline-block; }
.sn-hero .sn-deck { color: rgb(251 246 241 / .75); text-align: center; }
.sn-ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; margin-top: 26px; width: 100%; }
.sn-hero .sn-btn { background: var(--rg); color: #2a1524; width: 100%; max-width: 360px; }
.sn-more { grid-area: more; display: grid; justify-items: center; gap: 18px; }
.sn-hero .sn-textlink { color: var(--pearl); border-bottom-color: rgb(251 246 241 / .3); }
.sn-facts { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; list-style: none; }
.sn-facts li { font-size: 12.5px; padding: 6px 12px; border-radius: 999px; background: rgb(255 255 255 / .05); border: 1px solid rgb(255 255 255 / .1); color: rgb(251 246 241 / .75); }

/* the vanity: an arched mirror ringed in pearls, the salon's app standing in front */
.sn-vanity { grid-area: vanity; --aw: 268px; --at: 40px; --pw: 196px; --pt: calc(var(--at) + var(--aw) * .3); position: relative; height: calc(var(--at) + var(--aw) * 1.7407 + 64px); }
.sn-vanity::before { content: ''; position: absolute; left: 50%; top: 4%; width: 150%; height: 90%; transform: translateX(-50%); background: radial-gradient(closest-side, rgb(214 140 130 / .35), rgb(214 140 130 / 0)); filter: blur(10px); }
.sn-arch { position: absolute; left: 50%; top: var(--at); width: var(--aw); aspect-ratio: 270 / 470; transform: translateX(-50%); border-radius: calc(var(--aw) / 2) calc(var(--aw) / 2) 16px 16px; background: radial-gradient(110% 60% at 50% 24%, #7a4a63 0%, #4d2a40 45%, #33192a 100%); box-shadow: 0 50px 80px -40px rgb(0 0 0 / .7), 0 0 0 1px rgb(255 255 255 / .12) inset, 0 0 90px rgb(231 160 142 / .25); }
.sn-arch::before { content: ''; position: absolute; inset: -7px; border-radius: calc(var(--aw) / 2 + 7px) calc(var(--aw) / 2 + 7px) 21px 21px; padding: 2.5px; background: var(--rg); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.sn-arch::after { content: ''; position: absolute; inset: 0; border-radius: inherit; opacity: .35; background: linear-gradient(118deg, rgb(255 255 255 / 0) 22%, rgb(255 255 255 / .7) 33%, rgb(255 255 255 / 0) 41%, rgb(255 255 255 / 0) 58%, rgb(255 255 255 / .45) 63%, rgb(255 255 255 / 0) 68%); }
.sn-pearls { position: absolute; left: 50%; top: var(--at); width: var(--aw); aspect-ratio: 270 / 470; transform: translateX(-50%); overflow: visible; pointer-events: none; }
.sn-pearls .glint { opacity: 0; animation: sn-glint 5.4s ease-in-out infinite; animation-delay: calc(var(--i) * .13s); }
@keyframes sn-glint { 0%, 100% { opacity: 0; } 8% { opacity: .95; } 18% { opacity: 0; } }
.sn-vanity > .sn-phone { position: absolute; left: 50%; top: var(--pt); transform: translateX(-50%); --w: var(--pw); z-index: 2; }
.sn-chip { position: absolute; z-index: 3; color: var(--ink); display: flex; align-items: center; gap: 9px; max-width: 172px; padding: 9px 13px 9px 9px; border-radius: 16px; background: rgb(255 255 255 / .86); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgb(255 255 255 / .9); box-shadow: 0 18px 34px -16px rgb(0 0 0 / .5), 0 0 0 1px rgb(150 89 75 / .1); animation: sn-bob 6s ease-in-out infinite; text-align: start; }
[dir='rtl'] .sn-chip { padding: 9px 9px 9px 13px; }
.sn-chip > i { flex: none; width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; background: var(--rg-soft); color: var(--plum); }
.sn-chip > i .icon { width: 16px; height: 16px; }
.sn-chip small { display: block; font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); line-height: 1.3; }
[dir='rtl'] .sn-chip small { letter-spacing: 0; font-size: 11px; }
.sn-chip b { display: block; font-weight: 500; font-size: 12.5px; line-height: 1.3; }
.sn-chip.c1 { top: calc(var(--pt) - 10px); inset-inline-start: 0; }
.sn-chip.c2 { top: calc(var(--pt) + 206px); inset-inline-end: 0; animation-delay: -2s; }
.sn-chip.c2 > i { background: linear-gradient(135deg, #e5efe2, #b9cdb5); }
.sn-chip.c3 { top: calc(var(--pt) + var(--pw) * 2.056 - 26px); inset-inline-start: 10px; animation-delay: -4s; }
@keyframes sn-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.sn-spark { position: absolute; width: 14px; height: 14px; color: #d8a894; animation: sn-twinkle 3.6s ease-in-out infinite; z-index: 1; }
.sn-spark svg { width: 100%; height: 100%; }
@keyframes sn-twinkle { 0%, 100% { opacity: .2; transform: scale(.6) rotate(0); } 50% { opacity: 1; transform: scale(1) rotate(20deg); } }

/* a phone, and a salon's app inside it (sizes in em: 1em is 1/21.4 of the phone) */
.sn-phone { --w: 206px; width: var(--w); font-size: calc(var(--w) / 21.4); line-height: 1.35; aspect-ratio: 214 / 440; border-radius: 3.5em; padding: .65em; background: linear-gradient(160deg, #3a2a33, #140c11 40%, #22161c); box-shadow: 0 3.6em 6em -2.6em rgb(42 21 36 / .6), 0 0 0 .1em rgb(255 255 255 / .14) inset; position: relative; direction: inherit; }
.sn-phone::before { content: ''; position: absolute; top: 1.45em; left: 50%; width: 6.2em; height: 1.8em; border-radius: 1em; background: #070405; transform: translateX(-50%); z-index: 5; }
.sn-scr { width: 100%; height: 100%; border-radius: 2.9em; overflow: hidden; position: relative; background: var(--bg, var(--pearl)); color: var(--tx, var(--ink)); }
.sn-sb { display: flex; justify-content: space-between; align-items: center; height: 4.2em; padding: .6em 2.3em 0 2.6em; font: 600 1.15em/1 var(--sans); direction: ltr; }
.sn-sb > span { display: flex; gap: .35em; align-items: center; }
.sn-sb .bars { width: 1.6em; height: 1em; background: linear-gradient(90deg, currentColor 0 18%, transparent 0 27%, currentColor 0 45%, transparent 0 54%, currentColor 0 72%, transparent 0 81%, currentColor 0); clip-path: polygon(0 100%, 100% 0, 100% 100%); }
.sn-sb .batt { width: 2.2em; height: 1.05em; border-radius: .3em; border: .12em solid currentColor; position: relative; opacity: .9; }
.sn-sb .batt::after { content: ''; position: absolute; inset: .12em; inset-inline-end: .5em; border-radius: .12em; background: currentColor; }

.sn-app { height: 100%; position: relative; overflow: hidden; background: var(--bg); color: var(--tx); }
.sn-app::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 10em; background: linear-gradient(to bottom, rgb(0 0 0 / 0), var(--bg) 58%); pointer-events: none; z-index: 1; }
.sn-cover { position: relative; margin: .2em 1.1em 0; border-radius: 2em; padding: 1.7em 1.2em 1.5em; text-align: center; background: var(--cover); color: var(--cover-tx, #fff); overflow: hidden; }
.sn-cover::before { content: ''; position: absolute; inset: 0; background: radial-gradient(70% 60% at 50% 0%, var(--glow, rgb(255 214 196 / .35)), transparent 70%); }
.sn-cover > * { position: relative; }
.sn-logo { margin: 0 auto; border-radius: 50%; display: grid; place-items: center; font: italic 500 1.95em/1 var(--serif); width: 2.45em; height: 2.45em; color: var(--a); background: var(--logo-bg, rgb(255 255 255 / .06)); box-shadow: 0 0 0 .04em var(--a), 0 0 0 .14em rgb(255 255 255 / .06), 0 0 0 .18em var(--a); letter-spacing: -.02em; direction: ltr; }
.sn-logo.empty { box-shadow: none; border: .06em dashed var(--a); font: 500 .5em/1.2 var(--sans); text-align: center; letter-spacing: .02em; padding: .4em; width: 5.1em; height: 5.1em; }
.sn-sname { font: 500 2.15em/1.05 var(--serif); margin-top: .42em; letter-spacing: -.005em; }
.sn-stag { font-size: .95em; opacity: .75; margin-top: .4em; letter-spacing: .06em; text-transform: uppercase; }
.sn-open { display: inline-flex; align-items: center; gap: .45em; margin-top: .85em; padding: .4em .9em; border-radius: 1em; background: var(--open-bg, rgb(255 255 255 / .12)); font-size: .98em; font-weight: 500; }
.sn-open::before { content: ''; width: .55em; height: .55em; border-radius: 50%; background: #9fd3a8; box-shadow: 0 0 0 .2em rgb(159 211 168 / .25); }
.sn-alab { font: 600 1em/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; opacity: .6; margin: 1.35em 1.5em .65em; }
[dir='rtl'] .sn-alab { letter-spacing: 0; font-size: 1.1em; }
.sn-svc { display: flex; align-items: center; gap: .85em; margin: 0 1.1em .5em; padding: .75em .9em; border-radius: 1.3em; background: var(--card); }
.sn-svc-i { flex: none; width: 2.7em; height: 2.7em; border-radius: .95em; display: grid; place-items: center; color: var(--a); background: var(--chip); }
.sn-svc-i .icon { width: 1.55em; height: 1.55em; }
.sn-svc-t { flex: 1; min-width: 0; }
.sn-svc-t b { display: block; font-weight: 500; font-size: 1.2em; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sn-svc-t small { display: block; font-size: .98em; opacity: .62; margin-top: .15em; }
.sn-svc-p { font-weight: 500; font-size: 1.08em; color: var(--a); white-space: nowrap; }
.sn-team { display: flex; gap: .7em; margin: 0 1.1em; }
.sn-mem { flex: 1; text-align: center; padding: .9em .3em .8em; border-radius: 1.3em; background: var(--card); }
.sn-mono { margin: 0 auto; border-radius: 50%; display: grid; place-items: center; font: italic 500 1.7em/1 var(--serif); width: 1.75em; height: 1.75em; color: var(--a); background: var(--chip); box-shadow: 0 0 0 .05em var(--a); }
[dir='rtl'] .sn-mono { font-style: normal; }
.sn-mem b { display: block; font-weight: 500; font-size: 1.08em; margin-top: .45em; }
.sn-mem small { display: block; font-size: .9em; opacity: .6; }
.sn-book { position: absolute; z-index: 2; left: 1.1em; right: 1.1em; bottom: 2.6em; height: 3.8em; border-radius: 2em; display: grid; place-items: center; font: 600 1.25em/1 var(--sans); letter-spacing: .03em; color: var(--book-tx, #2a1524); background: var(--book); box-shadow: 0 1em 2em -1em var(--a); }
.sn-pw { position: absolute; z-index: 2; left: 0; right: 0; bottom: 1em; text-align: center; font-size: .85em; opacity: .45; letter-spacing: .04em; }

/* made for her salon */
.sn-promise { background: linear-gradient(180deg, var(--pearl) 0%, var(--pearl-2) 100%); }
.sn-statement { font: 500 clamp(31px, 7.8vw, 60px)/1.12 var(--serif); letter-spacing: -.01em; margin-top: 22px; max-width: 19em; }
[dir='rtl'] .sn-statement { line-height: 1.35; }
.sn-pillars { display: grid; gap: 14px; margin-top: 44px; }
.sn-pillar { padding: 26px 24px; border-radius: 26px; background: rgb(255 255 255 / .7); border: 1px solid rgb(150 89 75 / .12); box-shadow: 0 20px 40px -30px rgb(90 40 52 / .35); }
.sn-pi { width: 48px; height: 48px; border-radius: 16px; display: grid; place-items: center; background: var(--rg-soft); color: var(--plum); }
.sn-pi .icon { width: 23px; height: 23px; }
.sn-pillar h3 { font-size: 27px; line-height: 1.1; margin-top: 18px; }
.sn-pillar p { color: var(--ink-2); margin-top: 8px; font-size: 15.5px; }

/* your look */
.sn-look { background: var(--pearl-2); }
.sn-stage { margin-top: 40px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sn-tile { border-radius: 24px; padding: 18px; background: #fff; border: 1px solid rgb(150 89 75 / .1); box-shadow: 0 20px 40px -30px rgb(90 40 52 / .4); display: grid; align-content: space-between; gap: 14px; min-height: 176px; }
.sn-tile > small { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--rose-ink); }
[dir='rtl'] .sn-tile > small { letter-spacing: 0; font-size: 13px; }
.sn-tile.dark { background: radial-gradient(90% 70% at 50% 0%, #5a3449, #2a1524 70%); color: var(--pearl); border: 0; }
.sn-tile.dark > small { color: var(--rose-lit); }
.sn-tile.wide-m { grid-column: span 2; min-height: 0; }
.sn-icons { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; justify-items: center; text-align: center; }
.sn-ai { width: 46px; height: 46px; margin: 0 auto; border-radius: 13px; background: var(--c, #eee); display: grid; place-items: center; color: rgb(255 255 255 / .9); }
.sn-ai .icon { width: 22px; height: 22px; }
.sn-ai.me { background: radial-gradient(circle at 50% 30%, #5a3449, #2a1524); color: var(--rose-lit); font: italic 500 22px/1 var(--serif); box-shadow: 0 0 0 2px var(--pearl), 0 0 0 3.5px #d6a08c, 0 10px 20px -8px rgb(42 21 36 / .6); direction: ltr; }
.sn-ai-l { font-size: 10px; color: var(--ink-2); margin-top: 4px; line-height: 1.25; }
.sn-ai-l.me { color: var(--ink); font-weight: 500; }
.sn-launch { display: grid; place-items: center; gap: 10px; text-align: center; padding: 6px 0; }
.sn-launch .ring { width: 74px; height: 74px; border-radius: 50%; display: grid; place-items: center; font: italic 500 30px/1 var(--serif); color: var(--rose-lit); box-shadow: 0 0 0 1px #d6a08c, 0 0 0 7px rgb(214 160 140 / .12), 0 0 0 8px rgb(214 160 140 / .5); background: radial-gradient(circle at 50% 30%, #5a3449, #2a1524); direction: ltr; }
.sn-launch b { font: 500 21px/1 var(--serif); }
.sn-swatches { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; justify-items: center; }
.sn-swatches span { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, var(--p) 50%, var(--a) 50%); box-shadow: 0 0 0 2px #fff, 0 0 0 3px rgb(42 21 36 / .08); }
.sn-swatches span.on { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--rose); }
.sn-pal { font: italic 500 19px/1.1 var(--serif); }
[dir='rtl'] .sn-pal { font-style: normal; }
.sn-preview { border-radius: 16px; overflow: hidden; background: #fff; box-shadow: 0 10px 24px -14px rgb(42 21 36 / .45); border: 1px solid rgb(42 21 36 / .06); text-align: start; }
.sn-preview .img { height: 70px; display: grid; place-items: center; background: radial-gradient(90% 90% at 50% 0%, #5a3449, #2a1524); color: var(--rose-lit); font: italic 500 26px/1 var(--serif); }
[dir='rtl'] .sn-preview .img { font-style: normal; }
.sn-preview .txt { padding: 8px 10px 10px; }
.sn-preview .txt b { display: block; font: 500 15px/1.2 var(--serif); }
.sn-preview .txt span { display: block; font-size: 10.5px; color: var(--ink-2); direction: ltr; text-align: start; }
.sn-linkbar { display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 14px; border-radius: 14px; background: var(--pearl); border: 1px solid rgb(150 89 75 / .14); font-size: 13.5px; direction: ltr; }
.sn-linkbar .icon { width: 15px; height: 15px; color: #6f9b72; }
.sn-linkbar b { font-weight: 500; }
.sn-idlist { list-style: none; margin-top: 34px; border-top: 1px solid var(--line); }
.sn-idlist li { display: grid; grid-template-columns: 44px 1fr; gap: 6px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.sn-idlist li > span { font: italic 500 22px/1.2 var(--serif); color: var(--rose-ink); }
.sn-idlist b { font-weight: 500; font-size: 16px; }
.sn-idlist p { color: var(--ink-2); font-size: 14.5px; margin-top: 2px; }

/* the collection */
.sn-collection { background: var(--pearl); overflow: hidden; }
.sn-rail { display: flex; gap: 14px; margin-top: 40px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 16px 30px; margin-inline: -16px; scrollbar-width: none; }
.sn-rail::-webkit-scrollbar { display: none; }
.sn-card { flex: none; width: 300px; scroll-snap-align: center; border-radius: 30px; padding: 22px 22px 0; background: var(--card-bg); color: var(--card-tx); position: relative; overflow: hidden; height: 520px; display: flex; flex-direction: column; box-shadow: 0 30px 50px -34px rgb(42 21 36 / .6); }
.sn-card::before { content: ''; position: absolute; inset: 0; background: radial-gradient(80% 50% at 50% 100%, var(--card-glow), transparent 70%); }
.sn-card > * { position: relative; }
.sn-card header { display: flex; justify-content: space-between; gap: 10px; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; opacity: .75; }
[dir='rtl'] .sn-card header { letter-spacing: 0; font-size: 12px; }
.sn-card h3 { font-size: 40px; line-height: 1; margin-top: 16px; color: var(--card-title); }
.sn-lchip { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; padding: 7px 12px; border-radius: 999px; background: var(--card-chip); font-size: 12px; width: max-content; direction: ltr; }
.sn-lchip .icon { width: 12px; height: 12px; }
.sn-sw { display: flex; gap: 8px; margin-top: 12px; }
.sn-sw > span { display: flex; align-items: center; gap: 8px; padding: 6px 10px 6px 6px; border-radius: 12px; background: var(--card-chip); font-size: 10.5px; line-height: 1.25; }
.sn-sw i { width: 22px; height: 22px; border-radius: 7px; background: var(--c); box-shadow: 0 0 0 1px rgb(255 255 255 / .25); }
.sn-sw b { display: block; font-weight: 500; letter-spacing: .03em; direction: ltr; text-align: start; }
.sn-card .sn-phone { margin: auto auto -120px; --w: 196px; }

/* in her pocket */
.sn-pocket { background: linear-gradient(180deg, var(--pearl) 0%, var(--blush) 100%); overflow: hidden; }
.sn-steps { list-style: none; margin-top: 34px; border-top: 1px solid var(--line); }
.sn-steps li { display: grid; grid-template-columns: 54px 1fr; gap: 8px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.sn-steps li > span { font: italic 500 44px/.9 var(--serif); background: var(--rg); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sn-steps b { font-weight: 500; font-size: 17px; }
.sn-steps p { color: var(--ink-2); font-size: 15px; margin-top: 3px; }
.sn-pocket-stage { position: relative; margin-top: 40px; display: grid; justify-items: center; gap: 26px; }
.sn-pocket-stage .sn-phone { --w: 236px; }
.sn-chat { width: 100%; max-width: 340px; border-radius: 26px; overflow: hidden; background: #f1e4dd; box-shadow: 0 24px 44px -30px rgb(42 21 36 / .55); border: 1px solid rgb(150 89 75 / .12); }
.sn-chat-hd { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: #fff; border-bottom: 1px solid rgb(42 21 36 / .06); }
.sn-chat-hd .av { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font: italic 500 15px/1 var(--serif); color: var(--rose-lit); background: radial-gradient(circle at 50% 30%, #5a3449, #2a1524); direction: ltr; }
.sn-chat-hd b { display: block; font-weight: 500; font-size: 14.5px; line-height: 1.2; }
.sn-chat-hd small { display: block; font-size: 11.5px; color: #6f9b72; }
.sn-chat-body { display: grid; gap: 10px; padding: 16px 14px 18px; }
.sn-bubble { max-width: 250px; padding: 11px 14px; border-radius: 20px; font-size: 13.5px; line-height: 1.4; box-shadow: 0 16px 30px -18px rgb(42 21 36 / .5); }
.sn-bubble.out { justify-self: end; background: var(--plum); color: var(--pearl); border-end-end-radius: 6px; }
.sn-bubble.in { justify-self: start; background: #fff; border-end-start-radius: 6px; padding: 8px; max-width: 214px; }
.sn-bubble.in p { padding: 4px 6px 8px; }
.sn-home { height: 100%; position: relative; background: radial-gradient(120% 80% at 30% 10%, #f8e6de, #e8c3b7 55%, #c99a8f); padding: 0 1.1em; }
.sn-home .sn-sb { color: #3b2330; }
.sn-home-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.7em .6em; padding-top: 2.2em; }
.sn-hi { display: grid; justify-items: center; gap: .5em; }
.sn-hi > i { width: 3.8em; height: 3.8em; border-radius: 1em; background: var(--c); display: grid; place-items: center; color: rgb(255 255 255 / .9); box-shadow: 0 .4em .8em -.4em rgb(42 21 36 / .35); }
.sn-hi > i .icon { width: 1.8em; height: 1.8em; }
.sn-hi > span { font-size: .88em; color: #3b2330; white-space: nowrap; }
.sn-hi.me > i { background: radial-gradient(circle at 50% 30%, #5a3449, #2a1524); color: var(--rose-lit); font: italic 500 2em/1 var(--serif); width: 1.9em; height: 1.9em; border-radius: .5em; box-shadow: 0 0 0 .09em var(--pearl), 0 0 0 .16em #d6a08c, 0 0 1.2em .3em rgb(255 236 228 / .9); direction: ltr; }
.sn-hi.me > span { font-weight: 600; }
.sn-dock { position: absolute; left: 1.2em; right: 1.2em; bottom: 1.2em; height: 6.6em; border-radius: 2.2em; background: rgb(255 255 255 / .35); display: flex; justify-content: space-around; align-items: center; }
.sn-dock > i { width: 3.8em; height: 3.8em; border-radius: 1em; background: var(--c); display: grid; place-items: center; color: rgb(255 255 255 / .9); }
.sn-dock > i .icon { width: 1.8em; height: 1.8em; }

/* booking */
.sn-booking { background: var(--blush); overflow: hidden; }
.sn-flow { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; list-style: none; }
.sn-flow li { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 8px; border-radius: 999px; background: rgb(255 255 255 / .7); font-size: 13.5px; border: 1px solid rgb(150 89 75 / .12); }
[dir='rtl'] .sn-flow li { padding: 8px 8px 8px 14px; }
.sn-flow li > i { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font: italic 500 14px/1 var(--serif); font-style: italic; background: var(--rg); color: #2a1524; }
.sn-flow li.opt { opacity: .72; }
.sn-screens { display: flex; gap: 16px; margin-top: 40px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 16px 40px; margin-inline: -16px; scrollbar-width: none; }
.sn-screens::-webkit-scrollbar { display: none; }
.sn-screens figure { flex: none; scroll-snap-align: center; display: grid; justify-items: center; gap: 16px; }
.sn-screens figcaption { text-align: center; max-width: 230px; }
.sn-screens figcaption b { display: block; font: 500 22px/1.1 var(--serif); }
.sn-screens figcaption span { display: block; font-size: 14px; color: var(--ink-2); margin-top: 4px; }
.sn-screens .sn-phone { --w: 232px; }
.sn-bk { height: 100%; display: flex; flex-direction: column; padding: 0 1.4em; background: var(--pearl); }
.sn-bk > * { flex-shrink: 0; }
.sn-bk-top { display: flex; align-items: center; justify-content: space-between; margin-top: .4em; font-size: 1.05em; opacity: .7; }
.sn-dots { display: flex; gap: .35em; }
.sn-dots i { width: .6em; height: .6em; border-radius: 50%; background: rgb(42 21 36 / .18); }
.sn-dots i.on { background: #b77565; width: 1.6em; border-radius: .3em; }
.sn-bk h4 { font-size: 2.5em; margin-top: .7em; }
.sn-cats { display: flex; gap: .5em; margin-top: 1.1em; }
.sn-cats span { padding: .55em 1.05em; border-radius: 1.2em; font-size: 1.05em; background: #fff; border: .08em solid rgb(42 21 36 / .08); white-space: nowrap; }
.sn-cats span.on { background: var(--plum); color: var(--pearl); border-color: var(--plum); }
.sn-opt { display: flex; align-items: center; gap: .9em; margin-top: .65em; padding: 1em; border-radius: 1.3em; background: #fff; border: .1em solid rgb(42 21 36 / .06); }
.sn-opt.on { border-color: var(--rose); box-shadow: 0 0 0 .15em rgb(201 143 134 / .2); }
.sn-opt .tx { flex: 1; min-width: 0; }
.sn-opt b { display: block; font-weight: 500; font-size: 1.2em; }
.sn-opt small { display: block; font-size: 1em; color: var(--ink-2); margin-top: .1em; }
.sn-opt .pr { font-weight: 500; font-size: 1.1em; color: var(--rose-ink); white-space: nowrap; }
.sn-tick { width: 1.9em; height: 1.9em; border-radius: 50%; border: .12em solid rgb(42 21 36 / .2); display: grid; place-items: center; flex: none; }
.sn-opt.on .sn-tick { background: var(--rg); border: 0; color: #2a1524; }
.sn-tick .icon { width: 1.2em; height: 1.2em; }
.sn-bar { margin: auto -1.4em 0; padding: 1.2em 1.4em 2.2em; background: #fff; border-top: .08em solid rgb(42 21 36 / .06); display: flex; align-items: center; justify-content: space-between; gap: .6em; }
.sn-bar small { display: block; font-size: .95em; color: var(--ink-2); }
.sn-bar b { font-weight: 500; font-size: 1.2em; }
.sn-bar .go { padding: 1em 1.8em; border-radius: 1.6em; background: var(--plum); color: var(--pearl); font-weight: 500; font-size: 1.1em; }
.sn-who { display: flex; gap: .55em; margin-top: 1.1em; }
.sn-who span { flex: 1; display: grid; justify-items: center; gap: .4em; padding: .9em .2em; border-radius: 1.3em; background: #fff; font-size: 1em; text-align: center; border: .1em solid rgb(42 21 36 / .06); line-height: 1.2; }
.sn-who span i { border-radius: 50%; display: grid; place-items: center; background: var(--blush); color: var(--rose-ink); font: italic 500 1.5em/1 var(--serif); width: 1.75em; height: 1.75em; }
[dir='rtl'] .sn-who span i { font-style: normal; }
.sn-who span.on { border-color: var(--rose); box-shadow: 0 0 0 .15em rgb(201 143 134 / .2); }
.sn-who span.on i { background: var(--rg); color: #2a1524; }
.sn-who span i .icon { width: .75em; height: .75em; }
.sn-days { display: flex; gap: .45em; margin-top: 1.3em; }
.sn-days span { flex: 1; text-align: center; padding: .7em 0; border-radius: 1.2em; background: #fff; font-size: .95em; line-height: 1.3; color: var(--ink-2); overflow: hidden; white-space: nowrap; }
.sn-days span b { display: block; font: 500 1.6em/1.1 var(--serif); color: var(--ink); }
.sn-days span.on { background: var(--plum); color: var(--rose-lit); }
.sn-days span.on b { color: var(--pearl); }
.sn-times { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5em; margin-top: 1.1em; }
.sn-times span { text-align: center; padding: .85em 0; border-radius: 1.1em; background: #fff; font-size: 1.1em; font-weight: 500; white-space: nowrap; }
.sn-times span.on { background: var(--rg); color: #2a1524; }
.sn-times span.gone { opacity: .35; text-decoration: line-through; }
.sn-done { height: 100%; display: flex; flex-direction: column; align-items: center; padding: 0 1.6em; text-align: center; background: radial-gradient(90% 50% at 50% 22%, #fbe9e2, var(--pearl) 70%); }
.sn-done > * { flex-shrink: 0; }
.sn-done > .sn-sb { align-self: stretch; margin-inline: -1.6em; }
.sn-seal { margin-top: 3em; width: 8.5em; height: 8.5em; border-radius: 50%; display: grid; place-items: center; background: var(--rg); color: #2a1524; box-shadow: 0 0 0 .6em rgb(214 160 140 / .16), 0 0 0 1.3em rgb(214 160 140 / .08), 0 1.4em 2.4em -1em rgb(150 89 75 / .6); }
.sn-seal .icon { width: 4em; height: 4em; }
.sn-done h4 { font-size: 2.7em; margin-top: 1em; }
.sn-done p { color: var(--ink-2); font-size: 1.1em; margin-top: .4em; }
.sn-ticket { width: 100%; margin-top: 1.6em; padding: 1.3em; border-radius: 1.6em; background: #fff; text-align: start; border: .08em solid rgb(42 21 36 / .06); }
.sn-ticket b { display: block; font: 500 1.75em/1.1 var(--serif); }
.sn-ticket span { display: block; font-size: 1.05em; color: var(--ink-2); margin-top: .35em; }
.sn-ticket .when { margin-top: .9em; padding-top: .9em; border-top: .08em dashed rgb(42 21 36 / .15); color: var(--ink); font-weight: 500; font-size: 1.15em; }
.sn-acts2 { display: flex; gap: .6em; width: 100%; margin-top: 1em; }
.sn-acts2 span { flex: 1; padding: 1em 0; border-radius: 1.4em; font-size: 1.05em; font-weight: 500; background: var(--plum); color: var(--pearl); }
.sn-acts2 span + span { background: #fff; color: var(--ink); border: .08em solid rgb(42 21 36 / .12); }
.sn-note { margin-top: 6px; font-size: 14px; color: var(--ink-2); text-align: center; }

/* behind the mirror (by night) */
.sn-mirror { background: var(--plum); color: var(--pearl); border-radius: 50% 50% 0 0 / 70px 70px 0 0; margin-top: -40px; overflow: hidden; }
.sn-mirror::before { content: ''; position: absolute; left: 50%; top: 0; width: 900px; height: 600px; transform: translateX(-50%); background: radial-gradient(closest-side, rgb(214 160 140 / .22), transparent); pointer-events: none; }
.sn-mirror .sn-kicker { color: var(--rose-lit); }
.sn-mirror .sn-deck { color: rgb(251 246 241 / .72); }
.sn-feats { list-style: none; margin-top: 34px; display: grid; gap: 10px; }
.sn-feats li { display: grid; grid-template-columns: 46px 1fr; gap: 14px; align-items: start; padding: 16px; border-radius: 20px; background: rgb(255 255 255 / .05); border: 1px solid rgb(255 255 255 / .07); }
.sn-feats li > i { width: 46px; height: 46px; border-radius: 15px; display: grid; place-items: center; background: rgb(214 160 140 / .14); color: var(--rose-lit); }
.sn-feats li > i .icon { width: 21px; height: 21px; }
.sn-feats b { font-weight: 500; font-size: 16px; }
.sn-feats p { font-size: 14.5px; color: rgb(251 246 241 / .65); margin-top: 2px; }
.sn-dash-stage { position: relative; height: 590px; margin-top: 44px; }
.sn-dash-stage .sn-phone { position: absolute; left: 50%; top: 0; transform: translateX(-50%); --w: 240px; background: linear-gradient(160deg, #5b4350, #1a0f15 40%, #2b1c24); }
.sn-dash { height: 100%; display: flex; flex-direction: column; background: #1f1019; color: var(--pearl); padding: 0 1.3em; }
.sn-dash > * { flex-shrink: 0; }
.sn-dash > .sn-sb { margin-inline: -1.3em; }
.sn-dash-hd { display: flex; align-items: center; gap: .9em; margin-top: .6em; }
.sn-dash-hd .lg { border-radius: 50%; display: grid; place-items: center; font: italic 500 1.6em/1 var(--serif); width: 2.1em; height: 2.1em; color: var(--rose-lit); box-shadow: 0 0 0 .05em #d6a08c; background: var(--plum); direction: ltr; }
.sn-dash-hd > div { flex: 1; min-width: 0; }
.sn-dash-hd small { display: block; font-size: .95em; opacity: .6; }
.sn-dash-hd b { display: block; font: 500 1.7em/1.1 var(--serif); }
.sn-dash-hd .bell { width: 2.8em; height: 2.8em; border-radius: 50%; display: grid; place-items: center; background: rgb(255 255 255 / .07); position: relative; }
.sn-dash-hd .bell .icon { width: 1.4em; height: 1.4em; }
.sn-dash-hd .bell::after { content: ''; position: absolute; top: .55em; inset-inline-end: .6em; width: .55em; height: .55em; border-radius: 50%; background: #e7a08e; }
.sn-today { margin-top: 1.2em; padding: 1.3em; border-radius: 1.7em; background: linear-gradient(135deg, #4a2a3d, #2f1828); border: .08em solid rgb(231 185 167 / .18); }
.sn-today small { font-size: .95em; letter-spacing: .12em; text-transform: uppercase; color: var(--rose-lit); }
.sn-today b { display: block; font: 500 2.4em/1.1 var(--serif); margin-top: .2em; }
.sn-today .prog { height: .5em; border-radius: .3em; background: rgb(255 255 255 / .1); margin-top: .9em; overflow: hidden; }
.sn-today .prog i { display: block; width: 45%; height: 100%; border-radius: inherit; background: var(--rg); }
.sn-today .row { display: flex; justify-content: space-between; margin-top: .7em; font-size: .98em; opacity: .7; }
.sn-live { display: flex; align-items: center; gap: .8em; margin-top: 1em; padding: 1em 1.1em; border-radius: 1.4em; background: var(--pearl); color: var(--ink); box-shadow: 0 1em 2em -1em rgb(0 0 0 / .6); }
.sn-live > i { width: .8em; height: .8em; border-radius: 50%; background: var(--rose); box-shadow: 0 0 0 .35em rgb(201 143 134 / .25); animation: sn-pulse 1.8s ease-in-out infinite; flex: none; }
.sn-live small { display: block; font-size: .9em; letter-spacing: .1em; text-transform: uppercase; color: var(--rose-ink); }
.sn-live b { display: block; font-weight: 500; font-size: 1.12em; }
@keyframes sn-pulse { 50% { box-shadow: 0 0 0 .6em rgb(201 143 134 / 0); } }
.sn-dlab { font-size: .95em; letter-spacing: .14em; text-transform: uppercase; opacity: .5; margin: 1.4em 0 .6em; }
.sn-row { display: grid; grid-template-columns: 4.2em 1fr auto; align-items: center; gap: .6em; padding: .85em 0; border-bottom: .08em solid rgb(255 255 255 / .07); }
.sn-row time { font-weight: 500; font-size: 1.05em; color: var(--rose-lit); white-space: nowrap; }
.sn-row b { display: block; font-weight: 500; font-size: 1.12em; }
.sn-row small { display: block; font-size: .95em; opacity: .55; }
.sn-row .m { border-radius: 50%; display: grid; place-items: center; font: italic 500 1.25em/1 var(--serif); width: 1.9em; height: 1.9em; background: rgb(214 160 140 / .16); color: var(--rose-lit); }
[dir='rtl'] .sn-row .m { font-style: normal; }
.sn-tabs { margin: auto -1.3em 0; padding: .9em .6em 2em; display: flex; justify-content: space-around; background: #170b12; border-top: .08em solid rgb(255 255 255 / .06); }
.sn-tabs span { display: grid; justify-items: center; gap: .3em; font-size: .82em; opacity: .5; }
.sn-tabs span.on { opacity: 1; color: var(--rose-lit); }
.sn-tabs .icon { width: 1.7em; height: 1.7em; }
.sn-toast { position: absolute; z-index: 3; inset-inline-end: -2px; top: 6px; display: flex; align-items: center; gap: 10px; padding: 10px 14px 10px 10px; border-radius: 16px; background: var(--pearl); color: var(--ink); box-shadow: 0 20px 40px -18px rgb(0 0 0 / .7); animation: sn-bob 6s ease-in-out infinite; text-align: start; }
[dir='rtl'] .sn-toast { padding: 10px 10px 10px 14px; }
.sn-toast > i { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; background: var(--rg); flex: none; }
.sn-toast > i .icon { width: 18px; height: 18px; }
.sn-toast small { display: block; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--rose-ink); }
.sn-toast b { display: block; font-weight: 500; font-size: 13px; white-space: nowrap; }
.sn-toast.t2 { inset-inline-start: -2px; inset-inline-end: auto; top: 500px; animation-delay: -3s; }

/* three steps */
.sn-begin { background: var(--pearl); }
.sn-three { display: grid; gap: 14px; margin-top: 40px; list-style: none; }
.sn-three li { position: relative; padding: 26px 24px; padding-inline-start: 96px; border-radius: 26px; background: #fff; border: 1px solid rgb(150 89 75 / .1); min-height: 132px; box-shadow: 0 20px 40px -32px rgb(90 40 52 / .4); }
.sn-three li > span { position: absolute; inset-inline-start: 26px; top: 18px; font: italic 500 64px/1 var(--serif); background: var(--rg); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sn-three h3 { font-size: 26px; line-height: 1.1; }
.sn-three p { color: var(--ink-2); font-size: 15px; margin-top: 6px; }

/* the finale */
.sn-finale { background: radial-gradient(80% 60% at 50% 40%, #f6e0d7, var(--pearl) 72%); text-align: center; overflow: hidden; }
.sn-finale .sn-h2, .sn-finale .sn-deck { margin-inline: auto; }
.sn-finale .sn-h2 { max-width: 12em; }
.sn-finale .sn-vanity { --aw: 220px; --at: 30px; --pw: 160px; height: calc(var(--at) + var(--aw) * 1.7407 + 40px); margin-top: 24px; }
.sn-finale .sn-vanity::before { background: radial-gradient(closest-side, rgb(233 190 176 / .55), rgb(233 190 176 / 0)); }
.sn-finale .sn-arch { background: radial-gradient(120% 62% at 50% 26%, #ffffff 0%, #fbefe9 38%, #f1d9cf 75%, #e8c8bc 100%); box-shadow: 0 50px 70px -40px rgb(90 40 52 / .45), 0 0 0 1px rgb(255 255 255 / .9) inset; }
.sn-finale .sn-arch::after { opacity: 1; }
.sn-finale .sn-btn, .sn-finale .sn-soon { margin-top: 28px; width: 100%; max-width: 360px; }

/* footer */
.sn-foot { background: var(--plum); color: rgb(251 246 241 / .7); text-align: center; padding: 56px 0 calc(40px + env(safe-area-inset-bottom)); font-size: 13.5px; }
.sn-foot .sn-wm { color: var(--pearl); font-size: 32px; }
.sn-foot p { margin-top: 12px; max-width: 30em; margin-inline: auto; }
.sn-foot .legal { display: flex; justify-content: center; gap: 20px; margin-top: 20px; }
.sn-foot .legal a { color: inherit; }
.sn-foot .sn-lang { margin-top: 22px; height: 40px; padding: 0 16px; border: 1px solid rgb(251 246 241 / .2); color: var(--pearl); }
.sn-foot small { display: block; margin-top: 22px; opacity: .6; }

/* entrances: only where motion is welcome */
.sn[data-motion='full'] .sn-rv { opacity: 0; transform: translateY(22px); transition: opacity .9s ease, transform .9s cubic-bezier(.2, .7, .2, 1); }
.sn[data-motion='full'] .sn-rv.in { opacity: 1; transform: none; }
.sn[data-motion='still'] *, .sn[data-motion='still'] *::before, .sn[data-motion='still'] *::after { animation: none !important; transition: none !important; }

/* desktop */
@media (min-width: 960px) {
  .sn { font-size: 17px; }
  .sn-wrap { width: min(1200px, 100% - 96px); }
  .sn-top .sn-wrap { height: 74px; }
  .sn-hero { padding: 40px 0 60px; }
  .sn-hero .sn-wrap { grid-template-columns: 1.05fr 1fr; grid-template-areas: 'copy vanity' 'more vanity'; gap: 0 40px; }
  .sn-copy { text-align: start; justify-items: start; align-self: end; }
  .sn-hero .sn-deck { text-align: start; font-size: 18.5px; }
  .sn-ctas { justify-content: flex-start; }
  .sn-hero .sn-btn { width: auto; }
  .sn-more { justify-items: start; align-self: start; margin-top: 26px; }
  .sn-facts { justify-content: flex-start; }
  .sn-vanity { --aw: 360px; --at: 50px; --pw: 270px; }
  .sn-chip { max-width: 280px; padding: 11px 16px 11px 11px; }
  [dir='rtl'] .sn-chip { padding: 11px 11px 11px 16px; }
  .sn-chip > i { width: 36px; height: 36px; border-radius: 12px; }
  .sn-chip small { font-size: 10.5px; }
  .sn-chip b { font-size: 14px; white-space: nowrap; }
  .sn-chip.c1 { top: calc(var(--pt) + 54px); inset-inline-start: -10px; }
  .sn-chip.c2 { top: calc(var(--pt) + 270px); inset-inline-end: -24px; }
  .sn-chip.c3 { top: calc(var(--pt) + var(--pw) * 2.056 - 40px); inset-inline-start: 0; }
  .sn-pad { padding: 130px 0; }
  .sn-pillars { grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 64px; }
  .sn-look .sn-wrap { display: grid; grid-template-columns: 1fr 1.1fr; gap: 64px; align-items: start; }
  .sn-stage { margin-top: 0; grid-template-columns: 1fr 1fr 1fr; }
  .sn-tile.wide-m { grid-column: auto; }
  .sn-tile.wide-d { grid-column: span 2; }
  .sn-rail { justify-content: center; overflow: visible; }
  .sn-card { width: 270px; height: 540px; }
  .sn-pocket .sn-wrap, .sn-mirror .sn-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
  .sn-dash-stage { margin-top: 0; height: 680px; }
  .sn-pocket-stage { margin-top: 0; display: block; height: 640px; }
  .sn-pocket-stage .sn-phone { --w: 290px; position: absolute; inset-inline-end: 4%; top: 0; }
  .sn-pocket-stage .sn-chat { position: absolute; inset-inline-start: 0; top: 70px; z-index: 3; width: 300px; }
  .sn-toast { inset-inline-end: -2%; top: 22px; }
  .sn-toast.t2 { inset-inline-start: -2%; top: 580px; }
  .sn-dash-stage .sn-phone { --w: 290px; }
  .sn-screens { justify-content: center; overflow: visible; gap: 40px; }
  .sn-screens .sn-phone { --w: 262px; }
  .sn-mirror { border-radius: 50% 50% 0 0 / 120px 120px 0 0; }
  .sn-three { grid-template-columns: repeat(3, 1fr); gap: 18px; }
  .sn-finale .sn-vanity { --aw: 270px; --pw: 196px; }
}
@media (prefers-reduced-motion: reduce) {
  .sn *, .sn *::before, .sn *::after { animation: none !important; }
}