:root{
  color-scheme: light;

  --ground:   #FFF8F4;
  --ground-2: #FDEFE8;
  --surface:  #FFFFFF;
  --sunk:     #FBF1EC;

  --ink:      #3A2F38;
  --ink-2:    #64545F;
  --ink-soft: #9A8892;

  --accent:    #E4667F;
  --accent-2:  #C48BE0;
  --on-accent: #FFFFFF;

  --peach: #FFD9C7;
  --lilac: #E3CFF7;
  --mint:  #C7EADC;
  --sky:   #D3DEFA;

  --ok:   #2E8465;  --ok-bg:   #DBF0E7;
  --warn: #9A6A1E;  --warn-bg: #FAEBD4;
  --crit: #C4425A;  --crit-bg: #FBE0E6;
  --info: #5566C4;  --info-bg: #E2E7FB;

  --r-s:   18px;
  --r-m:   32px;
  --r-l:   48px;
  --r-btn: 100px;

  --shadow-s: 0 4px 14px rgba(120, 82, 100, .07);
  --shadow-m: 0 14px 34px -12px rgba(120, 82, 100, .22);
  --shadow-l: 0 30px 70px -30px rgba(120, 82, 100, .38);

  --wrap: 1120px;
  --pad: clamp(16px, 4vw, 40px);

  --font-display: "Fredoka", system-ui, sans-serif;
  --font-ui: "Nunito", system-ui, -apple-system, sans-serif;

  --ease: cubic-bezier(.22,.9,.28,1);
  --t: 240ms;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme: dark;
    --ground:#1B151C; --ground-2:#241C26; --surface:#251E27; --sunk:#2E2431;
    --ink:#F4EAF0; --ink-2:#CDBCC7; --ink-soft:#9C8B97;
    --accent:#F58AA0; --accent-2:#C9A0E6; --on-accent:#2A1620;
    --peach:#5A3A30; --lilac:#43335A; --mint:#2C4A41; --sky:#313A5C;
    --ok:#7FD3B1;  --ok-bg:#1E362D;
    --warn:#E0B86E; --warn-bg:#3A2E16;
    --crit:#F58AA0; --crit-bg:#3E1E27;
    --info:#9FAEF0; --info-bg:#242B4A;
    --shadow-s: 0 4px 14px rgba(0,0,0,.35);
    --shadow-m: 0 14px 34px -12px rgba(0,0,0,.6);
    --shadow-l: 0 30px 70px -30px rgba(0,0,0,.8);
  }
}
:root[data-theme="dark"]{
  color-scheme: dark;
  --ground:#1B151C; --ground-2:#241C26; --surface:#251E27; --sunk:#2E2431;
  --ink:#F4EAF0; --ink-2:#CDBCC7; --ink-soft:#9C8B97;
  --accent:#F58AA0; --accent-2:#C9A0E6; --on-accent:#2A1620;
  --peach:#5A3A30; --lilac:#43335A; --mint:#2C4A41; --sky:#313A5C;
  --ok:#7FD3B1;  --ok-bg:#1E362D;
  --warn:#E0B86E; --warn-bg:#3A2E16;
  --crit:#F58AA0; --crit-bg:#3E1E27;
  --info:#9FAEF0; --info-bg:#242B4A;
  --shadow-s: 0 4px 14px rgba(0,0,0,.35);
  --shadow-m: 0 14px 34px -12px rgba(0,0,0,.6);
  --shadow-l: 0 30px 70px -30px rgba(0,0,0,.8);
}

