/* ============================================================
   /warranty — the warranty campaign page. Loaded after
   locked.css and built from its pieces (hero, heads, versus
   cards, offer, faq, final band, sticky button), so the two
   campaign pages read as one family. Only what is new lives
   here. The hero swaps the "locked" red for a reassuring green.
   ============================================================ */

/* ------------------------------------------------ hero */
.wr-hero {
  background:
    radial-gradient(680px 460px at 85% -10%, rgb(74 222 128 / .28), transparent 65%),
    radial-gradient(560px 420px at 0% 60%, rgb(109 92 255 / .4), transparent 65%),
    radial-gradient(700px 500px at 50% 120%, rgb(61 47 214 / .45), transparent 70%),
    #07081a;
}
.wr-dot { background: #4ade80; box-shadow: 0 0 0 5px rgb(74 222 128 / .2); }
.wr-grad {
  background: linear-gradient(100deg, #6ee7a8 0%, #5fd7ff 55%, #a99bff 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* the warranty card */
.wr-card {
  position: relative; justify-self: center; width: min(88vw, 360px); padding: 1.25rem;
  border-radius: 26px; color: #eef0ff;
  background: linear-gradient(165deg, rgb(255 255 255 / .14), rgb(255 255 255 / .05));
  border: 1px solid rgb(255 255 255 / .18); box-shadow: 0 30px 70px rgb(0 0 0 / .5);
}
.wr-card-top { display: flex; align-items: center; gap: .8rem; margin-bottom: .6rem; }
.wr-card-top b { display: block; font-size: 1.12rem; }
.wr-card-top small { color: rgb(226 230 255 / .7); font-size: .82rem; }
.wr-shield { width: 48px; height: 48px; border-radius: 15px; display: grid; place-items: center; flex: none; background: rgb(74 222 128 / .16); border: 1px solid rgb(74 222 128 / .35); }
.wr-shield svg { width: 26px; height: 26px; stroke: #4ade80; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.wr-row {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: .55rem;
  padding: .7rem .9rem; border-radius: 13px; background: rgb(7 8 26 / .45); border: 1px solid rgb(255 255 255 / .08);
}
.wr-row span { color: rgb(226 230 255 / .72); font-size: .9rem; }
.wr-row b { font-size: .98rem; }
.wr-life { color: #6ee7a8; }
.wr-btn {
  margin-top: .9rem; text-align: center; font-weight: 800; padding: .75rem; border-radius: 13px;
  background: linear-gradient(95deg, #7c6bff, #3d2fd6); box-shadow: 0 10px 24px rgb(61 47 214 / .45);
}
.wr-float { inset-inline-start: -8%; bottom: -1.3rem; }
@media (max-width: 420px) { .wr-float { inset-inline-start: 2%; } }

/* ------------------------------------------------ promises strip */
.wr-promises { background: rgb(var(--card)); border-bottom: 1px solid rgb(var(--line)); }
.wr-promise-grid { display: grid; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 860px) { .wr-promise-grid { grid-template-columns: repeat(4, 1fr); } }
.wr-promise { padding: 1.25rem 1rem; text-align: center; border-inline-start: 1px solid rgb(var(--line)); }
.wr-promise:nth-child(odd) { border-inline-start: 0; }
@media (min-width: 860px) {
  .wr-promise:nth-child(odd) { border-inline-start: 1px solid rgb(var(--line)); }
  .wr-promise:first-child { border-inline-start: 0; }
}
@media (max-width: 859px) { .wr-promise:nth-child(-n+2) { border-bottom: 1px solid rgb(var(--line)); } }
.wr-promise b { display: block; font-size: 1.15rem; font-weight: 900; color: rgb(var(--brand)); }
.wr-promise span { display: block; margin-top: .2rem; font-size: .86rem; color: rgb(var(--muted)); line-height: 1.7; }

/* ------------------------------------------------ steps */
.wr-steps { list-style: none; padding: 0; margin: 0; display: grid; gap: .85rem; }
.wr-steps li {
  display: flex; gap: 1rem; padding: 1.15rem 1.2rem; border-radius: var(--r-md);
  background: rgb(var(--card)); border: 1px solid rgb(var(--line));
}
.wr-steps li:last-child { border-color: rgb(var(--ok) / .45); background: rgb(var(--ok-soft) / .55); }
.wr-steps li:last-child .lk-n { background: linear-gradient(140deg, #22c55e, rgb(var(--ok))); }
.wr-steps b { font-size: 1.05rem; }
.wr-steps p { margin: .3rem 0 0; color: rgb(var(--muted)); line-height: 1.95; }

/* ------------------------------------------------ the one condition */
.wr-cond {
  display: flex; gap: 1.1rem; align-items: flex-start; padding: 1.4rem;
  border-radius: var(--r-lg); background: rgb(var(--warn-soft)); border: 1px solid rgb(var(--warn) / .3);
}
.wr-cond-ic { flex: none; width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: rgb(var(--warn) / .15); }
.wr-cond-ic svg { width: 24px; height: 24px; stroke: rgb(var(--warn)); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.wr-cond h2 { margin: 0 0 .4rem; font-size: clamp(1.15rem, 1rem + .7vw, 1.4rem); }
.wr-cond p { margin: 0 0 1rem; line-height: 2; color: rgb(var(--ink)); }
.wr-cond-btn { background: rgb(var(--warn)); color: #fff; border: 0; }
.wr-cond-btn:hover { color: #fff; filter: brightness(1.08); }
@media (max-width: 520px) { .wr-cond { flex-direction: column; } }

/* ------------------------------------------------ four questions */
.wr-ask { display: grid; gap: .65rem; }
.wr-ask-row {
  display: grid; gap: .35rem 1.5rem; align-items: center; padding: 1rem 1.15rem;
  border-radius: var(--r-md); background: rgb(var(--card)); border: 1px solid rgb(var(--line));
}
@media (min-width: 680px) { .wr-ask-row { grid-template-columns: 15rem 1fr; } }
.wr-ask-row b { font-size: 1rem; }
.wr-ask-row span { display: flex; align-items: flex-start; gap: .5rem; color: rgb(var(--ink)); line-height: 1.9; }
.wr-ask-row svg { width: 20px; height: 20px; flex: none; margin-top: .3rem; stroke: rgb(var(--ok)); fill: none; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }

.wr-more { margin: 1.25rem 0 0; text-align: center; color: rgb(var(--muted)); font-size: .92rem; }

/* ------------------------------------------------ changed details: a promise of its own */
.wr-changed-sec { padding-top: 0; }
.wr-changed {
  display: flex; gap: 1.1rem; align-items: flex-start; padding: 1.5rem;
  border-radius: var(--r-lg); background: rgb(var(--brand-soft)); border: 2px solid rgb(var(--brand) / .35);
}
.wr-changed-ic {
  flex: none; width: 50px; height: 50px; border-radius: 15px; display: grid; place-items: center;
  background: linear-gradient(140deg, rgb(var(--brand-2)), rgb(var(--brand)));
}
.wr-changed-ic svg { width: 26px; height: 26px; stroke: #fff; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.wr-changed-tag { display: inline-block; font-size: .78rem; font-weight: 800; padding: .2rem .7rem; border-radius: 999px; color: rgb(var(--ok)); background: rgb(var(--ok-soft)); }
.wr-changed h2 { margin: .55rem 0 .5rem; font-size: clamp(1.2rem, 1rem + .9vw, 1.55rem); line-height: 1.6; }
.wr-changed p { margin: 0; line-height: 2; color: rgb(var(--ink)); }
.wr-changed-list { list-style: none; padding: 0; margin: .9rem 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.wr-changed-list li {
  display: inline-flex; align-items: center; gap: .4rem; padding: .4rem .8rem; border-radius: 999px;
  font-size: .9rem; font-weight: 700; background: rgb(var(--card)); border: 1px solid rgb(var(--line));
}
.wr-changed-list svg { width: 17px; height: 17px; stroke: rgb(var(--ok)); fill: none; stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; }
.wr-changed-note { font-size: .9rem; color: rgb(var(--muted)) !important; }
@media (max-width: 520px) { .wr-changed { flex-direction: column; padding: 1.25rem; } }