@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,450;9..144,500;9..144,600;9..144,700&family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
  --bg: #F6F1E3;
  --surface: #FFFFFF;
  --surface-2: #EFE6CC;
  --surface-3: #E6D9B3;
  --ink: #16233F;
  --ink-soft: #56617E;
  --ink-faint: #8C93A9;
  --accent: #B27F12;
  --accent-strong: #8E640D;
  --accent-soft: #E9C878;
  --accent-ink: #453000;
  --on-accent: #1B1200;
  --border: #E0D3A9;
  --line: rgba(22,35,63,0.12);
  --shadow: rgba(22,35,63,0.16);
  --radius-s: 6px;
  --radius-m: 12px;
  --radius-l: 20px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: 'Fraunces', Georgia, 'Times New Roman', serif; font-weight: 600; text-wrap: balance; margin: 0; color: var(--ink); }
h1 { font-size: clamp(2.15rem, 4.4vw, 3.4rem); line-height: 1.08; letter-spacing: -0.01em; }
h2 { font-size: clamp(1.55rem, 2.6vw, 2.05rem); line-height: 1.18; }
h3 { font-size: 1.2rem; line-height: 1.3; }
p { margin: 0; color: var(--ink-soft); }
a { color: inherit; }
.num { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-variant-numeric: tabular-nums; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 0.5em;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--accent-strong);
}
.eyebrow::before { content: ""; width: 1.3em; height: 1px; background: var(--accent-strong); display: inline-block; }

.wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.page-section { padding: 76px 0; }
.page-section.tight { padding: 56px 0; }

/* ---------- Header / Nav ---------- */
.site-header {
  position: sticky; top: 0; z-index: 40;
  background: rgba(246,241,227,0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.header-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 14px 24px; max-width: 1120px; margin: 0 auto;
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; cursor: pointer; background: none; border: none; padding: 0; }
.brand-mark { flex-shrink: 0; color: var(--accent); }
.brand-mark img { display: block; height: 34px; width: auto; }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-name { font-family: 'Fraunces', serif; font-weight: 700; font-size: 1.12rem; color: var(--ink); letter-spacing: -0.01em; }
.brand-sub { font-family: 'IBM Plex Mono', monospace; font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); }

nav.primary-nav { display: flex; align-items: center; gap: 4px; }
.nav-link {
  font-family: 'IBM Plex Sans', sans-serif; font-size: 0.92rem; font-weight: 500;
  color: var(--ink-soft); background: none; border: none; cursor: pointer;
  padding: 9px 14px; border-radius: var(--radius-s); position: relative;
  text-decoration: none; display: inline-block;
}
.nav-link:hover { color: var(--ink); background: var(--surface-2); }
.nav-link[aria-current="page"] { color: var(--ink); font-weight: 600; }
.nav-link[aria-current="page"]::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 3px; height: 2px; background: var(--accent);
}
.header-actions { display: flex; align-items: center; gap: 10px; }
.nav-toggle {
  display: none; width: 40px; height: 40px; align-items: center; justify-content: center;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-s); cursor: pointer; color: var(--ink);
}

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: 'IBM Plex Sans', sans-serif; font-weight: 600; font-size: 0.94rem;
  padding: 12px 22px; border-radius: 999px; border: 1px solid transparent; cursor: pointer;
  text-decoration: none; white-space: nowrap;
}
.btn:focus-visible, .nav-link:focus-visible, a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}
.btn-gold { background: var(--accent); color: var(--on-accent); box-shadow: 0 1px 0 rgba(0,0,0,0.06); }
.btn-gold:hover { background: var(--accent-strong); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--border); }
.btn-ghost:hover { background: var(--surface-2); }
.btn-outline { background: transparent; color: var(--accent-strong); border-color: var(--accent-soft); }
.btn-outline:hover { background: var(--accent-soft); }
.btn-sm { padding: 9px 16px; font-size: 0.85rem; }
.btn-block { width: 100%; }

