:root{--silver:#C9CACA;--graphite:#8B8D90;--asphalt:#4A4D52;--milk:#FBFAF8}
html{scroll-behavior:smooth}body{padding-bottom:36px}
p,li,dd,dt,summary{text-wrap:pretty}
.reveal{opacity:0;transform:translateY(10px);transition:opacity 1000ms var(--ease),transform 1000ms var(--ease)}.reveal.is-visible{opacity:1;transform:none}
/* First screen, left-aligned like the text below it. Air under the logo: the title starts one rhythm step lower,
   then lead, figures and button follow at equal steps. */
.hero{text-align:left;padding:clamp(22px,6vw,44px) 0 clamp(30px,8vw,48px)}
/* The site sets body min-width 320px; this page also fits folded phones (280 px). */
body{min-width:0}
.point-name{display:inline-block;max-width:100%}
.personal{margin:0 0 13px;color:var(--muted);font-size:10px;letter-spacing:.16em;text-transform:uppercase;line-height:1.7}
.hero-title{margin:0 0 13px;font:400 clamp(27px,7.4vw,38px)/1.1 "Cormorant Garamond",serif}
.lead{margin:0 0 clamp(22px,6vw,30px);color:var(--ink-soft);font-size:clamp(13.5px,3.7vw,19px);line-height:1.6}
.lead .sent{display:block}
.lead .sent+.sent{margin-top:.65em}
.summary .sent{white-space:nowrap}
@media(min-width:620px){.set-result .summary{font-size:13px}}
.figures{display:grid;grid-template-columns:1fr 1fr;margin:0 0 clamp(22px,6vw,30px);border-block:1px solid var(--line)}
.fig{padding:14px 0 13px}.fig+.fig{padding-left:clamp(14px,4.5vw,24px);border-left:1px solid var(--line)}
.fig dt{margin:0 0 7px;color:var(--ink-soft);font-size:clamp(11px,3.1vw,12.5px);line-height:1.3;white-space:nowrap}
.fig dd{margin:0;color:var(--ink);font:500 clamp(24px,7vw,32px)/1 "Cormorant Garamond",serif;white-space:nowrap}
.fig small{font:400 clamp(11px,3.1vw,12.5px)/1 "Montserrat",sans-serif;color:var(--ink-soft);letter-spacing:0}
/* Wide buttons: the full width of the text column, large and calm. */
.cta{white-space:nowrap}
.cta[data-open-request]{white-space:normal;text-wrap:balance;line-height:1.5;padding:16px 20px}
.cta-wide{width:100%;max-width:none;min-height:56px;font-size:clamp(11px,3.2vw,13px)}
.cta-quiet{background:transparent;color:var(--ink);border:1px solid var(--ink);transition:background-color 500ms ease,color 500ms ease}
.cta-quiet:hover{background:var(--ink);color:var(--bg)}
.block{padding:34px 0;border-top:1px solid var(--line)}
.block-plain{border-top:0;padding-top:0}
.block-title{margin:0 0 13px;font:400 clamp(25px,7vw,32px)/1.2 "Cormorant Garamond",serif;text-align:left}
.block-note{margin:0 0 6px;color:var(--ink-soft);font-size:13px;line-height:1.6}
.steps{list-style:none;margin:0;padding:0}.step{display:grid;grid-template-columns:22px 1fr;gap:8px;padding:9px 0}.step+.step{border-top:1px solid var(--line)}
.step-num{font:500 22px/1.05 "Cormorant Garamond",serif;color:var(--graphite)}
.step-title{margin:0 0 2px;font-size:14px;font-weight:500;color:var(--ink)}
.step p{margin:0;color:var(--ink-soft);font-size:14px;line-height:1.5}
.info-btn{display:inline-grid;place-items:center;width:18px;height:18px;padding:0;border:1px solid var(--graphite);border-radius:50%;background:transparent;color:var(--asphalt);font:italic 500 12px/1 "Cormorant Garamond",serif;vertical-align:1px;cursor:pointer;transition:background-color 400ms ease,color 400ms ease}
.info-btn[aria-expanded="true"]{background:var(--asphalt);color:var(--bg);border-color:var(--asphalt)}
.info-note{display:block;margin:8px 0 0;padding:9px 12px;border-left:1px solid var(--silver);background:var(--milk);color:var(--ink-soft);font-size:13px;line-height:1.6}
/* Starter set rows: the B2B markup and styles; only the label above the counters is added here. */
.qty-head{margin:10px 0 6px;text-align:right;color:var(--ink-soft);font-size:11.5px;line-height:1.3}
#set .product-list{margin-top:0}
.product-subtitle{letter-spacing:.03em;font-size:clamp(10px,2.9vw,12px)}
/* #set raises these above the site's Kazakh rule, which reserves room for the B2C buy button that this page does not have. */
#set .product-toggle{padding-right:clamp(124px,37vw,170px)}
/* Slow metallic shimmer on the counters and the request button: silver, graphite, wet asphalt and back. */
.stepper,.metal,.metal:hover{border:1px solid transparent;background:linear-gradient(var(--bg),var(--bg)) padding-box,linear-gradient(110deg,var(--silver),var(--graphite),var(--asphalt),var(--graphite),var(--silver)) border-box;background-size:100% 100%,320% 100%;animation:metal 6s ease-in-out infinite alternate}
@keyframes metal{from{background-position:0 0,0% 0}to{background-position:0 0,100% 0}}
.product.is-selected .stepper{background:linear-gradient(color-mix(in srgb,var(--accent) 10%,var(--bg)),color-mix(in srgb,var(--accent) 10%,var(--bg))) padding-box,linear-gradient(110deg,var(--silver),var(--graphite),var(--asphalt),var(--graphite),var(--silver)) border-box;background-size:100% 100%,320% 100%}
.set-result{margin:21px 0 21px;text-align:left}
.set-total{margin:0 0 4px;color:var(--ink);font:500 clamp(19px,5.4vw,23px)/1.25 "Cormorant Garamond",serif}
.set-total.is-warning{color:#7B2233}
.summary{margin:0;color:var(--ink-soft);font-size:13.5px;line-height:1.6}
.metal{color:var(--ink)}.metal:hover{color:var(--asphalt)}
.handoff-note{margin:8px 0 0;text-align:center;color:var(--ink-soft);font-size:12px;line-height:1.5}
.terms-block{padding-top:clamp(20px,5vw,28px);padding-bottom:0}
.terms-title{margin:0 0 2px;font-size:14px;font-weight:500;color:var(--ink);text-align:left}
.terms details{border-bottom:1px solid var(--line)}
.terms summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:11px 0;cursor:pointer;font-size:14px;color:var(--ink)}
.terms summary::-webkit-details-marker{display:none}
.terms summary::after{content:"";width:8px;height:8px;flex:none;border-right:1px solid var(--asphalt);border-bottom:1px solid var(--asphalt);transform:rotate(45deg) translate(-2px,-2px);transition:transform 400ms var(--ease)}
.terms details[open] summary::after{transform:rotate(225deg) translate(-2px,-2px)}
.terms-body{padding:0 0 14px}.terms-body p{margin:0 0 8px;color:var(--ink-soft);font-size:13.5px;line-height:1.65}
.set-summary{margin:21px 0 0;white-space:pre-line}
@media(max-width:350px){.cta-wide{letter-spacing:.1em}.stepper button{width:30px}.stepper input{width:32px}#set .product-toggle{padding-right:104px}}
/* Folded phones under 320 px: figures stack, counters narrow, the total line steps down a size. */
@media(max-width:319px){.figures{grid-template-columns:1fr}.fig+.fig{padding-left:0;border-left:0;border-top:1px solid var(--line)}
.stepper button{width:26px}.stepper input{width:28px}#set .product-toggle{padding-right:88px}.product-subtitle{font-size:9.5px;letter-spacing:0}
.set-total{font-size:17px}.cta-wide{letter-spacing:.06em}}
@media(max-width:299px){#set .product-toggle{padding-right:84px;grid-template-columns:34px minmax(0,1fr);gap:6px}.product-thumb{width:34px}.set-total{font-size:15.5px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.reveal{opacity:1;transform:none;transition:none}.stepper,.metal{animation:none}}
@media print{@page{size:A4;margin:14mm 16mm}.reveal{opacity:1;transform:none}.cta,dialog,.stepper,.info-btn,.handoff-note,.product-panel,.qty-head,.lang-switch{display:none}.info-note[hidden]{display:block!important}.terms details>.terms-body{display:block}}

.summary .sent{white-space:normal}