:root { --wa-blue:#0878f5; --wa-ink:#182230; --wa-muted:#667085; --wa-line:#e8eef6; }
body.hp-page--warranty-activate { margin:0; color:var(--wa-ink); background:#eaf4ff; font-family:"Be Vietnam Pro",Arial,sans-serif; }
body.hp-page--warranty-activate #main-navigation,
body.hp-page--warranty-activate .hp-header-spacer,
body.hp-page--warranty-activate .hp-footer,
body.hp-page--warranty-activate #chatbot-widget { display:none!important; }
body.hp-page--warranty-activate #main-content { min-height:100dvh; }
.wa-page,.wa-page * { box-sizing:border-box; }
.wa-page button,.wa-page input,.wa-page select { font:inherit; }
.wa-page button { cursor:pointer; }
.wa-page a { color:inherit; text-decoration:none; }
.wa-page svg,.wa-toast svg { width:1.35em; height:1.35em; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.wa-sprite { position:absolute; width:0; height:0; overflow:hidden; }
.wa-desktop-only { display:none; }
.wa-page { width:min(100%,520px); min-height:100dvh; margin:auto; overflow:hidden; background:#f7faff; box-shadow:0 0 35px rgba(23,73,130,.15); }

.wa-hero { position:relative; height:220px; overflow:hidden; padding:24px; color:#fff; background:radial-gradient(circle at 80% 42%,#1acbff66,transparent 28%),linear-gradient(145deg,#078efb,#0754db 75%); }
.wa-hero::after { content:""; position:absolute; right:-50px; top:55px; width:250px; height:125px; border:1px solid #ffffff33; border-radius:50%; transform:rotate(-8deg); }
.wa-hero-inner { position:relative; z-index:2; height:100%; }
.wa-hero-pattern { display:none; }
.wa-brand { position:relative; z-index:3; display:flex; align-items:center; gap:8px; width:max-content; font-size:15px; line-height:1.05; }
.wa-brand>img { width:auto; max-width:145px; height:42px; object-fit:contain; filter:brightness(0) invert(1); }
.wa-brand>span { display:grid; place-items:center; width:32px; height:38px; }
.wa-brand>span svg { width:32px; height:36px; }
.wa-brand b { font-size:14px; }
.wa-brand small { display:block; font-size:10px; letter-spacing:1.5px; }
.wa-bell { position:absolute; z-index:5; right:22px; top:25px; color:#fff; }
.wa-bell svg { width:25px; height:25px; }
.wa-bell i { position:absolute; right:-1px; top:-3px; width:8px; height:8px; border:1px solid #fff; border-radius:50%; background:#f04438; }
.wa-hero-copy { position:relative; z-index:3; margin-top:28px; }
.wa-hero-copy p { margin:0 0 5px; font-size:12px; }
.wa-hero-copy h1 { margin:0 0 8px; color:#fff; font-size:25px; letter-spacing:-.6px; }
.wa-hero-copy span { font-size:10px; opacity:.92; }
.wa-hero-shield { position:absolute; z-index:2; right:4px; bottom:-15px; width:190px; height:190px; display:grid; place-items:center; pointer-events:none; }
.wa-hero-shield-fallback { position:absolute; z-index:1; inset:16%; display:grid; place-items:center; color:#fff; border:2px solid #ffffff70; border-radius:45% 45% 50% 50%; background:linear-gradient(145deg,#35caffaa,#0754dbdd); clip-path:polygon(50% 0,94% 17%,87% 68%,50% 100%,13% 68%,6% 17%); filter:drop-shadow(0 12px 17px rgba(0,40,145,.24)); }
.wa-hero-shield-fallback svg { width:55%; height:55%; stroke-width:1.25; }
.wa-hero-shield>img { position:relative; z-index:2; width:100%; height:100%; object-fit:contain; filter:saturate(1.05) drop-shadow(0 12px 17px rgba(0,40,145,.24)); }

.wa-card { position:relative; z-index:5; margin-top:-22px; padding:18px 18px 96px; border-radius:26px 26px 0 0; background:linear-gradient(180deg,#fff,#f8fbff); box-shadow:0 -7px 24px #004fa51c; }
.wa-steps { display:grid; grid-template-columns:1fr 30px 1fr 30px 1fr; align-items:start; margin:0 0 19px; }
.wa-steps>div { display:flex; flex-direction:column; align-items:center; gap:7px; color:#697586; text-align:center; font-size:8.5px; white-space:nowrap; }
.wa-steps b { display:grid; place-items:center; width:25px; height:25px; border:1px solid #dce6f0; border-radius:50%; background:#f7f9fc; font-size:11px; }
.wa-steps .is-active { color:#0874e9; font-weight:600; }
.wa-steps .is-active b { color:#fff; border-color:#0874e9; background:#0874e9; }
.wa-steps>i { height:1px; margin-top:12px; background:#dce5ef; }
.wa-alert { margin:0 0 12px; padding:10px 12px; border:1px solid #fda29b; border-radius:10px; color:#b42318; background:#fef3f2; font-size:10px; line-height:1.45; }
#wa-activation-form>h2 { margin:0 0 10px; font-size:14px; }
.wa-field { height:49px; display:flex; align-items:center; gap:11px; margin-bottom:9px; padding:0 13px; border:1px solid var(--wa-line); border-radius:11px; background:#fff; box-shadow:0 4px 12px #24598b0b; }
.wa-field>svg { flex:0 0 20px; color:#8795a8; }
.wa-field input,.wa-field select { min-width:0; flex:1; height:100%; border:0; outline:0; color:#344054; background:transparent; font-size:10px; }
.wa-field input::placeholder { color:#8b97a8; }
.wa-field select { appearance:none; color:#667085; }
.wa-code-field { padding-right:5px; }
.wa-code-field button { height:37px; display:flex; align-items:center; gap:5px; padding:0 10px; border:0; border-left:1px solid #e7edf4; color:#0874e9; background:#fff; font-size:9px; font-weight:600; white-space:nowrap; }
.wa-code-field button svg { width:18px; height:18px; }
.wa-upload-title { margin:14px 0 9px; font-size:10px; font-weight:600; }
.wa-upload-title span { color:#7d8998; font-weight:400; }
.wa-upload-box { min-height:64px; display:flex; align-items:center; gap:12px; padding:10px 12px; border:1px dashed #b8c7d9; border-radius:11px; background:#fff; cursor:pointer; }
.wa-upload-box>svg { flex:0 0 28px; width:28px; height:28px; color:#0878f5; stroke-width:2.2; }
.wa-upload-box>span { min-width:0; flex:1; }
.wa-upload-box b,.wa-upload-box small { display:block; }
.wa-upload-box b { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:9px; }
.wa-upload-box small { margin-top:5px; color:#7b8797; font-size:8px; }
.wa-upload-box em { height:32px; display:flex; align-items:center; gap:5px; padding:0 10px; border:1px solid #0878f5; border-radius:7px; color:#0878f5; font-size:8px; font-style:normal; white-space:nowrap; }

.wa-product { margin-top:14px; display:grid; grid-template-columns:42px 1fr auto; align-items:center; gap:10px; padding:11px; border:1px solid #dbe8f5; border-radius:11px; background:linear-gradient(135deg,#f0f8ff,#f7fbff); }
.wa-product>span { width:38px; height:38px; display:grid; place-items:center; border-radius:50%; color:#fff; background:#17c976; }
.wa-product>div { min-width:0; }
.wa-product small,.wa-product b,.wa-product em { display:block; }
.wa-product small { color:#687587; font-size:7.5px; }
.wa-product b { margin-top:3px; overflow:hidden; color:#0864c8; text-overflow:ellipsis; white-space:nowrap; font-size:11px; }
.wa-product em { margin-top:3px; color:#687587; font-size:7px; font-style:normal; }
.wa-product>strong { padding:5px 8px; border:1px solid #a9cdf8; border-radius:6px; color:#0874e9; background:#f3f8ff; font-size:7px; white-space:nowrap; }
.wa-benefits { margin-top:15px; }
.wa-benefits h3 { margin:0 0 9px; color:#0864c8; font-size:10px; }
.wa-benefits>div { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; }
.wa-benefits article { min-width:0; display:grid; grid-template-columns:28px 1fr; grid-template-rows:auto auto; padding:8px 5px; border-radius:10px; background:#fff; box-shadow:0 4px 12px #1d53860c; }
.wa-benefits article>span { grid-row:1/3; align-self:center; width:26px; height:26px; display:grid; place-items:center; border-radius:50%; }
.wa-benefits .blue { color:#0985ff; background:#e8f5ff; }
.wa-benefits .green { color:#13bd70; background:#e7faef; }
.wa-benefits .purple { color:#8738e8; background:#f3eaff; }
.wa-benefits article b { font-size:7.5px; }
.wa-benefits article small { margin-top:3px; color:#7a8796; font-size:6.2px; line-height:1.4; }
.wa-submit { width:100%; height:48px; margin-top:14px; display:flex; align-items:center; justify-content:center; gap:15px; border:0; border-radius:12px; color:#fff; background:linear-gradient(90deg,#087af5,#075ade); box-shadow:0 9px 18px #0874e933; font-size:13px; }

.wa-bottom-nav { position:fixed; z-index:20; right:0; bottom:0; left:0; width:min(100%,520px); height:calc(68px + env(safe-area-inset-bottom)); margin:auto; display:grid; grid-template-columns:repeat(5,1fr); align-items:start; padding:8px 8px env(safe-area-inset-bottom); border-top:1px solid #e7edf4; background:#fff; box-shadow:0 -5px 15px #1f4e790d; }
.wa-bottom-nav>a:not(.wa-bottom-scan) { display:flex; flex-direction:column; align-items:center; gap:4px; color:#5d6b7e; font-size:7px; }
.wa-bottom-nav>a svg { width:19px; height:19px; }
.wa-bottom-nav .wa-bottom-scan { width:52px; height:52px; justify-self:center; display:grid; place-items:center; border:5px solid #e9f4ff; border-radius:50%; color:#fff; background:#0878f5; transform:translateY(-20px); box-shadow:0 7px 16px #0874e955; }
.wa-bottom-nav .wa-bottom-scan svg { width:26px; height:26px; }
.wa-toast { position:fixed; z-index:50; left:50%; bottom:85px; max-width:calc(100% - 32px); padding:10px 15px; border-radius:10px; color:#fff; background:#102a43; opacity:0; pointer-events:none; transform:translate(-50%,15px); transition:.25s; text-align:center; font-size:11px; }
.wa-toast.is-visible { opacity:1; transform:translate(-50%,0); }

@media (min-width:700px) and (max-width:900px) {
  body.hp-page--warranty-activate { padding:22px; }
  .wa-page { border-radius:28px; }
}
@media (min-width:901px) {
  body.hp-page--warranty-activate {
    padding:0;
    background:#0645cb;
  }
  body.hp-page--warranty-activate #main-content {
    min-height:0;
  }
  .wa-mobile-only { display:none; }
  .wa-desktop-only { display:inline; }
  .wa-page {
    width:100%;
    min-height:calc(100vh - 124px);
    overflow:visible;
    background:#f7faff;
    box-shadow:none;
  }
  .wa-hero {
    height:310px;
    padding:0;
    background:
      linear-gradient(180deg,#0645cb 0,rgba(6,69,203,.96) 10px,rgba(6,69,203,0) 58px),
      radial-gradient(circle at 75% 40%,rgba(29,190,255,.58),transparent 23%),
      radial-gradient(circle at 96% 4%,rgba(26,151,255,.75),transparent 28%),
      linear-gradient(118deg,#0645cb 0%,#0068eb 55%,#008cf7 100%);
  }
  .wa-hero::after {
    right:8%;
    top:50px;
    width:440px;
    height:205px;
    border-color:#ffffff26;
  }
  .wa-hero-pattern {
    position:absolute;
    inset:0;
    display:block;
    opacity:.28;
    background-image:
      radial-gradient(circle,rgba(255,255,255,.9) 1.2px,transparent 1.8px),
      linear-gradient(130deg,transparent 45%,rgba(255,255,255,.08) 46%,transparent 47%);
    background-size:15px 15px,160px 160px;
    background-position:0 0;
    -webkit-mask-image:linear-gradient(90deg,transparent 6%,#000 60%,#000);
    mask-image:linear-gradient(90deg,transparent 6%,#000 60%,#000);
  }
  .wa-hero-inner {
    width:min(1120px,calc(100% - 40px));
    margin-inline:auto;
  }
  .wa-brand { display:none; }
  .wa-hero-copy {
    width:58%;
    margin:0;
    padding-top:39px;
  }
  .wa-hero-eyebrow {
    width:max-content;
    display:flex;
    align-items:center;
    gap:8px;
    padding:7px 13px 7px 9px;
    border:1px solid rgba(255,255,255,.25);
    border-radius:999px;
    color:#fff;
    background:rgba(3,62,172,.28);
    box-shadow:inset 0 1px rgba(255,255,255,.12);
    -webkit-backdrop-filter:blur(8px);
    backdrop-filter:blur(8px);
    font-size:11px;
    font-weight:600;
    letter-spacing:.35px;
  }
  .wa-hero-eyebrow svg {
    width:22px;
    height:22px;
    padding:4px;
    border-radius:50%;
    color:#075bd8;
    background:#fff;
    stroke-width:2.2;
  }
  .wa-hero-eyebrow span {
    font-size:inherit;
    opacity:1;
  }
  .wa-hero-copy h1 {
    margin:0;
    color:#fff;
    line-height:.98;
  }
  .wa-hero-title {
    display:block;
    margin-top:14px;
    font-size:clamp(34px,3.3vw,48px);
    font-weight:500;
    letter-spacing:-1.2px;
    opacity:1;
  }
  .wa-hero-title strong {
    display:block;
    margin-top:5px;
    color:#fff;
    font-size:clamp(48px,5vw,68px);
    font-weight:800;
    letter-spacing:-2.5px;
    text-shadow:0 8px 22px rgba(0,40,120,.2);
  }
  .wa-hero-title small {
    position:absolute;
    top:116px;
    left:clamp(230px,25vw,315px);
    margin:0;
    padding:7px 13px;
    border:1px solid rgba(255,255,255,.35);
    border-radius:10px;
    color:#0759cf;
    background:linear-gradient(135deg,#fff,#c9f1ff);
    box-shadow:0 7px 18px rgba(0,47,135,.2);
    font-size:11px;
    font-weight:800;
    letter-spacing:1.4px;
    line-height:1;
    text-transform:uppercase;
  }
  .wa-hero-lead {
    max-width:530px;
    margin:15px 0 0;
    color:rgba(255,255,255,.86);
    font-size:12px;
    line-height:1.65;
  }
  .wa-hero-trust {
    display:flex;
    gap:10px;
    margin-top:13px;
  }
  .wa-hero-trust>span {
    display:flex;
    align-items:center;
    gap:6px;
    padding:6px 10px;
    border:1px solid rgba(255,255,255,.18);
    border-radius:8px;
    color:rgba(255,255,255,.9);
    background:rgba(0,48,151,.18);
    font-size:9px;
    font-weight:500;
  }
  .wa-hero-trust b {
    width:15px;
    height:15px;
    display:grid;
    place-items:center;
    border-radius:50%;
    color:#0570de;
    background:#bff5d5;
    font-size:9px;
  }
  .wa-hero-copy .wa-mobile-only { display:none; }
  .wa-hero-copy .wa-desktop-only { display:block; }
  .wa-hero-copy .wa-hero-eyebrow,
  .wa-hero-copy .wa-hero-trust { display:flex; }
  .wa-hero-shield {
    right:5%;
    bottom:12px;
    width:310px;
    height:270px;
  }
  .wa-hero-shield::before {
    content:"";
    position:absolute;
    inset:32px 5px 8px;
    border-radius:50%;
    background:radial-gradient(ellipse,rgba(182,232,255,.8),rgba(0,70,180,.45) 55%,transparent 72%);
    filter:blur(2px);
  }
  .wa-hero-shield>img {
    position:relative;
    z-index:2;
    filter:saturate(1.05) drop-shadow(0 20px 20px rgba(0,40,145,.3));
  }
  .wa-hero-shield>i {
    position:absolute;
    z-index:3;
    width:34px;
    height:34px;
    border:8px solid #b6ecff;
    border-radius:50% 50% 50% 0;
    background:#fff;
    box-shadow:0 6px 15px rgba(0,47,135,.2);
    transform:rotate(-45deg);
  }
  .wa-hero-shield>i:nth-child(1) { top:46px; left:-35px; }
  .wa-hero-shield>i:nth-child(2) { top:98px; right:-44px; transform:rotate(-45deg) scale(.72); }
  .wa-hero-shield>i:nth-child(3) { bottom:52px; left:-65px; transform:rotate(-45deg) scale(.58); }
  .wa-card {
    width:min(1120px,calc(100% - 40px));
    margin:-34px auto 72px;
    padding:29px 38px 38px;
    border:1px solid #e4ebf4;
    border-radius:22px;
    background:#fff;
    box-shadow:0 14px 34px rgba(26,87,157,.14);
  }
  .wa-steps {
    width:min(650px,72%);
    grid-template-columns:1fr 80px 1fr 80px 1fr;
    margin:0 auto 29px;
  }
  .wa-steps>div {
    gap:8px;
    font-size:11px;
  }
  .wa-steps b {
    width:32px;
    height:32px;
    font-size:13px;
  }
  .wa-steps>i {
    margin-top:16px;
  }
  .wa-alert {
    margin:0 0 18px;
    padding:13px 15px;
    font-size:12px;
  }
  #wa-activation-form {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px 18px;
  }
  #wa-activation-form>h2,
  #wa-activation-form>.wa-code-field,
  #wa-activation-form>.wa-upload-title,
  #wa-activation-form>.wa-upload-box,
  #wa-activation-form>.wa-product,
  #wa-activation-form>.wa-benefits,
  #wa-activation-form>.wa-submit {
    grid-column:1/-1;
  }
  #wa-activation-form>h2 {
    margin:0 0 2px;
    font-size:20px;
    letter-spacing:-.25px;
  }
  .wa-field {
    height:58px;
    gap:13px;
    margin:0;
    padding:0 17px;
    border-color:#dfe7f0;
    border-radius:13px;
    box-shadow:0 5px 15px rgba(36,89,139,.055);
    transition:border-color .2s ease,box-shadow .2s ease;
  }
  .wa-field:focus-within {
    border-color:#70b3ff;
    box-shadow:0 0 0 4px rgba(8,120,245,.09);
  }
  .wa-field>svg {
    flex-basis:22px;
    width:22px;
    height:22px;
  }
  .wa-field input,
  .wa-field select {
    font-size:13px;
  }
  .wa-code-field {
    padding-right:8px;
  }
  .wa-code-field button {
    height:43px;
    padding:0 17px;
    font-size:11px;
  }
  .wa-upload-title {
    margin:5px 0 -4px;
    font-size:13px;
  }
  .wa-upload-box {
    min-height:82px;
    gap:17px;
    padding:13px 17px;
    border-radius:13px;
    background:#fafdff;
  }
  .wa-upload-box>svg {
    flex-basis:34px;
    width:34px;
    height:34px;
  }
  .wa-upload-box b { font-size:12px; }
  .wa-upload-box small { font-size:10px; }
  .wa-upload-box em {
    height:40px;
    padding:0 16px;
    font-size:10px;
  }
  .wa-product {
    margin-top:0;
    padding:14px 16px;
    border-radius:13px;
  }
  .wa-product small { font-size:9px; }
  .wa-product b { font-size:13px; }
  .wa-product em { font-size:9px; }
  .wa-product>strong { padding:6px 10px; font-size:9px; }
  .wa-benefits {
    margin-top:4px;
    padding:19px 20px;
    border:1px solid #e6edf5;
    border-radius:15px;
    background:linear-gradient(100deg,#f1f7ff,#fff);
  }
  .wa-benefits h3 {
    margin-bottom:13px;
    font-size:13px;
  }
  .wa-benefits>div { gap:14px; }
  .wa-benefits article {
    grid-template-columns:42px 1fr;
    padding:12px;
    border:1px solid #edf2f7;
    border-radius:12px;
  }
  .wa-benefits article>span {
    width:36px;
    height:36px;
  }
  .wa-benefits article b { font-size:11px; }
  .wa-benefits article small { font-size:9px; }
  .wa-submit {
    width:330px;
    height:52px;
    justify-self:end;
    margin-top:2px;
    border-radius:12px;
    font-size:13px;
  }
  .wa-toast {
    bottom:30px;
    font-size:12px;
  }
}
@media (max-width:380px) {
  .wa-hero { padding-right:18px; padding-left:18px; }
  .wa-card { padding-right:12px; padding-left:12px; }
  .wa-code-field button { padding:0 7px; }
}
@media (prefers-reduced-motion:reduce) {
  .wa-page * { scroll-behavior:auto!important; transition-duration:.01ms!important; }
}