/* ==========================================================================
   Retufu marketing site — shared stylesheet
   Brand: teal #0f766e, dark #0f172a, ZAR / South African SMB audience
   ========================================================================== */

:root {
  --teal-900: #0a4a45;
  --teal-800: #0b5c56;
  --teal-700: #0f766e;
  --teal-600: #14958a;
  --teal-100: #e0f2f1;
  --teal-50: #ecfdf5;
  --ink-900: #0f172a;
  --ink-700: #334155;
  --ink-500: #64748b;
  --ink-300: #cbd5e1;
  --ink-100: #f1f5f9;
  --bg: #f6f9f8;
  --bg-soft: #e3f5f1;
  --amber: #f59e0b;
  --red: #dc2626;
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.08);
  --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08), 0 2px 4px rgba(15, 23, 42, 0.06);
  --shadow-lg: 0 20px 40px rgba(15, 23, 42, 0.12);
  --radius: 12px;
  --radius-sm: 8px;
  --max-width: 1160px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--ink-900);
  background: var(--bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; }

.wrap {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--teal-700); color: #fff; box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--teal-800); box-shadow: var(--shadow-md); }
.btn-ghost { background: transparent; color: var(--ink-900); border-color: var(--ink-300); }
.btn-ghost:hover { border-color: var(--teal-700); color: var(--teal-700); }
.btn-white { background: #fff; color: var(--teal-800); box-shadow: var(--shadow-sm); }
.btn-white:hover { box-shadow: var(--shadow-md); }
.btn-lg { padding: 15px 28px; font-size: 16.5px; }
.btn-block { width: 100%; }

/* ---------- Top nav ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(227, 245, 241, 0.88);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--ink-100);
}
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font-weight: 800;
  font-size: 19px;
  color: var(--ink-900);
  letter-spacing: -0.3px;
  /* The nav is a space-between flex row (brand vs. everything else), and
     flex items shrink by default -- without this, a narrow phone with the
     region switcher + "Get started" + hamburger all still visible would
     squeeze this box narrower than the word "Retufu" itself, and since
     the text has nowhere to wrap (one word) it renders past the box edge,
     underneath whatever sits next to it. Keeping the brand at its natural
     size and instead trimming .nav-actions (see the max-width: 480px
     block below) is what actually fixes the overlap. */
  flex-shrink: 0;
  white-space: nowrap;
}
.brand img { width: 32px; height: 32px; }
.nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
}
.nav-links a {
  text-decoration: none;
  color: var(--ink-700);
  font-weight: 600;
  font-size: 14.5px;
  padding: 9px 14px;
  border-radius: 8px;
  transition: background 0.12s ease, color 0.12s ease;
}
.nav-links a:hover { background: var(--teal-50); color: var(--teal-800); }
.nav-links a.current { color: var(--teal-700); }
.nav-actions { display: flex; align-items: center; gap: 10px; }

/* ---------- Region switcher (nav) ----------
   Lets a visitor pick which country they're in — always starts on South
   Africa for a fresh visit (see main.js), and drives the currency/price
   and a handful of tax-authority/labour-law mentions across the site. */
.region-switcher { position: relative; }
.region-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1.5px solid var(--ink-300);
  background: #fff;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-900);
  cursor: pointer;
  transition: border-color 0.12s ease;
}
.region-btn:hover { border-color: var(--teal-700); }
.region-flag { font-size: 16px; line-height: 1; }
.region-caret { width: 14px; height: 14px; flex-shrink: 0; transition: transform 0.15s ease; }
.region-switcher.open .region-caret { transform: rotate(180deg); }
.region-menu {
  display: none;
  list-style: none;
  margin: 0;
  padding: 6px;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 230px;
  background: #fff;
  border: 1px solid var(--ink-100);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  z-index: 200;
}
.region-switcher.open .region-menu { display: block; }
.region-menu li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-700);
}
.region-menu li:hover { background: var(--teal-50); color: var(--teal-800); }
.region-menu li.active { background: var(--teal-50); color: var(--teal-700); }
.region-menu li .region-opt-flag { font-size: 17px; }
.region-menu li em { margin-left: auto; font-style: normal; font-weight: 700; font-size: 12px; color: var(--ink-500); }
@media (max-width: 680px) {
  .region-label { display: none; }
  .region-btn { padding: 8px 10px; }
  .region-menu { right: -12px; }
}
/* Below 680px, .nav-links and the "Book a demo" ghost button are already
   hidden behind the hamburger (see the responsive block near the bottom
   of this file) -- but the region switcher chip and the "Get started"
   button both still show, and on an actual small phone (~375px, not just
   a narrow desktop window) that combination plus the logo no longer fits
   on one line, which is what was squeezing/overlapping the "Retufu"
   wordmark. Freeing up "Get started" here too (same treatment as the
   ghost button already gets) is what actually fixes it -- every page's
   own hero/CTA sections already repeat this same button further down,
   so it stays one tap away, just not doubled up in the cramped top bar. */
