/* ===== IDX Bloom direction A "Crossed out" (Josh, 2026-10-14): the shared core. Header, footer, type, buttons, FAQ. =====
   Source of truth: build/a_src/core.css. build/tools/make_a_css.py concatenates it with home.css (-> assets/v11-home.css, the home page, standalone)
   and with inner.css (-> assets/a.css, loaded after site.css + v8.css on every other page). Never edit the two outputs by hand.
   Copied from work/2026-10-14-REDESIGN/idx-bloom-redesign.html (.dA): Bricolage Grotesque 800 display (tight tracking), Figtree body, white #FFFFFF page,
   ink #0E1A2B, mint #16D68E (mint-ink #05663F for mint TEXT on white), 2.5px ink outlines, hard offset shadows, highlighter <mark>.
   White page only, light only, no dark mode, no dark bands, no flowers. Phone first (375px). prefers-reduced-motion = the end state. */
:root{
  --paper:#FFFFFF;--ink:#0E1A2B;--ink-2:#4B5A70;--line:#DCE3EC;
  --mint:#16D68E;--mint-soft:#E2F9EF;--mint-ink:#05663F;
  --sky:#DDEBFF;--sand:#FFF0D2;--lilac:#ECE8FF;--retro:#EEF0F5;
  --f-display:"Bricolage Grotesque","Figtree",system-ui,sans-serif;
  --f-body:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:84px}
