/* ============================================================
   aijo — pricing, dark theme
   Loaded after style.css, which stays the structural layer.
   This file only changes the palette and the typography, so the
   calculator markup and its script are untouched.
   ============================================================ */

:root {
  /* the index.html palette, mapped onto the tokens style.css already uses */
  --paper: #050d1a;
  --paper-2: #0a1830;
  --ink: #f0ece4;
  --ink-soft: #8898b0;
  --hairline: rgba(255, 255, 255, 0.10);
  --accent: #f0622a;
  --accent-2: #ff8c55;
  --brand-grad: linear-gradient(90deg, #f0622a 0%, #ff8c55 55%, #ffc4a0 100%);
  /* the font tokens now live in style.css, pointing at the Google Fonts
     that index.html loads too */

  --navy-2: #071224;
  --oline: rgba(240, 98, 42, 0.25);
}

body { font-weight: 300; }

::selection { background: var(--accent); color: #fff; }

/* mono here is Barlow Condensed, so it wants the wider tracking the
   kickers on index.html use */
.mono { letter-spacing: 0.16em; }

/* ---------- header ---------- */
.site-nav a::after { background: var(--accent); }

.head-cta {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.head-cta:hover {
  background: transparent;
  color: var(--accent);
}

/* ---------- headings ---------- */
.pricing-page h1 {
  font-family: "Barlow Condensed", var(--font-sans);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 0.93;
}

/* the brand stays lowercase even though the headline is uppercased */
.pricing-page h1 .brand { text-transform: lowercase; }

.calc-name,
.calc .compare h2 {
  font-family: "Barlow Condensed", var(--font-sans);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.calc .centre .amount {
  font-family: "Barlow Condensed", var(--font-sans);
  font-weight: 900;
}

/* ---------- cards and panels ---------- */
.calc-card {
  background: var(--navy-2);
  border-color: rgba(255, 255, 255, 0.08);
}

.calc-summary {
  background: var(--navy-2);
  border-color: var(--oline);
}

/* ---------- controls ---------- */
.calc .slider-bg { background: #1b2b45; }

.calc input[type=range]::-webkit-slider-thumb {
  background: var(--paper);
  border-color: var(--accent);
}

.calc input[type=range]::-moz-range-thumb {
  background: var(--paper);
  border-color: var(--accent);
}

.calc input[type=number] {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.12);
}

.calc input[type=number]:focus-visible { border-color: var(--accent); }

.calc .terms button:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.calc .terms button.on {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* ---------- totals ---------- */
.calc .lines { border-top-color: rgba(255, 255, 255, 0.22); }
.calc .line.total { border-top-color: rgba(255, 255, 255, 0.22); }

.calc-cta {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.calc-cta:hover {
  background: transparent;
  color: var(--accent);
}

/* ---------- comparison ---------- */
.calc .bar { background: rgba(255, 255, 255, 0.06); }
.calc .comp-bar i { background: #2a3a55; }

.calc .saving-callout {
  background: rgba(240, 98, 42, 0.10);
  border-color: var(--oline);
  color: var(--ink);
}

/* ---------- type system, matched to index.html ----------
   Condensed is for headings, tags and short uppercase labels.
   Anything that reads as a sentence goes in Barlow, the way body
   copy does on the index page. */
.calc-unit,
.calc .terms-note,
.calc .compare-note,
.calc .ring-note,
.calc-cta-note,
.calc-foot,
.pricing-sub,
.foot-meta {
  font-family: var(--font-sans);
  letter-spacing: 0.01em;
  text-transform: none;
}

.calc .terms-note,
.calc-foot,
.calc-cta-note { line-height: 1.7; }

/* the form controls were falling back to the browser default */
.calc input,
.calc button,
.calc select { font-family: inherit; }

.calc input[type=number] { font-family: var(--font-mono); }