/* smarticulate. Palette and contrast verified: ink 10.8:1 on paper, signal-deep 5.5:1,
   quiet 4.5:1. Signal is for graphics and type at 24px and above only, never body text. */

:root{
  --ink:#34374C;
  --signal:#E0503A;
  --signal-deep:#B23A22;
  --paper:#F6F6F6;
  --quiet:#6B7089;
  --rule:#DEDFE6;
  --card:#FFFFFF;
  --display:"Outfit","Questrial","Avenir Next","Segoe UI",system-ui,sans-serif;
  --body:"Inter","Helvetica Neue",Arial,system-ui,sans-serif;
  --wide:1080px;
  --narrow:700px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--body);font-size:1.0625rem;line-height:1.65;
  font-feature-settings:"kern","liga";-webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%;height:auto}

h1,h2,h3,h4{font-family:var(--display);font-weight:600;line-height:1.12;letter-spacing:-0.02em;margin:0 0 .5em}
h1{font-size:clamp(2.4rem,6vw,4rem)}
h2{font-size:clamp(1.7rem,3.4vw,2.5rem);margin-top:0}
h3{font-size:1.2rem;letter-spacing:-0.01em}
p{margin:0 0 1.15em}
a{color:var(--signal-deep);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:var(--ink)}
strong{font-weight:600}
small{font-size:.875rem;color:var(--quiet)}

.wrap{max-width:var(--wide);margin:0 auto;padding:0 1.5rem}
.narrow{max-width:var(--narrow);margin-inline:auto}
.narrow.left{margin-inline:0}
/* prose and cards in the same section must share a left edge */
.wrap:has(> .grid) > .narrow,
.wrap:has(> .versus) > .narrow,
.wrap:has(> [id$="-mount"]) > .narrow{margin-inline:0}
.lede{font-size:clamp(1.15rem,2vw,1.4rem);line-height:1.5;color:var(--ink)}
.quiet{color:var(--quiet)}
.center{text-align:center}

/* header */
header.site{border-bottom:1px solid var(--rule);background:var(--paper);position:sticky;top:0;z-index:20}
header.site .wrap{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;min-height:88px}
.brand{display:flex;align-items:center;color:var(--ink);text-decoration:none}
.brand img{width:225px;display:block}
nav.site{display:flex;gap:1.6rem;align-items:center;flex-wrap:wrap}
nav.site a{font-family:var(--display);font-size:.95rem;color:var(--ink);text-decoration:none;font-weight:500}
nav.site a:hover,nav.site a[aria-current="page"]{color:var(--signal-deep)}

/* hero */
.hero{padding:clamp(3rem,7vw,5.5rem) 0 clamp(2.5rem,5vw,4rem)}
.hero .split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,340px);gap:clamp(2rem,5vw,4.5rem);align-items:center}
.hero .split .narrow{margin-inline:0}
.hero .mark{width:100%;max-width:330px;justify-self:center;opacity:.96}
@media (max-width:900px){
  .hero .split{grid-template-columns:1fr}
  .hero .mark{display:none}
}
.hero h1{margin-bottom:.35em}
.hero .strap{font-family:var(--display);font-size:clamp(1.3rem,2.6vw,1.9rem);color:var(--signal);
  font-weight:500;letter-spacing:-0.01em;margin:0 0 1.6rem}

/* waveform rule, the mark's own motif */
.wave{display:block;width:100%;height:16px;margin:clamp(1.8rem,4vw,3rem) 0;color:var(--rule)}
.wave.accent{color:var(--signal)}

section{padding:clamp(2.2rem,4vw,3.4rem) 0}
section.tint{background:var(--card);border-block:1px solid var(--rule)}
.eyebrow{font-family:var(--display);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--quiet);margin:0 0 .9rem;font-weight:600}

/* buttons */
.btn{display:inline-block;font-family:var(--display);font-weight:600;font-size:1rem;
  padding:.85rem 1.5rem;border-radius:2px;text-decoration:none;border:1.5px solid var(--ink);
  background:var(--ink);color:var(--paper);cursor:pointer;transition:.15s}