body.cx{margin:0;background:var(--paper);color:var(--ink);font:500 1rem/1.5 var(--f-body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
.cx a{color:inherit}
.cx img,.cx svg{max-width:100%}
.cx :focus-visible{outline:3px solid var(--ink);outline-offset:3px;border-radius:6px}
.cx-w{width:100%;max-width:1120px;margin:0 auto;padding:0 18px}
.cx .skip-link{position:absolute;left:12px;top:-80px;z-index:100;background:var(--ink);color:var(--paper);min-height:44px;display:inline-flex;align-items:center;padding:12px 18px;border-radius:12px;font:800 1rem/1 var(--f-body);text-decoration:none}
.cx .skip-link:focus{top:12px}
.cx-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- header ---------- */
.cx-hd{position:sticky;top:0;z-index:40;background:var(--paper);border-bottom:2.5px solid var(--ink)}
.cx-hd-in{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;min-height:68px;padding-top:8px;padding-bottom:8px}
.cx-logo{--wm:31.5px;display:flex;align-items:center;min-width:0}
.cx-logo .idxb-logo{--idxb-logo-w:136px;--idxb-ink:var(--ink)}
.cx-logo .wm-svg{height:30px;width:auto;color:var(--ink);display:block}
.cx-logo .idxb-wm-home{display:inline-flex;align-items:center;min-height:44px;color:var(--ink);text-decoration:none}
.cx-hd-r{display:flex;align-items:center;gap:8px}
/* the logo is small on a phone: its link and its switch get a 44 px hit area through a pseudo-element */
.cx-logo .idxb-logo__link,.cx-logo .idxb-logo__sw{position:relative}
.cx-logo .idxb-logo__sw{position:absolute}
.cx-logo .idxb-logo__link::after{content:"";position:absolute;inset:-10px -4px}
.cx-logo .idxb-logo__sw::after{content:"";position:absolute;inset:-8px -6px}
.cx-btn-s{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:8px 14px;border:2.5px solid var(--ink);border-radius:10px;background:var(--paper);color:var(--ink);font:800 1rem/1 var(--f-body);text-decoration:none;white-space:nowrap}
.cx-btn-s:hover{background:var(--mint)}
.cx-nav{flex-basis:100%;order:3}
.cx-nav ul{list-style:none;margin:0;padding:0 0 8px;display:flex;flex-wrap:wrap;gap:0 18px}
.cx-nav a{display:flex;align-items:center;min-height:44px;font-weight:700;text-decoration:none;color:var(--ink-2)}
.cx-nav a:hover,.cx-nav a[aria-current]{color:var(--ink);text-decoration:underline;text-decoration-thickness:2.5px;text-decoration-color:var(--mint);text-underline-offset:5px}
.cx-menu{display:none;width:44px;height:44px;border-radius:12px;border:2.5px solid var(--ink);background:var(--paper);color:var(--ink);cursor:pointer;place-items:center;padding:0}
.cx-menu i{display:block;width:18px;height:2.5px;background:currentColor;border-radius:2px;position:relative}
.cx-menu i::before,.cx-menu i::after{content:"";position:absolute;left:0;width:18px;height:2.5px;background:currentColor;border-radius:2px;transition:transform .2s,top .2s}
.cx-menu i::before{top:-6px}.cx-menu i::after{top:6px}
.cx-hd.open .cx-menu i{background:transparent}
.cx-hd.open .cx-menu i::before{top:0;transform:rotate(45deg)}
.cx-hd.open .cx-menu i::after{top:0;transform:rotate(-45deg)}
.cx-js .cx-menu{display:grid}
.cx-js .cx-nav{display:none;position:absolute;left:0;right:0;top:100%;background:var(--paper);border-bottom:2.5px solid var(--ink);padding:6px 18px 14px}
.cx-js .cx-hd.open .cx-nav{display:block}
.cx-js .cx-nav ul{display:block;padding:0}
.cx-js .cx-nav a{min-height:52px;font:800 1.35rem/1.1 var(--f-display);letter-spacing:-.02em;color:var(--ink);border-bottom:1.5px solid var(--line)}
.cx-js .cx-nav li:last-child a{border-bottom:0}

/* ---------- buttons ---------- */
.cx-btn{display:inline-flex;align-items:center;gap:8px;min-height:52px;margin-top:20px;padding:14px 22px;background:var(--mint);color:var(--ink);border:2.5px solid var(--ink);border-radius:14px;font:800 1.05rem/1.1 var(--f-body);text-decoration:none;box-shadow:5px 5px 0 var(--ink);transition:transform .12s,box-shadow .12s}
.cx-btn:hover{transform:translate(2px,2px);box-shadow:3px 3px 0 var(--ink)}
.cx-btn:active{transform:translate(5px,5px);box-shadow:0 0 0 var(--ink)}
.cx-ar{display:inline-block;transition:transform .15s}
.cx-btn:hover .cx-ar{transform:translateX(3px)}

/* ---------- FAQ: A-style folded cards (the markup is <details class="faq-item"><summary>Q</summary><p>A</p></details>) ---------- */
.cx .faq-item{border:2.5px solid var(--ink);border-radius:14px;background:var(--paper);margin:0}
.cx .faq-item summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:52px;padding:8px 14px;font:700 1.05rem/1.25 var(--f-display);letter-spacing:-.01em;color:var(--ink)}
.cx .faq-item summary::-webkit-details-marker{display:none}
.cx .faq-item summary::after{content:"+";flex:none;width:30px;height:30px;display:grid;place-items:center;border:2px solid var(--ink);border-radius:9px;background:var(--mint);font:800 1.2rem/1 var(--f-body);color:var(--ink);rotate:0deg;transition:transform .15s}
.cx .faq-item[open] summary::after{content:"+";transform:rotate(45deg)}
.cx .faq-item p{margin:0;padding:0 14px 14px;color:var(--ink-2);font-size:1rem;max-width:none}
.cx .faq-item a{color:var(--mint-ink);font-weight:700}

/* ---------- footer (white) ---------- */
.cx-ft{border:0;border-top:2.5px solid var(--ink);border-radius:0;width:auto;max-width:none;margin:0;overflow:visible;padding:26px 0 36px;font-size:1rem;background:var(--paper);color:var(--ink-2)}
.cx-ft::before,.cx-ft::after{display:none;content:none}
.cx-ft a{color:var(--ink);text-decoration:none;font-weight:600}
.cx-ft a:hover{text-decoration:underline;text-decoration-thickness:2px;text-decoration-color:var(--mint);text-underline-offset:4px}
.cx-ft-top{display:flex;flex-direction:column;gap:14px;padding-bottom:12px}
.cx-ft-brand .wm-svg{height:30px;width:auto;color:var(--ink);display:block}
.cx-ft-cb p{margin:0;line-height:1.5;color:var(--ink-2)}
.cx-ft-cb a{display:inline-flex;align-items:center;min-height:44px}
.cx-ft-nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 18px;padding:6px 0 10px}
.cx-ft-nav ul{list-style:none;margin:0;padding:0}
.cx-ft-nav a{display:flex;align-items:center;min-height:44px}
.cx-ft-nav a[aria-current]{color:var(--mint-ink)}
.cx-all{margin:6px 0 12px;border:2.5px solid var(--ink);border-radius:14px;background:var(--paper)}
.cx-all summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:52px;padding:8px 14px;font:700 1.05rem/1.25 var(--f-display);letter-spacing:-.01em;color:var(--ink)}
.cx-all summary::-webkit-details-marker{display:none}
.cx-all summary::after{content:"+";flex:none;width:30px;height:30px;display:grid;place-items:center;border:2px solid var(--ink);border-radius:9px;background:var(--mint);font:800 1.2rem/1 var(--f-body);color:var(--ink);transition:transform .15s}
.cx-all[open] summary::after{transform:rotate(45deg)}
.cx-all .footer-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 18px;padding:0 14px 14px}
.cx-all .fh{margin:12px 0 2px;font:800 1rem/1.2 var(--f-body);letter-spacing:.06em;text-transform:uppercase;color:var(--mint-ink)}
.cx-all .fcol ul{list-style:none;margin:0;padding:0}
.cx-all .fcol a{display:flex;align-items:center;min-height:44px;font-weight:600;color:var(--ink);text-decoration:none}
.cx-all .fcol a:hover{text-decoration:underline;text-decoration-color:var(--mint);text-decoration-thickness:2px;text-underline-offset:4px}
.cx-all .fcol a[aria-current]{color:var(--mint-ink)}
@media (min-width:600px){.cx-all .footer-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:920px){.cx-all .footer-grid{grid-template-columns:repeat(5,minmax(0,1fr))}}
.cx-ft .footer-note,.cx-ft .footer-note a,.cx-ft .footer-powered,.cx-ft .footer-powered a,.cx-ft .footer-cb-link{font:600 1rem/1.5 var(--f-body);color:var(--ink)}
.cx-all .fcol a{font-size:1rem}
.cx-ft .footer-cb-link{border:0;background:none;padding:0;border-radius:0;box-shadow:none}
.cx-ft .footer-cb-link::after{content:none}
.cx-ft .footer-copy{margin:0;padding-top:14px;border-top:1.5px solid var(--line);font-size:1rem;line-height:1.5;color:var(--ink-2)}
/* 2026-10-14 Equal Housing Opportunity line (Phil's block D): the words always, the official HUD logo beside them once its file is in assets/ (see site_v11_home.eho()) */
.cx-ft .footer-eho{display:flex;align-items:center;gap:12px;margin:0;padding:14px 0 0;border-top:1.5px solid var(--line);font:700 1rem/1.4 var(--f-body);color:var(--ink)}
.cx-ft .footer-eho img{height:32px;width:auto;flex:none;display:block}
.cx-ft .footer-eho+.footer-copy{border-top:0;padding-top:8px}

