/* ==========================================================================
   mybizweb.co.za
   One stylesheet. No framework, no build step, no preprocessor.

   Uses the same "slate + amber" palette clients can choose from, so this site
   is a working sample of the product rather than a different thing entirely.
   ========================================================================== */

/* ── tokens ─────────────────────────────────────────────────────────────── */

:root {
  /* colour — light */
  --ink:        #0f172a;
  --ink-2:      #1e293b;
  --body:       #475569;
  --muted:      #94a3b8;
  --bg:         #ffffff;
  --alt:        #f6f7f9;
  --alt-2:      #eef1f5;
  --line:       #e2e8f0;
  --accent:     #b45309;
  --accent-2:   #d97706;
  --accent-ink: #ffffff;
  --accent-bg:  #fffbeb;
  --ok:         #047857;

  /* shape */
  --r:    10px;
  --r-lg: 16px;
  --r-sm: 6px;

  /* type */
  --font-display: 'Bricolage Grotesque', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-text:    'Inter', 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:    ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* fluid scale, 320px → 1440px */
  --step--1: clamp(0.86rem, 0.84rem + 0.10vw, 0.92rem);
  --step-0:  clamp(1.00rem, 0.97rem + 0.16vw, 1.09rem);
  --step-1:  clamp(1.16rem, 1.09rem + 0.35vw, 1.35rem);
  --step-2:  clamp(1.45rem, 1.28rem + 0.85vw, 2.00rem);
  --step-3:  clamp(1.85rem, 1.52rem + 1.65vw, 2.85rem);
  --step-4:  clamp(2.30rem, 1.70rem + 3.00vw, 4.20rem);

  /* space */
  --pad:     clamp(20px, 5vw, 72px);
  --section: clamp(64px, 8vw, 124px);
  --gap:     clamp(18px, 2.2vw, 30px);

  /* layout */
  --measure: 1160px;
  --prose:   68ch;

  --shadow:    0 1px 2px rgba(15,23,42,.05), 0 8px 24px -12px rgba(15,23,42,.14);
  --shadow-lg: 0 2px 4px rgba(15,23,42,.04), 0 24px 56px -20px rgba(15,23,42,.24);
  --ease: cubic-bezier(.2,.7,.3,1);
}

/* Dark mode is not a gimmick here: a fair share of people will open this at
   night from a phone, and respecting the system setting is the kind of detail
   that signals the site was built rather than assembled. */
@media (prefers-color-scheme: dark) {
  :root {
    --ink:        #f1f5f9;
    --ink-2:      #e2e8f0;
    --body:       #a5b2c4;
    --muted:      #6b7c93;
    --bg:         #0c111b;
    --alt:        #121927;
    --alt-2:      #1a2333;
    --line:       #243044;
    --accent:     #f59e0b;
    --accent-2:   #fbbf24;
    --accent-ink: #1a1206;
    --accent-bg:  #1c1608;
    --ok:         #34d399;
    --shadow:    0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.6);
    --shadow-lg: 0 2px 4px rgba(0,0,0,.4), 0 24px 56px -20px rgba(0,0,0,.7);
  }
}

/* ── reset ──────────────────────────────────────────────────────────────── */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 90px;
}

body {
  background: var(--bg);
  color: var(--body);
  font-family: var(--font-text);
  font-size: var(--step-0);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-synthesis-weight: none;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--ink);
  line-height: 1.08;
  letter-spacing: -0.025em;
  font-weight: 700;
  text-wrap: balance;
}
h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-1); letter-spacing: -0.015em; }
h4 { font-size: var(--step-0); letter-spacing: -0.01em; }

p, li { text-wrap: pretty; }
p + p { margin-top: 1em; }

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--accent-2); }

strong, b { font-weight: 650; color: var(--ink); }

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

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: 3px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ── layout primitives ──────────────────────────────────────────────────── */

.wrap { width: 100%; max-width: var(--measure); margin-inline: auto; padding-inline: var(--pad); }
.narrow { max-width: 760px; }
.prose { max-width: var(--prose); }
section { padding-block: var(--section); }
.alt-bg { background: var(--alt); }
.tight { padding-block: clamp(44px, 5vw, 76px); }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--ink); color: var(--bg); padding: 12px 20px;
  border-radius: 0 0 var(--r-sm) 0; font-weight: 600;
}
.skip:focus { left: 0; }

