/* Brand font: Special Gothic, loaded from Google Fonts, used for text and headings alike. */
/* ===== Baker 1031 — content pages (Learn, sponsors, markets, glossary, calculators, policies) =====
   Tokens first, then the interior component sheet ported from the previous site with its variables
   re-pointed at these tokens, then overrides that bring type and spacing in line with the 2026 rebuild. */
:root{
  --black:#000000; --white:#fff;
  --accent:#00A071;
  --btn:#00805A; --btn-hover:#006847; --accent-hover:#008F63; --accent-soft:#FCF7F0;
  /* Text-safe green. The brand green #00A071 is 3.35:1 on white, below the 4.5:1 WCAG AA
     minimum for normal-size text, and most green text on this site is an 11-16px label.
     #00805A is 4.96:1. Backgrounds, borders, icons and rules keep --accent. */
  --accent-text:#00805A;
  --accent-2:#00805A; --rose:#00A071; --stone:#FCF7F0;
  --grey:#000000; --grey-light:rgba(0,0,0,.6); --hair:#D5D2CD; --hair-strong:#D5D2CD;
  --radius:6px;
  --font:"Special Gothic", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --hand:"Caveat", "Segoe Print", "Bradley Hand", cursive;
  /* previous-site variable names -> this design */
  --ink:#000000; --blue-d:#00805A; --blue:#00A071; --blue-lt:#D5D2CD;
  --pale:#FCF7F0; --grey1:#FCF7F0; --page:#FFFFFF; --body:#000000; --muted:rgba(0,0,0,.6);
  --faint:rgba(0,0,0,.55); --steel:#000000; --lblue:#FCF7F0;
  --display:"Special Gothic", "Helvetica Neue", Helvetica, Arial, sans-serif; --sans:var(--font);
  --gut:max(24px, calc((100vw - 1200px) / 2));
  --hdr:64px;
}
*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{ margin:0; background:var(--page); color:var(--black); font-family:var(--font); font-size:16px; line-height:1.5; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
::selection{ background:var(--accent); color:var(--white); }
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:12px 20px; background:var(--btn); color:var(--white);
  border:1px solid var(--btn); border-radius:var(--radius);
  font:inherit; font-size:14px; font-weight:600; text-decoration:none; cursor:pointer;
  transition:background .18s ease, border-color .18s ease;
}
.btn:hover{ background:var(--btn-hover); border-color:var(--btn-hover); }
.btn svg{ width:16px; height:16px; }
.btn--secondary, .btn--outline{ background:var(--white); color:var(--black); border-color:var(--hair-strong); }
.btn--secondary:hover, .btn--outline:hover{ background:#FCF7F0; border-color:var(--black); color:var(--black); }
.btn--primary{ background:var(--btn); color:var(--white); border-color:var(--btn); }
.btn-row{ display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
.rule{ max-width:calc(1200px + 48px); margin:0 auto; padding:0 24px; }
.rule::before{ content:""; display:block; height:1px; background:#D5D2CD; }
.rule--strong::before{ height:2px; background:#D5D2CD; }

/* ---- previous-site base rules the interior pages rely on ---- */
/* ---------- display type: Optima Bold ---------- */
h1,h2,h3,h4,.h1,.h2,.h3,.h6{font-family:var(--display);font-weight:400;color:var(--ink);margin:0;
  letter-spacing:0}
h1,.h1{font-size:clamp(38px,4.4vw,64px);line-height:1.08}
.h2{font-size:clamp(28px,2.9vw,42px);line-height:1.16}
.h3{font-size:clamp(25px,2.5vw,36px);line-height:1.22}
.h6{font-size:clamp(19px,1.75vw,25px);line-height:1.3}
.eyebrow{font-family:var(--sans);font-size:14px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);line-height:1.4;margin:0 0 22px;display:block}
.on-dark .eyebrow,.eyebrow.on-dark{color:rgba(255,255,255,.84)}
.p-main{font-size:clamp(17px,1.4vw,21.8px);line-height:1.7}
p{margin:0 0 22px;max-width:68ch}
p:last-child{margin-bottom:0}
.fine{font-size:13px;line-height:1.65;color:var(--muted)}

.link{display:inline-flex;align-items:center;gap:10px;padding:8px 0;font-size:14px;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;color:var(--blue-d);transition:gap .25s,color .25s}
.link:hover{gap:16px;color:var(--accent-text)}
.link.on-dark{color:#fff}.link.on-dark:hover{color:var(--pale)}
.btn-row{display:flex;gap:20px;flex-wrap:wrap;align-items:center}

.bg-pale{background:var(--pale)}
.bg-grey{background:var(--grey1)}
.bg-white{background:#fff}
.bg-blue{background:var(--blue-d);color:rgba(255,255,255,.9)}
.bg-ink{background:var(--ink);color:rgba(255,255,255,.88)}
.bg-blue .h1,.bg-blue .h2,.bg-blue .h3,.bg-ink .h1,.bg-ink .h2,.bg-ink .h3{color:#fff}

.pill{font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  padding:10px 18px;border:1px solid var(--hair);border-radius:3px;background:transparent;color:var(--muted);
  cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.pill:hover{border-color:var(--blue-d);color:var(--blue-d)}
.pill.on{background:var(--blue-d);border-color:var(--blue-d);color:#fff}

/* ---- previous-site interior component sheet (design-2026-pages.css), re-tokenized ---- */
/* Baker 1031 - 2026 design system, interior pages.
   Source: the interior-page layer of the approved design (mast, crumbs, rail,
   prose, shell, callout, inventory, calculator and document classes).

   Deliberately a SECOND file rather than merged into design-2026.css: three
   selectors collide with the homepage -- .btn (padding/font-size/tracking),
   .btn-row (gap) and .brand img (height) -- and merging would silently
   restyle the homepage's buttons. Interior pages link both sheets; the
   homepage links only the first. */


/* ==========================================================================
   Components added for the inner pages (form, inventory, listing, insights,
   calculators, policies). Same tokens, same rhythm as the homepage.
   ========================================================================== */

/* The solid-header variant used to live here; it moved to design-2026.css,
   beside the header it modifies, so pages that carry the 2026 chrome without
   the interior-content sheet (the login / offerings / listing templates) get a
   header that is actually solid. */

/* ---------- page masthead ---------- */
.mast{background:var(--blue-d);color:#fff;padding:76px var(--gut) 84px}
.mast .h1,.mast .h2{color:#fff;max-width:20ch}
.mast p{color:rgba(255,255,255,.9);max-width:60ch;margin-top:22px}
.crumbs{display:flex;gap:10px;align-items:center;flex-wrap:wrap;font-size:12px;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;color:rgba(255,255,255,.72);margin-bottom:26px}
.crumbs a:hover{color:#fff}
.mast--light .crumbs a:hover{color:var(--ink)}
.crumbs span{opacity:.5}
.mast--light{background:var(--pale);color:var(--body)}
.mast--light .h1,.mast--light .h2{color:var(--ink)}
.mast--light p{color:var(--body)}
.mast--light .crumbs{color:var(--muted)}

/* ---------- generic prose ---------- */
.prose{max-width:74ch}
.prose h2{font-size:clamp(24px,2.3vw,32px);line-height:1.24;margin:52px 0 18px}
.prose h3{font-size:clamp(20px,1.8vw,25px);line-height:1.3;margin:38px 0 14px}
.prose p,.prose li{font-size:16.5px;line-height:1.78;color:var(--body)}
.prose ul,.prose ol{padding-left:22px;margin:0 0 22px}
.prose li{margin-bottom:10px}
.prose a{color:var(--blue-d);border-bottom:1px solid rgba(0,128,90,.35)}
.prose a:hover{color:var(--blue-d);border-bottom-color:var(--blue-d)}
.prose blockquote{margin:32px 0;padding:4px 0 4px 26px;border-left:2px solid var(--blue);
  font-family:var(--display);font-size:22px;line-height:1.45;color:var(--blue-d)}
.callout{background:var(--stone);border-left:3px solid var(--blue);padding:26px 28px;margin:34px 0}
.callout h4{font-family:var(--sans);font-size:12.5px;font-weight:700;letter-spacing:.15em;
  text-transform:uppercase;color:var(--blue-d);margin:0 0 10px}
.callout p{margin:0;font-size:15.5px;line-height:1.7}

/* ---------- two-column page shell with a sticky rail ---------- */
.shell{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:clamp(32px,4.6vw,80px);align-items:start}
.shell--left{grid-template-columns:250px minmax(0,1fr)}
/* A .shell with no .rail is a one-column page -- /process/, /performance/ and
   /property-types/ were each leaving a dead 300px track beside the content. */
.shell:not(:has(> .rail)){grid-template-columns:minmax(0,1fr)}
@media(max-width:980px){.shell,.shell--left{grid-template-columns:1fr}}
.rail{position:sticky;top:96px}
.rail h4{font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.15em;
  text-transform:uppercase;color:var(--muted);margin:0 0 14px}
.rail a:not(.btn){display:block;padding:9px 0;font-size:14.5px;color:var(--body);border-bottom:1px solid var(--hair)}
.rail a:not(.btn):hover,.rail a:not(.btn)[aria-current]{color:var(--blue-d)}
.rail a:not(.btn)[aria-current]{font-weight:600}

/* ---------- learn / insights ---------- */
.feature{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(28px,4vw,64px);
  align-items:center;margin-bottom:64px}
@media(max-width:900px){.feature{grid-template-columns:1fr}}
.feature img{width:100%;height:clamp(260px,30vw,400px);object-fit:cover}
.meta-row{display:flex;gap:16px;align-items:center;flex-wrap:wrap;font-size:12px;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.meta-row .cat{color:var(--blue-d)}
.posts{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:clamp(26px,3.2vw,48px)}
.post{display:flex;flex-direction:column;padding-bottom:26px;border-bottom:1px solid var(--hair)}
.post .nm{margin:14px 0 0;font-family:var(--display);font-weight:400;font-size:22px;line-height:1.28;color:var(--ink)}
.post:hover .nm{color:var(--blue-d)}
.post p{font-size:14.5px;line-height:1.65;color:var(--muted);margin:12px 0 0}
.post .link{margin-top:auto;padding-top:18px;font-size:12.5px}
.pager{display:flex;gap:8px;justify-content:center;align-items:center;margin-top:64px}
.pager a,.pager span{min-width:42px;height:42px;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--hair);border-radius:3px;font-size:14px;color:var(--body)}
.pager a:hover{border-color:var(--blue-d);color:var(--blue-d)}
.pager .on{background:var(--blue-d);border-color:var(--blue-d);color:#fff}

/* ---------- article ---------- */
.toc{border-left:2px solid var(--hair);padding-left:20px}
.toc a{display:block;padding:8px 0;font-size:14px;color:var(--muted);border:0}
.toc a:hover{color:var(--blue-d)}
.byline{display:flex;gap:16px;align-items:center;padding:26px 0;border-top:1px solid var(--hair);
  border-bottom:1px solid var(--hair);margin:0 0 44px}
.byline img{width:54px;height:54px;border-radius:50%;object-fit:cover;object-position:50% 18%}
.byline b{font-family:var(--display);font-weight:400;font-size:18px;color:var(--ink)}
.byline span{display:block;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);margin-top:4px}
.byline .when{margin-left:auto;font-size:13px;color:var(--muted);text-align:right}

/* ---------- calculators ---------- */
.calc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,4vw,64px);align-items:start}
@media(max-width:900px){.calc{grid-template-columns:1fr}}
.calc-panel{border:1px solid var(--hair);background:#fff;padding:32px 30px}
.calc-out{background:var(--blue-d);color:#fff;padding:36px 32px}
.calc-out .big{font-family:var(--display);font-size:clamp(34px,4vw,54px);line-height:1.05;color:#fff}
.calc-out .biglab{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.78);margin-top:12px}
.calc-out .row{display:flex;justify-content:space-between;gap:14px;padding:14px 0;
  border-top:1px solid rgba(255,255,255,.22);font-size:15px;color:rgba(255,255,255,.9)}
.calc-out .row:first-of-type{margin-top:30px}
.calc-out .row b{font-weight:600;color:#fff;font-family:var(--display);font-size:18px}
.calc-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:20px;margin-top:52px}
.calc-tile{border:1px solid var(--hair);background:#fff;padding:24px 22px;display:flex;flex-direction:column;gap:8px;
  transition:border-color .25s,transform .25s}
.calc-tile:hover{border-color:var(--blue);transform:translateY(-3px)}
.calc-tile b{font-family:var(--display);font-weight:400;font-size:19px;color:var(--ink)}
.calc-tile small{font-size:13.5px;line-height:1.55;color:var(--muted)}

/* ---------- narrow-screen corrections ---------- */
.calc>*,.shell>*,.wiz>*,.split>*,.feature>*{min-width:0}
.field input,.field select,.field textarea{min-width:0;max-width:100%}
.calc-panel,.calc-out{min-width:0;overflow-wrap:anywhere}
@media(max-width:520px){
  .calc-panel{padding:24px 20px}
  .calc-out{padding:26px 20px}
}
.byline{flex-wrap:wrap}
.byline .when{margin-left:auto;min-width:0}
@media(max-width:560px){.byline .when{margin-left:0;text-align:left;width:100%}}
.mini{gap:8px}
.mini .v{font-size:clamp(15px,4vw,19px);white-space:nowrap}
@media(max-width:420px){.mini{grid-template-columns:1fr 1fr}.mini div:last-child{grid-column:1/-1}}
.kf .n{overflow-wrap:anywhere}
@media(max-width:560px){.kf .n{font-size:clamp(22px,7vw,30px)}}
.chart div span{font-size:10px}
@media(max-width:760px){.chart div span{display:none}.chart-x div{font-size:9px}}
.spec th,.spec td{overflow-wrap:anywhere}

@media(max-width:480px){
  .btn{padding:15px 22px;font-size:12px;letter-spacing:.12em;white-space:normal;text-align:center}
  .btn-row{gap:12px}
  .btn-row .btn{flex:1 1 100%}
}


/* ---------- legacy calculator panels ----------
   Carried across verbatim from the calculator pages' own stylesheet so the
   working markup and its JS (which keys off element ids) survive the port
   untouched. The container is renamed .calc -> .calcbox because the 2026
   sheet already defines .calc as a two-column grid; loading both would have
   turned every calculator panel into a grid and broken the layout. */
.fineprint{border-top:1px solid var(--hair); margin-top:48px; padding-top:22px; font-size:13px; font-weight:300; line-height:1.8; color:var(--faint);}
.calcbox{border:1px solid var(--hair); padding:36px 40px; margin-bottom:36px;}
.calcbox .grid{display:grid; grid-template-columns:1fr 1fr; gap:22px 32px;}
.calcbox label{display:block; font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--ink); margin-bottom:8px;}
.calcbox input, .calcbox select{width:100%; border:1px solid var(--hair); background:#fff; font-family:inherit; font-size:15.5px; font-weight:300; color:var(--ink); padding:13px 14px; outline:none;}
.calcbox input:focus, .calcbox select:focus{border-color:var(--steel);}
.calcbox .full{grid-column:1 / -1;}
.results{background:var(--ink); color:#fff; padding:34px 40px; margin-bottom:16px;}
.results .rrow{display:flex; justify-content:space-between; align-items:baseline; gap:20px; padding:11px 0; border-bottom:1px solid rgba(255,255,255,.14);}
.results .rrow:last-child{border-bottom:0;}
.results .rk{font-size:13px; font-weight:300; color:rgba(255,255,255,.75);}
.results .rv{font-size:17px; font-weight:600;}
.results .rrow.big .rv{font-size:24px; color:var(--lblue);}
.results .warn{margin-top:14px; font-size:13px; font-weight:300; line-height:1.7; color:#F0DFA8;}
.calcnote{font-size:13px; font-weight:300; line-height:1.8; color:var(--faint);}
.calcbox .grid, .hublist{grid-template-columns:1fr;}
.calcbox, .results{padding:26px 22px;}

/* ================= LEARN INDEX (/learn/) =================
   The learn index is rendered from templates/learn-index.html by build.js,
   which injects {{FEATURED_HTML}} and {{ROWS_HTML}}. Those two fragments are
   generated in build.js and carry their own class names -- .art-row/.cat/.t/
   .ex/.meta for a row, and .wrap/.flag/.by/.read inside the featured card.
   Every selector below is scoped under .featured, .art-row or .filterbar so
   nothing here can reach another page. Changing a class name here without
   changing the matching string in build.js will silently unstyle the page. */

.featured{background:var(--grey1);border-bottom:1px solid var(--hair)}
.featured .wrap{max-width:1240px;margin:0 auto;padding:56px var(--gut);cursor:pointer}
.featured .flag{font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--blue-d);margin-bottom:14px}
.featured h2{font-family:var(--display);font-weight:400;font-size:clamp(28px,3.2vw,38px);
  line-height:1.2;margin:0 0 16px;max-width:900px;color:var(--ink)}
.featured p{font-size:16.5px;line-height:1.75;color:var(--body);max-width:760px;margin:0 0 18px}
.featured .by{font-size:13.5px;color:var(--muted)}
.featured .by b{font-weight:600;color:var(--ink)}
.featured .read{font-size:14px;font-weight:600;color:var(--blue-d);margin-top:16px}
.featured .read:after{content:" \2192"}
.featured .wrap:hover h2{color:var(--blue-d)}

.filterbar{border-bottom:1px solid var(--hair);background:#fff}
.filterbar-in{max-width:1240px;margin:0 auto;padding:20px var(--gut);
  display:flex;align-items:center;gap:10px;flex-wrap:wrap}
/* The filter script toggles .active; the shared sheet styles the selected
   state as .pill.on. Mirror it rather than editing the script. */
.pill.active{background:var(--blue-d);border-color:var(--blue-d);color:#fff}
.fcount{margin-left:auto;font-size:13px;color:var(--muted)}

.artlist{max-width:1240px;margin:0 auto;padding:24px var(--gut) 88px}
a.art-row{text-decoration:none}
.art-row{display:grid;grid-template-columns:180px 1fr 200px;gap:40px;align-items:baseline;
  border-bottom:1px solid var(--hair);padding:34px 0;cursor:pointer}
.art-row .cat{font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:var(--blue-d)}
.art-row .t{font-family:var(--display);font-weight:400;font-size:22px;line-height:1.35;
  color:var(--ink);margin-bottom:8px;transition:color .15s ease}
.art-row:hover .t{color:var(--blue-d)}
.art-row .ex{font-size:15px;line-height:1.7;color:var(--body)}
.art-row .soon{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.05em;
  color:var(--muted);border:1px solid var(--hair);padding:3px 10px;margin-left:12px;vertical-align:middle}
.art-row .meta{font-size:13px;color:var(--muted);text-align:right;line-height:1.7}
.art-row .meta b{font-weight:600;color:var(--ink);display:block}
.empty{text-align:center;padding:80px 20px;font-size:16px;color:var(--muted)}

@media(max-width:980px){
  .art-row{grid-template-columns:1fr;gap:8px}
  .art-row .meta{text-align:left}
}
@media(max-width:700px){
  .fcount{margin-left:0;width:100%}
  .featured .wrap{padding-top:40px;padding-bottom:40px}
}

/* ================= ARTICLES (/learn/<slug>/) =================
   Rendered from templates/article.html by build.js, which substitutes
   {{BODY_HTML}} with marked() output. The block classes below are baked into
   the 531 markdown files themselves -- .takeaways, .faq, .glossary, .pullquote,
   .disclosures, .refs, .dtable2 and friends. None of them had any CSS anywhere
   before this (not in the old template's inline style, not in baker-2026.css),
   so they have been rendering as undifferentiated body text on every article.
   These rules give them the shape the writing already assumes.
   Everything is scoped under .prose or an article-only class. */

.artmast .cat{font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--blue-d);margin:0 0 14px}
.byline{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px;margin-top:22px;
  font-size:14px;color:var(--muted)}
.byline .who{font-weight:600;color:var(--ink)}
.byline .dot{color:var(--muted)}

/* --- long-form additions the generic .prose block does not cover --- */
.prose h4{font-family:var(--display);font-weight:400;font-size:19px;margin:30px 0 10px}
.prose>p:first-child,.prose .lead,.prose 
.prose code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.9em;
  background:var(--grey1);padding:2px 6px;border-radius:3px}
.prose pre{background:var(--grey1);padding:18px 20px;overflow-x:auto;margin:26px 0}
.prose pre code{background:none;padding:0}
.prose img{max-width:100%;height:auto}
.prose hr{border:0;border-top:1px solid var(--hair);margin:40px 0}

/* Tables. build.js wraps every markdown table in .tblwrap so wide comparison
   grids scroll instead of pushing the page sideways on a phone. */
.tblwrap{overflow-x:auto;margin:30px 0;-webkit-overflow-scrolling:touch}
.tblwrap table,table.dtable2{border-collapse:collapse;width:100%;font-size:15px}
.tblwrap th,table.dtable2 th{text-align:left;font-family:var(--sans);font-size:12px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:#fff;background:var(--blue-d);
  padding:12px 14px;vertical-align:bottom}
.tblwrap td,table.dtable2 td{padding:12px 14px;border-bottom:1px solid var(--hair);
  color:var(--body);vertical-align:top;line-height:1.6}
table.dtable2{margin:30px 0;display:block;overflow-x:auto}

.prose dl{margin:22px 0}
.prose dt{font-weight:600;color:var(--ink);margin-top:14px}
.prose dd{margin:4px 0 0;color:var(--body);line-height:1.7}

/* --- content blocks baked into the articles --- */
.takeaways{background:var(--pale);border-left:3px solid var(--blue);padding:26px 28px;margin:34px 0}
.takeaways .tk-h{font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.15em;
  text-transform:uppercase;color:var(--blue-d);margin-bottom:12px}
.takeaways ul{margin:0;padding-left:20px}
.takeaways li{margin-bottom:8px}

.faq{margin:34px 0;border-top:1px solid var(--hair)}
.faq details{border-bottom:1px solid var(--hair)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;
  align-items:flex-start;gap:20px;padding:20px 0;font-family:var(--display);font-size:18px;
  line-height:1.4;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--blue-d)}
.faq .ic{flex:0 0 auto;width:14px;height:14px;position:relative;margin-top:6px}
.faq .ic:before,.faq .ic:after{content:"";position:absolute;background:var(--blue-d);
  transition:transform .2s ease}
.faq .ic:before{left:0;top:6px;width:14px;height:2px}
.faq .ic:after{left:6px;top:0;width:2px;height:14px}
.faq details[open] .ic:after{transform:scaleY(0)}
.faq .ans{padding:0 0 20px}
.faq .ans p{margin:0 0 12px}
.faq .ans p:last-child{margin-bottom:0}

.glossary{margin:30px 0;border-top:1px solid var(--hair)}
.glossary .g{display:grid;grid-template-columns:200px minmax(0,1fr);gap:20px;
  padding:14px 0;border-bottom:1px solid var(--hair)}
.glossary .g dt{margin:0;font-weight:600;color:var(--ink)}
.glossary .g dd{margin:0;color:var(--body)}
@media(max-width:640px){.glossary .g{grid-template-columns:1fr;gap:4px}}

.pullquote{margin:38px 0;padding:4px 0 4px 26px;border-left:2px solid var(--blue)}
.pullquote p{margin:0;font-family:var(--display);font-size:clamp(20px,2vw,24px);
  line-height:1.45;color:var(--blue-d)}

.disclosures,.footnote{margin-top:40px;padding-top:22px;border-top:1px solid var(--hair);
  font-size:13px;line-height:1.75;color:var(--muted)}
.disclosures p{font-size:13px;line-height:1.75;color:var(--muted)}

.refs{margin:34px 0 0;padding-top:22px;border-top:1px solid var(--hair)}
.refs ol{padding-left:20px;margin:0}
.refs li{font-size:14px;line-height:1.7;color:var(--muted);margin-bottom:8px}

/* --- article furniture below the body --- */
.authorbox{background:var(--grey1);padding:clamp(34px,4vw,54px) 0;margin-top:56px}
.authorbox .label{font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--blue-d);margin-bottom:12px}
.authorbox .who{font-family:var(--display);font-size:26px;color:var(--ink);margin-bottom:12px}
.authorbox p{max-width:74ch;font-size:15.5px;line-height:1.75;color:var(--body);margin:0 0 18px}
.authorbox .links{display:flex;flex-wrap:wrap;gap:24px;font-size:14px;font-weight:600}
.authorbox .links a{color:var(--blue-d)}

.more{padding:clamp(34px,4vw,54px) 0}
.more h2{font-family:var(--display);font-weight:400;font-size:26px;margin:0 0 8px;color:var(--ink)}
.more-row{display:flex;justify-content:space-between;align-items:baseline;gap:24px;
  padding:18px 0;border-bottom:1px solid var(--hair);text-decoration:none}
.more-row .t{font-family:var(--display);font-size:18px;line-height:1.4;color:var(--ink)}
.more-row:hover .t{color:var(--blue-d)}
.more-row .c{flex:0 0 auto;font-family:var(--sans);font-size:11px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
@media(max-width:640px){.more-row{flex-direction:column;gap:6px}}

/* The author/principal photo blocks are written inline in three hub articles
   (our-approach, methodology, jerry-baker-bio). The <img> carries a class but
   no CSS existed for it anywhere, so it rendered at its natural size -- a
   560px portrait inside an 880px box. Size it here; the markdown keeps only
   the src and alt. */
.author-photo,.principal-photo{width:92px;height:92px;flex:0 0 92px;
  border-radius:50%;object-fit:cover;object-position:50% 18%}
@media(max-width:640px){.author-photo,.principal-photo{width:72px;height:72px;flex-basis:72px}}

/* --- hub-article furniture -------------------------------------------------
   Twenty-five articles had their HTML indented four spaces, so markdown treated
   it as a code block and the pages printed their own source. De-indenting them
   (scripts/fix-indented-html.py) made the elements real -- and revealed that
   their classes had never had any CSS either. These are the ones that appear
   across many pages; all are scoped under .prose. */

.prose .breadcrumbs{display:none}          /* the 2026 mast already shows the path */
.prose .kicker{font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--blue-d);margin:52px 0 6px}
.prose .optima{font-family:var(--display);font-weight:400}
.prose .divider{border:0;border-top:1px solid var(--hair);margin:44px 0}
.prose .about-section{margin:0 0 8px}
.prose .sect-sub{font-size:16.5px;line-height:1.75;color:var(--muted);margin:0 0 26px}
.prose .back-link{display:inline-block;font-family:var(--sans);font-size:13px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--blue-d);border:0;margin-bottom:22px}
.prose .editorial-note{font-size:18px;line-height:1.7;color:var(--ink)}
.prose .review-note,.prose .filed{font-size:13px;line-height:1.7;color:var(--muted);margin-top:26px}

/* on-this-page banner */
.prose .toc-banner{background:var(--grey1);padding:20px 24px;margin:30px 0 38px}
.prose .toc-toggle{background:none;border:0;padding:0;cursor:pointer;font-family:var(--sans);
  font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--blue-d)}
.prose .toc-links{display:flex;flex-wrap:wrap;gap:8px 26px;margin-top:14px}
.prose .toc-links a{font-size:14.5px;color:var(--body);border-bottom:1px solid var(--hair)}
.prose .toc-links a:hover{color:var(--blue-d)}

/* stat band */
.prose .stat-band{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:1px;background:var(--hair);border:1px solid var(--hair);margin:34px 0}
.prose .stat-tile{background:#fff;padding:26px 24px}
.prose .stat-tile .num{font-family:var(--display);font-size:30px;line-height:1.1;color:var(--blue-d)}
.prose .stat-tile .lbl{font-family:var(--sans);font-size:11.5px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);margin-top:8px}

/* numbered steps and pillars */
.prose .step,.prose .pillar{border-left:2px solid var(--blue);padding:2px 0 2px 22px;margin:26px 0}
.prose .step h3,.prose .pillar h3{margin-top:0}

/* card grids used by the explore / property-type / coverage sections */
.prose .explore-card,.prose .ptcard,.prose .gcard,.prose .citem{display:block;
  border:1px solid var(--hair);padding:22px 24px;margin:14px 0;text-decoration:none}
.prose .explore-card:hover,.prose .ptcard:hover,.prose .gcard:hover,.prose .citem:hover{border-color:var(--blue-d)}
.prose .gcard .gn{font-family:var(--display);font-size:18px;color:var(--ink)}
.prose .gcard .garrow{float:right;color:var(--blue-d)}

/* legacy accordion markup: .faq-item / .answer, distinct from the newer .faq/.ans */
.prose details.faq-item{border-bottom:1px solid var(--hair)}
.prose details.faq-item summary{cursor:pointer;padding:18px 0;font-family:var(--display);
  font-size:17.5px;line-height:1.4;color:var(--ink)}
.prose details.faq-item summary:hover{color:var(--blue-d)}
.prose details.faq-item .answer{padding:0 0 18px;font-size:16px;line-height:1.75;color:var(--body)}
.prose .glossary-term{font-weight:600;color:var(--ink)}
.prose .portal-link{font-weight:600;color:var(--blue-d)}

/* the author / principal cards written inline in the hub articles */
.prose .author-box,.prose .principal-box{display:flex;gap:22px;align-items:flex-start;
  background:var(--grey1);padding:26px 28px;margin:38px 0 0}
.prose .a-name,.prose .p-name{font-family:var(--display);font-size:21px;color:var(--ink)}
.prose .a-title,.prose .p-title{font-family:var(--sans);font-size:12px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:6px 0 12px}
@media(max-width:640px){.prose .author-box,.prose .principal-box{flex-direction:column;gap:16px}}

/* ==========================================================================
   The learn-layout family -- sponsors, markets, glossary, property types,
   audiences. These 230 pages each carried 5-15KB of inline <style> that the
   port drops; the rules below are those rules, deduped to 84, scoped under
   .prose (or .rail) so generic names like .author, .name, .top, .go, .d and
   .tn/.tc/.td cannot leak, and repointed at the 2026 tokens:
     --navy -> --blue-d   --ink-soft -> --body   --wash -> --pale
     --hairline -> --hair --navy-dark -> --ink
   Three blue-grey literals (#7a8089, #9aa0ab, #5F6873) became --muted:
   at 0.66rem on a pale tile they measured under 4.5:1.
   ========================================================================== */
.prose .aud-btn{display: inline-block; background: var(--blue-d); color: #fff; font-weight: 700; font-size: 0.9rem; padding: 0.7rem 1.3rem; border-radius: 3px; margin: 0.4rem 0 0.6rem;}
.prose .aud-btn:hover{background: var(--ink);}
.prose .mk-stats{display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.8rem; margin: 1.2rem 0 1.6rem;}
.prose .mk-stat{background: var(--pale); border: 1px solid var(--hair); border-radius: 3px; padding: 0.8rem 1rem;}
.prose .mk-stat .l{font-size: 0.66rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted);}
.prose .mk-stat .v{font-size: 1.05rem; font-weight: 700; margin-top: 0.15rem;}
.prose .mk-callout{background: var(--pale); border-left: 3px solid var(--blue-d); border-radius: 3px; padding: 0.9rem 1.1rem; font-size: 0.88rem; margin: 1.2rem 0;}
.prose .mk-faq{border-top: 1px solid var(--hair); margin-top: 1.6rem; padding-top: 1rem;}
.prose .mk-faq details{border-bottom: 1px solid var(--hair); padding: 0.6rem 0;}
.prose .mk-faq summary{font-size: 0.92rem; font-weight: 700; cursor: pointer;}
.prose .mk-faq p{margin-top: 0.5rem;}
.prose .mk-disclosure{font-size: 0.8125rem; line-height: 1.55; color: var(--muted); margin-top: 1.4rem; padding-top: 1rem; border-top: 1px solid var(--hair);}
.prose .gl-source .label, .prose .mk-stat .label, .prose .sp-fact .l, .prose .sp-facts .l{color:var(--muted) !important;}
.prose .learn-article p a, .prose .learn-article .meta a, .prose .eeat a{text-decoration:underline; text-underline-offset:2px;}
.prose .mk-head{margin-bottom: 1rem;}
.prose .mk-head h1{font-size: clamp(1.6rem, 2.8vw, 2.1rem); font-weight: 800; letter-spacing: -0.01em; margin-bottom: 0.4rem;}
.prose .mk-head p{font-size: 0.92rem; color: var(--muted); line-height: 1.6; max-width: 42rem;}
.prose .mk-search{margin: 1rem 0 1.4rem;}
.prose .mk-search input{width: 100%; font: inherit; font-size: 0.95rem; padding: 0.7rem 1rem; border: 1px solid var(--hair); border-radius: 3px;}
.prose .region-group{margin-bottom: 1.6rem; scroll-margin-top: 120px;}
.prose .region-group h2{font-size: 1.1rem; font-weight: 800; color: var(--blue-d); padding-bottom: 0.35rem; border-bottom: 2px solid var(--hair); margin-bottom: 0.6rem;}
.prose .state-grid{display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.4rem 1rem;}
.prose .state-grid a{font-size: 0.9rem; color: var(--body); padding: 0.4rem 0.5rem; border-radius: 3px;}
.prose .state-grid a:hover{background: var(--grey1); color: var(--blue-d);}
.prose .aud-cards{display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1.4rem;}
.prose .aud-cards a{display: flex; flex-direction: column; background: #fff; border: 1px solid var(--hair); border-radius: 3px; padding: 1.25rem; transition: box-shadow 0.2s, transform 0.2s;}
.prose .aud-cards a:hover{box-shadow: 0 10px 28px rgba(9,14,26,0.08); transform: translateY(-2px);}
.prose .aud-cards .tag{font-size: 0.68rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--blue-d); margin-bottom: 0.4rem;}
.prose .aud-cards h3{font-size: 1rem; font-weight: 700; color: var(--ink); margin-bottom: 0.35rem;}
.prose .aud-cards p{font-size: 0.86rem; line-height: 1.55; color: var(--muted); flex: 1;}
.prose .aud-cards .go{font-size: 0.8rem; font-weight: 600; color: var(--blue-d); margin-top: 0.9rem;}
.prose .aud-band{margin-top: 1.6rem; padding: 1.4rem 1.6rem; background: var(--pale); border: 1px solid var(--hair); border-radius: 3px; display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between;}
.prose .aud-band h3{font-size: 1rem; font-weight: 700; margin-bottom: 0.2rem;}
.prose .aud-band p{font-size: 0.86rem; color: var(--muted); margin: 0;}
.prose .aud-band a{font-size: 0.85rem; font-weight: 700; color: #fff; background: var(--blue-d); padding: 0.6rem 1.1rem; border-radius: 3px; white-space: nowrap;}
.prose .gl-source{background: var(--pale); border-left: 3px solid var(--blue-d); border-radius: 3px; padding: 0.85rem 1.1rem; font-size: 0.85rem; margin: 1.4rem 0;}
.prose .gl-source .label{font-size: 0.66rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); display: block; margin-bottom: 0.2rem;}
.prose .related-terms{display: flex; flex-wrap: wrap; gap: 0.5rem;}
.prose .related-terms a{font-size: 0.84rem; font-weight: 600; color: var(--blue-d); background: var(--pale); border-radius: 999px; padding: 0.35rem 0.85rem;}
.prose .related-terms a:hover{background: var(--hair);}
.prose .eeat{border-top: 1px solid var(--hair); margin-top: 2rem; padding-top: 1.4rem;}
.prose .eeat .author{display: flex; gap: 1rem; align-items: flex-start; margin-bottom: 1rem;}
.prose .eeat .author img{width: 52px; height: 52px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; background: var(--pale);}
.prose .eeat .author .name{font-size: 0.9rem; font-weight: 700;}
.prose .eeat .author .role{font-size: 0.76rem; color: var(--muted);}
.prose .eeat .author p{font-size: 0.84rem; line-height: 1.6; margin: 0.4rem 0 0;}
.prose .eeat .reviewer{font-size: 0.78rem; color: var(--muted); line-height: 1.6;}
.prose .gl-disclosure{font-size: 0.8125rem; line-height: 1.55; color: var(--muted); margin-top: 1.4rem; padding-top: 1rem; border-top: 1px solid var(--hair);}
.prose .gl-hub-head{margin-bottom: 1rem;}
.prose .gl-hub-head h1{font-size: clamp(1.6rem, 2.8vw, 2.1rem); font-weight: 800; letter-spacing: -0.01em; margin-bottom: 0.4rem;}
.prose .gl-hub-head p{font-size: 0.92rem; color: var(--muted); line-height: 1.6; max-width: 42rem;}
.prose .gl-search{margin: 1rem 0 1.4rem; display: none;}
.prose .letter-group{margin-bottom: 1.8rem; scroll-margin-top: 120px;}
.prose .letter-group h2{font-size: 1.15rem; font-weight: 800; color: var(--blue-d); padding-bottom: 0.35rem; border-bottom: 2px solid var(--hair); margin-bottom: 0.3rem;}
.prose .term-row{display: block; padding: 0.7rem 0.4rem; border-bottom: 1px solid var(--hair);}
.prose .term-row:last-child{border-bottom: none;}
.prose .term-row:hover{background: var(--grey1);}
.prose .term-row .tn{font-size: 0.95rem; font-weight: 700; color: var(--ink);}
.prose .term-row .tc{font-size: 0.66rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); margin-left: 0.5rem;}
.prose .term-row .td{display: block; font-size: 0.85rem; color: var(--muted); line-height: 1.5; margin-top: 0.1rem;}
.prose .sp-logo{height: 46px; max-width: 180px; width: auto; object-fit: contain;}
.prose .sp-facts{display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.8rem; margin: 1.2rem 0 1.6rem;}
.prose .sp-fact{background: var(--pale); border: 1px solid var(--hair); border-radius: 3px; padding: 0.75rem 0.9rem;}
.prose .sp-fact .l{font-size: 0.64rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted);}
.prose .sp-fact .v{font-size: 1.02rem; font-weight: 700; margin-top: 0.15rem;}
.prose .sp-adv{background: var(--stone); border-left: 3px solid var(--blue-d); border-radius: 3px; padding: 0.9rem 1.1rem; font-size: 0.9rem; margin: 1.2rem 0;}
.prose table.sp-deals{width: 100%; border-collapse: collapse; font-size: 0.84rem;}
.prose table.sp-deals caption{text-align: left; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); padding: 0.7rem 0.9rem 0;}
.prose table.sp-deals thead th{text-align: left; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); background: var(--pale); padding: 0.6rem 0.9rem; border-bottom: 1px solid var(--hair); white-space: nowrap;}
.prose table.sp-deals tbody td{padding: 0.55rem 0.9rem; border-bottom: 1px solid var(--grey1); color: var(--body); vertical-align: top;}
.prose table.sp-deals tbody tr:last-child td{border-bottom: none;}
.prose table.sp-deals tbody tr:nth-child(even) td{background: var(--grey1);}
.prose table.sp-deals td.num, .prose table.sp-deals th.num{text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums;}
.prose table.sp-deals td.inv{font-weight: 600; color: var(--ink);}
.prose .sp-deals-note{font-size: 0.8125rem; line-height: 1.55; color: var(--muted); margin: 0.2rem 0 0.4rem;}
.prose .sp-cards{display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1.4rem;}
.prose .sp-cards a{display: flex; flex-direction: column; background: #fff; border: 1px solid var(--hair); border-radius: 3px; padding: 1.1rem 1.25rem; transition: box-shadow 0.2s, transform 0.2s;}
.prose .sp-cards a:hover{box-shadow: 0 10px 28px rgba(9,14,26,0.08); transform: translateY(-2px);}
.prose .sp-cards .top{display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; margin-bottom: 0.5rem;}
.prose .sp-cards img{height: 30px; max-width: 130px; width: auto; object-fit: contain;}
.prose .sp-cards .chip{font-size: 0.6rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #fff; background: var(--blue-d); border-radius: 999px; padding: 0.15rem 0.5rem; white-space: nowrap;}
.prose .sp-cards h3{font-size: 0.98rem; font-weight: 700; color: var(--ink); margin-bottom: 0.3rem;}
.prose .sp-cards p{font-size: 0.82rem; line-height: 1.5; color: var(--muted); flex: 1;}
.prose .sp-cards .go{font-size: 0.8rem; font-weight: 600; color: var(--blue-d); margin-top: 0.8rem;}

/* grids collapse on narrow screens -- the originals had no responsive rules
   for these, so at 390px the three-up stat tiles overflowed their track */
@media(max-width:760px){
  .prose .mk-stats,.prose .sp-facts,.prose .state-grid,
  .prose .sp-cards,.prose .aud-cards{grid-template-columns:1fr}
  .prose .sp-head{flex-direction:column;align-items:flex-start;gap:14px}
}
/* the lifted sidebar is hand-grouped (<details> + <ul>), which the flat .rail
   was never written for */
.rail--grouped details{border-top:1px solid var(--hair);padding:10px 0}
.rail--grouped details:first-of-type{border-top:0}
.rail--grouped summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;
  align-items:center;gap:10px;font-family:var(--sans);font-size:12.5px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding:6px 0}
.rail--grouped summary::-webkit-details-marker{display:none}
.rail--grouped summary:after{content:"";width:7px;height:7px;flex:none;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(45deg) translateY(-2px);transition:transform .2s}
.rail--grouped details[open] summary:after{transform:rotate(-135deg) translateY(-2px)}
.rail--grouped ul{list-style:none;margin:4px 0 8px;padding:0}
.rail--grouped li{margin:0}
.rail--grouped li a{display:block;padding:6px 0;font-size:14.5px;line-height:1.4;color:var(--body)}
.rail--grouped li a:hover{color:var(--blue-d)}
/* Both spellings: 21 pages mark the current rail item with aria-current and 232
   (property types, markets, glossary, sponsors, audiences) with class="active",
   which had no rule -- so the rail never showed where you were on any of them. */
.rail--grouped li a[aria-current="page"],
.rail--grouped li a.active{color:var(--blue-d);font-weight:600}
.rail .learn-back{display:block;font-size:13px;font-weight:600;letter-spacing:.04em;
  color:var(--blue-d);margin-bottom:18px}
.rail .learn-back:hover{color:var(--ink)}
/* ---- /performance/ ------------------------------------------------ */
.prose--wide{max-width:none}
.perf-tabs{display:flex;gap:4px;border-bottom:1px solid var(--hair);margin:0 0 26px;overflow-x:auto}
.perf-tabs button{font:inherit;font-size:14px;font-weight:600;color:var(--muted);background:none;border:0;border-bottom:2px solid transparent;padding:11px 16px;cursor:pointer;white-space:nowrap}
.perf-tabs button:hover{color:var(--blue-d)}
.perf-tabs button.active{color:var(--blue-d);border-bottom-color:var(--blue-d)}
.perf-tabs button:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.perf-panel{display:none}
.perf-panel.active{display:block}
.perf-panel h2{margin:0 0 24px}
.perf-controls{display:flex;flex-wrap:wrap;gap:12px;margin:6px 0 20px;align-items:center}
.perf-controls select,.perf-controls input{font:inherit;font-size:14px;color:var(--ink);border:1px solid var(--hair);border-radius:6px;padding:10px 14px;background:#fff}
.perf-controls select{appearance:none;-webkit-appearance:none;padding-right:38px;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23332E24' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:14px}
.perf-controls input{width:min(20rem,100%)}
.perf-count{font-size:13px;color:var(--muted);margin-left:auto}
.perf-wrap{overflow-x:auto;border:1px solid var(--hair);border-radius:10px}
table.perf{width:100%;border-collapse:collapse;font-size:14px;min-width:46rem}
table.perf thead th{position:sticky;top:0;background:var(--grey1);z-index:2;text-align:left;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding:11px 14px;border-bottom:1px solid var(--hair);cursor:pointer;user-select:none;white-space:nowrap}
table.perf thead th .dir{color:var(--blue-d)}
table.perf tbody td{padding:10px 14px;border-bottom:1px solid var(--hair);color:var(--body)}
table.perf tbody tr:last-child td{border-bottom:none}
table.perf tbody tr:hover{background:var(--pale)}
table.perf td.num{font-variant-numeric:tabular-nums;white-space:nowrap}
table.perf td a{color:var(--blue-d);font-weight:600}
table.perf td a:hover{text-decoration:underline}
.sp-nodata-cell{font-size:12px;color:var(--muted);font-style:italic;text-align:left!important}
.pref-chip{display:inline-block;margin-left:8px;font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--blue-d);background:var(--pale);border-radius:999px;padding:3px 9px;vertical-align:middle}
.page-note{font-size:12.5px;line-height:1.6;color:var(--muted);margin-top:32px;max-width:66rem}
@media(max-width:720px){.perf-count{margin-left:0}}

/* ---------- interactive article tools -------------------------------------
   The mineral-rights guide ships four of these. Every class below appeared in
   the article markup with no rule anywhere, so the tools rendered as unstyled
   markup even before the missing JavaScript was written. Scoped under .tool so
   nothing here can reach ordinary prose. */
.tool{border:1px solid var(--hair);border-radius:4px;margin:34px 0;overflow:hidden;background:#fff}
.tool .tbar{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;
  background:var(--blue-d);color:#fff;padding:14px 22px}
.tool .tk{font-family:var(--sans);font-size:10.5px;font-weight:700;letter-spacing:.15em;
  text-transform:uppercase;color:var(--blue-lt)}
.tool .tt{font-family:var(--sans);font-size:15px;font-weight:600;color:#fff}
.tool .tin{padding:24px 22px 26px}
.tool .tsub{font-size:13.5px;line-height:1.65;color:var(--muted);margin:0 0 20px}
.tool .fld{display:flex;flex-direction:column;gap:8px}
.tool label{font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--muted)}
.tool select,.tool input[type=date]{font:inherit;font-size:15px;color:var(--ink);background:#fff;
  border:1px solid var(--hair);border-radius:3px;padding:11px 12px;width:100%;max-width:100%}
.tool select:focus,.tool input:focus{outline:2px solid var(--blue);outline-offset:1px}

.tool .seg{display:flex;flex-wrap:wrap;gap:8px}
.tool .seg button{font:inherit;font-size:13.5px;color:var(--body);background:#fff;cursor:pointer;
  border:1px solid var(--hair);border-radius:3px;padding:10px 16px;transition:background .15s,color .15s,border-color .15s}
.tool .seg button:hover{border-color:var(--blue-d);color:var(--blue-d)}
.tool .seg button.on{background:var(--blue-d);border-color:var(--blue-d);color:#fff}

.tool .ruralrow{display:flex;align-items:flex-start;gap:10px;margin-top:18px}
.tool .ruralrow input{margin-top:3px;flex:none;width:16px;height:16px;accent-color:var(--blue-d)}

.tool .vbox{margin-top:22px;padding:16px 18px;border-left:3px solid var(--hair);background:var(--grey1)}
.tool .vbox.ok{border-left-color:#1E6B2E;background:#F1F7F2}
.tool .vbox.warn{border-left-color:#8A6A16;background:#FAF6EC}
.tool .vbox.bad{border-left-color:#A8271E;background:#FBF2F1}
.tool .vh{font-family:var(--sans);font-size:15px;font-weight:700;color:var(--ink);margin-bottom:7px}
.tool .vp{font-size:14px;line-height:1.7;color:var(--body)}
.tool .vcav{display:block;margin-top:9px;font-size:12.5px;color:var(--muted)}

.tool .selrow{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:16px;align-items:end}
.tool .ar{font-size:20px;color:var(--blue-d);padding-bottom:11px}

.tool .twocol{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.tool .obig{border:1px solid var(--hair);border-radius:3px;padding:16px 18px;background:var(--pale)}
.tool .obig .l{font-family:var(--sans);font-size:10.5px;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.tool .obig .n{font-family:var(--display);font-size:clamp(19px,2vw,24px);line-height:1.2;color:var(--blue-d)}

.tool .check{display:flex;flex-direction:column;gap:2px}
.tool .ckrow{display:flex;align-items:flex-start;gap:11px;padding:11px 2px;cursor:pointer;
  border-bottom:1px solid var(--hair);text-transform:none;letter-spacing:0;font-weight:400}
.tool .ckrow:last-child{border-bottom:0}
.tool .ckrow input{margin-top:3px;flex:none;width:16px;height:16px;accent-color:var(--blue-d)}
.tool .ckt b{display:block;font-family:var(--sans);font-size:14px;font-weight:600;color:var(--ink);line-height:1.5}
.tool .ckt em{display:block;margin-top:3px;font-style:normal;font-size:12.5px;line-height:1.6;color:var(--muted)}

.tool .scorewrap{display:flex;align-items:center;gap:18px;margin-top:20px;padding-top:18px;
  border-top:1px solid var(--hair)}
.tool .scorenum{font-family:var(--display);font-size:26px;color:var(--muted);white-space:nowrap}
.tool .scorenum b{color:var(--blue-d)}
.tool .scoreverdict .v{font-family:var(--sans);font-size:14.5px;font-weight:700;color:var(--ink)}
.tool .scoreverdict .vt{font-size:13px;color:var(--muted);margin-top:2px}

.tool .flag{margin-top:16px;font-size:13.5px;line-height:1.65;color:var(--body);
  padding:12px 14px;border-left:3px solid var(--blue);background:var(--pale)}
.tool .flag.warn{border-left-color:#8A6A16;background:#FAF6EC}
.tool .flag.bad{border-left-color:#A8271E;background:#FBF2F1}

.tool .qblock{padding:16px 0;border-bottom:1px solid var(--hair)}
.tool .qblock:first-child{padding-top:0}
.tool .qq{font-family:var(--sans);font-size:14.5px;font-weight:600;color:var(--ink);margin-bottom:11px}
.tool .qa{display:flex;flex-wrap:wrap;gap:8px}
.tool .qopt{font:inherit;font-size:13.5px;color:var(--body);background:#fff;cursor:pointer;
  border:1px solid var(--hair);border-radius:3px;padding:9px 15px;text-align:left;
  transition:background .15s,color .15s,border-color .15s}
.tool .qopt:hover{border-color:var(--blue-d);color:var(--blue-d)}
.tool .qopt.on{background:var(--blue-d);border-color:var(--blue-d);color:#fff}

.tool .trow{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.tool .toolbtn{font-family:var(--sans);font-size:13.5px;font-weight:600;cursor:pointer;
  background:var(--blue-d);color:#fff;border:1px solid var(--blue-d);border-radius:3px;padding:12px 22px}
.tool .toolbtn:hover:not(:disabled){background:var(--blue);border-color:var(--blue)}
.tool .toolbtn:disabled{cursor:not-allowed;background:var(--grey1);border-color:var(--hair);color:var(--muted)}
.tool .toolbtn.ghost{background:#fff;color:var(--blue-d)}
.tool .toolbtn.ghost:hover{background:var(--pale)}

.tool .result{display:none;margin-top:22px;padding-top:20px;border-top:1px solid var(--hair)}
.tool .result.show{display:block}
.tool .rlabel{font-family:var(--sans);font-size:10.5px;font-weight:700;letter-spacing:.15em;
  text-transform:uppercase;color:var(--muted)}
.tool .rname{font-family:var(--display);font-size:clamp(21px,2.4vw,27px);line-height:1.25;
  color:var(--blue-d);margin:6px 0 10px}
.tool .rwhy{font-size:14.5px;line-height:1.75;color:var(--body)}
.tool .rbars{margin:20px 0 16px;display:flex;flex-direction:column;gap:9px}
.tool .rbar{display:grid;grid-template-columns:minmax(0,15em) minmax(0,1fr) 3.2em;gap:12px;align-items:center}
.tool .rl{font-family:var(--sans);font-size:12.5px;font-weight:600;color:var(--body)}
.tool .rt{height:8px;border-radius:4px;background:var(--grey1);overflow:hidden}
.tool .rt i{display:block;height:100%;background:var(--blue);border-radius:4px}
.tool .rv{font-family:var(--sans);font-size:12.5px;font-weight:700;color:var(--blue-d);
  text-align:right;font-variant-numeric:tabular-nums}
.tool .trade{font-size:13.5px;line-height:1.7;color:var(--muted);padding:13px 15px;background:var(--grey1)}

@media(max-width:640px){
  .tool .selrow{grid-template-columns:minmax(0,1fr)}
  .tool .ar{padding:0;text-align:center;transform:rotate(90deg)}
  .tool .twocol{grid-template-columns:minmax(0,1fr)}
  .tool .rbar{grid-template-columns:minmax(0,1fr) 3.2em;row-gap:5px}
  .tool .rt{grid-column:1/-1}
}

/* ================= SECTION HUB CARD GRID =================
   .pt-grid / .pt-card / .pt-go have been in the /property-types/ hub markup
   since that page was ported and have never had a rule anywhere in either
   stylesheet -- so that hub has been rendering sixteen sectors as a flat
   stacked list of headings, paragraphs and links down one column. Verified in
   the browser: .pt-grid computes to display:block and .pt-card to
   display:inline with no border, no padding and no background. These rules
   give the class names the meaning the markup already assumed, which styles
   the /strategies/ hub and fixes /property-types/ in the same lines.         */
.pt-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,270px),1fr));
  gap:20px;margin:34px 0 10px}
.pt-card{display:flex;flex-direction:column;gap:9px;padding:26px 24px 22px;
  background:#fff;border:1px solid var(--hair);border-radius:2px;
  text-decoration:none;color:inherit;transition:border-color .18s,box-shadow .18s,transform .18s}
.pt-card:hover,.pt-card:focus-visible{border-color:var(--blue);
  box-shadow:0 6px 22px rgba(0,160,113,.10);transform:translateY(-2px)}
.pt-card h3{font-family:var(--display);font-size:20px;line-height:1.22;color:var(--blue-d);margin:0}
.pt-card p{font-size:14.5px;line-height:1.65;color:var(--body);margin:0;flex:1}
.pt-go{font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--accent-text);margin-top:4px}
.pt-card:hover .pt-go{color:var(--blue-d)}

/* ================= DRAFT SCAFFOLDING =================
   Only ever rendered on a page whose status is 'draft' in
   scripts/gen-strategies.py. Deliberately loud: a placeholder that looks like
   finished copy is how unwritten pages get published by accident.           */
.draft-banner{border:1px dashed var(--blue);background:var(--pale);
  padding:20px 22px;margin:0 0 30px;border-radius:2px}
.draft-banner p{font-size:14.5px;line-height:1.7;margin:0 0 10px}
.draft-banner ul{margin:0 0 10px;padding-left:20px}
.draft-banner li{font-size:14.5px;line-height:1.7;margin-bottom:7px}
.draft-banner code{font-size:13px;background:#fff;padding:1px 5px;border:1px solid var(--hair)}
.draft-tag{font-family:var(--sans);font-size:11.5px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--blue-d)}
.prose p.ph,.prose h3.ph-h{color:var(--muted);font-style:italic}
.prose p.ph{border-left:2px solid var(--blue-lt);padding-left:14px}
.rail-draft{margin-left:6px;white-space:nowrap;font-family:var(--sans);font-size:9.5px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:#fff;background:var(--blue);padding:1px 5px;border-radius:2px;
  vertical-align:middle}

/* Long-form strategy pages: FAQ questions and the primary-source list. */
.prose h3.faq-q{font-size:clamp(17px,1.45vw,20px);line-height:1.3;margin-top:1.8rem}
.prose ol.src{font-size:14px;line-height:1.6;color:var(--muted)}
.prose ol.src li{margin-bottom:9px}
.prose ol.src a{color:var(--blue-d)}

/* ===== overrides: 2026 rebuild type, spacing and colour ===== */
h1,h2,h3,h4,.h1,.h2,.h3,.h6{ font-family:var(--font); font-weight:700; letter-spacing:-.02em; }
h1,.h1{ font-size:clamp(30px,3vw,40px); line-height:1.1; }
.h2{ font-size:clamp(24px,2.3vw,32px); line-height:1.2; }
.h3{ font-size:clamp(20px,1.8vw,25px); line-height:1.25; }
.eyebrow{ font-size:11px; font-weight:700; letter-spacing:.1em; color:var(--blue-d); margin:0 0 12px; }
p{ max-width:none; }
.mast, .mast--light{ background:var(--white); color:var(--black); padding:56px var(--gut) 28px; border-bottom:1px solid var(--hair); }
.mast .h1, .mast--light .h1{ color:var(--black); max-width:none; }
.mast p, .mast--light p{ margin:12px 0 0; max-width:760px; font-size:16px; line-height:1.65; color:var(--grey); }
.crumbs{ font-size:12.5px; font-weight:400; letter-spacing:0; text-transform:none; color:var(--grey-light); margin-bottom:18px; gap:8px; }
.crumbs a{ color:var(--grey-light); } .crumbs a:hover, .mast--light .crumbs a:hover{ color:var(--accent-text); }
.sec{ padding:32px var(--gut) 72px; }
@media(max-width:900px){ .sec{ padding:24px var(--gut) 56px; } }
.shell{ gap:clamp(32px,4vw,64px); }
.rail{ top:80px; }
.rail h4, .rail .rail__label{ font-size:11px; letter-spacing:.1em; color:var(--accent-text); font-weight:700; text-transform:uppercase; margin:0 0 10px; }
.rail a:not(.btn){ font-size:14px; color:var(--grey); border-bottom-color:#FCF7F0; }
.rail a:not(.btn):hover, .rail a:not(.btn)[aria-current]{ color:var(--black); }
.prose{ max-width:74ch; }
.prose h2{ font-size:clamp(22px,2vw,28px); margin:44px 0 14px; }
.prose h3{ font-size:clamp(18px,1.5vw,21px); margin:30px 0 10px; }
.prose h4{ font-family:var(--font); font-weight:700; font-size:17px; }
.prose p, .prose li{ font-size:16px; line-height:1.7; color:var(--grey); }
.prose>p:first-child, .prose .lead, .prose .article-intro{ font-size:17.5px; line-height:1.7; color:var(--grey); margin:0 0 1.15em; }
.article-intro > p{ margin:0; }
.article-intro + p, .article-intro + .lead{ margin-top:0; }
.prose a{ color:var(--accent-hover); border-bottom:1px solid transparent; }
.prose a:hover{ border-bottom-color:var(--accent-hover); }
.prose blockquote, .pullquote p{ font-family:var(--font); font-weight:600; font-size:19px; color:var(--black); }
.prose blockquote{ border-left-color:var(--accent); }
.callout, .takeaways{ background:var(--accent-soft); border-left:3px solid var(--accent); border-radius:0 var(--radius) var(--radius) 0; }
.callout h4, .takeaways .tk-h, .rail h4, .featured .flag, .art-row .cat, .more-row .c, .authorbox .label{ font-family:var(--font); }
.tblwrap th, table.dtable2 th{ background:#FCF7F0; color:var(--grey-light); font-size:11px; letter-spacing:.06em; border-bottom:1px solid var(--hair-strong); }
.tblwrap td, table.dtable2 td{ font-size:14.5px; }
.faq summary, .more-row .t, .art-row .t, .authorbox .who, .featured h2, .prose details.faq-item summary{ font-family:var(--font); font-weight:600; }
.faq .ic:before, .faq .ic:after{ background:var(--accent); }
.disclosures, .footnote, .refs li{ font-size:12.5px; color:var(--grey-light); }
.authorbox{ background:#FCF7F0; border-top:1px solid var(--hair); border-bottom:1px solid var(--hair); }
.featured{ background:#FCF7F0; }
.featured .wrap, .filterbar-in, .artlist{ max-width:calc(1200px + 48px); padding-left:24px; padding-right:24px; }
a.featured, .featured a.wrap{ display:block; color:inherit; text-decoration:none; }
.pill{ font-family:var(--font); border-radius:var(--radius); }
.artmast .byline{ margin-bottom:0; }
.cta-band{ background:var(--accent-soft); border-top:1px solid var(--hair); padding:56px var(--gut) 64px; }
.cta-band .h2{ margin:0; }
.cta-band .p-main{ margin:16px 0 0; max-width:52ch; color:var(--grey); }
.cta-band .btn-row{ margin-top:26px; }
/* ===== soft gate (Learn library): the full page is served to everyone — search engines read it — but a visitor who
   isn't logged in sees a teaser, the rest blurred under the same gate card the inventory uses. Pure CSS keyed off
   <html class="is-logged-in"> (set before first paint from the b31_ui cookie), so nothing flashes either way. ===== */
.lockwrap{ position:relative; }
.gate{ display:none; position:absolute; left:50%; top:48px; transform:translateX(-50%); z-index:3; width:min(560px, calc(100% - 8px)); }
html:not(.is-logged-in) .gate{ display:block; }
html:not(.is-logged-in) .gate--l2{ display:none; }
html.is-level2 .gate--l1{ display:none !important; }
.gate__card{ background:var(--white); border:1px solid var(--hair-strong); border-radius:10px; padding:32px 32px 28px; text-align:center; box-shadow:0 24px 48px -24px rgba(0,0,0,.28), 0 2px 6px rgba(0,0,0,.06); }
.gate__card h2, .gate__card .gate__title{ margin:0 0 10px; font-size:clamp(22px,2.4vw,28px); font-weight:700; line-height:1.15; letter-spacing:-.02em; }
.gate__card p{ margin:0 0 20px; font-size:15px; line-height:1.6; color:var(--grey); }
.gate__actions{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.gate__note{ margin:20px 0 0 !important; font-size:13px !important; color:var(--grey-light) !important; }
/* article: the opening stays readable, everything after it is blurred and fades out */
html:not(.is-logged-in) .lockwrap--article .prose{
  max-height:820px; overflow:hidden; pointer-events:none; user-select:none;
  -webkit-mask-image:linear-gradient(to bottom, #000000 34%, transparent 96%); mask-image:linear-gradient(to bottom, #000000 34%, transparent 96%);
}
html:not(.is-logged-in) .lockwrap--article .prose > :nth-child(n+3){ filter:blur(3px); }
.lockwrap--article .gate{ top:auto; bottom:64px; }
html:not(.is-logged-in) .main--gated .authorbox, html:not(.is-logged-in) .main--gated .more{ display:none; }
/* learn index: featured article + category filters stay, the list is blurred under the card */
html:not(.is-logged-in) .lockwrap--learn .artlist{
  max-height:900px; overflow:hidden; pointer-events:none; user-select:none; filter:blur(3px);
  -webkit-mask-image:linear-gradient(to bottom, #000000 45%, transparent 100%); mask-image:linear-gradient(to bottom, #000000 45%, transparent 100%);
}
html:not(.is-logged-in) .filterbar{ pointer-events:none; }
.lockwrap--learn .gate{ top:40px; }
/* ===== level 2 soft gate: same idea one tier up. The page is served whole to everyone, so search engines
   and AI crawlers read it in full; a logged-in investor who has not been approved for this section sees the
   card over blurred content. Keyed off <html class="is-level2"> from the b31_lvl cookie. ===== */
html.is-level2 .gate--l2{ display:none !important; }
html:not(.is-level2) .gate--l2{ display:block; }
html:not(.is-level2) .lockwrap--l2 > *:not(.gate){
  max-height:900px; overflow:hidden; pointer-events:none; user-select:none; filter:blur(3px);
  -webkit-mask-image:linear-gradient(to bottom, #000000 30%, transparent 92%); mask-image:linear-gradient(to bottom, #000000 30%, transparent 92%);
}
.lockwrap--l2 .gate{ top:40px; }
/* a logged-out visitor on a level-2 section gets the ordinary log-in card, not the approval one */
html:not(.is-logged-in) .gate--l2{ display:none !important; }
html.is-logged-in:not(.is-level2) .gate--l1{ display:none !important; }

@media (max-width:900px){ .gate{ top:24px; } .gate__card{ padding:24px 20px 22px; } .lockwrap--article .gate{ bottom:32px; } }

@media (prefers-reduced-motion:reduce){ .prose *, .rail *, .gate *, .featured *, .art-row{ animation-duration:.01ms !important; transition-duration:.01ms !important; } }
/* article contents list */
.prose .toc{ margin:8px 0 36px; padding:18px 22px; border:1px solid var(--hair); border-radius:var(--radius); background:#FCF7F0; }
.prose .toc__label{ margin:0 0 8px; font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--accent-text); }
.prose .toc ol{ margin:0; padding-left:20px; columns:2; column-gap:32px; }
.prose .toc li{ font-size:14px; line-height:1.5; margin:0 0 6px; break-inside:avoid; }
.prose .toc a{ color:var(--grey); border:0; } .prose .toc a:hover{ color:var(--accent-hover); }
@media (max-width:700px){ .prose .toc ol{ columns:1; } }
.prose h2[id]{ scroll-margin-top:84px; }
/* article byline on phones: stack cleanly, no stray separator */
@media (max-width:640px){ .artmast .byline{ flex-wrap:wrap; gap:4px 12px; } .artmast .byline .dot{ display:none; } .artmast .byline .when{ margin-left:0; text-align:left; width:100%; } }
/* legibility floor for small-caps labels */
.prose .mk-stat .l, .prose .gl-source .label, .prose .term-row .tc, .prose .sp-fact .l, .prose .sp-cards .chip, .prose .aud-cards .tag, .pref-chip{ font-size:11px; }
/* hub lists (calculators index): cards, not a bare link list */
.prose .hublist{ display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:16px; margin:0 0 8px; }
.prose .hubcard{ display:flex; flex-direction:column; gap:8px; padding:20px 22px; border:1px solid var(--hair); border-radius:var(--radius); background:#fff; color:inherit; text-decoration:none; transition:border-color .18s ease, box-shadow .18s ease; }
.prose .hubcard:hover{ border-color:var(--hair-strong); box-shadow:0 12px 28px -18px rgba(0,0,0,.25); }
.prose .hubcard .t{ font-size:17px; font-weight:700; letter-spacing:-.01em; color:var(--black); line-height:1.3; }
.prose .hubcard .d{ font-size:14px; line-height:1.55; color:var(--grey); flex:1; }
.prose .hubcard .go{ font-size:13px; font-weight:700; color:var(--accent-hover); }
.prose .hubcard .go::after{ content:" →"; }
/* contact page cards (the source markup had no styles for these) */
.cgrid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px; margin:0 0 8px; }
.ccard{ border:1px solid var(--hair); border-radius:var(--radius); padding:18px 20px; background:#fff; }
.ccard .k{ font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--grey-light); margin-bottom:8px; }
.ccard .v{ font-size:17px; font-weight:600; color:var(--black); }
.ccard .v a{ color:var(--accent-hover); border:0; }
.ccard .n{ font-size:14px; line-height:1.55; color:var(--grey); margin-top:8px; }

/* hub pages: card grids get the full shell width instead of the 74ch reading column (which left the cards
   two-up with a third of the page empty); headings and copy on those pages keep their reading measure */
.prose:has(.pt-grid,.sp-cards,.aud-cards,.cgrid,.hublist){ max-width:none; }
.prose:has(.pt-grid,.sp-cards,.aud-cards,.cgrid,.hublist) > :is(h2,h3,p,ul,ol,.lead,.mk-head,.gl-hub-head,.sp-head){ max-width:74ch; }
.prose .sp-cards{ grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr)); }
.prose .aud-cards{ grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr)); }

/* Headings share the body face; weight and letter-spacing carry the hierarchy. */
h1:not(#_),h2:not(#_),h3:not(#_){font-family:var(--display);font-weight:400;letter-spacing:-.01em}

/* ===== Components that were being used without a rule =====================================
   These classes appear in the content but had no styling available to the page rendering them,
   so they fell back to bare block and inline defaults. (Review finding FMT-19.) */
.footer__home{ display:inline-block; }
.article{ display:block; }
.article-meta{ font-size:13px; letter-spacing:.02em; color:var(--muted); }
.article-meta .cat{ color:var(--accent-text); font-weight:600; text-transform:uppercase; letter-spacing:.06em; margin-right:8px; }
.sep{ display:inline-block; margin:0 8px; color:var(--faint); }
.editorial-close{ margin-top:28px; padding-top:18px; border-top:1px solid var(--hair); font-size:1.02rem; color:var(--ink); }
.tcap{ margin-top:8px; font-size:.8125rem; line-height:1.55; color:var(--muted); }

ul.bul{ list-style:none; padding:0; margin:20px 0; display:grid; gap:14px; }
ul.bul > li{ padding-left:18px; border-left:2px solid var(--hair); }
ul.bul > li strong{ display:block; margin-bottom:2px; color:var(--ink); }

.steps{ display:grid; gap:20px; margin:26px 0; }
.steps .step{ display:grid; grid-template-columns:auto 1fr; gap:16px; align-items:start; }
.steps .step .n{ font-family:var(--display); font-size:1.5rem; line-height:1; color:var(--accent-text); font-variant-numeric:tabular-nums; }
.steps .step h3{ margin:0 0 4px; font-size:1.05rem; }
.steps .step p{ margin:0; }

.pillars{ display:grid; gap:22px; margin:26px 0; }
.pillars .pillar h3{ margin:0 0 4px; font-size:1.05rem; }
.pillars .pillar p{ margin:0; }
@media (min-width:760px){ .pillars{ grid-template-columns:repeat(2,1fr); } .steps{ grid-template-columns:repeat(2,1fr); } }

.sp-deals-wrap{ margin:18px 0 6px; }
.sp-chip{ display:inline-block; margin-left:8px; padding:2px 8px; border-radius:100px; background:var(--stone);
          color:var(--accent-text); font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; vertical-align:2px; }
.sp-disclaimer{ margin:1rem 0 0; padding:.75rem 1rem; border-left:3px solid var(--hair-strong);
                background:var(--grey1); font-size:.8125rem; line-height:1.55; color:var(--body); }

.learn-related{ margin-top:36px; padding-top:22px; border-top:1px solid var(--hair); }
.learn-related h2{ font-size:1.1rem; margin:0 0 10px; }
.learn-related ul{ margin:0; padding-left:18px; display:grid; gap:6px; }
.article-footer-nav{ display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between;
                     margin-top:26px; padding-top:18px; border-top:1px solid var(--hair); font-size:.9rem; }
.article-footer-nav a{ color:var(--accent-text); }

/* Property-type realized-results block (generated from build/fullcycle.tsv) */
.pt-realized{ width:100%; border-collapse:collapse; margin:6px 0 0; }
.pt-realized caption{ text-align:left; font-weight:600; color:var(--ink); padding-bottom:8px; }
.pt-realized th, .pt-realized td{ padding:10px 12px; border-bottom:1px solid var(--hair); text-align:left; }
.pt-realized td{ font-variant-numeric:tabular-nums; font-weight:600; }
.pt-note{ margin-top:10px; font-size:.8125rem; line-height:1.55; color:var(--muted); }
.pt-nodata{ margin:14px 0; padding:14px 16px; background:var(--grey1); border-left:3px solid var(--hair-strong);
            font-size:.95rem; line-height:1.6; }

.cf-basis{ margin:8px 0 0; font-size:.8125rem; line-height:1.55; color:var(--muted); }

/* Platform benchmark block on the DST guide — build-generated from build/fullcycle.tsv. */
.bm{ margin:24px 0; }
.bm-counts{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:1px;
            background:var(--hair); border:1px solid var(--hair); margin-bottom:18px; }
.bm-c{ background:var(--white); padding:14px 16px; display:flex; flex-direction:column;
       justify-content:space-between; gap:4px; }
.bm-c .l{ font-size:.75rem; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); }
.bm-c .v{ font-size:1.5rem; font-weight:600; line-height:1.2; margin-top:4px;
          font-variant-numeric:tabular-nums; }
.bm-table{ width:100%; border-collapse:collapse; }
.bm-table th, .bm-table td{ padding:10px 12px; border-bottom:1px solid var(--hair); text-align:left; }
.bm-table thead th{ font-size:.75rem; letter-spacing:.04em; text-transform:uppercase; color:var(--muted);
                    font-weight:600; }
.bm-table tbody th{ font-weight:600; }
.bm-table td{ font-variant-numeric:tabular-nums; font-weight:600; }
.bm-note{ margin-top:12px; font-size:.8125rem; line-height:1.55; color:var(--muted); }
@media (max-width:600px){
  .bm-table{ display:block; overflow-x:auto; }
  .bm-c .v{ font-size:1.25rem; }
}

/* ---------- Sticky nav (from the homepage) ---------- */
  /* ---------- Sticky nav ---------- */
  .nav{
    position:sticky; top:0; z-index:60;
    background:rgba(255,255,255,.92);
    -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
    border-bottom:1px solid #D5D2CD;
    transition:box-shadow .2s ease;
  }
  .nav.is-scrolled{ box-shadow:0 2px 12px rgba(0,0,0,.06); }
  .nav__inner{
    max-width:calc(1200px + 48px);
    margin:0 auto;
    padding:0 24px;
    height:56px;
    display:flex;
    align-items:center;
    gap:32px;
  }
  .nav__logo{ display:flex; align-items:center; flex:0 0 auto; min-width:0; }
  .nav__logo img{ height:21px; width:auto; display:block; }
  .nav__links{ display:flex; align-items:center; gap:26px; margin-left:24px; }
  .nav__links a{
    display:inline-grid;
    align-items:center;
    justify-items:center;
    font-size:14px;
    font-weight:600;
    color:#000000;
    text-decoration:none;
    padding:6px 0;
    line-height:1.2;
    overflow:hidden;
    perspective:400px;
  }
  /* two faces stacked in one grid cell: the typeset word rolls up and out, the handwritten one rolls in from below */
  .nav__links a > span{
    grid-area:1 / 1;
    display:block;
    transition:transform .32s cubic-bezier(.22,1,.36,1), opacity .32s ease;
    backface-visibility:hidden;
  }
  .nav__links a .nav__hand::after{ content:attr(data-label); }
  .nav__links a .nav__hand{
    font-family:var(--hand);
    font-size:20px;
    font-weight:600;
    line-height:1;
    color:var(--accent-text);
    transform:translateY(110%) rotateX(-90deg);
    opacity:0;
    white-space:nowrap;
  }
  .nav__links a:hover .nav__word,
  .nav__links a:focus-visible .nav__word{ transform:translateY(-110%) rotateX(90deg); opacity:0; }
  .nav__links a:hover .nav__hand,
  .nav__links a:focus-visible .nav__hand{ transform:none; opacity:1; }
  @media (prefers-reduced-motion:reduce){
    .nav__links a > span{ transition:none; }
  }
  .nav__actions{ margin-left:auto; display:flex; align-items:center; gap:18px; }
  .nav__login{
    font-size:14px;
    font-weight:600;
    color:#000000;
    text-decoration:none;
    transition:color .15s ease;
  }
  .nav__login:hover{ color:var(--accent-text); }
  .nav__cta{ margin:0; padding:8px 16px; font-size:13.5px; }
  /* logged-in state: greeting + Log Out replace Log In / Get Started */
  .nav__actions [hidden]{ display:none !important; }
  .nav__user{ font-size:14px; font-weight:600; color:var(--black); white-space:nowrap; }
  .nav__user-name{ color:var(--accent-text); }
  .nav__logout{
    font:inherit; font-size:14px; font-weight:600; color:#000000;
    background:none; border:0; padding:0; cursor:pointer; white-space:nowrap;
    transition:color .15s ease;
  }
  .nav__logout:hover{ color:var(--accent-text); }
  /* Three absolutely-positioned bars rather than a flex column, so the outer two can
     travel to the middle and rotate into an X while the drawer is open. The button's own
     aria-expanded drives it -- no extra class to keep in sync with the JS. */
  .nav__menu{
    display:none;
    position:relative;
    width:34px; height:34px;
    padding:0;
    background:none; border:0; cursor:pointer;
  }
  .nav__menu span{
    position:absolute; left:7px; width:20px; height:2px;
    background:var(--black); border-radius:1px;
    transition:top .22s ease, transform .22s ease, opacity .14s ease;
  }
  .nav__menu span:nth-child(1){ top:11px; }
  .nav__menu span:nth-child(2){ top:16px; }
  .nav__menu span:nth-child(3){ top:21px; }
  .nav__menu[aria-expanded="true"] span:nth-child(1){ top:16px; transform:rotate(45deg); }
  .nav__menu[aria-expanded="true"] span:nth-child(2){ opacity:0; }
  .nav__menu[aria-expanded="true"] span:nth-child(3){ top:16px; transform:rotate(-45deg); }
  @media (prefers-reduced-motion: reduce){
    .nav__menu span{ transition:none; }
  }

  .nav__links a[aria-current="page"] .nav__word{ color:var(--black); }
  /* Below this width the greeting cannot show a name without truncating it to nothing,
     and "Log Out" is what the row actually needs to keep. */
  @media (max-width:480px){
    .nav__user{ display:none !important; }
    .nav__actions{ gap:12px; }
  }
/* ---------- Footer (from the homepage) ---------- */
  /* ---------- Footer ---------- */
  .footer{ background:var(--white); }
  .rule--strong::before{ height:2px; background:#D5D2CD; }
  .footer__inner{
    max-width:calc(1200px + 48px);
    margin:0 auto;
    padding:56px 24px 40px;
    display:grid;
    grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,.8fr) minmax(0,.8fr) minmax(0,.8fr);
    gap:32px 40px;
  }
  .footer__brand img{ height:24px; width:auto; display:block; margin-bottom:16px; }
  .footer__brand p{ margin:0 0 12px; font-size:13.5px; line-height:1.6; color:#000000; }
  .footer__brand a{ color:#000000; text-decoration:none; }
  .footer__brand a:hover{ color:var(--accent-text); }
  .footer__brand .footer__blurb{ max-width:46ch; }
  .footer__office{
    font-style:normal;
    margin:0 0 14px;
    font-size:13.5px; line-height:1.6; color:#000000;
  }
  .footer__office strong{ display:block; font-weight:600; color:var(--black); }
  .footer__col .footer__office a{ display:inline; padding:0; font-size:inherit; }
  .footer__col .footer__office a:hover{ color:var(--accent-text); }
  .footer__disclosure a{ color:rgba(0,0,0,.6); text-decoration:underline; text-underline-offset:2px; }
  .footer__disclosure a:hover{ color:var(--accent-text); }
  .footer__label{
    margin:0 0 10px;
    font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
    color:var(--accent-text);
  }
  .footer__col a{
    display:block;
    padding:4px 0;
    font-size:14px;
    color:#000000;
    text-decoration:none;
    transition:color .15s ease;
  }
  .footer__col a:hover{ color:var(--accent-text); }
  .footer__disclosure{
    grid-column:1 / -1;
    padding-top:28px;
    border-top:1px solid #D5D2CD;
  }
  .footer__disclosure p{ margin:0 0 10px; font-size:12.5px; line-height:1.55; color:rgba(0,0,0,.6); }
  .footer__copy{ color:rgba(0,0,0,.55) !important; }

  /* ---------- Skyline illustration ---------- */
  .skyline{
    background:var(--white);
    padding-top:56px;
    overflow:hidden;
  }
  .skyline img{
    display:block;
    width:100%;
    height:auto;
  }


@media (max-width:900px){
    .nav__inner{ gap:16px; height:54px; }
    .nav__links{
      display:none;
      position:absolute; left:0; right:0; top:54px;
      flex-direction:column; align-items:stretch; gap:0;
      margin:0; padding:8px 20px 12px;
      background:var(--white);
      border-bottom:1px solid #D5D2CD;
      box-shadow:0 12px 24px rgba(0,0,0,.08);
    }
    .nav__links.is-open{ display:flex; }
    .nav__links a{ padding:12px 0; border-bottom:1px solid #FCF7F0; font-size:15px; }
    .nav__links a{ justify-items:start; }
    .nav__links a .nav__hand{ font-size:22px; }
    .nav__links a:last-child{ border-bottom:0; }
    .nav__logo img{ height:17px; }
    /* The greeting is the only elastic thing in this row, so it is the thing that gives.
       Without min-width:0 a flex item refuses to shrink below its content and pushes
       "Log Out" and the menu button off the right edge -- at 320px always, and at 390px
       as soon as the first name is longer than about six characters. */
    .nav__actions{ gap:10px; min-width:0; }
    .nav__login{ font-size:13px; white-space:nowrap; flex:0 0 auto; }
    .nav__user{ font-size:13px; min-width:0; overflow:hidden; text-overflow:ellipsis; }
    .nav__logout{ font-size:13px; flex:0 0 auto; }
    .nav__menu{ flex:0 0 auto; }
    .nav__cta{ flex:0 0 auto; }
    .nav__cta{ padding:7px 11px; font-size:12.5px; white-space:nowrap; }
    .nav__cta svg{ display:none; }
    .nav__menu{ display:block; }
    .footer__inner{ grid-template-columns:1fr 1fr; padding:40px 20px 32px; }
    .skyline{ padding-top:32px; }
    .footer__brand{ grid-column:1 / -1; }
    .footer__offices{ grid-column:1 / -1; display:grid; grid-template-columns:1fr 1fr; column-gap:24px; }
    .footer__offices .footer__label{ grid-column:1 / -1; }
}