/* ============================================================
   Barnwright Software — barnwrightsoftware.com
   Black steel, struck gold.

   Fonts: Archivo (display) · IBM Plex Sans (body) · IBM Plex Mono (labels)
   Loaded per page from Google Fonts.

   GOLD IS THE ACCENT, NEVER THE FIELD. It marks the one thing on a
   screen worth touching. Everything else is black, bone and a hairline.
   ============================================================ */

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

:root {
  /* ground */
  --ink: #0B0B0A;
  --panel: #131210;
  --panel-2: #1C1A16;
  --panel-3: #22201B;

  /* gold */
  --gold: #D6A548;
  --gold-lt: #EFCB85;
  --gold-dk: #856120;            /* gold on a LIGHT ground: 5.0:1 on bone, 5.6:1 on white.
                                    #A87C2A read better and measured 3.36:1, which fails
                                    small text -- the eyebrows are 11.5px. */
  --gold-ink: #141208;          /* text ON gold */
  --gold-ink-2: #3A2E10;        /* second-level text on gold */
  --gold-ink-3: #3A2E10;        /* labels on gold. Was #5E4B1A, which measured 3.74:1
                                    against the gold field and failed. */

  /* light sections */
  --bone: #F5F2EA;
  --bone-card: #FFFFFF;
  --bone-line: #E4DECF;
  --bone-line-2: #DCD5C4;
  --dark-ink: #12110F;
  --dark-body: #3A362E;
  --dark-muted: #57534A;

  /* text on black */
  --text: #F3F0E8;
  --text-2: #D9D4C9;
  --text-3: #C4BFB4;
  --muted: #A9A294;
  --muted-2: #8C867B;
  --muted-3: #847E73;           /* the faintest text on black: footer links, stamps.
                                    Was #6F6A60 at 3.66:1, which fails. */

  /* hairlines */
  --hair: rgba(214, 165, 72, 0.20);
  --hair-strong: rgba(214, 165, 72, 0.45);
  --hair-white: rgba(255, 255, 255, 0.08);

  /* states */
  --live: #5FBE85;
  --live-ink: #8FD8AC;
  --flag: #E4654C;
  --flag-ink: #F0907B;

  /* type */
  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --body: "IBM Plex Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --radius: 5px;
  --radius-lg: 9px;
  --header-h: 76px;
  --gutter: 72px;
}

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  background: var(--ink);
  color: var(--text);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

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

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
h3, h4 { font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; }
p { text-wrap: pretty; }

a { color: var(--gold); text-decoration: none; }
a:hover { color: var(--gold-lt); }

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

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

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--gold); color: var(--gold-ink);
  padding: 14px 20px; font-weight: 700; border-radius: 0 0 3px 0;
}
.skip:focus { left: 0; }

.wrap { max-width: 1296px; margin: 0 auto; padding: 0 var(--gutter); }
.narrow { max-width: 820px; }

.eyebrow {
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
}
.eyebrow.on-light { color: var(--gold-dk); }
.eyebrow.on-gold { color: var(--gold-ink-3); }

.lede { font-size: 18.5px; line-height: 1.6; color: var(--text-3); }
.sub { font-size: 16.5px; line-height: 1.65; color: var(--text-3); }
.small { font-size: 13.5px; line-height: 1.6; color: var(--muted); }

/* ============ The mark ============ */
.mark { flex-shrink: 0; }
.logo {
  display: inline-flex; align-items: center; gap: 13px;
  text-decoration: none;
}
.logo .wordmark {
  font-family: var(--display);
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.015em;
  color: var(--text);
}
.logo:hover .wordmark { color: var(--text); }

/* ============ Buttons ============ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px;
  padding: 0 26px;
  border: 1px solid transparent;
  border-radius: 3px;
  font-family: var(--body);
  font-size: 15.5px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  transition: background .16s ease, color .16s ease, border-color .16s ease, transform .16s ease;
}
.btn svg { flex-shrink: 0; }
.btn-gold { background: var(--gold); color: var(--gold-ink); }
.btn-gold:hover { background: var(--gold-lt); color: var(--gold-ink); transform: translateY(-1px); }
.btn-line {
  background: transparent; color: var(--gold-lt);
  border-color: var(--hair-strong); font-weight: 600;
}
.btn-line:hover { background: rgba(214,165,72,0.08); color: var(--gold-lt); border-color: var(--gold); }
.btn-dark { background: var(--dark-ink); color: var(--bone); }
.btn-dark:hover { background: #2A2721; color: var(--bone); transform: translateY(-1px); }
.btn-dark-line {
  background: transparent; color: var(--dark-ink);
  border-color: var(--dark-ink); font-weight: 600;
}
.btn-dark-line:hover { background: var(--dark-ink); color: var(--bone); }
.btn-sm { min-height: 44px; padding: 0 20px; font-size: 14.5px; }
.btn-block { width: 100%; }

/* ============ Header ============ */
.site-header {
  position: sticky; top: 0; z-index: 100;
  height: var(--header-h);
  background: rgba(11, 11, 10, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--hair);
}
.site-header .wrap {
  height: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.nav { display: flex; align-items: center; gap: 30px; }
.nav a:not(.btn) {
  font-size: 14.5px; font-weight: 500; color: var(--text-2);
  padding: 6px 0; border-bottom: 2px solid transparent;
}
.nav a:not(.btn):hover { color: var(--text); }
/* :not(.btn) matters. Without it this rule out-specifies .btn-gold and paints
   the "Book a demo" button's label gold-on-gold -- 1.45:1 -- but only on the
   one page the button points at, which is why it survived being looked at. */
.nav a[aria-current="page"]:not(.btn) { color: var(--gold-lt); font-weight: 600; border-bottom-color: var(--gold); }

.nav-toggle {
  display: none;
  width: 46px; height: 46px;
  align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--hair); border-radius: 3px;
  cursor: pointer;
}

/* ============ Sections ============ */
.sec { padding: 96px 0; }
.sec-sm { padding: 68px 0; }
.sec-light { background: var(--bone); color: var(--dark-ink); }
.sec-light h1, .sec-light h2, .sec-light h3, .sec-light h4 { color: var(--dark-ink); }
.sec-light p { color: var(--dark-muted); }
.sec-gold { background: var(--gold); color: var(--gold-ink); }
.sec-gold h1, .sec-gold h2, .sec-gold h3 { color: var(--gold-ink); }
.sec-gold p { color: var(--gold-ink-2); }
.sec-panel { background: var(--panel); }

