/* ColourSesh landing pages and cabinets (/welcome, /salons, /pricing, /account, /pro).
   One bright, warm brand: cream and sand, near-black ink, terracotta and coral, golden-hour gold, eucalyptus.
   Fraunces (display) and DM Sans (text) come from Google Fonts; docs/DESIGN-2026-10-01.md lists every token. */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
:root{
  color-scheme:light;
  --cream:#fbf6ef; --paper:#fffdf9; --sand:#f5ece2; --blush:#f8e5da; --peach:#fbd9c4;
  --ink:#1f1a17; --ink-2:#4a403a; --muted:#6b5f57;
  --coral:#e8684a; --coral-hover:#f07d61; --terracotta:#b0432a; --terracotta-deep:#8f3520;
  --gold:#f2b544; --gold-soft:#fbeccc; --gold-ink:#7a4d0c;
  --gum:#4f735d; --gum-ink:#3d5c49; --gum-soft:#e3ece4; --gum-deep:#1f3a2e;
  --line:#e7dacd; --line-strong:#cdbbab; --line-dark:rgba(251,246,239,.16);
  --card:var(--paper);
  --shadow:0 1px 0 rgba(31,26,23,.03),0 22px 44px -30px rgba(90,42,20,.42);
  --display:"Fraunces",ui-serif,"Iowan Old Style","Sitka Display",Cambria,Georgia,serif;
  --sans:"DM Sans",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --gut:clamp(16px,4vw,64px);
}
html{background:var(--cream);scroll-behavior:smooth;scroll-padding-top:88px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--cream);color:var(--ink);font:400 16px/1.6 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:clip}
img{max-width:100%;display:block}
a{color:inherit;text-underline-offset:3px}
h1,h2,h3,h4,p,ul,ol,dl,dd,figure{margin:0}
ul,ol{padding:0;list-style:none}
:focus-visible{outline:3px solid var(--terracotta);outline-offset:3px}
.plum :focus-visible,.site-foot :focus-visible{outline-color:var(--gold)}
::selection{background:#f6cbb8;color:var(--ink)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}}

.skip{position:fixed;left:12px;top:-64px;z-index:100;padding:12px 16px;background:var(--ink);color:var(--cream);border-radius:999px;font:600 14px/1 var(--sans);text-decoration:none}
.skip:focus{top:12px}

/* ---------- header ---------- */
.site-head{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:12px;padding:10px var(--gut);padding-top:calc(10px + env(safe-area-inset-top,0px));background:rgba(251,246,239,.88);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.brand{display:inline-flex;align-items:center;gap:10px;min-height:44px;text-decoration:none;font:700 21px/1 var(--sans);letter-spacing:-.035em;white-space:nowrap;color:var(--ink)}
.brand svg{width:34px;height:34px;flex:none;border-radius:10px}
.brand b{color:var(--coral);font-weight:inherit}
.head-nav{display:flex;align-items:center;gap:2px;margin-left:auto}
.head-nav a{display:inline-flex;align-items:center;min-height:40px;padding:0 13px;border-radius:999px;text-decoration:none;font:500 15px/1 var(--sans);color:var(--ink-2)}
.head-nav a:hover{color:var(--ink);background:var(--sand)}
.head-nav a[aria-current="page"]{color:var(--ink);background:var(--blush)}
.head-actions{display:flex;align-items:center;gap:8px}
.lang{display:flex;padding:3px;border-radius:999px;background:var(--sand);box-shadow:inset 0 0 0 1px var(--line)}
.lang button{min-width:40px;min-height:36px;padding:0 10px;border:0;border-radius:999px;background:transparent;color:var(--muted);font:600 13px/1 var(--sans);letter-spacing:.04em;cursor:pointer}
.lang button:hover{color:var(--ink)}
.lang button[aria-pressed="true"]{background:var(--ink);color:var(--cream)}
@media (max-width:900px){.head-nav{display:none}.head-actions{margin-left:auto}}
@media (max-width:420px){.head-actions .btn .lab{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.head-actions .btn{padding-left:6px}.brand{font-size:18px;gap:8px}.brand svg{width:30px;height:30px}.lang button{min-width:36px;padding:0 8px}}

/* ---------- buttons, tags, type ---------- */
.btn{display:inline-flex;align-items:center;gap:12px;min-height:48px;padding:6px 6px 6px 22px;border-radius:999px;border:0;font:600 15px/1.2 var(--sans);letter-spacing:-.005em;text-decoration:none;cursor:pointer;transition:background .2s,color .2s,box-shadow .25s,transform .2s}
.btn:not(:has(.arr)){padding:6px 22px}
.btn .arr{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;flex:none;transition:transform .25s}
.btn .arr svg{width:12px;height:12px}
.btn:hover .arr{transform:translateX(3px)}
.btn-light{background:var(--coral);color:var(--ink);box-shadow:0 12px 26px -14px rgba(176,67,42,.75)}
.btn-light .arr{background:var(--ink);color:var(--cream)}
.btn-light:hover{background:var(--coral-hover)}
.btn-dark{background:var(--ink);color:var(--cream)}
.btn-dark .arr{background:var(--coral);color:var(--ink)}
.btn-dark:hover{background:#3a302a}
.btn-ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line-strong)}
.btn-ghost .arr{background:var(--sand)}
.btn-ghost:hover{box-shadow:inset 0 0 0 1.5px var(--ink);background:rgba(255,255,255,.5)}
.plum .btn-ghost{color:var(--cream);box-shadow:inset 0 0 0 1.5px rgba(251,246,239,.4)}
.plum .btn-ghost .arr{background:rgba(251,246,239,.12)}
.plum .btn-ghost:hover{box-shadow:inset 0 0 0 1.5px var(--cream);background:rgba(251,246,239,.06)}
.btn-top{min-height:42px;padding:4px 4px 4px 16px;background:var(--ink);color:var(--cream);font-size:14px}
.btn-top .arr{width:32px;height:32px;background:var(--coral);color:var(--ink)}
.btn-top:hover{background:#3a302a}
.tag{display:inline-flex;align-items:center;gap:8px;padding:7px 13px 7px 11px;border-radius:999px;font:700 12px/1.2 var(--sans);letter-spacing:.08em;text-transform:uppercase;background:var(--blush);color:var(--terracotta-deep)}
.tag::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--coral);flex:none}
.pearl .tag{background:var(--paper)}
.plum .tag{background:rgba(251,246,239,.1);color:var(--cream)}
.plum .tag::before{background:var(--gold)}
.display{font-family:var(--display);font-weight:500;font-size:clamp(40px,5.6vw,84px);line-height:1.02;letter-spacing:-.025em;text-wrap:balance;font-optical-sizing:auto;font-variation-settings:"SOFT" 100}
.display em,.h2 em{font-style:italic;font-weight:400;color:var(--terracotta)}
.plum .display em,.plum .h2 em{color:var(--gold)}
.h2{font-family:var(--display);font-weight:500;font-size:clamp(32px,4vw,56px);line-height:1.06;letter-spacing:-.02em;text-wrap:balance;font-variation-settings:"SOFT" 100}
.lede{font-size:clamp(17px,1.35vw,20px);line-height:1.6;max-width:58ch;color:var(--ink-2)}
.plum .lede,.plum .muted{color:rgba(251,246,239,.82)}
.muted{color:var(--muted)}
.fine{font:500 14px/1.5 var(--sans);color:var(--muted)}
.plum .fine{color:rgba(251,246,239,.75)}
html[lang="ru"] .display{font-size:clamp(36px,4.8vw,72px)}
html[lang="ru"] p,html[lang="ru"] dd,html[lang="ru"] li{hyphens:auto;-webkit-hyphens:auto}

/* ---------- sections ---------- */
.sec{position:relative;padding:clamp(72px,10vw,136px) var(--gut);--card:var(--paper)}
.in{max-width:1240px;margin:0 auto}
.light{background:var(--sand);color:var(--ink);color-scheme:light}
.pearl{background:var(--blush);color:var(--ink);color-scheme:light}
.plum{background:radial-gradient(60% 80% at 90% 0%,rgba(242,181,68,.16),transparent 70%),var(--gum-deep);color:var(--cream);color-scheme:dark;--card:rgba(251,246,239,.06);--line:rgba(251,246,239,.16)}
.sec-head{display:grid;gap:18px;max-width:780px;margin-bottom:clamp(40px,5vw,64px)}
.sec-head .tag{justify-self:start}

/* ---------- hero: golden hour ---------- */
.hero{padding-top:clamp(48px,7vw,104px);background:radial-gradient(48% 62% at 88% 6%,rgba(242,181,68,.34),transparent 72%),radial-gradient(42% 56% at 100% 72%,rgba(232,104,74,.2),transparent 72%),radial-gradient(40% 50% at 0% 100%,rgba(79,115,93,.1),transparent 70%),var(--cream)}
.hero .in{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(32px,5vw,88px);align-items:center}
.hero-copy{display:grid;gap:24px;justify-items:start}
.hero-solo .in{grid-template-columns:minmax(0,1fr)}
.hero-solo .hero-copy{max-width:860px}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.hero-art{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:14px}
.hero-art figure{position:relative;overflow:hidden;border-radius:24px;background:var(--sand);box-shadow:0 30px 60px -34px rgba(90,42,20,.55)}
.hero-art figure:last-of-type{transform:translateY(32px)}
.hero-art img{width:100%;height:auto;aspect-ratio:3/4;object-fit:cover}
.hero-art figcaption{position:absolute;left:12px;top:12px;padding:6px 12px;border-radius:999px;background:rgba(255,253,249,.92);color:var(--ink);font:600 13px/1.2 var(--sans)}
.hero-art figure:last-of-type figcaption{background:var(--coral)}
.stylist-card{position:absolute;right:-22px;bottom:-72px;width:min(244px,60%);padding:16px 18px 18px;border-radius:18px;background:var(--paper);color:var(--ink);box-shadow:0 28px 56px -26px rgba(90,42,20,.55),0 0 0 1px var(--line);font-size:14px;transform:rotate(-1.5deg)}
.stylist-card .card-head{display:flex;justify-content:space-between;gap:10px;padding-bottom:9px;border-bottom:1px solid var(--line);font:700 11px/1.3 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.stylist-card .card-head span:first-child{color:var(--terracotta)}
.stylist-card p{margin-top:9px;font:500 19px/1.2 var(--display)}
.stylist-card dl{display:grid;gap:5px;margin-top:9px}
.stylist-card dl div{display:grid;grid-template-columns:62px 1fr;gap:8px}
.stylist-card dt{font:700 11px/1.7 var(--sans);letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.stylist-card dd{line-height:1.45}

/* ---------- reasons and steps ---------- */
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,24px)}
.point{display:grid;align-content:start;gap:12px;padding:clamp(22px,2.4vw,30px);border-radius:22px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line)}
.point .num{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--blush);color:var(--terracotta-deep);font:600 17px/1 var(--display)}
.plum .point .num{background:var(--gold);color:var(--ink)}
.point h3{font:500 clamp(22px,2vw,28px)/1.15 var(--display);letter-spacing:-.01em;text-wrap:balance}
.point p{color:var(--muted);max-width:44ch}
.plum .point p{color:rgba(251,246,239,.8)}