/* ---------- Language switcher (Google Website Translator) ---------- */
.gtranslate { display: flex; align-items: center; min-width: 40px; }
.gtranslate .goog-te-gadget { font-family: 'IBM Plex Sans', sans-serif !important; font-size: 0 !important; color: transparent !important; }
.gtranslate .goog-te-gadget .goog-te-combo {
  font-size: 0.82rem !important; font-family: 'IBM Plex Sans', sans-serif !important; color: var(--ink) !important;
  background: var(--surface) !important; border: 1px solid var(--border) !important; border-radius: var(--radius-s) !important;
  padding: 7px 8px !important; cursor: pointer; margin: 0 !important;
}
.gtranslate .goog-te-gadget img { display: none !important; }
.goog-te-banner-frame { display: none !important; }
body { top: 0 !important; }
.goog-tooltip, .goog-tooltip:hover { display: none !important; }
.goog-text-highlight { background: none !important; box-shadow: none !important; }

/* ---------- Ledger ruled texture ---------- */
.ruled {
  background-image: repeating-linear-gradient(to bottom, transparent, transparent 27px, var(--line) 28px);
}

/* ---------- Hero ---------- */
.hero { padding: 64px 0 40px; }
.hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center; }
.hero-copy { display: flex; flex-direction: column; gap: 20px; }
.hero-copy p.lead { font-size: 1.08rem; max-width: 46ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }

.hero-visual { position: relative; }
.ledger-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-l);
  box-shadow: 0 18px 40px -20px var(--shadow); overflow: hidden;
}
.ledger-card-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 20px; background: var(--ink); color: var(--bg);
}
.ledger-card-head .dot-row { display: flex; gap: 6px; }
.ledger-card-head .dot-row span { width: 8px; height: 8px; border-radius: 50%; background: var(--accent-soft); opacity: 0.85; }
.ledger-card-head .title { font-family: 'IBM Plex Mono', monospace; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.85; }
table.ledger { width: 100%; border-collapse: collapse; font-size: 0.86rem; }
table.ledger th {
  text-align: left; font-family: 'IBM Plex Mono', monospace; font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-faint); font-weight: 600; padding: 12px 16px 8px; border-bottom: 1px solid var(--border);
}
table.ledger td { padding: 10px 16px; border-bottom: 1px solid var(--line); color: var(--ink); }
table.ledger tr:last-child td { border-bottom: none; }
table.ledger td.amt, table.ledger th.amt { text-align: right; }
.ledger-foot { padding: 12px 20px 16px; font-size: 0.76rem; color: var(--ink-faint); font-style: italic; border-top: 1px dashed var(--border); }

.seal { position: absolute; right: -18px; bottom: -26px; z-index: 5; }
.seal-ring {
  width: 116px; height: 116px; border-radius: 50%; transform: rotate(-9deg);
  border: 2px dashed var(--accent); background: var(--bg);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  box-shadow: 0 10px 24px -12px var(--shadow);
  position: relative;
}
.seal-ring::before {
  content: ""; position: absolute; inset: 7px; border: 1px solid var(--accent); border-radius: 50%; opacity: 0.6;
}
.seal-symbol { font-family: 'Fraunces', serif; font-weight: 700; font-size: 1.5rem; color: var(--accent-strong); }
.seal-text { font-family: 'IBM Plex Mono', monospace; font-size: 0.5rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-strong); text-align: center; line-height: 1.3; }

/* ---------- Chips ---------- */
.chip-row { display: flex; flex-wrap: wrap; gap: 10px; }
.chip {
  font-size: 0.84rem; font-weight: 500; color: var(--ink-soft);
  background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 8px 16px;
}

/* ---------- Illustrations ---------- */
.illus-banner {
  display: flex; align-items: center; gap: 32px; padding: 36px 40px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-l);
}
.illus-banner svg { flex-shrink: 0; }
.illus-banner .illus-copy { display: flex; flex-direction: column; gap: 8px; }
.illus-banner .illus-copy h3 { font-size: 1.1rem; }
.illus-banner .illus-copy p { font-size: 0.92rem; }
.illus-side { display: flex; align-items: center; gap: 36px; }
.illus-side.reverse { flex-direction: row-reverse; }
.illus-side svg { flex-shrink: 0; }
.illus-side .illus-copy { flex: 1; display: flex; flex-direction: column; gap: 10px; }

