/* Style B: type and palette taken from the Codex mockup. Layout untouched. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
:root{
  --ink:#10191C; --muted:#5B686C; --paper:#F5F7F7; --paper-2:#EBF0F0; --white:#FFFFFF;
  --teal:#008D88; --accent:#10191C; --accent-press:#000; --link:#007571;
  --granite:#10191C; --on-dark:#FFFFFF; --on-dark-muted:#A9B6B9;
  --note:#00B3AD; --note-ink:#022B29;
  --s-display:clamp(52px,7.2vw,124px); --s-h2:clamp(38px,4.4vw,76px); --s-h3:clamp(26px,2.4vw,36px);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display",Inter,"Segoe UI",Arial,sans-serif;
}
body{font-family:inherit}
.btn,.menu>li>a,.menu>li>button,.tabs button,.chips button,select,input,textarea,.toggle,.burger{font-family:inherit!important}

/* bold, tight headlines */
h1,h2,h3{font-weight:700;letter-spacing:-.055em;line-height:.95}
h1{letter-spacing:-.065em;line-height:.9}
h3{letter-spacing:-.035em;line-height:1.02}
.lede{font-weight:400;letter-spacing:-.01em}
.prod h3,.panel h3,.tile h3,.story h3,.mach b{font-weight:700;letter-spacing:-.035em}
.num b{font-weight:700!important;letter-spacing:-.06em!important}
.why li b{font-weight:650}

/* buttons: black pills on light, white pills on dark */
.btn{border-radius:999px;font-weight:600;letter-spacing:-.01em;background:var(--ink)}
.btn:hover{background:#000}
.btn.light{background:var(--white);color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
.btn.light:hover{background:var(--paper)}
.hero .btn,.granite .btn,.brochure .btn{background:var(--white);color:var(--ink)}
.hero .btn:hover,.granite .btn:hover{background:#e6eded}
.hero .btn.ghost{background:transparent;color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.7)}
.probe .btn.dark{background:transparent;color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.5)}
.link{color:var(--link);font-weight:600}
.hdr .btn{background:var(--ink)}

/* teal used as the highlight, on dark and on white */
.hero h1 em,.statement span{font-style:normal;color:#3FE0D6}
.hero{background:var(--granite)}
.hero .scrim{background:rgba(16,25,28,.62)}
.result span,.why .link{color:#2fd1c9!important}
.menu>li>a[aria-current]{box-shadow:inset 0 -3px 0 var(--teal)}
.tag.new{background:#d9f3f2;color:#00524f}

/* bright white and off-white grounds */
.split,.reading{background:var(--paper)}
.month,.news,.range,.ind{background:var(--white)}
.tile,.panel{background:var(--paper)}
.panel:nth-child(even){background:#E9EFEF}
.trust{background:var(--white)}
.brochure{background:var(--teal);color:#fff}
.brochure h2{color:#fff}
.brochure p{color:#E5F6F5}
.brochure .btn{background:var(--white);color:var(--ink)}
.brochure .btn.ghost{background:transparent;color:#fff;box-shadow:inset 0 0 0 1.5px #fff}
.cta-band{background:var(--ink);color:#fff}
.cta-band h2{color:#fff}.cta-band .muted{color:var(--on-dark-muted)}
.cta-band .btn{background:var(--white);color:var(--ink)}
.cta-band .btn.light{background:transparent;color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.7)}
footer{background:#0B1214}

/* inner pages */
.phead h1{max-width:12ch}
.lh-hero h1{font-weight:800;letter-spacing:-.07em}
.statement{background:var(--ink)}
.statement p{font-weight:700;letter-spacing:-.05em}
.feat li,.why-used div,.facts div,.svc-item{background:var(--paper)}
.used-band,.life,.princ{background:var(--ink)}
.princ .g div,.steps a{background:#18252A}
.princ .g div b,.steps b{font-weight:650}
.facts b,.vol{font-weight:700;letter-spacing:-.06em}
.jump a:hover,.jump a.on,.chips button[aria-pressed=true],.models button[aria-pressed=true]{background:var(--ink)}
.jump a,.chips button{border-radius:999px}
.m h3,.item h3,.svc h2{font-weight:700}
.m .gbp dd,.srow .p{font-weight:700;letter-spacing:-.03em}
.subnav b{font-weight:700;letter-spacing:-.03em}
.crumbs{color:var(--muted)}
form{box-shadow:inset 0 0 0 1px #dfe6e6}
.used-band .btn,.life .btn,.princ .btn,.statement .btn{background:var(--white);color:var(--ink)}
.used-band .btn:hover{background:#e6eded}