/* Before You Pay: shared design system ("Bold record", chosen 2026-10-19).
   One stylesheet for every redesigned page, so colours, type, spacing and components cannot drift between pages.
   Load AFTER /assets/site-chrome.css (the shared header and footer). Pages keep no inline copies of these rules.
   Reference page: /design/   Decisions: Obsidian "29_Design Review and Redesign Direction".

   Colour roles (do not mix them up):
   --brand        deep emerald: logo-adjacent brand moments, primary buttons, price panel
   --rec          bright green: ONLY the "Public record" and "Seen by BYP" labels, and checks
   --violet       ONLY "From the business"
   --slate        ONLY "Worth checking"
   --amber        ONLY "Not provided"
   --ink          dark sections (hero, statements, closing) */

:root{
  /* ink */
  --ink:#12171D; --ink-2:#1C242D; --ink-line:#2C3744; --ink-text:#B7C0CA; --ink-muted:#8995A2;
  /* paper and text */
  --paper:#F6F4EE; --white:#FFFFFF; --text:#14191F; --text-2:#3A434E; --muted:#6E746C; --line:#E2DFD5; --line-2:#CFCBBF;
  /* brand */
  --brand:#0A7A55; --brand-hover:#086446; --brand-wash:#E7F3EC; --brand-ink:#FFFFFF;
  /* source labels */
  --rec:#10A877; --rec-wash:#E9F6F0; --rec-deep:#0B7E58; --rec-on-ink:#5FD0AA;
  --violet:#7A4F68; --violet-wash:#F3ECF0; --violet-dot:#9C6A87; --violet-on-ink:#D4A9C2;
  --slate:#4E6683; --slate-wash:#ECF0F5; --slate-on-ink:#A9BBD3;
  --amber:#835B03; --amber-wash:#FBF3E0; --amber-dot:#E0A11A;
  /* type */
  --display:"Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --body:"Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:"DM Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --fs-hero:clamp(56px, 9vw, 148px);
  --fs-hero-long:clamp(46px, 6.4vw, 100px);
  --fs-statement:clamp(48px, 8vw, 124px);
  --fs-h2:clamp(36px, 4.4vw, 64px);
  --fs-h3:24px;
  --fs-lede:21px;
  --fs-body:18px;
  --fs-small:15.5px;
  --fs-label:12.5px;
  /* space */
  --sec:150px; --sec-tight:96px; --gutter:24px; --maxw:1240px;
  --r-sm:12px; --r-md:22px; --r-lg:28px;
  /* aliases kept so the shared header and footer (site-chrome.css) keep working */
  --emerald:var(--rec); --emerald-deep:var(--rec-deep); --emerald-wash:var(--rec-wash);
  --ink-2-legacy:#38414d; --n2:#EFEEE8; --n3:#D9D9D1; --n4:#A7ABA2; --n5:var(--muted); --hairline:var(--line); --hairline-ink:var(--ink-line);
}

