/* Kubic Studio for salons and clinics. Its look comes from the salon film: cream paper, ink, rose, Playfair italic. */
:root {
  --bg: #F6F0EA; --paper: #FFFDFA; --blush: #EFE2DA; --ink: #1F1A18; --muted: #6B5F5A; --line: #E2D6CD;
  --rose: #8E4A46; --rose-d: #743835; --on-rose: #FFF8F4; --ok: #2F7D54;
  --serif: "Playfair Display", Georgia, serif; --sans: "Inter", "Segoe UI", system-ui, sans-serif;
  --ease: cubic-bezier(.16, 1, .3, 1);
}
* { box-sizing: border-box; margin: 0; padding: 0 }
html { scroll-behavior: smooth }
body { background: var(--bg); color: var(--ink); font: 400 17px/1.6 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: hidden }
img, video { max-width: 100%; display: block }
a { color: inherit }
.wrap { width: min(1120px, 100% - 32px); margin-inline: auto }
section { padding: 96px 0 }
@media (max-width: 720px) { section { padding: 64px 0 } }
h1, h2, h3 { font-family: var(--serif); font-weight: 600; letter-spacing: -.015em; line-height: 1.08 }
h1 { font-size: clamp(40px, 6.4vw, 76px) }
h2 { font-size: clamp(32px, 4.8vw, 56px) }
h3 { font-size: 26px }
em { color: var(--rose); font-style: italic }
.eyebrow { font-size: 14px; font-weight: 600; color: var(--rose); margin-bottom: 14px }
.lead { font-size: clamp(18px, 2vw, 21px); color: var(--muted); max-width: 660px }
.center { text-align: center } .center .lead { margin-inline: auto }
.btn { display: inline-flex; align-items: center; justify-content: center; font: 600 16px var(--sans); padding: 16px 28px; border-radius: 999px; text-decoration: none; border: 0; cursor: pointer; transition: transform .25s var(--ease), background .2s }
.btn:hover { transform: translateY(-2px) } .btn:active { transform: scale(.97) }
.btn.rose { background: var(--rose); color: var(--on-rose) } .btn.rose:hover { background: var(--rose-d) }
.btn.line { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink) }
.btn[disabled] { opacity: .6; cursor: default }
.ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px } .center .ctas { justify-content: center }

.nav { position: sticky; top: 0; z-index: 50; background: rgba(246, 240, 234, .88); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--line) }
.nav .wrap { display: flex; align-items: center; gap: 28px; height: 64px }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 700; font-size: 15px; letter-spacing: .02em; white-space: nowrap }
.hero h1 { font-size: clamp(34px, 4.4vw, 54px) }
.nav .btn { white-space: nowrap }
.btn .short { display: none } @media (max-width: 520px) { .btn .long { display: none } .btn .short { display: inline } }
.brand svg { width: 28px; height: 28px } .brand small { font: italic 500 15px var(--serif); color: var(--rose); letter-spacing: 0 }
.links { display: flex; gap: 24px; margin-left: auto } .links a { text-decoration: none; color: var(--muted); font-weight: 500; font-size: 15px } .links a:hover, .links a[aria-current] { color: var(--ink) }
.nav .btn { padding: 10px 18px; font-size: 14px }
@media (max-width: 800px) { .links { display: none } .nav .btn { margin-left: auto } }
@media (max-width: 420px) { .brand small { display: none } .nav .btn { padding: 9px 13px; font-size: 13px } }

.hero { padding: 56px 0 72px }
.vsl { position: relative; margin: 36px auto 0; max-width: 940px; border-radius: 22px; overflow: hidden; background: var(--blush); box-shadow: 0 40px 90px -45px rgba(90, 40, 35, .55) }
.vsl video { display: block; width: 100%; height: auto } .vsl .vsl-v { display: none }
.vsl-play { position: absolute; inset: 0; margin: auto; width: 92px; height: 92px; border-radius: 50%; border: 0; background: var(--rose); cursor: pointer; box-shadow: 0 18px 50px -12px rgba(60, 20, 18, .7); transition: transform .25s var(--ease) }
.vsl-play:hover { transform: scale(1.08) } .vsl-play::after { content: ""; position: absolute; left: 37px; top: 28px; border-left: 28px solid #fff; border-block: 18px solid transparent }
.vsl-play[hidden] { display: none }
@media (max-width: 767px) { .vsl { max-width: 400px } .vsl .vsl-h { display: none } .vsl .vsl-v { display: block } .vsl-play { width: 76px; height: 76px } .vsl-play::after { left: 30px; top: 22px; border-left-width: 24px; border-block-width: 16px } }

.types { padding: 24px 0; border-block: 1px solid var(--line); text-align: center; color: var(--muted); font: italic 500 19px var(--serif) }
.split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px; align-items: center }
.split img { border-radius: 18px; box-shadow: 0 30px 70px -40px rgba(90, 40, 35, .5) }
@media (max-width: 860px) { .split { grid-template-columns: minmax(0, 1fr); gap: 32px } }
.steps { display: grid; gap: 72px; margin-top: 64px }
.step-num { font: italic 600 22px var(--serif); color: var(--rose); margin-bottom: 8px }
.step p { color: var(--muted); margin-top: 14px; max-width: 480px }
.step p.step-num { color: var(--rose); margin-top: 0 }
.flip > :first-child { order: 2 } @media (max-width: 860px) { .flip > :first-child { order: 0 } }

