/* 7th Avenue Realty — "Morning Light" shared theme for all sub-pages.
   Light is the site default; the original dark design is restored verbatim when
   <html class="sar-dark"> is set (by the header toggle / saved 'sar-theme' choice).
   The homepage has its own engine in index.html — it does NOT load this file.

   Palette (approved pitch v2, all text pairs measured >=4.5:1 AA):
     linen #EFEDE5 · card #E6E3D7 · well #DFDBCC · pressed #DDD9C9
     soft ink #26231A · body #4A4536 · captions #67614B
     olive (voice) #544E2E · sage-deep (live signals) #5F6654
     wheat #B3AA8D = decoration + sand buttons only, never text on linen.

   Mechanism: the fleet is styled with inline hex styles from a small token set,
   so light mode remaps those tokens via [style*=] attribute matches, exactly like
   the homepage's proven day-mode engine. Class-based components (uniform header,
   overlay) are themed explicitly below.

   Three page families load a slice of this file instead (Batch 5, Oct 26, 2026): the rules their code can use, written by
   scripts/css-slice.mjs — the listing pages (/listing/theme.css), the Rohit pages (/rohit-homes/theme.css) and the
   community guides (assets/communities/theme-guides.css). After a change here, run node scripts/css-slice.mjs
   (css-slice.mjs --check fails until then). */

/* ---------- ONE COLUMN (Oct 25, 2026 — audit C H1, M1, M2, M17; Fadi's rule of Oct 10: on a computer every title, row,
   grid and rail shares one column's edges) ----------
   The gutter and the column every page is laid out on, for the header, the footer, the full-screen menu, the hand-built
   pages' sections and the generators' wrappers alike (before: logo 40 · footer 56 · content 64, 156 or 616 at 1440; three
   phone gutters, 20 · 22 · 24).
     --col-pad   the gutter: 20 px on a phone, 5vw from 400 px, 64 px from 1280 px on
     --col-max   the column's outside width, gutters included: the whole screen, at every size (Fadi, Oct 27: "the home page
                 and all other pages should always fill the screen regardless to screen size with a consistent padding on the
                 sides") — was 1440 px centred (Oct 25), then max(1440px, 88vw) (Oct 27, option C)
     --col-edge  a full-width block's side padding: the gutter plus half of whatever the block is wider than the column
   Two ways to lay a block on the column, both landing on the same pixel:
     a full-width block (a section with its own background): padding-inline: var(--col-edge)
     a wrapper: max-width: var(--col-max); margin-inline: auto; padding-inline: var(--col-pad); box-sizing: border-box
   The homepage (its own engine, no theme.css) carries the same line in index.html; scripts/one-column.test.mjs keeps the two
   identical and measures every page type at 1093, 1366, 1440, 1920 and 2560 px. */
:root{--col-pad:clamp(20px,5vw,64px);--col-max:100vw;--col-edge:calc(var(--col-pad) + max(0px,(100% - var(--col-max))/2));}

