:root{
  --paper:#F3F5F6; --ink:#15202B; --steel:#5A6A77; --line:#D3DADF;
  --tag:#F2C230; --tag-ink:#3A2E00; --white:#FFFFFF;
}
*{box-sizing:border-box;margin:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--paper);color:var(--ink);font:17px/1.6 "Public Sans",system-ui,-apple-system,Segoe UI,Roboto,sans-serif}
a{color:var(--ink)}
a:focus-visible,button:focus-visible{outline:3px solid var(--tag);outline-offset:3px}
.wrap{max-width:1040px;margin:0 auto;padding:0 24px}
header.site{display:flex;justify-content:space-between;align-items:center;padding:28px 0}
.logo{font-family:"Archivo",sans-serif;font-weight:800;font-stretch:125%;font-size:22px;text-decoration:none;letter-spacing:-.01em}
.logo span{display:inline-block;width:12px;height:12px;background:var(--tag);border-radius:3px;margin-right:8px;transform:translateY(-1px)}
nav a{margin-left:22px;color:var(--steel);text-decoration:none;font-size:15px}
nav a:hover{color:var(--ink)}
h1,h2{font-family:"Archivo",sans-serif;font-stretch:125%;letter-spacing:-.02em;line-height:1.05}
.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center;padding:56px 0 88px}
.hero h1{font-size:clamp(38px,6vw,66px);font-weight:800;margin-bottom:22px}
.hero p{font-size:19px;color:var(--steel);max-width:34ch;margin-bottom:30px}
.btn{display:inline-block;background:var(--ink);color:var(--white);padding:14px 22px;border-radius:10px;text-decoration:none;font-weight:600}
.btn:hover{background:#26384a}
/* the repair ticket */
.ticket{background:var(--white);border:1px solid var(--line);border-radius:14px;padding:26px 26px 22px;position:relative;box-shadow:0 18px 40px -24px rgba(21,32,43,.35)}
.ticket::before{content:"";position:absolute;top:-11px;left:34px;width:22px;height:22px;border-radius:50%;background:var(--paper);border:1px solid var(--line)}
.ticket .head{display:flex;justify-content:space-between;font-size:14px;color:var(--steel);border-bottom:1px dashed var(--line);padding-bottom:14px;margin-bottom:16px}
.ticket .device{font-family:"Archivo",sans-serif;font-stretch:112%;font-weight:700;font-size:22px;margin-bottom:4px}
.ticket .price{display:inline-block;background:var(--tag);color:var(--tag-ink);font-weight:700;padding:3px 10px;border-radius:6px;margin:6px 0 18px}
.ticket ol{list-style:none;padding:0}
.ticket li{display:grid;grid-template-columns:72px 1fr;gap:10px;padding:9px 0;border-top:1px solid var(--line);font-size:15px}
.ticket li time{color:var(--steel);font-variant-numeric:tabular-nums}
@media (prefers-reduced-motion:no-preference){
  .ticket li{opacity:0;animation:in .4s ease forwards}
  .ticket li:nth-child(1){animation-delay:.3s}.ticket li:nth-child(2){animation-delay:.9s}.ticket li:nth-child(3){animation-delay:1.5s}
  @keyframes in{to{opacity:1}}
}
.how{border-top:1px solid var(--line);padding:72px 0}
.how h2{font-size:clamp(28px,4vw,40px);margin-bottom:36px;max-width:20ch}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:36px;counter-reset:s}
.steps div{counter-increment:s}
.steps div::before{content:counter(s);display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--ink);color:var(--white);font-weight:700;font-size:14px;margin-bottom:14px}
.steps h3{font-size:18px;margin-bottom:6px}
.steps p{color:var(--steel);font-size:16px}
.proof{background:var(--ink);color:var(--white);border-radius:18px;padding:48px;margin-bottom:72px;display:flex;justify-content:space-between;align-items:center;gap:32px;flex-wrap:wrap}
.proof p{font-size:20px;max-width:40ch}
.proof a{color:var(--ink);background:var(--tag);padding:14px 22px;border-radius:10px;text-decoration:none;font-weight:700;white-space:nowrap}
footer{border-top:1px solid var(--line);padding:28px 0 48px;color:var(--steel);font-size:14px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px}
footer a{color:var(--steel);margin-left:18px}
/* legal pages */
.legal{max-width:70ch;padding:40px 0 80px}
.legal h1{font-size:clamp(32px,5vw,48px);margin-bottom:8px}
.legal .date{color:var(--steel);margin-bottom:36px}
.legal h2{font-size:22px;margin:36px 0 10px;font-stretch:112%}
.legal p,.legal li{margin-bottom:10px}
.legal ul{padding-left:22px}
@media (max-width:800px){
  .hero{grid-template-columns:1fr;gap:40px;padding-top:24px}
  .steps{grid-template-columns:1fr}
  .proof{padding:32px}
  nav a{margin-left:14px}
}