/* Kubic Studio for salons. Apple's marketing language on the main site's black (D:\design-libs\awesome-design-md\design-md\apple, apple-design skill):
   the system font with tight display tracking, two-tone white and grey headlines, flat tiles with no shadows on chrome, translucent nav, one accent colour for actions.
   The accent is the main site's gold. Effects ported from Magic UI and Motion Primitives. */
:root {
  --canvas: #000; --white: #161617; --sand: #1D1D1F; --line: #2C2C2E; --ink: #F5F5F7; --stone: #A1A1A6; --mute: #86868B;
  --plum: #1D1D1F; --plum-2: #242426; --wine: #F2C14E; --rose: #F2C14E; --peach: #F2C14E; --gold: #F2C14E; --ok: #30D158; --black: #000; --on-gold: #1A1406; --k-red: #FF3B3B; --k-yellow: #FFC21A; --k-blue: #2F7BFF; --k-green: #22C55E;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", Inter, "Segoe UI", system-ui, sans-serif;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --on-sky: #A1A1A6; --on-sky-em: #86868B; --on-dark: #A1A1A6; --nav: rgba(22, 22, 23, .72); --nav-link: #D6D6DB;
  color-scheme: dark;
}
* { box-sizing: border-box; margin: 0; padding: 0 }
html { scroll-behavior: smooth; scroll-padding-top: 72px; -webkit-text-size-adjust: 100% }
body { background: var(--canvas); color: var(--ink); font: 400 17px/1.55 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: clip }
img, video { display: block; max-width: 100%; height: auto }
a { color: inherit } button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 6px }
.wrap { width: min(1160px, 100% - 40px); margin-inline: auto }
section { padding: 120px 0 }
@media (max-width: 720px) { section { padding: 80px 0 } }