.grid-bg {
  background-image:
    linear-gradient(rgba(214,165,72,0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(214,165,72,0.045) 1px, transparent 1px);
  background-size: 52px 52px;
}
.glow {
  background-image:
    radial-gradient(900px 440px at 16% 0%, rgba(214,165,72,0.10), transparent 70%),
    linear-gradient(rgba(214,165,72,0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(214,165,72,0.045) 1px, transparent 1px);
  background-size: auto, 52px 52px, 52px 52px;
}

.sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 48px; margin-bottom: 44px; }
.sec-head .t { display: flex; flex-direction: column; gap: 14px; max-width: 760px; }
.sec-head h2 { font-size: clamp(30px, 3.2vw, 46px); }
.sec-head .aside { width: 340px; flex-shrink: 0; font-size: 15px; line-height: 1.6; color: var(--muted); }
.sec-light .sec-head .aside { color: var(--dark-muted); }

/* ============ Hero ============ */
.hero { padding: 92px 0 84px; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); gap: 64px; align-items: center; }
.hero h1 { font-size: clamp(38px, 5.2vw, 74px); line-height: 0.98; }
.hero .lede { max-width: 600px; margin-top: 22px; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.hero-note { display: flex; align-items: center; gap: 11px; margin-top: 26px; font-size: 14px; color: var(--muted); }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--live); flex-shrink: 0; }

/* ============ Proof strip ============ */
.proof {
  border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair);
  padding: 34px 0;
}
.proof-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 36px; }
.proof-item { display: flex; flex-direction: column; gap: 6px; }
.proof-item strong { font-family: var(--display); font-size: 26px; font-weight: 700; letter-spacing: -0.02em; color: var(--gold); }
.proof-item span { font-size: 13.5px; line-height: 1.5; color: var(--muted); }

/* ============ Cards ============ */
.cards { display: grid; gap: 20px; }
.cards-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cards-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cards-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.card {
  background: var(--panel);
  border: 1px solid var(--hair);
  border-radius: var(--radius);
  padding: 30px 28px;
  display: flex; flex-direction: column; gap: 13px;
}
.card h3 { font-size: 21px; color: var(--text); }
.card p { font-size: 14.5px; line-height: 1.6; color: var(--muted); }
.card .ico { color: var(--gold); }

.sec-light .card { background: var(--bone-card); border-color: var(--bone-line); }
.sec-light .card h3 { color: var(--dark-ink); }
.sec-light .card p { color: var(--dark-muted); }
.sec-light .card .ico { color: var(--gold-dk); }

.card-invert { background: var(--dark-ink); border-color: var(--dark-ink); }
.sec-light .card-invert { background: var(--dark-ink); border-color: var(--dark-ink); }
.sec-light .card-invert h3 { color: var(--text); }
.sec-light .card-invert p { color: var(--muted); }
.sec-light .card-invert .ico { color: var(--gold); }

.card-gold { background: rgba(20,18,8,0.07); border: 1px solid rgba(20,18,8,0.16); }
.card-gold h3 { font-size: 18px; color: var(--gold-ink); }
.card-gold p { font-size: 14px; color: var(--gold-ink-2); }

/* ============ The three products ============ */
.product {
  display: grid; grid-template-columns: 64px minmax(0, 1fr);
  gap: 0 26px;
  padding: 38px 0;
  border-top: 1px solid var(--hair);
}
.product:last-child { border-bottom: 1px solid var(--hair); }
.product .num {
  font-family: var(--mono); font-size: 12px; font-weight: 600;
  letter-spacing: 0.2em; color: var(--gold); padding-top: 8px;
}
.product .body { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 40px; align-items: start; }
.product h3 { font-size: clamp(24px, 2.4vw, 34px); font-weight: 800; letter-spacing: -0.025em; margin-bottom: 12px; }
.product .body > div > p { font-size: 16px; line-height: 1.65; color: var(--text-3); max-width: 620px; }
.product .tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.tag {
  font-family: var(--mono); font-size: 10.5px; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--gold-lt);
  padding: 6px 11px; border-radius: 3px;
  background: rgba(214,165,72,0.10); border: 1px solid rgba(214,165,72,0.28);
}
.product .side { display: flex; flex-direction: column; gap: 12px; padding-top: 6px; }

/* ============ Lists ============ */
.ticks { list-style: none; display: flex; flex-direction: column; gap: 13px; }
/* WRAP THE TEXT OF A TICK IN A <span>. The li is a flex row, so every inline
   element inside it -- an <em>, an <a> -- becomes its OWN flex item and picks
   up the 11px gap on both sides, opening holes mid-sentence. Four of these
   shipped before anyone noticed. */
.ticks li { display: flex; gap: 11px; align-items: flex-start; font-size: 15px; line-height: 1.55; color: var(--text-2); }
.ticks li svg { margin-top: 3px; flex-shrink: 0; color: var(--gold); }
.sec-light .ticks li { color: var(--dark-body); }
.sec-light .ticks li svg { color: var(--gold-dk); }
.sec-gold .ticks li { color: var(--gold-ink-2); }
.sec-gold .ticks li svg { color: var(--gold-ink); }

/* ============ App list ============ */
.apps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--hair); border: 1px solid var(--hair); border-radius: var(--radius); overflow: hidden; }
.app { background: var(--ink); padding: 26px 24px; display: flex; flex-direction: column; gap: 9px; }
.app .n { font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); }
.app h3 { font-size: 19px; color: var(--text); }
.app p { font-size: 14px; line-height: 1.55; color: var(--muted); }

