/* Groomer Pay Calculator: shared design system.
   Ledger aesthetic. Hairline rules, tabular figures, restrained color. */

/* ---------- tokens ---------- */
:root{
  --paper:#f6f5f2;
  --surface:#ffffff;
  --surface-2:#efeee9;
  --ink:#15201f;
  --ink-soft:#33413f;
  --muted:#5e6b69;
  --rule:#dfded7;
  --rule-strong:#c6c5bc;
  --petrol:#0f4a4e;
  --petrol-lift:#12626a;
  --petrol-ink:#ffffff;
  --petrol-wash:#e3ecec;
  --brass:#8a6015;
  --brass-wash:#f4e9d4;
  --good:#1c6b4b;
  --alert:#9c3b21;
  --shadow:0 1px 2px rgba(21,32,31,.05), 0 14px 30px -24px rgba(21,32,31,.55);
  --measure:66ch;
  --radius:4px;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#0f1413;
    --surface:#171d1c;
    --surface-2:#1f2726;
    --ink:#e9eeeb;
    --ink-soft:#c8d2cf;
    --muted:#93a29f;
    --rule:#27312f;
    --rule-strong:#3b4846;
    --petrol:#63bcc0;
    --petrol-lift:#84d2d5;
    --petrol-ink:#08211f;
    --petrol-wash:#15292b;
    --brass:#d2a24e;
    --brass-wash:#2d2412;
    --good:#4fbc8c;
    --alert:#e08163;
    --shadow:0 1px 2px rgba(0,0,0,.5), 0 14px 30px -24px rgba(0,0,0,.9);
  }
}
:root[data-theme="dark"]{
  --paper:#0f1413;
  --surface:#171d1c;
  --surface-2:#1f2726;
  --ink:#e9eeeb;
  --ink-soft:#c8d2cf;
  --muted:#93a29f;
  --rule:#27312f;
  --rule-strong:#3b4846;
  --petrol:#63bcc0;
  --petrol-lift:#84d2d5;
  --petrol-ink:#08211f;
  --petrol-wash:#15292b;
  --brass:#d2a24e;
  --brass-wash:#2d2412;
  --good:#4fbc8c;
  --alert:#e08163;
  --shadow:0 1px 2px rgba(0,0,0,.5), 0 14px 30px -24px rgba(0,0,0,.9);
}

/* ---------- reset ---------- */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto}
a{color:var(--petrol);text-underline-offset:3px}
a:hover{text-decoration-thickness:2px}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--petrol-lift);outline-offset:2px}

/* ---------- type ---------- */
h1,h2,h3,h4{
  font-family:"Newsreader",Georgia,"Times New Roman",serif;
  font-weight:600;
  letter-spacing:-.012em;
  line-height:1.15;
  text-wrap:balance;
  margin:0;
  color:var(--ink);
}
h1{font-size:clamp(1.85rem,5vw,2.6rem)}
h2{font-size:clamp(1.3rem,3.4vw,1.6rem)}
h3{font-size:1.08rem;line-height:1.3}
p{margin:0}
.num{font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.eyebrow{
  font-family:"IBM Plex Mono",monospace;
  font-size:.68rem;
  text-transform:uppercase;
  letter-spacing:.15em;
  color:var(--muted);
}
.lede{font-size:1.08rem;color:var(--ink-soft);max-width:var(--measure)}
.small{font-size:.86rem;color:var(--muted)}

/* ---------- layout ---------- */
.shell{max-width:1140px;margin:0 auto;padding:0 20px}
.narrow{max-width:720px;margin:0 auto;padding:0 20px}
.stack{display:flex;flex-direction:column}
.stack-sm{gap:10px}
.stack-md{gap:18px}
.stack-lg{gap:34px}
.rule{border:0;border-top:1px solid var(--rule);margin:0}

/* ---------- masthead ---------- */
.masthead{
  border-bottom:1px solid var(--rule);
  background:var(--surface);
  position:sticky;top:0;z-index:40;
}
.masthead-in{
  max-width:1140px;margin:0 auto;padding:11px 20px;
  display:flex;align-items:center;gap:14px;justify-content:space-between;
}
.wordmark{
  display:flex;align-items:baseline;gap:9px;
  text-decoration:none;color:var(--ink);
}
.wordmark .mark{
  font-family:"Newsreader",Georgia,serif;font-weight:600;font-size:1.05rem;letter-spacing:-.01em;
}
.wordmark .tag{
  font-family:"IBM Plex Mono",monospace;font-size:.62rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);
}
.masthead nav{display:flex;align-items:center;gap:18px}
.masthead nav a{
  font-size:.85rem;color:var(--muted);text-decoration:none;font-weight:500;
}
.masthead nav a:hover{color:var(--ink)}
.masthead nav a.pro-link{
  color:var(--brass);border:1px solid color-mix(in srgb, var(--brass) 40%, transparent);
  padding:4px 11px;border-radius:999px;font-weight:600;letter-spacing:.01em;
}
.masthead nav a.pro-link:hover{background:var(--brass-wash);color:var(--brass)}
@media (max-width:520px){
  .masthead nav a.hide-xs{display:none}
  .wordmark .tag{display:none}
}