/* ---------- plans ---------- */
.plans{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;align-items:stretch}
.plans.three{grid-template-columns:repeat(3,minmax(0,1fr));max-width:1000px}
.plan{position:relative;display:flex;flex-direction:column;gap:16px;padding:28px 24px 24px;border-radius:24px;background:var(--paper);color:var(--ink);box-shadow:0 0 0 1px var(--line),var(--shadow)}
.plan.pop{box-shadow:0 0 0 2px var(--coral),0 26px 50px -30px rgba(176,67,42,.6)}
.plan .badge{position:absolute;top:-13px;left:22px;padding:6px 12px;border-radius:999px;background:var(--coral);color:var(--ink);font:700 12px/1 var(--sans);letter-spacing:.04em}
.plan h3{font:700 13px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--terracotta)}
.plan .for{font-size:15px;color:var(--muted);min-height:3em}
.price{display:flex;align-items:baseline;gap:8px;font:500 clamp(44px,3.6vw,56px)/1 var(--display);letter-spacing:-.02em;font-variation-settings:"SOFT" 100}
.price small{font:500 14px/1.3 var(--sans);letter-spacing:0;color:var(--muted)}
.plan .unit{margin-top:-6px;font:600 14px/1.4 var(--sans);color:var(--gum-ink)}
.plan ul{display:grid;gap:9px;padding-top:16px;border-top:1px solid var(--line);font-size:15px;line-height:1.45}
.plan li{position:relative;padding-left:26px}
.plan li::before{content:"";position:absolute;left:0;top:.2em;width:17px;height:17px;border-radius:50%;background:var(--gum-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.3l2.2 2.2 4.8-5' fill='none' stroke='%233d5c49' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/13px no-repeat}
.plan li strong{font-weight:700}
.plan .btn{margin-top:auto;justify-content:space-between}
.offer{display:grid;grid-template-columns:auto 1fr auto;gap:18px 28px;align-items:center;margin-top:28px;padding:24px 28px;border-radius:24px;background:linear-gradient(115deg,var(--gold-soft),var(--blush));box-shadow:inset 0 0 0 1px rgba(242,181,68,.55);color:var(--ink)}
.offer .star{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--gold);color:var(--ink);font-size:22px;box-shadow:0 0 0 8px rgba(242,181,68,.25)}
.offer h3{font:500 clamp(22px,2vw,28px)/1.15 var(--display)}
.offer p{color:var(--ink-2);max-width:70ch}
.notes{display:grid;gap:6px;margin-top:22px;font-size:14px;color:var(--muted);max-width:90ch}
.notes li{position:relative;padding-left:16px}
.notes li::before{content:"";position:absolute;left:3px;top:.62em;width:5px;height:5px;border-radius:50%;background:var(--coral)}
.notes a{color:var(--terracotta);font-weight:600}

/* ---------- questions ---------- */
.qa{display:grid;max-width:900px}
.qa details{border-top:1px solid var(--line-strong)}
.qa details:last-child{border-bottom:1px solid var(--line-strong)}
.plum .qa details{border-color:var(--line-dark)}
.qa summary{display:flex;justify-content:space-between;align-items:center;gap:24px;min-height:44px;padding:20px 0;cursor:pointer;list-style:none;font:500 clamp(20px,1.9vw,25px)/1.25 var(--display)}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"";flex:none;width:34px;height:34px;border-radius:50%;background:linear-gradient(var(--terracotta),var(--terracotta)) center/12px 1.8px no-repeat,linear-gradient(var(--terracotta),var(--terracotta)) center/1.8px 12px no-repeat,var(--blush);transition:transform .3s}
.plum .qa summary::after{background:linear-gradient(var(--ink),var(--ink)) center/12px 1.8px no-repeat,linear-gradient(var(--ink),var(--ink)) center/1.8px 12px no-repeat,var(--gold)}
.qa details[open] summary::after{transform:rotate(45deg)}
.qa details p{padding:0 0 24px;color:var(--ink-2);max-width:66ch}
.plum .qa details p{color:rgba(251,246,239,.82)}
.qa details a{color:var(--terracotta);font-weight:600}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}