.btn:hover{background:var(--signal-deep);border-color:var(--signal-deep);color:#fff}
.btn.ghost{background:transparent;color:var(--ink)}
.btn.ghost:hover{background:var(--ink);color:var(--paper)}
.btns{display:flex;gap:.9rem;flex-wrap:wrap;align-items:center;margin-top:1.5rem}

/* grid + cards */
.grid{display:grid;gap:1.5rem}
.grid.two{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.grid.three{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.card{background:var(--card);border:1px solid var(--rule);border-radius:3px;padding:1.6rem 1.5rem}
.card h3{margin-top:0}
.card.soon{background:transparent;border-style:dashed}
.card.soon .price{color:var(--quiet)}
.badge{display:inline-block;font-family:var(--display);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;
  font-weight:600;padding:.2rem .5rem;border-radius:2px;background:var(--rule);color:var(--quiet);
  vertical-align:middle;margin-left:.5rem}
.badge.live{background:#E3EDE4;color:#2C6B39}
.rung{margin-top:2.2rem}
.rung > h3{font-size:1.05rem;letter-spacing:.1em;text-transform:uppercase;font-size:.8rem;color:var(--quiet);
  border-bottom:1px solid var(--rule);padding-bottom:.6rem;margin-bottom:1.2rem}
.card .price{font-family:var(--display);font-weight:600;color:var(--signal-deep);font-size:1.05rem;margin:.2rem 0 .8rem}
.card p:last-child{margin-bottom:0}

/* pull quote */
blockquote.pull{margin:2.2rem 0;padding:0 0 0 1.4rem;border-left:3px solid var(--signal);
  font-family:var(--display);font-size:clamp(1.25rem,2.4vw,1.6rem);line-height:1.35;font-weight:500}
blockquote.pull p{margin:0}

/* two columns setting what is yours against what is anybody's */
.versus{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.2rem;margin:1.8rem 0}
.versus > div{border:1px solid var(--rule);border-radius:3px;padding:1.3rem 1.4rem;background:var(--card)}
.versus > div.mine{border-left:3px solid var(--signal)}
.versus > div.anyone{border-left:3px solid var(--quiet)}
.versus h4{font-family:var(--display);font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;
  margin:0 0 .7rem;color:var(--quiet)}
.versus .line{font-family:var(--display);font-size:1.08rem;line-height:1.4;margin:0 0 .6rem}
.versus p:last-child{margin-bottom:0;font-size:.94rem;color:var(--quiet)}

/* the definition block is the brand's signature device, used twice and deliberately:
   once for the name, once for the thing the product captures */
.lexicon.loud{border-left-width:5px;padding:2.2rem 2.4rem;background:var(--paper);border-color:var(--rule);
  border-left-color:var(--signal)}
.lexicon.loud .word{font-size:clamp(2.2rem,5.5vw,3.4rem);letter-spacing:-0.02em;margin-bottom:.1rem}
.lexicon.loud .pos{font-family:var(--display);color:var(--signal-deep);font-weight:600;font-size:1rem;
  margin:1.4rem 0 .1rem}
.lexicon.loud .pos:first-of-type{margin-top:.9rem}
.lexicon.loud .pron{font-size:1rem;margin:0 0 .5rem}
.lexicon.loud .sense{font-size:1.15rem;margin:0 0 .5rem}
.lexicon.loud .usage{color:var(--quiet);font-style:italic;margin:0}
/* definition block, the brand's own device */
.lexicon{background:var(--card);border:1px solid var(--rule);border-left:3px solid var(--signal);
  padding:1.5rem 1.6rem;border-radius:3px;margin:2rem 0}
.lexicon .word{font-family:var(--display);font-size:1.5rem;font-weight:600;margin:0}
.lexicon .pron{color:var(--quiet);font-size:.95rem;margin:.1rem 0 .8rem}
.lexicon p:last-child{margin-bottom:0}

/* the test */
.tester{background:var(--card);border:1px solid var(--rule);border-radius:3px;padding:1.6rem}
.tester textarea{width:100%;min-height:190px;padding:1rem;border:1px solid var(--rule);border-radius:2px;
  font-family:var(--body);font-size:1rem;line-height:1.6;color:var(--ink);background:var(--paper);resize:vertical}
.tester textarea:focus{outline:2px solid var(--signal);outline-offset:1px}
.tester label{display:block;font-size:.92rem;color:var(--quiet);margin:.9rem 0 .3rem}
.tester input[type=text],.tester input[type=email],.tester select{width:100%;padding:.75rem 1rem;
  border:1px solid var(--rule);border-radius:2px;font-family:var(--body);font-size:1rem;color:var(--ink);background:var(--paper)}
.tester input:focus,.tester select:focus{outline:2px solid var(--signal);outline-offset:1px}
.tester .row{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-top:.9rem;flex-wrap:wrap}
.counter{font-family:var(--display);font-size:.9rem;color:var(--quiet)}
.counter.ready{color:var(--signal-deep);font-weight:600}

.result{margin-top:1.8rem;display:none;scroll-margin-top:96px}
.result.show{display:block}
.scoreline{display:flex;align-items:baseline;gap:.8rem;flex-wrap:wrap;margin-bottom:.3rem}
.scorenum{font-family:var(--display);font-size:clamp(3rem,8vw,4.5rem);font-weight:600;line-height:1;color:var(--signal)}
.scoreof{color:var(--quiet);font-family:var(--display)}
.bandname{font-family:var(--display);font-size:1.2rem;font-weight:600}
.bars{margin:1.5rem 0 0;display:grid;gap:.7rem}
.bar{display:grid;grid-template-columns:9.5rem 1fr 3.4rem;gap:.8rem;align-items:center;font-size:.92rem}
.bar .track{height:9px;background:var(--rule);border-radius:9px;overflow:hidden}
.bar .fill{height:100%;background:var(--signal);border-radius:9px}
.bar .num{font-family:var(--display);text-align:right;color:var(--quiet)}
.bar.noisy .label::after{content:" *";color:var(--signal-deep)}
.finding{border-top:1px solid var(--rule);margin-top:1.5rem;padding-top:1.3rem}
.finding h4{font-family:var(--display);font-size:1rem;margin:0 0 .4rem}
.yourline{font-family:var(--display);font-size:1.15rem;line-height:1.4;border-left:3px solid var(--signal);
  padding-left:1rem;margin:.6rem 0}
.finding.offer{border-top:2px solid var(--signal);background:var(--paper);margin-left:-1rem;margin-right:-1rem;
  padding:1.4rem 1rem 0.6rem}
.finding.offer h4{font-size:1.15rem;color:var(--ink)}
.finding.offer .btn{margin-right:.6rem;margin-top:.4rem}
.refusal{border-left:3px solid var(--quiet);padding-left:1rem;color:var(--quiet)}

/* lists */
ul.ticks{list-style:none;padding:0;margin:0 0 1.2rem}
ul.ticks li{padding-left:1.5rem;position:relative;margin-bottom:.55rem}
ul.ticks li::before{content:"";position:absolute;left:0;top:.62em;width:9px;height:2px;background:var(--signal)}

/* footer */
footer.site{border-top:1px solid var(--rule);margin-top:2rem;padding:2.5rem 0 3rem;color:var(--quiet);font-size:.95rem}
footer.site .wrap{display:flex;gap:2rem;justify-content:space-between;flex-wrap:wrap}
footer.site a{color:var(--quiet)}
footer.site a:hover{color:var(--ink)}
footer.site svg{width:34px;color:var(--quiet);display:block;margin-bottom:.8rem}

/* On a narrow screen the nav wraps to three lines, and a sticky header then eats a third
   of the viewport. Two rows, one scrolling line of links, and it stops sticking. */
@media (max-width:760px){
  header.site{position:static}
  header.site .wrap{flex-direction:column;align-items:flex-start;gap:.5rem;min-height:0;padding-block:.9rem}
  .brand img{width:158px;height:auto}
  nav.site{flex-wrap:nowrap;gap:1.1rem;width:100%;overflow-x:auto;padding-bottom:.2rem;
    scrollbar-width:none;-ms-overflow-style:none}
  nav.site::-webkit-scrollbar{display:none}
  nav.site a{font-size:.9rem;white-space:nowrap}
  .result{scroll-margin-top:8px}
}
@media (max-width:640px){
  .bar{grid-template-columns:6.6rem 1fr 3rem;font-size:.85rem;gap:.6rem}
  .btn{font-size:.95rem;padding:.8rem 1.2rem}
  .btns .btn{flex:1 1 auto;text-align:center}
  blockquote.pull{padding-left:1rem}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}