/* Grassick Property app-style site. Brand: black logo, white, blue #0DACF0. Light, Facebook-calm UI.
   Motif: the blue square from the wordmark (live marker, active tab, sold stamp, range marker).
   Type: the device's own font everywhere, like Facebook (San Francisco on Apple, Segoe UI on Windows, Roboto on
   Android). Nothing to download. Headings and big numbers go through --display, so a brand font could be added
   later in one place (see README "Fonts"). */

:root {
  --black: #000;
  --ink: #1C1E21;
  --blue: #0DACF0;               /* brand blue: small accents, bars, focus */
  --blue-hover: #0b9bd8;
  --blue-btn: #0DACF0;           /* buttons: the exact brand blue with white text (Michael's choice, 26 Oct) */
  --blue-btn-hover: #0A9AD6;
  --blue-text: #0679B0;          /* brand blue darkened for small text on white (contrast) */
  --blue-tint: #E9F6FD;
  --bg: #F0F2F5;
  --card: #fff;
  --soft: #E4E6EB;               /* secondary buttons, pills */
  --text2: #4B4F56;              /* secondary body text */
  --hover: #F2F3F5;
  --subtle: #F7F8FA;             /* tiles inside a card */
  --field: #fff;
  --field-line: #CED0D4;
  --line-strong: #BCC0C4;
  --placeholder: #DADDE1;        /* behind photos while they load */
  --on-white: #1C1E21;           /* text on things that stay white in dark mode (map pins, photo buttons) */
  --chart-a: #C9CCD1;
  --toast-bg: #1C1E21;
  --toast-ink: #fff;
  --up: #0a7a3d;
  --down: #b42318;
  --soft-hover: #D8DADF;
  --line: #E4E6EB;
  --muted: #65676B;
  --muted2: #8A8D91;
  --sample-bg: #FFF1C2;
  --sample-ink: #5c4500;
  --r: 16px;
  --shadow: 0 1px 2px rgba(0, 0, 0, .08), 0 2px 10px rgba(0, 0, 0, .03);
  --appbar: 56px;
  --tabbar: 64px;
  --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, Roboto, 'Helvetica Neue', Arial, sans-serif;
  --display: var(--font);
  --body: var(--font);
  --ease: cubic-bezier(.2, .8, .2, 1);
  color-scheme: light;
}
/* dark: follows the device unless the visitor picked Light; or forced by picking Dark */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #18191A;
    --card: #242526;
    --ink: #E4E6EB;
    --text2: #C5C8CC;
    --muted: #B0B3B8;
    --muted2: #8A8D91;
    --line: #3A3B3C;
    --soft: #3A3B3C;
    --soft-hover: #4E4F50;
    --hover: #303132;
    --subtle: #2C2D2E;
    --field: #3A3B3C;
    --field-line: #4E4F50;
    --line-strong: #5D5F61;
    --placeholder: #3A3B3C;
    --blue-tint: #15354A;
    --blue-text: #62C9F5;
    --chart-a: #5D5F61;
    --toast-bg: #E4E6EB;
    --toast-ink: #1C1E21;
    --up: #4CC38A;
    --down: #F47067;
    --sample-bg: #3B3212;
    --sample-ink: #F2D27A;
    --shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 2px 10px rgba(0, 0, 0, .25);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #18191A;
  --card: #242526;
  --ink: #E4E6EB;
  --text2: #C5C8CC;
  --muted: #B0B3B8;
  --muted2: #8A8D91;
  --line: #3A3B3C;
  --soft: #3A3B3C;
  --soft-hover: #4E4F50;
  --hover: #303132;
  --subtle: #2C2D2E;
  --field: #3A3B3C;
  --field-line: #4E4F50;
  --line-strong: #5D5F61;
  --placeholder: #3A3B3C;
  --blue-tint: #15354A;
  --blue-text: #62C9F5;
  --chart-a: #5D5F61;
  --toast-bg: #E4E6EB;
  --toast-ink: #1C1E21;
  --up: #4CC38A;
  --down: #F47067;
  --sample-bg: #3B3212;
  --sample-ink: #F2D27A;
  --shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 2px 10px rgba(0, 0, 0, .25);
  color-scheme: dark;
}


* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--appbar) + 12px); }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 15px/1.4 var(--font); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 300; background: var(--card); padding: 10px 14px; border-radius: 10px; }
.skip:focus { left: 8px; }
:focus-visible { outline: 2px solid var(--blue-btn); outline-offset: 2px; }
.i { width: 22px; height: 22px; flex: none; display: block; }

@view-transition { navigation: auto; }
.appbar { view-transition-name: appbar; }
.tabbar { view-transition-name: tabbar; }
.sidenav { view-transition-name: sidenav; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .22s; }

