/* ==========================================================================
   Ledger: precise, structural, audit-grade
   --------------------------------------------------------------------------
   A Swiss grid on white. Rules instead of shadows, tabular figures for every
   number, and the accent used as a marker rather than as decoration. It reads
   as an audit report, which for a compliance buyer is either exactly right or
   slightly cold.

   Palette and typefaces are the Think Smart huisstijl, unchanged. What makes
   this a direction is the geometry, not a second brand.

   The moves that make it Ledger:

     * Nothing is rounded. Radii are zero everywhere, including the buttons.
     * Every figure, deadline, article letter and package level is set with
       tabular figures, so columns of numbers line up.
     * Section heads carry a numbered rule, because on this site the sections
       genuinely are a sequence, scope, assess, plan, build, operate.
     * The accent marks; the incident colour appears only where something is
       actually urgent.
   ========================================================================== */

:root {
  /* Figures line up in columns without changing typeface: Source Sans 3
     carries tabular numerals, which is the part of a monospace that a table
     of deadlines actually needs. */
  --font-mono: var(--font-body);

  --radius-sm: 0;
  --radius: 0;
  --radius-lg: 0;
  --radius-xl: 0;
  --page-max: 1240px;

  --shadow-sm: none;
  --shadow: none;
  --shadow-lg: none;

  --surface-grad: linear-gradient(180deg, #ffffff 0%, var(--surface) 100%);
}

/* Tabular figures wherever numbers are compared down a column. */
.deadline b,
.figure-card b,
.stat-float b,
.trust b,
.tier__price,
.measure__n,
.step__n,
table.data td,
table.data th {
  font-variant-numeric: tabular-nums;
}

h1,
h2,
h3,
h4,
h5 {
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.1;
}

/* Every number on the page is monospaced and tabular, so figures in adjacent
   cards and adjacent table rows line up on the digit rather than drifting. */
.trust b,
.deadline b,
.figure-card b,
.stat-float b,
.stat-row .stat b,
.measure__n,
.measure__letter,
.step__n,
.card__num,
.proof-list .n,
.tier__price,
.tier__size,
.ck-count,
.hero__facts b,
table.data td,
table.data th[scope="row"] {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.eyebrow {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  color: var(--teal-deep);
}

.eyebrow svg {
  display: none;
}

/* A short rule before the label, the way a ruled form marks a field. It was a
   literal comma here, which read as a typo rather than as a marker. */
.eyebrow::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 1px;
  margin-right: 10px;
  vertical-align: middle;
  background: var(--teal-deep);
}

.btn {
  border-radius: 0;
  font-family: var(--font-head);
  font-weight: 600;
  letter-spacing: 0.01em;
}

/* --teal on white carries white text at only 3.0:1. The deep teal is the
   token that passes, and it is what the base stylesheet uses for the same
   reason. Flat rather than gradient, because this direction has no gradients. */
.btn--primary {
  background: var(--teal-deep);
  box-shadow: none;
}

.btn--primary:hover,
.btn--solid:hover,
.btn--white:hover,
.btn--alert:hover {
  transform: none;
}

.btn--primary:hover {
  background: var(--navy);
}

.btn--ghost {
  border-color: var(--ink);
}

/* Rules, not shadows. Cards share edges with the grid around them. */
.card,
.tier,
.measure,
.step,
.deadline,
.cert,
.value,
.loc,
.post,
.mcard,
.form-card,
.table-scroll,
.faq details,
.trust-strip,
.compare__card,
.next-step,
.ck-opt,
.entity-card,
.wizard {
  border-radius: 0;
  box-shadow: none;
  border-color: var(--line);
}

.card--lift:hover,
.tier:hover,
.measure:hover,
.cert:hover,
.value:hover,
.post:hover,
.mcard:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--ink);
}

.card__ico,
.trust__ico,
.value__ico,
.mega__ico,
.loc__pin,
.mcard__ico,
.ck-result__ico {
  border-radius: 0;
  background: var(--teal-tint);
  color: var(--teal-deep);
}

.card__tag,
.tier__flag,
.badge,
.loc .tag,
.footer-office .tag,
.hero__facts li,
.lang__btn,
.mega__feature .pill,
.ck-result__tag {
  border-radius: 0;
  font-family: var(--font-mono);
  letter-spacing: 0.08em;
}

.measure__n,
.ck-opt .k {
  border-radius: 0;
  background: var(--ink);
  color: #fff;
}

.hero__card,
.pagehero {
  border-radius: 0;
}

.hero__bg::after {
  background: linear-gradient(
    100deg,
    rgba(17, 19, 24, 0.94) 0%,
    rgba(17, 19, 24, 0.78) 44%,
    rgba(17, 19, 24, 0.3) 74%,
    rgba(17, 19, 24, 0.06) 100%
  );
}

.hero__rings {
  border-radius: 0;
  border-color: rgba(255, 255, 255, 0.12);
  background: none;
  width: 460px;
  height: 460px;
  transform: translateY(-50%) rotate(45deg);
}

.hero__rings::before,
.hero__rings::after {
  border-radius: 0;
}

.navy-panel,
.compare__card--dark,
.figure-card,
.person,
.wizard__aside,
.cta-band,
.incident-band {
  border-radius: 0;
}

.navy-panel::after,
.figure-card::after,
.compare__card--dark::after,
.person::after,
.wizard__aside::after,
.cta-band::after,
.incident-band::after {
  display: none;
}

.cta-band {
  background: var(--ink);
}

/* The section head gets a rule the width of the column, which is what makes
   the page read as a document rather than as a stack of blocks. */
.head-block {
  border-top: 2px solid var(--ink);
  padding-top: 20px;
}

.head-block--center {
  border-top: none;
  padding-top: 0;
}

table.data {
  font-size: 0.86rem;
}

table.data thead th {
  font-family: var(--font-mono);
  background: var(--ink);
  color: #fff;
  border-bottom-color: var(--ink);
  letter-spacing: 0.06em;
}

table.data tbody tr:hover {
  background: var(--teal-tint);
}

.site-header {
  background: rgba(255, 255, 255, 0.96);
  border-bottom: 1px solid var(--line);
}

.nav__link {
  border-radius: 0;
  font-weight: 600;
  font-size: 0.88rem;
}

.field input,
.field select,
.field textarea {
  border-radius: 0;
  background: #fff;
  border-color: var(--line-2);
}

.logo-grid img {
  filter: grayscale(1) contrast(1.1);
  opacity: 0.5;
}

.site-footer {
  background: var(--ink);
}

.pagehero {
  background: #fff;
  border-bottom: 2px solid var(--ink);
}

.pagehero::after {
  display: none;
}

.pagehero h1::after {
  background: var(--teal);
  width: 100%;
  max-width: 220px;
  height: 2px;
}

.consent {
  border-radius: 0;
}