:root {
  color-scheme: dark;
  --ink: #171915;
  --paper: #f6f2e7;
  --muted: #c4c2b5;
  --lime: #dbff57;
  font-family: system-ui, sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--ink); color: var(--paper); }
a { color: inherit; }
a:focus-visible { outline: 3px solid #8eaaff; outline-offset: 5px; }
.wrap { width: min(69rem, calc(100% - 3rem)); margin-inline: auto; }
.masthead, .footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 1.4rem;
}
.masthead { border-bottom: 1px solid #41423a; }
.brand { text-decoration: none; font-size: 1.15rem; font-weight: 900; letter-spacing: -.06em; }
.brand span { margin-left: .22em; }
.brand b { color: var(--lime); }
.small-link { font-size: .9rem; text-underline-offset: .3em; }
.hero { display: grid; grid-template-columns: 1.15fr 1fr; align-items: center; gap: clamp(2rem, 6vw, 5rem); padding-block: clamp(3rem, 8vw, 7rem); }
.eyebrow { font-size: .76rem; font-weight: 800; letter-spacing: .15em; }
.hero .eyebrow { color: var(--lime); }
h1, h2, p { margin: 0; }
h1 { font-size: clamp(3rem, 7.5vw, 6.4rem); line-height: .93; letter-spacing: -.075em; margin-block: .24em; }
.hero-copy > p:not(.eyebrow) { max-width: 29rem; color: var(--muted); font-size: 1.12rem; line-height: 1.65; }
.button { display: inline-flex; align-items: center; gap: 1.1rem; margin-top: 1.6rem; padding: .9rem 1.1rem; border-radius: .4rem; color: var(--ink); background: var(--lime); font-weight: 800; text-decoration: none; }
.button:hover { background: #edffa7; }
.round { aspect-ratio: 1; position: relative; display: grid; place-items: center; background: var(--lime); color: var(--ink); border-radius: .75rem; overflow: hidden; }
.round-top, .round-bottom { position: absolute; font-size: clamp(.58rem, 1.3vw, .8rem); font-weight: 800; letter-spacing: .15em; }
.round-top { top: 7%; }
.round-bottom { bottom: 7%; display: flex; align-items: center; gap: .7rem; }
.round-bottom i { width: .35rem; height: .35rem; border-radius: 50%; background: currentColor; }
.dial { width: 65%; aspect-ratio: 1; border-radius: 50%; border: 2px solid; outline: 1px solid #799020; outline-offset: .55rem; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.dial span { font-size: clamp(.65rem, 2vw, .92rem); font-weight: 900; letter-spacing: .28em; }
.dial strong { font-size: clamp(4rem, 13vw, 9rem); line-height: .94; font-weight: 900; letter-spacing: -.09em; padding-right: .09em; }
.details { color-scheme: light; background: var(--paper); color: var(--ink); padding-block: clamp(2.75rem, 7vw, 5rem); }
.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem 5rem; }
h2 { font-size: clamp(2.1rem, 5vw, 3.8rem); letter-spacing: -.065em; line-height: 1; margin-block: .35em; }
.details p:not(.eyebrow), .details li span { line-height: 1.55; color: #484940; }
.details ul { padding: 0; margin: 0; list-style: none; border-top: 1px solid #b6b4a7; }
.details li { display: grid; gap: .22rem; padding-block: .8rem; border-bottom: 1px solid #b6b4a7; }
.footer { font-size: .9rem; color: var(--muted); }
.footer nav { display: flex; flex-wrap: wrap; gap: .7rem 1.35rem; }
.footer a { text-underline-offset: .26em; }
@media (max-width: 46rem) {
  .hero, .detail-grid { grid-template-columns: 1fr; }
  .round { width: min(100%, 27rem); }
  .footer { align-items: flex-start; flex-direction: column; }
}