/* warranty.css — «Гарантии и возврат» (logic/NEW_MAP_5.md §9 B1–B4), build P6 023, 01.10.2026.
   Language of the approved home page (base.css tokens and components, no new colours).
   9.B1 the client's slogan + the hall photo of the Maps card with a pencil scoop on a white plate (R08, R33) ·
   9.B2 three steps as R35 P10 drawn cards on the R35 P2 dome · 9.B3 dark drawn card with a real nut on the drawn scale ·
   9.B4 one return term, pickup, address. Motion: transform/opacity only (app.js reveals). */

.eyebrow { display: inline-block; font-size: var(--fs-small); font-weight: 600; text-transform: uppercase; letter-spacing: .1em; color: var(--clay); }

/* ---------- 9.B1 · quality guarantee ---------- */
.wr-hero { padding-block: clamp(18px, 1.8vw, 36px) clamp(24px, 2.4vw, 56px); }
.wr-hero .crumbs { margin-bottom: clamp(18px, 1.8vw, 34px); }
.wr-hero__grid { display: grid; grid-template-columns: 1.02fr .98fr; gap: clamp(24px, 3.4vw, 80px); align-items: center; }
.wr-hero__txt { display: grid; gap: clamp(14px, 1.3vw, 24px); justify-items: start; }
.wr-hero h1 { font-size: var(--fs-h1); line-height: 1.02; max-width: 11ch; text-wrap: balance; }
.wr-hero__p { font-size: calc(var(--fs-body) * 1.04); max-width: 56ch; }
.wr-hero__ph { position: relative; margin: 0; aspect-ratio: 1.12; border-radius: 40px 40px 50% 50% / 40px 40px 22% 22%; overflow: hidden; background: var(--sand); }
.wr-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 40% 50%; }
.wr-hero__dr { position: absolute; left: clamp(14px, 1.6vw, 30px); top: clamp(14px, 1.6vw, 30px); width: clamp(104px, 9vw, 200px); height: auto;
  background: rgba(255, 255, 255, .92); border-radius: 24px; padding: 10px 12px; }

/* ---------- 9.B2 · three steps on the white dome ---------- */
.wr-steps { background: var(--white); margin-top: clamp(110px, 11vw, 240px); }
.dome.sec { padding-top: clamp(8px, 1vw, 24px); }
.wr-steps .sec__head { align-items: end; }
.wr-steps .sec__head .h2 { margin-top: 10px; }
.wr-steps__lead { font-size: calc(var(--fs-body) * 1.1); font-weight: 500; max-width: 54ch; margin: calc(-1 * clamp(8px, 1vw, 22px)) 0 clamp(22px, 2vw, 40px); }
.wr-steps__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.3vw, 26px);
  counter-reset: none; }
.wr-step { position: relative; display: flex; flex-direction: column; gap: 14px; min-height: clamp(300px, 22vw, 470px); padding: clamp(22px, 2.2vw, 44px);
  border-radius: 30px; overflow: hidden; }
.wr-step--sun { background: var(--sun); }
.wr-step--cream { background: var(--cream); }
.wr-step--ink { background: var(--ink); color: var(--white); }
.wr-step__n { width: clamp(56px, 4.4vw, 92px); height: clamp(56px, 4.4vw, 92px); border-radius: 50%; display: grid; place-items: center; background: var(--white);
  font-family: var(--f-acc); font-weight: 700; font-size: clamp(28px, 2.2vw, 48px); line-height: 1; }
.wr-step--ink .wr-step__n { background: var(--sun); color: var(--ink); }
.wr-step__dr { position: absolute; right: clamp(16px, 1.6vw, 34px); top: clamp(16px, 1.6vw, 34px); width: clamp(84px, 7vw, 160px); height: auto;
  mix-blend-mode: multiply; opacity: .9; }
.wr-step--ink .wr-step__dr { mix-blend-mode: normal; filter: invert(1) brightness(1.8); opacity: .85; }
.wr-step p { margin-top: auto; font-family: var(--f-acc); font-weight: 700; font-size: clamp(20px, .9vw + 8px, 32px); line-height: 1.22; }
.wr-step a { border-bottom: 2px solid var(--ink); overflow-wrap: anywhere; }
.wr-step a:hover { color: var(--clay); border-color: var(--clay); }
.wr-steps__keep { display: flex; align-items: center; gap: 12px; margin-top: clamp(18px, 1.6vw, 30px); font-weight: 600; }
.wr-steps__keep .ico { flex: none; width: 40px; height: 40px; padding: 8px; border-radius: 50%; background: var(--butter); }

/* ---------- 9.B3 · check with the courier ---------- */
.wr-courier { padding-bottom: clamp(24px, 2.4vw, 56px); }
.wr-courier__card { position: relative; display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, .5fr); align-items: center; gap: clamp(20px, 3vw, 70px);
  padding: clamp(26px, 3.4vw, 80px); border-radius: 40px; background: var(--ink); color: var(--white); overflow: hidden; }
