/* ActionWell corporate site.
   Tokens are taken verbatim from company/product/design.md.
   Two rules from that system are load-bearing here:
   - the inverse surface family is NOT a dark theme; it is never wired to
     prefers-color-scheme, so this page renders on the light family only;
   - depth is 1px rules and surface steps. There are no shadows anywhere. */

:root{
  /* surfaces */
  --surface-canvas:#F8FAFD;
  --surface-sunken:#F0F3F6;
  --surface-raised:#FFFFFF;
  --surface-inverse:#07111C;
  /* ink */
  --text-primary:#0B1623;
  --text-secondary:#4F5C6C;
  --text-tertiary:#707D8C;
  /* brand — chrome and interaction only, never emphasis */
  --accent:#2F63FF;
  --accent-hover:#1D48D1;
  --accent-wash:#EEF4FF;
  /* priority */
  --priority-ink:#984D1B;
  --priority-wash:#FDF4EF;
  /* rules — the only depth mechanism */
  --rule:rgba(11,22,35,0.13);
  --rule-soft:rgba(11,22,35,0.07);
  /* metrics */
  --max:1240px;
  --gutter:32px;
  --section:54px;
  --panel:16px;
  --r-base:2px;
  --r-md:3px;
  --sans:-apple-system,BlinkMacSystemFont,"SF Pro Text",Inter,system-ui,sans-serif;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--surface-canvas);
  color:var(--text-primary);
  font:400 14px/1.5 var(--sans);
  -webkit-font-smoothing:antialiased;
}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--accent-hover)}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}

/* ---------- header ---------- */
header.site{background:var(--surface-raised);border-bottom:1px solid var(--rule)}
.bar{display:flex;align-items:center;justify-content:space-between;gap:var(--gutter);height:64px}
.brand img{display:block;height:28px;width:auto}
header nav{display:flex;gap:24px}
header nav a{
  color:var(--text-secondary);
  font-size:12.5px;font-weight:600;
}
header nav a:hover{color:var(--text-primary)}

/* ---------- shared type ---------- */
.label{
  font-size:11px;font-weight:600;line-height:1.35;letter-spacing:.09em;
  text-transform:uppercase;color:var(--text-secondary);
  margin:0 0 12px;
}
h1{
  font-size:34px;font-weight:600;line-height:1.1;letter-spacing:-.02em;
  margin:0 0 16px;max-width:24ch;
}
h2{
  font-size:19px;font-weight:600;line-height:1.3;letter-spacing:-.01em;
  margin:0 0 24px;max-width:52ch;
}
.card-label{font-size:13px;font-weight:600;line-height:1.4;margin:0 0 4px;color:var(--text-primary)}
.figure{
  font-size:28px;font-weight:600;line-height:1.1;letter-spacing:-.015em;
  font-feature-settings:"tnum","zero";
}

/* ---------- hero ---------- */
.hero{padding:var(--section) 0;border-bottom:1px solid var(--rule)}
.lede{
  font-size:19px;font-weight:400;line-height:1.45;color:var(--text-secondary);
  max-width:60ch;margin:0 0 24px;
}

/* ---------- bands ---------- */
.band{padding:var(--section) 0;border-bottom:1px solid var(--rule)}

/* ---------- problem equation ---------- */
.equation{
  background:var(--surface-raised);border:1px solid var(--rule);border-radius:var(--r-base);
  padding:var(--panel);max-width:420px;margin:0 0 24px;
}
.eq-row{display:flex;align-items:baseline;gap:8px}
.eq-unit{font-size:12.5px;font-weight:600;color:var(--text-secondary)}
.eq-body{font-size:14px;color:var(--text-primary)}
.eq-div{height:1px;background:var(--rule-soft);margin:12px 0}
.eq-rule{height:1px;background:var(--rule);margin:12px 0}
.eq-caption{
  font-size:10.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  color:var(--text-secondary);margin:4px 0 0;
}
.consequence{font-size:14px;color:var(--text-primary);max-width:56ch;margin:0 0 16px}
.pill{
  display:inline-block;margin:0;padding:6px 12px;
  background:var(--priority-wash);color:var(--priority-ink);
  border-radius:var(--r-base);font-size:12.5px;font-weight:600;
}

/* ---------- approach ---------- */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--gutter)}
@media (max-width:820px){.split{grid-template-columns:1fr}}