/* ============ Pricing ============ */
.price-card {
  background: var(--panel); border: 1px solid var(--hair); border-radius: 6px;
  padding: 36px 32px; display: flex; flex-direction: column; gap: 20px;
}
.price-card.feature { border: 2px solid var(--gold); background: #17150F; position: relative; }
.price-flag {
  position: absolute; top: 0; right: 26px;
  padding: 7px 13px; border-radius: 0 0 3px 3px; background: var(--gold);
  font-family: var(--mono); font-size: 9.5px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-ink);
}
.price-fig { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; padding: 20px 0; border-top: 1px solid var(--hair-white); border-bottom: 1px solid var(--hair-white); }
.price-fig .n { font-family: var(--display); font-size: 42px; font-weight: 700; letter-spacing: -0.03em; color: var(--text); }
.price-card.feature .price-fig .n { color: var(--gold); }
.price-card.feature .price-fig { border-color: rgba(214,165,72,0.24); }
.price-fig .per { font-size: 15px; color: var(--muted); }
.price-fig.tiers { display: block; }
.price-fig.tiers .tier { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.price-fig.tiers .tier + .tier { margin-top: 16px; }
.price-fig.tiers .lbl { flex: 0 0 100%; font-size: 12.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-bottom: 2px; }
.price-fig.tiers .n { font-size: 34px; }

/* placeholders Alan still has to fill in */
.todo {
  font-family: var(--mono); font-weight: 600; letter-spacing: 0.04em;
  color: var(--gold-lt);
  background: rgba(214,165,72,0.12);
  border-bottom: 1px dashed var(--hair-strong);
  padding: 1px 6px; border-radius: 2px;
  white-space: nowrap;
}
.sec-light .todo { color: #6B4E13; background: rgba(133,97,32,0.14); border-bottom-color: rgba(133,97,32,0.55); }
/* ...except on a dark card sitting inside that light section, where the light
   colours are the wrong way round again. The cascade does not know the card is
   black; this rule tells it. */
.sec-light .card-invert .todo { color: var(--gold-lt); background: rgba(214,165,72,0.14); border-bottom-color: var(--hair-strong); }
.sec-gold .todo { color: var(--gold-ink); background: rgba(20,18,8,0.10); border-bottom-color: rgba(20,18,8,0.45); }

/* ============ Guarantee band ============ */
.guarantee { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 60px; align-items: center; }

/* ============ Table ============ */
.tbl-scroll { overflow-x: auto; }
table.cmp { border-collapse: collapse; width: 100%; min-width: 760px; }
table.cmp caption {
  text-align: left; padding-bottom: 14px;
  font-family: var(--mono); font-size: 10px; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-dk);
}
table.cmp th, table.cmp td { padding: 15px 12px; }
table.cmp thead th {
  text-align: left; border-bottom: 2px solid var(--dark-ink);
  font-family: var(--mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--dark-ink);
}
table.cmp thead th.c, table.cmp tbody td { text-align: center; }
table.cmp tbody th {
  text-align: left; font-size: 14.5px; font-weight: 500; color: var(--dark-body);
  border-bottom: 1px solid var(--bone-line-2);
}
table.cmp tbody td { border-bottom: 1px solid var(--bone-line-2); font-size: 14.5px; color: var(--dark-body); }
table.cmp .yes { color: #2E7D4F; font-weight: 600; }
table.cmp .no { color: #6E695D; }
table.cmp .cost { font-family: var(--display); font-weight: 700; font-size: 17px; color: var(--dark-ink); letter-spacing: -0.02em; }

/* ============ Quote ============ */
.quote-big {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(22px, 2.6vw, 32px); line-height: 1.34; letter-spacing: -0.022em;
  color: var(--text); max-width: 900px;
}
.sec-gold .quote-big { color: var(--gold-ink); }
.byline { display: flex; align-items: center; gap: 13px; margin-top: 24px; }
.byline .who { display: flex; flex-direction: column; gap: 2px; }
.byline .who strong { font-size: 15px; font-weight: 700; color: var(--text); }
.byline .who span { font-size: 13.5px; color: var(--muted); }
.sec-gold .byline .who strong { color: var(--gold-ink); }
.sec-gold .byline .who span { color: var(--gold-ink-2); }

/* ============ FAQ ============ */
.faq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 48px; }
.faq .q { display: flex; flex-direction: column; gap: 9px; border-top: 1px solid var(--hair); padding-top: 18px; }
.faq .q h3 { font-size: 17px; color: var(--text); }
.faq .q p { font-size: 14.5px; line-height: 1.6; color: var(--muted); }
.sec-light .faq .q { border-top-color: var(--bone-line-2); }
.sec-light .faq .q h3 { color: var(--dark-ink); }
.sec-light .faq .q p { color: var(--dark-muted); }

/* ============ Steps ============ */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.step { border-top: 2px solid var(--gold); padding-top: 20px; display: flex; flex-direction: column; gap: 11px; }
.sec-light .step { border-top-color: var(--dark-ink); }
.step .n { font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: 0.2em; color: var(--gold); }
.sec-light .step .n { color: var(--gold-dk); }
.step h3 { font-size: 22px; }
.step p { font-size: 14.5px; line-height: 1.6; color: var(--muted); }
.sec-light .step p { color: var(--dark-muted); }

/* ============ Mock (the inbox / screens we draw) ============ */
.mock {
  border: 1px solid rgba(214,165,72,0.26);
  border-radius: var(--radius-lg);
  background: var(--panel);
  box-shadow: 0 30px 70px rgba(0,0,0,0.5);
  overflow: hidden;
}
.mock-bar {
  height: 54px; padding: 0 16px;
  border-bottom: 1px solid var(--hair-white);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.mock-bar .who { display: flex; flex-direction: column; gap: 2px; }
.mock-bar .who strong { font-size: 13.5px; font-weight: 600; color: var(--text); }
.mock-bar .who span { font-family: var(--mono); font-size: 10.5px; color: var(--muted-2); }
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px; border-radius: 999px;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase;
}
.pill-live { background: rgba(95,190,133,0.14); border: 1px solid rgba(95,190,133,0.35); color: var(--live-ink); }
.pill-live .dot { width: 6px; height: 6px; background: var(--live); }
.mock-body { padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.bubble { max-width: 300px; padding: 11px 14px; font-size: 13.5px; line-height: 1.5; }
.bubble-them { align-self: flex-start; border-radius: 12px 12px 12px 3px; background: var(--panel-3); color: #E6E1D6; }
.bubble-us { align-self: flex-end; border-radius: 12px 12px 3px 12px; background: var(--gold); color: #1B1508; }
.stamp { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.1em; color: var(--muted-3); display: inline-flex; align-items: center; gap: 6px; }
.stamp-r { align-self: flex-end; }
.held {
  margin: 0 16px 16px; padding: 13px 14px; border-radius: 8px;
  background: rgba(228,101,76,0.09); border: 1px solid rgba(228,101,76,0.38);
  display: flex; flex-direction: column; gap: 9px;
}
.held .lab { font-family: var(--mono); font-size: 9.5px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--flag-ink); }
.held p { font-size: 12.5px; line-height: 1.5; color: var(--text-2); }
.held .row { display: flex; gap: 8px; }

/* ============ Forms ============ */
.form { display: flex; flex-direction: column; gap: 18px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field label {
  font-family: var(--mono); font-size: 10.5px; font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted);
}
.field .hint { font-size: 12.5px; color: var(--muted-2); letter-spacing: 0; text-transform: none; font-family: var(--body); }
.field input, .field select, .field textarea {
  min-height: 52px; padding: 14px 16px;
  border: 1px solid rgba(255,255,255,0.18); border-radius: 3px;
  background: var(--ink); color: var(--text);
  font-family: var(--body); font-size: 15.5px; line-height: 1.4;
}
.field textarea { min-height: 120px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: var(--muted-3); }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--gold); }
.field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, #A9A294 50%), linear-gradient(135deg, #A9A294 50%, transparent 50%); background-position: right 20px center, right 14px center; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; padding-right: 44px; }
.hp { position: absolute; left: -9999px; }

/* ============ CTA ============ */
.cta { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 60px; align-items: center; }
.cta h2 { font-size: clamp(30px, 3.4vw, 48px); }

/* ============ Footer ============ */
.site-footer { border-top: 1px solid var(--hair); padding: 56px 0 34px; }
.foot-top { display: flex; justify-content: space-between; gap: 60px; flex-wrap: wrap; }
.foot-about { width: 330px; display: flex; flex-direction: column; gap: 16px; }
.foot-about p { font-size: 13.5px; line-height: 1.6; color: var(--muted-2); }
.foot-cols { display: flex; gap: 64px; flex-wrap: wrap; }
.foot-col { display: flex; flex-direction: column; gap: 11px; }
.foot-col .h { font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; color: var(--muted-3); }
.foot-col a, .foot-col span { font-size: 13.5px; color: var(--text-3); }
.foot-col a:hover { color: var(--gold-lt); }
.foot-bottom {
  display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap;
  margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--hair-white);
}
.foot-bottom .u { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; color: var(--muted-3); }
.foot-links { display: flex; gap: 26px; flex-wrap: wrap; }
.foot-links a { font-size: 12.5px; color: var(--muted-3); }

/* ============ Page hero (interior) ============ */
.page-hero { padding: 72px 0 60px; }
.page-hero h1 { font-size: clamp(34px, 4.4vw, 60px); }
.page-hero .grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 64px; align-items: start; }