/* ---------- Feature grid ---------- */
.section-head { display: flex; flex-direction: column; gap: 12px; max-width: 62ch; margin-bottom: 40px; }
.grid-features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.feature-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-m);
  padding: 24px; display: flex; flex-direction: column; gap: 12px;
}
.feature-icon {
  width: 40px; height: 40px; border-radius: var(--radius-s); background: var(--accent-soft);
  display: flex; align-items: center; justify-content: center; color: var(--accent-strong); flex-shrink: 0;
}
.feature-card h3 { font-size: 1.06rem; }
.feature-card p { font-size: 0.92rem; }

/* ---------- Steps ---------- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; counter-reset: step; }
.step { display: flex; flex-direction: column; gap: 10px; padding-top: 14px; border-top: 2px solid var(--border); }
.step .step-no { font-family: 'IBM Plex Mono', monospace; font-size: 0.82rem; color: var(--accent-strong); font-weight: 600; }
.step h3 { font-size: 1rem; }
.step p { font-size: 0.88rem; }

/* ---------- CTA band ---------- */
.cta-band {
  background: var(--ink); color: var(--bg); border-radius: var(--radius-l);
  padding: 40px 44px; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
}
.cta-band h2 { color: var(--bg); }
.cta-band p { color: rgba(246,241,227,0.7); }
.cta-band-copy { display: flex; flex-direction: column; gap: 8px; max-width: 46ch; }

/* ---------- Alt sections ---------- */
.section-alt { background: var(--surface-2); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }

/* ---------- About page ---------- */
.grid-two { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.who-list { display: flex; flex-direction: column; gap: 0; border-top: 1px solid var(--border); }
.who-list li { list-style: none; display: flex; align-items: baseline; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--border); }
.who-list .who-no { font-family: 'IBM Plex Mono', monospace; color: var(--ink-faint); font-size: 0.8rem; }
.who-list strong { color: var(--ink); }
.who-list span.desc { color: var(--ink-soft); font-size: 0.92rem; }

/* ---------- Pricing ---------- */
.price-table { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-l); overflow: hidden; }
.price-table thead th {
  background: var(--ink); color: var(--bg); text-align: left; font-family: 'IBM Plex Mono', monospace;
  font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600; padding: 16px 22px;
}
.price-table thead th.amt, .price-table td.amt { text-align: right; }
.price-table tbody td { padding: 20px 22px; border-bottom: 1px solid var(--border); vertical-align: top; }
.price-table tbody tr:last-child td { border-bottom: none; }
.price-table .item-name { font-family: 'Fraunces', serif; font-weight: 600; font-size: 1.05rem; color: var(--ink); }
.price-table .item-note { font-size: 0.84rem; color: var(--ink-soft); margin-top: 4px; display: block; }
.price-table .item-amt { font-family: 'IBM Plex Mono', monospace; font-size: 1.15rem; font-weight: 600; color: var(--ink); white-space: nowrap; }
.price-table .item-tag { font-family: 'IBM Plex Mono', monospace; font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-strong); display: block; margin-top: 6px; }
.price-table tr.total td { background: var(--surface-2); }
.price-table tr.total .item-amt { font-size: 1.4rem; }
.price-table tr.renewal td { background: var(--accent-soft); border-top: 2px dashed var(--accent); }