.funnel{list-style:none;margin:0;padding:0}
.funnel li{display:flex;flex-direction:column}
.stage{
  background:var(--surface-raised);border:1px solid var(--rule);border-radius:var(--r-base);
  padding:12px var(--panel);font-size:14px;font-weight:600;
}
.stage-end{border-color:var(--accent);color:var(--accent)}
.step{
  font-size:10.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  color:var(--text-secondary);padding:8px 0 8px 16px;position:relative;
}
.step::before{content:"↓";position:absolute;left:0;color:var(--text-tertiary)}

.cards{list-style:none;margin:0;padding:0;display:grid;gap:12px;align-content:start}
.cards li{
  background:var(--surface-raised);border:1px solid var(--rule);border-radius:var(--r-base);
  padding:var(--panel);
}
.cards p:last-child{margin:0;color:var(--text-secondary);font-size:13px}

/* ---------- evidence ---------- */
.numbered{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;
}
.numbered li{
  display:flex;gap:12px;align-items:flex-start;
  background:var(--surface-raised);border:1px solid var(--rule);border-radius:var(--r-base);
  padding:var(--panel);
}
.badge{
  flex:none;width:20px;height:20px;border-radius:var(--r-base);
  background:var(--accent-wash);color:var(--accent);
  font-size:10.5px;font-weight:600;
  display:flex;align-items:center;justify-content:center;
}
.numbered p:last-child{margin:0;color:var(--text-secondary);font-size:13px}

/* ---------- contact ---------- */
.contact .mail a{font-size:19px;font-weight:600;letter-spacing:-.01em}

/* ---------- footer ---------- */
footer{padding:24px 0}
footer p{margin:0;font-size:12.5px;color:var(--text-tertiary)}

/* ---------- responsive ---------- */
@media (max-width:640px){
  :root{--gutter:20px;--section:40px}
  h1{font-size:28px}
  header nav{gap:14px}
  header nav a{font-size:11.5px}
}


/* ---------- product shot ---------- */
.shot{margin:40px 0 0}
.shot img{
  display:block;width:100%;height:auto;
  border:1px solid var(--rule);border-radius:var(--r-base);background:var(--surface-raised);
}
.shot figcaption{
  margin-top:8px;font-size:10.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  color:var(--text-secondary);
}

/* ---------- rings: the deck's circle motif ---------- */
.rings{display:flex;align-items:flex-start;gap:20px;flex-wrap:wrap;margin:0 0 28px}
.ring-item{display:flex;flex-direction:column;align-items:center;text-align:center;width:150px}
.ring{
  width:120px;height:120px;border-radius:9999px;
  border:1.5px solid var(--text-tertiary);
  display:flex;align-items:center;justify-content:center;
  background:var(--surface-raised);
}
.ring span{
  font-size:28px;font-weight:600;letter-spacing:-.015em;line-height:1;
  font-feature-settings:"tnum","zero";
}
.ring-accent{border-color:var(--accent)}
.ring-accent span{color:var(--accent)}
.ring-neutral{border-color:#B6BFC9}
.ring-neutral span{color:var(--text-secondary)}
/* copper rings the shape; priority-ink carries the glyphs — copper fails as text on canvas */
.ring-priority{border-color:#D9793E}
.ring-priority span{color:var(--priority-ink)}
.ring-label{
  margin:12px 0 0;font-size:10.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  color:var(--text-secondary);
}
.ring-sub{margin:4px 0 0;font-size:12.5px;color:var(--text-tertiary)}
.op{
  font-size:19px;color:var(--text-tertiary);font-weight:400;
  line-height:120px;flex:none;
}

/* ---------- workflow steps ---------- */
.steps{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:var(--gutter);
}
.steps li{position:relative}
.ring-sm{width:56px;height:56px;margin-bottom:16px}
.ring-sm span{font-size:19px}
.steps p:last-child{margin:0;color:var(--text-secondary);font-size:13px}

/* ---------- pricing ---------- */
.tiers{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;
}
.tiers li{
  background:var(--surface-raised);border:1px solid var(--rule);border-radius:var(--r-base);
  padding:var(--panel);
}
.tier-custom{border-color:#D9793E}
.tier-band{
  margin:0 0 12px;font-size:10.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  color:var(--text-secondary);
}
.tier-price{
  margin:0 0 4px;font-size:28px;font-weight:600;line-height:1.1;letter-spacing:-.015em;
  font-feature-settings:"tnum","zero";
}
.tier-custom .tier-price{color:var(--priority-ink)}
.tier-unit{margin:0;font-size:12.5px;color:var(--text-secondary)}

@media (max-width:640px){
  .ring{width:96px;height:96px}
  .ring span{font-size:22px}
  .ring-item{width:112px}
  .op{line-height:96px}
}