/* ============ Split feature ============ */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 68px; align-items: center; }
.split.wide-left { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }
.split .copy { display: flex; flex-direction: column; gap: 20px; }
.split .copy h2 { font-size: clamp(28px, 3vw, 42px); }
.split .copy p { font-size: 16.5px; line-height: 1.65; color: var(--text-3); }
.sec-light .split .copy p { color: var(--dark-muted); }
/* A gold section's paragraphs need this too. `.split .copy p` is two classes
   deep and sits later in the file, so it beats the plain `.sec-gold p` rule
   above and paints body text near-white on gold -- which is how the AI section
   shipped unreadable the first time it was looked at. */
.sec-gold .split .copy p { color: var(--gold-ink-2); }
.sec-gold .sec-head .aside { color: var(--gold-ink-2); }

/* ============ Responsive ============ */
@media (max-width: 1180px) {
  :root { --gutter: 44px; }
  .nav { gap: 22px; }
  .product .body { grid-template-columns: minmax(0, 1fr) 300px; gap: 30px; }
}

@media (max-width: 1000px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .hero .lede { max-width: none; }
  .split, .split.wide-left, .guarantee, .cta, .page-hero .grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .split .visual { order: 2; }
  .cards-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .apps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sec-head { flex-direction: column; align-items: flex-start; gap: 20px; }
  .sec-head .aside { width: auto; max-width: 560px; }
  .product .body { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .proof-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
}

@media (max-width: 860px) {
  :root { --gutter: 24px; --header-h: 68px; }

  .nav-toggle { display: inline-flex; }
  .nav {
    display: none;
    position: absolute; top: var(--header-h); left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--panel);
    border-bottom: 1px solid var(--hair);
    padding: 10px 24px 22px;
    box-shadow: 0 24px 50px rgba(0,0,0,0.5);
  }
  .nav.open { display: flex; }
  .nav a:not(.btn) {
    padding: 15px 0; border-bottom: 1px solid var(--hair-white); border-top: 0;
    font-size: 16px; min-height: 48px; display: flex; align-items: center;
  }
  .nav a[aria-current="page"] { border-bottom-color: var(--hair-white); }
  .nav .btn { margin-top: 16px; }

  .sec { padding: 64px 0; }
  .sec-sm { padding: 48px 0; }
  .hero { padding: 52px 0 56px; }
  .page-hero { padding: 48px 0 40px; }

  .cards-2, .cards-3, .cards-4, .apps, .steps, .faq { grid-template-columns: minmax(0, 1fr); }
  .apps { gap: 1px; }
  .btn { width: 100%; }
  .hero-ctas { flex-direction: column; align-items: stretch; }
  .hero-ctas .btn { width: 100%; }
  .cta .btn, .split .btn, .product .btn { width: 100%; }
  .foot-cols { gap: 34px; }
  .foot-about { width: auto; }
  .product { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .product .num { padding-top: 0; }
  .price-card { padding: 28px 24px; }
  .mock-body .bubble { max-width: 86%; }
}

@media (max-width: 420px) {
  :root { --gutter: 18px; }
  .proof-grid { grid-template-columns: minmax(0, 1fr); gap: 22px; }

  /* A 320px phone is the narrowest thing that still gets used. The price
     figure is the only text on the site big enough to push the page sideways
     there -- "[SETUP FEE]" set at 42px is wider than the card -- so it steps
     down, and a placeholder is allowed to wrap rather than shove the layout. */
  .price-fig .n { font-size: 28px; }
  .price-fig.tiers .n { font-size: 26px; }
  .todo { white-space: normal; }
}

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

@media print {
  .site-header, .nav-toggle, .hero-ctas, .cta .btn { display: none; }
  body { background: #fff; color: #000; }
}

/* ============================================================
   THE TWO THINGS YOU CAN ACTUALLY TOUCH

   A shed company owner does not read a feature list. He picks up
   the thing and turns it over. These are the two products people
   ask to see: the designer and the robot that answers messages.

   Both work with JavaScript switched off, in the sense that the
   markup already holds a real building and a real conversation —
   demo.js only makes them move. Nothing here is the only route to
   a fact: every number is also written in words somewhere.
   ============================================================ */

.demo {
  border: 1px solid var(--hair);
  border-radius: var(--radius);
  background: var(--panel);
  overflow: hidden;
}
.sec-light .demo { background: var(--bone-card); border-color: var(--bone-line); }

/* THE LIVE DEMO WEARS THE APP'S OWN CHROME. Alan, comparing the working
   designer with the photograph of the real one beside it: "i like the show
   case with the white building ... the design around the red one is bad." The
   photograph reads as software because it has a title bar; the live one read
   as a form on a pale box. Same bar, same dots, so the one you can use and
   the one you can see look like the same product. */
.demo-head {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 11px 16px;
  background: var(--panel-2);
  border-bottom: 1px solid var(--hair-white);
}
.sec-light .demo-head { background: #F1EDE3; border-bottom-color: var(--bone-line); }
.demo-head::before {
  content: ""; flex: 0 0 auto; width: 38px; height: 8px; margin-right: 2px;
  background-image: radial-gradient(circle 4px at 4px 4px, var(--muted-3) 99%, transparent 0),
                    radial-gradient(circle 4px at 19px 4px, var(--muted-3) 99%, transparent 0),
                    radial-gradient(circle 4px at 34px 4px, var(--muted-3) 99%, transparent 0);
  opacity: .5;
}
.demo-head .t { order: 1; flex: 1 1 auto; }
.demo-head .hint { order: 2; }
.demo-head .t { font-family: var(--mono); font-size: 10.5px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.sec-light .demo-head .t { color: var(--dark-muted); }
.demo-head .hint { font-size: 12.5px; color: var(--muted-2); }
.sec-light .demo-head .hint { color: var(--dark-muted); }

/* ---- the designer ---- */
.demo-build { display: grid; grid-template-columns: 300px minmax(0, 1fr); }
.demo-controls {
  padding: 22px;
  border-right: 1px solid var(--hair-white);
  display: flex; flex-direction: column; gap: 20px;
}
.sec-light .demo-controls { border-right-color: var(--bone-line); }

.demo-controls fieldset { border: 0; display: flex; flex-direction: column; gap: 10px; }
.demo-controls legend {
  font-family: var(--mono); font-size: 10px; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted);
  padding: 0; margin-bottom: 2px;
}
.sec-light .demo-controls legend { color: var(--dark-muted); }

.chips { display: flex; flex-wrap: wrap; gap: 7px; }
.chip {
  min-height: 44px; padding: 0 13px;
  border: 1px solid rgba(255,255,255,0.16); border-radius: 3px;
  background: transparent; color: var(--text-2);
  font-family: var(--body); font-size: 13.5px; font-weight: 500;
  cursor: pointer; display: inline-flex; align-items: center;
  transition: border-color .14s ease, background .14s ease, color .14s ease;
}
.chip:hover { border-color: var(--hair-strong); color: var(--text); }
.chip[aria-pressed="true"] {
  background: var(--gold); border-color: var(--gold); color: var(--gold-ink); font-weight: 700;
}
.sec-light .chip { border-color: var(--bone-line-2); color: var(--dark-body); }
.sec-light .chip:hover { border-color: var(--gold-dk); color: var(--dark-ink); }
.sec-light .chip[aria-pressed="true"] { background: var(--dark-ink); border-color: var(--dark-ink); color: var(--bone); }

/* A colour is chosen by its colour, so the swatch is the button — but it
   still carries its name, because the name is what gets read down a phone
   to a customer and typed into an order. */
.swatches { display: flex; flex-wrap: wrap; gap: 7px; }
.swatch {
  width: 44px; height: 44px; padding: 0;
  border: 2px solid rgba(255,255,255,0.18); border-radius: 3px;
  cursor: pointer; position: relative;
}
.swatch:hover { border-color: var(--hair-strong); }
.swatch[aria-pressed="true"] { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(214,165,72,0.3); }
.sec-light .swatch { border-color: var(--bone-line-2); }
.sec-light .swatch[aria-pressed="true"] { border-color: var(--dark-ink); box-shadow: 0 0 0 2px rgba(18,17,15,0.2); }
.swatch-name { font-size: 12.5px; color: var(--muted); min-height: 1.4em; }
.sec-light .swatch-name { color: var(--dark-muted); }

.demo-stage { display: flex; flex-direction: column; }
/* THE STAGE IS THE SAME SURFACE AS THE PICTURE. Each building is rendered
   standing on the 3D designer's own ground, with its shadow, on a flat
   backdrop -- so the box behind it is that same colour and carries no grid.
   Anything else makes the picture read as a card dropped onto a drawing
   board rather than the designer's own display, which is what Alan was
   looking at when he said "this is not how my 3d model looks". */
.demo-canvas {
  /* min-height 0, not 300px: on a phone the stage is not height-constrained,
     so a floor taller than the picture leaves a band of the box below it --
     and the ground at the foot of the picture is a shade darker than the
     backdrop, so that band shows as a line under the building. flex-grow
     still fills the column on a desktop, where the picture is tall enough. */
  flex-grow: 1; min-height: 0;
  background-color: #E9E9E5;
  display: flex; align-items: center; justify-content: center;
  padding: 0;
}
.sec-light .demo-canvas { background-color: #E9E9E5; }
.demo-canvas svg { width: 100%; height: auto; max-height: 340px; }
/* Every render is the same 16:10 frame, so the picture fills the stage and
   no edge of it can show against the box. The box is the backdrop colour
   anyway, which is what makes the two read as one surface however tall the
   stage ends up. */
.demo-canvas .demo-shot { width: 100%; height: auto; display: block; }

/* ============ The journey ============
   One building followed through the system, one section per stage. The
   section carries the ground; the stage only lays out the head and the
   pictures. */
.stage { padding: 62px 0; }
.stage + .stage { border-top: 1px solid var(--hair); }
.sec-light.stage + .stage, .stage + .sec-light.stage { border-top: none; }

.stage-head { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 0 22px; margin-bottom: 28px; }
.stage-head h2 { font-size: clamp(30px, 3.4vw, 46px); margin: 0; }
.stage-head p { font-size: 17.5px; line-height: 1.6; color: var(--text-3); margin: 14px 0 0; max-width: 560px; }
.sec-light .stage-head p { color: var(--dark-muted); }
.stage-n {
  font-family: var(--mono); font-size: 13px; font-weight: 600; letter-spacing: 0.2em;
  color: var(--gold); padding-top: 10px; border-top: 2px solid var(--gold); align-self: start;
}
.sec-light .stage-n { color: var(--gold-dk); border-top-color: var(--dark-ink); }

.stage-shot { margin: 0; }
.stage-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; align-items: start; }
/* A WIDE SCREENSHOT AND A PHONE ONE ARE NOT THE SAME PICTURE. Given equal
   columns the 1800px-wide app screen lands at 380px and nothing on it can be
   read, while the phone shot beside it is comfortable. The wide one takes the
   bigger share and the phone one is capped at the width it actually wants. */
.stage-pair.uneven { grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); }
.stage-pair .phone-shot { max-width: 300px; }
.stage-pair .phone-shot + .shot-cap { max-width: 300px; }
.stage-pair figure { margin: 0; }

/* THE SCROLL DEMONSTRATION, IN CSS ALONE.
   No observer, no script, and nothing is parked invisible waiting to be
   revealed -- the resting state is the finished state, so a browser that has
   never heard of a view timeline (and a reader with motion turned down) gets
   the whole page exactly as it should be, immediately. Where the timeline IS
   supported the picture lifts the last few pixels as it comes up the screen.
   It starts at 0.82 opacity rather than 0 for the same reason: caught
   mid-animation, in a thumbnail or a screenshot, it still reads. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .stage-shot, .stage-pair > div, .stage-head > div {
      animation: stage-rise linear both;
      animation-timeline: view();
      animation-range: entry 8% cover 26%;
    }
  }
}
@keyframes stage-rise {
  from { opacity: 0.82; transform: translateY(14px); }
  to   { opacity: 1;    transform: translateY(0); }
}

/* THESE LIVE HERE, AFTER THE RULES THEY OVERRIDE, AND NOT IN THE PHONE
   BLOCK FURTHER UP THE FILE. A media query adds no specificity, so a copy of
   this sitting above .stage-head simply loses to it and does nothing at all --
   which is what happened: the number stayed in its 76px column on a phone and
   left the heading about nine characters wide. */
@media (max-width: 860px) {
  .stage { padding: 52px 0; }
  .stage-head { grid-template-columns: minmax(0, 1fr); gap: 14px; margin-bottom: 30px; }
  .stage-n { justify-self: start; padding-top: 8px; }
  .stage-pair, .stage-pair.uneven { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .stage-pair .phone-shot, .stage-pair .phone-shot + .shot-cap { max-width: none; }
}

/* The hand-built app windows that used to live here are gone. They were
   mockups of screens we have real photographs of, and next to the real ones
   they read as wireframes -- six lines in 600px of height beside a screen
   packed with detail. Worse, the section under them was captioned "And that
   is the real screen", which tells the reader the one above it is not. The
   real screenshots carry the journey; the only live things on the page are
   the designer and the price control, because neither of those can be a
   photograph. */
/* ONE THING PER SCREEN, AS BIG AS IT SENSIBLY GOES. Alan: "i want to be more
   immersed in the product my [focus] on one product at a time." Two pictures
   side by side halve each one and split the attention; a stage now holds a
   single product moment and gives it the whole column. */
.solo { display: flex; flex-direction: column; gap: 16px; }
.solo-cap { font-size: 15.5px; line-height: 1.6; color: var(--muted); max-width: 640px; }
.sec-light .solo-cap { color: var(--dark-muted); }
.solo-cap b { color: var(--text); }
.sec-light .solo-cap b { color: var(--dark-ink); }
.shot-big { margin: 0; }

/* A PHONE SHOT IS NOT STRETCHED TO FILL A ROW -- it is stood up in the middle
   of its own ground at the size a phone actually is, which reads as somebody
   holding one rather than as a tall thin picture. */
.solo-phone { align-items: center; text-align: center; }
.solo-phone .solo-cap { text-align: center; }
.phone-big { margin: 0; width: 100%; max-width: 330px; }

/* A PHONE SHOT DOWN THE MIDDLE OF A 1280px PAGE is a 330px picture with most of
   a screen of empty ground either side of it. On a wide screen the words stand
   on the left and the phone is stood up beside them, which is what somebody
   holding one actually looks like. Below 861px it falls back to the stacked
   order it is written in: heading, phone, caption. */
.stage-phone > .phone-big { margin: 0 auto; }
.stage-phone > .solo-cap { text-align: center; max-width: none; }
@media (min-width: 861px) {
  .stage-phone {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 330px;
    grid-template-rows: auto auto 1fr;
    grid-template-areas: "head phone" "cap phone" ". phone";
    gap: 18px 64px;
    align-items: start;
  }
  .stage-phone > .stage-head { grid-area: head; margin-bottom: 0; }
  .stage-phone > .phone-big  { grid-area: phone; margin: 0; }
  .stage-phone > .solo-cap   { grid-area: cap; text-align: left; max-width: 520px; }
}

.tour-pair { display: flex; flex-direction: column; gap: 16px; max-width: 760px; }
.tour-note { font-size: 15px; line-height: 1.6; color: var(--muted); max-width: 640px; }
.sec-light .tour-note { color: var(--dark-muted); }

/* ---- the control panel ---- */
.ctrl { display: grid; grid-template-columns: minmax(0, 0.86fr) minmax(0, 1fr); gap: 40px; align-items: start; }
.ctrl-set { display: flex; flex-direction: column; gap: 24px; }
.ctrl-f { display: block; }
.ctrl-lab { display: block; font-family: var(--mono); font-size: 11px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--gold-dk); margin-bottom: 9px; }
.ctrl-in { display: flex; align-items: center; gap: 8px; border: 2px solid var(--dark-ink);
  border-radius: var(--radius); background: var(--bone-card); padding: 0 14px; }
.ctrl-in i { font-style: normal; font-family: var(--display); font-size: 22px; font-weight: 700; color: var(--dark-muted); }
.ctrl-in input {
  flex: 1 1 auto; min-width: 0; border: 0; background: transparent; padding: 13px 0;
  font-family: var(--display); font-size: 30px; font-weight: 700; letter-spacing: -.02em;
  color: var(--dark-ink); font-variant-numeric: tabular-nums;
}
.ctrl-in input:focus { outline: none; }
.ctrl-in:focus-within { box-shadow: 0 0 0 3px var(--gold); }
.ctrl-hint { display: block; font-size: 13px; line-height: 1.55; color: var(--dark-muted); margin-top: 8px; }
.ctrl-reset { background: none; border: 0; padding: 0; font: inherit; color: var(--gold-dk);
  text-decoration: underline; cursor: pointer; }

.yours-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 1px;
  background: var(--hair); border: 1px solid var(--hair); border-radius: var(--radius); overflow: hidden; }
.yrs { background: var(--ink); padding: 22px 20px; display: flex; flex-direction: column; gap: 8px; }
.sec-light .yrs { background: var(--bone-card); }
.yrs-k { font-family: var(--display); font-size: 16px; font-weight: 700; letter-spacing: -.02em; color: var(--text); }
.sec-light .yrs-k { color: var(--dark-ink); }
.yrs p { font-size: 13.5px; line-height: 1.55; color: var(--muted); margin: 0; }
.sec-light .yrs p { color: var(--dark-muted); }

/* AFTER the panel rules, never before them. This is the third time a phone
   override has been written above the rule it overrides in this file and
   silently done nothing -- a media query adds no specificity, so the later
   base rule simply wins. If you add a panel rule, its phone version goes
   BELOW it, here. */
@media (max-width: 860px) {
  .ctrl { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .yours-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .ctrl-out { border-left-width: 2px; padding-left: 16px; }
  .ctrl-total strong { font-size: 32px; }
  .ctrl-in input { font-size: 24px; }
}
@media (max-width: 420px) {
  .yours-grid { grid-template-columns: minmax(0,1fr); }
}

/* THE READOUT IS PAGE FURNITURE, NOT A PRETEND APP. No title bar, no window
   chrome -- it is a figure block on the section's own ground, so it cannot be
   mistaken for a screenshot of something. */
.ctrl-out { border-left: 3px solid var(--gold); padding-left: 26px; }
.ctrl-outlab { font-family: var(--mono); font-size: 11px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--dark-muted); margin: 0 0 16px; }
.ctrl-fig { margin: 0; display: flex; flex-direction: column; }
.ctrl-fig > div { display: flex; justify-content: space-between; gap: 16px; align-items: baseline;
  padding: 10px 0; border-top: 1px solid var(--bone-line); }
.ctrl-fig dt { font-size: 15px; color: var(--dark-body); margin: 0; }
.ctrl-fig dd { margin: 0; font-size: 15px; color: var(--dark-ink);
  font-variant-numeric: tabular-nums; white-space: nowrap; }
.ctrl-none dt { font-style: italic; color: var(--dark-muted); }
.ctrl-total { display: flex; justify-content: space-between; align-items: baseline;
  padding-top: 16px; margin-top: 4px; border-top: 2px solid var(--dark-ink); }
.ctrl-total span { font-family: var(--mono); font-size: 11px; letter-spacing: .2em; color: var(--dark-muted); }
.ctrl-total strong { font-family: var(--display); font-size: 42px; letter-spacing: -.03em;
  color: var(--dark-ink); font-variant-numeric: tabular-nums; }
.ctrl-split { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; margin-top: 18px; }
.ctrl-split strong { display: block; font-size: 19px; color: var(--dark-ink); font-variant-numeric: tabular-nums; }
.ctrl-k { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--dark-muted); margin-bottom: 4px; }
.ctrl-foot { font-size: 14px; line-height: 1.55; color: var(--dark-muted); margin: 20px 0 0; }
.ctrl-foot b { color: var(--dark-ink); }
.price-whose {
  font-family: var(--mono); font-size: 9px; letter-spacing: .14em; text-transform: uppercase;
  padding: 2px 6px; border-radius: 2px; margin-left: 7px;
  background: rgba(0,0,0,.06); color: var(--dark-muted);
}
.price-whose.is-yours { background: var(--gold); color: var(--gold-ink); }