.includes { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.includes ul { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.includes li { display: flex; gap: 10px; align-items: flex-start; font-size: 0.92rem; color: var(--ink-soft); }
.includes li svg { flex-shrink: 0; margin-top: 3px; color: var(--accent-strong); }

/* ---------- Contact ---------- */
.contact-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 32px; align-items: start; }
.contact-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-l); padding: 28px;
  display: flex; flex-direction: column; gap: 20px;
}
.contact-row { display: flex; gap: 14px; align-items: flex-start; }
.contact-row .ic { width: 36px; height: 36px; border-radius: var(--radius-s); background: var(--accent-soft); color: var(--accent-strong); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.contact-row .label { font-family: 'IBM Plex Mono', monospace; font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 3px; }
.contact-row .value { font-size: 0.98rem; color: var(--ink); font-weight: 500; }
.contact-row .value a { text-decoration: none; border-bottom: 1px solid var(--border); }
.contact-row .value a:hover { border-color: var(--accent); color: var(--accent-strong); }
.hours-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.hours-table td { padding: 6px 0; color: var(--ink-soft); }
.hours-table td:last-child { text-align: right; color: var(--ink); font-weight: 500; font-family: 'IBM Plex Mono', monospace; }

.whatsapp-quick {
  display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: var(--radius-m);
  background: var(--accent-soft); border: 1px solid var(--accent-soft); text-decoration: none; color: var(--accent-ink);
}
.whatsapp-quick strong { display: block; font-size: 0.94rem; }
.whatsapp-quick span { font-size: 0.8rem; opacity: 0.85; }

.enquiry-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-l); padding: 30px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 18px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field.full { grid-column: 1 / -1; }
.field label { font-size: 0.82rem; font-weight: 600; color: var(--ink); }
.field .opt { font-weight: 400; color: var(--ink-faint); }
.field input, .field select, .field textarea {
  font-family: 'IBM Plex Sans', sans-serif; font-size: 0.94rem; padding: 11px 13px;
  border: 1px solid var(--border); border-radius: var(--radius-s); background: var(--bg); color: var(--ink);
}
.field textarea { resize: vertical; min-height: 90px; }
.form-error { font-size: 0.82rem; color: #B3261E; min-height: 1.1em; }
.form-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
.form-hint { font-size: 0.8rem; color: var(--ink-faint); margin-top: 12px; }
.send-status { font-size: 0.86rem; color: var(--accent-strong); margin-top: 12px; min-height: 1.2em; }

/* ---------- Footer ---------- */
footer.site-footer { background: var(--ink); color: var(--bg); padding: 52px 0 28px; margin-top: 40px; }
.footer-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 40px; }
.footer-brand { display: flex; flex-direction: column; gap: 12px; max-width: 34ch; }
.footer-brand .brand-name { color: var(--bg); }
.footer-brand p { color: rgba(246,241,227,0.65); font-size: 0.9rem; }
.footer-col h4 { font-family: 'IBM Plex Mono', monospace; font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(246,241,227,0.55); margin: 0 0 14px; }
.footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.footer-col a, .footer-col button {
  background: none; border: none; padding: 0; text-align: left; cursor: pointer; text-decoration: none;
  color: rgba(246,241,227,0.85); font-size: 0.9rem; font-family: inherit;
}
.footer-col a:hover, .footer-col button:hover { color: var(--accent-soft); }
.footer-bottom {
  margin-top: 44px; padding-top: 20px; border-top: 1px solid rgba(246,241,227,0.18);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px;
  font-size: 0.8rem; color: rgba(246,241,227,0.55);
}

@media (max-width: 900px) {
  nav.primary-nav { position: fixed; inset: 62px 16px auto 16px; flex-direction: column; align-items: stretch;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-m);
    padding: 8px; box-shadow: 0 18px 40px -14px var(--shadow); display: none; gap: 2px; }
  nav.primary-nav.open { display: flex; }
  .nav-link { text-align: left; padding: 12px 14px; }
  .nav-link[aria-current="page"]::after { display: none; }
  .nav-link[aria-current="page"] { background: var(--accent-soft); border-radius: var(--radius-s); }
  .nav-toggle { display: flex; }
  .header-actions .btn-gold.header-cta { display: none; }
  .hero-grid, .grid-two, .contact-grid, .includes { grid-template-columns: 1fr; }
  .grid-features { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .form-grid { grid-template-columns: 1fr; }
  .seal { display: none; }
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .cta-band { flex-direction: column; align-items: flex-start; }
  .illus-side, .illus-side.reverse { flex-direction: column; }
  .illus-banner { flex-direction: column; text-align: center; }
}
@media (max-width: 560px) {
  .grid-features { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .page-section { padding: 52px 0; }
}

/* ============================================================
   Real product screenshots.
   Framed like a browser window so a visitor reads them as
   "this is the actual software", not as an illustration.
   ============================================================ */
.shots {
  display: grid;
  gap: 28px;
  margin-top: 28px;
}
@media (min-width: 900px) {
  .shots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* The first shot is the persuasive one -- give it the full width. */
  .shots .shot:first-child { grid-column: 1 / -1; }
}

.shot {
  margin: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-m);
  overflow: hidden;
  box-shadow: 0 2px 10px var(--shadow);
}
.shot img {
  display: block;
  width: 100%;
  height: auto;
  border-bottom: 1px solid var(--border);
  /* The screenshots are light-on-light; a hairline keeps the window edge
     visible against the cream page background. */
}
.shot figcaption {
  padding: 16px 18px 18px;
  font-size: 0.94rem;
  line-height: 1.55;
  color: var(--ink-soft);
}
.shot figcaption strong {
  display: block;
  color: var(--ink);
  font-size: 1.02rem;
  margin-bottom: 4px;
}

