/* Revision 4: an editorial configurator, in the page's existing brand palette. */
:root{--paper:#efeee9;--white:#fbfaf7;--line:#d4d3ce;--muted:#60616b}
.intro{padding-bottom:64px}
#calculator{padding-top:12px}
.section-line{margin-bottom:12px}
.section-line h2{font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.directions{gap:0;margin-bottom:42px;border-bottom:1px solid #bdbdb8}
.direction,.direction:hover{border:0;border-radius:0;background:transparent;transform:none;min-height:94px;padding:20px 12px 20px 0;gap:7px}
.direction:not(:first-child){padding-left:18px}
.direction[aria-pressed=true]{background:transparent;color:var(--ink);border:0}
.direction:after{content:'';position:absolute;bottom:-1px;left:0;right:0;height:3px;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform .2s}
.direction[aria-pressed=true]:after,.direction:hover:after{transform:scaleX(1)}
.direction b{font-size:17px;font-weight:500;letter-spacing:-.035em}
.direction small,.direction[aria-pressed=true] small{font-size:11px;color:var(--muted)}
.direction-icon,.direction-check{display:none}
.calculator-grid{grid-template-columns:minmax(0,1fr) 360px;gap:48px}
.config-block,.tier-panel{background:transparent;border:0;border-radius:0;padding:0;margin:0 0 48px}
.block-heading h2,.config-block legend{font-size:30px;letter-spacing:-.045em;line-height:1.15}
fieldset>p,.block-heading p{font-size:13px;margin-top:6px;line-height:1.6}
.tier-grid{grid-template-columns:1fr;gap:0;margin-top:28px;border-bottom:1px solid var(--line)}
.tier-option{border-top:1px solid var(--line);position:relative;transition:background .2s}
.tier-option.is-selected{background:var(--white)}
.tier-option.is-selected:before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--orange)}
.tier-option .tier-card,.tier-option .tier-card:has(input:checked){display:grid;grid-template-columns:minmax(0,1fr) auto 36px;align-items:center;gap:24px;background:transparent;border:0;border-radius:0;box-shadow:none;padding:25px 22px;overflow:visible}
.tier-card:hover{background:#ffffff55}
.tier-card input{position:absolute;width:1px;height:1px;opacity:0;top:0;right:auto;margin:0}
.tier-card:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:-3px}
.tier-identity{display:block;min-width:0}
.tier-tag{display:block;font-size:9px;letter-spacing:.11em;min-height:0;margin-bottom:9px;color:#6a6a73;padding:0}
.tier-1 .tier-tag{color:var(--accent)}
.tier-name{font-size:27px;font-weight:500;letter-spacing:-.05em;min-height:0;line-height:1.15}
.tier-meta{display:flex;gap:7px 16px;flex-wrap:wrap;margin-top:12px;color:var(--muted);font-size:11px}
.tier-meta>span+span:before{content:'·';margin-right:12px;color:#8b8d93}
.tier-price,.tier-2 .tier-price{font-size:26px;font-weight:500;letter-spacing:-.045em;min-height:0;margin:0;white-space:nowrap}
.tier-price small{display:block;font-size:11px;margin-bottom:2px;color:var(--muted)}
.tier-2 .tier-price{font-size:20px}
.tier-check{width:36px;height:36px;border:1px solid #c6c5bf;border-radius:50%;display:grid;place-items:center;font-size:19px;transition:background .2s}
.is-selected .tier-check{background:var(--ink);color:white;border-color:var(--ink)}
.tier-expanded{display:none;padding:0 22px 24px}
.is-selected .tier-expanded{display:grid;grid-template-columns:1fr auto;gap:14px 24px;animation:option-reveal .25s ease}
.tier-promise{margin:0;min-height:0;font-size:14px;grid-column:1/-1;color:var(--ink)}
.tier-features{padding:0;gap:5px;font-size:12px;color:var(--muted)}
.tier-features>span{padding-left:14px}
.tier-features>span:before{background:var(--orange);width:4px;height:4px;top:8px}
.tier-common{display:block;padding-top:22px;font-size:11px}
.tier-common b{display:block;font-size:9px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:7px}
.tier-common>span{color:var(--muted)}
.tier-scope-note{font-size:11px;max-width:640px;margin-top:14px;line-height:1.65}
.care-panel{padding-top:4px}
.care-list{gap:0;margin-top:24px;border-bottom:1px solid var(--line)}
.care-option{border-top:1px solid var(--line)}
.care-option .care-choice{border:0;border-radius:0;box-shadow:none;background:transparent;padding:21px 52px 21px 18px;min-height:91px}
.care-option .care-choice:has(input:checked){background:var(--white);box-shadow:inset 3px 0 0 var(--orange)}
.care-option .care-info-button{border-color:#c6c5bf;background:transparent;font-family:inherit;font-style:normal;width:25px;height:25px;min-width:25px;font-size:11px}
.care-option .care-info-button:hover,.care-option .care-info-button[aria-expanded=true]{background:var(--ink);color:white}
.care-option .choice input{width:16px;height:16px;accent-color:var(--ink)}
.care-main b{font-size:15px;letter-spacing:-.02em}
.care-main .choice-note{font-size:12px;margin-top:5px}
.care-price{font-size:14px}
.care-price small{font-size:10px}
.care-popover{border-radius:8px}
.estimate{border-radius:3px;background:#f58a59;color:var(--ink);padding:28px;box-shadow:none;top:108px}
.estimate-header{border-bottom:1px solid #2c30402b;padding-bottom:18px;margin-bottom:24px}
.estimate-header h2{font-size:10px;text-transform:uppercase;letter-spacing:.12em;font-weight:600}
.live-dot{background:var(--ink);box-shadow:none;width:5px;height:5px}
.estimate-choice{color:#353645;font-size:13px;line-height:1.6;margin-bottom:25px}
.estimate-label{color:#353645;font-size:11px}
.estimate-total{font-size:49px;line-height:1.15;letter-spacing:-.065em;margin-top:8px}
.estimate-total small{font-size:13px;letter-spacing:0;margin-right:3px}
.estimate-total.quote-total{font-size:35px;letter-spacing:-.045em}
.estimate-subline{color:#353645;font-size:11px;margin-top:9px}
.receipt-lines{border-color:#2c30402b;margin-top:26px;padding-top:17px;gap:12px}
.receipt-row{font-size:12px}
.receipt-row span,.receipt-row b{color:var(--ink)}
.receipt-row b{font-weight:500}
.schedule{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:25px;border-top:1px solid #2c30402b;padding-top:20px}
.schedule li{border:0;margin:0;padding:0;color:#353645;font-size:11px;line-height:1.6}
.schedule li:before{display:none}
.schedule b{font-size:17px;line-height:1.25;letter-spacing:-.03em;color:var(--ink);margin-bottom:7px;font-weight:500}
.estimate-notice{background:transparent;border-radius:0;padding:0;color:#353645;font-size:11px;line-height:1.65;margin-top:26px}
.estimate .primary-button{background:var(--ink);color:var(--white);border-radius:3px;min-height:56px;margin-top:27px;font-size:13px;padding:16px}
.estimate .primary-button:hover{background:#171b28}
.estimate-caption,.save-button{color:#353645;font-size:10px}
.save-button{margin-top:15px}
.estimate-quote-list{color:var(--ink)}
.choice:not(.tier-card):not(.care-choice){border-radius:4px}
.choice:not(.tier-card):not(.care-choice):has(input:checked){background:var(--white);border-color:var(--ink);box-shadow:none}
.package-choice{padding:20px;min-height:175px}
.package-grid{gap:12px;margin-top:26px}
.package-price{font-size:24px}
.inline-note{background:#e6e4de;border-radius:3px;padding:17px}
.text-input,textarea{border-radius:3px;background:var(--white)}
@keyframes option-reveal{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}
@media(min-width:1600px){.calculator-grid{grid-template-columns:minmax(0,1fr) 400px;gap:64px}.estimate{padding:32px}.estimate-total{font-size:56px}.tier-name{font-size:31px}.tier-card .tier-price{font-size:30px}.tier-card.tier-2 .tier-price{font-size:23px}.tier-option .tier-card{padding-block:29px}.tier-meta{font-size:12px}.tier-features{font-size:13px}}
/* Responsive layouts. Production refinements are in release.css. */
@media(max-width:1100px){.calculator-grid{grid-template-columns:minmax(0,1fr) 310px;gap:28px}.tier-option .tier-card{gap:14px;padding-inline:18px;grid-template-columns:minmax(0,1fr) auto 28px}.tier-name{font-size:23px}.tier-price{font-size:21px}.tier-2 .tier-price{font-size:16px}.tier-check{width:28px;height:28px;font-size:16px}.is-selected .tier-expanded{grid-template-columns:1fr}.direction b{font-size:14px}.estimate{padding:23px}.estimate-total{font-size:41px}.care-option .care-choice{flex-wrap:wrap}.care-option .care-price{flex-basis:100%;text-align:left;padding-left:29px}}
@media(max-width:800px){.calculator-grid{grid-template-columns:1fr}.estimate{position:relative;top:auto}.directions{grid-template-columns:repeat(2,1fr)}.direction,.direction:not(:first-child){padding:16px 12px;min-height:76px}.direction:last-child{grid-column:1/-1}.config-block{margin-bottom:35px}.estimate-total{font-size:52px}.tier-name{font-size:26px}.tier-meta{font-size:11px}.tier-grid{margin-top:20px}.tier-option .tier-card{padding:22px 16px}.tier-expanded{padding:0 16px 22px}.tier-price{font-size:23px}.tier-2 .tier-price{font-size:17px}.is-selected .tier-expanded{grid-template-columns:1fr auto}.care-option .care-price{flex-basis:auto;text-align:right;padding-left:0}.care-option .care-info-button{top:50%;transform:translateY(-50%)}.section-line h2{font-size:10px}.directions{margin-bottom:30px}.direction small{font-size:11px}.intro{padding-bottom:32px}.block-heading h2,.config-block legend{font-size:27px}}
@media(max-width:520px){.tier-option .tier-card{grid-template-columns:minmax(0,1fr) 28px;gap:14px}.tier-identity{grid-column:1;grid-row:1}.tier-check{grid-column:2;grid-row:1}.tier-price,.tier-2 .tier-price{grid-column:1/-1;grid-row:2}.tier-price small{display:inline}.tier-name{font-size:25px}.tier-meta{font-size:10px;gap:5px 9px}.tier-meta>span+span:before{margin-right:9px}.is-selected .tier-expanded{grid-template-columns:1fr}.care-option .care-choice{flex-wrap:wrap}.care-option .care-price{flex-basis:100%;padding-left:29px;text-align:left}.direction{display:flex}.direction:last-child{display:flex;min-height:76px}.direction:last-child small{padding:0}.estimate{padding:25px}.tier-features{font-size:12px}}
@media(min-width:801px) and (max-height:850px){.estimate{position:static}}
@media(prefers-reduced-motion:reduce){.is-selected .tier-expanded{animation:none}}
.client-context{margin-bottom:38px}.client-context legend{font-size:21px}.client-context .choice{align-items:flex-start}.client-context .choice-note{font-size:11px}
.loyalty-note{font-size:12px!important;line-height:1.65;background:#f5e2d6;padding:13px 16px;margin:18px 0 0!important;border-left:2px solid var(--orange)}
.loyalty-note b{font-weight:500}.care-price del{display:block;font-size:11px;color:var(--muted);font-weight:400;text-decoration-thickness:1px;margin-bottom:3px}
.discount-policy{font-size:11px;margin-top:13px;line-height:1.6;color:var(--muted)}
@media(max-width:1000px){.subscription-life{grid-template-columns:1fr}.subscription-phase+.subscription-phase{border-left:0;border-top:1px solid var(--line);padding:24px}.subscription-phase{padding:24px}.client-context .billing-options{flex-direction:column}}

/* Subscription timeline: one readable rhythm, shared with the page. */
.header{background:var(--paper)}
.subscription-life{display:block;border-top:1px solid var(--line);margin-top:32px;padding-top:28px}
.subscription-life-heading{margin-bottom:27px}
.phase-kicker{display:flex;align-items:center;gap:12px;font-size:10px;letter-spacing:.08em;color:var(--muted);line-height:1.5;margin:0 0 14px}
.subscription-life-heading h2{font-size:30px;line-height:1.12;letter-spacing:-.045em;max-width:540px}
.subscription-stages{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.subscription-phase{padding:27px 22px 27px 0;min-width:0}
.subscription-phase.after-year{padding:27px 24px;background:var(--white);border-left:1px solid var(--line)}
.subscription-phase h3{font-size:23px;line-height:1.2;letter-spacing:-.035em;margin:0 0 12px}
.subscription-phase .phase-description{font-size:12px;line-height:1.6;color:var(--muted);min-height:39px;max-width:260px}
.phase-amount{margin:25px 0 15px}
.phase-amount strong{display:block;font-size:37px;line-height:1.15;letter-spacing:-.055em;font-weight:500}
.phase-amount>span{display:block;color:var(--muted);font-size:11px;line-height:1.5;margin-top:8px}
.subscription-phase .phase-payment{font-size:11px;line-height:1.7;max-width:270px;color:var(--muted)}
.phase-discount{color:var(--accent);background:#f7e4d9;padding:3px 7px;letter-spacing:0;font-size:10px}
.subscription-phase .phase-kicker{min-height:24px}
.subscription-next{display:flex;align-items:center;justify-content:space-between;gap:22px;padding:18px 0;border-bottom:1px solid var(--line)}
.subscription-next>p{font-size:11px;color:var(--muted);line-height:1.6;max-width:290px}
.subscription-next .text-button{margin:0;font-size:12px;white-space:nowrap}
.subscription-growth{margin:0;padding:10px 0;border-bottom:1px solid var(--line)}
.subscription-growth p{font-size:12px;line-height:1.7;color:var(--muted);max-width:650px;margin-bottom:12px}
.package-price small{white-space:normal;display:block;margin-top:6px}
@media(min-width:1600px){.subscription-life-heading h2{font-size:34px}.phase-amount strong{font-size:44px}.subscription-phase{padding-block:32px}.subscription-phase.after-year{padding:32px}.subscription-phase h3{font-size:26px}}
@media(max-width:1050px){.subscription-stages{grid-template-columns:1fr}.subscription-phase,.subscription-phase.after-year{padding:24px}.subscription-phase.after-year{border-left:0;border-top:1px solid var(--line)}.subscription-phase .phase-description{min-height:0;max-width:none}.subscription-next{align-items:flex-start;flex-direction:column;gap:8px}.subscription-next>p{max-width:none}}
/* Наведення на вкладку послуги: раніше підкреслення було таке саме, як у вибраної, — не видно різниці.
   Тепер теплий фон, кораловий заголовок і коралове підкреслення; вибрана лишається графітовою. */
@media(hover:hover) and (pointer:fine){
 .direction{transition:background-color .2s,color .2s}
 .direction:not([aria-pressed=true]):hover{background:#e6e0d6}
 .direction:first-child:not([aria-pressed=true]):hover{box-shadow:-14px 0 0 #e6e0d6}
 .direction:not([aria-pressed=true]):hover b{color:#ad390f}
 .direction:not([aria-pressed=true]):hover:after{background:#ef8354}
}
/* Блок «Ще шукаєте свій характер?» перед підвалом: був дрібним (17px, 400) старим синьо-сірим текстом —
   випадав зі стилю «Сцени». Тепер графітовий заголовок 500, як підписи карток, і кнопка-капсула, як «Почати розмову». */
.closing{background:#e6e0d6;padding:34px 40px}
.closing p{font-size:clamp(20px,1.9vw,28px);font-weight:500;line-height:1.2;letter-spacing:-.02em;color:#20221f;max-width:820px}
.closing .outline-button{border-color:#a9a397;color:#20221f;padding:14px 22px;font-size:13px;transition:background-color .2s,color .2s,border-color .2s}
.closing .outline-button:hover{background:#20221f;color:#eeeae4;border-color:#20221f}
@media(max-width:700px){.closing{padding:26px 22px}.closing p{font-size:21px}}