.demo-bill { border-top: 1px solid var(--hair-white); padding: 18px 22px; }
.sec-light .demo-bill { border-top-color: var(--bone-line); }
.demo-bill dl { display: flex; flex-direction: column; gap: 7px; margin: 0 0 12px; }
.demo-bill .row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.demo-bill dt { font-size: 13.5px; color: var(--text-2); margin: 0; }
.demo-bill dd { font-family: var(--mono); font-size: 13.5px; color: var(--text); margin: 0; white-space: nowrap; }
.sec-light .demo-bill dt { color: var(--dark-body); }
.sec-light .demo-bill dd { color: var(--dark-ink); }
.demo-total {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  padding-top: 13px; border-top: 1px solid var(--hair-white);
}
.sec-light .demo-total { border-top-color: var(--bone-line); }
.demo-total .lab { font-family: var(--mono); font-size: 10.5px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); }
.sec-light .demo-total .lab { color: var(--dark-muted); }
.demo-total .fig { font-family: var(--display); font-size: 30px; font-weight: 700; letter-spacing: -0.025em; color: var(--gold); }
.sec-light .demo-total .fig { color: var(--dark-ink); }

.demo-foot {
  padding: 14px 22px;
  border-top: 1px solid var(--hair-white);
  font-size: 12.5px; line-height: 1.5; color: var(--muted-2);
}
.sec-light .demo-foot { border-top-color: var(--bone-line); color: var(--dark-muted); }