/* Telugu word used as a small tag beside an English heading. */
.te-tag {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--accent-strong);
  font-size: 0.78rem;
  font-weight: 600;
  vertical-align: middle;
}

/* ============================================================
   "Three ways the data gets in" — each route is a small
   left-to-right flow diagram over an explanation. A diagram is
   the right visual here rather than a screenshot: the point is
   the JOURNEY (paper -> camera -> filled grid), which no single
   screen can show.
   ============================================================ */
.routes {
  display: grid;
  gap: 22px;
  margin-top: 28px;
}
@media (min-width: 1000px) {
  .routes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.route {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-m);
  padding: 22px 22px 20px;
  display: flex;
  flex-direction: column;
}
.route h3 {
  margin: 18px 0 8px;
  font-size: 1.12rem;
  line-height: 1.3;
}
.route > p {
  color: var(--ink-soft);
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 0 0 14px;
}

.route-flow {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 6px;
  padding: 18px 6px 16px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-s);
}
.flow-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  flex: 0 1 auto;
  min-width: 0;
}
.flow-step b {
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--ink-soft);
  text-align: center;
}
.flow-step svg { display: block; }
/* Nudge the arrows onto the icons' vertical centre rather than the
   caption text below them. */
.flow-arrow {
  flex: 0 0 auto;
  padding-top: 18px;
  opacity: 0.9;
}

.route-points {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
  display: grid;
  gap: 9px;
}
.route-points li {
  position: relative;
  padding-left: 20px;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--ink-soft);
}
.route-points li::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 0.55em;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--accent-soft);
}
.route-points strong { color: var(--ink); }

/* The honest caveat under each route — deliberately quieter than the
   selling points above it, but present. */
.route-note {
  margin: auto 0 0;
  padding-top: 12px;
  border-top: 1px dashed var(--border);
  font-size: 0.83rem;
  line-height: 1.55;
  color: var(--ink-faint);
}

/* ============================================================
   SIX-ITEM NAV
   Adding Videos and Demo pushes the header past its width on
   smaller laptops. Tighten the links a little before the
   mobile breakpoint takes over rather than letting them wrap.
   ============================================================ */
@media (max-width: 1150px) and (min-width: 901px) {
  .nav-link { padding: 9px 9px; font-size: 0.87rem; }
  .header-row { gap: 10px; }
  .gtranslate { min-width: 0; }
  /* Enquire Now goes first when space runs out: Contact is still in
     the nav, and every page carries its own Enquire button. The Live
     Demo button is the one that has to survive. */
  .header-actions .btn-gold.header-cta { display: none; }
}

/* The Live Demo button. Unlike Enquire Now it stays visible on a
   phone -- trying the software is the one thing a visitor can do
   immediately, and it is the reason the button exists. */
.btn-demo {
  background: var(--surface);
  color: var(--accent-strong);
  border-color: var(--accent);
  gap: 7px;
}
.btn-demo:hover { background: var(--accent-soft); color: var(--accent-ink); }
.btn-demo .live-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #2E9E5B; flex-shrink: 0;
  box-shadow: 0 0 0 3px rgba(46,158,91,0.18);
}
@media (max-width: 900px) {
  .header-actions .btn-demo { display: inline-flex; }
}
@media (max-width: 400px) {
  .header-actions .btn-demo .btn-demo-long { display: none; }
}
/* Smallest phones still in use (320px): the brand strapline and
   some button padding go, so the header never scrolls sideways. */
