/* שיתוף נדל"ן — design system "נייר וירוק"
   Chosen 31 Aug 2026 from four palette prototypes. Committed single look:
   warm paper ground, deep forest chapters, one green accent. Typography IS
   the design — Frank Ruhl Libre 900 display over Heebo text. Custom easing
   everywhere; `ease`/`linear` are banned. */

/* Self-hosted fonts (both OFL). Variable files: one per subset covers every weight.
   Hebrew + latin only. Served from our own origin so no third-party CSS blocks render. */
@font-face{font-family:"Frank Ruhl Libre";font-style:normal;font-weight:700 900;font-display:swap;src:url(/fonts/frank-ruhl-libre-hebrew.woff2) format("woff2");unicode-range:U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F}
@font-face{font-family:"Frank Ruhl Libre";font-style:normal;font-weight:700 900;font-display:swap;src:url(/fonts/frank-ruhl-libre-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Heebo";font-style:normal;font-weight:300 600;font-display:swap;src:url(/fonts/heebo-hebrew.woff2) format("woff2");unicode-range:U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F}
@font-face{font-family:"Heebo";font-style:normal;font-weight:300 600;font-display:swap;src:url(/fonts/heebo-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

:root{
  --bg:#F6F4EE; --bg-2:#EDEAE1; --surface:#FFFFFF;
  --chapter:#0F3527; --chapter-2:#0B2A1F;
  --ink:#191B17; --dim:#565A54;
  --cream:#EDEBE0; --cream-dim:#C9CFC2;
  --green:#0F5C42; --green-deep:#0B4632;
  --line:rgba(15,92,66,.22); --line-soft:rgba(15,92,66,.12);
  --warn-bg:#FBEAEA; --warn-ink:#8A2020; --warn-line:#E7C3C3;
  --ok-bg:#E7F0EB;
  --disp:"Frank Ruhl Libre",Georgia,serif;
  --ui:"Heebo","Segoe UI","Noto Sans Hebrew",system-ui,sans-serif;
  --mono:Consolas,ui-monospace,Menlo,monospace;
  --e-out:cubic-bezier(.16,1,.3,1);
  --e-inout:cubic-bezier(.87,0,.13,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
html,body{overflow-x:clip}
body{background:var(--bg);color:var(--ink);font-family:var(--ui);font-weight:400;
     font-size:17px;line-height:1.7;-webkit-font-smoothing:antialiased}
::selection{background:var(--green);color:var(--cream)}
:focus-visible{outline:2px solid var(--green);outline-offset:4px}
a{color:var(--green)}
h1,h2,h3{text-wrap:balance}
.wrap{max-width:78rem;margin-inline:auto;padding-inline:clamp(1.2rem,4vw,3rem)}

/* ---- reveals: load choreography + scroll ---- */
.rv{opacity:0;transform:translateY(26px);transition:opacity .9s var(--e-out),transform .9s var(--e-out)}
.on .rv{opacity:1;transform:none}
.rv.d1{transition-delay:.06s}.rv.d2{transition-delay:.16s}.rv.d3{transition-delay:.28s}
.rv.d4{transition-delay:.42s}.rv.d5{transition-delay:.58s}
/* Hero headline and lead: slide only, never transparent. The browser does not
   count LCP until an element is visible, so fading them in cost ~0.6s of LCP. */
.rv.lcp{opacity:1;transition:transform .9s var(--e-out)}
.sr{opacity:0;transform:translateY(30px);transition:opacity 1s var(--e-out),transform 1s var(--e-out)}
.sr.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rv,.sr{opacity:1!important;transform:none!important;transition:none!important}
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important}
}

/* ---- skip link ---- */
.skip{position:absolute;inset-inline-start:-9999px;top:0;z-index:20;
      background:var(--green);color:var(--cream);padding:.7rem 1.2rem;
      border-radius:0 0 10px 10px;text-decoration:none;font-weight:600}
.skip:focus{inset-inline-start:1rem}

/* ---- page-exit morph ---- */
main{transition:opacity .22s var(--e-out),transform .22s var(--e-out)}
body.leaving main{opacity:0;transform:translateY(-14px)}

/* ---- top bar ---- */
header.top{position:sticky;top:0;z-index:10;background:transparent;
  transition:background .4s var(--e-out),box-shadow .4s var(--e-out)}
header.top.scrolled{background:rgba(246,244,238,.92);backdrop-filter:blur(8px);
  box-shadow:0 1px 0 var(--line-soft)}
.bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-block:1.4rem}
.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;color:var(--ink);
       font-weight:600;font-size:var(--t17);white-space:nowrap}
.mark{width:34px;height:34px;flex:none;display:grid;place-items:center;background:var(--green);
      color:var(--cream);font-family:var(--disp);font-weight:900;font-size:1.15rem;border-radius:4px}
.bar nav{display:flex;gap:2rem;font-size:var(--t15);color:var(--dim)}
.bar nav a{text-decoration:none;color:inherit;white-space:nowrap;transition:color .3s var(--e-out)}
.bar nav a:hover{color:var(--green)}
/* five links now (news joined the nav); on a phone the bar wraps to two rows
   instead of pushing the last link off the edge */
@media (max-width:46rem){.bar{flex-wrap:wrap;row-gap:.3rem;padding-block:1rem}
  .bar nav{gap:.9rem 1rem;font-size:var(--t15);flex-wrap:wrap;width:100%;justify-content:flex-start}}

/* ---- hero ---- */
.hero{min-height:min(88svh,52rem);display:flex;flex-direction:column;justify-content:center;
      position:relative;overflow:hidden;border-bottom:1px solid var(--line-soft)}
.hero.sub-hero{min-height:0;padding-block:clamp(2.5rem,6vw,4rem)}
.skyline{position:absolute;inset-inline:0;bottom:0;height:22vh;opacity:.35;pointer-events:none}
.skyline svg{position:absolute;bottom:0;width:100%;height:100%;display:block}
.skyline g{stroke:var(--green);stroke-opacity:.25}
.eyebrow{font-size:var(--t15);letter-spacing:.12em;color:var(--green);font-weight:400;margin-bottom:1.2rem}
.hero h1{font-family:var(--disp);font-weight:900;color:var(--ink);
  font-size:clamp(2.9rem,9.5vw,8.5rem);line-height:1.04;max-width:14ch}
.hero h1 em{font-style:normal;color:var(--green)}
.hero.sub-hero h1{font-size:clamp(2rem,4.5vw,3.6rem);max-width:18ch;line-height:var(--lh-disp)}
.hero .sub{margin-top:1.2rem;max-width:34rem;font-size:var(--t20);line-height:1.55;color:var(--ink-2)}
.cta-row{margin-top:2rem;display:flex;gap:1rem;flex-wrap:wrap;align-items:center}
.tag-price{font-weight:600;font-size:var(--t20);color:var(--green);align-self:center}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;min-height:46px;
  padding:.7rem 1.5rem;font:600 var(--t15)/1.2 var(--ui);text-decoration:none;
  border:0;border-radius:999px;cursor:pointer;
  transition:transform .4s var(--e-out),background .4s var(--e-out),color .4s var(--e-out),border-color .4s var(--e-out)}
.btn-primary{background:var(--green);color:var(--cream)}
.btn-primary:hover{background:var(--green-deep)}
.btn-ghost{border:1px solid var(--line);color:var(--ink);background:transparent}
.btn-ghost:hover{border-color:var(--green);color:var(--green)}

/* ---- numbers strip ---- */
.strip{border-block:1px solid var(--line-soft);background:var(--bg-2)}
.strip .wrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(10rem,1fr));gap:0}
.stat{padding:2.4rem 1.2rem;text-align:center;position:relative}
.stat+.stat::before{content:"";position:absolute;inset-block:1.5rem;inset-inline-start:0;width:1px;background:var(--line-soft)}
.stat b{display:block;font-family:var(--disp);font-weight:700;font-size:clamp(var(--t32),4vw,var(--t44));
  color:var(--green);line-height:1;font-variant-numeric:tabular-nums}
.stat span{display:block;margin-top:.55rem;font-size:var(--t15);color:var(--dim)}
.src{font-size:var(--t15);color:var(--dim);margin-top:.8rem}

/* ---- chapters (dark forest sections) ---- */
.chapter{background:var(--chapter);color:var(--cream)}
.chapter .eyebrow{color:var(--cream-dim)}
.chapter a{color:var(--cream)}
.chapter ::selection{background:var(--cream);color:var(--chapter)}
.manifesto{padding-block:clamp(3rem,8vw,6rem)}
.manifesto h2{font-family:var(--disp);font-weight:900;font-size:clamp(var(--t32),4.5vw,var(--t64));line-height:1.1;max-width:20ch}
.manifesto .cols{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:4rem;margin-top:3rem}
.manifesto p{color:var(--cream-dim);max-width:34rem}
.manifesto p+p{margin-top:1.2rem}
.pull{border-inline-start:3px solid var(--cream);padding-inline-start:1.6rem;
  font-family:var(--disp);font-weight:900;font-size:var(--t32);line-height:1.2;align-self:center}
@media (max-width:52rem){.manifesto .cols{grid-template-columns:1fr;gap:2.4rem}}

/* ---- sections ---- */
section.pad{padding-block:var(--sec)}
.sec-head{margin-bottom:2rem}
.sec-head h2{font-family:var(--disp);font-weight:900;font-size:clamp(var(--t32),4vw,var(--t44));line-height:var(--lh-disp)}
.sec-head h2 em{font-style:normal;color:var(--green)}
.sec-head p{color:var(--dim);margin-top:1rem;max-width:38rem}

/* ---- the nine grid ---- */
.grid9{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line-soft);border:1px solid var(--line-soft)}
@media (max-width:52rem){.grid9{grid-template-columns:1fr 1fr}}
@media (max-width:34rem){.grid9{grid-template-columns:1fr}}
.cell{background:var(--bg);padding:2.1rem 1.7rem;min-height:12.5rem;display:flex;flex-direction:column;
  justify-content:space-between;text-decoration:none;position:relative;overflow:hidden}
.cell::after{content:"";position:absolute;inset:0;background:var(--green);
  transform:scaleY(0);transform-origin:bottom;transition:transform .5s var(--e-out)}
.cell:hover::after,.cell:focus-visible::after{transform:scaleY(1)}
.cell>*{position:relative;z-index:1;transition:color .4s var(--e-out)}
.cell .cat{font-family:var(--ui);font-weight:600;font-size:var(--t20);line-height:1.3;color:var(--ink)}
.cell .price{font-variant-numeric:tabular-nums;color:var(--dim);font-size:var(--t15);margin-top:.5rem}
.cell .state{display:flex;align-items:center;justify-content:space-between;font-size:var(--t15);color:var(--green)}
.cell .state .go{opacity:0;transform:translateX(8px);transition:opacity .4s var(--e-out),transform .4s var(--e-out)}
.cell:hover .cat,.cell:hover .price,.cell:hover .state,
.cell:focus-visible .cat,.cell:focus-visible .price,.cell:focus-visible .state{color:var(--cream)}
.cell:hover .state .go,.cell:focus-visible .state .go{opacity:1;transform:none}
.cell[data-status="taken"]{opacity:.55}
.cell[data-status="taken"]::after{display:none}

/* ---- why cards ---- */
.why{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:1px;
     background:var(--line-soft);border:1px solid var(--line-soft)}
.why article{background:var(--bg);padding:2rem 1.7rem}
.why .num{font-family:var(--ui);font-weight:600;font-size:var(--t15);color:var(--gold-soft);margin-bottom:.9rem}
.why h3{font-family:var(--ui);font-weight:600;font-size:var(--t20);margin-bottom:.5rem}
.why p{color:var(--dim);font-size:var(--t17)}

/* ---- includes list ---- */
.incl{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(19rem,1fr));gap:.9rem 2.4rem}
.incl li{position:relative;padding-inline-start:1.7rem;color:var(--dim)}
.incl li b{color:var(--ink);font-weight:600}
.incl li::before{content:"";position:absolute;inset-inline-start:0;top:.62em;width:.75em;height:.4em;
  border-inline-start:2px solid var(--green);border-bottom:2px solid var(--green);transform:rotate(45deg)}

/* ---- verified band ---- */
.band .wrap{padding-block:var(--sec);display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:3rem;align-items:center}
@media (max-width:52rem){.band .wrap{grid-template-columns:1fr}}
.band h2{font-family:var(--disp);font-weight:900;font-size:clamp(var(--t32),4vw,var(--t44));line-height:var(--lh-disp)}
.band p{color:var(--cream-dim);margin-top:1.1rem;max-width:30rem}
.seal{justify-self:center;text-align:center;border:1px solid var(--cream-dim);padding:2.4rem 2.8rem;position:relative}
.seal::before{content:"";position:absolute;inset:8px;border:1px solid rgba(237,235,224,.25)}
.seal b{display:block;font-family:var(--disp);font-weight:900;font-size:var(--t44);line-height:1}
.seal span{display:block;margin-top:.8rem;font-size:var(--t15);color:var(--cream-dim);max-width:14rem}

/* ---- data screenshots ---- */
.shots{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:1.4rem}
.shots figure{margin:0;background:var(--surface);border:1px solid var(--line-soft);padding:.8rem}
.shots img{width:100%;height:auto;display:block}
.shots figcaption{font-size:var(--t15);color:var(--dim);margin-top:.6rem;text-align:center}

/* ---- form ---- */
.formwrap{background:var(--surface);border:1px solid var(--line-soft);padding:clamp(1.4rem,3.5vw,2.6rem)}
form.applyForm{display:grid;gap:1.3rem}
.row{display:grid;grid-template-columns:1fr 1fr;gap:1.3rem}
@media (max-width:40rem){.row{grid-template-columns:1fr}}
label{display:block;font-weight:600;font-size:var(--t15);margin-bottom:.4rem}
input,select,textarea{width:100%;min-height:46px;padding:.6rem .9rem;border:1px solid var(--line-2);
  background:var(--night-2);color:inherit;font:inherit;line-height:1.4;border-radius:10px;
  transition:border-color .3s var(--e-out)}
input:focus,select:focus,textarea:focus{outline:3px solid var(--gold);outline-offset:1px;border-color:transparent}
input[aria-invalid="true"],textarea[aria-invalid="true"]{border-color:var(--warn-ink)}
textarea{min-height:9rem;resize:vertical}
.hint{font-size:var(--t15);color:var(--dim);margin-top:.5rem}
.chosen{display:none;padding:.85rem 1.1rem;border:1px solid var(--line-gold);background:var(--ok-bg);
  color:var(--green-deep);font-weight:600;border-radius:10px}
.chosen.on{display:block}
form button[type=submit]{justify-self:start;background:var(--green);color:var(--cream);border:0;min-height:46px;
  font:600 var(--t15)/1.2 var(--ui);padding:.7rem 1.6rem;border-radius:999px;cursor:pointer;
  transition:background .4s var(--e-out),transform .4s var(--e-out)}
form button[type=submit]:hover{background:var(--green-deep)}
button[disabled]{opacity:.55;cursor:default}
.msg{font-size:var(--t15);padding:.85rem 1.1rem;border-radius:10px;display:none}
.msg.ok{display:block;background:var(--ok-bg);color:var(--green-deep);border:1px solid var(--green)}
.msg.err{display:block;background:var(--warn-bg);color:var(--warn-ink);border:1px solid var(--warn-line)}
.note{margin-top:1.4rem;padding:1rem 1.2rem;background:var(--bg-2);border:1px solid var(--line-soft);
  font-size:var(--t15);color:var(--dim)}

/* ---- close + footer ---- */
.close{padding-block:clamp(4rem,9vw,6rem);text-align:center}
.close h2{font-family:var(--disp);font-weight:900;font-size:clamp(var(--t32),6vw,var(--t64));line-height:var(--lh-disp)}
.close h2 em{font-style:normal;color:var(--green)}
.close .cta-row{justify-content:center}
footer{background:var(--chapter);color:var(--cream-dim);padding-block:2.2rem;font-size:var(--t15)}
footer .wrap{display:flex;justify-content:space-between;gap:1rem 2.4rem;flex-wrap:wrap;align-items:center}
footer a{color:var(--cream);text-decoration:none}
footer a:hover{text-decoration:underline;text-underline-offset:3px}
footer nav{display:flex;gap:.5rem;flex-wrap:wrap}

/* ---- legal pages ---- */
.legal{max-width:44rem;padding-block:clamp(2.5rem,7vw,4.5rem)}
.legal h1{font-family:var(--disp);font-weight:900;font-size:clamp(var(--t32),4.5vw,var(--t44));line-height:var(--lh-disp)}
.legal h2{font-family:var(--ui);font-weight:600;font-size:var(--t20);margin-top:2.4rem;
  padding-top:1.4rem;border-top:1px solid var(--line-soft)}
.legal p{margin-top:.9rem;color:var(--dim);max-width:34rem}
.legal p.lead{font-size:var(--t20);line-height:1.55;margin-top:1.4rem;color:var(--ink-2)}
.legal .incl{margin-top:1.2rem;grid-template-columns:1fr}
.facts{margin-top:1.2rem;border:1px solid var(--line-soft);background:var(--surface)}
.facts>div{display:grid;grid-template-columns:minmax(8rem,14rem) 1fr;gap:.4rem 1.2rem;
  padding:.85rem 1.1rem;border-bottom:1px solid var(--line-soft)}
.facts>div:last-child{border-bottom:0}
.facts dt{font-weight:600;font-size:var(--t15)}
.facts dd{color:var(--dim);font-size:var(--t15)}
@media (max-width:34rem){.facts>div{grid-template-columns:1fr}}
.todo{background:var(--warn-bg);color:var(--warn-ink);border:1px dashed var(--warn-line);
  padding:.05em .5em;border-radius:999px;font-size:var(--t15);font-family:var(--mono)}

/* ---- ad units (GDN-style placements) ------------------------------
   House ads fill every unit until its category is sold. Always labeled
   "פרסום". Two shapes: leaderboard (top strips) and square (side/inline). */