*, *::before, *::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:86px; }
body{
  margin:0; background: var(--ground); color: var(--ink);
  font-family: var(--font-ui); font-size:16.5px; line-height:1.62; font-weight:400;
  -webkit-font-smoothing: antialiased; overflow-x:hidden;
}
img, svg{ max-width:100%; }
[hidden]{ display:none !important; }
h1,h2,h3,h4{ margin:0; font-family: var(--font-display); font-weight:600; line-height:1.1; letter-spacing:-.01em; text-wrap:balance; }
p{ margin:0; }
ul,ol,dl,dd{ margin:0; padding:0; }
li{ list-style:none; }
a{ color:inherit; text-underline-offset:3px; }
button, input, textarea, select{ font:inherit; color:inherit; }
:focus-visible{ outline:3px solid var(--accent); outline-offset:3px; border-radius:6px; }
::selection{ background: var(--accent); color: var(--on-accent); }

.sr{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.skip{ position:absolute; left:-9999px; top:10px; z-index:99; background: var(--ink); color: var(--ground); padding:12px 20px; border-radius: var(--r-btn); text-decoration:none; }
.skip:focus{ left:12px; }

.wrap{ max-width: var(--wrap); margin-inline:auto; padding-inline: var(--pad); }

.eyebrow{
  display:inline-flex; align-items:center; gap:7px;
  font-size:13.5px; font-weight:700; letter-spacing:.02em; color: var(--accent);
}
.eyebrow::before{ content:""; width:9px; height:9px; border-radius:50%; background: currentColor; flex:none; }
.sec__h{ font-size: clamp(30px, 4.6vw, 52px); }
.sec__lead{ color: var(--ink-2); font-size:17px; max-width:48ch; }
.dim{ color: var(--ink-soft); font-size:14.5px; }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  min-height:54px; padding:0 30px; border:0; border-radius: var(--r-btn);
  font-family: var(--font-ui); font-size:16.5px; font-weight:700;
  text-decoration:none; cursor:pointer; white-space:nowrap;
  background: var(--sunk); color: var(--ink);
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease), background var(--t) var(--ease);
}
.btn:hover{ transform: translateY(-2px); box-shadow: var(--shadow-m); }
.btn:active{ transform: translateY(0); }
.btn--solid{ background: var(--accent); color: var(--on-accent); box-shadow: var(--shadow-s); }
.btn--ghost{ background: var(--surface); color: var(--ink); box-shadow: var(--shadow-s); }
.btn--sm{ min-height:42px; padding:0 20px; font-size:15px; }
.btn[disabled]{ opacity:.4; cursor:not-allowed; transform:none; box-shadow:none; }

.iconbtn{
  width:46px; height:46px; display:grid; place-items:center; flex:0 0 auto;
  border:0; border-radius:50%; background: var(--surface); color: var(--ink);
  cursor:pointer; box-shadow: var(--shadow-s);
  transition: transform var(--t) var(--ease), color var(--t) var(--ease);
}
.iconbtn:hover{ transform: rotate(-12deg) scale(1.06); color: var(--accent); }
.iconbtn__svg{ width:19px; height:19px; display:block; }

.chip{
  display:inline-flex; align-items:center; height:42px; padding:0 20px;
  border:0; border-radius: var(--r-btn); background: var(--surface); color: var(--ink-2);
  font-size:15px; font-weight:700; cursor:pointer; box-shadow: var(--shadow-s);
  transition: all var(--t) var(--ease);
}
.chip:hover{ color: var(--ink); transform: translateY(-2px); }
.chip.is-on{ background: var(--ink); color: var(--ground); }

.top{ position:sticky; top:0; z-index:40; padding-top:14px; background: transparent; }
.top__in{
  display:flex; align-items:center; gap:16px;
  padding:10px 12px 10px 22px; border-radius: var(--r-btn);
  background: color-mix(in oklab, var(--surface) 86%, transparent);
  backdrop-filter: blur(14px); box-shadow: var(--shadow-m);
}
.logo{ display:flex; align-items:center; gap:10px; text-decoration:none; flex:0 0 auto; }
.logo__m{
  width:34px; height:34px; flex:none; border-radius:50%;
  background: linear-gradient(140deg, var(--peach), var(--lilac) 55%, var(--mint));
  display:grid; place-items:center;
  font-family: var(--font-display); font-weight:600; font-size:15px; color: var(--ink);
}
.logo b{ font-family: var(--font-display); font-size:22px; font-weight:600; letter-spacing:.01em; }
.logo i{ font-style:normal; font-size:13px; font-weight:600; color: var(--ink-soft); }

