/* CountPro — product page for Yordan Creatives.
   Paper, ink, hairline rules, one accent. No external fonts, no frameworks, no trackers. */

:root{
  --paper:#ffffff;
  --ink:#0b0b0c;
  --muted:#5a5a62;
  --rule:#e2e2e6;
  --accent:#1f3ae0;
  --display:Georgia,"Iowan Old Style","Times New Roman",serif;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --wrap:1180px;
  --gut:clamp(1.1rem,4vw,3rem);
  --row:clamp(44px,5.2vw,60px);
  --rows:7;
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:clamp(1rem,.96rem + .18vw,1.06rem);
  line-height:1.62;
  text-rendering:optimizeLegibility;
}
img,svg{max-width:100%;height:auto}
a{color:inherit}
a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

.wrap{
  width:100%;
  max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:var(--gut);
}
.wrap.narrow{max-width:760px}

.skip{
  position:absolute;left:-9999px;
  background:var(--ink);color:var(--paper);
  padding:.75rem 1rem;z-index:99;
}
.skip:focus{left:1rem;top:1rem}

.sr-only{
  position:absolute;width:1px;height:1px;
  padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ---------- top bar ---------- */
.top{border-bottom:1px solid var(--rule)}
.top-inner{
  display:flex;align-items:center;
  gap:.75rem 2rem;
  padding-block:1rem;
  flex-wrap:wrap;
}
.wordmark{
  font-family:var(--display);
  font-size:1.24rem;
  letter-spacing:-.01em;
  text-decoration:none;
  line-height:1;
}
.wordmark span{
  display:block;
  font-family:var(--sans);
  font-size:.58rem;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--muted);
  margin-top:.3rem;
}
.top nav{margin-left:auto;display:flex;gap:1.4rem;flex-wrap:wrap}
.top nav a{
  font-size:.76rem;letter-spacing:.07em;text-transform:uppercase;
  text-decoration:none;color:var(--muted);
  padding-block:.35rem;
  border-bottom:1px solid transparent;
}
.top nav a:hover{color:var(--ink);border-bottom-color:var(--accent)}

/* ---------- hero ---------- */
.hero{
  padding-block:clamp(2rem,4.5vw,3.75rem) clamp(2.25rem,5vw,3.5rem);
  border-bottom:1px solid var(--rule);
}
.hero-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:clamp(2rem,5vw,3.5rem);
  align-items:start;
}
.hero-copy{min-width:0}
.kicker{
  margin:0 0 clamp(1rem,2.5vw,1.5rem);
  font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted);
  text-wrap:balance;
}
.hero h1{
  margin:0;
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(2.15rem,1.3rem + 3.6vw,4rem);
  line-height:1.03;
  letter-spacing:-.028em;
  max-width:20ch;
  text-wrap:balance;
}
.lede{
  margin:clamp(1.25rem,2.5vw,1.75rem) 0 0;
  font-size:clamp(1.06rem,.98rem + .35vw,1.2rem);
  line-height:1.5;
  max-width:44ch;
}
.problem{margin:1rem 0 0;max-width:56ch;color:var(--muted)}