h1, h2, .h-xl, .h-l { font-family: var(--sans); font-weight: 600; letter-spacing: -.028em; line-height: 1.06; text-wrap: balance; font-optical-sizing: auto }
h1 { font-size: clamp(42px, 6.2vw, 80px) }
h2, .h-l { font-size: clamp(36px, 5vw, 64px) }
.h-xl { font-size: clamp(42px, 6.2vw, 80px) }
h3 { font-size: 23px; font-weight: 600; letter-spacing: -.015em; line-height: 1.2 }
em, .grad { font-style: normal; color: var(--mute) }
.eyebrow { font-size: 17px; font-weight: 600; letter-spacing: -.01em; color: var(--gold); margin-bottom: 12px }
.lead { font-size: clamp(19px, 1.9vw, 24px); line-height: 1.35; letter-spacing: -.012em; color: var(--stone); max-width: 620px; margin-top: 22px; text-wrap: pretty }
.center { text-align: center } .center .lead { margin-inline: auto }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 14px 28px; border-radius: 999px; font: 500 17px var(--sans); letter-spacing: -.01em; text-decoration: none; white-space: nowrap; transition: transform .1s ease-out, background .2s }
.btn:active { transform: scale(.97) }
.btn.gold { background: var(--gold); color: var(--on-gold) } .btn.gold:hover { background: #F7CF70 }
.btn.white { background: var(--gold); color: var(--on-gold) } .btn.white:hover { background: #F7CF70 }
.btn.line { box-shadow: inset 0 0 0 1.5px var(--ink) }
.btn[disabled] { opacity: .6; cursor: default }
.btn .short { display: none }
.ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 30px } .center .ctas { justify-content: center }
.shine { position: relative; overflow: hidden }

/* translucent nav: content scrolls under it */
.nav { position: sticky; top: 0; z-index: 50; background: var(--nav); backdrop-filter: saturate(160%) blur(16px); -webkit-backdrop-filter: saturate(160%) blur(16px); color: #fff }
.nav .wrap { display: flex; align-items: center; gap: 28px; height: 52px }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 700; font-size: 14px; letter-spacing: .05em; white-space: nowrap }
.brand svg { width: 28px; height: 28px } .brand small { font: 400 14px var(--sans); letter-spacing: 0; color: var(--stone); margin-left: 2px }
.links { display: flex; gap: 24px; margin-left: auto } .links a { text-decoration: none; color: var(--nav-link); font-size: 13px; font-weight: 400 } .links a:hover, .links a[aria-current] { color: #fff }
.nav .btn { min-height: 32px; padding: 6px 14px; font-size: 13px; background: var(--gold); color: var(--on-gold) }
@media (max-width: 860px) { .links { display: none } .nav .btn { margin-left: auto } }
@media (max-width: 520px) { .nav .btn .long { display: none } .nav .btn .short { display: inline } }

/* hero */
.hero { position: relative; isolation: isolate; overflow: hidden; background: #000; color: var(--ink); padding: 72px 0 112px }
/* one soft pool of light for the film to sit in, and nothing else */
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse 58% 42% at 50% 72%, rgba(255, 255, 255, .13), transparent 72%) }
.hero .eyebrow { color: var(--gold) } .hero em { color: var(--mute) }
.hero .lead { color: var(--stone) }
.js [data-words] .w { display: inline-block; opacity: 0; will-change: transform, opacity }
.vsl { position: relative; margin: 56px auto 0; max-width: 980px; border-radius: 28px; overflow: hidden; background: var(--sand); box-shadow: 0 0 0 1px rgba(255, 255, 255, .14), rgba(0, 0, 0, .6) 0 30px 60px }
.vsl video { width: 100%; height: auto } .vsl .vsl-v { display: none }
.vsl-play { position: absolute; inset: 0; margin: auto; width: 88px; height: 88px; border-radius: 50%; background: rgba(40, 40, 42, .62); backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); transition: transform .1s ease-out }
.vsl-play::after { content: ""; position: absolute; left: 34px; top: 25px; border-left: 28px solid #fff; border-block: 19px solid transparent }
.vsl-play span { position: absolute; left: 50%; top: calc(100% + 10px); transform: translateX(-50%); padding: 5px 12px; border-radius: 999px; background: rgba(0, 0, 0, .75); color: #fff; font: 600 13px var(--sans); white-space: nowrap }
.vsl-play:active { transform: scale(.95) } .vsl-play[hidden] { display: none }
@media (max-width: 767px) {
  .hero { padding: 48px 0 72px }
  .vsl { max-width: 330px; margin-top: 36px } .vsl .vsl-h { display: none } .vsl .vsl-v { display: block }
  .vsl-play { width: 76px; height: 76px } .vsl-play::after { left: 29px; top: 21px; border-left-width: 25px; border-block-width: 17px }
}

.ticker { overflow: hidden; padding: 22px 0; border-bottom: 1px solid var(--line); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent) }
.ticker .track { display: flex; gap: 56px; width: max-content; animation: slide 34s linear infinite; font: 600 26px var(--sans); color: var(--stone) }
.ticker span { white-space: nowrap }
@keyframes slide { to { transform: translateX(-50%) } }

/* dark bands */
.dark { background: #0F0F10; color: var(--ink) }
.dark .eyebrow { color: var(--gold) } .dark em { color: var(--mute) } .dark .lead { color: var(--stone) }

/* one tap, every account */
.blast { position: relative; max-width: 980px; margin: 56px auto 0; display: flex; flex-direction: column; align-items: center }
.beams { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible }
.beams path { fill: none; stroke: rgba(255, 255, 255, .12); stroke-width: 1.2 }
.beams path.pulse { stroke: var(--peach); stroke-width: 2; stroke-linecap: round; filter: drop-shadow(0 0 5px var(--peach)) }
.src { position: relative; z-index: 1; width: 148px; aspect-ratio: 9 / 16; border-radius: 16px; overflow: hidden; background: var(--plum-2); box-shadow: 0 0 0 2px rgba(255, 255, 255, .3), 0 24px 50px -16px #000 }
.src video { width: 100%; height: 100%; object-fit: cover }
.src span { position: absolute; left: 6px; right: 6px; top: 8px; padding: 5px 7px; border-radius: 7px; background: #fff; color: #111; font-size: 11.5px; font-weight: 700; line-height: 1.2 }
.blast .go { position: relative; z-index: 1; margin-top: -24px }
.blast .go.firing { transform: scale(.96) }
.count { position: relative; z-index: 1; margin: 14px 0 70px; color: var(--on-dark); font-size: 15px; font-variant-numeric: tabular-nums } .count b { color: #fff; font: 400 26px var(--sans) }
.accts { position: relative; z-index: 1; width: 100%; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px }
.acct { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 11px; border-radius: 14px; background: #1D1D1F; border: 0; transition: background .35s, border-color .35s, transform .45s var(--ease); position: relative }
.acct i { flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; color: #fff; font: 700 15px var(--sans); font-style: normal }
.p-ig { background: linear-gradient(45deg, #F9A23C, #E1306C 50%, #8A3AB9) } .p-ig::after { content: ""; width: 14px; height: 14px; border: 2px solid #fff; border-radius: 5px }
.p-fb { background: #1877F2 } .p-fb::after { content: "f" }
.p-tt { background: #111 } .p-tt::after { content: "♪" }
.p-yt { background: #FF0033 } .p-yt::after { content: ""; border-left: 11px solid #fff; border-block: 7px solid transparent; margin-left: 2px }
.p-li { background: #0A66C2 } .p-li::after { content: "in" }
.p-x { background: #000; box-shadow: inset 0 0 0 1px #444 } .p-x::after { content: "X" }
.acct span { min-width: 0 } .acct b { display: block; font-size: 13.5px; font-weight: 600; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis } .acct small { color: var(--on-dark); font-size: 12px }
.acct::after { content: "✓"; position: absolute; top: 7px; right: 8px; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; background: var(--ok); color: #03210F; font: 800 11px var(--sans); transform: scale(0); transition: transform .4s var(--ease) }
.acct.on { background: #2C2C2E } .acct.on::after { transform: scale(1) }
@media (max-width: 860px) { .accts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px } .acct { flex-direction: column; text-align: center; gap: 6px; padding: 10px 4px } .acct b { font-size: 12px; white-space: normal } .acct small { font-size: 11px } .count { margin-bottom: 48px } }

/* the pain + styles */
.pain { padding-bottom: 96px }
.styles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 56px }
.sty { background: var(--white); border-radius: 22px; padding: 24px; display: flex; flex-direction: column; gap: 6px; min-height: 170px }
.sty i { width: 14px; height: 14px; border-radius: 4px; margin-bottom: 10px }
.sty b { font-size: 19px; font-weight: 600; letter-spacing: -.02em } .sty span { color: var(--stone); font-size: 15px; line-height: 1.35 }
.sty.hero-sty { background: var(--sand); box-shadow: inset 0 0 0 1.5px var(--gold) }
.stynote { color: var(--mute); font-size: 12px; margin-top: 18px; text-align: center }
@media (max-width: 860px) { .styles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px } .sty { padding: 18px; min-height: 0 } .sty b { font-size: 17px } .sty span { font-size: 14px } }

/* sticky story, as on the main site: the text scrolls, the phone stays and changes screen */
.story { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; text-align: left }
.story .phone-col { position: sticky; top: 72px; height: calc(100vh - 92px); display: grid; place-items: center }
.story .steps { padding: 20vh 0 }
.story .step { min-height: 72vh; display: flex; flex-direction: column; justify-content: center; transition: opacity .4s }
.js .story .step { opacity: .28 } .js .story .step.on { opacity: 1 }
.story .num { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font-weight: 600; color: #0B1022; margin-bottom: 20px }
.story .step h3 { font-size: clamp(28px, 3.6vw, 44px); font-weight: 600; letter-spacing: -.028em; line-height: 1.08 }
.story .step p { color: var(--stone); font-size: 19px; line-height: 1.4; margin-top: 16px; max-width: 460px }
.story .device { width: min(330px, calc((100vh - 110px) * .46)); margin: 0 }
.stack .ui { opacity: 0; transform: translateY(12px) scale(.985); transition: opacity .35s var(--ease), transform .35s var(--ease); pointer-events: none }
.stack .ui.on { opacity: 1; transform: none }
/* phones: side by side, the phone sticks on the left and nothing ever sits on top of the text */
@media (max-width: 900px) {
  .story { grid-template-columns: 150px minmax(0, 1fr); gap: 18px; align-items: start }
  .story .phone-col { top: calc(50vh - 160px); height: 324px; width: 150px; display: block }
  .story .phone-col .device { position: absolute; top: 0; left: 0; width: 330px; transform: scale(.4545); transform-origin: top left }
  .story .steps { padding: 18vh 0 }
  .story .step { min-height: 74vh }
  .story .step h3 { font-size: 24px }
  .story .step p { font-size: 15px; margin-top: 10px }
  .story .num { width: 32px; height: 32px; border-radius: 10px; font-size: 14px; margin-bottom: 12px }
}

/* the phone, in the app's own dark tokens */
.device { --bg: #000; --card: #18181C; --card-2: #222228; --ink: #F5F5F7; --muted: #9B9BA5; --accent: #F2C14E; --on-accent: #1A1406; --ok: #4ADE80;
  position: relative; width: 300px; aspect-ratio: 9 / 19.4; margin-top: 18px; border-radius: 52px; padding: 11px; background: linear-gradient(150deg, #8d8d96, #2b2b31 12%, #141418 55%, #8a8a93); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35), inset 0 0 0 6px #050506, 0 40px 70px -30px rgba(0, 0, 0, .75); font-weight: 500 }
.screen { position: relative; height: 100%; border-radius: 42px; overflow: hidden; background: var(--bg); color: var(--ink) }
.screen::before { content: ""; position: absolute; top: 10px; left: 50%; transform: translateX(-50%); width: 34%; height: 26px; border-radius: 16px; background: #000; z-index: 6 }
.sbar { position: absolute; top: 0; left: 0; right: 0; height: 46px; z-index: 5; display: flex; align-items: center; justify-content: space-between; padding: 6px 26px 0 30px; font-size: 14px; font-weight: 700 }
.sbar i { display: block; width: 22px; height: 11px; border-radius: 3px; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .6); position: relative } .sbar i::after { content: ""; position: absolute; inset: 2px 6px 2px 2px; border-radius: 1px; background: #fff }
.ui { position: absolute; inset: 0; padding: 56px 14px 16px; display: flex; flex-direction: column; gap: 11px; font-size: 13px; line-height: 1.35 }
.ui .ttl { font-size: 23px; font-weight: 700; letter-spacing: -.02em; line-height: 1.1 }
.ui .sub { color: var(--muted); font-size: 12.5px }
.ui .card { background: var(--card); border-radius: 15px; padding: 12px; display: flex; flex-direction: column; gap: 6px }
.ui .row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap }
.chip { flex: none; font-size: 10.5px; font-weight: 700; padding: 4px 9px; border-radius: 999px; background: var(--card-2); color: var(--muted); white-space: nowrap } .chip.ok { background: #12301F; color: var(--ok) }
.bigbtn { margin-top: auto; background: var(--accent); color: var(--on-accent); border-radius: 14px; padding: 13px; text-align: center; font-weight: 700; font-size: 14px }
.item { flex: none; display: flex; align-items: center; gap: 10px; background: var(--card); border-radius: 13px; padding: 7px; min-width: 0 }
.item .th { flex: none; width: 34px; height: 46px; border-radius: 8px; background: var(--card-2) center / cover }
.item .tx { flex: 1; min-width: 0 } .item .tx b { display: block; font-size: 12px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis } .item .tx small { color: var(--muted); font-size: 10.5px }
.prog { height: 6px; border-radius: 3px; background: var(--card-2); overflow: hidden } .prog i { display: block; height: 100%; width: 62%; background: var(--accent); border-radius: 3px; animation: fill 3.2s var(--ease) infinite }
@keyframes fill { from { width: 8% } }
.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px }
.tile { position: relative; aspect-ratio: 9 / 14; border-radius: 13px; overflow: hidden; background: var(--card-2) center / cover }
.tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 50%, rgba(0, 0, 0, .85)) }
.tile span { position: absolute; z-index: 1; left: 7px; right: 7px; bottom: 7px; font-weight: 700; font-size: 11px; line-height: 1.2; color: #fff }
.tile video { width: 100%; height: 100%; object-fit: cover }
.tile.more { display: grid; place-items: center; background: var(--card); border: 1.5px dashed #33333c } .tile.more::after { display: none } .tile.more span { position: static; color: var(--muted); text-align: center; padding: 8px }
.toggle { flex: none; width: 38px; height: 22px; border-radius: 11px; background: var(--ok); position: relative } .toggle::after { content: ""; position: absolute; right: 3px; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff }
.week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px } .week div { background: var(--card); border-radius: 9px; padding: 5px 0; text-align: center; font-size: 10px; color: var(--muted); font-weight: 600 } .week b { display: block; font-size: 13px; color: var(--ink) } .week .on { background: var(--ink); color: var(--bg) } .week .on b { color: var(--bg) }
.banner { display: flex; gap: 9px; align-items: center; background: #2B2B31; border-radius: 16px; padding: 9px 11px } .banner .ap { flex: none; width: 28px; height: 28px; border-radius: 8px; background: var(--ok) } .banner b { display: block; font-size: 12px } .banner small { font-size: 11px; color: #c9c9d1 }

/* features */
.feats { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; margin-top: 56px; text-align: left }
.feat { position: relative; overflow: hidden; background: var(--white); border: 0; border-radius: 28px; padding: 28px; display: flex; flex-direction: column; min-height: 280px }
.feat.w3 { grid-column: span 3 } .feat.w2 { grid-column: span 2 }
.feat.tint { background: var(--sand) }
.feat.ink { background: var(--sand); color: var(--ink) } .feat.ink > p:not(.karaoke) { color: var(--stone) }
.feat > p:not(.karaoke) { color: var(--stone); margin-top: 6px; font-size: 16px }
.feat > :last-child:not(p) { margin-top: auto; padding-top: 22px }
@media (max-width: 860px) { .feats { grid-template-columns: minmax(0, 1fr) } .feat.w3, .feat.w2 { grid-column: auto } .feat { padding: 24px 20px; min-height: 0 } }
.plan-chip { display: inline-block; vertical-align: 3px; margin-left: 6px; padding: 3px 9px; border-radius: 999px; background: #2C2C2E; color: var(--gold); font: 700 11px var(--sans) }
.sort { list-style: none; display: grid; gap: 8px }
.sort li { display: grid; grid-template-columns: 38px minmax(0, 1fr) 28px; gap: 12px; align-items: center; background: var(--canvas); border-radius: 12px; padding: 7px 12px 7px 7px; transition: transform .8s var(--ease); will-change: transform }
.sort img { width: 38px; height: 50px; object-fit: cover; border-radius: 7px }
.sort small { display: block; color: var(--stone); font-size: 12px; font-variant-numeric: tabular-nums }
.sort b { display: block; font: 600 19px/1.15 var(--sans); letter-spacing: -.015em; color: var(--ink) }
.sort i { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--plum); color: #fff; font: 700 12px var(--sans); transition: opacity .3s .55s, transform .3s .55s }
.sort.mixed i { opacity: 0; transform: scale(.5); transition: none }
.hookfan { position: relative; min-height: 290px }
.hookfan figure { position: absolute; bottom: -40px; left: 50%; width: 31%; max-width: 165px; aspect-ratio: 9 / 16; border-radius: 13px; overflow: hidden; background: var(--plum); box-shadow: 0 20px 40px -18px rgba(0, 0, 0, .8) }
.hookfan video { width: 100%; height: 100%; object-fit: cover }
.hookfan figcaption { position: absolute; left: 5px; right: 5px; top: 8%; padding: 5px 7px; border-radius: 7px; background: #fff; color: #111; font-size: 12px; font-weight: 700; line-height: 1.2 }
.hookfan .h1 { transform: translateX(-154%) rotate(-3deg) } .hookfan .h2 { transform: translateX(-50%); z-index: 2; bottom: -20px } .hookfan .h3 { transform: translateX(54%) rotate(3deg) }
@media (max-width: 860px) { .hookfan { min-height: 215px } .hookfan figure, .hookfan .h2 { bottom: 0 } .hookfan .h1 { transform: translateX(-154%) } .hookfan .h3 { transform: translateX(54%) } .hookfan figcaption { font-size: 11px } }
.wave { display: flex; align-items: center; gap: 3px; height: 96px }
.wave i { flex: 1; height: var(--h); border-radius: 2px; background: var(--ink); transition: flex .6s var(--ease), opacity .4s, background .4s }
.wave i.cut { background: #FF453A }
.wave.done i.cut { flex: 0; opacity: 0; margin: 0 -1.5px }
.karaoke { color: rgba(255, 255, 255, .4); font: 600 30px/1.14 var(--sans); letter-spacing: -.02em }
.karaoke span { transition: color .15s } .karaoke span.on { color: var(--gold) } .karaoke span.past { color: #fff }
.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px } .cal i { aspect-ratio: 1; border-radius: 8px; background: var(--sand) } .cal i.p { background: var(--rose) }
.chat { display: flex; flex-direction: column; gap: 9px; min-height: 170px; justify-content: flex-end }
.bub { align-self: flex-end; max-width: 88%; background: #0A84FF; color: #fff; padding: 10px 14px; border-radius: 18px 18px 4px 18px; font-weight: 500; font-size: 15px; line-height: 1.35 }
.bub.them { align-self: flex-start; background: #2C2C2E; color: var(--ink); border-radius: 18px 18px 18px 4px }
#ask-typed { border-right: 2px solid transparent } #ask.typing #ask-typed { border-right-color: #fff }
.js #ask .later { opacity: 0; transform: translateY(10px) } .js #ask.done .later { opacity: 1; transform: none; transition: opacity .5s var(--ease), transform .5s var(--ease) }
.sub-note { font-size: 14px; color: var(--stone) } .sub-note b { color: var(--gold) }
.dmflow { display: grid; gap: 8px }
.note { display: flex; align-items: center; gap: 10px; background: var(--white); border-radius: 14px; padding: 10px 12px; font-size: 15px; font-weight: 600 }
.note .av { flex: none; width: 30px; height: 30px; border-radius: 50% } .note span:nth-child(2) { flex: 1; min-width: 0 } .note b { display: block; font-size: 12px; color: var(--stone); font-weight: 500 } .note small { color: var(--stone); font-size: 12px } .note.ok b { color: var(--ok) }
.js .dmflow .note { opacity: 0; transform: translateY(14px) scale(.96) } .js .dmflow .note.in { opacity: 1; transform: none; transition: opacity .5s var(--ease), transform .5s var(--ease) }

/* speed */
.race { max-width: 860px; margin: 52px auto 0; display: grid; gap: 8px }
.rlab { font: 600 26px var(--sans); margin-top: 16px }
.rbar { position: relative; height: 50px; border-radius: 12px; background: rgba(255, 255, 255, .05); overflow: hidden }
.rbar::before { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w); min-width: 8px; border-radius: 12px; transition: width 1.8s var(--ease); background: rgba(255, 255, 255, .17) }
.rbar.fast::before { background: var(--peach) }
.js .race:not(.in) .rbar::before { width: 0 }
.rbar span { position: relative; display: flex; align-items: center; height: 100%; padding: 0 16px; font-size: 15px; font-weight: 600 } .rbar.fast span { padding-left: calc(var(--w) + 14px); color: var(--peach) }
@media (max-width: 720px) { .rbar span { font-size: 13.5px; padding-inline: 12px } }
.nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px; margin-top: 64px }
.nums div { border-top: 1px solid rgba(255, 255, 255, .2); padding-top: 20px }
.nums b { display: block; font: 600 clamp(56px, 6vw, 80px)/1 var(--sans); letter-spacing: -.035em; color: var(--peach) } .nums p { color: var(--on-dark); margin-top: 10px }
@media (max-width: 720px) { .nums { grid-template-columns: minmax(0, 1fr); gap: 28px; margin-top: 44px } }

/* plans */
.plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; max-width: 840px; margin: 56px auto 0; text-align: left }
.plan { position: relative; display: flex; flex-direction: column; background: var(--white); border: 0; border-radius: 28px; padding: 32px }
.plan h3 { font: 600 24px/1.1 var(--sans); letter-spacing: -.02em }
.plan .price { font: 600 64px/1 var(--sans); letter-spacing: -.035em; margin: 18px 0 4px } .plan .per { font-size: 15px; color: var(--stone); padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid var(--line) }
.plan ul { list-style: none; display: grid; gap: 11px; margin-bottom: 28px; font-size: 16px; line-height: 1.35 } .plan li { position: relative; padding-left: 24px } .plan li::before { content: "✓"; position: absolute; left: 0; font-weight: 700; color: var(--ok) }
.plan .btn { margin-top: auto }
.plan.pop { background: var(--sand); box-shadow: inset 0 0 0 1.5px var(--gold) }
.plan.pop li::before { color: var(--gold) }
.plan .tag { position: absolute; top: 20px; right: 20px; padding: 5px 12px; border-radius: 999px; background: var(--gold); color: var(--on-gold); font-size: 12px; font-weight: 600 }
@media (max-width: 720px) { .plans { grid-template-columns: minmax(0, 1fr) } .plan.pop { order: -1 } .plan { padding: 28px 22px } }

/* questions */
.faq { max-width: 760px; margin: 36px auto 0; text-align: left; border-top: 1px solid var(--line) }
.faq details { border-bottom: 1px solid var(--line) }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: 20px; min-height: 66px; padding: 14px 0; font-size: 18px; font-weight: 600; cursor: pointer; list-style: none }
.faq summary::-webkit-details-marker { display: none }
.faq summary::after { content: "+"; flex: none; font-size: 26px; font-weight: 400; color: var(--rose); transition: transform .25s var(--ease) }
.faq details[open] summary::after { transform: rotate(45deg) } .faq p { color: var(--stone); padding-bottom: 20px }

/* close */
.close { background: #000; color: var(--ink) }
.close em { color: var(--mute) } .close .lead { color: var(--stone) }
form.wait { max-width: 520px; margin: 36px auto 0; display: grid; gap: 14px; text-align: left; background: var(--white); color: var(--ink); border-radius: 28px; padding: 26px }
form.wait label { display: grid; gap: 6px; font-weight: 600; font-size: 15px }
form.wait input { font: 400 17px var(--sans); color: var(--ink); background: #000; min-height: 50px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; width: 100% }
form.wait input:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px } form.wait input.bad { border-color: #FF453A }
form.wait input.hp { position: absolute; left: -9999px; width: 1px; min-height: 0; padding: 0 }
form.wait .btn { width: 100%; margin-top: 4px }
form.wait.done { text-align: center; font: 600 28px/1.15 var(--sans); letter-spacing: -.02em } form.wait.done small { display: block; margin-top: 10px; font: 400 16px/1.5 var(--sans); color: var(--stone) }
footer { background: #000; color: var(--mute); font-size: 12px; padding: 24px 0; border-top: 1px solid var(--line) }
footer .wrap { display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap }
footer nav { display: flex; gap: 20px; flex-wrap: wrap } footer a { text-decoration: none; padding-block: 6px } footer a:hover { color: #fff }

/* phone CTA */
.bar { display: none }
@media (max-width: 800px) {
  .bar { display: block; position: fixed; inset: auto 0 0; z-index: 40; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: rgba(22, 22, 23, .72); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-top: 1px solid var(--line); transform: translateY(110%); transition: transform .35s var(--ease) }
  .bar.on { transform: none } .bar .btn { width: 100% } .has-bar footer { padding-bottom: 92px }
}

/* partner program */
.partner-head { padding-top: 72px }
.tiers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 48px; text-align: left }
.tier { background: var(--white); border-radius: 28px; padding: 30px } .tier.top { background: var(--sand); box-shadow: inset 0 0 0 1.5px var(--gold) }
.tier .pct { font: 600 80px/1 var(--sans); letter-spacing: -.035em; color: var(--ink); margin: 12px 0 6px } .tier .of { color: var(--stone); margin-bottom: 18px } .tier ul { list-style: none; display: grid; gap: 10px } .tier li { position: relative; padding-left: 22px } .tier li::before { content: "✓"; position: absolute; left: 0; font-weight: 700; color: var(--ok) } .tier.top li::before { color: var(--peach) }
@media (max-width: 720px) { .tiers { grid-template-columns: minmax(0, 1fr) } }
.tablewrap { overflow-x: auto; margin-top: 36px; border: 1px solid var(--line); border-radius: 16px; background: var(--white) }
table.earn { width: 100%; min-width: 460px; border-collapse: collapse; text-align: left; font-size: 15px; font-variant-numeric: tabular-nums } .earn th, .earn td { padding: 14px 18px; border-bottom: 1px solid var(--line) } .earn tr:last-child td { border-bottom: 0 } .earn th { color: var(--stone); font-weight: 600 } .earn b { color: var(--gold) }
.terms { max-width: 780px; margin: 28px auto 0; padding-left: 22px; text-align: left; color: var(--stone); font-size: 16px; display: grid; gap: 10px } .terms b { color: var(--ink) }
form.apply { max-width: 620px; margin: 36px auto 0; display: grid; gap: 16px; text-align: left; background: var(--white); border: 1px solid var(--line); border-radius: 24px; padding: 28px }
form.apply label { display: grid; gap: 6px; font-weight: 600; font-size: 15px }
form.apply input, form.apply select, form.apply textarea { font: 400 17px var(--sans); color: var(--ink); background: #000; padding: 13px 14px; border: 1px solid var(--line); border-radius: 12px; width: 100% }
form.apply input.hp { position: absolute; left: -9999px; width: 1px } .form-msg { min-height: 24px; font-size: 15px } .form-msg.ok { color: var(--ok); font-weight: 600 } .form-msg.bad { color: #FF6961 }
.partner-head + section .h-l, .h-l { margin-top: 0 }

@media (prefers-reduced-transparency: reduce) { .nav, .bar { background: #161617; backdrop-filter: none; -webkit-backdrop-filter: none } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important } .js [data-words] .w, .js .dmflow .note, .js #ask .later { opacity: 1 !important; transform: none !important } }