.nav{ display:flex; gap:4px; margin-left:auto; }
.nav a{
  padding:9px 16px; border-radius: var(--r-btn); font-size:15.5px; font-weight:600;
  color: var(--ink-2); text-decoration:none; transition: all var(--t) var(--ease);
}
.nav a:hover{ background: var(--sunk); color: var(--ink); }
.top__act{ display:flex; align-items:center; gap:9px; }

.burger{
  display:none; width:46px; height:46px; border:0; border-radius:50%;
  background: var(--surface); box-shadow: var(--shadow-s); cursor:pointer;
  flex-direction:column; align-items:center; justify-content:center; gap:5px;
}
.burger span{ width:17px; height:2.5px; border-radius:2px; background: var(--ink); transition: transform var(--t) var(--ease), opacity var(--t) var(--ease); }
.burger[aria-expanded="true"] span:nth-child(1){ transform: translateY(7.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform: translateY(-7.5px) rotate(-45deg); }

.hero{ padding-block: clamp(22px,3.4vw,40px) clamp(30px,4vw,54px); }
.pillow{
  position:relative; overflow:hidden; border-radius: var(--r-l);
  padding: clamp(34px,5.6vw,86px) clamp(24px,4.6vw,68px);
  background: var(--surface); box-shadow: var(--shadow-l);
}

.pillow::before, .pillow::after{
  content:""; position:absolute; border-radius:50%; pointer-events:none;
  filter: blur(6px);
}
.pillow::before{
  width:52%; aspect-ratio:1; right:-10%; top:-26%;
  background: radial-gradient(circle at 34% 34%, var(--peach), transparent 68%);
}
.pillow::after{
  width:44%; aspect-ratio:1; left:-12%; bottom:-30%;
  background: radial-gradient(circle at 60% 40%, var(--lilac), transparent 66%);
}
.pillow > *{ position:relative; z-index:1; }

.hero__h{ font-size: clamp(36px, 6.4vw, 78px); line-height:1.02; margin:18px 0 0; max-width:15ch; }
.hero__h em{ font-style:normal; color: var(--accent); }
.hero__sub{ margin-top:20px; max-width:46ch; font-size:18px; color: var(--ink-2); }
.hero__cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:32px; }
.hero__note{ margin-top:22px; font-size:14.5px; color: var(--ink-soft); }

.facts{ display:flex; flex-wrap:wrap; gap:12px; margin-top:26px; }
.fact{
  flex:1 1 150px; padding:18px 22px; border-radius: var(--r-m);
  background: var(--sunk); display:flex; flex-direction:column; gap:2px;
}
.fact:nth-child(1){ background: color-mix(in oklab, var(--peach) 52%, var(--surface)); }
.fact:nth-child(2){ background: color-mix(in oklab, var(--mint) 52%, var(--surface)); }
.fact:nth-child(3){ background: color-mix(in oklab, var(--sky) 52%, var(--surface)); }
.fact dd{ font-family: var(--font-display); font-size:32px; font-weight:600; line-height:1; }
.fact dt{ font-size:13.5px; font-weight:600; color: var(--ink-2); order:2; margin-top:4px; }

.sec{ padding-block: clamp(34px,5vw,72px); }
.sec__head{ display:flex; flex-direction:column; gap:12px; margin-bottom: clamp(22px,3.4vw,40px); }

.tint{ background: var(--ground-2); border-radius: var(--r-l); padding: clamp(26px,4vw,54px); }