/* ---------- the assistant (hidden until the logo's switch is tapped): same A look ---------- */
.cx .idxb-ai{font-family:var(--f-body);border:2.5px solid var(--ink);border-radius:18px;box-shadow:6px 6px 0 var(--mint)}

/* ---------- from 600px ---------- */
@media (min-width:600px){
  .cx-w{padding:0 28px}
  .cx-ft-nav{grid-template-columns:repeat(4,minmax(0,1fr))}
  .cx-ft-top{flex-direction:row;justify-content:space-between;align-items:flex-end}
}
/* ---------- desktop header ---------- */
@media (min-width:920px){
  .cx-hd-in{flex-wrap:nowrap;min-height:76px}
  .cx-logo{--wm:40.7px}
  .cx-logo .idxb-logo{--idxb-logo-w:176px}
  .cx-logo .wm-svg{height:36px}
  .cx-nav{flex-basis:auto;order:0;margin-left:auto;margin-right:18px}
  .cx-nav ul,.cx-js .cx-nav ul{display:flex;gap:6px 24px;padding:0}
  .cx-nav a,.cx-js .cx-nav a{min-height:44px;font:700 1rem/1.2 var(--f-body);letter-spacing:0;color:var(--ink-2);border:0}
  .cx-nav a:hover,.cx-nav a[aria-current],.cx-js .cx-nav a:hover,.cx-js .cx-nav a[aria-current]{color:var(--ink)}
  .cx-js .cx-nav{display:block;position:static;background:none;border:0;padding:0}
  .cx-js .cx-menu{display:none}
}
@media (max-width:359px){
  .cx-logo{--wm:26px}
  .cx-logo .idxb-logo{--idxb-logo-w:112px}
  .cx-hd-r{gap:6px}
  .cx-btn-s{padding:8px 10px;font-size:.95rem}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}
