/* Sentire Solutions website stylesheet, one file for every page.
   Built on the Sentire design system (the "Sentire Designs" artifact: logo kit, moodboard,
   login pages and the Payroll admin): the Nexus mark, core orange, ink, sand and warm slate,
   the product colours, Instrument Sans for headings and UI, Hanken Grotesk for body text,
   and the espresso brand panel with its dot texture. */

/* ---------- Fonts (self-hosted, Latin subset; the peso sign comes from Hanken Grotesk) ---------- */

@font-face {
  font-family: "Instrument Sans";
  src: url("/assets/fonts/instrument-sans-roman.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("/assets/fonts/instrument-sans-italic.woff2") format("woff2");
  font-weight: 400 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Hanken Grotesk";
  src: url("/assets/fonts/hanken-grotesk-roman.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Hanken Grotesk";
  src: url("/assets/fonts/hanken-grotesk-italic.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

/* ---------- Tokens ---------- */

:root {
  --acc: #e8693a;          /* core orange */
  --acc-press: #c2552f;    /* pressed orange: buttons with white text, orange text on light grounds */
  --acc-deep: #a84826;     /* hover for the pressed orange */
  --acc-soft: #fdeee6;
  --acc-on-dark: #f2a380;
  --ink: #2a2420;
  --muted: #6b6259;        /* warm slate */
  --muted-2: #9b9085;
  --bg: #f6f2ec;
  --sand: #f2ece4;
  --paper: #ffffff;
  --paper-2: #faf7f2;
  --line: #ece6dd;
  --line-strong: #d8cfc2;
  --dark-1: #2e241c;
  --dark-2: #211a15;
  --dark-3: #1b1511;
  --on-dark: #f7f3ef;
  --on-dark-muted: rgba(247, 243, 239, 0.7);
  --on-dark-line: rgba(247, 243, 239, 0.16);
  --ok: #4f9373;

  --books: #c7913d;
  --payroll: #4f9373;
  --tax: #a0627d;
  --pos: #5e7fb1;
  --ledger: #e8693a;       /* the brand kit has no Ledger colour yet; core orange until one is set */
  /* Provisional until the brand kit sets them: matched in lightness and strength to Payroll, POS and Tax,
     with hues halfway between Payroll and POS (teal) and between POS and Tax (violet). */
  --helpdesk: #328f9b;
  --lms: #866da4;

  --font: "Instrument Sans", "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --body: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --t-small: 0.875rem;
  --t-body: 1.0625rem;
  --t-lead: 1.1875rem;
  --t-h3: 1.1875rem;
  --t-h2: clamp(1.875rem, 1.35rem + 1.9vw, 2.75rem);
  --t-h1: clamp(2.25rem, 1.45rem + 2.5vw, 3.25rem);
  --t-display: clamp(2.25rem, 1.5rem + 2.6vw, 3.25rem);

  --wrap: 80rem;
  --gutter: clamp(1.25rem, 0.75rem + 2vw, 2.5rem);
  --section: clamp(3.5rem, 2.5rem + 3.5vw, 5.75rem);
  --r-btn: 10px;
  --r-chip: 10px;
  --r-card: 14px;
  --r-panel: 18px;

  --shadow-card: 0 1px 2px rgba(40, 28, 18, 0.05), 0 8px 24px -18px rgba(40, 28, 18, 0.35);
  --shadow-acc: 0 10px 22px -12px rgba(232, 105, 58, 0.75);

  --tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 14'%3E%3Cpath d='M1.8 7.6c1.5 1.2 2.7 2.6 3.8 4.4C8.4 7.3 11.6 3.8 16.2 1.6' fill='none' stroke='%23e8693a' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ---------- Base ---------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--t-body);
  line-height: 1.6;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection { background: var(--acc-soft); }

img, svg { display: block; max-width: 100%; }

a {
  color: inherit;
  text-decoration-color: rgba(232, 105, 58, 0.7);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.2em;
}
a:hover { text-decoration-color: var(--acc); text-decoration-thickness: 2px; }
.on-dark a { text-decoration-color: rgba(242, 163, 128, 0.75); }
.on-dark a:hover { text-decoration-color: var(--acc-on-dark); }

:focus-visible { outline: 3px solid var(--acc-press); outline-offset: 2px; border-radius: 4px; }
.on-dark :focus-visible { outline-color: var(--acc-on-dark); }

h1, h2, h3, h4 { margin: 0; font-family: var(--font); font-weight: 600; line-height: 1.12; text-wrap: balance; }
h1, h2 { letter-spacing: -0.025em; }
h3 { letter-spacing: -0.015em; }
p { margin: 0 0 1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }
strong { font-weight: 650; }

.label {
  font-family: var(--font); font-size: 0.6875rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted);
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip {
  position: absolute; left: 1rem; top: -4rem; z-index: 50;
  background: var(--ink); color: var(--on-dark);
  padding: 0.6rem 1rem; border-radius: var(--r-btn);
  font: 600 0.95rem/1.2 var(--font); text-decoration: none;
}
.skip:focus { top: 1rem; }

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }

section[id], main[id] { scroll-margin-top: 5.5rem; }

.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 48px; padding: 0.7rem 1.3rem;
  border: 1px solid transparent; border-radius: var(--r-btn);
  font: 600 0.9375rem/1.2 var(--font);
  text-decoration: none; text-align: center; white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--acc-press); color: #fff; box-shadow: var(--shadow-acc); }
.btn-primary:hover { background: var(--acc-deep); }
.btn-quiet { background: var(--paper); color: var(--ink); border-color: var(--line-strong); }
.btn-quiet:hover { background: var(--paper-2); border-color: #c4b9a9; }
.btn-light { background: rgba(255, 255, 255, 0.06); color: var(--on-dark); border-color: rgba(247, 243, 239, 0.28); }
.btn-light:hover { background: rgba(255, 255, 255, 0.12); border-color: rgba(247, 243, 239, 0.45); }
.btn-sm { min-height: 40px; padding: 0.5rem 0.95rem; font-size: 0.875rem; }

.actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }
@media (max-width: 420px) {
  .btn { white-space: normal; }
}
.text-link { font-family: var(--font); font-weight: 600; }

/* ---------- Brand lockups and product chips ---------- */

.brand { display: inline-flex; align-items: center; gap: 0.65rem; text-decoration: none; flex: none; }
.brand > img { width: 32px; height: 32px; }
.brand-name { display: inline-flex; align-items: baseline; gap: 0.3rem; line-height: 1; white-space: nowrap; }
.brand-word { font-family: var(--font); font-weight: 600; font-size: 1.375rem; letter-spacing: -0.02em; }
.brand-sub { font-family: var(--font); font-weight: 500; font-size: 1.375rem; letter-spacing: -0.02em; color: var(--muted); }
.brand-sub.is-product { color: var(--pc, var(--muted)); }
.on-dark .brand-word { color: var(--on-dark); }
.on-dark .brand-sub { color: #b9ad9e; }

.chip {
  --pc: var(--acc);
  width: 40px; height: 40px; flex: none;
  display: grid; place-items: center;
  border-radius: var(--r-chip);
  background: rgba(232, 105, 58, 0.11);
  border: 1px solid rgba(232, 105, 58, 0.26);
}
.chip-sm { width: 34px; height: 34px; border-radius: 9px; }
.chip-books { --pc: var(--books); background: rgba(199, 145, 61, 0.11); border-color: rgba(199, 145, 61, 0.26); }
.chip-payroll { --pc: var(--payroll); background: rgba(79, 147, 115, 0.11); border-color: rgba(79, 147, 115, 0.26); }
.chip-pos { --pc: var(--pos); background: rgba(94, 127, 177, 0.11); border-color: rgba(94, 127, 177, 0.26); }
.chip-tax { --pc: var(--tax); background: rgba(160, 98, 125, 0.11); border-color: rgba(160, 98, 125, 0.26); }
.chip-ledger { --pc: var(--ledger); }
.chip-helpdesk { --pc: var(--helpdesk); background: rgba(50, 143, 155, 0.11); border-color: rgba(50, 143, 155, 0.26); }
.chip-lms { --pc: var(--lms); background: rgba(134, 109, 164, 0.11); border-color: rgba(134, 109, 164, 0.26); }
.glyph { width: 22px; height: 22px; }
.chip-sm .glyph { width: 20px; height: 20px; }
.glyph .g-ink { fill: none; stroke: var(--ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.glyph .g-acc { fill: none; stroke: var(--pc); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.glyph .g-dot { fill: var(--ink); }
.glyph .g-acc-dot { fill: var(--pc); }

/* ---------- Header ---------- */

.site-header {
  position: sticky; top: 0; z-index: 30;
  background: rgba(255, 255, 255, 0.95);
  border-bottom: 1px solid var(--line);
}
@supports (backdrop-filter: blur(8px)) {
  .site-header { background: rgba(255, 255, 255, 0.86); backdrop-filter: saturate(1.4) blur(12px); }
}
.header-row { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: 68px; }

.site-nav { display: flex; align-items: center; gap: clamp(1rem, 0.4rem + 1.6vw, 1.9rem); }
.site-nav a:not(.btn) {
  font-family: var(--font); font-weight: 500; font-size: 0.9375rem; text-decoration: none; color: var(--ink);
  padding: 0.35rem 0; border-bottom: 2px solid transparent;
}
.site-nav a:not(.btn):hover { border-bottom-color: var(--line-strong); }
.site-nav a[aria-current="page"] { border-bottom-color: var(--acc); }

.nav-toggle {
  display: none; align-items: center; gap: 0.55rem;
  min-height: 42px; padding: 0.5rem 0.85rem;
  border: 1px solid var(--line-strong); border-radius: var(--r-btn);
  background: var(--paper); color: var(--ink);
  font: 600 0.9rem/1 var(--font); cursor: pointer;
}
.nav-toggle-bars, .nav-toggle-bars::before, .nav-toggle-bars::after {
  display: block; width: 16px; height: 2px; background: currentColor; border-radius: 1px;
  transition: transform 0.2s ease;
}
.nav-toggle-bars { position: relative; }
.nav-toggle-bars::before, .nav-toggle-bars::after { content: ""; position: absolute; left: 0; }
.nav-toggle-bars::before { top: -5px; }
.nav-toggle-bars::after { top: 5px; }
.nav-open .nav-toggle-bars { background: transparent; }
.nav-open .nav-toggle-bars::before { transform: translateY(5px) rotate(45deg); }
.nav-open .nav-toggle-bars::after { transform: translateY(-5px) rotate(-45deg); }

@media (max-width: 880px) {
  .js-nav .nav-toggle { display: inline-flex; }
  .js-nav .site-nav {
    display: none;
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    padding: 0.25rem var(--gutter) 1.5rem;
    box-shadow: 0 18px 30px -24px rgba(40, 28, 18, 0.5);
  }
  .js-nav.nav-open .site-nav { display: flex; }
  .js-nav .site-nav a:not(.btn) { padding: 0.95rem 0; border-bottom: 1px solid var(--line); font-size: 1.0625rem; }
  .js-nav .site-nav .btn { margin-top: 1.25rem; }
  .site-header:not(.js-nav) .header-row { flex-wrap: wrap; padding-block: 0.75rem; }
  .site-header:not(.js-nav) .site-nav { flex-wrap: wrap; gap: 0.25rem 1.25rem; }
}
@media (max-width: 370px) {
  .header-row { gap: 0.75rem; }
  .brand-word, .brand-sub { font-size: 1.2rem; }
  .nav-toggle { padding-inline: 0.75rem; }
  .nav-toggle-label {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
}

/* ---------- Dark brand panel (hero, Ledger home head, closing band) ---------- */

.brand-panel {
  position: relative; isolation: isolate; overflow: hidden;
  background: linear-gradient(160deg, var(--dark-1) 0%, var(--dark-2) 100%);
  color: var(--on-dark);
}
.brand-panel::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    radial-gradient(rgba(247, 243, 239, 0.13) 1.1px, transparent 1.1px),
    radial-gradient(55% 60% at 88% 0%, rgba(232, 105, 58, 0.2), transparent 65%);
  background-size: 26px 26px, 100% 100%;
  -webkit-mask-image: radial-gradient(130% 110% at 0% 100%, #000 35%, transparent 85%);
          mask-image: radial-gradient(130% 110% at 0% 100%, #000 35%, transparent 85%);
}
.brand-panel h1, .brand-panel h2 { color: var(--on-dark); }
.brand-panel .lead, .brand-panel .hero-note, .brand-panel figcaption, .brand-panel .note { color: var(--on-dark-muted); }

/* ---------- Sections ---------- */

.section { padding-block: var(--section); border-top: 1px solid var(--line); }
.section-flush { border-top: 0; padding-top: 0; }

.section-head {
  display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: 1.25rem 4rem; align-items: end;
  margin-bottom: clamp(2rem, 1.4rem + 2vw, 3.25rem);
}
.section-head h2 { font-size: var(--t-h2); max-width: 20ch; }
.section-head p { margin: 0; color: var(--muted); font-size: var(--t-lead); max-width: 50ch; }
.section-head-solo { grid-template-columns: minmax(0, 1fr); }
.section-head-solo h2 { max-width: 30ch; }
.section-head-solo p { max-width: 62ch; }
@media (max-width: 860px) {
  .section-head { grid-template-columns: minmax(0, 1fr); }
}

.card {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-panel); box-shadow: var(--shadow-card);
}

/* ---------- Front page hero ---------- */

.hero { padding-block: clamp(3rem, 1.75rem + 4.5vw, 6rem) clamp(3.5rem, 2rem + 5vw, 6.5rem); }
.hero-grid {
  display: grid; grid-template-columns: minmax(0, 11fr) minmax(0, 12fr);
  gap: clamp(2.5rem, 0.5rem + 4vw, 4.5rem); align-items: center;
}
.hero h1 { font-size: var(--t-h1); line-height: 1.06; margin-bottom: 1.5rem; }
.hero .lead { font-size: var(--t-lead); max-width: 46ch; margin-bottom: 2rem; }
.hero-note { margin-top: 1.5rem; font-size: 0.9375rem; max-width: 46ch; }
@media (max-width: 1239px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); }
  .hero-copy { max-width: 44rem; }
  .sheet { max-width: 46rem; }
}

/* ---------- The sample sales journal (front page hero) ---------- */

.sheet { margin: 0; }
.sheet-stack { position: relative; isolation: isolate; }
.sheet-stack::before {
  content: ""; position: absolute; z-index: 0;
  inset: 12px -8px -10px 14px;
  background: #e9e1d6;
  border-radius: var(--r-card);
  transform: rotate(1.7deg);
  box-shadow: 0 22px 40px -26px rgba(0, 0, 0, 0.6);
}
.sheet-paper {
  position: relative; z-index: 1;
  background: var(--paper); color: var(--ink);
  border-radius: var(--r-card);
  padding: 1.25rem 1.1rem 4.75rem;
  transform: rotate(-0.6deg);
  box-shadow: 0 34px 70px -34px rgba(0, 0, 0, 0.7), 0 12px 26px -18px rgba(0, 0, 0, 0.45);
}
.sheet-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; padding-bottom: 0.9rem; }
.sheet-book { margin: 0; font-family: var(--font); font-weight: 600; font-size: 1.375rem; letter-spacing: -0.02em; line-height: 1.1; }
.sheet-book span { display: block; font-family: var(--body); font-weight: 500; font-size: 0.8125rem; letter-spacing: 0; color: var(--muted); margin-top: 0.3rem; }
.sheet-taxpayer { margin: 0; text-align: right; font-size: 0.8125rem; line-height: 1.45; color: var(--muted); }
.sheet-taxpayer strong { display: block; color: var(--ink); font-weight: 600; }

.sheet-table {
  width: 100%; border-collapse: collapse;
  font-family: var(--body); font-size: 0.84375rem; line-height: 1.3;
  font-variant-numeric: tabular-nums;
}
.sheet-table th, .sheet-table td {
  padding: 0.6rem 0.45rem; text-align: left; white-space: nowrap;
  border-bottom: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
.sheet-table th:first-child, .sheet-table td:first-child { border-left: 0; padding-left: 0; }
.sheet-table thead th {
  font-family: var(--font); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted);
  border-top: 1.5px solid var(--line-strong);
  border-bottom: 1.5px solid var(--line-strong);
}
.sheet-table .num { text-align: right; }
.sheet-table .col-serial { border-left: 3px double rgba(232, 105, 58, 0.55); }
.sheet-table .serial { color: var(--acc-press); font-weight: 600; letter-spacing: 0.03em; }
.sheet-table .col-tick { width: 1.75rem; min-width: 1.75rem; border-left: 0; padding-inline: 0.35rem 0; }
.sheet-table .tick { width: 18px; height: 14px; max-width: none; }
.sheet-table .tick path { fill: none; stroke: var(--acc); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.sheet-table tfoot th, .sheet-table tfoot td { border-bottom: 0; border-left-color: transparent; padding-top: 0.8rem; font-weight: 700; }
.sheet-table tfoot th { font-weight: 600; }
.sheet-table tfoot .num span {
  position: relative; display: inline-block; padding: 0.15rem 0 0.5rem;
  border-top: 1.5px solid var(--ink);
}
.sheet-table tfoot .num span::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 5px;
  border-top: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink);
  transform-origin: right center;
}

.stamp {
  position: absolute; left: 1.4rem; bottom: 1.1rem;
  display: flex; flex-direction: column; align-items: center;
  padding: 0.45rem 1rem 0.5rem;
  color: var(--acc-press);
  border: 2.5px solid currentColor; border-radius: 9px;
  box-shadow: inset 0 0 0 2px var(--paper), inset 0 0 0 3.5px currentColor;
  transform: rotate(-5deg);
  opacity: 0.9;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='80'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -2.4 2.1'/%3E%3C/filter%3E%3Crect width='160' height='80' filter='url(%23n)'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='80'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -2.4 2.1'/%3E%3C/filter%3E%3Crect width='160' height='80' filter='url(%23n)'/%3E%3C/svg%3E");
}
.stamp-main { font-family: var(--font); font-weight: 700; font-size: 1.4rem; letter-spacing: -0.015em; line-height: 1.05; }
.stamp-sub { font-family: var(--font); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.06em; margin-top: 0.15rem; }

.sheet figcaption { position: relative; z-index: 1; margin-top: 1.6rem; font-size: 0.875rem; max-width: 54ch; }

@media (prefers-reduced-motion: no-preference) {
  .sheet-table tbody tr { animation: post 0.5s ease-out both; animation-delay: calc(0.35s + var(--row, 0) * 0.17s); }
  .sheet-table .tick path { stroke-dasharray: 24; stroke-dashoffset: 24; animation: draw 0.35s ease-out forwards; animation-delay: calc(0.62s + var(--row, 0) * 0.17s); }
  .sheet-table tfoot tr { animation: post 0.5s ease-out both; animation-delay: 1.25s; }
  .sheet-table tfoot .num span::after { animation: rule 0.45s cubic-bezier(0.2, 0.7, 0.2, 1) both; animation-delay: 1.55s; }
  .stamp { animation: stamp 0.32s cubic-bezier(0.25, 1.5, 0.45, 1) both; animation-delay: 2s; }
}
@keyframes post { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes rule { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes stamp {
  0% { opacity: 0; transform: rotate(-5deg) scale(1.7); }
  100% { opacity: 0.9; transform: rotate(-5deg) scale(1); }
}

@media (max-width: 600px) {
  .sheet-table .col-amount { display: none; }
  .sheet-table { font-size: 0.8125rem; }
  .sheet-table th, .sheet-table td { padding-inline: 0.4rem; }
  .sheet-table td.col-customer { white-space: normal; }
  .sheet-table .col-tick { width: 1.5rem; min-width: 1.5rem; padding-inline: 0.25rem 0; }
  .sheet-paper { padding-inline: 0.9rem; transform: none; }
  .sheet-stack::before { transform: rotate(1.2deg); inset: 10px -4px -8px 8px; }
  .sheet-top { flex-direction: column; align-items: flex-start; }
  .sheet-taxpayer { text-align: left; }
}
@media (max-width: 400px) {
  .sheet-table { font-size: 0.75rem; }
  .sheet-table th, .sheet-table td { padding-inline: 0.3rem; }
  .sheet-table .serial { letter-spacing: 0; }
}
@media (max-width: 350px) {
  .sheet-table .col-customer { display: none; }
}

/* ---------- Products (front page) ---------- */

.products {
  --pcols: minmax(0, 3.3fr) minmax(0, 6fr) minmax(0, 2.4fr) minmax(0, 2.8fr);
  padding-inline: 1.75rem;
}
.products-cols {
  display: grid; grid-template-columns: var(--pcols); gap: 2rem;
  padding: 1.1rem 0 0.9rem;
  border-bottom: 1px solid var(--line);
}
.product {
  display: grid; grid-template-columns: var(--pcols); gap: 0.75rem 2rem;
  padding: 1.9rem 0; border-bottom: 1px solid var(--line);
  align-items: start;
}
.product:last-child { border-bottom: 0; }
.product-lead { background: var(--paper-2); padding-inline: 1.75rem; margin-inline: -1.75rem; }
.product-name { display: flex; align-items: center; gap: 0.8rem; }
.product h3 { font-size: 1.375rem; letter-spacing: -0.02em; line-height: 1.15; }
.product h3 .sub { font-weight: 500; color: var(--pc); }
.product-body p { color: var(--muted); max-width: 58ch; }
.product-body .product-fine { margin-top: 0.75rem; font-size: 0.9375rem; color: var(--ink); }
.product-price { margin-top: 0.9rem; color: var(--ink); }
.product-price strong { font-family: var(--font); font-size: 1.375rem; font-weight: 600; letter-spacing: -0.015em; }
.product-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 0.8rem; }
.product-actions .text-link { font-size: 0.9375rem; }

.status { display: inline-flex; align-items: center; gap: 0.6rem; font-family: var(--font); font-weight: 600; font-size: 0.9375rem; line-height: 1.3; color: var(--ink); }
.status::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; }
.status-live::before { background: var(--ok); box-shadow: 0 0 0 3px rgba(79, 147, 115, 0.22); }
.status-soon::before { background: transparent; box-shadow: inset 0 0 0 2px var(--acc), 0 0 0 3px rgba(232, 105, 58, 0.18); }

@media (max-width: 960px) {
  .products { --pcols: minmax(0, 1fr) minmax(0, 1fr); padding-inline: 1.25rem; }
  .products-cols { display: none; }
  .product { grid-template-columns: minmax(0, 1fr) auto; gap: 1rem 1.5rem; padding-block: 1.75rem; }
  .product-name { grid-column: 1; grid-row: 1; }
  .product-status { grid-column: 2; grid-row: 1; align-self: center; }
  .product-body { grid-column: 1 / -1; }
  .product-actions { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.5rem; }
  .product-lead { padding-inline: 1.25rem; margin-inline: -1.25rem; border-radius: 17px 17px 0 0; }
}
@media (max-width: 480px) {
  .product { grid-template-columns: minmax(0, 1fr); }
  .product-status { grid-column: 1; grid-row: auto; }
}

/* ---------- Rules we build by (front page) ---------- */

.rule-list { border-top: 1px solid var(--line-strong); }
.rule-item {
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 5fr) minmax(0, 4fr);
  gap: 1rem 3rem; padding: 2.1rem 0; border-bottom: 1px solid var(--line-strong);
  align-items: start;
}
.rule-item h3 { font-size: clamp(1.375rem, 1.15rem + 0.8vw, 1.75rem); letter-spacing: -0.02em; line-height: 1.15; }
.rule-item p { margin: 0; color: var(--muted); max-width: 52ch; }

.specimen {
  background: var(--paper); border: 1px solid var(--line); border-radius: 12px;
  padding: 0.9rem 1rem; font-family: var(--font); font-size: 0.875rem; line-height: 1.35;
  font-variant-numeric: tabular-nums;
  box-shadow: var(--shadow-card);
}
.specimen table { width: 100%; border-collapse: collapse; }
.specimen th, .specimen td { padding: 0.4rem; text-align: left; border-bottom: 1px solid var(--line); white-space: nowrap; }
.specimen th:first-child, .specimen td:first-child { padding-left: 0; }
.specimen th:last-child, .specimen td:last-child { padding-right: 0; }
.specimen tr:last-child th, .specimen tr:last-child td { border-bottom: 0; }
.specimen th { font-weight: 600; }
.specimen .serial { color: var(--acc-press); font-weight: 600; letter-spacing: 0.03em; }
.specimen .muted { color: var(--muted); white-space: normal; }
.specimen .num { text-align: right; }

.serial-run { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.15rem 1rem; }
.serial-run span {
  display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
  padding: 0.35rem 0; border-bottom: 1px solid var(--line);
  color: var(--acc-press); font-weight: 600; letter-spacing: 0.03em;
}
.serial-run span::after { content: ""; width: 16px; height: 12px; background: var(--tick) no-repeat center / contain; }

.rate-line { display: grid; grid-template-columns: 3.25rem minmax(0, 1fr); gap: 0.75rem; align-items: center; padding: 0.45rem 0; border-bottom: 1px solid var(--line); }
.rate-line:last-child { border-bottom: 0; }
.rate-line b { font-size: 1.375rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1; }
.rate-head { font-weight: 600; margin-bottom: 0.25rem; }

.tie-total span { display: inline-block; padding-bottom: 4px; border-bottom: 4px double var(--ink); }
@media (max-width: 360px) {
  .specimen { padding-inline: 0.75rem; }
  .specimen th, .specimen td { white-space: normal; }
}

@media (max-width: 960px) {
  .rule-item { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .rule-item h3 { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .rule-item { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- About (front page) ---------- */

.about-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 2.5rem 5rem; align-items: start; }
.about-copy h2 { font-size: var(--t-h2); margin-bottom: 1.5rem; max-width: 16ch; }
.about-copy p { font-size: var(--t-lead); max-width: 56ch; }
.about-copy p + p { color: var(--muted); font-size: var(--t-body); }

.facts { margin: 0; padding: 0.4rem 1.5rem; }
.facts > div { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--line); }
.facts > div:last-child { border-bottom: 0; }
.facts dt { font-family: var(--font); font-weight: 600; }
.facts dd { margin: 0; color: var(--muted); }

@media (max-width: 860px) {
  .about-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 420px) {
  .facts > div { grid-template-columns: minmax(0, 1fr); gap: 0.2rem; }
}

/* ---------- FAQ ---------- */

.faq-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 2rem 5rem; align-items: start; }
.faq-grid h2 { font-size: var(--t-h2); max-width: 12ch; }
.faq-intro { margin-top: 1rem; color: var(--muted); max-width: 32ch; }
.faq-list { padding: 0.25rem 1.5rem; }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list details:last-child { border-bottom: 0; }
.faq-list summary {
  position: relative; list-style: none; cursor: pointer;
  padding: 1.2rem 2.75rem 1.2rem 0;
  font-family: var(--font); font-weight: 600; font-size: 1.0625rem; letter-spacing: -0.01em; line-height: 1.4;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after {
  content: ""; position: absolute; right: 0.35rem; top: 50%;
  width: 14px; height: 14px; margin-top: -7px; color: var(--acc);
  background:
    linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat,
    linear-gradient(currentColor, currentColor) center / 2px 100% no-repeat;
  transition: transform 0.2s ease;
}
.faq-list details[open] > summary::after { transform: rotate(45deg); }
.faq-list summary:hover { color: var(--acc-press); }
.faq-answer { padding: 0 2.75rem 1.4rem 0; color: var(--muted); max-width: 64ch; }

@media (max-width: 860px) {
  .faq-grid { grid-template-columns: minmax(0, 1fr); }
  .faq-grid h2, .faq-intro { max-width: none; }
}
@media (max-width: 480px) {
  .faq-list { padding-inline: 1.1rem; }
}

/* ---------- Closing band and footer ---------- */

.cta-band { padding-block: clamp(4rem, 2.75rem + 4.5vw, 6.5rem); }
.cta-mark { width: 64px; height: 64px; margin-bottom: 1.75rem; }
.cta-band h2 { font-size: var(--t-display); line-height: 1.06; max-width: 18ch; margin-bottom: 1.1rem; }
.cta-band p { color: var(--on-dark-muted); font-size: var(--t-lead); max-width: 50ch; margin-bottom: 2rem; }

.site-footer { background: var(--dark-3); color: #c9bfb3; padding-block: 3.5rem 2rem; font-size: 0.9375rem; }
.footer-grid { display: grid; grid-template-columns: minmax(0, 4fr) repeat(3, minmax(0, 2.6fr)); gap: 2.5rem 3rem; }
.footer-brand .brand { margin-bottom: 1rem; }
.footer-brand p { max-width: 34ch; color: #b5a99b; }
.site-footer h2 {
  font-family: var(--font); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted-2); margin-bottom: 1rem;
}
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin: 0.5rem 0; }
.site-footer a { color: #ece4da; text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.footer-base {
  margin-top: 3rem; padding-top: 1.5rem;
  border-top: 1px solid var(--on-dark-line);
  display: flex; flex-wrap: wrap; gap: 0.5rem 2.5rem; justify-content: space-between;
  color: #a8998a; font-size: 0.875rem;
}
.footer-base p { margin: 0; max-width: 70ch; }
@media (max-width: 900px) {
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 460px) {
  .footer-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Ledger pages: page heads ---------- */

.page-head { padding-block: clamp(2.75rem, 1.5rem + 4vw, 5.25rem) clamp(2.5rem, 1.5rem + 3vw, 4.25rem); }
.page-head h1 { font-size: var(--t-h1); line-height: 1.07; max-width: 22ch; margin-bottom: 1.25rem; }
.page-head .lead { font-size: var(--t-lead); color: var(--muted); max-width: 60ch; margin-bottom: 2rem; }
.page-head .lead:last-child { margin-bottom: 0; }
.page-head .note { margin-top: 1.5rem; }
.brand-panel.page-head .lead { color: var(--on-dark-muted); }

.ledger-hero-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 2.5rem 4.5rem; align-items: center; }
@media (max-width: 960px) {
  .ledger-hero-grid { grid-template-columns: minmax(0, 1fr); }
}

.note { font-size: 0.9375rem; color: var(--muted); max-width: 70ch; }

/* A white panel with ticked lines */
.panel {
  background: var(--paper); color: var(--ink); border-radius: var(--r-card);
  padding: 0.6rem 1.4rem;
  box-shadow: 0 34px 70px -34px rgba(0, 0, 0, 0.7), 0 12px 26px -18px rgba(0, 0, 0, 0.45);
}
.ticklist { list-style: none; margin: 0; padding: 0; }
.ticklist li {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: 0.8rem 0; border-bottom: 1px solid var(--line);
  font-family: var(--font); font-weight: 500; font-size: 0.9688rem; line-height: 1.4;
}
.ticklist li:last-child { border-bottom: 0; }
.ticklist li::after { content: ""; flex: none; width: 18px; height: 14px; background: var(--tick) no-repeat center / contain; }

/* Steps: a real sequence, so it is numbered */
.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.steps li { counter-increment: step; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-card); padding: 1.5rem 1.4rem 1.6rem; box-shadow: var(--shadow-card); }
.steps li::before {
  content: counter(step); display: grid; place-items: center;
  width: 38px; height: 38px; margin-bottom: 1.1rem; border-radius: 11px;
  background: var(--acc-soft); color: var(--acc-press);
  font-family: var(--font); font-size: 1.125rem; font-weight: 700;
}
.steps h3 { font-size: var(--t-h3); margin-bottom: 0.5rem; }
.steps p { margin: 0; color: var(--muted); }
@media (max-width: 960px) {
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .steps { grid-template-columns: minmax(0, 1fr); }
}

/* Short items in a grid of cards */
.ruled-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.ruled-grid > div { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-card); padding: 1.5rem 1.4rem; box-shadow: var(--shadow-card); }
.ruled-grid h3 { font-size: 1.1875rem; margin-bottom: 0.6rem; }
.ruled-grid p { margin: 0; color: var(--muted); }
.ruled-grid a { font-weight: 600; color: var(--ink); }
@media (max-width: 960px) {
  .ruled-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .ruled-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Who it is for, matched to a plan */
.segments { padding: 0.25rem 1.5rem; }
.segment {
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr) minmax(0, 3fr);
  gap: 0.5rem 3rem; padding: 1.4rem 0; border-bottom: 1px solid var(--line); align-items: baseline;
}
.segment:last-child { border-bottom: 0; }
.segment h3 { font-size: 1.1875rem; }
.segment p { margin: 0; color: var(--muted); }
.segment-plan { font-family: var(--font); font-weight: 600; }
.after-list { margin-top: 2rem; }
@media (max-width: 860px) {
  .segment { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Pricing ---------- */

.tiers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; align-items: stretch; }
.tier {
  display: flex; flex-direction: column;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-panel);
  padding: 1.6rem 1.4rem 1.5rem; box-shadow: var(--shadow-card);
}
.tier-featured { border: 1.5px solid var(--acc); box-shadow: 0 18px 40px -26px rgba(232, 105, 58, 0.6); }
.tier h2 { font-size: 1.25rem; letter-spacing: -0.015em; }
.tier-for { margin: 0.35rem 0 0; min-height: 3.2em; color: var(--muted); font-size: 0.9375rem; line-height: 1.45; }
.tier-price {
  margin: 1.25rem 0 0.6rem;
  font-family: var(--font); font-size: 2.4rem; font-weight: 600; line-height: 1; letter-spacing: -0.03em;
}
.tier-price small { font-size: 0.9375rem; font-weight: 500; letter-spacing: 0; color: var(--muted); margin-left: 0.15rem; }
.tier-price .from { font-size: 1rem; font-weight: 500; letter-spacing: 0; color: var(--muted); margin-right: 0.3rem; }
.tier-note { font-size: 0.875rem; color: var(--muted); line-height: 1.5; margin: 0; }
.tier ul { list-style: none; padding: 0; margin: 1.25rem 0 1.75rem; font-size: 0.9375rem; line-height: 1.45; }
.tier li { padding: 0.55rem 0; border-top: 1px solid var(--line); }
.tier .btn { margin-top: auto; }
@media (max-width: 1100px) {
  .tiers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .tiers { grid-template-columns: minmax(0, 1fr); }
  .tier-for { min-height: 0; }
}
.after-tiers { margin-top: 1.5rem; }

.table-scroll { overflow-x: auto; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-card); }
.compare { width: 100%; min-width: 760px; border-collapse: collapse; font-size: 0.9375rem; line-height: 1.45; }
.compare th, .compare td { padding: 0.85rem 1rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.compare thead th { background: var(--paper-2); font-family: var(--font); font-size: 1rem; font-weight: 600; border-bottom: 1px solid var(--line-strong); }
.compare tbody th { font-family: var(--font); font-weight: 600; position: sticky; left: 0; background: var(--paper); box-shadow: 1px 0 0 var(--line); }
.compare tbody tr:last-child th, .compare tbody tr:last-child td { border-bottom: 0; }
.compare .no { color: var(--muted); }
.scroll-hint { display: none; margin-top: 0.75rem; font-size: 0.875rem; color: var(--muted); }
@media (max-width: 820px) {
  .scroll-hint { display: block; }
}

/* ---------- Demo tour ---------- */

.tour { list-style: none; margin: 0; padding: 0; counter-reset: tour; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.tour li {
  counter-increment: tour; display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); column-gap: 1rem;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-card); padding: 1.4rem; box-shadow: var(--shadow-card);
}
.tour li::before {
  content: counter(tour); grid-row: span 2; display: grid; place-items: center;
  width: 38px; height: 38px; border-radius: 11px; background: var(--acc-soft); color: var(--acc-press);
  font-family: var(--font); font-size: 1.125rem; font-weight: 700;
}
.tour h3 { font-size: var(--t-h3); margin-bottom: 0.4rem; }
.tour p { margin: 0; color: var(--muted); }
@media (max-width: 760px) {
  .tour { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Legal pages ---------- */

.legal-nav { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 2rem; }
.legal-nav a {
  font-family: var(--font); font-weight: 500; font-size: 0.9375rem; text-decoration: none;
  padding: 0.45rem 0.9rem; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--paper);
}
.legal-nav a:hover { border-color: #c4b9a9; background: var(--paper-2); }
.legal-nav a[aria-current="page"] { background: var(--ink); border-color: var(--ink); color: var(--on-dark); font-weight: 600; }

.prose { max-width: 46rem; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-panel); padding: clamp(1.5rem, 1rem + 2.5vw, 3rem); box-shadow: var(--shadow-card); }
.prose h1 { font-size: var(--t-h2); line-height: 1.1; margin-bottom: 1rem; }
.prose h2 { font-size: 1.3125rem; margin: 2.25rem 0 0.75rem; letter-spacing: -0.015em; }
.prose h3 { font-size: 1.0625rem; margin: 1.75rem 0 0.5rem; }
.prose ul { padding-left: 1.25rem; margin: 0 0 1em; }
.prose li { margin: 0.45rem 0; }
.prose li::marker { color: var(--acc); }
.prose a { font-weight: 600; overflow-wrap: anywhere; }

.draft-note {
  display: block; margin: 0 0 1rem; padding: 0.75rem 1rem;
  background: var(--acc-soft); border-left: 4px solid var(--acc); border-radius: 0 10px 10px 0;
  color: #7f3519; font-size: 0.9375rem;
}

/* ---------- Not found ---------- */

.not-found { padding-block: clamp(4rem, 3rem + 6vw, 9rem); }
.not-found h1 { font-size: var(--t-h1); margin-bottom: 1rem; }
.not-found p { font-size: var(--t-lead); color: var(--muted); max-width: 50ch; margin-bottom: 2rem; }

/* ---------- Print ---------- */

@media print {
  .site-header, .nav-toggle, .cta-band, .skip { display: none !important; }
  body { background: #fff; }
  .brand-panel { background: #fff; color: #000; }
  .brand-panel::before { display: none; }
  .brand-panel h1, .brand-panel h2, .brand-panel .lead { color: #000; }
  .site-footer { background: #fff; color: #000; }
  .site-footer a { color: #000; }
  .sheet-paper, .sheet-stack::before, .panel { box-shadow: none; transform: none; }
}