.wizard{ border-radius: var(--r-l); background: var(--surface); box-shadow: var(--shadow-m); overflow:hidden; }
.steps{ display:flex; flex-wrap:wrap; gap:8px; padding: clamp(16px,2.4vw,24px) clamp(18px,2.8vw,30px) 0; }
.step{
  display:flex; align-items:center; gap:9px; padding:9px 18px 9px 9px;
  border-radius: var(--r-btn); background: var(--sunk);
  font-size:14.5px; font-weight:700; color: var(--ink-soft);
  transition: all var(--t) var(--ease);
}
.step span{
  width:26px; height:26px; flex:none; display:grid; place-items:center; border-radius:50%;
  background: var(--surface); color: var(--ink-soft); font-size:13px;
}
.step.is-on{ background: var(--accent); color: var(--on-accent); }
.step.is-on span{ background: var(--on-accent); color: var(--accent); }
.step.is-done{ background: color-mix(in oklab, var(--mint) 60%, var(--surface)); color: var(--ink); }
.step.is-done span{ background: var(--surface); color: var(--ink); }

.wizard__body{ padding: clamp(18px,2.8vw,30px); min-height:340px; }
.pane{ display:none; }
.pane.is-on{ display:block; }

.pickgrid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(255px,1fr)); gap:12px; }
.pick{
  text-align:left; cursor:pointer; padding:20px 22px; border:0; border-radius: var(--r-m);
  background: var(--sunk); display:flex; flex-direction:column; gap:5px;
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease), background var(--t) var(--ease);
}
.pick:hover{ transform: translateY(-3px); box-shadow: var(--shadow-m); }
.pick.is-on{ background: var(--accent); color: var(--on-accent); box-shadow: var(--shadow-m); }
.pick.is-on .pick__d{ color: inherit; opacity:.85; }
.pick.is-on .pick__f b{ color: inherit; }
.pick__t{ font-family: var(--font-display); font-size:19px; font-weight:600; }
.pick__d{ font-size:14.5px; color: var(--ink-2); }
.pick__f{ display:flex; gap:16px; margin-top:6px; font-size:14.5px; font-weight:700; }
.pick__f b{ color: var(--accent); font-weight:800; }

.whenwrap{ display:grid; grid-template-columns: minmax(0,320px) minmax(0,1fr); gap: clamp(20px,3vw,40px); }
.cal{ padding:20px; border-radius: var(--r-m); background: var(--sunk); }
.cal__bar{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:14px; }
.cal__m{ font-family: var(--font-display); font-size:20px; font-weight:600; text-transform:capitalize; }
.cal__nav{ display:flex; gap:6px; }
.cal__nav button{
  width:36px; height:36px; border:0; border-radius:50%; background: var(--surface);
  color: var(--ink); cursor:pointer; line-height:1; box-shadow: var(--shadow-s);
  transition: transform var(--t) var(--ease);
}
.cal__nav button:hover:not([disabled]){ transform: scale(1.1); color: var(--accent); }
.cal__nav button[disabled]{ opacity:.3; cursor:not-allowed; box-shadow:none; }
.cal__dow, .cal__grid{ display:grid; grid-template-columns: repeat(7,1fr); gap:5px; }
.cal__dow span{ text-align:center; font-size:12px; font-weight:700; color: var(--ink-soft); padding-bottom:6px; }
.cal__d{
  aspect-ratio:1; border:0; border-radius:50%; background: var(--surface); cursor:pointer;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  font-size:14.5px; font-weight:700; color: var(--ink);
  transition: transform var(--t) var(--ease), background var(--t) var(--ease);
}
.cal__d:hover:not([disabled]){ transform: scale(1.09); }
.cal__d[disabled]{ background:transparent; color: var(--ink-soft); opacity:.45; cursor:not-allowed; }
.cal__d.is-empty{ background:transparent; cursor:default; }
.cal__d.is-today{ background: color-mix(in oklab, var(--sky) 70%, var(--surface)); }
.cal__d.is-on{ background: var(--accent); color: var(--on-accent); transform: scale(1.06); }
.cal__dot{ width:5px; height:5px; border-radius:50%; background: var(--accent); }
.cal__d.is-on .cal__dot{ background: var(--on-accent); }
.cal__d.is-full .cal__dot{ background: var(--ink-soft); }