.band { background: var(--paper); border-block: 1px solid var(--line) }
.nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin-top: 48px }
.nums b { display: block; font: 600 clamp(44px, 6vw, 68px)/1 var(--serif); color: var(--rose) } .nums p { color: var(--muted); margin-top: 12px }
@media (max-width: 720px) { .nums { grid-template-columns: minmax(0, 1fr) } }

.plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; max-width: 760px; margin: 56px auto 0; text-align: left }
.plan { background: var(--paper); border: 1px solid var(--line); border-radius: 22px; padding: 28px; display: flex; flex-direction: column; position: relative }
.plan.pop { border: 2px solid var(--rose) }
.plan .tag { position: absolute; top: -13px; left: 24px; background: var(--rose); color: var(--on-rose); font-size: 12px; font-weight: 600; padding: 5px 12px; border-radius: 999px }
.plan .price { font: 600 44px/1 var(--serif); margin: 18px 0 6px } .plan .per { color: var(--muted); font-size: 14px; margin-bottom: 18px }
.plan ul { list-style: none; display: grid; gap: 10px; margin-bottom: 24px; font-size: 15px }
.plan li { padding-left: 22px; position: relative } .plan li::before { content: "✓"; position: absolute; left: 0; color: var(--ok); font-weight: 700 }
.plan .btn { margin-top: auto; padding: 13px 18px; font-size: 15px }
@media (max-width: 620px) { .plans { grid-template-columns: minmax(0, 1fr) } .plan.pop { order: -1 } }

.faq { display: grid; gap: 10px; max-width: 780px; margin: 48px auto 0; text-align: left }
.faq details { background: var(--paper); border: 1px solid var(--line); border-radius: 16px; padding: 18px 22px } .faq summary { font-weight: 600; cursor: pointer } .faq p { color: var(--muted); margin-top: 10px }
.final { background: var(--rose); color: var(--on-rose); border-radius: 28px; padding: 72px 24px; text-align: center } .final h2 em { color: #F5D6C8 } .final .lead { color: #F3E2DA; margin: 18px auto 0 }
.final .btn { background: var(--paper); color: var(--ink) } .final .ctas { justify-content: center }
footer { padding: 40px 0; color: var(--muted); font-size: 14px }
footer .wrap { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: 24px }
footer nav { display: flex; gap: 20px; flex-wrap: wrap } footer a { text-decoration: none } footer a:hover { color: var(--ink) }

/* partner program */
.h-xl { font-size: clamp(40px, 6.4vw, 76px) }
.h-l { font-size: clamp(32px, 4.8vw, 56px); font-family: var(--serif); font-weight: 600; letter-spacing: -.015em; line-height: 1.08 }
.partner-head { padding-top: 64px }
.tiers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 48px; text-align: left }
.tier { background: var(--paper); border: 1px solid var(--line); border-radius: 22px; padding: 32px } .tier.top { border: 2px solid var(--rose) }
.tier .pct { font: 600 72px/1 var(--serif); color: var(--rose); margin: 14px 0 6px } .tier .of { color: var(--muted); margin-bottom: 18px } .tier ul { list-style: none; display: grid; gap: 10px } .tier li { padding-left: 22px; position: relative } .tier li::before { content: "✓"; position: absolute; left: 0; color: var(--ok); font-weight: 700 }
@media (max-width: 720px) { .tiers { grid-template-columns: minmax(0, 1fr) } }
.tablewrap { overflow-x: auto; margin-top: 40px; border: 1px solid var(--line); border-radius: 16px; background: var(--paper) }
table.earn { width: 100%; min-width: 460px; border-collapse: collapse; text-align: left; font-size: 15px } .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(--muted); font-weight: 600 } .earn b { color: var(--rose) }
.terms { max-width: 780px; margin: 32px auto 0; text-align: left; color: var(--muted); font-size: 16px; display: grid; gap: 10px; padding-left: 22px }
.terms b { color: var(--ink) }
form.apply { max-width: 620px; margin: 40px auto 0; display: grid; gap: 16px; text-align: left; background: var(--paper); border: 1px solid var(--line); border-radius: 22px; 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 16px var(--sans); color: var(--ink); background: var(--bg); padding: 13px 14px; border: 1px solid var(--line); border-radius: 12px; width: 100% }
form.apply input:focus-visible, form.apply select:focus-visible, form.apply textarea:focus-visible { outline: 2px solid var(--rose); outline-offset: 1px }
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: #A33 }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important } }