/* ==========================================================================
   Citiwell · Preparation (ME / RU / EN). Mobile first.
   Uses the shared theme /assets/css/offer-theme.css (navy, aqua, coral).
   One idea leads the page: shave the zone the day before.
   ========================================================================== */

.pr-mark { display: inline-grid; place-items: center; width: 22px; height: 22px; flex: 0 0 auto; border-radius: 50%; }
.pr-mark .tn-ico { width: 13px; height: 13px; stroke-width: 3; }
.pr-mark--yes { background: #dff5ec; color: #0b7a5c; }
.pr-mark--no { background: #ffe4e2; color: #d83f4c; }

/* ---------- hero ---------- */
.tn-main .pr-hero { padding-block: clamp(28px, 4vw, 64px) clamp(36px, 5vw, 72px); }
.pr-hero__grid { display: grid; gap: 20px; }
.pr-hero__copy { display: grid; gap: 14px; }
.tn-main .pr-hero h1 { font-size: clamp(1.8rem, 0.75rem + 5.4vw, 3.4rem); line-height: 1.04; }
.pr-hero .tn-hero__lead { max-width: 520px; }

.pr-hero__media img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: 50% 58%; border-radius: 22px; box-shadow: 0 24px 56px rgba(0, 0, 0, 0.34); }

/* The key rule. On a phone it overlaps the photo, so the first screen already answers "what do I do?". */
.pr-key {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "icon tag" "title title" "text text";
    gap: 10px 12px;
    align-items: center;
    margin: -64px 10px 0;
    padding: 18px 18px 20px;
    border-radius: var(--tn-radius);
    background: #fff;
    box-shadow: 0 22px 50px rgba(0, 0, 0, 0.3);
    color: var(--tn-text);
}

.pr-key__icon { grid-area: icon; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: linear-gradient(135deg, var(--tn-coral), var(--tn-coral-dark)); box-shadow: 0 10px 22px rgba(240, 79, 90, 0.35); color: #fff; }
.pr-key__icon .tn-ico { width: 24px; height: 24px; }
.pr-key__tag { grid-area: tag; justify-self: start; padding: 5px 11px; border-radius: 999px; background: #ffe9e7; color: var(--tn-coral-dark); font-size: 0.8rem; font-weight: 800; letter-spacing: 0.02em; }
.tn-main .pr-key h2 { grid-area: title; color: var(--tn-ink); font-size: clamp(1.4rem, 1.02rem + 1.7vw, 2rem); line-height: 1.12; }
.pr-key p { grid-area: text; color: var(--tn-muted); font-size: 1rem; line-height: 1.5; }

@media (min-width: 720px) {
    .pr-hero__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); grid-template-areas: "copy media" "key media"; column-gap: clamp(24px, 4vw, 64px); row-gap: 24px; align-items: center; }
    .tn-main .pr-hero h1 { font-size: clamp(2.3rem, 0.2rem + 4.6vw, 3.9rem); }
    .pr-hero__copy { grid-area: copy; align-self: end; }
    .pr-hero__media { grid-area: media; }
    .pr-hero__media img { aspect-ratio: 4 / 3.6; border-radius: clamp(22px, 3vw, 36px); }
    .pr-key { grid-area: key; align-self: start; margin: 0; }
}

@media (min-width: 1000px) {
    .pr-hero__grid { row-gap: 28px; }
    .pr-hero__media img { aspect-ratio: 4 / 3.4; }
    .pr-key { grid-template-areas: "icon tag" "icon title" "icon text"; gap: 8px 18px; align-items: start; padding: 26px; }
    .pr-key__icon { width: 56px; height: 56px; border-radius: 18px; }
    .pr-key__icon .tn-ico { width: 30px; height: 30px; }
}

/* ---------- short rules ---------- */
.pr-short { padding-block: clamp(26px, 4vw, 44px); background: #fff; box-shadow: 0 1px 0 var(--tn-line); }
.tn-main .pr-short__title { margin-bottom: 14px; color: var(--tn-muted); font-size: 0.82rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.pr-short__list { display: grid; gap: 10px; }
.pr-short__item { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-radius: var(--tn-radius-sm); background: var(--tn-bg); color: var(--tn-muted); font-size: 0.92rem; line-height: 1.4; }
.pr-short__item .pr-mark { margin-top: 1px; }
.pr-short__item strong { display: block; color: var(--tn-ink); font-size: 1.02rem; font-weight: 800; line-height: 1.3; }
.pr-short__item--yes { background: #ecfaf4; }
.pr-short__item--no { background: #fff3f2; }

@media (min-width: 860px) {
    .pr-short__list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
}

/* ---------- date helper ---------- */
.pr-date {
    display: grid;
    gap: 12px;
    margin-bottom: clamp(24px, 4vw, 40px);
    padding: 16px;
    border-radius: var(--tn-radius);
    background: #fff;
    box-shadow: var(--tn-shadow-soft);
}

.pr-date__label { display: flex; align-items: center; gap: 12px; color: var(--tn-muted); font-size: 0.9rem; line-height: 1.35; cursor: pointer; }
.pr-date__label .tn-ico { width: 26px; height: 26px; color: var(--tn-blue); }
.pr-date__label strong { display: block; color: var(--tn-ink); font-size: 1.05rem; font-weight: 800; }
.pr-date__field { display: flex; align-items: center; gap: 10px; }
.pr-date__input { position: relative; display: block; flex: 1 1 auto; min-width: 0; }
.pr-date__placeholder { position: absolute; inset: 0 48px 0 14px; display: flex; align-items: center; color: var(--tn-muted); font-size: 1.02rem; font-weight: 700; pointer-events: none; }
.pr-date__field.has-value .pr-date__placeholder, .pr-date__input:focus-within .pr-date__placeholder { display: none; }
.tn-main .pr-date__field:not(.has-value) input[type="date"]:not(:focus) { color: transparent; }
.pr-date__field:not(.has-value) input[type="date"]:not(:focus)::-webkit-datetime-edit { color: transparent; }
.pr-date input[type="date"]::-webkit-date-and-time-value { text-align: left; }

.tn-main .pr-date input[type="date"] {
    display: block;
    width: 100%;
    min-width: 0;
    min-height: 52px;
    padding: 0 14px;
    border: 0;
    border-radius: 14px;
    background: var(--tn-bg);
    box-shadow: inset 0 0 0 1.5px #c5d4df;
    color: var(--tn-ink);
    font-family: inherit;
    font-size: 1.05rem;
    font-weight: 700;
    -webkit-appearance: none;
    appearance: none;
}

.tn-main .pr-date input[type="date"]:focus-visible { outline: 3px solid var(--tn-coral); outline-offset: 2px; }
.tn-main .pr-date__reset { min-height: 44px; padding: 0 12px; border: 0; border-radius: 12px; background: transparent; color: var(--tn-blue-dark); font-size: 0.92rem; font-weight: 750; text-decoration: underline; text-underline-offset: 3px; }
.pr-date__reset[hidden] { display: none; }
.pr-date__note { color: var(--tn-coral-dark); font-size: 0.9rem; font-weight: 650; }
.pr-date__note[hidden] { display: none; }

@media (min-width: 760px) {
    .pr-date { grid-template-columns: minmax(0, 1fr) minmax(260px, 340px); align-items: center; padding: 18px 22px; }
    .pr-date__note { grid-column: 1 / -1; }
}

/* ---------- timeline ---------- */
.pr-steps { position: relative; display: grid; gap: 22px; }

.pr-step { position: relative; display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 12px; }

.pr-step::before { content: ""; position: absolute; top: 46px; bottom: -22px; left: 22px; width: 2px; background: #cfdde7; }
.pr-step:last-child::before { display: none; }

.pr-step__dot { position: relative; z-index: 1; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--tn-navy); color: #fff; box-shadow: 0 0 0 5px var(--tn-bg); }
.pr-step__dot .tn-ico { width: 22px; height: 22px; }
.pr-step--main .pr-step__dot { background: linear-gradient(135deg, var(--tn-coral), var(--tn-coral-dark)); }

.pr-step__card { position: relative; display: grid; gap: 10px; align-content: start; padding: 18px 18px 20px; border-radius: var(--tn-radius); background: #fff; box-shadow: var(--tn-shadow-soft); }
.pr-step--main .pr-step__card { box-shadow: inset 0 0 0 2px var(--tn-coral), 0 18px 40px rgba(240, 79, 90, 0.16); }

.pr-step__flag { position: absolute; top: -13px; left: 16px; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: linear-gradient(135deg, var(--tn-coral), var(--tn-coral-dark)); box-shadow: 0 6px 14px rgba(240, 79, 90, 0.3); color: #fff; font-size: 0.78rem; font-weight: 800; line-height: 1; }
.pr-step__flag .tn-ico { width: 13px; height: 13px; }
.pr-step--main .pr-step__card { padding-top: 26px; }

.pr-step__when { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; color: var(--tn-blue-dark); font-size: 1.02rem; font-weight: 800; line-height: 1.3; }
.pr-step--main .pr-step__when { color: var(--tn-coral-dark); }
.pr-step__date { padding: 3px 10px; border-radius: 999px; background: var(--tn-navy); color: #fff; font-size: 0.8rem; font-style: normal; font-weight: 700; }
.pr-step__date[hidden] { display: none; }
.pr-step.is-now .pr-step__date { background: var(--tn-coral-dark); }

.pr-step__card h3 { display: flex; align-items: baseline; gap: 10px; font-size: clamp(1.25rem, 1.12rem + 0.6vw, 1.5rem); line-height: 1.2; }
.pr-step__no { color: #b3c3cf; font-size: 0.95em; font-weight: 800; }

.pr-list { display: grid; gap: 10px; }
.pr-list li { display: flex; align-items: flex-start; gap: 10px; color: var(--tn-text); font-size: 1rem; line-height: 1.45; }
.pr-list .pr-mark { margin-top: 1px; }

@media (min-width: 1000px) {
    .pr-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
    .pr-step { grid-template-columns: minmax(0, 1fr); grid-template-rows: 46px 1fr; gap: 18px; }
    .pr-step::before { top: 22px; bottom: auto; left: 46px; right: -20px; width: auto; height: 2px; }
    .pr-step__card { padding: 22px 20px 24px; }
    .pr-step--main .pr-step__card { padding-top: 22px; }
    .pr-list li { font-size: 0.97rem; }
}

/* ---------- why a razor ---------- */
.pr-why__grid { display: grid; gap: clamp(22px, 4vw, 56px); align-items: center; }
.pr-why__copy { display: grid; gap: 14px; }
.pr-why__copy h2 { font-size: clamp(1.7rem, 1.2rem + 2.2vw, 2.6rem); }
.pr-why__copy p { color: var(--tn-text); font-size: 1.05rem; line-height: 1.6; }

.pr-why__figure { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pr-why__figure figure { display: grid; grid-template-rows: auto 1fr; overflow: hidden; border: 1px solid var(--tn-line); border-radius: var(--tn-radius); background: #fff; }
.pr-why__pic { position: relative; background: #fff; }
.tn-main .pr-why__pic img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; }
/* words are typed over the pictures, not drawn in them: sharp on any screen and ready for other languages */
.pr-why__tag { position: absolute; padding: 0.32em 0.62em; border-radius: 999px; background: #fff; box-shadow: 0 0 0 1px rgba(14, 32, 51, 0.1), 0 4px 10px rgba(14, 32, 51, 0.12); color: var(--tn-blue-dark); font-size: clamp(9.5px, 2.9vw, 14px); font-weight: 800; line-height: 1; letter-spacing: 0.01em; white-space: nowrap; }
.pr-why__tag--laser { top: 27%; left: 62%; }
.pr-why__tag--root { top: 77%; left: 63%; color: var(--tn-ink); }
.pr-why__tag--muted { color: var(--tn-muted); }
.pr-why__figure figcaption { display: flex; align-items: flex-start; gap: 8px; padding: 12px; border-top: 1px solid var(--tn-line); background: var(--tn-bg); color: var(--tn-muted); font-size: 0.9rem; font-weight: 600; line-height: 1.3; }
.pr-why__figure figcaption strong { display: block; color: var(--tn-ink); font-weight: 800; }

@media (min-width: 900px) {
    .pr-why__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); }
    .pr-why__figure { gap: 18px; }
    .pr-why__figure figcaption { padding: 14px 16px; font-size: 0.98rem; }
}

/* ---------- checklist + write to us ---------- */
.pr-ready__grid { display: grid; gap: 18px; align-items: stretch; }

@media (min-width: 900px) {
    .pr-ready__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; }
}

.pr-checklist { display: grid; gap: 16px; align-content: start; padding: clamp(20px, 3vw, 32px); border-radius: var(--tn-radius); background: #fff; box-shadow: var(--tn-shadow-soft); transition: box-shadow 0.2s ease; }
.pr-checklist.is-ready { box-shadow: inset 0 0 0 2px #35b58c, var(--tn-shadow-soft); }
.pr-checklist__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.pr-checklist__head h2 { font-size: clamp(1.4rem, 1.15rem + 1.1vw, 1.9rem); }
.pr-checklist__count { padding: 4px 10px; border-radius: 999px; background: var(--tn-bg); color: var(--tn-muted); font-size: 0.85rem; font-weight: 800; white-space: nowrap; }
.pr-checklist.is-ready .pr-checklist__count { background: #dff5ec; color: #0b7a5c; }
.pr-checklist__list { display: grid; gap: 8px; }

.pr-check { display: flex; align-items: center; gap: 14px; min-height: 58px; padding: 10px 14px; border-radius: 16px; background: var(--tn-bg); color: var(--tn-ink); font-size: 1.05rem; font-weight: 700; line-height: 1.3; cursor: pointer; transition: background-color 0.16s ease; -webkit-tap-highlight-color: transparent; }
.pr-check input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.pr-check__box { display: grid; place-items: center; width: 30px; height: 30px; flex: 0 0 auto; border-radius: 10px; background: #fff; box-shadow: inset 0 0 0 2px #b9c9d5; color: transparent; transition: background-color 0.16s ease, box-shadow 0.16s ease, color 0.16s ease; }
.pr-check__box .tn-ico { width: 18px; height: 18px; stroke-width: 3; }
.pr-check:has(input:checked) { background: #ecfaf4; }
.pr-check input:checked + .pr-check__box { background: #1fae83; box-shadow: none; color: #fff; }
.pr-check input:focus-visible + .pr-check__box { outline: 3px solid var(--tn-coral); outline-offset: 3px; }

.pr-checklist__done { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-radius: 16px; background: #dff5ec; color: #0b6b53; font-size: 1.02rem; line-height: 1.35; }
.pr-checklist__done[hidden] { display: none; }
.pr-checklist__done .tn-ico { width: 22px; height: 22px; color: #1fae83; }

.pr-write { display: grid; gap: 16px; align-content: start; justify-items: start; padding: clamp(22px, 3vw, 34px); border-radius: var(--tn-radius); background: linear-gradient(165deg, var(--tn-navy) 0%, var(--tn-navy-2) 100%); color: rgba(255, 255, 255, 0.82); }
.tn-main .pr-write h2 { color: #fff; font-size: clamp(1.4rem, 1.15rem + 1.1vw, 1.9rem); }
.pr-write__list { display: grid; gap: 12px; width: 100%; }
.pr-write__list li { display: flex; align-items: flex-start; gap: 12px; color: #fff; font-size: 1.03rem; font-weight: 650; line-height: 1.4; }
.pr-write__list .tn-ico { width: 22px; height: 22px; margin-top: 1px; color: var(--tn-sun); }
.pr-write__note { padding: 14px 16px; border-radius: var(--tn-radius-sm); background: rgba(255, 255, 255, 0.07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12); font-size: 0.93rem; line-height: 1.55; }
.pr-write__note strong { color: #fff; }
.pr-write__hint { color: rgba(255, 255, 255, 0.6); font-size: 0.88rem; }

@media (max-width: 559px) {
    .pr-write .tn-btn { width: 100%; }
}

/* ---------- what is next ---------- */
.tn-main .pr-next__title { margin-bottom: clamp(18px, 3vw, 28px); font-size: clamp(1.7rem, 1.2rem + 2.2vw, 2.6rem); }
.pr-next__grid { display: grid; gap: 16px; }

@media (min-width: 760px) {
    .pr-next__grid { grid-template-columns: 1fr 1fr; gap: 22px; }
}

.pr-next__card { display: grid; grid-template-columns: 112px minmax(0, 1fr); align-items: center; gap: 16px; overflow: hidden; padding-right: 16px; border-radius: var(--tn-radius); background: var(--tn-bg); box-shadow: inset 0 0 0 1px var(--tn-line); color: var(--tn-muted); font-size: 0.92rem; line-height: 1.4; text-decoration: none; transition: transform 0.18s ease, box-shadow 0.18s ease; }
.pr-next__card:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1.5px rgba(29, 143, 189, 0.5), var(--tn-shadow-soft); }
.pr-next__card img { width: 112px; height: 100%; min-height: 104px; object-fit: cover; }
.pr-next__card span { position: relative; display: block; padding: 14px 28px 14px 0; }
.pr-next__card strong { display: block; margin-bottom: 4px; color: var(--tn-ink); font-size: 1.08rem; font-weight: 800; line-height: 1.25; }
.pr-next__card .tn-ico { position: absolute; top: 50%; right: 0; width: 20px; height: 20px; color: var(--tn-blue); transform: translateY(-50%); }

@media (min-width: 760px) {
    .pr-next__card { grid-template-columns: 168px minmax(0, 1fr); }
    .pr-next__card img { width: 168px; min-height: 128px; }
}

.pr-cta { display: grid; gap: 18px; margin-top: clamp(22px, 3.5vw, 36px); padding: clamp(22px, 3.2vw, 36px); border-radius: var(--tn-radius); background: radial-gradient(420px 220px at 100% 0%, rgba(255, 107, 107, 0.16), transparent 70%), var(--tn-aqua-soft); }
.pr-cta__copy { display: grid; gap: 8px; }
.tn-main .pr-cta h2 { font-size: clamp(1.4rem, 1.15rem + 1.1vw, 1.9rem); text-align: left; }
.pr-cta p { color: var(--tn-text); font-size: 1.02rem; line-height: 1.5; }
.pr-cta__actions { display: grid; gap: 10px; }

@media (min-width: 560px) {
    .pr-cta__actions { display: flex; flex-wrap: wrap; gap: 12px; }
}

@media (min-width: 900px) {
    .pr-cta { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 32px; }
}

.pr-disclaimer { margin-top: clamp(24px, 4vw, 40px) !important; color: var(--tn-muted); font-size: 0.88rem; line-height: 1.55; }


.pr-step { scroll-margin-top: 100px; }