.slots__head h3{ font-family: var(--font-display); font-size:22px; font-weight:600; }
.slots__hint{ font-size:14.5px; color: var(--ink-soft); margin-top:6px; }
.slots__list{ display:flex; flex-wrap:wrap; gap:9px; margin-top:20px; }
.slot{
  min-width:84px; height:46px; padding:0 18px; border:0; border-radius: var(--r-btn);
  background: var(--sunk); color: var(--ink); font-size:15px; font-weight:700; cursor:pointer;
  transition: transform var(--t) var(--ease), background var(--t) var(--ease);
}
.slot:hover{ transform: translateY(-2px); background: color-mix(in oklab, var(--peach) 55%, var(--surface)); }
.slot.is-on{ background: var(--accent); color: var(--on-accent); }
.slot[disabled]{ opacity:.35; cursor:not-allowed; text-decoration: line-through; transform:none; }
.slots__empty{ padding:22px 24px; border-radius: var(--r-m); background: var(--sunk); color: var(--ink-2); font-size:15px; max-width:50ch; }

.form{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:18px; max-width:760px; }
.field{ display:flex; flex-direction:column; gap:7px; }
.field--wide{ grid-column:1/-1; }
.field > label{ font-size:14.5px; font-weight:700; color: var(--ink-2); padding-left:18px; }
.req{ color: var(--accent); }
.field input[type="text"], .field input[type="tel"], .field textarea{
  width:100%; padding:15px 20px; border:0; border-radius: var(--r-btn);
  background: var(--sunk); color: var(--ink); font-size:16.5px;
  box-shadow: inset 0 0 0 2px transparent; transition: box-shadow var(--t) var(--ease);
}
.field textarea{ border-radius: var(--r-m); resize:vertical; font-family: var(--font-ui); }
.field input:focus, .field textarea:focus{ outline:none; box-shadow: inset 0 0 0 2px var(--accent); }
.field.is-bad input, .field.is-bad textarea{ box-shadow: inset 0 0 0 2px var(--crit); }
.hint{ font-size:13.5px; color: var(--ink-soft); padding-left:18px; }
.err{ font-size:13.5px; font-weight:700; color: var(--crit); padding-left:18px; }
.form__err{ grid-column:1/-1; padding:15px 22px; border-radius: var(--r-m); background: var(--crit-bg); color: var(--crit); font-size:15px; font-weight:700; }
.check{ display:flex; align-items:flex-start; gap:12px; font-size:15px; color: var(--ink-2); cursor:pointer; font-weight:400; padding-left:0; }
.check input{ margin-top:3px; width:20px; height:20px; accent-color: var(--accent); }

.confirm{ display:grid; grid-template-columns: minmax(0,1fr) minmax(0,290px); gap:22px; }
.summary{ display:flex; flex-direction:column; gap:8px; }
.summary__row{ display:grid; grid-template-columns:130px 1fr; gap:16px; padding:14px 20px; border-radius: var(--r-s); background: var(--sunk); }
.summary__row dt{ font-size:14px; font-weight:700; color: var(--ink-soft); }
.summary__row dd{ font-size:16.5px; font-weight:700; }
.summary__total{ display:flex; align-items:baseline; justify-content:space-between; padding:16px 20px; border-radius: var(--r-s); background: color-mix(in oklab, var(--mint) 55%, var(--surface)); }
.summary__total b{ font-family: var(--font-display); font-size:32px; font-weight:600; }
.rules{ padding:24px; border-radius: var(--r-m); background: color-mix(in oklab, var(--lilac) 45%, var(--surface)); }
.rules h4{ font-family: var(--font-display); font-size:17px; font-weight:600; margin-bottom:14px; }
.rules li{ font-size:14.5px; color: var(--ink-2); padding-left:22px; position:relative; margin-bottom:11px; }
.rules li::before{ content:""; position:absolute; left:0; top:9px; width:9px; height:9px; border-radius:50%; background: var(--accent); }