/* ===== every page except the home (direction A on top of site.css + v8.css; selectors start with .cx so they win without !important) ===== */
.cx{--ink2:var(--ink-2);--soft:var(--ink-2);--rule:var(--line);--green:var(--mint);--green2:var(--mint);--greenink:var(--mint-ink);--mint100:var(--mint-soft);--mint50:#F4FCF8;--mark:var(--mint);
  --coral:var(--mint);--yellow:var(--mint);--blue:var(--mint-ink);--link:var(--mint-ink);--url:var(--mint-ink);--font:var(--f-body);--border:2.5px;--radius:14px;--radius-sm:12px;--r-card:14px;--r-btn:14px;--maxw:1120px;--stroke:var(--ink);
  --shadow:6px 6px 0 var(--mint)}
.cx p{color:var(--ink-2)}
.cx .container{max-width:1120px;padding-left:18px;padding-right:18px}
@media (min-width:600px){.cx .container{padding-left:28px;padding-right:28px}}

/* ---------- type ---------- */
.cx h1,.cx h2,.cx h3,.cx .wordmark{font-family:var(--f-display);font-weight:800;text-transform:none;letter-spacing:-.03em;text-wrap:balance;color:var(--ink)}
.cx h1{font-size:clamp(2.55rem,1.55rem + 3.5vw,4.6rem);line-height:.95;letter-spacing:-.035em;margin:0 0 16px}
.cx h2{font-size:clamp(1.7rem,1.2rem + 1.8vw,2.7rem);line-height:1;margin:0 0 14px}
.cx h3{font-size:1.2rem;line-height:1.15;letter-spacing:-.02em;margin:0 0 8px}
.cx .lede{font-size:1.1rem;line-height:1.45;color:var(--ink-2);max-width:34ch}
.cx mark,.cx mark.hl{background:linear-gradient(transparent 52%,var(--mint) 52%,var(--mint) 92%,transparent 92%);color:inherit;padding:0 2px}
.cx .kicker{display:block;font:800 1rem/1.2 var(--f-body);letter-spacing:.06em;text-transform:uppercase;color:var(--mint-ink);margin:0 0 12px;padding:0;background:none;border-radius:0}
.cx .kicker .sw,.cx .kicker b,.cx .kicker .mk{display:none}
.cx .stripe,.cx .marquee,.cx .ticker,.cx .rule-dots{display:none}
.cx hr.rule,.cx .rule{border:0;border-top:1.5px solid var(--line)}
.cx .fine,.cx .hero-note,.cx figcaption,.cx .illus-note{font-size:1rem;color:var(--ink-2);letter-spacing:0;text-transform:none}
.cx main p a:not([class]),.cx main .prose a:not([class]),.cx main td a:not([class]){color:var(--mint-ink);font-weight:700;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}
.cx .more,.cx .card .more{color:var(--mint-ink);font-weight:800}
.cx .tag,.cx .real-note,.cx .draft-tag,.cx .bd{display:inline-block;font:800 1rem/1.2 var(--f-body);letter-spacing:.02em;text-transform:none;color:var(--ink);background:var(--paper);border:2px solid var(--ink);border-radius:999px;padding:4px 10px;box-shadow:none;white-space:normal}
.cx .bd.soon,.cx .draft-tag{background:var(--sand)}
.cx .bd.partner{background:var(--retro)}
.cx .tag{margin-bottom:10px}

