.hp-warranty-app {
--hp-red:       #DA1F26;
--hp-red-deep:  #B71419;
--hp-red-soft:  #FDE8E8;
--hp-red-line:  #F6CBCD;
--ink-0:   #0A0A0B;
--ink-1:   #15161A;
--ink-2:   #2E2F36;
--ink-3:   #5A5C66;
--ink-4:   #8D8F99;
--ink-5:   #B7B9C2;
--ink-6:   #E4E5EA;
--ink-7:   #EFF0F3;
--ink-8:   #F6F6F8;
--ink-9:   #FBFBFC;
--ok:        #0A8754;
--ok-soft:   #E4F4EC;
--ok-line:   #B5DEC9;
--warn:      #B36900;
--warn-soft: #FEF3DE;
--warn-line: #F5D38A;
--bad:       #9B1B1B;
--bad-soft:  #FCE9E9;
--bad-line:  #ECC1C1;
--surface:        #FFFFFF;
--surface-soft:   #FAFAFB;
--surface-warm:   #F6F4F1;
--r-xs:   4px;
--r-sm:   8px;
--r-md:   12px;
--r-lg:   18px;
--r-xl:   28px;
--sh-1: 0 1px 2px rgba(15,16,20,0.04), 0 1px 1px rgba(15,16,20,0.03);
--sh-2: 0 4px 14px rgba(15,16,20,0.05), 0 2px 4px rgba(15,16,20,0.03);
--sh-3: 0 18px 40px rgba(15,16,20,0.08), 0 6px 14px rgba(15,16,20,0.04);
--ease: cubic-bezier(.2,.7,.2,1);
--dur-fast: 140ms;
--dur:      220ms;
font-family: 'Be Vietnam Pro', system-ui, -apple-system, sans-serif;
font-weight: 400;
color: var(--ink-1);
background: var(--surface);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
.hp-warranty-app, .hp-warranty-app *, .hp-warranty-app *::before, .hp-warranty-app *::after { box-sizing: border-box; }
.hp-warranty-app .mono { font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; }
.hp-warranty-app button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
.hp-warranty-app input { font: inherit; color: inherit; }
.hp-warranty-app a { color: inherit; text-decoration: none; }
.hp-warranty-app .eyebrow {
font-size: 11px; font-weight: 600; letter-spacing: 0.14em;
text-transform: uppercase; color: var(--ink-3);
}
.hp-warranty-app .eyebrow.red { color: var(--hp-red); }
.hp-warranty-app .muted { color: var(--ink-3); }
.hp-warranty-app .muted-2 { color: var(--ink-4); } .hp-warranty-app .hp-hero {
position: relative;
padding: 48px 40px 80px;
overflow: hidden;
background: var(--surface);
}
.hp-warranty-app .hp-hero__bg-grid {
position: absolute; inset: 0;
background-image:
linear-gradient(to right, rgba(15,16,20,0.04) 1px, transparent 1px),
linear-gradient(to bottom, rgba(15,16,20,0.04) 1px, transparent 1px);
background-size: 56px 56px;
-webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 30%, #000 30%, transparent 80%);
mask-image: radial-gradient(ellipse 80% 70% at 50% 30%, #000 30%, transparent 80%);
pointer-events: none;
}
.hp-warranty-app .hp-hero__inner {
position: relative;
max-width: 1080px; margin: 0 auto;
text-align: center;
}
.hp-warranty-app .hp-hero__eyebrow {
display: inline-flex; align-items: center; gap: 10px;
padding: 6px 14px;
border-radius: 999px;
background: var(--surface);
border: 1px solid var(--ink-7);
font-size: 12px;
color: var(--ink-2);
font-weight: 500;
box-shadow: var(--sh-1);
margin-bottom: 16px;
}
.hp-warranty-app .hp-hero__eyebrow .pulse {
width: 6px; height: 6px; border-radius: 50%;
background: var(--hp-red);
box-shadow: 0 0 0 0 rgba(218,31,38,0.5);
animation: hp-pulse 1.8s var(--ease) infinite;
}
@keyframes hp-pulse {
0%   { box-shadow: 0 0 0 0 rgba(218,31,38,0.5); }
70%  { box-shadow: 0 0 0 10px rgba(218,31,38,0); }
100% { box-shadow: 0 0 0 0 rgba(218,31,38,0); }
}
.hp-warranty-app .h-display {
font-size: clamp(38px, 4.2vw, 60px);
font-weight: 800;
letter-spacing: -0.035em;
line-height: 1.04;
color: var(--ink-0);
margin: 0;
}
.hp-warranty-app .h-display .accent {
background: linear-gradient(180deg, var(--hp-red) 0%, var(--hp-red-deep) 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.hp-warranty-app .hp-hero__lede {
max-width: 560px;
margin: 22px auto 0;
font-size: 17px;
line-height: 1.55;
color: var(--ink-3);
}
.hp-warranty-app .hp-search {
max-width: 720px;
margin: 48px auto 0;
background: var(--surface);
border: 1px solid var(--ink-7);
border-radius: 999px;
padding: 6px;
box-shadow: var(--sh-3);
display: flex;
align-items: stretch;
gap: 6px;
transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.hp-warranty-app .hp-search:focus-within {
border-color: var(--ink-2);
box-shadow: 0 0 0 6px rgba(15,16,20,0.05), var(--sh-3);
}
.hp-warranty-app .hp-search__field {
flex: 1; min-width: 0;
display: flex; align-items: center; gap: 10px;
padding: 0 18px;
align-self: center;
}
.hp-warranty-app .hp-search__field svg { color: var(--ink-4); flex-shrink: 0; }
.hp-warranty-app .hp-search input[name="masp"] {
flex: 1; min-width: 0;
border: 0 !important;
background: transparent !important;
outline: 0 !important;
box-shadow: none !important;
font-size: 15px;
padding: 0 !important;
margin: 0 !important;
height: 44px;
line-height: 44px;
letter-spacing: -0.005em;
color: var(--ink-0);
border-radius: 0 !important;
}
.hp-warranty-app .hp-search input[name="masp"]:focus,
.hp-warranty-app .hp-search input[name="masp"]:focus-visible {
border: 0 !important;
outline: 0 !important;
box-shadow: none !important;
}
.hp-warranty-app .hp-search input[name="masp"]::placeholder { color: var(--ink-4); opacity: 1; }
.hp-warranty-app .hp-search__btn {
height: 44px !important;
min-height: 44px !important;
line-height: 44px !important;
padding: 0 22px !important;
margin: 0 !important;
border: 0 !important;
border-radius: 999px !important;
background: var(--ink-0) !important;
color: #fff !important;
font-weight: 600 !important;
font-size: 13px !important;
letter-spacing: 0.01em !important;
text-transform: none !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 6px;
transition: background var(--dur) var(--ease), transform var(--dur-fast) var(--ease);
white-space: nowrap;
flex-shrink: 0;
box-shadow: none !important;
vertical-align: middle;
align-self: center;
cursor: pointer;
}
.hp-warranty-app .hp-search__btn:hover { background: var(--ink-2) !important; }
.hp-warranty-app .hp-search__btn:active { transform: scale(0.98); }
.hp-warranty-app .hp-search__btn:focus,
.hp-warranty-app .hp-search__btn:focus-visible {
outline: 0 !important;
box-shadow: 0 0 0 3px rgba(218,31,38,0.18) !important;
}
.hp-warranty-app .hp-search__hints {
display: flex; justify-content: center; gap: 24px;
margin-top: 18px;
font-size: 13px;
color: var(--ink-4);
flex-wrap: wrap;
}
.hp-warranty-app .hp-search__hint {
display: inline-flex; align-items: center; gap: 6px;
cursor: pointer;
transition: color var(--dur) var(--ease);
background: none; border: 0;
}
.hp-warranty-app .hp-search__hint:hover { color: var(--ink-2); }
.hp-warranty-app .hp-search__hint code {
font-family: 'JetBrains Mono', monospace;
font-size: 12px;
padding: 2px 6px;
border-radius: 4px;
background: var(--ink-8);
color: var(--ink-2);
} .hp-warranty-app .hp-help {
background: var(--surface);
border-top: 1px solid var(--ink-7);
padding: 48px 40px 96px;
}
.hp-warranty-app .hp-help__inner { max-width: 1180px; margin: 0 auto; }
.hp-warranty-app .hp-help__head {
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
gap: 56px;
align-items: end;
margin-bottom: 44px;
}
.hp-warranty-app .hp-help__head-left .eyebrow { margin-bottom: 12px; }
.hp-warranty-app .hp-help__head h2 {
font-size: clamp(28px, 3.2vw, 44px);
font-weight: 700;
letter-spacing: -0.03em;
line-height: 1.06;
color: var(--ink-0);
margin: 0;
}
.hp-warranty-app .hp-help__head h2 .accent {
background: linear-gradient(180deg, var(--hp-red) 0%, var(--hp-red-deep) 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
white-space: nowrap;
}
.hp-warranty-app .hp-help__sub {
margin: 0 0 4px;
font-size: 16px;
line-height: 1.55;
color: var(--ink-3);
max-width: 460px;
}
.hp-warranty-app .hp-help__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
}
.hp-warranty-app .hp-help__card {
position: relative;
background: var(--surface);
border: 1px solid var(--ink-7);
border-radius: var(--r-xl);
padding: 24px 26px 26px;
overflow: hidden;
transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.hp-warranty-app .hp-help__card:hover { transform: translateY(-2px); box-shadow: var(--sh-2); }
.hp-warranty-app .hp-help__visual {
height: 200px;
margin: -24px -26px 0;
display: grid; place-items: center;
position: relative;
overflow: hidden;
}
.hp-warranty-app .hp-help__num {
position: absolute;
top: 18px; right: 22px;
font-family: 'JetBrains Mono', monospace;
font-size: 12px;
letter-spacing: 0.04em;
color: var(--ink-4);
background: rgba(255,255,255,0.7);
backdrop-filter: blur(8px);
padding: 4px 8px;
border-radius: 6px;
}
.hp-warranty-app .hp-help__card h3 {
font-size: 18px; font-weight: 700;
letter-spacing: -0.015em;
margin: 22px 0 8px;
color: var(--ink-0);
}
.hp-warranty-app .hp-help__card p {
margin: 0;
font-size: 14px;
line-height: 1.55;
color: var(--ink-3);
}
.hp-warranty-app .hp-help__card p code {
font-family: 'JetBrains Mono', monospace;
font-size: 12.5px;
padding: 1px 6px;
border-radius: 4px;
background: var(--ink-8);
color: var(--ink-1);
font-weight: 500;
}
.hp-warranty-app .hp-help__card p em {
font-style: normal;
font-weight: 600;
color: var(--ink-1);
} .hp-warranty-app .hp-help__visual--sticker {
background:
radial-gradient(ellipse at 50% 110%, rgba(15,16,20,0.10) 0%, transparent 60%),
linear-gradient(180deg, #f1efeb 0%, #e8e5e0 100%);
}
.hp-warranty-app .hp-sticker {
width: 220px; height: 130px;
background: linear-gradient(135deg, #f5f4f1 0%, #d6d3cb 100%);
border-radius: 6px;
padding: 12px 14px;
position: relative;
box-shadow: inset 0 0 0 1px rgba(255,255,255,0.6), 0 2px 6px rgba(0,0,0,0.08);
transform: rotate(-3deg);
display: flex; flex-direction: column; justify-content: space-between;
font-family: 'JetBrains Mono', monospace;
}
.hp-warranty-app .hp-sticker__brand {
font-family: 'Be Vietnam Pro', sans-serif;
font-weight: 800;
font-size: 13px;
letter-spacing: 0.03em;
color: var(--ink-2);
}
.hp-warranty-app .hp-sticker__rows { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; }
.hp-warranty-app .hp-sticker__rows span {
height: 3px; border-radius: 1px;
background: var(--ink-5); opacity: 0.5;
}
.hp-warranty-app .hp-sticker__rows span:nth-child(1) { width: 80%; }
.hp-warranty-app .hp-sticker__rows span:nth-child(2) { width: 60%; }
.hp-warranty-app .hp-sticker__rows span:nth-child(3) { width: 70%; }
.hp-warranty-app .hp-sticker__serial { display: flex; align-items: center; gap: 8px; font-size: 11px; }
.hp-warranty-app .hp-sticker__serial .lbl { color: var(--ink-3); font-weight: 500; }
.hp-warranty-app .hp-sticker__serial .val {
font-weight: 700; font-size: 14px;
color: var(--hp-red); letter-spacing: 0.02em;
padding: 2px 6px;
border: 1px dashed var(--hp-red);
border-radius: 3px;
background: rgba(218,31,38,0.06);
}
.hp-warranty-app .hp-sticker__bar {
height: 14px;
background:
repeating-linear-gradient(90deg,
var(--ink-1) 0, var(--ink-1) 1px,
transparent 1px, transparent 3px,
var(--ink-1) 3px, var(--ink-1) 5px,
transparent 5px, transparent 7px);
opacity: 0.85;
border-radius: 1px;
} .hp-warranty-app .hp-help__visual--bios {
background: linear-gradient(180deg, #0f1116 0%, #1c2030 100%);
padding: 18px;
}
.hp-warranty-app .hp-bios {
width: 100%; height: 100%;
background: #0a1d52;
color: #d6d8e0;
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
border-radius: 4px;
border: 1px solid #112c70;
overflow: hidden;
display: flex; flex-direction: column;
}
.hp-warranty-app .hp-bios__top {
background: #c9cbd2;
color: #0a1d52;
font-weight: 700;
padding: 4px 10px;
display: flex; justify-content: space-between;
font-size: 10px;
}
.hp-warranty-app .hp-bios__row { display: flex; justify-content: space-between; padding: 6px 14px; }
.hp-warranty-app .hp-bios__row span:first-child { color: #aeb4c8; }
.hp-warranty-app .hp-bios__row--hi {
background: rgba(255,201,71,0.15);
border-left: 2px solid #ffc947;
margin-top: 4px;
padding-top: 8px; padding-bottom: 8px;
}
.hp-warranty-app .hp-bios__row--hi .mono {
color: #ffc947;
font-weight: 700;
font-size: 12px;
} .hp-warranty-app .hp-help__visual--cmd {
background: linear-gradient(180deg, #1a1a1f 0%, #0c0c10 100%);
padding: 18px;
}
.hp-warranty-app .hp-cmd {
width: 100%; height: 100%;
background: #0d0d11;
border-radius: 6px;
border: 1px solid #2a2a32;
overflow: hidden;
display: flex; flex-direction: column;
box-shadow: 0 6px 18px rgba(0,0,0,0.3);
}
.hp-warranty-app .hp-cmd__bar {
background: #1c1c22;
padding: 7px 10px;
display: flex; align-items: center; gap: 6px;
border-bottom: 1px solid #2a2a32;
}
.hp-warranty-app .hp-cmd__bar span:nth-child(1) { width: 8px; height: 8px; border-radius: 50%; background: #ff5f57; }
.hp-warranty-app .hp-cmd__bar span:nth-child(2) { width: 8px; height: 8px; border-radius: 50%; background: #febc2e; }
.hp-warranty-app .hp-cmd__bar span:nth-child(3) { width: 8px; height: 8px; border-radius: 50%; background: #28c840; }
.hp-warranty-app .hp-cmd__bar .title {
margin-left: auto; margin-right: auto;
font-size: 10px; color: #888;
font-family: 'JetBrains Mono', monospace;
}
.hp-warranty-app .hp-cmd__body {
flex: 1;
padding: 10px 12px;
color: #d6d8d6;
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
line-height: 1.55;
}
.hp-warranty-app .hp-cmd__body .muted { color: #6f7280; }
.hp-warranty-app .hp-cmd__out { color: #888; margin-top: 4px; }
.hp-warranty-app .hp-cmd__hi {
color: #4ade80;
font-weight: 700;
font-size: 13px;
letter-spacing: 0.04em;
}
.hp-warranty-app .hp-cmd__cursor { margin-top: 4px; display: flex; align-items: center; gap: 4px; }
.hp-warranty-app .hp-cmd__cursor i {
display: inline-block;
width: 6px; height: 12px;
background: #4ade80;
animation: hp-blink 1s steps(1) infinite;
}
@keyframes hp-blink { 50% { opacity: 0; } } .hp-warranty-app .hp-result {
padding: 56px 40px 96px;
background: var(--surface);
}
.hp-warranty-app .hp-result__inner { max-width: 1080px; margin: 0 auto; }
.hp-warranty-app .hp-result__header {
display: flex; align-items: flex-end; justify-content: space-between;
gap: 24px;
padding-bottom: 24px;
border-bottom: 1px solid var(--ink-7);
flex-wrap: wrap;
}
.hp-warranty-app .hp-result__header .ser-label {
font-size: 12px; font-weight: 500;
color: var(--ink-3);
letter-spacing: 0.04em;
text-transform: uppercase;
}
.hp-warranty-app .hp-result__header .ser { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.hp-warranty-app .hp-result__header .ser .code {
font-family: 'JetBrains Mono', monospace;
font-size: 28px;
font-weight: 600;
color: var(--ink-0);
letter-spacing: -0.01em;
}
.hp-warranty-app .hp-result__actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hp-warranty-app .hp-icon-btn {
display: inline-flex; align-items: center; gap: 8px;
height: 38px; padding: 0 14px;
border-radius: 999px;
border: 1px solid var(--ink-7);
background: var(--surface);
color: var(--ink-2);
font-size: 13px; font-weight: 500;
transition: all var(--dur) var(--ease);
}
.hp-warranty-app .hp-icon-btn:hover { border-color: var(--ink-3); transform: translateY(-1px); box-shadow: var(--sh-1); }
.hp-warranty-app .hp-icon-btn--square { width: 38px; padding: 0; justify-content: center; }
.hp-warranty-app .hp-status {
margin-top: 40px;
border-radius: var(--r-xl);
overflow: hidden;
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
background: var(--surface);
border: 1px solid var(--ink-7);
box-shadow: var(--sh-2);
}
.hp-warranty-app .hp-status__left {
padding: 44px 44px 36px;
border-right: 1px solid var(--ink-7);
display: flex; flex-direction: column; justify-content: space-between;
gap: 24px;
}
.hp-warranty-app .hp-status__badge {
display: inline-flex; align-items: center; gap: 8px;
padding: 6px 12px;
border-radius: 999px;
font-size: 12px; font-weight: 600; letter-spacing: 0.02em;
width: fit-content;
}
.hp-warranty-app .hp-status__badge .dot { width: 7px; height: 7px; border-radius: 50%; }
.hp-warranty-app .hp-status__badge[data-state="ok"]   { background: var(--ok-soft);   color: var(--ok);   border: 1px solid var(--ok-line);   }
.hp-warranty-app .hp-status__badge[data-state="warn"] { background: var(--warn-soft); color: var(--warn); border: 1px solid var(--warn-line); }
.hp-warranty-app .hp-status__badge[data-state="bad"]  { background: var(--bad-soft);  color: var(--bad);  border: 1px solid var(--bad-line);  }
.hp-warranty-app .hp-status__badge[data-state="ok"]   .dot { background: var(--ok);   box-shadow: 0 0 0 3px rgba(10,135,84,0.18); }
.hp-warranty-app .hp-status__badge[data-state="warn"] .dot { background: var(--warn); }
.hp-warranty-app .hp-status__badge[data-state="bad"]  .dot { background: var(--bad);  }
.hp-warranty-app .hp-status__headline {
font-size: clamp(28px, 3.4vw, 40px);
font-weight: 700;
letter-spacing: -0.028em;
color: var(--ink-0);
line-height: 1.1;
margin-top: 18px;
}
.hp-warranty-app .hp-status__headline .num { font-variant-numeric: tabular-nums; }
.hp-warranty-app .hp-status__note {
color: var(--ink-3);
margin-top: 14px;
font-size: 14px;
line-height: 1.55;
max-width: 440px;
}
.hp-warranty-app .hp-status__meta {
display: grid;
grid-template-columns: 1fr 1fr;
border-top: 1px solid var(--ink-7);
padding-top: 22px;
}
.hp-warranty-app .hp-status__meta .cell .lbl {
font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
color: var(--ink-3); margin-bottom: 6px;
}
.hp-warranty-app .hp-status__meta .cell .val {
font-size: 18px; font-weight: 600; color: var(--ink-0);
letter-spacing: -0.005em;
}
.hp-warranty-app .hp-status__meta .cell .val small {
display: block; font-size: 12px; font-weight: 400;
color: var(--ink-3); margin-top: 2px;
}
.hp-warranty-app .hp-status__right {
padding: 44px;
display: grid; place-items: center;
background:
radial-gradient(circle at 50% 50%, var(--ink-8) 0%, transparent 70%),
var(--surface);
}
.hp-warranty-app .hp-ring { position: relative; width: 280px; height: 280px; }
.hp-warranty-app .hp-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.hp-warranty-app .hp-ring__track { stroke: var(--ink-7); fill: none; stroke-width: 14; }
.hp-warranty-app .hp-ring__bar {
fill: none; stroke-width: 14;
stroke-linecap: round;
transition: stroke-dashoffset 900ms var(--ease), stroke 400ms var(--ease);
}
.hp-warranty-app .hp-ring[data-state="ok"]   .hp-ring__bar { stroke: var(--ok);   }
.hp-warranty-app .hp-ring[data-state="warn"] .hp-ring__bar { stroke: var(--warn); }
.hp-warranty-app .hp-ring[data-state="bad"]  .hp-ring__bar { stroke: var(--bad);  }
.hp-warranty-app .hp-ring__center {
position: absolute; inset: 0;
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 2px;
}
.hp-warranty-app .hp-ring__num {
font-size: 76px; font-weight: 700; letter-spacing: -0.04em;
color: var(--ink-0); font-variant-numeric: tabular-nums; line-height: 1;
}
.hp-warranty-app .hp-ring__unit {
font-size: 13px; color: var(--ink-3);
letter-spacing: 0.04em; text-transform: uppercase;
}
.hp-warranty-app .hp-ring__pct {
margin-top: 8px; font-size: 12px; color: var(--ink-4);
font-variant-numeric: tabular-nums;
}
.hp-warranty-app .hp-detail-grid {
margin-top: 28px;
display: grid;
grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
gap: 24px;
}
.hp-warranty-app .hp-product-card {
border-radius: var(--r-xl);
background: var(--surface-warm);
border: 1px solid var(--ink-7);
padding: 28px;
display: flex; flex-direction: column; gap: 14px;
position: relative; overflow: hidden;
min-height: 420px;
}
.hp-warranty-app .hp-product-card__brand {
font-size: 11px; font-weight: 600;
letter-spacing: 0.16em; text-transform: uppercase;
color: var(--ink-3);
}
.hp-warranty-app .hp-product-card__name {
font-size: 22px; font-weight: 700;
letter-spacing: -0.02em;
color: var(--ink-0); line-height: 1.2;
}
.hp-warranty-app .hp-product-card__img {
flex: 1; min-height: 280px;
display: grid; place-items: center;
background: radial-gradient(ellipse at 50% 70%, rgba(15,16,20,0.08) 0%, transparent 60%);
padding: 8px;
}
.hp-warranty-app .hp-product-card__img svg { width: 90%; height: auto; max-width: 360px; }
.hp-warranty-app .hp-product-card__img img {
max-width: 100%;
max-height: 360px;
width: auto;
height: auto;
object-fit: contain;
mix-blend-mode: multiply;
}
.hp-warranty-app .hp-product-card__tag {
position: absolute; top: 24px; right: 24px;
font-size: 11px; font-weight: 600;
padding: 4px 10px;
border-radius: 999px;
background: var(--surface);
border: 1px solid var(--ink-7);
color: var(--ink-2);
}
.hp-warranty-app .hp-details {
border-radius: var(--r-xl);
background: var(--surface);
border: 1px solid var(--ink-7);
overflow: hidden;
}
.hp-warranty-app .hp-details__row {
display: grid;
grid-template-columns: 200px 1fr;
padding: 18px 28px;
border-bottom: 1px solid var(--ink-7);
align-items: baseline; gap: 16px;
}
.hp-warranty-app .hp-details__row:last-child { border-bottom: 0; }
.hp-warranty-app .hp-details__row .lbl { font-size: 13px; color: var(--ink-3); }
.hp-warranty-app .hp-details__row .val {
font-size: 15px; font-weight: 500; color: var(--ink-0);
letter-spacing: -0.005em;
word-break: break-word;
}
.hp-warranty-app .hp-details__row .val.mono { font-family: 'JetBrains Mono', monospace; font-weight: 500; } .hp-warranty-app .hp-config {
margin-top: 28px;
border-radius: var(--r-xl);
background: var(--surface);
border: 1px solid var(--ink-7);
padding: 28px 32px;
}
.hp-warranty-app .hp-config__title {
display: flex; align-items: center; gap: 10px;
margin: 0 0 14px;
font-size: 16px;
font-weight: 700;
color: var(--ink-0);
letter-spacing: -0.005em;
}
.hp-warranty-app .hp-config__title svg { color: var(--hp-red); }
.hp-warranty-app .hp-config__body {
font-size: 15px;
line-height: 1.65;
color: var(--ink-1);
}
.hp-warranty-app .hp-config__body p { margin: 0 0 10px; }
.hp-warranty-app .hp-config__body p:last-child { margin-bottom: 0; }
.hp-warranty-app .hp-config__body ul, .hp-warranty-app .hp-config__body ol {
margin: 0 0 10px 18px; padding: 0;
} .hp-warranty-app .hp-support {
margin-top: 64px;
border-radius: var(--r-xl);
background: var(--ink-0);
color: #fff;
padding: 44px 48px;
display: grid;
grid-template-columns: minmax(0, 1.2fr) auto;
align-items: center;
gap: 32px;
position: relative; overflow: hidden;
}
.hp-warranty-app .hp-support::before {
content: ""; position: absolute;
top: -120px; right: -80px;
width: 360px; height: 360px;
background: radial-gradient(circle, var(--hp-red) 0%, transparent 65%);
opacity: 0.35;
}
.hp-warranty-app .hp-support h3 {
font-size: 26px;
font-weight: 700;
letter-spacing: -0.025em;
margin: 0; line-height: 1.2;
position: relative;
color: #fff !important;
}
.hp-warranty-app .hp-support p {
margin: 10px 0 0;
color: rgba(255,255,255,0.65);
font-size: 15px;
max-width: 480px;
line-height: 1.5;
position: relative;
}
.hp-warranty-app .hp-support__ctas { display: flex; gap: 10px; position: relative; flex-wrap: wrap; }
.hp-warranty-app .hp-support__cta {
display: inline-flex; align-items: center; gap: 8px;
height: 48px; padding: 0 20px;
border-radius: 999px;
background: rgba(255,255,255,0.1);
border: 1px solid rgba(255,255,255,0.16);
color: #fff;
font-size: 14px; font-weight: 500;
transition: all var(--dur) var(--ease);
}
.hp-warranty-app .hp-support__cta:hover { background: rgba(255,255,255,0.2); transform: translateY(-1px); }
.hp-warranty-app .hp-support__cta--primary {
background: var(--hp-red);
border-color: transparent;
}
.hp-warranty-app .hp-support__cta--primary:hover { background: var(--hp-red-deep); } .hp-warranty-app .hp-empty {
margin: 36px auto 0;
max-width: 720px;
border-radius: var(--r-xl);
border: 1px solid var(--ink-7);
background: var(--surface);
box-shadow: var(--sh-2);
text-align: center;
padding: 40px 32px;
}
.hp-warranty-app .hp-empty h4 {
margin: 0 0 6px;
font-size: 18px; font-weight: 700;
color: var(--ink-0); letter-spacing: -0.01em;
}
.hp-warranty-app .hp-empty p {
margin: 0; color: var(--ink-3); font-size: 14px; line-height: 1.55;
}
.hp-warranty-app .hp-loading {
display: none;
align-items: center; justify-content: center;
gap: 10px;
padding: 40px 0;
color: var(--ink-3);
font-size: 14px;
}
.hp-warranty-app.is-loading .hp-loading { display: flex; }
.hp-warranty-app .hp-spinner {
width: 20px; height: 20px;
border: 2px solid var(--ink-7);
border-top-color: var(--ink-0);
border-radius: 50%;
animation: hp-spin .8s linear infinite;
}
@keyframes hp-spin { to { transform: rotate(360deg); } } .hp-warranty-app .hp-toast {
position: fixed;
bottom: 28px; left: 50%;
transform: translateX(-50%);
background: var(--ink-0);
color: #fff;
padding: 10px 16px;
border-radius: 999px;
font-size: 13px; font-weight: 500;
box-shadow: var(--sh-3);
z-index: 999;
animation: hp-toast 2.6s var(--ease) forwards;
display: flex; align-items: center; gap: 8px;
}
@keyframes hp-toast {
0% { opacity: 0; transform: translate(-50%, 12px); }
10%, 85% { opacity: 1; transform: translate(-50%, 0); }
100% { opacity: 0; transform: translate(-50%, -8px); }
} .hp-warranty-app[data-mode="result"] .hp-hero,
.hp-warranty-app[data-mode="result"] .hp-help { display: none; }
.hp-warranty-app[data-mode="search"] .hp-result { display: none; }  .hp-warranty-app, .hp-warranty-app * { box-sizing: border-box; }
.hp-warranty-app img, .hp-warranty-app svg { max-width: 100%; } @media (max-width: 1279px) {
.hp-warranty-app .hp-hero { padding: 80px 32px 72px; }
.hp-warranty-app .hp-help { padding: 80px 32px; }
.hp-warranty-app .hp-result { padding: 64px 32px 80px; }
.hp-warranty-app .h-display { font-size: clamp(40px, 5vw, 64px); }
} @media (max-width: 1023px) {
.hp-warranty-app .hp-hero { padding: 72px 28px 64px; }
.hp-warranty-app .hp-help { padding: 72px 28px 80px; }
.hp-warranty-app .hp-help__head { grid-template-columns: 1fr; gap: 18px; margin-bottom: 36px; }
.hp-warranty-app .hp-help__sub { max-width: none; }
.hp-warranty-app .hp-help__grid { grid-template-columns: repeat(2, 1fr); gap: 16px; } .hp-warranty-app .hp-help__card:nth-child(3) { grid-column: span 2; }
.hp-warranty-app .hp-help__card:nth-child(3) .hp-help__visual { height: 220px; }
.hp-warranty-app .hp-result { padding: 56px 28px 80px; }
.hp-warranty-app .hp-status { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
.hp-warranty-app .hp-status__left { padding: 32px 28px; }
.hp-warranty-app .hp-status__right { padding: 32px 28px; }
.hp-warranty-app .hp-ring { width: 240px; height: 240px; }
.hp-warranty-app .hp-ring__num { font-size: 60px; }
.hp-warranty-app .hp-detail-grid { grid-template-columns: minmax(0, 280px) minmax(0, 1fr); }
.hp-warranty-app .hp-product-card { padding: 26px 22px; }
.hp-warranty-app .hp-details__row { grid-template-columns: 140px 1fr; padding: 14px 22px; }
.hp-warranty-app .hp-support { padding: 32px 28px; gap: 20px; }
} @media (max-width: 767px) { .hp-warranty-app .hp-hero { padding: 36px 22px 36px; }
.hp-warranty-app .hp-hero__eyebrow { font-size: 11px; margin-bottom: 14px; padding: 4px 11px; }
.hp-warranty-app .h-display { font-size: clamp(30px, 7vw, 42px); line-height: 1.06; }
.hp-warranty-app .hp-hero__lede { font-size: 14.5px; margin-top: 12px; line-height: 1.5; } .hp-warranty-app .hp-search {
flex-direction: column;
background: transparent;
border: 0;
box-shadow: none;
padding: 0;
gap: 8px;
margin-top: 20px;
max-width: 100%;
border-radius: 0;
}
.hp-warranty-app .hp-search:focus-within { box-shadow: none; }
.hp-warranty-app .hp-search__field {
width: 100%;
align-self: stretch;
background: var(--surface);
border: 1px solid var(--ink-7);
border-radius: 14px;
padding: 0 16px;
box-shadow: var(--sh-1);
height: 56px;
transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.hp-warranty-app .hp-search__field:focus-within {
border-color: var(--ink-2);
box-shadow: 0 0 0 4px rgba(15,16,20,0.06);
}
.hp-warranty-app .hp-search input[name="masp"] {
font-size: 16px !important; height: 54px;
line-height: 54px;
}
.hp-warranty-app .hp-search__btn {
width: 100%;
height: 52px !important;
min-height: 52px !important;
line-height: 52px !important;
border-radius: 14px !important;
font-size: 15px !important;
padding: 0 24px !important;
}
.hp-warranty-app .hp-search__hints {
justify-content: center; gap: 12px;
margin-top: 10px;
font-size: 12px;
} .hp-warranty-app .hp-help { padding: 36px 22px 40px; }
.hp-warranty-app .hp-help__head { grid-template-columns: 1fr; gap: 8px; margin-bottom: 18px; }
.hp-warranty-app .hp-help__head h2 { font-size: clamp(24px, 5.5vw, 32px); line-height: 1.15; }
.hp-warranty-app .hp-help__sub { font-size: 14px; max-width: none; }
.hp-warranty-app .hp-help__grid { grid-template-columns: 1fr; gap: 10px; }
.hp-warranty-app .hp-help__card { padding: 18px 18px 16px; }
.hp-warranty-app .hp-help__card:nth-child(3) { grid-column: auto; }
.hp-warranty-app .hp-help__visual { height: 160px; margin: -18px -18px 12px; }
.hp-warranty-app .hp-help__card h3 { margin-top: 8px; }
.hp-warranty-app .hp-help__card p { margin-top: 6px; line-height: 1.5; } .hp-warranty-app .hp-result { padding: 24px 14px 40px; }
.hp-warranty-app .hp-result__inner { padding-inline: 0; }
.hp-warranty-app .hp-result__header {
flex-direction: column; align-items: stretch; gap: 10px;
padding: 14px 18px 16px;
}
.hp-warranty-app .hp-result__actions { width: 100%; }
.hp-warranty-app .hp-result__actions .hp-icon-btn { width: 100%; justify-content: center; min-height: 42px; } .hp-warranty-app .hp-result__header { padding-bottom: 12px; }
.hp-warranty-app .hp-status { grid-template-columns: 1fr; margin-top: 14px; }
.hp-warranty-app .hp-status__left {
border-right: 0; border-bottom: 1px solid var(--ink-7);
padding: 18px 18px 16px;
gap: 14px;
}
.hp-warranty-app .hp-status__right { padding: 20px 18px; }
.hp-warranty-app .hp-status__headline { font-size: clamp(20px, 5vw, 26px); line-height: 1.22; margin-top: 6px; }
.hp-warranty-app .hp-status__note { font-size: 14px; margin-top: 6px; }
.hp-warranty-app .hp-status__meta {
grid-template-columns: 1fr 1fr; gap: 10px;
padding-top: 10px; margin-top: 4px;
}
.hp-warranty-app .hp-status__meta .cell { padding: 6px 0; } .hp-warranty-app .hp-ring { width: 75%; max-width: 280px; height: auto; aspect-ratio: 1 / 1; }
.hp-warranty-app .hp-ring__num { font-size: clamp(44px, 12vw, 64px); }
.hp-warranty-app .hp-detail-grid { grid-template-columns: 1fr; gap: 10px; margin-top: 14px; }
.hp-warranty-app .hp-product-card { padding: 18px 16px; }
.hp-warranty-app .hp-product-card__img { aspect-ratio: 16/10; max-height: 170px; }
.hp-warranty-app .hp-details__row {
grid-template-columns: 1fr; padding: 10px 16px; gap: 2px;
}
.hp-warranty-app .hp-details__row .lbl { font-size: 11px; letter-spacing: 0.06em; }
.hp-warranty-app .hp-details__row .val { font-size: 14px; word-break: break-word; }
.hp-warranty-app .hp-support {
grid-template-columns: 1fr; padding: 18px 18px; gap: 12px;
margin-top: 14px;
}
.hp-warranty-app .hp-support h3 { font-size: 18px; line-height: 1.3; }
.hp-warranty-app .hp-support p { font-size: 13.5px; margin-top: 4px; }
.hp-warranty-app .hp-support__ctas { flex-direction: column; width: 100%; gap: 8px; }
.hp-warranty-app .hp-support__cta {
width: 100%; justify-content: center;
min-height: 46px; font-size: 14.5px;
}
.hp-warranty-app .hp-config { padding: 16px 16px 14px; margin-top: 14px; }
.hp-warranty-app .hp-config__body { margin-top: 8px; }
} @media (max-width: 479px) { .hp-warranty-app .hp-hero__bg-grid { display: none; } .hp-warranty-app .hp-hero { padding: 28px 18px 30px; }
.hp-warranty-app .hp-hero__eyebrow { font-size: 10.5px; padding: 3px 10px; margin-bottom: 10px; }
.hp-warranty-app .h-display { font-size: clamp(26px, 8vw, 34px); line-height: 1.05; }
.hp-warranty-app .hp-hero__lede { font-size: 13.5px; line-height: 1.45; margin-top: 10px; } .hp-warranty-app .hp-search { margin-top: 16px; gap: 8px; }
.hp-warranty-app .hp-search__field { width: 100%; align-self: stretch; height: 50px; padding: 0 14px; border-radius: 12px; }
.hp-warranty-app .hp-search input[name="masp"] { height: 48px; line-height: 48px; font-size: 16px !important; }
.hp-warranty-app .hp-search__btn { height: 48px !important; min-height: 48px !important; line-height: 48px !important; border-radius: 12px !important; }
.hp-warranty-app .hp-search__hints { gap: 10px; flex-wrap: wrap; font-size: 11.5px; margin-top: 8px; }
.hp-warranty-app .hp-search__hint code { font-size: 11px; padding: 2px 5px; } .hp-warranty-app .hp-help { padding: 28px 18px 32px; }
.hp-warranty-app .hp-help__head { gap: 6px; margin-bottom: 14px; }
.hp-warranty-app .hp-help__head h2 { font-size: clamp(20px, 6vw, 26px); }
.hp-warranty-app .hp-help__sub { font-size: 13.5px; }
.hp-warranty-app .hp-help__grid { gap: 8px; }
.hp-warranty-app .hp-help__card { padding: 14px 16px 14px; border-radius: 18px; }
.hp-warranty-app .hp-help__visual { height: 140px; margin: -14px -16px 10px; }
.hp-warranty-app .hp-help__card h3 { font-size: 16px; margin-top: 6px; }
.hp-warranty-app .hp-help__card p { font-size: 13px; line-height: 1.48; margin-top: 4px; } .hp-warranty-app .hp-result { padding: 16px 10px 28px; }
.hp-warranty-app .hp-result__header { padding: 12px 14px 14px; gap: 8px; }
.hp-warranty-app .hp-result__header .ser-label { font-size: 11px; }
.hp-warranty-app .hp-result__header .ser { margin-top: 4px; }
.hp-warranty-app .hp-result__header .ser .code { font-size: 14.5px; word-break: break-all; }
.hp-warranty-app .hp-result__actions .hp-icon-btn { min-height: 40px; font-size: 13px; }
.hp-warranty-app .hp-result__header { padding-bottom: 10px; }
.hp-warranty-app .hp-status { margin-top: 10px; }
.hp-warranty-app .hp-status__badge { font-size: 11px; padding: 4px 10px; }
.hp-warranty-app .hp-status__left { padding: 14px 14px 12px; gap: 10px; }
.hp-warranty-app .hp-status__right { padding: 16px 14px; }
.hp-warranty-app .hp-status__headline { font-size: clamp(16px, 5vw, 20px); line-height: 1.2; margin-top: 4px; }
.hp-warranty-app .hp-status__headline .num { font-size: 1.2em; }
.hp-warranty-app .hp-status__note { font-size: 12.5px; line-height: 1.45; margin-top: 4px; }
.hp-warranty-app .hp-status__meta { grid-template-columns: 1fr 1fr; gap: 8px; padding-top: 8px; margin-top: 2px; }
.hp-warranty-app .hp-status__meta .cell { padding: 4px 0; }
.hp-warranty-app .hp-status__meta .lbl { font-size: 10.5px; }
.hp-warranty-app .hp-status__meta .val { font-size: 13.5px; }
.hp-warranty-app .hp-status__meta .val small { font-size: 10.5px; } .hp-warranty-app .hp-ring { width: 75%; max-width: 260px; height: auto; aspect-ratio: 1 / 1; }
.hp-warranty-app .hp-ring__num { font-size: clamp(36px, 13vw, 52px); }
.hp-warranty-app .hp-ring__unit { font-size: 11px; }
.hp-warranty-app .hp-ring__pct { font-size: 10.5px; }
.hp-warranty-app .hp-detail-grid { gap: 8px; margin-top: 10px; }
.hp-warranty-app .hp-product-card { padding: 14px 14px; border-radius: 18px; }
.hp-warranty-app .hp-product-card__img { max-height: 150px; aspect-ratio: 16/10; }
.hp-warranty-app .hp-product-card__tag,
.hp-warranty-app .hp-product-card__brand { font-size: 11px; }
.hp-warranty-app .hp-details__row { padding: 8px 14px; gap: 2px; }
.hp-warranty-app .hp-details__row .lbl { font-size: 10.5px; }
.hp-warranty-app .hp-details__row .val { font-size: 13.5px; }
.hp-warranty-app .hp-support { padding: 16px 16px; border-radius: 18px; gap: 10px; margin-top: 10px; }
.hp-warranty-app .hp-support h3 { font-size: 16px; line-height: 1.28; }
.hp-warranty-app .hp-support p { font-size: 12.5px; margin-top: 2px; }
.hp-warranty-app .hp-support__ctas { gap: 6px; }
.hp-warranty-app .hp-support__cta { min-height: 44px; font-size: 14px; }
.hp-warranty-app .hp-config { padding: 14px 14px 12px; margin-top: 10px; }
.hp-warranty-app .hp-config__title { font-size: 14px; }
.hp-warranty-app .hp-config__body { font-size: 13px; margin-top: 6px; }
.hp-warranty-app .hp-empty { padding: 22px 16px; }
.hp-warranty-app .hp-empty h4 { font-size: 17px; }
.hp-warranty-app .hp-empty p { font-size: 13px; margin-top: 4px; }
} @media (max-width: 319px) { .hp-warranty-app .hp-hero { padding: 22px 12px 24px; }
.hp-warranty-app .hp-hero__eyebrow { font-size: 10px; padding: 2px 8px; margin-bottom: 8px; }
.hp-warranty-app .h-display { font-size: clamp(20px, 9vw, 24px); line-height: 1.05; letter-spacing: -0.02em; }
.hp-warranty-app .hp-hero__lede { font-size: 12.5px; line-height: 1.42; margin-top: 8px; }
.hp-warranty-app .hp-search { margin-top: 12px; gap: 6px; }
.hp-warranty-app .hp-search__field { width: 100%; align-self: stretch; height: 46px; padding: 0 12px; gap: 8px; }
.hp-warranty-app .hp-search input[name="masp"] { height: 44px; line-height: 44px; font-size: 15px !important; }
.hp-warranty-app .hp-search__btn { height: 44px !important; min-height: 44px !important; line-height: 44px !important; font-size: 13.5px !important; }
.hp-warranty-app .hp-search__hints { font-size: 11px; gap: 8px; margin-top: 6px; }
.hp-warranty-app .hp-search__hint code { font-size: 10px; } .hp-warranty-app .hp-help { padding: 22px 12px 26px; }
.hp-warranty-app .hp-help__head { gap: 4px; margin-bottom: 10px; }
.hp-warranty-app .hp-help__head h2 { font-size: clamp(18px, 7vw, 22px); }
.hp-warranty-app .hp-help__sub { font-size: 12.5px; }
.hp-warranty-app .hp-help__grid { gap: 6px; }
.hp-warranty-app .hp-help__card { padding: 12px 12px 12px; border-radius: 14px; }
.hp-warranty-app .hp-help__visual { height: 120px; margin: -12px -12px 8px; }
.hp-warranty-app .hp-help__card h3 { font-size: 15px; margin-top: 4px; }
.hp-warranty-app .hp-help__card p { font-size: 12px; line-height: 1.42; margin-top: 4px; }
.hp-warranty-app .hp-help__num { font-size: 10px; padding: 2px 5px; top: 10px; right: 12px; } .hp-warranty-app .hp-result { padding: 14px 8px 24px; }
.hp-warranty-app .hp-result__header { padding: 10px 12px 10px; gap: 6px; }
.hp-warranty-app .hp-result__header .ser-label { font-size: 10.5px; }
.hp-warranty-app .hp-result__header .ser { margin-top: 2px; }
.hp-warranty-app .hp-result__header .ser .code { font-size: 13px; }
.hp-warranty-app .hp-result__actions .hp-icon-btn { min-height: 38px; font-size: 12.5px; }
.hp-warranty-app .hp-result__header { padding-bottom: 8px; }
.hp-warranty-app .hp-status { margin-top: 8px; }
.hp-warranty-app .hp-status__badge { font-size: 10.5px; padding: 3px 9px; }
.hp-warranty-app .hp-status__left { padding: 12px 12px 10px; gap: 8px; }
.hp-warranty-app .hp-status__right { padding: 14px 12px; }
.hp-warranty-app .hp-status__headline { font-size: 15px; line-height: 1.18; margin-top: 2px; }
.hp-warranty-app .hp-status__note { font-size: 12px; line-height: 1.4; margin-top: 3px; }
.hp-warranty-app .hp-status__meta { gap: 6px; padding-top: 6px; margin-top: 0; }
.hp-warranty-app .hp-status__meta .cell { padding: 2px 0; }
.hp-warranty-app .hp-status__meta .lbl { font-size: 10px; }
.hp-warranty-app .hp-status__meta .val { font-size: 12.5px; }
.hp-warranty-app .hp-status__meta .val small { font-size: 10px; } .hp-warranty-app .hp-ring { width: 75%; max-width: 220px; height: auto; aspect-ratio: 1 / 1; }
.hp-warranty-app .hp-ring__num { font-size: clamp(30px, 14vw, 42px); }
.hp-warranty-app .hp-ring__unit { font-size: 10px; }
.hp-warranty-app .hp-ring__pct { font-size: 9.5px; }
.hp-warranty-app .hp-detail-grid { gap: 6px; margin-top: 8px; }
.hp-warranty-app .hp-product-card { padding: 12px 12px; border-radius: 14px; }
.hp-warranty-app .hp-product-card__img { max-height: 130px; aspect-ratio: 16/10; }
.hp-warranty-app .hp-details__row { padding: 7px 12px; gap: 1px; }
.hp-warranty-app .hp-details__row .lbl { font-size: 10px; }
.hp-warranty-app .hp-details__row .val { font-size: 13px; }
.hp-warranty-app .hp-support { padding: 14px 12px; gap: 8px; border-radius: 14px; margin-top: 8px; }
.hp-warranty-app .hp-support h3 { font-size: 14px; line-height: 1.25; }
.hp-warranty-app .hp-support p { font-size: 12px; margin-top: 2px; }
.hp-warranty-app .hp-support__ctas { gap: 5px; }
.hp-warranty-app .hp-support__cta { min-height: 42px; font-size: 13px; }
.hp-warranty-app .hp-config { padding: 12px 12px 10px; margin-top: 8px; }
.hp-warranty-app .hp-config__title { font-size: 13px; }
.hp-warranty-app .hp-config__body { font-size: 12.5px; margin-top: 4px; } .hp-warranty-app .hp-sticker__serial .val,
.hp-warranty-app .hp-bios__row.hp-bios__row--hi span:last-child { font-size: 11px; }
.hp-warranty-app .hp-cmd__hi { font-size: 12px; }
} @media (hover: none) and (pointer: coarse) {
.hp-warranty-app button,
.hp-warranty-app .hp-icon-btn,
.hp-warranty-app .hp-support__cta,
.hp-warranty-app .hp-search__btn { touch-action: manipulation; min-height: 44px; }
.hp-warranty-app input[type="text"],
.hp-warranty-app input[type="search"],
.hp-warranty-app input[type="tel"] { font-size: 16px; } .hp-warranty-app .hp-help__card:hover { transform: none; box-shadow: none; }
} @supports (padding: max(0px)) {
.hp-warranty-app .hp-hero {
padding-left: max(18px, env(safe-area-inset-left));
padding-right: max(18px, env(safe-area-inset-right));
}
.hp-warranty-app .hp-help {
padding-left: max(18px, env(safe-area-inset-left));
padding-right: max(18px, env(safe-area-inset-right));
}
.hp-warranty-app .hp-result {
padding-left: max(12px, env(safe-area-inset-left));
padding-right: max(12px, env(safe-area-inset-right));
padding-bottom: max(60px, calc(60px + env(safe-area-inset-bottom)));
}
} @media (max-width: 932px) and (max-height: 500px) and (orientation: landscape) {
.hp-warranty-app .hp-hero { padding: 28px 32px 32px; }
.hp-warranty-app .h-display { font-size: clamp(24px, 4vw, 36px); }
.hp-warranty-app .hp-hero__lede { margin-top: 12px; font-size: 14px; }
.hp-warranty-app .hp-search { flex-direction: row; max-width: 600px; padding: 6px; margin-top: 20px; background: var(--surface); border: 1px solid var(--ink-7); border-radius: 999px; box-shadow: var(--sh-3); }
.hp-warranty-app .hp-search__field { background: transparent; border: 0; box-shadow: none; padding: 0 16px; height: auto; }
.hp-warranty-app .hp-search__btn { width: auto; }
}