/* ── Base ─────────────────────────────────────────────────────────────── */
*{box-sizing:border-box}
body.byp{margin:0;background:var(--paper);color:var(--text);font-family:var(--body);font-size:var(--fs-body);line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.byp h1,.byp h2,.byp h3{font-family:var(--display);margin:0;letter-spacing:-.035em;text-wrap:balance}
.byp p{margin:0}
.byp a:not(.b){color:inherit}
.byp img{max-width:100%;height:auto}
.byp .wrap{max-width:var(--maxw);margin:0 auto;padding-left:max(var(--gutter), env(safe-area-inset-left, 0px));padding-right:max(var(--gutter), env(safe-area-inset-right, 0px))}
.byp :focus-visible{outline:3px solid var(--rec);outline-offset:3px}

/* ── Type helpers ─────────────────────────────────────────────────────── */
.eyebrow{font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.on-ink .eyebrow,.eyebrow.on-ink{color:var(--ink-muted)}
.h2{font-size:var(--fs-h2);line-height:1;font-weight:800;margin-top:16px}
.h3{font-size:var(--fs-h3);line-height:1.15;font-weight:700;letter-spacing:-.02em}
.lede{font-size:var(--fs-lede);line-height:1.55;color:var(--text-2);max-width:34ch}
.intro{font-size:19px;color:var(--text-2);margin-top:20px;max-width:46ch}
.h2+.intro{margin-top:30px}
.intro+.intro{margin-top:16px}   /* room under big section headings (Lewis, 24 Oct) */
.bg-brand .statement h2 .accent{color:var(--ink)}   /* accent line on the emerald statement */
.bg-brand .statement p,.bg-brand .statement .eyebrow{color:#E3F3EC}
.fine{font-size:15px;color:var(--muted)}
.accent{color:var(--brand)}
.on-ink .accent{color:var(--rec-on-ink)}
.hero-ink .accent,.bg-ink .accent{color:var(--rec-on-ink)}   /* accent words in dark headlines use record green, as the spec says (2026-10-23) */

/* ── Sections ─────────────────────────────────────────────────────────── */
.sec{padding-block:var(--sec)}
.sec.tight{padding-block:var(--sec-tight)}
.bg-white{background:var(--white)}
.bg-paper{background:var(--paper)}
.bg-ink{background:var(--ink);color:#fff}
.bg-brand{background:var(--brand);color:#fff}
.on-ink{color:#fff}
.on-ink .lede,.on-ink .intro{color:var(--ink-text)}
.split{display:grid;grid-template-columns:5fr 7fr;gap:72px;align-items:start}
.blocks{display:grid;grid-template-columns:1fr 1fr}
.blocks > *{padding:96px max(24px, 6vw);min-width:0}

/* ── Buttons ──────────────────────────────────────────────────────────── */
.b{display:inline-flex;align-items:center;justify-content:center;gap:10px;font:700 16px/1 var(--body);text-decoration:none;border-radius:14px;padding:18px 26px;border:1.5px solid transparent;cursor:pointer;transition:transform .15s ease, background .15s ease}
.b:hover{transform:translateY(-1px)}
.b-brand{background:var(--brand);color:var(--brand-ink)}
.b-brand:hover{background:var(--brand-hover);color:var(--brand-ink)}
.b-light{background:var(--white);color:var(--text)}
.b-line{border-color:var(--line-2);color:var(--text);background:transparent}
.on-ink .b-line,.b-line.on-ink{border-color:var(--ink-line);color:#fff}
.b-sm{padding:12px 18px;font-size:15px}
.ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:40px}
.link-arrow{font-weight:700;font-size:15px;text-decoration:none;border-bottom:1.5px solid currentColor;padding-bottom:1px}

/* ── Source labels: the product's signature. Use these words, these colours, everywhere. ── */
.tag{flex:none;display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;padding:5px 10px;border-radius:999px;white-space:nowrap;font-weight:500}
.tag::before{content:"";width:6px;height:6px;border-radius:50%}
.tag.pub,.tag.seen{background:var(--rec-wash);color:var(--rec-deep)} .tag.pub::before,.tag.seen::before{background:var(--rec)}
.tag.biz{background:var(--violet-wash);color:var(--violet)} .tag.biz::before{background:var(--violet-dot)}
.tag.chk{background:var(--slate-wash);color:var(--slate)} .tag.chk::before{background:var(--slate)}
.tag.np{background:var(--amber-wash);color:var(--amber)} .tag.np::before{background:var(--amber-dot)}
/* on ink: square-ish, tinted */
.on-ink .tag,.ledger .tag{border-radius:6px}
.on-ink .tag::before,.ledger .tag::before{display:none}
.on-ink .tag.pub,.on-ink .tag.seen,.ledger .tag.pub,.ledger .tag.seen{color:var(--rec-on-ink);background:rgba(16,168,119,.14)}
.on-ink .tag.biz,.ledger .tag.biz{color:var(--violet-on-ink);background:rgba(156,106,135,.18)}
.on-ink .tag.chk,.ledger .tag.chk{color:var(--slate-on-ink);background:rgba(94,119,150,.2)}
.on-ink .tag.np,.ledger .tag.np{color:#F2C45A;background:rgba(224,161,26,.16)}

/* ── Hero on ink, with the giant pause mark ──────────────────────────── */
.hero-ink{background:var(--ink);color:#fff;position:relative;overflow:hidden}
.hero-ink .bigmark{position:absolute;right:-6vw;top:40px;width:min(52vw,640px);opacity:.08;pointer-events:none}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:end;padding-top:80px;position:relative}
.hero-grid > :first-child{padding-bottom:80px}
.hero-ink h1{font-size:var(--fs-hero);line-height:.9;font-weight:800;letter-spacing:-.05em}
.hero-ink h1.long{font-size:var(--fs-hero-long);line-height:.95}
.hero-ink .lede{margin-top:32px;color:var(--ink-text)}
.hero-note{margin-top:20px;font-family:var(--mono);font-size:12.5px;color:var(--ink-muted);letter-spacing:.04em;text-transform:uppercase}

/* ── Records: the profile shown as a document ─────────────────────────── */
/* .ledger = on ink (hero). .sheet = on light. Both always say "Example" when the business is illustrative. */
.ledger{background:var(--ink-2);border:1px solid var(--ink-line);border-radius:var(--r-md) var(--r-md) 0 0;padding:28px 28px 8px;align-self:end;min-width:0;font-family:var(--mono);color:#DCE2E8}
.sheet{border:1px solid var(--line);border-radius:var(--r-md);padding:28px;background:var(--paper);min-width:0}
.sheet.featured{background:var(--white);border:2px solid var(--brand);box-shadow:0 40px 80px -60px rgba(10,122,85,.6)}
.rec-hd{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding-bottom:14px;border-bottom:1px dashed var(--line)}
.ledger .rec-hd{color:var(--ink-muted);border-color:var(--ink-line)}
.rec-hd .lvl{color:var(--brand)} .ledger .rec-hd .lvl{color:var(--rec-on-ink)}
.rec-nm{font-family:var(--display);font-size:22px;font-weight:700;letter-spacing:-.02em;margin:16px 0 4px}
.ledger .rec-nm{color:#fff}
.rec-rows{list-style:none;margin:0;padding:0}
.rec-rows li{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:13px 0;border-bottom:1px solid var(--line);font-size:15px}
.ledger .rec-rows li{border-color:var(--ink-line);font-size:13.5px}
.rec-rows li:last-child{border-bottom:none}

/* ── Photography (note 29 s43) ─────────────────────────────────────────── */
/* Documentary photos, one grade everywhere. A stock photo never sits next to a name or a checked mark as if it were that person.
   .hero-visual = photo with the example ledger over its lower edge, in the right column of .hero-grid. */
.hero-ink:has(.hero-photo) .bigmark{display:none}   /* the photo replaces the background mark */
.ph-grade{filter:saturate(.74) contrast(.95) sepia(.12) brightness(1.03)}
.hero-visual{align-self:end;min-width:0;display:flex;flex-direction:column;position:relative}
.hero-photo{position:relative;margin:0 0 -110px 48px;border-radius:var(--r-md);overflow:hidden;aspect-ratio:4/3;background:var(--ink-2)}
.hero-photo img{display:block;width:100%;height:100%;object-fit:cover}
@media (min-width:961px){   /* the photo fills the column from the eyebrow down, so the top right is never empty */
  .hero-grid:has(.hero-visual){padding-top:56px}
  .hero-visual{align-self:stretch}
  .hero-photo{flex:1;aspect-ratio:auto;min-height:300px}
}
.hero-visual .ledger{position:relative;margin-right:48px;box-shadow:0 -24px 60px -30px rgba(0,0,0,.6)}

/* ── Bands ────────────────────────────────────────────────────────────── */
/* .band: full-width row of 3 or 4 cells divided by hairlines (label key, USP tiles) */
.band{background:var(--white);border-bottom:1px solid var(--line)}
.band .wrap{display:grid;grid-template-columns:repeat(var(--cols,4),1fr)}
.band .cell{padding:36px 28px;border-left:1px solid var(--line);min-width:0}
.band .cell:first-child{border-left:none;padding-left:0}
.band .cell p{font-size:var(--fs-small);color:var(--text-2);margin-top:12px;line-height:1.5;max-width:32ch}
.band .big{font-family:var(--display);font-size:30px;font-weight:800;letter-spacing:-.03em;line-height:1.05}

/* ── Timeline: a real sequence only ───────────────────────────────────── */
.timeline{list-style:none;margin:0;padding:0;border-top:2px solid var(--text)}
.timeline li{display:grid;grid-template-columns:120px 1fr;gap:24px;padding:28px 0;border-bottom:1px solid var(--line)}
.timeline .when{font-family:var(--mono);font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--brand);padding-top:6px}
.timeline p{color:var(--text-2);margin-top:6px;font-size:17px}
.steps3{list-style:none;margin:56px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);border-top:2px solid var(--text)}
.steps3 li{padding:28px 28px 28px 0;border-right:1px solid var(--line);min-width:0}
.steps3 li+li{padding-left:28px}
.steps3 li:last-child{border-right:none}
.steps3 .when{font-family:var(--mono);font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--brand)}
.steps3 p{color:var(--text-2);margin-top:10px;font-size:16.5px}

/* ── Panels and tiles ─────────────────────────────────────────────────── */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.tile{background:var(--white);border:1px solid var(--line);border-radius:var(--r-md);padding:36px;min-width:0}
.tile p{color:var(--text-2);margin-top:12px;font-size:16.5px}
.tile.soon{background:transparent;border-style:dashed}
.lead-ink{grid-column:1/-1;background:var(--ink);color:#fff;border-radius:var(--r-lg);padding:56px;display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.lead-ink p{color:var(--ink-text);margin-top:18px;max-width:40ch}
.pill{display:inline-block;font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;background:var(--brand-wash);color:var(--brand);border-radius:999px;padding:5px 10px}

/* ── Price ────────────────────────────────────────────────────────────── */
.price-fig{display:flex;align-items:baseline;gap:12px;font-family:var(--display);font-size:clamp(72px, 10vw, 180px);font-weight:800;letter-spacing:-.06em;line-height:.9}
.price-fig small{font-family:var(--mono);font-size:13px;letter-spacing:.08em;text-transform:uppercase;font-weight:400;opacity:.8}
.price-fig.sm{font-size:72px;letter-spacing:-.05em;line-height:1}
.lines{list-style:none;margin:28px 0 0;padding:0;border-top:1px solid var(--line)}
.lines li{padding:14px 0;border-bottom:1px solid var(--line);font-size:16.5px}
.bg-brand .lines,.bg-brand .lines li{border-color:rgba(255,255,255,.25);color:#E3F3EC}
.bg-ink .lines,.bg-ink .lines li{border-color:var(--ink-line);color:#DCE2E8}

/* ── Badge levels ladder (names exactly as in the copy playbook) ──────── */
.ladder{list-style:none;margin:36px 0 0;padding:0}
.ladder li{display:grid;grid-template-columns:44px 1fr;gap:18px;padding:18px 0;border-bottom:1px solid var(--line)}
.ladder .n{width:36px;height:36px;border-radius:10px;background:var(--paper);display:grid;place-items:center;font-family:var(--mono);font-size:13px;color:var(--muted)}
.ladder li.hl .n{background:var(--brand);color:#fff}
.ladder b{font-size:19px;letter-spacing:-.01em}
.ladder p{font-size:var(--fs-small);color:var(--text-2);margin-top:4px}

/* ── FAQ ──────────────────────────────────────────────────────────────── */
.qs{border-top:2px solid var(--text)}
.qs details{border-bottom:1px solid var(--line);padding:22px 0}
.qs summary{cursor:pointer;font-weight:700;font-size:19px;letter-spacing:-.01em;list-style:none}
.qs summary::-webkit-details-marker{display:none}
.qs details p{color:var(--text-2);margin-top:12px;font-size:16.5px;max-width:60ch}

/* ── Statement and closing ────────────────────────────────────────────── */
.statement{text-align:center}
.statement h2{font-size:var(--fs-statement);line-height:.92;font-weight:800;letter-spacing:-.05em}
.statement p{font-size:19px;color:var(--text-2);max-width:44ch;margin:30px auto 0}
.statement.on-ink p,.bg-ink .statement p{color:var(--ink-text)}
.statement .ctas{justify-content:center}

/* ── Photo (free-licence, natural, never staged) ──────────────────────── */
.photo{border-radius:var(--r-lg);overflow:hidden;background:#DCD8CB;min-height:320px}
.photo img{display:block;width:100%;height:100%;object-fit:cover}

/* ── Document pages (privacy, terms, contact) ─────────────────────────── */
.page-hero{background:var(--ink);color:#fff;position:relative;overflow:hidden}
.page-hero .bigmark{position:absolute;right:-4vw;top:24px;width:min(34vw,380px);opacity:.07;pointer-events:none}
.page-hero .wrap{position:relative;padding-top:88px;padding-bottom:72px}
.page-hero h1{font-size:clamp(46px,6.4vw,96px);line-height:.95;font-weight:800;letter-spacing:-.05em;margin-top:20px}
.page-hero .accent{color:var(--rec-on-ink)}
.page-hero .lede{margin-top:26px;color:var(--ink-text);max-width:46ch}
.page-hero .meta{margin-top:30px;font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-muted)}
.page-hero:has(.page-photo) .bigmark{display:none}
.page-hero-split{display:grid;grid-template-columns:1.25fr .75fr;gap:56px;align-items:center}
/* A photo with nothing over it sits in an offset mint frame, so it belongs to the page rather than floating in it. */
.page-photo{margin:0 20px 20px 0;position:relative;isolation:isolate;aspect-ratio:4/3}
.page-photo::before{content:"";position:absolute;inset:20px -20px -20px 20px;border:1.5px solid var(--rec-on-ink);border-radius:var(--r-md);z-index:-1}
.page-photo img{display:block;width:100%;height:100%;object-fit:cover;border-radius:var(--r-md);background:var(--ink-2)}
.hero-grid > .page-photo{align-self:center;margin-bottom:80px}
.doc-layout{display:grid;grid-template-columns:240px minmax(0,1fr);gap:64px;align-items:start;padding-block:80px 120px}
.toc{position:sticky;top:112px;font-size:14.5px}
.toc .eyebrow{display:block;margin-bottom:14px}
.toc ol{list-style:none;margin:0;padding:0;border-left:2px solid var(--line)}
.toc a{display:block;padding:7px 0 7px 16px;margin-left:-2px;border-left:2px solid transparent;color:var(--text-2);text-decoration:none;line-height:1.35}
.toc a:hover{color:var(--text);border-left-color:var(--brand)}
.doc{max-width:740px;min-width:0;width:100%;overflow-wrap:anywhere}
.doc .inshort{background:var(--white);border:1px solid var(--line);border-left:4px solid var(--brand);border-radius:var(--r-sm);padding:26px 28px;margin-bottom:56px}
.doc .inshort .eyebrow{color:var(--brand)}
.doc .inshort p,.doc .inshort li{font-size:17px;color:var(--text);font-weight:600;line-height:1.55}
.doc .inshort ul{margin:12px 0 0;padding-left:20px}
.doc .inshort li+li{margin-top:6px}
.doc section{padding-top:44px;margin-top:44px;border-top:1px solid var(--line);scroll-margin-top:108px}
.doc section:first-of-type{border-top:none;margin-top:0;padding-top:0}
.doc h2{font-size:clamp(26px,2.6vw,34px);line-height:1.1;font-weight:800;margin-bottom:16px}
.doc h2 .n{font-family:var(--mono);font-size:14px;font-weight:500;letter-spacing:.06em;color:var(--brand);display:block;margin-bottom:10px}
.doc h3{font-size:19px;font-weight:700;letter-spacing:-.01em;margin:24px 0 8px}
.doc p,.doc li{font-size:17px;color:var(--text-2);line-height:1.7}
.doc p+p{margin-top:14px}
.doc ul{margin:14px 0;padding-left:22px}
.doc li+li{margin-top:8px}
.doc li strong,.doc p strong{color:var(--text)}
.doc a{color:var(--brand);text-underline-offset:3px}
.doc .tbl{overflow-x:auto;margin:20px 0 6px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--white)}
.doc table{width:100%;border-collapse:collapse;font-size:15.5px;min-width:520px}
.doc th{text-align:left;font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding:14px 16px;border-bottom:1px solid var(--line)}
.doc td{padding:14px 16px;border-bottom:1px solid var(--line);vertical-align:top;color:var(--text-2);line-height:1.5}
.doc tr:last-child td{border-bottom:none}
.doc td:first-child{color:var(--text);font-weight:600}
.doc-end{margin-top:64px;padding:32px;border-radius:var(--r-md);background:var(--brand-wash);color:var(--text);display:flex;gap:24px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.doc .doc-end p{color:var(--text-2);font-size:17px;max-width:40ch}
.doc .doc-end strong{color:var(--brand);display:block;font-size:21px;letter-spacing:-.02em;margin-bottom:4px}
@media (max-width:960px){
  .doc-layout{grid-template-columns:1fr;gap:36px;padding-block:48px 88px}
  .toc{display:none}
  .page-hero .wrap{padding-top:56px;padding-bottom:52px}
  .page-hero-split{grid-template-columns:1fr;gap:32px}
  .page-photo{aspect-ratio:16/9}
}

/* ── Directory (trade, town and region pages, note 29 s44) ─────────────── */
.hero-ink h1.dir-h1{font-size:clamp(44px,5.4vw,80px);line-height:.95}
.page-hero h1.dir-h1{font-size:clamp(36px,4.8vw,66px);line-height:1}
.dir-figs .big{font-size:clamp(32px,3.4vw,48px)}
.dir-crumb{display:flex;flex-wrap:wrap;gap:8px;font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--ink-muted);margin-bottom:24px}
.dir-crumb a{color:var(--ink-muted);text-decoration:none}.dir-crumb a:hover{color:#fff}
.dir-crumb .here{color:#fff}
.dir-search{margin-top:32px;display:flex;align-items:center;gap:12px;background:var(--white);border-radius:14px;padding:0 8px 0 18px;max-width:480px;height:58px;color:var(--muted)}
.dir-search input{border:0;outline:0;font:500 16px var(--body);flex:1;min-width:0;background:transparent;color:var(--text)}
.dir-search input::-webkit-search-cancel-button{display:none}
.dir-search .clear{display:none;align-items:center;justify-content:center;width:40px;height:40px;border:0;border-radius:10px;background:var(--paper);color:var(--text-2);cursor:pointer;font-size:15px}
.dir-chips{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:14px}
.dir-chips .k{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-muted);margin-right:4px}
.dir-chips a{font-family:var(--mono);font-size:12px;color:#DCE2E8;border:1px solid var(--ink-line);border-radius:999px;padding:6px 12px;text-decoration:none;cursor:pointer}
.dir-chips a:hover{border-color:var(--rec-on-ink);color:#fff}
.dir-cities{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin-top:40px}
.dir-city{background:var(--white);border:1px solid var(--line);border-radius:var(--r-md);padding:18px 20px;text-decoration:none;color:var(--text);min-width:0;transition:border-color .15s ease}
.dir-city:hover{border-color:var(--brand)}
.dir-city b{display:block;font-family:var(--display);font-size:19px;font-weight:700;letter-spacing:-.02em;overflow-wrap:anywhere}
.dir-city span{display:block;font-family:var(--mono);font-size:12px;color:var(--muted);margin-top:8px}
.dir-city span em{font-style:normal;color:var(--brand);font-weight:500}
.dir-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:32px}
.dir-toggle{border:0;background:none;font:700 14px var(--body);color:var(--brand);cursor:pointer;padding:6px 0}
.dir-region{border-top:1px solid var(--line)}
.dir-region:last-of-type{border-bottom:1px solid var(--line)}
.dir-region summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 0;cursor:pointer}
.dir-region summary::-webkit-details-marker{display:none}
.dir-region summary b{font-family:var(--display);font-size:21px;font-weight:700;letter-spacing:-.02em}
.dir-region summary span{font-family:var(--mono);font-size:12px;color:var(--muted);text-align:right}
.dir-region summary span::after{content:"+";display:inline-block;width:18px;margin-left:12px;color:var(--brand);font:500 20px/1 var(--body)}
.dir-region[open] summary span::after{content:"\2212"}
.dir-towns{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 28px;padding:0 0 24px}
.dir-towns a{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--line);color:var(--text);text-decoration:none;font-size:15px;min-width:0}
.dir-towns a:hover{color:var(--brand)}
.dir-towns a span{font-family:var(--mono);font-size:12px;color:var(--muted)}
.dir-more{margin:0 0 24px;border:1px solid var(--line);background:var(--paper);border-radius:999px;padding:9px 16px;font:700 14px var(--body);color:var(--brand);cursor:pointer}
.dir-none{padding:24px 0;color:var(--text-2)}
.dir-none a,.dir-note a{color:var(--brand);font-weight:700}
.dir-note{font-size:var(--fs-small);color:var(--text-2)}
.dir-grp{margin-top:36px}
.dir-grp-hd{display:flex;justify-content:space-between;align-items:center;border-bottom:2px solid var(--text);padding-bottom:12px}
.dir-grp-hd .eyebrow{color:var(--brand)}
.dir-grp-hd span:last-child{font-family:var(--mono);font-size:12px;color:var(--muted)}
.dir-list{list-style:none;margin:0;padding:0}
.dir-list li{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:15px 0;border-bottom:1px solid var(--line);min-width:0}
.dir-list a.nm{color:var(--text);text-decoration:none;font-weight:600;overflow-wrap:anywhere}
.dir-list a.nm:hover{color:var(--brand)}
.dir-list .meta{display:flex;gap:12px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.dir-list .meta a{color:var(--brand);font-weight:600;font-size:14px;text-decoration:none}
.dir-list .pc,.dir-list .ph{font-family:var(--mono);font-size:12px;color:var(--muted)}
.dir-notlisted{margin-top:40px;display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;background:var(--rec-wash);border-radius:var(--r-md);padding:24px 28px}
.dir-notlisted p{margin:0;max-width:60ch}
.dir-trades{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.dir-trades a{border:1px solid var(--line);background:var(--white);border-radius:999px;padding:8px 14px;font-size:14px;font-weight:600;color:var(--text);text-decoration:none}
.dir-trades a:hover{border-color:var(--brand);color:var(--brand)}
.sticky-cta{display:none}

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width:960px){
  .dir-cities{grid-template-columns:1fr 1fr}
  .dir-towns{grid-template-columns:1fr 1fr}
  .dir-head{flex-wrap:wrap}
  :root{--sec:100px;--sec-tight:72px}
  .hero-grid,.split,.blocks,.grid2,.lead-ink,.steps3{grid-template-columns:1fr}
  .hero-grid{gap:48px;padding-top:40px}
  .hero-photo{margin:0 0 -72px 24px}
  .hero-visual .ledger{margin-right:24px}
  .hero-grid:has(> .page-photo) > :first-child{padding-bottom:0}
  .hero-grid > .page-photo{margin-bottom:64px}
  .band .wrap{grid-template-columns:1fr 1fr}
  .band .cell{border-left:none;padding-left:0;border-top:1px solid var(--line)}
  .lead-ink{padding:36px 24px;gap:32px}
  .blocks > *{padding-block:72px}
  .steps3 li,.steps3 li+li{padding:24px 0;border-right:none;border-bottom:1px solid var(--line)}
  .split{gap:24px}
}
@media (max-width:520px){
  body.byp{font-size:17px}
  .band .wrap{grid-template-columns:1fr}
  .timeline li{grid-template-columns:1fr;gap:6px}
  .ledger .rec-rows li,.sheet .rec-rows li{flex-wrap:wrap}
  .hero-ink .ctas .b{width:100%}
  .dir-towns{grid-template-columns:1fr}
  .dir-list li{flex-wrap:wrap}
  .dir-notlisted .b{width:100%}
  .sticky-cta{display:block;position:fixed;left:0;right:0;bottom:0;z-index:40;padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px));background:color-mix(in srgb, var(--paper) 92%, transparent);backdrop-filter:blur(8px);border-top:1px solid var(--line)}
  .sticky-cta .b{width:100%}
  body.has-sticky-cta{padding-bottom:84px}
  .hero-photo{margin:0 0 -56px 0;aspect-ratio:3/2}
  .hero-visual .ledger{margin-right:0}
  .tile{padding:28px 22px}
}
@media (prefers-reduced-motion:reduce){ .byp *{transition:none!important} }

/* ── Motion (2026-10-24) ─────────────────────────────────────────────── */
/* data-reveal + /assets/byp-motion.js: rises 18px and fades in once, as it scrolls into view. --d staggers a group.
   Only after the script has run (html.js-motion) and never for reduced motion, so nothing is ever hidden without it. */
@media (prefers-reduced-motion:no-preference){
  .js-motion [data-reveal]{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .7s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0ms)}
  .js-motion [data-reveal].in{opacity:1;transform:none}
}

/* ── Shared illustrations (2026-10-24) ──────────────────────────────── */
/* Phone search: .ph-stage > .ph-device > .ph-screen (status bar, search, .ph-res results) plus floating .ph-bub questions.
   Each page places its own bubbles (.ph-bub.b1, .b2 ...). On phones the bubbles drop into a row under the handset. */
.ph-stage{position:relative;margin:0;background:#E9E5DA;border-radius:28px;padding:56px 24px;display:flex;justify-content:center;min-width:0}
.ph-device{position:relative;width:min(290px,78%);aspect-ratio:9/19;background:var(--ink);border-radius:46px;padding:9px;transform:rotate(-3deg);box-shadow:inset 0 0 0 1.5px #3A4654}
.ph-btn{position:absolute;width:3px;border-radius:2px;background:#2A333E}
.ph-btn-1{left:-3px;top:18%;height:7%} .ph-btn-2{left:-3px;top:28%;height:11%} .ph-btn-3{right:-3px;top:24%;height:14%}
.ph-screen{position:relative;height:100%;background:var(--white);border-radius:38px;overflow:hidden;padding:14px 14px 0}
.ph-status{display:flex;align-items:center;justify-content:space-between;height:26px;padding:0 10px;color:var(--text);font-size:12.5px}
.ph-status svg{fill:currentColor}
.ph-island{width:78px;height:24px;border-radius:999px;background:var(--ink)}
.ph-search{display:flex;align-items:center;gap:8px;background:#F1EFE9;border-radius:999px;padding:10px 14px;font-size:13.5px;color:var(--text-2);margin:14px 0 6px}
.ph-res{display:flex;gap:10px;align-items:flex-start;padding:13px 2px;border-bottom:1px solid var(--line)}
.ph-fav{flex:none;width:22px;height:22px;border-radius:50%;background:var(--paper);border:1px solid var(--line);font:700 10px var(--display);color:var(--muted);display:flex;align-items:center;justify-content:center;margin-top:1px}
.ph-res b{display:block;font-size:13.5px;font-weight:700;color:var(--brand);letter-spacing:-.01em;line-height:1.25}
.ph-res span:not(.ph-fav){display:block;font:400 11px var(--mono);color:var(--muted);margin-top:4px}
.ph-more{text-align:center;font:500 11px var(--mono);color:var(--brand);margin:14px 0 0}
.ph-home{position:absolute;left:50%;bottom:8px;width:96px;height:4px;border-radius:2px;background:var(--text);transform:translateX(-50%)}
.ph-bub{position:absolute;font:700 13.5px var(--display);letter-spacing:-.01em;color:var(--text);background:var(--white);border:1px solid var(--line);border-radius:999px;padding:9px 15px;white-space:nowrap}
.ph-bub::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--amber-dot);margin-right:8px;vertical-align:1px}
@media (max-width:620px){
  .ph-stage{flex-wrap:wrap;gap:8px;padding:32px 16px 24px}
  .ph-device{width:250px;margin-bottom:18px;transform:rotate(-2deg)}
  .ph-more{display:none}
  .ph-res b{font-size:12.5px} .ph-res span:not(.ph-fav){font-size:10px}
  .ph-bub{position:static;font-size:12.5px;padding:7px 12px}
}

/* Customer views panel: the official card component (.cv-*) on a stone stage, with .views-legend naming the three columns */
.views-panel{margin:56px 0 0;background:#E9E5DA;border-radius:28px;padding:40px clamp(16px,4vw,56px) 44px;min-width:0}
.views-legend{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin:22px 0 10px}
.views-legend span{display:block;padding:0 18px;font-size:13.5px;color:var(--text-2);line-height:1.35}
.views-legend b{display:block;font:500 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--text);margin-bottom:4px}
.views-legend b::after{content:" ↓";color:var(--brand)}
.views-panel .cv-stats{margin-bottom:14px}
.views-panel .cv-stat{background:var(--white)}
@media (max-width:640px){.views-legend{display:none}}
/* Customer view card: a copy of the profile styles in netlify/functions/_utils/customer-views.js (CUSTOMER_VIEWS_CSS). Change both together. */
  .cv-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin:0 0 20px}
  .cv-stat{background:#F6F4EE;border:1px solid #E2DFD5;border-radius:22px;padding:16px 16px 14px}
  .cv-stat b{display:block;font-size:26px;font-weight:800;letter-spacing:-0.03em;line-height:1.05;color:#14191F}
  .cv-stat span{display:block;font-size:13px;line-height:1.4;color:#6E746C;margin-top:6px}
  .cv-f{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 14px}
  .cv-f button{font:inherit;font-size:14px;font-weight:600;color:#3A434E;background:#fff;border:1.5px solid #CFCBBF;border-radius:999px;padding:8px 15px;cursor:pointer}
  .cv-f button:hover{border-color:#0A7A55}
  .cv-f button b{font-weight:800;color:#14191F;margin-left:3px}
  .cv-f button[aria-pressed="true"]{background:#0A7A55;border-color:#0A7A55;color:#fff}
  .cv-f button[aria-pressed="true"] b{color:#fff}
  .cv-list{display:grid;gap:12px}
  .cv-card{border:1px solid #E2DFD5;border-radius:22px;background:#fff;overflow:hidden}
  .cv-card[hidden]{display:none}
  .cv-top{display:flex;gap:14px;align-items:flex-start;padding:20px 22px 16px}
  .cv-face{flex:none;width:40px;height:40px;color:#3A434E;margin-top:1px}
  .cv-face svg{width:40px;height:40px;display:block}
  .cv-id{flex:1;min-width:0}
  .cv-op{font-size:21px;font-weight:800;letter-spacing:-0.02em;margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:10px;line-height:1.2;color:#14191F}
  .cv-job{margin:4px 0 0;font-size:15px;color:#3A434E}
  .cv-ex{display:inline-block;vertical-align:1px;font-family:"DM Mono",monospace;font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:#6E746C;border:1px dashed #CFCBBF;border-radius:999px;padding:3px 9px}
  .cv-tg,.cv-chip em{display:inline-flex;align-items:center;gap:7px;font-family:"DM Mono",monospace;font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;white-space:nowrap;font-weight:500;font-style:normal}
  .cv-tg::before,.cv-chip em::before{content:"";flex:none;width:7px;height:7px;border-radius:50%}
  .cv-tg{border-radius:999px;padding:5px 10px}
  .cv-ask{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 20px;margin:16px 0 0;background:#F6F4EE;border:1px solid #E2DFD5;border-radius:22px;padding:18px 22px}
  .cv-ask p{margin:0;font-size:15.5px;line-height:1.45;color:#3A434E;flex:1 1 280px}
  .cv-ask b{color:#14191F}
  .cv-ask-btn{flex:none;display:inline-block;font-size:15px;font-weight:700;color:#fff;background:#0A7A55;border-radius:999px;padding:11px 20px;text-decoration:none}
  .cv-ask-btn:hover{background:#086345;color:#fff}
  .cv-fine{font-size:13px;line-height:1.5;color:#6E746C;margin:14px 0 0}
  .cv-fine a{color:#3A434E}
  .cv-first{display:flex;gap:18px;align-items:flex-start;background:#fff;border:1.5px dashed #CFCBBF;border-radius:22px;padding:26px 26px 24px}
  .cv-face-lg,.cv-face-lg svg{width:48px;height:48px;color:#6E746C}
  .cv-first-b{flex:1;min-width:0}
  .cv-first-h{margin:2px 0 0;font-size:22px;font-weight:800;letter-spacing:-0.02em;color:#14191F;line-height:1.2}
  .cv-first-s{margin:6px 0 0;font-size:16px;line-height:1.5;color:#3A434E;max-width:60ch}
  .cv-steps{list-style:none;margin:22px 0 24px;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:0 28px}
  .cv-steps li{border-top:2px solid #E2DFD5;padding-top:14px}
  .cv-n{display:block;font-family:"DM Mono",monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#0A7A55;margin:0 0 6px}
  .cv-steps b{display:block;font-size:16px;font-weight:700;color:#14191F;line-height:1.3}
  .cv-steps p{margin:4px 0 0;font-size:14.5px;line-height:1.5;color:#3A434E}
  /* Unclaimed page: a section in the page's own design (paper background, white tiles), one readable column */
  .cv-wide .problem-intro,.cv-unclaimed,.cv-body{max-width:860px}
  .cv-unclaimed{margin:14px 0 26px;font-size:15.5px;line-height:1.5;color:#3A434E;border-left:3px solid #CFCBBF;padding-left:14px}
  .cv-wide .cv-ask,.cv-wide .cv-stat{background:#fff}
  .cv-tg.cust{background:#EFEEE8;color:#4A4F49} .cv-tg.cust::before{background:#8B9088}
  /* three columns (2026-10-23): the customer (grey), the business (violet), Seen by BYP (green), label once at the top */
  .cv-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid #E2DFD5}
  .cv-col{padding:14px 18px 16px;border-left:1px solid #E2DFD5;min-width:0}
  .cv-col:first-child{border-left:0}
  .cv-h{display:flex;align-items:center;gap:7px;font-family:"DM Mono",monospace;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;font-weight:500;margin:0 0 9px}
  .cv-h::before{content:"";width:7px;height:7px;border-radius:50%;flex:none}
  .cv-col.cust .cv-h{color:#4A4F49} .cv-col.cust .cv-h::before{background:#8B9088}
  .cv-col.biz{background:#FBF8FA} .cv-col.biz .cv-h{color:#7A4F68} .cv-col.biz .cv-h::before{background:#9C6A87}
  .cv-col.seen{background:#F5FAF7} .cv-col.seen .cv-h{color:#0B7E58} .cv-col.seen .cv-h::before{background:#10A877}
  .cv-col ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
  .cv-col li{font-size:14px;line-height:1.4;color:#14191F;overflow-wrap:anywhere}
  .cv-col li.q{font-weight:600}
  .cv-col li small{display:block;font-size:12px;color:#6E746C;margin-top:1px}
  .cv-col li.none{color:#8B9088;font-style:italic}
  .cv-d{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;font-family:"DM Mono",monospace;font-size:11px;color:#6E746C;margin:0;padding:10px 22px 14px;border-top:1px solid #E2DFD5;letter-spacing:.02em}
  .cv-more{display:block;width:100%;margin:12px 0 0;font:inherit;font-size:15px;font-weight:700;color:#0A7A55;background:#fff;border:1.5px solid #CFCBBF;border-radius:999px;padding:12px 16px;cursor:pointer}
  .cv-more:hover{border-color:#0A7A55}
  .cv-more[hidden]{display:none}
  @media(max-width:640px){
    .cv-first{flex-direction:column;gap:12px;padding:20px 16px}
    .cv-steps{grid-template-columns:1fr;gap:16px}
    .cv-first .cv-ask-btn{display:block;text-align:center}
    .cv-stats{grid-template-columns:1fr 1fr;gap:8px}
    .cv-stat{padding:14px 14px 12px}
    .cv-stat b{font-size:22px}
    .cv-ask{padding:16px}
    .cv-ask-btn{width:100%;text-align:center}
    .cv-top{padding:16px 14px 12px}
    .cv-cols{grid-template-columns:1fr}
    .cv-col{border-left:0;border-top:1px solid #E2DFD5;display:grid;grid-template-columns:104px minmax(0,1fr);gap:4px 12px;padding:12px 14px}
    .cv-col:first-child{border-top:0}
    .cv-h{margin:2px 0 0}
    .cv-d{padding-left:14px;padding-right:14px}
    .cv-face,.cv-face svg{width:32px;height:32px}
    .cv-op{font-size:19px}
  }