/* The inner pages in the round 15 look (redesign phase 2, 2026-10-19).
   One stylesheet for every page built by tools/page-shell.js: Selling, Buying, the area
   pages, About, Moving from London, Costs. Same tokens, type and buttons as the home page
   (index.html): Montserrat for reading, Bricolage Grotesque for headlines (its @font-face is
   in assets/footer.css, which every page links), red for the main action and "you are here",
   and red bold once per page: the review band. 18 px text and 48 px+ controls throughout.
   The page body markup is unchanged (h2, p, .callout, .review, .steps, .honest, .morelinks,
   .cta, .note, tables); only how it looks changed. */
:root{
  --bg:#f3f4f6;--card:#fff;--ink:#191c22;--mute:#535b67;--line:#dde0e5;--soft:#e8eaee;
  --red:#CE2027;--red2:#A3181E;--on-red:#fff;
  --shadow:0 1px 2px rgba(20,24,32,.06),0 10px 28px rgba(20,24,32,.07);
  --f:'Montserrat','Helvetica Neue',Arial,sans-serif;
  --disp:'Bricolage Grotesque','Montserrat',system-ui,sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:18px/1.65 var(--f);-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%}
img{max-width:100%;display:block}
[hidden]{display:none!important}
a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--red);text-underline-offset:3px;text-decoration-thickness:2px}
a:hover{color:var(--red)}
:focus-visible{outline:3px solid var(--red);outline-offset:3px;border-radius:4px}
h1,h2,h3{text-wrap:balance;margin:0}
p{margin:0 0 16px;text-wrap:pretty}
.gut{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.in{max-width:1180px;margin:0 auto}
.wrap{max-width:760px;margin:0 auto;padding:0 max(16px,env(safe-area-inset-left,0px))}
.eyebrow{margin:0;font:700 14px/1.3 var(--f);letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}

/* buttons, as on the home page */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 22px;border-radius:8px;font:700 17px/1.2 var(--f);text-decoration:none;border:1.5px solid transparent;cursor:pointer;text-align:center;background:var(--red);color:var(--on-red)}
.btn:hover{background:var(--red2);color:var(--on-red)}
.btn.big{min-height:58px;font-size:18px;padding:0 26px}
.btn.ghost{background:transparent;border-color:var(--ink);color:var(--ink)}
.btn.ghost:hover{background:var(--soft);color:var(--ink)}
.ctas{display:flex;flex-wrap:wrap;gap:12px}