@media (max-width: 480px) {
  .nav-actions .btn-primary { display: none; }
}

.nav-toggle {
  display: none;
  background: none;
  border: 1.5px solid var(--ink-300);
  border-radius: 8px;
  padding: 8px 10px;
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--ink-900);
  margin: 4px 0;
  border-radius: 2px;
}

/* ---------- Hero ---------- */
.hero {
  background: radial-gradient(circle at 15% -10%, #e3f5f1 0%, var(--bg) 45%);
  padding: 44px 0 72px;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 56px;
  align-items: start;
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--teal-50);
  color: var(--teal-800);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 999px;
  margin-bottom: 18px;
}
.eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--teal-700); }
h1 {
  font-size: 46px;
  line-height: 1.12;
  font-weight: 800;
  letter-spacing: -1px;
  margin: 0 0 18px 0;
  color: var(--ink-900);
}
h1 .accent { color: var(--teal-700); }
.lead {
  font-size: 18px;
  color: var(--ink-700);
  max-width: 540px;
  margin: 0 0 30px 0;
}
.hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 28px; }
.hero-trust {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--ink-500);
}
.hero-trust span { display: flex; align-items: center; gap: 6px; }
.hero-trust svg { width: 15px; height: 15px; color: var(--teal-700); flex-shrink: 0; }

.hero-visual {
  background: #ffffff;
  border-radius: 16px;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--ink-100);
  overflow: hidden;
}