.wr-courier__txt { display: grid; gap: clamp(14px, 1.3vw, 24px); justify-items: start; }
.wr-tag { display: inline-flex; padding: 7px 16px; border-radius: var(--r-pill); background: rgba(255, 255, 255, .1); font-size: var(--fs-small); font-weight: 600; }
.wr-courier__big { font-family: var(--f-acc); font-weight: 700; font-size: clamp(26px, 1.9vw + 6px, 58px); line-height: 1.14; max-width: 26ch; }
.wr-courier__txt p:last-child { color: rgba(255, 255, 255, .8); max-width: 60ch; }
.wr-courier__art { position: relative; justify-self: center; width: min(100%, clamp(150px, 15vw, 320px)); }
.wr-courier__dr { width: 100%; height: auto; filter: invert(1) brightness(1.8); opacity: .9; }
.wr-courier__nut { position: absolute; left: 16%; top: -21%; width: 68%; height: auto; filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .35)); }

/* ---------- 9.B4 · terms and pickup on the sand dome ---------- */
.wr-terms { background: var(--sand); margin-top: clamp(110px, 11vw, 240px); }
.wr-terms__grid { display: grid; grid-template-columns: .9fr 1.1fr 1fr; gap: clamp(12px, 1.3vw, 26px); }
.wr-term { position: relative; display: flex; flex-direction: column; gap: 16px; padding: clamp(22px, 2.2vw, 46px); border-radius: 30px; min-height: clamp(300px, 22vw, 460px); }
.wr-term--sun { background: var(--sun); justify-content: space-between; }
.wr-term--white { background: var(--white); }
.wr-term--ink { background: var(--ink); color: var(--white); justify-content: space-between; }
.wr-term__big { font-family: var(--f-acc); font-weight: 700; font-size: clamp(64px, 6.2vw, 160px); line-height: .9; letter-spacing: -.02em; }
.wr-term--sun p { font-weight: 600; font-size: calc(var(--fs-body) * 1.04); }
.wr-term__h { font-family: var(--f-acc); font-weight: 700; font-size: clamp(20px, .9vw + 8px, 32px); line-height: 1.24; }
.wr-term--white .wr-term__h { padding-right: clamp(80px, 7vw, 150px); }
.wr-term__dr { position: absolute; right: clamp(16px, 1.6vw, 34px); top: clamp(16px, 1.6vw, 34px); width: clamp(76px, 6.4vw, 140px); height: auto; mix-blend-mode: multiply; opacity: .9; }
.wr-term__addr { font-size: var(--fs-small); color: var(--ink-2); }
.wr-term__addr b { color: var(--ink); }
.wr-term--white .link-arrow { margin-top: auto; align-self: flex-start; }
.wr-term--ink a:not(.btn) { border-bottom: 2px solid var(--sun); }
.wr-term--ink .btn { align-self: flex-start; }
.wr-terms__bye { margin-top: clamp(26px, 2.4vw, 48px); text-align: center; font-family: var(--f-acc); font-weight: 700; font-size: var(--fs-h3); }

/* ---------- 1100 → 768 ---------- */
@media (max-width: 1100px) and (min-width: 768px) {
  .wr-hero__grid { grid-template-columns: 1fr; }
  .wr-steps__list { grid-template-columns: 1fr 1fr; }
  .wr-terms__grid { grid-template-columns: 1fr 1fr; }
  .wr-term--ink { grid-column: 1 / -1; min-height: 0; }
}

/* ---------- phone: R61 — cards one under another, one full-width main button ---------- */
@media (max-width: 767px) {
  .wr-hero { padding-top: 14px; }
  .wr-hero__grid { grid-template-columns: 1fr; gap: 20px; }
  .wr-hero h1 { font-size: 32px; }
  .wr-hero__p { font-size: 16px; }
  .wr-hero__ph { order: -1; border-radius: 26px 26px 50% 50% / 26px 26px 18% 18%; }
  .wr-hero__dr { width: 84px; border-radius: 16px; padding: 6px 8px; }
  .wr-steps .sec__head { align-items: stretch; }
  .wr-steps .sec__head .btn { width: 100%; }
  .wr-steps__lead { margin-top: 0; font-size: 16px; }
  .wr-steps__list { grid-template-columns: 1fr; gap: 10px; }
  .wr-step { min-height: 0; padding: 20px 18px; border-radius: 22px; gap: 12px; }
  .wr-step__n { width: 52px; height: 52px; font-size: 26px; }
  .wr-step__dr { width: 72px; top: 16px; right: 16px; }
  .wr-step p { margin-top: 6px; font-size: 19px; }
  .wr-courier__card { grid-template-columns: 1fr; border-radius: 26px; padding: 24px 18px 30px; }
  .wr-courier__art { order: -1; width: 128px; justify-self: start; margin-top: 30px; }
  .wr-courier__big { font-size: 23px; }
  .wr-terms__grid { grid-template-columns: 1fr; gap: 10px; }
  .wr-term { min-height: 0; padding: 22px 18px; border-radius: 22px; }
  .wr-term__big { font-size: 64px; }
  .wr-term__h { font-size: 19px; }
  .wr-term--ink .btn { width: 100%; align-self: stretch; }
}