.done{ grid-column:1/-1; text-align:center; padding:26px 0 10px; display:flex; flex-direction:column; align-items:center; gap:16px; }
.done__mark{
  width:78px; height:78px; display:grid; place-items:center; border-radius:50%;
  background: linear-gradient(140deg, var(--peach), var(--mint)); color: var(--ink); font-size:34px;
}
.done h3{ font-size: clamp(28px,4.6vw,44px); }
.done p{ color: var(--ink-2); max-width:46ch; }
.done__code{ font-size:17px; font-weight:800; letter-spacing:.1em; padding:12px 26px; border-radius: var(--r-btn); background: var(--sunk); }

.wizard__foot{ display:flex; align-items:center; gap:14px; padding: clamp(14px,2vw,20px) clamp(18px,2.8vw,30px); background: var(--sunk); }
.wizard__state{ flex:1; font-size:14.5px; font-weight:700; color: var(--ink-soft); text-align:center; }

.filters{ display:flex; flex-wrap:wrap; gap:9px; margin-bottom:26px; }
.cards{ display:grid; grid-template-columns: repeat(auto-fill, minmax(290px,1fr)); gap:18px; }
.card{
  border-radius: var(--r-l); background: var(--surface); box-shadow: var(--shadow-s);
  overflow:hidden; display:flex; flex-direction:column;
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.card:hover{ transform: translateY(-5px); box-shadow: var(--shadow-m); }
.card__art{
  position:relative; aspect-ratio:5/4; overflow:hidden;
  background: linear-gradient(150deg, var(--a), var(--b));
}
.card__blob{
  position:absolute; border-radius:50%; background: var(--surface); opacity:.42;
  width:58%; aspect-ratio:1; left:12%; top:16%; filter: blur(2px);
}
.card__blob--2{ width:40%; left:auto; right:8%; top:auto; bottom:10%; opacity:.3; }
.card--2 .card__blob{ width:70%; left:-8%; top:28%; }
.card--2 .card__blob--2{ width:34%; right:14%; top:8%; bottom:auto; }
.card--3 .card__blob{ width:46%; left:28%; top:8%; }
.card--3 .card__blob--2{ width:52%; right:auto; left:6%; bottom:-14%; }
.card__meta{ padding:22px 24px 26px; display:flex; flex-direction:column; gap:8px; flex:1; }
.card__tag{ align-self:flex-start; padding:5px 14px; border-radius: var(--r-btn); background: var(--sunk); font-size:13px; font-weight:700; color: var(--ink-2); }
.card__t{ font-size:21px; }
.card__d{ font-size:15px; color: var(--ink-2); }

.pigments{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; }
.swatch{
  border:0; background:transparent; cursor:pointer; padding:0;
  display:flex; flex-direction:column; align-items:center; gap:10px; width:104px;
  transition: transform var(--t) var(--ease);
}
.swatch:hover{ transform: translateY(-4px); }
.swatch .tip{
  width:72px; height:72px; border-radius:50% 50% 50% 50% / 58% 58% 42% 42%;
  background: var(--base); box-shadow: var(--shadow-s);
  transform: rotate(var(--rot)); display:block;
  transition: box-shadow var(--t) var(--ease), transform var(--t) var(--ease);
}
.swatch__n{ font-size:14px; font-weight:700; color: var(--ink-2); text-align:center; }
.swatch[aria-checked="true"] .tip{ box-shadow: 0 0 0 4px var(--surface), 0 0 0 8px var(--accent); transform: rotate(0deg) scale(1.06); }
.swatch[aria-checked="true"] .swatch__n{ color: var(--accent); }

.pigcard{
  margin-top:30px; padding:26px 30px; border-radius: var(--r-m); background: var(--surface);
  box-shadow: var(--shadow-s); display:flex; flex-wrap:wrap; align-items:center; gap:18px 24px;
}
.pigcard__chip{ width:58px; height:58px; border-radius:50%; background: var(--base, var(--sunk)); flex:none; box-shadow: var(--shadow-s); }
.pigcard__txt{ flex:1 1 220px; display:flex; flex-direction:column; gap:3px; }
.pigcard__name{ font-family: var(--font-display); font-size:22px; font-weight:600; }
.pigcard__fin{ font-size:15px; color: var(--ink-2); }
.pigcard__num{ font-size:13.5px; font-weight:700; color: var(--ink-soft); }

.pricelist{ display:grid; grid-template-columns: repeat(auto-fit, minmax(310px,1fr)); gap:18px; }
.pgroup{ padding:24px 26px 12px; border-radius: var(--r-m); background: var(--surface); box-shadow: var(--shadow-s); }
.pgroup:nth-child(1){ background: color-mix(in oklab, var(--peach) 34%, var(--surface)); }
.pgroup:nth-child(2){ background: color-mix(in oklab, var(--mint) 34%, var(--surface)); }
.pgroup:nth-child(3){ background: color-mix(in oklab, var(--lilac) 34%, var(--surface)); }
.pgroup__h{ font-family: var(--font-display); font-size:20px; font-weight:600; margin-bottom:14px; }
.prow{ display:grid; grid-template-columns: 1fr auto; gap:3px 16px; padding:14px 0 16px; }
.prow + .prow{ box-shadow: inset 0 1px 0 color-mix(in oklab, var(--ink) 9%, transparent); }
.prow__n{ font-size:17px; font-weight:700; }
.prow__p{ grid-column:2/3; grid-row:1/2; font-family: var(--font-display); font-size:19px; font-weight:600; white-space:nowrap; }
.prow__d{ grid-column:1/-1; font-size:14.5px; color: var(--ink-2); }
.prow__t{ grid-column:1/2; font-size:13.5px; font-weight:700; color: var(--ink-soft); }
.prow__go{
  grid-column:2/3; justify-self:end; align-self:center; border:0; cursor:pointer;
  padding:8px 16px; border-radius: var(--r-btn); background: var(--surface);
  font-size:13.5px; font-weight:700; color: var(--accent); box-shadow: var(--shadow-s);
  transition: transform var(--t) var(--ease);
}
.prow__go:hover{ transform: translateY(-2px); }

.about{ display:grid; grid-template-columns: minmax(0,320px) minmax(0,1fr); gap: clamp(24px,4vw,56px); align-items:start; }
.about__mark{
  aspect-ratio:1; border-radius:50%; display:grid; place-items:center;
  background: linear-gradient(150deg, var(--lilac), var(--peach) 60%, var(--mint));
  font-family: var(--font-display); font-size: clamp(56px,8vw,92px); font-weight:600; color: var(--ink);
  box-shadow: var(--shadow-m);
}
.about__copy{ display:flex; flex-direction:column; gap:16px; }
.about__copy p{ color: var(--ink-2); }
.about__copy p:first-of-type{ font-size:20px; color: var(--ink); }
.creds{ display:flex; flex-wrap:wrap; gap:10px; margin-top:8px; }
.creds li{
  padding:12px 20px; border-radius: var(--r-btn); background: var(--sunk);
  font-size:14.5px; color: var(--ink-2);
}
.creds b{ color: var(--accent); font-weight:800; }

.saying{
  margin:0; padding: clamp(26px,4vw,48px); border-radius: var(--r-l);
  background: color-mix(in oklab, var(--sky) 42%, var(--surface));
  display:flex; flex-direction:column; gap:16px;
}
.saying blockquote{ margin:0; font-family: var(--font-display); font-weight:600; font-size: clamp(21px,3.2vw,34px); line-height:1.24; }
.saying figcaption{ font-size:15px; font-weight:700; color: var(--ink-2); }

.contacts{ display:grid; grid-template-columns: repeat(auto-fit, minmax(230px,1fr)); gap:14px; }
.contacts > div{ padding:24px 26px; border-radius: var(--r-m); background: var(--surface); box-shadow: var(--shadow-s); }
.contacts dt{ font-size:13.5px; font-weight:800; color: var(--accent); margin-bottom:8px; }
.contacts dd{ font-size:16.5px; }

.asks{ display:grid; grid-template-columns: repeat(auto-fit, minmax(270px,1fr)); gap:14px; margin-top:16px; }
.ask{ padding:22px 26px; border-radius: var(--r-m); background: var(--sunk); }
.ask h3{ font-size:17px; margin-bottom:7px; }
.ask p{ font-size:14.5px; color: var(--ink-2); }

.foot{ padding-block: clamp(26px,4vw,48px) 40px; }
.foot__in{
  padding: clamp(24px,3.4vw,38px); border-radius: var(--r-l); background: var(--surface);
  box-shadow: var(--shadow-s); display:flex; flex-wrap:wrap; gap:18px 36px; align-items:center;
}
.foot__nav{ display:flex; flex-wrap:wrap; gap:6px; margin-left:auto; }
.foot__nav a{ padding:9px 16px; border-radius: var(--r-btn); font-size:14.5px; font-weight:600; color: var(--ink-2); text-decoration:none; }
.foot__nav a:hover{ background: var(--sunk); color: var(--ink); }
.foot__legal{ margin-top:18px; text-align:center; font-size:13.5px; color: var(--ink-soft); }

.fab{
  position:fixed; right:16px; bottom:16px; z-index:35; display:none;
  background: var(--accent); color: var(--on-accent); padding:16px 26px;
  border-radius: var(--r-btn); text-decoration:none; font-size:16px; font-weight:700;
  box-shadow: var(--shadow-m);
}

[data-variant="center"] .pillow{ text-align:center; }
[data-variant="center"] .hero__h,
[data-variant="center"] .hero__sub{ margin-inline:auto; }
[data-variant="center"] .hero__cta{ justify-content:center; }

[data-variant="rail"] .cards{
  display:flex; gap:18px; overflow-x:auto; scroll-snap-type: x mandatory;
  padding-bottom:12px; scrollbar-width:thin;
}
[data-variant="rail"] .card{ flex:0 0 clamp(258px, 32vw, 340px); scroll-snap-align:start; }

[data-variant="row"] .pigments{ flex-wrap:nowrap; overflow-x:auto; justify-content:flex-start; padding-bottom:8px; }
[data-variant="row"] .swatch{ flex:0 0 auto; }

[data-variant="flat"] .pricelist{ grid-template-columns:1fr; }
[data-variant="flat"] .pgroup{ background: var(--surface) !important; }

@media (max-width: 900px){
  .about{ grid-template-columns:1fr; }
  .about__mark{ max-width:240px; }
  .whenwrap{ grid-template-columns:1fr; }
  .confirm{ grid-template-columns:1fr; }
}
@media (max-width: 760px){
  .nav{
    position:absolute; left:0; right:0; top:calc(100% + 10px);
    flex-direction:column; gap:2px; padding:12px; border-radius: var(--r-m);
    background: var(--surface); box-shadow: var(--shadow-m); display:none;
  }
  .nav.is-open{ display:flex; }
  .top__in{ position:relative; }
  .burger{ display:flex; }
  .top__act .btn{ display:none; }
  .logo i{ display:none; }
  .fab{ display:block; }
  .form{ grid-template-columns:1fr; }
  .steps{ gap:6px; }
  .step{ padding:7px 14px 7px 7px; font-size:13px; }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *, *::before, *::after{ animation-duration:1ms !important; transition-duration:1ms !important; }
}