/* ---------- buttons, chips ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 18px; border-radius: 12px; border: 0; font: 600 14px/1 var(--font); text-decoration: none; cursor: pointer; white-space: nowrap; transition: transform .15s var(--ease), background .2s; }
.btn:active { transform: scale(.97); }
.btn .i { width: 18px; height: 18px; }
.btn--blue { background: var(--blue-btn); color: #fff; }
.btn--blue:hover { background: var(--blue-btn-hover); }
.btn--black { background: var(--soft); color: var(--ink); }
.btn--black:hover { background: var(--soft-hover); }
.btn--white { background: #fff; color: var(--on-white); }
.btn--ghost { background: var(--card); color: var(--ink); box-shadow: inset 0 0 0 1px var(--field-line); }
.btn--sm { height: 36px; padding: 0 12px; font-size: 13px; border-radius: 10px; }
.btn--full { width: 100%; }
.btn:disabled { opacity: .5; }
.iconbtn { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; border: 0; background: transparent; color: inherit; cursor: pointer; text-decoration: none; flex: none; }
.iconbtn--glass { background: var(--card); color: var(--ink); box-shadow: 0 2px 10px rgba(0, 0, 0, .22); }
.iconbtn--blue { background: var(--blue-btn); color: #fff; }
.linkbtn { border: 0; background: none; padding: 0; font: 600 14px var(--font); color: var(--blue-text); display: inline-flex; gap: 4px; align-items: center; cursor: pointer; }
.linkbtn .i { width: 16px; height: 16px; }

.chip { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border-radius: 6px; font: 600 11px/1 var(--font); letter-spacing: .02em; background: var(--soft); color: var(--ink); white-space: nowrap; }
.chip--new, .chip--blue { background: var(--blue-tint); color: var(--blue-text); }
.chip--sold { background: var(--card); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.chip--sold::before { content: ''; width: 7px; height: 7px; background: var(--blue); }
.chip--open { background: var(--card); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--blue); }
.chip--price { background: var(--blue-tint); color: #035C88; }
/* "Under offer": a solid amber box so it reads on top of any photo, light or dark mode */
.chip--offer { background: #FFB020; color: #1c1e21; }
.sample { font: 700 10px/1 var(--font); letter-spacing: .06em; text-transform: uppercase; color: var(--sample-ink); background: var(--sample-bg); padding: 5px 7px; border-radius: 5px; flex: none; }

.chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chipbtn { flex: none; height: 36px; padding: 0 14px; border-radius: 10px; border: 1.5px solid var(--line); background: var(--card); font: 600 13px var(--font); color: var(--ink); cursor: pointer; transition: background .2s, color .2s; }
.chipbtn:hover { border-color: var(--line-strong); }
.chipbtn.is-on { background: var(--blue-tint); color: var(--blue-text); border-color: transparent; }

.live { display: inline-flex; align-items: center; gap: 7px; font: 700 11px/1 var(--font); letter-spacing: .06em; text-transform: uppercase; color: var(--ink); }
.live i { width: 8px; height: 8px; background: var(--blue); animation: livepulse 1.8s ease-out infinite; }
@keyframes livepulse { 0% { box-shadow: 0 0 0 0 rgba(13, 172, 240, .65); } 100% { box-shadow: 0 0 0 9px rgba(13, 172, 240, 0); } }

/* ---------- app bar ---------- */
.appbar { position: sticky; top: 0; z-index: 50; background: var(--bg); color: var(--ink); box-shadow: 0 1px 0 var(--line); height: var(--appbar); transition: transform .3s var(--ease); }
.appbar.is-hidden { transform: translateY(-100%); }
.appbar__in { height: 100%; display: flex; align-items: center; gap: 12px; padding: 0 8px 0 16px; max-width: 1440px; margin: 0 auto; }
.appbar__logo { display: block; color: var(--ink); }
.wordmark { height: 30px; width: auto; display: block; }
.appbar__search, .appbar__phone, .appbar__cta { display: none; }
.appbar__actions { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.appbar__m { color: var(--ink); }

/* ---------- shell ---------- */
.shell { display: block; }
.sidenav, .rail { display: none; }
.main { min-width: 0; padding-bottom: calc(var(--tabbar) + env(safe-area-inset-bottom) + 20px); }
.has-actionbar .main { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }

/* ---------- tab bar (phone) ---------- */
.tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; background: var(--card); color: var(--muted); display: grid; grid-template-columns: repeat(5, 1fr); height: calc(var(--tabbar) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); border-top: 1px solid var(--line); }
.tab { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font: 600 10.5px/1 var(--font); color: inherit; text-decoration: none; background: none; border: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.tab .i { width: 24px; height: 24px; transition: transform .2s var(--ease); }
.tab:active .i { transform: scale(.88); }
.tab.is-active { color: var(--blue-text); }
.tab.is-active .i { color: var(--blue); }
.tab.is-active::before { content: ''; position: absolute; top: -1px; width: 22px; height: 3px; border-radius: 0 0 3px 3px; background: var(--blue-btn); }
.tab--sell { color: var(--ink); }
.tab__sq { width: 44px; height: 44px; margin-top: -18px; border-radius: 13px; background: var(--blue-btn); color: #fff; display: grid; place-items: center; box-shadow: 0 0 0 4px var(--card); transition: transform .2s var(--ease); }
.tab--sell:active .tab__sq { transform: scale(.92); }
.tab--sell.is-active::before { display: none; }
.tab .count { position: absolute; top: 7px; left: calc(50% + 6px); }
.count { font-style: normal; background: var(--blue-btn); color: #fff; font: 700 10.5px/1 var(--font); min-width: 18px; height: 18px; border-radius: 5px; display: inline-grid; place-items: center; padding: 0 4px; }

/* ---------- action bar (listing page, phone) ---------- */
.actionbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: grid; grid-template-columns: 1fr 1.5fr; gap: 10px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: var(--card); border-top: 1px solid var(--line); box-shadow: 0 -6px 20px rgba(0, 0, 0, .06); }
.actionbar .btn { height: 50px; font-size: 15px; }

/* ---------- feed ---------- */
.feedtop { background: var(--card); padding: 16px 0 4px; margin-bottom: 8px; }
.feedtop__h { padding: 0 16px; }
.feedtop h1 { font: 700 18px/1.25 var(--font); margin: 0; letter-spacing: -.01em; max-width: 30ch; }
.livebar { margin: 8px 0 0; font: 500 12.5px/1.45 var(--font); color: var(--muted); }
.livebar .live { margin-right: 6px; }
.stories { display: flex; gap: 12px; overflow-x: auto; padding: 16px 16px 8px; scrollbar-width: none; }
.stories::-webkit-scrollbar { display: none; }
.story { flex: none; width: 72px; display: flex; flex-direction: column; align-items: center; gap: 7px; text-decoration: none; color: var(--ink); -webkit-tap-highlight-color: transparent; }
.story__ring { width: 70px; height: 70px; border-radius: 21px; padding: 3px; background: var(--blue); display: block; transition: transform .25s var(--ease), background .2s; }
.story:hover .story__ring { transform: translateY(-2px); }
.story:active .story__ring { transform: scale(.94); }
.story__ring img { width: 100%; height: 100%; border-radius: 18px; object-fit: cover; border: 2.5px solid var(--card); display: block; }
.story.is-on .story__ring { background: var(--blue-btn); }
.story__l { font: 600 11px/1.2 var(--font); text-align: center; }
.chips--feed { padding: 10px 16px 12px; }
.filternote { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 16px 12px; padding: 10px 12px; border-radius: 10px; background: var(--blue-tint); font: 600 13px var(--font); }
.filternote button { border: 0; background: none; font: 600 13px var(--font); color: var(--blue-text); cursor: pointer; }

.feed { display: flex; flex-direction: column; gap: 8px; }
.card { background: var(--card); position: relative; }

.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.js .reveal.in { opacity: 1; transform: none; }

.post__head { display: flex; align-items: center; gap: 10px; padding: 12px 10px 12px 14px; }
.av { width: 40px; height: 40px; border-radius: 12px; overflow: hidden; flex: none; }
.av svg { width: 100%; height: 100%; display: block; }
.post__who { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 4px; }
.post__name { display: flex; align-items: center; gap: 6px; }
.post__name b { font: 600 14px/1.1 var(--font); }
.net { width: 18px; height: 18px; border-radius: 5px; background: var(--soft); color: var(--ink); display: grid; place-items: center; }
.net .i { width: 12px; height: 12px; }
.meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font: 500 12px/1.2 var(--font); color: var(--muted); }
.post__go { color: var(--text2); }

/* gallery */
.gal { position: relative; aspect-ratio: 4 / 3; background: var(--placeholder); overflow: hidden; }
.gal__track { display: flex; height: 100%; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; outline: none; }
.gal__track::-webkit-scrollbar { display: none; }
.gal__img { flex: 0 0 100%; width: 100%; height: 100%; object-fit: cover; scroll-snap-align: center; scroll-snap-stop: always; display: block; cursor: pointer; user-select: none; -webkit-user-drag: none; }
.gal__dots { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); display: flex; gap: 5px; pointer-events: none; }
.gal__dots i { width: 6px; height: 6px; border-radius: 2px; background: rgba(255, 255, 255, .55); transition: width .3s var(--ease), background .3s; }
.gal__dots i.on { width: 18px; background: #fff; }
.gal__count { position: absolute; bottom: 10px; right: 10px; display: flex; align-items: center; gap: 5px; padding: 5px 8px; border-radius: 8px; background: rgba(0, 0, 0, .62); color: #fff; font: 600 12px/1 var(--font); pointer-events: none; }
.gal__count .i { width: 14px; height: 14px; }
.gal__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; border-radius: 12px; border: 0; background: var(--card); color: var(--ink); display: grid; place-items: center; cursor: pointer; opacity: 0; transition: opacity .2s; box-shadow: 0 2px 10px rgba(0, 0, 0, .25); z-index: 2; }
.gal:hover .gal__nav, .gal__nav:focus-visible { opacity: 1; }
.gal__nav--prev { left: 10px; }
.gal__nav--next { right: 10px; }
@media (hover: none) { .gal__nav { display: none; } }
.gal > .chip { position: absolute; top: 12px; left: 12px; }
.save { position: absolute; top: 10px; right: 10px; width: 40px; height: 40px; border-radius: 12px; border: 0; background: var(--card); color: var(--ink); display: grid; place-items: center; cursor: pointer; box-shadow: 0 2px 10px rgba(0, 0, 0, .22); z-index: 2; }
.save[aria-pressed="true"] { background: var(--blue-btn); color: #fff; }
.save[aria-pressed="true"] .i, .act[aria-pressed="true"] .i { fill: currentColor; }
.act[aria-pressed="true"] .i { fill: var(--blue-btn); stroke: var(--blue-btn); }
.pop .i { animation: pop .45s var(--ease); }
@keyframes pop { 0% { transform: scale(1); } 35% { transform: scale(1.35); } 100% { transform: scale(1); } }
.gal--kb .gal__img:first-child { animation: kb 18s ease-in-out infinite alternate; }
@keyframes kb { from { transform: scale(1); } to { transform: scale(1.1); } }

.post__body { display: block; padding: 12px 14px 2px; color: inherit; text-decoration: none; }
.post__body--tight { padding-top: 10px; }
.post__body--tight .facts { margin-top: 0; }
.price { font: 700 20px/1.2 var(--font); letter-spacing: -.01em; }
.price--lg { font-size: 18px; }
.addr { font: 600 15px/1.35 var(--font); margin: 3px 0 0; }
.facts { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 10px 0 0; padding: 0; font: 600 13.5px/1 var(--font); color: var(--ink); }
.facts li { display: flex; align-items: center; gap: 5px; }
.facts .i { width: 19px; height: 19px; color: var(--text2); }
.facts__type { color: var(--muted); font-weight: 500; }
.hl { margin: 10px 0 0; font: 500 14px/1.45 var(--body); color: var(--text2); }
.muted { color: var(--muted); font-size: 14px; margin: 6px 0 0; }
.post__bar { display: flex; margin: 12px 8px 0; padding: 4px 0; border-top: 1px solid var(--line); }
.act { flex: 1; display: flex; align-items: center; justify-content: center; gap: 7px; height: 42px; border: 0; background: none; border-radius: 10px; font: 600 13px var(--font); color: var(--text2); text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.act:hover { background: var(--hover); }
.act .i { width: 20px; height: 20px; }
.act--go { color: var(--blue-text); }

/* pinned */
.pinned { position: relative; }
.gal--tall { aspect-ratio: 4 / 5; }
.pinned__over { position: absolute; left: 0; right: 0; bottom: 0; padding: 90px 16px 18px; display: flex; flex-direction: column; gap: 5px; color: #fff; text-decoration: none; background: linear-gradient(to top, rgba(0, 0, 0, .82) 15%, rgba(0, 0, 0, 0)); pointer-events: none; }
.pinned__over > * { pointer-events: auto; }
.pinned__hl { font: 700 24px/1.12 var(--font); letter-spacing: -.015em; max-width: 22ch; }
.pinned__price { font: 700 17px/1.2 var(--font); color: #fff; }
.pinned__addr { font: 600 13.5px/1.2 var(--font); color: #e8e8e8; }
.post--pinned .gal__dots { display: none; }
.post--pinned .gal__count { top: 12px; left: 12px; right: auto; bottom: auto; }

/* sold */
.soldwrap { position: relative; }
.soldstamp { position: absolute; left: 0; bottom: 18px; display: flex; align-items: center; gap: 10px; padding: 14px 20px 13px 16px; background: var(--card); color: var(--ink); font: 700 22px/1 var(--display); letter-spacing: .1em; pointer-events: none; box-shadow: 0 4px 16px rgba(0, 0, 0, .18); }
.soldstamp i { width: 11px; height: 11px; background: var(--blue); }
.js .reveal .soldstamp { transform: translateX(-102%); transition: transform .7s .25s var(--ease); }
.js .reveal.in .soldstamp { transform: none; }

/* open home / price rows */
.openhome { display: grid; grid-template-columns: 66px 92px 1fr; gap: 12px; align-items: center; padding: 2px 14px 6px; text-decoration: none; color: inherit; }
.openhome__date { background: var(--blue-tint); color: var(--ink); border-radius: 12px; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 9px 0; }
.openhome__date small { font: 700 10.5px/1 var(--font); color: var(--blue-text); text-transform: uppercase; letter-spacing: .06em; }
.openhome__date b { font: 700 26px/1 var(--font); }
.openhome img { width: 92px; height: 70px; object-fit: cover; border-radius: 10px; }
.openhome__txt { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--text2); min-width: 0; }
.openhome__txt b { color: var(--ink); font-size: 14px; }
.openhome .price { font-size: 14px; }
.rowcard { display: grid; grid-template-columns: 118px 1fr; gap: 12px; align-items: center; padding: 2px 14px 14px; text-decoration: none; color: inherit; }
.rowcard img { width: 118px; height: 88px; object-fit: cover; border-radius: 10px; }
.rowcard > span { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.rowcard b { font-size: 14px; }
.rowcard small { color: var(--muted); font-size: 12.5px; line-height: 1.35; }
.post--fresh { animation: fresh 1.6s var(--ease); }
@keyframes fresh { 0% { opacity: 0; transform: translateY(-14px); box-shadow: 0 0 0 3px var(--blue); } 30% { opacity: 1; transform: none; box-shadow: 0 0 0 3px var(--blue); } 100% { box-shadow: 0 0 0 0 transparent; } }

/* market (dark) */
.market { background: var(--card); color: var(--ink); padding: 18px 16px 16px; }
.market__head { display: flex; align-items: center; gap: 8px; font: 500 12px var(--font); color: var(--muted); }
.market h3 { font: 700 25px/1.12 var(--font); margin: 14px 0 4px; letter-spacing: -.015em; }
.market__sub { color: var(--muted); font-size: 13px; margin: 0 0 16px; }
.towns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mt { background: var(--subtle); box-shadow: inset 0 0 0 1px var(--line); border-radius: 12px; padding: 12px 10px; color: var(--ink); text-decoration: none; display: flex; flex-direction: column; gap: 7px; min-width: 0; transition: background .2s; }
.mt:hover { background: var(--hover); }
.mt__n { font: 600 12px var(--font); color: var(--muted); }
.mt__m { font: 700 15px/1 var(--font); color: var(--ink); letter-spacing: -.01em; }
.mt__bar { height: 6px; background: var(--soft); border-radius: 2px; overflow: hidden; }
.mt__bar i { display: block; height: 100%; width: calc(var(--w) * 100%); background: var(--blue); transform-origin: left; }
.js .reveal .mt__bar i { transform: scaleX(0); transition: transform 1.3s .2s var(--ease); }
.js .reveal.in .mt__bar i { transform: scaleX(1); }
.mt__d { font-size: 11.5px; color: var(--muted); }
.mt__d b { color: var(--ink); font-size: 13px; }
.mt__g { display: flex; align-items: center; gap: 4px; font: 600 11px var(--font); color: var(--blue-text); }
.mt__g .i { width: 14px; height: 14px; }
.market__foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 14px; font-size: 11.5px; color: var(--muted); }
.market__foot a { display: inline-flex; align-items: center; gap: 4px; color: var(--blue-text); font: 600 13px var(--font); text-decoration: none; }
.market__foot .i { width: 16px; height: 16px; }

/* suburb spotlight */
.spot__in { position: relative; display: flex; flex-direction: column; gap: 6px; min-height: 330px; padding: 16px; justify-content: flex-end; color: #fff; text-decoration: none; background: #000; overflow: hidden; }
.spot__in::before { content: ''; position: absolute; inset: 0; background: var(--img) center / cover; transition: transform 1.2s var(--ease); }
.spot__in:hover::before { transform: scale(1.05); }
.spot__in::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, .88) 25%, rgba(0, 0, 0, .1)); }
.spot__in > * { position: relative; z-index: 1; }
.spot__in > .chip { align-self: flex-start; margin-bottom: auto; }
.spot__name { font: 700 36px/1 var(--font); letter-spacing: -.02em; }
.spot__m { font-size: 13px; color: #ddd; }
.spot__m b { font: 700 24px var(--font); color: #fff; margin-right: 4px; }
.spot__range { position: relative; height: 8px; margin-top: 10px; border-radius: 2px; background: rgba(255, 255, 255, .28); }
.spot__range i { position: absolute; top: -5px; left: var(--p); width: 18px; height: 18px; background: var(--blue); border: 3px solid #fff; transform: translateX(-50%); }
.spot__range--light { background: var(--line); }
.spot__range--light i { border-color: var(--card); box-shadow: 0 1px 4px rgba(0, 0, 0, .3); }
.spot__rl { display: flex; justify-content: space-between; font-size: 11px; color: #c8c9cc; }
.spot__rl small { font-size: 11px; }
.spot__f { font-size: 12.5px; color: #ddd; }

/* region pulse */
.pulse__grid { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0 14px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.pulse__grid > div { padding: 14px 10px; border-right: 1px solid var(--line); }
.pulse__grid > div:last-child { border-right: 0; }
.pulse__grid b { display: block; font: 700 30px/1 var(--font); letter-spacing: -.02em; }
.pulse__grid > div:nth-child(2) b { color: var(--blue-text); }
.pulse__grid span { display: block; margin-top: 7px; font-size: 12px; line-height: 1.35; color: var(--muted); }
.pulse__more { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px; font: 600 13.5px/1.4 var(--font); text-decoration: none; }
.pulse__more .i { color: var(--blue-text); }

/* article */
.apost a, .apost--sm { display: block; color: inherit; text-decoration: none; }
.apost img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.apost__b { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 14px 16px 16px; }
.apost__t { font: 700 20px/1.2 var(--font); letter-spacing: -.01em; }
.apost__d { font: 400 14px/1.5 var(--body); color: var(--text2); }
.apost__m { font: 600 12px var(--font); color: var(--muted); }

/* social */
.sp__text { margin: 0; padding: 0 14px 12px; font: 400 14.5px/1.5 var(--body); }
.sp__text + a .sp__ig, .sp > a { display: block; }
.sp__ig img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.sp__ig + .sp__text, a + .sp__text { padding-top: 12px; }
.sp__vid { position: relative; }
.sp__vid img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.sp__play { position: absolute; inset: 0; margin: auto; width: 68px; height: 68px; border-radius: 50%; background: rgba(255, 255, 255, .94); color: var(--on-white); display: grid; place-items: center; transition: transform .25s var(--ease); box-shadow: 0 4px 18px rgba(0, 0, 0, .25); }
.sp__play .i { width: 30px; height: 30px; fill: var(--on-white); }
.sp a:hover .sp__play { transform: scale(1.08); }
.sp__grid { display: grid; gap: 3px; aspect-ratio: 4 / 3; }
.sp__grid img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sp__grid--3 { grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; }
.sp__grid--3 img:first-child { grid-row: span 2; }
.sp__foot { display: flex; align-items: center; gap: 16px; padding: 12px 14px; font: 600 13px var(--font); color: var(--text2); }
.sp__foot span { display: inline-flex; align-items: center; gap: 5px; }
.sp__foot .i { width: 18px; height: 18px; }
.sp__foot a { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; color: var(--blue-text); text-decoration: none; }
.sp__foot a .i { width: 16px; height: 16px; }

/* calls to action */
.cta { display: flex; min-height: 360px; background: #000; color: #fff; overflow: hidden; }
.cta__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cta__in { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; width: 100%; padding: 22px 18px; background: linear-gradient(to top, rgba(0, 0, 0, .78) 10%, rgba(0, 0, 0, 0) 72%); }
.cta__me { width: 58px; height: 58px; border-radius: 15px; object-fit: cover; border: 3px solid #fff; }
.cta h3 { font: 700 29px/1.08 var(--font); margin: 0; letter-spacing: -.02em; max-width: 16ch; }
.cta p { margin: 0; color: #e2e2e2; font-size: 14px; max-width: 40ch; }
.cta__form { display: flex; gap: 8px; margin-top: 6px; }
.cta__form input { flex: 1; min-width: 0; height: 50px; border-radius: 12px; border: 0; padding: 0 14px; font: 500 15px var(--font); }
.cta__form .btn { height: 50px; }
.cta2 { display: flex; gap: 14px; align-items: flex-start; padding: 18px 16px; background: var(--card); color: var(--ink); }
.cta2__icon { width: 46px; height: 46px; border-radius: 13px; background: var(--blue-tint); color: var(--blue-btn); display: grid; place-items: center; flex: none; }
.cta2__b { flex: 1; min-width: 0; }
.cta2 h3 { font: 700 20px/1.2 var(--font); margin: 0 0 4px; }
.cta2 p { margin: 0 0 12px; font-size: 14px; line-height: 1.45; color: var(--text2); }
.inline-form { display: flex; gap: 8px; }
.inline-form input { flex: 1; min-width: 0; height: 46px; border: 1px solid var(--field-line); border-radius: 12px; padding: 0 14px; font: 500 15px var(--font); background: var(--field); }
.inline-form .btn { height: 46px; }

.newpill { position: fixed; top: calc(var(--appbar) + 12px); left: 50%; z-index: 45; transform: translate(-50%, -16px); opacity: 0; display: flex; align-items: center; gap: 7px; height: 42px; padding: 0 18px 0 14px; border: 0; border-radius: 12px; background: var(--blue-btn); color: #fff; font: 700 13.5px var(--font); box-shadow: 0 10px 28px rgba(0, 0, 0, .28); cursor: pointer; transition: transform .45s var(--ease), opacity .45s; }
.newpill.is-in { transform: translate(-50%, 0); opacity: 1; }
.newpill .i { width: 18px; height: 18px; }
.feedend { text-align: center; padding: 36px 24px 12px; }
.feedend p { max-width: 36ch; margin: 0 auto 16px; color: var(--muted); line-height: 1.5; }
.sq { display: block; width: 18px; height: 18px; background: var(--blue); margin: 0 auto 16px; }

/* ---------- search ---------- */
.search__top { background: var(--card); padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.search__top h1 { font: 700 24px/1.1 var(--font); margin: 0; letter-spacing: -.015em; }
.sbox { display: flex; align-items: center; gap: 10px; height: 50px; border-radius: 12px; background: var(--bg); padding: 0 14px; }
.sbox input { flex: 1; min-width: 0; border: 0; background: none; font: 500 16px var(--font); outline: none; }
.sbox .i { color: var(--text2); }
.seg { display: inline-grid; grid-template-columns: 1fr 1fr; width: 220px; padding: 4px; border-radius: 12px; background: var(--bg); }
.seg button { height: 36px; border: 0; background: none; border-radius: 9px; font: 600 14px var(--font); cursor: pointer; }
.seg [aria-selected="true"] { background: var(--field); color: var(--ink); box-shadow: 0 1px 3px rgba(0, 0, 0, .14); }
.search__meta { display: flex; align-items: center; gap: 5px; padding: 14px 16px; font: 500 14px var(--font); }
.search__meta b { font-weight: 700; }
.search__meta .btn { margin-left: auto; }
.results { display: flex; flex-direction: column; gap: 8px; }
.lcard { background: var(--card); position: relative; }
.lcard[hidden] { display: none; }
.lcard__brand { height: 42px; background: var(--card); color: var(--ink); border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; padding: 0 12px 0 14px; }
.lcard__brand .wordmark { height: 22px; }
.lcard__brand img { width: 30px; height: 30px; border-radius: 9px; object-fit: cover; }
.lcard .gal { aspect-ratio: 16 / 11; }
.lcard__body { display: block; padding: 12px 14px 16px; color: inherit; text-decoration: none; }
.lcard.is-hot { box-shadow: 0 0 0 3px var(--blue); }
.noresults { padding: 32px 16px; text-align: center; color: var(--muted); }
.noresults button { border: 0; background: none; font: 600 14px var(--font); color: var(--blue-text); cursor: pointer; padding: 0; }
.mapbox { display: none; }
.show-map .mapbox { display: block; position: fixed; z-index: 30; top: var(--appbar); left: 0; right: 0; bottom: calc(var(--tabbar) + env(safe-area-inset-bottom)); }
.show-map .appbar { transform: none !important; }
#map { width: 100%; height: 100%; background: var(--placeholder); }
.pinwrap { background: none; border: 0; }
.pin { display: inline-block; transform: translate(-50%, -100%); padding: 6px 8px; border-radius: 8px; background: #fff; color: var(--on-white); font: 700 12px/1 var(--font); white-space: nowrap; box-shadow: 0 3px 10px rgba(0, 0, 0, .3); transition: transform .2s var(--ease), background .2s; }
.pin::after { content: ''; position: absolute; left: 50%; bottom: -5px; width: 10px; height: 10px; background: inherit; transform: translateX(-50%) rotate(45deg); z-index: -1; }
.pin--sold { background: var(--soft); color: var(--muted); }
.pin.is-hot { background: var(--blue-btn); color: #fff; transform: translate(-50%, -100%) scale(1.15); }
.pop-card { display: grid; grid-template-columns: 84px 1fr; gap: 10px; align-items: center; text-decoration: none; color: var(--on-white); font: 600 12.5px/1.3 var(--font); min-width: 230px; }
.pop-card img { width: 84px; height: 63px; object-fit: cover; border-radius: 8px; }
.pop-card b { display: block; font-size: 14px; }
.leaflet-popup-content { margin: 10px; }
.leaflet-container { font-family: var(--font); }
.sqpin { width: 18px; height: 18px; background: var(--blue); border: 3px solid #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, .35); }

/* ---------- listing detail ---------- */
.detail { background: var(--card); }
.detail__gal { position: relative; }
.detail__gal .gal { aspect-ratio: 4 / 3; }
.detail__gal .gal__dots { display: none; }
.detail__top { position: absolute; top: 12px; left: 12px; right: 12px; display: flex; justify-content: space-between; z-index: 3; pointer-events: none; }
.detail__top > *, .detail__top span > * { pointer-events: auto; }
.detail__top span { display: flex; gap: 8px; }
.mosaic { display: none; }
.mediabar { display: flex; gap: 8px; overflow-x: auto; padding: 12px 16px; border-bottom: 1px solid var(--line); scrollbar-width: none; }
.mediabar > * { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border-radius: 10px; border: 0; background: var(--bg); color: var(--ink); font: 600 13px var(--font); text-decoration: none; cursor: pointer; }
.mediabar .i { width: 18px; height: 18px; }
.detail__cols { padding: 0 16px; }
.crumbs { display: flex; flex-wrap: wrap; gap: 6px; padding: 14px 0 4px; font: 500 12.5px var(--font); color: var(--muted); }
.crumbs a { text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.townpage > .crumbs, .article > .crumbs { padding: 8px 16px 24px; }
.detail__head { padding: 6px 0 18px; }
.detail__chips { display: flex; gap: 6px; flex-wrap: wrap; }
.price--xl { font: 700 28px/1.1 var(--font); margin: 12px 0 0; letter-spacing: -.015em; }
.detail__head h1 { font: 600 17px/1.35 var(--font); margin: 6px 0 0; }
.facts--lg { font-size: 15px; gap: 10px 18px; margin-top: 14px; }
.facts--lg .i { width: 23px; height: 23px; }
.block { padding: 22px 16px; border-top: 1px solid var(--line); }
.detail__main .block { padding: 22px 0; }
.block h2 { font: 700 19px/1.2 var(--font); margin: 0 0 12px; letter-spacing: -.01em; }
.block__h { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.block__h a { display: inline-flex; align-items: center; gap: 4px; font: 600 13px var(--font); color: var(--blue-text); text-decoration: none; }
.block__h a .i { width: 16px; height: 16px; }
.block h2.hl2 { font-size: 22px; line-height: 1.2; }
.desc p { font: 400 15.5px/1.65 var(--body); color: var(--ink); margin: 0 0 12px; }
.desc h3 { font: 700 14px var(--font); letter-spacing: .02em; margin: 20px 0 6px; }
.specs { display: grid; grid-template-columns: repeat(2, 1fr); margin: 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.specs > div { padding: 12px 14px; border-bottom: 1px solid var(--line); }
.specs > div:nth-child(odd) { border-right: 1px solid var(--line); }
.specs dt { font: 600 12px var(--font); color: var(--muted); }
.specs dd { margin: 3px 0 0; font: 600 15px var(--font); }
.floorplan { width: 100%; border-radius: 12px; border: 1px solid var(--line); display: block; }
.videolink { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: #000 var(--img) center / cover; color: #fff; text-decoration: none; }
.videolink span { width: 74px; height: 74px; border-radius: 50%; background: rgba(255, 255, 255, .94); color: var(--on-white); display: grid; place-items: center; transition: transform .25s var(--ease); box-shadow: 0 4px 18px rgba(0, 0, 0, .25); }
.videolink span .i { width: 32px; height: 32px; fill: var(--on-white); }
.videolink:hover span { transform: scale(1.08); }
.videolink b { position: absolute; left: 16px; bottom: 14px; font: 600 15px var(--font); text-shadow: 0 1px 6px rgba(0, 0, 0, .6); }
.minimap { height: 240px; border-radius: 14px; overflow: hidden; background: var(--placeholder); }
.suburbbox { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 12px; padding: 14px; border-radius: 12px; background: var(--bg); }
.suburbbox b { display: block; font: 700 16px var(--font); }
.suburbbox small { color: var(--muted); font-size: 12.5px; }
.detail__side { padding: 4px 0 20px; border-top: 1px solid var(--line); }
.side-card { padding-top: 18px; }
.agentrow { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; }
.agentrow img { width: 54px; height: 54px; border-radius: 15px; object-fit: cover; }
.agentrow b { display: block; font: 700 15px var(--font); }
.agentrow small { color: var(--muted); font-size: 12.5px; }
.agentrow > span { min-width: 0; }
.agentrow--card .iconbtn { margin-left: auto; }
.enq h3 { font: 700 18px var(--font); margin: 18px 0 12px; }
.enq__opts, .pick { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.enq__opts label, .pick label { position: relative; }
.enq__opts input, .pick input { position: absolute; opacity: 0; pointer-events: none; }
.enq__opts span, .pick span { display: inline-flex; align-items: center; height: 38px; padding: 0 13px; border-radius: 10px; background: var(--bg); font: 600 13px var(--font); cursor: pointer; transition: background .15s, color .15s; }
.enq__opts input:checked + span, .pick input:checked + span { background: var(--blue-tint); color: var(--blue-text); box-shadow: inset 0 0 0 1.5px var(--blue-btn); }
.enq__opts input:focus-visible + span, .pick input:focus-visible + span { outline: 3px solid var(--blue); outline-offset: 2px; }
.fld { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.fld > span { font: 600 12.5px var(--font); color: var(--text2); }
.fld input, .fld textarea { width: 100%; height: 48px; border-radius: 12px; border: 1.5px solid var(--field-line); background: var(--field); padding: 0 14px; font: 500 16px var(--font); color: var(--ink); }
.fld textarea { height: auto; padding: 12px 14px; resize: vertical; font-family: var(--body); }
.fld input:focus, .fld textarea:focus, .inline-form input:focus, .cta__form input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(13, 172, 240, .22); }
.fld2 { display: grid; grid-template-columns: 1fr; gap: 0 10px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; }
.fine { font-size: 12px; color: var(--muted); margin: 10px 0 0; }
.more { padding-left: 16px; padding-right: 0; }
.hscroll { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 2px 16px 8px 0; scrollbar-width: none; }
.hscroll::-webkit-scrollbar { display: none; }
.hcard { flex: 0 0 200px; scroll-snap-align: start; display: flex; flex-direction: column; gap: 3px; text-decoration: none; color: var(--ink); font: 500 13px/1.35 var(--font); }
.hcard img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 12px; display: block; margin-bottom: 6px; transition: transform .4s var(--ease); }
.hcard:hover img { transform: translateY(-2px); }
.hcard b { font: 700 15px var(--font); }
.hcard--big { flex-basis: 280px; }
.hcard__img { position: relative; display: block; }
.hcard__img .chip { position: absolute; top: 10px; left: 10px; }
.hcard .facts { margin-top: 6px; font-size: 12.5px; }

.lightbox { position: fixed; inset: 0; z-index: 120; background: #000; display: flex; align-items: center; }
.lightbox__track { display: flex; width: 100%; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.lightbox__track::-webkit-scrollbar { display: none; }
.lightbox__track img { flex: 0 0 100%; width: 100%; height: 100%; object-fit: contain; scroll-snap-align: center; }
.lightbox__x { position: absolute; top: 14px; right: 14px; color: #fff; background: #222; }
.lightbox__c { position: absolute; top: 24px; left: 20px; color: #fff; font: 600 14px var(--font); }
.lightbox .gal__nav { opacity: 1; }

/* ---------- sell ---------- */
.sellhero, .townhero, .article__hero { position: relative; display: flex; align-items: flex-end; color: #fff; overflow: hidden; background: #000; }
.sellhero::before, .townhero::before, .article__hero::before { content: ''; position: absolute; inset: -3%; background: var(--img) center / cover; animation: kb 22s ease-in-out infinite alternate; }
.sellhero::after, .townhero::after, .article__hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, .82) 10%, rgba(0, 0, 0, .1) 70%); }
.sellhero > *, .townhero > *, .article__hero > * { position: relative; z-index: 1; }
.sellhero { min-height: 360px; }
.sellhero__in { padding: 24px 18px 76px; }
.sellhero h1, .townhero h1 { font: 700 34px/1.05 var(--font); margin: 12px 0 8px; letter-spacing: -.02em; max-width: 14ch; }
.sellhero p, .townhero p { margin: 0; color: #e6e6e6; max-width: 44ch; font-size: 15px; line-height: 1.5; }
.wizard { position: relative; z-index: 2; margin: -52px 12px 0; padding: 18px; border-radius: var(--r); box-shadow: 0 12px 34px rgba(0, 0, 0, .14); }
.wizard__steps { display: flex; gap: 6px; list-style: none; padding: 0; margin: 0 0 16px; }
.wizard__steps li { flex: 1; padding-top: 8px; border-top: 4px solid var(--line); font: 600 11px var(--font); color: var(--muted2); transition: border-color .3s, color .3s; }
.wizard__steps li.is-on { border-color: var(--blue-btn); color: var(--ink); }
.wizard__p { display: none; border: 0; padding: 0; margin: 0; min-width: 0; }
.wizard__p.is-on { display: block; animation: stepin .35s var(--ease); }
@keyframes stepin { from { opacity: 0; transform: translateX(14px); } }
.wizard legend { font: 700 21px/1.2 var(--font); padding: 0; margin-bottom: 14px; letter-spacing: -.01em; }
.fld--big { flex-direction: row; align-items: center; gap: 10px; height: 58px; padding: 0 14px; border: 1.5px solid var(--line-strong); border-radius: 14px; }
.fld--big input { border: 0; height: 100%; padding: 0; font-size: 17px; box-shadow: none !important; }
.insight { margin: 4px 0 14px; padding: 16px; border-radius: 14px; background: var(--blue-tint); color: var(--ink); display: flex; flex-direction: column; gap: 4px; animation: stepin .35s var(--ease); }
.insight small { color: var(--muted); font-size: 12px; font-weight: 600; }
.insight b { font: 700 28px var(--display); color: var(--blue-text); }
.insight span { font-size: 13px; color: var(--text2); }
.insight a { color: var(--blue-text); font: 600 13px var(--font); margin-top: 4px; }
.steppers { display: grid; gap: 8px; margin-bottom: 16px; }
.stepper { display: grid; grid-template-columns: 1fr 42px 42px 42px; align-items: center; gap: 6px; font: 600 14px var(--font); }
.stepper button { height: 42px; border: 0; border-radius: 11px; background: var(--bg); font: 600 19px var(--font); cursor: pointer; }
.stepper output { text-align: center; font: 700 17px var(--font); }
.wizard__nav { display: flex; gap: 8px; justify-content: space-between; }
.wizard__nav .btn { flex: 1; }
.why { display: grid; gap: 10px; }
.why > div { background: var(--card); border-radius: 14px; padding: 16px; box-shadow: var(--shadow); }
.why .i { width: 30px; height: 30px; color: var(--blue-text); }
.why b { display: block; font: 700 16px var(--font); margin: 10px 0 4px; }
.why p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--text2); }
.sell .block { border-top: 0; }

/* ---------- town / suburb ---------- */
.townpage, .article { background: var(--card); }
.townhero { min-height: 400px; }
.townhero--short { min-height: 320px; }
.townhero__in { padding: 26px 18px; }
.notice { display: flex; gap: 10px; margin: 14px 16px 0; padding: 14px; border-radius: 14px; background: var(--sample-bg); color: var(--sample-ink); font-size: 13.5px; line-height: 1.45; }
.notice p { margin: 0; }
.statrow { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; padding: 14px 16px 0; }
.stat { background: var(--card); color: var(--ink); border-radius: 14px; padding: 16px 14px; box-shadow: inset 0 0 0 1px var(--line); }
.stat b { display: block; font: 700 24px/1.1 var(--display); color: var(--ink); letter-spacing: -.01em; }
.stat span { display: block; margin-top: 6px; font: 600 12px var(--font); color: var(--muted); }
.source { margin: 0; padding: 10px 16px 0; font-size: 12px; color: var(--muted); line-height: 1.45; }
.prose p { font: 400 16px/1.7 var(--body); color: var(--ink); max-width: 68ch; margin: 0 0 14px; }
.prose h2 { font: 700 22px/1.2 var(--font); margin: 30px 0 10px; letter-spacing: -.01em; }
.prose h3 { font: 700 17px var(--font); margin: 22px 0 8px; }
.prose ul, .prose ol { padding-left: 22px; margin: 0 0 14px; }
.prose li { font: 400 16px/1.6 var(--body); margin: 4px 0; }
.prose a { color: var(--blue-text); }
.subgrid { display: flex; flex-wrap: wrap; gap: 8px; }
.subcard { position: relative; flex: 1 1 150px; height: 116px; display: flex; flex-direction: column; justify-content: flex-end; padding: 12px; border-radius: 14px; overflow: hidden; color: #fff; text-decoration: none; background: #000 var(--img) center / cover; }
.subcard::before { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, .78), rgba(0, 0, 0, .05)); }
.subcard > * { position: relative; }
.subcard b { font: 700 17px var(--font); }
.subcard span { font: 600 12.5px var(--font); color: #fff; }
.subchip { display: inline-flex; align-items: center; height: 40px; padding: 0 14px; border-radius: 10px; border: 1.5px solid var(--line); background: var(--card); color: var(--ink); font: 600 13.5px var(--font); text-decoration: none; }
.subchip:hover { border-color: var(--line-strong); }
.faq details { border: 1.5px solid var(--line); border-radius: 12px; margin-bottom: 8px; background: var(--card); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 16px; font: 600 15px/1.35 var(--font); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .i { transition: transform .25s var(--ease); color: var(--blue-text); }
.faq details[open] summary .i { transform: rotate(90deg); }
.faq p { margin: 0; padding: 0 16px 16px; font: 400 15px/1.6 var(--body); color: var(--text2); }
.cta--wide { border-radius: 14px; }
.subbig { margin: 14px 16px 0; padding: 20px 18px; border-radius: 14px; box-shadow: var(--shadow); border: 1px solid var(--line); }
.subbig__m b { display: block; font: 700 42px/1 var(--font); letter-spacing: -.02em; }
.subbig__m span { color: var(--muted); font-weight: 600; }
.subbig .spot__rl { color: var(--muted); margin-top: 6px; }
.subbig__f { display: flex; gap: 22px; margin-top: 16px; font-size: 14px; }
.subbig__f b { font-weight: 700; color: var(--blue-text); }
.subbig .source { padding: 14px 0 0; }

/* ---------- insights, article, saved, contact, stub ---------- */
.pagetitle { font: 700 30px/1.1 var(--font); margin: 20px 16px 8px; letter-spacing: -.02em; }
.lead { margin: 0 16px 16px; color: var(--text2); font-size: 15px; line-height: 1.5; max-width: 60ch; }
.feature { display: block; text-decoration: none; color: inherit; margin-bottom: 8px; overflow: hidden; }
.feature img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.feature__b { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 16px; }
.feature__b b { font: 700 25px/1.15 var(--font); letter-spacing: -.015em; }
.feature__b > span:not(.chip) { color: var(--text2); font-size: 14.5px; line-height: 1.5; }
.feature__b small { color: var(--muted); font-weight: 600; }
.agrid { display: grid; gap: 8px; }
.apost--sm img { aspect-ratio: 16 / 10; }
.article__hero { min-height: 320px; }
.article__hero > div { padding: 24px 18px; }
.article__hero h1 { font: 700 30px/1.1 var(--font); margin: 12px 0 0; max-width: 20ch; letter-spacing: -.02em; }
.article__meta { display: flex; align-items: center; gap: 12px; padding: 16px; border-bottom: 1px solid var(--line); }
.article__meta img { width: 46px; height: 46px; border-radius: 13px; object-fit: cover; }
.article__meta b { display: block; font: 700 14.5px var(--font); }
.article__meta small { color: var(--muted); font-size: 12.5px; }
.article__meta .iconbtn { margin-left: auto; }
.article__body { padding: 16px 16px 8px; }
.saved__list { display: grid; gap: 8px; }
.scard { display: flex; align-items: center; }
.scard > a { flex: 1; display: grid; grid-template-columns: 120px 1fr; gap: 12px; align-items: center; padding: 10px; text-decoration: none; color: inherit; min-width: 0; }
.scard img { width: 120px; height: 90px; object-fit: cover; border-radius: 10px; }
.scard b { display: block; font: 700 16px var(--font); }
.scard span span { display: block; font-size: 13.5px; }
.scard small { color: var(--muted); font-size: 12px; }
.scard .save { position: static; margin-right: 10px; box-shadow: none; }
.empty { text-align: center; padding: 36px 24px; }
.empty__icon { width: 74px; height: 74px; margin: 0 auto 14px; border-radius: 22px; background: var(--blue-tint); color: var(--blue-btn); display: grid; place-items: center; }
.empty__icon .i { width: 34px; height: 34px; }
.empty h2 { font: 700 21px var(--font); margin: 0 0 8px; }
.empty p { max-width: 40ch; margin: 0 auto 18px; color: var(--text2); line-height: 1.5; }
.alert { display: flex; gap: 14px; padding: 18px 16px; margin-top: 8px; }
.alert__i { width: 46px; height: 46px; border-radius: 13px; background: var(--blue-tint); color: var(--blue-btn); display: grid; place-items: center; flex: none; }
.alert h2 { font: 700 18px var(--font); margin: 0 0 4px; }
.alert p { margin: 0 0 12px; font-size: 14px; color: var(--text2); line-height: 1.45; }
.alert > div:last-child { flex: 1; min-width: 0; }
.alert .inline-form input { border-color: var(--field-line); }
.contact .card { padding: 16px; margin-bottom: 8px; }
.contact__ways { display: grid; gap: 8px; margin-top: 16px; }
.contact__ways > * { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; background: var(--bg); color: var(--ink); text-decoration: none; }
.contact__ways .i { color: var(--blue-text); }
.contact__ways b { display: block; font: 600 14.5px var(--font); }
.contact__ways small { color: var(--muted); }
.stub { text-align: center; padding: 64px 24px; }
.stub p { max-width: 46ch; margin: 0 auto 22px; color: var(--text2); line-height: 1.6; }
.stub__btns { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }

/* ---------- sheets, modal, toast ---------- */
.sheet, .modal { position: fixed; inset: 0; z-index: 110; }
.sheet__scrim, .modal__scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, .52); animation: fade .25s; }
.sheet__panel { position: absolute; left: 0; right: 0; bottom: 0; max-height: 90vh; overflow: auto; padding: 10px 16px calc(24px + env(safe-area-inset-bottom)); background: var(--card); border-radius: 22px 22px 0 0; animation: up .38s var(--ease); }
@keyframes up { from { transform: translateY(100%); } }
@keyframes fade { from { opacity: 0; } }
.sheet__grab { width: 40px; height: 5px; border-radius: 3px; background: var(--line-strong); margin: 0 auto 14px; }
.sheet__x { position: absolute; top: 12px; right: 10px; }
.menu-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 16px 0; }
.menu-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.menu-tiles a { display: flex; flex-direction: column; gap: 10px; padding: 14px 12px; border-radius: 14px; background: var(--bg); color: var(--ink); font: 600 13px var(--font); text-decoration: none; }
.menu-sec { margin: 20px 0 8px; font: 700 11px var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--muted2); }
.menu-areas { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.menu-areas a { position: relative; height: 88px; display: flex; align-items: flex-end; padding: 10px 12px; border-radius: 14px; overflow: hidden; background: #000 var(--img) center / cover; color: #fff; font: 700 15px var(--font); text-decoration: none; }
.menu-areas a::before { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, .72), transparent 70%); }
.menu-areas span { position: relative; }
.menu-links { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.menu-links a { font: 600 14px var(--font); color: var(--ink); }
.legal { margin: 18px 0 0; font-size: 11px; color: var(--muted); line-height: 1.5; }
.modal { display: grid; place-items: end center; }
.modal__panel { position: relative; width: 100%; max-width: 520px; max-height: 88vh; overflow: auto; padding: 24px 20px calc(20px + env(safe-area-inset-bottom)); background: var(--card); border-radius: 22px 22px 0 0; animation: up .38s var(--ease); }
.okmark { width: 58px; height: 58px; border-radius: 16px; background: var(--blue-tint); color: var(--blue-btn); display: grid; place-items: center; margin-bottom: 12px; }
.okmark .i { width: 30px; height: 30px; stroke-width: 2.6; }
.modal h2 { font: 700 24px var(--font); margin: 0 0 6px; }
.modal p { color: var(--text2); line-height: 1.5; margin: 0 0 14px; }
.modal details { margin: 0 0 16px; border: 1.5px dashed var(--field-line); border-radius: 12px; padding: 12px 14px; background: var(--subtle); }
.modal summary { cursor: pointer; font: 600 13px var(--font); }
.modal details p { font-size: 13px; margin: 10px 0; }
.modal pre { margin: 0; padding: 12px; border-radius: 10px; background: var(--bg); color: var(--ink); font: 12px/1.5 ui-monospace, Consolas, monospace; overflow: auto; max-height: 260px; }
.toast { position: fixed; left: 50%; bottom: calc(var(--tabbar) + 18px + env(safe-area-inset-bottom)); z-index: 130; transform: translate(-50%, 10px); opacity: 0; padding: 12px 16px; border-radius: 12px; background: var(--toast-bg); color: var(--toast-ink); font: 600 13.5px var(--font); box-shadow: 0 10px 30px rgba(0, 0, 0, .25); transition: transform .3s var(--ease), opacity .3s; max-width: calc(100vw - 32px); }
.toast.is-in { transform: translate(-50%, 0); opacity: 1; }

/* ---------- 420px+ ---------- */
@media (min-width: 420px) {
  .fld2 { grid-template-columns: 1fr 1fr; }
  .mt__m { font-size: 17px; }
}

/* ---------- 640px+: cards float ---------- */
@media (min-width: 640px) {
  .card, .lcard { border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow); }
  .cta { overflow: hidden; }
  .feed, .results { gap: 16px; }
  .feedtop { border-radius: var(--r); box-shadow: var(--shadow); margin-bottom: 16px; }
  .gal--tall { aspect-ratio: 16 / 12; }
  .agrid { grid-template-columns: 1fr 1fr; gap: 16px; }
  .statrow { grid-template-columns: repeat(4, 1fr); }
  .why { grid-template-columns: repeat(3, 1fr); }
  .wizard { margin: -64px 24px 0; padding: 24px; }
  .sellhero__in { padding: 32px 28px 92px; }
  .sellhero h1, .townhero h1 { font-size: 46px; }
  .townhero__in { padding: 34px 28px; }
  .market { padding: 22px 22px 18px; }
  .mt { padding: 14px; }
  .mt__m { font-size: 20px; }
  .market h3 { font-size: 28px; }
}

/* ---------- 768px+: icon rail nav, desktop app bar ---------- */
@media (min-width: 768px) {
  :root { --appbar: 64px; }
  .appbar__in { padding: 0 24px; gap: 16px; }
  .appbar__logo .wordmark { height: 34px; }
  .appbar__search { display: flex; align-items: center; gap: 10px; flex: 1; max-width: 460px; height: 44px; margin-left: 24px; padding: 0 14px; border-radius: 12px; background: var(--card); color: var(--muted); box-shadow: inset 0 0 0 1px var(--line); transition: background .2s, box-shadow .2s; }
  .appbar__search:focus-within { color: var(--ink); box-shadow: inset 0 0 0 1px var(--blue-btn), 0 0 0 3px rgba(13, 172, 240, .18); }
  .appbar__search input { flex: 1; min-width: 0; height: 100%; border: 0; background: none; color: inherit; font: 500 14.5px var(--font); outline: none; }
  .appbar__actions { gap: 18px; }
  .appbar__cta { display: inline-flex; }
  .appbar__m { display: none; }
  .tabbar, .actionbar { display: none; }
  .main, .has-actionbar .main { padding: 20px 0 56px; }
  .shell { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 24px; max-width: 1440px; margin: 0 auto; padding: 0 24px; }
  .sidenav { display: block; position: sticky; top: var(--appbar); align-self: start; height: calc(100vh - var(--appbar)); overflow-y: auto; padding: 16px 0 24px; scrollbar-width: thin; }
  .sidenav__group { padding: 6px 0; }
  .sidenav__group + .sidenav__group { border-top: 1px solid var(--line); }
  .sidenav__group:last-child { display: none; }
  .sidenav__label, .navi > span, .navi .count { display: none; }
  .navi { position: relative; display: flex; align-items: center; justify-content: center; gap: 12px; height: 50px; border-radius: 14px; color: var(--ink); text-decoration: none; font: 600 14.5px var(--font); transition: background .15s; }
  .navi:hover { background: var(--soft); }
  .navi.is-active { background: var(--card); box-shadow: var(--shadow); }
  .navi.is-active::after { content: ''; position: absolute; left: 0; top: 50%; width: 4px; height: 22px; transform: translateY(-50%); background: var(--blue); }
  .navi .i { width: 24px; height: 24px; }
  .navi--area img { width: 36px; height: 36px; border-radius: 10px; object-fit: cover; }
  .feed, .feedtop, .feedend, .search, .saved, .insights, .contact, .stub, .sell, .townpage, .article { max-width: 680px; margin-left: auto; margin-right: auto; }
  .townpage, .article { border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow); }
  .feedtop { padding-top: 18px; }
  .feedtop h1 { font-size: 22px; }
  .newpill { left: calc(50% + 50px); }
  .toast { bottom: 28px; }
  .modal { place-items: center; }
  .modal__panel { border-radius: 22px; }
  .sell .sellhero { border-radius: var(--r); }
  .sellhero, .townhero { min-height: 420px; }
  .pagetitle { margin-left: 0; }
  .lead { margin-left: 0; }
  .detail { background: transparent; max-width: 1180px; margin: 0 auto; }
  .detail__gal { display: none; }
  .mosaic { position: relative; display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 210px 210px; gap: 8px; border-radius: var(--r); overflow: hidden; }
  .mosaic__i { border: 0; padding: 0; overflow: hidden; cursor: zoom-in; background: #111; }
  .mosaic__i img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .7s var(--ease); }
  .mosaic__i:hover img { transform: scale(1.05); }
  .mosaic__i--0 { grid-row: span 2; }
  .mosaic__all { position: absolute; right: 14px; bottom: 14px; box-shadow: 0 4px 16px rgba(0, 0, 0, .25); }
  .mediabar { border: 0; padding: 14px 0; }
  .mediabar > * { background: var(--card); box-shadow: var(--shadow); }
  .detail__cols { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 28px; align-items: start; padding: 0; }
  .detail__main { background: var(--card); border-radius: var(--r); padding: 6px 28px 6px; box-shadow: var(--shadow); }
  .detail__side { position: sticky; top: calc(var(--appbar) + 20px); border: 0; padding: 0; }
  .side-card { background: var(--card); border-radius: var(--r); padding: 20px; box-shadow: var(--shadow); }
  .enq h3 { font-size: 17px; }
  .fld2 { grid-template-columns: 1fr; }
  .price--xl { font-size: 32px; }
  .detail__head h1 { font-size: 19px; }
  .more { border: 0; padding: 30px 0 0; }
  .more .hscroll { padding-right: 0; }
  .search { max-width: none; }
  .search__top { border-radius: var(--r); box-shadow: var(--shadow); display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px 18px; padding: 18px 20px; }
  .search__top .chips { grid-column: 1 / -1; }
  .search__top .chips + .chips { margin-top: -6px; }
  .search__meta { padding: 16px 4px; }
  .lcard .gal { aspect-ratio: 16 / 10; }
}

/* ---------- 1100px+: Facebook-style three columns ---------- */
@media (min-width: 1100px) {
  .shell { grid-template-columns: 252px minmax(0, 660px) 320px; justify-content: center; gap: 32px; }
  .is-wide .shell { grid-template-columns: 252px minmax(0, 1fr); }
  .sidenav__group:last-child { display: block; }
  .sidenav__label { display: block; padding: 14px 12px 6px; font: 700 11px var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--muted2); }
  .navi { justify-content: flex-start; padding: 0 12px; height: 46px; }
  .navi > span, .navi .count { display: inline; }
  .navi .count { display: inline-grid; margin-left: auto; }
  .navi--area { height: 52px; }
  .navi--area span small { display: block; font: 500 11.5px var(--font); color: var(--muted); }
  .navi--sm { height: 40px; font-size: 13.5px; }
  .navi--sm .i { width: 20px; height: 20px; color: var(--text2); }
  .navi.is-active::after { left: -10px; width: 6px; height: 6px; }
  .appbar__phone { display: inline-flex; align-items: center; gap: 7px; color: var(--ink); text-decoration: none; font: 600 14px var(--font); }
  .appbar__phone .i { color: var(--blue-btn); width: 20px; height: 20px; }
  .feed, .feedtop, .feedend, .saved, .insights, .contact, .stub, .sell, .townpage, .article { max-width: none; }
  .newpill { left: calc(50% - 30px); }
  .rail { display: flex; flex-direction: column; gap: 16px; position: sticky; top: calc(var(--appbar) + 20px); align-self: start; margin: 20px 0; max-height: calc(100vh - var(--appbar) - 40px); overflow-y: auto; scrollbar-width: none; }
  .rail::-webkit-scrollbar { display: none; }
  .rcard { background: var(--card); border-radius: var(--r); padding: 16px; box-shadow: var(--shadow); }
  .rcard--dark { background: var(--card); color: var(--ink); }
  .rcard--dark .live { color: var(--ink); }
  .rcard__top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
  .rcard__top small { color: var(--muted2); font-size: 11px; }
  .rcard__h { font: 700 15px var(--font); margin-bottom: 8px; }
  .pulse-row { display: grid; grid-template-columns: 1fr auto; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; }
  .pulse-row span { font: 600 14px var(--font); }
  .pulse-row b { grid-row: span 2; grid-column: 2; font: 700 17px var(--font); color: var(--ink); }
  .pulse-row small { color: var(--muted); font-size: 12px; }
  .pulse-row:hover span { color: var(--blue-text); }
  .rcard__more { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; color: var(--blue-text); font: 600 13px var(--font); text-decoration: none; }
  .rcard__more .i { width: 16px; height: 16px; }
  .agentcard { display: grid; grid-template-columns: 64px 1fr; gap: 6px 12px; align-items: center; }
  .agentcard img { width: 64px; height: 64px; border-radius: 17px; object-fit: cover; }
  .agentcard b { display: block; font: 700 16px var(--font); }
  .agentcard small { color: var(--muted); font-size: 12.5px; }
  .agentcard p { grid-column: 1 / -1; margin: 8px 0 4px; font-size: 13.5px; line-height: 1.45; color: var(--text2); }
  .agentcard__btns { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .agentcard__btns .btn { height: 40px; }
  .mini { display: flex; align-items: center; gap: 10px; padding: 6px 0; text-decoration: none; color: var(--ink); }
  .mini img { width: 58px; height: 44px; border-radius: 9px; object-fit: cover; }
  .mini b { display: block; font: 600 13.5px var(--font); }
  .mini small { color: var(--muted); font-size: 12px; }
  .follow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .follow a { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 0; border-radius: 12px; background: var(--bg); color: var(--ink); font: 600 11.5px var(--font); text-decoration: none; }
  .follow a:hover { background: var(--blue-tint); color: var(--blue-text); }
  .railfoot { padding: 0 4px 12px; font-size: 11.5px; line-height: 1.6; color: var(--muted); }
  .railfoot a { color: inherit; text-decoration: none; }
  .railfoot p { margin: 6px 0 0; }
  .search__split { display: grid; grid-template-columns: minmax(0, 560px) minmax(0, 1fr); gap: 24px; align-items: start; }
  .mapbox, .show-map .mapbox { display: block; position: sticky; top: calc(var(--appbar) + 20px); height: calc(100vh - var(--appbar) - 40px); border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow); z-index: 1; }
  .search__meta .btn { display: none; }
  .mosaic { grid-template-rows: 240px 240px; }
}

@media (min-width: 1400px) {
  .shell { grid-template-columns: 272px minmax(0, 680px) 340px; gap: 40px; }
  .is-wide .shell { grid-template-columns: 272px minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .reveal { opacity: 1; transform: none; }
}

/* ---------- first-look fixes ---------- */
.mt__g small { font-size: inherit; font-weight: 500; color: var(--muted); }
@media (max-width: 767px) {
  .feedtop { padding-top: 14px; }
  .feedtop h1 { font-size: 15.5px; }
  .livebar { margin-top: 6px; font-size: 12px; }
  .lb-long { display: none; }
  .stories { padding-top: 12px; }
  .story__ring { width: 64px; height: 64px; border-radius: 19px; }
  .story__ring img { border-radius: 16px; }
  .story { width: 66px; }
  .chips--feed { padding-top: 8px; }
}
/* photo counter bottom-left: listing photos carry the GRASSICK watermark bottom-right */
.gal__count { left: 10px; right: auto; }
@media (max-width: 767px) {
  .search__top { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px; padding: 14px 16px; }
  .search__top h1 { font-size: 21px; }
  .search__top .sbox, .search__top .chips { grid-column: 1 / -1; }
  .search__top .seg { width: 150px; }
  .search__top .seg button { height: 32px; font-size: 13px; }
  .search__top .chipbtn { height: 32px; padding: 0 12px; font-size: 12.5px; }
  .sbox { height: 46px; }
  .search__meta { padding: 10px 16px; }
  .search__meta .btn { height: 34px; }
}
@media (max-width: 767px) {
  .search__top h1 { grid-row: 1; grid-column: 1; }
  .search__top .seg { grid-row: 1; grid-column: 2; }
}

/* ---------- likes and comments ---------- */
.eng { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 10px 14px 0; font: 600 12.5px var(--font); color: var(--muted); }
.eng__l { display: inline-flex; align-items: center; gap: 6px; }
.eng__l i { width: 20px; height: 20px; border-radius: 50%; background: var(--blue-btn); color: #fff; display: grid; place-items: center; font-style: normal; }
.eng__l .i { width: 13px; height: 13px; }
.eng__c { border: 0; background: none; padding: 0; font: inherit; color: inherit; cursor: pointer; margin-left: auto; }
.eng__c:hover { text-decoration: underline; }
.cmts { margin: 0 14px; }
.cmts:empty { display: none; }
.cmts .cm { margin-top: 10px; }
.cmts__more { border: 0; background: none; padding: 8px 0 0; font: 600 13px var(--font); color: var(--muted); cursor: pointer; }
.cm { display: flex; gap: 8px; align-items: flex-start; }
.cm__av { width: 32px; height: 32px; border-radius: 50%; background: var(--blue-tint); color: var(--blue-text); display: grid; place-items: center; font: 700 11.5px var(--font); flex: none; }
.cm__b { min-width: 0; }
.cm__b p { margin: 0; padding: 8px 12px; border-radius: 4px 14px 14px 14px; background: var(--bg); font: 400 14px/1.4 var(--body); }
.cm__b p b { font: 600 13px var(--font); margin-right: 3px; }
.cm__b small { display: block; margin: 3px 0 0 4px; font: 600 11.5px var(--font); color: var(--muted); }
.cm--pending .cm__b p { background: var(--card); box-shadow: inset 0 0 0 1.5px var(--line); }
.cm--pending .cm__b small { color: var(--sample-ink); }
.post__bar .act { min-width: 0; }
.post__bar .act span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.act[data-like][aria-pressed="true"] { color: var(--blue-text); }
.act[data-like][aria-pressed="true"] .i { fill: var(--blue-btn); stroke: var(--blue-btn); }
.market .eng { color: var(--muted); margin-left: 0; margin-right: 0; }
.market .cmts { margin: 0; }
.market .cm__b p { background: var(--bg); }
.market .post__bar { margin: 12px 0 0; }
.sp__src { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 10px 14px 0; font: 500 12px var(--font); color: var(--muted); }
.sp__src .i { width: 15px; height: 15px; }
.sp__src a { color: var(--blue-text); font-weight: 600; text-decoration: none; }
.inlink { color: var(--blue-text); font-weight: 600; text-decoration: none; }
.post__body .addr a { text-decoration: none; }
@media (max-width: 380px) { .post__bar .act { gap: 5px; font-size: 12px; } .post__bar .act .i { width: 18px; height: 18px; } }

/* comment sheet */
.modal--sheet .modal__panel { padding: 0; display: flex; flex-direction: column; max-height: 86vh; }
.cpanel__h { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 12px 12px 18px; border-bottom: 1px solid var(--line); }
.cpanel__h b { display: block; font: 700 17px var(--font); }
.cpanel__h small { display: block; color: var(--muted); font-size: 12.5px; margin-top: 2px; }
.cpanel__list { flex: 1; overflow-y: auto; padding: 6px 16px 14px; min-height: 90px; }
.cpanel__list .cm { margin-top: 12px; }
.cpanel__empty { color: var(--muted); text-align: center; margin: 26px 0 10px; }
.cpanel__form { border-top: 1px solid var(--line); padding: 12px 16px calc(14px + env(safe-area-inset-bottom)); background: var(--card); }
.cpanel__who p { margin: 0 0 10px; font-size: 13px; color: var(--muted); line-height: 1.45; }
.cpanel__who .fld { margin-bottom: 8px; }
.cpanel__who .fld input { height: 44px; }
.cpanel__as { margin: 0 0 8px; font-size: 13px; color: var(--muted); }
.cpanel__as .linkbtn { font-size: 13px; }
.cpanel__row { display: flex; gap: 8px; align-items: flex-end; }
.cpanel__row textarea { flex: 1; min-width: 0; resize: none; border: 1.5px solid var(--field-line); border-radius: 14px; padding: 11px 14px; font: 400 15px/1.4 var(--body); }
.cpanel__row textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(13, 172, 240, .22); }
.cpanel__row .iconbtn { width: 46px; height: 46px; }
.tick { display: flex; align-items: center; gap: 8px; margin: 2px 0 12px; font: 600 13px var(--font); cursor: pointer; }
.tick input { width: 18px; height: 18px; accent-color: var(--blue-btn); }

/* ---------- chat ---------- */
.appbar__chat { position: relative; }
.appbar__chat i { position: absolute; top: 8px; right: 7px; width: 9px; height: 9px; background: var(--blue); box-shadow: 0 0 0 2px var(--bg); }
.chatfab { display: none; }
.chat { position: fixed; z-index: 105; inset: 0; display: flex; flex-direction: column; background: var(--card); animation: up .35s var(--ease); }
.chat__h { display: flex; align-items: center; gap: 10px; padding: calc(10px + env(safe-area-inset-top)) 8px 10px 14px; background: var(--card); color: var(--ink); border-bottom: 1px solid var(--line); }
.chat__av { position: relative; width: 40px; height: 40px; flex: none; }
.chat__av svg { width: 40px; height: 40px; border-radius: 12px; display: block; }
.chat__av i { position: absolute; right: -3px; bottom: -3px; width: 11px; height: 11px; background: var(--blue); box-shadow: 0 0 0 2.5px var(--card); animation: livepulse 1.8s ease-out infinite; }
.chat__who { flex: 1; min-width: 0; }
.chat__who b { display: block; font: 700 15px var(--font); }
.chat__who small { display: block; font: 500 12px var(--font); color: var(--muted); }
.chat__h .iconbtn { color: var(--ink); }
.chat__body { flex: 1; overflow-y: auto; padding: 16px 14px 8px; display: flex; flex-direction: column; gap: 8px; background: var(--bg); }
.bub { max-width: 84%; padding: 10px 13px; border-radius: 16px; font: 400 14.5px/1.45 var(--body); animation: stepin .25s var(--ease); overflow-wrap: anywhere; }
.bub--bot { align-self: flex-start; background: var(--card); border-radius: 4px 16px 16px 16px; box-shadow: 0 1px 2px rgba(0, 0, 0, .06); }
.bub--me { align-self: flex-end; background: var(--blue-tint); color: var(--ink); border-radius: 16px 4px 16px 16px; }
.bub a { color: var(--blue-text); font-weight: 600; }
.bub--typing { display: flex; gap: 4px; padding: 13px 14px; }
.bub--typing i { width: 7px; height: 7px; background: #9a9ca1; animation: blink 1s infinite; }
.bub--typing i:nth-child(2) { animation-delay: .15s; }
.bub--typing i:nth-child(3) { animation-delay: .3s; }
@keyframes blink { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }
.bub--form { display: flex; flex-direction: column; gap: 8px; width: 84%; }
.bub--form input { height: 42px; border: 1.5px solid var(--field-line); border-radius: 10px; padding: 0 12px; font: 500 15px var(--font); }
.bub--form input:focus { outline: none; border-color: var(--blue); }
.chat__quick { display: flex; gap: 8px; overflow-x: auto; padding: 8px 14px 0; background: var(--bg); scrollbar-width: none; }
.chat__quick:empty { display: none; }
.chat__quick .chipbtn { background: var(--card); border-color: var(--line); color: var(--blue-text); }
.chat__in { display: flex; gap: 8px; padding: 10px 12px; background: var(--bg); }
.chat__in input { flex: 1; min-width: 0; height: 46px; border: 1.5px solid var(--field-line); border-radius: 14px; padding: 0 14px; font: 500 16px var(--font); background: var(--field); }
.chat__in input:focus { outline: none; border-color: var(--blue); }
.chat__in .iconbtn { width: 46px; height: 46px; }
.chat__note { margin: 0; padding: 0 14px calc(10px + env(safe-area-inset-bottom)); background: var(--bg); font-size: 11px; color: var(--muted2); }
.chat-open { overflow: hidden; }
@media (min-width: 768px) {
  .chatfab { position: fixed; right: 24px; bottom: 24px; z-index: 70; display: inline-flex; align-items: center; gap: 9px; height: 52px; padding: 0 20px 0 16px; border: 0; border-radius: 26px; background: var(--blue-btn); color: #fff; font: 700 14px var(--font); cursor: pointer; box-shadow: 0 10px 28px rgba(0, 0, 0, .28); transition: transform .2s var(--ease); }
  .chatfab:hover { transform: translateY(-2px); }
  .chatfab .i { color: #fff; }
  .chatfab__dot { position: absolute; top: -4px; right: -4px; width: 13px; height: 13px; background: var(--blue); box-shadow: 0 0 0 3px var(--bg); animation: livepulse 1.8s ease-out infinite; }
  .chat-open .chatfab { display: none; }
  .chat { inset: auto 24px 24px auto; width: 390px; height: min(620px, calc(100vh - 110px)); border-radius: 20px; overflow: hidden; box-shadow: 0 20px 60px rgba(0, 0, 0, .3); }
  .chat-open { overflow: auto; }
  .toast { bottom: 96px; }
}

/* ---------- prototype approve page ---------- */
.modpage .modlist { display: grid; gap: 10px; }
.modc { padding: 14px 16px; }
.modc__top { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.modc__top small { color: var(--muted); }
.modc p { margin: 0 0 6px; font: 400 15px/1.45 var(--body); }
.modc__btns { display: flex; gap: 8px; margin-top: 10px; }
.modc--hidden { opacity: .6; }

/* ---------- real posts, reviews, recorded sales ---------- */
.post__name .net + .net { margin-left: -2px; }
.sp__text .clamp p { margin: 0 0 8px; }
.sp__text .clamp p:last-child { margin-bottom: 0; }
.clamp { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; }
.clamp.is-open { display: block; -webkit-line-clamp: unset; }
.clamp--review { -webkit-line-clamp: 6; }
.clamp__btn { margin: 4px 0 0; font-size: 13.5px; }
.sp__text { padding: 0 14px 12px; font: 400 14.5px/1.5 var(--body); }
.sp__text .clamp__btn { display: inline-flex; }
.sp__one img { width: 100%; height: auto; max-height: 640px; object-fit: cover; display: block; }
.review__in { padding: 4px 18px 6px; }
.review__stars { display: flex; gap: 5px; margin-bottom: 12px; }
.review__stars i { width: 17px; height: 17px; background: #F5B301; clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.review__q { margin: 0; font: 600 17px/1.5 var(--font); letter-spacing: -.005em; color: var(--ink); }
.review__q p { margin: 0 0 10px; }
.review__q .clamp__btn { font-size: 13.5px; }
.review__by { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; font: 500 13px var(--font); color: var(--muted); }
.review__by b { font: 700 14px var(--font); color: var(--ink); }
.review__by span::before { content: ''; display: inline-block; width: 6px; height: 6px; background: var(--blue); margin-right: 8px; vertical-align: middle; }
.sales__in { padding: 0 14px 4px; }
.sales__in h3 { margin: 0 0 12px; font: 600 16px/1.35 var(--font); }
.sales__in h3 b { font: 700 26px var(--font); color: var(--blue-text); margin-right: 2px; }
.sales__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.sales__list li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.sales__a, .sales__p { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sales__p { text-align: right; flex: none; }
.sales__a b { font: 600 14px var(--font); }
.sales__p b { font: 700 15px var(--font); }
.sales__list small { font: 500 12px var(--font); color: var(--muted); }
.sales__f { margin: 10px 0 0; font-size: 12px; color: var(--muted); }
.sales__f a { color: var(--blue-text); font-weight: 600; text-decoration: none; }
.ipsgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.ipsgrid a { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px; border-radius: 12px; background: var(--card); color: var(--ink); text-decoration: none; box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow .2s, transform .2s var(--ease); }
.ipsgrid a:hover { box-shadow: inset 0 0 0 1px var(--line-strong); transform: translateY(-1px); }
.ipsgrid b { font: 700 15px var(--font); }
.ipsgrid span { font: 700 18px var(--font); color: var(--ink); }
.ipsgrid small { font: 500 11.5px var(--font); color: var(--muted); }
@media (min-width: 640px) { .ipsgrid { grid-template-columns: repeat(3, 1fr); } }

/* ---------- suburb pages ---------- */
.subbig--thin p { margin: 0 0 10px; line-height: 1.55; color: var(--text2); }
.trendnote { margin: 14px 0 0; padding: 12px 14px; border-radius: 12px; background: var(--blue-tint); font-size: 13.5px; line-height: 1.5; }
.mix { display: grid; gap: 18px; }
.mix h3 { font: 700 14px var(--font); margin: 0 0 10px; }
.mixbar { display: grid; grid-template-columns: 120px 1fr auto; align-items: center; gap: 10px; margin-bottom: 8px; font-size: 13px; }
.mixbar span { font-weight: 600; }
.mixbar i { height: 10px; border-radius: 3px; background: var(--soft); position: relative; overflow: hidden; }
.mixbar i::after { content: ''; position: absolute; inset: 0 auto 0 0; width: var(--w); background: var(--blue); }
.mixbar b { font-weight: 700; color: var(--text2); min-width: 54px; text-align: right; }
@media (min-width: 640px) { .mix { grid-template-columns: 1fr 1fr; gap: 28px; } }

/* ---------- calculators and tools ---------- */
.calcpage, .marketpage { padding-bottom: 8px; }
.calchead { padding: 22px 16px 6px; }
.calchead h1 { font: 700 30px/1.1 var(--font); margin: 10px 0 8px; letter-spacing: -.02em; }
.calchead .lead { margin: 0 0 8px; }
.calchead .fine { margin: 0; max-width: 70ch; }
.calc { display: grid; gap: 12px; padding: 12px 16px 6px; }
.calc__form, .calc__out { padding: 16px; }
.calc__form h2 { font: 700 15px var(--font); margin: 18px 0 10px; }
.calc__form h2:first-child { margin-top: 0; }
.cf { display: flex; flex-direction: column; gap: 5px; margin-bottom: 10px; }
.cf > span { font: 600 12.5px var(--font); color: var(--text2); }
.cf small { font-size: 12px; color: var(--muted); }
.cf__in { display: flex; align-items: center; height: 48px; border-radius: 12px; border: 1.5px solid var(--field-line); background: var(--field); padding: 0 12px; gap: 6px; }
.cf__in:focus-within { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(13, 172, 240, .22); }
.cf__in i { font: 600 14px var(--font); font-style: normal; color: var(--muted); }
.cf__in input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: none; font: 600 16px var(--font); color: var(--ink); }
.cf select, .fld select { width: 100%; height: 48px; border-radius: 12px; border: 1.5px solid var(--field-line); background: var(--field); padding: 0 12px; font: 600 15px var(--font); color: var(--ink); }
.cf select:focus, .fld select:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(13, 172, 240, .22); }
.calc__out { background: var(--card); color: var(--ink); align-self: start; }
.cbig { display: flex; flex-direction: column; gap: 4px; padding-bottom: 14px; margin-bottom: 6px; border-bottom: 1px solid var(--line); }
.cbig span { font: 600 13px var(--font); color: var(--muted); }
.cbig b { font: 700 40px/1.05 var(--display); color: var(--blue-text); letter-spacing: -.02em; }
.cbig small { font-size: 12.5px; line-height: 1.45; color: var(--muted); }
.co { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.co span { color: var(--text2); }
.co b { font: 700 15px var(--font); text-align: right; }
.co--strong b { color: var(--blue-text); }
.co:last-child { border-bottom: 0; }
.toolgrid { display: grid; gap: 10px; }
.toolgrid--big { padding: 10px 16px 6px; }
.toolcard { display: flex; flex-direction: column; gap: 6px; padding: 16px; border-radius: var(--r); background: var(--card); box-shadow: var(--shadow); color: var(--ink); text-decoration: none; transition: transform .2s var(--ease); }
.toolcard:hover { transform: translateY(-2px); }
.toolcard .i { width: 38px; height: 38px; padding: 9px; border-radius: 11px; background: var(--blue-tint); color: var(--blue-btn); }
.toolcard b { font: 700 16px var(--font); }
.toolcard span { font-size: 13.5px; line-height: 1.45; color: var(--muted); }
@media (min-width: 640px) { .toolgrid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) {
  .calc { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: start; }
  .calc__out { position: sticky; top: calc(var(--appbar) + 16px); }
  .calchead h1 { font-size: 38px; }
}

/* ---------- about and off-market ---------- */
.meet { display: grid; overflow: hidden; }
.meet img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; display: block; }
.meet__b { padding: 18px 16px; }
.meet__b h2 { margin: 0 0 2px; }
.meet__role { margin: 0 0 12px; font: 600 14px var(--font); color: var(--muted); }
.taglist { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0 0 14px; padding: 0; }
.taglist li { padding: 6px 10px; border-radius: 8px; background: var(--bg); font: 600 12.5px var(--font); }
.meet__ways { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.pillars { display: grid; gap: 10px; }
.pillar { padding: 16px; }
.pillar__i { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--blue-tint); color: var(--blue-btn); margin-bottom: 10px; }
.pillar h3 { font: 700 16px var(--font); margin: 0 0 6px; }
.pillar p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--text2); }
.offform { padding: 18px 16px; }
.offform h2 { margin: 0 0 4px; font: 700 22px var(--font); }
.offform .lead { margin: 0 0 8px; }
.offform h3 { font: 700 14px var(--font); margin: 18px 0 10px; }
.offform h3 small { font-weight: 600; color: var(--muted); }
.fld3 { display: grid; gap: 0 10px; }
@media (min-width: 640px) {
  .meet { grid-template-columns: 260px 1fr; }
  .meet img { height: 100%; }
  .pillars { grid-template-columns: 1fr 1fr; }
  .pillars--3 { grid-template-columns: repeat(3, 1fr); }
  .fld2--on { grid-template-columns: 1fr 1fr; }
  .fld3 { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- market data ---------- */
.mfilter { display: grid; gap: 8px; padding: 10px 16px 4px; }
.chipbtn { flex: none; display: inline-flex; align-items: center; height: 36px; padding: 0 13px; border-radius: 10px; background: var(--card); box-shadow: inset 0 0 0 1.5px var(--line); font: 600 13px var(--font); color: var(--ink); text-decoration: none; white-space: nowrap; }
.chipbtn.is-on { background: var(--blue-tint); color: var(--blue-text); box-shadow: none; }
.mtotals { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 12px 16px 0; }
.mtotal { display: flex; flex-direction: column; gap: 4px; padding: 14px; }
.mtotal span { font: 600 12px var(--font); color: var(--muted); }
.mtotal b { font: 700 28px/1.1 var(--font); letter-spacing: -.02em; }
.mtotal small { font: 600 12.5px var(--font); color: var(--muted); }
.msum { margin: 12px 16px 6px; font: 500 15px/1.6 var(--body); color: var(--ink); max-width: 70ch; }
.up { color: var(--up); font-weight: 700; }
.down { color: var(--down); font-weight: 700; }
.mchart { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; align-items: end; height: 190px; padding-top: 8px; }
.mchart__m { display: flex; flex-direction: column; align-items: center; gap: 4px; height: 100%; min-width: 0; }
.mchart__bars { flex: 1; width: 100%; display: flex; align-items: flex-end; justify-content: center; gap: 2px; }
.mchart__bars i { display: block; width: 42%; max-width: 16px; height: var(--h); min-height: 2px; border-radius: 3px 3px 0 0; }
.mchart__m b { font: 700 11px var(--font); }
.mchart__m small { font: 600 10.5px var(--font); color: var(--muted); }
i.a { background: var(--chart-a); }
i.b { background: var(--blue); }
.mkey { display: flex; flex-wrap: wrap; gap: 14px; margin: 10px 0 0; font: 600 12.5px var(--font); color: var(--muted); }
.mkey span { display: inline-flex; align-items: center; gap: 6px; }
.mkey i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.mtable { border-top: 1px solid var(--line); }
.mrow { display: grid; grid-template-columns: minmax(0, 1.6fr) 1fr .8fr 1.1fr .8fr; gap: 8px; align-items: center; padding: 10px 2px; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; font-size: 13.5px; }
a.mrow:hover { background: var(--hover); }
.mrow b { font: 600 13.5px var(--font); }
.mrow small { color: var(--muted); font-size: 11.5px; }
.mrow span:not(:first-child) { text-align: right; }
.mrow--h { font: 600 11.5px var(--font); color: var(--muted); }
.mtable--sub { max-height: 640px; overflow-y: auto; }
/* /ipswich/: one series, months still being recorded faded, the median house price under each month */
.mchart--one .mchart__bars i { width: 62%; max-width: 30px; }
.mchart__m.is-rec .mchart__bars i { opacity: .35; }
.mchart__m .mchart__v { color: var(--ink); font-weight: 700; }
.block .statrow--flat { padding: 0; }
@media (max-width: 520px) {
  .mrow { grid-template-columns: minmax(0, 1.4fr) .9fr 1fr .8fr; }
  .mrow span:nth-child(3) { display: none; }
}

/* ---------- legal ---------- */
.legalpage { padding: 18px 0 8px; }
.legalpage > .chip { margin: 0 16px; }
.legalpage .pagetitle { margin-top: 10px; }
.legalpage > .fine { margin: 0 16px 10px; }
.legalpage .prose { padding: 0 16px; }
.legalpage .prose h2 { font-size: 19px; }
.legalnav { display: flex; flex-wrap: wrap; gap: 8px; padding: 16px; border-top: 1px solid var(--line); margin-top: 10px; }
.legalnav a { font: 600 13px var(--font); color: var(--blue-text); text-decoration: none; }

/* ---------- headings and big numbers (device font, through --display) ---------- */
.main :is(h1, h2), .sheet :is(h1, h2), .modal h2, .cpanel__h b, .wizard legend, .enq h3, .offform h2,
.pinned__hl, .spot__name, .market h3, .cta h3, .cta2 h3, .subbig__m b, .mtotal b, .price--xl, .pagetitle, .feature__b b, .apost__t {
  font-family: var(--display); font-weight: 700; letter-spacing: -.012em;
}
.main :is(h1, h2) { color: var(--ink); }
.main h2, .modal h2, .cta2 h3, .apost__t, .feature__b b, .wizard legend, .enq h3 { font-weight: 600; }
.townhero h1, .sellhero h1, .article__hero h1 { color: #fff; }
.townhero h1, .sellhero h1 { max-width: 18ch; letter-spacing: -.015em; }
/* the listing address reads as a line of detail under the price, not a headline */
.main .detail__head h1 { font-family: var(--font); font-weight: 600; letter-spacing: 0; }
/* story rings: a thin brand ring rather than a thick block of blue */
.story__ring { padding: 2px; }
.story__ring img { border-width: 2px; }

/* ---------- appearance switch (menu, rail, app bar) ---------- */
.themesw { display: inline-grid; grid-template-columns: repeat(3, 1fr); gap: 2px; padding: 3px; border-radius: 11px; background: var(--bg); }
.themesw button { height: 34px; padding: 0 12px; border: 0; border-radius: 9px; background: none; color: var(--muted); font: 600 13px var(--font); cursor: pointer; }
.themesw button[aria-pressed="true"] { background: var(--card); color: var(--ink); box-shadow: 0 1px 3px rgba(0, 0, 0, .14); }
.menu-theme { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 18px 0 0; }
.menu-theme span { font: 600 14px var(--font); }
.railtheme { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.railtheme span { font: 600 12.5px var(--font); color: var(--muted); }
.appbar__theme { display: none; }
.appbar__theme .i-sun { display: none; }
@media (min-width: 768px) {
  .appbar__theme { display: grid; color: var(--ink); }
}
:root[data-theme="dark"] .appbar__theme .i-sun { display: block; }
:root[data-theme="dark"] .appbar__theme .i-moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .appbar__theme .i-sun { display: block; }
  :root:not([data-theme="light"]) .appbar__theme .i-moon { display: none; }
}

/* ---------- listing alert form, comment approval page ---------- */
.alertform { display: grid; gap: 0; }
.alertform .btn { width: 100%; margin-top: 4px; }
.modlink .modc { text-align: left; max-width: 520px; margin: 0 auto 18px; }