/* ---------- Hero photo strip (sits above the dashboard mockup) ---------- */
.hero-photo-strip {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--ink-100);
  aspect-ratio: 16 / 5;
  margin-bottom: 22px;
}
.hero-photo-strip img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- Photo band ---------- */
.photo-band { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 56px; align-items: center; }
.photo-band-img { border-radius: 20px; overflow: hidden; box-shadow: var(--shadow-lg); aspect-ratio: 4 / 3.1; }
.photo-band-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-band-list { list-style: none; padding: 0; margin: 22px 0 0; display: flex; flex-direction: column; gap: 14px; }
.photo-band-list li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; color: var(--ink-700); }
.photo-band-list svg { width: 18px; height: 18px; color: var(--teal-700); flex-shrink: 0; margin-top: 3px; }
.hero-visual .fake-toolbar {
  display: flex;
  gap: 6px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--ink-100);
  background: var(--bg-soft);
}
.fake-toolbar span { width: 10px; height: 10px; border-radius: 50%; background: var(--ink-300); }
.fake-toolbar .toolbar-dot { cursor: pointer; transition: background 0.15s ease, transform 0.15s ease; }
.fake-toolbar .toolbar-dot:hover { background: var(--teal-600); transform: scale(1.15); }
.fake-toolbar .toolbar-dot.active { background: var(--teal-700); }
.hero-visual .fake-body { padding: 22px; }
.fake-view { display: none; }
.fake-view.active { display: block; }
.stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 16px; }
.stat-card { background: var(--bg-soft); border-radius: 10px; padding: 14px; }
.stat-card .num { font-size: 20px; font-weight: 800; color: var(--teal-800); }
.stat-card .lbl { font-size: 11px; color: var(--ink-500); margin-top: 2px; }
.fake-row { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--ink-100); font-size: 13px; }
.fake-row:last-child { border-bottom: none; }
.fake-row .badge { font-size: 10.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px; }
.badge-paid { background: #dcfce7; color: #166534; }
.badge-sent { background: #dbeafe; color: #1e40af; }
.badge-overdue { background: #fee2e2; color: #991b1b; }

/* ---------- Executive Summary showcase ----------
   A recreation of the real in-app dashboard's Executive Summary card —
   same layout/structure as the actual product, but with illustrative
   example figures, never a real client's live numbers. */
.exec-showcase { max-width: 980px; margin: 0 auto; }
.exec-card {
  background: #fff;
  border: 1px solid var(--ink-100);
  border-left: 4px solid var(--teal-700);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 28px 30px;
}
.exec-card h3 { font-size: 17px; font-weight: 800; color: var(--ink-900); margin: 0 0 10px; }
.exec-desc { font-size: 14px; color: var(--ink-500); margin: 0 0 22px; }
.exec-groups { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.exec-group-label { font-size: 12px; font-weight: 700; color: var(--ink-500); text-transform: uppercase; letter-spacing: 0.3px; margin-bottom: 10px; }
.exec-group-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.exec-stat { border: 1px solid var(--ink-100); border-radius: 10px; padding: 12px; }
.exec-stat .exec-lbl { font-size: 10.5px; font-weight: 700; color: var(--ink-500); text-transform: uppercase; letter-spacing: 0.3px; margin-bottom: 6px; }
.exec-stat .exec-num { font-size: 16px; font-weight: 800; color: var(--ink-900); }
.exec-stat .exec-num.up { color: #16a34a; }
.exec-bottom-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 18px; }
.exec-bottom-card { background: #fff; border: 1px solid var(--ink-100); border-radius: var(--radius); padding: 18px; }
.exec-bottom-card .exec-lbl { font-size: 11.5px; font-weight: 700; color: var(--ink-500); text-transform: uppercase; letter-spacing: 0.3px; margin-bottom: 8px; }
.exec-bottom-card .exec-num { font-size: 22px; font-weight: 800; color: var(--ink-900); }
.exec-bottom-card .exec-num.danger { color: var(--red); }
.exec-bottom-card .exec-sub { font-size: 12.5px; color: var(--ink-500); margin-top: 4px; }
.exec-note { text-align: center; font-size: 12.5px; color: var(--ink-500); margin-top: 16px; }
@media (max-width: 860px) {
  .exec-groups { grid-template-columns: 1fr; }
  .exec-bottom-row { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .exec-group-cards { grid-template-columns: 1fr; }
  .exec-bottom-row { grid-template-columns: 1fr; }
}

/* ---------- Sections ---------- */
section { padding: 76px 0; }
.section-soft { background: var(--bg-soft); }
.section-dark { background: linear-gradient(160deg, var(--teal-700) 0%, var(--teal-900) 100%); color: #fff; }
.section-head { text-align: center; max-width: 640px; margin: 0 auto 48px; }
.section-head h2 { font-size: 32px; font-weight: 800; letter-spacing: -0.6px; margin: 0 0 12px 0; color: var(--ink-900); }
.section-dark .section-head h2 { color: #fff; }
.section-head p { font-size: 16px; color: var(--ink-500); margin: 0; }
.section-dark .section-head p { color: #ccfbf1; }
.section-tag {
  display: inline-block;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--teal-700);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-bottom: 10px;
}

/* ---------- Feature grid ---------- */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }

.feature-card {
  background: #fff;
  border: 1px solid var(--ink-100);
  border-radius: var(--radius);
  padding: 26px;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.feature-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.feature-icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: var(--teal-50);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  color: var(--teal-700);
}
.feature-icon svg { width: 22px; height: 22px; }
.feature-card h3 { font-size: 16.5px; font-weight: 700; margin: 0 0 8px 0; color: var(--ink-900); }
.feature-card p { font-size: 14px; color: var(--ink-500); margin: 0; }

/* ---------- Module strip ---------- */
.module-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.module-chip {
  background: var(--bg-soft);
  border-radius: var(--radius-sm);
  padding: 16px;
  border: 1px solid transparent;
}
.module-chip strong { display: block; font-size: 14px; color: var(--ink-900); margin-bottom: 4px; }
.module-chip span { font-size: 12.5px; color: var(--ink-500); }

/* ---------- Compliance banner ---------- */
.compliance-banner {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  background: #fff;
  border: 1px solid var(--ink-100);
  border-radius: var(--radius);
  padding: 28px 32px;
  box-shadow: var(--shadow-sm);
}
.compliance-item { display: flex; align-items: center; gap: 12px; flex: 1 1 220px; }
.compliance-item .ico {
  width: 38px; height: 38px; border-radius: 9px;
  background: var(--teal-50); color: var(--teal-700);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.compliance-item .ico svg { width: 20px; height: 20px; }
.compliance-item strong { display: block; font-size: 13.5px; color: var(--ink-900); }
.compliance-item span { font-size: 12px; color: var(--ink-500); }

/* ---------- CTA band ---------- */
.cta-band {
  background: linear-gradient(135deg, var(--teal-700), var(--teal-900));
  border-radius: 20px;
  padding: 56px;
  text-align: center;
  color: #fff;
}
.cta-band h2 { font-size: 28px; font-weight: 800; margin: 0 0 12px 0; }
.cta-band p { font-size: 15.5px; color: #ccfbf1; margin: 0 0 26px 0; }
.cta-band .hero-ctas { justify-content: center; }

/* ---------- Pricing ---------- */
.billing-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 0 auto 44px;
}
.toggle-switch {
  position: relative;
  width: 48px;
  height: 26px;
  background: var(--ink-300);
  border-radius: 999px;
  cursor: pointer;
  border: none;
  padding: 0;
  flex-shrink: 0;
}
.toggle-switch .knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  background: #fff;
  border-radius: 50%;
  transition: left 0.18s ease;
  box-shadow: var(--shadow-sm);
}
.toggle-switch.on { background: var(--teal-700); }
.toggle-switch.on .knob { left: 25px; }
.billing-toggle .label { font-size: 14.5px; font-weight: 600; color: var(--ink-500); }
.billing-toggle .label.active { color: var(--ink-900); }
.save-pill {
  background: var(--teal-50);
  color: var(--teal-800);
  font-size: 11.5px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
}

.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: stretch; }
.price-card {
  background: #fff;
  border: 1.5px solid var(--ink-100);
  border-radius: var(--radius);
  padding: 30px 26px;
  display: flex;
  flex-direction: column;
  position: relative;
}
.price-card.featured {
  border-color: var(--teal-700);
  box-shadow: var(--shadow-lg);
  transform: scale(1.03);
}
.price-card .plan-badge {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--teal-700);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 14px;
  border-radius: 999px;
  white-space: nowrap;
}
.price-card h3 { font-size: 18px; font-weight: 800; margin: 6px 0 6px 0; }
.price-card .plan-desc { font-size: 13px; color: var(--ink-500); margin-bottom: 20px; min-height: 34px; }
.price-card .price { font-size: 38px; font-weight: 800; color: var(--ink-900); }
.price-card .price .cur { font-size: 18px; font-weight: 700; vertical-align: super; margin-right: 2px; }
.price-card .price .period { font-size: 13.5px; font-weight: 500; color: var(--ink-500); }
.price-card .price-sub { font-size: 12px; color: var(--ink-500); margin: 4px 0 22px 0; height: 16px; }
.price-card ul { list-style: none; padding: 0; margin: 0 0 26px 0; flex: 1; }
.price-card li { display: flex; gap: 10px; font-size: 13.8px; color: var(--ink-700); padding: 7px 0; align-items: flex-start; }
.price-card li svg { width: 16px; height: 16px; color: var(--teal-700); flex-shrink: 0; margin-top: 2px; }

.pricing-note {
  text-align: center;
  font-size: 13px;
  color: var(--ink-500);
  margin-top: 30px;
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}

.compare-table { width: 100%; border-collapse: collapse; margin-top: 60px; font-size: 13.8px; }
.compare-table caption { text-align: left; font-size: 20px; font-weight: 800; margin-bottom: 18px; color: var(--ink-900); }
.compare-table th, .compare-table td { padding: 12px 14px; text-align: center; border-bottom: 1px solid var(--ink-100); }
.compare-table th:first-child, .compare-table td:first-child { text-align: left; color: var(--ink-700); font-weight: 600; }
.compare-table thead th { color: var(--ink-900); font-weight: 800; font-size: 14px; }
.compare-table tbody tr:hover { background: var(--bg-soft); }
.compare-table .yes { color: var(--teal-700); font-weight: 800; }
.compare-table .no { color: var(--ink-300); }

/* ---------- Blog ---------- */
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.blog-card {
  background: #fff;
  border: 1px solid var(--ink-100);
  border-radius: var(--radius);
  padding: 26px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  text-decoration: none;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.blog-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.blog-card-tag { font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.4px; color: var(--teal-700); margin-bottom: 10px; }
.blog-card h3 { font-size: 18px; font-weight: 800; color: var(--ink-900); margin: 0 0 10px; letter-spacing: -0.2px; }
.blog-card p { font-size: 14px; color: var(--ink-500); margin: 0 0 16px; flex-grow: 1; }
.blog-card .blog-card-meta { font-size: 12.5px; color: var(--ink-300); font-weight: 600; }
@media (max-width: 920px) { .blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 680px) { .blog-grid { grid-template-columns: 1fr; } }

.article-body { max-width: 720px; margin: 0 auto; }
.article-body h2 { font-size: 22px; font-weight: 800; color: var(--ink-900); margin: 34px 0 14px; letter-spacing: -0.3px; }
.article-body h2:first-child { margin-top: 0; }
.article-body p { font-size: 16px; line-height: 1.7; color: var(--ink-700); margin: 0 0 18px; }
.article-body ul, .article-body ol { font-size: 16px; line-height: 1.7; color: var(--ink-700); margin: 0 0 18px; padding-left: 22px; }
.article-body li { margin-bottom: 8px; }
.article-body strong { color: var(--ink-900); }
.article-meta { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--ink-500); margin: 0 0 8px; }
.article-tag { display: inline-block; font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.4px; color: var(--teal-700); background: var(--teal-50); padding: 4px 10px; border-radius: 999px; }
.article-disclaimer {
  background: var(--bg-soft);
  border-left: 4px solid var(--teal-700);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 14px 18px;
  font-size: 13.5px;
  color: var(--ink-700);
  margin: 30px 0;
}

/* ---------- Product tour ---------- */
.tour-caption { font-size: 15px; color: var(--ink-700); margin: 0 0 18px; line-height: 1.55; }

/* ---------- Spreadsheets vs. Retufu comparison ---------- */
.vs-grid { max-width: 880px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.vs-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.vs-old, .vs-new {
  border-radius: var(--radius-sm);
  padding: 16px 18px;
  font-size: 14.5px;
  line-height: 1.5;
}
.vs-old { background: #fff; border: 1.5px solid var(--ink-100); color: var(--ink-500); }
.vs-new { background: var(--teal-50); border: 1.5px solid var(--teal-100); color: var(--ink-900); font-weight: 500; }
.vs-tag {
  display: block;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-bottom: 6px;
}
.vs-old .vs-tag { color: var(--ink-300); }
.vs-new .vs-tag { color: var(--teal-700); }
@media (max-width: 680px) {
  .vs-row { grid-template-columns: 1fr; }
}

/* ---------- FAQ ---------- */
.faq-list { max-width: 760px; margin: 0 auto; }
.faq-item { border-bottom: 1px solid var(--ink-100); padding: 20px 0; }
.faq-item summary {
  cursor: pointer;
  font-weight: 700;
  font-size: 15.5px;
  color: var(--ink-900);
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  font-size: 20px;
  color: var(--teal-700);
  font-weight: 400;
  margin-left: 12px;
  flex-shrink: 0;
}
.faq-item[open] summary::after { content: "–"; }
.faq-item p { font-size: 14px; color: var(--ink-500); margin: 12px 0 0 0; }

/* ---------- About page ---------- */
.story-block { max-width: 720px; margin: 0 auto; }
.story-block p { font-size: 16px; color: var(--ink-700); margin-bottom: 18px; }
.value-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 40px; }
.value-card { text-align: center; padding: 8px; }
.value-card .feature-icon { margin: 0 auto 14px; }
.value-card h3 { font-size: 15.5px; margin: 0 0 6px 0; }
.value-card p { font-size: 13.5px; color: var(--ink-500); margin: 0; }

/* ---------- Contact ---------- */
.contact-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 48px; }
.contact-info-card {
  background: var(--bg-soft);
  border-radius: var(--radius);
  padding: 32px;
}
.contact-info-card h3 { font-size: 18px; margin: 0 0 6px 0; }
.contact-info-card > p { font-size: 14px; color: var(--ink-500); margin: 0 0 24px 0; }
.contact-line { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 18px; }
.contact-line .ico {
  width: 34px; height: 34px; border-radius: 9px;
  background: #fff; color: var(--teal-700);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  box-shadow: var(--shadow-sm);
}
.contact-line .ico svg { width: 17px; height: 17px; }
.contact-line strong { display: block; font-size: 13.5px; color: var(--ink-900); }
.contact-line span, .contact-line a { font-size: 13.5px; color: var(--ink-500); text-decoration: none; }
.contact-line a:hover { color: var(--teal-700); }

.contact-form { background: #fff; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.form-field { display: flex; flex-direction: column; gap: 6px; }
.form-field.full { grid-column: 1 / -1; }
.form-field label { font-size: 13px; font-weight: 700; color: var(--ink-900); }
.form-field input, .form-field select, .form-field textarea {
  border: 1.5px solid var(--ink-300);
  border-radius: 9px;
  padding: 11px 13px;
  font-size: 14px;
  font-family: inherit;
  color: var(--ink-900);
  background: #fff;
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
  outline: none;
  border-color: var(--teal-700);
  box-shadow: 0 0 0 3px var(--teal-50);
}
.form-field textarea { resize: vertical; min-height: 110px; }
.form-note { font-size: 12px; color: var(--ink-500); margin-top: 10px; }
/* Once a submission actually succeeds/fails, main.js adds .form-note-shown
   (always) plus .form-note-error (failure only) — turns the note into a
   clearly visible colored banner instead of easy-to-miss small gray text,
   so a real submission is unmistakable at a glance. */
.form-note-shown { font-size: 14px; font-weight: 600; padding: 12px 16px; border-radius: 8px; margin-top: 14px; }
.form-note-shown:not(.form-note-error) { color: #0a6e4f; background: #e6f7f0; border: 1px solid #b7ead4; }
.form-note-error { color: var(--red); background: #fdecea; border: 1px solid #f6c6c1; }
/* Honeypot field (see #website in the contact form, assets/js/main.js) —
   present in the markup for bots to find, invisible and unreachable for a
   real visitor: off-screen, not tab-focusable, no autofill suggestion. */
.form-field-hp { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Footer ---------- */
.site-footer { background: var(--ink-900); color: #cbd5e1; padding: 56px 0 28px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; margin-bottom: 40px; }
.footer-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; font-weight: 800; font-size: 17px; color: #fff; }
.footer-brand img { width: 26px; height: 26px; }
.footer-col h4 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.4px; color: #94a3b8; margin: 0 0 14px 0; }
.footer-col ul { list-style: none; padding: 0; margin: 0; }
.footer-col li { margin-bottom: 10px; }
.footer-col a { color: #cbd5e1; text-decoration: none; font-size: 13.8px; }
.footer-col a:hover { color: #fff; }
.footer-desc { font-size: 13.5px; color: #94a3b8; max-width: 280px; line-height: 1.65; }
.footer-reg { max-width: none; white-space: nowrap; font-size: 11px; }
@media (max-width: 1100px) {
  .footer-reg { white-space: normal; max-width: 280px; font-size: 13.5px; }
}
.footer-bottom {
  border-top: 1px solid #1e293b;
  padding-top: 22px;
  font-size: 12.5px;
  color: #64748b;
}
.footer-bottom-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
}
.footer-bottom-row + .footer-bottom-row { margin-top: 16px; }
.footer-copy { max-width: 560px; line-height: 1.6; margin: 0; }
.footer-social { display: flex; gap: 10px; flex-shrink: 0; }
.footer-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: #1e293b;
  color: #cbd5e1;
  transition: background 0.15s, color 0.15s;
}
.footer-social a:hover { background: var(--teal-700); color: #fff; }
.footer-social svg { width: 15px; height: 15px; }
.footer-legal-links { display: flex; gap: 18px; flex-wrap: wrap; }
.footer-legal-links a { color: #64748b; text-decoration: underline; text-underline-offset: 2px; font-size: 12.5px; }
.footer-legal-links a:hover { color: #fff; }
.footer-tagline { color: #64748b; }

/* ---------- Page hero (secondary pages) ---------- */
.page-hero { padding: 64px 0 32px; text-align: center; background: radial-gradient(circle at 50% -20%, #e3f5f1 0%, var(--bg) 68%); }
.page-hero h1 { font-size: 38px; margin-bottom: 12px; }
.page-hero p { font-size: 16.5px; color: var(--ink-500); max-width: 560px; margin: 0 auto; }
.page-hero + section { padding-top: 36px; }

/* ---------- Long-form content (Legal / Privacy / Accessibility) ---------- */
.legal-content { max-width: 760px; margin: 0 auto; }
.legal-content .updated { font-size: 13px; color: var(--ink-500); margin-bottom: 36px; }
.legal-content h2 { font-size: 21px; font-weight: 800; color: var(--ink-900); margin: 38px 0 14px; }
.legal-content h2:first-of-type { margin-top: 0; }
.legal-content h3 { font-size: 15.5px; font-weight: 700; color: var(--ink-900); margin: 22px 0 8px; }
.legal-content p { font-size: 14.5px; line-height: 1.75; color: var(--ink-700); margin: 0 0 14px; }
.legal-content ul, .legal-content ol { margin: 0 0 14px; padding-left: 22px; }
.legal-content li { font-size: 14.5px; line-height: 1.75; color: var(--ink-700); margin-bottom: 7px; }
.legal-content strong { color: var(--ink-900); }
.legal-content a { color: var(--teal-700); font-weight: 600; }
/* Marks a fact only the business owner can fill in (registration number,
   Information Officer contact, etc.) — deliberately impossible to miss
   before this page goes live, same idea as about.html's own "[ Add your
   business phone number here ]" placeholder. */
.legal-content .placeholder { background: #fef3c7; color: #92400e; font-weight: 600; padding: 1px 6px; border-radius: 4px; }

/* ---------- Responsive ---------- */
@media (max-width: 920px) {
  .hero-grid, .grid-2, .contact-grid, .photo-band { grid-template-columns: 1fr; }
  .photo-band-img { order: -1; }
  .grid-3, .module-strip, .grid-4, .pricing-grid, .value-grid { grid-template-columns: repeat(2, 1fr); }
  h1 { font-size: 36px; }
  .cta-band { padding: 40px 24px; }
  .price-card.featured { transform: none; }
}
@media (max-width: 680px) {
  .nav-links, .nav-actions .btn-ghost { display: none; }
  .nav-toggle { display: inline-block; position: relative; z-index: 201; }
  /* Dims the rest of the page behind the open mobile menu, same idea as
     .region-menu's own shadow/elevation above -- without this the dropdown
     read as an unstyled list of links floating over the hero text with no
     visual separation from the page underneath it (reported live: "looks
     horrible on mobile"). A pseudo-element on .nav itself rather than a
     separate HTML element in every page's markup, so this is a pure
     CSS/JS fix with no template changes needed anywhere. Tapping it closes
     the menu -- see main.js's click handler on .nav checking e.target===nav,
     which is how a click on this pseudo-element is observed (it bubbles to
     its host element, .nav, since a ::after has no element identity of its
     own to be the event target). */
  .nav.open::after {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.35);
    z-index: 199;
  }
  .nav.open .nav-links {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    padding: 8px 20px 14px;
    border-bottom: 1px solid var(--ink-100);
    box-shadow: var(--shadow-lg);
    z-index: 200;
    /* Was center-aligned (inherited from .nav-links' desktop row layout)
       with only the link's own 9px/14px padding for spacing -- on a real
       phone that reads as a loose, unstyled stack of centered words with
       no sense of where one tappable row ends and the next begins. */
    align-items: stretch;
    gap: 0;
  }
  .nav.open .nav-links a {
    padding: 15px 4px;
    border-top: 1px solid var(--ink-100);
    border-radius: 0;
    font-size: 16px;
  }
  .nav.open .nav-links a:first-child { border-top: none; }
  .nav.open .nav-links a:active { background: var(--teal-50); }
  .nav.open .nav-links a.current { background: var(--teal-50); }
  .grid-3, .module-strip, .grid-4, .pricing-grid, .value-grid, .form-row, .footer-grid { grid-template-columns: 1fr; }
  h1 { font-size: 30px; }
  .section-head h2 { font-size: 26px; }
  .hero { padding: 56px 0 48px; }
  section { padding: 56px 0; }
  .compliance-banner { flex-direction: column; align-items: stretch; }
  .stat-row { grid-template-columns: 1fr; }
}