.eyebrow {
  display: inline-block;
  font-size: var(--step--1);
  font-weight: 650;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1rem;
}

.lede { font-size: var(--step-1); color: var(--body); max-width: 52ch; }

.sec-head { max-width: 62ch; margin-bottom: clamp(34px, 4.5vw, 60px); }
.sec-head p { margin-top: .8em; font-size: var(--step-1); }

/* ── buttons ────────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  padding: .92em 1.65em;
  border-radius: var(--r-sm);
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 600;
  font-size: var(--step-0);
  text-decoration: none;
  border: 1.5px solid var(--accent);
  transition: transform .15s var(--ease), background .15s var(--ease), box-shadow .15s var(--ease);
  white-space: nowrap;
}
.btn:hover { background: var(--accent-2); border-color: var(--accent-2); color: var(--accent-ink); transform: translateY(-1px); box-shadow: var(--shadow); }
.btn:active { transform: translateY(0); }
.btn svg { width: 1.05em; height: 1.05em; flex: none; }

.btn.ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn.ghost:hover { background: var(--alt); border-color: var(--muted); color: var(--ink); }

.btn.light { background: var(--bg); color: var(--ink); border-color: var(--bg); }
.btn.light:hover { background: var(--alt); border-color: var(--alt); color: var(--ink); }

/* Sized so the hero's two calls to action sit side by side at 1440px rather
   than wrapping. A stacked pair reads as one weak option, not two. */
.btn.lg { padding: 1.02em 1.7em; font-size: 1.06rem; }
.btn.block { width: 100%; }

.btns { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; }

.txtlink {
  display: inline-flex; align-items: center; gap: .4em;
  font-weight: 600; text-decoration: none;
}
.txtlink::after { content: "→"; transition: transform .15s var(--ease); }
.txtlink:hover::after { transform: translateX(3px); }

/* ── header ─────────────────────────────────────────────────────────────── */

.site-head {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.site-head.stuck { border-bottom-color: var(--line); }
.site-head .wrap { display: flex; align-items: center; gap: 1.4rem; height: 74px; }

.brand {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--font-display); font-weight: 700; font-size: 1.16rem;
  color: var(--ink); text-decoration: none; letter-spacing: -.03em;
  flex: none;
}
.brand:hover { color: var(--ink); }
.brand .mark { width: 32px; height: 32px; flex: none; }
.brand em { font-style: normal; color: var(--accent); }

.nav { margin-left: auto; display: flex; align-items: center; gap: 1.9rem; }

/* :not(.btn) matters. `.nav a` scores (0,1,1) and `.btn` only (0,1,0), so an
   unscoped rule here silently overrides the button's colour and padding and
   leaves the call to action rendering as dark text overflowing an amber box. */
.nav a:not(.btn) {
  color: var(--body); text-decoration: none; font-size: .96rem; font-weight: 500;
  padding: .3rem 0; position: relative;
}
.nav a:not(.btn):hover { color: var(--ink); }
.nav a:not(.btn)[aria-current="page"] { color: var(--ink); font-weight: 600; }
.nav a:not(.btn)[aria-current="page"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px;
  height: 2px; background: var(--accent); border-radius: 2px;
}

.head-cta { display: flex; align-items: center; gap: .9rem; }
.head-tel { color: var(--ink); font-weight: 600; text-decoration: none; font-size: .96rem; white-space: nowrap; }