.ad{position:relative;background:var(--bg-2);border:1px solid var(--line-soft);
  border-inline-start:4px solid var(--line-gold);overflow:hidden}
.ad{display:flex;flex-direction:column;align-items:stretch}
.ad .adtag{position:static;align-self:flex-start;margin:.85rem 1.2rem 0}
.ad a{text-decoration:none;color:inherit;display:block}
.ad .q{font-family:var(--ui);font-weight:600;color:var(--ink);line-height:1.3}
.ad .pitch{color:var(--dim)}
.ad .go{color:var(--green);font-weight:600;font-size:var(--t15)}
.ad:hover{background:var(--surface)}
.ad:hover .go{text-decoration:underline;text-underline-offset:3px}

.ad-lead{margin-block:1.8rem}
.ad-lead a{display:flex;align-items:center;gap:1.4rem;padding:.7rem 1.5rem 1.1rem;flex-wrap:wrap}
.ad-lead .q{font-size:var(--t20)}
.ad-lead .pitch{font-size:var(--t15);flex:1;min-width:12rem}
@media (max-width:40rem){.ad-lead a{gap:.35rem;flex-direction:column;align-items:flex-start;padding:1rem 1.2rem}
  .ad-lead .q{font-size:var(--t20);line-height:1.3}
  .ad-lead .pitch{font-size:var(--t15);min-width:0;flex:none}}

.ad-sq a{display:flex;flex-direction:column;gap:.5rem;padding:.8rem 1.4rem 1.4rem;flex:1;
  justify-content:center}
.ad-sq .q{font-size:var(--t20)}
.ad-sq .pitch{font-size:var(--t15)}

/* ---- article-with-sidebar: the news-site shell -------------------- */
.withaside{display:grid;grid-template-columns:minmax(0,1fr) 19rem;gap:3rem;align-items:start}
.withaside aside{position:sticky;top:5.5rem;display:grid;gap:1.4rem}
.aside-box{border:1px solid var(--line-soft);background:var(--surface);padding:1.2rem 1.3rem}
.aside-box h3{font-family:var(--ui);font-weight:600;font-size:var(--t17);margin-bottom:.7rem}
.aside-box ul{list-style:none;display:grid;gap:.55rem}
.aside-box li a{text-decoration:none;color:var(--dim);font-size:var(--t15);line-height:1.45}
.aside-box li a:hover{color:var(--green)}
@media (max-width:56rem){.withaside{grid-template-columns:1fr}.withaside aside{position:static}}

/* ---- נכס השבוע: the weekly pick, given real estate on the page ---- */
.featured{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:0;
  border:1px solid var(--line);background:var(--surface);overflow:hidden;text-decoration:none;color:inherit}
@media (max-width:52rem){.featured{grid-template-columns:1fr}}
.featured img{width:100%;height:100%;min-height:260px;object-fit:cover;display:block}
.featured .noimg{min-height:260px;background:var(--chapter)}
.featured .body{padding:clamp(1.4rem,3vw,2.2rem);display:flex;flex-direction:column;justify-content:center;gap:.5rem}
.featured .tag{display:inline-flex;align-self:flex-start;gap:.4rem;align-items:center;
  background:var(--green);color:var(--cream);font-size:var(--t15);font-weight:600;
  letter-spacing:.06em;padding:.3rem .8rem;border-radius:2px}
.featured h3{font-family:var(--disp);font-weight:900;font-size:var(--t32);line-height:var(--lh-disp);margin-top:.4rem}
.featured .price{font-weight:600;font-size:var(--t24);color:var(--green)}
.featured .facts{color:var(--dim);font-size:var(--t15)}
.featured .broker{margin-top:.8rem;padding-top:.8rem;border-top:1px dashed var(--line);font-size:var(--t15);color:var(--dim)}
.featured .broker b{color:var(--ink)}
.featured:hover .go{text-decoration:underline;text-underline-offset:3px}
.featured .go{color:var(--green);font-weight:600;margin-top:.6rem}
.cell .star{position:absolute;top:.6rem;inset-inline-start:.7rem;z-index:2;background:var(--green);
  color:var(--cream);font-size:var(--t15);font-weight:600;padding:.2rem .55rem;border-radius:2px;letter-spacing:.05em}