@media (max-width: 345px) {
  .brand-sub { display: none; }
  .header-actions .btn-demo { padding: 8px 12px; }
  .header-row { padding-left: 16px; padding-right: 16px; gap: 8px; }
}

/* ============================================================
   VIDEO PORTFOLIO
   The films are 1080x1920 vertical reels made for WhatsApp and
   Instagram, so they are shown in a phone-shaped frame rather
   than a widescreen player -- a letterboxed 16:9 box around a
   vertical video looks like a mistake.
   ============================================================ */
.reels { display: grid; grid-template-columns: 1fr; gap: 28px; }
@media (min-width: 860px) { .reels { grid-template-columns: 1fr 1fr; gap: 32px; } }

.reel {
  display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-l); overflow: hidden;
  box-shadow: 0 18px 40px -24px var(--shadow);
}
.reel-media {
  display: flex; justify-content: center;
  padding: 26px 20px 22px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
}
/* The phone frame: a dark bezel with a rounded screen inside. */
.reel-phone {
  position: relative;
  width: 100%; max-width: 268px;
  padding: 10px;
  background: var(--ink);
  border-radius: 26px;
  box-shadow: 0 14px 30px -14px var(--shadow);
}
.reel-phone::before {
  content: ""; position: absolute; top: 4px; left: 50%; transform: translateX(-50%);
  width: 54px; height: 4px; border-radius: 999px; background: rgba(246,241,227,0.35);
}
.reel-phone video {
  display: block; width: 100%; height: auto; aspect-ratio: 9 / 16;
  border-radius: 17px; background: var(--ink);
}
.reel-body { display: flex; flex-direction: column; gap: 14px; padding: 24px 26px 26px; flex: 1; }
.reel-title { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.reel-title h3 { font-size: 1.15rem; }
.reel-meta {
  font-family: 'IBM Plex Mono', monospace; font-size: 0.7rem; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--ink-faint); white-space: nowrap;
}
.reel-body > p { font-size: 0.93rem; }

/* What happens, second by second. Honest chapter list rather than
   marketing copy -- a buyer deciding whether to spend 25 seconds. */
.beats { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0; }
.beats li {
  display: flex; gap: 14px; align-items: baseline;
  padding: 9px 0; border-bottom: 1px solid var(--line);
  font-size: 0.89rem; color: var(--ink-soft); line-height: 1.5;
}
.beats li:last-child { border-bottom: none; }
.beats .t {
  font-family: 'IBM Plex Mono', monospace; font-size: 0.76rem;
  color: var(--accent-strong); font-weight: 600; flex-shrink: 0; min-width: 3.4em;
}
.beats strong { color: var(--ink); font-weight: 600; }

.reel-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; padding-top: 6px; }

/* ---------- Print material row ---------- */
.print-row { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 760px) { .print-row { grid-template-columns: 1fr 1fr; } }
.print-item {
  display: flex; gap: 20px; align-items: center;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-l); padding: 20px 22px;
}
.print-item img {
  width: 88px; height: auto; flex-shrink: 0;
  border: 1px solid var(--border); border-radius: var(--radius-s);
  background: var(--surface);
}
.print-item .print-copy { display: flex; flex-direction: column; gap: 6px; }
.print-item h3 { font-size: 1rem; }
.print-item p { font-size: 0.86rem; }
.print-links { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; font-size: 0.85rem; }
.print-links a { color: var(--accent-strong); text-decoration: none; border-bottom: 1px solid var(--accent-soft); }
.print-links a:hover { border-color: var(--accent-strong); }

/* ============================================================
   LIVE DEMO PAGE
   ============================================================ */
.demo-hero { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 48px; align-items: center; padding: 60px 0 20px; }
@media (max-width: 900px) { .demo-hero { grid-template-columns: 1fr; gap: 34px; } }
.demo-hero-copy { display: flex; flex-direction: column; gap: 18px; }