.burger { display: none; width: 44px; height: 44px; margin-left: auto; align-items: center; justify-content: center; border-radius: var(--r-sm); }
.burger:hover { background: var(--alt); }
.burger span { display: block; width: 21px; height: 2px; background: var(--ink); border-radius: 2px; position: relative; transition: .2s var(--ease); }
.burger span::before, .burger span::after {
  content: ""; position: absolute; left: 0; width: 21px; height: 2px; background: var(--ink); border-radius: 2px; transition: .2s var(--ease);
}
.burger span::before { top: -6.5px; }
.burger span::after  { top: 6.5px; }
.burger[aria-expanded="true"] span { background: transparent; }
.burger[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.burger[aria-expanded="true"] span::after  { top: 0; transform: rotate(-45deg); }

@media (max-width: 880px) {
  .site-head .wrap { height: 66px; }
  .burger { display: flex; }
  .nav, .head-cta { display: none; }
  .site-head.open .nav {
    display: flex; flex-direction: column; align-items: stretch; gap: 0;
    position: absolute; inset: 66px 0 auto; margin: 0;
    background: var(--bg); border-bottom: 1px solid var(--line);
    padding: .5rem var(--pad) 1.4rem; box-shadow: var(--shadow);
  }
  .site-head.open .nav a { padding: .95rem 0; border-bottom: 1px solid var(--line); font-size: 1.05rem; }
  .site-head.open .nav a[aria-current="page"]::after { display: none; }
  .site-head.open .head-cta { display: flex; position: absolute; inset: auto 0 auto; }
  .site-head.open .nav .btn { margin-top: 1rem; justify-content: center; }
}

/* ── hero ───────────────────────────────────────────────────────────────── */

.hero {
  position: relative;
  padding-block: clamp(56px, 8vw, 108px) clamp(56px, 7vw, 96px);
  background:
    radial-gradient(ellipse 60% 55% at 82% -8%, color-mix(in srgb, var(--accent) 15%, transparent), transparent 68%),
    linear-gradient(178deg, var(--alt) 0%, var(--bg) 58%);
  overflow: hidden;
}
.hero-grid { display: grid; grid-template-columns: 1.12fr .88fr; gap: clamp(34px, 5vw, 72px); align-items: center; }
.hero h1 { margin-bottom: .5em; }
.hero .lede { margin-bottom: 2rem; }
.hero .btns { margin-bottom: 1.6rem; }
.hero-note { font-size: var(--step--1); color: var(--muted); display: flex; align-items: center; gap: .5em; }
.hero-note svg { width: 1.05em; height: 1.05em; color: var(--ok); flex: none; }

/* The device mock is pure CSS and inline SVG. No image request, nothing to
   404, and it scales perfectly on any screen. */
.device {
  position: relative;
  border-radius: var(--r-lg);
  background: var(--ink);
  padding: 9px;
  box-shadow: var(--shadow-lg);
  transform: perspective(1400px) rotateY(-7deg) rotateX(2deg);
  transition: transform .5s var(--ease);
}
.device:hover { transform: perspective(1400px) rotateY(-3deg) rotateX(1deg); }
.device .bar { display: flex; gap: 5px; padding: 0 4px 8px; }
.device .bar i { width: 8px; height: 8px; border-radius: 50%; background: #475569; display: block; }
.device .screen { border-radius: 8px; overflow: hidden; background: #fff; aspect-ratio: 4/3.05; }
.device .screen svg { width: 100%; height: 100%; }
/* Screenshots are wider than the frame. Cover and anchor to the top so the
   frame fills edge to edge and shows the part that matters — anything else
   letterboxes and reads as a broken image. */
.device .screen img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }

.phone-float {
  position: absolute; right: -14px; bottom: -26px; width: 92px;
  border-radius: 14px; background: var(--ink); padding: 5px;
  box-shadow: var(--shadow-lg); border: 1px solid #334155;
}
.phone-float .screen { border-radius: 10px; overflow: hidden; background: #fff; aspect-ratio: 9/17; }
.phone-float .screen img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.phone-float svg { width: 100%; height: 100%; }

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
  .device { transform: none; max-width: 460px; }
  .device:hover { transform: none; }
  .phone-float { width: 74px; right: -8px; bottom: -18px; }
}

/* ── trust strip ────────────────────────────────────────────────────────── */

.strip { background: var(--ink); color: color-mix(in srgb, var(--bg) 78%, transparent); }
.strip .wrap { display: flex; flex-wrap: wrap; gap: clamp(1rem, 3vw, 2.6rem); justify-content: center; padding-block: 1.15rem; }
.strip .item { display: flex; align-items: center; gap: .5em; font-size: var(--step--1); font-weight: 500; white-space: nowrap; }
.strip svg { width: 1.1em; height: 1.1em; color: var(--accent-2); flex: none; }
@media (prefers-color-scheme: dark) { .strip { background: var(--alt-2); } }

/* ── cards ──────────────────────────────────────────────────────────────── */

.grid { display: grid; gap: var(--gap); }
.g2 { grid-template-columns: repeat(2, 1fr); }
.g3 { grid-template-columns: repeat(3, 1fr); }
.g4 { grid-template-columns: repeat(4, 1fr); }

.card {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: clamp(22px, 2.4vw, 30px);
  transition: border-color .18s var(--ease), transform .18s var(--ease), box-shadow .18s var(--ease);
}
.card:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); transform: translateY(-2px); box-shadow: var(--shadow); }
.card h3 { margin-bottom: .4em; }
.card p { font-size: .97rem; }
.card .ico {
  width: 42px; height: 42px; border-radius: var(--r-sm);
  background: var(--accent-bg); color: var(--accent);
  display: grid; place-items: center; margin-bottom: 1.1rem;
}
.card .ico svg { width: 21px; height: 21px; }
.alt-bg .card { background: var(--bg); border-color: transparent; box-shadow: var(--shadow); }