/* ---------- crumbs ---------- */
.cx .crumbs{padding-top:10px}
.cx .crumbs ol{font:600 1rem/1.3 var(--f-body);letter-spacing:0;color:var(--ink-2);padding:0;margin:0;list-style:none;display:flex;flex-wrap:wrap;gap:0 4px}
.cx .crumbs li+li::before{content:"/";margin-right:6px;color:var(--line)}
.cx .crumbs a{display:inline-flex;align-items:center;min-height:44px;color:var(--ink-2);text-decoration:none;font-weight:700}
.cx .crumbs a:hover{color:var(--ink);text-decoration:underline;text-decoration-color:var(--mint);text-decoration-thickness:2px}
.cx .crumbs li[aria-current]{color:var(--ink);font-weight:800}

/* ---------- hero: left-aligned poster, no photo, no gradient ---------- */
.cx .hero{padding:12px 0 30px;background:none;border:0;border-radius:0;margin:0 auto;width:auto;max-width:none;min-height:0;display:block}
.cx .hero::before,.cx .hero::after{display:none;content:none}
.cx .hero .hero-copy{text-align:left!important;max-width:1120px!important;margin:0 auto!important;padding:0 18px!important}
@media (min-width:600px){.cx .hero .hero-copy{padding:0 28px!important}}
.cx .hero h1{max-width:14em}
.cx .hero .lede,.cx .hero .lede.center{margin-left:0;margin-right:0;color:var(--ink-2)}
.cx .hero-cta-row{justify-content:flex-start!important;gap:14px;margin-top:6px}
.cx .hero-note{margin:16px 0 0;font-weight:600}
@media (min-width:920px){.cx .hero{padding:36px 0 56px}.cx .hero .lede{font-size:1.3rem;max-width:34ch}}

/* ---------- sections: ink rule on top, no islands ---------- */
.cx main>section,.cx main>section.container{padding-top:30px;padding-bottom:30px;background:none;border-radius:0;margin:0 auto;width:auto;max-width:1120px}
.cx main>.hero+section,.cx main>section+section{border-top:2.5px solid var(--ink)}
.cx main>.hero+section.container,.cx main>section.container+section.container{border-top:2.5px solid var(--ink)}
.cx main>section.container{margin-left:auto;margin-right:auto}
.cx .section-head{max-width:760px;margin:0 0 22px;text-align:left}
.cx .section-head h2{display:block;padding:0;border:0}
.cx .section-head p{font-size:1.05rem}
@media (min-width:920px){.cx main>section,.cx main>section.container{padding-top:56px;padding-bottom:56px}}
.cx .center,.cx p.center{text-align:left;margin-left:0}
.cx .prose{max-width:760px}
.cx .prose h2{font-size:clamp(1.5rem,1.2rem + 1vw,2rem);margin:34px 0 10px}
.cx .prose h3{font-size:1.15rem;margin:24px 0 6px}
.cx .prose p,.cx .prose li{color:var(--ink-2)}
.cx .prose a{color:var(--mint-ink);font-weight:800}

/* ---------- buttons ---------- */
.cx .btn,.cx .btn-primary,.cx .btn-ghost,.cx .btn-dark{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:14px 22px;border:2.5px solid var(--ink);border-radius:14px;font:800 1.05rem/1.1 var(--f-body);text-decoration:none;text-transform:none;letter-spacing:0;color:var(--ink);background:var(--paper);box-shadow:5px 5px 0 var(--ink);cursor:pointer;transition:transform .12s,box-shadow .12s}
.cx .btn-primary{background:var(--mint);color:var(--ink)}
.cx .btn-dark{background:var(--ink);color:var(--paper)}
.cx .btn:hover,.cx .btn-primary:hover,.cx .btn-ghost:hover,.cx .btn-dark:hover{transform:translate(2px,2px);box-shadow:3px 3px 0 var(--ink);background:var(--mint);color:var(--ink)}
.cx .btn-ghost:hover{background:var(--paper)}
.cx .btn:active{transform:translate(5px,5px);box-shadow:0 0 0 var(--ink)}
.cx .btn .sw{display:none}
.cx .btn-block{width:100%}
.cx .cta-row{gap:14px}