/* ---------- ground ---------- */
html:not(.sar-dark) body{background:#EFEDE5 !important;color:#4A4536 !important;}

/* ---------- inline background remaps ---------- */
html:not(.sar-dark) [style*="background:#100F0A"]{background:#EFEDE5 !important;}
html:not(.sar-dark) [style*="background:#14130D"]{background:#E6E3D7 !important;}
html:not(.sar-dark) [style*="background:#161409"]{background:#DFDBCC !important;}
html:not(.sar-dark) [style*="background:#1a1810"]{background:#E6E3D7 !important;}
html:not(.sar-dark) [style*="background:#1A1810"]{background:#E6E3D7 !important;}
html:not(.sar-dark) [style*="background:#191608"]{background:#DDD9C9 !important;}
html:not(.sar-dark) [style*="background:#0b0a07"]{background:#EFEDE5 !important;}
/* dark photo scrims -> linen wash (text over photos flips to ink via the color remaps) */
html:not(.sar-dark) [style*="rgba(16,15,10"]{background:linear-gradient(180deg,rgba(239,237,229,.55) 0%,rgba(239,237,229,.94) 100%) !important;}   /* top stop .18 → .55 (audit C H4, Oct 24: the New Builds eyebrow read 1.1–3.3:1 over the blueprint) */
html:not(.sar-dark) [style*="rgba(10,9,6"]{background:rgba(239,237,229,.88) !important;}

/* ---------- inline text remaps ---------- */
html:not(.sar-dark) [style*="color:#F4F3EE"]{color:#26231A !important;}
html:not(.sar-dark) [style*="color:#E8E8E3"]{color:#4A4536 !important;}
html:not(.sar-dark) [style*="color:#e8e4d6"]{color:#26231A !important;}
html:not(.sar-dark) [style*="color:#c9c4b4"]{color:#4A4536 !important;}
html:not(.sar-dark) [style*="color:#cabf9f"]{color:#544E2E !important;}
html:not(.sar-dark) [style*="color:#B3AA8D"]{color:#544E2E !important;}
html:not(.sar-dark) [style*="color:#8a8571"]{color:#67614B !important;}
html:not(.sar-dark) [style*="color:#9a957f"]{color:#67614B !important;}
html:not(.sar-dark) [style*="color:#6b6755"]{color:#67614B !important;}
/* rgb()-serialized forms (JS-touched inline styles get rewritten by the browser) */
html:not(.sar-dark) [style*="rgb(244, 243, 238)"]{color:#26231A !important;}
html:not(.sar-dark) [style*="rgb(232, 232, 227)"]{color:#4A4536 !important;}
html:not(.sar-dark) [style*="rgb(202, 191, 159)"]{color:#544E2E !important;}
html:not(.sar-dark) [style*="rgb(179, 170, 141)"]{color:#544E2E !important;}
html:not(.sar-dark) [style*="rgb(138, 133, 113)"]{color:#67614B !important;}
html:not(.sar-dark) [style*="rgb(154, 149, 127)"]{color:#67614B !important;}

/* ---------- borders ---------- */
html:not(.sar-dark) [style*="border:1px solid rgba(179,170,141"]{border-color:rgba(84,78,46,.22) !important;}
html:not(.sar-dark) [style*="border:1px solid rgba(232,232,227"]{border-color:rgba(38,35,26,.32) !important;}
html:not(.sar-dark) [style*="border-top:1px solid rgba(179,170,141"]{border-top-color:rgba(84,78,46,.22) !important;}
html:not(.sar-dark) [style*="border-bottom:1px solid rgba(179,170,141"]{border-bottom-color:rgba(84,78,46,.22) !important;}

/* ---------- cream / light-olive logos need ink treatment on linen ---------- */
html:not(.sar-dark) img[src*="logo-cream"],
html:not(.sar-dark) img[src*="logo-lightolive"]{filter:brightness(.34) sepia(.3);}
/* …but the header logo sits on the solid olive bar, not linen — site-nav.js already picks the
   right pre-coloured asset (cream), so no filter may touch it (filters blur the thin strokes) */
html:not(.sar-dark) .sn-nav img{filter:none;}
/* home chip on the olive bar */
html:not(.sar-dark) .sn-home{border-color:rgba(244,243,238,.3) !important;background:rgba(244,243,238,.1) !important;color:#F4F3EE !important;}
html:not(.sar-dark) .sn-home:hover{background:#F4F3EE !important;border-color:#F4F3EE !important;color:#544E2E !important;}

/* ---------- uniform header (sn-nav is injected by site-nav.js) ----------
   Light mode frame = brand OLIVE (Fadi, Jul 8): softer than black against linen,
   unmistakably on-palette. Header elements keep their cream styling (7.5:1 on olive).
   Dark mode keeps the original ink header untouched. */
html:not(.sar-dark) .sn-nav{background:#544E2E !important;border-bottom-color:rgba(244,243,238,.18) !important;} /* SOLID brand olive full-bleed bar (capsule header tried Jul 10, reverted — Fadi) */
html:not(.sar-dark) .sn-nav .wxchip{background:rgba(244,243,238,.08) !important;border-color:rgba(244,243,238,.28) !important;color:#F4F3EE !important;}
/* light mode, the olive bar: cream links, the current page in full cream with its underline (Oct 6: the row replaced the old link list) */
html:not(.sar-dark) .sn-nav .sn-row .sn-a{color:#E3DFC9 !important;}
html:not(.sar-dark) .sn-nav .sn-row .sn-a:hover,html:not(.sar-dark) .sn-nav .sn-row .sn-it:focus-within .sn-a{color:#F4F3EE !important;}
html:not(.sar-dark) .sn-nav .sn-row .sn-a.sn-on{color:#F4F3EE !important;}
html:not(.sar-dark) .sn-nav .sn-row .sn-a .sn-ul{background:#F4F3EE !important;}
html:not(.sar-dark) .sn-nav .sn-burger span{background:#F4F3EE !important;}
html:not(.sar-dark) .sn-nav .sn-home{background:rgba(244,243,238,.08) !important;border-color:rgba(244,243,238,.28) !important;color:#F4F3EE !important;}
html:not(.sar-dark) .sn-nav .sn-home:hover{background:#F4F3EE !important;color:#544E2E !important;}
html:not(.sar-dark) .sn-burger span{background:#F4F3EE !important;}
html:not(.sar-dark) #sn-close span{background:#26231A !important;} /* close X sits over the linen overlay */
/* header logo: site-nav.js now swaps the real pre-coloured asset per theme (cream on the olive bar,
   light-olive on ink) — the old invert filter blurred the thin logo strokes and is retired (Jul 12) */

/* ---------- the plain menu and footer in the HTML (why and how: scripts/static-nav.mjs) ----------
   While html.sn-wait (site-nav.js on its way) they paint nothing: the menu keeps the header's room (57 px; 58 where its
   row fits, a step read from the bar's and the scrollbar's widths), the footer none. Without JavaScript, or when
   site-nav.js never ran, they show.
   The generated pages' empty header slot (<div class="topnav nh-slot">: the guides and their hub, the calculators, Vita,
   the YEG Map, the Rohit and listing pages) keeps the same room by the same step — one rule for both, so the header lands
   without moving anything on any page (t-222, Oct 18: those slots were a fixed 58 or 63 px in each page's stylesheet). */
html.sn-wait .sn-static{display:block;visibility:hidden;container-type:inline-size;}
html.sn-wait .sn-static>a{display:none;}
.nh-slot{display:block;container-type:inline-size;}
html.sn-wait .sn-static::before,.nh-slot::before{content:"";display:block;height:calc(57px + env(safe-area-inset-top,0px));}
@supports (container-type:inline-size){
  /* Oct 25, 2026: the bar's padding is the column's (5vw a side, 64 px from 1280), so the row fits from a wider bar than
     before (918.48 / 923.8 px at 3.5vw) — the numbers below are scripts/static-nav-fit.mjs's for the new bar; Oct 27: the
     row's "About Us" (was "Our Team") is narrower, so it fits from 954.27 / 960.27 px + .5385 px per px of scrollbar */
  html.sn-wait .sn-static::before,.nh-slot::before{height:calc(57px + env(safe-area-inset-top,0px) + clamp(0px, (100cqw - 960.27px - .5385 * (100vw - 100cqw)) * 1000, 1px));}
  html.sn-wait:not(.sar-dark) .sn-static::before,html:not(.sar-dark) .nh-slot::before{height:calc(57px + env(safe-area-inset-top,0px) + clamp(0px, (100cqw - 954.27px - .5385 * (100vw - 100cqw)) * 1000, 1px));}
}
@supports not (container-type:inline-size){
  @media (min-width:955px){html.sn-wait:not(.sar-dark) .sn-static::before,html:not(.sar-dark) .nh-slot::before{height:calc(58px + env(safe-area-inset-top,0px));}}
  @media (min-width:961px){html.sn-wait .sn-static::before,.nh-slot::before{height:calc(58px + env(safe-area-inset-top,0px));}}
}
.sn-static-foot{display:none;}
/* a page that keeps the header's room in its own slot (the generated pages, the YEG Map): its plain menu takes none */
html.sn-wait .sn-static-free{display:none;}
html:not(.sn-wait) .nh-slot:has(~ .sn-static-free){display:none;}   /* site-nav.js never ran: the plain menu stands at the top */
html:not(.sn-wait) .sn-static{display:flex;flex-wrap:wrap;gap:2px 18px;overflow:hidden;box-sizing:border-box;padding:14px var(--col-edge) 12px;background:#544E2E;font:11px/2.2 Jost,sans-serif;letter-spacing:.12em;text-transform:uppercase;}
html:not(.sn-wait) .sn-static a[href]{color:#F4F3EE;text-decoration:none;}
html:not(.sn-wait) .sn-static a:first-child{flex:0 0 100%;font:300 22px/1.5 Spectral,serif;letter-spacing:0;text-transform:none;}
html:not(.sn-wait) .sn-static-foot{display:block;box-sizing:border-box;padding:26px var(--col-edge) 30px;background:#E6E3D7;border-top:1px solid rgba(84,78,46,.2);}
html:not(.sn-wait) .sn-static-foot p{margin:0 0 4px;max-width:none;font:12px/1.9 Jost,sans-serif;letter-spacing:.04em;color:#4A4536;}
html:not(.sn-wait) .sn-static-foot a[href]{color:#26231A;}
/* dark (site-nav.js never ran): the dark header's and footer's colours */
html.sar-dark:not(.sn-wait) .sn-static{background:#100F0A;border-bottom:1px solid rgba(232,232,227,.12);}
html.sar-dark:not(.sn-wait) .sn-static-foot{background:#100F0A;border-top-color:rgba(179,170,141,.18);}
html.sar-dark:not(.sn-wait) .sn-static-foot p{color:#D5D0BF;}
html.sar-dark:not(.sn-wait) .sn-static-foot a[href]{color:#F4F3EE;}
/* "Skip to content" — the first thing on every page (scripts/static-nav.mjs writes it before the plain menu; the generated
   pages write the same link): off-screen until it has focus. It lands on <main id="main" tabindex="-1">, which takes focus
   without a ring round the whole page (Oct 25, 2026) */
.skip{position:absolute;left:-999px;top:8px;z-index:9999;padding:10px 14px;border-radius:10px;background:#544E2E;color:#F4F3EE;font:12px/1.4 Jost,sans-serif;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;}
.skip:focus{left:12px;}
html.sar-dark .skip{background:#B3AA8D;color:#100F0A;}
main[tabindex="-1"]:focus{outline:none;}

/* ---------- full-screen overlay menu ---------- */
html:not(.sar-dark) #sn-overlay{background:rgb(239,237,229) !important;} /* opaque: the page showed through the menu (Oct 11 phone audit) */
html:not(.sar-dark) #sn-overlay a{color:#26231A !important;}
html:not(.sar-dark) #sn-overlay a.v3-mcta{color:#F4F3EE !important;} /* the olive button keeps cream words (they were ink on olive, Oct 11) */
html:not(.sar-dark) #sn-overlay .sn-sub{color:#544E2E !important;}
html:not(.sar-dark) #sn-overlay .sn-meta{color:#67614B !important;}
html:not(.sar-dark) #sn-overlay .sn-accent,
html:not(.sar-dark) #sn-overlay a.sn-on{color:#5F6654 !important;}

/* ---------- theme toggle pill (built by site-nav.js) ---------- */
.sn-thm{display:flex;align-items:center;gap:8px;background:rgba(232,232,227,.07);border:1px solid rgba(232,232,227,.2);color:#E8E8E3;font-family:Jost,sans-serif;font-size:9px;letter-spacing:.22em;text-transform:uppercase;padding:8px 13px;border-radius:40px;cursor:pointer;white-space:nowrap;flex:0 0 auto;transition:border-color .3s,color .3s;}
.sn-thm:hover{border-color:#B3AA8D;color:#B3AA8D;}
.sn-thm svg{width:12px;height:12px;display:block;flex:none;}
.sn-nav .sn-thm svg{width:12px;height:12px;}   /* only the size (display stays with the sun/moon rules below): outranks a page's own svg size (.vx svg, body.cm svg: 18 px, which made the header 63 px on a computer — t-222) */
.sn-nav .sn-home svg{width:14px;height:14px;}   /* its own 14 px on every page (those pages drew it at 18) */
.sn-thm .sn-sun{display:none;}
html.sar-dark .sn-thm .sn-sun{display:block;}
html.sar-dark .sn-thm .sn-moon{display:none;}
html:not(.sar-dark) .sn-thm{background:rgba(244,243,238,.08);border-color:rgba(244,243,238,.28);color:#F4F3EE;}
html:not(.sar-dark) .sn-thm:hover{border-color:#F4F3EE;color:#F4F3EE;}
@media(max-width:520px){.sn-thm .sn-thm-lbl{display:none;}.sn-thm{padding:8px 9px;}}

/* ---------- floating pill quickbar (all sub-pages, both themes) ---------- */
#quickbar{left:12px !important;right:12px !important;bottom:calc(10px + env(safe-area-inset-bottom)) !important;border-radius:999px;overflow:hidden;border:1px solid rgba(179,170,141,.28);border-top:1px solid rgba(179,170,141,.28) !important;box-shadow:0 18px 44px -16px rgba(0,0,0,.6);padding-bottom:0 !important;}
html:not(.sar-dark) #quickbar{border-color:rgba(244,243,238,.25) !important;box-shadow:0 18px 44px -18px rgba(60,54,32,.6);}
@media(max-width:900px){body{padding-bottom:calc(78px + env(safe-area-inset-bottom)) !important;}}
@media(max-width:460px){ /* the pill bar is 24px narrower — keep all three labels on one line */
  #quickbar a{font-size:9.5px !important;letter-spacing:.09em !important;gap:5px !important;white-space:nowrap;}
  #quickbar .qb-book{flex:1.5 !important;}
}
/* button labels stay centered even when they wrap to two lines (a-tags don't inherit button centering) */
#quickbar a,a.btn,.btn,.ghost,.lm-ghost,.lm-cta,.cta,.herocta,.qb-book,.invreq,.mpop-btn,.hmore-btn{text-align:center;}

/* ---------- live-signal pills: sage-deep in light ---------- */
html:not(.sar-dark) .fthb-pill{background:#5F6654 !important;color:#F4F3EE !important;border-color:#5F6654 !important;}

/* ---------- class/element layer (guide + team generators & hand-built pages
              share one dark design vocabulary; remap it wholesale) ---------- */
html:not(.sar-dark) h1,
html:not(.sar-dark) h2,
html:not(.sar-dark) h3,
html:not(.sar-dark) summary{color:#26231A !important;}
html:not(.sar-dark) .lede{color:#544E2E !important;}
html:not(.sar-dark) p,
html:not(.sar-dark) ul.plain li,
html:not(.sar-dark) .wrap li,
html:not(.sar-dark) details p{color:#4A4536 !important;}
/* privacy / terms bullets (plain <li> inside .wrap) and their bold lead-ins were left at #c9c4b4 on the light ground —
   1.5:1, barely visible (found Oct 8; checked page by page in scripts/subpages.test.mjs since) */
html:not(.sar-dark) .wrap li strong{color:#26231A !important;}
html:not(.sar-dark) .eyebrow{color:#544E2E !important;}
html:not(.sar-dark) section{border-bottom-color:rgba(84,78,46,.14) !important;}
html:not(.sar-dark) ul.plain li{border-bottom-color:rgba(84,78,46,.14) !important;}
html:not(.sar-dark) details{border-bottom-color:rgba(84,78,46,.18) !important;}
/* facts grid */
html:not(.sar-dark) .facts{background:rgba(84,78,46,.18) !important;border-color:rgba(84,78,46,.18) !important;}
html:not(.sar-dark) .fact{background:#E6E3D7 !important;}
html:not(.sar-dark) .fact b{color:#67614B !important;}
html:not(.sar-dark) .fact span{color:#26231A !important;}
/* inventory rail cards */
html:not(.sar-dark) .lc{background:#E6E3D7 !important;border-color:rgba(84,78,46,.25) !important;}
html:not(.sar-dark) .lc .a{color:#26231A !important;}
html:not(.sar-dark) .lc .h,
html:not(.sar-dark) .lc .p{color:#544E2E !important;}
/* notes, buttons, legal, quickbar */
html:not(.sar-dark) .note{background:#E6E3D7 !important;border-left-color:#544E2E !important;color:#4A4536 !important;}
html:not(.sar-dark) .ghost{color:#544E2E !important;border-color:rgba(84,78,46,.4) !important;}
html:not(.sar-dark) .ghost:hover{color:#26231A !important;border-color:#544E2E !important;}
html:not(.sar-dark) .legal-strip{background:#E6E3D7 !important;border-top-color:rgba(84,78,46,.2) !important;color:#67614B !important;}
html:not(.sar-dark) #quickbar{background:#544E2E !important;border-top-color:rgba(244,243,238,.18) !important;}
html:not(.sar-dark) #quickbar a{color:#F4F3EE !important;}
html:not(.sar-dark) #quickbar a + a{border-left-color:rgba(244,243,238,.18) !important;}
html:not(.sar-dark) #quickbar .qb-book{background:#B3AA8D !important;color:#100F0A !important;}
html:not(.sar-dark) ::selection{background:#544E2E;color:#F4F3EE;}
/* bare content links (guides): wheat -> olive. Deliberately NOT !important so any
   more-specific page rule (CTA buttons, quickbar links) keeps its own colors. */
html:not(.sar-dark) a{color:#544E2E;}
/* the sand button keeps its own ink (its .cta rule is less specific than the line above, so olive-on-sand shipped at 3.6:1 on
   the guides and the team profiles — audit C H3 / D A4b, Oct 24); hover is the pale stone, ink stays */
html:not(.sar-dark) a.cta{color:#100F0A;}
/* resources page article-list titles */
html:not(.sar-dark) .ga{color:#26231A !important;}
html:not(.sar-dark) a:hover .ga{color:#544E2E !important;}
/* buyer/seller guide callout boxes */
html:not(.sar-dark) .callout{background:#E6E3D7 !important;border-color:rgba(84,78,46,.3) !important;}
html:not(.sar-dark) .callout .ce{color:#544E2E !important;}
/* zoning / YEG-map page cards + controls */
html:not(.sar-dark) .zc{background:#E6E3D7 !important;border-color:rgba(84,78,46,.22) !important;}
html:not(.sar-dark) .zbtn{background:rgba(239,237,229,.85) !important;color:#26231A !important;border-color:rgba(84,78,46,.35) !important;}
/* area filter pills (communities hub) — .on keeps its sand bg + dark text */
html:not(.sar-dark) .pill:not(.on){color:#544E2E !important;border-color:rgba(84,78,46,.35) !important;background:rgba(84,78,46,.05) !important;}
html:not(.sar-dark) .pill:not(.on):hover{color:#26231A !important;border-color:#544E2E !important;}
/* inventory filter pills (rohit-homes) */
html:not(.sar-dark) .invpill{color:#544E2E !important;border-color:rgba(84,78,46,.35) !important;}
html:not(.sar-dark) .invclear{color:#544E2E !important;}
/* legacy nav-link class (also reused in some page footers) */
html:not(.sar-dark) .tn{color:#544E2E !important;}
html:not(.sar-dark) .tn:hover{color:#26231A !important;}
/* calculators (shared result-panel classes across all 4) */
html:not(.sar-dark) .headline{color:#544E2E !important;}
html:not(.sar-dark) .rv2{color:#26231A !important;}
html:not(.sar-dark) .rl{color:#67614B !important;}
html:not(.sar-dark) .xlink{color:#544E2E !important;border-color:rgba(84,78,46,.4) !important;}
html:not(.sar-dark) .xlink:hover{color:#26231A !important;border-color:#544E2E !important;}
/* form fields on light */
html:not(.sar-dark) input,
html:not(.sar-dark) select,
html:not(.sar-dark) textarea{background-color:#E6E3D7 !important;color:#26231A !important;border-color:rgba(84,78,46,.35) !important;}
html:not(.sar-dark) input::placeholder,
html:not(.sar-dark) textarea::placeholder{color:#67614B !important;}

/* — July 10 audit: page-local dark hexes the remap missed (community + team cards, 404 legal strip) — */
html:not(.sar-dark) .cc{background:#FBFAF4 !important;border-color:rgba(84,78,46,.22) !important;border-radius:16px;overflow:hidden;}
html:not(.sar-dark) .cc:hover{border-color:rgba(84,78,46,.5) !important;}
html:not(.sar-dark) .cc .e{color:#67614B !important;}
html:not(.sar-dark) .cc .n{color:#26231A !important;}
html:not(.sar-dark) .cc .d{color:#4A4536 !important;}
html:not(.sar-dark) .cc .r{color:#544E2E !important;}
html:not(.sar-dark) .cc .t{color:#67614B !important;}
html:not(.sar-dark) .ct{background:linear-gradient(180deg,rgba(84,78,46,.06),rgba(84,78,46,0)) !important;border-bottom-color:rgba(84,78,46,.14) !important;}
html:not(.sar-dark) .ct path{stroke:#544E2E !important;fill:rgba(84,78,46,.08) !important;}
html:not(.sar-dark) .cc:hover .ct path{fill:rgba(84,78,46,.16) !important;}
html:not(.sar-dark) .ct.ctf span{color:#544E2E !important;border-color:rgba(84,78,46,.35) !important;}
html:not(.sar-dark) .cbadge{background:#476951 !important;color:#F4F3EE !important;}
html:not(.sar-dark) .cmap{color:#544E2E !important;border-color:rgba(84,78,46,.35) !important;}
html:not(.sar-dark) .legal{background:transparent !important;border-top-color:rgba(84,78,46,.18) !important;color:#67614B !important;}
/* — July 11 audit: sn-overlay pieces the light pass missed (invisible close, wheat-on-linen accents) — */
html:not(.sar-dark) #sn-overlay .sn-accent{color:#544E2E !important;}
html:not(.sar-dark) #sn-overlay a.sn-on{color:#544E2E !important;}
html:not(.sar-dark) #sn-overlay .sn-i:active,
html:not(.sar-dark) #sn-overlay .sn-sub:active{color:#544E2E !important;}
html:not(.sar-dark) #sn-close span{background:#26231A !important;}
/* — July 11: the calculators' result panel uses a gradient bg, which no solid-hex remap matches — */
html:not(.sar-dark) [style*="background:linear-gradient(180deg,#1b1709"]{background:linear-gradient(180deg,#EDEAE0,#E6E3D7) !important;}
/* — July 11 council rule, site-wide: in light mode every sand-filled ACTION converts to brand olive
   (sand remains the dark theme's action voice; spans/tags unaffected) — */
html:not(.sar-dark) a[style*="background:#B3AA8D"],
html:not(.sar-dark) button[style*="background:#B3AA8D"]{background:#544E2E !important;color:#F4F3EE !important;}
html:not(.sar-dark) a[style*="background:#B3AA8D"]:hover,
html:not(.sar-dark) button[style*="background:#B3AA8D"]:hover{background:#3E3A26 !important;}
/* light mode: brand-tone the calculators' stock hero photos (off-brand reds/blues muted to the warm register) */
html:not(.sar-dark) [style*="hero.webp"]{filter:saturate(.3) sepia(.22) brightness(1.04);}
/* rgb() twins — JS-touched inline styles serialize hex to rgb() and escape the hex selectors */
html:not(.sar-dark) a[style*="background: rgb(179, 170, 141)"],
html:not(.sar-dark) button[style*="background: rgb(179, 170, 141)"]{background:#544E2E !important;color:#F4F3EE !important;}
html:not(.sar-dark) a[style*="background: rgb(179, 170, 141)"]:hover,
html:not(.sar-dark) button[style*="background: rgb(179, 170, 141)"]:hover{background:#3E3A26 !important;}

/* keyboard focus indicator — visible on ink (dark) and stone (light) surfaces alike */
:focus-visible{outline:2px solid #B3AA8D;outline-offset:2px;}
html:not(.sar-dark) :focus-visible{outline-color:#544E2E;}

/* ====================================================================================================================
   October 6 2026 — ONE LOOK on every inner page, taken from the new homepage (Fadi: "inspired by our new home page").
   Actions are pills, inputs 12px, cards 16px; the faintest captions step up one shade; the empty band under the header
   on phones is trimmed. Applied by class and by the inline-style signatures the fleet uses (same mechanism as the light
   remaps above). The MLS® search and the Rohit inventory already use these shapes.
   ==================================================================================================================== */
/* actions → pills */
a.btn,.btn,.cta,.ghost,.lm-cta,.lm-ghost,.qb-book,.invreq,.ei-btn,.ipage,#mg_use,
button[style*="background:#B3AA8D"],a[style*="background:#B3AA8D"],a[style*="border:1px solid rgba(232,232,227,.3"],a[style*="border:1px solid rgba(232,232,227,.28"],a[style*="border:1px solid rgba(232,232,227,.35"]{border-radius:999px !important;}
.xlink{border-radius:999px;}
/* inputs and selects → 12px */
.calc-in,.inwrap,.selx,input.selx,select.selx,input[type="email"][class*="sel"],.lm-in{border-radius:12px !important;}
/* cards → 16px (inline-styled cards, the contact cards, the guide and calculator panels, article tiles) */
[style*="background:#100F0A; border:1px solid rgba(179,170,141"],[style*="background:#14130D; border:1px solid rgba(179,170,141"],[style*="background:#161409; border:1px solid rgba(179,170,141"],
[style*="background:#100F0A; border:1px dashed rgba(179,170,141"],[style*="border:1px solid rgba(179,170,141,.2); background:#14130D"],
.ccard,.gd,.callout,.imgwrap,.lc,.invcard,.invskel,[style*="background:linear-gradient(180deg,#1b1709"]{border-radius:16px;overflow:hidden;}
.imgwrap img,.ccard img,.lc img{border-radius:0;}
.note{border-radius:0 12px 12px 0;}
/* the faintest captions (9–9.5px #6b6755) step up one shade; still muted, now readable */
[style*="color:#6b6755"]{color:#8a8571 !important;}
/* phones: the empty band under the header (hero padding meant for computers) is trimmed */
@media (max-width:640px){
  [style*="padding:clamp(86px,15vh,140px)"],[style*="padding:clamp(80px,15vh,140px)"]{padding-top:40px !important;}
  body > .wrap,body > main > .wrap,.wrap[style*="padding:clamp(70px,14vh,130px)"]{padding-top:34px !important;}   /* (.wrap sits inside <main id="main"> since Oct 25, 2026) */
}

/* ---------- the valuation card (three steps), as on the homepage's Sell panel; used by sellers-guide.html ---------- */
.vz{--line:rgba(179,170,141,.2);--line2:rgba(232,232,227,.16);--ink:#F4F3EE;--ink2:#D5D0BF;--mut:#9a957f;--acc:#B3AA8D;--btn:#B3AA8D;--btn-h:#E8E8E3;--btn-ink:#100F0A;--scrim:16,15,10;}
html:not(.sar-dark) .vz{--line:rgba(84,78,46,.22);--line2:rgba(38,35,26,.2);--ink:#26231A;--ink2:#4A4536;--mut:#67614B;--acc:#544E2E;--btn:#544E2E;--btn-h:#3E3A26;--btn-ink:#F4F3EE;--scrim:239,237,229;}
.vz .v3-wiz{display:grid;grid-template-columns:minmax(0,1.75fr) minmax(0,1fr);border:1px solid var(--line);border-radius:20px;background:rgba(var(--scrim),.74);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);overflow:hidden;}
.vz .v3-wiz-main{display:flex;flex-direction:column;min-width:0;padding:clamp(20px,2.4vw,32px);}
.vz .v3-wiz-aside{padding:clamp(20px,2.4vw,32px);border-left:1px solid var(--line);display:flex;flex-direction:column;gap:14px;}
.vz .v3-wiz-aside ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px;}
.vz .v3-wiz-aside li{display:flex;gap:12px;font-family:Jost,sans-serif;font-size:14px;line-height:1.5;color:var(--ink2);}
.vz .v3-wiz-aside li::before{content:"\2014";color:var(--acc);flex:none;}
.vz .v3-wiz-aside .v3-cap-2{margin-top:auto;padding-top:14px;border-top:1px solid var(--line);}
.vz .v3-wiz-aside .v3-cap-p{margin:6px 0 0;font-family:Jost,sans-serif;font-size:13px;line-height:1.55;color:var(--mut);}
.vz .v3-cap{font-family:Jost,sans-serif;font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--mut);}
.vz .v3-wiz-prog{display:flex;align-items:center;gap:14px;font-family:Jost,sans-serif;font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--mut);}
.vz .v3-wiz-prog i{flex:1;height:1px;background:var(--line);}
.vz .v3-wiz-q{display:block;font-family:Spectral,serif;font-weight:500;font-size:clamp(22px,2vw,28px);line-height:1.15;color:var(--ink);margin:clamp(14px,2.4vh,24px) 0 clamp(8px,1.4vh,14px);}
.vz .v3-wiz-in{width:100%;background:transparent;border:none;border-bottom:1px solid var(--line2);border-radius:0 !important;padding:10px 0 12px;font-family:Jost,sans-serif;font-size:16px;color:var(--ink);outline:none;}
.vz .v3-wiz-in:focus{border-bottom-color:var(--acc);}
.vz .v3-wiz-in::placeholder{color:var(--mut);}
.vz .v3-chips{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 0;}
.vz .v3-chip{height:44px;padding:0 17px;border-radius:999px;border:1px solid var(--line2);background:transparent;color:var(--ink2);font-family:Jost,sans-serif;font-size:13.5px;cursor:pointer;transition:background .25s,border-color .25s,color .25s;}
.vz .v3-chip:hover{border-color:var(--acc);}
.vz .v3-chip[aria-checked="true"]{background:var(--btn);border-color:var(--btn);color:var(--btn-ink);}
.vz .v3-wiz-hp{position:absolute !important;left:-5000px;width:1px;height:1px;opacity:0;}
.vz .v3-wiz-steps{display:grid;flex:1;align-items:center;margin:0 0 clamp(14px,2.4vh,22px);}
.vz .v3-wiz-step{grid-area:1/1;min-width:0;}
.vz .v3-wiz-step[hidden]{display:block !important;visibility:hidden;pointer-events:none;}
.vz .v3-wiz-step.on{animation:vzstep .4s ease both;}
@keyframes vzstep{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}
.vz .v3-wiz-recap{margin:14px 0 0;font-family:Jost,sans-serif;font-size:13.5px;line-height:1.5;color:var(--mut);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.vz .v3-wiz-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px 22px;}
.vz .v3-wiz-f{display:block;min-width:0;}
.vz .v3-wiz-f>span{display:block;font-family:Jost,sans-serif;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--mut);}
.vz .v3-wiz-f>span i{font-style:normal;letter-spacing:.08em;text-transform:none;opacity:.8;}
.vz .v3-wiz-f .v3-wiz-in{padding:6px 0 9px;line-height:24px;}   /* one line box for inputs and selects, in Jost or the fallback alike: the select grew 6 px while Jost was on its way (Oct 26, 2026) */
.vz .v3-wiz-consent{display:flex;align-items:flex-start;gap:11px;margin-top:14px;font-family:Jost,sans-serif;font-size:12.5px;line-height:1.5;color:var(--mut);cursor:pointer;}
.vz .v3-wiz-grid--4{grid-template-columns:1fr 1.15fr 1fr .7fr;column-gap:16px;}   /* review #13, Oct 23: name, email, or phone, reach me by */
.vz .v3-wiz-f .v3-wiz-sel{-webkit-appearance:none;appearance:none;cursor:pointer;padding-right:18px;background:linear-gradient(45deg,transparent 50%,var(--mut) 50%) calc(100% - 9px) 55%/5px 5px no-repeat,linear-gradient(135deg,var(--mut) 50%,transparent 50%) calc(100% - 4px) 55%/5px 5px no-repeat transparent;}
.vz .v3-wiz-sel option{color:#100F0A;background:#E8E8E3;}
.vz .v3-wiz-consent input{flex:none;width:18px;height:18px;margin:1px 0 0;accent-color:var(--acc);}
.vz .v3-wiz-big{margin-top:12px;font-family:Spectral,serif;font-weight:500;font-size:clamp(30px,2.9vw,38px);line-height:1.1;color:var(--ink);outline:none;}
.vz .v3-wiz-big em{font-style:italic;font-weight:400;color:var(--acc);}
.vz .v3-wiz-done p{margin:12px 0 0;font-family:Jost,sans-serif;font-size:15px;line-height:1.6;color:var(--ink2);max-width:44ch;}
.vz .v3-wiz-again{margin-top:16px;min-height:44px;padding:0 0 3px;background:none;border:none;border-bottom:1px solid var(--line2);font-family:Jost,sans-serif;font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink2);cursor:pointer;}
.vz .v3-wiz-again:hover{color:var(--acc);border-bottom-color:var(--acc);}
.vz .v3-wiz-err{margin:0 0 12px;font-family:Jost,sans-serif;font-size:12.5px;letter-spacing:.02em;line-height:1.4;color:#e0a07c;}
html:not(.sar-dark) .vz .v3-wiz-err{color:#9a4a22;}
.vz .v3-wiz-ctl{display:flex;align-items:center;gap:14px 26px;flex-wrap:wrap;min-height:50px;}
.vz .v3-wiz-ctl[hidden]{display:flex !important;visibility:hidden;}
.vz .v3-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:0 28px;font-family:Jost,sans-serif;font-size:12px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;text-decoration:none;cursor:pointer;color:var(--btn-ink);background:var(--btn);border:1px solid var(--btn);border-radius:999px;transition:opacity .3s ease,background .25s ease,border-color .25s ease;}
.vz .v3-btn:hover{background:var(--btn-h);border-color:var(--btn-h);}
.vz #sw-next[aria-disabled="true"]{opacity:.42;cursor:default;}
.vz #sw-next[aria-disabled="true"]:hover{background:var(--btn);border-color:var(--btn);}
.vz .v3-wiz-back{min-height:44px;padding:0 4px;background:none;border:none;font-family:Jost,sans-serif;font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink2);cursor:pointer;}
.vz .v3-wiz-back:hover{color:var(--acc);}
.vz .v3-wiz-back span{padding-right:6px;}
.vz .v3-wiz-main :focus-visible{outline:1px solid var(--acc);outline-offset:3px;}
@media (max-width:860px){.vz .v3-wiz{grid-template-columns:1fr;} .vz .v3-wiz-aside{border-left:none;border-top:1px solid var(--line);} .vz .v3-wiz-grid{grid-template-columns:1fr;}}
@media (prefers-reduced-motion:reduce){.vz .v3-wiz-step.on{animation:none;}}

/* ---------- the contact form (Buy / Sell / Build / Other), used by contact.html ---------- */
.cf{--line:rgba(179,170,141,.2);--line2:rgba(232,232,227,.16);--ink:#F4F3EE;--ink2:#D5D0BF;--mut:#9a957f;--acc:#B3AA8D;--btn:#B3AA8D;--btn-h:#E8E8E3;--btn-ink:#100F0A;--card:#14130D;}
html:not(.sar-dark) .cf{--line:rgba(84,78,46,.22);--line2:rgba(38,35,26,.2);--ink:#26231A;--ink2:#4A4536;--mut:#67614B;--acc:#544E2E;--btn:#544E2E;--btn-h:#3E3A26;--btn-ink:#F4F3EE;--card:#FBFAF4;}
.cf-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(16px,2vw,24px);align-items:start;}
.cf-card{border:1px solid var(--line);border-radius:16px;background:var(--card);padding:clamp(24px,2.8vw,36px);display:flex;flex-direction:column;gap:16px;min-width:0;}
/* one spacing scale for the form (Fadi, Oct 7: "make it pitch perfect"): 28px between groups, 8px caption-to-field, 52px fields */
.cf-form{display:flex;flex-direction:column;gap:28px;}
.cf-cap{font-family:Jost,sans-serif;font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--mut);}
.cf-chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px;}
.cf-chip{height:44px;padding:0 17px;border-radius:999px;border:1px solid var(--line2);background:transparent;color:var(--ink2);font-family:Jost,sans-serif;font-size:13.5px;cursor:pointer;transition:background .25s,border-color .25s,color .25s;}
.cf-chip:hover{border-color:var(--acc);}
.cf-chip[aria-checked="true"]{background:var(--btn);border-color:var(--btn);color:var(--btn-ink);}
.cf-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;}
.cf-f{display:block;min-width:0;}
.cf-f>span{display:block;font-family:Jost,sans-serif;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--mut);margin-bottom:8px;}
.cf-f>span i{font-style:normal;letter-spacing:.08em;text-transform:none;opacity:.8;}
.cf-in{width:100%;box-sizing:border-box;height:52px;background:transparent;border:1px solid var(--line2);border-radius:12px !important;padding:0 16px;font-family:Jost,sans-serif;font-size:16px;color:var(--ink);outline:none;}
.cf-in:focus{border-color:var(--acc);}
.cf-in::placeholder{color:var(--mut);}
textarea.cf-in{display:block;height:auto;min-height:132px;padding:14px 16px;line-height:1.5;resize:vertical;}
.cf-consent{display:flex;align-items:flex-start;gap:11px;font-family:Jost,sans-serif;font-size:12.5px;line-height:1.5;color:var(--mut);cursor:pointer;}
.cf-consent input{flex:none;width:18px;height:18px;margin:1px 0 0;accent-color:var(--acc);}
.cf-err{font-family:Jost,sans-serif;font-size:12.5px;line-height:1.4;color:#e0a07c;}
html:not(.sar-dark) .cf-err{color:#9a4a22;}
.cf-ctl{display:flex;align-items:center;gap:14px 20px;flex-wrap:wrap;}
.cf-ctl .cf-note{font-family:Jost,sans-serif;font-size:12.5px;color:var(--mut);}
.cf-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 28px;font-family:Jost,sans-serif;font-size:12px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;cursor:pointer;color:var(--btn-ink);background:var(--btn);border:1px solid var(--btn);border-radius:999px;transition:opacity .3s ease,background .25s ease;}
.cf-btn:hover{background:var(--btn-h);border-color:var(--btn-h);}
.cf-btn[aria-disabled="true"]{opacity:.5;cursor:default;}
.cf-done{display:none;flex-direction:column;gap:12px;padding:clamp(12px,3vh,30px) 0;}
.cf-done b{font-family:Spectral,serif;font-weight:500;font-size:clamp(30px,3.6vw,40px);line-height:1.05;color:var(--acc);}
.cf-done p{margin:0;font-family:Jost,sans-serif;font-size:16px;line-height:1.65;color:var(--ink2);max-width:46ch;}
.cf.sent .cf-form{display:none;} .cf.sent .cf-done{display:flex;}
.cf-aside{display:flex;flex-direction:column;gap:14px;}
.cf-box{border:1px solid var(--line);border-radius:14px;padding:22px 24px;display:flex;flex-direction:column;gap:12px;}
.cf-box .cf-big{font-family:Spectral,serif;font-size:26px;color:var(--ink);text-decoration:none;}
.cf-box .cf-big:hover{color:var(--acc);}
.cf-box a.cf-mail{font-family:Jost,sans-serif;font-size:14.5px;color:var(--ink2);text-decoration:none;}
.cf-box a.cf-mail:hover{color:var(--acc);}
.cf-box .cf-sub{display:flex;flex-direction:column;gap:4px;padding-top:12px;border-top:1px solid var(--line);font-family:Jost,sans-serif;font-size:14px;color:var(--mut);line-height:1.5;}
.cf-box .cf-sub b{font-weight:400;color:var(--ink2);}
.cf-hr{display:flex;align-items:baseline;justify-content:space-between;gap:14px;font-family:Jost,sans-serif;font-size:14px;color:var(--ink2);}
.cf-hr span:last-child{color:var(--mut);}
.cf-team a{display:flex;align-items:baseline;justify-content:space-between;gap:14px;font-family:Jost,sans-serif;font-size:14.5px;color:var(--ink2);text-decoration:none;padding:3px 0;}
.cf-team a:hover{color:var(--acc);}
.cf-team a span:last-child{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--mut);}
@media (max-width:900px){.cf-grid{grid-template-columns:1fr;}}

/* ---------- light mode has NO dark features (Fadi, Oct 7): the page-level card classes that theme.css's inline remaps
   never reached — the Sell page's "What your listing gets" tiles, move-up callout and guide cards, the Contact page's
   call/text/WhatsApp/email cards — take the linen card, the ink text and the olive accent. Found and guarded by
   scripts/light-mode-audit.mjs ---------- */
html:not(.sar-dark) .gets li,html:not(.sar-dark) .callout,html:not(.sar-dark) .guide,html:not(.sar-dark) .ccard{background:#FBFAF4 !important;border-color:rgba(84,78,46,.22) !important;}
html:not(.sar-dark) .guide:hover,html:not(.sar-dark) .ccard:hover{border-color:#544E2E !important;}
html:not(.sar-dark) .gets li b,html:not(.sar-dark) .callout h3,html:not(.sar-dark) .guide .gt,html:not(.sar-dark) .ccard .cv{color:#26231A !important;}
html:not(.sar-dark) .gets li span,html:not(.sar-dark) .callout p,html:not(.sar-dark) .guide .gd{color:#4A4536 !important;}
html:not(.sar-dark) .callout .ce,html:not(.sar-dark) .guide .gk,html:not(.sar-dark) .guide .ga,html:not(.sar-dark) .ccard .ci,html:not(.sar-dark) .ccard .ca{color:#544E2E !important;}
html:not(.sar-dark) .ccard .ck{color:#67614B !important;}

/* ---------- the monthly-edit sign-up boxes (Resources, the Journal): fields and button at one height, one row on a
   computer, stacked on phones (Fadi, Oct 7: "the pills for the names … need better sizing ratios"). The pages' inline
   styles are overridden here so both boxes stay identical. ---------- */
.nl{--line:rgba(232,232,227,.22);--ink:#F4F3EE;--mut:#9a957f;--acc:#B3AA8D;--btn-ink:#100F0A;--btn-h:#E8E8E3;
  display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr) auto!important;gap:12px!important;align-items:center;max-width:680px!important;}
html:not(.sar-dark) .nl{--line:rgba(84,78,46,.3);--ink:#26231A;--mut:#67614B;--acc:#544E2E;--btn-ink:#F4F3EE;--btn-h:#3E3A26;}
.nl .nl-name,.nl .nl-email{height:52px;box-sizing:border-box;border-radius:12px!important;padding:0 16px!important;font-family:Jost,sans-serif!important;font-size:15.5px!important;background:transparent!important;border:1px solid var(--line)!important;color:var(--ink)!important;outline:none;}
.nl .nl-name:focus,.nl .nl-email:focus{border-color:var(--acc)!important;}
.nl .nl-name::placeholder,.nl .nl-email::placeholder{color:var(--mut);}
.nl .nl-btn{height:52px;min-height:52px!important;padding:0 28px!important;border-radius:999px!important;background:var(--acc)!important;color:var(--btn-ink)!important;white-space:nowrap;}
.nl .nl-btn:hover{background:var(--btn-h)!important;}
.nl label{grid-column:1/-1;margin-top:6px;color:var(--mut)!important;}
.nl .nl-err{grid-column:1/-1;}
@media (max-width:720px){.nl{grid-template-columns:minmax(0,1fr)!important;gap:10px!important;} .nl .nl-btn{width:100%;}}

/* ---------- the accordion: ONE expandable list for the whole site (Oct 7) ----------
   Numbered rows under hairlines, one open at a time (<details name="…">), the plus turns into a cross, the open
   row's title takes the accent. Opening pushes only what is below it — never a grid of cards (a grid stretches
   every card in the row to the open one's height). .acc-sec = the editorial layout: the section's head on the
   left, sticky on a computer; the rows on the right; stacked on phones. First use: sellers-guide.html (six moves);
   next: the Buyer's Guide steps, the New Builds timeline, the guides' questions, the calculators' notes. */
.acc-sec{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,5vw,80px);align-items:start;}
.acc-sec>.head{position:sticky;top:96px;margin-bottom:0;}
@media (max-width:900px){.acc-sec{grid-template-columns:minmax(0,1fr);gap:6px;} .acc-sec>.head{position:static;margin-bottom:10px;}}
.acc{--line:rgba(179,170,141,.22);--ink:#F4F3EE;--ink2:#D5D0BF;--mut:#9a957f;--acc:#B3AA8D;margin:0;padding:0;border-top:1px solid var(--line);}
html:not(.sar-dark) .acc{--line:rgba(84,78,46,.24);--ink:#26231A;--ink2:#4A4536;--mut:#67614B;--acc:#544E2E;}
.acc>details{border-bottom:1px solid var(--line);transition:border-color .3s ease;}
.acc>details[open]{border-bottom-color:var(--acc);}
.acc>details>summary{list-style:none;cursor:pointer;display:flex;align-items:baseline;gap:18px;padding:22px 4px 22px 0;}
.acc>details>summary::-webkit-details-marker{display:none;}
.acc>details>summary>b{flex:none;width:34px;font-family:Jost,sans-serif;font-weight:400;font-size:11px;letter-spacing:.22em;color:var(--mut);}
.acc>details>summary>span{flex:1;font-family:Spectral,serif;font-weight:500;font-size:clamp(19px,1.6vw,23px);line-height:1.2;color:var(--ink);transition:color .3s ease;}
.acc>details>summary:hover>span,.acc>details[open]>summary>span{color:var(--acc);}
.acc>details>summary>i{flex:none;font-style:normal;font-family:Jost,sans-serif;font-weight:300;font-size:22px;line-height:1;color:var(--mut);transition:transform .3s ease,color .3s ease;}
.acc>details[open]>summary>i{transform:rotate(45deg);color:var(--acc);}
.acc>details>summary:focus-visible{outline:2px solid var(--acc);outline-offset:4px;border-radius:4px;}
.acc>details>p{margin:0;padding:0 48px 24px 52px;font-family:Jost,sans-serif;font-weight:300;font-size:15px;line-height:1.72;color:var(--ink2);max-width:62ch;}
.acc>details>p a{color:var(--acc);}
@media (max-width:600px){.acc>details>summary{gap:14px;padding:18px 0;} .acc>details>summary>b{width:28px;} .acc>details>p{padding:0 0 20px 42px;}}
/* the opening glides where the browser can animate a details element; it is instant elsewhere */
.acc>details::details-content{block-size:0;overflow:clip;transition:block-size .32s ease,content-visibility .32s allow-discrete;}
.acc>details[open]::details-content{block-size:auto;}
@supports (interpolate-size:allow-keywords){.acc{interpolate-size:allow-keywords;}}
@media (prefers-reduced-motion:reduce){.acc>details,.acc>details>summary>span,.acc>details>summary>i,.acc>details::details-content{transition:none;}}
/* text for screen readers only (the calculators' units and spoken results, t-154) */
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important;}

/* ── "Back" (Fadi, Oct 10–11: "No back button again here") ─────────────────────────────────────────────────────────────
   The pill at the top of every page below the top level — the pages with a breadcrumb: Rohit's communities and homes, the
   guides, Vita, the calculators. Written by each page's generator as a link to the page above, by name; assets/site-nav.js
   makes it "Back" (the browser's Back) for a visitor who came from another page of ours. The listing pages have their own
   (#ix-backbtn). */
.sn-back{display:inline-flex;align-items:center;gap:8px;min-height:44px;max-width:100%;margin:0 0 12px;padding:0 16px 0 12px;border-radius:999px;border:1px solid rgba(232,232,227,.24);color:#F4F3EE;text-decoration:none;font:500 13px/1 Jost,system-ui,sans-serif;letter-spacing:.02em;transition:border-color .2s ease;box-sizing:border-box;}
html:not(.sar-dark) .sn-back{border-color:rgba(38,35,26,.24);color:#26231A;}
.sn-back svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.sn-back span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.sn-back:hover{border-color:#B3AA8D;}
html:not(.sar-dark) .sn-back:hover{border-color:#544E2E;}
.sn-back:focus-visible{outline:2px solid #B3AA8D;outline-offset:3px;}
/* over a photograph (a Rohit community's and Vita's headers): cream on soft dark glass, in both themes */
.sn-back.sn-back--photo,html:not(.sar-dark) .sn-back.sn-back--photo{color:#F4F2EB;border-color:rgba(244,242,235,.5);background:rgba(11,10,7,.32);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);}
.sn-back.sn-back--photo:hover{border-color:#F4F2EB;}

/* — Oct 11 phone audit: every consent box (the monthly-edit sign-up, the valuation card, the contact form) is a 24 px box
   in the theme's colours with the whole row tappable — not the browser's bright white 14–18 px default — and the sign-up
   fields are 16 px so Safari does not zoom the page when one is tapped (15.5 px did). The Journal's own copy of these
   rules (blog.html) matches. — */
.nl-agree{grid-column:1/-1;display:flex;align-items:flex-start;gap:12px;cursor:pointer;font-family:Jost,sans-serif;font-size:12.5px;line-height:1.5;color:#9a957f;}
html:not(.sar-dark) .nl-agree{color:#67614B;}
@media (max-width:720px){.nl-agree,.cf-consent,.vz .v3-wiz-consent{min-height:44px;padding:4px 0;box-sizing:border-box;}}
.nl-agree input,.cf-consent input,.vz .v3-wiz-consent input{-webkit-appearance:none;appearance:none;flex:none;width:24px;height:24px;margin:-2px 0 0;border:1.5px solid #B3AA8D;border-radius:6px;background:transparent center/16px 16px no-repeat;cursor:pointer;}
.nl-agree input:checked,.cf-consent input:checked,.vz .v3-wiz-consent input:checked{background-color:#B3AA8D;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23100F0A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");}
.nl-agree input:focus-visible,.cf-consent input:focus-visible,.vz .v3-wiz-consent input:focus-visible{outline:2px solid #B3AA8D;outline-offset:3px;}
html:not(.sar-dark) .nl-agree input,html:not(.sar-dark) .cf-consent input,html:not(.sar-dark) .vz .v3-wiz-consent input{border-color:#544E2E !important;background-color:transparent !important;}
html:not(.sar-dark) .nl-agree input:checked,html:not(.sar-dark) .cf-consent input:checked,html:not(.sar-dark) .vz .v3-wiz-consent input:checked{background-color:#544E2E !important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23F4F3EE' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");}
html:not(.sar-dark) .nl-agree input:focus-visible,html:not(.sar-dark) .cf-consent input:focus-visible,html:not(.sar-dark) .vz .v3-wiz-consent input:focus-visible{outline-color:#544E2E;}
.nl .nl-name,.nl .nl-email{font-size:16px!important;}