/* In dark mode --alt is lighter than --bg, which would leave a card on an
   alternating section darker than the section it sits on: the opposite of the
   raised look it has in light mode. Lift it instead. */
@media (prefers-color-scheme: dark) {
  .alt-bg .card, .alt-bg .plan, .alt-bg .form-card { background: var(--alt-2); }
  .alt-bg .prob { background: var(--alt-2); }
}

/* problem cards — deliberately blunt */
.prob { border-left: 3px solid var(--accent); background: var(--alt); border-radius: 0 var(--r) var(--r) 0; padding: clamp(20px,2.2vw,26px); }
.prob h3 { margin-bottom: .35em; }
.prob p { font-size: .96rem; }
.alt-bg .prob { background: var(--bg); }

/* ── split ──────────────────────────────────────────────────────────────── */

.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 76px); align-items: center; }
.split.flip > *:first-child { order: 2; }
@media (max-width: 880px) { .split, .split.flip > *:first-child { grid-template-columns: 1fr; order: 0; } }

.ticks { list-style: none; padding: 0; display: grid; gap: .85rem; margin-top: 1.6rem; }
.ticks li { display: flex; gap: .75rem; align-items: flex-start; font-size: .99rem; }
.ticks svg { width: 20px; height: 20px; flex: none; margin-top: 3px; color: var(--ok); }

/* ── steps ──────────────────────────────────────────────────────────────── */

.steps { list-style: none; padding: 0; display: grid; gap: var(--gap); counter-reset: s; }
.step { position: relative; padding-left: 62px; counter-increment: s; }
.step::before {
  content: counter(s);
  position: absolute; left: 0; top: -2px;
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--accent); color: var(--accent-ink);
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 700; font-size: 1.05rem;
}
.step h3 { margin-bottom: .3em; }
.step p { font-size: .97rem; }

/* ── pricing ────────────────────────────────────────────────────────────── */

.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); align-items: start; }
.plan {
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: clamp(26px, 2.8vw, 34px); position: relative; height: 100%;
  display: flex; flex-direction: column;
}
.plan.feature { border-color: var(--accent); border-width: 2px; box-shadow: var(--shadow-lg); }
.plan .tag {
  position: absolute; top: -13px; left: clamp(26px, 2.8vw, 34px);
  background: var(--accent); color: var(--accent-ink);
  font-size: .74rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  padding: .42em .85em; border-radius: 99px;
}
.plan h3 { font-size: var(--step-1); margin-bottom: .2em; }
.plan .sub { font-size: .93rem; color: var(--muted); margin-bottom: 1.3rem; }
.price { display: flex; align-items: baseline; gap: .3rem; margin-bottom: .3rem; }
.price .amt { font-family: var(--font-display); font-size: clamp(2rem, 3.2vw, 2.6rem); color: var(--ink); font-weight: 700; letter-spacing: -.03em; }
.price .per { font-size: .93rem; color: var(--muted); }
.plan .note { font-size: .87rem; color: var(--muted); margin-bottom: 1.5rem; }
.plan ul { list-style: none; padding: 0; display: grid; gap: .7rem; margin-bottom: 1.8rem; flex: 1; }
.plan li { display: flex; gap: .65rem; align-items: flex-start; font-size: .95rem; }
.plan li svg { width: 18px; height: 18px; flex: none; margin-top: 3px; color: var(--ok); }
.plan li.no { color: var(--muted); }
.plan li.no svg { color: var(--muted); }

