/* Focused Scopes — /pricing utility page. New design system (2026-07-21):
   builds on homepage.css shared components (nav, .wrap, .tiers/.tier cards,
   footer, scrollbar); tokens only. The ROI calculator script is a serialized
   mirror of the repo pricing registry — NEVER restyle by editing it. */

/* You-are-here marker: /pricing does not link to itself. A <span> so it is not
   a link at all; matches .nav-links a / .nav-menu a metrics exactly and only
   differs by colour so the row keeps its rhythm. */
.nav-links .nav-current { color: var(--text-primary); font-size: 14px; font-weight: var(--weight-semibold); }
.nav-menu .nav-current { padding: 12px var(--space-3); border-radius: var(--radius); font-size: 15px;
  font-weight: var(--weight-semibold); color: var(--text-primary); background: var(--accent-dim); }

.wrap { padding-top: calc(var(--space-10) + var(--space-5)); padding-bottom: var(--space-9); }

header h1 { font-size: var(--step-4); font-weight: var(--weight-black);
  letter-spacing: var(--tracking-display); line-height: var(--leading-heading);
  color: var(--text-primary); margin: 0 0 var(--space-3); }
header p.sub { color: var(--text-secondary); font-size: var(--step-1); line-height: var(--leading-body);
  max-width: var(--measure); margin: 0; }

.tiers { margin-top: var(--space-6); }
.tier h3 { font-size: 11px; font-style: normal; font-weight: var(--weight-extrabold);
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--accent); margin: 0; }
.monthly { font-size: var(--step-3); font-weight: var(--weight-black); font-style: normal;
  color: var(--text-primary); letter-spacing: var(--tracking-display); line-height: 1; margin: 0; }
.mo-suffix { font-size: 13px; font-weight: var(--weight-medium); color: var(--text-muted); margin-left: 4px; letter-spacing: normal; }
.annual { color: var(--text-muted); font-size: 12px; font-style: normal; margin: 0; }
.seats { color: var(--text-primary); font-size: 12.5px; font-style: normal; font-weight: var(--weight-semibold); margin: 0; }
.tagline { color: var(--text-muted); font-size: 12px; margin: 0; }
.note { color: var(--text-secondary); font-size: 13px; margin-top: var(--space-5);
  max-width: var(--measure); line-height: 1.6; }
/* Inline phone/email/white-label links inside the notes need a little more
   weight than body copy so they read as tappable at 13px. */
.note a { color: var(--accent-light); font-weight: var(--weight-semibold); }
.note a:hover { color: var(--accent); }

section.roi { margin-top: var(--space-7);
  background: var(--glass-bg-strong); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border); border-radius: var(--radius-xl); padding: var(--space-6);
  box-shadow: var(--elev-3), var(--edge-top); }
section.roi h2 { font-size: var(--step-2); font-weight: var(--weight-extrabold); color: var(--text-primary); margin: 0; }
section.roi p.lead { color: var(--text-secondary); font-size: 13.5px; margin-top: 6px; max-width: 62ch; }
section.roi form { margin-top: var(--space-5); display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-3); }
.field { display: flex; flex-direction: column; gap: 6px; font-size: 11px; font-style: normal;
  font-weight: var(--weight-extrabold); letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase; color: var(--text-muted); }
.field input, .field select {
  background: var(--bg-card); border: none; box-shadow: var(--ring-subtle); color: var(--text-primary);
  border-radius: var(--radius); padding: 11px 13px; font-size: 14px; min-height: 44px;
  font-family: inherit; font-style: normal; font-weight: var(--weight-medium);
  letter-spacing: normal; text-transform: none; outline: none;
  transition: box-shadow var(--dur) var(--ease-out-expo); }
.field input:focus, .field select:focus { box-shadow: var(--ring-accent); }
.field select { appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235a9aa3' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 14px; padding-right: 36px; }

.result { margin-top: var(--space-5); border-top: 1px solid var(--border-subtle); padding-top: var(--space-4); }
.result .row { display: flex; justify-content: space-between; gap: var(--space-4); padding: 6px 0; font-size: 14px; }
.result .row span:first-child { color: var(--text-secondary); }
.result .row span:last-child { color: var(--text-primary); font-style: normal; font-weight: var(--weight-semibold); }
.result .row.total { font-size: 16.5px; font-weight: var(--weight-extrabold); }
.savings-pos { color: var(--accent-light) !important; }
.savings-neg { color: var(--amber) !important; }

a.cta { display: inline-block; margin-top: var(--space-6);
  background: var(--grad); color: var(--bg-deep); font-style: italic; font-weight: var(--weight-bold);
  padding: 15px 30px; border-radius: var(--radius); font-size: 15px; box-shadow: var(--glow);
  transition: transform var(--dur) var(--ease-out-expo), box-shadow var(--dur) var(--ease-out-expo); }
a.cta:hover { transform: var(--lift); box-shadow: var(--elev-3), var(--glow); color: var(--bg-deep); }