/* ---------- the top of the page: three options (html[data-hero]) ---------- */
.ph{position:relative;isolation:isolate;padding-block:clamp(40px,6vw,88px)}
.ph-in{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:clamp(28px,5vw,72px);align-items:center}
.ph-txt{display:grid;gap:20px;min-width:0}
.ph h1{font:800 clamp(42px,6vw,80px)/1 var(--disp);letter-spacing:-.02em}
.ph h1 .tw{color:var(--red);font:inherit}
.ph-lead{margin:0;font-size:clamp(19px,1.6vw,22px);line-height:1.55;font-weight:500;max-width:46ch}
.byline{margin:0;font-size:15px;color:var(--mute)}
.byline a{color:inherit}
.ph-side{min-width:0}
.ph-pic{margin:0;display:none}
.ph-pic img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:18px;box-shadow:0 22px 50px -24px rgba(20,24,32,.45)}
.ph-pic figcaption{font-size:13px;color:var(--mute);margin-top:8px}
.glance{display:none;background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);padding:22px 24px}
.glance h2{font:700 14px/1.3 var(--f);letter-spacing:.12em;text-transform:uppercase;color:var(--mute);margin-bottom:10px}
.glance ol{list-style:none;margin:0;padding:0;counter-reset:g}
.glance li{counter-increment:g;display:grid;grid-template-columns:30px 1fr;gap:12px;align-items:center;min-height:44px;font-weight:700;font-size:17px;line-height:1.3;border-bottom:1px solid var(--line)}
.glance li:last-child{border-bottom:0}
.glance li::before{content:counter(g);width:30px;height:30px;border-radius:50%;background:var(--soft);display:grid;place-items:center;font:800 14px var(--f)}
.glance a{display:inline-flex;min-height:48px;align-items:center;margin-top:8px;font-weight:700;text-decoration:none;border-bottom:2px solid var(--ink)}
.glance a:hover{color:var(--red);border-color:var(--red)}
/* A: a town photo behind white type */
:root[data-hero="a"] .ph{color:#fff;padding-block:clamp(56px,8vw,120px)}
:root[data-hero="a"] .ph::before{content:"";position:absolute;inset:0;z-index:-2;background:var(--photo) center/cover no-repeat}
:root[data-hero="a"] .ph::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(20,20,20,.78),rgba(20,20,20,.45))}
:root[data-hero="a"] .ph-in{grid-template-columns:minmax(0,1fr)}
:root[data-hero="a"] .ph-txt{max-width:820px}
:root[data-hero="a"] .ph .eyebrow,:root[data-hero="a"] .byline{color:rgba(255,255,255,.85)}
:root[data-hero="a"] .ph h1 .tw{color:#ff5a60}
:root[data-hero="a"] .ph .btn.ghost{border-color:#fff;color:#fff}
:root[data-hero="a"] .ph .btn.ghost:hover{background:rgba(255,255,255,.12)}
:root[data-hero="a"] .ph .credit{display:block}
.ph .credit{display:none;position:absolute;right:max(16px,env(safe-area-inset-right,0px));bottom:10px;margin:0;font-size:12px;color:rgba(255,255,255,.8)}
.ph .credit a{color:inherit}
/* B: plain, with the steps at a glance beside the title */
:root[data-hero="b"] .glance{display:block}
:root[data-hero="b"] .ph{padding-bottom:clamp(24px,3vw,40px)}
/* C: white band, the photo beside the title */
:root[data-hero="c"] .ph{background:var(--card);border-bottom:1px solid var(--line)}
:root[data-hero="c"] .ph-pic{display:block}
:root[data-hero="c"] .ph-in{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}

/* ---------- the body ---------- */
main{padding:clamp(32px,4vw,56px) 0 0}
main h2{font:800 clamp(30px,3.4vw,42px)/1.08 var(--disp);letter-spacing:-.02em;margin:clamp(44px,5vw,64px) 0 16px}
main .wrap>h2:first-child{margin-top:0}
main h3{font:800 21px/1.3 var(--f);margin:28px 0 8px}
main p{max-width:64ch}
main ul,main ol{padding-left:22px}
/* a quiet note in the text: a white card with a red rule */
.callout{background:var(--card);border:1px solid var(--line);border-left:4px solid var(--red);border-radius:12px;padding:18px 22px;margin:28px 0;font-size:17px}
.callout b{color:var(--ink)}
/* the review: red, once per page, full width */
.review{background:var(--red);color:#fff;margin:clamp(40px,5vw,64px) calc(50% - 50vw);padding:clamp(40px,5vw,64px) max(16px,calc(50vw - 380px))}
.review q{display:block;quotes:none;font:700 clamp(22px,2.4vw,30px)/1.4 var(--f);letter-spacing:-.005em;max-width:34ch}
.review q::before{content:"\201C";display:block;font:900 72px/.6 var(--f);margin:16px 0 14px;color:#fff}
.review cite{display:block;font-style:normal;font-size:16px;margin-top:18px;color:rgba(255,255,255,.88)}
.review cite a{color:#fff;text-decoration-color:#fff}
.review~.review{background:var(--card);color:var(--ink);border-block:1px solid var(--line)}
.review~.review q::before{color:var(--red)}
.review~.review cite,.review~.review cite a{color:var(--mute);text-decoration-color:var(--line)}
/* the steps: a dot tracker down the left */
.steps{list-style:none;margin:24px 0;padding:0;counter-reset:s}
.steps li{position:relative;counter-increment:s;padding:0 0 26px 64px;max-width:64ch;font-size:17px;color:var(--mute)}
.steps li::before{content:counter(s);position:absolute;left:0;top:-4px;width:42px;height:42px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;font:800 17px var(--f);z-index:1}
.steps li::after{content:"";position:absolute;left:20px;top:38px;bottom:-2px;width:2px;background:var(--line)}
.steps li:last-child::after{display:none}
.steps li:first-child::before{background:var(--red)}
.steps b{display:block;font:800 21px/1.3 var(--f);color:var(--ink);margin-bottom:4px}
/* the four things we won't do: four tiles with a rule on top */
.honest{margin:24px 0}
.honest ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:28px 32px}
.honest li{border-top:3px solid var(--ink);padding-top:14px;font-size:17px;color:var(--mute)}
.honest li b{display:block;font:800 20px/1.3 var(--f);color:var(--ink);margin-bottom:6px}
/* links onward: one row each, arrow on the right */
.morelinks{display:grid;margin:32px 0 0;border-top:2px solid var(--ink)}
.morelinks a{display:flex;justify-content:space-between;align-items:center;min-height:60px;border-bottom:1px solid var(--line);text-decoration:none;font:700 19px/1.3 var(--f)}
.morelinks a:hover{color:var(--red)}
/* the ask at the end: a white panel */
.cta{background:var(--card);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);padding:clamp(24px,4vw,44px);margin:clamp(44px,5vw,64px) 0 0;display:grid;gap:12px;justify-items:start}
.cta h2{margin:0}
.cta p{margin:0;color:var(--mute)}
.cta p a{color:var(--ink)}
.cta .btn{margin-top:8px}
/* FAQ: one row per question */
.faq h2{margin-bottom:8px}
.faq h3{border-top:1px solid var(--line);padding-top:22px;margin:22px 0 6px}
.faq p{color:var(--mute);font-size:17px}
/* numbers, tables, sources */
.stat{background:var(--ink);color:#fff;border-radius:16px;padding:28px 26px;margin:28px 0}
.stat .big{font:800 clamp(2.6rem,8vw,4rem)/1 var(--disp);letter-spacing:-.03em}
.stat .vs{font-size:16px;color:#c9cccf;margin-top:10px}
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:20px 0}
table{width:100%;min-width:420px;border-collapse:collapse;margin:20px 0;font-size:16px;background:var(--card);border-radius:12px;overflow:hidden}
.tablewrap table{margin:0}
th,td{text-align:left;padding:12px 12px;border-bottom:1px solid var(--line)}
th{font-size:13px;text-transform:uppercase;letter-spacing:.08em;color:var(--mute)}
td.n{font-variant-numeric:tabular-nums;font-weight:700;text-align:right}
.src{font-size:14px;color:var(--mute);margin-top:-6px}
.src a,.note a{color:var(--mute);text-decoration-color:var(--line)}
.note{font-size:15px;color:var(--mute);line-height:1.6;margin-top:36px;border-top:1px solid var(--line);padding-top:18px}
/* About's faces */
.faces{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:24px 0 8px}
.faces figure{margin:0}
.faces img{width:100%;aspect-ratio:4/5;height:auto;object-fit:cover;object-position:center 20%;border-radius:14px}
.faces figcaption{font-weight:800;margin-top:10px}
.faces figcaption span{display:block;font-weight:500;color:var(--mute);font-size:15px}

/* phones: the Call / Text bar, as on the home page */
.reach{display:none}
@media (max-width:900px){
  .ph-in,:root[data-hero="c"] .ph-in{grid-template-columns:1fr}
  :root[data-hero="c"] .ph-pic{order:-1}
  .honest ul{grid-template-columns:1fr}
}
@media (max-width:600px){
  body{padding-bottom:calc(64px + env(safe-area-inset-bottom,0px))}
  .ph .btn{width:100%}
  .steps li{padding-left:56px}
  .faces{grid-template-columns:1fr}
  .reach{display:grid;position:fixed;left:0;right:0;bottom:0;z-index:30;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom,0px)}
  .reach a{background:var(--card);min-height:60px;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:18px;text-decoration:none;color:var(--ink)}
  .reach a.r{background:var(--red);color:var(--on-red)}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* preview only: the A / B / C switch */
.pv{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:70;display:flex;gap:4px;align-items:center;background:#191c22;color:#fff;border-radius:999px;padding:5px 6px 5px 16px;font:600 14px var(--f);box-shadow:0 10px 30px rgba(0,0,0,.3)}
.pv button{all:unset;cursor:pointer;min-height:40px;min-width:40px;padding:0 12px;border-radius:999px;font-weight:800;text-align:center}
.pv button[aria-pressed="true"]{background:#fff;color:#191c22}
@media (max-width:600px){.pv{bottom:80px}}

/* the text lines up under the title: the same 1180 px column, reading width inside it */
main .wrap{max-width:1180px;padding:0 max(16px,env(safe-area-inset-right,0px)) 0 max(16px,env(safe-area-inset-left,0px))}
main .wrap>*{max-width:760px}
main .wrap>.honest,main .wrap>.faq{max-width:960px}
main .wrap>.review{max-width:none}
.review{padding-inline:max(16px,calc(50vw - 590px))}

/* ---------- the steps, sideways: three options (html[data-steps]) ---------- */
main .wrap>.journey{max-width:none}
.journey{margin:clamp(48px,6vw,80px) calc(50% - 50vw);padding:clamp(48px,6vw,88px) max(16px,calc(50vw - 590px))}
.j-head{display:grid;gap:10px;max-width:760px}
.j-head h2{margin:0!important}
.j-head p{margin:0;color:var(--mute);font-size:19px}
.j-phase ol{list-style:none;margin:0;padding:0}
.j-phase li{list-style:none}
.j-nav{display:flex;gap:12px;align-items:center;margin-top:20px}
.j-nav button{width:52px;height:52px;border-radius:50%;border:1.5px solid var(--ink);background:transparent;color:var(--ink);font:800 20px var(--f);cursor:pointer;display:grid;place-items:center}
.j-nav button:hover:not(:disabled){background:var(--red);border-color:var(--red);color:#fff}
.j-nav button:disabled{opacity:.3;cursor:default}
.j-nav .j-count{font-weight:700;color:var(--mute);margin-left:4px}
.j-panel{display:none}

/* 1 · Dots: eight dots on a line; tap one and it opens underneath */
:root[data-steps="1"] .journey{background:var(--card);border-block:1px solid var(--line)}
:root[data-steps="1"] .j-phases{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));margin-top:44px}
:root[data-steps="1"] .j-phase,:root[data-steps="1"] .j-phase ol{display:contents}
:root[data-steps="1"] .j-phase h3,:root[data-steps="1"] .j-d{display:none}
:root[data-steps="1"] .j-phase li{position:relative;display:grid;justify-items:center;align-content:start;gap:12px;text-align:center;cursor:pointer;padding:0 6px;outline-offset:6px}
:root[data-steps="1"] .j-phase li::after{content:"";position:absolute;top:28px;left:50%;width:100%;height:3px;background:var(--line);z-index:0}
:root[data-steps="1"] .j-phase:last-child li:last-child::after{display:none}
:root[data-steps="1"] .j-phase li.done::after{background:var(--red)}
:root[data-steps="1"] .j-n{position:relative;z-index:1;width:58px;height:58px;border-radius:50%;background:var(--soft);display:grid;place-items:center;font:800 22px var(--disp);transition:transform .2s,background .2s,color .2s;border:4px solid var(--card)}
:root[data-steps="1"] li.done .j-n{background:var(--ink);color:#fff}
:root[data-steps="1"] li.on .j-n{background:var(--red);color:#fff;transform:scale(1.15)}
:root[data-steps="1"] li:hover .j-n{transform:scale(1.1)}
:root[data-steps="1"] .j-phase li b{font:700 16px/1.3 var(--f);max-width:15ch}
:root[data-steps="1"] li.on b{color:var(--red)}
:root[data-steps="1"] .j-panel{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 28px;align-items:start;margin-top:36px;background:var(--bg);border-radius:18px;padding:clamp(22px,3vw,36px)}
.j-panel .jp-n{grid-row:1/5;font:800 clamp(64px,8vw,104px)/.85 var(--disp);color:var(--red);letter-spacing:-.03em}
.j-panel .jp-ph{margin:0;font:700 14px/1.3 var(--f);letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.j-panel .jp-t{margin:0;font:800 clamp(26px,2.8vw,36px)/1.1 var(--disp);letter-spacing:-.015em}
.j-panel .jp-d{margin:4px 0 0;font-size:19px;color:var(--mute);max-width:56ch}
.j-panel .j-nav{margin-top:12px}

/* 2 · Three stretches: before, on the market, sold, side by side on a dark band */
:root[data-steps="2"] .journey{background:#141414;color:#f4f3f0;--ink:#f4f3f0;--mute:#b4b8be;--line:#34363b}
:root[data-steps="2"] .j-phases{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:40px}
:root[data-steps="2"] .j-phase{background:#1f2125;border-radius:20px;padding:clamp(22px,2.6vw,32px);display:grid;gap:22px;align-content:start}
:root[data-steps="2"] .j-phase h3{margin:0;display:grid;gap:6px;font:800 26px/1.15 var(--disp);color:#fff}
:root[data-steps="2"] .j-phase h3 i{font-style:normal;font:800 64px/.9 var(--disp);color:#ff4d54;letter-spacing:-.03em}
:root[data-steps="2"] .j-phase ol{display:grid;gap:18px}
:root[data-steps="2"] .j-phase li{display:grid;grid-template-columns:34px minmax(0,1fr);gap:2px 14px}
:root[data-steps="2"] .j-n{grid-row:1/3;width:34px;height:34px;border-radius:50%;border:2px solid #ff4d54;color:#fff;display:grid;place-items:center;font:800 15px var(--f)}
:root[data-steps="2"] .j-phase li b{font:700 19px/1.3 var(--f);color:#fff}
:root[data-steps="2"] .j-d{font-size:16px;line-height:1.55;color:#b9bec6}

/* 3 · Swipe: one big card per step, sideways, with arrows */
:root[data-steps="3"] .j-phases{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin-top:36px;padding:4px 2px 28px;overscroll-behavior-x:contain}
:root[data-steps="3"] .j-phases::-webkit-scrollbar{display:none}
:root[data-steps="3"] .j-phase,:root[data-steps="3"] .j-phase ol{display:contents}
:root[data-steps="3"] .j-phase h3{display:none}
:root[data-steps="3"] .j-phase li{flex:0 0 min(360px,82vw);scroll-snap-align:start;background:var(--card);border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow);padding:28px;display:grid;gap:10px;align-content:start;min-height:320px}
:root[data-steps="3"] .j-phase li::before{content:attr(data-phase);font:700 13px/1.3 var(--f);letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
:root[data-steps="3"] .j-n{font:800 88px/.85 var(--disp);color:var(--red);letter-spacing:-.04em;margin:6px 0 8px}
:root[data-steps="3"] .j-phase li b{font:800 25px/1.15 var(--disp)}
:root[data-steps="3"] .j-d{font-size:17px;color:var(--mute)}
:root:not([data-steps="3"]):not([data-steps="2"]) .journey>.j-nav{display:none}
:root[data-steps="2"] .journey>.j-nav{display:none}

@media (max-width:900px){
  :root[data-steps="2"] .j-phases{grid-template-columns:1fr}
}
@media (max-width:700px){
  :root[data-steps="1"] .j-phase li b{display:none}
  :root[data-steps="1"] .j-n{width:38px;height:38px;font-size:16px;border-width:3px}
  :root[data-steps="1"] .j-phase li{padding:0 2px;min-height:48px}
  :root[data-steps="1"] .j-phase li::after{top:18px}
  :root[data-steps="1"] .j-panel{grid-template-columns:1fr}
  .j-panel .jp-n{grid-row:auto;font-size:56px}
}

/* ---------- shorter pages (Dan, 2026-10-20: "still too long of a scroll") ---------- */
.ph{padding-block:clamp(32px,4.5vw,64px)}
/* the price text beside the review: the review becomes a red card, still the one red thing on the page */
main .wrap>.duo{max-width:none;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(24px,4vw,56px);align-items:center}
.duo>div>h2:first-child{margin-top:0}
.duo .callout{margin-bottom:0}
.duo .review{margin:0;border-radius:20px;padding:clamp(26px,3vw,40px)}
.duo .review q{font-size:clamp(20px,1.9vw,25px)}
/* the questions fold open */
.faq details{border-top:1px solid var(--line)}
.faq details:last-of-type{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:64px;padding-block:10px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;width:36px;height:36px;border-radius:50%;background:var(--soft);display:grid;place-items:center;font:800 22px/1 var(--f);transition:transform .2s}
.faq details[open] summary::after{content:"–";background:var(--red);color:#fff}
.faq summary h3{margin:0;border:0;padding:0;font:700 19px/1.35 var(--f)}
.faq summary:hover h3{color:var(--red)}
.faq details p{margin:0 0 20px;padding-right:52px}
/* four things in one row */
.honest ul{grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
main .wrap>.honest{max-width:none}
/* links onward: one line of pills */
.morelinks{display:flex;flex-wrap:wrap;gap:10px;border-top:0;margin-top:28px}
.morelinks a{min-height:48px;border:1.5px solid var(--line);border-radius:999px;padding:0 18px;font-size:16px;background:var(--card);border-bottom-width:1.5px}
.morelinks a:hover{border-color:var(--red)}
@media (max-width:900px){
  .ph-side .glance{display:none!important}
  main .wrap>.duo{grid-template-columns:1fr}
  .honest ul{grid-template-columns:1fr 1fr}
  /* the three stretches slide sideways on phones */
  :root[data-steps="2"] .j-phases{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;gap:14px;padding-bottom:6px}
  :root[data-steps="2"] .j-phases::-webkit-scrollbar{display:none}
  :root[data-steps="2"] .j-phase{flex:0 0 86%;scroll-snap-align:start}
  :root[data-steps="2"] .journey>.j-nav{display:flex}
  :root[data-steps="2"] .j-nav button{border-color:#f4f3f0;color:#f4f3f0}
}
@media (max-width:560px){
  .honest ul{grid-template-columns:1fr;gap:18px}
  .honest li{font-size:16px}
}
main .wrap>.morelinks{max-width:none}

/* privacy, terms, 404: plain reading pages */
main.legal h2{font-size:clamp(24px,2.4vw,30px);margin-top:40px}
main.legal ul{margin:0 0 16px}
main.legal li{margin-bottom:8px;max-width:64ch}

/* development pages (tools/prerender.ts) */
.crumbs{margin:0;font-size:15px;color:var(--mute)}
.crumbs a{color:inherit}
.dev-n b{color:var(--red);font:800 clamp(30px,3vw,42px)/1 var(--disp);letter-spacing:-.02em}
.summary{font-size:19px}
.evidence blockquote{margin:10px 0 8px;font-style:italic;font-size:18px;line-height:1.55}
.evidence .src{margin:0}
.devtl{list-style:none;padding:0!important;margin:16px 0 8px}
.devtl li{position:relative;padding:0 0 22px 32px;max-width:64ch}
.devtl li::before{content:"";position:absolute;left:0;top:8px;width:14px;height:14px;border-radius:50%;background:var(--red);z-index:1}
.devtl li::after{content:"";position:absolute;left:6px;top:20px;bottom:0;width:2px;background:var(--line)}
.devtl li:last-child::after{display:none}
.devtl li span{display:block;color:var(--mute);font-size:16px}
.more a{font-weight:700}
main .wrap>.hub{max-width:960px;list-style:none;padding:0;margin:12px 0 8px;border-top:2px solid var(--ink)}
.hub li{display:flex;justify-content:space-between;gap:14px;align-items:center;min-height:58px;padding:10px 0;border-bottom:1px solid var(--line)}
.hub a{font-weight:700;text-decoration:none}
.hub a:hover{color:var(--red)}
.hub span{color:var(--mute);font-size:15px;white-space:nowrap}

/* spacing fixes (2026-10-20): the text column lines up exactly under the title (the 16 px side padding
   sits outside the 1180 px column, as it does on the top band), plain tops sit closer to the text,
   and a row of link buttons keeps a gap under it */
main .wrap{max-width:calc(1180px + 2 * max(16px,env(safe-area-inset-left,0px)))}
:root[data-hero="b"] main{padding-top:clamp(8px,1.5vw,20px)}
.morelinks{margin-bottom:24px}