/* ── faq ────────────────────────────────────────────────────────────────── */

.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer;
  padding: 1.35rem 2.6rem 1.35rem 0; position: relative;
  font-family: var(--font-display); font-weight: 650; font-size: var(--step-1);
  color: var(--ink); letter-spacing: -.015em; line-height: 1.3;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 4px; top: 50%; width: 11px; height: 11px;
  border-right: 2px solid var(--accent); border-bottom: 2px solid var(--accent);
  transform: translateY(-70%) rotate(45deg); transition: transform .2s var(--ease);
}
.faq details[open] summary::after { transform: translateY(-30%) rotate(225deg); }
.faq summary:hover { color: var(--accent); }
.faq .ans { padding: 0 3rem 1.5rem 0; max-width: var(--prose); }

/* ── cta band ───────────────────────────────────────────────────────────── */

.cta {
  background: var(--ink);
  color: color-mix(in srgb, var(--bg) 74%, transparent);
  text-align: center;
  position: relative; overflow: hidden;
}
.cta::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse 50% 70% at 50% 0%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%);
}
.cta .wrap { position: relative; }
.cta h2 { color: var(--bg); }
@media (prefers-color-scheme: dark) { .cta { background: var(--alt-2); } .cta h2 { color: var(--ink); } }
.cta p { max-width: 50ch; margin: .9em auto 2rem; font-size: var(--step-1); }
.cta .btns { justify-content: center; }

/* ── forms ──────────────────────────────────────────────────────────────── */

.field { display: block; margin-bottom: 1.3rem; }
.field > .lab { display: block; font-weight: 600; color: var(--ink); font-size: .95rem; margin-bottom: .4rem; }
.field .opt { font-weight: 400; color: var(--muted); }
.field .hint { display: block; font-weight: 400; color: var(--muted); font-size: .86rem; margin-top: .15rem; line-height: 1.45; }
input[type=text], input[type=tel], input[type=email], input[type=url], textarea, select {
  width: 100%; padding: .78em .85em;
  border: 1.5px solid var(--line); border-radius: var(--r-sm);
  background: var(--bg); color: var(--ink);
  font-size: 16px; /* below 16px iOS zooms the whole page on focus */
  -webkit-appearance: none; appearance: none;
  transition: border-color .15s var(--ease);
}
select {
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 19px) calc(1em + 2px), calc(100% - 14px) calc(1em + 2px);
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 2.4em;
}
textarea { min-height: 130px; resize: vertical; }
input:hover, textarea:hover, select:hover { border-color: var(--muted); }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent); }
input[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: #dc2626; }
.err { color: #dc2626; font-size: .86rem; margin-top: .3rem; display: none; }
input[aria-invalid="true"] ~ .err, textarea[aria-invalid="true"] ~ .err { display: block; }

/* honeypot — hidden from people, irresistible to bots */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-card { background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(24px, 3vw, 40px); box-shadow: var(--shadow); }

/* ── contact detail list ────────────────────────────────────────────────── */

.contacts { list-style: none; padding: 0; display: grid; gap: 1.5rem; }
.contacts li { display: flex; gap: 1rem; align-items: flex-start; }
.contacts .ico { width: 40px; height: 40px; flex: none; border-radius: var(--r-sm); background: var(--accent-bg); color: var(--accent); display: grid; place-items: center; }
.contacts .ico svg { width: 19px; height: 19px; }
.contacts .lab { font-size: .82rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); font-weight: 650; }
.contacts a { color: var(--ink); text-decoration: none; font-weight: 600; font-size: 1.04rem; }
.contacts a:hover { color: var(--accent); }

/* ── prose pages (privacy, terms) ───────────────────────────────────────── */

.doc { max-width: var(--prose); }
.doc h2 { font-size: var(--step-2); margin: 2.2em 0 .5em; }
.doc h2:first-child { margin-top: 0; }
.doc h3 { margin: 1.6em 0 .4em; }
.doc p, .doc li { font-size: 1rem; }
.doc ul, .doc ol { padding-left: 1.3rem; display: grid; gap: .45rem; margin: 1em 0; }
.doc .updated { font-size: .9rem; color: var(--muted); margin-bottom: 2.5rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--line); }
.doc table { width: 100%; border-collapse: collapse; margin: 1.4em 0; font-size: .95rem; }
.doc th, .doc td { text-align: left; padding: .7em .8em; border-bottom: 1px solid var(--line); vertical-align: top; }
.doc th { font-weight: 650; color: var(--ink); background: var(--alt); }