/* ---------- cards: sticker tiles ---------- */
.cx .card,.cx .plan,.cx .feat,.cx .step-card,.cx .tour-step,.cx .tile,.cx .founding,.cx .numstrip div,.cx .road .col,.cx .oc-new,.cx .demo-card,.cx .q-list li,.cx .hs-out a{background:var(--paper);border:2.5px solid var(--ink);border-radius:14px;box-shadow:none;padding:16px 16px 18px}
.cx .card,.cx .feat{transform:none}
.cx .card>p:last-child,.cx .step-card>p:last-child,.cx .tour-step p:last-child{margin-bottom:0}
.cx .linkcard{transition:transform .12s,box-shadow .12s}
.cx .linkcard:hover{border-color:var(--ink);box-shadow:5px 5px 0 var(--mint);transform:translate(-2px,-2px)}
.cx :is(.grid-2,.grid-3,.feats,.steps,.tiles,.numstrip,.road)>:nth-child(4n+1){background:var(--sky)}
.cx :is(.grid-2,.grid-3,.feats,.steps,.tiles,.numstrip,.road)>:nth-child(4n+2){background:var(--sand)}
.cx :is(.grid-2,.grid-3,.feats,.steps,.tiles,.numstrip,.road)>:nth-child(4n+3){background:var(--mint-soft)}
.cx :is(.grid-2,.grid-3,.feats,.steps,.tiles,.numstrip,.road)>:nth-child(4n){background:var(--lilac)}
.cx .grid-2,.cx .grid-3,.cx .feats{gap:14px}
@media (min-width:760px){
  .cx .grid-3>:nth-child(3n+1),.cx .grid-2>:nth-child(odd){transform:rotate(-.8deg)}
  .cx .grid-3>:nth-child(3n+2){transform:rotate(.6deg)}
  .cx .grid-3>:nth-child(3n),.cx .grid-2>:nth-child(even){transform:rotate(.9deg)}
  .cx .linkcard:hover{transform:rotate(0) translate(-2px,-2px)}
}
.cx .step-num,.cx .tour-n{width:38px;height:38px;border:0;border-radius:9px;background:var(--mint);color:var(--ink);box-shadow:none;font:800 1.5rem/1 var(--f-display);letter-spacing:0;display:grid;place-items:center;margin-bottom:10px}
.cx .tile b{font:800 1.05rem/1.2 var(--f-body);text-transform:none;letter-spacing:0}
.cx .tile span{color:var(--ink-2);font-size:1rem}
.cx .plan{padding:20px}
.cx .plan.featured{background:var(--mint-soft);border-radius:16px;box-shadow:6px 6px 0 var(--mint)}
.cx .plan-name{font:800 1.2rem/1.1 var(--f-display);text-transform:none;letter-spacing:-.02em}
.cx .plan-name .nodes{display:none}
.cx .plan-price{font:800 clamp(3rem,10vw,4.4rem)/.9 var(--f-display);letter-spacing:-.05em}
.cx .plan-price span{font:700 1.1rem var(--f-body)!important;letter-spacing:0;color:var(--ink-2)}
.cx .plan li,.cx .plan li.pl{font-size:1rem;color:var(--ink)}
.cx .founding{background:var(--mint-soft);box-shadow:none}