/* A DARK PANEL INSIDE A COLOURED SECTION HAS TO SAY SO.
   `.sec-gold p` is one class and one element; `.demo-foot` is one class, so
   the section wins and paints this paragraph in the colour meant for the gold
   field -- near-black on the near-black panel, 1.41:1. This is the third time
   that shape of bug has appeared on this site (the others were `.split .copy p`
   over gold and a light-section rule reaching a dark card), so the rule is:
   when a panel sets its own background, it must set its own text colours back
   at a specificity the section cannot beat. */
.sec-gold .demo-foot { color: var(--muted-2); }
.sec-gold .demo p { color: var(--text-2); }

/* ---- the message thread ---- */
.demo-thread { display: grid; grid-template-columns: minmax(0, 1fr) 310px; }
.demo-log {
  padding: 18px 20px;
  display: flex; flex-direction: column; gap: 12px;
  min-height: 340px;
}
.demo-asks {
  border-left: 1px solid var(--hair-white);
  padding: 18px 20px;
  display: flex; flex-direction: column; gap: 9px;
}
.sec-light .demo-asks { border-left-color: var(--bone-line); }
.demo-asks .lab {
  font-family: var(--mono); font-size: 10px; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); margin-bottom: 3px;
}
.sec-light .demo-asks .lab { color: var(--dark-muted); }
.ask {
  text-align: left; min-height: 44px; padding: 11px 14px;
  border: 1px solid rgba(255,255,255,0.14); border-radius: 3px;
  background: transparent; color: var(--text-2);
  font-family: var(--body); font-size: 13.5px; line-height: 1.4; cursor: pointer;
  transition: border-color .14s ease, color .14s ease, background .14s ease;
}
.ask:hover { border-color: var(--hair-strong); color: var(--text); background: rgba(214,165,72,0.06); }
.ask[disabled] { opacity: 0.45; cursor: default; }
.sec-light .ask { border-color: var(--bone-line-2); color: var(--dark-body); }
.sec-light .ask:hover { border-color: var(--gold-dk); color: var(--dark-ink); background: rgba(133,97,32,0.05); }