/* The credential card is styled to look like the login box the
   visitor is about to see, so the two read as the same thing. */
.cred-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-l); overflow: hidden;
  box-shadow: 0 18px 40px -20px var(--shadow);
}
.cred-head {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 22px; background: var(--ink); color: var(--bg);
  font-family: 'IBM Plex Mono', monospace; font-size: 0.72rem;
  letter-spacing: 0.1em; text-transform: uppercase;
}
.cred-head .live-dot { width: 8px; height: 8px; border-radius: 50%; background: #58C68A; }
.cred-body { padding: 24px 22px; display: flex; flex-direction: column; gap: 16px; }
.cred-field { display: flex; flex-direction: column; gap: 5px; }
.cred-field .label {
  font-family: 'IBM Plex Mono', monospace; font-size: 0.66rem;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint);
}
.cred-field .value {
  font-family: 'IBM Plex Mono', monospace; font-size: 1.02rem; font-weight: 600; color: var(--ink);
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-s);
  padding: 10px 14px; word-break: break-all;
}
.cred-note { font-size: 0.83rem; color: var(--ink-faint); line-height: 1.55; border-top: 1px dashed var(--border); padding-top: 14px; }

/* Numbered "things to try" list. */
.try-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 0; border-top: 1px solid var(--border); }
@media (min-width: 780px) { .try-list { grid-template-columns: 1fr 1fr; column-gap: 40px; } }
.try-list li { display: flex; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--border); align-items: flex-start; }
.try-list .n {
  font-family: 'IBM Plex Mono', monospace; font-size: 0.82rem; font-weight: 600;
  color: var(--accent-strong); flex-shrink: 0; padding-top: 2px;
}
.try-list .try-copy { display: flex; flex-direction: column; gap: 4px; }
.try-list strong { color: var(--ink); font-size: 0.97rem; }
.try-list span { font-size: 0.88rem; color: var(--ink-soft); line-height: 1.55; }

/* What is in the sample data -- a plain table, because that is
   what a financier reading it will compare against his own book. */
.sample-table { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-l); overflow: hidden; }
.sample-table thead th {
  text-align: left; font-family: 'IBM Plex Mono', monospace; font-size: 0.66rem;
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-faint); font-weight: 600;
  padding: 14px 20px; background: var(--surface-2); border-bottom: 1px solid var(--border);
}
.sample-table tbody td { padding: 14px 20px; border-bottom: 1px solid var(--line); font-size: 0.9rem; color: var(--ink-soft); vertical-align: top; }
.sample-table tbody tr:last-child td { border-bottom: none; }
.sample-table td:first-child { color: var(--ink); font-weight: 500; white-space: nowrap; }
.sample-table td.amt { text-align: right; font-family: 'IBM Plex Mono', monospace; color: var(--ink); white-space: nowrap; }
.sample-table thead th.amt { text-align: right; }
.table-scroll { overflow-x: auto; }

/* The honest warnings box. Deliberately plain, not alarming. */
.notice {
  background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--accent);
  border-radius: var(--radius-m); padding: 22px 26px;
  display: flex; flex-direction: column; gap: 10px;
}
.notice h3 { font-size: 1.02rem; }
.notice ul { margin: 0; padding-left: 1.1em; display: flex; flex-direction: column; gap: 8px; }
.notice li { font-size: 0.9rem; color: var(--ink-soft); line-height: 1.55; }

/* ---------- Two-card band: watch it, then try it ---------- */
.dual-cta { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 800px) { .dual-cta { grid-template-columns: 1fr; } }
.dual-card {
  display: flex; flex-direction: column; gap: 12px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-l); padding: 28px 30px;
}
.dual-card .dual-icon { color: var(--accent-strong); }
.dual-card h3 { font-size: 1.1rem; }
.dual-card p { font-size: 0.92rem; }
.dual-card .btn { align-self: flex-start; margin-top: 6px; }

