/* Five Star Diary - design system (marketing site + shared components)
   "Probe on steel": brushed stainless steel grounds, probe-LCD readings in Red Hat Mono, azure buttons and one
   freezer-to-hot temperature band (blue → green → amber → red) used as the divider and as the scale under readings.
   Red Hat Mono (H1 + every reading) / Red Hat Display (H2, H3) / Red Hat Text (body). */
:root{
  --blue:#1F6FEB; --blue-600:#1A5FD0; --blue-700:#144BA8; --blue-50:#EAF1FD; --blue-100:#D3E2FB;
  --amber:#F2A900; --yellow:#F2A900; --yellow-50:#FDF3D6; --yellow-700:#7A5200;  /* amber = keep an eye / re-check */
  --rating-yellow:#FFC629;                                                           /* only inside rating illustrations */
  --ink:#0F1B2D; --ink-2:#2A3A52; --muted:#556579; --line:#CDD5DE; --white:#fff;
  --ground:#EEF2F5; --plate:#E3E8EE; --steel:#E3E8EE; --steel-2:#F5F7F9; --steel-3:#D3DAE2;
  --lcd:#0F1B2D; --lcd-2:#16253B; --lcd-green:#2BB673; --lcd-dim:#7F93AA;
  --tomato:#E5484D; --tomato-700:#B42328; --tomato-50:#FDECEC;
  --mint:#2BB673; --mint-700:#146C43; --mint-50:#E4F6EC;
  --band:linear-gradient(90deg,#1F6FEB 0%,#1F6FEB 12%,#2BB673 30%,#2BB673 52%,#F2A900 68%,#F2A900 78%,#E5484D 92%,#E5484D 100%);
  --brushed:repeating-linear-gradient(90deg,rgba(15,27,45,.03) 0 1px,transparent 1px 3px),
            repeating-linear-gradient(90deg,rgba(255,255,255,.22) 0 1px,transparent 1px 7px);
  --radius:12px; --radius-sm:8px; --radius-lg:16px;
  --plate-bg:linear-gradient(180deg,#FBFCFD,#F1F4F7);
  --shadow:0 1px 0 rgba(255,255,255,.9) inset,0 1px 2px rgba(15,27,45,.08),0 10px 24px -16px rgba(15,27,45,.28);
  --shadow-lg:0 1px 0 rgba(255,255,255,.9) inset,0 2px 6px rgba(15,27,45,.07),0 30px 60px -28px rgba(15,27,45,.38);
  --display:"Red Hat Display",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --text:"Red Hat Text",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --mono:"Red Hat Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --ease:cubic-bezier(.2,.8,.2,1);
  /* sitekit component theme */
  --sk-bg:#fff; --sk-surface:#fff; --sk-text:var(--ink); --sk-muted:var(--muted); --sk-line:var(--line);
  --sk-accent:var(--blue); --sk-accent-ink:#fff; --sk-radius:8px; --sk-font-display:var(--display);
  --sk-danger:var(--tomato-700); --sk-success:var(--mint-700);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:84px}
body{margin:0;font-family:var(--text);font-size:17px;line-height:1.6;color:var(--ink);background:var(--ground);background-image:var(--brushed);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
img,svg{max-width:100%;height:auto}
a{color:var(--blue-600);text-underline-offset:3px}
a:hover{color:var(--blue-700)}
h1,h2,h3,h4{font-family:var(--display);line-height:1.08;letter-spacing:-.02em;margin:0 0 .5em;color:var(--ink);text-wrap:balance}
h1{font-family:var(--mono);font-size:clamp(36px,5.4vw,68px);font-weight:700;letter-spacing:-.05em;word-spacing:-.16em;line-height:1.02}
h2{font-size:clamp(30px,4vw,48px);font-weight:900;letter-spacing:-.03em}
h3{font-size:clamp(19px,2vw,23px);font-weight:800}
p{margin:0 0 1em}
::selection{background:var(--blue-100);color:var(--ink)}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:4px}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:#fff;padding:10px 14px;border-radius:8px;z-index:100}
.skip:focus{left:12px}
.wrap{max-width:1200px;margin:0 auto;padding:0 20px}
.narrow{max-width:820px}
.section{padding:clamp(64px,9vw,120px) 0}
.section.tight{padding:clamp(48px,6vw,80px) 0}
.lead{font-size:clamp(18px,1.6vw,21px);line-height:1.55;color:var(--ink-2)}
.muted{color:var(--muted)}
.mono{font-family:var(--mono)}
.center{text-align:center}
.hl{font-family:var(--mono);font-weight:700;background:var(--lcd);color:var(--lcd-green);padding:0 .14em;border-radius:.12em}

/* the temperature band: freezer → in range → hot hold / keep an eye → out of range */
.tband{height:6px;background:var(--band)}
.scale{height:6px;border-radius:3px;background:var(--band);position:relative}

/* eyebrow = probe-LCD chip */
.eyebrow,.lcd-chip{display:inline-flex;align-items:center;gap:9px;font:500 12.5px/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;
  color:var(--lcd-green);background:var(--lcd);padding:6px 12px 6px 10px;border-radius:6px;margin:0 0 20px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06),0 1px 0 rgba(255,255,255,.7)}
p.eyebrow,.card p.eyebrow,.split-copy p.eyebrow{color:var(--lcd-green)}
.eyebrow .dot,.lcd-chip .dot,.led{width:7px;height:7px;border-radius:50%;background:var(--lcd-green);box-shadow:0 0 0 3px rgba(43,182,115,.18),0 0 8px rgba(43,182,115,.8);flex:none}
.center .eyebrow,.eyebrow[style*="justify-content:center"]{margin-left:auto;margin-right:auto}
/* the brand's bullet: a little probe dial */
.dial-b{display:inline-block;width:14px;height:14px;flex:none;vertical-align:-2px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Ccircle cx='7' cy='7' r='5.4' fill='%23fff' stroke='%231F6FEB' stroke-width='2.2'/%3E%3Cpath d='M7 7l2.4-2.6' stroke='%230F1B2D' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat}

/* buttons: 8px azure slabs, 48px tall, Red Hat Display 700 */
.btn{--b:var(--blue);display:inline-flex;align-items:center;justify-content:center;gap:10px;font:700 17px/1 var(--display);letter-spacing:-.005em;
  min-height:48px;padding:0 22px;border-radius:8px;border:1.5px solid var(--b);background:var(--b);color:#fff;text-decoration:none;cursor:pointer;
  transition:background .16s,border-color .16s,box-shadow .16s,transform .16s var(--ease);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 1px 0 rgba(15,27,45,.25),0 8px 18px -12px rgba(31,111,235,.9);white-space:nowrap}
.btn:hover{color:#fff;background:var(--blue-600);border-color:var(--blue-600);transform:translateY(-1px)}
.btn:active{transform:translateY(1px);box-shadow:inset 0 2px 4px rgba(15,27,45,.25)}
.btn svg{width:18px;height:18px}
.btn-sm{min-height:40px;padding:0 15px;font-size:15px}
.btn-lg{min-height:56px;padding:0 28px;font-size:18px}
.btn-ghost{background:rgba(255,255,255,.55);color:var(--ink);border-color:#AEB9C6;box-shadow:none}
.btn-ghost:hover{background:#fff;color:var(--ink);border-color:var(--ink-2)}
.btn-dark,.btn-yellow{background:var(--ink);border-color:var(--ink);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 1px 0 rgba(0,0,0,.3)}
.btn-dark:hover,.btn-yellow:hover{background:#1c2c45;border-color:#1c2c45;color:#fff}
.btn-white{background:#fff;border-color:#fff;color:var(--ink);box-shadow:0 1px 0 rgba(15,27,45,.2)}
.btn-white:hover{background:var(--steel-2);border-color:var(--steel-2);color:var(--ink)}
.btn-block{width:100%}
.btn[disabled]{opacity:.55;pointer-events:none}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.micro{font-size:14.5px;color:var(--muted);margin-top:16px;text-wrap:pretty}
.micro .dial-b{margin-right:7px}
.micro b{color:var(--ink-2)}

/* header */
.site-header{position:sticky;top:0;z-index:50;background:rgba(238,242,245,.88);backdrop-filter:saturate(1.4) blur(14px);
  -webkit-backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid transparent;transition:border-color .2s,box-shadow .2s}
.site-header.scrolled{border-color:var(--line);box-shadow:0 8px 24px -20px rgba(15,27,45,.45)}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:72px;gap:16px}
.logo img{display:block;height:36px;width:auto}
.nav{display:flex;align-items:center;gap:26px}
.nav a{font:600 15px/1 var(--text);color:var(--ink-2);text-decoration:none}
.nav a:hover,.nav a[aria-current]{color:var(--blue-600)}
.nav a[aria-current]:not(.btn){text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:8px}
.nav a.btn{color:#fff}
.nav-split{width:1px;height:24px;background:var(--line)}
/* mobile menu button: a brushed-steel readout plate (two corner screws) with "MENU" in an LCD window.
   The LED is dark while the menu is shut and lights up green when it's open. 44px tall, named by aria-label. */
.nav-toggle{display:none;position:relative;height:44px;min-width:44px;padding:0 11px;margin:0;cursor:pointer;place-items:center;
  border:1px solid #AEB9C6;border-radius:8px;background:var(--brushed),linear-gradient(180deg,#FBFCFD,#E3E8EE);
  box-shadow:inset 0 1px 0 #fff,0 1px 2px rgba(15,27,45,.12);-webkit-tap-highlight-color:transparent;transition:border-color .16s,box-shadow .16s}
.nav-toggle::before,.nav-toggle::after{content:"";position:absolute;top:50%;width:4px;height:4px;margin-top:-2px;border-radius:50%;
  background:radial-gradient(circle at 35% 35%,#fff 0,#A3AEBB 75%);box-shadow:0 0 0 .5px rgba(15,27,45,.4)}
.nav-toggle::before{left:4px}
.nav-toggle::after{right:4px}
.nav-toggle .readout{display:inline-flex;align-items:center;gap:7px;height:28px;padding:0 8px 0 9px;border-radius:5px;background:var(--lcd);
  font:600 12px/1 var(--mono);letter-spacing:.14em;color:var(--lcd-green);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06),inset 0 7px 12px -8px rgba(0,0,0,.85)}
.nav-toggle .led{width:6px;height:6px;background:#2A4A40;box-shadow:inset 0 0 0 1px rgba(0,0,0,.3);transition:background .2s,box-shadow .2s}
.nav-toggle:hover{border-color:var(--ink-2)}
.nav-toggle:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:8px}
.nav-toggle[aria-expanded=true]{background:var(--brushed),linear-gradient(180deg,#E3E8EE,#F1F4F7);box-shadow:inset 0 2px 4px rgba(15,27,45,.16)}
.nav-toggle[aria-expanded=true] .led{background:var(--lcd-green);box-shadow:0 0 0 3px rgba(43,182,115,.18),0 0 8px rgba(43,182,115,.8)}
@media (max-width:1080px){
  .nav-toggle{display:grid}
  .nav{position:fixed;inset:72px 0 auto 0;flex-direction:column;align-items:stretch;gap:0;background:var(--ground);background-image:var(--brushed);padding:8px 20px 24px;
    border-bottom:1px solid var(--line);box-shadow:0 24px 40px -24px rgba(15,27,45,.35);transform:translateY(-8px);opacity:0;visibility:hidden;
    transition:opacity .2s,transform .2s,visibility .2s}
  .nav.open{opacity:1;transform:none;visibility:visible}
  .nav a{padding:16px 2px;font-size:18px;border-bottom:1px solid var(--line)}
  .nav a[aria-current]:not(.btn){text-decoration:none;color:var(--blue-600)}
  .nav a.btn{margin-top:16px;border-bottom:0;min-height:52px}
  .nav-split{display:none}
}

/* footer: brushed steel, the band along the top */
.site-footer{background:var(--plate);background-image:var(--brushed);color:var(--ink-2);padding:0 0 40px;margin-top:0;position:relative}
.site-footer::before{content:"";display:block;height:6px;background:var(--band);margin-bottom:64px}
.site-footer a{color:var(--ink);text-decoration:none}
.site-footer a:hover{color:var(--blue-600);text-decoration:underline}
.foot-grid{display:grid;grid-template-columns:1.6fr repeat(4,1fr);gap:36px}
.foot-grid h2{font:500 12px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:6px 0 16px}
.foot-grid nav a{display:block;padding:5px 0;font-size:15px}
.foot-brand p{font-size:15px;line-height:1.6;margin:18px 0;max-width:380px}
.foot-brand img{height:38px;width:auto}
.foot-sub{display:flex;flex-wrap:wrap;gap:8px;max-width:400px}
.foot-sub input{flex:1;min-width:0;font:inherit;font-size:15px;padding:0 14px;min-height:40px;border-radius:8px;border:1.5px solid #B9C3CF;background:#fff;color:var(--ink)}
.foot-sub input::placeholder{color:#6A798C}
.foot-sub input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(31,111,235,.2)}
.foot-sub .sk-email-hint,.foot-sub .sk-email-notice{flex-basis:100%;margin-top:2px}
.foot-sub-msg{flex-basis:100%;font-size:14px;margin:4px 0 0;min-height:1em}
.foot-brand .foot-sub-note{flex-basis:100%;font-size:13px;line-height:1.5;margin:2px 0 0;color:var(--muted)}
.foot-brand .foot-sub-note a{color:var(--ink-2);text-decoration:underline}
.legal-line{border-top:1px solid var(--steel-3);margin:48px 0 0;padding-top:24px;font-size:13px;color:var(--muted);line-height:1.6}
.legal-line a{text-decoration:underline}
@media (max-width:900px){.foot-grid{grid-template-columns:1fr 1fr}.foot-brand{grid-column:1/-1}}

/* status chips */
.chip{display:inline-flex;align-items:center;gap:6px;font:700 13px/1 var(--text);padding:6px 10px;border-radius:6px;white-space:nowrap;background:var(--steel);color:var(--ink-2)}
.chip svg{width:14px;height:14px}
.chip.ok{background:var(--mint-50);color:var(--mint-700)}
.chip.warn{background:var(--yellow-50);color:var(--yellow-700)}
.chip.bad{background:var(--tomato-50);color:var(--tomato-700)}
.chip.blue{background:var(--blue-50);color:var(--blue-700)}
.chip.ink{background:var(--ink);color:#fff}
.tag-example{display:inline-flex;align-items:center;gap:6px;font:500 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;
  background:var(--lcd);color:#fff;padding:6px 9px;border-radius:5px}

/* ---------------------------------------------------------------- hero: the fridge door and the probe */
.hero{position:relative;padding:clamp(28px,5vw,72px) 0 clamp(56px,7vw,88px);overflow:hidden}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:6px;background:var(--band)}
.hero-grid{display:grid;grid-template-columns:1fr 1.02fr;gap:clamp(24px,4vw,56px);align-items:center}
.hero h1{margin-bottom:24px;font-size:clamp(44px,6.2vw,84px)}
.five{display:inline-block;font-family:var(--mono);background:var(--lcd);color:var(--lcd-green);padding:0 .1em;border-radius:.1em;line-height:1.02;
  box-shadow:inset 0 0 0 .03em rgba(255,255,255,.08);text-shadow:0 0 .18em rgba(43,182,115,.55)}
.hero .lead{max-width:540px;margin-bottom:30px}
.hero-art{position:relative;width:100%;max-width:640px;justify-self:end}
.hero-art svg{width:100%;height:auto;display:block;overflow:visible}
.hero-art .tag-example{position:absolute;top:1.5%;left:1.5%;z-index:2}
.hero-caption{margin:12px 0 0;text-align:center;font-size:13px;color:var(--muted)}
@media (max-width:960px){.hero-grid{grid-template-columns:1fr}.hero-art{justify-self:center;max-width:560px}}

/* ---------------------------------------------------------------- readings: stats as probe readouts on steel */
.readings{padding:clamp(56px,7vw,96px) 0;position:relative}
.readings h2{max-width:780px}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:36px}
.plate,.stat{position:relative;background:var(--plate-bg);border:1px solid var(--steel-3);border-radius:var(--radius);box-shadow:var(--shadow)}
.screws{background-image:radial-gradient(circle at 12px 12px,#AEB8C4 0 2.5px,#E6EBF0 3px,transparent 3.5px),radial-gradient(circle at calc(100% - 12px) 12px,#AEB8C4 0 2.5px,#E6EBF0 3px,transparent 3.5px),
  radial-gradient(circle at 12px calc(100% - 12px),#AEB8C4 0 2.5px,#E6EBF0 3px,transparent 3.5px),radial-gradient(circle at calc(100% - 12px) calc(100% - 12px),#AEB8C4 0 2.5px,#E6EBF0 3px,transparent 3.5px),var(--plate-bg)}
.stat{padding:28px 28px 26px}
.stat .stat-l{font:500 12px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:0 0 16px}
.stat .n{font:700 clamp(40px,4.6vw,60px)/1 var(--mono);letter-spacing:-.05em;color:var(--ink);margin:0 0 16px;font-variant-numeric:tabular-nums}
.stat .n small{font-size:.45em;letter-spacing:-.02em;color:var(--muted)}
.stat .scale{margin:0 0 16px}
.stat p:last-child{margin:0;color:var(--ink-2);font-size:16px}
.source{font-size:13px;color:var(--muted);margin-top:22px}
.source a{color:var(--ink-2)}
@media (max-width:820px){.stats{grid-template-columns:1fr}}

/* the giant reading: a mono 3.4°C on brushed steel above the fridge scale */
.giant{padding:clamp(56px,7vw,100px) 0 clamp(56px,7vw,96px);overflow:hidden;position:relative}
.giant-n{font:700 clamp(104px,23vw,340px)/.84 var(--mono);letter-spacing:-.075em;margin:8px 0 0 -.04em;color:var(--ink);
  text-shadow:0 2px 0 #fff,0 -1px 0 rgba(15,27,45,.2);white-space:nowrap}
.giant-scale{position:relative;margin:clamp(22px,3vw,36px) 0 0;padding-bottom:58px}
.giant-scale .scale{height:14px;border-radius:7px;background:linear-gradient(90deg,#1F6FEB 0 14.2%,#2BB673 14.2% 50%,#F2A900 50% 71.5%,#E5484D 71.5% 100%)}
.giant-scale .mk{position:absolute;top:-26px;left:92%;width:0;height:0;margin-left:-12px;border-left:12px solid transparent;border-right:12px solid transparent;border-top:18px solid var(--ink);
  transition:left 1.6s var(--ease) .35s}
.giant-scale.in .mk,.no-js .giant-scale .mk{left:38.6%}
.giant-scale .tk{position:absolute;top:22px;transform:translateX(-50%);font:500 13px/1 var(--mono);color:var(--ink-2)}
.giant-scale .tk::before{content:"";position:absolute;left:50%;top:-10px;width:2px;height:7px;background:var(--ink-2);margin-left:-1px}
.giant-scale .zones{position:absolute;left:0;right:0;top:42px;display:grid;grid-template-columns:14.2% 35.8% 21.5% 28.5%;font:500 11.5px/1.2 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.giant-scale .zones span{padding:0 8px;text-align:center}
.giant-c{max-width:640px;font-size:clamp(17px,1.5vw,20px);color:var(--ink-2);margin:6px 0 0}
@media (prefers-reduced-motion:reduce){.giant-scale .mk{transition:none;left:38.6%}}
@media (max-width:640px){.giant-scale .zones{font-size:9.5px;letter-spacing:.02em}.giant-scale .zones span{padding:0 2px}.giant-scale{padding-bottom:70px;margin-top:38px}}

/* steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:44px}
.step{position:relative;background:var(--plate-bg);border:1px solid var(--steel-3);border-radius:var(--radius);padding:28px;box-shadow:var(--shadow);
  transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.step:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.step .num{position:absolute;top:24px;right:24px;font:500 12px/1 var(--mono);letter-spacing:.1em;color:var(--lcd-green);background:var(--lcd);padding:7px 9px;border-radius:5px}
.step .num::before{content:"STEP 0"}
.step p{color:var(--ink-2);margin:0}
.step .art{margin:0 0 20px}
.step .big-ic{width:56px;height:56px;padding:13px;border-radius:8px;background:#fff;border:1px solid var(--steel-3);color:var(--blue);box-sizing:border-box;stroke-width:2}
@media (max-width:880px){.steps{grid-template-columns:1fr}}

/* split feature rows */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,88px);align-items:center}
.split.rev .split-copy{order:2}
.split-copy ul{list-style:none;padding:0;margin:22px 0 0}
.split-copy li{position:relative;padding:0 0 12px 30px;color:var(--ink-2)}
.split-copy li::before{content:"";position:absolute;left:0;top:5px;width:16px;height:16px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Ccircle cx='7' cy='7' r='5.4' fill='%23fff' stroke='%231F6FEB' stroke-width='2.2'/%3E%3Cpath d='M7 7l2.4-2.6' stroke='%230F1B2D' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat}
.split-copy li b{color:var(--ink)}
@media (max-width:900px){.split{grid-template-columns:1fr}.split.rev .split-copy{order:0}}
.bg-steel{background:var(--plate);background-image:var(--brushed)}
.bg-blue{background:var(--plate);background-image:var(--brushed)}
.bg-ink{background:var(--ink);color:#fff}
.bg-ink h2,.bg-ink h3{color:#fff}
.band-top{position:relative}
.band-top::before{content:"";position:absolute;left:0;right:0;top:0;height:6px;background:var(--band)}

/* phone mockup (real staff screens) */
.phone{position:relative;width:min(330px,100%);margin:0 auto;border-radius:44px;background:var(--ink);padding:12px;box-shadow:var(--shadow-lg),inset 0 0 0 2px #2A3A52}
.phone::before{content:"";position:absolute;top:22px;left:50%;transform:translateX(-50%);width:90px;height:24px;border-radius:14px;background:var(--ink);z-index:3}
.phone-screen{position:relative;border-radius:34px;overflow:hidden;background:var(--steel-2);min-height:600px;font-family:var(--text)}
.phone-stage{position:relative;padding:20px 0}
.phone-stage::before{content:"";position:absolute;left:8%;right:8%;bottom:0;height:6px;border-radius:3px;background:var(--band);opacity:.9}
.mock-top{background:var(--blue);color:#fff;padding:54px 18px 18px}
.mock-top small{display:block;font-size:12px;opacity:.85;font-weight:600;letter-spacing:.02em}
.mock-top b{display:block;font:800 20px/1.2 var(--display);margin-top:4px}
.mock-body{padding:14px}
.mock-card{background:#fff;border-radius:14px;padding:12px 14px;margin-bottom:10px;box-shadow:0 1px 2px rgba(15,27,45,.06);display:flex;align-items:center;gap:12px}
.mock-card .ic{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;background:var(--blue-50);color:var(--blue);flex:none}
.mock-card .ic svg{width:20px;height:20px}
.mock-card .t{flex:1;min-width:0}
.mock-card .t b{display:block;font-size:14px;line-height:1.25}
.mock-card .t span{font-size:12px;color:var(--muted)}
.mock-reading{text-align:center;padding:20px 14px 10px}
.mock-reading .val{font:700 54px/1 var(--mono);letter-spacing:-.04em;color:var(--tomato-700)}
.mock-reading .val.ok{color:var(--mint-700)}
.mock-alert{background:var(--tomato-50);border:1px solid #F7C3C5;color:var(--tomato-700);border-radius:14px;padding:12px 14px;margin:6px 14px 10px;font-weight:700;font-size:15px}
.mock-opt{display:flex;align-items:center;gap:10px;background:#fff;border:2px solid var(--line);border-radius:12px;padding:11px 12px;margin:0 14px 8px;font-size:14px;font-weight:600}
.mock-opt i{width:18px;height:18px;border-radius:50%;border:2px solid #b7c3d1;flex:none}
.mock-opt.on{border-color:var(--blue);background:var(--blue-50)}
.mock-opt.on i{border:5px solid var(--blue)}
.mock-btn{margin:12px 14px;background:var(--blue);color:#fff;border-radius:12px;padding:14px;text-align:center;font-weight:800}

/* feature cards: steel plates */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.card{background:var(--plate-bg);border:1px solid var(--steel-3);border-radius:var(--radius);padding:26px;box-shadow:var(--shadow);transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s}
.card:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg);border-color:#BFC9D4}
.card .ic{width:44px;height:44px;border-radius:8px;display:grid;place-items:center;background:#fff;border:1px solid var(--steel-3);color:var(--blue);margin-bottom:18px}
.card .ic svg{width:24px;height:24px}
.card.y .ic{background:var(--blue);border-color:var(--blue);color:#fff}
.card.k .ic{background:var(--lcd);border-color:var(--lcd);color:var(--lcd-green)}
.card p{color:var(--ink-2);margin:0}
.card .pro{float:right;margin-top:4px}
@media (max-width:980px){.cards{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.cards{grid-template-columns:1fr}}

/* thresholds: each one a reading with the scale under it */
.thresholds{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:36px}
.th{background:var(--plate-bg);border:1px solid var(--steel-3);border-radius:var(--radius);padding:20px 20px 18px;position:relative;box-shadow:var(--shadow)}
.th .what{font:500 11.5px/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0 0 12px}
.th .num{font:700 32px/1 var(--mono);letter-spacing:-.05em;color:var(--ink);margin:0 0 12px}
.th .num::after{content:"";display:block;height:6px;border-radius:3px;background:var(--band);margin-top:12px}
.th p{font-size:14px;color:var(--ink-2);margin:0}
@media (max-width:980px){.thresholds{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.thresholds{grid-template-columns:1fr 1fr;gap:10px}.th{padding:14px 14px 12px}.th .what{font-size:10.5px;letter-spacing:.04em}.th .num{font-size:24px}.th p{font-size:13px}}

/* inspection pack visual: paper sheets on steel */
.pack-art{position:relative;width:100%;height:440px;max-width:520px;margin:0 auto;color:var(--ink)}
.sheet{position:absolute;width:min(300px,60%);height:400px;background:#fff;border-radius:4px;box-shadow:var(--shadow-lg);padding:26px 24px;border:1px solid var(--line)}
.sheet:nth-child(1){left:6%;top:30px;transform:rotate(-6deg)}
.sheet:nth-child(2){left:20%;top:16px;transform:rotate(-1.5deg)}
.sheet:nth-child(3){left:36%;top:0;transform:rotate(4deg)}
.sheet h4{font:800 15px/1.2 var(--display);margin:0 0 4px}
.sheet small{display:block;color:var(--muted);font-size:11px;margin-bottom:14px}
.sheet .ln{height:8px;border-radius:2px;background:var(--steel);margin:10px 0}
.sheet .ln.s{width:60%}.sheet .ln.m{width:80%}
.sheet .row{display:flex;gap:8px;align-items:center;margin:9px 0}
.sheet .row i{width:14px;height:14px;border-radius:3px;background:var(--mint);flex:none}
.sheet .row i.w{background:var(--amber)}
.sheet .row i.b{background:var(--tomato)}
.sheet .row span{height:7px;border-radius:2px;background:var(--steel);flex:1}
.sheet .sig{position:absolute;left:24px;right:24px;bottom:22px;border-top:1px solid var(--line);padding-top:8px;font:500 11px/1.3 var(--mono);letter-spacing:.04em;color:var(--muted)}
.sheet .sig b{display:block;font:700 13px/1.2 var(--mono);color:var(--ink);letter-spacing:0}
.sheet .band6{position:absolute;left:0;right:0;top:0;height:5px;background:var(--band);border-radius:4px 4px 0 0}

/* pricing: steel plates, the price in an LCD window */
.toggle{display:inline-flex;background:var(--plate);border:1px solid var(--steel-3);border-radius:8px;padding:4px;gap:4px;margin:6px 0 34px}
.toggle button{font:700 15px/1 var(--display);border:0;background:transparent;min-height:40px;padding:0 16px;border-radius:6px;cursor:pointer;color:var(--ink-2)}
.toggle button[aria-pressed=true]{background:#fff;color:var(--ink);box-shadow:0 1px 2px rgba(15,27,45,.15),0 0 0 1px var(--steel-3)}
.toggle .save{font:500 12px/1 var(--mono);color:var(--mint-700);margin-left:6px}
.prices{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch}
.price{position:relative;background:var(--plate-bg);border:1px solid var(--steel-3);border-radius:var(--radius);padding:30px 26px 26px;display:flex;flex-direction:column;box-shadow:var(--shadow)}
.price.pop{border:2px solid var(--blue);box-shadow:0 30px 60px -34px rgba(31,111,235,.6),var(--shadow)}
.price .flag{position:absolute;top:-13px;left:24px;background:var(--lcd);color:var(--lcd-green);font:500 11.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;padding:7px 10px;border-radius:5px;display:inline-flex;gap:7px;align-items:center}
.price .flag::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--lcd-green);box-shadow:0 0 6px rgba(43,182,115,.9)}
.price h3{font-size:24px;margin-bottom:6px}
.price .for{color:var(--muted);font-size:15px;margin:0 0 20px;min-height:48px}
.price .amt{position:relative;display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 8px;background:var(--lcd);color:#fff;border-radius:8px;padding:16px 18px 26px;
  font:700 46px/1 var(--mono);letter-spacing:-.05em;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06),inset 0 10px 24px -14px rgba(0,0,0,.6)}
.price .amt::after{content:"";position:absolute;left:18px;right:18px;bottom:11px;height:5px;border-radius:3px;background:var(--band)}
.price .amt small{font:500 13px/1 var(--mono);color:#9AA9BB;letter-spacing:0}
.price .per{font-size:14px;color:var(--muted);margin:10px 0 20px;min-height:20px}
.price ul{list-style:none;padding:0;margin:0 0 26px;flex:1}
.price li{position:relative;padding:7px 0 7px 26px;font-size:15.5px;color:var(--ink-2);border-top:1px solid var(--steel-3)}
.price li:first-child{border-top:0}
.price li::before{content:"";position:absolute;left:0;top:11px;width:15px;height:15px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Ccircle cx='7' cy='7' r='5.4' fill='%23fff' stroke='%231F6FEB' stroke-width='2.2'/%3E%3Cpath d='M7 7l2.4-2.6' stroke='%230F1B2D' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat}
.price form{margin:0}
.price .btn{white-space:normal;text-align:center;line-height:1.2;padding-top:6px;padding-bottom:6px}
@media (max-width:960px){.prices{grid-template-columns:1fr;max-width:520px;margin:0 auto}}

/* compare */
.compare{width:100%;border-collapse:separate;border-spacing:0;background:#fff;border:1px solid var(--steel-3);border-radius:var(--radius);overflow:hidden;font-size:16px}
.compare th,.compare td{padding:16px 18px;text-align:left;border-bottom:1px solid var(--steel);vertical-align:top}
.compare thead th{background:var(--steel-2);font:500 12.5px/1.2 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.compare thead th.us{background:var(--blue);color:#fff}
.compare td.us{background:var(--blue-50);font-weight:600}
.compare tr:last-child td,.compare tr:last-child th{border-bottom:0}
.compare .dial-b{width:18px;height:18px;vertical-align:-3px}
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--radius)}

/* FAQ */
.faq{max-width:860px;margin:36px auto 0}
.faq details{border-bottom:1px solid var(--steel-3);padding:4px 0}
.faq summary{list-style:none;cursor:pointer;padding:20px 48px 20px 0;font:800 19px/1.35 var(--display);position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:4px;top:50%;width:28px;height:28px;margin-top:-14px;border-radius:6px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 6v12M6 12h12' stroke='%230F1B2D' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E") center/14px no-repeat;box-shadow:inset 0 0 0 1px var(--steel-3);transition:transform .25s,background-color .2s}
.faq details[open] summary::after{transform:rotate(45deg);background-color:var(--blue-50);box-shadow:inset 0 0 0 1px var(--blue-100)}
.faq details p{color:var(--ink-2);padding:0 30px 16px 0;margin:0}

/* closing CTA: the probe thermometer itself - a steel body, an LCD window and a spike */
.cta-band{position:relative;background:linear-gradient(180deg,#FDFEFE,#E6EBF0 70%,#DCE2E9);border:1px solid #C3CCD6;border-radius:28px 20px 20px 28px;
  padding:clamp(24px,3.6vw,44px);display:grid;grid-template-columns:auto 1fr;gap:20px clamp(20px,3.4vw,44px);align-items:center;
  box-shadow:inset 0 1px 0 #fff,inset 0 -2px 0 rgba(15,27,45,.06),0 30px 60px -36px rgba(15,27,45,.5);margin-right:clamp(0px,9vw,120px)}
.cta-band::after{content:"";position:absolute;left:100%;top:50%;width:clamp(0px,9vw,120px);height:18px;margin-top:-9px;
  background:linear-gradient(180deg,#F4F6F8,#AAB5C1 55%,#D9DFE5);clip-path:polygon(0 0,100% 50%,0 100%)}
.cta-band::before{content:"";position:absolute;left:100%;top:50%;width:16px;height:40px;margin:-20px 0 0 -2px;border-radius:0 8px 8px 0;background:var(--ink)}
.cta-band h2{margin-bottom:10px;font-size:clamp(28px,3.2vw,42px)}
.cta-band p{color:var(--ink-2);margin:0}
.cta-band .cta-lcd{grid-row:span 2}
.cta-band .btn-row{grid-column:2;justify-content:flex-start}
.cta-lcd{background:var(--lcd);border-radius:12px;padding:16px 20px 18px;min-width:220px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06),inset 0 12px 28px -16px rgba(0,0,0,.7),0 1px 0 #fff}
.cta-lcd small{display:flex;justify-content:space-between;gap:10px;font:500 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--lcd-dim)}
.cta-lcd small i{font-style:normal;color:var(--lcd-green)}
.cta-lcd b{display:block;font:700 52px/1 var(--mono);letter-spacing:-.05em;color:var(--lcd-green);margin:12px 0 14px;text-shadow:0 0 18px rgba(43,182,115,.45)}
.cta-lcd .scale{height:5px}
@media (max-width:860px){.cta-band{margin-right:0;border-radius:20px}.cta-band::after,.cta-band::before{display:none}}
@media (max-width:640px){.cta-band{grid-template-columns:1fr}.cta-band .cta-lcd{grid-row:auto;min-width:0}.cta-band .btn-row{grid-column:1}}

/* promise */
.promise{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media (max-width:860px){.promise{grid-template-columns:1fr}}

/* page heads */
.page-head{padding:clamp(48px,7vw,96px) 0 clamp(28px,4vw,48px);position:relative}
.page-head h1{font-size:clamp(34px,4.6vw,58px);max-width:900px}
.page-head .lead{max-width:720px}

/* prose */
.prose{font-size:18px;line-height:1.7;color:var(--ink-2)}
.prose h2{font-size:clamp(26px,3vw,34px);margin:1.8em 0 .5em;color:var(--ink)}
.prose h3{margin:1.4em 0 .4em;color:var(--ink)}
.prose ul,.prose ol{padding-left:22px}
.prose li{margin:.35em 0}
.prose ul{list-style:none;padding-left:0}
.prose ul>li{position:relative;padding-left:28px}
.prose ul>li::before{content:"";position:absolute;left:0;top:.42em;width:15px;height:15px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Ccircle cx='7' cy='7' r='5.4' fill='%23fff' stroke='%231F6FEB' stroke-width='2.2'/%3E%3Cpath d='M7 7l2.4-2.6' stroke='%230F1B2D' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat}
.prose table{width:100%;border-collapse:collapse;font-size:16px;margin:18px 0}
.prose th,.prose td{border-bottom:1px solid var(--line);padding:10px 12px 10px 0;text-align:left;vertical-align:top}
.prose th{font-family:var(--display);color:var(--ink)}
.prose blockquote{margin:22px 0;padding:16px 20px;border-left:4px solid var(--blue);background:#fff;border-radius:0 8px 8px 0;color:var(--ink)}
.callout{position:relative;overflow:hidden;background:#fff;border:1px solid var(--steel-3);border-radius:8px;padding:22px 24px 22px 32px;margin:26px 0;color:var(--ink)}
.callout::before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;background:linear-gradient(180deg,#1F6FEB,#2BB673 38%,#F2A900 70%,#E5484D)}
.callout h3{margin-top:0}
nav.toc{background:var(--plate-bg);border:1px solid var(--steel-3);border-radius:var(--radius);padding:20px 24px;margin:0 0 32px}
nav.toc ol{margin:0;padding-left:20px}
nav.toc a{text-decoration:none}
.cite{font-size:14px;color:var(--muted)}

/* forms */
.field{display:block;margin:0 0 16px}
.field>span{display:block;font:700 14px/1.3 var(--text);margin:0 0 7px;color:var(--ink)}
.field small{display:block;font-weight:400;color:var(--muted);margin-top:5px;font-size:13.5px}
.input,.field input:not([type=checkbox]):not([type=radio]),.field select,.field textarea{width:100%;font:inherit;font-size:16px;padding:12px 14px;min-height:48px;border-radius:8px;
  border:1.5px solid #B9C3CF;background:#fff;color:var(--ink);transition:border-color .15s,box-shadow .15s}
.field textarea{min-height:110px;resize:vertical}
.input:focus,.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 4px rgba(31,111,235,.18)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
@media (max-width:640px){.form-grid{grid-template-columns:1fr}}
.alert{padding:14px 16px;border-radius:8px;margin:0 0 18px;font-weight:600;font-size:15px}
.alert.error{background:var(--tomato-50);color:var(--tomato-700);border:1px solid #F7C3C5}
.alert.ok{background:var(--mint-50);color:var(--mint-700);border:1px solid #BDE8D0}
.alert.info{background:var(--blue-50);color:var(--blue-700);border:1px solid var(--blue-100)}

/* rating lookup */
.search-card{background:var(--plate-bg);border:1px solid var(--steel-3);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow-lg);display:grid;grid-template-columns:1.3fr 1fr auto;gap:12px;align-items:end}
.search-card .field{margin:0}
@media (max-width:760px){.search-card{grid-template-columns:1fr}}
.results{display:grid;gap:12px;margin-top:28px}
.result{display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:center;background:#fff;border:1px solid var(--steel-3);border-radius:var(--radius);padding:16px 20px;text-decoration:none;color:var(--ink);transition:border-color .2s,box-shadow .2s,transform .2s}
.result:hover{border-color:var(--blue);box-shadow:var(--shadow);transform:translateY(-2px);color:var(--ink)}
.result b{font:800 18px/1.25 var(--display)}
.result .addr{font-size:14px;color:var(--muted)}
.result > svg{width:20px;height:20px;color:var(--muted)}
/* rating illustrations (the only place the rating yellow appears) */
.rbadge{width:64px;height:64px;border-radius:10px;display:grid;place-items:center;font:700 32px/1 var(--mono);background:var(--steel);color:var(--ink);position:relative}
.rbadge.r5{background:var(--blue);color:#fff}
.rbadge.r4{background:var(--blue-100);color:var(--blue-700)}
.rbadge.r3{background:var(--rating-yellow);color:var(--ink)}
.rbadge.r2,.rbadge.r1,.rbadge.r0{background:var(--tomato);color:#fff}
.rbadge.na{font:800 12px/1.1 var(--text);text-align:center;padding:6px}
.rbadge.lg{width:120px;height:120px;font-size:64px;border-radius:16px}
.score-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:24px 0}
.score{background:var(--plate-bg);border:1px solid var(--steel-3);border-radius:var(--radius);padding:20px}
.score .v{font:700 34px/1 var(--mono);margin:6px 0 10px}
.score .bar{height:8px;border-radius:4px;background:var(--steel);overflow:hidden}
.score .bar i{display:block;height:100%;border-radius:4px;background:var(--mint)}
.score .bar i.mid{background:var(--amber)}
.score .bar i.hi{background:var(--tomato)}
.score p{font-size:14px;color:var(--ink-2);margin:10px 0 0}
@media (max-width:760px){.score-grid{grid-template-columns:1fr}}

/* sitekit pages (auth / legal / errors) */
.sk-wrap{padding-top:clamp(40px,7vw,88px);padding-bottom:clamp(56px,8vw,104px)}
.sk-card{border-radius:14px;box-shadow:var(--shadow-lg);border-color:var(--steel-3)}
body .sk-card h1,body .sk-legal h1,body .sk-blog-head h1{font-family:var(--mono);font-weight:700;letter-spacing:-.045em;word-spacing:-.12em}
.sk-btn{font-family:var(--display);border-radius:8px;min-height:48px}
.sk-legal h1{font-weight:700}
body.auth-page{background:var(--ground);background-image:var(--brushed)}

/* reveal on scroll */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}.reveal.d3{transition-delay:.24s}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}*{scroll-behavior:auto!important}}
.no-js .reveal{opacity:1;transform:none}

/* small utilities */
.mt0{margin-top:0}.mt1{margin-top:12px}.mt2{margin-top:24px}.mt3{margin-top:40px}.mb0{margin-bottom:0}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media (max-width:820px){.grid2{grid-template-columns:1fr}}
.kbd{font-family:var(--mono);background:var(--steel);border-radius:5px;padding:2px 7px;font-size:.92em}
.pill-link{display:inline-flex;align-items:center;gap:8px;font-weight:700;text-decoration:none}
.pill-link svg{width:16px;height:16px;transition:transform .2s}
.pill-link:hover svg{transform:translateX(3px)}
.i{width:1.2em;height:1.2em;flex:none;vertical-align:-.2em}
.stars{display:inline-flex;gap:2px;color:var(--rating-yellow)}
.stars svg{width:1em;height:1em}

/* home specifics */
.checklist-card{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow-lg);padding:26px;border:1px solid var(--steel-3)}
.cl-head{display:flex;gap:14px;align-items:center;margin-bottom:12px}
.cl-head b{display:block;font:900 20px/1.2 var(--display)}
.cl-head small{color:var(--muted);font-size:14px}
.cl-ic{width:46px;height:46px;border-radius:8px;background:var(--lcd);display:grid;place-items:center;color:var(--lcd-green)}
.cl-ic svg{width:24px;height:24px}
.checklist-card ul{list-style:none;margin:0;padding:0}
.checklist-card li{display:flex;gap:12px;padding:11px 0;border-top:1px solid var(--steel);font-size:15px;color:var(--ink-2);line-height:1.45}
.checklist-card li b{color:var(--ink);display:block;font-size:15.5px}
.checklist-card .tick{width:26px;height:26px;border-radius:6px;background:var(--mint);color:#fff;display:grid;place-items:center;flex:none;margin-top:1px}
.checklist-card .tick svg{width:16px;height:16px;stroke-width:3}
.checklist-card li.more{color:var(--muted);font-weight:600;justify-content:center}
.keypad-mock{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:0 14px}
.keypad-mock span{background:#fff;border-radius:12px;padding:12px 0;text-align:center;font:700 20px/1 var(--mono);box-shadow:0 1px 2px rgba(15,27,45,.08)}

/* features page */
.feature-jump{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.feature-jump a{font:500 13px/1 var(--mono);letter-spacing:.04em;padding:11px 13px;border-radius:6px;background:#fff;border:1px solid var(--steel-3);color:var(--ink-2);text-decoration:none}
.feature-jump a:hover{border-color:var(--blue);color:var(--blue-600)}
.sticker-demo{position:relative;height:380px;display:flex;align-items:center;justify-content:center;gap:24px}
.sticker{width:200px;background:#fff;border:4px solid var(--blue);border-radius:16px;padding:18px;text-align:center;box-shadow:var(--shadow-lg);transform:rotate(-4deg)}
.sticker.s2{transform:rotate(3deg) translateY(30px)}
.sticker .s-top{display:block;font:500 12px/1 var(--mono);letter-spacing:.16em;color:var(--blue-700);margin-bottom:10px}
.sticker b{display:block;font:900 18px/1.2 var(--display);margin-top:8px}
.sticker small{color:var(--muted);font-size:12px}
.sticker .s-qr{display:block;width:130px;height:130px;margin:0 auto;color:var(--ink)}
.sticker .s-qr svg{width:100%;height:100%;display:block}
@media (max-width:560px){.sticker{width:150px;padding:12px}.sticker .s-qr{width:96px;height:96px}.sticker-demo{height:300px;gap:10px}}
.review-mock{background:#fff;border-radius:var(--radius);padding:26px;box-shadow:var(--shadow-lg);border:1px solid var(--steel-3)}
.review-mock h3{display:flex;align-items:center;justify-content:space-between;gap:10px}
.rv-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:14px 0}
.rv-stats div{background:var(--lcd);border-radius:8px;padding:12px 8px;text-align:center}
.rv-stats b{display:block;font:700 26px/1 var(--mono);color:var(--lcd-green)}
.rv-stats span{font-size:12px;color:#B5C2D1;line-height:1.2;display:block;margin-top:5px}
.rv-q{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:12px 0;border-top:1px solid var(--steel);font-size:15px}
@media (max-width:520px){.rv-stats{grid-template-columns:1fr 1fr}}
.pack-list{color:var(--ink-2);padding-left:22px;margin:0 0 18px}
.pack-list li{margin:6px 0}
/* rating detail */
.rating-hero{display:flex;gap:24px;align-items:center;margin-top:10px}
@media (max-width:620px){.rating-hero{flex-direction:column;align-items:flex-start}}
.inline-search{display:grid;grid-template-columns:1.4fr 1fr auto;gap:8px;margin-top:10px}
@media (max-width:640px){.inline-search{grid-template-columns:1fr}}
/* temperatures poster */
.poster{background:#fff;border:1px solid var(--steel-3);border-radius:16px;padding:clamp(20px,4vw,40px);box-shadow:var(--shadow-lg);position:relative;overflow:hidden}
.poster::before{content:"";position:absolute;left:0;right:0;top:0;height:8px;background:var(--band)}
.poster-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;border-bottom:2px solid var(--ink);padding-bottom:16px;margin-bottom:22px}
.poster-head img{height:38px;width:auto}
.poster-head span{font:700 clamp(20px,2.8vw,32px)/1 var(--mono);letter-spacing:-.04em}
.poster-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.pg{border-radius:10px;padding:18px;background:var(--steel-2);border:1px solid var(--steel-3);border-top:6px solid var(--blue)}
.pg.hot{border-top-color:var(--tomato);background:#FFF8F8}
.pg .what{font:800 14px/1.2 var(--text);color:var(--ink-2);margin:0 0 8px}
.pg .num{font:700 25px/1.1 var(--mono);letter-spacing:-.03em;margin:0 0 8px;color:var(--ink)}
.pg .aim{font-weight:700;font-size:14px;margin:0 0 6px}
.pg .why{font-size:13px;color:var(--muted);margin:0}
.poster-foot{font-size:12.5px;color:var(--muted);margin:20px 0 0}
@media (max-width:980px){.poster-grid{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.poster-grid{grid-template-columns:1fr}}
@media print{
  body *{visibility:hidden}
  body{background:#fff}
  #poster,#poster *{visibility:visible}
  #poster{position:absolute;left:0;top:0;width:100%;border:0;box-shadow:none;padding:0}
  .poster-grid{grid-template-columns:1fr 1fr}
  @page{size:A4;margin:12mm}
}
/* demo page */
.pins{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:8px 0 0}
.pin-card{background:var(--lcd);border-radius:8px;padding:12px 14px;box-shadow:var(--shadow)}
.pin-card span{display:block;font-size:13.5px;color:#B5C2D1;font-weight:600}
.pin-card em{font-style:normal;color:var(--lcd-green)}
.pin-card b{font-size:26px;letter-spacing:.12em;color:#fff}
@media (max-width:560px){.pins{grid-template-columns:1fr 1fr}}
.demo-qr{padding:30px}
.qr-box{width:220px;max-width:100%;margin:12px auto;padding:14px;background:#fff;border-radius:12px;border:4px solid var(--blue)}
.qr-box svg{width:100%;height:auto;display:block}
.eq-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px;margin-top:16px}
.eq-tile{display:flex;flex-direction:column;gap:6px;background:var(--plate-bg);border:1px solid var(--steel-3);border-radius:var(--radius);padding:18px;text-decoration:none;color:var(--ink);transition:transform .2s var(--ease),box-shadow .2s,border-color .2s}
.eq-tile:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg);border-color:var(--blue);color:var(--ink)}
.eq-tile .ic{width:44px;height:44px;border-radius:8px;background:#fff;border:1px solid var(--steel-3);color:var(--blue);display:grid;place-items:center}
.eq-tile .ic svg{width:24px;height:24px}
.eq-tile .muted{font-size:13.5px}
.link-card{text-decoration:none;color:inherit;display:block}
.link-card:hover{color:inherit}
.quick{display:flex;flex-wrap:wrap;gap:6px}
.quick .chip{border:0;cursor:pointer;font-size:13px}
.quick .chip:hover{background:var(--blue-50);color:var(--blue-700)}
@media (max-width:640px){
  .pack-art{height:330px;max-width:340px}
  .sheet{width:200px;height:290px;padding:18px 16px}
  .sheet:nth-child(1){left:0}.sheet:nth-child(2){left:8%}.sheet:nth-child(3){left:16%}
  .sheet .row{margin:6px 0}
  .sheet .sig{left:16px;right:16px;bottom:14px;font-size:10px}
  .sheet .sig b{font-size:11.5px}
}
@media (max-width:520px){.compare{font-size:14px}.compare th,.compare td{padding:11px 9px}}
/* signup */
.signup-wrap{padding:clamp(36px,6vw,80px) 0}
.signup-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(28px,5vw,72px);align-items:center}
.signup-pitch h1{font-size:clamp(32px,4.2vw,52px)}
.signup-steps{list-style:none;padding:0;margin:26px 0}
.signup-steps li{display:flex;gap:14px;align-items:flex-start;margin:0 0 18px;color:var(--ink-2)}
.signup-steps li b{display:block;color:var(--ink);font-size:17px}
.signup-steps li > span{width:46px;height:46px;border-radius:8px;background:#fff;border:1px solid var(--steel-3);box-shadow:var(--shadow);display:grid;place-items:center;color:var(--blue);flex:none}
.signup-steps li > span svg{width:24px;height:24px}
.signup-card{max-width:460px;width:100%;justify-self:end}
@media (max-width:860px){.signup-grid{grid-template-columns:1fr}.signup-card{justify-self:stretch;max-width:none}.signup-pitch .signup-steps{display:none}}