/* ── footer ─────────────────────────────────────────────────────────────── */

.site-foot { background: var(--alt); border-top: 1px solid var(--line); padding-block: clamp(44px, 5vw, 68px) 2rem; }
.foot-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: var(--gap); margin-bottom: 3rem; }
.foot-grid h2 { font-family: var(--font-text); font-size: .82rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); font-weight: 650; margin-bottom: 1rem; }
.foot-grid ul { list-style: none; padding: 0; display: grid; gap: .6rem; }
.foot-grid a { color: var(--body); text-decoration: none; font-size: .95rem; }
.foot-grid a:hover { color: var(--accent); }
.foot-about p { font-size: .93rem; max-width: 34ch; margin-top: .9rem; }
.foot-bot {
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: center;
  padding-top: 1.6rem; border-top: 1px solid var(--line);
  font-size: .87rem; color: var(--muted);
}
.foot-bot a { color: var(--muted); }

@media (max-width: 880px) { .foot-grid { grid-template-columns: 1fr 1fr; } .foot-about { grid-column: 1 / -1; } }

/* ── responsive grid collapse ───────────────────────────────────────────── */

@media (max-width: 980px) { .g4 { grid-template-columns: repeat(2, 1fr); } .plans { grid-template-columns: 1fr; } }
@media (max-width: 880px) { .g3 { grid-template-columns: 1fr; } }
@media (max-width: 620px) { .g2, .g4 { grid-template-columns: 1fr; } }

/* ── utilities ──────────────────────────────────────────────────────────── */

/* ── hero price anchor ──────────────────────────────────────────────────── */

/* The single most-read line on the page after the headline. Someone deciding
   whether to bother reading further wants the number, and burying it two
   clicks away loses more people than any wording ever recovers. */
.hero-price {
  margin: 0 0 1.9rem;
  font-size: var(--step-1);
  color: var(--ink);
}
.hero-price b {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -.02em;
  font-size: 1.18em;
}
.hero-price span {
  display: block;
  font-size: var(--step--1);
  color: var(--muted);
  margin-top: .3rem;
}

/* ── sample work ────────────────────────────────────────────────────────── */

.samples { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }

.sample { margin: 0; }
.sample .shot {
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  background: var(--alt);
  box-shadow: var(--shadow);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.sample:hover .shot { transform: translateY(-3px); box-shadow: var(--shadow-lg); }

/* Fixed aspect, cropped from the top. Every card is then the same height
   whatever the page behind it looks like, which is the difference between a
   grid that reads as designed and one that reads as three screenshots. */
.sample img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 16 / 11; object-fit: cover; object-position: top center;
}
.sample figcaption { padding: .95rem .2rem 0; }
.sample figcaption strong { display: block; color: var(--ink); font-weight: 650; font-size: 1rem; }
.sample figcaption span { display: block; color: var(--muted); font-size: var(--step--1); margin-top: .15rem; }

@media (max-width: 900px) {
  .samples { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; }
}

.center { text-align: center; }

/* Both forms matter, and only one of them used to work.
 *
 * `.center .sec-head` requires .sec-head to be a DESCENDANT of .center. The
 * markup writes `<div class="sec-head center">` — the same element — so the
 * auto margins never applied. The block kept its max-width and sat hard left
 * while its text centred inside it, which reads as a heading that is off to
 * the left of the cards below with a fat right margin. */
.center .lede,
.center .sec-head,
.lede.center,
.sec-head.center { margin-inline: auto; }
.mt-0 { margin-top: 0; }
.mt-2 { margin-top: 2rem; }
.mb-0 { margin-bottom: 0; }
.small { font-size: var(--step--1); }
.muted { color: var(--muted); }
.vh { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.nowrap { white-space: nowrap; }

/* ── print ──────────────────────────────────────────────────────────────── */

@media print {
  .site-head, .site-foot, .cta, .btn, .burger { display: none !important; }
  body { color: #000; background: #fff; font-size: 11pt; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
  section { padding-block: 1rem; }
}