/* ============================================================
   TWO OLD OVERFLOW BUGS ON THE HOME PAGE
   Found while measuring the new six-item header. Neither is
   caused by the Videos/Demo work, but both make the home page
   scroll sideways, which on a phone looks broken.

   1. The rotated "Digital Passbook" seal is positioned outside
      its card (right: -18px) and the rotation makes it wider
      still, so it pushed past the right edge on laptop widths.
   2. The sample ledger table has five columns and could not
      shrink below about 424px, so on a 390px phone the whole
      hero was wider than the screen.
   ============================================================ */
@media (max-width: 1180px) {
  .seal { right: 10px; }
}
.hero-visual, .hero-copy { min-width: 0; }
@media (max-width: 560px) {
  table.ledger { font-size: 0.76rem; }
  table.ledger th { padding: 10px 8px 7px; }
  table.ledger td { padding: 9px 8px; }
  .ledger-card-head, .ledger-foot { padding-left: 14px; padding-right: 14px; }
}

/* ------------------------------------------------------------
   Three fixes found in the rendered pages.
   ------------------------------------------------------------ */

/* 1. Six nav items were wrapping onto two lines on a 1280px
      screen. Never let a nav label break, and start tightening
      the spacing earlier so nowrap cannot overflow instead. */
.nav-link { white-space: nowrap; }

/* 2. A ghost button inside the dark CTA band was invisible:
      .btn-ghost paints ink-coloured text, and the band is that
      same ink colour. Light it up when it sits on the dark. */
.cta-band .btn-ghost { color: var(--bg); border-color: rgba(246,241,227,0.38); }
.cta-band .btn-ghost:hover { background: rgba(246,241,227,0.12); color: var(--bg); }

/* 3. The Live Demo button put the flex gap between "Try" and
      "the Demo" as well as after the dot, so the label read with
      a hole in it. Keep the label as one flex child. */
.btn-demo .btn-demo-label { display: inline; }

/* The hero's sample ledger has five columns; below about 340px it
   cannot shrink any further, so let it scroll inside its own card
   rather than dragging the whole page sideways. */
.ledger-card .table-scroll { overflow-x: auto; }

/* On a 320px phone the three-step flow diagram inside each "route"
   card could not shrink below 355px and pushed the page sideways.
   Let the steps wrap onto a second line there. */
@media (max-width: 380px) {
  .route { min-width: 0; }
  .route-flow { flex-wrap: wrap; justify-content: center; row-gap: 10px; }
}

/* Contact page at 320px: the two cards' 30px inner padding left
   their contents wider than the screen. Trim the padding rather
   than the content. */
@media (max-width: 380px) {
  .contact-card, .enquiry-card { padding: 20px 18px; }
  .contact-grid { gap: 20px; }
}

/* Three columns of prose squeezed into a 390px phone is unreadable.
   Keep the table at a legible width and let it scroll inside its
   own box instead, with a line telling the reader it does. */
@media (max-width: 700px) {
  .sample-table { min-width: 560px; }
}
.scroll-hint { font-size: 0.78rem; color: var(--ink-faint); margin-top: 10px; font-style: italic; }
@media (min-width: 701px) { .scroll-hint { display: none; } }

/* A film with no still image beside it gets a cover panel instead of an
   empty dark rectangle: brand mark, the film's name, and a play circle.
   Pressing it starts the film and removes the cover. */
.reel-phone { position: relative; }
.reel-cover {
  position: absolute; inset: 10px;
  border: 0; border-radius: 17px; cursor: pointer;
  background: linear-gradient(160deg, #1D2C4C 0%, #16233F 55%, #101A2F 100%);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  padding: 24px 20px; text-align: center;
}
.reel-cover img { opacity: 0.9; }
.reel-cover-title {
  font-family: 'Fraunces', Georgia, serif; font-size: 1.02rem; line-height: 1.3;
  color: var(--bg); max-width: 15ch;
}
.reel-cover-play { margin-top: 4px; line-height: 0; }
.reel-cover:hover .reel-cover-play svg circle { fill: rgba(246,241,227,0.24); }
.reel-cover:focus-visible { outline: 2px solid var(--accent-soft); outline-offset: -4px; }