/* ---- the group card: the community's Facebook home, represented ---- */
.fbcard{max-width:46rem;margin-inline:auto;border:1px solid var(--line-soft);background:var(--surface);overflow:hidden}
.fbcard .cover{background:linear-gradient(165deg,#101B33,#0B1528);color:#EDEBE0;padding:2.2rem 2rem 3.6rem;position:relative}
.fbcard .cover .kicker{color:#C9A254;font-family:var(--mono);font-size:var(--t15);letter-spacing:.16em}
.fbcard .cover h3{font-family:var(--ui);font-weight:600;font-size:var(--t20);line-height:1.35;margin-top:.5rem}
.fbcard .cover .sub{color:rgba(237,235,224,.65);font-size:var(--t15);margin-top:.3rem}
.fbcard .cover svg{position:absolute;bottom:0;inset-inline:0;width:100%;height:56px;display:block}
.fbcard .meta{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding:1.3rem 2rem}
.fbcard .meta .facts{display:flex;gap:1.8rem;font-size:var(--t15);color:var(--dim)}
.fbcard .meta .facts b{color:var(--ink);font-weight:600;font-size:var(--t17)}
.fbcard .lock{display:inline-flex;align-items:center;gap:.4rem}

/* ---- board filter bar ---- */
.filterbar{display:grid;grid-template-columns:2fr 1fr 1fr;gap:1rem;margin-bottom:1.6rem}
@media (max-width:40rem){.filterbar{grid-template-columns:1fr}}

/* ---- the community building: sponsor slots as windows ------------
   Nine professions, nine windows, three floors that map exactly to the
   three price tiers. An empty window is an ad space sold as such. */
.bldg{max-width:52rem;margin-inline:auto}
.bldg .roofsign{display:flex;align-items:center;justify-content:center;gap:.6rem;
  width:min(20rem,70%);margin-inline:auto;padding:.65rem 1rem;
  background:var(--chapter);color:var(--cream);font-weight:600;
  border-radius:6px 6px 0 0;font-size:var(--t15)}
.bldg .roofsign .mark{width:26px;height:26px;font-size:var(--t15);border-radius:3px}
.bldg .parapet{height:14px;background:var(--surface);border:1.5px solid var(--ink);
  border-bottom:0;border-radius:4px 4px 0 0}
.bldg .facade{background:var(--surface);border:1.5px solid var(--ink);border-top:0;
  padding:clamp(1rem,3vw,2rem);display:grid;gap:clamp(.8rem,2vw,1.4rem)}
.floor{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(.8rem,2vw,1.4rem);position:relative}
.floor::before{content:attr(data-name);position:absolute;inset-inline-end:calc(100% + .6rem);
  top:50%;transform:translateY(-50%);font-family:var(--mono);font-size:var(--t15);color:var(--dim);
  white-space:nowrap;writing-mode:vertical-rl}
@media (max-width:46rem){
  .floor{grid-template-columns:1fr}
  .floor::before{display:none}
}
.slot{border:1.5px dashed var(--line);background:var(--bg);padding:1.2rem 1.1rem 1.1rem;
  display:flex;flex-direction:column;gap:.4rem;align-items:flex-start;position:relative;
  box-shadow:inset 0 -6px 0 var(--bg-2); /* window sill */
  transition:border-color .4s var(--e-out),background .4s var(--e-out),box-shadow .4s var(--e-out)}
.slot::after{content:"פנוי";position:absolute;top:.6rem;inset-inline-start:.8rem;
  font-family:var(--mono);font-size:var(--t15);color:var(--green);letter-spacing:.08em}
.slot:hover{border-color:var(--green);border-style:solid;background:var(--surface);
  box-shadow:inset 0 -6px 0 var(--green)}
.slot .q{font-family:var(--ui);font-weight:600;font-size:var(--t20);line-height:1.3;
  color:var(--ink);margin-top:1rem}
.slot .pitch{color:var(--dim);font-size:var(--t15)}
.btn-slot{margin-top:.5rem;min-height:36px;padding:.4rem 1rem;font-size:var(--t15);border:1px solid var(--line);
  color:var(--green);border-radius:2px;text-decoration:none;font-weight:600;
  transition:background .3s var(--e-out),color .3s var(--e-out),border-color .3s var(--e-out)}
.slot:hover .btn-slot{background:var(--green);color:var(--cream);border-color:var(--green)}
.bldg .ground{border:1.5px solid var(--ink);border-top:1.5px dashed var(--line);
  background:var(--surface);display:flex;align-items:center;justify-content:center;
  padding:1.2rem;gap:1rem}
.bldg .door{display:inline-block;background:var(--green);color:var(--cream);
  padding:1rem 2.4rem;border-radius:6px 6px 0 0;font-weight:600;text-decoration:none;
  transition:background .3s var(--e-out),transform .3s var(--e-out)}
.bldg .door:hover{background:var(--green-deep);transform:translateY(-2px)}
.bldg .base{height:10px;background:var(--bg-2);border:1.5px solid var(--ink);border-top:0;
  border-radius:0 0 3px 3px;margin-inline:-8px}

/* ---- news ---- */
.newslist{display:grid;gap:1px;background:rgba(237,235,224,.14);border:1px solid rgba(237,235,224,.18)}
.newsitem{display:grid;gap:.25rem;padding:1.3rem 1.5rem;background:var(--chapter);
  text-decoration:none;transition:background .35s var(--e-out)}
.newsitem:hover{background:var(--chapter-2)}
.ndate{font-family:var(--mono);font-size:var(--t15);color:var(--cream-dim);letter-spacing:.04em}
.ntitle{font-family:var(--ui);font-weight:600;font-size:var(--t17);color:var(--cream);line-height:1.4}
.nnote{font-size:var(--t15);color:var(--cream-dim)}

/* ---- 404 ---- */
.lost{min-height:70svh;display:grid;place-items:center;text-align:center;padding-block:4rem}
.lost b{display:block;font-family:var(--disp);font-weight:900;font-size:clamp(5rem,18vw,12rem);
  line-height:1;color:var(--green);opacity:.18}
.lost h1{font-family:var(--disp);font-weight:900;font-size:clamp(var(--t32),4vw,var(--t44));margin-top:-1.2em}
.lost p{color:var(--dim);margin-top:.8rem}
.lost .cta-row{justify-content:center}

/* ---- scrollbar, subtly branded (WebKit + Firefox) ---- */
html{scrollbar-color:var(--green) var(--bg-2);scrollbar-width:thin}
::-webkit-scrollbar{width:10px}
::-webkit-scrollbar-track{background:var(--bg-2)}
::-webkit-scrollbar-thumb{background:var(--green);border-radius:5px;border:2px solid var(--bg-2)}

/* ---- sold slots (sponsors.json) ------------------------------------ */
.slot[data-taken]{border-style:solid;border-color:var(--green);background:var(--surface);
  box-shadow:inset 0 -6px 0 var(--green)}
.slot[data-taken]::after{content:"תפוס";color:var(--dim)}
.slot[data-taken] .q{color:var(--green)}
.ad[data-sold]{border-color:var(--green);background:var(--surface)}
.ad[data-sold] .adtag{color:var(--green)}
.ad .logo{max-height:44px;max-width:160px;display:block;margin-bottom:.5rem;object-fit:contain}
.ad-lead .logo{margin-bottom:0}
.cell[data-status="taken"]{opacity:1}
.cell[data-status="taken"] .state span:first-child{color:var(--dim)}
.sponsor-card{display:grid;grid-template-columns:1fr auto;gap:1.4rem;align-items:center}
.sponsor-card .logo{max-height:80px;max-width:220px;object-fit:contain}
.sponsor-card .about{white-space:pre-wrap;max-width:38rem}
@media (max-width:640px){.sponsor-card{grid-template-columns:1fr}}

/* ---- founder badge: the launch promise to the first brokers -------- */
.cell .founder{position:absolute;top:.6rem;inset-inline-end:.7rem;z-index:2;
  background:var(--cream);color:var(--green-deep);border:1px solid var(--green);
  font-size:var(--t15);font-weight:600;padding:.15rem .5rem;border-radius:2px;letter-spacing:.05em}
.chip{display:inline-block;background:var(--cream);color:var(--green-deep);
  border:1px solid var(--green);font-size:var(--t15);font-weight:600;
  padding:.1rem .5rem;border-radius:2px;letter-spacing:.04em;vertical-align:middle}

/* ---- board cells: every card keeps the same rhythm ------------------
   A listing without photos used to collapse into a different layout from
   its neighbours, which read as a bug. It now gets a branded panel of the
   same height, so a row of cards lines up whatever was uploaded. */
.cell .shot{width:calc(100% + 3.4rem);margin:-2.1rem -1.7rem 1rem;height:160px;
  object-fit:cover;display:block}
.cell .noshot{background:var(--chapter);color:var(--cream);opacity:.9;
  display:grid;place-items:center;font-family:var(--disp);font-weight:900;
  font-size:2.2rem;line-height:1}
/* Dynamic grids hold whatever number of listings exist, so the hairlines
   cannot come from the container's background — a partial row would show
   it as a large coloured block. Each cell draws its own instead; with the
   1px gap, neighbouring outlines meet as a single line. */
.grid9.grid-flow{background:transparent;border:0}
.grid9.grid-flow > *{outline:1px solid var(--line-soft)}

/* ---- the brand mark: ש drawn as three towers on a plot -------------- */
.mark svg{width:64%;height:64%;display:block}
.mark{color:var(--cream)}

/* ---- founders' pricing band ----------------------------------------
   Disappears from every page by itself once the third slot is sold, so
   the offer can never outlive its own terms. */
.founder-offer{display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem 1rem;
  margin-top:1.6rem;padding:1rem 1.3rem;background:var(--ok-bg);
  border:1px solid var(--green);border-inline-start:4px solid var(--green);
  max-width:44rem;font-size:var(--t15)}
.founder-offer b{font-weight:600;font-size:var(--t17);color:var(--green-deep)}
.founder-offer span{color:var(--ink)}
.founder-offer .left{width:100%;color:var(--dim);font-size:var(--t15)}

/* ---- in-content links ----------------------------------------------
   A link inside running text used to take the browser's default underline:
   full weight, sitting on the baseline, cutting through Hebrew descenders.
   Same green, but the rule is drawn thin and set below the text, and it
   comes to full strength on hover so the link still announces itself. */
a{color:var(--green);text-decoration-thickness:1px;text-underline-offset:.22em;
  text-decoration-color:color-mix(in srgb, var(--green) 45%, transparent);
  transition:text-decoration-color .25s var(--e-out),color .25s var(--e-out)}
a:hover{text-decoration-color:var(--green)}
a:focus-visible{outline:2px solid var(--green);outline-offset:2px;border-radius:2px}

/* An ad strip between two content sections. The section above it already
   carries generous bottom padding, so the strip only needs room underneath
   or it reads as attached to whatever follows. */
.adband{margin-block:.2rem 2.6rem}

/* A control that reads as a link but is a button, because it performs an
   action rather than going somewhere. href="#" would jump the page if the
   script ever failed to bind. */
.linkbtn{background:none;border:0;padding:0;font:inherit;color:var(--green);cursor:pointer;
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.22em;
  text-decoration-color:color-mix(in srgb, var(--green) 45%, transparent)}
.linkbtn:hover{text-decoration-color:var(--green)}
.linkbtn:focus-visible{outline:2px solid var(--green);outline-offset:2px;border-radius:2px}

/* Footer links sat at 21px tall, under the 24px pointer-target minimum.
   Padding rather than font size, so the footer's proportions do not move. */
footer a{display:inline-block;padding-block:.15rem}

/* ---- the arithmetic block on /sponsors ------------------------------
   Three cells and two operators. It is the only place on the site that
   shows a division, so it gets to look like one. */
.calc{display:flex;flex-wrap:wrap;align-items:stretch;gap:.6rem;margin-top:.5rem}
.calc-cell{flex:1 1 12rem;background:var(--surface);border:1px solid var(--line-soft);
  padding:1.4rem 1.2rem;display:flex;flex-direction:column;gap:.35rem;text-align:center}
.calc-cell b{font-family:var(--disp);font-weight:900;font-size:clamp(var(--t32),4vw,var(--t44));
  line-height:1;color:var(--ink);font-variant-numeric:tabular-nums}
.calc-cell span{font-size:var(--t15);color:var(--dim)}
.calc-cell.result{background:var(--ok-bg);border-color:var(--green)}
.calc-cell.result b{color:var(--green-deep)}
.calc-op{display:grid;place-items:center;font-family:var(--ui);font-weight:400;
  font-size:var(--t24);color:var(--dim);padding-inline:.2rem;flex:0 0 1.6rem}
@media (max-width:40rem){
  .calc{flex-direction:column}
  .calc-op{padding-block:.1rem;flex:none}
}

/* ---- the objections list on /sponsors ---- */
.faq{display:grid;gap:1px;background:var(--line-soft);border:1px solid var(--line-soft)}
.faq > div{background:var(--bg);padding:1.3rem 1.5rem}
.faq dt{font-family:var(--ui);font-weight:600;font-size:var(--t20);color:var(--ink);margin-bottom:.4rem}
.faq dd{margin:0;color:var(--dim);max-width:34rem}

/* Explanatory copy under a figure or a calculation: reading text, not a
   source credit. `.src` is mono and meant for one short line. */
.explain{color:var(--dim);max-width:44rem;margin-top:1.3rem;font-size:var(--t17);line-height:1.7}

/* ---- /post: "my listings" ------------------------------------------ */
#mine h2{font-family:var(--ui);font-weight:600;font-size:var(--t20);margin-bottom:.8rem}
.mine-row{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;
  padding:.9rem 0;border-top:1px solid var(--line-soft)}
.mine-row b{display:block;font-weight:600}
.mine-row .btn{min-height:36px;padding:.4rem 1rem;font-size:var(--t15)}
.st{font-weight:600}
.st-published{color:var(--green)}
.st-pending{color:#7a5a10}
.st-expired,.st-removed{color:var(--warn-ink)}

/* ---- /news archive on the paper ground ------------------------------ */
.newslist-light{background:var(--line-soft);border-color:var(--line-soft)}
.newslist-light .newsitem{background:var(--surface)}
.newslist-light .newsitem:hover{background:var(--bg-2)}
.newslist-light .ndate{color:var(--dim)}
.newslist-light .ntitle{color:var(--ink)}
.newslist-light .nnote{color:var(--dim)}

/* the group-post box on a listing page */
#groupPost textarea{font-family:var(--ui);line-height:1.6;background:var(--bg)}

/* =====================================================================
   HOME v2 — night city (24 Sep 2026)
   The user rejected the paper home as generic and static. The home is now
   one night theme end to end: same brand palette and type, with the paper
   tokens remapped to night values under body.home, so every existing
   component (forms, ads, board cells from app.js, the building) takes the
   theme without being rewritten. Gold is the single accent.
   Shape rule: buttons are pills, cards and panels 16px, inputs 10px.
   Motion rule: scroll effects are CSS scroll timelines (no scroll
   listeners); UI feedback stays under 300ms; ambient loops can be paused
   (.calm) and are off under prefers-reduced-motion.
   Scoped to bodyand new classes: other pages are untouched until
   the look is approved for them.
   ===================================================================== */
/* R2-B tokens (2 Oct 2026, docs/IMPROVEMENT-PLAN.md): "the lit window". One
   type scale, one colour set, one spacing scale, two radii plus the chip. The
   pre-R2-B names stay as aliases below, so nothing in this file or in the
   page scripts had to be renamed. Every text/ground pair here measures at
   least 5.5:1 on --surface-2 and 6.7:1 on --night. */
:root{
  --night:#0A1D15; --night-2:#071811; --surface-1:#0E271C; --surface-2:#11301F;
  --line-1:rgba(237,235,224,.10); --line-2:rgba(237,235,224,.22); --line-gold:rgba(199,154,62,.55);
  --ink:#EDEBE0; --ink-2:#C9CFC2; --ink-3:#AEB8AB;
  --gold:#C79A3E; --gold-soft:#E2C27A; --gold-wash:rgba(199,154,62,.10);
  --ok:#8CC3A3; --warn:#F0B4B4;
  /* type scale 13 15 17 20 24 32 44 64 88; display face from --t32 up */
  --t13:.8125rem; --t15:.9375rem; --t17:1.0625rem; --t20:1.25rem; --t24:1.5rem;
  --t32:2rem; --t44:2.75rem; --t64:4rem; --t88:5.5rem; --lh-disp:1.08;
  /* spacing 4 8 12 16 24 32 48 64 96 128; sections 48 phone / 64 desktop */
  --s1:.25rem; --s2:.5rem; --s3:.75rem; --s4:1rem; --s6:1.5rem; --s8:2rem;
  --s12:3rem; --s16:4rem; --s24:6rem; --s32:8rem;
  --sec:clamp(3rem,6vw,4rem);
  --r-card:16px; --r-input:10px; --r-chip:999px;
  --e-ui:cubic-bezier(.23,1,.32,1);
  /* aliases for the older names */
  --bg:var(--night); --bg-2:var(--surface-1); --surface:var(--surface-2);
  --chapter:#0F3527; --chapter-2:#0B2A1F;
  --dim:var(--ink-3); --cream:var(--ink); --cream-dim:var(--ink-2);
  --green:var(--gold); --green-deep:var(--gold-soft);
  --line:var(--line-2); --line-soft:var(--line-1);
  --ok-bg:var(--gold-wash);
  --warn-bg:#3A1616; --warn-ink:var(--warn); --warn-line:#6B2A2A;
  color-scheme:dark}
::selection{background:var(--gold);color:var(--night)}
:focus-visible{outline-color:var(--gold-soft)}
.mark{background:var(--gold);color:var(--night)}
a{text-decoration-color:color-mix(in srgb,var(--gold) 45%,transparent)}
.sec-head h2 em,.close h2 em{color:var(--gold)}
.strip{background:var(--bg-2)}
footer{background:var(--night-2);border-top:1px solid var(--line-soft)}

/* ---- buttons: pills, press feedback ---- */
.btn{border-radius:999px;transition:transform .2s var(--e-ui),background .2s var(--e-ui),color .2s var(--e-ui),border-color .2s var(--e-ui)}
.btn:active,form button[type=submit]:active{transform:scale(.97)}
.btn-primary,form button[type=submit]{background:var(--gold);color:var(--night);border-radius:999px}
.btn-primary:hover,form button[type=submit]:hover{background:var(--gold-soft)}
.btn-gold{background:var(--gold);color:var(--night)}
.btn-line{border:1px solid var(--line-2);color:var(--cream);background:transparent}
@media (hover:hover) and (pointer:fine){
  .btn-gold:hover{background:var(--gold-soft)}
  .btn-line:hover{border-color:var(--gold);color:var(--gold-soft)}
}

/* ---- scroll progress (scroll timeline; hidden where unsupported) ---- */
.progress{position:fixed;top:0;inset-inline:0;height:2px;z-index:30;pointer-events:none;
  background:var(--gold);transform-origin:right;transform:scaleX(0);display:none}

/* ---- header on the night page ---- */
body.home header.top{position:fixed;inset-inline:0}
header.top .brand{color:var(--cream)}
.bar nav{color:var(--cream-dim)}
.bar nav a:hover{color:var(--gold-soft)}
header.top.scrolled{background:rgba(10,29,21,.78);backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);box-shadow:0 1px 0 var(--line-soft)}

/* ---- the night hero ---- */
.night{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:center;
  overflow:hidden;color:var(--cream);isolation:isolate;view-timeline:--hero block;
  background:
    radial-gradient(60rem 30rem at 50% 105%,rgba(199,154,62,.26),transparent 70%),
    radial-gradient(40rem 26rem at 85% 0%,rgba(15,92,66,.55),transparent 70%),
    linear-gradient(180deg,var(--night-2) 0%,var(--night) 100%)}
.night-in{position:relative;z-index:2;padding-top:6rem;padding-bottom:clamp(9rem,26vh,15rem)}
.night .eyebrow{color:var(--gold-soft)}
.night h1{font-family:var(--disp);font-weight:900;font-size:clamp(3rem,8.2vw,7.6rem);
  line-height:1.02;max-width:15ch}
.night h1>span{display:inline-block}
.night h1 em{font-style:normal;color:var(--gold);
  background:linear-gradient(100deg,var(--gold) 20%,var(--gold-soft) 40%,var(--gold) 60%);
  background-size:220% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  animation:sheen 7s var(--e-inout) 1.6s infinite}
@keyframes sheen{0%,55%{background-position:100% 0}85%,100%{background-position:-20% 0}}
.night .sub{margin-top:1.6rem;max-width:34rem;font-size:clamp(1.05rem,1.6vw,1.25rem);color:var(--cream-dim)}
.night .cta-row{margin-top:2.2rem}

/* the ambient-motion pause (WCAG 2.2.2) */
.calm{position:absolute;z-index:3;bottom:1.2rem;inset-inline-end:clamp(1.2rem,4vw,3rem);
  font:400 var(--t15) var(--ui);color:var(--cream-dim);background:rgba(7,24,17,.6);
  border:1px solid rgba(237,235,224,.22);border-radius:999px;padding:.45rem 1rem;min-height:32px;cursor:pointer;
  transition:border-color .2s var(--e-ui),color .2s var(--e-ui)}
.calm:hover{border-color:var(--gold);color:var(--cream)}
.calm[aria-pressed="true"]{border-color:var(--gold);color:var(--gold-soft)}

/* the city: three outline layers, windows on the front one */
.city{position:absolute;inset-inline:0;bottom:0;height:60%;z-index:1;pointer-events:none}
.city svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.city path{fill:none}
.city-far path{stroke:rgba(199,154,62,.22);stroke-width:1}
.city-mid path{stroke:rgba(199,154,62,.38);stroke-width:1.2}
.city-near path{stroke:var(--gold);stroke-width:1.5;stroke-opacity:.85}
.city .wins rect{fill:var(--gold-soft);opacity:.07;transition:opacity 1.4s var(--e-out)}
.city .wins rect.lit{opacity:.85}
.city::after{content:"";position:absolute;inset-inline:0;bottom:0;height:30%;
  background:linear-gradient(0deg,var(--night),transparent)}

/* ---- numbers ---- */
.strip-big .stat{padding-block:3rem}
.strip-big .stat b{font-size:clamp(var(--t44),5vw,var(--t64));font-weight:900;color:var(--cream)}
.strip-big .stat:nth-child(2) b{color:var(--gold)}

/* ---- two paths: brokers free, professionals paid ---- */
.doors{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:1.2rem;align-items:stretch}
.path{display:flex;flex-direction:column;gap:1.1rem;padding:clamp(1.6rem,3.5vw,2.6rem);border-radius:16px;
  border:1px solid var(--line-soft);background:var(--bg-2)}
.path-pro{background:
  radial-gradient(34rem 18rem at 0% 0%,rgba(199,154,62,.16),transparent 70%),var(--surface);
  border-color:var(--line)}
.path h2{font-family:var(--disp);font-weight:900;font-size:clamp(var(--t32),3vw,var(--t44));line-height:var(--lh-disp)}
.path h2 em{font-style:normal;color:var(--gold)}
.ticks{list-style:none;display:grid;gap:.6rem;color:var(--dim)}
.ticks li{position:relative;padding-inline-start:1.6rem}
/* physical borders on purpose: a logical start border mirrors the tick into a chevron in RTL */
.ticks li::before{content:"";position:absolute;inset-inline-start:0;top:.45em;width:.75em;height:.4em;
  border-left:2px solid var(--gold);border-bottom:2px solid var(--gold);transform:rotate(-45deg)}
.path-price{display:flex;flex-wrap:wrap;align-items:baseline;gap:.3rem .8rem;margin-top:auto;padding-top:.6rem}
.path-price b{font-family:var(--disp);font-weight:900;font-size:clamp(var(--t32),4vw,var(--t44));line-height:1;color:var(--cream)}
.path-price span{color:var(--dim);font-size:var(--t15)}
.path-founder{font-size:var(--t15);color:var(--gold-soft);border-inline-start:3px solid var(--gold);padding-inline-start:.9rem}
.path .btn{align-self:flex-start}
@media (max-width:52rem){.doors{grid-template-columns:1fr}}

/* ---- the pinned story ---- */
.story{padding-block:var(--sec)}
.story-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,6vw,6rem);align-items:start}
.story-stage{position:sticky;top:calc(50vh - 14rem);height:28rem;border-radius:16px;overflow:hidden;
  border:1px solid var(--line-soft);
  background:
    radial-gradient(30rem 20rem at 20% 110%,rgba(199,154,62,.28),transparent 70%),
    linear-gradient(160deg,var(--chapter),var(--night-2))}
.stage-num{position:absolute;top:1.2rem;inset-inline-end:1.6rem;height:4.2rem;overflow:hidden;
  font-family:var(--disp);font-weight:900;font-size:4rem;line-height:4.2rem;color:rgba(199,154,62,.35)}
.stage-num span{display:block;transform:translateY(calc(var(--s,0) * -100%));transition:transform .7s var(--e-out)}
.scene{position:absolute;inset:0;display:grid;place-items:center;align-content:center;gap:.8rem;padding:2rem;
  opacity:0;transform:translateY(16px) scale(.97);transition:opacity .5s var(--e-out),transform .6s var(--e-out);pointer-events:none}
.scene.is-on{opacity:1;transform:none}
.scene-note{font-size:var(--t15);color:var(--cream-dim)}
.story-steps .step{min-height:60vh;display:flex;flex-direction:column;justify-content:center;
  padding-inline-start:1.6rem;border-inline-start:2px solid var(--line-soft);
  opacity:.62;transition:opacity .5s var(--e-out),border-color .5s var(--e-out)}
.story-steps .step.is-on{opacity:1;border-color:var(--gold)}
.story-steps h3{font-family:var(--disp);font-weight:900;font-size:clamp(var(--t32),3vw,var(--t44));line-height:var(--lh-disp);margin-bottom:.8rem}
.story-steps p{color:var(--dim);max-width:30rem}
@media (max-width:52rem){
  .story-grid{grid-template-columns:1fr}
  .story-stage{display:none}
  .story-steps .step{min-height:0;padding-block:1.2rem;opacity:1;border-color:var(--gold)}
}

/* scene illustrations, labelled as such */
.mock-listing{width:min(20rem,100%);background:#F6F4EE;border-radius:16px;overflow:hidden;color:#191B17;
  box-shadow:0 30px 60px -20px rgba(0,0,0,.6);transform:rotate(-2deg)}
.ml-photo{height:8.5rem;display:grid;place-items:center;background:linear-gradient(135deg,#1d4d3a,#0F3527 60%,#2b5e49)}
.ml-photo .mark{width:54px;height:54px;background:transparent;color:rgba(226,194,122,.85)}
.ml-body{padding:1rem 1.2rem 1.2rem;display:grid;gap:.25rem}
.ml-body b{font-weight:600}
.ml-price{font-weight:600;font-size:var(--t24);color:#0F5C42}
.ml-url{font-family:var(--mono);font-size:var(--t15);color:#565A54;text-align:start}
.ml-actions{display:flex;gap:.5rem;margin-top:.5rem}
.ml-actions span{flex:1;text-align:center;font-size:var(--t15);font-weight:600;padding:.45rem .3rem;border-radius:999px;
  background:#E7F0EB;color:#0B4632}
.ml-actions span+span{background:var(--gold);color:var(--night)}
.mock-check{width:min(21rem,100%);display:grid;gap:.9rem;padding:1.6rem;border-radius:16px;
  background:rgba(237,235,224,.06);border:1px solid rgba(237,235,224,.16);color:var(--cream)}
.mc-label{font-size:var(--t15);color:var(--cream-dim)}
.mc-num{font-size:var(--t20);font-weight:600}
.mc-bar{height:6px;border-radius:3px;background:rgba(237,235,224,.12);overflow:hidden}
.mc-bar i{display:block;height:100%;width:100%;background:var(--gold);transform:scaleX(0);transform-origin:right}
.scene.is-on .mc-bar i{animation:fillbar 1.4s var(--e-inout) .2s forwards}
@keyframes fillbar{to{transform:scaleX(1)}}
.mc-ok{font-weight:600;color:var(--gold-soft);opacity:0}
.scene.is-on .mc-ok{animation:pop .4s var(--e-out) 1.6s forwards}
@keyframes pop{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.mock-guides{position:relative;width:min(20rem,100%);height:15rem}
.mock-guides span{position:absolute;inset-inline:0;top:calc(var(--i) * 3.4rem);display:grid;gap:.3rem;
  background:#F6F4EE;color:#191B17;padding:1.1rem 1.2rem;border-radius:16px;
  box-shadow:0 20px 40px -18px rgba(0,0,0,.6);transform:rotate(calc((var(--i) - 1) * 2.5deg))}
.mock-guides b{font-weight:600;line-height:1.35}
.mock-guides small{font-size:var(--t15);color:#565A54}
.mock-mail{width:min(21rem,100%);background:#F6F4EE;color:#191B17;border-radius:16px;overflow:hidden;
  display:grid;box-shadow:0 30px 60px -20px rgba(0,0,0,.6)}
.mm-head{display:flex;align-items:center;gap:.6rem;background:#0F5C42;color:#EDEBE0;padding:.8rem 1rem}
.mm-head .mark{width:26px;height:26px;background:#EDEBE0;color:#0F5C42}
.mm-row{padding:.75rem 1rem;border-bottom:1px solid rgba(15,92,66,.12);font-size:var(--t15);line-height:1.4}
.mm-foot{padding:.6rem 1rem;font-size:var(--t15);color:#565A54;background:#EDEAE1}

/* ---- ads on the night page ---- */
.ad{border-radius:16px;background:var(--bg-2);border-color:var(--line-soft);border-inline-start-color:var(--line-gold)}
.ad:hover{background:var(--surface)}
.ad .q{color:var(--cream)}

/* ---- manifesto: a line that drifts with the scroll ---- */
.chapter{position:relative;overflow:hidden}
.drift{padding-top:clamp(3rem,7vw,5rem);white-space:nowrap;pointer-events:none;overflow:hidden}
.drift span{display:inline-block;font-family:var(--disp);font-weight:900;font-size:clamp(4rem,12vw,11rem);line-height:1.15;
  color:transparent;-webkit-text-stroke:1px rgba(199,154,62,.5)}
.drift+.manifesto{padding-top:clamp(2rem,5vw,3.5rem)}
.manifesto h2 em{font-style:normal;color:var(--gold)}
.pull{border-color:var(--gold)}
/* a soft light that follows the pointer across the dark chapters */
.glow::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .5s var(--e-out);
  background:radial-gradient(28rem 28rem at var(--mx,50%) var(--my,50%),rgba(199,154,62,.12),transparent 70%)}
@media (hover:hover) and (pointer:fine){.glow:hover::before{opacity:1}}
.glow>*{position:relative}

/* ---- the building, lit at night ---- */
.bldg .roofsign{background:var(--gold);color:var(--night)}
.bldg .roofsign .mark{background:var(--night);color:var(--gold)}
.bldg .parapet,.bldg .facade,.bldg .ground,.bldg .base{background:var(--bg-2);border-color:rgba(237,235,224,.55)}
.slot{background:rgba(237,235,224,.03);box-shadow:inset 0 -6px 0 rgba(237,235,224,.05);border-radius:4px;
  transition:border-color .5s var(--e-out),background .8s var(--e-out),box-shadow .8s var(--e-out);
  transition-delay:calc(var(--k,0) * 110ms)}
.bldg.lit .slot{background:linear-gradient(180deg,rgba(226,194,122,.2),rgba(199,154,62,.08));border-color:var(--gold);
  box-shadow:inset 0 -6px 0 rgba(199,154,62,.35),0 0 28px -10px rgba(199,154,62,.6)}
.slot:hover{transition-delay:0s;background:rgba(226,194,122,.26)}
.btn-slot{border-radius:999px;color:var(--gold-soft);border-color:var(--line)}
.slot:hover .btn-slot{background:var(--gold);color:var(--night);border-color:var(--gold)}
.bldg .door{background:var(--gold);color:var(--night)}
.bldg .door:hover{background:var(--gold-soft)}
.floor::before{color:var(--gold-soft)}

/* ---- the group card ---- */
.fbcard{border-radius:16px;background:var(--bg-2);border-color:var(--line-soft)}
.tilt{transition:transform .3s var(--e-ui),opacity 1s var(--e-out)}

/* ---- guides: one lead, the rest as a list ---- */
.gshelf{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:1.2rem}
.glead{display:flex;flex-direction:column;gap:.9rem;padding:clamp(1.6rem,3.5vw,2.6rem);min-height:18rem;border-radius:16px;
  text-decoration:none;color:var(--cream);border:1px solid var(--line);
  background:radial-gradient(30rem 16rem at 100% 100%,rgba(199,154,62,.2),transparent 70%),var(--surface)}
.glead .gt{font-family:var(--disp);font-weight:900;font-size:var(--t32);line-height:var(--lh-disp)}
.glead .gx{color:var(--dim);flex:1}
.glead .go{color:var(--gold);font-weight:600}
.gmin{font-size:var(--t15);color:var(--gold-soft)}
.glist{display:flex;flex-direction:column;border-radius:16px;border:1px solid var(--line-soft);overflow:hidden}
.grow{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1.3rem 1.5rem;text-decoration:none;
  color:var(--cream);border-bottom:1px solid var(--line-soft);transition:background .2s var(--e-ui)}
.grow .gt{font-weight:600;font-size:var(--t17);line-height:1.4}
.grow .gmin{white-space:nowrap}
.grow:hover{background:var(--bg-2)}
.gall{padding:1rem 1.5rem;color:var(--gold);font-weight:600;text-decoration:none;margin-top:auto}
@media (max-width:52rem){.gshelf{grid-template-columns:1fr}}

/* ---- news on the dark chapter ---- */
.newsitem{position:relative;transition:background .2s var(--e-ui),padding .25s var(--e-ui),opacity 1s var(--e-out),transform 1s var(--e-out)}
.newsitem::before{content:"←";position:absolute;inset-inline-end:1.5rem;top:50%;transform:translate(var(--nx,10px),-50%);
  opacity:0;color:var(--gold);transition:opacity .2s var(--e-ui),transform .2s var(--e-ui)}
@media (hover:hover) and (pointer:fine){
  .newsitem:hover{padding-inline-start:2rem}
  .newsitem:hover::before{opacity:1;transform:translate(0,-50%)}
}
.ntitle{color:var(--cream)}
/* the arrow sits at inline-end, so in RTL it slides in from the left */
.newsitem:dir(rtl)::before{--nx:-10px}

/* ---- newsletter ---- */
.nlbox{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:2rem;align-items:center;
  padding:clamp(1.6rem,4vw,3rem);border-radius:16px;background:var(--bg-2);border:1px solid var(--line-soft)}
.nlbox .sec-head{margin:0}
.formwrap{border-radius:16px;background:var(--surface);border-color:var(--line-soft)}
input,select,textarea{border-radius:10px;background:var(--night-2);color:var(--ink);border-color:var(--line-2)}
input::placeholder{color:#8E998B}
@media (max-width:52rem){.nlbox{grid-template-columns:1fr}}

/* ---- the closing night ---- */
.night-close{position:relative;overflow:hidden;color:var(--cream);
  background:radial-gradient(50rem 24rem at 50% 110%,rgba(199,154,62,.28),transparent 70%),var(--night-2)}
.night-close .wrap{position:relative;z-index:2}
.city-echo{height:100%;opacity:.8}
.city-echo::after{display:none}

/* ---- scroll-driven motion, where the browser has it ---- */
@media (prefers-reduced-motion:no-preference){
  .city path{stroke-dasharray:9000;stroke-dashoffset:9000;animation:draw 3.4s var(--e-out) .15s forwards}
  @keyframes draw{to{stroke-dashoffset:0}}
  @supports (animation-timeline: scroll()){
    .progress{display:block;animation:grow linear both;animation-timeline:scroll(root)}
    @keyframes grow{to{transform:scaleX(1)}}
    .night-in{animation:lift linear both;animation-timeline:--hero;animation-range:exit 0% exit 80%}
    @keyframes lift{to{transform:translateY(90px);opacity:0}}
    .night .city svg{animation:sink linear both;animation-timeline:--hero;animation-range:exit 0% exit 100%}
    .night .city-near{--d:70px}.night .city-mid{--d:40px}.night .city-far{--d:16px}
    @keyframes sink{to{transform:translateY(var(--d))}}
    .drift span{animation:driftx linear both;animation-timeline:view()}
    @keyframes driftx{from{transform:translateX(-18%)}to{transform:translateX(18%)}}
  }
}
/* the pause button, and reduced motion, both stop the ambient loops */
.is-calm .night h1 em{animation:none}
@media (prefers-reduced-motion:reduce){
  .night h1 em{animation:none}
  .mc-bar i{transform:none}.mc-ok{opacity:1}
  .calm{display:none}
}

/* home v2 fixes after the full-page review */
.night-in{width:100%}
.doors{padding-bottom:0}
.floor::before{display:block;position:static;grid-column:1/-1;writing-mode:horizontal-tb;transform:none;
  font-size:var(--t15);letter-spacing:.04em;margin-bottom:-.4rem}
.fbcard .facts{border:0;background:none;margin:0}
#nlForm{display:grid;gap:1rem}
#nlForm button[type=submit]{justify-self:start}
@media (max-width:46rem){
  .city{height:44%}
  .night-in{padding-top:8rem}
}

/* ---- night theme: fixes for components that assumed paper ---------- */
.skip{color:var(--night)}
.mark{background:var(--gold);color:var(--night)}
.hero{background:radial-gradient(40rem 22rem at 85% 0%,rgba(15,92,66,.5),transparent 70%)}
.skyline g{stroke:var(--gold);stroke-opacity:.35}
.cell:hover .cat,.cell:hover .price,.cell:hover .state,
.cell:focus-visible .cat,.cell:focus-visible .price,.cell:focus-visible .state{color:var(--night)}
.cell{border-radius:0}
.grid9,.why,.faq,.formwrap,.aside-box,.calc-cell,.facts,.shots figure,.featured,.note,.founder-offer,.ad{border-radius:16px}
.grid9{overflow:hidden}
.grid9.grid-flow{overflow:visible}
.grid9.grid-flow > *{border-radius:16px}
.featured .tag,.cell .star,.cell .founder,.chip{background:var(--gold);color:var(--night);border-color:var(--gold)}
.st-pending{color:var(--gold-soft)}
.btn-ghost{border-radius:999px;color:var(--cream)}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold-soft)}
.btn-slot{border-radius:999px}
.bldg .door{border-radius:999px 999px 0 0}
.calc-cell.result b{color:var(--gold-soft)}
.seal{border-radius:16px}
.slot,.mock-listing,.mock-check,.mock-mail,.mock-guides span,.fbcard,.glead,.glist,.nlbox,.story-stage,.path{border-radius:16px}
.slot{border-radius:10px}
.fbcard .cover{background:linear-gradient(165deg,#0F3527,#071811)}
.strip{border-block-color:var(--line-soft)}
body{background:var(--bg)}
/* physical borders on purpose: a logical start border mirrors the tick into a chevron in RTL */
.incl li::before{border-inline-start:0;border-left:2px solid var(--gold);border-bottom:2px solid var(--gold);transform:rotate(-45deg);top:.5em}
/* a grid of guides plus one ad: the ad takes the leftover columns instead of leaving a hole */
.grid9 > .ad-sq:last-child:nth-child(3n+2){grid-column:span 2}
@media (max-width:52rem){.grid9 > .ad-sq:last-child:nth-child(3n+2){grid-column:auto}
  .grid9 > .ad-sq:last-child:nth-child(2n+1){grid-column:span 2}}
/* the 52rem span rule outranks a plain :last-child reset, so the single
   column got a second, 54px-wide track and every card was crushed (review 1 Oct) */
@media (max-width:34rem){.grid9 > .ad-sq:last-child{grid-column:auto!important}}

/* home, 27 Sep 2026: brokers first. The paid path lost its equal column;
   the prime ad unit sits beside the broker card instead, and the building
   moved to /sponsors. Placements follow price: the most expensive category
   gets the most visible spot (build.mjs adPrime). */
.doors{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.beside{display:flex;flex-direction:column;gap:.9rem;min-width:0}
.beside .ad{flex:1;display:flex;flex-direction:column}
.beside-note{color:var(--dim);font-size:var(--t15);line-height:1.55;padding-inline:.2rem}
.beside-note a{color:var(--gold-soft);font-weight:600;text-decoration:none;white-space:nowrap}
.beside-note a:hover{text-decoration:underline;text-underline-offset:3px}
.ad-prime{background:radial-gradient(30rem 16rem at 100% 0%,rgba(199,154,62,.16),transparent 70%),var(--bg-2)}
.ad-prime a{display:flex;flex-direction:column;gap:.7rem;flex:1;min-height:0;justify-content:center;
  padding:.9rem clamp(1.3rem,3vw,2rem) clamp(1.6rem,3vw,2.2rem)}
.ad-prime .q{font-family:var(--disp);font-weight:900;font-size:var(--t32);line-height:var(--lh-disp)}
.ad-prime .pitch{font-size:var(--t15);line-height:1.55}
.ad-prime .price{font-weight:600;font-size:var(--t20);color:var(--gold-soft)}
.ad-prime .logo{margin-bottom:0}
@media (max-width:52rem){.ad-prime a{padding:.8rem 1.2rem 1.4rem}}
@media (max-width:52rem){.doors{grid-template-columns:1fr}}

/* open places on the board (27 Sep 2026): an invitation, visibly not a listing */
.cell-free{outline-style:dashed!important;outline-color:var(--line-gold)!important;background:var(--gold-wash)}
.cell-free .noshot{background:transparent;color:var(--gold);opacity:.5;border-bottom:1px dashed rgba(199,154,62,.35)}
.cell-free .cat{color:var(--gold-soft)}
.cell-free .state span:first-child{color:var(--dim);font-size:var(--t15)}

/* one-line bar on a phone (28 Sep 2026): the mark alone stands for the brand,
   whose name stays in the link for screen readers; the four links keep a
   24px-plus touch height. Replaces the two-row wrap above. */
@media (max-width:46rem){
  .bar{flex-wrap:nowrap;padding-block:.8rem;gap:.8rem}
  .brand .bn{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .bar nav{flex-wrap:nowrap;width:auto;gap:1.1rem;font-size:var(--t15);justify-content:flex-end}
  .bar nav a{padding-block:.45rem}
}
@media (max-width:23rem){.bar nav{gap:.8rem;font-size:var(--t15)}}

/* App Check (28 Sep 2026): Google allows hiding the floating reCAPTCHA badge
   when the attribution is shown in the flow instead; it sits in the footer.
   The badge would otherwise cover the corner the motion-stop button uses. */
.grecaptcha-badge{visibility:hidden}
footer .rc{flex-basis:100%;font-size:var(--t13);color:var(--cream-dim)}
footer .rc a{display:inline;padding:0;text-decoration:underline;text-underline-offset:2px}

/* ---- the film (28 Sep 2026) ------------------------------------------------
   Static by default (no JS, reduced motion, motion stopped): the last frame
   with the four lines as a short text. film.js adds .live, which turns the
   section into a tall scroll track with a sticky stage and one line at a time. */
.film{position:relative;background:var(--night-2,#071811)}
.film-stick{position:relative;overflow:hidden;aspect-ratio:16/9;max-height:100svh;width:100%}
.film-poster,.film-poster img,.film-cv{position:absolute;inset:0;width:100%;height:100%}
.film-poster img{object-fit:cover}
.film-cv{display:none}
.film-caps{position:absolute;inset-inline:0;top:clamp(1.5rem,6vw,4rem);padding-inline:1rem;
  display:grid;gap:.35rem;justify-items:center;text-align:center;
  font-family:var(--disp);font-weight:700;color:var(--cream);text-wrap:balance;
  text-shadow:0 2px 18px rgba(7,24,17,.9)}
.film-cap{margin:0;font-size:clamp(1rem,2.2vw,1.35rem);color:var(--dim)}
.film-cap:last-child{font-size:clamp(1.5rem,4vw,2.8rem);font-weight:900;color:var(--cream)}
.film-cap em{font-style:normal;color:var(--gold-soft)}

.film.live{height:340vh}
.film.live .film-stick{position:sticky;top:0;height:100svh;max-height:none;aspect-ratio:auto}
.film.live .film-cv{display:block}
.film.live .film-caps{top:auto;bottom:clamp(1.2rem,4.5vh,2.8rem);display:block}
.film.live .film-cap{position:absolute;inset-inline:1rem;bottom:0;margin:0;
  font-size:clamp(1.6rem,4.4vw,3.2rem);font-weight:900;color:var(--cream);
  opacity:0;transform:translateY(14px);transition:opacity .45s var(--e-out),transform .45s var(--e-out)}
.film.live .film-cap.on{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.film.live .film-cap{transition:none}}
@media (max-width:46rem){
  .film-stick{aspect-ratio:9/16;max-height:88svh}
  .film.live{height:280vh}
  .film.live .film-caps{bottom:clamp(1.4rem,5vh,2.6rem)}
}

/* film polish (28 Sep 2026, second pass)
   - no spoiler: while live, the poster (the film's last picture) stays hidden and
     the canvas fades in on its first drawn frame
   - soft edges: a short fade in from the page above, and bottom padding the stage
     is released into, graded to the manifesto chapter's colour (film.js ends the
     film before it)
   - a thin gold line on the inline-end edge fills as the film plays, so a long
     pinned section never reads as a stuck page */
.film-bar{display:none}
.film.live{padding-bottom:22vh}
.film.live .film-poster{visibility:hidden}
.film.live .film-cv{opacity:0;transition:opacity .6s var(--e-out)}
.film.live.drawn .film-cv{opacity:1}
.film.live::before{content:"";position:absolute;inset-inline:0;top:0;height:18vh;z-index:1;pointer-events:none;
  background:linear-gradient(var(--night),rgba(10,29,21,0))}
.film.live::after{content:"";position:absolute;inset-inline:0;bottom:0;height:22vh;pointer-events:none;
  background:linear-gradient(var(--night-2),var(--chapter))}
.film.live .film-bar{display:block;position:absolute;inset-inline-end:clamp(.9rem,2.6vw,2rem);top:50%;
  width:2px;height:min(30vh,15rem);transform:translateY(-50%);background:rgba(237,235,224,.12);border-radius:2px}
.film.live .film-bar i{position:absolute;inset:0;background:var(--gold);border-radius:2px;
  transform-origin:top;transform:scaleY(var(--p,0))}
@media (max-width:46rem){.film.live{padding-bottom:16vh}.film.live .film-bar{height:22vh}}

/* the calculation on a phone (28 Sep 2026): in a column, the cells' 12rem
   flex-basis became their height and left each card mostly empty */
@media (max-width:40rem){.calc-cell{flex:none}}

/* ---- "more on the site": the home teaser for guides and news (28 Sep 2026) ---- */
.more-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.2rem}
.more-col{background:var(--surface);border:1px solid var(--line-soft);border-radius:16px;
  padding:clamp(1.3rem,3vw,2rem);display:flex;flex-direction:column}
.more-col h3{margin:0 0 .6rem;font-weight:600;font-size:var(--t20)}
.more-col h3 a{color:var(--gold-soft);text-decoration:none}
.more-col ul{list-style:none;margin:0;padding:0;flex:1}
.more-col li+li{border-top:1px solid var(--line-soft)}
.more-col li a{display:grid;gap:.25rem;padding:.95rem 0;text-decoration:none;color:var(--ink);
  transition:color .2s var(--e-out)}
.more-col li a:hover .mt{color:var(--gold-soft)}
.more-col .mt{font-weight:600;line-height:1.5;transition:color .2s var(--e-out)}
.more-col .mm{font-size:var(--t15);color:var(--dim)}
.more-all{margin-top:.8rem;align-self:flex-start;color:var(--gold-soft);font-weight:600;text-decoration:none}
.more-all:hover{text-decoration:underline;text-underline-offset:3px}
@media (max-width:46rem){.more-grid{grid-template-columns:1fr}}

/* ---- the bar, third version (28 Sep 2026) -----------------------------------
   Desktop: links, then one gold "join" button. Phones: brand, the button, and a
   menu (<details>) that drops a card with the links. Replaces the one-line
   phone bar above, so the brand name is visible again on phones. */
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.bar{position:relative}
.bar .nav-main{margin-inline-start:auto}
.bar nav a[aria-current="page"]{color:var(--gold-soft);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px}
.nav-cta{min-height:40px;padding:.5rem 1.2rem;font-size:var(--t15);white-space:nowrap}
.nav-menu{display:none}
/* six links since 30 Sep 2026: the phone bar takes over up to 64rem */
@media (max-width:64rem){
  .bar{flex-wrap:nowrap;gap:.7rem;padding-block:.75rem}
  .bar .nav-main{display:none}
  .brand .bn{position:static;width:auto;height:auto;overflow:visible;clip-path:none}
  .nav-cta{margin-inline-start:auto;min-height:38px;padding:.45rem 1rem;font-size:var(--t15)}
  .nav-menu{display:block}
  .nav-menu summary{list-style:none;cursor:pointer;display:grid;place-items:center;width:44px;height:44px;
    border:1px solid var(--line);border-radius:999px;color:var(--cream)}
  .nav-menu summary::-webkit-details-marker{display:none}
  .burger{display:grid;gap:4px;width:18px}
  .burger i{display:block;height:2px;border-radius:2px;background:currentColor;transition:transform .25s var(--e-out),opacity .2s}
  .nav-menu[open] .burger i:nth-child(1){transform:translateY(6px) rotate(45deg)}
  .nav-menu[open] .burger i:nth-child(2){opacity:0}
  .nav-menu[open] .burger i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
  .nav-menu nav{position:absolute;top:calc(100% + .4rem);inset-inline:.2rem;z-index:20;
    display:grid;gap:0;justify-content:stretch;text-align:start;padding:.5rem 1.1rem;font-size:var(--t17);
    background:var(--surface);border:1px solid var(--line);border-radius:16px;
    box-shadow:0 18px 50px rgba(0,0,0,.45);animation:menu-in .22s var(--e-out)}
  .nav-menu nav a{display:block;padding:.95rem .2rem;color:var(--ink);white-space:normal}
  .nav-menu nav a+a{border-top:1px solid var(--line-soft)}
  @keyframes menu-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
}
@media (max-width:64rem) and (prefers-reduced-motion:reduce){.nav-menu nav{animation:none}.burger i{transition:none}}
@media (max-width:23.5rem){.brand .bn{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}}

/* /join: three steps under the headline (28 Sep 2026) */
.steps3{list-style:none;margin:1.8rem 0 0;padding:0;counter-reset:s;display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;max-width:62rem}
.steps3 li{counter-increment:s;position:relative;padding-inline-start:2.8rem;display:grid;gap:.3rem}
.steps3 li::before{content:counter(s);position:absolute;inset-inline-start:0;top:-.1rem;width:2rem;height:2rem;
  display:grid;place-items:center;border-radius:999px;border:1px solid var(--gold);color:var(--gold-soft);
  font-family:var(--disp);font-weight:900}
.steps3 b{color:var(--cream);font-weight:600}
.steps3 span{color:var(--dim);font-size:var(--t15);line-height:1.6}
.steps3 em{font-style:normal;color:var(--gold-soft)}
@media (max-width:46rem){.steps3{grid-template-columns:1fr;gap:.9rem}}

/* the building on a phone (28 Sep 2026): each floor window one compact row,
   name and state on one side, the button on the other. The pitch line was the
   same sentence nine times. */
@media (max-width:46rem){
  .slot{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:.15rem .8rem;padding:.85rem 1rem}
  .slot .q{grid-column:1;grid-row:1;font-size:var(--t17);margin:0}
  .slot .pitch{display:none}
  .slot::after{position:static;grid-column:1;grid-row:2;justify-self:start}
  .slot .btn-slot{grid-column:2;grid-row:1 / span 2;margin:0;padding:.5rem .95rem;font-size:var(--t15)}
}

/* /join: copy and form side by side in the first screen on a desktop */
.join-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(2rem,5vw,4.5rem);align-items:start}
.join-copy .steps3{grid-template-columns:1fr;gap:1.1rem}
.join-form{position:relative;z-index:1}
@media (max-width:60rem){.join-grid{grid-template-columns:1fr}}

/* category pages: the short request form in the first screen (28 Sep 2026) */
.formwrap.quick{position:relative;z-index:1;display:block}
.formwrap.quick form{display:grid;gap:.85rem}
.quick-h{margin:0 0 .2rem;font-weight:600;font-size:var(--t20);color:var(--cream)}
.formwrap.quick .hint{margin:0;font-size:var(--t15)}
.join-copy .tag-price{margin:1.4rem 0 0;font-size:var(--t24);color:var(--gold-soft)}
.join-copy .founder-offer{margin-top:1.2rem}

/* the badge count, wherever it appears */
.founders-left{color:var(--gold-soft);font-weight:600}

/* /join, after registering: the next step */
.next-step{margin-top:1.6rem;padding-top:1.4rem;border-top:1px solid var(--line-soft)}
.next-step h2{margin:0 0 .9rem;font-family:var(--disp);font-weight:900;font-size:var(--t32);line-height:var(--lh-disp)}
.next-step h2 em,.next-step li em{font-style:normal;color:var(--gold-soft)}
.next-step .cta-row{margin-top:1.3rem}

/* home: "already in" */
.inside{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem 2rem;
  margin-block:0 1rem;padding:1.2rem clamp(1.2rem,3vw,2rem);border:1px solid var(--line);border-radius:16px;
  background:linear-gradient(90deg,rgba(199,154,62,.10),rgba(199,154,62,.02))}
.inside p{margin:0;font-size:var(--t17)}
.inside b{font-weight:600;font-size:var(--t24);color:var(--gold-soft)}
@media (max-width:46rem){.inside{flex-direction:column;align-items:stretch;text-align:center}}
.ticks em{font-style:normal;color:var(--gold-soft)}

/* ---- review 29 Sep ---- */
/* `hidden` must win over any display rule. .inside{display:flex} beat it, so
   the home page showed "already in" with blank numbers to every visitor, and
   the board showed a filter bar over an empty board. */
[hidden]{display:none!important}
/* in-page jumps land below the sticky header, not under it */
[id]{scroll-margin-top:6rem}

/* ---- break-even box and table (growth plan P4, 29 Sep) ---- */
.roi h2{font-family:var(--disp);font-weight:900;font-size:var(--t32);line-height:var(--lh-disp);margin-bottom:.8rem}
.roi p{margin:.4rem 0}
.roi .roi-need{font-weight:600;font-size:var(--t20);color:var(--gold-soft)}
.roi-table{width:100%;border-collapse:collapse}
.roi-table caption{text-align:start;font-weight:600;font-size:var(--t20);margin-bottom:.6rem}
.roi-table th,.roi-table td{padding:.7rem .6rem;border-bottom:1px solid var(--line-soft);text-align:start;vertical-align:top}
.roi-table th{color:var(--dim);font-weight:600;font-size:var(--t15)}
.roi-table td:nth-child(2){white-space:nowrap}

/* live sponsors (app.js, 30 Sep): a category page waits for the sponsor check,
   at most 0.5s (1.2s until 1 Oct 2026: too long a blank on the page that
   sells, over mobile data), so a sold slot rarely flashes as free. The reveal
   is a CSS animation so a failed script can never leave the page hidden; it
   is exempt from reduced motion because it moves nothing. */
body[data-cat]:not(.sp-ready):not([data-sponsor]) main{visibility:hidden;animation:sp-show 0s .5s forwards}
@keyframes sp-show{to{visibility:visible}}
@media (prefers-reduced-motion:reduce){body[data-cat]:not(.sp-ready):not([data-sponsor]) main{animation:sp-show 0s .5s forwards!important}}

/* ---- listings, several levels up (30 Sep 2026, docs/SITE-PLAN.md) ------ */
.lst-head{margin-bottom:1.4rem}
.lst-title{font-family:var(--disp);font-weight:900;font-size:clamp(var(--t32),4.5vw,var(--t44));line-height:var(--lh-disp)}
.lst-price{margin-top:.6rem;font-size:var(--t20)}
.lst-price b{font-weight:600;font-size:var(--t24);color:var(--gold-soft)}
.ribbon-inline{display:inline-block;vertical-align:middle;font:600 var(--t15) var(--ui);background:var(--gold);color:var(--night);padding:.2rem .7rem;border-radius:999px;margin-inline-start:.5rem}
.gallery{margin:1.2rem 0 1.6rem}
.gal-main{display:block;width:100%;padding:0;border:1px solid var(--line-soft);background:var(--surface);border-radius:16px;overflow:hidden;cursor:zoom-in}
.gal-main img{width:100%;height:auto;max-height:70vh;object-fit:cover;display:block}
.gal-thumbs{display:flex;gap:.5rem;margin-top:.6rem;overflow-x:auto;padding-bottom:.3rem;scrollbar-width:thin}
.gal-thumb{flex:none;width:84px;height:64px;padding:0;border:2px solid transparent;border-radius:10px;overflow:hidden;background:var(--surface);cursor:pointer;opacity:.75}
.gal-thumb img{width:100%;height:100%;object-fit:cover}
.gal-thumb.on,.gal-thumb:hover{border-color:var(--gold);opacity:1}
.gal-empty{display:grid;place-items:center;height:14rem;border:1px solid var(--line-soft);border-radius:16px;background:var(--surface)}
.gal-empty .noshot{font:900 4rem var(--disp);color:var(--gold);opacity:.5}
.lightbox{border:0;background:transparent;padding:0;max-width:100vw;max-height:100vh;width:100vw;height:100vh;display:none;place-items:center}
.lightbox[open]{display:grid}
.lightbox::backdrop{background:rgba(3,10,7,.92)}
.lightbox img{max-width:96vw;max-height:88vh;object-fit:contain;border-radius:8px}
.lightbox button{position:fixed;background:rgba(17,48,31,.85);color:var(--cream);border:1px solid var(--line);width:44px;height:44px;border-radius:50%;font-size:1.6rem;line-height:1;cursor:pointer}
.lightbox .lb-close{top:1rem;inset-inline-start:1rem}
.lightbox .lb-prev{top:50%;inset-inline-end:1rem;transform:translateY(-50%)}
.lightbox .lb-next{top:50%;inset-inline-start:1rem;transform:translateY(-50%)}
.lightbox .lb-count{position:fixed;bottom:1rem;inset-inline:0;text-align:center;color:var(--cream-dim);font-size:var(--t15)}
.fgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(9rem,1fr));gap:.6rem;margin:0 0 1.4rem}
.fact{background:var(--surface);border:1px solid var(--line-soft);border-radius:10px;padding:.7rem .9rem;display:flex;flex-direction:column;gap:.15rem}
.fact span{font-size:var(--t15);color:var(--dim)}
.fact b{font-weight:600;font-variant-numeric:tabular-nums}
.lst-text{white-space:pre-wrap;line-height:1.75;background:var(--surface);border:1px solid var(--line-soft);border-radius:16px;padding:clamp(1.2rem,3vw,2rem);margin-bottom:1.4rem}
.coop-box{display:flex;flex-direction:column;gap:.25rem;border:1px solid var(--line-gold);border-radius:16px;padding:.9rem 1.1rem;margin-bottom:1.4rem;background:rgba(199,154,62,.08)}
.coop-box b{color:var(--gold-soft)}
.coop-box span{font-size:var(--t15);color:var(--dim)}
.lst-actions{margin-bottom:1.6rem}
.broker-card{display:flex;flex-wrap:wrap;align-items:center;gap:1rem;background:var(--surface);border:1px solid var(--line-soft);border-radius:16px;padding:1.1rem 1.3rem;margin-bottom:1.4rem}
.bc-who{display:flex;align-items:center;gap:.9rem;flex:1;min-width:14rem}
.bc-avatar{width:52px;height:52px;border-radius:50%;background:var(--chapter);color:var(--gold-soft);display:grid;place-items:center;font:700 1.3rem var(--disp);overflow:hidden;flex:none}
.bc-avatar img{width:100%;height:100%;object-fit:cover}
.bc-bio{flex-basis:100%;color:var(--dim);font-size:var(--t15);margin:0}
.share-row{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin-bottom:1.6rem}
.share-row .btn{min-height:36px;padding:.4rem 1rem;font-size:var(--t15)}
.similar{margin-top:2.4rem}
/* board cards with facts and tags */
.cell .facts-line{font-size:var(--t15);color:var(--dim);margin-top:.25rem}
.cell .tags{display:flex;gap:.35rem;flex-wrap:wrap;margin-top:.5rem}
.cell .tag{font-size:var(--t15);padding:.15rem .55rem;border-radius:999px;border:1px solid var(--line);color:var(--gold-soft)}
.cell .tag.coop{border-color:var(--gold);background:rgba(199,154,62,.12)}
.cell .ribbon{position:absolute;top:.6rem;inset-inline-start:.7rem;z-index:2;background:var(--gold);color:var(--night);font:600 var(--t15) var(--ui);padding:.2rem .6rem;border-radius:999px}
.cell:hover .tag,.cell:hover .facts-line{color:var(--cream)}
/* board filters, always shown once there is a board */
.filterbar{display:grid;grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));gap:.7rem 1rem;align-items:end;margin:0 0 1.4rem}
.filterbar label{font-size:var(--t15);color:var(--dim)}
.filterbar .chk{display:flex;align-items:center;gap:.5rem;min-height:2.6rem}
.filterbar .chk input{width:auto}
/* my listings: numbers and actions */
.mine-row .nums{display:flex;gap:1rem;font-size:var(--t15);color:var(--dim);margin-top:.3rem}
.mine-row .nums b{color:var(--ink);font-weight:600}
/* the composer, in steps */
.composer fieldset{border:1px solid var(--line-soft);border-radius:16px;padding:1rem 1.2rem 1.2rem;margin:0 0 1.2rem}
.composer legend{font-weight:600;padding:0 .5rem;color:var(--gold-soft)}
.composer .row3{display:grid;grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));gap:.8rem 1rem}
.composer .chks{display:flex;flex-wrap:wrap;gap:1.2rem;margin-top:.6rem}
.composer .chks label{display:flex;align-items:center;gap:.5rem;font-weight:400}
.composer .chks input{width:auto}
#thumbs .th{position:relative}
#thumbs .th b{position:absolute;top:2px;inset-inline-start:2px;font:600 var(--t15) var(--ui);background:var(--gold);color:var(--night);padding:0 .35rem;border-radius:4px}
.edit-note{background:var(--gold-wash);border:1px solid var(--line-gold);border-radius:10px;padding:.7rem 1rem;margin-bottom:1rem;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}
/* the print flyer: the listing alone, on paper */
@media print{
  header.top,footer,.share-row,#groupPost,#listingAd,.similar,.lightbox,.gal-thumbs,.lst-actions .btn:not(:first-child),.skip,.nav-menu{display:none!important}
  body{background:#fff;color:#111}
  .lst-title,.lst-price b{color:#111}
  .gal-main{border:0;border-radius:0;cursor:default}
  .gal-main img{max-height:60vh}
  .fact,.lst-text,.broker-card,.coop-box{border-color:#ccc;background:#fff;color:#111}
  .fact span,.lst-text,.coop-box span,.bc-bio{color:#333}
  main::after{content:"shitufnadlan.com · לוח הנכסים של קהילת המתווכים";display:block;margin-top:2rem;font-size:var(--t15);color:#666}
}

/* ---- brokers: the directory and the broker page (30 Sep 2026) ----------- */
.bgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(16rem,1fr));gap:.9rem}
.bcard{display:flex;gap:.9rem;align-items:flex-start;background:var(--surface);border:1px solid var(--line-soft);border-radius:16px;padding:1rem 1.1rem;color:inherit;text-decoration:none;transition:border-color .3s var(--e-out),transform .3s var(--e-out)}
.bcard:hover{border-color:var(--gold);transform:translateY(-2px);text-decoration:none}
.bcard-avatar{width:56px;height:56px;border-radius:50%;background:var(--chapter);color:var(--gold-soft);display:grid;place-items:center;font:700 1.4rem var(--disp);overflow:hidden;flex:none}
.bcard-avatar img{width:100%;height:100%;object-fit:cover}
.bcard-body{display:flex;flex-direction:column;gap:.15rem;min-width:0}
.bcard-body b{font-size:var(--t17)}
.bcard-line{font-size:var(--t15);color:var(--dim)}
.bcard .tags{display:flex;gap:.3rem;flex-wrap:wrap;margin-top:.3rem}
.bcard .tag,.bpage-head .tag,.req-list .tag{font-size:var(--t15);padding:.15rem .55rem;border-radius:999px;border:1px solid var(--line);color:var(--gold-soft)}
.bpage-head{display:flex;gap:1.4rem;align-items:flex-start;flex-wrap:wrap}
.bpage-avatar{width:112px;height:112px;border-radius:50%;background:var(--chapter);color:var(--gold-soft);display:grid;place-items:center;font:700 2.6rem var(--disp);overflow:hidden;flex:none;border:2px solid var(--gold)}
.bpage-avatar img{width:100%;height:100%;object-fit:cover}
.bpage-name{font-family:var(--disp);font-weight:900;font-size:clamp(var(--t32),4.5vw,var(--t44));line-height:var(--lh-disp)}
.bpage-line{margin-top:.4rem;color:var(--dim)}
.req-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(16rem,1fr));gap:.8rem}
.req{background:var(--surface);border:1px solid var(--line-soft);border-radius:16px;padding:.9rem 1.1rem;display:flex;flex-direction:column;gap:.2rem}
.req b{font-size:var(--t17)}
.req span{font-size:var(--t15);color:var(--dim)}
.req p{margin-top:.4rem;font-size:var(--t15);white-space:pre-wrap}
.req .who{margin-top:.6rem;font-size:var(--t15);color:var(--dim);display:flex;gap:.6rem;flex-wrap:wrap;align-items:center}
/* the profile form's specialities */
.spec-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(10rem,1fr));gap:.4rem .8rem;margin-top:.4rem}
.spec-grid label{display:flex;align-items:center;gap:.5rem;font-weight:400;font-size:var(--t15)}
.spec-grid input{width:auto}
.avatar-pick{display:flex;align-items:center;gap:1rem}
.avatar-pick .bpage-avatar{width:72px;height:72px;font-size:1.6rem}

/* ---- tools (30 Sep 2026) --------------------------------------------------- */
.tools-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(20rem,1fr));gap:1.2rem}
.tool{background:var(--surface);border:1px solid var(--line-soft);border-radius:16px;padding:clamp(1.2rem,3vw,1.8rem);display:flex;flex-direction:column;gap:.9rem}
.tool h2{font-weight:600;font-size:var(--t20)}
.tool p.lead{color:var(--dim);font-size:var(--t15);margin-top:-.4rem}
.tool form{display:flex;flex-direction:column;gap:.7rem}
.tool .row3{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem .8rem}
.tool-res{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding:.6rem 0;border-bottom:1px solid var(--line-soft)}
.tool-res span{color:var(--dim);font-size:var(--t15)}
.tool-res b{font-weight:600;font-size:var(--t20);color:var(--gold-soft);font-variant-numeric:tabular-nums}
.tool-res b small{font:400 var(--t15) var(--ui);color:var(--dim)}
.tool-res.ok b{color:var(--green-deep)}
.tool-res.warn b{color:var(--warn-ink)}
.tool-table{width:100%;border-collapse:collapse;font-size:var(--t15);margin-top:.5rem}
.tool-table th,.tool-table td{padding:.4rem .5rem;border-bottom:1px solid var(--line-soft);text-align:start}
.tool-table th{color:var(--dim);font-weight:600}
.tool .out{min-height:2rem}
.tool-nav{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.6rem}
.tool-nav a{font-size:var(--t15);padding:.45rem .9rem;border:1px solid var(--line);border-radius:999px;color:var(--gold-soft);text-decoration:none}
.tool-nav a:hover{border-color:var(--gold)}

/* ---- requests (30 Sep 2026) ------------------------------------------------ */
#requestsList.req-list{margin-bottom:1rem}
.req .who .btn{margin-inline-start:auto}

/* ---- home tool links (30 Sep 2026) ----------------------------------------- */
.tool-links{display:grid;grid-template-columns:repeat(auto-fill,minmax(14rem,1fr));gap:.9rem}
.tool-link{display:flex;flex-direction:column;gap:.3rem;background:var(--surface);border:1px solid var(--line-soft);border-radius:16px;padding:1.1rem 1.2rem;color:inherit;text-decoration:none;transition:border-color .3s var(--e-out),transform .3s var(--e-out)}
.tool-link:hover{border-color:var(--gold);transform:translateY(-2px)}
.tool-link b{font-weight:600;font-size:var(--t17);color:var(--cream)}
.tool-link span{font-size:var(--t15);color:var(--dim)}
#homeRequests .req-list{grid-template-columns:repeat(auto-fill,minmax(18rem,1fr))}

/* =====================================================================
   R2-B components (2 Oct 2026, docs/IMPROVEMENT-PLAN.md): "the lit window".
   Every surface is a window with its light on or off; gold is the light and
   appears on at most one element per viewport. Three surfaces, one chip,
   one empty state, one footer. Scoped to new classes plus the selectors the
   page scripts already emit; no id or class they query was renamed.
   ===================================================================== */

/* ---- the three surfaces ---- */
.panel{background:var(--surface-1);border:1px solid var(--line-1);border-radius:var(--r-card)}
.raised{background:var(--surface-2);border:1px solid var(--line-2);border-radius:var(--r-card)}
.free{background:var(--gold-wash);border:1px dashed var(--line-gold);border-radius:var(--r-card)}
.formwrap,.tool,.bcard,.req,.aside-box,.calc-cell,.tool-link,.more-col,.fact,.lst-text,.broker-card{border-color:var(--line-2)}
.ad-house{border-style:dashed;border-color:var(--line-gold);border-inline-start-width:1px;background:var(--gold-wash)}
.ad[data-sold]{border-inline-start-color:var(--gold)}
.ad-prime a{min-height:0}

/* ---- buttons: three kinds ---- */
.cta-row .btn{font-size:var(--t17);padding:.75rem 1.7rem}
.btn-sm{min-height:36px;padding:.4rem 1rem;font-size:var(--t15)}
.btn-text,.more-all,.gall,.beside-note a{display:inline-flex;align-items:center;min-height:24px;padding:.2rem 0;
  background:none;border:0;color:var(--gold-soft);font-weight:600;text-decoration:underline;
  text-decoration-thickness:1px;text-underline-offset:.28em;text-decoration-color:var(--line-gold);
  transition:text-decoration-color .2s var(--e-ui)}
.btn-text:hover,.more-all:hover,.gall:hover,.beside-note a:hover{text-decoration-color:var(--gold-soft)}
.gall{padding:1rem 1.5rem}

/* ---- one chip ---- */
.chip,.cell .tag,.bcard .tag,.bpage-head .tag,.req-list .tag,.cell .founder,.cell .star,.cell .ribbon,
.featured .tag,.ribbon-inline,.ad .adtag,#thumbs .th b{
  display:inline-flex;align-items:center;gap:.3rem;min-height:24px;padding:.05rem .65rem;
  border-radius:var(--r-chip);border:1px solid var(--line-2);background:var(--surface-2);color:var(--ink-2);
  font:600 var(--t15)/1.4 var(--ui);letter-spacing:0;vertical-align:middle;white-space:nowrap}
.cell .tag.coop{border-color:var(--line-gold);background:var(--gold-wash);color:var(--gold-soft)}
.ad[data-sold] .adtag{color:var(--gold-soft);border-color:var(--line-gold)}
/* filled gold only for the two facts worth lighting: the pick of the week and a verified broker */
.cell .star,.featured .tag,.chip.verified{background:var(--gold);border-color:var(--gold);color:var(--night)}
.cell:hover .tag,.cell:focus-visible .tag{color:var(--ink)}

/* ---- the hero holds the page's controls ---- */
.hero .wrap{position:relative;z-index:1}
.hero-tools{margin-top:1.6rem;display:grid;gap:.6rem}
.hero-tools .src{margin:0}
.hero-tools .filterbar{margin:0;padding:1rem 1.1rem 1.1rem;border-radius:var(--r-card);
  background:var(--surface-1);border:1px solid var(--line-1)}
.hero-tools .tool-nav{margin:0}
.tool-nav a{display:inline-flex;align-items:center;min-height:36px;padding:.3rem 1rem;color:var(--ink-2);
  border-color:var(--line-2);transition:border-color .2s var(--e-ui),color .2s var(--e-ui)}
.tool-nav a:hover{border-color:var(--gold);color:var(--gold-soft)}
.tool-nav a[aria-current="true"]{border-color:var(--gold);color:var(--gold-soft)}

/* ---- one empty state: a lit window with nothing in it yet ---- */
.empty{display:grid;justify-items:center;text-align:center;gap:.9rem;max-width:40rem;margin-inline:auto;
  padding:clamp(2rem,5vw,3.5rem) clamp(1.2rem,4vw,2.5rem);
  background:var(--surface-1);border:1px solid var(--line-1);border-radius:var(--r-card)}
.empty .mark{width:48px;height:48px;background:transparent;color:var(--gold)}
.empty .mark svg{width:100%;height:100%}
.empty-h{font-family:var(--disp);font-weight:900;font-size:var(--t32);line-height:var(--lh-disp);color:var(--ink);max-width:18ch}
.empty .btn{margin-top:.3rem}
.empty-p{margin:0;color:var(--ink-3);font-size:var(--t15);max-width:30rem}

/* open places on a grid: one lit invitation, the rest ghost outlines */
.cell-free.cell-wide{grid-column:span 2}
.ghosts{display:grid;grid-template-rows:1fr 1fr;gap:1px;outline:0!important;border-radius:0}
.ghosts.ghosts-2{grid-column:span 2}
.cell-ghost{display:block;min-height:0;border:1px dashed var(--line-1);border-radius:var(--r-card);background:transparent;padding:0}
.cell-ghost::after{display:none}
@media (max-width:52rem){.cell-free.cell-wide,.ghosts.ghosts-2{grid-column:auto}}
@media (max-width:34rem){.ghosts{display:none}}

/* ---- footer: brand row, three link groups, one muted line ---- */
footer{padding-block:3.5rem 2rem;font-size:var(--t15);color:var(--ink-2)}
footer .wrap{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));gap:2rem 2.5rem;align-items:start}
.f-brand{display:flex;align-items:flex-start;gap:.8rem}
.f-brand .mark{width:40px;height:40px}
.f-brand b{display:block;color:var(--ink);font-size:var(--t17)}
.f-brand span{display:block;color:var(--ink-3);max-width:20rem;line-height:1.5}
footer .f-group{display:flex;flex-direction:column;gap:0}
footer .f-group b{color:var(--ink);font-size:var(--t15);margin-bottom:.35rem}
footer a{display:inline-flex;align-items:center;min-height:28px;padding-block:.15rem;color:var(--ink-2);text-decoration:none}
footer a:hover{color:var(--gold-soft);text-decoration:underline;text-underline-offset:3px}
.f-bottom{grid-column:1/-1;display:flex;flex-wrap:wrap;justify-content:space-between;gap:.4rem 1.5rem;
  margin-top:.5rem;padding-top:1.2rem;border-top:1px solid var(--line-1);font-size:var(--t13);color:var(--ink-3)}
.f-bottom .rc{flex-basis:auto;font-size:inherit;color:inherit}
.f-bottom a{display:inline;min-height:0;padding-block:.3rem;color:var(--ink-2);text-decoration:underline;text-underline-offset:2px}
@media (max-width:46rem){
  footer .wrap{grid-template-columns:1fr 1fr;gap:1.6rem 1.2rem}
  .f-brand{grid-column:1/-1}
}

/* ---- small pointer targets in running text ---- */
.src a,.hint a,.explain a,.legal p a,.incl a,.note a{padding-block:.22rem}

/* =====================================================================
   ACCOUNT PAGES (2 Oct 2026, docs/ACCOUNTS-PLAN.md): /me, /partner, /auth,
   and the Google button on every sign-in box. Same tokens and shapes as the
   rest of the site: panels 16px, pills for buttons, gold on one thing only
   (the figure that matters on the screen).
   ===================================================================== */
.hero.sub-hero.slim-hero{padding-block:clamp(1.8rem,4vw,2.8rem)}
.portal{padding-block:clamp(1.6rem,4vw,3rem) var(--sec)}
.portal-lead{margin:0 0 1rem}
.portal h2{font-family:var(--ui);font-weight:600;font-size:var(--t20);margin:1.8rem 0 .6rem}
.portal .formwrap h2{margin-top:0}

/* sign in with Google: our own button, Google's mark, no script of theirs */
.gsign{margin-bottom:1.2rem}
.btn-google{display:flex;align-items:center;justify-content:center;gap:.7rem;width:100%;min-height:46px;padding:.6rem 1.2rem;
  background:#fff;color:#1f1f1f;border:1px solid #dadce0;border-radius:999px;font:600 var(--t17) var(--ui);cursor:pointer;
  transition:background .2s var(--e-ui),box-shadow .2s var(--e-ui)}
.btn-google:hover{background:#f6f8fb;box-shadow:0 1px 3px rgba(0,0,0,.25)}
.btn-google:focus-visible{outline:3px solid var(--gold-soft);outline-offset:3px}
.btn-google svg{flex:none}
.gsign .or{display:flex;align-items:center;gap:.8rem;margin:1.1rem 0 0;color:var(--ink-3);font-size:var(--t15)}
.gsign .or::before,.gsign .or::after{content:"";flex:1;height:1px;background:var(--line-1)}
/* the dashboard's sign-in card carries the same block */
.signin .gsign{margin:1rem 0 0}

/* the head of an account page: who, and the one action */
.me-head{display:flex;justify-content:space-between;align-items:center;gap:1rem 1.5rem;flex-wrap:wrap}
.me-head .cta-row{margin:0}
.me-who{display:flex;align-items:center;gap:.9rem;min-width:0}
.me-who .bpage-avatar{width:56px;height:56px;font-size:1.4rem;border-width:1px}
.me-who .bpage-avatar img,.p-logo img{width:100%;height:100%;object-fit:cover;display:block}
.me-who b{display:block;font-size:var(--t20);font-weight:600}
.me-who .hint{display:block;margin:0}
.p-logo{display:grid;place-items:center;width:56px;height:56px;border-radius:12px;overflow:hidden;background:#fff;flex:none}
.p-logo img{object-fit:contain}

/* tabs: one row that scrolls on a phone, the current one underlined in gold */
.me-tabs{display:flex;gap:.3rem;margin-top:1.4rem;border-bottom:1px solid var(--line-1);overflow-x:auto;scrollbar-width:none}
.me-tabs::-webkit-scrollbar{display:none}
.me-tabs a{flex:none;display:inline-flex;align-items:center;min-height:46px;padding:.5rem 1rem;color:var(--ink-2);text-decoration:none;
  font-weight:600;font-size:var(--t15);border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap}
.me-tabs a:hover{color:var(--ink)}
.me-tabs a.on{color:var(--gold-soft);border-bottom-color:var(--gold)}
.me-pane{padding-top:1.4rem;min-height:14rem}
.me-pane:focus{outline:none}

/* figures */
.me-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(10rem,1fr));gap:.8rem}
.me-stats>div{background:var(--surface-2);border:1px solid var(--line-1);border-radius:16px;padding:1rem 1.1rem}
.me-stats>div:first-child{border-color:var(--line-gold)}
.me-stats b{display:block;font:700 var(--t30,1.9rem)/1.1 var(--ui);font-variant-numeric:tabular-nums;color:var(--ink)}
.me-stats>div:first-child b{color:var(--gold-soft)}
.me-stats span{display:block;margin-top:.3rem;font-size:var(--t15);color:var(--ink-3)}

/* what needs doing */
.me-todo{list-style:none;margin:0;padding:0;border:1px solid var(--line-1);border-radius:16px;background:var(--surface-2)}
.me-todo li{display:flex;justify-content:space-between;align-items:center;gap:.8rem 1.2rem;flex-wrap:wrap;padding:.85rem 1.1rem;border-bottom:1px solid var(--line-1)}
.me-todo li:last-child{border-bottom:0}
.me-todo .btn{min-height:36px;padding:.4rem 1rem;font-size:var(--t15)}

/* filters */
.me-chips{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:.6rem}
.me-chip{min-height:36px;padding:.3rem .9rem;border-radius:999px;border:1px solid var(--line-2);background:transparent;color:var(--ink-2);font:600 var(--t15) var(--ui);cursor:pointer}
.me-chip span{color:var(--ink-3);font-weight:400}
.me-chip.on{border-color:var(--gold);color:var(--gold-soft)}
.me-chip:focus-visible{outline:2px solid var(--gold-soft);outline-offset:2px}

/* rows: the /post list, reused */
.portal .mine-row>div:first-child{flex:1 1 16rem;min-width:0}
.portal .mine-row .hint{display:block;margin:.15rem 0 0}
.me-price{display:flex;gap:.6rem;align-items:flex-end;flex-wrap:wrap;margin-top:.6rem}
.me-price label{font-size:var(--t15);display:flex;flex-direction:column;gap:.25rem}
.me-price input{max-width:12rem;direction:ltr}
.me-price button[type=submit]{min-height:40px;padding:.4rem 1.1rem}
.p-text{white-space:pre-wrap}
.p-note{color:var(--gold-soft)!important}
.p-thumb{display:block;margin-top:.5rem;width:120px;height:90px;object-fit:cover;border-radius:10px;border:1px solid var(--line-1)}

/* panels */
.me-card{background:var(--surface-2);border:1px solid var(--line-1);border-radius:16px;padding:clamp(1.1rem,3vw,1.8rem)}
.me-card .facts{margin-top:1rem}
.me-card .me-who .bpage-avatar{width:72px;height:72px;font-size:1.8rem}
.me-check{display:flex;gap:.6rem;align-items:flex-start;margin-top:1.2rem;font-weight:400}
.me-check input{width:auto;margin-top:.35rem}
.me-none h2{margin:1rem 0 .4rem}
.p-form{margin-top:1.4rem}
.p-form form{display:grid;gap:1.1rem}
.p-form form .hint{margin:0}

/* a table that stays a table, and scrolls sideways on a phone */
.p-table{margin-top:1.2rem;overflow-x:auto;border:1px solid var(--line-1);border-radius:16px;background:var(--surface-2)}
.p-table table{width:100%;border-collapse:collapse;font-size:var(--t15)}
.p-table th,.p-table td{padding:.7rem .9rem;text-align:start;border-bottom:1px solid var(--line-1);white-space:nowrap}
.p-table thead th{color:var(--ink-3);font-weight:600}
.p-table tbody th{font-weight:600;white-space:normal}
.p-table td{font-variant-numeric:tabular-nums}
.p-table tr:last-child th,.p-table tr:last-child td{border-bottom:0}

/* signature pads on the order form (4 Oct 2026) */
.sigpads{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:1rem 0}
.sigpad{display:flex;flex-direction:column;gap:.35rem}
.sigpad span{font-size:var(--t15);color:var(--dim)}
.sigpad canvas{width:100%;height:auto;aspect-ratio:3/1;background:#fff;border-radius:12px;touch-action:none;cursor:crosshair}
.sigpad .linkbtn{align-self:flex-start}
@media (max-width:40rem){.sigpads{grid-template-columns:1fr}}

/* /tools: the total row and the per-calculator disclaimer (4 Oct 2026). */
.tool-res.sum b{color:var(--cream)}
.tool-res.sum{border-bottom-color:var(--line)}
.tool .tool-note{font-size:var(--t13);margin-top:-.3rem}

/* /me: the open requests that fit a listing, and the alerts tab (5 Oct 2026) */
.me-fit{margin-top:.5rem}
.me-fit summary{cursor:pointer;color:var(--gold);font-weight:600;font-size:var(--t15)}
.me-fit ul{margin:.4rem 0;padding-inline-start:1.2rem}
.me-fit li{margin:.2rem 0}
.me-alerts .row{display:grid;grid-template-columns:2fr 1fr;gap:.8rem}
@media (max-width:34rem){.me-alerts .row{grid-template-columns:1fr 1fr}}

/* /kit: the broker's printable templates, and the guides' lists (4 Oct 2026).
   The document preview is paper on every theme: it is what gets printed. */
.kit-draft{font-size:var(--t15);padding:.85rem 1.1rem;border-radius:10px;border:1px dashed var(--gold);color:var(--ink-2);margin-bottom:1.2rem}
.kit-list{display:flex;flex-direction:column;gap:1.4rem}
.kit-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:1.6rem;align-items:start}
@media (max-width:60rem){.kit-body{grid-template-columns:minmax(0,1fr)}}
.kit-preview{position:sticky;top:5.5rem;min-width:0}
@media (max-width:60rem){.kit-preview{position:static}}
.kit-preview .hint{margin:0 0 .5rem}
.kit-check{display:flex;gap:.5rem;align-items:center;font-weight:400;margin:.3rem 0}
.kit-check input{width:auto;min-height:0;margin:0}
.kit-checks{display:flex;flex-wrap:wrap;gap:.2rem 1.2rem}
.kit-fs,.log-row{border:1px solid var(--line-soft);border-radius:14px;padding:.8rem 1rem 1rem;margin:0;min-width:0}
.kit-fs legend,.log-row legend{padding:0 .4rem;font-weight:600;font-size:var(--t15)}
.log-rows{display:flex;flex-direction:column;gap:.7rem}
.log-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem .7rem}
.log-row .wide{grid-column:1/-1}
.log-row label{font-weight:400;margin:0}
.log-row input,.log-row select{margin-top:.25rem}
.log-row .linkbtn{justify-self:start}
@media (max-width:34rem){.log-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.log-row>div:nth-of-type(3){grid-column:1/-1}}
#logAdd{align-self:flex-start}
.kit-actions{display:flex;flex-wrap:wrap;gap:.6rem 1.2rem;align-items:center;margin-top:.4rem}
.kit-not{margin-top:2.4rem;max-width:44rem}
.kit-not h2{font-weight:600;font-size:var(--t20)}
.kit-not p{color:var(--dim);margin-top:.6rem}
.kit-doc{background:#fff;color:#111;border-radius:12px;padding:clamp(1rem,3vw,1.8rem);font-size:var(--t15);line-height:1.7;overflow-wrap:anywhere;box-shadow:0 1px 0 rgba(0,0,0,.08)}
.kit-doc b{font-weight:600}
.kit-doc p,.kit-doc ol,.kit-doc table{margin:0 0 .7rem}
.kit-doc ol{padding-inline-start:1.3rem}
.kit-doc li{margin:.25rem 0}
.kit-doc h2{font-size:1em;font-weight:700;margin:1rem 0 .35rem}
.kit-doc table{width:100%;border-collapse:collapse}
.kit-doc th,.kit-doc td{border:1px solid #bbb;padding:.3rem .5rem;text-align:start;vertical-align:top}
.kit-doc th{background:#f3f3f3;font-weight:600;width:38%}
.kit-doc .kd-log{font-size:.88em}
.kit-doc .kd-log th{width:auto;overflow-wrap:normal;word-break:keep-all;padding:.3rem}
.kit-doc .kd-log td{height:2.2em}
.kd-head{border-bottom:2px solid #111;padding-bottom:.5rem;margin-bottom:1rem;font-size:.92em}
.kd-title{font-size:1.15em;font-weight:700;margin:.6rem 0 .5rem}
.kd-date{text-align:end}
.kd-re{text-decoration:underline}
.kd-box{border:1px solid #bbb;min-height:4.5em;padding:.4rem .6rem}
.kd-blank{display:inline-block;min-width:7em;border-bottom:1px solid #444;height:1.1em;vertical-align:bottom}
.kd-sigs{display:flex;flex-wrap:wrap;gap:1.2rem 2rem;margin-top:1.8rem}
.kd-sig{flex:1 1 9rem;display:flex;flex-direction:column;justify-content:flex-end;min-height:4.6rem}
.kd-sig img{height:56px;width:auto;max-width:100%;align-self:flex-start}
.kd-sig .ln{border-top:1px solid #333;padding-top:.3rem;font-size:.85em}
.kd-att,.kd-small{font-size:.85em}
.kd-foot{font-size:.8em;color:#555;margin-top:1.4rem!important;border-top:1px solid #ddd;padding-top:.5rem}
#kitPrint{display:none}
.g-note{border:1px dashed var(--gold);border-radius:10px;padding:.8rem 1rem;font-size:var(--t15)}
.legal .g-list{margin-top:.8rem;padding-inline-start:1.3rem;color:var(--dim);max-width:34rem}
.legal .g-list li{margin:.4rem 0}
.legal .g-list a,.g-note a{padding-block:.22rem}
@media print{
  body.kit-print{background:#fff}
  body.kit-print>:not(#kitPrint){display:none!important}
  body.kit-print #kitPrint{display:block;border-radius:0;padding:0;box-shadow:none;font-size:11pt}
  #kitPrint .kd-sig,#kitPrint tr{break-inside:avoid}
}

/* /market (4 Oct 2026): official index cards, an inline SVG line, the links */
.mk-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,26rem),1fr));gap:1.2rem}
.mk-card{min-width:0}
.mk-kpis{display:flex;flex-wrap:wrap;gap:.6rem}
.mk-kpi{flex:1 1 8rem;display:flex;flex-direction:column;gap:.2rem;padding:.7rem .9rem;border:1px solid var(--line-soft);border-radius:var(--r-input);background:var(--bg-2)}
.mk-kpi span{font-size:var(--t13);color:var(--dim)}
.mk-kpi b{font-weight:600;font-size:var(--t24);color:var(--gold-soft);font-variant-numeric:tabular-nums}
.mk-kpi.up b{color:var(--ok)}
.mk-kpi.down b{color:var(--warn)}
.mk-chart{margin:0}
.mk-chart svg{display:block;width:100%;height:auto;aspect-ratio:600/240;overflow:visible}
.mk-line{fill:none;stroke:var(--gold);stroke-width:2.5;vector-effect:non-scaling-stroke;stroke-linejoin:round}
.mk-dot{fill:var(--gold-soft)}
.mk-grid-l{stroke:var(--line-1);stroke-width:1;vector-effect:non-scaling-stroke}
.mk-ax{fill:var(--ink-3);font:400 22px var(--ui)}
.mk-table summary{cursor:pointer;color:var(--gold-soft);font-size:var(--t15);padding-block:.4rem}
.mk-table .tool-table{max-width:24rem}
.mk-rates td b{color:var(--gold-soft);font-weight:600}
.mk-rates th[scope=row]{color:var(--ink);font-weight:400}
.mk-src{margin-top:0;font-size:var(--t13);overflow-wrap:anywhere}
.mk-src a,.mk-links a,.mk-meeting a{color:var(--gold-soft)}
.mk-links .tool-link b a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--line-gold);text-underline-offset:.25em}
.mk-links .tool-link b a:hover{color:var(--gold-soft)}
.mk-meeting p{color:var(--ink-2);line-height:1.65;max-width:46rem}
.mk-disclaimer{max-width:52rem}
.lst-official{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin-bottom:1.6rem}
.lst-official .btn{min-height:36px;padding:.4rem 1rem;font-size:var(--t15)}
.lst-official .src{margin:0}
@media print{.lst-official{display:none!important}}
/* broker page: activity counts from brokerStats (5 Oct 2026) */
.bstats{margin-top:1.4rem;padding:1rem 1.2rem;background:var(--bg-2);border:1px solid var(--line-soft)}
.bstats-h{font-family:var(--ui);font-size:var(--t15);font-weight:600;letter-spacing:.08em;color:var(--green);margin:0 0 .5rem}
.bstats-list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.3rem 1.4rem;color:var(--ink);line-height:1.5}
.bstats-list li::before{content:"·";margin-inline-end:.45rem;color:var(--gold-soft);font-weight:600}
.bstats-note{margin-top:.5rem;font-size:var(--t13)}
/* /tools: where the default mortgage rate came from */
.rate-src{margin-top:.3rem;font-size:var(--t13)}
.rate-src a{color:var(--gold-soft)}

/* /start (4 Oct 2026): the new-broker track. Numbered steps, a tick each,
   one progress bar; a done step dims its number to a gold check. */
.st-intro{max-width:46rem;color:var(--ink-2);font-size:var(--t17);line-height:1.65;margin-bottom:1.6rem}
.st-prog{position:sticky;top:4.2rem;z-index:5;background:var(--bg);padding:.7rem 0 .6rem;margin-bottom:1rem;border-bottom:1px solid var(--line-1)}
.st-bar{height:10px;border-radius:var(--r-chip);background:var(--surface-1);border:1px solid var(--line-1);overflow:hidden}
.st-bar i{display:block;height:100%;width:0;background:var(--gold);border-radius:inherit;transition:width .5s var(--e-out)}
.st-count{display:flex;flex-wrap:wrap;gap:.3rem 1rem;align-items:baseline;margin-top:.45rem;font-size:var(--t15);color:var(--ink-2)}
.st-count .linkbtn{color:var(--gold-soft);font-size:var(--t13);text-decoration:underline;text-underline-offset:.2em;min-height:24px}
.st-list{list-style:none;display:flex;flex-direction:column;gap:1rem;max-width:52rem}
.st-step{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.4rem 1rem;background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--r-card);padding:clamp(1rem,3vw,1.5rem);transition:border-color .3s var(--e-out)}
.st-num{display:grid;place-items:center;width:2.4rem;height:2.4rem;border-radius:50%;border:1px solid var(--line-gold);color:var(--gold-soft);font-weight:600;font-size:var(--t17);font-variant-numeric:tabular-nums}
.st-body{min-width:0;display:flex;flex-direction:column;gap:.55rem}
.st-body h2{font-weight:600;font-size:var(--t20);line-height:1.35;margin-top:.3rem}
.st-body p{color:var(--ink-2);line-height:1.6;max-width:42rem}
.st-body p b{color:var(--ink);font-weight:600}
.st-links{display:flex;flex-wrap:wrap;gap:.45rem}
.st-links a{display:inline-flex;align-items:center;min-height:36px;padding:.3rem .85rem;border:1px solid var(--line-2);border-radius:var(--r-chip);color:var(--ink);text-decoration:none;font-size:var(--t15)}
.st-links a:hover{border-color:var(--gold);color:var(--gold-soft)}
.st-done{display:inline-flex;align-items:center;gap:.55rem;align-self:flex-start;margin-top:.2rem;min-height:44px;font-weight:600;cursor:pointer}
.st-done input{width:1.3rem;height:1.3rem;min-height:0;margin:0;accent-color:var(--gold);flex:none}
.st-step.is-done{border-color:var(--line-gold)}
.st-step.is-done .st-num{background:var(--gold);color:var(--night);border-color:var(--gold);font-size:0}
.st-step.is-done .st-num::after{content:"✓";font-size:var(--t17)}
.st-note{max-width:52rem}
.st-promo{margin:1.4rem 0;border-color:var(--line-gold)}
@media (max-width:34rem){.st-step{grid-template-columns:minmax(0,1fr)}.st-num{width:2rem;height:2rem;font-size:var(--t15)}}

/* "I have a property for you" on /requests and /me, and the price-drop badge on /n (5 Oct 2026) */
.req-offer{margin-top:.6rem;padding-top:.6rem;border-top:1px solid var(--line-soft)}
.req-offer-form{display:flex;flex-direction:column;gap:.5rem}
.req-offer-form label{display:flex;flex-direction:column;gap:.3rem;font-size:var(--t15)}
.req-offer-form select{min-height:44px;max-width:100%}
.req-offer-form .btn{align-self:flex-start}
.req .who .btn + .btn{margin-inline-start:0}
.me-offers{margin:.4rem 0;padding-inline-start:1.2rem}
.me-offers li{margin:.2rem 0;font-size:var(--t15)}
.price-drop{display:inline-block;margin-top:.5rem;padding:.25rem .7rem;border-radius:999px;border:1px solid var(--line-gold);background:var(--ok-bg);color:var(--gold-soft);font-size:var(--t15);font-weight:600}
/* a co-broker's branded link on /n, and the referral form on /b (5 Oct 2026) */
.face-line{margin:.7rem 0 0;font-size:var(--t15)}
.ref-form{margin:0 0 2rem}
.ref-form h2{font-size:1.4rem;margin-bottom:.4rem}
.ref-form .row{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
@media (max-width:560px){.ref-form .row{grid-template-columns:1fr}}

/* ---- brokers first (4 Oct 2026): the brokers-only window badge ---- */
.st-brokers{color:var(--gold-soft)}
.tag.brokers{display:inline-block;font-size:var(--t15);padding:.15rem .55rem;border-radius:999px;border:1px solid var(--gold);background:var(--gold-wash);color:var(--gold-soft);font-weight:600}
.lst-head .tags{margin:.4rem 0 0}

/* ---- 6 Oct 2026: seller report, broker contact form + QR, monthly strip ---- */
/* /report: a paper sheet on screen too, so what you see is what prints */
.rp{max-width:46rem;margin:0 auto;background:#fff;color:#1a1a1a;border-radius:var(--r-card);padding:clamp(1.2rem,4vw,2.4rem);line-height:1.6;box-shadow:0 1px 0 var(--line-soft)}
.rp-top{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;flex-wrap:wrap;padding-bottom:1rem;border-bottom:1px solid #ddd}
.rp-broker{display:flex;gap:.9rem;align-items:center;min-width:0}
.rp-broker b{display:block;font-size:var(--t20);color:#111}
.rp-broker div>span{display:block;font-size:var(--t15);color:#444}
.rp-avatar{flex:none;width:4.2rem;height:4.2rem;border-radius:50%;overflow:hidden;display:grid;place-items:center;background:#efe8d6;color:#6b5420;font-weight:700;font-size:1.6rem}
.rp-avatar img{width:100%;height:100%;object-fit:cover}
.rp-brand{display:flex;flex-direction:column;align-items:flex-end;font-size:var(--t13);color:#777}
.rp-brand span:first-child{font-weight:700;color:#8a6a24}
.rp-eyebrow{margin:1.2rem 0 .2rem;font-size:var(--t13);letter-spacing:.06em;color:#8a6a24;font-weight:600}
.rp-title{font-family:var(--disp);font-size:var(--t32);line-height:1.2;color:#111;margin:0}
.rp-what{margin:.3rem 0 1rem;color:#444}
.rp-say{margin:0 0 1.2rem;padding:1rem 1.1rem;background:#f6f3ea;border-inline-start:3px solid #c79a3e;color:#222}
.rp-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr));gap:.6rem;margin:0}
.rp-grid>div{border:1px solid #e2ddd0;border-radius:var(--r-input);padding:.7rem .9rem;break-inside:avoid}
.rp-grid dt{font-size:var(--t13);color:#555}
.rp-grid dd{margin:.15rem 0 0;font-size:var(--t24);font-weight:700;color:#111}
.rp-grid dd span{display:block;font-size:var(--t13);font-weight:400;color:#666}
.rp-foot{margin:1.2rem 0 0;padding-top:.8rem;border-top:1px solid #ddd;font-size:var(--t13);color:#666}
.rp-actions{max-width:46rem;margin-inline:auto;justify-content:center}
@media print{
  body.rp-print{background:#fff}
  body.rp-print header.top,body.rp-print footer,body.rp-print .hero,body.rp-print .skip,body.rp-print .rp-actions,body.rp-print #authBox{display:none!important}
  body.rp-print .portal{padding:0}
  body.rp-print .rp{box-shadow:none;border-radius:0;padding:0;max-width:none;font-size:11pt}
  body.rp-print main::after{content:none}
}
/* the broker page: contact form and QR */
.bcontact{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1.4rem;align-items:start;margin-top:2.4rem}
.bcontact-form{max-width:none;margin:0}
.bcontact-form h2{font-size:var(--t24);margin:0 0 .3rem}
.bcontact-consent{display:flex;gap:.6rem;align-items:flex-start;margin:.9rem 0 .7rem;font-weight:400}
.bcontact-consent input{width:auto;flex:none;margin-top:.35rem}
.bqr{margin:0;display:flex;flex-direction:column;align-items:center;gap:.4rem;padding:.8rem;background:var(--bg-2);border:1px solid var(--line-soft);border-radius:var(--r-input)}
.bqr img{display:block;width:132px;height:132px;image-rendering:pixelated;border-radius:4px}
.bqr figcaption{font-size:var(--t13);text-align:center;max-width:9rem}
@media (max-width:640px){.bcontact{grid-template-columns:1fr}.bqr{justify-self:center}}
/* /me: the QR of my page */
.me-qr{display:flex;gap:1rem;align-items:center;flex-wrap:wrap;margin:1.2rem 0 .4rem;padding:1rem;border:1px solid var(--line-soft);border-radius:var(--r-input);background:var(--bg-2)}
.me-qr img{flex:none;width:148px;height:148px;image-rendering:pixelated;border-radius:4px}
.me-qr>div{display:flex;flex-direction:column;gap:.4rem;align-items:flex-start;min-width:0;flex:1 1 14rem}
/* last month's most active brokers (home, /brokers) */
.monthly-wrap{padding-block:1.4rem}
.monthly{padding:1.1rem 1.3rem;border:1px solid var(--line-gold, var(--line-soft));border-radius:var(--r-card);background:var(--bg-2)}
.monthly-h{font-family:var(--ui);font-size:var(--t17);font-weight:600;color:var(--gold-soft);margin:0 0 .6rem}
.monthly-list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem;counter-reset:mo}
.monthly-list li{counter-increment:mo}
.monthly-list a{display:inline-flex;align-items:center;gap:.45rem;padding:.35rem .85rem;border:1px solid var(--line-soft);border-radius:999px;color:var(--ink);text-decoration:none}
.monthly-list a::before{content:counter(mo);font-size:var(--t13);font-weight:700;color:var(--gold-soft)}
.monthly-list a:hover,.monthly-list a:focus-visible{border-color:var(--gold)}
.monthly-note{margin:.6rem 0 0;font-size:var(--t13)}

/* the writing assistant on /post (app.js, desk ai.write) */
.ai-box{margin-top:1rem;display:grid;gap:.6rem}
.ai-box .hint{margin:0}
.ai-row{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1rem}
.ai-row label{margin:0;font-weight:400}
.ai-row select{width:auto}
.ai-preview{border:1px solid var(--line-gold);border-radius:12px;padding:1rem 1.1rem;display:grid;gap:.6rem;background:var(--bg-2)}
.ai-preview p{white-space:pre-line;margin:0}
.ai-preview summary{cursor:pointer;color:var(--gold-soft);font-size:var(--t15);min-height:24px}
.ai-preview details p{margin-top:.5rem;color:var(--dim)}
.ai-preview .linkbtn{min-height:44px}

/* the home headline is a sentence now (D8, 5 Oct 2026): smaller than the old three-word one */
.night h1.h1-long{font-size:clamp(2.3rem,5.4vw,5rem);max-width:19ch;line-height:1.08}
/* /law: the Bar-rules line as a feature in the first screen (D7, 5 Oct 2026) */
.hero-rule{margin:1.2rem 0 0;max-width:34rem;padding:.8rem 1rem;border:1px solid var(--line-gold);
  border-inline-start:3px solid var(--gold);border-radius:12px;font-size:var(--t15);line-height:1.6;color:var(--ink-2)}
.hero-rule b{display:block;color:var(--ink);font-weight:600;margin-bottom:.2rem}
/* the three steps after a sponsor application (D14) */
.formwrap + .steps3{margin-top:1.6rem}

/* the house film (6 Oct 2026): a light chapter, the frames' own off-white, so
   the model sits on the page with no visible edge; the lines go dark on it */
.film-house{background:#EEECE8}
.film-house .film-poster img{object-fit:contain;background:#EEECE8}
.film-house .film-caps{color:#13261D;text-shadow:none}
.film-house .film-cap{color:#3D4A42}
.film-house .film-cap:last-child,.film-house.live .film-cap{color:#13261D}
.film-house .film-cap em{color:#9A7322}
.film-house.live::before{background:linear-gradient(var(--night),rgba(238,236,232,0))}
.film-house.live::after{background:linear-gradient(#EEECE8,var(--night))}
.film-house.live .film-bar{background:rgba(19,38,29,.12)}
@media (max-width:46rem){.film-house .film-stick{aspect-ratio:auto;max-height:none}.film-house .film-poster img{object-fit:contain}}

/* ---- the live logo (6 Oct 2026): SVG and text, see LOGO_LIVE in build.mjs ---- */
header.top .logo2{display:inline-flex;font-size:18px;align-items:center;gap:.55em;text-decoration:none;color:#E2C27A}
.logo2 svg{width:3.4em;height:3.4em;flex:none;overflow:visible}
.logo2 .lt{display:flex;flex-direction:column;line-height:1}
.logo2 .ln{font-family:"Frank Ruhl Libre",serif;font-weight:900;font-size:1.75em;letter-spacing:-.01em;
  background:linear-gradient(100deg,#B8862F 0%,#F3DB9A 22%,#C79A3E 40%,#E2C27A 60%,#B8862F 100%);
  background-size:240% 100%;background-position:100% 0;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:l2-sheen 5.5s ease-in-out 1.4s infinite}
.logo2 .tg{font-size:.78em;font-weight:400;color:#D9C9A0;margin-top:.32em;letter-spacing:.02em}
.l2-s{fill:none;stroke:url(#l2g);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:var(--len,300);stroke-dashoffset:var(--len,300);animation:l2-draw 1.6s cubic-bezier(.6,0,.2,1) forwards}
.l2-s.d2{animation-delay:.35s}.l2-s.d3{animation-delay:.7s}
.l2-w{fill:#E2C27A;opacity:0;animation:l2-win 4s ease-in-out infinite}
.l2-sp{fill:#FFF3C8;opacity:0;transform-box:fill-box;transform-origin:center;animation:l2-tw 3.2s ease-in-out infinite}
.l2-ring{fill:none;stroke:url(#l2r);stroke-width:1.6;stroke-linecap:round;stroke-dasharray:60 260;animation:l2-orbit 6s linear infinite}
.l2-all{transform-origin:60px 64px;animation:l2-breathe 4.2s ease-in-out 1.8s infinite}
@keyframes l2-draw{to{stroke-dashoffset:0}}
@keyframes l2-sheen{0%,50%{background-position:100% 0}85%,100%{background-position:-30% 0}}
@keyframes l2-win{0%,100%{opacity:.15}50%{opacity:.95}}
@keyframes l2-tw{0%,100%{opacity:0;transform:scale(.3)}45%{opacity:1;transform:scale(1)}60%{opacity:.2;transform:scale(.6)}}
@keyframes l2-orbit{to{stroke-dashoffset:-320}}
@keyframes l2-breathe{0%,100%{transform:scale(1);filter:drop-shadow(0 0 0 rgba(226,194,122,0))}50%{transform:scale(1.035);filter:drop-shadow(0 0 5px rgba(226,194,122,.55))}}
.is-calm .logo2 *,.is-calm .logo2{animation:none!important}
.is-calm .logo2 .l2-s{stroke-dashoffset:0}.is-calm .logo2 .l2-w{opacity:.8}.is-calm .logo2 .l2-sp{opacity:0}
@media (prefers-reduced-motion:reduce){.logo2 *,.logo2{animation:none!important}.logo2 .l2-s{stroke-dashoffset:0}.logo2 .l2-w{opacity:.8}.logo2 .l2-sp{opacity:0}}
@media (max-width:46rem){header.top .logo2{font-size:13.5px}}
@media (max-width:23.5rem){header.top .logo2 .tg{display:none}}

/* the footer's stop-motion button sits in the flow, not over a hero */
.calm-foot{position:static;margin-inline-start:auto;background:transparent}
@media (prefers-reduced-motion:reduce){.calm-foot{display:none}}

/* ---- the house film opens the home page ---- */
body.home header.top{background:rgba(10,29,21,.82);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.film-top.live::before{display:none}
.film-top .film-hero{position:relative;z-index:2;padding:6.5rem clamp(1.2rem,5vw,4rem) 1.5rem;max-width:38rem;
  color:#13261D;transition:opacity .5s var(--e-out),transform .5s var(--e-out)}
.film-top .film-hero .eyebrow{color:#8A6A1F}
.film-top .film-hero h1{font-family:var(--disp);font-weight:900;font-size:clamp(2.3rem,5vw,4.6rem);line-height:1.04;margin:.3rem 0 0}
.film-top .film-hero h1 em{font-style:normal;color:#9A7322}
.film-top .film-hero .sub{margin-top:1rem;font-size:clamp(1rem,1.3vw,1.15rem);color:#3D4A42;max-width:32rem}
.film-top .film-hero .cta-row{margin-top:1.4rem}
.film-top .film-hero .btn-line{color:#13261D;border-color:rgba(19,38,29,.35)}
.film-top .calm{background:rgba(238,236,232,.85);color:#13261D;border-color:rgba(19,38,29,.25)}
/* static (no film.js, reduced motion, stop motion): headline, then the house */
.film-top:not(.live) .film-stick{aspect-ratio:auto;max-height:none;overflow:visible;display:flex;flex-direction:column;align-items:center}
.film-top:not(.live) .film-hero{align-self:stretch;margin-inline:auto;max-width:72rem;width:100%}
.film-top:not(.live) .film-poster{position:relative;inset:auto;width:min(100%,1120px);aspect-ratio:16/9}
.film-top:not(.live) .film-caps{position:static;padding:1rem 1rem 3rem}
/* live: the headline sits on the inline-start side over the first frames and
   gives way to the four lines */
.film-top.live .film-hero{position:absolute;top:0;inset-inline-start:0;bottom:0;display:flex;flex-direction:column;justify-content:center;padding-top:5rem}
.film-top.live.hero-gone .film-hero{opacity:0;transform:translateY(-18px);pointer-events:none}
@media (max-width:46rem){
  .film-top.live .film-hero{justify-content:flex-start;bottom:auto;padding:5.2rem 1.2rem 0;max-width:none}
  .film-top .film-hero h1{font-size:clamp(1.9rem,8.4vw,2.6rem)}
  .film-top .film-hero .sub{font-size:.98rem;margin-top:.7rem}
  .film-top .film-hero .cta-row{margin-top:1rem}
}

/* The marketing log of an exclusivity in /me (6 Oct 2026) */
.me-mlog{margin-top:.9rem;padding:1rem 1.1rem;border:1px solid var(--line-2);border-radius:var(--r-input);background:var(--surface-2)}
.me-mlog .row{display:grid;grid-template-columns:1fr 2fr;gap:.6rem .8rem}
.me-mlog .row:first-of-type{grid-template-columns:1fr 1fr}
.me-mlog label{font-size:var(--t15)}
.me-mlog input[type=date]{direction:ltr}
.mlog-third{margin:.9rem 0 .4rem;font-size:var(--t15);color:var(--ink-2)}
.mlog-act{border:0;border-top:1px solid var(--line-1);margin:.7rem 0 0;padding:.7rem 0 0}
.mlog-act legend{padding:0;font-size:var(--t15);font-weight:600;color:var(--ink)}
@media (max-width:34rem){.me-mlog .row,.me-mlog .row:first-of-type{grid-template-columns:1fr}}
/* the broker's own log in the seller report */
.rp-sub{margin:1.6rem 0 .6rem;font-size:var(--t20);color:#111}
.rp-mkt{width:100%;border-collapse:collapse;font-size:var(--t15)}
.rp-mkt th,.rp-mkt td{border:1px solid #e2ddd0;padding:.45rem .6rem;text-align:start;vertical-align:top;color:#222}
.rp-mkt th{background:#f6f3ea;font-size:var(--t13);color:#555}
.rp-mkt td:first-child{white-space:nowrap}
.rp-mkt tr{break-inside:avoid}
.me-mlog .mlog-third b{display:inline;font-weight:700}
.me-mlog .me-check{display:flex;align-items:flex-start;gap:.6rem}
.me-mlog .me-check input{flex:none;width:auto}

/* The mark after the logo change (6 Oct 2026): gold line work with no tile.
   The rules above that paint a tile behind .mark are overridden here; the
   two small signs (newsletter mock, roof sign) keep their own ground. */
.mark{background:transparent;color:var(--gold-soft);border-radius:0}
.mark svg{width:100%;height:100%;overflow:visible}
footer .f-brand .mark{width:52px;height:52px;color:var(--gold-soft)}
.empty .mark{width:64px;height:64px}
.ml-photo .mark{width:64px;height:64px;color:var(--gold-soft)}
/* The Facebook group (7 Oct 2026): a button in the home hero, a second door
   beside "join free", and a card under the join steps instead of a line */
.btn-fb{display:inline-flex;align-items:center;gap:.45rem}
.fb-ico{width:1.05em;height:1.05em;flex:none}
.path-ctas{display:flex;flex-wrap:wrap;gap:.7rem}
.path-group{font-size:var(--t15);color:var(--dim);line-height:1.55}
.join-group{margin-top:1.4rem;padding:1rem 1.1rem;border:1px solid var(--line-2);border-radius:14px;
  display:flex;flex-direction:column;align-items:flex-start;gap:.8rem;font-size:var(--t15);color:var(--ink-2)}
.join-group b{color:var(--ink)}

/* The launch band and its message dialog (7 Oct 2026) */
.beta{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:.2rem .9rem;position:relative;
  padding:.4rem 2.8rem;background:var(--gold);color:var(--night);font-size:var(--t15);line-height:1.4;text-align:center}
.beta[hidden]{display:none}
.beta p{margin:0}
.beta-btn{color:var(--night);font-weight:700;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.beta-btn:hover{text-decoration-thickness:2px}
.beta-x{position:absolute;inset-inline-end:.4rem;top:50%;transform:translateY(-50%);width:36px;height:36px;
  background:none;border:0;border-radius:50%;color:var(--night);font-size:1.4rem;line-height:1;cursor:pointer}
.beta-x:hover{background:rgba(7,24,17,.12)}
.beta a:focus-visible,.beta button:focus-visible{outline:2px solid var(--night);outline-offset:2px}
.fbk-dlg{width:min(32rem,calc(100vw - 2rem));padding:clamp(1.2rem,4vw,1.8rem);border:1px solid var(--line-2);border-radius:16px;
  background:var(--bg-2);color:var(--cream)}
.fbk-dlg::backdrop{background:rgba(7,24,17,.7)}
.fbk-form{display:flex;flex-direction:column;gap:.7rem}
.fbk-dlg h2{font-family:var(--disp);font-weight:900;font-size:var(--t32);line-height:var(--lh-disp);margin:0}
.fbk-dlg .hint{color:var(--dim);font-size:var(--t15);margin:0}
.fbk-dlg textarea{width:100%;min-height:8rem;resize:vertical}
.fbk-dlg .cta-row{margin-top:.3rem}
.beta-why{margin-top:1rem;padding:.8rem 1rem;border-inline-start:3px solid var(--gold);background:var(--gold-wash);font-size:var(--t15)}
.beta-short{display:none}
@media (max-width:46rem){.beta-long{display:none}.beta-short{display:inline}.beta{padding-inline:2.4rem;font-size:.875rem;gap:.2rem .6rem}}
/* the home header is fixed, so the hero makes room for the band while it shows */
body.home:has(#beta:not([hidden])) .film-top .film-hero,
body.home:has(#beta:not([hidden])) .film-top.live .film-hero{padding-top:7.2rem}
@media (max-width:46rem){
  body.home:has(#beta:not([hidden])) .film-top .film-hero,
  body.home:has(#beta:not([hidden])) .film-top.live .film-hero{padding-top:7.6rem}
}
/* narrow phones (360px and under): the menu button was pushed off the
   screen, and the three hero buttons stacked onto the house. The header's
   join button goes (the hero and the menu both carry it); the hero buttons
   tighten so two share a row. */
@media (max-width:23.5rem){
  header.top .nav-cta{display:none}
  .film-top .film-hero .cta-row{gap:.5rem}
  .film-top .film-hero .cta-row .btn{padding-inline:1rem;font-size:.9rem}
}

/* The Google Analytics notice (8 Oct 2026): once, at the bottom, until answered */
.ga-note{position:fixed;z-index:40;inset-inline:1rem;bottom:1rem;margin-inline:auto;max-width:40rem;
  display:flex;align-items:center;gap:.8rem 1.2rem;flex-wrap:wrap;padding:.9rem 1.1rem;border-radius:14px;
  background:var(--bg-2);color:var(--cream);border:1px solid var(--line-2);box-shadow:0 10px 30px rgba(0,0,0,.35);font-size:var(--t15)}
.ga-note p{margin:0;flex:1 1 16rem;line-height:1.5}
.ga-note a{color:var(--gold-soft)}
.ga-row{display:flex;gap:.5rem}
.ga-row .btn{min-height:40px;padding-block:.45rem;padding-inline:1.1rem}
@media print{.ga-note{display:none}}
#gaSwitch{margin:.4rem 0;font-size:var(--t15)}

/* The accessibility menu (8 Oct 2026): a floating button on every page and
   the classes it puts on <html> */
.a11y-fab{position:fixed;z-index:35;inset-inline-start:1rem;bottom:1rem;width:52px;height:52px;border-radius:50%;
  display:grid;place-items:center;border:2px solid var(--night);background:#1F5FAD;color:#fff;cursor:pointer;
  box-shadow:0 6px 18px rgba(0,0,0,.35);transition:transform .2s var(--e-ui)}
.a11y-fab svg{width:30px;height:30px}
.a11y-fab:hover{transform:scale(1.06)}
.a11y-fab:focus-visible{outline:3px solid var(--gold-soft);outline-offset:3px}
.a11y-panel{position:fixed;z-index:36;inset-inline-start:1rem;bottom:5rem;width:min(20rem,calc(100vw - 2rem));
  max-height:calc(100vh - 7rem);overflow:auto;padding:1rem;border-radius:16px;background:var(--surface-1);color:var(--ink);
  border:1px solid var(--line-2);box-shadow:0 14px 40px rgba(0,0,0,.45)}
.a11y-panel[hidden]{display:none}
.a11y-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:.7rem}
.a11y-h{margin:0;font-family:var(--disp);font-weight:900;font-size:var(--t24)}
.a11y-close{width:40px;height:40px;border:0;border-radius:50%;background:none;color:var(--ink);font-size:1.5rem;cursor:pointer}
.a11y-close:hover{background:var(--line-1)}
.a11y-grid{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}
.a11y-opt{min-height:56px;padding:.5rem .6rem;border-radius:12px;border:1px solid var(--line-2);background:var(--surface-2);
  color:var(--ink);font:600 var(--t15)/1.3 var(--ui, inherit);cursor:pointer;text-align:center}
.a11y-opt:hover{border-color:var(--gold)}
.a11y-opt[aria-pressed="true"]{background:var(--gold);color:var(--night);border-color:var(--gold)}
.a11y-foot{display:flex;align-items:center;justify-content:space-between;gap:.6rem;margin-top:.8rem;font-size:var(--t15)}
.a11y-reset{border:0;background:none;color:var(--gold-soft);font:inherit;text-decoration:underline;cursor:pointer;padding:.4rem 0}
.a11y-foot a{color:var(--gold-soft)}
.a11y-panel button:focus-visible,.a11y-panel a:focus-visible{outline:2px solid var(--gold-soft);outline-offset:2px}
@media print{.a11y-fab,.a11y-panel{display:none}}
/* the options */
html.a11y-t1{font-size:112.5%}
html.a11y-t2{font-size:125%}
html.a11y-contrast{--ink:#FFFFFF;--ink-2:#F2F4EE;--ink-3:#E4E8E0;--line-1:rgba(255,255,255,.4);--line-2:rgba(255,255,255,.6);
  --gold-soft:#F6DD99;--night:#000000;--night-2:#000000;--surface-1:#000000;--surface-2:#0B0B0B}
html.a11y-contrast body{background:#000}
html.a11y-links a{text-decoration:underline!important;text-underline-offset:3px;text-decoration-thickness:2px!important}
html.a11y-links a:not(.btn){font-weight:700}
html.a11y-font body,html.a11y-font body *:not(svg):not(svg *){font-family:Arial,"Segoe UI",Tahoma,sans-serif!important}
html.a11y-space body{letter-spacing:.05em;word-spacing:.12em}
html.a11y-space p,html.a11y-space li,html.a11y-space dd{line-height:1.9!important}
/* the floating button sits over the last footer line on a phone; leave it room */
@media (max-width:46rem){footer{padding-bottom:4.5rem}}