/* ---------- screenshots, frames, diagrams: ink outline + hard mint shadow ---------- */
.cx .shot,.cx .frame,.cx .diagram,.cx .photo,.cx .duo-desk,.cx .duo-phone,.cx .mock,.cx .compare-wrap,.cx .chap-art,.cx .sample-card,.cx .bi-page{background:var(--paper);border:2.5px solid var(--ink);border-radius:14px;box-shadow:6px 6px 0 var(--mint);overflow:hidden}
.cx .shot figcaption,.cx .photo .credit,.cx .duo figcaption{border-top:2px solid var(--ink);padding:10px 14px}
.cx .frame-bar{border-bottom:2.5px solid var(--ink);background:var(--paper)}
.cx .frame-bar i{background:var(--paper);border:1.5px solid var(--ink)}
.cx .pin,.cx .legend li b{background:var(--mint);color:var(--ink);border:2px solid var(--ink);box-shadow:none}
.cx pre.code{background:var(--mint50);border:2px solid var(--ink);border-radius:12px;color:var(--ink)}
.cx .chip,.cx .jump a,.cx .toc a,.cx .chapbar a,.cx .chap-tags li{border:2px solid var(--ink);border-radius:999px;background:var(--paper);color:var(--ink);font:800 1rem/1 var(--f-body);letter-spacing:0;text-transform:none;min-height:44px;display:inline-flex;align-items:center;padding:0 14px}
.cx .jump a:hover,.cx .toc a:hover,.cx .chapbar a:hover{background:var(--mint)}
.cx .jump a[aria-current],.cx .chapbar a.on{background:var(--mint);border-color:var(--ink);color:var(--ink)}
.cx .chap-n{font:800 clamp(3.5rem,13vw,6rem)/.9 var(--f-display);color:var(--mint);letter-spacing:-.05em}
.cx .chapbar{background:var(--paper);border-bottom:2.5px solid var(--ink)}

/* ---------- tables ---------- */
.cx .compare-wrap{overflow-x:auto}
.cx table.compare th,.cx table.compare td{border-bottom:1.5px solid var(--line);font-size:1rem;padding:14px 16px}
.cx table.compare th{font:800 1rem var(--f-body);letter-spacing:0;text-transform:none;color:var(--ink);background:var(--mint-soft);border-bottom:2.5px solid var(--ink)}
.cx table.compare td.bloom-col{background:var(--mint-soft);color:var(--ink);font-weight:700}
/* stacked table on phones (class "stack", 2026-10-14, the SEO articles + the partner terms): each row is a block, the first cell is its title, every other cell is labelled by its column heading (data-l) */
@media (max-width:640px){
.cx table.compare.stack,.cx table.compare.stack tbody,.cx table.compare.stack tr,.cx table.compare.stack td{display:block;width:100%;min-width:0;box-sizing:border-box}
.cx table.compare.stack thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.cx table.compare.stack tr{border-bottom:2.5px solid var(--ink);padding:10px 0}
.cx table.compare.stack tr:last-child{border-bottom:0}
.cx table.compare.stack td{border:0;padding:3px 16px}
.cx table.compare.stack td:first-child{font-weight:800;color:var(--ink);padding-top:6px}
.cx table.compare.stack td[data-l]::before{content:attr(data-l) ": ";font-weight:800;color:var(--ink)}
}

/* 2026-10-14: no text under 16 px on the roadmap lists and the design-preview browser bar (they were 15 px and 12.5 px) */
.cx .road .col li,.cx .road .col li b,.cx .frame-bar span{font-size:1rem}

/* ---------- FAQ section on inner pages ---------- */
.cx main>section .faq-item,.cx .faq-item{margin:0 0 10px}

/* ---------- closing bands ---------- */
.cx .cta-band{background:var(--mint-soft);border:2.5px solid var(--ink);border-radius:16px;box-shadow:6px 6px 0 var(--mint);padding:28px 20px;text-align:left}
.cx .cta-band::before{display:none}
.cx .cta-band h2{margin-left:0;max-width:16em}
.cx .cta-final{background:none;border:0;border-top:2.5px solid var(--ink);border-radius:0;margin:0 auto;width:auto;max-width:1120px;padding:34px 18px 40px;display:block;color:var(--ink);overflow:visible}
.cx .cta-final::before,.cx .cta-final::after{display:none;content:none}
.cx .cta-final-in{max-width:none;padding:0}
.cx .cta-final h2{font-size:clamp(2rem,1.4rem + 2.6vw,3.6rem);line-height:.95;letter-spacing:-.035em;margin:0 0 10px;max-width:14em;color:var(--ink)}
.cx .cta-final p{font-size:1.1rem;color:var(--ink-2);max-width:30em;margin:0}
.cx .cta-final .cta-row{justify-content:flex-start;margin-top:20px}
@media (min-width:600px){.cx .cta-final{padding-left:28px;padding-right:28px}}
@media (min-width:920px){.cx .cta-final{padding-top:56px;padding-bottom:64px}}