/* ---------- application form ---------- */
.apply .in{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(32px,5vw,88px);align-items:start}
.apply-copy{display:grid;gap:20px;justify-items:start;position:sticky;top:104px}
.form{display:grid;grid-template-columns:1fr 1fr;gap:16px 18px;padding:clamp(22px,3vw,34px);border-radius:26px;background:var(--paper);color:var(--ink);box-shadow:0 0 0 1px var(--line),var(--shadow)}
.field{display:grid;gap:7px;align-content:start}
.field.full{grid-column:1/-1}
.field label,.field .label{font:600 14px/1.3 var(--sans);color:var(--ink-2)}
.field .req{color:var(--terracotta)}
.field input,.field select,.field textarea{width:100%;min-height:48px;padding:12px 14px;border-radius:12px;border:1px solid var(--line-strong);background:var(--paper);color:var(--ink);font:400 16px/1.4 var(--sans)}
.field textarea{min-height:110px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:3px solid rgba(176,67,42,.28);outline-offset:0;border-color:var(--terracotta)}
.field [aria-invalid="true"]{border-color:#b3261e;box-shadow:0 0 0 1px #b3261e}
.check{grid-column:1/-1;display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;font-size:14px;line-height:1.5;color:var(--muted)}
.check input{width:20px;height:20px;margin:2px 0 0;accent-color:var(--terracotta)}
.hp{position:absolute!important;left:-10000px!important;width:1px;height:1px;overflow:hidden}
.form-foot{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:14px 20px;align-items:center}
.form-foot .btn[disabled]{opacity:.6;cursor:progress}
.status{font-size:14px;color:var(--muted)}
.status[data-kind="error"]{color:#b3261e}
.thanks{grid-column:1/-1;display:grid;gap:12px;padding:8px 0}
.thanks h3{font:500 clamp(26px,2.4vw,34px)/1.1 var(--display)}

/* ---------- final call and footer ---------- */
.final{text-align:center}
.final .in{display:grid;gap:22px;justify-items:center}
.site-foot{padding:36px var(--gut) calc(32px + env(safe-area-inset-bottom,0px));background:var(--ink);color:var(--cream)}
.site-foot .in{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:18px 32px}
.foot-nav{display:flex;flex-wrap:wrap;gap:4px 22px}
.foot-nav a,.site-foot p{display:inline-flex;align-items:center;min-height:40px;font:500 14px/1.4 var(--sans);color:rgba(251,246,239,.78);text-decoration:none}
.foot-nav a:hover{color:var(--cream);text-decoration:underline}

/* ---------- smaller screens ---------- */
@media (max-width:1080px){
  .plans{grid-template-columns:repeat(2,minmax(0,1fr))}
  .offer{grid-template-columns:auto 1fr}
  .offer .btn{grid-column:1/-1;justify-self:start}
}
@media (max-width:900px){
  .hero .in,.apply .in{grid-template-columns:1fr}
  .apply-copy{position:static}
  .hero-art{max-width:520px;margin-bottom:80px}
  .grid3{grid-template-columns:1fr}
  .plans.three{grid-template-columns:1fr;max-width:520px}
}
@media (max-width:640px){
  .plans{grid-template-columns:1fr}
  .form{grid-template-columns:1fr}
  .offer{grid-template-columns:1fr;padding:22px}
  .hero-art figure:last-of-type{transform:translateY(20px)}
  .hero-art{margin-bottom:0}
  .stylist-card{position:relative;grid-column:1/-1;right:auto;bottom:auto;width:auto;margin:4px 8px 0;transform:none}
  .site-foot .in{flex-direction:column;align-items:flex-start}
  .btn{font-size:15px}
}

/* ---------- motion: /welcome and /salons set html.motion before the first paint unless the visitor prefers
   reduced motion; their scripts mark below-the-fold blocks .rv and add .is-in as each one scrolls into view ---------- */
html.motion .rv{--d:calc(var(--i,0) * 90ms);opacity:0;translate:0 28px;transition:opacity .7s cubic-bezier(.2,.7,.2,1) var(--d),translate .9s cubic-bezier(.2,.7,.2,1) var(--d),transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s}
html.motion .rv.is-in{opacity:1;translate:none}
@supports (-webkit-background-clip:text) or (background-clip:text){
  /* the italic words in a heading take their colour as the heading arrives */
  html.motion .sec .rv :is(.h2,.display) em{padding-right:.1em;margin-right:-.1em;background:linear-gradient(100deg,var(--terracotta) 0 46%,var(--ink) 54% 100%) 100% 0/220% 100% no-repeat;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;transition:background-position 1.3s cubic-bezier(.65,0,.35,1) calc(var(--d,0s) + .25s)}
  html.motion .sec.plum .rv :is(.h2,.display) em{background-image:linear-gradient(100deg,var(--gold) 0 46%,var(--cream) 54% 100%)}
  html.motion .sec .rv.is-in :is(.h2,.display) em{background-position:0 0}
}
@media (forced-colors:active){html.motion :is(.h2,.display) em{background:none!important;-webkit-text-fill-color:currentColor!important}}
html.motion .point:hover,html.motion .plan:hover{transform:translateY(-5px)}
html.motion .point:hover{box-shadow:inset 0 0 0 1px var(--line),0 24px 40px -30px rgba(90,42,20,.5)}
html.motion .plum .point:hover{box-shadow:inset 0 0 0 1px rgba(251,246,239,.32),0 24px 40px -30px rgba(0,0,0,.6)}
html.motion .point .num{transition:background .3s,color .3s,rotate .45s cubic-bezier(.3,1.6,.5,1),scale .6s cubic-bezier(.3,1.6,.5,1) calc(var(--d,0s) + .25s),opacity .3s calc(var(--d,0s) + .25s)}
html.motion .point:hover .num{background:var(--coral);color:var(--ink);rotate:-10deg}
html.motion .plum .point:hover .num{background:var(--cream)}
html.motion .rv:not(.is-in) .num{scale:.3;opacity:0}
html.motion :is(.btn-light,.btn-dark){position:relative;isolation:isolate;overflow:hidden}
html.motion :is(.btn-light,.btn-dark)::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(105deg,transparent 35%,rgba(255,253,249,.42) 50%,transparent 65%) -160% 0/70% 100% no-repeat;transition:background-position .8s cubic-bezier(.2,.7,.2,1);pointer-events:none}
html.motion :is(.btn-light,.btn-dark):hover::after{background-position:260% 0}
html.motion .btn:active{scale:.97}
@supports (interpolate-size:allow-keywords) and selector(::details-content){
  html.motion .qa details{interpolate-size:allow-keywords}
  html.motion .qa details::details-content{block-size:0;overflow:clip;transition:block-size .45s cubic-bezier(.2,.7,.2,1),content-visibility .45s allow-discrete}
  html.motion .qa details[open]::details-content{block-size:auto}
}