.typing { display: inline-flex; gap: 5px; align-items: center; padding: 13px 16px; }
.typing i {
  width: 6px; height: 6px; border-radius: 50%; background: var(--muted);
  animation: blink 1.1s infinite ease-in-out;
}
.typing i:nth-child(2) { animation-delay: .18s; }
.typing i:nth-child(3) { animation-delay: .36s; }
@keyframes blink { 0%, 60%, 100% { opacity: .25; } 30% { opacity: 1; } }

@media (max-width: 900px) {
  .demo-build, .demo-thread { grid-template-columns: minmax(0, 1fr); }
  .demo-controls { border-right: 0; border-bottom: 1px solid var(--hair-white); }
  .sec-light .demo-controls { border-bottom-color: var(--bone-line); }
  .demo-asks { border-left: 0; border-top: 1px solid var(--hair-white); }
  .sec-light .demo-asks { border-top-color: var(--bone-line); }
  .demo-log { min-height: 0; }
}

/* ===========================================================================
   REAL SCREENSHOTS
   ---------------------------------------------------------------------------
   Every picture of the software on this site is a photograph of the software:
   the actual app, booted against practice data, captured in a browser. Nothing
   here is a drawing of a screen.

   The apps are LIGHT -- white cards, a navy header -- and this site is black
   and gold, so a bare screenshot dropped on the page glares. The frame is what
   settles it: a dark bezel and a title bar, the way a window sits on a desk.
   The picture itself is never dimmed or tinted. A customer who books a demo
   has to recognise what they were shown.
   =========================================================================== */