/* ---------- forms ---------- */
.cx .waitlist-form input[type=email],.cx .waitlist-form input[type=text],.cx .search-row input,.cx .field input,.cx .field select,.cx .field textarea,.cx .hsearch input{min-height:52px;border:2.5px solid var(--ink);border-radius:14px;padding:0 14px;font:600 1.05rem var(--f-body);color:var(--ink);background:var(--paper)}
.cx .field textarea{padding:13px 14px}
.cx .waitlist-form input:focus,.cx .field input:focus,.cx .field select:focus,.cx .field textarea:focus{outline:3px solid var(--ink);outline-offset:2px;box-shadow:none}
.cx .field label,.cx .field label small{font:800 1rem/1.3 var(--f-body);color:var(--ink);letter-spacing:0;text-transform:none}
.cx .field label small{font-weight:600;color:var(--ink-2)}
.cx .waitlist-success{background:var(--mint-soft);border:2.5px solid var(--ink);border-radius:14px;box-shadow:none;color:var(--ink)}

/* ---------- features list, timelines, misc ---------- */
.cx .ft-group h2{font-size:clamp(1.4rem,1.1rem + 1vw,1.9rem);border-bottom:2.5px solid var(--ink);padding-bottom:10px}
.cx .ft-row{border-bottom:1.5px solid var(--line)}
.cx .ft-row b{font-weight:800}
.cx .ft-row span.d{color:var(--ink-2)}
.cx .tl .when{border:2px solid var(--ink);background:var(--mint);color:var(--ink);font:800 .9rem/1.15 var(--f-body);text-transform:none;letter-spacing:0}
.cx .tl li::before{border-left:2.5px solid var(--ink)}
.cx .tl .who span{border:2px solid var(--ink);border-radius:999px;font:800 .875rem var(--f-body);letter-spacing:0;text-transform:none;background:var(--paper)}
.cx .tl .who span.you{background:var(--mint)}
.cx .num,.cx .numstrip b{font-family:var(--f-display);font-weight:800;letter-spacing:-.04em}
.cx .numstrip span{font:700 1rem var(--f-body);text-transform:none;letter-spacing:0;color:var(--ink-2)}
.cx .pg-websites .wsc,.cx.pg-websites .wsc{border:2.5px solid var(--ink);border-radius:16px;box-shadow:6px 6px 0 var(--mint)}
.cx.pg-websites .wsc-vis{background:var(--mint-soft);border-color:var(--ink)}
.cx.pg-websites .wsc-browser,.cx.pg-websites .wsc-phone{border:2.5px solid var(--ink);box-shadow:none}
.cx.pg-websites .wsc:hover,.cx.pg-websites .wsc:focus-visible{transform:none;box-shadow:8px 8px 0 var(--mint)}
.cx .badge-key{color:var(--ink-2);font-size:1rem}
.cx .sw{box-shadow:none}

/* ---------- nothing under 16px (inline font sizes the builders still print, small helper text) ---------- */
.cx [style*="font-size:13px"],.cx [style*="font-size:14px"],.cx [style*="font-size:15px"],.cx [style*="font-size: 13px"],.cx [style*="font-size: 14px"]{font-size:1rem!important}
.cx label,.cx .more,.cx .card .more,.cx .fine,.cx small{font-size:1rem}
.cx .chapbar{top:68px}
@media (min-width:920px){.cx .chapbar{top:76px}}
body.cx .cc-grid label,body.cx .cc-card label{font-size:1rem}
.cx .prose{margin-left:0;margin-right:auto}
.cx .waitlist-form,.cx .waitlist-form.wide,.cx .waitlist-success{margin-left:0;margin-right:auto}