/* ---------- the counting instrument ---------- */
.gauge{margin:0;min-width:0}
.gauge-head{
  display:flex;justify-content:space-between;gap:1rem;
  font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted);
  padding-bottom:.65rem;
  border-bottom:1px solid var(--ink);
}
.gauge-stage{
  display:grid;
  grid-template-columns:2px minmax(0,1fr);
  gap:0;
  transition:opacity .45s ease;
}
.gauge.is-resetting .gauge-stage{opacity:0}
.gauge-rail{position:relative;background:var(--rule)}
.gauge-rail i{
  position:absolute;left:0;bottom:0;width:100%;
  height:87.5%;
  background:var(--accent);
  transition:height .7s cubic-bezier(.22,.61,.36,1);
}
.gauge-body{
  position:relative;
  height:calc(var(--row) * var(--rows));
  overflow:hidden;
  background-image:repeating-linear-gradient(to top,var(--rule) 0 1px,transparent 1px var(--row));
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 15%,#000 100%);
  mask-image:linear-gradient(to bottom,transparent 0,#000 15%,#000 100%);
}
.gauge-list{
  position:absolute;left:0;right:0;bottom:0;
  margin:0;padding:0;list-style:none;
  will-change:transform;
}
.gauge-list li{
  height:var(--row);
  display:flex;align-items:flex-end;justify-content:flex-end;
  padding-bottom:.36rem;
  line-height:1;
}
.gauge-list .num{
  font-family:var(--display);
  font-size:calc(var(--row) * .56);
  letter-spacing:-.01em;
  color:var(--muted);
  font-variant-numeric:tabular-nums lining-nums;
  font-feature-settings:"tnum" 1,"lnum" 1;
}
.gauge-list li:last-child .num{color:var(--accent)}
.gauge-note{
  margin:0;
  padding-top:.7rem;
  font-size:.72rem;letter-spacing:.02em;
  color:var(--muted);
}

/* ---------- sections ---------- */
section{padding-block:clamp(2.5rem,5vw,4.5rem)}
.section-head{
  display:grid;
  grid-template-columns:2.2rem minmax(0,1fr);
  gap:.35rem 1.25rem;
  align-items:baseline;
  padding-bottom:1.5rem;
  border-bottom:1px solid var(--ink);
  margin-bottom:clamp(1.5rem,3vw,2.5rem);
}
.marker{
  grid-row:1;
  font-size:.72rem;letter-spacing:.16em;
  color:var(--accent);
  font-variant-numeric:tabular-nums;
}
.section-head h2{
  grid-row:1;
  margin:0;
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(1.7rem,1.25rem + 2vw,2.75rem);
  letter-spacing:-.02em;
  line-height:1.05;
}
.section-head p{
  grid-column:2;
  margin:.55rem 0 0;
  max-width:52ch;
  font-size:.98rem;
  color:var(--muted);
}

/* ---------- what it does ---------- */
.rows{
  list-style:none;margin:0;padding:0;
  border-top:1px solid var(--rule);
}
.rows li{
  display:grid;
  grid-template-columns:2.1rem minmax(0,1fr);
  column-gap:clamp(.75rem,2vw,1.35rem);
  padding-block:clamp(1.25rem,2.5vw,1.75rem);
  border-bottom:1px solid var(--rule);
}
.rows .tick{
  grid-row:1 / span 2;
  width:5px;height:5px;
  margin-top:.55rem;
  background:var(--accent);
}
.rows h3{
  grid-column:2;
  margin:0;
  font-size:1.05rem;font-weight:600;
  letter-spacing:-.006em;line-height:1.35;
}
.rows p{
  grid-column:2;
  margin:.45rem 0 0;
  max-width:64ch;
  color:var(--muted);
}
/* ---------- the link ---------- */
.cta{
  border-bottom:1px solid var(--rule);
  padding-block:clamp(2rem,4vw,3.25rem);
}
.cta .section-head{margin-bottom:0}
.cta h2{
  margin:0;
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(1.6rem,1.2rem + 1.6vw,2.4rem);
  letter-spacing:-.02em;
  line-height:1.1;
  max-width:24ch;
}
.cta-link{
  display:inline-block;
  margin-top:clamp(1.75rem,3vw,2.5rem);
  font-family:var(--display);
  font-size:clamp(1.85rem,1.05rem + 4vw,3.4rem);
  line-height:1.05;
  letter-spacing:-.025em;
  text-decoration:none;
  padding-bottom:.12em;
  border-bottom:2px solid var(--accent);
  overflow-wrap:anywhere;
}
.cta-link span[aria-hidden]{color:var(--accent);font-size:.66em;vertical-align:.3em;margin-left:.12em}
.cta-link:hover{color:var(--accent)}

/* ---------- the site-wide light strand ----------
   Shared with the other product pages. Kept, but given room: on this page its
   default negative bottom margin collided with the footer rule, and 1200px is
   wider than this page's content column. */
.strand-divider{
  width:calc(100% - 2 * var(--gut));
  max-width:calc(var(--wrap) - 2 * var(--gut));
  margin:clamp(2rem,4vw,3rem) auto 1.75rem;
}

/* ---------- footer ---------- */
.site-footer{
  border-top:1px solid var(--rule);
  padding-block:2rem 2.5rem;
}
.footer-grid{
  display:flex;justify-content:space-between;align-items:baseline;
  gap:1.25rem;flex-wrap:wrap;
  padding-bottom:1.25rem;
}
.footer-name{
  margin:0;
  font-family:var(--display);
  font-size:1.05rem;
  letter-spacing:-.01em;
}
.site-footer nav{display:flex;gap:1.1rem;flex-wrap:wrap}
.site-footer nav a{
  font-size:.78rem;color:var(--muted);text-decoration:none;
  border-bottom:1px solid transparent;padding-bottom:.1rem;
}
.site-footer nav a:hover{color:var(--ink);border-bottom-color:var(--accent)}
.footer-legal{
  margin:0 0 .7rem;
  font-size:.78rem;line-height:1.72;
  color:var(--muted);
  max-width:88ch;
}
.footer-legal a{color:var(--ink);text-decoration:underline;text-underline-offset:.15em}

/* ---------- responsive ---------- */
@media (min-width:920px){
  .hero-grid{grid-template-columns:minmax(0,1.55fr) minmax(0,1fr)}
  .gauge{margin-top:.4rem}
}

@media (max-width:600px){
  .top-inner{padding-block:.95rem}
  .top nav{
    margin-left:0;width:100%;
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
    gap:.1rem 1rem;
    margin-top:.25rem;padding-top:.7rem;
    border-top:1px solid var(--rule);
  }
  .top nav a{padding-block:.45rem;border-bottom:0}
  .rows li{grid-template-columns:1.6rem minmax(0,1fr)}
  .site-footer nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem 1rem;width:100%}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation:none!important;
    transition:none!important;
  }
}