/* Old Friend — ThemeKnock */
:root{
  --paper:#F1F1EE; --panel:#fff; --ink:#14171A; --mid:#3C424A; --mute:#767C85;
  --line:#DFDFD9; --line2:#E9E9E4;
  --accent:#B4643C; --ok:#3F7D5C; --warn:#B23B2E;
  --deep:#0B211F; --mint:#98FDC5;
  --sans:'Schibsted Grotesk',system-ui,-apple-system,sans-serif;
  --disp:'Newsreader',Georgia,serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:17px;
  line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased;
  font-optical-sizing:auto;font-feature-settings:"cv05" 1}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2{font-family:var(--disp);font-weight:500;letter-spacing:-.015em;line-height:1.04;
  font-optical-sizing:auto}
.wrap{width:min(1180px,100% - 44px);margin-inline:auto}
#print{display:none}

.bar{background:var(--deep);color:#EAF2EE;padding:15px 0}
.bar__in{display:flex;align-items:center;justify-content:space-between;gap:20px}
.bar__in>*{min-width:0}
.bar img{height:19px;width:auto}
.bar span{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#7E968D;text-align:right}

/* hero */
.hero{position:relative;isolation:isolate;color:#fff;background:#1A1D1B}
.hero__img{position:absolute;inset:0;z-index:-2}
.hero__img img{width:100%;height:100%;object-fit:cover;object-position:62% 42%}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(94deg,rgba(16,19,18,.93) 0%,rgba(16,19,18,.80) 44%,rgba(16,19,18,.22) 100%)}
.hero__in{padding:120px 0 108px;max-width:790px}
.brand{font-family:var(--sans);font-size:12px;font-weight:500;letter-spacing:.28em;
  text-transform:uppercase;color:#DCBBA1;margin-bottom:26px}
.hero h1{font-size:clamp(40px,6.1vw,72px);font-weight:600;margin-bottom:24px;text-wrap:balance}
.sub{font-size:clamp(16.5px,1.6vw,19px);color:#CFD5D0;max-width:53ch;line-height:1.55}

section{padding:88px 0}
.h2{font-size:clamp(29px,3.8vw,46px);max-width:19ch;margin-bottom:16px;text-wrap:balance}
.lede{font-size:17.5px;color:#5B616A;max-width:56ch}

/* stage */
.stage{margin-top:44px;display:grid;grid-template-columns:1fr 300px;gap:56px;align-items:start}
.stage>*{min-width:0}
.phone{width:min(392px,100%);margin-inline:auto;background:#101315;border-radius:42px;padding:11px;
  box-shadow:0 34px 70px -26px rgba(20,23,26,.5),0 2px 0 rgba(255,255,255,.5) inset}
.screen{background:var(--panel);border-radius:32px;overflow:hidden}

.top{display:flex;align-items:center;gap:12px;padding:20px 18px 16px;border-bottom:1px solid var(--line2)}
.top>*{min-width:0}
.pfp{width:46px;height:46px;border-radius:50%;object-fit:cover;flex:0 0 auto}
.who{flex:1}
.who b{display:block;font-family:var(--disp);font-size:22px;font-weight:600;line-height:1.15;
  letter-spacing:-.01em}
.who i{font-style:normal;font-size:13px;color:var(--mute)}
.live{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--ok);
  background:#EAF3EE;padding:5px 9px;border-radius:20px;white-space:nowrap;flex:0 0 auto}
.dot{width:7px;height:7px;border-radius:50%;background:var(--ok);animation:p 2s infinite}
@keyframes p{0%,100%{opacity:1}50%{opacity:.25}}

.tabs{display:flex;border-bottom:1px solid var(--line2)}
.tabs button{flex:1;font:500 14px var(--sans);padding:14px 6px;border:0;cursor:pointer;
  background:transparent;color:var(--mute);border-bottom:2px solid transparent}
.tabs button[aria-selected=true]{color:var(--ink);border-bottom-color:var(--accent)}

.panes{min-height:430px}
.pane{display:none;padding:20px 18px 26px}
.pane.on{display:block}
.blk+.blk{margin-top:22px;padding-top:22px;border-top:1px solid var(--line2)}
.blk label{display:block;font-size:11.5px;font-weight:500;letter-spacing:.11em;
  text-transform:uppercase;color:var(--mute);margin-bottom:10px}
.read{display:flex;align-items:baseline;gap:10px;margin-bottom:6px}
.read b{font-family:var(--disp);font-size:52px;font-weight:500;line-height:.9}
.read i{font-style:normal;font-size:14.5px;color:var(--mid)}

input[type=range]{width:100%;-webkit-appearance:none;appearance:none;background:transparent;margin:6px 0}
input[type=range]::-webkit-slider-runnable-track{height:8px;border-radius:4px;
  background:linear-gradient(90deg,#5C8F72,#D8B45E 55%,#BE5B41)}
input[type=range]::-moz-range-track{height:8px;border-radius:4px;
  background:linear-gradient(90deg,#5C8F72,#D8B45E 55%,#BE5B41)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:28px;height:28px;border-radius:50%;
  background:#fff;border:2px solid var(--ink);margin-top:-10px;cursor:grab;
  box-shadow:0 2px 7px rgba(0,0,0,.22)}
input[type=range]::-moz-range-thumb{width:26px;height:26px;border-radius:50%;background:#fff;
  border:2px solid var(--ink);cursor:grab}
.ends{display:flex;justify-content:space-between;font-size:11.5px;color:var(--mute);margin-top:2px}
.by{font-size:13px;color:var(--mute);margin-top:12px;line-height:1.45}

#spark{width:100%;height:74px;display:block}
.row{display:flex;align-items:center;justify-content:space-between;gap:16px}
.row>*{min-width:0}
.row .by{margin-top:2px}
.score b{font-family:var(--disp);font-size:36px;font-weight:500}
.score i{font-style:normal;font-size:14px;color:var(--mute)}

/* meds */
.med{border:1px solid var(--line);border-radius:12px;padding:15px 16px}
.med+.med{margin-top:11px}
.med__t{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.med__t>*{min-width:0}
.med__t b{font-size:16px;font-weight:600}
.med__t span{font-size:12px;color:var(--mute);white-space:nowrap}
.med p{font-size:13px;color:var(--mute);margin-top:3px}
.med button{margin-top:13px;width:100%;font:600 14.5px var(--sans);padding:12px;border:0;cursor:pointer;
  background:var(--ink);color:#fff;border-radius:9px}
.med.done{background:#F5F8F6;border-color:#CFE0D5}
.med.done .med__t b{color:var(--ok)}
.med.done button{background:#E4EDE7;color:#5C7A6A;cursor:not-allowed}
.med.hit{border-color:#E4C0B7;background:#FBF2F0}
.med.hit p{color:var(--warn)}
.note{font-size:12.5px;color:var(--mute);margin-top:16px;line-height:1.5}

/* report */
.rep{border:1px solid var(--line);border-radius:12px;overflow:hidden}
.rep__h{background:#F6F6F3;padding:13px 15px;border-bottom:1px solid var(--line);
  display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}
.rep__h b{font-family:var(--disp);font-size:18px;font-weight:600;letter-spacing:-.01em}
.rep__h i{font-style:normal;font-size:12px;color:var(--mute)}
.rep__g{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line2)}
.rep__g div{background:#fff;padding:14px 15px}
.rep__g b{display:block;font-family:var(--disp);font-size:30px;font-weight:500;line-height:1.1}
.rep__g span{font-size:11px;font-weight:500;color:var(--mute);letter-spacing:.09em;text-transform:uppercase}
.rep__s{padding:13px 15px;border-top:1px solid var(--line2);font-size:13px;color:var(--mid);line-height:1.7}
.rep__s u{text-decoration:none;color:var(--mute)}
.cta{margin-top:16px;width:100%;font:600 15px var(--sans);padding:14px;border:0;cursor:pointer;
  background:var(--accent);color:#fff;border-radius:9px}

/* pairing */
.pair{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:24px 22px}
.pair h3{font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);font-weight:500}
.code{font-family:var(--disp);font-size:46px;font-weight:500;letter-spacing:.1em;margin:8px 0 14px}
.pair p{font-size:14px;color:var(--mid);line-height:1.55}
.pair p b{font-weight:600;word-break:break-all}
.pairbox{display:flex;gap:8px;margin-top:16px}
.pairbox>*{min-width:0}
.pairbox input{flex:1;font:500 15px var(--sans);letter-spacing:.1em;text-transform:uppercase;
  padding:11px 12px;border:1px solid var(--line);border-radius:8px;background:var(--paper);color:var(--ink)}
.pairbox button{font:600 14px var(--sans);padding:11px 16px;border:0;cursor:pointer;
  background:var(--ink);color:#fff;border-radius:8px}
.txt{margin-top:14px;background:none;border:0;cursor:pointer;font:400 13px var(--sans);
  color:var(--mute);text-decoration:underline;padding:0}

/* band */
.band{background:#E7E7E2}
.band__in{display:grid;grid-template-columns:1fr 1.05fr;gap:60px;align-items:center}
.band__in>*{min-width:0}
.band__t p{color:#4E545C;margin-top:14px;max-width:46ch}
.band__t .cta{width:auto;padding:14px 26px;margin-top:24px}
.band__i{display:grid;grid-template-columns:1.35fr 1fr;gap:14px;align-items:end}
.band__i img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:6px}
.band__i .sm{aspect-ratio:1/1}

/* close */
.close{background:var(--deep);color:#EAF2EE;padding:82px 0 64px}
.close .h2{color:#fff}
.cnt{display:grid;grid-template-columns:1.25fr 1fr;gap:54px;align-items:start}
.cnt>*{min-width:0}
.cnt p{color:#A9BDB5;margin-top:15px}
.proof{list-style:none}
.proof li{border-top:1px solid #1D3733;padding:13px 0}
.proof a,.proof b{font-size:14.5px;font-weight:500;color:var(--mint);text-decoration:none;word-break:break-word}
.proof a:hover{text-decoration:underline}
.proof i{font-style:normal;display:block;font-size:14px;color:#8FA79F;margin-top:4px}
.sig{margin-top:44px;border-top:1px solid #1D3733;padding-top:20px;font-size:12px;color:#6E877F;
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

@media (max-width:1000px){
  .stage{grid-template-columns:1fr;gap:32px}
  .pair{max-width:392px;margin-inline:auto}
  .band__in,.cnt{grid-template-columns:1fr;gap:34px}
}
@media (max-width:760px){
  section{padding:60px 0}
  .wrap{width:min(1180px,100% - 30px)}
  .hero__in{padding:86px 0 76px}
  .hero::after{background:linear-gradient(180deg,rgba(16,19,18,.62),rgba(16,19,18,.94))}
  .phone{padding:0;border-radius:20px;box-shadow:0 20px 44px -22px rgba(20,23,26,.42)}
  .screen{border-radius:20px}
  .band__t .cta{width:100%}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* print: only the vet report */
@media print{
  body{background:#fff}
  body>*{display:none!important}
  #print{display:block!important;padding:0;color:#000;font-size:12pt}
  #print h1{font-family:var(--disp);font-size:22pt;margin-bottom:4pt}
  #print .m{color:#555;font-size:10pt;margin-bottom:18pt}
  #print table{width:100%;border-collapse:collapse;margin-bottom:18pt}
  #print th,#print td{text-align:left;padding:6pt 4pt;border-bottom:1px solid #ccc;font-size:10.5pt}
  #print th{font-size:8.5pt;letter-spacing:.08em;text-transform:uppercase;color:#555}
  #print h2{font-family:var(--disp);font-size:13pt;margin:14pt 0 6pt}
}