/* ---------- page intro ---------- */
.intro{padding:30px 0 22px;display:flex;flex-direction:column;gap:12px}
.intro h1{max-width:20ch}
.intro .lede{font-size:1.05rem}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-weight:600;font-size:.95rem;letter-spacing:.005em;
  padding:11px 20px;border-radius:var(--radius);
  border:1px solid transparent;cursor:pointer;text-decoration:none;
  transition:background .15s ease,border-color .15s ease,color .15s ease;
}
.btn-primary{background:var(--petrol);color:var(--petrol-ink);border-color:var(--petrol)}
.btn-primary:hover{background:var(--petrol-lift);border-color:var(--petrol-lift)}
.btn-brass{background:var(--brass);color:#fff;border-color:var(--brass)}
:root[data-theme="dark"] .btn-brass{color:#20180a}
.btn-brass:hover{filter:brightness(1.08)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--rule-strong)}
.btn-ghost:hover{border-color:var(--ink);background:var(--surface)}
.btn-block{width:100%}
.btn-sm{padding:7px 14px;font-size:.85rem}

/* ---------- forms ---------- */
.field{display:flex;flex-direction:column;gap:6px}
.field label,.lbl-strong{
  font-size:.76rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);
}
.field-help{font-size:.8rem;color:var(--muted);line-height:1.45}
input[type=text],input[type=email],input[type=number],select{
  width:100%;
  font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums;
  font-size:1rem;
  padding:9px 11px;
  color:var(--ink);
  background:var(--surface);
  border:1px solid var(--rule-strong);
  border-radius:var(--radius);
  appearance:none;
}
select{
  font-family:"Archivo",sans-serif;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 17px) 51%,calc(100% - 12px) 51%;
  background-size:5px 5px,5px 5px;
  background-repeat:no-repeat;
  padding-right:34px;
}
input:focus,select:focus{border-color:var(--petrol);outline:none;box-shadow:0 0 0 3px var(--petrol-wash)}
input::placeholder{color:var(--muted);opacity:.65}

/* ---------- prose pages ---------- */
.prose{max-width:var(--measure)}
.prose p{margin:0 0 1.05em;color:var(--ink-soft)}
.prose h2{margin:2em 0 .5em;font-size:1.35rem}
.prose h3{margin:1.7em 0 .4em;font-size:1.05rem;font-family:"Archivo",sans-serif;font-weight:600;letter-spacing:0}
.prose ul,.prose ol{margin:0 0 1.05em;padding-left:1.25em;color:var(--ink-soft)}
.prose li{margin-bottom:.4em}
.prose strong{font-weight:600;color:var(--ink)}

/* ---------- ads ---------- */
.ad-slot{
  margin:32px 0;
  padding-top:10px;
  border-top:1px solid var(--rule);
  min-height:60px;
}
.ad-slot::before{
  content:"Advertisement";
  display:block;
  font-family:"IBM Plex Mono",monospace;font-size:.6rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);opacity:.7;margin-bottom:10px;
}
.is-pro .ad-slot{display:none}
.is-pro .pro-upsell{display:none}

/* ---------- footer ---------- */
.site-footer{
  margin-top:56px;border-top:1px solid var(--rule);background:var(--surface);
}
.site-footer-in{
  max-width:1140px;margin:0 auto;padding:26px 20px 40px;
  display:flex;flex-direction:column;gap:12px;
}
.footer-nav{display:flex;flex-wrap:wrap;gap:6px 20px}
.footer-nav a{font-size:.88rem;color:var(--ink-soft);text-decoration:none}
.footer-nav a:hover{text-decoration:underline}
.footer-fine{font-size:.78rem;color:var(--muted);max-width:70ch;line-height:1.5}

/* ---------- generic panel ---------- */
.panel{
  background:var(--surface);
  border:1px solid var(--rule);
  border-radius:var(--radius);
}
.panel-pad{padding:20px}