.shot {
  border: 1px solid rgba(214,165,72,0.26);
  border-radius: var(--radius-lg);
  background: var(--panel);
  box-shadow: 0 30px 70px rgba(0,0,0,0.5);
  overflow: hidden;
}
.sec-light .shot { border-color: rgba(11,11,10,0.14); box-shadow: 0 24px 54px rgba(0,0,0,0.13); }
.shot img { display: block; width: 100%; height: auto; }
.shot-bar {
  height: 42px; padding: 0 14px;
  border-bottom: 1px solid var(--hair-white);
  display: flex; align-items: center; gap: 10px;
}
.sec-light .shot-bar { border-bottom-color: var(--bone-line); background: #17160F; }
.shot-bar .dots { display: flex; gap: 6px; flex-shrink: 0; }
.shot-bar .dots i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,0.16); }
.shot-bar .nm {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--muted-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* The line under a picture says WHICH screen it is. A screenshot with no
   caption makes the reader work out what they are looking at, and most will
   not bother. */
.shot-cap {
  margin-top: 11px; font-size: 13px; line-height: 1.5; color: var(--muted);
}
.sec-light .shot-cap { color: var(--dark-muted); }
.shot-cap b { color: var(--text-2); font-weight: 600; }
.sec-light .shot-cap b { color: var(--ink); }

/* A phone screen photographed at phone width, shown at phone width. Showing
   it any other way misrepresents the one thing it is proving -- that the
   person holding it is standing in a shop, not sitting at a desk. */
.phone {
  flex: 0 0 auto; width: 232px;
  padding: 8px; border-radius: 26px;
  background: #16150F; border: 1px solid rgba(214,165,72,0.3);
  box-shadow: 0 22px 48px rgba(0,0,0,0.5);
}
.sec-light .phone { border-color: rgba(11,11,10,0.18); box-shadow: 0 18px 40px rgba(0,0,0,0.16); }
.phone img { display: block; width: 100%; height: auto; border-radius: 19px; }
.phone .cap {
  display: block; margin: 9px 2px 2px;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--muted-2); text-align: center;
}
.sec-light .phone .cap { color: var(--dark-muted-2); }
/* Scrolls sideways rather than wrapping: four phones in a row is a shelf,
   four phones in two rows of two is a grid of nothing. */
.phones {
  display: flex; gap: 20px; align-items: flex-start;
  overflow-x: auto; padding-bottom: 8px;
  scrollbar-width: thin;
}
@media (max-width: 640px) {
  .phones { margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); }
  .phone { width: 196px; }
}

/* ---------- Coming soon ----------
   Only the 3D Designer and the Dealer Center are for sale today. Everything
   else on the site (the full Barnwright software, custom versions, the reply
   assistant) carries one of these until it is. */
.soon-tag {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 4px 11px 4px 9px; border-radius: 999px;
  border: 1px solid var(--hair-strong); background: rgba(214,165,72,0.12);
  color: var(--gold-lt); font-size: 12px; font-weight: 750; letter-spacing: .04em; text-transform: uppercase;
  line-height: 1.4; white-space: nowrap; vertical-align: middle;
}
.soon-tag::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); }
.sec-light .soon-tag { color: var(--gold-dk); background: rgba(214,165,72,0.14); border-color: rgba(133,97,32,0.45); }
.sec-light .soon-tag::before { background: var(--gold-dk); }
.soon-note {
  display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; align-items: start;
  margin: 26px 0 0; padding: 18px 20px; border: 1px solid var(--hair-strong); border-radius: 12px;
  background: linear-gradient(180deg, rgba(214,165,72,0.10), rgba(214,165,72,0.04));
}
.soon-note p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--text-2); }
.soon-note p strong { color: var(--text); }
.soon-note a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }
.soon-note .soon-tag { justify-self: start; }
@media (max-width: 560px) { .soon-note { grid-template-columns: 1fr; } }
h3 .soon-tag { margin-left: 8px; position: relative; top: -2px; }