/* Engine styles for every customer site. Reads only the tokens in tokens.css.
   Layout, spacing, radius, and type scale are engine. Colors and fonts come from the site theme. */
*{box-sizing:border-box}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{margin:0;background:var(--c-bg);color:var(--c-ink);font-family:var(--font-body);font-size:15px;line-height:1.55}
img{max-width:100%;display:block}
a{color:var(--c-link);text-decoration:none;text-underline-offset:3px;transition:color 140ms var(--ease)}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--c-accent);outline-offset:2px}
h1,h2,h3{margin:0;font-family:var(--font-display);color:var(--c-ink);text-wrap:balance}
.num,.stat b,.price{font-variant-numeric:tabular-nums}
button{font-family:inherit}
/* Skip link (audit A4): off screen until a keyboard user tabs to it, the first stop on every page. A mouse never shows it. */
.skip{position:absolute;left:12px;top:12px;z-index:100;padding:12px 18px;border-radius:var(--r-control);background:var(--c-bg);color:var(--c-ink);font:600 14px var(--font-body);text-decoration:none;box-shadow:0 8px 24px color-mix(in srgb,var(--c-deep) 30%,transparent);clip-path:inset(50%);width:1px;height:1px;overflow:hidden;white-space:nowrap}
.skip:focus{clip-path:none;width:auto;height:auto;overflow:visible}

/* Type scale from the spec. Mobile first, tablet at 768, desktop at 1200. */
.t-hero{font-size:var(--t-hero);font-weight:800;line-height:.92;letter-spacing:-.04em}
.t-display{font-size:var(--t-display);font-weight:800;line-height:1.02;letter-spacing:-.03em}
.t-h2,h2{font-size:var(--t-h2);font-weight:800;line-height:1.1;letter-spacing:-.02em}
.t-h3,h3{font-size:16px;font-weight:700;line-height:1.3}
.t-body-lg{font-size:17px;line-height:1.7}
.t-small{font-size:12px;font-weight:500;color:var(--c-ink-2)}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-display);font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--c-link)}
.eyebrow::before{content:"";width:24px;height:2px;background:var(--c-accent)}
@media (min-width:768px){.t-h3,h3{font-size:17px}}
@media (min-width:1200px){.t-h3,h3{font-size:18px}}

/* Page shell: gutters 20 / 40 / 56, content max 1168, section gaps 56 / 72 / 96. */
.wrap{max-width:1168px;margin:0 auto;padding-inline:20px}
section.block{padding-block:56px}
section.block.alt{background:var(--c-muted)}
section.block.tint{background:var(--c-tint)}
section.block .eyebrow{margin-bottom:12px}
section.block h2{margin-bottom:24px}
.bleed{width:100%}
@media (min-width:768px){.wrap{padding-inline:40px}section.block{padding-block:72px}}
@media (min-width:1200px){.wrap{padding-inline:56px}section.block{padding-block:96px}}

/* Buttons: 12px display caps, heights 48 / 52 / 56 / 64, radius control. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 22px;border-radius:var(--r-control);font-family:var(--font-display);font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;cursor:pointer;border:1px solid transparent;transition:background 140ms var(--ease),color 140ms var(--ease),border-color 140ms var(--ease)}
.btn:hover{text-decoration:none}
.btn.solid{background:var(--c-brand);color:var(--c-brand-ink);border-color:var(--c-brand)}
.btn.solid:hover{filter:brightness(1.08)}
.btn.outline{background:transparent;color:var(--c-ink);border-color:var(--c-line)}
.btn.outline:hover{border-color:var(--c-ink)}
.btn.outline.on-dark{color:#fff;border-color:rgba(255,255,255,.45)}
.btn.cta{background:var(--c-cta);color:var(--c-cta-ink);border-color:var(--c-cta)}
.btn.tall{min-height:56px;padding:0 28px}
.btn.wide{width:100%}
@media (min-width:768px){.btn{min-height:52px}}
@media (min-width:1200px){.btn{min-height:56px;padding:0 26px}}

/* Header (D53): one treatment on every page. Transparent over the hero band every page opens with, then an opaque compact bar
   once the hero has scrolled past. No page kind has its own header variant. */
html{scroll-padding-top:72px}
.site-header{position:absolute;top:0;left:0;right:0;z-index:30;height:72px;display:flex;align-items:center}
.site-header .wrap{display:flex;align-items:center;gap:20px;width:100%}
.site-header .logo{display:inline-flex;align-items:center;font-family:var(--font-display);font-weight:800;font-size:18px;letter-spacing:-.02em;color:var(--c-ink);text-decoration:none}
.site-header .logo img{height:32px;width:auto}
.site-header .logo .white{display:none}
/* The name lockup (D588): the name on two equal lines, a thin line, the brokerage mark. */
.lk{display:inline-flex;align-items:center;gap:18px;line-height:1}
.lk-name{display:inline-grid;gap:5px;font-family:var(--font-body);font-size:14px;text-transform:uppercase;letter-spacing:0}
.lk-1{display:flex;justify-content:space-between;font-weight:200}
.lk-2{font-weight:400;letter-spacing:.3em;margin-right:-.3em;white-space:nowrap}
.lk-rule{width:1px;height:30px;background:currentColor;opacity:.35}
.site-header .logo .lk-mark{height:28px;width:auto;display:block}
.site-header .logo .lk-mark.white{display:none}
.site-footer .lk-mark{height:36px;width:auto;display:block}
.site-footer .lk-name{font-size:16px}
.site-footer .lk-rule{height:38px}
@media (max-width:767px){.lk{gap:12px}.lk-name{font-size:12px;gap:4px}.lk-rule{height:24px}.site-header .logo .lk-mark{height:22px}}
.site-header nav.main{display:none;gap:22px;margin-left:auto}
.site-header nav.main>a,.site-header .dd-btn{font-size:13px;font-weight:600;color:var(--c-ink);text-decoration:none}
.site-header .right{margin-left:auto;display:flex;align-items:center;gap:8px}
.site-header .signin{font-size:13px;font-weight:600;color:var(--c-ink);text-decoration:none;min-height:44px;display:inline-flex;align-items:center;padding:0 8px}
.site-header .menu{min-height:44px;min-width:44px;display:inline-flex;align-items:center;justify-content:center;background:none;border:0;color:var(--c-ink);font:600 13px var(--font-body);cursor:pointer}
.site-header .phone{display:none}
body.has-hero .site-header{color:#fff}
body.has-hero .site-header .logo,body.has-hero .site-header nav.main>a,body.has-hero .site-header .dd-btn,body.has-hero .site-header .signin,body.has-hero .site-header .menu{color:#fff}
body.has-hero .site-header .logo .white{display:block}
body.has-hero .site-header .logo .dark{display:none}
.site-header.compact{position:fixed;background:var(--c-bg);border-bottom:1px solid var(--c-line);height:60px;color:var(--c-ink)}
body.has-hero .site-header.compact .logo,body.has-hero .site-header.compact nav.main>a,body.has-hero .site-header.compact .dd-btn,body.has-hero .site-header.compact .signin,body.has-hero .site-header.compact .menu{color:var(--c-ink)}
body.has-hero .site-header.compact .logo .white{display:none}
body.has-hero .site-header.compact .logo .dark{display:block}
@media (min-width:1200px){.site-header{height:92px}.site-header nav.main{display:flex}.site-header .menu{display:none}.site-header .phone{display:inline-flex;min-height:48px;padding:0 22px;border:1px solid var(--c-brand);border-radius:var(--r-control);font-family:var(--font-display);font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;background:var(--c-brand);color:var(--c-brand-ink);text-decoration:none;align-items:center}body.has-hero .site-header .phone{background:#fff;color:var(--c-deep);border-color:#fff}body.has-hero .site-header .phone:hover{background:rgba(255,255,255,.92)}body.has-hero .site-header.compact .phone{background:var(--c-brand);color:var(--c-brand-ink);border-color:var(--c-brand)}}
/* Desktop header (Truman, 2026-10-11, option A of planning/screens/nav-polish): wider than the page column, bigger logo and links,
   the links centered, and no lines; the scrolled bar sits on a soft shadow instead of a border. */
@media (min-width:1200px){
  .site-header .wrap{max-width:1440px;display:grid;grid-template-columns:1fr auto 1fr}
  .site-header nav.main{margin:0;justify-self:center;gap:34px}
  .site-header .right{margin-left:0;justify-self:end;gap:14px}
  .site-header .logo img{height:40px}
  .site-header nav.main>a,.site-header .dd-btn,.site-header .signin{font-size:15px}
  .site-header.compact{height:72px;border-bottom:0;box-shadow:0 8px 28px rgba(8,14,24,.10)}
  .site-header.compact .logo img{height:34px}
  /* Bars that stick under the scrolled header follow its 72px height. */
  html{scroll-padding-top:84px}
  body .pricebar,body .jumpbar{top:72px}
  body .ch-anchor,body #listings,body #costs{scroll-margin-top:calc(72px + var(--jb,0px) + 8px)}
}

/* Mobile menu sheet */
.menu-sheet{position:fixed;inset:0;z-index:40;background:var(--c-bg);padding:24px 20px calc(24px + env(safe-area-inset-bottom,0px));display:none;flex-direction:column;gap:6px}
.menu-sheet.open{display:flex}
.menu-sheet a{font-family:var(--font-display);font-size:22px;font-weight:800;color:var(--c-ink);text-decoration:none;padding:12px 0;border-bottom:1px solid var(--c-line)}
.menu-sheet .close{align-self:flex-end;background:none;border:0;font:600 14px var(--font-body);color:var(--c-ink);min-height:44px;min-width:44px;cursor:pointer}

/* Breadcrumb */
.crumbs{font-size:13px;color:var(--c-ink-2);display:flex;gap:8px;flex-wrap:wrap}
.crumbs a{color:inherit}
.hero .crumbs{color:rgba(255,255,255,.88)}

/* Hero. Restyled fully in step 2; shell keeps the heights and the protection gradient from the spec. */
.hero{position:relative;min-height:460px;display:flex;align-items:center;background:var(--c-deep) center/cover no-repeat;color:#fff;isolation:isolate}
/* One hero wash on every page (Truman, 2026-10-01): the home page's fade, dark at the top under the menu, light in the middle, deep at
   the bottom. Heroes whose text sits mid-photo (communities, content pages, the short heroes) add a light even wash on phones and a
   scrim from the left behind the text column on wider screens, so white text reads on any photo an agent uploads. */
.hero::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,color-mix(in srgb,var(--c-deep) 55%,transparent) 0%,color-mix(in srgb,var(--c-deep) 10%,transparent) 30%,color-mix(in srgb,var(--c-deep) 35%,transparent) 55%,color-mix(in srgb,var(--c-deep) 92%,transparent) 100%)}
.hero:not(.home-hero)::before{background:linear-gradient(color-mix(in srgb,var(--c-deep) 30%,transparent),color-mix(in srgb,var(--c-deep) 30%,transparent)),linear-gradient(180deg,color-mix(in srgb,var(--c-deep) 55%,transparent) 0%,color-mix(in srgb,var(--c-deep) 10%,transparent) 30%,color-mix(in srgb,var(--c-deep) 35%,transparent) 55%,color-mix(in srgb,var(--c-deep) 92%,transparent) 100%)}
@media (min-width:768px){.hero:not(.home-hero)::before{background:linear-gradient(90deg,color-mix(in srgb,var(--c-deep) 72%,transparent) 0%,color-mix(in srgb,var(--c-deep) 45%,transparent) 40%,color-mix(in srgb,var(--c-deep) 0%,transparent) 72%),linear-gradient(180deg,color-mix(in srgb,var(--c-deep) 55%,transparent) 0%,color-mix(in srgb,var(--c-deep) 10%,transparent) 30%,color-mix(in srgb,var(--c-deep) 35%,transparent) 55%,color-mix(in srgb,var(--c-deep) 92%,transparent) 100%)}}
.hero h1,.hero .sub,.hero .crumbs{text-shadow:0 1px 2px color-mix(in srgb,var(--c-deep) 45%,transparent),0 2px 28px color-mix(in srgb,var(--c-deep) 55%,transparent)}
.hero .wrap{width:100%;padding-top:96px;padding-bottom:48px}
.hero h1{color:#fff;font-size:var(--t-hero);font-weight:800;line-height:.92;letter-spacing:-.04em;margin:10px 0 12px}
.hero .sub{font-size:15px;color:rgba(255,255,255,.94);max-width:640px;margin:0 0 24px;text-wrap:balance}
.hero .sub-brand{display:inline-block;margin-bottom:18px}
.hero .sub-brand img{height:40px;width:auto;object-fit:contain;filter:drop-shadow(0 2px 6px rgba(7,28,43,.45))}
.hero .actions{display:flex;gap:10px;flex-wrap:wrap}
@media (min-width:768px){.hero{min-height:540px}.hero .wrap{padding-top:112px}.hero .sub{font-size:18px}.hero .sub-brand img{height:48px}}
@media (min-width:1200px){.hero{min-height:620px}.hero .wrap{padding-top:120px}.hero .sub{font-size:20px;max-width:720px}.hero .sub-brand img{height:56px}}

/* Stats row. Four equal cells with hairlines, labels on one line, freshness on its own row. */
.stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 16px;padding:24px 0 16px;border-bottom:1px solid var(--c-line)}
.stats .stat{display:grid;gap:6px;min-width:0}
.stats .stat b{font-family:var(--font-display);font-size:var(--t-stat);font-weight:800;line-height:1;color:var(--c-ink);letter-spacing:-.02em;white-space:nowrap}
.stats .stat span{font-size:12px;color:var(--c-ink-2);white-space:nowrap}
.stats .fresh{grid-column:1/-1;display:flex;align-items:center;gap:8px;font-size:12px;color:var(--c-ink-2);padding-top:4px}
.stats .fresh::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--c-live)}
@media (min-width:768px){.stats{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px 0}.stats .stat{padding:0 24px;border-left:1px solid var(--c-line)}.stats .stat:first-child{padding-left:0;border-left:0}.stats .stat span{font-size:13px}}
@media (min-width:1200px){.stats .stat b{font-size:34px}}

/* Chips */
.chips{display:flex;gap:8px;overflow-x:auto;padding:16px 0;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 14px;border-radius:var(--r-chip);background:var(--c-chip);color:var(--c-ink);font-size:13px;font-weight:600;text-decoration:none;white-space:nowrap}
.chip small{font-weight:500;color:var(--c-ink-2)}
.chip:hover{text-decoration:none;background:var(--c-line)}
@media (min-width:768px){.chips{flex-wrap:wrap;overflow:visible}.chip{min-height:40px}}

/* Cards, generic until the listing card restyle in step 2 */
.card{display:block;text-decoration:none;color:inherit;background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--r-panel);overflow:hidden}
.card .photo{aspect-ratio:4/3;background:var(--c-muted) center/cover;position:relative;overflow:hidden}
.card .body{padding:16px 18px 18px;display:grid;gap:6px}
.card .body b{font-family:var(--font-display);font-size:18px;font-weight:800;letter-spacing:-.01em}
.card .body span{font-size:14px;color:var(--c-ink-2);line-height:1.5}
.card .body small{font-size:12px;color:var(--c-ink-2)}
.card:hover{text-decoration:none}
.badge{position:absolute;top:10px;left:10px;background:color-mix(in srgb,var(--c-surface) 95%,transparent);color:var(--c-ink);font-family:var(--font-display);font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:6px 8px;border-radius:var(--r-chip)}
.grid{display:grid;grid-template-columns:minmax(0,1fr);gap:40px 24px}
@media (min-width:768px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.rail{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(260px,1fr);gap:16px;overflow-x:auto;padding-bottom:12px;scroll-snap-type:x mandatory;scrollbar-width:none}
.rail .card{scroll-snap-align:start}

/* Content blocks, generic until step 3 */
/* Quick facts strip: a quiet row under the chips, same language as the stats row. No boxes, no icons. */
.facts-strip{list-style:none;padding:0 0 24px;margin:20px 0 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 24px;border-bottom:1px solid var(--c-line)}
.facts-strip li{display:block;min-width:0}
.facts-strip .ficon{display:none}
.facts-strip div{display:grid;gap:4px;min-width:0}
.facts-strip span{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--c-ink-2);font-family:var(--font-display);font-weight:700}
.facts-strip b{font-size:15px;font-weight:600;line-height:1.3;text-wrap:balance} /* long values wrap inside their own column, never into the next (2026-10-04) */
@media (min-width:768px){.facts-strip{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1200px){.facts-strip{grid-template-columns:repeat(6,minmax(0,1fr));gap:0;margin-top:28px}.facts-strip li{padding:0 20px;border-left:1px solid var(--c-line)}.facts-strip li:first-child{padding-left:0;border-left:0}}
.facts{padding-block:8px}
.market{background:var(--c-tint)}
.market .wrap{display:grid;gap:24px}
.market .video{display:grid;place-items:center;aspect-ratio:16/9;background:var(--c-deep);color:#fff;border-radius:var(--r-media);text-decoration:none;font-family:var(--font-display);font-weight:700;font-size:12px;letter-spacing:.1em;text-transform:uppercase}
@media (min-width:1200px){.market .wrap{grid-template-columns:1.5fr 1fr;gap:64px;align-items:center}}
.subs .grid{grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:16px}
.editorial{max-width:68ch}
.editorial p{font-size:17px;line-height:1.7;margin:0 0 20px;color:var(--c-ink)}
.editorial p a{color:var(--c-link);text-decoration:underline;text-underline-offset:3px}
/* Panel card pattern: photo bleeds to the panel edge, no border, muted fill, rounded as one object.
   Used by the feature block now and by the listing detail village card later. */
.panel-card{display:grid;background:var(--c-muted);border-radius:var(--r-panel);overflow:hidden}
.panel-card .photo{aspect-ratio:16/10;background:var(--c-muted) center/cover;min-height:100%}
/* The club and other feature panels sit on a raised card a shade off their section, so all four corners show (Truman, 2026-10-04). */
.feature .panel-card{background:color-mix(in srgb,var(--c-ink) 9%,var(--sec,var(--c-bg)));border-radius:calc(var(--r-panel) * 2)}
.panel-card .text{padding:28px 24px 30px}
.panel-card .text h2{margin-bottom:12px}
.panel-card .text p{font-size:17px;line-height:1.65;color:var(--c-ink-2);margin:0 0 18px;max-width:46ch}
.panel-card .text .tlink{font-weight:600}
@media (min-width:768px){.panel-card{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}.panel-card .photo{aspect-ratio:auto;height:100%;min-height:320px}.panel-card .text{padding:36px 40px}}
@media (min-width:1200px){.panel-card{grid-template-columns:minmax(0,4fr) minmax(0,6fr)}.panel-card .text{padding:44px 48px}}
.faq{max-width:68ch}
.faq details{border-bottom:1px solid var(--c-line)}
.faq summary{min-height:60px;display:flex;align-items:center;justify-content:space-between;gap:16px;cursor:pointer;font-family:var(--font-display);font-weight:700;font-size:17px;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:24px;font-weight:300;color:var(--c-ink-2)}
.faq details[open] summary::after{content:"\2212"}
.faq p{margin:0 0 20px;color:var(--c-ink-2);font-size:15px;line-height:1.6;max-width:68ch}
.agent .wrap{display:grid;gap:20px}
.agent .avatar{width:120px;height:120px;border-radius:var(--r-panel);overflow:hidden;filter:grayscale(1)}
.agent .avatar img{width:100%;height:100%;object-fit:cover}
.agent .actions{display:flex;gap:10px;flex-wrap:wrap}
@media (min-width:768px){.agent .wrap{grid-template-columns:auto 1fr;align-items:center;gap:32px}}
.video-frame{aspect-ratio:16/9;border-radius:var(--r-media);overflow:hidden;background:var(--c-deep)}
.video-frame iframe{width:100%;height:100%;border:0;display:block}
.video-block .caption{color:var(--c-ink-2);font-size:12px;margin-top:10px}

/* Forms */
.lead-form{display:grid;gap:30px;max-width:560px}

/* Underlined fields with a floating label. Colors come only from the theme tokens, so every site brands its own forms. */
.field{position:relative;display:block;padding-top:20px}
.field input,.field textarea{display:block;width:100%;margin:0;padding:8px 0 12px;border:0;border-bottom:1px solid var(--c-line);border-radius:0;background:transparent;color:var(--c-ink);font:400 17px/1.45 var(--font-body);outline:none;box-shadow:none;appearance:none;transition:border-color 200ms var(--ease)}
.field textarea{resize:vertical;min-height:92px}
.field input::placeholder,.field textarea::placeholder{color:transparent;transition:color 200ms var(--ease)}
.field :is(input,textarea):focus::placeholder{color:var(--c-ink-2);opacity:.7}
.field .fl{position:absolute;left:0;top:28px;font-size:17px;line-height:1.45;color:var(--c-ink-2);pointer-events:none;transform-origin:left top;transition:transform 220ms var(--ease),color 220ms var(--ease),letter-spacing 220ms var(--ease)}
.field :is(input,textarea):is(:focus,:not(:placeholder-shown))+.fl{transform:translateY(-26px) scale(.7);letter-spacing:.02em}
.field :is(input,textarea):focus+.fl{color:var(--c-link)}
.field:hover :is(input,textarea){border-bottom-color:var(--c-ink-2)}
/* The password eye: shows or hides what was typed. Shut (a slash through the eye) while the password is showing. */
.field.has-eye input{padding-right:44px}
.pw-eye{position:absolute;right:-8px;bottom:2px;width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;background:none;border:0;padding:0;color:var(--c-ink-2);cursor:pointer;border-radius:var(--r-control)}
.pw-eye:hover{color:var(--c-ink)}
.pw-eye svg{width:20px;height:20px}
.pw-eye .eye-shut{display:none}
.pw-eye[aria-pressed="true"] .eye-shut{display:inline}
.field::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--c-cta);transform:scaleX(0);transform-origin:left;transition:transform 280ms var(--ease)}
.field:focus-within::after{transform:scaleX(1)}
.field :is(input,textarea):-webkit-autofill{-webkit-text-fill-color:var(--c-ink);transition:background-color 99999s 0s}
.field :is(input,textarea):user-invalid{border-bottom-color:#c0392b}
.lead-form .tcpa{font-size:11px;color:var(--c-ink-2);line-height:1.55;margin:0}
.tcpa a{color:inherit;text-decoration:underline}
.lead-form .ts:empty{display:none}
.lead-form .ts:not(:empty){margin:-6px 0 4px;width:100%;min-width:0;border-radius:var(--r-control);overflow:hidden}
.lead-form .ts iframe{width:100%!important;max-width:100%!important}
.lead-form .hp,.alert-finish-form .hp,.gate-form .hp{position:absolute;left:-10000px;width:1px;height:1px;opacity:0;pointer-events:none}
.lead-form button{justify-self:start}

/* Search page and results, generic until step 5 */
.results .toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding-bottom:12px;margin-bottom:24px;border-bottom:1px solid var(--c-line);color:var(--c-ink-2);font-size:13px}
.results .sort select{font:inherit;min-height:44px;padding:0 10px;border:1px solid var(--c-line);border-radius:var(--r-control);margin-left:6px;background:var(--c-surface);color:var(--c-ink)}
.results .grid{grid-template-columns:minmax(0,1fr)}
@media (min-width:768px){.results .grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1200px){.results .grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.pager{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;margin-top:32px;font-weight:600;font-size:14px}
.pager a{min-height:44px;display:inline-flex;align-items:center}
.pager a:last-child{justify-self:end}
.gate{max-width:560px}

/* Footer */
.site-footer{background:var(--c-deep);color:rgba(255,255,255,.72);padding-block:56px calc(32px + env(safe-area-inset-bottom,0px));font-size:14px;line-height:1.6}
.site-footer a{color:#fff}
.site-footer .fcols{display:grid;grid-template-columns:1fr 1fr;gap:32px 24px;padding-bottom:40px}
.site-footer .office{grid-column:1/-1;display:grid;gap:12px;justify-items:start;align-content:start}
.site-footer .office p{margin:0}
.site-footer .office strong{color:#fff;font-weight:600}
.site-footer .logo{font-family:var(--font-display);font-weight:800;font-size:18px;color:#fff;margin-bottom:4px}
.site-footer .logo img{height:34px;width:auto;display:block}
.site-footer .fphone{font-family:var(--font-display);font-size:20px;font-weight:700;letter-spacing:-.01em;min-height:44px;display:inline-flex;align-items:center;text-decoration:none}
.site-footer .lic{font-size:12px;color:rgba(255,255,255,.55)}
.site-footer .fcol{display:flex;flex-direction:column;align-items:flex-start}
.site-footer .fcol h2{font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.5);margin:0 0 6px;line-height:1.4}
.site-footer .fcol a{min-height:40px;display:inline-flex;align-items:center;color:rgba(255,255,255,.88);text-decoration:none}
.site-footer .fcol a:hover{color:#fff;text-decoration:underline}
.site-footer .fbase{display:flex;gap:14px;align-items:flex-start;border-top:1px solid rgba(255,255,255,.12);padding-top:24px}
.site-footer .eho{flex:none;color:rgba(255,255,255,.7);display:inline-flex;margin-top:1px}
.site-footer .legal{margin:0;color:rgba(255,255,255,.55);font-size:12px;line-height:1.6;max-width:90ch}
.site-footer .legal p{margin:0 0 6px}.site-footer .legal p:last-child{margin:0}
.idx-mark{display:inline-flex;vertical-align:-3px;margin-right:6px;color:currentColor}
/* Platform credit (D28): mark and name in the site accent, muted until hover. */
.site-footer .powered{margin-left:auto;flex:none;display:inline-flex;align-items:center;gap:6px;min-height:44px;color:var(--c-accent);text-decoration:none;font-size:11px;font-weight:500;letter-spacing:.04em;line-height:1;white-space:nowrap;transition:filter 200ms var(--ease)}
.site-footer .powered:hover,.site-footer .powered:focus-visible{filter:brightness(1.3);text-decoration:none}
.site-footer .powered svg{flex:none;margin-left:2px}
.site-footer .powered .pname{font-family:var(--pfont);font-size:11.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase}
.site-footer .powered sup{font-family:var(--pmono);font-size:7px;font-weight:400;letter-spacing:.02em;vertical-align:5px;margin-left:2px;text-transform:none}
@media (max-width:767px){.site-footer .fbase{flex-wrap:wrap}.site-footer .legal{flex:1 1 0;min-width:0}.site-footer .powered{flex-basis:calc(100% - 36px);margin-left:36px}}
@media (min-width:768px){.site-footer{padding-top:72px}.site-footer .fcols{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1200px){.site-footer .fcols{grid-template-columns:minmax(0,2fr) repeat(3,minmax(0,1fr));gap:48px}.site-footer .office{grid-column:auto}}
@media (max-width:767px){body.has-sticky .site-footer{padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))}}

/* Footer top tier (D138): a search launcher that is a link, not a field (Let's talk sits right above, and forms never touch),
   the live market line, and one call button. On-dark values are the footer's own, from white over --c-deep, like .photo-band. */
.site-footer{--f-ink:#fff;--f-ink-2:color-mix(in srgb,#fff 72%,transparent);--f-ink-3:color-mix(in srgb,#fff 52%,transparent);--f-line:color-mix(in srgb,#fff 12%,transparent);--f-fill:color-mix(in srgb,#fff 6%,transparent)}
.site-footer .ftop{display:grid;gap:32px;padding-bottom:44px;margin-bottom:44px;border-bottom:1px solid var(--f-line)}
.site-footer .ftitle{margin:0 0 16px;font-family:var(--font-display);font-size:clamp(24px,2.4vw,32px);font-weight:700;line-height:1.15;letter-spacing:-.015em;color:var(--f-ink);text-wrap:balance}
.site-footer .flaunch{display:flex;align-items:center;gap:12px;width:100%;max-width:560px;min-height:60px;padding:0 12px 0 20px;border-radius:999px;background:var(--f-fill);border:1px solid color-mix(in srgb,#fff 18%,transparent);color:var(--f-ink-2);font:500 16px/1.3 var(--font-body);text-decoration:none;transition:border-color 160ms var(--ease),background 160ms var(--ease),color 160ms var(--ease)}
.site-footer .flaunch svg{flex:none;color:var(--c-accent)}
.site-footer .flaunch span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.site-footer .flaunch:hover{border-color:var(--c-accent);background:color-mix(in srgb,#fff 10%,transparent);color:var(--f-ink);text-decoration:none}
.site-footer .flaunch:focus-visible,.site-footer .fcol a:focus-visible{outline:2px solid var(--c-accent);outline-offset:3px}
.site-footer .fkbd{display:none;flex:none;place-items:center;min-width:30px;height:30px;padding:0 8px;border:1px solid color-mix(in srgb,#fff 22%,transparent);border-radius:var(--r-control);font:600 13px/1 var(--font-body);color:var(--f-ink-3)}
@media (hover:hover) and (min-width:1024px){.site-footer .fkbd{display:inline-grid}}
.site-footer .fmarket{display:flex;align-items:baseline;gap:10px;margin:16px 0 0;font-size:13px;line-height:1.5;color:var(--f-ink-2)}
.site-footer .fmarket .dot{flex:none;position:relative;top:-1px;width:7px;height:7px;border-radius:50%;background:var(--c-live);box-shadow:0 0 0 0 color-mix(in srgb,var(--c-live) 60%,transparent)}
.site-footer .fstack{display:grid;gap:24px;align-content:start}

@media (min-width:1200px){.site-footer .fcols{grid-template-columns:minmax(220px,1.2fr);grid-auto-columns:minmax(0,1fr);grid-auto-flow:column;gap:36px}}
@media (min-width:768px) and (max-width:1199px){.site-footer .fcols{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}}
@media (max-width:767px){.site-footer .ftop{padding-bottom:36px;margin-bottom:36px}.site-footer .flaunch{min-height:56px}.site-footer .fcol a{min-height:36px;line-height:1.35}}
@media (prefers-reduced-motion:no-preference){.site-footer .fmarket .dot{animation:f-live 2.6s var(--ease) infinite}}
@keyframes f-live{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--c-live) 55%,transparent)}70%,100%{box-shadow:0 0 0 7px transparent}}
@media (prefers-reduced-motion:reduce){.site-footer .flaunch,.site-footer .powered{transition:none}}

/* The search sheet the launcher opens: the hero search bar's look, one field and the button. */
dialog.sheet.search-sheet h2{margin:4px 0 18px;padding-right:40px;font-size:clamp(22px,2.2vw,26px)}
dialog.search-sheet .ss-form input::placeholder{color:color-mix(in srgb,var(--c-ink-2) 60%,transparent)}
dialog.search-sheet .ss-form{grid-template-columns:minmax(0,1fr) auto;margin:0;box-shadow:none;padding:0;background:transparent;max-width:none}
dialog.search-sheet .ss-form label{background:var(--c-muted);box-shadow:inset 0 0 0 1px var(--c-line)}
dialog.search-sheet .ss-form .btn{padding:0 18px}
dialog.search-sheet .ss-all{margin:16px 0 0;font-size:14px}
dialog.search-sheet .ss-all a{color:var(--c-link)}
@media (min-width:768px){dialog.sheet.search-sheet{width:min(600px,100%)}}
@media (prefers-reduced-motion:reduce){dialog.sheet.search-sheet[open]{animation:none}}

/* Mobile sticky bar: Text outline, Call solid, 48px */
.sticky-bar{display:none}
@media (max-width:767px){html:has(body.has-sticky){scroll-padding-bottom:calc(84px + env(safe-area-inset-bottom,0px))}.sticky-bar{display:grid;grid-template-columns:1fr 1fr;gap:10px;position:fixed;left:0;right:0;bottom:0;z-index:25;background:var(--c-surface);border-top:1px solid var(--c-line);padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px))}.sticky-bar .btn{min-height:48px}}

/* Step 2: listing card, results region, sidebar */
.lcard{position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:0;background:transparent} /* minmax: a long price line wraps instead of widening the card past its column */
.lphoto{display:block;position:relative;aspect-ratio:3/2;max-width:100%;border-radius:var(--r-media);background:var(--c-muted);overflow:hidden;text-decoration:none}
.lphoto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.lphoto.short{aspect-ratio:16/10}
.lsoon,.lx-soon{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:var(--c-ink-2);font-size:13px;font-weight:500;letter-spacing:.01em;background:var(--c-muted)}
.lsoon{position:absolute;inset:0}.lsoon~.ldots,.lsoon~.lcount{display:none}
.lx-soon{height:clamp(220px,40vh,520px)}
@media (min-width:1200px) and (hover:hover){.lphoto img{transition:transform 560ms var(--ease)}.lcard:hover .lphoto img{transform:scale(1.04)}}
.ltag{position:absolute;top:12px;left:12px;background:color-mix(in srgb,var(--c-surface) 95%,transparent);color:var(--c-ink);font-family:var(--font-display);font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:6px 8px;border-radius:var(--r-chip)}
.ldots{position:absolute;bottom:12px;left:0;right:0;display:flex;justify-content:center;gap:5px}
.ldots i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.55)}
.ldots i.on{background:#fff}
.lcount{position:absolute;bottom:10px;right:12px;font-size:11px;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.5)}
.lsave{position:absolute;top:12px;right:12px;width:44px;height:44px;border:0;border-radius:var(--r-control);background:color-mix(in srgb,var(--c-surface) 95%,transparent);color:var(--c-ink);display:grid;place-items:center;cursor:pointer}
.lbody{padding:14px 0 0;display:grid;gap:6px}
.lprice{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:2px 12px}
.lprice b{font-family:var(--font-display);font-size:26px;font-weight:800;letter-spacing:-.02em;color:var(--c-ink)}
.lprice span{font-size:12px;color:var(--c-ink-2);white-space:nowrap}
.lspecs{display:flex;align-items:center;font-size:14px;font-weight:600}
.lspecs span+span{margin-left:12px;padding-left:12px;border-left:1px solid var(--c-line);line-height:12px}
.laddr{font-size:15px;color:var(--c-ink);text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lfoot{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:6px;padding-top:10px;border-top:1px solid var(--c-line);min-width:0}
.lvillage{font-family:var(--font-display);font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--c-link);text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.lmls{font-size:11px;color:var(--c-ink-2);display:inline-flex;align-items:center;gap:6px;white-space:nowrap;flex:none}
.lmls i{font-style:normal;font-family:var(--font-display);font-size:9px;font-weight:700;letter-spacing:.08em;border:1px solid var(--c-line);padding:2px 4px;border-radius:2px}
.lgrid{display:grid;grid-template-columns:minmax(0,1fr);gap:40px 24px}
.lgrid.more{margin-top:48px}
.lgrid.more .lprice b,.lgrid.three .lprice b{font-size:22px}
@media (min-width:768px){.lgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1200px){.lgrid{gap:48px 32px}.lgrid.more,.lgrid.three{grid-template-columns:repeat(3,minmax(0,1fr))}}

.results-region{padding-block:8px 56px}
.toolbar{display:flex;align-items:center;gap:16px;padding:14px 0;border-bottom:1px solid var(--c-line);margin-bottom:24px;font-size:13px}
.toolbar .count{font-weight:600;color:var(--c-ink);white-space:nowrap}
.toolbar .count span{font-weight:400;color:var(--c-ink-2)}
.toolbar .views{display:flex;gap:4px;margin-left:auto}
.toolbar .views button{background:none;border:0;border-bottom:2px solid transparent;min-height:44px;padding:0 10px;font:600 13px var(--font-body);color:var(--c-ink-2);cursor:pointer}
.toolbar .views button.on{color:var(--c-ink);border-bottom-color:var(--c-ink)}
.toolbar .tools{display:flex;gap:4px}
.toolbar .tlink{min-height:44px;display:inline-flex;align-items:center;padding:0 10px;font-weight:600;color:var(--c-ink);text-decoration:none}
@media (max-width:767px){.toolbar .views button:not(:last-child){display:none}.toolbar .tools .tlink:last-child{display:none}}
.results-shell{display:grid;gap:40px}
.results-foot{display:grid;justify-items:center;gap:12px;margin-top:48px;text-align:center}
.results-foot p{margin:0;font-size:13px;color:var(--c-ink-2)}
.results-foot .progress{width:220px;height:2px;background:var(--c-line)}
.results-foot .progress i{display:block;height:100%;background:var(--c-brand)}
.results-foot .btn{min-width:320px;min-height:56px}
@media (max-width:767px){.results-foot .btn{width:100%;min-width:0}}
.results-side{display:none}
@media (min-width:1200px){.results-shell{grid-template-columns:minmax(0,1fr) 340px;gap:72px;align-items:start}.results-side{display:grid;gap:24px;position:sticky;top:96px}}
.side-agent,.side-today{background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--r-panel);padding:24px;box-shadow:0 1px 3px rgba(13,27,36,.06)}
.side-agent .sa-head{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.side-agent .sa-head .eyebrow{margin-bottom:4px}
.side-agent .sa-name{display:block;font-family:var(--font-display);font-size:18px;font-weight:800;letter-spacing:-.01em;color:var(--c-ink)}
.side-agent .avatar{flex:none;width:60px;height:60px;border-radius:50%;overflow:hidden;filter:grayscale(1)}
.side-agent .avatar img{width:100%;height:100%;object-fit:cover}
.side-agent .statement{font-size:14.5px;line-height:1.6;margin:0 0 18px;color:var(--c-ink-2)}
.side-agent .actions{display:flex;gap:8px}
.side-agent .btn{flex:1;min-height:48px;padding:0 12px}
.side-today h3{margin-bottom:10px}
.side-today dl{margin:0;display:grid}
.side-today dl div{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-top:1px solid var(--c-line);font-size:14px}
.side-today dt{color:var(--c-ink-2)}
.side-today dd{margin:0;font-weight:700;font-variant-numeric:tabular-nums}
.side-today dd a{font-weight:600}

/* Related communities as guide cards */
.related .rgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px;margin-top:8px}
.rcard{position:relative;display:flex;align-items:flex-end;min-height:150px;padding:16px;border-radius:var(--r-media);overflow:hidden;background:linear-gradient(160deg,var(--c-deep),var(--c-brand));color:#fff;text-decoration:none;font-family:var(--font-display);font-weight:800;font-size:17px;letter-spacing:-.01em;line-height:1.15}
.rcard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.rcard::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,28,43,0) 30%,rgba(7,28,43,.8) 100%)}
.rcard{flex-direction:column;align-items:flex-start;justify-content:flex-end;gap:6px}
.rcard span{position:relative;z-index:1}
.rcard .rkind{font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.72)}
.rcard .rgo{position:absolute;top:14px;right:16px;font-size:18px;opacity:.7;transition:transform 160ms var(--ease),opacity 160ms var(--ease)}
.rcard:hover .rgo{transform:translateX(3px);opacity:1}
.rcard:not(:has(img))::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(135deg,rgba(255,255,255,.035) 0 1px,transparent 1px 14px)}
.rcard:hover{text-decoration:none}
@media (min-width:1200px){.related .rgrid{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}.rcard{min-height:180px}}

/* Contact section: statement beside the form */
.contact .wrap{display:grid;gap:32px}
.contact .say h2{margin-bottom:12px}
.contact .say p{font-size:17px;line-height:1.7;color:var(--c-ink-2);margin:0 0 24px;max-width:46ch}
.contact .direct{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px 18px;align-items:center;border-top:1px solid var(--c-line);padding-top:24px;max-width:480px}
.contact .direct .avatar{width:64px;height:64px;border-radius:var(--r-control);overflow:hidden;filter:grayscale(1)}
.contact .direct .avatar img{width:100%;height:100%;object-fit:cover}
.contact .direct:not(:has(.avatar)) .dtext{grid-column:1/-1}
.contact .dtext{display:grid;gap:2px}
.contact .dlabel{font-size:13px;color:var(--c-ink-2)}
.contact .dphone{font-family:var(--font-display);font-size:clamp(24px,2.6vw,30px);font-weight:800;letter-spacing:-.02em;color:var(--c-ink);text-decoration:none;line-height:1.2}
.contact .dphone:hover{color:var(--c-link);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px}
.contact .dnote{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--c-ink-2)}
.contact .dnote .dot{width:7px;height:7px;border-radius:50%;background:var(--c-live)}
.contact .panel{padding:0}
.contact .panel .lead-form{max-width:none}
.contact .panel .lead-form button{justify-self:stretch;min-height:56px;margin-top:4px}
@media (min-width:1200px){.contact .wrap{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:72px;align-items:start}.contact .panel{padding-top:34px}}
/* Photo band (alerts, contact): the page hero behind a deep brand wash, eased a step on 2026-10-04 so the photo shows more (Truman). Tokens are redefined for dark ground so fields, links, and the button follow the site theme. */
.photo-band{position:relative;isolation:isolate;overflow:hidden;background:var(--c-deep);--c-ink:#fff;--c-ink-2:rgba(255,255,255,.74);--c-line:rgba(255,255,255,.3);--c-link:#fff;--c-brand:var(--c-cta);--c-brand-ink:var(--c-cta-ink)}
.photo-band .bgimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.5;z-index:-2}
.photo-band::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,color-mix(in srgb,var(--c-deep) 92%,transparent) 0%,color-mix(in srgb,var(--c-deep) 80%,transparent) 50%,color-mix(in srgb,var(--c-deep) 68%,transparent) 100%)}
.photo-band .eyebrow::before{background:var(--c-accent)}
.photo-band .field::after{background:var(--c-accent)}
.photo-band .dnote .dot{background:#3fd08f}
.site-footer{border-top:1px solid rgba(255,255,255,.08)}

/* Dark mode uses the white wordmark on every header state, including the compact header over a hero page. */
@media (prefers-color-scheme:dark){
  [data-theme="auto"] .site-header .logo .dark,[data-theme="auto"] body.has-hero .site-header.compact .logo .dark{display:none}
  [data-theme="auto"] .site-header .logo .white,[data-theme="auto"] body.has-hero .site-header.compact .logo .white{display:block}
}
[data-theme="dark"] .site-header .logo .dark,[data-theme="dark"] body.has-hero .site-header.compact .logo .dark{display:none}
[data-theme="dark"] .site-header .logo .white,[data-theme="dark"] body.has-hero .site-header.compact .logo .white{display:block}

/* Step 3: content blocks */
/* Promoted content: band and subtle */
.promo.band{background:var(--c-tint);padding-block:0}
.promo.band .wrap{display:grid;gap:0;padding-inline:0}
.promo.band .media .video-frame{border-radius:0}
.promo.band .text{padding:26px 20px 34px}
.promo.band .text .eyebrow{margin-bottom:18px}
.promo.band .text h2{font-size:clamp(28px,3vw,40px);line-height:1.06;margin:0 0 20px;max-width:18ch}
.promo.band .dek{font-size:17px;line-height:1.65;color:var(--c-ink-2);margin:0 0 30px;max-width:46ch}
.promo.band .actions{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.promo.band .meta{font-size:13px;color:var(--c-ink-2)}
@media (min-width:768px){.promo.band .wrap{padding-inline:40px}.promo.band{padding-block:56px}.promo.band .media .video-frame{border-radius:var(--r-media)}.promo.band .text{padding:28px 0 0}}
@media (min-width:1200px){.promo.band{padding-block:96px}.promo.band .wrap{grid-template-columns:1.4fr 1fr;gap:72px;align-items:center;padding-inline:56px}.promo.band .text{padding:0}}

/* Video poster treatment */
.poster{position:relative;aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:var(--c-deep);box-shadow:0 18px 44px rgba(7,28,43,.28)}
.poster img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 560ms var(--ease)}
.poster::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,28,43,0) 55%,rgba(7,28,43,.45) 100%);pointer-events:none}
.poster:hover img{transform:scale(1.03)}
.poster .play{position:absolute;left:50%;top:50%;width:72px;height:72px;margin:-36px 0 0 -36px;border:0;border-radius:50%;background:rgba(255,255,255,.96);color:var(--c-deep);display:grid;place-items:center;cursor:pointer;box-shadow:0 8px 24px rgba(0,0,0,.3);transition:transform 220ms var(--ease);z-index:1}
.poster .play svg{width:28px;height:28px;margin-left:4px}
.poster .play:hover{transform:scale(1.06)}
.poster .dur{position:absolute;right:14px;bottom:12px;padding:5px 9px;border-radius:var(--r-chip);background:rgba(7,28,43,.75);color:#fff;font:600 12px var(--font-body);z-index:1}
.poster iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.poster.playing::after{display:none}
.poster .play:focus-visible{outline:3px solid var(--c-accent);outline-offset:3px}
/* Plain video blocks (search pages, video blocks, blog posts): same corners as a bare embed, no shadow. */
.poster.flat{border-radius:var(--r-media);box-shadow:none}
.post-body .poster{margin:0 0 28px;border-radius:var(--r-panel)}
.post-body .poster img{margin:0;height:100%;border-radius:0}
.promo.band .media .poster{border-radius:0}
@media (min-width:768px){.promo.band .media .poster{border-radius:14px}}

/* Price slider with histogram */
.pricebar{margin:0 0 32px}
.results-region{padding-top:28px}
@media (min-width:1200px){.pricebar{position:sticky;top:60px;z-index:5;background:var(--c-bg);padding:14px 0 10px;margin:-14px 0 24px}.pricebar.stuck::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:24px;background:inherit}section.alt .pricebar{background:var(--c-muted)}.results-main{align-self:stretch}}
.pb-head{display:flex;align-items:baseline;gap:12px;margin-bottom:6px}
.pb-label{font-family:var(--font-display);font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--c-ink-2)}
.pb-out{font-family:var(--font-display);font-size:16px;font-weight:800;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.pb-reset{margin-left:auto;background:none;border:0;color:var(--c-link);font:600 13px var(--font-body);cursor:pointer;min-height:32px}
.pb-track{position:relative;height:56px}
.pb-hist{position:absolute;left:0;right:0;bottom:22px;height:34px;display:flex;align-items:flex-end;gap:2px}
.pb-hist i{flex:1;display:block;background:color-mix(in srgb,var(--c-brand) 22%,var(--c-surface));border-radius:2px 2px 0 0;min-height:4px}
/* Dark keeps the chip tint for the bars; light wears a soft brand tint instead of gray (Truman, 2026-09-30). */
[data-theme="dark"] .pb-hist i{background:var(--c-chip)}
@media (prefers-color-scheme:dark){[data-theme="auto"] .pb-hist i{background:var(--c-chip)}}
.pb-track::before{content:"";position:absolute;left:0;right:0;bottom:14px;height:2px;background:var(--c-line);border-radius:1px}
.pb-fill{position:absolute;bottom:14px;height:2px;background:var(--c-brand);border-radius:1px}
.pb-track input[type=range]{position:absolute;left:0;right:0;bottom:0;width:100%;height:30px;margin:0;-webkit-appearance:none;appearance:none;background:transparent;pointer-events:none}
.pb-track input[type=range]::-webkit-slider-runnable-track{height:2px;background:transparent}
.pb-track input[type=range]::-moz-range-track{height:2px;background:transparent}
.pb-track input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;pointer-events:auto;width:22px;height:22px;margin-top:-10px;border-radius:50%;background:var(--c-surface);border:2px solid var(--c-brand);box-shadow:0 2px 8px rgba(13,27,36,.22);cursor:grab}
.pb-track input[type=range]::-moz-range-thumb{pointer-events:auto;width:22px;height:22px;border-radius:50%;background:var(--c-surface);border:2px solid var(--c-brand);box-shadow:0 2px 8px rgba(13,27,36,.22);cursor:grab}
.pb-track input[type=range]:active::-webkit-slider-thumb{cursor:grabbing;transform:scale(1.08)}
.pb-track input[type=range]:focus-visible{outline:none}
.pb-track input[type=range]:focus-visible::-webkit-slider-thumb{outline:2px solid var(--c-accent);outline-offset:2px}
.pb-ends{display:flex;justify-content:space-between;font-size:11px;color:var(--c-ink-2);margin-top:2px;font-variant-numeric:tabular-nums}
#results-live.loading,#results-more.loading{opacity:.55;transition:opacity 140ms var(--ease)}

/* Filters button, active chips, and the drawer */
.pb-filters{margin-left:auto;display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 14px;border:1px solid var(--c-line);border-radius:var(--r-control);background:var(--c-surface);color:var(--c-ink);font:600 13px var(--font-body);cursor:pointer}
.pb-filters:hover{border-color:var(--c-ink)}
.pb-filters .n{display:none;min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--c-brand);color:var(--c-brand-ink);font:700 11px var(--font-display);align-items:center;justify-content:center}
.pb-filters .n.on{display:inline-flex}
.pb-reset{margin-left:0}
.fchips{display:flex;flex-wrap:wrap;gap:8px;margin:-16px 0 24px}
.fchips:empty{display:none}
.fchip{display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:0 6px 0 12px;border-radius:var(--r-chip);background:var(--c-chip);font:600 13px var(--font-body);color:var(--c-ink)}
.fchip button{width:26px;height:26px;border:0;border-radius:50%;background:transparent;color:var(--c-ink-2);font:400 18px/1 var(--font-body);cursor:pointer}
.fchip button:hover{background:var(--c-line);color:var(--c-ink)}
.fdrawer{position:fixed;inset:0;z-index:60;display:none}
.fdrawer.open{display:block}
.fdrawer .scrim{position:absolute;inset:0;background:rgba(4,25,38,.7)}
.fdrawer .panel{position:absolute;left:0;right:0;bottom:0;max-height:88vh;background:var(--c-surface);border-radius:var(--r-sheet) var(--r-sheet) 0 0;display:grid;grid-template-rows:auto minmax(0,1fr) auto;box-shadow:0 -12px 40px rgba(0,0,0,.3);transform:translateY(0)}
.fdrawer .fhead{display:flex;align-items:center;justify-content:space-between;padding:18px 20px 12px;border-bottom:1px solid var(--c-line)}
.fdrawer .fhead h3{font-size:18px;margin:0}
.fdrawer .fhead .fclear{background:none;border:0;color:var(--c-link);font:600 13px var(--font-body);cursor:pointer;min-height:40px;padding:0 8px}
.fdrawer .fhead .fx{width:40px;height:40px;border:0;border-radius:50%;background:var(--c-chip);color:var(--c-ink);font:400 20px/1 var(--font-body);cursor:pointer}
.fdrawer .fbody{overflow:auto;padding:8px 20px 20px}
.fgroup{padding:18px 0;border-bottom:1px solid var(--c-line)}
.fgroup:last-child{border-bottom:0}
.fgroup h3{font-family:var(--font-display);font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--c-ink-2);margin:0 0 12px}
.fgroup .pricebar,.fgroup .sqftbar{margin:0;max-width:none;position:static;padding:0}
.seg{display:flex;gap:6px;flex-wrap:wrap}
.seg button{min-width:52px;min-height:40px;padding:0 14px;border:1px solid var(--c-line);border-radius:var(--r-control);background:var(--c-surface);color:var(--c-ink);font:600 13px var(--font-body);cursor:pointer}
.seg button.on{background:var(--c-brand);border-color:var(--c-brand);color:var(--c-brand-ink)}
.tog{display:flex;gap:8px;flex-wrap:wrap}
.tog button{min-height:40px;padding:0 14px;border:1px solid var(--c-line);border-radius:var(--r-chip);background:var(--c-surface);color:var(--c-ink);font:600 13px var(--font-body);cursor:pointer}
.tog button.on{background:var(--c-brand);border-color:var(--c-brand);color:var(--c-brand-ink)}
.fsel{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px}
.fsel label{display:grid;gap:6px;font-size:12px;font-weight:600;color:var(--c-ink-2)}
.fsel select{font:inherit;font-size:15px;min-height:44px;padding:0 12px;border:1px solid var(--c-line);border-radius:var(--r-control);background:var(--c-surface);color:var(--c-ink)}
.fdrawer .ffoot{padding:12px 20px calc(14px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--c-line);background:var(--c-surface)}
.fdrawer .ffoot .btn{width:100%;min-height:52px}
@media (min-width:1200px){.fdrawer .panel{left:auto;top:0;bottom:0;width:440px;max-height:none;border-radius:0;box-shadow:-12px 0 40px rgba(0,0,0,.3)}.fdrawer .fbody{padding:8px 28px 28px}.fdrawer .fhead{padding:22px 28px 14px}.fdrawer .ffoot{padding:16px 28px 22px}}
.sqftbar .pb-track{height:52px}
body.drawer-open{overflow:hidden}
#results-live .lgrid-empty{grid-column:1/-1;padding:40px 0;text-align:center;color:var(--c-ink-2)}
.promo.subtle{padding-block:32px;border-top:1px solid var(--c-line);border-bottom:1px solid var(--c-line)}
.promo.subtle .wrap{display:grid;grid-template-columns:136px minmax(0,1fr);gap:20px;align-items:center}
.promo.subtle .thumb .video-frame{border-radius:var(--r-media)}
.promo.subtle .kicker{font-family:var(--font-display);font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--c-link)}
.promo.subtle h2{font-size:16px;margin:4px 0 6px}
.promo.subtle p{margin:0 0 6px;font-size:14px;color:var(--c-ink-2)}
@media (min-width:768px){.promo.subtle .wrap{grid-template-columns:260px minmax(0,1fr)}.promo.subtle h2{font-size:22px}}
@media (min-width:1200px){.promo.subtle .wrap{grid-template-columns:340px minmax(0,1fr);gap:32px}.promo.subtle h2{font-size:26px}}

/* Community guide. The guide photo sits faintly behind the section, fading into the section color. */
section.block{--sec:var(--c-bg)}
section.block.alt{--sec:var(--c-muted)}
.guide{position:relative;overflow:hidden;isolation:isolate}
.guide .gbg{position:absolute;top:0;bottom:0;left:0;width:62%;height:100%;object-fit:cover;object-position:center;opacity:.22;filter:saturate(.75);z-index:-2;pointer-events:none}
.guide::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,color-mix(in srgb,var(--sec) 35%,transparent) 0%,color-mix(in srgb,var(--sec) 75%,transparent) 30%,var(--sec) 62%,var(--sec) 100%)}
.guide .wrap{position:relative;display:grid;gap:28px}
.guide .gmedia{margin:0}
.guide .gmedia img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r-media)}
.guide .gmedia figcaption{font-size:12px;color:var(--c-ink-2);margin-top:8px}
.guide .prose p{font-size:17px;line-height:1.7;margin:0 0 20px;max-width:68ch}
.guide .prose.dropcap>p:first-child::first-letter{float:left;font-family:var(--font-display);font-size:64px;font-weight:800;line-height:.8;color:var(--c-brand);padding:6px 10px 0 0}
.guide .more summary{list-style:none;cursor:pointer;font-family:var(--font-display);font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--c-link);min-height:44px;display:inline-flex;align-items:center}
.guide .more summary::-webkit-details-marker{display:none}
.guide .more[open] summary{display:none}
.guide .gtext h2{margin-bottom:20px}
@media (min-width:768px){.guide .wrap{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:48px;align-items:start}.guide .gmedia{position:sticky;top:96px}}
.guide--text .gcols{display:grid;gap:0}
@media (min-width:768px){.guide.guide--text .wrap{grid-template-columns:minmax(0,1fr)}.guide--text .gcols{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 56px}.guide--text .gcols--one{grid-template-columns:minmax(0,1fr)}.guide--text .gtext h2{max-width:22ch}}

/* Pull quote */
.quote{background:var(--c-bg);color:var(--c-ink);padding-block:72px;text-align:center;position:relative;overflow:hidden}
.quote::before{content:"\201C";position:absolute;left:50%;top:-10px;transform:translateX(-50%);font-family:var(--font-display);font-size:280px;line-height:1;font-weight:800;color:var(--c-accent);opacity:.14;pointer-events:none}
.quote .wrap{position:relative}
.quote blockquote{margin:0 auto;font-family:var(--font-display);font-size:clamp(26px,3.6vw,46px);font-weight:700;line-height:1.12;letter-spacing:-.02em;color:var(--c-ink);text-wrap:balance;max-width:22ch}
.quote blockquote::after{content:"";display:block;width:48px;height:3px;background:var(--c-accent);margin:26px auto 0}
.quote cite{display:block;margin-top:14px;font:500 13px/1.4 var(--font-body);letter-spacing:.08em;text-transform:uppercase;color:var(--c-ink-2);font-style:normal}
@media (min-width:1200px){.quote{padding-block:96px}.quote::before{font-size:360px;top:-24px}}

/* Villages */
.vgrid{display:grid;grid-auto-flow:column;grid-auto-columns:220px;gap:16px;overflow-x:auto;padding-bottom:8px;scroll-snap-type:x mandatory;scrollbar-width:none}
.vgrid::-webkit-scrollbar{display:none}
.vcard{display:grid;gap:6px;align-content:start;text-decoration:none;color:inherit;scroll-snap-align:start}
.vcard .photo{aspect-ratio:5/3;background:var(--c-muted);border-radius:var(--r-media);overflow:hidden}
.vcard .photo img{width:100%;height:100%;object-fit:cover;transition:transform 560ms var(--ease)}
.vcard:hover .photo img{transform:scale(1.04)}
.vcard:hover{text-decoration:none}
.vcard b{font-family:var(--font-display);font-size:15px;font-weight:700;margin-top:6px}
.vcard span{font-size:13px;color:var(--c-ink-2);font-variant-numeric:tabular-nums}
@media (min-width:768px){.vgrid{grid-auto-flow:row;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-columns:auto;gap:32px 24px;overflow:visible}}
@media (min-width:1200px){.vgrid{gap:40px 32px}.vcard b{font-size:19px;margin-top:10px}.vcard span{font-size:14px}}

/* Alerts band */
.alerts .wrap{display:grid;gap:32px;align-items:center}
.alerts .say h2{margin-bottom:12px}
.alerts .say p{font-size:17px;line-height:1.7;color:var(--c-ink-2);margin:0;max-width:46ch}
.alert-form{max-width:none}
.alert-form button{justify-self:stretch;min-height:56px;margin-top:4px}
@media (min-width:1200px){.alerts .wrap{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:72px}}

/* Agent block with form */
.agent .wrap{display:grid;gap:28px}
.agent .who .avatar{width:120px;height:120px;border-radius:var(--r-panel);overflow:hidden;filter:grayscale(1);margin-bottom:16px}
.agent .who .avatar img{width:100%;height:100%;object-fit:cover}
.agent .who .actions{display:flex;gap:10px;flex-wrap:wrap}
.lead-form.ask{max-width:none;background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--r-panel);padding:24px}
.lead-form .two{display:grid;gap:30px 32px}
.lead-form .row{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.lead-form .reply{font-size:13px;color:var(--c-ink-2)}
@media (min-width:768px){.lead-form .two{grid-template-columns:1fr 1fr}}
@media (min-width:1200px){.agent:not(.solo) .wrap{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:72px;align-items:start}.lead-form.ask{padding:32px}}
/* Agent without a form: one panel card, portrait left, statement right. The page's single form lives in the contact section. */
.agent.solo .who{display:grid;gap:18px;background:var(--c-muted);border-radius:var(--r-panel);overflow:hidden;padding:28px 24px}
.agent.solo .who.no-photo{grid-template-columns:1fr !important}
.agent.solo .wtext{display:grid;gap:10px;justify-items:start}
.agent.solo .wtext .actions{margin-top:6px}
.agent.solo .who .avatar{width:100%;max-width:220px;aspect-ratio:1;height:auto;border-radius:var(--r-media);margin:0}
.agent.solo .who .eyebrow{margin-bottom:0}
.agent.solo .who h2{margin-bottom:8px}
.agent.solo .who p{margin:0 0 6px;color:var(--c-ink-2)}
@media (min-width:768px){.agent.solo .who{grid-template-columns:220px minmax(0,1fr);align-items:center;gap:32px;padding:32px}}
@media (min-width:1200px){.agent.solo .who{grid-template-columns:260px minmax(0,1fr);gap:48px;padding:40px 48px}.agent.solo .who .avatar{max-width:260px}}

/* Fine print fact grid */

/* Sheet: centered dialog on desktop, bottom sheet on phones. Step two of listing alerts. */
dialog.sheet{border:0;padding:32px 24px calc(28px + env(safe-area-inset-bottom,0px));width:min(480px,100%);max-width:100%;max-height:92vh;overflow:auto;background:var(--c-surface);color:var(--c-ink);border-radius:var(--r-sheet);box-shadow:0 24px 64px rgba(6,18,26,.4)}
dialog.sheet::backdrop{background:color-mix(in srgb,var(--c-deep) 82%,transparent)} /* a tint, not a blur: a full-screen backdrop blur over a busy page lagged (Truman, 2026-10-02) */
dialog.sheet[open]{animation:sheet-in 260ms var(--ease)}
@keyframes sheet-in{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
dialog.sheet h2{font-size:var(--t-h2);margin:10px 0 8px}
dialog.sheet .sheet-dek{color:var(--c-ink-2);font-size:15px;line-height:1.6;margin:0 0 20px}
dialog.sheet .sheet-x{position:absolute;top:10px;right:10px;width:44px;height:44px;border:0;background:transparent;color:var(--c-ink-2);font-size:26px;line-height:1;cursor:pointer;border-radius:50%}
dialog.sheet .sheet-x:hover{color:var(--c-ink);background:var(--c-muted)}
dialog.sheet .lead-form{max-width:none;gap:26px}
dialog.sheet .lead-form button{justify-self:stretch;min-height:56px}
@media (max-width:767px){dialog.sheet{margin:auto 0 0;width:100%;border-radius:var(--r-sheet) var(--r-sheet) 0 0}}
@media (min-width:768px){dialog.sheet{padding:40px 40px 36px}}

/* Your guide with a transparent cutout (D32).
   Agent: a one third / two thirds row. The cutout fills the first third and stands on the section's bottom edge; the text takes the rest.
   Team: centered content with the team cutout behind it along the bottom edge, fading upward so the text stays readable.
   Cutouts are soft-faded at their sides so cropped shoulders never end in a hard line. */
.agent.solo:has(.who.cutout),.agent.solo:has(.who.team){padding-bottom:0}
.agent.solo .who[hidden]{display:none !important}
.agent.solo:has(.who.cutout) > .wrap,.agent.solo:has(.who.team) > .wrap{display:block}
.agent.solo .who.cutout{display:flex;flex-direction:column;gap:32px;background:none;border-radius:0;padding:0;overflow:visible}
.agent.solo .who.cutout .wtext{order:1}
.agent.solo .who.cutout .cut{order:2;margin:0 -20px}
/* Eased fade at both sides (many stops so the ramp reads as a curve, not a line). */
.agent.solo .who.cutout .cut img{display:block;width:100%;height:auto;-webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.08) 3%,rgba(0,0,0,.3) 7%,rgba(0,0,0,.62) 11%,rgba(0,0,0,.88) 15%,#000 19%,#000 66%,rgba(0,0,0,.9) 73%,rgba(0,0,0,.66) 80%,rgba(0,0,0,.38) 87%,rgba(0,0,0,.14) 94%,rgba(0,0,0,0) 100%);mask-image:linear-gradient(90deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.08) 3%,rgba(0,0,0,.3) 7%,rgba(0,0,0,.62) 11%,rgba(0,0,0,.88) 15%,#000 19%,#000 66%,rgba(0,0,0,.9) 73%,rgba(0,0,0,.66) 80%,rgba(0,0,0,.38) 87%,rgba(0,0,0,.14) 94%,rgba(0,0,0,0) 100%)}
@media (min-width:768px){
  .agent.solo:has(.who.cutout){padding-top:56px}
  .agent.solo .who.cutout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:48px;align-items:center}
  .agent.solo .who.cutout .cut{order:0;margin:0;align-self:end}
  .agent.solo .who.cutout .wtext{padding-bottom:56px;max-width:600px}
}
@media (min-width:1200px){.agent.solo:has(.who.cutout){padding-top:72px}.agent.solo .who.cutout{gap:72px}.agent.solo .who.cutout .wtext{padding-bottom:72px}}
/* Your guide as a round portrait: for a headshot whose cutout edge reads badly on a dark section. Full color, a soft tint
   behind a transparent cutout, a ring in the site's accent, and the text beside it. */
.agent.solo .who.portrait{display:flex;flex-direction:column;align-items:flex-start;gap:28px;background:none;border-radius:0;padding:0;overflow:visible}
.agent.solo .who.portrait .avatar{flex:none;margin:6px;width:min(200px,56vw);height:auto;aspect-ratio:1;border-radius:50%;filter:none;background:radial-gradient(circle at 50% 35%,var(--c-tint),var(--c-muted));box-shadow:0 0 0 4px var(--c-bg),0 0 0 6px var(--c-accent),0 18px 40px rgba(0,0,0,.35)}
.agent.solo .who.portrait .avatar img{object-position:50% 12%}
/* A cutout photo (transparent background) sits on a light backdrop so it never floats on the dark band. */
.agent.solo .who.portrait .avatar.lit{background:radial-gradient(circle at 50% 38%,#fff 0%,color-mix(in srgb,var(--c-accent) 30%,#fff) 100%)}
.agent.solo .who.portrait .avatar.lit img{object-position:50% 0;padding-top:9%}
/* Phones: a smaller portrait beside "Your guide" and the name, then the blurb and two even buttons across the width
   (Truman, 2026-10-11: the big circle alone on the left looked off). */
@media (max-width:767px){
  .agent.solo .who.portrait{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:18px;row-gap:4px;align-items:center}
  .agent.solo .who.portrait .avatar{grid-column:1;grid-row:1/3;width:92px;margin:4px;box-shadow:0 0 0 3px var(--c-bg),0 0 0 5px var(--c-accent),0 10px 24px rgba(0,0,0,.22)}
  .agent.solo .who.portrait .wtext{display:contents}
  .agent.solo .who.portrait .eyebrow{grid-column:2;align-self:end}
  .agent.solo .who.portrait h2{grid-column:2;align-self:start;margin:0;font-size:clamp(24px,7vw,30px)}
  .agent.solo .who.portrait p,.agent.solo .who.portrait .actions{grid-column:1/-1}
  .agent.solo .who.portrait p{margin:16px 0 4px}
  .agent.solo .who.portrait .actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:8px}
}
@media (min-width:768px){.agent.solo .who.portrait{display:grid;grid-template-columns:auto minmax(0,1fr);gap:56px;align-items:center}.agent.solo .who.portrait .avatar{width:220px}.agent.solo .who.portrait .wtext{max-width:600px}}

.agent.solo .who.team{position:relative;display:grid;grid-template-columns:minmax(0,1fr) !important;justify-items:center;text-align:center;background:none;border-radius:0;padding:0 0 calc(24vw + 56px);overflow:visible}
.agent.solo .who.team .wtext{position:relative;z-index:1;justify-items:center;max-width:620px}
.agent.solo .who.team .wtext .actions{justify-content:center}
.agent.solo .who.team .tphoto{position:absolute;left:-20px;right:-20px;bottom:0;z-index:0;pointer-events:none}
.agent.solo .who.team .tphoto img{display:block;width:100%;height:auto;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 45%),linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);-webkit-mask-composite:source-in;mask-image:linear-gradient(180deg,transparent 0,#000 45%),linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);mask-composite:intersect}
@media (min-width:768px){
  .agent.solo .who.team{padding-bottom:clamp(200px,21vw,270px)}
  .agent.solo .who.team .tphoto{left:50%;right:auto;width:min(1080px,100%);transform:translateX(-50%)}
}
/* Local preview toggle between agent and team (dev only). */
.agent .wrap{position:relative}
.vtoggle{position:absolute;top:0;right:20px;z-index:3;display:inline-flex;padding:3px;border-radius:999px;background:var(--c-surface);border:1px solid var(--c-line);box-shadow:0 2px 8px rgba(13,27,36,.08)}
.vtoggle button{border:0;background:transparent;color:var(--c-ink-2);font:600 12px/1 var(--font-body);padding:9px 14px;border-radius:999px;cursor:pointer;min-height:34px}
.vtoggle button[aria-pressed="true"]{background:var(--c-brand);color:var(--c-brand-ink)}
@media (max-width:767px){.vtoggle{position:static;display:flex;width:max-content;margin:0 auto 24px}}
@media (min-width:768px){.vtoggle{right:40px}}
@media (min-width:1200px){.vtoggle{right:56px}}
/* Small avatars built from a cutout: face at the top, soft tint behind. */
.side-agent .avatar,.contact .direct .avatar{background:#fff;border-radius:50%;overflow:hidden;filter:none}
.side-agent .avatar img,.contact .direct .avatar img{object-fit:cover;object-position:center top;transform:translateY(7%) scale(.96);transform-origin:50% 100%}
/* Black and white headshots as a site choice (sites.theme_json faces "mono", D413): every agent photo on the site in gray. */
[data-faces="mono"] .avatar img,[data-faces="mono"] .tm-photo img,[data-faces="mono"] .st-photo img,[data-faces="mono"] .mh-photo img,[data-faces="mono"] .hv-agent img,[data-faces="mono"] .pm-photo img,[data-faces="mono"] .pa-photo img,[data-faces="mono"] .tp-ph img,[data-faces="mono"] .tp-sph img,[data-faces="mono"] .tphoto img,[data-faces="mono"] .es-face img,[data-faces="mono"] .by-photo img,[data-faces="mono"] .rv-fph img{filter:grayscale(1)}

/* Community page depth (planning/15, D33). Colors only from theme tokens. */
.wrap.narrow{max-width:880px}
p.answer{font-size:17px;line-height:1.6;color:var(--c-ink-2);max-width:68ch;margin:-12px 0 28px}
section.block h2 + p.answer{margin-top:-8px}
.fine{font-size:12px;line-height:1.5;color:var(--c-ink-2);margin:16px 0 0;max-width:80ch}
.sec-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 24px;margin-bottom:24px}
.sec-head h2{margin-bottom:12px !important}
.sec-head p.answer{margin:0}
.scrollbox{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%;border:1px solid var(--c-line);border-radius:var(--r-panel);background:var(--c-surface)}
.scrollbox:focus-visible{outline:2px solid var(--c-accent);outline-offset:2px}

/* Chart / Table switch */
.vswitch{display:inline-flex;padding:3px;border-radius:999px;background:var(--c-chip);border:1px solid var(--c-line);flex:none}
.vswitch button{border:0;background:transparent;color:var(--c-ink-2);font:600 12px/1 var(--font-body);padding:9px 14px;border-radius:999px;cursor:pointer;min-height:34px}
.vswitch button[aria-pressed="true"]{background:var(--c-surface);color:var(--c-ink);box-shadow:0 1px 3px rgba(13,27,36,.12)}
[data-pane][hidden]{display:none !important}

/* At a glance */
.glance{padding:28px 0 8px;max-width:880px}
.glance h2{font-size:var(--t-h2);margin:0 0 10px}
.glance .answer{margin:0 0 16px;color:var(--c-ink);font-size:18px}
.glance ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.glance li{position:relative;padding-left:22px;color:var(--c-ink-2);font-size:15px;line-height:1.55}
.glance li::before{content:"";position:absolute;left:0;top:.62em;width:10px;height:2px;background:var(--c-accent)}
@media (min-width:768px){.glance ul{grid-template-columns:1fr 1fr;gap:10px 32px}}

/* Chapter jump bar: pins under the 60px compact header. The price bar pins under it. */
body:has(.jumpbar){--jb:48px}
.jumpbar{position:sticky;top:60px;z-index:20;background:color-mix(in srgb,var(--c-bg) 96%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-block:1px solid var(--c-line);margin-top:20px}
.jumpbar .wrap{padding-inline:0}
/* Sideways only: a link a pixel taller than the track made the first swipe on it scroll up or down (Truman, 2026-10-11). */
.jb-track{display:flex;gap:4px;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scrollbar-width:none;height:47px;align-items:stretch;padding-inline:20px;scroll-padding-inline:20px}
.jb-track::-webkit-scrollbar{display:none}
/* Every sideways strip scrolls sideways only, so a pixel of spill never gives it a vertical scroll of its own. */
.pv-tabs,.tc-days,.pv-rail,.vgrid,.rail,.lx-gallery,.rev-track,.blog-list .btopics{overflow-y:hidden;overscroll-behavior-x:contain}
@media (max-width:767px){.chips,.hchips,.btopics{overflow-y:hidden;overscroll-behavior-x:contain}}
.jumpbar a{flex:none;display:inline-flex;align-items:center;height:100%;padding:0 12px;font-family:var(--font-display);font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--c-ink-2);text-decoration:none;border-bottom:2px solid transparent;box-sizing:border-box}
.jumpbar a:hover{color:var(--c-ink)}
.jumpbar a.on{color:var(--c-ink);border-bottom-color:var(--c-accent)}
.ch-anchor,#listings,#costs{scroll-margin-top:calc(60px + var(--jb,0px) + 8px)}
@media (min-width:768px){.jb-track{padding-inline:28px;scroll-padding-inline:28px}}
@media (min-width:1200px){
  .jb-track{padding-inline:44px}
  .pricebar{top:calc(60px + var(--jb,0px))}
  .results-side{top:calc(96px + var(--jb,0px))}
}

/* Market trend */
.tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;margin:0 0 36px;background:var(--c-line);border:1px solid var(--c-line);border-radius:var(--r-panel);overflow:hidden}
.tiles div{background:var(--c-surface);padding:18px 18px 16px;display:grid;gap:6px;align-content:start}
.tiles dt{font-size:12px;color:var(--c-ink-2)}
.tiles dd{margin:0;font-family:var(--font-display);font-size:var(--t-stat);font-weight:800;letter-spacing:-.02em;line-height:1;font-variant-numeric:tabular-nums}
@media (min-width:768px){.tiles{grid-template-columns:repeat(4,minmax(0,1fr))}.tiles div{padding:22px 24px 20px}}
.chart-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:28px}
.chart-head h3{margin:0;min-width:0}
.tchart .plot{position:relative;height:220px;margin:0 0 8px}
@media (min-width:768px){.tchart .plot{height:280px}}
.tchart .gl{position:absolute;left:0;right:0;border-top:1px solid var(--c-line)}
.tchart .gl span{position:absolute;left:0;bottom:3px;font-size:11px;color:var(--c-ink-2);font-variant-numeric:tabular-nums;background:color-mix(in srgb,var(--sec,var(--c-bg)) 85%,transparent);padding-right:4px}
section.alt .tchart .gl span{--sec:var(--c-muted)}
.tchart svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.tchart path{fill:none;stroke:var(--c-accent);stroke-width:2px;stroke-linejoin:round;stroke-linecap:round}
.tchart .dot{position:absolute;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:var(--c-accent);box-shadow:0 0 0 2px var(--c-bg);pointer-events:none}
section.alt .tchart .dot{box-shadow:0 0 0 2px var(--c-muted)}
.tchart .dot.pt{width:7px;height:7px;margin:-3.5px 0 0 -3.5px}
.tchart .endlabel{position:absolute;transform:translate(-100%,-150%);font-family:var(--font-display);font-size:13px;font-weight:800;color:var(--c-ink);white-space:nowrap;pointer-events:none;font-variant-numeric:tabular-nums}
.tchart .xhair{position:absolute;top:0;bottom:0;width:1px;background:var(--c-ink-2);opacity:.5;pointer-events:none}
.tchart .hits{position:absolute;inset:0;display:grid;grid-template-columns:repeat(12,minmax(0,1fr))}
.tchart .hits button{background:transparent;border:0;padding:0;margin:0;cursor:crosshair}
.tchart .hits button:focus-visible{outline:2px solid var(--c-accent);outline-offset:-2px}
.tchart .tip{position:absolute;top:0;transform:translateX(-50%);background:var(--c-surface);color:var(--c-ink);border:1px solid var(--c-line);border-radius:var(--r-control);box-shadow:0 6px 20px rgba(13,27,36,.16);padding:8px 12px;font-size:12px;white-space:nowrap;pointer-events:none;z-index:2}
.tchart .tip b{display:block;font-family:var(--font-display);font-size:16px;font-weight:800;font-variant-numeric:tabular-nums}
.tchart .tip span{color:var(--c-ink-2)}
.tchart .xl{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));text-align:center;font-size:11px;color:var(--c-ink-2)}
@media (max-width:767px){.tchart .xl .odd{visibility:hidden}}
.ttable table,.ctable{width:100%;border-collapse:collapse;font-size:14px;font-variant-numeric:tabular-nums}
.ttable th,.ttable td,.ctable th,.ctable td{padding:12px 16px;text-align:right;border-bottom:1px solid var(--c-line);white-space:nowrap}
.ttable th[scope="row"],.ttable thead th:first-child,.ctable th[scope="row"]{text-align:left}
.ttable thead th,.ctable thead th{font-family:var(--font-display);font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--c-ink-2)}
.ttable tbody tr:last-child > *,.ctable tbody tr:last-child > *{border-bottom:0}
.ttable th[scope="row"],.ctable th[scope="row"]{font-weight:600}

/* Compare table: first column sticks while the table scrolls sideways on phones. */
.ctable th[scope="row"]{position:sticky;left:0;background:var(--c-surface);z-index:1;color:var(--c-ink)}
.ctable thead th{font-size:12px;letter-spacing:.04em;text-transform:none;color:var(--c-ink);font-weight:800;vertical-align:bottom}
.ctable thead th small{display:block;font-family:var(--font-body);font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--c-link);margin-top:2px}
.ctable .me{background:var(--c-tint)}
.ctable thead .me{box-shadow:inset 0 3px 0 var(--c-accent)}

/* Cost calculator */
.calc{display:grid;gap:28px;min-width:0}
.cform{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px 16px;min-width:0}
.cin{display:grid;grid-template-columns:minmax(0,1fr);gap:6px;min-width:0}
.cin .cl{font-size:12px;font-weight:600;color:var(--c-ink-2)}
.cin .cl em{font-style:normal;font-weight:500;color:var(--c-ink-2)}
.cbox{display:flex;align-items:center;gap:6px;border-bottom:1px solid var(--c-line);min-height:44px;transition:border-color 140ms var(--ease)}
.cbox:focus-within{border-bottom-color:var(--c-cta);box-shadow:0 1px 0 var(--c-cta)}
.cbox i{font-style:normal;font-size:13px;color:var(--c-ink-2);white-space:nowrap}
.cbox input,.cbox select{flex:1;min-width:0;width:100%;border:0;background:transparent;color:var(--c-ink);font:600 17px var(--font-body);font-variant-numeric:tabular-nums;padding:6px 0;outline:none;-moz-appearance:textfield}
.cin:first-child{grid-column:1/-1}
.cout{background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--r-panel);padding:24px}
.cout > .cl{font-size:12px;font-weight:600;color:var(--c-ink-2)}
.ctotal{display:block;font-family:var(--font-display);font-size:clamp(36px,5vw,48px);font-weight:800;letter-spacing:-.03em;line-height:1.1;margin:6px 0 18px;font-variant-numeric:tabular-nums}
.cout ul{list-style:none;margin:0;padding:0}
.cout li{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-top:1px solid var(--c-line);font-size:15px}
.cout li b{font-variant-numeric:tabular-nums}
@media (min-width:768px){.calc{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:48px;align-items:start}.cout{padding:32px}}
.cbox input::-webkit-inner-spin-button,.cbox input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
@media (min-width:1200px){.cform{gap:22px 28px}}

/* Before you buy */
.cl{counter-reset:cl}
ol.cl{list-style:none;margin:0;padding:0;display:grid;gap:0}
ol.cl li{counter-increment:cl;position:relative;padding:18px 0 18px 48px;border-top:1px solid var(--c-line)}
ol.cl li:last-child{border-bottom:1px solid var(--c-line)}
ol.cl li::before{content:counter(cl);position:absolute;left:0;top:18px;width:30px;height:30px;border-radius:50%;border:1.5px solid var(--c-accent);color:var(--c-ink);font:800 13px/27px var(--font-display);text-align:center}
ol.cl b{font-family:var(--font-display);font-size:16px}
ol.cl p{margin:6px 0 0;color:var(--c-ink-2);line-height:1.6}

/* Getting around */
.around-grid{display:grid;gap:28px}
.drives{list-style:none;margin:0;padding:0}
.drives li{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:14px 0;border-top:1px solid var(--c-line)}
.drives li:last-child{border-bottom:1px solid var(--c-line)}
.drives b{font-family:var(--font-display);font-size:18px;font-weight:800;white-space:nowrap;font-variant-numeric:tabular-nums}
.drives sup{color:var(--c-ink-2);font-size:12px;margin-left:2px}
.schools{margin:20px 0 0;font-size:15px}
.map{min-height:320px;border-radius:var(--r-panel);overflow:hidden;background:var(--c-muted);border:1px solid var(--c-line);z-index:0}
@media (min-width:768px){.around-grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:48px;align-items:stretch}.around-grid.solo{grid-template-columns:minmax(0,1fr)}.map{min-height:420px}}

/* Outdoors */
.odl{list-style:none;margin:0;padding:0;display:grid;gap:16px}
.odl li{background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--r-panel);padding:22px}
.odl b{font-family:var(--font-display);font-size:17px}
.odl p{margin:8px 0 0;color:var(--c-ink-2);line-height:1.6}
@media (min-width:768px){.odl{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:768px){.odl.two{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Every way to search */
.dgroups{display:grid;gap:28px}
.dgroup h3{font-family:var(--font-display);font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--c-ink-2);margin:0 0 10px}
.dgroup ul{list-style:none;margin:0;padding:0;columns:2;column-gap:24px}
.dgroup li{break-inside:avoid;padding:6px 0;font-size:15px}
@media (min-width:768px){.dgroups{grid-template-columns:1fr 2fr 1fr 1fr;gap:40px}.dgroup ul{columns:1}.dgroup:nth-child(2) ul{columns:2}}

/* Sources */
.sources{border-top:1px solid var(--c-line)}
section.sources.block{padding-block:48px}
.sources h2{font-size:20px}
.sources ul{margin:0;padding-left:18px;display:grid;gap:8px;color:var(--c-ink-2);font-size:14px;line-height:1.6}

/* Listing detail (planning/16, D34) */
.lx-top{padding-top:16px}
/* Photos are the hero: edge to edge under the header. On phones the first photo fills the width and the rest swipe. */
.lx-hero{background:var(--c-deep);position:relative}
/* Photos run under the transparent header (D36, D53); a soft wash keeps the logo and links readable on any photo. Until the
   first photo paints, the band and its photo buttons are the deep color, so the white header is never white on light grey. */
.lx-hero::before{content:"";position:absolute;top:0;left:0;right:0;height:140px;background:linear-gradient(180deg,color-mix(in srgb,var(--c-deep) 60%,transparent),transparent);pointer-events:none;z-index:2}
.lx-hero .lx-gallery{margin:0;padding:0;scroll-padding:0;grid-auto-columns:100%;gap:2px}
.lx-hero .lx-gallery button{border-radius:0;background:var(--c-deep)}
.lx-gallery{position:relative;display:grid;grid-auto-flow:column;grid-auto-columns:88%;gap:8px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin-inline:-20px;padding-inline:20px;scroll-padding-inline:20px}
.lx-gallery::-webkit-scrollbar{display:none}
.lx-gallery button{border:0;padding:0;margin:0;background:var(--c-muted);cursor:zoom-in;scroll-snap-align:start;border-radius:var(--r-media);overflow:hidden;aspect-ratio:4/3}
.lx-gallery img{width:100%;height:100%;object-fit:cover}
.lx-gwrap{position:relative}
.lx-gwrap .gall{position:absolute;right:12px;bottom:12px;z-index:1;border:0;cursor:pointer;background:color-mix(in srgb,var(--c-surface) 94%,transparent);color:var(--c-ink);font:700 12px var(--font-display);letter-spacing:.06em;text-transform:uppercase;padding:10px 14px;border-radius:var(--r-control);box-shadow:0 2px 10px rgba(13,27,36,.2);min-height:40px}
.lx-gallery.few{grid-auto-columns:100%}
@media (min-width:768px){
  .lx-gallery{margin:0;padding:0;overflow:hidden;grid-auto-flow:row;grid-template-columns:2fr 1fr 1fr;grid-template-rows:1fr 1fr;gap:4px;height:clamp(440px,64vh,780px)}
  .lx-gallery button{aspect-ratio:auto;border-radius:0}
  .lx-gallery .g0{grid-row:1/3}
  .lx-gwrap .gall{right:24px;bottom:24px}
  .lx-gallery.few{grid-template-columns:1fr;grid-template-rows:1fr}
  .lx-gallery.few .g0{grid-row:auto}
  .lx-gallery.few button:not(.g0){display:none}
}

.lx-shell{display:grid;gap:0;padding-top:20px;padding-bottom:24px}
.lx-side{display:none}
@media (min-width:1200px){.lx-shell{grid-template-columns:minmax(0,1fr) 380px;gap:64px;align-items:start}.lx-side{display:grid;gap:20px;margin-top:-4px}.lx-slot{display:none}}
.lx-price{display:flex;align-items:center;flex-wrap:wrap;gap:10px 14px}
.lx-price .price{font-family:var(--font-display);font-size:var(--t-price-lg);font-weight:800;letter-spacing:-.03em;line-height:1}
.lx-price .ltag{position:static;border:1px solid var(--c-line)}
.lx-tools{margin-left:auto;display:flex;gap:6px}
.icon-btn{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 12px;border:1px solid var(--c-line);border-radius:var(--r-control);background:var(--c-surface);color:var(--c-ink);font:600 13px var(--font-body);cursor:pointer}
.icon-btn:hover{border-color:var(--c-ink)}
.lx-sold{margin:8px 0 0;font-size:14px;color:var(--c-ink-2)}
.lx-head h1{font-size:var(--t-h2);font-weight:800;letter-spacing:-.02em;line-height:1.15;margin:14px 0 0}
.lx-head h1 span{display:block;font-family:var(--font-body);font-size:16px;font-weight:500;letter-spacing:0;color:var(--c-ink-2);margin-top:4px}
.lx-specs{list-style:none;margin:18px 0 0;padding:16px 0;display:flex;flex-wrap:wrap;gap:8px 28px;border-block:1px solid var(--c-line);font-size:15px;color:var(--c-ink-2)}
.lx-specs b{font-family:var(--font-display);font-size:20px;font-weight:800;color:var(--c-ink);margin-right:2px;font-variant-numeric:tabular-nums}
.lx-attr{display:flex;align-items:center;gap:0;margin:14px 0 0;font-size:15px;color:var(--c-ink-2)}.lx-attr b{color:var(--c-ink);font-weight:600}.lx-attr a{color:inherit}
.lcourtesy{display:flex;align-items:center;margin:4px 0 0;font-size:12px;color:var(--c-ink-3,var(--c-ink-2));min-width:0}.lcourtesy span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lx-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px;margin:14px 0 0;font-size:13px;color:var(--c-ink-2)}
.lx-slot{display:grid;gap:20px;margin-top:28px}
.lx-agent{background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--r-panel);padding:24px;box-shadow:0 1px 3px rgba(13,27,36,.06);display:grid;gap:12px}
.lx-agent .sa-head{display:flex;align-items:center;gap:14px}
.lx-agent .avatar{flex:none;width:60px;height:60px;border-radius:50%;overflow:hidden;background:#fff}
.lx-agent .avatar img{width:100%;height:100%;object-fit:cover;object-position:center top;transform:translateY(7%) scale(.96);transform-origin:50% 100%}
.lx-agent .eyebrow{margin-bottom:4px}
.lx-agent .sa-name{display:block;font-family:var(--font-display);font-size:18px;font-weight:800}
.lx-agent .statement{margin:0;font-size:14.5px;line-height:1.6;color:var(--c-ink-2)}
.lx-agent .actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.lx-agent .btn{min-height:48px}
.lx-phone{justify-self:center;font-family:var(--font-display);font-weight:700;font-size:15px;color:var(--c-ink)}
.lx-sec{padding-top:40px}
.lx-sec h2{font-size:22px;margin-bottom:16px}
.remarks p{font-size:16px;line-height:1.75;margin:0 0 12px;max-width:68ch}
.remarks .more summary{list-style:none;cursor:pointer;font-family:var(--font-display);font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--c-link);min-height:44px;display:inline-flex;align-items:center}
.remarks .more summary::-webkit-details-marker{display:none}
.remarks .more[open] summary{display:none}
.muted{color:var(--c-ink-2)}
/* Facts flow down two columns, group by group, so short groups never leave a hole; a long list sits under its label (2026-10-08). */
.lx-facts{display:grid;gap:24px}
.lx-fgroup{break-inside:avoid}
.lx-facts dl div.long{display:block}
.lx-facts dl div.long dd{text-align:left;margin-top:4px;font-weight:500;line-height:1.5}
.lx-facts h3{font-family:var(--font-display);font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--c-ink-2);margin:0 0 6px}
.lx-facts dl{margin:0}
.lx-facts dl div{display:flex;justify-content:space-between;gap:16px;padding:10px 0;border-bottom:1px solid var(--c-line);font-size:15px}
.lx-facts dt{color:var(--c-ink-2);white-space:nowrap}
.lx-facts dd{margin:0;font-weight:600;text-align:right}
@media (min-width:768px){.lx-facts{display:block;columns:2;column-gap:48px}.lx-fgroup{padding-bottom:28px}}
.lx-sec .map{min-height:300px}
@media (min-width:768px){.lx-sec .map{min-height:380px}}
/* The map band (2026-10-08): full bleed under the details, a card over its left side on wide screens and above it on
   phones. Zoom shows on hover only, so the band reads as a picture until someone reaches for it. */
.lx-mapband{position:relative;margin-top:24px;background:var(--c-muted);border-block:1px solid var(--c-line)}
.lx-mapband .map{height:340px;min-height:0;border-radius:0;border:0}
.lx-mapband__wrap{padding-block:24px}
.lx-mapcard{display:grid;gap:10px}
.lx-mapcard h2{margin:0;font-size:22px;line-height:1.25}
.lx-mapcard p{margin:0;font-size:15px;line-height:1.6;color:var(--c-ink-2)}
.lx-mapcard p a{color:var(--c-link)}
.lx-mapcard__acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.lx-drives{display:grid;gap:6px;margin-top:4px}
.lx-drives>span{font-size:12px;color:var(--c-ink-2)}
.lx-drives ul{list-style:none;margin:0;padding:0;display:grid}
.lx-drives li{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-bottom:1px solid var(--c-line);font-size:14px}
.lx-drives li:last-child{border-bottom:0}
.lx-drives b{white-space:nowrap;font-variant-numeric:tabular-nums}
.lx-mapcard__acts .btn{min-height:44px;padding:0 18px}
@media (min-width:900px){
  .lx-mapband{display:grid}
  .lx-mapband .map,.lx-mapband__wrap{grid-area:1/1}
  .lx-mapband .map{height:auto;min-height:500px}
  .lx-mapband__wrap{width:100%;display:flex;align-items:center;padding-block:40px;pointer-events:none}
  .lx-mapcard{pointer-events:auto;width:380px;padding:28px;border-radius:var(--r-card,18px);background:color-mix(in srgb,var(--c-surface) 94%,transparent);border:1px solid var(--c-line);box-shadow:0 18px 50px rgba(0,0,0,.28);backdrop-filter:saturate(1.2)}
}
.lx-mapband .gm-bundled-control,.lx-mapband .leaflet-control-zoom{opacity:0;transition:opacity 160ms var(--ease)}
.lx-mapband:hover .gm-bundled-control,.lx-mapband:focus-within .gm-bundled-control,.lx-mapband:hover .leaflet-control-zoom,.lx-mapband:focus-within .leaflet-control-zoom{opacity:1}
@media (hover:none){.lx-mapband .gm-bundled-control,.lx-mapband .leaflet-control-zoom{opacity:1}}
/* A similar home on the map: its price as a small chip that opens it. */
.gpin.price{text-decoration:none}
.gpin.price i{display:none}
.gpin.price span{position:static;transform:none;opacity:1;pointer-events:auto;border:0;cursor:pointer}
.gpin.price:hover span,.gpin.price:focus-visible span{transform:scale(1.08);background:var(--c-ink);color:var(--c-bg)}
.gpin.price:hover{z-index:2}
.related-homes .more-link{margin:36px 0 0;text-align:center}
.sources.block .eyebrow + ul{margin-top:4px}
/* Full photo list: a scrolling column of every photo, like a printed brochure. */
dialog.lx-lightbox{border:0;padding:0;margin:0;width:100%;max-width:100%;height:100%;max-height:100%;background:var(--c-bg);color:var(--c-ink)}
dialog.lx-lightbox::backdrop{background:var(--c-deep)}
.lb-bar{position:sticky;top:0;z-index:1;display:flex;align-items:center;gap:16px;height:60px;padding:0 12px 0 20px;background:color-mix(in srgb,var(--c-bg) 94%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--c-line);font-weight:600}
.lb-bar .lb-n{color:var(--c-ink-2);font-weight:500;font-size:14px}
.lb-x{margin-left:auto;width:44px;height:44px;border:0;background:transparent;color:var(--c-ink);font-size:28px;cursor:pointer;border-radius:50%}
.lb-x:hover{background:var(--c-muted)}
.lb-list{display:grid;gap:8px;max-width:1100px;margin:0 auto;padding:12px 0 40px}
.lb-list img{width:100%;height:auto;scroll-margin-top:72px}
@media (min-width:768px){.lb-list{grid-template-columns:1fr 1fr;padding:16px 16px 48px}.lb-list img:nth-child(3n+1){grid-column:1/-1}}
/* Registration gate: the sheet renders in place without JavaScript and upgrades to a modal. */
dialog.gate-sheet:not(:modal){position:relative;inset:auto;margin:24px auto;box-shadow:none;border:1px solid var(--c-line)}
body.gated .lx-shell,body.gated .costs,body.gated .trend,body.gated .related-homes{opacity:.22;pointer-events:none;user-select:none} /* faded, not blurred: cheap to draw (blur over these lagged under the sign-up wall) */
/* Google map pins (HTML overlays, colored from the theme). The label shows on hover. */
.gpin{position:absolute;transform:translate(-50%,-50%);cursor:default}
.gpin i{display:block;width:14px;height:14px;border-radius:50%;background:var(--c-accent);box-shadow:0 0 0 3px var(--c-bg),0 2px 6px rgba(0,0,0,.3)}
.gpin.main i{width:22px;height:22px;background:var(--c-brand);box-shadow:0 0 0 4px color-mix(in srgb,var(--c-brand) 30%,transparent),0 0 0 7px var(--c-bg),0 3px 10px rgba(0,0,0,.35)}
.gpin span{position:absolute;left:50%;bottom:calc(100% + 8px);transform:translateX(-50%);white-space:nowrap;background:var(--c-surface);color:var(--c-ink);border:1px solid var(--c-line);border-radius:var(--r-control);padding:5px 9px;font:600 12px var(--font-body);box-shadow:0 4px 14px rgba(0,0,0,.18);opacity:0;pointer-events:none;transition:opacity 140ms var(--ease)}
.gpin:hover span,.gpin.main span{opacity:1}

/* Listing sidebar cards: tour scheduler, lender, keep searching. On phones they sit in the page flow. */
.lx-card{background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--r-panel);padding:22px;box-shadow:0 1px 3px rgba(13,27,36,.06);display:grid;gap:14px;min-width:0}
.lx-card h2{font-size:19px;margin:-6px 0 0}
.lx-card .statement{margin:0;font-size:14.5px;line-height:1.6;color:var(--c-ink-2)}
.lx-card .avatar{flex:none;width:44px;height:44px;border-radius:50%;overflow:hidden;background:#fff}
.lx-card .avatar img{width:100%;height:100%;object-fit:cover;object-position:center top}
.lx-card .avatar img[src*=".png"]{transform:translateY(7%) scale(.96);transform-origin:50% 100%}
.lx-card .avatar.mono{display:grid;place-items:center;background:var(--c-tint);color:var(--c-ink);font:800 14px var(--font-display)}
.tour-card{border-color:color-mix(in srgb,var(--c-brand) 35%,var(--c-line));box-shadow:0 8px 28px rgba(13,27,36,.1)}
.tc-type{display:grid;grid-template-columns:1fr 1fr;padding:3px;border-radius:var(--r-control);background:var(--c-chip)}
.tc-type button{border:0;background:transparent;color:var(--c-ink-2);font:600 13px var(--font-body);min-height:38px;border-radius:calc(var(--r-control) - 2px);cursor:pointer}
.tc-type button.on{background:var(--c-surface);color:var(--c-ink);box-shadow:0 1px 3px rgba(13,27,36,.14)}
/* Three day cards show at once; the rest scroll, with the row dots under them (Truman, 2026-10-11). */
.tc-days{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 20px)/3);gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin-inline:-2px;padding:2px}
.tc-days>button{scroll-snap-align:start}
.tc-days+.row-dots{margin-top:2px}
.tc-days::-webkit-scrollbar{display:none}
.tc-days button{display:grid;justify-items:center;gap:2px;padding:16px 0;border:1px solid var(--c-line);border-radius:var(--r-control);background:var(--c-surface);color:var(--c-ink);cursor:pointer}
.tc-days small{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--c-ink-2)}
.tc-days b{font-family:var(--font-display);font-size:28px;font-weight:800;line-height:1.1}
.tc-days button.on,.tc-times button.on{border-color:var(--c-brand);box-shadow:inset 0 0 0 1px var(--c-brand);background:color-mix(in srgb,var(--c-brand) 8%,var(--c-surface))}
.tc-times{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:6px}
.tc-times button{min-height:38px;border:1px solid var(--c-line);border-radius:var(--r-control);background:var(--c-surface);color:var(--c-ink);font:600 13px var(--font-body);cursor:pointer;font-variant-numeric:tabular-nums}
.tc-note{margin:-4px 0 0;text-align:center;font-size:12px;color:var(--c-ink-2)}
.tc-agent{display:flex;align-items:center;gap:12px;padding-top:14px;border-top:1px solid var(--c-line)}
.tc-agent strong{display:block;font-family:var(--font-display);font-size:15px}
.tc-agent span{font-size:12px;color:var(--c-ink-2)}
.tc-quick{margin-left:auto;display:flex;gap:6px}
.tc-quick .icon-btn{min-height:36px;padding:0 10px;text-decoration:none}
.lc-who{display:flex;align-items:center;gap:12px}
.lc-who strong{display:block;font-family:var(--font-display);font-size:15px}
.lc-who span{font-size:12px;color:var(--c-ink-2)}
.keep ul{list-style:none;margin:-4px 0 -8px;padding:0}
.keep li a{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--c-line);color:var(--c-ink);font-size:14.5px;font-weight:500;text-decoration:none}
.keep li:last-child a{border-bottom:0}
.keep li a span{color:var(--c-ink-2);transition:transform 140ms var(--ease)}
.keep li a:hover{color:var(--c-link)}
.keep li a:hover span{transform:translateX(3px);color:var(--c-link)}
/* The tour sheet's time question, in person only: four loose choices, the agent confirms the exact time. */
.tour-when{border:0;margin:0;padding:0;display:grid;gap:10px}
.tour-when[hidden]{display:none}
.tour-when legend{padding:0;margin-bottom:10px;font-size:14px;font-weight:600;color:var(--c-ink)}
.tw-chips{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
@media (min-width:480px){.tw-chips{grid-template-columns:repeat(4,1fr)}}
.tw-chips button{min-height:46px;border:1px solid var(--c-line);border-radius:var(--r-control);background:var(--c-surface);color:var(--c-ink);font:600 14px var(--font-body);cursor:pointer}
.tw-chips button.on{border-color:var(--c-brand);box-shadow:inset 0 0 0 1px var(--c-brand);background:color-mix(in srgb,var(--c-brand) 8%,var(--c-surface))}
.tour-pick{display:inline-flex;margin:0 0 6px;padding:6px 10px;border-radius:var(--r-control);background:var(--c-tint);font-weight:600;font-size:14px;color:var(--c-ink)}
@media (min-width:1200px){.lx-slot{display:none}}

/* Home page (D37) */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.home-hero{min-height:620px;align-items:flex-end;overflow:hidden}
.hero picture,.hc-card picture,.hs-photo picture,.bphoto picture,.ph-photo picture,.post-body picture{display:contents}
.hero .hbg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.home-hero .wrap{padding-top:140px;padding-bottom:56px}
.home-hero h1{font-size:var(--t-hero);font-weight:800;line-height:.95;letter-spacing:-.04em;color:#fff;margin:0 0 16px;max-width:14ch}
.home-hero .sub{font-size:17px;max-width:560px}
.hsearch{display:grid;gap:8px;margin-top:8px;background:var(--c-surface);border-radius:var(--r-panel);padding:8px;box-shadow:0 18px 50px rgba(0,0,0,.35);max-width:940px}
.hsearch label{display:flex;align-items:center;gap:10px;min-height:52px;padding:0 14px;border-radius:var(--r-control);background:var(--c-muted);color:var(--c-ink-2)}
.hsearch input,.hsearch select{flex:1;min-width:0;border:0;background:transparent;color:var(--c-ink);font:500 16px var(--font-body);outline:none;height:100%}
.hsearch input::placeholder{color:var(--c-ink-2)}
.hsearch label:focus-within{box-shadow:inset 0 0 0 2px var(--c-cta)}
.hsearch .btn{min-height:52px}
.hs-sel{display:none !important}
@media (min-width:768px){.hsearch{grid-template-columns:minmax(0,1fr) 170px 150px auto}.hs-sel{display:flex !important}.hsearch label{background:transparent}.hsearch .hs-q{background:var(--c-muted)}.hsearch .hs-sel{border-left:1px solid var(--c-line);border-radius:0}}
.hchips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin:16px -20px 0;padding:0 20px}
.hchips::-webkit-scrollbar{display:none}
.hchips a{flex:none;display:inline-flex;align-items:center;min-height:36px;padding:0 14px;border-radius:999px;border:1px solid rgba(255,255,255,.4);color:#fff;background:rgba(255,255,255,.08);backdrop-filter:blur(6px);font-size:13px;font-weight:600;text-decoration:none}
.hchips a:hover{background:rgba(255,255,255,.2);text-decoration:none}
.hfresh{display:flex;align-items:center;gap:8px;margin:18px 0 0;font-size:13px;color:rgba(255,255,255,.85)}
.hfresh .dot{width:7px;height:7px;border-radius:50%;background:#3fd08f}
@media (min-width:768px){.home-hero{min-height:680px}.hchips{flex-wrap:wrap;overflow:visible;margin-inline:0;padding:0}}
@media (min-width:1200px){.home-hero{min-height:760px}.home-hero .wrap{padding-bottom:72px}.home-hero .sub{font-size:20px}}

.hc-grid{display:grid;gap:12px}
.hc-card{position:relative;display:flex;align-items:flex-end;min-height:220px;border-radius:var(--r-panel);overflow:hidden;background:var(--c-deep);color:#fff;text-decoration:none;isolation:isolate}
.hc-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform 560ms var(--ease)}
.hc-shade{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,transparent 35%,color-mix(in srgb,var(--c-deep) 88%,transparent) 100%)}
.hc-text{display:grid;gap:4px;padding:20px}
.hc-text b{font-family:var(--font-display);font-size:22px;font-weight:800;letter-spacing:-.02em}
.hc-text span{font-size:13px;color:rgba(255,255,255,.88)}
.hc-go{position:absolute;right:18px;bottom:20px;font-size:20px}
.hc-card:hover{text-decoration:none}
.hc-card:hover img{transform:scale(1.04)}
@media (min-width:768px){.hc-grid{grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:240px;gap:16px}.hc-card{min-height:0}.hc-card.lead{grid-column:span 2;grid-row:span 2}.hc-card.lead .hc-text b{font-size:32px}}

.hnew .sec-head .btn{flex:none}
.ht-grid{display:grid;gap:12px}
.ht-card{display:grid;gap:8px;align-content:start;padding:24px;border:1px solid var(--c-line);border-radius:var(--r-panel);background:var(--c-surface);color:var(--c-ink);text-decoration:none;transition:border-color 140ms var(--ease),transform 140ms var(--ease)}
.ht-card svg{color:var(--c-accent);margin-bottom:6px}
.ht-card b{font-family:var(--font-display);font-size:18px;font-weight:800}
.ht-card span{color:var(--c-ink-2);font-size:14.5px;line-height:1.55}
.ht-card em{font-style:normal;font-family:var(--font-display);font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--c-link);margin-top:6px}
.ht-card:hover{border-color:var(--c-ink);text-decoration:none;transform:translateY(-2px)}
@media (min-width:768px){.ht-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}}
@media (min-width:1200px){.ht-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
/* Hero search: borderless fields, and the button runs flush to the box edges (Truman, 2026-09-30). */
.hsearch{padding:0;gap:0;overflow:hidden}
.hsearch label,.hsearch .hs-q{background:transparent;border:0;border-radius:0;min-height:60px;padding:0 18px}
.hsearch label:focus-within{box-shadow:none}
.hsearch .hs-sel{border-left:1px solid var(--c-line)}
.hsearch .btn{min-height:60px;border-radius:0;margin:0;padding:0 32px}
@media (max-width:767px){.hsearch .hs-q{border-bottom:1px solid var(--c-line)}}

/* Buyer accounts and portal (D39) */
[data-save].saved{color:var(--c-cta)}
[data-save].saved svg{fill:currentColor}
.lsave.saved{color:var(--c-cta)}
.gate-alt{margin:4px 0 0;text-align:center;font-size:14px;color:var(--c-ink-2)}
/* Sign up and sign in swap in place (SWAP_JS): the box eases between the two panes' heights. */
.swap-box.swapping{overflow:hidden}
.signin-form .gate-alt + .gate-alt{margin-top:-14px}
/* Account screens (2026-09-29): a full-height photo band in the Let's talk style. Reasons on the left, glass form card on the right. */
.auth{padding:104px 0 56px;min-height:100svh;display:flex;align-items:center}
/* Phones: headline, then the form, then the reasons. Desktop: reasons stacked on the left, card on the right. */
.auth .auth-grid{display:grid;gap:28px;width:100%;align-items:center;grid-template-areas:"say" "card" "more"}
.auth-say{grid-area:say}.auth-card{grid-area:card}.auth-more{grid-area:more}
.auth-say h1{color:#fff;font-size:clamp(34px,4.6vw,58px);line-height:.98;letter-spacing:-.03em;margin:12px 0 14px;max-width:14ch}
.auth-lead{font-size:16px;line-height:1.6;color:var(--c-ink-2);max-width:46ch;margin:0}
.auth-perks{list-style:none;margin:0 0 24px;padding:0;display:grid;gap:12px}
.auth-perks li{display:flex;gap:12px;align-items:flex-start;font-size:15px;line-height:1.5;color:#fff}
.auth-perks svg{flex:none;width:22px;height:22px;margin-top:1px;color:var(--c-accent)}
.auth-live{font-size:14px;color:var(--c-ink-2);margin:0 0 22px}
.auth-live b{color:#fff;font-variant-numeric:tabular-nums}
.auth-direct{display:flex;align-items:center;gap:14px;border-top:1px solid var(--c-line);padding-top:20px;max-width:440px}
.auth-direct .avatar{flex:none;width:52px;height:52px;border-radius:var(--r-control);overflow:hidden;filter:grayscale(1)}
.auth-direct .avatar img{width:100%;height:100%;object-fit:cover}
.auth-direct .dlabel{display:block;font-size:13px;color:var(--c-ink-2)}
.auth-direct .dphone{font-family:var(--font-display);font-size:22px;font-weight:800;letter-spacing:-.02em;color:#fff;text-decoration:none}
.auth-card{width:min(520px,100%);justify-self:end;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.18);border-radius:var(--r-sheet);padding:28px 22px 26px;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 24px 60px rgba(4,25,38,.35)}
.auth-card .eyebrow{margin-bottom:4px}
.auth-card h1,.auth-card .h1{color:#fff;font-size:var(--t-h2);font-weight:800;letter-spacing:-.02em;margin:14px 0 8px}
.auth-dek{color:var(--c-ink-2);margin:0 0 20px;line-height:1.6;font-size:15px}
.auth-dek b{color:#fff}
.auth-card .lead-form{max-width:none;gap:26px}
/* Create account / Sign in toggle: one bordered segmented control; the selected half is solid out to the border (Truman, 2026-09-29). */
.auth-tabs{display:grid;grid-template-columns:1fr 1fr;gap:0;margin:-6px 0 26px;padding:0;background:none}
.auth-tabs + .h1{margin-top:0}
.auth-tabs a{position:relative;display:flex;align-items:center;justify-content:center;min-height:46px;border:1px solid rgba(255,255,255,.28);color:var(--c-ink-2);font-weight:600;font-size:14px;text-decoration:none;transition:background 140ms var(--ease),color 140ms var(--ease)}
.auth-tabs a:first-child{border-radius:var(--r-control) 0 0 var(--r-control)}
.auth-tabs a:last-child{border-radius:0 var(--r-control) var(--r-control) 0;margin-left:-1px}
.auth-tabs a:hover{color:#fff;text-decoration:none}
.auth-tabs a.on{background:var(--c-brand);border-color:var(--c-brand);color:var(--c-brand-ink);z-index:1}
.auth-msg{margin:0 0 18px;padding:12px 14px;border-radius:var(--r-control);background:rgba(255,255,255,.1);color:#fff;font-size:14.5px;line-height:1.5}
.auth-msg.err{box-shadow:inset 3px 0 0 var(--c-cta)}
dialog.sheet .auth-msg{background:var(--c-muted);color:var(--c-ink)}
.auth-steps{margin:0 0 18px;padding-left:22px;display:grid;gap:8px;font-size:15px;line-height:1.5;color:#fff}
.auth-steps b{font-weight:700}
.auth-fine{font-size:12.5px;line-height:1.55;color:var(--c-ink-2);margin:16px 0 0}
.auth-fine a,.auth-alt a{color:#fff;text-decoration:underline;text-underline-offset:3px}
.auth-alt{margin:18px 0 0;text-align:center;font-size:14px;color:var(--c-ink-2)}
@media (min-width:768px){.auth{padding:124px 0 72px}.auth-card{padding:34px 30px 30px}}
@media (min-width:1024px){.auth .auth-grid{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);grid-template-areas:"say card" "more card";gap:24px 56px;align-items:start}.auth-say{align-self:end}.auth-card{align-self:center}.auth-lead{font-size:17px}}
@media (min-width:768px){.auth-card{padding:40px}}

/* Buyer portal (Truman, 2026-10-11: "a really immersive portal"). A full-bleed photo of a home from their own list, sharp
   (no blur), shaded from the left and the bottom so the words read; tabs along the photo's bottom edge; full-width pages below. */
.pv-hero{position:relative;isolation:isolate;overflow:hidden;background:var(--c-deep);color:#fff;min-height:360px;display:flex;flex-direction:column;justify-content:flex-end;padding-top:128px;--c-ink:#fff;--c-ink-2:rgba(255,255,255,.78);--c-link:#fff;--c-brand:var(--c-cta);--c-brand-ink:var(--c-cta-ink)}
.pv-hero.tall{min-height:min(80vh,780px)}
.pv-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.pv-hero::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,color-mix(in srgb,var(--c-deep) 86%,transparent) 0%,color-mix(in srgb,var(--c-deep) 40%,transparent) 58%,transparent 100%),linear-gradient(0deg,color-mix(in srgb,var(--c-deep) 94%,transparent) 0%,transparent 42%),linear-gradient(180deg,rgba(0,0,0,.45),transparent 28%)}
.pv-in{display:grid;gap:28px;align-items:end;padding-bottom:40px}
@media (min-width:1000px){.pv-in{grid-template-columns:minmax(0,1fr) auto}}
.pv-say h1{font-size:clamp(40px,6vw,80px);line-height:1;letter-spacing:-.03em;margin:12px 0 16px;color:#fff;font-weight:800}
.pv-lead{font-size:clamp(17px,1.6vw,21px);line-height:1.5;color:rgba(255,255,255,.86);max-width:34ch;margin:0 0 26px}
.pv-lead b{color:#fff}
.pv-say .actions{display:flex;gap:12px;flex-wrap:wrap}
.pv-say .btn{min-height:52px;padding-inline:28px}
.pv-cap{display:grid;gap:3px;justify-self:start;max-width:360px;padding:14px 18px;border-radius:var(--r-panel);background:rgba(6,12,20,.55);color:#fff;text-decoration:none;transition:background .2s var(--ease)}
@media (min-width:1000px){.pv-cap{justify-self:end}}
.pv-cap:hover{background:rgba(6,12,20,.75);text-decoration:none}
.pv-cap-k{font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--c-accent)}
.pv-cap-t{font-family:var(--font-display);font-weight:700;font-size:17px}
.pv-cap-s{font-size:13px;color:rgba(255,255,255,.75)}
.pv-tabs{display:flex;align-items:center;gap:30px;overflow-x:auto;scrollbar-width:none}
.pv-tabs::-webkit-scrollbar{display:none}
.pv-tabs a{flex:none;position:relative;display:inline-flex;align-items:center;gap:8px;padding:18px 0;color:rgba(255,255,255,.68);font-weight:600;font-size:15px;text-decoration:none;transition:color .2s var(--ease)}
.pv-tabs a:hover{color:#fff;text-decoration:none}
.pv-tabs a span{font-size:12px;color:rgba(255,255,255,.6)}
.pv-tabs a.on{color:#fff}
.pv-tabs a.on::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;border-radius:3px 3px 0 0;background:var(--c-accent)}
.pv-out{margin-left:auto;flex:none}
.pv-out button{background:none;border:0;padding:18px 0;color:rgba(255,255,255,.55);font:600 14px var(--font-body);cursor:pointer}
.pv-out button:hover{color:#fff}
.pv-body{background:var(--c-bg);padding:56px 0 96px}
.pv-body>.wrap,.pv-hero>.wrap,.pv-talk>.wrap,.pv-cta>.wrap{max-width:1440px;width:100%}
.pv-sec+.pv-sec{margin-top:72px}
/* The tab pages (homes, searches, viewed, settings) stack their parts with room between them, as the old column did. */
.pv-body:not(.bare)>.wrap{display:grid;gap:28px;align-content:start}
.pv-sec-h{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:24px}
.pv-sec-h h2{font-size:clamp(24px,2.4vw,34px);letter-spacing:-.02em;margin:8px 0 0}
.pv-sec-h a{font-weight:600;white-space:nowrap}
.pv-rail{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(280px,330px);gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.pv-rail::-webkit-scrollbar{display:none}
@media (max-width:767px){.pv-rail{grid-auto-columns:82%;gap:16px}}
/* Dots under a sideways row: the current card is the long pill (the home rows' style, .hrow-dots). Built by SWAP_JS in lib/layout. */
.row-dots{display:flex;justify-content:center;flex-wrap:wrap;gap:2px;margin-top:10px}
.row-dots[hidden]{display:none}
.row-dots button{display:grid;place-items:center;width:20px;height:28px;padding:0;border:0;background:none;cursor:pointer}
.row-dots button::before{content:"";width:8px;height:8px;border-radius:999px;background:color-mix(in srgb,var(--c-ink) 22%,transparent);transition:width 240ms var(--ease),background 240ms var(--ease)}
.row-dots button[aria-current="true"]{width:36px}
.row-dots button[aria-current="true"]::before{width:26px;background:var(--c-ink)}
.row-dots button:focus-visible{outline:2px solid var(--c-accent);outline-offset:-2px;border-radius:999px}
.pv-rail>*{scroll-snap-align:start}
.pv-grid,.pv-body .lgrid,.pv-body .lgrid.three{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:26px}
.pv-searches{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:22px}
.pv-search{display:grid;align-content:start;border-radius:var(--r-panel);overflow:hidden;background:var(--c-surface);color:var(--c-ink);text-decoration:none;box-shadow:0 1px 0 var(--c-line);transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.pv-search:hover{transform:translateY(-4px);box-shadow:0 20px 44px rgba(6,12,20,.22);text-decoration:none}
.pv-strip{position:relative;display:grid;grid-template-columns:2fr 1fr;grid-template-rows:1fr 1fr;gap:2px;aspect-ratio:16/8;background:var(--c-muted)}
.pv-strip img{width:100%;height:100%;object-fit:cover;min-height:0}
.pv-strip img:first-child{grid-row:1/3}
.pv-strip.n1,.pv-strip.n0{grid-template-columns:1fr;grid-template-rows:1fr}
.pv-strip.n2{grid-template-columns:1fr 1fr;grid-template-rows:1fr}
.pv-strip.n1 img:first-child,.pv-strip.n2 img:first-child{grid-row:auto}
.pv-none{display:grid;place-items:center;padding:24px;text-align:center;font-size:14px;color:var(--c-ink-2);background:linear-gradient(135deg,var(--c-muted),color-mix(in srgb,var(--c-accent) 10%,var(--c-muted)))}
.pv-new{position:absolute;top:12px;left:12px;padding:6px 10px;border-radius:var(--r-control);background:var(--c-cta);color:var(--c-cta-ink);font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.pv-search-t{display:grid;gap:4px;padding:18px 20px 22px}
.pv-search-t b{font-family:var(--font-display);font-size:19px;letter-spacing:-.01em}
.pv-search-t span{font-size:14px;color:var(--c-ink-2)}
.pv-search-t .pv-count{margin-top:6px;color:var(--c-ink);font-weight:600}
.pv-empty{margin:0;font-size:16px;color:var(--c-ink-2)}
/* The overview lays out its own rows (bare), with a band between each pair (portalBands in account.tsx). */
.pv-body.bare{padding:0}
.pv-body.bare>.pv-sec{padding-block:64px}
.pv-body.bare>.pv-sec+.pv-sec{margin-top:0;padding-top:0}
.pv-cta{position:relative;isolation:isolate;overflow:hidden;padding:60px 0}
/* Each band runs edge to edge with a soft gradient and a big faint topic icon, so it reads as part of the page instead of a
   flat block (Truman, 2026-10-11). */
.pv-cta-in{display:grid;gap:22px;align-items:center}
@media (min-width:900px){.pv-cta-in{grid-template-columns:minmax(0,1fr) auto;gap:40px}.pv-cta.has-img .pv-cta-in{grid-template-columns:220px minmax(0,1fr) auto}}
.pv-cta-ico{position:absolute;z-index:-1;right:-30px;top:50%;width:300px;height:300px;transform:translateY(-50%) rotate(-8deg);opacity:.13;pointer-events:none}
@media (min-width:900px){.pv-cta-ico{right:22%}}
.pv-cta-img{width:100%;max-width:220px;aspect-ratio:3/2;object-fit:cover;border-radius:var(--r-panel);box-shadow:0 12px 30px rgba(6,12,20,.3)}
.pv-cta-say h2{font-size:clamp(24px,2.4vw,34px);letter-spacing:-.02em;margin:8px 0 8px;color:inherit}
.pv-cta-say p{margin:0;max-width:60ch;font-size:17px;line-height:1.5;opacity:.85}
.pv-cta .btn{min-height:52px;padding-inline:28px;white-space:nowrap}
.pv-cta.t-deep{background:radial-gradient(ellipse at 85% 0%,color-mix(in srgb,var(--c-accent) 30%,transparent),transparent 55%),linear-gradient(120deg,var(--c-deep),color-mix(in srgb,var(--c-deep) 80%,var(--c-brand)));color:#fff;--c-ink:#fff;--c-ink-2:rgba(255,255,255,.78);--c-brand:var(--c-cta);--c-brand-ink:var(--c-cta-ink)}
.pv-cta.t-brand{background:radial-gradient(ellipse at 10% 100%,rgba(255,255,255,.22),transparent 50%),linear-gradient(120deg,var(--c-cta),color-mix(in srgb,var(--c-cta) 72%,var(--c-deep)));color:var(--c-cta-ink);--c-ink:var(--c-cta-ink);--c-ink-2:var(--c-cta-ink)}
.pv-cta.t-brand .eyebrow{color:var(--c-cta-ink);opacity:.8}
.pv-cta.t-brand .eyebrow::before{background:currentColor}
.pv-cta.t-brand .btn.solid{background:var(--c-deep);color:#fff;border-color:var(--c-deep)}
.pv-cta.t-soft{background:linear-gradient(120deg,color-mix(in srgb,var(--c-accent) 18%,var(--c-bg)),color-mix(in srgb,var(--c-accent) 6%,var(--c-bg)));color:var(--c-ink)}
.pv-body.bare>.pv-cta+.pv-sec{padding-top:64px}
/* The sign-up ad (lib/join-ad.ts): signed-out visitors only, in the site's own colors, fonts, and logo. Text and one button
   on the left; on the right a small picture of the portal made of real homes from the page. */
html.signed .join-ad{display:none}
.join-ad{position:relative;isolation:isolate;overflow:hidden;padding:64px 0;color:#fff;
  background:radial-gradient(ellipse at 90% 0%,color-mix(in srgb,var(--c-accent) 34%,transparent),transparent 55%),linear-gradient(120deg,var(--c-deep),color-mix(in srgb,var(--c-deep) 78%,var(--c-brand)));
  --c-ink:#fff;--c-ink-2:rgba(255,255,255,.8);--c-link:#fff;--c-brand:var(--c-cta);--c-brand-ink:var(--c-cta-ink)}
.ja-in{display:grid;gap:36px;align-items:center}
@media (min-width:900px){.ja-in{grid-template-columns:minmax(0,1fr) minmax(0,.95fr);gap:56px}.join-ad{padding:80px 0}}
.ja-say h2{color:#fff;font-size:clamp(26px,2.8vw,40px);letter-spacing:-.02em;line-height:1.08;margin:10px 0 18px}
.ja-perks{list-style:none;margin:0 0 26px;padding:0;display:grid;gap:10px}
.ja-perks li{position:relative;padding-left:28px;font-size:16px;color:rgba(255,255,255,.82)}
.ja-perks li b{color:#fff}
.ja-perks li::before{content:"";position:absolute;left:0;top:.3em;width:16px;height:16px;border-radius:50%;background:var(--c-cta);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='8'/%3E%3C/svg%3E");}
.ja-perks li::after{content:"";position:absolute;left:5px;top:calc(.3em + 4px);width:4px;height:7px;border:solid var(--c-cta-ink);border-width:0 2px 2px 0;transform:rotate(45deg)}
.ja-acts{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.ja-acts .btn{min-height:52px;padding-inline:28px}
.ja-alt{font-weight:600;font-size:15px;color:rgba(255,255,255,.8)}
.ja-shot{perspective:1400px}
.ja-frame{border-radius:var(--r-panel);overflow:hidden;background:#fff;box-shadow:0 30px 60px rgba(0,0,0,.35);transform:rotateY(-10deg) rotateX(4deg);transform-origin:left center;max-width:520px;margin-left:auto}
@media (max-width:899px){.ja-frame{transform:none;margin:0 auto}}
.ja-bar{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;background:var(--c-deep)}
.ja-bar img{height:18px;width:auto}
.ja-bar b{font-family:var(--font-display);font-size:13px;color:#fff}
.ja-bar span{font-size:11px;font-weight:600;color:rgba(255,255,255,.7)}
.ja-top{position:relative;display:grid;gap:2px;padding:46px 18px 16px;background-size:cover;background-position:center;color:#fff}
.ja-top::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,color-mix(in srgb,var(--c-deep) 85%,transparent),color-mix(in srgb,var(--c-deep) 25%,transparent)),linear-gradient(0deg,color-mix(in srgb,var(--c-deep) 70%,transparent),transparent 60%)}
.ja-top>*{position:relative}
.ja-k{font-size:9px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--c-accent)}
.ja-top b{font-family:var(--font-display);font-size:24px;letter-spacing:-.02em}
.ja-l{font-size:12px;color:rgba(255,255,255,.85)}
.ja-l i{font-style:normal;font-weight:700;color:#fff}
.ja-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:14px;background:#fff}
.ja-tile{display:grid;gap:2px}
.ja-tile img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:6px}
.ja-tile b{font-family:var(--font-display);font-size:12px;margin-top:4px;color:#14202c}
.ja-tile span{font-size:10px;color:#5d6b78}
.pv-talk{padding:80px 0}
.pv-talk-in{display:grid;gap:24px;align-items:center}
@media (min-width:900px){.pv-talk-in{grid-template-columns:auto minmax(0,1fr) auto;gap:36px}}
.pv-talk .avatar{width:104px;height:104px;border-radius:50%;overflow:hidden;box-shadow:0 0 0 4px rgba(255,255,255,.14)}
.pv-talk .avatar img{width:100%;height:100%;object-fit:cover}
.pv-talk h2{color:#fff;font-size:clamp(26px,3vw,40px);letter-spacing:-.02em;margin:8px 0 8px}
.pv-talk p{margin:0;color:rgba(255,255,255,.8);font-size:17px}
.pv-talk p b{color:#fff}
.pv-talk .actions{display:flex;gap:12px;flex-wrap:wrap}
.pv-talk .btn{min-height:52px;padding-inline:26px}
.portal{padding:32px 0 72px;background:var(--c-muted);min-height:70vh}
.p-head{display:flex;align-items:center;justify-content:flex-end;gap:16px;margin-bottom:8px}
.p-grid{display:grid;gap:20px}
.p-nav{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;margin-inline:-20px;padding:0 20px}
.p-nav::-webkit-scrollbar{display:none}
.p-nav a{flex:none;display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 14px;border-radius:999px;color:var(--c-ink-2);font-weight:600;font-size:14px;text-decoration:none;background:var(--c-surface);border:1px solid var(--c-line)}
.p-nav a span{font-size:12px;color:var(--c-ink-2);background:var(--c-chip);border-radius:999px;padding:1px 8px}
.p-nav a.on{background:var(--c-brand);color:var(--c-brand-ink);border-color:var(--c-brand)}
.p-nav a.on span{background:color-mix(in srgb,var(--c-brand-ink) 20%,transparent);color:var(--c-brand-ink)}
.p-main{min-width:0;display:grid;gap:28px;align-content:start}
.p-tiles{margin:0}
.p-sec h2{font-size:20px;margin:0}
.p-sec-h{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:16px}
.p-sec-h a{font-weight:600;font-size:14px}
.p-sec.lx-card h2{margin-bottom:4px}
.p-empty{display:grid;justify-items:start;gap:8px;padding:28px;border:1px dashed var(--c-line);border-radius:var(--r-panel);background:var(--c-surface)}
.p-empty b{font-family:var(--font-display);font-size:17px}
.p-empty p{margin:0 0 8px;color:var(--c-ink-2)}
.p-home{display:grid;gap:8px;align-content:start}
.p-note{margin:0;font-size:13px;font-weight:600;color:var(--c-ink-2)}
.p-note.down{color:var(--c-live)}
.p-note.underway{color:var(--c-ink)}.p-home.underway .lcard{opacity:.62}.p-home.underway .lcard:hover{opacity:1}
.p-searches{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.p-search{display:grid;gap:12px;padding:18px 20px;background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--r-panel)}
.ps-main{display:grid;gap:4px;min-width:0}
.ps-name{font-family:var(--font-display);font-weight:800;font-size:17px;color:var(--c-ink)}
.ps-where{font-size:13.5px;color:var(--c-ink-2)}
.ps-count{font-size:14px}
.ps-count em{font-style:normal;font-weight:700;color:var(--c-live)}
.ps-tools{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.ps-tools form{margin:0}
.ps-tools select{min-height:40px;border:1px solid var(--c-line);border-radius:var(--r-control);background:var(--c-surface);color:var(--c-ink);font:600 13px var(--font-body);padding:0 10px}
@media (min-width:768px){.p-search{grid-template-columns:minmax(0,1fr) auto;align-items:center}}
.p-form{max-width:none;gap:24px}
.p-channel{border:0;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:8px 20px}
.p-channel legend{font-size:12px;font-weight:600;color:var(--c-ink-2);margin-bottom:8px;padding:0}
.p-channel label{display:inline-flex;align-items:center;gap:8px;font-size:15px}
.p-agent .actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.p-agent .tc-agent{border-top:0;padding-top:0}
@media (min-width:1200px){
  .portal{padding-top:48px}
  .p-grid{grid-template-columns:220px minmax(0,1fr) 300px;gap:32px;align-items:start}
  .p-nav{flex-direction:column;margin:0;padding:0;position:sticky;top:84px}
  .p-nav a{justify-content:space-between;border:0;background:transparent;border-radius:var(--r-control)}
  .p-nav a:hover{background:var(--c-surface)}
  .p-agent{position:sticky;top:84px}
}
.save-search{margin:0}
.results-save{display:flex;justify-content:center;margin-top:16px}
.toolbar .save-search{margin-left:auto}
@media (min-width:768px){.p-tiles{grid-template-columns:repeat(3,minmax(0,1fr))}}
.p-tiles{grid-template-columns:repeat(3,minmax(0,1fr))}@media (max-width:767px){.p-tiles div{padding:14px 12px}.p-tiles dd{font-size:24px}}

/* Blog (D41) */
.btopics{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin:0 -20px;padding:0 20px 4px}
.btopics::-webkit-scrollbar{display:none}
.btopics a{flex:none;display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 14px;border-radius:999px;border:1px solid var(--c-line);color:var(--c-ink);font-size:13px;font-weight:600;text-decoration:none;background:var(--c-surface)}
.btopics a small{color:var(--c-ink-2);font-weight:500}
.btopics a.on{background:var(--c-brand);border-color:var(--c-brand);color:var(--c-brand-ink)}
.btopics a.on small{color:inherit;opacity:.8}
@media (min-width:768px){.btopics{flex-wrap:wrap;overflow:visible;margin:0;padding:0}}
.blog-list{padding:40px 0 80px}
.bgrid{display:grid;gap:36px 24px}
@media (min-width:768px){.bgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1200px){.bgrid{grid-template-columns:repeat(3,minmax(0,1fr));gap:48px 32px}}
.bcard{display:grid;gap:14px;align-content:start;min-width:0}
.bphoto{position:relative;display:block;aspect-ratio:16/9;border-radius:var(--r-media);overflow:hidden;background:var(--c-muted)}
.bphoto img{width:100%;height:100%;object-fit:cover;transition:transform 560ms var(--ease)}
.bcard:hover .bphoto img{transform:scale(1.03)}
.bvideo{position:absolute;left:12px;bottom:12px;padding:5px 9px;border-radius:4px;background:color-mix(in srgb,var(--c-surface) 94%,transparent);color:var(--c-ink);font:700 10px var(--font-display);letter-spacing:.12em;text-transform:uppercase}
.bbody{display:grid;gap:8px}
.bcat{font-family:var(--font-display);font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--c-link);text-decoration:none}
.bcard h2{font-size:20px;line-height:1.25;margin:0}
.bcard h2 a{color:var(--c-ink);text-decoration:none}
.bcard h2 a:hover{color:var(--c-link)}
.bcard p{margin:0;color:var(--c-ink-2);font-size:15px;line-height:1.6;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.bmeta{font-size:12.5px;color:var(--c-ink-2)}
.bcard.lead{margin-bottom:48px}
@media (min-width:768px){.bcard.lead{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:40px;align-items:center}.bcard.lead h2{font-size:clamp(26px,3vw,36px);letter-spacing:-.02em}.bcard.lead p{-webkit-line-clamp:4;font-size:17px}}
.pager{display:flex;justify-content:space-between;align-items:center;margin-top:48px;font-weight:600}

.post-meta{margin:0;color:var(--c-ink-2);font-size:14px}
.post-meta b{color:var(--c-ink)}
.wrap.narrow{max-width:800px}
.post-body{font-size:18px;line-height:1.75;padding-top:clamp(28px,4vw,48px);padding-bottom:16px}
.post-body p,.post-body ul,.post-body ol{margin:0 0 22px}
.post-body h2{font-size:clamp(24px,2.6vw,30px);line-height:1.2;margin:44px 0 16px}
.post-body h3{font-size:21px;margin:32px 0 12px}
.post-body img{border-radius:var(--r-media);margin:8px 0;height:auto}
.post-body hr{border:0;border-top:1px solid var(--c-line);margin:40px 0}
.post-body blockquote{margin:28px 0;padding:4px 0 4px 20px;border-left:3px solid var(--c-accent);color:var(--c-ink-2);font-size:20px}
.post-body a{color:var(--c-link);text-decoration:underline;text-decoration-thickness:1px}
.post-body .video-frame{margin:0 0 28px;border-radius:var(--r-panel);overflow:hidden}
.post-body table{width:100%;border-collapse:collapse;font-size:15px;margin:0 0 24px;display:block;overflow-x:auto}
.post-body td,.post-body th{border-bottom:1px solid var(--c-line);padding:10px 12px;text-align:left}
.post-tags{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 32px}
.post-tags a{font-size:13px;font-weight:600;padding:6px 12px;border-radius:999px;background:var(--c-chip);color:var(--c-ink);text-decoration:none}
/* Blog workover (2026-09-30): topics sit above the posts instead of on the hero photo; titles clamp so rows line up. */
.blog-list .btopics{margin-bottom:40px;flex-wrap:nowrap;overflow-x:auto;padding-bottom:6px;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 48px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 48px),transparent)}
.blog-list .btopics a:last-child{margin-right:40px}
.bcard h2{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.bcard.lead h2{-webkit-line-clamp:4}
.post-body h2[id]{scroll-margin-top:96px}
.blive{margin:36px 0 44px;padding:24px;border:1px solid var(--c-line);border-radius:var(--r-panel);background:var(--c-muted);font-size:15px;line-height:1.55}
.blive-h{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:18px}
.blive-h a{font-weight:600;font-size:14px}
.blive .lgrid.three{grid-template-columns:minmax(0,1fr);gap:28px}
@media (min-width:768px){.blive .lgrid.three{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}}
.post-body .blive a{text-decoration:none}.post-body .blive .laddr{color:var(--c-ink)}.post-body .blive{font-size:15px;line-height:1.5}
/* Blog bodies style every img (natural height, margins, rounded); listing cards in the rail keep their own fixed photo box. */
.post-body .lphoto img{height:100%;margin:0;border-radius:0}
.post-body .blive .lgrid.three{column-gap:24px}
/* The dots are decoration; in three-across rails the card is too narrow for them and the photo count together. */
.lgrid.three .ldots,.blive .ldots{display:none}

/* Home: lifestyle tiles and the homeowner section */
.hl-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.hl-card{min-height:180px}
.hl-card.wide{grid-column:1/-1;min-height:240px}
.hl-card .hc-text b{font-size:19px}
.hl-card.wide .hc-text b{font-size:26px}
.hl-more{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:28px 0 0}
.hl-more span{font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--c-ink-2);margin-right:6px}
.hl-more a{display:inline-flex;align-items:center;min-height:40px;padding:0 16px;border:1px solid var(--c-line);border-radius:999px;background:var(--c-surface);color:var(--c-ink);font-size:14px;font-weight:600;text-decoration:none;transition:border-color 160ms var(--ease)}
.hl-more a:hover{border-color:var(--c-ink);text-decoration:none}
@media (min-width:768px){
  .hl-grid{grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:260px;gap:16px}
  .hl-card,.hl-card.wide{min-height:0}
  .hl-card.wide{grid-column:span 2}
  .hl-card.wide .hc-text b{font-size:32px}
}
@media (min-width:1200px){.hl-grid{grid-auto-rows:300px}}

.hsell .wrap{display:grid;gap:32px}
.hs-photo{border-radius:var(--r-panel);overflow:hidden;background:var(--c-muted);aspect-ratio:4/3}
.hs-photo img{width:100%;height:100%;object-fit:cover}
.hs-text h2{margin:14px 0 14px}
.hs-dek{font-size:17px;line-height:1.7;color:var(--c-ink-2);margin:0 0 26px;max-width:52ch}
.hs-value{display:grid;gap:14px;max-width:560px}
.hs-value .btn{justify-self:start}
.hs-note{margin:12px 0 0;font-size:13px;color:var(--c-ink-2)}
.hs-note a{text-decoration:underline;text-underline-offset:3px}
.hs-steps{list-style:none;counter-reset:st;margin:36px 0 0;padding:0;display:grid;gap:0;max-width:560px}
.hs-steps li{counter-increment:st;display:grid;grid-template-columns:44px minmax(0,1fr);gap:2px 0;padding:16px 0;border-top:1px solid var(--c-line)}
.hs-steps li::before{content:"0" counter(st);grid-row:span 2;font-family:var(--font-display);font-size:13px;font-weight:700;letter-spacing:.08em;color:var(--c-accent);padding-top:2px}
.hs-steps b{font-family:var(--font-display);font-size:16px}
.hs-steps span{color:var(--c-ink-2);font-size:15px;line-height:1.6}
.hs-link{display:inline-block;margin-top:18px;font-family:var(--font-display);font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
@media (min-width:768px){.hs-value{grid-template-columns:minmax(0,1fr) auto;align-items:end}.hs-value .btn{justify-self:stretch}}
@media (min-width:1200px){.hsell .wrap{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:80px;align-items:center}.hs-photo{aspect-ratio:4/5}}
.ht-grid{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
/* D298: the instant home value page */
.hv-hero-note{display:block;margin-top:10px;font-size:15px;opacity:.85}
.hv-facts-line{margin:4px 0 0;font-size:14px;opacity:.8}
.hv-facts{margin-top:22px;max-width:640px;padding:22px 24px;border-radius:18px;background:var(--c-surface);color:var(--c-ink);box-shadow:0 18px 40px rgba(10,20,30,.22)}
.hv-facts-say{margin:0 0 4px;font-size:16px;line-height:1.5;color:var(--c-ink)}
.hv-facts-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 20px}
.hv-pool{display:flex;align-items:center;gap:20px;border:0;margin:16px 0 18px;padding:0;font-size:16px}
.hv-pool legend{float:left;margin-right:6px;color:var(--c-ink-2)}
.hv-pool label{display:inline-flex;align-items:center;gap:8px;cursor:pointer}
.hv-next-wrap{display:grid;gap:32px}
.hv-agent{display:flex;align-items:center;gap:14px;margin-top:20px}
.hv-agent img{width:58px;height:58px;border-radius:50%;object-fit:cover;object-position:top;background:var(--c-tint)}
.hv-agent b{display:block;font-size:16px}
.hv-agent a{color:var(--c-link);font-size:15px}
.hv-details{display:grid;gap:16px;align-content:start}
.hv-details .btn{justify-self:start}
.hv-plan{display:grid;gap:10px;border:0;margin:0;padding:0}
.hv-plan legend{margin-bottom:10px;font-size:13px;color:var(--c-ink-2)}
.hv-plan label{display:flex;align-items:center;gap:10px;font-size:17px;cursor:pointer}
.hv-plan input{width:18px;height:18px;accent-color:var(--c-brand)}
.hv-select{display:grid;gap:6px;font-size:13px;color:var(--c-ink-2)}
.hv-select select{width:100%;padding:10px 0 12px;border:0;border-bottom:1px solid var(--c-line);border-radius:0;background:transparent;color:var(--c-ink);font:400 17px/1.45 var(--font-body)}
.hv-sent{align-self:start;padding:24px;border-radius:18px;background:var(--c-surface)}
.hv-sent b{font-size:18px}
.hv-sent p{margin:6px 0 0;color:var(--c-ink-2)}
@media (min-width:768px){.hv-facts-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (min-width:1024px){.hv-next-wrap{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:start}}
/* D298: the home value field in three steps, with address suggestions */
.hv-form{display:grid;gap:14px;max-width:620px}
.hv-step{display:grid;gap:14px}
.hv-form.on .hv-step:not(.cur){display:none}
.hv-step .btn{justify-self:start}
.hv-addr{position:relative}
.hv-list{position:absolute;z-index:30;left:0;right:0;top:100%;margin:4px 0 0;padding:6px;list-style:none;background:var(--c-surface);color:var(--c-ink);border:1px solid var(--c-line);border-radius:12px;box-shadow:0 14px 34px rgba(10,20,30,.18);max-height:300px;overflow:auto}
.hv-pick{margin:8px 0 0;font-size:14px;font-weight:600}
.hv-list li{padding:11px 12px;border-radius:8px;font-size:15px;line-height:1.35;cursor:pointer}
.hv-list li:hover,.hv-list li[aria-selected=true]{background:var(--c-tint)}
.hv-for{justify-self:start;margin:0;padding:0;border:0;background:none;font:inherit;font-size:14px;color:var(--c-ink-2);text-align:left;cursor:pointer}
.hv-for::after{content:" \00b7  Change";color:var(--c-link)}
.hv-form .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}
.hv-form .tcpa{font-size:11px;color:var(--c-ink-2);line-height:1.55;margin:0;grid-column:1/-1}
.photo-band .hv-form .tcpa,.photo-band .hv-for{color:rgba(255,255,255,.72)}
@media (min-width:768px){.hv-step1,.hv-step2{grid-template-columns:minmax(0,1fr) auto;align-items:end}.hv-step3{grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;align-items:end}.hv-step .btn{justify-self:stretch}}
@media (max-width:767px){.hv-step .btn{width:100%}}
@media (max-width:767px){.hl-card:not(.wide) .hc-text{padding:16px}.hl-card:not(.wide) .hc-text b{font-size:16px}.hs-value .btn{width:100%}}

/* Community page: homeowner band and price-reduced rail */
.hv-band .wrap{display:grid;gap:36px}
.hv-say h2{margin:14px 0 14px;max-width:16ch}
.hv-say p{color:var(--c-ink-2);font-size:17px;line-height:1.7;max-width:52ch;margin:0 0 26px}
.hv-say .hs-value,.hv-say .hv-form{max-width:620px}
.hv-say .hs-note{margin-top:12px;font-size:13px}
.hv-stats{margin:0;display:grid;gap:0;border-top:1px solid var(--c-line)}
.hv-stats div{padding:18px 0;border-bottom:1px solid var(--c-line)}
.hv-stats dt{font-size:13px;color:var(--c-ink-2)}
.hv-stats dd{margin:4px 0 0;font-family:var(--font-display);font-size:clamp(28px,3.4vw,40px);font-weight:800;letter-spacing:-.02em;color:var(--c-ink);font-variant-numeric:tabular-nums}
@media (min-width:1200px){.hv-band .wrap{grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:80px;align-items:center}}
.reduced .results-foot{margin-top:40px}
/* Open houses (D186): a plain heading per local day, the time window above each card. */
.oh-day{margin-top:48px}
.oh-day:first-of-type{margin-top:8px}
.oh-day h3{margin:0 0 16px}
.oh-wk{font-size:14px;font-weight:500;color:var(--c-ink-2);margin-left:8px}
.oh-item{display:flex;flex-direction:column;min-width:0}
.oh-item .lcard{flex:1}
.oh-time{margin:0 0 8px;font-size:15px;font-weight:600;color:var(--c-ink)}
/* The community filter: the phone's own picker, in a styled field with its own chevron. */
.oh-filter label{display:grid;gap:6px}
.oh-filter-k{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--c-ink-2)}
.oh-select{position:relative;display:block;min-width:min(280px,100%)}
.oh-select select{appearance:none;-webkit-appearance:none;width:100%;min-height:48px;padding:0 44px 0 16px;border:1px solid var(--c-line);border-radius:var(--r-control);background:var(--c-surface);color:var(--c-ink);font:600 15px/1.2 var(--font-body);cursor:pointer;box-shadow:0 1px 2px rgba(6,12,20,.06);transition:border-color 160ms var(--ease),box-shadow 160ms var(--ease)}
.oh-select select:hover{border-color:var(--c-ink-2)}
.oh-select select:focus-visible{outline:none;border-color:var(--c-accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--c-accent) 30%,transparent)}
.oh-select svg{position:absolute;right:14px;top:50%;width:18px;height:18px;transform:translateY(-50%);color:var(--c-ink-2);pointer-events:none}
.lx-open a{color:inherit;text-decoration:underline;text-underline-offset:3px}

/* Home: review slider (D42). One centered quote at a time on the section ground, muted source marks, dots. */
.hrev{text-align:center}
.rev-head .eyebrow{justify-content:center}
.rev-head h2{margin-bottom:10px}
.rev-badges{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px 18px;margin:0 0 8px;color:var(--c-ink-2);font-size:14px}
.rev-badges .rb{display:inline-flex;align-items:center;gap:8px;color:var(--c-ink-2);text-decoration:none}
.rev-badges .rb b{color:var(--c-ink);font-family:var(--font-display);font-weight:800}
.rev-badges i{width:4px;height:4px;border-radius:50%;background:var(--c-line)}
/* Each source's badge (2026-10-04): its real logo, small stars, the rating, and the count. */
.rev-badges .rb-logo{display:block;flex:none}
.rev-badges .rb-logo.z{width:auto;height:17px;color:var(--c-ink)}
.rev-badges .rb .stars svg{width:14px;height:14px}
.rev-badges .rb .stars{gap:2px}
.rev-track{display:grid;grid-auto-flow:column;grid-auto-columns:100%;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin-top:28px;outline:none}
.rev-track::-webkit-scrollbar{display:none}
.rev-slide{scroll-snap-align:center;margin:0;padding:8px 4px;display:grid;justify-items:center;gap:22px}
.rev-meta{display:grid;justify-items:center;gap:12px}
.stars{display:inline-flex;gap:3px}
.stars svg{fill:var(--c-line)}
.stars svg.on{fill:var(--c-accent)}
.rev-slide blockquote{margin:0;max-width:46ch;font-family:var(--font-display);font-size:clamp(17px,1.7vw,21px);font-weight:500;line-height:1.55;letter-spacing:-.005em;color:var(--c-ink-2);text-wrap:balance}
.rev-slide blockquote::before{content:"\201C"}
.rev-slide blockquote::after{content:"\201D"}
.rev-slide figcaption{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 14px;font-size:14px;color:var(--c-ink-2)}
.rev-slide figcaption b{color:var(--c-ink);font-weight:600}
.rev-when{display:inline-flex;flex-wrap:wrap;justify-content:center;gap:4px 8px}
.rev-on{color:var(--c-ink-2);font-size:13px}
a.rev-on{text-decoration:underline;text-decoration-color:color-mix(in srgb,currentColor 35%,transparent);text-underline-offset:3px}
a.rev-on:hover{color:var(--c-ink);text-decoration-color:currentColor}
/* Each dot is drawn by ::before inside a 24px tall button, so the tap target meets the 24px minimum while the dot stays small. */
.rev-dots{display:flex;justify-content:center;gap:2px;margin-top:22px}
.rev-dots button{display:grid;place-items:center;width:24px;height:24px;padding:0;border:0;background:none;cursor:pointer;transition:width 240ms var(--ease)}
.rev-dots button::before{content:"";width:8px;height:8px;border-radius:999px;background:color-mix(in srgb,var(--c-ink) 22%,transparent);transition:width 240ms var(--ease),background 240ms var(--ease)}
.rev-dots button[aria-current="true"]{width:36px}
.rev-dots button[aria-current="true"]::before{width:26px;background:var(--c-ink)}
.rev-dots button:focus-visible{outline:2px solid var(--c-accent);outline-offset:-2px;border-radius:999px}
.rev-sample{margin:22px 0 0;font-size:12px;color:var(--c-ink-2)}
/* /reviews/ (D186): every review as a calm card, in a grid that grows with the screen. */
.rev-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px}
.rev-card{margin:0;display:grid;align-content:start;gap:14px;padding:24px;border:1px solid var(--c-line);border-radius:var(--r-panel);background:var(--c-surface)}
.rev-card blockquote{margin:0;max-width:65ch;font-size:16px;line-height:1.6;color:var(--c-ink-2)}
.rev-card figcaption{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:14px;color:var(--c-ink-2)}
.rev-card figcaption b{color:var(--c-ink);font-weight:600}
/* The trust line under a community or seller hero (D186): one plain sentence, no stars or badges. */
.hero .trust{margin:0 0 20px;font-size:14px;color:rgba(255,255,255,.9)}
.hero .trust a{color:inherit;text-decoration:underline;text-decoration-color:color-mix(in srgb,currentColor 40%,transparent);text-underline-offset:3px}
.hero .trust a:hover{text-decoration-color:currentColor}
.hero .sub+.trust{margin-top:-12px}
@media (min-width:1200px){.rev-slide blockquote{max-width:50ch}}
.rd-item[hidden]{display:none !important}
.rd-item{display:contents}
.reduced .results-foot{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:12px}
.reduced .results-foot .rd-count{flex-basis:100%;text-align:center;margin:0}

/* Buyer and seller pages (planning/23, D44). Colors only from theme tokens. */
.guide-hero{min-height:400px;--c-ink:#fff;--c-ink-2:rgba(255,255,255,.8);--c-line:rgba(255,255,255,.4);--c-link:#fff;--c-brand:var(--c-cta);--c-brand-ink:var(--c-cta-ink)}
.guide-hero .eyebrow{margin-top:18px}
.guide-hero h1{font-size:clamp(36px,5.6vw,68px);line-height:.98}
.guide-hero .field::after{background:var(--c-accent)}
.gh-points{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px 22px;font-size:14px;color:rgba(255,255,255,.9)}
.gh-points li{display:flex;align-items:center;gap:8px}
.gh-points svg{color:var(--c-accent)}
.gh-value{max-width:620px}
.gh-value .hs-value{gap:16px}
@media (min-width:768px){.guide-hero{min-height:460px}.gh-value .hs-value{grid-template-columns:minmax(0,1fr) auto;align-items:end}}
.gchecks{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:12px}
.gchecks li{display:grid;grid-template-columns:18px minmax(0,1fr);gap:10px;font-size:15px;line-height:1.5}
.gchecks svg{color:var(--c-accent);margin-top:3px}
.gchecks.small{margin-top:14px;gap:8px}
.gchecks.small li{font-size:14px;color:var(--c-ink-2)}
.cin.wide{grid-column:1/-1}
.cout li[hidden]{display:none}
.cwhy{font-size:14px;line-height:1.55;color:var(--c-ink-2);margin:14px 0 0}
.cgo{display:flex;flex-wrap:wrap;gap:10px;margin:22px 0 4px}
@media (max-width:767px){.cgo .btn{flex:1 1 100%}}
.gpa .wrap,.gvalue .wrap{display:grid;gap:40px}
@media (min-width:900px){.gpa .wrap,.gvalue .wrap{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:72px;align-items:start}}
.gpa-lender{margin-top:32px;padding-top:22px;border-top:1px solid var(--c-line)}
.gpa-lender .cl,.gt .cl{display:block;font-size:12px;font-weight:600;color:var(--c-ink-2);margin-bottom:12px}
.gpa-form{background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--r-panel);padding:24px}
@media (min-width:768px){.gpa-form{padding:36px}}
.gvalue .hs-value{margin-top:8px}
.gp-grid{display:grid;gap:0}
.gp{padding:24px 0;border-top:1px solid var(--c-line)}
.gp b{display:block;font-family:var(--font-display);font-size:18px;font-weight:800;letter-spacing:-.01em}
.gp p{margin:8px 0 0;color:var(--c-ink-2);font-size:15px;line-height:1.65;max-width:52ch}
@media (min-width:768px){.gp-grid{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:48px}.gp{padding:28px 0}}
@media (min-width:1100px){.gp-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.gsteps{list-style:none;margin:0;padding:0}
.gsteps li{display:grid;grid-template-columns:52px minmax(0,1fr);padding:22px 0;border-top:1px solid var(--c-line)}
.gsteps li:last-child{border-bottom:1px solid var(--c-line)}
.gs-n{font-family:var(--font-display);font-size:13px;font-weight:700;letter-spacing:.08em;color:var(--c-link);padding-top:4px}
.gsteps em{display:block;font-style:normal;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--c-ink-2);margin-bottom:4px}
.gsteps b{display:block;font-family:var(--font-display);font-size:18px;font-weight:800}
.gsteps p{margin:6px 0 0;color:var(--c-ink-2);font-size:15px;line-height:1.65}
.gs-note{margin:22px 0 0;font-size:14px;line-height:1.6;color:var(--c-ink-2)}
.gt-grid{display:grid;gap:12px}
@media (min-width:768px){.gt-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.gt{padding:24px;border:1px solid var(--c-line);border-radius:var(--r-panel);background:var(--c-surface)}
.gt .cl{margin-bottom:6px}
.gt b{display:block;font-family:var(--font-display);font-size:clamp(24px,2.6vw,32px);font-weight:800;letter-spacing:-.02em;line-height:1.1}
.gt p{margin:10px 0 0;color:var(--c-ink-2);font-size:14.5px;line-height:1.55}
.glinks .ht-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}
.guide-hero .sub{max-width:56ch}
.gpa-lender .avatar{flex:none;width:48px;height:48px;border-radius:50%;overflow:hidden;background:#fff}
.gpa-lender .avatar img{width:100%;height:100%;object-fit:cover}
.gpa-lender .avatar.mono{display:grid;place-items:center;background:var(--c-tint);color:var(--c-ink);font:800 14px var(--font-display)}

/* Neighborhood pages (D45): the way back to the community guide. Full bleed photo, photos sell. */
.parent-link{position:relative;isolation:isolate;display:flex;align-items:flex-end;min-height:560px;overflow:hidden;background:var(--c-deep);color:#fff;--c-ink:#fff;--c-ink-2:rgba(255,255,255,.82);--c-link:#fff;--c-brand:var(--c-cta);--c-brand-ink:var(--c-cta-ink)}
.parent-link > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.pl-shade{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,color-mix(in srgb,var(--c-deep) 5%,transparent) 0%,color-mix(in srgb,var(--c-deep) 40%,transparent) 40%,color-mix(in srgb,var(--c-deep) 92%,transparent) 100%)}
.parent-link .wrap{width:100%;padding-top:96px;padding-bottom:56px}
.pl-body{display:grid;gap:16px;max-width:780px}
.pl-title{margin:0 !important;font-size:clamp(36px,5.4vw,68px);font-weight:800;line-height:1;letter-spacing:-.03em;color:#fff}
.pl-dek{margin:0;font-size:17px;line-height:1.6;color:rgba(255,255,255,.88);max-width:58ch}
.pl-facts{display:flex;flex-wrap:wrap;gap:12px 36px;margin:6px 0 8px}
.pl-facts div{display:flex;flex-direction:column-reverse}
.pl-facts dt{font-size:12px;color:rgba(255,255,255,.78)}
.pl-facts dd{margin:0;font-family:var(--font-display);font-size:clamp(24px,2.8vw,34px);font-weight:800;color:#fff;letter-spacing:-.02em}
.pl-actions{display:flex;flex-wrap:wrap;gap:10px}
@media (max-width:767px){.pl-actions .btn{flex:1 1 100%}}
@media (min-width:768px){.parent-link{min-height:620px}.parent-link .wrap{padding-bottom:72px}}
@media (min-width:1200px){.parent-link{min-height:680px}.parent-link .wrap{padding-bottom:88px}}

/* /communities/ (D47) */
.ci-hero{min-height:420px}
/* Short hero (D53): every page without a full hero opens with this band. Tokens go to their dark-ground values so stat lines,
   dates, and topic chips read on the photo. */
.hero.short{min-height:0;--c-ink:#fff;--c-ink-2:rgba(255,255,255,.8);--c-line:rgba(255,255,255,.4);--c-link:#fff;--c-brand:var(--c-cta);--c-brand-ink:var(--c-cta-ink);--c-chip:rgba(255,255,255,.14)}
.hero.short .wrap{padding-top:108px;padding-bottom:36px}
.hero.short h1{font-size:clamp(32px,4.8vw,56px);line-height:1;margin:8px 0 10px}
.hero.short .sub{font-size:16px;margin:0 0 10px}
.hero.short .statline{font-size:14px;color:var(--c-ink-2)}
.hero.short .statline b{color:#fff;font-variant-numeric:tabular-nums}
.hero.short .eyebrow{margin-top:0}
.hero.short .btopics{margin-top:18px}
.hero.short .btopics a{background:rgba(255,255,255,.08)}
.hero.short .btopics a.on{background:var(--c-cta);border-color:var(--c-cta);color:var(--c-cta-ink)}
.hero.short .doc-intro,.hero.short .post-meta{color:var(--c-ink-2)}
.hero.short .doc-date{margin:14px 0 0}
.hero.short .doc-draft{margin:14px 0 0}
.hero.short .sub-brand{margin-bottom:12px}
@media (min-width:768px){.hero.short .wrap{padding-top:124px;padding-bottom:44px}.hero.short .sub{font-size:18px}}
@media (min-width:1200px){.hero.short .wrap{padding-top:136px;padding-bottom:52px}}
.ci-hero .eyebrow{color:#fff;margin-top:18px}
.ci-hero h1{font-size:clamp(36px,5.6vw,68px);line-height:.98}
.ci-hero .sub{max-width:56ch}
.hsearch.ci-search{grid-template-columns:minmax(0,1fr) auto;max-width:720px}
.ci-sort thead button{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:6px;font:inherit;color:inherit}
.ci-sort thead button::after{content:"\2195";font-size:11px;opacity:.45}
.ci-sort th[aria-sort="ascending"] button::after{content:"\2191";opacity:1}
.ci-sort th[aria-sort="descending"] button::after{content:"\2193";opacity:1}
.ci-sort thead button:focus-visible{outline:2px solid var(--c-cta);outline-offset:2px}
.ci-sort td{text-align:right;font-variant-numeric:tabular-nums}
.ci-sort thead th:not(:first-child){text-align:right}
.ci-groups{display:grid;gap:36px 40px}
@media (min-width:768px){.ci-groups{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.ci-groups{grid-template-columns:repeat(3,minmax(0,1fr))}}
.ci-group h3{font-size:17px;margin:0 0 6px;padding-bottom:10px;border-bottom:1px solid var(--c-line)}
.ci-group p{margin:10px 0 0;font-size:14px;line-height:1.55;color:var(--c-ink-2)}
.ci-group ul{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:2px}
.ci-group li{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.ci-group li a{padding:6px 0;font-size:15px}
.ci-group li small{font-size:12px;color:var(--c-ink-2);font-variant-numeric:tabular-nums}
/* Full width, full bleed map: edge to edge, no frame, and it runs to the bottom of its section. */
section.block.ci-map{padding-bottom:0}
.ci-map .map{width:100%;height:480px;min-height:0;border:0;border-radius:0}
@media (min-width:768px){.ci-map .map{height:600px}}
@media (min-width:1200px){.ci-map .map{height:680px}}
@media (max-width:767px){.ci-search .hs-q{border-bottom:0}.ci-search .btn{padding:0 22px}}

/* Simple document pages: legal (D48). */
.doc-intro{font-size:18px;line-height:1.6;color:var(--c-ink-2);max-width:62ch;margin:0}
.doc-date{font-size:13px;color:var(--c-ink-2);margin:18px 0 32px}
.doc-draft{display:inline-block;font-size:13px;font-weight:600;color:var(--c-ink);background:var(--c-chip);border:1px solid var(--c-line);border-radius:var(--r-control);padding:8px 12px;margin:-16px 0 32px}
.doc-grid{display:grid;gap:36px}
.doc-toc .cl{display:block;font-size:12px;font-weight:600;color:var(--c-ink-2);margin-bottom:10px}
.doc-toc ol{margin:0;padding-left:18px;display:grid;gap:8px;font-size:14px}
.doc-body section{padding:4px 0 20px;scroll-margin-top:84px}
.doc-body h2{font-size:22px;margin:0 0 12px}
.doc-body p,.doc-body li{font-size:16px;line-height:1.7;color:var(--c-ink-2);max-width:68ch}
.doc-body p{margin:0 0 12px}
.doc-body ul{margin:0 0 12px;padding-left:20px;display:grid;gap:6px}
.doc-more{margin-top:24px !important;padding-top:20px;border-top:1px solid var(--c-line);font-size:14px !important}
@media (min-width:1000px){.doc-head .wrap.narrow,.doc .wrap.narrow{max-width:1080px}.doc-grid{grid-template-columns:240px minmax(0,1fr);gap:56px;align-items:start}.doc-toc{position:sticky;top:84px}}

/* Contact and thanks (D48) */
.contact-hero .wrap,.thanks-hero .wrap{padding-bottom:64px}
.ways{display:grid;gap:12px;margin-top:28px;max-width:980px}
@media (min-width:900px){.ways{grid-template-columns:repeat(3,minmax(0,1fr))}}
.way{display:grid;gap:4px;align-content:start;padding:22px;border-radius:var(--r-panel);background:color-mix(in srgb,var(--c-deep) 55%,transparent);border:1px solid rgba(255,255,255,.22);color:#fff;text-decoration:none;backdrop-filter:blur(6px);transition:border-color 140ms var(--ease),transform 140ms var(--ease)}
.way:hover{border-color:rgba(255,255,255,.6);transform:translateY(-2px);text-decoration:none}
.way svg{color:var(--c-accent);margin-bottom:8px}
.way .cl{font-size:12px;font-weight:600;color:rgba(255,255,255,.75)}
.way b{font-family:var(--font-display);font-size:clamp(16px,1.7vw,19px);font-weight:800;line-height:1.3;overflow-wrap:break-word}
.way em{font-style:normal;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;margin-top:6px;color:rgba(255,255,255,.85)}
.thanks-hero{min-height:560px}
.thanks-hero .sub a{color:#fff;text-decoration:underline}

/* About, team, profiles, vendors (D48) */
.gs-row{display:flex;justify-content:center;max-width:960px;margin:0 auto}
.gs-row div{flex:1 1 0;min-width:0;display:flex;flex-direction:column-reverse;align-items:center;gap:8px;padding:4px 16px;text-align:center;border-left:1px solid var(--c-line)}
.gs-row div:first-child{border-left:0}
.gs-row dt{font-size:14px;color:var(--c-ink-2)}
.gs-row dd{margin:0;font-family:var(--font-display);font-size:clamp(30px,4vw,48px);font-weight:800;letter-spacing:-.03em;line-height:1}
section.gstats.block{padding-block:40px}
.tm-grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr))}
@media (min-width:1000px){.tm-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.tm-card{position:relative;display:grid;grid-template-columns:72px minmax(0,1fr);gap:18px;align-items:center;padding:22px 48px 22px 22px;border:1px solid var(--c-line);border-radius:var(--r-panel);background:var(--c-surface);color:var(--c-ink);text-decoration:none;transition:border-color 140ms var(--ease),transform 140ms var(--ease)}
.tm-card:hover{border-color:var(--c-ink);transform:translateY(-2px);text-decoration:none}
.tm-photo,.st-photo,.mh-photo{display:grid;place-items:center;overflow:hidden;border-radius:50%;background:var(--c-tint);color:var(--c-ink);font:800 20px var(--font-display)}
.tm-photo{width:72px;height:72px}
.tm-photo img,.st-photo img,.mh-photo img{width:100%;height:100%;object-fit:cover;object-position:center top}
.tm-text{display:grid;gap:2px;min-width:0}
.tm-text b{font-family:var(--font-display);font-size:17px}
.tm-text span{font-size:13px;color:var(--c-ink-2)}
.tm-text em{font-style:normal;font-size:13px;font-weight:600;color:var(--c-link)}
.tm-go{position:absolute;right:18px;top:50%;transform:translateY(-50%);color:var(--c-ink-2)}
.tm-join{border-style:dashed;background:transparent}
.tm-join .tm-photo{font-size:28px;font-weight:400}
.st-list{list-style:none;margin:0;padding:0;display:grid;gap:0;max-width:760px}
.st-list li{display:grid;grid-template-columns:48px minmax(0,1fr) auto;gap:14px;align-items:center;padding:14px 0;border-top:1px solid var(--c-line)}
.st-list li:last-child{border-bottom:1px solid var(--c-line)}
.st-photo{width:48px;height:48px;font-size:15px}
.st-list b{display:block;font-family:var(--font-display);font-size:16px}
.st-list span span{font-size:13px;color:var(--c-ink-2)}
.st-list a{font-size:13px;font-weight:600}
.gl-row{display:grid;gap:28px;align-items:center}
.gl-card{display:grid;gap:18px;padding:28px;border:1px solid var(--c-line);border-radius:var(--r-panel);background:var(--c-surface);max-width:420px}
.gl-actions{display:flex;flex-wrap:wrap;gap:12px}
.gl-actions .btn{flex:0 1 auto;padding-inline:24px}
.gl-card .lc-who{gap:16px}
.gl-card .lc-who strong{font-size:18px}
.gl-card .lc-who span{font-size:14px}
.gl-card .avatar{flex:none;width:60px;height:60px;border-radius:50%;overflow:hidden}
.gl-card .avatar.mono{display:grid;place-items:center;background:var(--c-tint);color:var(--c-ink);font:800 17px var(--font-display)}
.gl-card .fine{margin:0}
@media (min-width:900px){.gl-row{grid-template-columns:minmax(0,1fr) 420px;gap:64px}}
.member-hero{min-height:520px}
.mh-row{display:grid;gap:28px;align-items:end}
.mh-photo{width:180px;height:180px;background:#fff;font-size:48px;border:4px solid rgba(255,255,255,.85)}
@media (min-width:900px){.mh-row{grid-template-columns:minmax(0,1fr) 280px}.mh-photo{width:280px;height:280px;justify-self:end}}
.member-body h3{font-size:16px;margin:28px 0 12px}
.member-body .chips{list-style:none;padding:0;margin:0}
.vendors-head .wrap{max-width:1168px}
.vfilter{display:flex;align-items:center;gap:10px;max-width:520px;min-height:52px;padding:0 16px;margin-top:4px;border-radius:var(--r-control);background:var(--c-surface);border:1px solid var(--c-line);color:var(--c-ink-2)}
.vfilter:focus-within{border-color:var(--c-cta)}
.vfilter input{flex:1;min-width:0;border:0;background:transparent;color:var(--c-ink);font:500 16px var(--font-body);outline:none}
.vjump{display:flex;gap:8px;overflow-x:auto;padding:20px 0 28px;scrollbar-width:none}
.vjump .chip{white-space:nowrap}
.vgroup{margin-bottom:48px}
.vgroup > h2{margin:0 0 20px !important;padding-bottom:12px;border-bottom:2px solid var(--c-ink)}
.vcats{display:grid;gap:28px 40px}
@media (min-width:768px){.vcats{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.vcats{grid-template-columns:repeat(3,minmax(0,1fr))}}
.vcat{scroll-margin-top:84px}
.vcat h3{font-size:15px;margin:0 0 6px;color:var(--c-ink-2);text-transform:uppercase;letter-spacing:.08em;font-size:12px}
.vcat ul{list-style:none;margin:0;padding:0}
.vcat li{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:10px 0;border-top:1px solid var(--c-line)}
.vwho{display:grid;gap:2px;min-width:0}
.vwho b{font-size:15px}
.vwho span{font-size:13px;color:var(--c-ink-2)}
.vwho em{font-style:normal;font-size:12px;color:var(--c-ink-2)}
.vsp{font-style:normal;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--c-link)}
.vphone{white-space:nowrap;font-size:14px;font-weight:600;font-variant-numeric:tabular-nums}
.vcat[hidden],.vgroup[hidden],.vcat li[hidden]{display:none}
.units-table th,.units-table td{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.units-table th:first-child,.units-table tbody th{text-align:left}
.nf-links{margin-top:22px}
/* Neighborhood cards without a photo yet: brand gradient with a quiet place mark. */
.vcard .photo.ph{display:grid;place-items:center;background:linear-gradient(135deg,var(--c-deep),var(--c-brand));color:rgba(255,255,255,.55)}
/* The card line shows whole: blurbs are written as one short line, and a clamp under the grid's stretch showed half a third line. */
.vcard span{display:block;align-self:start}
/* Photo section (D94): one photo, full width of the column, or edge to edge when wide. */
.photo-block figure{margin:0}
.photo-block img{display:block;width:100%;height:auto;border-radius:var(--r-media)}
.photo-block.wide img{border-radius:0;max-height:70vh;object-fit:cover}
.photo-block figcaption{font-size:13px;color:var(--c-ink-2);margin-top:10px}
.photo-block.wide figcaption{padding:0 24px}
.editorial img{max-width:100%;height:auto;border-radius:var(--r-media)}
.editorial h2,.editorial h3{font-family:var(--font-display);margin:28px 0 12px}
.editorial ul,.editorial ol{font-size:17px;line-height:1.7;margin:0 0 20px;padding-left:24px}
.editorial blockquote{margin:0 0 20px;padding-left:18px;border-left:3px solid var(--c-brand);font-size:19px;color:var(--c-ink-2)}
/* Call to action band (D94): heading, a line, and buttons; on the page photo when asked. */
.cta-band{position:relative;overflow:hidden}
.cta-band .cta-inner{max-width:760px;margin:0 auto;text-align:center;display:flex;flex-direction:column;align-items:center;gap:14px}
.cta-band .dek{font-size:18px;line-height:1.6;color:var(--c-ink-2);margin:0;max-width:60ch}
.cta-band .actions{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:6px}
.cta-band.on-photo{background:var(--c-deep);color:#fff;padding:88px 0}
.cta-band.on-photo .cta-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.32}
.cta-band.on-photo .wrap{position:relative}
.cta-band.on-photo .dek{color:rgba(255,255,255,.82)}
.cta-band.on-photo h2{color:#fff}
/* Custom forms (D113): plain options with round or square marks, never pills; a select and a date in the field's underline style. */
.cf-block .lead-form{max-width:640px}
/* The form section with words (D117 design pass): the statement beside the form on wide screens, as on Let's talk; the send button
   runs the full width of the form. */
.cf-split{display:grid;gap:28px}
.cf-say .eyebrow{margin-bottom:12px}
.cf-block .cf-say h2{margin-bottom:14px}
.cf-say .answer{margin:0;max-width:46ch;font-size:17px;line-height:1.7;color:var(--c-ink-2)}
.cf-panel .lead-form button[type="submit"]{justify-self:stretch;min-height:56px;margin-top:4px}
@media (min-width:1024px){.cf-split{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:72px;align-items:start}.cf-say{position:sticky;top:140px;padding-top:8px}.cf-split .cf-panel .lead-form{max-width:none}}
.cf-who{margin:0;font-size:15px;color:var(--c-ink-2)}
.cf-group{border:0;margin:0;padding:0;min-width:0}
.cf-label{display:block;font-size:13px;letter-spacing:.02em;color:var(--c-ink-2);margin:0 0 10px;padding:0}
.cf-req{color:var(--c-ink-2)}
.cf-opts{display:grid;gap:10px}
.cf-opt{display:flex;align-items:center;gap:12px;font-size:17px;line-height:1.4;cursor:pointer;min-height:32px}
.cf-opt input{width:20px;height:20px;margin:0;accent-color:var(--c-cta);flex:none}
.cf-select select,.cf-date input{display:block;width:100%;margin:0;padding:8px 0 12px;border:0;border-bottom:1px solid var(--c-line);border-radius:0;background:transparent;color:var(--c-ink);font:400 17px/1.45 var(--font-body);outline:none}
.cf-select select:focus,.cf-date input:focus{border-bottom-color:var(--c-cta)}
.cf-missing{margin:0 0 24px;padding-left:20px;font-size:17px}
@media (min-width:768px){.cf-opts{grid-template-columns:1fr 1fr}}

/* Section backgrounds (D110). Light, Mid, and Dark are the theme's surface, tint, and deep, so they follow the site's dark mode.
   A custom color sets --band inline; on-dark turns the words white, on-light turns them black where the theme is dark. The
   sections inside drop their own background; two bands of one color in a row share a gap (sbg--join, set by joinBands). */
.sbg{background:var(--band);color:var(--c-ink)}
.sbg--light{--band:var(--c-surface)}
.sbg--mid{--band:var(--c-tint)}
.sbg--dark{--band:var(--c-deep)}
.sbg>section,.sbg>section.block.alt,.sbg>section.block.tint{background:transparent}
.sbg.sbg--join>section{padding-top:0}
.sbg.on-dark{--c-ink:#fff;--c-ink-2:rgba(255,255,255,.78);--c-line:rgba(255,255,255,.28);--c-link:#fff;--c-brand:var(--c-cta);--c-brand-ink:var(--c-cta-ink);--c-surface:rgba(255,255,255,.08);--c-muted:rgba(255,255,255,.07);--c-tint:rgba(255,255,255,.07);--c-chip:rgba(255,255,255,.14)}
/* A custom color can sit near the middle, where white and black both only just pass; faded secondary words would not. On a
   custom band the secondary words take the main word color (the rule after the dark-theme ones below wins over them). */
[data-theme="dark"] .sbg.on-light{--c-ink:rgba(0,0,0,.88);--c-ink-2:rgba(0,0,0,.68);--c-line:rgba(0,0,0,.16);--c-link:rgba(0,0,0,.88);--c-surface:rgba(255,255,255,.72);--c-muted:rgba(0,0,0,.05);--c-tint:rgba(0,0,0,.05);--c-chip:rgba(0,0,0,.08)}
@media (prefers-color-scheme:dark){[data-theme="auto"] .sbg.on-light{--c-ink:rgba(0,0,0,.88);--c-ink-2:rgba(0,0,0,.68);--c-line:rgba(0,0,0,.16);--c-link:rgba(0,0,0,.88);--c-surface:rgba(255,255,255,.72);--c-muted:rgba(0,0,0,.05);--c-tint:rgba(0,0,0,.05);--c-chip:rgba(0,0,0,.08)}}
.sbg[data-band^="#"],[data-theme] .sbg.on-light[data-band^="#"]{--c-ink-2:var(--c-ink)}

/* Rows that swipe (D111, D117 design pass): blog posts and the video carousel. The track runs past the page column to the window
   edge, so the next card peeks in; the column's left edge stays the snap line. Arrows beside the heading on wider screens, the
   reviews slider's dots under the row on phones. */
section.hrow{overflow-x:clip}
.hrow-side{display:flex;align-items:center;gap:20px}
.hrow-all{display:inline-flex;align-items:center;gap:6px;min-height:44px;font-family:var(--font-display);font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--c-ink);text-decoration:none}
.hrow-all svg{transition:transform 220ms var(--ease)}
.hrow-all:hover{text-decoration:none;color:var(--c-link)}
.hrow-all:hover svg{transform:translateX(3px)}
.hrow-nav{display:none;gap:10px}
.hrow-btn{display:grid;place-items:center;width:48px;height:48px;padding:0;border-radius:50%;border:1px solid var(--c-line);background:var(--c-surface);color:var(--c-ink);cursor:pointer;box-shadow:0 1px 2px color-mix(in srgb,var(--c-deep) 8%,transparent);transition:background 200ms var(--ease),color 200ms var(--ease),border-color 200ms var(--ease),opacity 200ms var(--ease),transform 120ms var(--ease)}
.hrow-btn:hover:not(:disabled){background:var(--c-ink);border-color:var(--c-ink);color:var(--band,var(--c-bg))}
.hrow-btn:active:not(:disabled){transform:scale(.94)}
.hrow-btn:disabled{opacity:.3;cursor:default;box-shadow:none}
.hrow--still .hrow-nav,.hrow--still .hrow-dots{display:none}
.hrow-track{display:grid;grid-auto-flow:column;grid-auto-columns:82%;gap:16px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;
  margin-inline:calc(50% - 50vw);padding:6px calc(50vw - 50%) 20px;scroll-padding-inline:calc((100vw - min(100vw,1168px))/2 + var(--gut,20px))}
section.hrow{--gut:20px}
@media (min-width:768px){section.hrow{--gut:40px}}
@media (min-width:1200px){section.hrow{--gut:56px}}
.hrow-track::-webkit-scrollbar{display:none}
.hrow-track>*{scroll-snap-align:start;min-width:0}
.hrow-track:focus-visible{outline:none}
.hrow-track:focus-visible>*:first-child{outline:2px solid var(--c-accent);outline-offset:4px;border-radius:var(--r-panel)}
.hrow-dots{display:flex;justify-content:center;gap:2px;margin-top:4px}
.hrow-dots button{display:grid;place-items:center;width:24px;height:28px;padding:0;border:0;background:none;cursor:pointer}
.hrow-dots button::before{content:"";width:8px;height:8px;border-radius:999px;background:color-mix(in srgb,var(--c-ink) 22%,transparent);transition:width 240ms var(--ease),background 240ms var(--ease)}
.hrow-dots button[aria-current="true"]{width:36px}
.hrow-dots button[aria-current="true"]::before{width:26px;background:var(--c-ink)}
.hrow-dots button:focus-visible{outline:2px solid var(--c-accent);outline-offset:-2px;border-radius:999px}
@media (min-width:768px){.hrow-nav{display:flex}.hrow-dots{display:none}.hrow-track{grid-auto-columns:calc((100% - 24px)/2);gap:24px}}
@media (min-width:1200px){.hrow-track{grid-auto-columns:calc((100% - 56px)/3);gap:28px}}

/* Blog post cards: a 3:2 photo that lifts and slowly zooms, the category as a small eyebrow, the title clamped to three lines with
   an underline that draws in, the date and a round arrow pinned to the bottom so a row lines up. */
.pcard a{display:grid;grid-template-rows:auto 1fr;height:100%;color:inherit;text-decoration:none}
.pcard a:hover{text-decoration:none}
.pcard-photo{position:relative;aspect-ratio:3/2;border-radius:var(--r-panel);overflow:hidden;background:var(--c-muted);box-shadow:0 1px 2px color-mix(in srgb,var(--c-deep) 8%,transparent);transition:transform 420ms var(--ease),box-shadow 420ms var(--ease)}
.pcard-photo picture{display:block;height:100%}
.pcard-photo img{width:100%;height:100%;object-fit:cover;transition:transform 900ms var(--ease)}
.pcard-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,color-mix(in srgb,var(--c-deep) 30%,transparent));opacity:0;transition:opacity 420ms var(--ease);pointer-events:none}
.pcard-ph{position:absolute;inset:0;background:radial-gradient(120% 90% at 85% 10%,color-mix(in srgb,var(--c-accent) 45%,transparent),transparent 60%),linear-gradient(150deg,var(--c-deep),var(--c-brand))}
.pcard a:hover .pcard-photo{transform:translateY(-4px);box-shadow:0 22px 44px -18px color-mix(in srgb,var(--c-deep) 55%,transparent)}
.pcard a:hover .pcard-photo img{transform:scale(1.06)}
.pcard a:hover .pcard-photo::after{opacity:1}
.pcard-body{display:grid;grid-template-rows:auto auto 1fr;gap:10px;padding:20px 2px 0}
.pcard-cat{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-display);font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--c-link)}
.pcard-cat::before{content:"";width:16px;height:2px;background:var(--c-accent)}
.pcard h3{margin:0;font-size:19px;font-weight:700;line-height:1.3;letter-spacing:-.01em;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.pcard h3 span{background:linear-gradient(currentColor,currentColor) 0 100%/0 1.5px no-repeat;transition:background-size 480ms var(--ease)}
.pcard a:hover h3 span{background-size:100% 1.5px}
.pcard-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;align-self:end;padding-top:6px}
.pcard time{font-size:13px;color:var(--c-ink-2)}
.pcard-go{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;border:1px solid var(--c-line);color:var(--c-ink);flex:none;transition:background 260ms var(--ease),border-color 260ms var(--ease),color 260ms var(--ease)}
.pcard-go svg{transition:transform 260ms var(--ease)}
.pcard a:hover .pcard-go{background:var(--c-ink);border-color:var(--c-ink);color:var(--band,var(--c-bg))}
.pcard a:hover .pcard-go svg{transform:translateX(2px)}
.pcard a:focus-visible{outline:none}
.pcard a:focus-visible .pcard-photo{outline:3px solid var(--c-accent);outline-offset:3px}
@media (min-width:1200px){.pcard h3{font-size:20px}}

/* Videos (D111, D117 design pass): 16:9 pictures under a soft scrim, one glass play button over the whole picture that fills white
   on hover, the title under the picture in a grid and on it in the carousel. A Vimeo video shows a play card in the theme's colors. */
.vid-grid{display:grid;gap:36px 24px}
@media (min-width:768px){.vid-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.vid-grid.one{grid-template-columns:minmax(0,1fr);max-width:880px}}
@media (min-width:1200px){.vid-grid:not(.one):not(.two){grid-template-columns:repeat(3,minmax(0,1fr))}.vid-grid{gap:44px 28px}}
.vid{margin:0;display:grid;gap:16px;align-content:start;min-width:0}
.vid .vid-poster{border-radius:var(--r-panel);box-shadow:0 1px 2px color-mix(in srgb,var(--c-deep) 10%,transparent);transition:transform 420ms var(--ease),box-shadow 420ms var(--ease)}
.vid .vid-poster::after{background:linear-gradient(180deg,color-mix(in srgb,var(--c-deep) 18%,transparent) 0%,transparent 35%,transparent 55%,color-mix(in srgb,var(--c-deep) 72%,transparent) 100%);transition:opacity 420ms var(--ease)}
.vid .vid-poster img{transition:transform 900ms var(--ease)}
.vid .vid-poster:hover{transform:translateY(-4px);box-shadow:0 24px 48px -20px color-mix(in srgb,var(--c-deep) 60%,transparent)}
.vid .vid-poster:hover img{transform:scale(1.05)}
.vid .vid-poster.playing{transform:none}
.vid .poster .play{left:0;top:0;width:100%;height:100%;margin:0;border-radius:0;background:transparent;box-shadow:none;color:#fff;z-index:2}
.vid .poster .play:hover{transform:none}
.vid .poster .play:focus-visible{outline:3px solid var(--c-accent);outline-offset:-3px;border-radius:var(--r-panel)}
.play-dot{display:grid;place-items:center;width:68px;height:68px;border-radius:50%;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.6);color:#fff;-webkit-backdrop-filter:blur(10px) saturate(1.4);backdrop-filter:blur(10px) saturate(1.4);box-shadow:0 10px 30px rgba(0,0,0,.22);transition:transform 320ms var(--ease),background 320ms var(--ease),color 320ms var(--ease),border-color 320ms var(--ease)}
.play-dot svg{width:24px;height:24px;margin-left:3px}
.vid .poster .play:hover .play-dot,.vid .poster .play:focus-visible .play-dot{background:#fff;border-color:#fff;color:var(--c-deep);transform:scale(1.08)}
.vid .poster.vimeo{background:radial-gradient(90% 120% at 90% 0%,color-mix(in srgb,var(--c-accent) 50%,transparent),transparent 60%),linear-gradient(150deg,var(--c-deep),var(--c-brand))}
.vid-over{position:absolute;left:20px;right:20px;bottom:18px;z-index:1;color:#fff;font-family:var(--font-display);font-size:18px;font-weight:700;line-height:1.25;letter-spacing:-.01em;text-wrap:balance;text-shadow:0 1px 14px rgba(0,0,0,.35);pointer-events:none;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
@media (max-width:767px){.play-dot{width:56px;height:56px}.play-dot svg{width:20px;height:20px}.vid-over{left:16px;right:16px;bottom:14px;font-size:16px}}
.vid figcaption{display:grid;gap:6px}
.vid figcaption b{font-family:var(--font-display);font-size:18px;font-weight:700;line-height:1.3;letter-spacing:-.01em;color:var(--c-ink)}
.vid figcaption span{font-size:14px;line-height:1.55;color:var(--c-ink-2)}

/* Photo gallery (D111, D117 design pass): an even grid, Featured (the first photo large, the rest beside it), or rows that keep each
   photo's shape. Tight gaps; on hover a photo zooms slowly and an expand mark shows; captions sit on the photo. */
.gal-list{list-style:none;margin:0;padding:0}
.gal-list li{min-width:0}
.gal--grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
@media (min-width:768px){.gal--grid{grid-template-columns:repeat(3,1fr);gap:10px}}
@media (min-width:1200px){.gal--grid{grid-template-columns:repeat(4,1fr)}}
.gal--grid .gal-open{aspect-ratio:4/3}
.gal--featured{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.gal--featured li:first-child{grid-column:1/-1}
.gal--featured .gal-open{aspect-ratio:1}
.gal--featured li:first-child .gal-open{aspect-ratio:3/2}
@media (max-width:767px){.gal--featured:is([data-n="2"],[data-n="4"],[data-n="6"],[data-n="8"]) li:last-child{grid-column:1/-1}.gal--featured:is([data-n="2"],[data-n="4"],[data-n="6"],[data-n="8"]) li:last-child .gal-open{aspect-ratio:2/1}}
@media (min-width:768px){
  .gal--featured{grid-template-columns:repeat(4,1fr);grid-auto-rows:clamp(150px,17vw,240px);gap:10px}
  .gal--featured .gal-open,.gal--featured li:first-child .gal-open{aspect-ratio:auto;height:100%}
  .gal--featured li:first-child{grid-column:span 2;grid-row:span 2}
  .gal--featured[data-n="1"] li:first-child{grid-column:1/-1}
  .gal--featured[data-n="2"] li:nth-child(2),.gal--featured[data-n="3"] li:not(:first-child),.gal--featured[data-n="4"] li:nth-child(2){grid-column:span 2}
  .gal--featured[data-n="2"] li:nth-child(2){grid-row:span 2}
  .gal--featured[data-n="6"] li:nth-child(6){grid-column:1/-1}
  .gal--featured[data-n="7"] li:nth-child(n+6),.gal--featured[data-n="8"] li:nth-child(6){grid-column:span 2}
}
.gal--rows{display:flex;flex-wrap:wrap;gap:8px}
.gal--rows::after{content:"";flex-grow:999}
.gal--rows li{flex:1 1 auto;height:180px;min-width:120px}
@media (min-width:768px){.gal--rows{gap:10px}.gal--rows li{height:260px}}
.gal--rows .gal-open{height:100%}
.gal--rows .gal-open img{width:auto;min-width:100%}
.gal-open{position:relative;display:block;width:100%;height:100%;padding:0;border:0;border-radius:var(--r-control);overflow:hidden;background:var(--c-muted);cursor:zoom-in;isolation:isolate}
.gal-open img{width:100%;height:100%;object-fit:cover;transition:transform 900ms var(--ease),filter 420ms var(--ease)}
.gal-open::after{content:"";position:absolute;inset:0;background:color-mix(in srgb,var(--c-deep) 14%,transparent);opacity:0;transition:opacity 420ms var(--ease);pointer-events:none}
.gal-open:hover img{transform:scale(1.05)}
.gal-open:hover::after{opacity:1}
.gal-zoom{position:absolute;top:12px;right:12px;z-index:1;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.88);color:var(--c-deep);opacity:0;transform:scale(.85);transition:opacity 260ms var(--ease),transform 260ms var(--ease);box-shadow:0 4px 14px rgba(0,0,0,.18)}
.gal-open:hover .gal-zoom,.gal-open:focus-visible .gal-zoom{opacity:1;transform:none}
.gal-open:focus-visible{outline:3px solid var(--c-accent);outline-offset:2px}
.gal-cap{position:absolute;left:0;right:0;bottom:0;z-index:1;padding:36px 14px 12px;background:linear-gradient(180deg,transparent,rgba(0,0,0,.62));color:#fff;font-size:13px;line-height:1.4;text-align:left;text-wrap:balance}
/* The viewer: a dark stage, a top bar with the count and Close, glass arrows, and each photo fading in as it loads. */
dialog.gal-box{width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:rgba(8,10,12,.94);color:#fff;overflow:hidden}
dialog.gal-box[open]{animation:gal-in 260ms var(--ease)}
dialog.gal-box::backdrop{background:rgba(0,0,0,.86)}
@keyframes gal-in{from{opacity:0}}
html.gal-lock{overflow:hidden}
.gal-bar{position:absolute;top:0;left:0;right:0;z-index:2;display:flex;align-items:center;justify-content:space-between;padding:10px 10px 10px 22px}
.gal-count{font-family:var(--font-display);font-size:12px;font-weight:700;letter-spacing:.16em;color:rgba(255,255,255,.72);font-variant-numeric:tabular-nums}
.gal-box figure{position:absolute;inset:64px 12px 56px;margin:0;display:grid;grid-template-rows:minmax(0,1fr) auto;gap:14px;place-items:center}
.gal-box img{max-width:100%;max-height:100%;object-fit:contain;border-radius:var(--r-media);opacity:0;transform:scale(.985);transition:opacity 320ms var(--ease),transform 420ms var(--ease);box-shadow:0 30px 80px rgba(0,0,0,.45)}
.gal-box img.in{opacity:1;transform:none}
.gal-box figcaption{font-size:15px;line-height:1.5;color:rgba(255,255,255,.86);text-align:center;max-width:70ch;text-wrap:balance}
.gal-x,.gal-prev,.gal-next{display:grid;place-items:center;width:48px;height:48px;padding:0;border-radius:50%;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.08);color:#fff;cursor:pointer;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:background 200ms var(--ease),color 200ms var(--ease),transform 120ms var(--ease)}
.gal-prev,.gal-next{position:absolute;z-index:2;bottom:14px}
.gal-prev{left:14px}
.gal-next{right:14px}
.gal-x:hover,.gal-prev:hover,.gal-next:hover{background:#fff;color:#111}
.gal-prev:active,.gal-next:active{transform:scale(.94)}
.gal-x:focus-visible,.gal-prev:focus-visible,.gal-next:focus-visible{outline:2px solid #fff;outline-offset:2px}
@media (min-width:768px){.gal-box figure{inset:72px 96px 40px}.gal-prev,.gal-next{top:50%;bottom:auto;margin-top:-28px;width:56px;height:56px}.gal-prev{left:24px}.gal-next{right:24px}.gal-bar{padding:16px 18px 16px 32px}}

/* Link list (D111, D117 design pass): link-in-bio cards, one column, centered. A photo or an icon tile on the left, a round arrow that
   nudges on hover, a soft lift. On a dark band the cards turn to glass (the band's surface is a light veil). */
.llist .ll,.llist .sec-head{max-width:640px;margin-inline:auto}
.llist .sec-head{justify-content:center;text-align:center}
.llist .sec-head .eyebrow{justify-content:center}
.ll{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.ll-btn{display:flex;align-items:center;gap:16px;min-height:76px;padding:10px 14px 10px 10px;border-radius:18px;border:1px solid var(--c-line);background:var(--c-surface);color:var(--c-ink);text-decoration:none;box-shadow:0 1px 2px color-mix(in srgb,var(--c-deep) 6%,transparent),0 10px 26px -16px color-mix(in srgb,var(--c-deep) 28%,transparent);transition:transform 260ms var(--ease),box-shadow 260ms var(--ease),border-color 260ms var(--ease)}
.ll-btn:hover{text-decoration:none;transform:translateY(-2px);border-color:color-mix(in srgb,var(--c-ink) 24%,transparent);box-shadow:0 2px 4px color-mix(in srgb,var(--c-deep) 8%,transparent),0 20px 40px -18px color-mix(in srgb,var(--c-deep) 42%,transparent)}
.ll-btn:active{transform:translateY(0) scale(.99)}
.ll-btn:focus-visible{outline:3px solid var(--c-accent);outline-offset:3px}
.ll-img{width:56px;height:56px;border-radius:12px;object-fit:cover;flex:none}
.ll-icon{display:grid;place-items:center;background:var(--c-tint);color:var(--c-link)}
.ll-text{flex:1;display:grid;gap:3px;min-width:0}
.ll-text b{font-family:var(--font-display);font-size:16px;font-weight:700;line-height:1.3;letter-spacing:-.005em}
.ll-text small{font-size:13px;line-height:1.4;color:var(--c-ink-2)}
.ll-go{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--c-brand);color:var(--c-brand-ink)}
.ll-go svg{transition:transform 260ms var(--ease)}
.ll-btn:hover .ll-go svg{transform:translateX(3px)}
.ll-btn[target="_blank"]:hover .ll-go svg{transform:translate(2px,-2px)}
.sbg.on-dark .ll-btn{-webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 14px 34px -18px rgba(0,0,0,.6)}
.sbg.on-dark .ll-icon{background:rgba(255,255,255,.12);color:#fff}
@media (min-width:768px){.ll-btn{min-height:84px;padding:12px 16px 12px 12px}.ll-img{width:60px;height:60px}.ll-text b{font-size:17px}}

/* Everything that moves on hover holds still for reduced motion. */
@media (prefers-reduced-motion:reduce){
  .hrow-track{scroll-behavior:auto}
  .pcard-photo,.pcard-photo img,.vid .vid-poster,.vid .vid-poster img,.gal-open img,.gal-box img,.ll-btn,.ll-go svg,.pcard-go svg,.hrow-all svg,.play-dot,.gal-zoom{transition:none !important;transform:none !important}
  dialog.gal-box[open]{animation:none}
  dialog.sheet[open]{animation:none}
  .ht-card,.tm-card,.ht-card:hover,.tm-card:hover{transition:none;transform:none}
}

/* Custom code (D112): the sandboxed frame, sized by the height its content reports. */
.ccode-frame{display:block;width:100%;height:160px;border:0}

/* Blog layout (D118). The post and the blog index run wider than the page column; the reading text keeps a measure near 70
   characters, and the rails use the rest of a wide screen. */
.wrap.wide{max-width:1600px}
/* A small photo behind a hero on purpose: blurred and darkened over the deep color, never a soft picture stretched to the window. */
.hero.blurred{overflow:hidden;background:radial-gradient(90% 120% at 88% 0%,color-mix(in srgb,var(--c-accent) 24%,transparent),transparent 62%),var(--c-deep)}
.hero .hbg.hblur{inset:-72px;width:calc(100% + 144px);height:calc(100% + 144px);filter:blur(40px) saturate(1.2);opacity:.6}
.hero.blurred::before{background:linear-gradient(90deg,color-mix(in srgb,var(--c-deep) 86%,transparent) 0%,color-mix(in srgb,var(--c-deep) 58%,transparent) 55%,color-mix(in srgb,var(--c-deep) 40%,transparent) 100%),linear-gradient(180deg,color-mix(in srgb,var(--c-deep) 55%,transparent) 0%,transparent 34%,transparent 66%,color-mix(in srgb,var(--c-deep) 75%,transparent) 100%)}

/* The post's title band: words on the left, the post's own photo sharp in a framed card at no more than its natural size. */
.ph-in{display:grid;gap:28px;align-items:center}
.ph-text{min-width:0}
.hero.post-head h1{font-size:clamp(32px,3.8vw,60px);line-height:1.03;letter-spacing:-.032em;margin:16px 0 14px;max-width:22ch}
.hero.post-head .ph-dek{font-size:17px;line-height:1.55;max-width:58ch;margin:0 0 22px;color:rgba(255,255,255,.86);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.post-head .post-meta{display:flex;align-items:center;gap:12px;margin:0;font-size:14px;color:rgba(255,255,255,.82)}
.post-head .post-meta b{color:#fff}
.pm-photo{flex:none;width:40px;height:40px;border-radius:50%;overflow:hidden;background:#fff;box-shadow:0 0 0 2px rgba(255,255,255,.35)}
.pm-photo img{width:100%;height:100%;object-fit:cover;object-position:center top}
.ph-photo{position:relative;margin:0;width:100%;max-width:520px;aspect-ratio:3/2;border-radius:var(--r-panel);overflow:hidden;background:rgba(255,255,255,.06);box-shadow:0 32px 64px -28px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.14)}
.ph-photo img{width:100%;height:100%;object-fit:cover}
.ph-watch{position:absolute;left:14px;bottom:14px;display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 16px 0 12px;border-radius:999px;background:rgba(255,255,255,.95);color:var(--c-deep);font:700 11px var(--font-display);letter-spacing:.1em;text-transform:uppercase;text-decoration:none;box-shadow:0 6px 18px rgba(0,0,0,.25);text-shadow:none}
.ph-watch:hover{background:#fff;text-decoration:none}
@media (min-width:768px){.hero.post-head .wrap{padding-top:124px;padding-bottom:52px}.hero.post-head .ph-dek{font-size:18px}}
@media (min-width:1024px){.ph-in{grid-template-columns:minmax(0,1fr) minmax(0,520px);gap:clamp(48px,5vw,96px)}.ph-photo{justify-self:end}}
@media (min-width:1200px){.hero.post-head .wrap{padding-top:140px;padding-bottom:72px}}

/* The body: one column under 1024 (the list a card under the title, the author and share after the post), the text with a right
   rail from 1024, and three columns from 1400 with the list on the left. Rails stick under the header. */
.post-grid{display:grid;grid-template-columns:minmax(0,1fr);align-items:start;padding-top:clamp(28px,4vw,56px);padding-bottom:clamp(32px,4vw,56px)}
.post-grid>*{width:100%;max-width:44rem;margin-inline:auto;min-width:0}
.post-toc{order:0;margin-bottom:28px}
.post-main{order:1}
.post-side{order:2;display:grid;gap:20px;align-content:start}
.post-grid .post-body{padding-top:0}
.post-body>p:first-child{font-size:1.1em;line-height:1.65;color:var(--c-ink)}
.post-body h2[id]{scroll-margin-top:96px}
@media (min-width:1200px){.post-body{font-size:19px}}

.post-toc details{border:1px solid var(--c-line);border-radius:var(--r-panel);background:var(--c-surface)}
.post-toc summary{display:flex;align-items:center;gap:12px;min-height:56px;padding:0 20px;cursor:pointer;list-style:none}
.post-toc summary::-webkit-details-marker{display:none}
.post-toc summary::after{content:"";flex:none;width:8px;height:8px;border-right:2px solid var(--c-ink-2);border-bottom:2px solid var(--c-ink-2);transform:translateY(-2px) rotate(45deg);transition:transform 200ms var(--ease)}
.post-toc details[open] summary::after{transform:translateY(2px) rotate(225deg)}
.toc-n{margin-left:auto;font-size:13px;color:var(--c-ink-2)}
.post-toc ol{list-style:none;margin:0;padding:0 20px 14px;counter-reset:toc}
.post-toc li{counter-increment:toc}
.post-toc li+li{border-top:1px solid var(--c-line)}
.post-toc a{display:grid;grid-template-columns:30px minmax(0,1fr);padding:11px 0;color:var(--c-ink);font-size:15px;line-height:1.4;font-weight:500;text-decoration:none;transition:color 140ms var(--ease)}
.post-toc a::before{content:counter(toc,decimal-leading-zero);font:700 12px/1.75 var(--font-display);letter-spacing:.04em;color:var(--c-ink-2)}
.post-toc a:hover{color:var(--c-link);text-decoration:none}
.post-toc a[aria-current]{color:var(--c-ink);font-weight:650}
.post-toc a[aria-current]::before{color:var(--c-accent)}

/* Written by: the author's card, with Call and Text when the author is the site's agent. */
.post-author{display:flex;flex-wrap:wrap;align-items:center;gap:16px;padding:20px;border:1px solid var(--c-line);border-radius:var(--r-panel);background:var(--c-surface)}
.post-author .pa-photo{flex:none;width:60px;height:60px;border-radius:50%;overflow:hidden;background:var(--c-muted)}
.post-author .pa-photo img{width:100%;height:100%;object-fit:cover;object-position:center top}
.pa-who{flex:1;display:grid;gap:3px;min-width:0}
.pa-label{font-family:var(--font-display);font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--c-ink-2)}
.pa-who b{font-family:var(--font-display);font-size:18px;line-height:1.2;letter-spacing:-.01em}
.pa-phone{font-size:14px;color:var(--c-ink-2);font-variant-numeric:tabular-nums}
.pa-acts{flex:1 1 100%;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.pa-acts .btn{min-height:46px;padding:0 14px}

/* A short listing alerts prompt in the rail; under 1024 the alerts band right after the post does this job. */
.post-ask{display:none}
.post-ask .eyebrow{color:rgba(255,255,255,.78)}
.post-ask b{font-family:var(--font-display);font-size:20px;line-height:1.2;letter-spacing:-.015em;text-wrap:balance}
.post-ask p{margin:0;font-size:14px;line-height:1.5;color:rgba(255,255,255,.74)}
.post-ask .btn{margin-top:8px;min-height:46px;background:var(--c-cta);border-color:var(--c-cta);color:var(--c-cta-ink)}
.post-ask .pq-alt{justify-self:center;font-size:13px;font-weight:600;color:rgba(255,255,255,.82)}

.post-share{display:grid;gap:10px}
.ps-row{display:flex;flex-wrap:wrap;gap:8px}
.ps-row a,.ps-row button{position:relative;display:grid;place-items:center;width:44px;height:44px;padding:0;border-radius:50%;border:1px solid var(--c-line);background:var(--c-surface);color:var(--c-ink);cursor:pointer;transition:background 160ms var(--ease),color 160ms var(--ease),border-color 160ms var(--ease)}
.ps-row a:hover,.ps-row button:hover{background:var(--c-ink);border-color:var(--c-ink);color:var(--c-bg);text-decoration:none}
.ps-row button span{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);padding:4px 9px;border-radius:var(--r-chip);background:var(--c-ink);color:var(--c-bg);font-size:12px;font-weight:600;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity 160ms var(--ease)}
.ps-row button.done span{opacity:1}

@media (min-width:1024px){
  .post-grid{grid-template-columns:minmax(0,44rem) minmax(260px,320px);grid-template-rows:auto 1fr;justify-content:center;column-gap:56px}
  .post-grid>*{max-width:none;margin:0}
  .post-main{grid-column:1;grid-row:1/span 2}
  .post-side{grid-column:2;grid-row:1}
  .post-toc{grid-column:2;grid-row:2;position:sticky;top:96px;margin-top:36px;max-height:calc(100vh - 120px);overflow:auto;scrollbar-width:thin}
  .post-grid:not(.has-toc) .post-side{grid-row:1/span 2;position:sticky;top:96px}
  .post-toc details{border:0;border-radius:0;background:none}
  .post-toc summary{min-height:0;padding:0 0 14px;cursor:default}
  .post-toc summary::after,.toc-n{display:none}
  .post-toc ol{padding:0;border-left:1px solid var(--c-line)}
  .post-toc li+li{border-top:0}
  .post-toc a{display:block;margin-left:-1px;padding:8px 0 8px 18px;border-left:2px solid transparent;font-size:14px;color:var(--c-ink-2)}
  .post-toc a::before{display:none}
  .post-toc a:hover{color:var(--c-ink)}
  .post-toc a[aria-current]{color:var(--c-ink);border-left-color:var(--c-accent)}
  .post-ask{display:grid;gap:10px;padding:24px;border-radius:var(--r-panel);background:var(--c-deep);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
  /* Videos and the For sale now row reach a little past the text, into the gutter. */
  .post-body>.poster,.post-body>.video-frame,.post-body>figure,.post-main .blive{margin-inline:-32px}
}
@media (min-width:1400px){
  .post-grid,.post-grid.has-toc{grid-template-columns:minmax(200px,1fr) minmax(0,44rem) minmax(260px,1fr);grid-template-rows:auto;column-gap:clamp(56px,4.5vw,88px)}
  .post-main{grid-column:2;grid-row:1}
  .post-toc{grid-column:1;grid-row:1;justify-self:end;max-width:280px;margin-top:4px}
  .post-side,.post-grid:not(.has-toc) .post-side{grid-column:3;grid-row:1;justify-self:start;max-width:340px;position:sticky;top:96px}
  .post-body>.poster,.post-body>.video-frame,.post-body>figure,.post-main .blive{margin-inline:-40px}
}

/* The blog index: four cards across on wide screens (twelve a page fills three rows). */
@media (min-width:1500px){.blog-list .bgrid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.blog-head .wrap{padding-bottom:44px}
@media (min-width:1200px){.blog-head .wrap{padding-bottom:60px}}
/* The bands after a post carry the post's small photo; blurred like the title band so it never shows soft and stretched. */
article.post~.photo-band .bgimg{filter:blur(32px);transform:scale(1.12)}
/* Three narrow cards in a post: the days on market always sits under the price, so one long price never sets its card out of line. */
@media (min-width:768px){.blive .lprice{flex-direction:column;align-items:flex-start;gap:2px}}

/* The YouTube channel block (D119; one card since Truman's note on 2026-10-02): photo, name and counts, and Subscribe together. */
.ytc{container-type:inline-size;margin-top:32px}
.ytc--under{margin-top:18px}
.ytc-row{display:inline-flex;align-items:center;gap:18px;max-width:100%;padding:10px 10px 10px 12px;border-radius:999px;border:1px solid color-mix(in srgb,var(--c-ink) 12%,transparent);background:color-mix(in srgb,var(--c-surface) 70%,transparent);box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 18px 36px -28px rgba(0,0,0,.55);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.ytc-id{flex:0 1 auto;display:flex;align-items:center;gap:12px;min-width:0;color:var(--c-ink);text-decoration:none}
.ytc-id:hover{text-decoration:none}
.ytc-av{flex:none;width:44px;height:44px;border-radius:50%;overflow:hidden;background:var(--c-chip);box-shadow:0 0 0 1px color-mix(in srgb,var(--c-ink) 12%,transparent)}
.ytc-av img{width:100%;height:100%;object-fit:cover}
.ytc-mono{display:grid;place-items:center;width:100%;height:100%;font-family:var(--font-display);font-size:18px;font-weight:700;color:var(--c-ink)}
.ytc-who{display:grid;gap:2px;min-width:0;padding-right:4px}
.ytc-name{font-family:var(--font-display);font-size:15px;font-weight:700;line-height:1.25;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-decoration:underline transparent 1px;text-underline-offset:3px;transition:text-decoration-color 200ms var(--ease)}
.ytc-id:hover .ytc-name{text-decoration-color:currentColor}
.ytc-meta{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12.5px;line-height:1.35;color:var(--c-ink-2);font-variant-numeric:tabular-nums}
.ytc-sub{position:relative;isolation:isolate;overflow:hidden;flex:none;display:inline-flex;align-items:center;justify-content:center;gap:9px;height:44px;padding:0 16px 0 14px;border-radius:999px;background:var(--c-ink);color:var(--c-surface);font-size:14px;font-weight:600;letter-spacing:.01em;text-decoration:none;transition:box-shadow 240ms var(--ease),transform 240ms var(--ease)}
.ytc-sub::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(105deg,transparent 30%,color-mix(in srgb,var(--c-surface) 18%,transparent) 50%,transparent 70%);transform:translateX(-110%);transition:transform 750ms var(--ease)}
.ytc-sub:hover{text-decoration:none;transform:translateY(-1px);box-shadow:0 12px 24px -14px rgba(0,0,0,.55)}
.ytc-sub:hover::after{transform:translateX(110%)}
.ytc-icon{flex:none;display:block;width:26px;height:18px}
.ytc-arrow{flex:none;opacity:.65;transition:transform 240ms var(--ease),opacity 240ms var(--ease)}
.ytc-sub:hover .ytc-arrow{opacity:1;transform:translateX(3px)}
@media (min-width:768px){.vid-grid.one+.ytc{max-width:880px}}
.ytc--compact{margin-top:16px}
.ytc--compact .ytc-row{gap:12px;padding:7px 7px 7px 8px}
.ytc--compact .ytc-av{width:34px;height:34px}
.ytc--compact .ytc-mono{font-size:14px}
.ytc--compact .ytc-name{font-size:13.5px}
.ytc--compact .ytc-sub{height:36px;padding:0 12px 0 11px;font-size:13px}
@container (max-width:380px){.ytc-row{gap:10px}.ytc-arrow{display:none}.ytc-sub{padding:0 13px 0 11px}}
@media (prefers-reduced-motion:reduce){.ytc-sub,.ytc-sub::after,.ytc-arrow,.ytc-name{transition:none !important}.ytc-sub:hover,.ytc-sub:hover .ytc-arrow{transform:none}.ytc-sub::after{display:none}}

/* Communities menu (lib/menu.ts). Desktop: the nav item opens a wide panel under the header; communities with neighborhoods
   on the left, the one under the pointer or focus on the right. Phone: nested sections in the menu sheet. Theme tokens only. */
.site-header nav.main{align-items:center}
.dd-btn{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0;border:0;background:none;font-family:inherit;cursor:pointer}
.dd-caret{transition:transform 200ms var(--ease);opacity:.8}
.nav-dd.open .dd-caret{transform:rotate(180deg)}
.nav-panel{position:absolute;top:calc(100% - 6px);left:50%;width:min(1120px,calc(100vw - 48px));z-index:35;visibility:hidden;opacity:0;transform:translate(-50%,-6px);transition:opacity 180ms var(--ease),transform 220ms var(--ease),visibility 0s linear 220ms}
.nav-panel::before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px}
.nav-dd.open .nav-panel{visibility:visible;opacity:1;transform:translate(-50%,0);transition:opacity 180ms var(--ease),transform 220ms var(--ease),visibility 0s}
/* A grid: the left column's items in column 1, the pane showing in column 2 across every row, so the panel is as tall as
   whichever is taller and never a fixed box. */
.np-in{display:grid;grid-template-columns:300px minmax(0,1fr);align-content:start;padding:16px 0;max-height:calc(100vh - 110px);overflow-y:auto;overscroll-behavior:contain;background:linear-gradient(90deg,var(--c-muted) 300px,var(--c-line) 300px,var(--c-line) 301px,var(--c-surface) 301px);color:var(--c-ink);border:1px solid var(--c-line);border-radius:var(--r-panel);box-shadow:0 2px 6px color-mix(in srgb,var(--c-deep) 8%,transparent),0 28px 64px -24px color-mix(in srgb,var(--c-deep) 45%,transparent)}
.np-item{grid-column:1;position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 12px;min-height:46px;padding:0 14px;border:0;border-radius:0 var(--r-control) var(--r-control) 0;background:none;color:var(--c-ink);font:700 15px/1.25 var(--font-display);letter-spacing:-.01em;text-align:left;text-decoration:none;cursor:pointer;transition:background 160ms var(--ease),box-shadow 160ms var(--ease)}
.np-item.np-gap{margin-top:21px}
.np-item.np-gap::before{content:"";position:absolute;left:0;right:0;top:-11px;border-top:1px solid var(--c-line)}
.np-item .np-chev{flex:none;color:var(--c-ink-2);opacity:0;transform:translateX(-4px);transition:opacity 160ms var(--ease),transform 160ms var(--ease)}
.np-item:hover,.np-item.on{text-decoration:none;background:var(--c-surface);box-shadow:inset 2px 0 0 var(--c-accent),0 1px 2px color-mix(in srgb,var(--c-deep) 6%,transparent)}
.np-item.on .np-chev,.np-item:hover .np-chev{opacity:1;transform:none}
.np-item:focus-visible{outline:2px solid var(--c-accent);outline-offset:-2px}
.np-pane{display:none;grid-column:2;grid-row:1/-1;padding:14px 36px 16px;min-width:0}
.np-pane.on{display:block;animation:np-in 220ms var(--ease)}
@keyframes np-in{from{opacity:0;transform:translateX(6px)}to{opacity:1;transform:none}}
.np-head{display:grid;grid-template-columns:minmax(0,1fr);gap:28px;align-items:center;padding-bottom:20px;margin-bottom:16px;border-bottom:1px solid var(--c-line)}
.np-head.has-photo{grid-template-columns:minmax(0,1fr) 240px}
.np-count{margin:0 0 8px;font:700 11px var(--font-display);letter-spacing:.16em;text-transform:uppercase;color:var(--c-ink-2)}
.np-title{margin:0;font:800 28px/1.08 var(--font-display);letter-spacing:-.025em;color:var(--c-ink)}
.np-dek{margin:10px 0 0;max-width:56ch;font-size:15px;line-height:1.5;color:var(--c-ink-2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.np-view{display:inline-flex;align-items:center;gap:6px;min-height:40px;margin-top:8px;color:var(--c-link);font-size:13px;font-weight:600;text-decoration:none}
.np-view:hover{text-decoration:underline}
.np-view .np-chev{transition:transform 160ms var(--ease)}
.np-view:hover .np-chev{transform:translateX(3px)}
.np-photo{display:block;aspect-ratio:8/5;border-radius:var(--r-panel);overflow:hidden;background:var(--c-muted);box-shadow:0 1px 2px color-mix(in srgb,var(--c-deep) 10%,transparent)}
.np-photo img{display:block;width:100%;height:100%;object-fit:cover;transition:transform 700ms var(--ease)}
.np-photo:hover img{transform:scale(1.04)}
.np-links,.np-az,.np-cities ul{list-style:none;margin:0;padding:0}
.np-links{column-width:170px;column-gap:28px}
.np-links li{break-inside:avoid}
.np-pane a:not(.np-view):not(.np-photo){display:inline-block;padding:6px 0;color:var(--c-ink);font-size:14px;line-height:1.35;text-decoration:none;transition:color 140ms var(--ease)}
.np-pane a:not(.np-view):not(.np-photo):hover{color:var(--c-link);text-decoration:underline}
.np-sub{margin:20px 0 6px;font:700 11px var(--font-display);letter-spacing:.16em;text-transform:uppercase;color:var(--c-ink-2)}
.np-head+.np-sub,.np-head+.np-cities .np-sub{margin-top:0}
/* All communities: the cities as one row of larger names, then every community A to Z with its letter in a gutter. */
.np-cities{padding-bottom:14px;margin-bottom:4px;border-bottom:1px solid var(--c-line)}
.np-cities ul{display:flex;flex-wrap:wrap;gap:0 28px}
.np-pane .np-cities a:not(.np-view):not(.np-photo){font:700 16px/1.3 var(--font-display);letter-spacing:-.01em}
.np-az{column-width:150px;column-gap:24px}
.np-az li{break-inside:avoid}
.np-pane .np-az a:not(.np-view):not(.np-photo){padding:5px 0}

/* Phone menu sheet: it scrolls, and Communities opens into its places, each into its neighborhoods. */
.menu-sheet{overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.menu-sheet details summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:12px}
.menu-sheet details summary::-webkit-details-marker{display:none}
.menu-sheet details summary::after{content:"";flex:none;width:8px;height:8px;margin-right:4px;border-right:2px solid var(--c-ink-2);border-bottom:2px solid var(--c-ink-2);transform:translateY(-2px) rotate(45deg);transition:transform 200ms var(--ease)}
.menu-sheet details[open]>summary::after{transform:translateY(2px) rotate(225deg)}
.ms-dd>summary{font-family:var(--font-display);font-size:22px;font-weight:800;color:var(--c-ink);padding:12px 0;border-bottom:1px solid var(--c-line)}
.ms-body{padding:4px 0 8px}
.ms-2>summary{min-height:52px;padding:0 0 0 14px;font:700 17px var(--font-display);color:var(--c-ink);border-bottom:1px solid var(--c-line)}
.ms-2>summary span{flex:1;min-width:0}
.ms-2>summary small{font:500 13px var(--font-body);color:var(--c-ink-2)}
.ms-2[open]>summary{color:var(--c-link)}
.menu-sheet .ms-links{display:grid;padding:6px 0 12px 28px;border-bottom:1px solid var(--c-line)}
.menu-sheet .ms-links a{display:flex;align-items:center;min-height:44px;padding:0;border:0;font:500 16px var(--font-body);color:var(--c-ink)}
.menu-sheet .ms-links a.ms-view{font-weight:600;color:var(--c-link)}
.ms-2[open] .ms-links{animation:np-in 200ms var(--ease)}

@media (prefers-reduced-motion:reduce){
  .nav-panel,.nav-dd.open .nav-panel{transition:none;transform:translate(-50%,0)}
  .np-pane.on,.ms-2[open] .ms-links{animation:none}
  .dd-caret,.np-item,.np-item .np-chev,.np-view .np-chev,.np-photo img,.menu-sheet details summary::after{transition:none}
}
/* Social links as a row of round icons under the office block (Truman, 2026-10-03). One color, the footer's own. */
.site-footer .fsocials{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.site-footer .fsoc{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:50%;border:1px solid color-mix(in srgb,#fff 22%,transparent);color:var(--f-ink-2);font:700 15px/1 var(--font-display);text-decoration:none;transition:border-color 160ms var(--ease),background 160ms var(--ease),color 160ms var(--ease)}
.site-footer .fsoc:hover{border-color:var(--c-accent);background:color-mix(in srgb,var(--c-accent) 16%,transparent);color:var(--f-ink);text-decoration:none}
.site-footer .fsoc:focus-visible{outline:2px solid var(--c-accent);outline-offset:3px}
@media (max-width:767px){.site-footer .fsoc{width:44px;height:44px}}

/* The open search page (D139, pages/open-search.tsx): one form, quick pickers, the Filters sheet, chips, and the results.
   The search area sits in the header's own container (.wrap), so their edges line up; the grid fills it. Colors are theme
   tokens only. */
.osearch{padding-block:28px 72px}
.os-form{display:grid;gap:4px}
.os-bar{display:grid;gap:10px;position:relative}
@media (min-width:1000px){.os-bar{grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:stretch}}
.os-q{position:relative;display:flex;align-items:center;gap:12px;min-height:58px;padding:0 8px 0 18px;border:1px solid var(--c-line);border-radius:var(--r-panel);background:var(--c-surface);color:var(--c-ink-2);box-shadow:0 1px 2px color-mix(in srgb,var(--c-deep) 8%,transparent);transition:border-color 140ms var(--ease),box-shadow 140ms var(--ease)}
.os-q:focus-within{border-color:var(--c-brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--c-brand) 18%,transparent)}
.os-q input{flex:1;min-width:0;height:56px;border:0;background:transparent;color:var(--c-ink);font:500 16px var(--font-body);outline:none}
.os-q input::placeholder,.os-text input::placeholder{color:var(--c-ink-2);opacity:.55}
.os-q .os-go{min-height:44px;padding:0 18px}
.os-sug{position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:40;margin:0;padding:6px;list-style:none;background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--r-panel);box-shadow:0 18px 48px color-mix(in srgb,var(--c-deep) 22%,transparent);max-height:min(380px,60vh);overflow:auto}
.os-sug li{display:grid;gap:2px;padding:10px 12px;border-radius:var(--r-control);cursor:pointer}
.os-sug li b{font:600 15px var(--font-body);color:var(--c-ink)}
.os-sug li span{font-size:12px;color:var(--c-ink-2)}
.os-sug li span:empty{display:none}
.os-sug li.on,.os-sug li:hover{background:var(--c-muted)}
.os-quick{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;position:relative}
@media (min-width:640px){.os-quick{display:flex}}
.os-pick{position:static}
@media (min-width:640px){.os-pick{position:relative}}
.os-pick summary,.os-filters{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:50px;padding:0 14px;border:1px solid var(--c-line);border-radius:var(--r-panel);background:var(--c-surface);color:var(--c-ink);font:600 14px var(--font-body);cursor:pointer;list-style:none;white-space:nowrap;text-decoration:none;transition:border-color 140ms var(--ease),background 140ms var(--ease)}
@media (min-width:1000px){.os-pick summary,.os-filters{min-height:58px;padding:0 16px}}
.os-pick summary::-webkit-details-marker{display:none}
.os-pick summary:hover,.os-filters:hover,.os-pick[open] summary{border-color:var(--c-ink)}
.os-pick summary .k{font-weight:500;color:var(--c-ink-2)}
.os-pick summary b{font-weight:700;overflow:hidden;text-overflow:ellipsis;margin-right:auto}
.os-pick summary svg{color:var(--c-ink-2);transition:transform 200ms var(--ease)}
.os-pick[open] summary svg{transform:rotate(180deg)}
.os-pop{position:absolute;top:calc(100% + 8px);left:0;right:0;z-index:40;padding:18px;background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--r-panel);box-shadow:0 18px 48px color-mix(in srgb,var(--c-deep) 22%,transparent)}
@media (min-width:640px){.os-pop{right:auto;min-width:320px}.os-pick[data-pick=type] .os-pop{min-width:380px}}
@media (prefers-reduced-motion:no-preference){.os-pick[open] .os-pop{animation:os-pop 180ms var(--ease)}}
@keyframes os-pop{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.os-filters .n{display:none;min-width:22px;height:22px;padding:0 7px;border-radius:11px;background:var(--c-brand);color:var(--c-brand-ink);font:700 11px var(--font-display);align-items:center;justify-content:center}
.os-filters .n.on{display:inline-flex}
.os-filters svg{color:var(--c-ink-2)}
.os-filters span:not(.n){margin-right:auto}
.os-row{border:0;margin:0;padding:0;min-width:0;display:grid;gap:10px}
.os-row legend{padding:0;margin-bottom:10px;font:600 13px var(--font-body);color:var(--c-ink-2)}
.os-pop .os-row legend{font-family:var(--font-display);font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.os-pills{display:flex;flex-wrap:wrap;gap:8px}
.pill{position:relative;display:inline-flex}
.pill input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.pill span{display:inline-flex;align-items:center;min-height:42px;padding:0 16px;border:1px solid var(--c-line);border-radius:var(--r-control);background:var(--c-surface);color:var(--c-ink);font:600 14px var(--font-body);cursor:pointer;user-select:none;transition:background 140ms var(--ease),border-color 140ms var(--ease),color 140ms var(--ease)}
.pill span:hover{border-color:var(--c-ink-2)}
.pill input:checked+span{background:var(--c-brand);border-color:var(--c-brand);color:var(--c-brand-ink)}
.pill input:focus-visible+span{outline:2px solid var(--c-accent);outline-offset:2px}
.os-range{margin:22px 0 0}
.os-range .pb-out{font-size:18px}
.os-range .pb-track input[type=range]{cursor:pointer}
/* Quick toggles under the price: one row, lit when on. Phones scroll it sideways inside the page gutter, no bar showing. */
.os-toggles{display:flex;gap:8px;margin:18px -20px 0;padding:2px 20px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.os-toggles::-webkit-scrollbar{display:none}
@media (min-width:640px){.os-toggles{flex-wrap:wrap;overflow:visible;margin-inline:0;padding-inline:0}}
.os-toggle{flex:none;display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 16px;border:1px solid var(--c-line);border-radius:20px;background:var(--c-surface);color:var(--c-ink);font:600 14px var(--font-body);text-decoration:none;white-space:nowrap;cursor:pointer;user-select:none;transition:background 140ms var(--ease),border-color 140ms var(--ease),color 140ms var(--ease)}
.os-toggle:hover{border-color:var(--c-ink-2)}
.os-toggle .ck{display:none}
.os-toggle.on{background:var(--c-brand);border-color:var(--c-brand);color:var(--c-brand-ink);padding-left:12px}
.os-toggle.on .ck{display:block}
.os-toggle:focus-visible{outline:2px solid var(--c-accent);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.os-toggle{transition:none}}
.os-chips{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:20px}
.os-chips:empty{display:none}
.os-chip{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 6px 0 14px;border-radius:18px;background:var(--c-chip);color:var(--c-ink);font:600 13px var(--font-body);text-decoration:none}
.os-chip.area{background:var(--c-tint)}
.os-chip i{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;font:400 17px/1 var(--font-body);font-style:normal;color:var(--c-ink-2);transition:background 140ms var(--ease)}
.os-chip:hover i{background:var(--c-line);color:var(--c-ink)}
.os-chip-clear{padding:0 6px;font:600 13px var(--font-body);color:var(--c-link);text-decoration:none}
.os-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;margin:24px 0 32px;padding-bottom:18px;border-bottom:1px solid var(--c-line)}
.os-count{margin:0;font-size:15px;color:var(--c-ink-2);flex:1 1 auto}
.os-count b{font-family:var(--font-display);font-size:24px;font-weight:800;letter-spacing:-.01em;color:var(--c-ink);font-variant-numeric:tabular-nums;margin-right:2px}
.os-sort{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--c-ink-2)}
.os-sort select{font:600 14px var(--font-body);min-height:40px;padding:0 10px;border:1px solid var(--c-line);border-radius:var(--r-control);background:var(--c-surface);color:var(--c-ink);cursor:pointer}
.os-toolbar .save-search{margin:0}
@media (max-width:639px){.os-count{flex-basis:100%}.os-sort{flex:1;min-width:0}.os-sort select{flex:1;min-width:0}.pill span{padding:0 13px}}
/* The search page's map (D201): price pins, and a layer to draw an area on. */
.os-mapbtn{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 14px;border:1px solid var(--c-line);border-radius:20px;background:var(--c-bg);color:var(--c-ink);font:600 14px var(--font-body);cursor:pointer}
.os-mapbtn.on{background:var(--c-chip);border-color:var(--c-ink-2)}
.os-map{position:relative;margin:0 0 32px;border:1px solid var(--c-line);border-radius:var(--r-panel);overflow:hidden;background:var(--c-muted)}
.os-map[hidden]{display:none}
.os-map__canvas{height:min(60vh,520px);z-index:0}
.os-map__stage{position:relative}
.os-map__ink{position:absolute;inset:0;z-index:500;cursor:crosshair;touch-action:none;background:color-mix(in srgb,var(--c-bg) 12%,transparent)}
.os-map__ink svg{width:100%;height:100%;display:block}
.os-map__ink path{fill:color-mix(in srgb,var(--c-brand) 10%,transparent);stroke:var(--c-brand);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.os-map__bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;padding:12px 16px;background:var(--c-surface);border-top:1px solid var(--c-line)}
.os-map__link{padding:0;border:0;background:none;color:var(--c-link);font:600 14px var(--font-body);cursor:pointer}
.os-map__link:disabled{color:var(--c-ink-2);opacity:.6;cursor:default}
.os-map__idle,.os-map__drawing,.os-map__pointing{display:none;flex-wrap:wrap;align-items:center;gap:10px 16px;font-size:14px;color:var(--c-ink)}
.os-map__bar[data-mode="idle"] .os-map__idle,.os-map__bar[data-mode="draw"] .os-map__drawing,.os-map__bar[data-mode="points"] .os-map__pointing{display:flex}
.os-map__idle [hidden]{display:none}
.os-map__canvas.aim,.os-map__canvas.aim .leaflet-grab,.os-map__canvas.aim .leaflet-interactive{cursor:crosshair}
.os-map__note{font-size:13px;color:var(--c-ink-2)}
.os-pins{position:absolute;left:0;top:0}
.os-cluster{position:absolute;transform:translate(-50%,-50%);width:var(--s,32px);height:var(--s,32px);display:grid;place-items:center;padding:0;border:0;border-radius:50%;background:var(--c-brand);color:var(--c-brand-ink);font:700 13px/1 var(--font-body);cursor:pointer;box-shadow:0 0 0 3px color-mix(in srgb,var(--c-brand) 35%,transparent),0 0 0 5px var(--c-bg),0 2px 8px rgba(0,0,0,.3)}
.os-cluster:hover,.os-cluster:focus-visible{background:var(--c-accent);z-index:2}
.os-map__handles{position:absolute;inset:0;z-index:600;pointer-events:none}
.os-handle{position:absolute;transform:translate(-50%,-50%);width:16px;height:16px;padding:0;border:2px solid var(--c-brand);border-radius:50%;background:var(--c-bg);pointer-events:auto;cursor:grab;touch-action:none;box-shadow:0 1px 4px rgba(0,0,0,.35)}
.os-handle:active{cursor:grabbing;transform:translate(-50%,-50%) scale(1.25)}
@media (pointer:coarse){.os-handle{width:24px;height:24px}}
.os-map__back{display:none}
/* On a phone the open map fills the screen; Show the list goes back to the results. */
@media (max-width:639px){
  .os-map.full{position:fixed;inset:0;z-index:1200;margin:0;border:0;border-radius:0;display:flex;flex-direction:column;background:var(--c-bg)}
  .os-map.full .os-map__stage{flex:1;min-height:0}
  .os-map.full .os-map__canvas{height:100%}
  .os-map.full .os-map__back{display:inline-flex;align-items:center;position:absolute;top:12px;left:50%;transform:translateX(-50%);z-index:700;min-height:40px;padding:0 18px;border:0;border-radius:20px;background:var(--c-surface);color:var(--c-ink);font:600 14px var(--font-body);box-shadow:0 4px 14px rgba(0,0,0,.3)}
  .os-map.full .os-map__bar{padding-bottom:calc(12px + env(safe-area-inset-bottom))}
  body.os-map-full{overflow:hidden}
}
/* A home on a map is its price in a brand pill, always shown (2026-10-08, Truman: "a more contrasting color"); the
   listing page's similar-home pins (.gpin.price) look the same. Hover lifts it and opens the home's card. */
.os-pin,.gpin.price span{display:block;padding:6px 11px;border-radius:999px;background:var(--c-brand);color:var(--c-brand-ink);font:700 13px/1 var(--font-body);white-space:nowrap;text-decoration:none;box-shadow:0 0 0 1.5px color-mix(in srgb,var(--c-bg) 70%,transparent),0 3px 10px rgba(0,0,0,.35);transition:transform 120ms var(--ease),background 120ms var(--ease)}
.os-pin{position:absolute;transform:translate(-50%,-50%)}
.os-pin:hover,.os-pin:focus-visible{transform:translate(-50%,-50%) scale(1.08);background:var(--c-ink);color:var(--c-bg);z-index:3}
.leaflet-marker-icon .os-pin{position:static;transform:translate(-50%,-50%)}
@media (max-width:639px){.os-toolbar .os-sort{flex:1 1 100%}.os-mapbtn{min-height:44px}}
/* Without a Maps key (local development) the street tiles are toned toward the theme, so the preview reads like the Google map. */
.os-tiles{filter:grayscale(1) contrast(.9) brightness(1.05)}
.os-map__canvas,.os-map .leaflet-container{background:var(--c-muted)}
[data-theme="dark"] .os-tiles{filter:grayscale(1) invert(1) brightness(.78) contrast(.9)}
@media (prefers-color-scheme:dark){[data-theme="auto"] .os-tiles{filter:grayscale(1) invert(1) brightness(.78) contrast(.9)}}
.os-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:40px 24px;transition:opacity 140ms var(--ease)}
@media (min-width:1200px){.os-grid{gap:48px 32px}}
.os-grid.loading{opacity:.5}
.os-empty{grid-column:1/-1;padding:56px 0;text-align:center}
.os-empty h2{font-size:24px;margin-bottom:8px}
.os-empty p{margin:0 auto;max-width:46ch;color:var(--c-ink-2)}
.os-pager{margin-top:48px}
/* The Filters sheet: from the right on wide screens, from the bottom to full height on phones. Works with scripts off through
   :target; the script adds .open instead, so the address keeps no hash. */
.os-panel{position:fixed;inset:0;z-index:70;visibility:hidden;pointer-events:none;transition:visibility 0s linear 380ms}
.os-panel.open,.os-panel:target{visibility:visible;pointer-events:auto;transition-delay:0s}
.os-scrim{position:absolute;inset:0;background:color-mix(in srgb,var(--c-deep) 64%,transparent);opacity:0;transition:opacity 380ms var(--ease)}
.os-panel.open .os-scrim,.os-panel:target .os-scrim{opacity:1}
.os-sheet{position:absolute;left:0;right:0;bottom:0;top:12px;display:grid;grid-template-rows:auto minmax(0,1fr) auto;background:var(--c-surface);border-radius:var(--r-sheet) var(--r-sheet) 0 0;box-shadow:0 -12px 40px color-mix(in srgb,var(--c-deep) 30%,transparent);transform:translateY(100%);transition:transform 380ms var(--ease)}
.os-panel.open .os-sheet,.os-panel:target .os-sheet{transform:none}
@media (min-width:900px){.os-sheet{left:auto;top:0;width:min(560px,100%);border-radius:0;box-shadow:-12px 0 40px color-mix(in srgb,var(--c-deep) 30%,transparent);transform:translateX(100%)}}
.os-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:20px 24px 16px;border-bottom:1px solid var(--c-line)}
.os-head h2{font-size:22px}
.os-x{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--c-chip);color:var(--c-ink);font:400 22px/1 var(--font-body);text-decoration:none}
.os-body{overflow:auto;overscroll-behavior:contain;padding:0 24px 24px}
@media (min-width:900px){.os-head{padding:26px 32px 18px}.os-body{padding:0 32px 32px}}
.os-group{display:grid;gap:22px;padding:26px 0 28px;border-bottom:1px solid var(--c-line)}
.os-group:last-child{border-bottom:0}
.os-group h3{font-family:var(--font-display);font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--c-ink-2)}
.os-note{margin:-12px 0 0;font-size:13px;line-height:1.5;color:var(--c-ink-2);max-width:52ch}
.os-group .os-range{margin:0}
.os-text{position:relative;display:grid;gap:8px;font:600 13px var(--font-body);color:var(--c-ink-2)}
.os-text input{min-height:48px;padding:0 14px;border:1px solid var(--c-line);border-radius:var(--r-control);background:var(--c-surface);color:var(--c-ink);font:500 16px var(--font-body);outline:none;transition:border-color 140ms var(--ease)}
.os-text input:focus{border-color:var(--c-brand)}
.os-foot{display:flex;align-items:center;gap:20px;padding:14px 24px calc(14px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--c-line);background:var(--c-surface)}
@media (min-width:900px){.os-foot{padding:18px 32px 22px}}
.os-clear{font:600 14px var(--font-body);color:var(--c-link);text-decoration:none;white-space:nowrap}
.os-foot .btn{flex:1;min-height:54px}
#os-apply.loading{opacity:.85}
@media (prefers-reduced-motion:reduce){.os-panel,.os-scrim,.os-sheet,.os-grid,.os-pick summary svg{transition:none}}
/* Schools (D139): names as the listing gives them, and one quiet line of official links on community pages. No ratings. */
.lx-schools dl{margin:0;max-width:560px}
.lx-schools dl div{display:flex;justify-content:space-between;gap:16px;padding:10px 0;border-bottom:1px solid var(--c-line);font-size:15px}
.lx-schools dt{color:var(--c-ink-2)}
.lx-schools dd{margin:0;font-weight:600;text-align:right}
.lx-schools .fine{margin-top:12px}
.schools-band{padding-block:40px;border-bottom:1px solid var(--c-line)}
.schools-line{margin:0;max-width:75ch;font-size:15px;line-height:1.6;color:var(--c-ink-2)}
.schools-line b{color:var(--c-ink)}

/* Texted homes (D143): /picks/<token>/ */
.picks .lgrid{margin-top:8px}
.picks-gone{margin:0 0 24px;font-size:15px;color:var(--c-ink-2)}
.picks-more{margin:40px 0 0;text-align:center;font-weight:600}

/* Reactions (D144): one button on a card shows the pick; a small menu offers Love it, Maybe, Not for me. */
.lsave .i-maybe,.lsave .i-no{display:none}
.lsave[data-react=maybe] .i-love,.lsave[data-react=no] .i-love{display:none}
.lsave[data-react=maybe] .i-maybe,.lsave[data-react=no] .i-no{display:block}
.lsave[data-react=maybe]{color:var(--c-link)}
.lsave[data-react=no]{color:var(--c-ink-2)}
.lsave:focus-visible,.rtray button:focus-visible,.lx-react .icon-btn:focus-visible{outline:2px solid var(--c-cta);outline-offset:2px}
.rtray{position:fixed;z-index:60;min-width:188px;padding:6px;border:1px solid var(--c-line);border-radius:10px;background:var(--c-surface);color:var(--c-ink);box-shadow:0 10px 30px color-mix(in srgb,var(--c-ink) 18%,transparent)}
.rtray[hidden],.rtray button[hidden]{display:none}
.rtray button{display:flex;align-items:center;gap:10px;width:100%;min-height:44px;padding:0 12px;border:0;border-radius:6px;background:none;color:inherit;font:600 14px var(--font-body);text-align:left;cursor:pointer}
.rtray button:hover,.rtray button:focus-visible{background:var(--c-muted)}
.rtray button[aria-checked=true]{color:var(--c-cta)}
.rtray button[aria-checked=true] .i-love{fill:currentColor}
.rtray-i{display:grid;place-items:center;width:20px;height:20px}
.rtray-i svg{display:block}
.rtray .rtray-clear{min-height:40px;margin-top:4px;border-top:1px solid var(--c-line);border-radius:0 0 6px 6px;color:var(--c-ink-2);font-weight:500}
@media (prefers-reduced-motion:no-preference){.rtray:not([hidden]){animation:rtray-in .14s var(--ease)}@keyframes rtray-in{from{opacity:0;transform:translateY(-4px)}}}
.lx-react{display:flex;gap:6px;flex-wrap:wrap}
.lx-react .icon-btn[aria-pressed=true]{border-color:var(--c-cta);color:var(--c-cta);background:color-mix(in srgb,var(--c-cta) 8%,var(--c-surface))}
.lx-react .icon-btn[aria-pressed=true][data-react-set=love] svg{fill:currentColor}
/* Listing actions: Love it | Maybe | Not for me as one joined bar on its own row, Share as a matching square beside it. */
.lx-price .lx-tools{flex-basis:100%;margin:6px 0 0;gap:8px;align-items:stretch}
.lx-tools .lx-react{flex:1 1 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1px solid var(--c-line);border-radius:var(--r-control);overflow:hidden}
.lx-tools .lx-react .icon-btn{border:0;border-radius:0;justify-content:center;min-height:46px;padding:0 10px;white-space:nowrap}
.lx-tools .lx-react .icon-btn+.icon-btn{border-left:1px solid var(--c-line)}
.lx-tools .lx-react .icon-btn:hover{background:var(--c-muted)}
.lx-tools [data-share]{min-height:48px;justify-content:center}
@media (max-width:599px){.lx-tools [data-share]{width:48px;padding:0}.lx-tools [data-share] [data-share-label]{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}}
@media (min-width:600px){.lx-tools .lx-react{flex:0 1 420px}}
/* Not for me in the buyer's own search: at the end, dimmed, behind Show hidden. */
.lcard--hidden{opacity:.5}
.lcard--hidden:hover,.lcard--hidden:focus-within{opacity:.85}
.os-hidden{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--c-ink-2);cursor:pointer}
.os-hidden input{width:18px;height:18px;accent-color:var(--c-cta)}

/* Home report (planning/56): one homeowner's monthly page. The hero carries the estimate; sections reuse the market trend,
   listing cards, and lender card, so only the pieces new to this page are here. */
.mh-hero{min-height:0}
.mh-hero .wrap{padding-top:120px;padding-bottom:44px}
.mh-hero h1{font-size:clamp(34px,5.4vw,68px);line-height:.98;margin:10px 0 12px}
.mh-hero-value{display:grid;gap:22px;margin-top:26px;padding-top:24px;border-top:1px solid rgba(255,255,255,.28);max-width:880px}
.mh-k{display:block;font-family:var(--font-display);font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.82)}
.mh-big{display:block;font-family:var(--font-display);font-size:clamp(44px,6.4vw,84px);font-weight:800;letter-spacing:-.04em;line-height:1;margin:8px 0 10px;font-variant-numeric:tabular-nums;color:#fff;text-shadow:0 2px 28px color-mix(in srgb,var(--c-deep) 55%,transparent)}
.mh-range-big{font-size:clamp(36px,5.6vw,76px)}
.mh-range-big span{white-space:nowrap;font-size:.42em;font-weight:600;letter-spacing:0;opacity:.75;margin:0 .18em;vertical-align:.32em}
.mh-move{font-size:15px;font-weight:600;color:#fff;font-variant-numeric:tabular-nums}
.mh-move.up{color:#7fe3b4}
.mh-hero-act{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px}
.mh-quiet{color:rgba(255,255,255,.9);font-size:14px;text-decoration:underline;text-underline-offset:4px;text-decoration-color:rgba(255,255,255,.4)}
@media (min-width:768px){.mh-hero .wrap{padding-top:140px;padding-bottom:56px}.mh-hero-value{grid-template-columns:minmax(0,1fr) auto;align-items:end}.mh-hero-value:has(.mh-range-big){grid-template-columns:minmax(0,1fr);gap:18px}}
@media (min-width:1200px){.mh-hero .wrap{padding-top:160px;padding-bottom:72px}}

.mh-cols{display:grid;gap:40px;min-width:0}
.mh-left,.mh-right{min-width:0}
@media (min-width:1000px){.mh-cols{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:64px;align-items:start}.mh-rates .mh-cols{grid-template-columns:minmax(0,8fr) minmax(300px,4fr)}}
.mh-chart .plot{height:220px}
@media (min-width:768px){.mh-chart .plot{height:260px}}
.mh-chart path.area{stroke:none}
.mh-chart .xl span{white-space:nowrap;overflow:visible}
@media (max-width:767px){.mh-chart .xl .skip{visibility:hidden}}

/* The range: a thin track, the estimate as a marker, low and high under the ends. */
.mh-range{margin:8px 0 32px}
.mh-track{position:relative;height:8px;border-radius:999px;background:linear-gradient(90deg,color-mix(in srgb,var(--c-accent) 18%,transparent),color-mix(in srgb,var(--c-accent) 55%,transparent),color-mix(in srgb,var(--c-accent) 18%,transparent))}
.mh-track i{position:absolute;top:50%;width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:50%;background:var(--c-surface);border:5px solid var(--c-brand);box-shadow:0 2px 8px rgba(13,27,36,.2)}
.mh-ends{position:relative;display:flex;justify-content:space-between;margin-top:14px;font-family:var(--font-display);font-weight:800;font-size:15px;font-variant-numeric:tabular-nums}
.mh-ends span{display:grid;gap:2px}
.mh-ends span:last-child{text-align:right}
.mh-ends .mid{position:absolute;top:0;transform:translateX(-50%);text-align:center;font-size:19px;color:var(--c-brand)}
.mh-ends em{font:500 12px var(--font-body);color:var(--c-ink-2);font-style:normal}
.mh-facts{margin:0;display:grid;border-top:1px solid var(--c-line)}
.mh-facts div{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:16px 0;border-bottom:1px solid var(--c-line)}
.mh-facts dt{font-size:14px;color:var(--c-ink-2)}
.mh-facts dd{margin:0;font-family:var(--font-display);font-size:22px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums;text-align:right}
.mh-facts dd.up{color:var(--c-live)}
.mh-facts dd small{font-size:13px;font-weight:700;margin-left:4px}
.mh-facts dd.plain{font-family:var(--font-body);font-size:14px;font-weight:600;letter-spacing:0}

/* The exact value ask: one quiet panel, one button. */
.mh-exact{display:grid;gap:20px;margin-top:48px;padding:28px;border-radius:var(--r-panel);background:var(--c-tint)}
.mh-exact h3{font-size:clamp(20px,2vw,24px);margin:0 0 8px}
.mh-exact p{margin:0;color:var(--c-ink-2);line-height:1.65;max-width:68ch}
@media (min-width:900px){.mh-exact{grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:40px;padding:36px 40px}}

/* The agent's month, read like an article: head and byline, the video at full width, then the note in two columns on wide screens. */
.mh-month-head{display:grid;gap:0;margin-bottom:32px}
.mh-month-head h2{font-size:var(--t-display);line-height:1.05;margin:0 0 20px;max-width:22ch}
.mh-by{display:flex;align-items:center;gap:14px}
.mh-by .avatar{width:48px;height:48px;border-radius:50%;overflow:hidden;background:var(--c-surface);flex:none}
.mh-by .avatar img{width:100%;height:100%;object-fit:cover;object-position:center top}
.mh-by strong{display:block;font-size:15px}
.mh-by span{font-size:13px;color:var(--c-ink-2)}
.mh-video{margin:0 0 40px}
.mh-note p{font-size:17px;line-height:1.75;color:var(--c-ink-2);margin:0 0 16px;break-inside:avoid}
@media (min-width:1000px){.mh-month-head{grid-template-columns:minmax(0,1fr) auto;align-items:end;column-gap:48px}.mh-month-head .eyebrow{grid-column:1/-1}.mh-month-head h2{margin:12px 0 0}.mh-note{columns:2;column-gap:56px}}
.mh-sold .ltag{background:var(--c-deep);color:#fff}
.mh-how{margin:2px 0 0;font-size:13px;color:var(--c-ink-2)}
.mh-more{margin:40px 0 0;text-align:center;font-weight:600}

.mh-market{padding-bottom:0 !important}
.mh-areas{padding-top:40px !important}
.mh-table th[scope="row"]{background:var(--c-surface)}
.mh-table tr.me > *{background:var(--c-tint)}

.mh-refi h2{font-size:21px}
.mh-refi .statement b{color:var(--c-ink)}
@media (min-width:1000px){.mh-refi{position:sticky;top:104px;padding:28px}}
/* The lender under the rates chart (D231): the same tinted strip as the exact value ask, who and how to reach them beside the question. */
.mh-lender{display:grid;gap:22px;margin-top:40px;padding:28px;border-radius:var(--r-panel);background:var(--c-tint)}
.mh-lender h3{font-size:clamp(20px,2vw,24px);margin:0 0 8px}
.mh-lender-say p{margin:0;color:var(--c-ink-2);line-height:1.65;max-width:62ch}
.mh-lender-who{display:grid;gap:12px;align-content:start}
.mh-lender-who .avatar{flex:none;width:48px;height:48px;border-radius:50%;overflow:hidden;background:#fff}
.mh-lender-who .avatar img{width:100%;height:100%;object-fit:cover;object-position:center top}
.mh-lender-who .avatar.mono{display:grid;place-items:center;background:var(--c-surface);color:var(--c-ink);font:800 14px var(--font-display)}
.mh-reach{margin:0;font-size:14px;color:var(--c-ink-2)}
.mh-reach a{font-weight:600}
.mh-quiet-link{font-weight:600;white-space:nowrap}
@media (min-width:900px){.mh-lender{grid-template-columns:minmax(0,1fr) minmax(260px,320px);align-items:center;gap:40px;padding:36px 40px}}
.mh-table thead th:first-child{text-align:left}
.mh-none{margin:10px 0 0;font-size:17px;line-height:1.6;color:rgba(255,255,255,.9);max-width:46ch}
.lc-apply{display:block;text-align:center;font-size:14px;font-weight:600}
/* The lender under a payment calculator (D182): one quiet row, never a second form. */
/* The lender under a payment calculator: a compact card on a phone (who on one row, a sentence, a full-width button and
   the Apply link under it), one row of three on a wide screen. */
.lender-line{display:grid;gap:14px;margin-top:28px;padding-top:22px;border-top:1px solid var(--c-line)}
.lender-line .lnd-who{display:flex;align-items:center;gap:12px;min-width:0}
.lender-line .lnd-name{min-width:0}
.lender-line .lnd-name b{display:block;font:700 16px/1.25 var(--font-display);color:var(--c-ink)}
.lender-line .lnd-name span{display:block;font-size:13px;color:var(--c-ink-2)}
.lender-line .avatar{flex:none;width:60px;height:60px;border-radius:50%;overflow:hidden;background:#fff}
.lender-line .avatar img{width:100%;height:100%;object-fit:cover;object-position:center top}
.lender-line p{margin:0;font-size:15px;line-height:1.55;color:var(--c-ink-2)}
.lender-line p b{color:var(--c-ink)}
.lender-line .lnd-go{display:flex;flex-direction:column;align-items:stretch;gap:12px}
.lender-line .lnd-apply{font-weight:600;font-size:14px;text-align:center}
/* The lender's company mark (D182): one color, ink on light grounds and white on dark, from its own alpha. */
.lender-mark{display:block;width:170px;height:52px;margin:0 0 12px;background:var(--c-ink-2);-webkit-mask:var(--mark) left center/contain no-repeat;mask:var(--mark) left center/contain no-repeat;opacity:.85}
.lender-line .lender-mark{flex:none;width:92px;height:30px;margin:0 0 0 auto}
.photo-band .lender-mark,.hero .lender-mark{background:#fff}
.lender-line .lnd-go .btn{white-space:nowrap;justify-content:center}
@media (min-width:768px){.lender-line{grid-template-columns:minmax(220px,auto) 1fr auto;align-items:center;gap:16px 28px}.lender-line .lender-mark{margin-left:12px}.lender-line .lnd-go{flex-direction:row;align-items:center;gap:18px}}
/* Every lender photo (D182) frames the same way: from the top of the photo with a little headroom, so a headshot or
   cutout with the head near the top edge never loses it to the circle. */
.lc-who .avatar,.lender-line .avatar{background:#fff}
.lc-who .avatar img,.lender-line .avatar img{width:100%;height:100%;object-fit:cover;object-position:center top}
/* A cut-out headshot (transparent PNG) sits a little lower and smaller so the head clears the circle; a full photo fills it. */
.lc-who .avatar img[src*=".png"],.lender-line .avatar img[src*=".png"]{transform:translateY(8%) scale(.94);transform-origin:50% 100%}
/* Community pages (D186): one quiet byline under the facts, how competitive the market is inside the market section,
   and homes for sale by price range as one bar per band. */
.byline{display:flex;align-items:center;gap:10px;margin:16px 0 0;font-size:14px;color:var(--c-ink-2)}
.byline a{color:var(--c-ink);font-weight:600;text-decoration:none}
.byline a:hover{text-decoration:underline}
.by-photo{flex:none;width:32px;height:32px;border-radius:50%;overflow:hidden;background:var(--c-muted)}
.by-photo img{width:100%;height:100%;object-fit:cover;object-position:center top}
.compete{margin:0 0 40px}
.compete h3{margin:0 0 8px}
.compete p.answer{margin:0 0 20px}
.compete .tiles{grid-template-columns:repeat(3,minmax(0,1fr));margin:0}
.compete .fine{margin-top:10px}
.pr-list{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.pr-list a{display:grid;grid-template-columns:minmax(120px,180px) 1fr 3.5em;align-items:center;gap:16px;padding:10px 0;border-bottom:1px solid var(--c-line);color:var(--c-ink);text-decoration:none}
.pr-list a:hover .pr-label{color:var(--c-link);text-decoration:underline}
.pr-label{font-size:15px}
.pr-bar{height:10px;border-radius:5px;background:var(--c-muted);overflow:hidden}
.pr-bar i{display:block;height:100%;border-radius:5px;background:var(--c-accent)}
.pr-n{text-align:right;font-variant-numeric:tabular-nums}
.pr-list li.here .pr-label{font-weight:700}
.pr-list li.here .pr-label em{display:block;margin-top:2px;font-style:normal;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--c-link)}
.pr-list li.here .pr-bar i{background:var(--c-brand)}

/* Compare one on one links (2026-10-04): a grid of plain rows that grows with the screen, under the compare table or alone. */
.vs-links{margin-top:28px}
.vs-links h3{margin:0 0 6px;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--c-ink-2);font-family:var(--font-display);font-weight:700}
.vs-links ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));column-gap:32px}
.vs-links li{border-bottom:1px solid var(--c-line)}
.vs-links a{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 0;color:var(--c-ink);text-decoration:none;font-weight:600}
.vs-links a span{color:var(--c-ink-2);transition:transform .15s}
.vs-links a:hover span{transform:translateX(3px);color:var(--c-accent)}
/* The even-spread price slider (D194) has no histogram: every bar would be the same height. */
.pb-hist[hidden]{display:none}
/* Know this home (D195): how it compares (the price bands' rows, no links) and the price history. */
.lx-sec .answer{margin:0 0 14px;font-size:16px;line-height:1.6;color:var(--c-ink-2)}
.lx-sec .answer b{color:var(--c-ink)}
.lx-cmp li{display:grid;grid-template-columns:minmax(120px,170px) 1fr 3.5em;align-items:center;gap:16px;padding:10px 0;border-bottom:1px solid var(--c-line)}
.lx-hist{list-style:none;margin:0;padding:0}
.lx-hist li{display:grid;grid-template-columns:5.5em 1fr auto;gap:12px;align-items:baseline;padding:11px 0;border-bottom:1px solid var(--c-line);font-size:15px}
.lx-hist time{color:var(--c-ink-2);font-size:14px}
.lx-hist .cut{color:var(--c-ink);font-weight:600}
.lx-hist b{font-variant-numeric:tabular-nums}
/* Share this home: the home on top, then the ways to send it as round tiles. */
.share-sheet{max-width:440px}
.share-sheet h2{margin:0 0 14px}
.share-home{display:flex;align-items:center;gap:12px;padding:10px;margin-bottom:18px;border:1px solid var(--c-line);border-radius:var(--r-control);background:var(--c-surface)}
.share-home img{width:72px;height:54px;object-fit:cover;border-radius:6px;flex:none}
.share-home div{display:flex;flex-direction:column;gap:2px;min-width:0}
.share-home b{font:600 15px/1.3 var(--font-body);color:var(--c-ink)}
.share-home span{font-size:14px;color:var(--c-ink-2)}
.share-ways{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px 8px}
.share-way{display:flex;flex-direction:column;align-items:center;gap:8px;padding:4px 0;border:0;background:none;color:var(--c-ink);font:600 12px/1.25 var(--font-body);text-align:center;text-decoration:none;cursor:pointer}
.share-way svg{box-sizing:content-box;padding:13px;border-radius:50%;background:var(--c-chip);transition:background 140ms var(--ease),color 140ms var(--ease)}
.share-way:hover svg,.share-way:focus-visible svg{background:var(--c-brand);color:var(--c-brand-ink)}
.share-way[hidden]{display:none}
@media (max-width:420px){.share-ways{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* The card on a map pin (pages/pin-card.ts): fixed to the screen above the pin, never clipped by the map. */
.pin-card{position:fixed;z-index:60;width:240px;overflow:hidden;border-radius:14px;background:var(--c-surface);color:var(--c-ink);border:1px solid var(--c-line);box-shadow:0 14px 40px rgba(0,0,0,.35);pointer-events:none}
.pin-card[hidden]{display:none}
.pin-card img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;background:var(--c-muted)}
.pin-card div{display:grid;gap:3px;padding:10px 12px 12px}
.pin-card b{font:700 17px/1.2 var(--font-display)}
.pin-card span{font-size:13px;color:var(--c-ink-2)}
.pin-card .pin-card__addr{color:var(--c-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Getting around as a map band (2026-10-08): the listing page's band, with a wider card for the question and drive times. */
section.around-band{margin-top:0;padding-block:0}
.around-card .answer{font-size:15px;line-height:1.6;margin:0}
.around-card h2{font-size:24px}
.around-card .drives li{padding:10px 0}
.around-card .drives b{font-size:16px}
.around-card .fine,.around-card .schools{margin:0;font-size:13px}
@media (min-width:900px){.around-band .lx-mapcard{width:440px}}
/* Open houses: the note for buyers already working with the team (open-houses.tsx workingWithUs). */
.oh-note{display:grid;gap:16px;align-items:center;margin:0 0 32px;padding:20px 24px;border-radius:var(--r-panel);background:color-mix(in srgb,var(--c-accent) 12%,var(--c-surface));box-shadow:inset 4px 0 0 var(--c-accent)}
.oh-note-t{display:grid;gap:8px}
.oh-note p{margin:0;font-size:16px;line-height:1.55;max-width:80ch}
.oh-text{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding-inline:26px;white-space:nowrap}
.oh-text svg{width:18px;height:18px}
@media (min-width:900px){.oh-note{grid-template-columns:minmax(0,1fr) auto;gap:32px}}
/* The client's escrow page, v2 (D318, D322, D324; src/pages/escrow.tsx, planning/screens/escrow-v2): the home's photo with the
   countdown card, then bands, one topic each, alternating the site background and a soft tint (5 percent of the theme
   accent on the background), ending on the dark Let's talk band into the footer. From 960px the timeline has a column
   beside it that stays in view. Theme tokens only. */
/* The agent's Preview of a client page: a thin bar above the page; the header moves down under it. */
.es-preview{position:relative;z-index:31;margin:0;padding:6px 16px;background:var(--c-ink);color:var(--c-bg);font:600 13px/16px var(--font-body);text-align:center}
body:has(.es-preview) .site-header:not(.compact){top:28px}
.es-band,.es-hero{--es-tint:color-mix(in srgb,var(--c-accent) 5%,var(--c-bg))}
.es-hero{display:block;min-height:0;padding:0;background:linear-gradient(var(--c-deep),var(--c-deep)) top/100% calc(100% - 48px) no-repeat,var(--c-bg)}
.es-hero .hbg{bottom:48px;height:calc(100% - 48px)}
.hero.es-hero::before{bottom:48px;background:linear-gradient(180deg,color-mix(in srgb,var(--c-deep) 50%,transparent) 0%,transparent 28%,transparent 42%,color-mix(in srgb,var(--c-deep) 82%,transparent) 100%)}
.es-hero .wrap{padding-top:96px;padding-bottom:0}
.es-hero-t{min-height:200px;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;padding-bottom:22px}
.es-chip{display:inline-block;background:var(--c-cta);color:var(--c-cta-ink);font:700 11px/1 var(--font-display);letter-spacing:.14em;text-transform:uppercase;padding:7px 10px;border-radius:var(--r-chip)}
.es-hero h1{font-size:clamp(28px,3.6vw,46px);line-height:1.04;letter-spacing:-.025em;margin:12px 0 4px}
.es-hero .sub{margin:0;font-size:clamp(15px,1.4vw,18px)}
.es-price{margin:10px 0 0;font:800 clamp(22px,2.4vw,32px)/1.1 var(--font-display);color:#fff;font-variant-numeric:tabular-nums;text-shadow:0 1px 2px color-mix(in srgb,var(--c-deep) 45%,transparent)}
.es-price small{font:500 13px var(--font-body);margin-left:8px;opacity:.88}
.es-count{position:relative;z-index:2;display:grid;gap:10px;background:var(--c-surface);color:var(--c-ink);border-radius:var(--r-sheet);padding:16px 18px;box-shadow:0 8px 28px color-mix(in srgb,var(--c-deep) 22%,transparent)}
.es-count-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.es-count-top p{margin:0;font-size:14px;color:var(--c-ink-2)}
.es-count-top b{font-family:var(--font-display);font-size:36px;font-weight:800;line-height:1;color:var(--c-brand);font-variant-numeric:tabular-nums;margin-right:4px}
.es-count-top span{font-weight:700;font-size:14px;white-space:nowrap;font-variant-numeric:tabular-nums}
.es-bar{height:6px;border-radius:3px;background:var(--c-line);overflow:hidden}
.es-bar i{display:block;height:100%;border-radius:3px;background:var(--c-cta)}
.es-bar-ends{display:flex;justify-content:space-between;gap:12px;margin-top:-4px;font-size:12px;color:var(--c-ink-2)}
.es-count>p{margin:0;font-size:14px;line-height:1.45;color:var(--c-ink)}
.es-count>p b{color:var(--c-brand)}
.es-band{padding-block:40px;background:var(--c-bg)}
.es-band--tint{background:var(--es-tint)}
.es-band h2{font-size:var(--t-h2);line-height:1.15;letter-spacing:-.01em;margin:0}
.es-band .eyebrow{margin-bottom:10px}
.es-band .es-h3{font-size:18px;font-weight:800;margin:0}
.es-dek{margin:8px 0 0;color:var(--c-ink-2);font-size:15.5px;line-height:1.5;max-width:62ch}
.es-dek b{color:var(--c-ink)}
.es-hi{font-family:var(--font-display);font-size:clamp(21px,2.4vw,28px);font-weight:800;line-height:1.25;letter-spacing:-.01em;margin:0;color:var(--c-ink);max-width:36ch}
.es-lead{margin:12px 0 0;font-size:16px;color:var(--c-ink-2)}
.es-b1{display:grid;gap:32px}
.es-main{min-width:0}
.es-tl{list-style:none;margin:20px 0 0;padding:0;display:flex;flex-direction:column}
.es-step{display:grid;grid-template-columns:22px minmax(0,1fr);gap:12px;padding-bottom:16px;position:relative}
.es-step::before{content:"";position:absolute;left:10px;top:22px;bottom:0;width:2px;background:var(--c-line)}
.es-step:last-child::before{display:none}
.es-step--done::before{background:var(--c-brand)}
.es-dot{width:22px;height:22px;border-radius:50%;border:2px solid var(--c-line);background:var(--c-bg);position:relative;z-index:1;box-sizing:border-box}
.es-step--done .es-dot{background:var(--c-brand);border-color:var(--c-brand)}
.es-step--next .es-dot{border-color:var(--c-cta);box-shadow:0 0 0 4px color-mix(in srgb,var(--c-cta) 22%,transparent)}
.es-step-t{min-width:0}
.es-step-t h3{font-family:var(--font-body);font-size:15px;font-weight:700;line-height:1.3;margin:0}
.es-when{display:block;font-size:13px;color:var(--c-ink-2);margin-top:2px}
.es-step--next .es-when{color:var(--c-ink);font-weight:600}
.es-step--later .es-step-t h3{font-weight:600}
.es-sub{display:block;font-size:14px;line-height:1.45;color:var(--c-ink-2);margin-top:3px}
.es-tip{margin:8px 0 0;background:var(--es-tint);border-radius:var(--r-panel);padding:10px 12px;font-size:14px;line-height:1.5;color:var(--c-ink)}
.es-tip b{color:var(--c-brand)}
.es-side{display:flex;flex-direction:column;gap:16px;min-width:0}
.es-upnext{display:none}
.es-team{border:1px solid var(--c-line);border-radius:var(--r-sheet);padding:18px 20px 6px;background:var(--c-surface)}
.es-whos{list-style:none;margin:6px 0 0;padding:0}
.es-who{display:grid;grid-template-columns:42px minmax(0,1fr) auto;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--c-line);font-size:14px}
.es-who:last-child{border-bottom:0}
.es-who .es-face{width:42px;height:42px}
.es-who--agent{grid-template-columns:56px minmax(0,1fr)}
.es-who--agent .es-face{width:56px;height:56px}
.es-btns{grid-column:1/-1;display:flex;gap:8px}
.es-btns .btn{flex:1;min-height:44px;padding-inline:14px}
.es-row-t{flex:1;min-width:0;line-height:1.35;overflow-wrap:anywhere}
.es-row-t b{display:block;font-weight:700;font-size:15px}
.es-row-t a{font-weight:700;color:var(--c-ink);text-decoration:none}
.es-row-t a:hover{text-decoration:underline}
.es-row-t small{display:block;color:var(--c-ink-2);font-size:13px}
.es-face{width:40px;height:40px;border-radius:50%;flex:none;overflow:hidden;display:grid;place-items:center;background:var(--c-chip);color:var(--c-ink);font-family:var(--font-display);font-weight:700;font-size:14px}
.es-face img{width:100%;height:100%;object-fit:cover;object-position:center top}
.es-acts{display:flex;gap:4px;flex:none;font-weight:700;font-size:14px;color:var(--c-link)}
.es-acts a{display:inline-flex;align-items:center;min-height:44px;padding:0 8px;color:var(--c-link);text-decoration:none;border-radius:var(--r-control)}
.es-acts a:hover{text-decoration:underline}
.es-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--c-line)}
.es-row{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--c-line);font-size:15px}
.es-row small{display:block;color:var(--c-ink-2);font-size:13px}
.es-row a.es-acts{min-height:44px;align-items:center;text-decoration:none}
.es-file{width:32px;height:38px;border-radius:var(--r-control);flex:none;display:grid;place-items:center;background:var(--es-tint);color:var(--c-brand);font-family:var(--font-display);font-size:10px;font-weight:800;letter-spacing:.04em}
.es-faq{border-top:1px solid var(--c-line)}
.es-faq details{border-bottom:1px solid var(--c-line)}
.es-faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:48px;padding:10px 0;font-weight:700;font-size:15px}
.es-faq summary::-webkit-details-marker{display:none}
.es-faq summary::after{content:"+";flex:none;font-size:20px;font-weight:600;color:var(--c-link);line-height:1}
.es-faq details[open] summary::after{content:"\2212"}
.es-faq details p{margin:0 0 14px;font-size:15px;line-height:1.6;color:var(--c-ink-2);max-width:62ch}
.es-sec{display:flex;flex-direction:column;gap:12px;min-width:0}
.es-two{display:grid;gap:40px}
.es-recs{min-width:0}
.es-rec{display:grid;gap:14px;padding:22px 0;border-top:1px solid var(--c-line)}
.es-dek+.es-rec{margin-top:22px}
.es-rec h3{font-size:17px;margin:0}
.es-pcards{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.es-pcard{background:var(--c-surface);border:1px solid var(--c-line);border-radius:14px;padding:16px;display:flex;flex-direction:column;gap:10px;min-width:0}
.es-pcard-top{display:grid;grid-template-columns:46px minmax(0,1fr);gap:12px;align-items:center}
.es-plogo{width:46px;height:46px;border-radius:10px;overflow:hidden;display:grid;place-items:center;background:var(--c-brand);color:var(--c-brand-ink);font:800 14px var(--font-display)}
.es-plogo img{width:100%;height:100%;object-fit:cover}
.es-pcard p{margin:0;font-size:14px;line-height:1.5;color:var(--c-ink)}
.es-pcard .es-acts{border-top:1px solid var(--c-line);padding-top:2px;margin-top:auto}
.es-pcard .es-acts a:first-child{padding-left:0}
.es-fine{margin:0;font-size:13px;color:var(--c-ink-2)}
.es-free{margin-top:4px}
.es-more{margin-left:8px;color:var(--c-ink-2);font-weight:600;text-decoration:underline;text-decoration-color:color-mix(in srgb,currentColor 40%,transparent);text-underline-offset:3px}
.es-more:hover{color:var(--c-ink)}
.es-panel{margin-top:18px;background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--r-sheet);padding:4px 20px 16px;display:grid;gap:10px}
.es-check{list-style:none;margin:0;padding:0}
.es-check li{border-bottom:1px solid var(--c-line)}
.es-check label{display:grid;grid-template-columns:22px minmax(0,1fr);gap:12px;align-items:start;padding:12px 0;font-size:15px;line-height:1.45;cursor:pointer}
.es-check input{width:20px;height:20px;margin:1px 0 0;accent-color:var(--c-brand);cursor:pointer}
.es-check input:checked+span{color:var(--c-ink-2)}
.es-check small{display:block;font-size:13px;color:var(--c-ink-2);margin-top:2px}
.es-utils{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:10px}
.es-util{background:var(--c-surface);border:1px solid var(--c-line);border-radius:12px;padding:14px 16px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 12px;align-items:center;min-width:0}
.es-kind{grid-column:1/-1;font:700 11px var(--font-display);letter-spacing:.14em;text-transform:uppercase;color:var(--c-link)}
.es-vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.es-talk{padding:56px 0}
@media (min-width:900px){.es-talk:not(.es-talk--face) .pv-talk-in{grid-template-columns:minmax(0,1fr) auto}}
@media (min-width:600px){.es-pcards{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}.es-utils{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:960px){
  .es-hero{background:var(--c-deep)}
  .es-hero .hbg{bottom:0;height:100%}
  .hero.es-hero::before{bottom:0;background:linear-gradient(90deg,color-mix(in srgb,var(--c-deep) 64%,transparent),color-mix(in srgb,var(--c-deep) 12%,transparent) 55%,transparent),linear-gradient(180deg,color-mix(in srgb,var(--c-deep) 50%,transparent) 0%,transparent 26%,transparent 55%,color-mix(in srgb,var(--c-deep) 55%,transparent) 100%)}
  .es-hero-in{display:grid;grid-template-columns:minmax(0,1fr) 360px;align-items:end;gap:48px;min-height:min(640px,78vh)}
  .es-hero .wrap{padding-top:132px;padding-bottom:52px}
  .es-hero-t{min-height:0;padding-bottom:0}
  .es-count{padding:20px 22px}
  .es-count-top b{font-size:44px}
  .es-band{padding-block:72px}
  .es-b1{grid-template-columns:minmax(0,1.5fr) minmax(300px,1fr);gap:56px;align-items:start}
  .es-side{position:sticky;top:96px}
  .es-upnext{display:flex;flex-direction:column;gap:8px;background:var(--es-tint);border-radius:var(--r-sheet);padding:18px 20px}
  .es-upnext-when{font:700 11px var(--font-display);letter-spacing:.14em;text-transform:uppercase;color:var(--c-link)}
  .es-upnext b{font:800 18px/1.25 var(--font-display)}
  .es-upnext p{margin:0;font-size:14.5px;line-height:1.55}
  .es-tl{margin-top:28px}
  .es-step{gap:18px;padding-bottom:24px}
  .es-step-t h3{font-size:17px}
  .es-when{font-size:14px}
  .es-tip{display:none}
  .es-step--next .es-step-t{background:var(--es-tint);border-radius:12px;padding:12px 16px;margin:-12px 0 0 -6px}
  .es-rec{grid-template-columns:240px minmax(0,1fr);gap:36px;padding:28px 0}
  .es-recs--stack .es-rec{grid-template-columns:minmax(0,1fr);gap:14px;padding:22px 0}
  .es-two{grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:56px;align-items:start}
  .es-two--even{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .es-utils{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:28px}
  .es-talk{padding:80px 0}
}
@media (min-width:1200px){.es-side{top:100px}}
/* The account overview card (D318). */
.es-card{display:grid;grid-template-columns:72px minmax(0,1fr);gap:12px 16px;align-items:center;background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--r-panel);padding:14px;margin-bottom:24px}
.es-card-img{width:72px;height:72px;border-radius:var(--r-media);object-fit:cover;background:var(--c-tint);display:block}
.es-card-t{display:grid;gap:2px;min-width:0}
.es-card-t h2{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--c-ink-2)}
.es-card-t b{font-family:var(--font-display);font-size:18px;color:var(--c-ink);overflow-wrap:anywhere}
.es-card-t span{font-size:14px;color:var(--c-ink-2)}
.es-card .btn{grid-column:1/-1}
@media (min-width:640px){.es-card{grid-template-columns:72px minmax(0,1fr) auto}.es-card .btn{grid-column:auto}}
.pa-list>.es-rec:first-child{border-top:0;padding-top:0}

/* D333: the home value field in the hero and the seller page bands (/home-value/, /sell/, /sell/{city}/, the private value
   page). Colors only from theme tokens; the photo stays sharp. */
.sv-hero .hv-card{margin-top:28px;max-width:720px}
.sv-hero .hv-card .hv-form{max-width:none}
@media (min-width:768px){.sv-hero .hv-card .hv-step1{gap:28px}}
/* The rating pills and the address list stay light in both themes, like the real Zillow and Google badges: a dark page
   theme would otherwise give them dark surfaces under the deep text. */
.hv-trust .rb,.sv-hero .hv-list{--c-surface:#fff;--c-ink:var(--c-deep);--c-ink-2:color-mix(in srgb,var(--c-deep) 72%,#fff);--c-line:color-mix(in srgb,var(--c-deep) 14%,#fff);--c-tint:color-mix(in srgb,var(--c-deep) 7%,#fff)}
.hv-trust{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin:22px 0 0;font-size:14px;color:#fff}
.hv-trust>span{text-shadow:0 1px 2px color-mix(in srgb,var(--c-deep) 55%,transparent)}
.hv-trust .rb{display:inline-flex;align-items:center;gap:7px;padding:5px 10px;border-radius:10px;background:var(--c-surface);color:var(--c-ink-2);text-decoration:none;font-size:13px}
.hv-trust .rb b{color:var(--c-ink);font-family:var(--font-display);font-weight:800}
.hv-trust .rb-logo{display:block;flex:none}
.hv-trust .rb-logo.z{width:auto;height:15px;color:var(--c-ink)}
.hv-trust .rb .stars svg{width:13px;height:13px}
.hv-trust .rb .stars{gap:2px}
.hv-trust>a:not(.rb){color:#fff;text-decoration:underline;text-underline-offset:3px}
@media (max-width:767px){.hv-trust .rb .stars{display:none}}

.sv-two{display:grid;gap:40px}
@media (min-width:1024px){.sv-two .stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 0}.sv-two .stats .stat:nth-child(odd){padding-left:0;border-left:0}}
@media (min-width:1024px){.sv-two{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:64px;align-items:start}}
.sv-cities ul{list-style:none;margin:14px 0 0;padding:0;border-top:1px solid var(--c-line)}
.sv-cities a{display:grid;grid-template-columns:minmax(0,1fr) auto 6.5em;gap:16px;align-items:baseline;padding:13px 2px;border-bottom:1px solid var(--c-line);color:var(--c-ink-2);text-decoration:none;font-variant-numeric:tabular-nums}
.sv-cities a b{color:var(--c-link);font-weight:700}
.sv-cities a span:last-child{text-align:right}
.sv-cities a:hover b{text-decoration:underline}
.sv-cities .fine{margin-top:12px}

.sv-steps{list-style:none;margin:0;padding:0;display:grid;gap:22px;counter-reset:sv}
.sv-steps li{display:grid;grid-template-columns:40px minmax(0,1fr);gap:4px 14px;counter-increment:sv}
.sv-steps li::before{content:counter(sv);grid-row:span 2;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;border:1.5px solid var(--c-line);background:var(--c-surface);color:var(--c-brand);font:800 15px var(--font-display)}
.sv-steps b{font-family:var(--font-display);font-size:17px;font-weight:800}
.sv-steps p{margin:0;color:var(--c-ink-2);font-size:15px;line-height:1.6}
.sv-result{border:1px solid var(--c-line);border-radius:18px;overflow:hidden;background:var(--c-surface)}
.sv-result-img{position:relative;aspect-ratio:16/7;background:var(--c-muted)}
.sv-result-img img{width:100%;height:100%;object-fit:cover;display:block}
.sv-result-img span{position:absolute;left:14px;bottom:12px;padding:4px 9px;border-radius:6px;background:var(--c-deep);color:#fff;font-size:12px;font-weight:600}
.sv-result-b{display:grid;gap:10px;padding:18px 20px 20px}
.sv-result-b .mh-k{color:var(--c-cta)}
.sv-result-b>b{font-family:var(--font-display);font-size:clamp(26px,3vw,34px);font-weight:800;letter-spacing:-.02em;color:var(--c-ink);font-variant-numeric:tabular-nums}
.sv-result-b>b small{font:600 15px var(--font-body);color:var(--c-ink-2);margin:0 6px}
.sv-rbar{position:relative;display:block;height:8px;border-radius:4px;background:linear-gradient(90deg,var(--c-tint),var(--c-cta),var(--c-tint))}
.sv-rbar b{position:absolute;top:50%;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;background:var(--c-deep);box-shadow:0 0 0 3px var(--c-surface)}
.sv-result-b p b{color:var(--c-ink)}
.sv-result-b p{margin:0;font-size:14px;color:var(--c-ink-2)}

.sv-sold-row{display:grid;grid-auto-flow:column;grid-auto-columns:min(82%,320px);gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px}
.sv-sold-row>*{scroll-snap-align:start}
@media (min-width:1024px){.sv-sold-row{grid-auto-flow:row;grid-template-columns:repeat(4,minmax(0,1fr));overflow:visible}}

.sv-row{display:grid;gap:32px;align-items:center}
.sv-row .sv-say h2{max-width:22ch}
.sv-row .vid{margin:0}
.sv-go{margin:18px 0 0;font-weight:700}
.sv-go a{color:var(--c-link)}
@media (min-width:1024px){
  .sv-row{grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:64px}
  .sv-row.sv-flip{grid-template-columns:minmax(0,5fr) minmax(0,6fr)}
  .sv-row.sv-flip .sv-say{order:-1}
  .sv-row .sv-stick{position:sticky;top:96px;align-self:start}
}
.sv-band.gsteps-sec .sv-row{align-items:start}

.sv-rev-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:12px 32px;margin-bottom:24px}
.sv-rev-head h2{margin:10px 0 0}
.sv-rev-head .rev-badges{justify-content:flex-start;margin:0}
.sv-rev .rev-grid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}

.sv-faq-in{display:grid;gap:8px 64px}
.sv-faq .faq{max-width:none}
@media (min-width:1024px){.sv-faq-in{grid-template-columns:minmax(0,4fr) minmax(0,7fr);align-items:start}}

.sv-lux .vid-grid{margin-top:8px}

/* D333: the Sell menu, a short list under its link that opens on hover or focus. */
.nav-mini{position:relative;display:inline-flex}
.nm-top{text-decoration:none}
.nm-panel{position:absolute;top:calc(100% - 4px);left:-14px;z-index:35;min-width:210px;visibility:hidden;opacity:0;transform:translateY(-4px);transition:opacity 160ms var(--ease),transform 200ms var(--ease),visibility 0s linear 200ms}
.nm-panel ul{list-style:none;margin:0;padding:8px;border:1px solid var(--c-line);border-radius:14px;background:var(--c-surface);box-shadow:0 16px 40px color-mix(in srgb,var(--c-deep) 18%,transparent)}
.nm-panel a{display:block;padding:10px 12px;border-radius:9px;color:var(--c-ink);font-size:14px;font-weight:600;text-decoration:none;white-space:nowrap}
.nm-panel a:hover,.nm-panel a:focus-visible{background:var(--c-tint)}
.nav-mini:hover .nm-panel,.nav-mini:focus-within .nm-panel{visibility:visible;opacity:1;transform:none;transition:opacity 160ms var(--ease),transform 200ms var(--ease),visibility 0s}
.nav-mini:hover .dd-caret,.nav-mini:focus-within .dd-caret{transform:rotate(180deg)}
@media (prefers-reduced-motion:reduce){.nm-panel{transition:none}}

/* D338: seller pages v2, the seller layout (pages/seller-hub.tsx) for /sellers/, /sell/, /sell/{city}/, and /home-value/. */
.hero.sv-tall{--c-ink:#fff;--c-ink-2:rgba(255,255,255,.8);--c-line:rgba(255,255,255,.4);--c-link:#fff;--c-brand:var(--c-cta);--c-brand-ink:var(--c-cta-ink);--c-chip:rgba(255,255,255,.14);align-items:flex-end}
.hero.sv-tall .wrap{padding-bottom:56px}
.hero.sv-tall h1{max-width:14ch}
.hero.sv-tall .sub{margin-bottom:6px}
@media (min-width:1200px){.hero.sv-tall{min-height:680px}}
.sv-strip .stats{padding-top:28px}
.sv-facts{border-bottom:0}
.sv-facts li{display:flex !important;align-items:flex-start;gap:12px}
.sv-fi{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--c-tint);color:var(--c-accent)}
@media (min-width:768px){.sv-facts{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (min-width:1200px){.sv-facts{grid-template-columns:repeat(4,minmax(0,1fr))}.sv-facts li{padding:0 24px}}

/* One short call to action under a band: a line, one solid button or a quiet link. */
.sv-cta{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;margin-top:32px;padding-top:24px;border-top:1px solid var(--c-line)}
.sv-cta p{margin:0;flex:1 1 320px;font-size:16px;color:var(--c-ink-2);max-width:62ch}
.sv-cta p b{color:var(--c-ink)}
.sv-q{font-family:var(--font-display);font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--c-link);text-decoration:none;white-space:nowrap}
.sv-q:hover{text-decoration:underline;text-underline-offset:4px}
.sv-q.sv-quiet{text-transform:none;letter-spacing:0;font-family:var(--font-body);font-weight:600;font-size:14px;color:var(--c-ink-2)}
@media (max-width:767px){.sv-cta .btn{width:100%}}

/* Just sold: a rail on a phone, four across from a laptop up, twelve cards in three rows. */
.sv-sold2 .sv-sold-row{margin-top:8px}
@media (min-width:1024px){.sv-sold2 .sv-sold-row{gap:40px 24px}}
.sv-sold2 .lcard .lbody{padding-top:12px}

/* Why us: icon cards, one line each. */
.sv-why-grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))}
.sv-wcard{display:grid;align-content:start;gap:8px;padding:26px 24px;border:1px solid var(--c-line);border-radius:var(--r-panel);background:var(--c-surface)}
.sv-wi{display:grid;place-items:center;width:52px;height:52px;border-radius:14px;background:var(--c-tint);color:var(--c-accent);margin-bottom:8px}
.sv-wcard b{font-family:var(--font-display);font-size:19px;font-weight:800;letter-spacing:-.01em}
.sv-wcard p{margin:0;color:var(--c-ink-2);font-size:15px;line-height:1.6}

/* The process: a numbered timeline with icons. Down the left on a phone, across the page from a laptop up. */
.sv-tl{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:0;position:relative}
.sv-tl li{position:relative;display:grid;grid-template-columns:56px minmax(0,1fr);align-content:start;gap:16px;padding:0 0 28px}
.sv-tl li::before{content:"";position:absolute;left:27px;top:56px;bottom:0;width:2px;background:var(--c-line)}
.sv-tl li:last-child::before{display:none}
.sv-tn{position:relative;display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:var(--c-surface);border:2px solid var(--c-accent);color:var(--c-accent)}
.sv-tn i{position:absolute;right:-6px;top:-6px;display:grid;place-items:center;min-width:22px;height:22px;padding:0 4px;border-radius:11px;background:var(--c-deep);color:#fff;font:800 11px/1 var(--font-display);font-style:normal}
.sv-tl em{display:block;font-style:normal;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--c-accent);margin:4px 0 4px}
.sv-tl b{display:block;font-family:var(--font-display);font-size:18px;font-weight:800;letter-spacing:-.01em}
.sv-tl p{margin:6px 0 0;color:var(--c-ink-2);font-size:15px;line-height:1.55}
@media (min-width:1024px){
  .sv-tl{grid-template-columns:repeat(var(--n,6),minmax(0,1fr));gap:24px;margin-top:16px}
  .sv-tl li{grid-template-columns:minmax(0,1fr);gap:14px;padding:0}
  .sv-tl li::before{left:64px;right:-24px;top:27px;bottom:auto;width:auto;height:2px}
}

/* The seller portal, drawn: the sign-up band's ground and frame, with the seller's value, nearby sales, and the sale's steps. */
.sv-portal{position:relative;isolation:isolate;overflow:hidden;padding:64px 0;color:#fff;
  background:radial-gradient(ellipse at 90% 0%,color-mix(in srgb,var(--c-accent) 34%,transparent),transparent 55%),linear-gradient(120deg,var(--c-deep),color-mix(in srgb,var(--c-deep) 78%,var(--c-brand)));
  --c-ink:#fff;--c-ink-2:rgba(255,255,255,.8);--c-link:#fff;--c-brand:var(--c-cta);--c-brand-ink:var(--c-cta-ink)}
.sp-in{display:grid;gap:36px;align-items:center}
@media (min-width:900px){.sp-in{grid-template-columns:minmax(0,1fr) minmax(0,.95fr);gap:56px}.sv-portal{padding:80px 0}}
.sp-say h2{color:#fff;font-size:clamp(26px,2.8vw,40px);letter-spacing:-.02em;line-height:1.08;margin:10px 0 14px}
.sp-say .answer{color:rgba(255,255,255,.85);margin:0 0 20px;max-width:46ch}
.sp-say .answer b{color:#fff}
.sp-frame{--c-ink:var(--c-deep);--c-ink-2:color-mix(in srgb,var(--c-deep) 62%,#fff);background:#fff}
.sp-top{padding-top:56px}
.sp-k{display:block;font-size:9px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:color-mix(in srgb,var(--c-deep) 55%,#fff)}
.sp-val{display:grid;gap:6px;padding:14px 16px 4px}
.sp-val>b{font-family:var(--font-display);font-size:22px;font-weight:800;letter-spacing:-.02em;color:var(--c-deep);font-variant-numeric:tabular-nums}
.sp-val>b small{font:600 12px var(--font-body);color:color-mix(in srgb,var(--c-deep) 55%,#fff);margin:0 4px}
.sp-bar{position:relative;display:block;height:6px;border-radius:3px;margin:4px 0 6px;background:linear-gradient(90deg,var(--c-tint),var(--c-cta),var(--c-tint))}
.sp-bar b{position:absolute;top:50%;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:var(--c-deep);box-shadow:0 0 0 3px #fff}
.sp-near{padding:10px 16px 0}
.sp-near .ja-tiles{padding:8px 0 4px}
.sp-near .ja-tile b{color:var(--c-deep)}
.sp-near .ja-tile span{color:color-mix(in srgb,var(--c-deep) 55%,#fff)}
.sp-steps{list-style:none;margin:0;padding:12px 16px 16px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border-top:1px solid var(--c-tint)}
.sp-steps li{position:relative;display:grid;justify-items:center;gap:6px;text-align:center;font-size:10px;font-weight:600;color:color-mix(in srgb,var(--c-deep) 50%,#fff)}
.sp-steps li::before{content:"";position:absolute;top:6px;left:-50%;right:50%;height:2px;background:var(--c-tint)}
.sp-steps li:first-child::before{display:none}
.sp-steps i{position:relative;width:14px;height:14px;border-radius:50%;background:#fff;border:2px solid var(--c-tint)}
.sp-steps li.done i{background:var(--c-cta);border-color:var(--c-cta)}
.sp-steps li.done::before,.sp-steps li.now::before{background:var(--c-cta)}
.sp-steps li.now i{background:#fff;border-color:var(--c-cta);box-shadow:0 0 0 4px color-mix(in srgb,var(--c-cta) 25%,transparent)}
.sp-steps li.now span{color:var(--c-deep);font-weight:800}

/* The neighborhood trends line under the price chart. */
.sv-trends{display:grid;grid-template-columns:minmax(0,1fr);gap:10px 24px}
.sv-trends p{flex:none}
.sv-comms{margin:0;font-size:15px;line-height:1.9;color:var(--c-ink-2)}
.sv-comms a{color:var(--c-link);font-weight:600}
@media (min-width:1024px){.sv-trends{grid-template-columns:minmax(0,1fr) auto}.sv-trends .sv-comms{grid-column:1/-1}}

/* Homes sold at each price: the community pages' rows without links. */
.pr-list .pr-row{display:grid;grid-template-columns:minmax(120px,180px) 1fr 3.5em;align-items:center;gap:16px;padding:10px 0;border-bottom:1px solid var(--c-line);color:var(--c-ink)}

/* The cities as big photo cards. */
.sv-cgrid{display:grid;grid-auto-flow:column;grid-auto-columns:min(72%,280px);gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:6px}
.sv-cgrid::-webkit-scrollbar{display:none}
.sv-cgrid>*{scroll-snap-align:start}
@media (min-width:1024px){.sv-cgrid{grid-auto-flow:row;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));overflow:visible;gap:20px}}
.sv-ccard{position:relative;display:block;aspect-ratio:4/5;border-radius:var(--r-panel);overflow:hidden;background:var(--c-deep);color:#fff;text-decoration:none;isolation:isolate}
.sv-ccard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform 560ms var(--ease)}
.sv-ccard:hover img{transform:scale(1.04)}
.sv-cshade{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,transparent 35%,color-mix(in srgb,var(--c-deep) 88%,transparent))}
.sv-ctext{position:absolute;left:20px;right:20px;bottom:18px;display:grid;gap:2px}
.sv-ck{font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:rgba(255,255,255,.8)}
.sv-ctext>b{font-family:var(--font-display);font-size:26px;font-weight:800;letter-spacing:-.02em;line-height:1.1}
.sv-cnums{display:flex;flex-wrap:wrap;gap:4px 16px;margin-top:4px;font-size:14px;color:rgba(255,255,255,.88)}
.sv-cnums i{font-style:normal;font-weight:800;color:#fff;font-variant-numeric:tabular-nums}
.sv-ccard:hover{text-decoration:none}

/* An essay moved into the questions keeps its own paragraphs and links. */
.sv-faq details .prose{padding:0 0 20px;color:var(--c-ink-2);font-size:15px;line-height:1.65;max-width:68ch}
.sv-faq details .prose p{margin:0 0 12px}

/* Five seller reviews read two over three on a wide screen. */
@media (min-width:1024px){.sv-rev .rev-grid.five{grid-template-columns:repeat(6,minmax(0,1fr))}.sv-rev .rev-grid.five>*{grid-column:span 2}.sv-rev .rev-grid.five>*:nth-child(-n+2){grid-column:span 3}}
/* The seller tools fit one row on a wide screen. */
@media (min-width:1024px){.sv-tools .ht-grid{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}}
/* On a phone the seller reviews slide sideways and the why-us cards keep their icon beside the words, so neither runs a screen long. */
@media (max-width:767px){
  .sv-rev .rev-grid{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:min(84%,320px);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:6px}
  .sv-rev .rev-grid::-webkit-scrollbar{display:none}
  .sv-rev .rev-grid>*{scroll-snap-align:start}
  .sv-wcard{grid-template-columns:44px minmax(0,1fr);column-gap:14px;padding:18px}
  .sv-wcard .sv-wi{grid-row:span 2;width:44px;height:44px;border-radius:12px;margin:0}
}

/* D339: the seller guides in the seller layout (pages/seller-guides.tsx). Cards with a short list or a cost, two lists side by side,
   the calculator's costs as rows beside a worked sale, and the portal's showings. */
.sg-cards .sv-wcard .gchecks.small{margin-top:6px}
@media (min-width:1024px){.sg-grid{grid-template-columns:repeat(var(--cols,3),minmax(0,1fr))}}
.sg-ranked .sv-wi{position:relative}
.sg-rank{position:absolute;right:-6px;top:-6px;display:grid;place-items:center;min-width:22px;height:22px;padding:0 4px;border-radius:11px;background:var(--c-deep);color:var(--c-surface);font:800 11px/1 var(--font-display);font-style:normal}
.sg-cr{display:grid;gap:8px;margin:10px 0 0;padding-top:12px;border-top:1px solid var(--c-line)}
.sg-cr div{display:grid;grid-template-columns:64px minmax(0,1fr);gap:10px;align-items:baseline}
.sg-cr dt{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--c-accent)}
.sg-cr dd{margin:0;font-size:14px;line-height:1.5;color:var(--c-ink)}
.sg-note{margin:16px 0 0;font-size:13px;color:var(--c-ink-2)}
.sg-quote{margin:24px 0 0;padding:4px 0 4px 18px;border-left:3px solid var(--c-accent);font-family:var(--font-display);font-size:clamp(18px,1.6vw,22px);font-weight:700;line-height:1.35;letter-spacing:-.01em;color:var(--c-ink)}
.sg-vs{display:grid;gap:16px}
@media (min-width:768px){.sg-vs{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}}
.sg-col{padding:24px;border:1px solid var(--c-line);border-radius:var(--r-panel);background:var(--c-surface)}
.sg-col h3{display:flex;align-items:center;gap:10px;margin:0 0 14px;font-family:var(--font-display);font-size:19px;font-weight:800;letter-spacing:-.01em}
.sg-col h3 svg{flex:none;color:var(--c-accent)}
.sg-col ul{list-style:none;margin:0;padding:0;display:grid;gap:0}
.sg-col li{display:grid;grid-template-columns:18px minmax(0,1fr);gap:10px;padding:10px 0;border-top:1px solid var(--c-line);font-size:15px;line-height:1.5}
.sg-col li svg{margin-top:3px;color:var(--c-accent)}
.sg-col.no h3 svg,.sg-col.no li svg{color:var(--c-ink-2)}
.sg-rows{list-style:none;margin:0;padding:0;display:grid}
.sg-rows li{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:4px 14px;align-items:start;padding:16px 0;border-top:1px solid var(--c-line)}
.sg-rows li:first-child{border-top:0;padding-top:0}
.sg-ri{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--c-tint);color:var(--c-accent)}
.sg-rows b{display:block;font-family:var(--font-display);font-size:17px;font-weight:800}
.sg-rows p{margin:4px 0 0;font-size:14.5px;line-height:1.55;color:var(--c-ink-2)}
.sg-rows em{font-style:normal;font-family:var(--font-display);font-size:18px;font-weight:800;color:var(--c-ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.sg-receipt{display:grid;gap:14px;align-content:start;padding:26px 24px;border:1px solid var(--c-line);border-radius:var(--r-panel);background:var(--c-surface)}
.sg-receipt .mh-k{color:var(--c-accent)}
.sg-receipt dl{margin:0;display:grid}
.sg-receipt dl div{display:flex;justify-content:space-between;gap:16px;padding:10px 0;border-top:1px solid var(--c-line);font-size:15px}
.sg-receipt dt{color:var(--c-ink-2)}
.sg-receipt dd{margin:0;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.sg-receipt .sg-total{border-top:2px solid var(--c-ink)}
.sg-receipt .sg-total dt{color:var(--c-ink);font-weight:700}
.sg-receipt .sg-total dd{font-family:var(--font-display);font-size:22px;font-weight:800}
.sg-receipt p{margin:0;font-size:13px;color:var(--c-ink-2)}
@media (min-width:1024px){.sg-receipt{position:sticky;top:96px}}
.sg-example .sv-cta{border-top:0;padding-top:0;margin-top:24px}
.sp-shows{padding:14px 16px 6px}
.sp-shows ul{list-style:none;margin:8px 0 0;padding:0;display:grid}
.sp-shows li{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:10px;align-items:center;padding:9px 0;border-top:1px solid var(--c-tint);font-size:12px;color:var(--c-ink-2)}
.sp-shows li:first-child{border-top:0}
.sp-shows li b{font-family:var(--font-display);font-size:12px;font-weight:800;color:var(--c-deep)}
.sp-shows em{font-style:normal;font-size:10.5px;font-weight:700;padding:3px 8px;border-radius:10px;background:var(--c-tint);color:var(--c-deep);white-space:nowrap}
.sp-shows em.in{background:var(--c-cta);color:var(--c-cta-ink)}
@media (max-width:767px){
  .sg-cards .sv-wcard>ul,.sg-cards .sv-wcard>dl{grid-column:2}
  .sg-rows li{grid-template-columns:36px minmax(0,1fr)}
  .sg-rows em{grid-column:2;font-size:16px}
  .sg-ri{width:36px;height:36px}
}

/* D342: the buyer pages in the seller pages' family (pages/buyer-guides.tsx). The tall hero carries the hero search bar as the home
   page draws it (its own colors, not the hero's white ones); a tool page's hero is a little shorter so the tool shows sooner. */
.hero.by-tall{align-items:flex-end}
.hero.by-tall .wrap{padding-bottom:56px}
.hero.by-tall h1{max-width:14ch}
.hero.by-tall .sub{margin-bottom:22px}
.hero.by-tall .hsearch{margin-top:6px}
.hero.by-tall .hv-trust{margin-top:18px}
@media (min-width:1200px){.hero.by-tall{min-height:680px}.hero.by-tall.by-mid{min-height:540px}}
@media (min-width:768px) and (max-width:1199px){.hero.by-tall.by-mid{min-height:480px}}
.by-strip .stats{padding-top:28px}
@media (min-width:1024px){.by-places .sv-cgrid{grid-template-columns:repeat(4,minmax(0,1fr))}.by-places .sv-ccard{aspect-ratio:5/4}}
.by-strip-band .stats{border-bottom:0;padding-bottom:28px}
/* Listing cards in the seller pages' rail: a swipe row on a phone, four across on a wide screen. */
.by-homes{margin-top:8px}
@media (min-width:1024px){.by-homes{gap:40px 24px}}
.by-homes .oh-item .oh-time{font-size:14px}
/* Small tiles with a big value, under a band's words. */
.by-tips{display:grid;gap:12px;margin:28px 0 0}
@media (min-width:768px){.by-tips{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px}}
.by-tips div{padding:18px 20px;border:1px solid var(--c-line);border-radius:var(--r-panel);background:var(--c-surface)}
.by-tips dt{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--c-accent)}
.by-tips dd{margin:6px 0 0;display:grid;gap:4px}
.by-tips dd b{font-family:var(--font-display);font-size:22px;font-weight:800;letter-spacing:-.01em;color:var(--c-ink)}
.by-tips dd span{font-size:14px;line-height:1.5;color:var(--c-ink-2)}
.by-tl2 .by-tips{grid-template-columns:minmax(0,1fr)}
/* A long timeline runs down the page beside its heading. */
@media (min-width:1024px){
  .sv-tl.by-vert{grid-template-columns:minmax(0,1fr);gap:0;margin-top:0}
  .sv-tl.by-vert li{grid-template-columns:56px minmax(0,1fr);gap:16px;padding:0 0 28px}
  .sv-tl.by-vert li::before{left:27px;right:auto;top:56px;bottom:0;width:2px;height:auto}
  .by-stick{position:sticky;top:96px;align-self:start}
}
/* The preferred lender: who they are and one action, on a card of their own. */
.by-lcard{display:grid;gap:18px;padding:26px 24px;border:1px solid var(--c-line);border-radius:var(--r-panel);background:var(--c-surface)}
.by-lwho{display:flex;align-items:center;gap:16px}
.by-lwho b{display:block;font-family:var(--font-display);font-size:20px;font-weight:800;letter-spacing:-.01em}
.by-lwho span{font-size:14px;color:var(--c-ink-2)}
.by-lphoto{flex:none;width:72px;height:72px;border-radius:50%;overflow:hidden;background:var(--c-tint)}
.by-lphoto img{width:100%;height:100%;object-fit:cover}
.by-lphoto.mono{display:grid;place-items:center;font:800 20px var(--font-display);color:var(--c-ink)}
.by-lcard .lender-mark{margin:0;width:150px;height:44px}
.by-lgo{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px}
@media (max-width:767px){.by-lgo .btn{width:100%}}
.by-lender .answer b{color:var(--c-ink)}
/* A worked example or a who-pays note beside the rows. */
.by-note .by-big{font-family:var(--font-display);font-size:18px;font-weight:700;line-height:1.4;color:var(--c-ink)}
/* The glossary: a find field, a letter row, and every term as a card. */
.by-gfind{display:grid;gap:14px;margin:8px 0 20px}
@media (min-width:1024px){.by-gfind{grid-template-columns:minmax(0,420px) minmax(0,1fr);align-items:center;gap:24px}}
.by-gfield{display:flex;align-items:center;gap:10px;min-height:52px;padding:0 4px;border-bottom:2px solid var(--c-ink);color:var(--c-ink-2)}
.by-gfield input{flex:1;min-width:0;border:0;background:transparent;color:var(--c-ink);font:500 17px var(--font-body);outline:none;height:100%}
.by-gfield input::placeholder{color:var(--c-ink-2);opacity:.6}
.by-gfield:focus-within{border-color:var(--c-cta)}
.by-letters{display:flex;flex-wrap:wrap;gap:2px}
.by-letters button{min-width:32px;min-height:36px;padding:0 6px;border:0;border-radius:8px;background:transparent;color:var(--c-link);font:700 14px var(--font-display);cursor:pointer}
.by-letters button:hover{background:var(--c-tint)}
.by-letters button[aria-pressed="true"]{background:var(--c-cta);color:var(--c-cta-ink)}
.by-gnone{margin:8px 0 0;color:var(--c-ink-2)}
.by-ggroup{margin-top:32px}
.by-ggroup h3{margin:0 0 6px;font-family:var(--font-display);font-size:22px;font-weight:800;letter-spacing:-.01em}
.by-gintro{margin:0 0 16px;color:var(--c-ink-2);max-width:68ch}
.by-gcards{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr))}
.by-gterm{padding:18px 20px;border:1px solid var(--c-line);border-radius:var(--r-panel);background:var(--c-surface)}
.by-gterm b{display:block;font-family:var(--font-display);font-size:17px;font-weight:800;margin-bottom:6px}
.by-gterm .prose{font-size:14.5px;line-height:1.6;color:var(--c-ink-2)}
.by-gterm .prose p{margin:0 0 8px}
.by-gterm .prose p:last-child{margin:0}
.by-gterm[hidden],.by-ggroup[hidden]{display:none}

/* D344: the market report (pages/market-report.tsx). The seller pages' tall hero and bands, six numbers with their change from a
   year ago, the supply gauge, the charts drawn in SVG, the hottest places tinted by pace, and the paired price bands. Colors only
   from theme tokens; photos stay as uploaded. */
.mr-hero h1{max-width:16ch}
.mr-hero .sub{max-width:60ch}
.mr-hero .sub b{color:#fff}
.mr-hero .eyebrow{color:#fff;margin-bottom:10px}
.mr-asof{display:flex;align-items:baseline;gap:10px;margin:4px 0 22px;font-size:14px;color:var(--c-ink-2)}
.mr-live{flex:none;align-self:flex-start;margin-top:6px;width:8px;height:8px;border-radius:50%;background:var(--c-live);box-shadow:0 0 0 4px color-mix(in srgb,var(--c-live) 30%,transparent)}
.mr-hero .hv-trust{margin-top:18px}
.mr-strip{padding-top:28px}
.mr-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 16px;margin:0;padding:0 0 22px;border-bottom:1px solid var(--c-line)}
@media (min-width:768px){.mr-stats{grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 24px}}
@media (min-width:1200px){.mr-stats{grid-template-columns:repeat(6,minmax(0,1fr))}.mr-stat+.mr-stat{border-left:1px solid var(--c-line);padding-left:20px}}
.mr-stat{display:flex;flex-direction:column-reverse;justify-content:flex-end;gap:8px;min-width:0}
.mr-stat dt{font-size:12px;color:var(--c-ink-2);line-height:1.35}
.mr-stat dd{margin:0;display:grid;gap:8px;justify-items:start}
.mr-stat dd>b{font-family:var(--font-display);font-size:var(--t-stat);font-weight:800;line-height:1;letter-spacing:-.02em;color:var(--c-ink);white-space:nowrap;font-variant-numeric:tabular-nums}
.mr-ch{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:700;line-height:1.2;color:var(--c-ink-2);white-space:nowrap}
.mr-ch svg{flex:none}
.mr-ch.up{color:var(--c-live)}
.mr-ch.down,.mr-ch.flat{color:var(--c-ink-2)}
.mr-lean span{padding:3px 8px;border-radius:var(--r-chip);background:var(--c-tint);color:var(--c-link)}
.mr-lean.seller span{background:color-mix(in srgb,var(--c-cta) 16%,var(--c-surface));color:var(--c-ink)}
.mr-fresh{display:flex;align-items:flex-start;gap:8px;margin:0;padding:14px 0 0;font-size:12px;color:var(--c-ink-2)}
.mr-fresh::before{content:"";flex:none;width:6px;height:6px;margin-top:5px;border-radius:50%;background:var(--c-live)}

/* The month's note beside its video. */
.mr-note-in{display:grid;gap:32px;align-items:start}
@media (min-width:1024px){.mr-note-in{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:56px}.mr-note-in.solo{grid-template-columns:minmax(0,1fr)}}
.mr-note-say h2{margin:10px 0 18px}
.mr-note-say .mh-by{margin-bottom:22px}
.mr-note-body p{margin:0 0 14px;color:var(--c-ink-2);font-size:17px;line-height:1.7;max-width:62ch}
.mr-note-vid .poster{border-radius:var(--r-panel);overflow:hidden}

/* Two columns: words beside a picture. */
.mr-two{display:grid;gap:32px;align-items:center}
@media (min-width:1024px){.mr-two{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px}}
.mr-two .answer b{color:var(--c-ink)}

/* The supply gauge: three zones, today's months on it. */
.mr-gauge-card{padding:28px 24px 22px;border:1px solid var(--c-line);border-radius:var(--r-sheet);background:var(--c-surface)}
.mr-gauge{position:relative;padding:62px 0 26px}
.mr-gtrack{display:flex;height:14px;border-radius:7px;overflow:hidden}
.mr-gtrack .z{display:block;height:100%}
.mr-gtrack .seller,.mr-gzones li:nth-child(1)::before{background:var(--c-cta)}
.mr-gtrack .balanced,.mr-gzones li:nth-child(2)::before{background:color-mix(in srgb,var(--c-accent) 55%,var(--c-surface))}
.mr-gtrack .buyer,.mr-gzones li:nth-child(3)::before{background:color-mix(in srgb,var(--c-brand) 22%,var(--c-surface))}
.mr-gmark{position:absolute;top:0;transform:translateX(-50%);display:grid;justify-items:center;text-align:center}
.mr-gmark b{font-family:var(--font-display);font-size:30px;font-weight:800;line-height:1;letter-spacing:-.02em;color:var(--c-ink)}
.mr-gmark span{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--c-ink-2)}
.mr-gmark::after{content:"";width:4px;height:30px;margin-top:4px;border-radius:2px;background:var(--c-ink);box-shadow:0 0 0 3px var(--c-surface)}
.mr-gticks{position:absolute;left:0;right:0;bottom:0;height:16px;font-size:11px;color:var(--c-ink-2);font-variant-numeric:tabular-nums}
.mr-gticks span{position:absolute;transform:translateX(-50%)}
.mr-gticks span:first-child{transform:none}
.mr-gticks span:last-child{transform:translateX(-100%)}
.mr-gzones{list-style:none;margin:16px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.mr-gzones li{display:grid;gap:2px;padding:12px 0 0 0;font-size:12px;color:var(--c-ink-2);position:relative}
.mr-gzones li::before{content:"";position:absolute;top:0;left:0;width:22px;height:4px;border-radius:2px}
.mr-gzones b{font-family:var(--font-display);font-size:14px;font-weight:800;color:var(--c-ink-2)}
.mr-gzones li.on b{color:var(--c-ink)}

/* Charts: a big one beside a small one, or three across; one column on a phone. */
.mr-cgrid{display:grid;gap:20px;margin-top:8px}
@media (min-width:1024px){.mr-cgrid.two{grid-template-columns:minmax(0,1.65fr) minmax(0,1fr)}.mr-cgrid.three{grid-template-columns:repeat(3,minmax(0,1fr))}}
.mr-chart{display:flex;flex-direction:column;min-width:0;padding:24px 22px 18px;border:1px solid var(--c-line);border-radius:var(--r-sheet);background:var(--c-surface)}
.mr-chead{display:flex;align-items:center;justify-content:space-between;gap:12px}
.mr-chead h3{margin:0;font-family:var(--font-display);font-size:18px;font-weight:800;letter-spacing:-.01em}
.mr-chead .vswitch button{padding:7px 11px;min-height:30px}
.mr-take{margin:10px 0 18px;font-size:15px;line-height:1.55;color:var(--c-ink-2)}
.mr-pane{margin-top:auto}
.mr-plot{position:relative;height:200px;margin:12px 0 8px 46px}
.mr-chart.wide .mr-plot{height:240px}
@media (min-width:768px){.mr-plot{height:220px}.mr-chart.wide .mr-plot{height:300px}}
.mr-gl{position:absolute;left:0;right:0;border-top:1px solid var(--c-line)}
.mr-gl span{position:absolute;right:calc(100% + 8px);top:-8px;font-size:11px;line-height:16px;color:var(--c-ink-2);font-variant-numeric:tabular-nums;white-space:nowrap}
.mr-tip[hidden],.mr-xh[hidden]{display:none}
.mr-plot svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.mr-plot path.now{fill:none;stroke:var(--c-accent);stroke-width:2.5px;stroke-linejoin:round;stroke-linecap:round}
.mr-plot path.then{fill:none;stroke:var(--c-ink-2);stroke-width:1.5px;stroke-dasharray:5 5;opacity:.6}
.mr-plot path.area{fill:color-mix(in srgb,var(--c-accent) 12%,transparent);stroke:none}
.mr-plot rect.now{fill:var(--c-accent)}
.mr-plot rect.now.last{fill:var(--c-cta)}
.mr-plot rect.then{fill:color-mix(in srgb,var(--c-ink-2) 22%,transparent)}
.mr-dot{position:absolute;width:7px;height:7px;margin:-3.5px 0 0 -3.5px;border-radius:50%;background:var(--c-accent);box-shadow:0 0 0 2px var(--c-surface);pointer-events:none}
.mr-dot.end{width:12px;height:12px;margin:-6px 0 0 -6px;background:var(--c-cta);box-shadow:0 0 0 3px var(--c-surface)}
.mr-end{position:absolute;transform:translate(-100%,-170%);font-family:var(--font-display);font-size:13px;font-weight:800;color:var(--c-ink);white-space:nowrap;pointer-events:none;font-variant-numeric:tabular-nums;background:color-mix(in srgb,var(--c-surface) 80%,transparent);padding:0 2px}
.mr-plot.bar .mr-end{transform:translate(-30%,-130%)}
.mr-xh{position:absolute;top:0;bottom:0;width:1px;background:var(--c-ink-2);opacity:.45;pointer-events:none}
.mr-hits{position:absolute;inset:0;display:grid}
.mr-hits button{background:transparent;border:0;padding:0;margin:0;cursor:crosshair}
.mr-hits button:focus-visible{outline:2px solid var(--c-accent);outline-offset:-2px}
.mr-tip{position:absolute;top:-6px;transform:translateX(-50%);display:grid;gap:2px;background:var(--c-surface);color:var(--c-ink);border:1px solid var(--c-line);border-radius:var(--r-control);box-shadow:0 6px 20px color-mix(in srgb,var(--c-deep) 18%,transparent);padding:8px 12px;font-size:12px;white-space:nowrap;pointer-events:none;z-index:2}
.mr-tip b{font-family:var(--font-display);font-size:16px;font-weight:800;font-variant-numeric:tabular-nums}
.mr-tip span,.mr-tip em{color:var(--c-ink-2);font-style:normal}
.mr-xl{display:grid;margin-left:46px;text-align:center;font-size:11px;color:var(--c-ink-2)}
@media (max-width:1023px){.mr-xl .odd{visibility:hidden}}
@media (min-width:1024px){.mr-cgrid.three .mr-xl .odd{visibility:hidden}}
.mr-key{display:flex;flex-wrap:wrap;gap:6px 18px;margin:12px 0 0;font-size:12px;color:var(--c-ink-2)}
.mr-key .k{display:inline-flex;align-items:center;gap:8px}
.mr-key .k::before{content:"";width:18px;height:0;border-top:3px solid var(--c-accent)}
.mr-key .k.then::before{border-top:2px dashed var(--c-ink-2);opacity:.7}
.mr-key .k.bar::before{width:12px;height:12px;border:0;border-radius:2px;background:var(--c-accent)}
.mr-key .k.bar.then::before{background:color-mix(in srgb,var(--c-ink-2) 22%,transparent);opacity:1}
.mr-key .k.bar.sold::before{background:var(--c-cta)}
.mr-chart .fine{margin:14px 0 0;font-size:12px;line-height:1.5}
.mr-table{margin-top:auto;max-height:320px;overflow:auto}
.mr-table th,.mr-table td{padding:9px 10px}

/* Where it's hottest: ranked rows, the faster the darker. */
.mr-hgrid{display:grid;gap:48px}
.mr-hhead{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 20px;margin-bottom:14px}
.mr-hlist h3{margin:0;font-family:var(--font-display);font-size:22px;font-weight:800}
.mr-hnote{margin:0;font-size:13px;color:var(--c-ink-2);max-width:72ch}
.mr-hlist ol{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.mr-hcols,.mr-hot a{display:grid;grid-template-columns:30px minmax(0,1fr) 110px 170px 70px 120px;align-items:center;column-gap:24px}
.mr-hcols{padding:0 20px 8px;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--c-ink-2)}
.mr-hcols span{text-align:right}
.mr-hcols span:nth-child(4){text-align:left}
@media (min-width:768px){.mr-hv small{display:none}.mr-hname small{display:block}}
.mr-hot a{position:relative;row-gap:6px;padding:14px 20px 16px;border-radius:var(--r-panel);text-decoration:none;color:var(--c-ink);overflow:hidden;
  background:color-mix(in srgb,var(--c-cta) calc(4% + var(--heat) * 16%),var(--c-surface));border:1px solid color-mix(in srgb,var(--c-cta) calc(8% + var(--heat) * 20%),var(--c-line))}
.mr-hot a:hover{border-color:var(--c-cta);text-decoration:none}
.mr-rank{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--c-deep);color:var(--c-surface);font:800 13px/1 var(--font-display)}
.mr-hot:nth-child(-n+3) .mr-rank{background:var(--c-cta);color:var(--c-cta-ink)}
.mr-hname{display:grid;min-width:0}
.mr-hname b{font-family:var(--font-display);font-size:16px;font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mr-hname small,.mr-hv small{font-size:11px;color:var(--c-ink-2)}
.mr-hv{display:grid;justify-items:end;text-align:right;min-width:52px}
.mr-hv b{font-family:var(--font-display);font-size:15px;font-weight:800;font-variant-numeric:tabular-nums}
.mr-hch{justify-items:start;text-align:left}
.mr-heat{position:absolute;left:0;right:0;bottom:0;height:3px;background:color-mix(in srgb,var(--c-cta) 10%,transparent)}
.mr-heat i{display:block;height:100%;width:calc(12% + var(--heat) * 88%);background:var(--c-cta)}
@media (max-width:767px){
  .mr-hcols{display:none}
  .mr-hot a{grid-template-columns:30px repeat(3,minmax(0,1fr));column-gap:12px;padding:14px 14px 16px}
  .mr-hname{grid-column:2/-1}
  .mr-hv{grid-row:2;justify-items:start;text-align:left;min-width:0}
  .mr-hot a>:nth-child(3){grid-column:2}
  .mr-hot a>:nth-child(5){grid-column:3}
  .mr-hot a>:nth-child(6){grid-column:4}
  .mr-hch{grid-row:3;grid-column:2/-1;min-width:0}
}

/* Homes for sale and homes sold at each price, with each band's months of supply. */
.mr-bands .mr-key{margin:0 0 6px}
.mr-blist{list-style:none;margin:0;padding:0}
.mr-brow{display:grid;grid-template-columns:minmax(110px,150px) minmax(0,1fr) auto 76px;align-items:center;gap:8px 20px;padding:14px 0;border-bottom:1px solid var(--c-line)}
.mr-blabel{font-family:var(--font-display);font-weight:800;font-size:15px}
.mr-bbars{display:grid;gap:5px}
.mr-bbars i{display:block;height:11px;border-radius:0 4px 4px 0}
.mr-bbars .a{background:color-mix(in srgb,var(--c-accent) 45%,var(--c-surface))}
.mr-key .k.bar.now::before{background:color-mix(in srgb,var(--c-accent) 45%,var(--c-surface))}
.mr-charts .mr-key .k.bar.now::before{background:var(--c-accent)}
.mr-bbars .s{background:var(--c-cta)}
.mr-bnums{display:grid;gap:2px;font-size:13px;color:var(--c-ink-2);text-align:right;white-space:nowrap}
.mr-bnums b{color:var(--c-ink);font-variant-numeric:tabular-nums}
.mr-bsup{justify-self:end;display:inline-flex;align-items:baseline;gap:3px;padding:6px 10px;border-radius:var(--r-control);font-size:12px;color:var(--c-ink-2);background:var(--c-tint)}
.mr-bsup b{font-family:var(--font-display);font-size:16px;font-weight:800;color:var(--c-ink)}
.mr-bsup.seller{background:var(--c-cta);color:var(--c-cta-ink)}
.mr-bsup.seller b{color:var(--c-cta-ink)}
.mr-bsup.balanced{background:color-mix(in srgb,var(--c-accent) 30%,var(--c-surface))}
@media (max-width:767px){
  .mr-brow{grid-template-columns:minmax(0,1fr) auto;gap:8px 12px}
  .mr-bbars{grid-column:1/-1;grid-row:2}
  .mr-bnums{grid-row:3;grid-column:1/-1;display:flex;gap:14px;text-align:left}
  .mr-bsup{grid-row:1;grid-column:2}
}

/* The biggest sales as large photo cards, then the newest as the seller pages' rail. */
.mr-bigs{display:grid;gap:16px;margin-bottom:56px}
@media (min-width:900px){.mr-bigs{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}}
.mr-big{position:relative;display:block;aspect-ratio:4/5;max-height:520px;width:100%;border-radius:var(--r-sheet);overflow:hidden;background:var(--c-deep);color:#fff;text-decoration:none;isolation:isolate}
@media (max-width:899px){.mr-big{aspect-ratio:4/3}}
.mr-brank{position:absolute;right:18px;top:18px;padding:6px 10px;border-radius:var(--r-chip);background:color-mix(in srgb,var(--c-deep) 72%,transparent);font:800 11px/1 var(--font-display);color:#fff;letter-spacing:.1em;text-transform:uppercase}
.mr-big:hover{text-decoration:none}
.mr-big img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform 560ms var(--ease)}
.mr-big:hover img{transform:scale(1.03)}
.mr-bshade{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,transparent 40%,color-mix(in srgb,var(--c-deep) 86%,transparent))}
.mr-btag{position:absolute;left:18px;top:18px;padding:6px 10px;border-radius:var(--r-chip);background:var(--c-cta);color:var(--c-cta-ink);font:800 11px/1 var(--font-display);letter-spacing:.1em;text-transform:uppercase}
.mr-btext{position:absolute;left:22px;right:22px;bottom:20px;display:grid;gap:4px}
.mr-btext b{font-family:var(--font-display);font-size:clamp(26px,3vw,40px);font-weight:800;letter-spacing:-.02em;line-height:1}
.mr-btext span{font-size:14px;color:rgba(255,255,255,.88)}
.mr-btext em{font-style:normal;font-size:14px;color:rgba(255,255,255,.8)}
.mr-newest .sv-sold-row{margin-top:8px}

/* What it means: two cards side by side. */
.mr-mgrid{display:grid;gap:20px}
@media (min-width:900px){.mr-mgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}}
.mr-mean{display:flex;flex-direction:column;padding:30px 28px;border:1px solid var(--c-line);border-radius:var(--r-sheet);background:var(--c-surface);border-top:4px solid var(--c-cta)}
.mr-mean.buy{border-top-color:var(--c-accent)}
.mr-mtop{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:8px 20px;padding-bottom:18px;margin-bottom:20px;border-bottom:1px solid var(--c-line)}
.mr-mean h3{margin:0;font-family:var(--font-display);font-size:26px;font-weight:800;letter-spacing:-.01em}
.mr-mfig{margin:0;display:grid;justify-items:end;text-align:right}
.mr-mfig b{font-family:var(--font-display);font-size:28px;font-weight:800;line-height:1;letter-spacing:-.02em;color:var(--c-cta);font-variant-numeric:tabular-nums}
.mr-mean.buy .mr-mfig b{color:var(--c-accent)}
.mr-mfig span{font-size:12px;color:var(--c-ink-2)}
.mr-mean ul{list-style:none;margin:0 0 24px;padding:0;display:grid;gap:14px}
.mr-mean li{position:relative;padding-left:28px;font-size:16px;line-height:1.55;color:var(--c-ink-2)}
.mr-mean li::before{content:"";position:absolute;left:2px;top:7px;width:12px;height:12px;border-radius:50%;border:3px solid var(--c-cta)}
.mr-mean.buy li::before{border-color:var(--c-accent)}
.mr-macts{margin-top:auto;display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px}
@media (max-width:767px){.mr-macts .btn{width:100%}}

/* The ZIP codes: a tall table that scrolls inside the band. */
.mr-zipbox{max-height:560px;overflow:auto;border:1px solid var(--c-line);border-radius:var(--r-panel);background:var(--c-surface)}
.mr-zipbox thead th{position:sticky;top:0;background:var(--c-surface);z-index:1}
.mr-zipbox th:nth-child(2),.mr-zipbox td:nth-child(2){text-align:left}

/* The supply facts under the gauge. */
.mr-gfacts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:22px 0 0;padding-top:18px;border-top:1px solid var(--c-line)}
.mr-gfacts dt{font-size:12px;color:var(--c-ink-2)}
.mr-gfacts dd{margin:4px 0 0;font-family:var(--font-display);font-size:20px;font-weight:800;color:var(--c-ink);font-variant-numeric:tabular-nums}
.mr-value .hv-stats dd{font-variant-numeric:tabular-nums}
@media (max-width:599px){.mr-mfig{justify-items:start;text-align:left;width:100%}}
/* D345: the team pages (pages/team-pages.tsx): /about/, the join page, and each agent's page. The tall hero carries the team's
   real portraits as uploaded, on a white ground so a cutout or a studio backdrop both sit well; nothing is filtered or blurred. */
.hero.tp-hero .wrap{padding-bottom:56px}
.tp-hrow{display:grid;gap:28px;align-items:end}
.tp-htext{min-width:0}
.tp-hero h1{max-width:13ch}
@media (min-width:1024px){.tp-hero h1{font-size:clamp(56px,5.4vw,80px);max-width:12ch}}
.tp-hero .sub{max-width:44ch}
.tp-hero .actions .btn svg{vertical-align:-3px;margin-right:6px}
.tp-trust{margin-top:18px}
.tp-hlic{margin:0 0 18px;font-size:14px;font-weight:600;letter-spacing:.02em;color:rgba(255,255,255,.86)}
@media (min-width:1024px){.tp-hrow{grid-template-columns:minmax(0,1fr) auto;gap:48px}}
@media (min-width:1200px){.hero.tp-hero{min-height:720px}}

/* The faces: staggered portrait cards on a wide screen, a row of overlapping circles on a phone. */
.tp-faces{display:flex;align-items:flex-end;padding-bottom:4px}
.tp-face{position:relative;display:block;flex:none;color:#fff;text-decoration:none;z-index:calc(10 - var(--i))}
.tp-face .tp-ph{display:block;width:56px;height:56px;border-radius:50%;overflow:hidden;background:#fff;border:3px solid #fff;box-shadow:0 6px 18px color-mix(in srgb,var(--c-deep) 35%,transparent)}
.tp-face .tp-ph img{width:100%;height:100%;object-fit:cover;object-position:center 18%}
.tp-face+.tp-face{margin-left:-14px}
.tp-face>span{display:none}
@media (min-width:1024px){
  .tp-faces{gap:12px;padding-top:36px}
  .tp-face{width:108px;transition:transform 220ms var(--ease)}
  .tp-face+.tp-face{margin-left:0}
  .tp-face:nth-child(even){transform:translateY(-32px)}
  .tp-face:hover{transform:translateY(-6px)}
  .tp-face:nth-child(even):hover{transform:translateY(-38px)}
  .tp-face .tp-ph{width:108px;height:144px;border-radius:16px;border:0;box-shadow:0 18px 40px color-mix(in srgb,var(--c-deep) 45%,transparent)}
  .tp-face>span{display:grid;gap:2px;padding:10px 2px 0;text-shadow:0 1px 10px color-mix(in srgb,var(--c-deep) 70%,transparent)}
  .tp-face b{font-family:var(--font-display);font-size:13px;font-weight:800;line-height:1.2}
  .tp-face em{display:none}
  .tp-faces.n2 .tp-face,.tp-faces.n3 .tp-face{width:150px}.tp-faces.n2 .tp-ph,.tp-faces.n3 .tp-ph{width:150px;height:200px}
}

/* The numbers strip holds as many items as there are numbers. */
.tp-strip .stats{padding-top:28px}
@media (min-width:768px){.tp-strip .stats{grid-template-columns:repeat(var(--n,4),minmax(0,1fr))}}
@media (min-width:768px) and (max-width:1023px){.tp-strip .stats{grid-template-columns:repeat(3,minmax(0,1fr))}.tp-strip .stats .stat:nth-child(3n+1){padding-left:0;border-left:0}}
.tp-strip .stats .stat span{white-space:normal}

/* The team as large portrait cards. */
.tp-grid{display:grid;gap:14px;grid-auto-flow:column;grid-auto-columns:min(62%,240px);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:6px}
.tp-grid::-webkit-scrollbar{display:none}
.tp-grid>*{scroll-snap-align:start}
@media (min-width:768px){.tp-grid{grid-auto-flow:row;grid-auto-columns:auto;overflow:visible;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px}.tp-grid.few{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}}
@media (min-width:1200px){.tp-grid{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}.tp-grid.few{grid-template-columns:repeat(4,minmax(0,1fr))}}
.tp-card{position:relative;display:grid;grid-template-rows:auto 1fr;border:1px solid var(--c-line);border-radius:var(--r-panel);overflow:hidden;background:var(--c-surface);color:var(--c-ink);text-decoration:none;transition:transform 180ms var(--ease),box-shadow 180ms var(--ease),border-color 180ms var(--ease)}
.tp-card:hover{text-decoration:none;transform:translateY(-3px);border-color:var(--c-ink);box-shadow:0 18px 40px color-mix(in srgb,var(--c-deep) 14%,transparent)}
.tp-card .tp-ph{display:block;aspect-ratio:4/5;background:#fff;overflow:hidden}
.tp-card .tp-ph img{width:100%;height:100%;object-fit:cover;object-position:center 15%;transition:transform 560ms var(--ease)}
.tp-card:hover .tp-ph img{transform:scale(1.03)}
.tp-ph.mono{display:grid;place-items:center;background:var(--c-tint);color:var(--c-ink);font:800 40px var(--font-display)}
.tp-ctext{display:grid;align-content:start;gap:4px;padding:16px 44px 20px 18px}
.tp-role{font-family:var(--font-display);font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--c-accent)}
.tp-ctext b{font-family:var(--font-display);font-size:20px;font-weight:800;letter-spacing:-.01em;line-height:1.15}
.tp-focus{font-size:14px;line-height:1.45;color:var(--c-ink-2)}
.tp-n{margin-top:6px;font-size:13px;color:var(--c-ink-2)}
.tp-n i{font-style:normal;font-weight:800;color:var(--c-ink);font-variant-numeric:tabular-nums}
.tp-go{position:absolute;right:16px;bottom:18px;color:var(--c-ink-2);font-size:18px;transition:transform 180ms var(--ease)}
.tp-card:hover .tp-go{transform:translateX(3px);color:var(--c-ink)}
/* The join line under the portraits: one wide card, the editor's words and one link. */
.tp-joinrow{display:grid;grid-template-columns:52px minmax(0,1fr);gap:6px 18px;align-items:center;margin-top:20px;padding:20px 24px;border-radius:var(--r-panel);background:var(--c-tint);color:var(--c-ink);text-decoration:none}
.tp-joinrow:hover{text-decoration:none}
.tp-joinrow .tp-plus{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--c-surface);color:var(--c-accent)}
.tp-joinrow b{display:block;font-family:var(--font-display);font-size:19px;font-weight:800}
.tp-joinrow span span{display:block;font-size:15px;color:var(--c-ink-2)}
.tp-joinrow em{grid-column:2;font-style:normal;font-family:var(--font-display);font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--c-link);white-space:nowrap}
@media (min-width:768px){.tp-joinrow{grid-template-columns:52px minmax(0,1fr) auto}.tp-joinrow em{grid-column:auto}}
@media (max-width:767px){.tp-ctext{padding:12px 30px 16px 14px}.tp-ctext b{font-size:17px}.tp-focus{font-size:13px}.tp-go{right:12px;bottom:14px}}

/* The people behind each deal: round faces in a row beside the words. */
.tp-staff-in{display:grid;gap:24px}
@media (min-width:1024px){.tp-staff-in{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:64px;align-items:center}}
.tp-slist{list-style:none;margin:0;padding:0;display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.tp-slist li{display:flex;align-items:center;gap:14px;padding:16px 18px;border:1px solid var(--c-line);border-radius:var(--r-panel);background:var(--c-surface)}
.tp-sph{flex:none;display:grid;place-items:center;width:52px;height:52px;border-radius:50%;overflow:hidden;background:var(--c-tint);color:var(--c-ink);font:800 16px var(--font-display)}
.tp-sph img{width:100%;height:100%;object-fit:cover}
.tp-slist b{display:block;font-family:var(--font-display);font-size:16px;font-weight:800}
.tp-slist span span{font-size:13px;color:var(--c-ink-2)}

/* The brokerage band's small label. */
.tp-k{display:block;margin:4px 0 10px;font-family:var(--font-display);font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--c-accent)}

/* The recruiting videos side by side, the brokerage cards under them. */
.tp-vgrid{display:grid;gap:24px}
@media (min-width:768px){.tp-vgrid.n2{grid-template-columns:repeat(2,minmax(0,1fr))}}
.tp-vcards{margin-top:32px}

/* The trade: what the team provides beside what the agent brings, with the split when the team states one. */
.tp-trade .sg-col.tp-we{border-top:4px solid var(--c-accent)}
.tp-trade .sg-col.tp-you{border-top:4px solid var(--c-ink)}
.tp-ctext2{margin:-6px 0 12px;font-size:14.5px;color:var(--c-ink-2)}

/* An agent's page: the portrait card in the hero. */
.tp-me{margin:0;justify-self:start;width:168px;border-radius:20px;overflow:hidden;background:#fff;box-shadow:0 24px 60px color-mix(in srgb,var(--c-deep) 50%,transparent);order:-1}
.tp-me .tp-ph{display:block;aspect-ratio:4/5;background:#fff}
.tp-me .tp-ph img{width:100%;height:100%;object-fit:cover;object-position:center 15%}
.tp-me figcaption{display:none}
@media (min-width:1024px){
  .tp-me{order:0;justify-self:end;width:340px}
  .tp-me figcaption{display:grid;gap:2px;padding:14px 18px 16px;background:var(--c-deep);color:#fff}
  .tp-me figcaption b{font-family:var(--font-display);font-size:17px;font-weight:800}
  .tp-me figcaption span{font-size:13px;color:rgba(255,255,255,.75)}
}
@media (min-width:1400px){.tp-me{width:380px}}
@media (max-width:1023px){.tp-agent-hero .tp-hrow{gap:20px}.hero.tp-agent-hero .wrap{padding-top:96px}}

/* The bio: the first sentence as a pull quote, the rest as written, the areas as rows with a pin. */
.tp-bio-in{display:grid;gap:28px}
@media (min-width:1024px){.tp-bio-in{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:64px;align-items:start}}
.tp-areas{margin-top:20px}
.tp-areas ul{list-style:none;margin:0;padding:0;display:grid}
.tp-areas li{border-top:1px solid var(--c-line)}
.tp-areas li:last-child{border-bottom:1px solid var(--c-line)}
.tp-areas li>a,.tp-areas li>span{display:flex;align-items:center;gap:10px;padding:12px 0;font-family:var(--font-display);font-size:16px;font-weight:700;color:var(--c-ink);text-decoration:none}
.tp-areas li>a:hover{color:var(--c-link)}
.tp-areas svg{color:var(--c-accent);flex:none}
.tp-pull{position:relative;margin:0;padding:0}
.tp-pull svg{color:var(--c-accent);opacity:.9}
.tp-pull p{margin:10px 0 0;font-family:var(--font-display);font-size:clamp(22px,2.4vw,32px);font-weight:700;line-height:1.3;letter-spacing:-.015em;color:var(--c-ink);max-width:30ch}
.tp-rest{margin:18px 0 0;font-size:17px;line-height:1.7;color:var(--c-ink-2);max-width:62ch}
.tp-lic{display:flex;align-items:center;gap:10px;margin:20px 0 0;font-size:14px;color:var(--c-ink-2)}
.tp-lic svg{color:var(--c-accent);flex:none}
.tp-lic b{color:var(--c-ink)}
@media (prefers-reduced-motion:reduce){.tp-card,.tp-card:hover,.tp-face,.tp-face:hover,.tp-card .tp-ph img{transition:none;transform:none}.tp-face:nth-child(even),.tp-face:nth-child(even):hover{transform:translateY(-36px)}}

/* D347: the reviews page (pages/reviews.tsx). The tall sharp hero carries the sources' real logos as big rating badges, white in
   every theme like the hero pills (the dark theme fix); the score and the split as bars; short quotes as editorial cards; every
   review as a card grid filtered in place; the agents clients name; the team's sales. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.hero.rv-hero .wrap{padding-bottom:56px}
.rv-hrow{display:grid;gap:28px;align-items:end}
.rv-htext{min-width:0}
.rv-hero h1{max-width:16ch}
@media (min-width:1024px){.rv-hero h1{font-size:clamp(48px,4.6vw,72px)}.rv-hrow{grid-template-columns:minmax(0,1fr) auto;gap:48px}}
@media (min-width:1200px){.hero.rv-hero{min-height:720px}}
.rv-hero .sub{max-width:46ch}
.rv-hero .actions{align-items:center}
.rv-leave{color:#fff;font-size:15px;font-weight:600;text-decoration:underline;text-underline-offset:4px}
.rv-badges{display:grid;gap:12px;grid-template-columns:repeat(2,minmax(0,1fr))}
.rv-badges.n1{grid-template-columns:minmax(0,320px)}
@media (min-width:1024px){.rv-badges{grid-template-columns:none;gap:16px;width:340px}}
.rv-badge{--c-surface:#fff;--c-ink:var(--c-deep);--c-ink-2:color-mix(in srgb,var(--c-deep) 68%,#fff);--c-line:color-mix(in srgb,var(--c-deep) 16%,#fff);
  display:grid;gap:8px;align-content:start;padding:18px 18px 16px;border-radius:18px;background:var(--c-surface);color:var(--c-ink);text-decoration:none;
  box-shadow:0 22px 50px color-mix(in srgb,var(--c-deep) 40%,transparent);transition:transform 180ms var(--ease)}
a.rv-badge:hover{text-decoration:none;transform:translateY(-3px)}
.rv-bscore{display:flex;align-items:center;gap:10px}
.rv-bscore b{font-family:var(--font-display);font-size:34px;font-weight:800;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.rv-bcount{font-size:13px;color:var(--c-ink-2)}
.rv-badge em{font-style:normal;font-family:var(--font-display);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--c-ink);margin-top:2px}
@media (min-width:1024px){.rv-badge{gap:10px;padding:22px 24px 20px}.rv-bscore b{font-size:44px}.rv-bcount{font-size:14px}}
@media (max-width:767px){.rv-bscore{flex-wrap:wrap;gap:4px 8px}.rv-bscore .stars svg{width:14px;height:14px}.rv-badge{padding:14px}}

/* A source's real logo at three sizes. Zillow's wordmark takes the text color, as Zillow allows on a dark ground. */
.rv-mark{display:inline-flex;align-items:center;flex:none;color:var(--c-ink)}
.rv-mark svg{display:block}
.rv-mark.big .rb-logo.g{width:32px;height:32px}
.rv-mark.big .rb-logo.z{width:auto;height:26px}
@media (min-width:1024px){.rv-mark.big .rb-logo.g{width:34px;height:34px}.rv-mark.big .rb-logo.z{height:30px;width:auto}}
.rv-mark.small .rb-logo.g{width:22px;height:22px}
.rv-mark.small .rb-logo.z{width:auto;height:18px}
.rv-mark.tiny .rb-logo.g{width:16px;height:16px}
.rv-mark.tiny .rb-logo.z{width:auto;height:13px}
.rv-mname{font-family:var(--font-display);font-weight:800;font-size:14px}
.rv-mark.big.rv-mname{font-size:22px}

/* How clients rate the team: the score, the stars as bars, the sources as bars. */
.rv-sgrid{display:grid;gap:32px;margin-top:8px}
@media (min-width:1024px){.rv-sgrid{grid-template-columns:minmax(0,4fr) minmax(0,5fr) minmax(0,5fr);gap:56px;align-items:start}.rv-sgrid.two{grid-template-columns:minmax(0,4fr) minmax(0,7fr)}}
.rv-big{display:grid;justify-items:start;gap:10px;padding:28px;border-radius:var(--r-panel);background:var(--c-tint)}
.rv-big>b{font-family:var(--font-display);font-size:clamp(72px,8vw,112px);font-weight:800;letter-spacing:-.04em;line-height:.9;color:var(--c-ink);font-variant-numeric:tabular-nums}
.rv-big .stars svg{width:26px;height:26px}
.rv-big>span:last-child{font-size:14px;color:var(--c-ink-2)}
.rv-bars ul{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.rv-bars li{display:grid;grid-template-columns:64px minmax(0,1fr) 4.5em;align-items:center;gap:14px;padding:9px 0;border-bottom:1px solid var(--c-line)}
.rv-bl{display:flex;align-items:center;font-size:14px;font-weight:600;color:var(--c-ink);white-space:nowrap}
.rv-bar{display:block;height:12px;border-radius:6px;background:var(--c-muted);overflow:hidden}
.rv-bar i{display:block;height:100%;min-width:2px;border-radius:6px;background:var(--c-accent)}
.rv-src .rv-bar i{background:var(--c-ink)}
.rv-bars li.rv-sli{grid-template-columns:92px minmax(0,1fr) 4.5em}
.rv-bn{display:grid;justify-items:end;font-family:var(--font-display);font-weight:800;font-size:16px;font-variant-numeric:tabular-nums;color:var(--c-ink)}
.rv-bn small{font:600 11px var(--font-body);color:var(--c-ink-2)}

/* Featured quotes: large editorial cards with the agent each one names. */
.rv-fgrid{display:grid;gap:20px;margin-top:8px}
@media (min-width:900px){.rv-fgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}.rv-fgrid.n3{grid-template-columns:repeat(3,minmax(0,1fr))}}
.rv-fcard{position:relative;margin:0;display:grid;grid-template-rows:auto 1fr auto;gap:18px;padding:32px 28px 26px;border-radius:var(--r-panel);background:var(--c-surface);border:1px solid var(--c-line);overflow:hidden}
.rv-qmark{display:block;height:44px;font-family:Georgia,"Times New Roman",serif;font-size:110px;line-height:.9;color:var(--c-accent)}
.rv-fcard blockquote{margin:0;font-family:var(--font-display);font-size:clamp(19px,1.7vw,24px);font-weight:600;line-height:1.42;letter-spacing:-.01em;color:var(--c-ink);text-wrap:pretty}
.rv-fcard figcaption{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px;padding-top:18px;border-top:1px solid var(--c-line)}
.rv-fby{display:grid;gap:4px;font-size:14px;color:var(--c-ink-2)}
.rv-fby b{color:var(--c-ink);font-weight:700}
.rv-fby>span:last-child{display:flex;align-items:center;gap:6px}
.rv-fby .stars svg{width:15px;height:15px}
.rv-fwho{display:flex;align-items:center;gap:12px;color:var(--c-ink);text-decoration:none}
.rv-fwho:hover{text-decoration:none}
.rv-fwho:hover b{text-decoration:underline;text-underline-offset:3px}
.rv-fph{flex:none;display:grid;place-items:center;width:56px;height:56px;border-radius:50%;overflow:hidden;background:#fff;border:1px solid var(--c-line)}
.rv-fph img{width:100%;height:100%;object-fit:cover;object-position:center 15%}
.rv-fph.mono,.rv-aimg.mono{background:var(--c-tint);color:var(--c-ink);font:800 18px var(--font-display)}
.rv-fwho span{display:grid}
.rv-fwho em{font-style:normal;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--c-ink-2)}
.rv-fwho b{font-family:var(--font-display);font-size:16px;font-weight:800}
@media (max-width:767px){
  .rv-fcard{padding:26px 20px 20px}.rv-qmark{font-size:88px;height:34px}
  .rv-fgrid{grid-auto-flow:column;grid-auto-columns:min(86%,330px);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:6px}
  .rv-fgrid::-webkit-scrollbar{display:none}
  .rv-fgrid>*{scroll-snap-align:start}
}

/* The library: a quiet segmented control and small selects, the cards in a grid, twelve at a time. */
.rl-tools{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;margin:4px 0 14px}
.rl-side button span{font-variant-numeric:tabular-nums;color:var(--c-ink-2);font-weight:500;margin-left:2px}
.rl-sel{position:relative;display:inline-flex}
.rl-sel select{appearance:none;-webkit-appearance:none;min-height:40px;padding:0 38px 0 16px;border:1px solid var(--c-line);border-radius:999px;background:var(--c-surface);color:var(--c-ink);font:600 13px var(--font-body);cursor:pointer}
.rl-sel::after{content:"";position:absolute;right:16px;top:50%;width:7px;height:7px;margin-top:-6px;border-right:2px solid var(--c-ink-2);border-bottom:2px solid var(--c-ink-2);transform:rotate(45deg);pointer-events:none}
.rl-sel select:focus-visible{outline:2px solid var(--c-link);outline-offset:2px}
.rl-count{margin:0 0 16px;font-size:13px;color:var(--c-ink-2)}
.rl-grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));align-items:start}
.rl-card{margin:0;display:grid;align-content:start;gap:12px;padding:22px;border:1px solid var(--c-line);border-radius:var(--r-panel);background:var(--c-surface)}
.rl-card[hidden]{display:none}
.rl-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.rl-top .stars svg{width:16px;height:16px}
.rl-card blockquote{margin:0}
.rl-card blockquote p{margin:0;font-size:15.5px;line-height:1.6;color:var(--c-ink-2)}
.rl-card blockquote p[hidden]{display:none}
.rl-read{margin-top:6px;padding:0;border:0;background:none;color:var(--c-link);font:600 14px var(--font-body);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.rl-card figcaption{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:13.5px;color:var(--c-ink-2)}
.rl-card figcaption b{color:var(--c-ink);font-weight:600}
.rl-empty{margin:8px 0 0;font-size:15px;color:var(--c-ink-2)}
.rl-empty[hidden],.rl-more[hidden]{display:none}
.rl-reset{padding:0;border:0;background:none;color:var(--c-link);font:600 15px var(--font-body);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.rl-morewrap{display:flex;justify-content:center;margin-top:28px}
@media (max-width:767px){.rl-tools{gap:8px}.rl-side{width:100%}.rl-side button{flex:1}.rl-sel{flex:1 1 calc(50% - 4px)}.rl-sel select{width:100%}}

/* The agents clients name: portrait cards with their count and average. */
.rv-agrid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
@media (min-width:1200px){.rv-agrid.few{grid-template-columns:repeat(var(--n,4),minmax(0,1fr))}}
@media (min-width:768px) and (max-width:1199px){.rv-agrid.few{grid-template-columns:repeat(2,minmax(0,1fr))}}
.rv-acard{display:grid;grid-template-columns:104px minmax(0,1fr);border:1px solid var(--c-line);border-radius:var(--r-panel);overflow:hidden;background:var(--c-surface)}
.rv-aph{display:block;background:#fff}
.rv-aimg{display:block;width:100%;height:100%;min-height:150px}
.rv-aimg img{width:100%;height:100%;object-fit:cover;object-position:center 15%}
.rv-aimg.mono{display:grid;place-items:center}
.rv-atext{display:grid;align-content:start;gap:6px;padding:16px 16px 18px}
.rv-aname{font-family:var(--font-display);font-size:19px;font-weight:800;letter-spacing:-.01em;line-height:1.15;color:var(--c-ink);text-decoration:none}
.rv-aname:hover{text-decoration:underline;text-underline-offset:3px}
.rv-anum{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;font-size:13px;color:var(--c-ink-2)}
.rv-anum b{font-family:var(--font-display);font-weight:800;color:var(--c-ink)}
.rv-anum .stars svg{width:14px;height:14px}
.rv-alinks{display:grid;gap:4px;margin-top:6px;font-size:14px;font-weight:600}
.rv-alinks a{color:var(--c-link)}
@media (min-width:1200px){.rv-agrid:not(.n1):not(.n2) .rv-acard{grid-template-columns:none}.rv-agrid:not(.n1):not(.n2) .rv-aimg{aspect-ratio:4/5;height:auto;min-height:0}.rv-agrid.n1{grid-template-columns:minmax(0,560px)}}
@media (prefers-reduced-motion:reduce){.rv-badge,a.rv-badge:hover{transition:none;transform:none}}

/* D349: the lifestyle tiles band, the same everywhere. Three to six photo tiles in a layout with no lone tile: three across,
   two by two, two over three, or the six tile bento with a wide tile at each end. On a phone one sideways row with the row
   dots from SWAP_JS. The text sits on the photo's own shade, so it reads the same in light and dark. */
.ltiles .sec-head{margin-bottom:28px}
.lt-grid{display:grid;gap:16px;grid-template-columns:repeat(12,minmax(0,1fr));grid-auto-rows:270px}
.lt-tile{position:relative;isolation:isolate;display:flex;align-items:flex-end;min-width:0;border-radius:var(--r-panel);overflow:hidden;background:var(--c-deep);color:#fff;text-decoration:none;grid-column:span 4;
  box-shadow:0 1px 2px rgba(0,0,0,.08);transition:transform 260ms var(--ease),box-shadow 260ms var(--ease)}
.lt-tile picture{display:contents}
.lt-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform 700ms var(--ease)}
.lt-shade{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,transparent 38%,color-mix(in srgb,var(--c-deep) 86%,transparent) 100%)}
.lt-text{display:grid;gap:5px;padding:22px}
.lt-text b{font-family:var(--font-display);font-size:23px;font-weight:800;letter-spacing:-.02em;line-height:1.1;text-wrap:balance}
.lt-text span{font-size:14px;color:rgba(255,255,255,.9)}
.lt-go{position:absolute;right:18px;top:18px;background:color-mix(in srgb,var(--c-deep) 30%,transparent);display:grid;place-items:center;width:42px;height:42px;border-radius:999px;border:1px solid rgba(255,255,255,.55);color:#fff;transition:background 220ms var(--ease),color 220ms var(--ease),transform 220ms var(--ease)}
.lt-tile:hover{text-decoration:none;transform:translateY(-4px);box-shadow:0 18px 36px -18px rgba(0,0,0,.45)}
.lt-tile:hover img{transform:scale(1.04)}
.lt-tile:hover .lt-go{background:#fff;color:var(--c-deep);border-color:#fff;transform:translateX(2px)}
.lt-tile:focus-visible{outline:3px solid var(--c-accent);outline-offset:3px}
.lt-grid.n4 .lt-tile{grid-column:span 6}
.lt-grid.n5 .lt-tile:nth-child(-n+2){grid-column:span 6}
.lt-grid.n6 .lt-tile{grid-column:span 3}
.lt-grid.n6 .lt-tile:first-child,.lt-grid.n6 .lt-tile:last-child{grid-column:span 6}
.lt-grid.n4 .lt-text b,.lt-grid.n5 .lt-tile:nth-child(-n+2) .lt-text b,.lt-grid.n6 .lt-tile:first-child .lt-text b,.lt-grid.n6 .lt-tile:last-child .lt-text b{font-size:30px}
@media (min-width:1200px){.lt-grid{grid-auto-rows:300px}}
.lt-more{margin:24px 0 0;font-size:15px;line-height:1.7;color:var(--c-ink-2)}
.lt-more b{color:var(--c-ink);font-weight:600}
.lt-more a{color:var(--c-link);font-weight:600}
.lt-compact .lt-grid{grid-auto-rows:210px}
.lt-compact .lt-text b{font-size:20px}
/* A tablet: six columns. Three is one wide over two, four is two by two, five is one wide over two by two, six is three rows of two. */
@media (min-width:768px) and (max-width:1023px){
  .lt-grid{grid-template-columns:repeat(6,minmax(0,1fr));grid-auto-rows:240px}
  .lt-grid .lt-tile,.lt-grid.n4 .lt-tile,.lt-grid.n5 .lt-tile:nth-child(-n+2),.lt-grid.n6 .lt-tile:first-child,.lt-grid.n6 .lt-tile:last-child{grid-column:span 3}
  .lt-grid.n3 .lt-tile:first-child,.lt-grid.n5 .lt-tile:first-child{grid-column:span 6}
}
/* A phone: one sideways row, each tile most of the screen wide so the next one peeks in. */
@media (max-width:767px){
  .lt-grid{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:82%;grid-auto-rows:auto;gap:12px;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:4px}
  .lt-grid::-webkit-scrollbar{display:none}
  .lt-grid .lt-tile{grid-column:auto !important;height:300px;scroll-snap-align:start}
  .lt-compact .lt-grid .lt-tile{height:220px}
  .lt-grid .lt-text b{font-size:22px !important}
  .lt-tile:hover{transform:none}
  .ltiles .sec-head .btn{width:100%;justify-content:center}
}
@media (prefers-reduced-motion:reduce){.lt-tile,.lt-tile img,.lt-go{transition:none}.lt-tile:hover{transform:none}.lt-tile:hover img{transform:none}}

/* D349: the schools question's two official lookups, as link cards under its answer. */
.faq-links{display:grid;gap:10px;margin:-6px 0 22px;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}
.faq-link{display:flex;align-items:center;gap:12px;padding:14px 16px;border:1px solid var(--c-line);border-radius:var(--r-panel);background:var(--c-surface);color:var(--c-ink);text-decoration:none;transition:border-color 160ms var(--ease)}
.faq-link svg{flex:none;color:var(--c-link)}
.faq-link span{display:grid;gap:2px}
.faq-link b{font-size:15px;font-weight:700}
.faq-link small{font-size:13px;color:var(--c-ink-2)}
.faq-link:hover{border-color:var(--c-ink);text-decoration:none}

/* View as client (D415): one calm strip above the header on every page while a preview is live. */
body.is-preview{--pv-h:52px;padding-top:var(--pv-h)}
body.is-preview .site-header,body.is-preview .site-header.compact{top:var(--pv-h)}
.viewas-strip{position:fixed;top:0;left:0;right:0;z-index:60;height:var(--pv-h);display:flex;align-items:center;gap:10px;padding:0 16px;background:var(--pv-bg);color:var(--pv-ink);border-bottom:1px solid var(--pv-line);font:500 15px/1.3 var(--font-body)}
.viewas-strip svg{width:18px;height:18px;flex:none}
.viewas-strip span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.viewas-strip b{font-weight:700}
.viewas-strip form{margin:0}
.viewas-strip button{min-height:40px;padding:0 16px;border-radius:10px;border:1px solid var(--pv-line);background:var(--pv-btn);color:var(--pv-btn-ink);font:600 15px var(--font-body);cursor:pointer}
.viewas-short{display:none}
@media (max-width:799px){body.is-preview{--pv-h:64px}.viewas-strip button{min-height:48px}.viewas-long{display:none}.viewas-short{display:inline}}
body.is-preview form[action="/account/signout"]{display:none}
/* The page an ad lands on (D488): a headline, the count, the homes. */
.ad-page{padding-top:24px}.ad-count{margin:0 0 22px;color:var(--c-ink-2,inherit);font-size:16px}.ad-more{margin:28px 0 0;text-align:center}

/* Video tours (D535): /v/<token>. A deep band under the header with the player large on it, then who filmed it for whom,
   the home, Tour it and Call, and the photos. */
.vt-top{padding:84px 0 0;background:linear-gradient(var(--c-deep),var(--c-deep)) top/100% 62% no-repeat,var(--c-bg)}
.vt-player{position:relative;max-width:1168px;margin:0 auto;aspect-ratio:16/9;background:#000;overflow:hidden}
.vt-player iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vt-body{padding-top:28px;padding-bottom:8px}
.vt-for{display:flex;align-items:center;gap:14px}
.vt-for p{margin:0;display:flex;flex-direction:column;gap:2px;color:var(--c-ink-2);font-size:15px}
.vt-for b{color:var(--c-ink);font-family:var(--font-display);font-size:19px;font-weight:700}
.vt-face{width:56px;height:56px;border-radius:50%;overflow:hidden;flex:none;background:var(--c-tint)}
.vt-face img{width:100%;height:100%;object-fit:cover;object-position:center top}
[data-faces="mono"] .vt-face img{filter:grayscale(1)}
.vt-saved{margin:14px 0 0;font-weight:600;color:var(--c-link)}
.vt-main{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-top:24px}
.vt-main h1{margin:0;font-size:clamp(28px,3.2vw,40px);letter-spacing:-.02em;line-height:1.08}
.vt-city{margin:6px 0 0;color:var(--c-ink-2);font-size:16px}
.vt-price{margin:0;font-family:var(--font-display);font-weight:800;font-size:clamp(26px,2.8vw,34px);white-space:nowrap}
.vt-facts{display:flex;flex-wrap:wrap;gap:8px 28px;list-style:none;margin:16px 0 0;padding:0;font-weight:600;font-size:15px}
.vt-facts li+li::before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--c-accent);margin:0 14px 2px -18px;vertical-align:middle}
.vt-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.vt-photos{display:grid;grid-template-columns:2fr 1fr 1fr;grid-auto-rows:170px;gap:8px;margin-top:36px}
.vt-photos a{display:block;overflow:hidden;border-radius:var(--r-control,6px)}
.vt-photos a.big{grid-row:span 2}
.vt-photos img{width:100%;height:100%;object-fit:cover;display:block}
.vt-more{margin:14px auto 48px;font-weight:600}
@media (min-width:1200px){.vt-top{padding-top:104px}}
@media (max-width:760px){.vt-top{padding-top:72px;background:var(--c-deep)}.vt-main{flex-direction:column;align-items:flex-start;gap:6px}.vt-actions .btn{flex:1 1 100%;justify-content:center}
  .vt-photos{grid-template-columns:1fr 1fr;grid-auto-rows:120px}.vt-photos a.big{grid-row:auto;grid-column:span 2}.vt-photos a:nth-child(n+4){display:none}}
.acct-videos .vt-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px}
.vt-card{display:flex;flex-direction:column;background:var(--c-surface,#fff);border:1px solid var(--c-line);border-radius:var(--r-card,10px);overflow:hidden;color:var(--c-ink);text-decoration:none}
.vt-thumb{position:relative;aspect-ratio:16/9;background:#000}
.vt-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.vt-thumb i{position:absolute;left:50%;top:50%;width:52px;height:36px;margin:-18px 0 0 -26px;border-radius:10px;background:rgba(255,0,0,.92)}
.vt-thumb i::after{content:"";position:absolute;left:50%;top:50%;transform:translate(-38%,-50%);border-left:14px solid #fff;border-top:8px solid transparent;border-bottom:8px solid transparent}
.vt-t{display:flex;flex-direction:column;gap:3px;padding:12px 14px 14px}
.vt-t b{font-size:15px}
.vt-t span{font-size:13px;color:var(--c-ink-2)}
.vt-photos.few{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));grid-auto-rows:220px}

/* The video tour's player, round two (Truman, 2026-10-19: "any way to make the youtube player sexier on desktop?"). Our own
   cover with a big play button; on a computer the player sits in a rounded frame on a deep band with a soft glow of the
   site's accent. YouTube's player replaces the cover on the click (or at once on a phone). */
.vt-player #vt-yt,.vt-player iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vt-poster{position:absolute;inset:0;z-index:2;display:block;width:100%;height:100%;padding:0;border:0;background:#000;cursor:pointer;color:#fff;font:inherit;text-align:left}
.vt-poster>img{width:100%;height:100%;object-fit:cover;display:block}
.vt-poster::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 45%,rgba(0,0,0,.55) 100%);pointer-events:none}
.vt-play{position:absolute;z-index:1;left:50%;top:50%;width:104px;height:104px;margin:-52px 0 0 -52px;border-radius:50%;display:grid;place-items:center;background:var(--c-cta);color:var(--c-cta-ink,#fff);box-shadow:0 18px 50px rgba(0,0,0,.4);transition:transform .25s ease}
.vt-play svg{margin-left:5px}
.vt-play::before{content:"";position:absolute;inset:-14px;border-radius:50%;border:2px solid rgba(255,255,255,.55);animation:vt-ring 2.4s ease-out infinite}
@keyframes vt-ring{0%{transform:scale(.85);opacity:.9}100%{transform:scale(1.25);opacity:0}}
@media (prefers-reduced-motion:reduce){.vt-play::before{animation:none;opacity:.5}}
@media (hover:hover){.vt-poster:hover .vt-play{transform:scale(1.06)}}
.vt-poster:focus-visible{outline:3px solid var(--c-accent);outline-offset:-3px}
.vt-cap{position:absolute;z-index:1;left:28px;bottom:24px;display:flex;align-items:center;gap:12px;text-shadow:0 1px 8px rgba(0,0,0,.35)}
.vt-cap b{font-family:var(--font-display);font-size:20px;font-weight:700}
.vt-live .vt-poster{display:none}
.vt-loading .vt-play{animation:vt-wait 1s ease-in-out infinite alternate}
@keyframes vt-wait{to{transform:scale(.92);opacity:.8}}
/* A phone never shows the cover: YouTube's player is there from the start, so nothing swaps or flickers and one tap plays. */
@media (hover:none),(max-width:899px){.vt-poster{display:none}}
/* The cover's caption (Truman, 2026-10-19): when it was filmed, and whose showing it is; the face stays in the line below. */
.vt-cap{flex-direction:column;align-items:flex-start;gap:4px}
.vt-cap>span{font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;opacity:.85}
.vt-cap b{font-size:24px}
@media (hover:hover) and (min-width:900px){
  .vt-top{padding:132px 32px 0;background:radial-gradient(ellipse 70% 90% at 50% 0%,color-mix(in srgb,var(--c-accent) 32%,var(--c-deep)) 0%,var(--c-deep) 70%) top/100% 74% no-repeat,var(--c-bg)}
  .vt-player{max-width:1120px;border-radius:22px;box-shadow:0 50px 100px -30px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.08)}
  .vt-body{padding-top:40px}
}
.vt-similar{margin-top:8px}
/* The e-alert page (D555): agent line and three counts on the hero, sections with See all, the looked-at chips, and
   Love it, Maybe, Not for me on every card. */
.ea-from{display:flex;align-items:center;gap:12px;margin:0 0 18px;color:#fff}
.ea-from img{width:44px;height:44px;border-radius:50%;object-fit:cover;object-position:top;background:rgba(255,255,255,.15)}
.ea-from span{display:flex;flex-direction:column;font-size:14px;color:rgba(255,255,255,.85)}.ea-from b{color:#fff;font-size:15px}
.ea-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;max-width:460px}
.ea-fact{background:rgba(255,255,255,.12);border-radius:var(--r-control);padding:12px 14px;color:#fff;display:flex;flex-direction:column}
.ea-fact b{font-family:var(--font-display);font-size:26px;font-weight:800;line-height:1.1}
.ea-fact span{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.8)}
.ea-sec h2{margin:6px 0 4px}.ea-sub{color:var(--c-ink-2);margin:0 0 20px}
.ea-sec .lgrid{margin-top:18px}
.lgrid.four{grid-template-columns:minmax(0,1fr)}
@media (min-width:768px){.lgrid.four{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1200px){.lgrid.four{grid-template-columns:repeat(4,minmax(0,1fr));gap:40px 24px}}
.ea-all{margin-top:24px}.ea-all[open] summary{display:none}
.ea-all summary,.ea-fold summary{list-style:none;cursor:pointer}.ea-all summary::-webkit-details-marker,.ea-fold summary::-webkit-details-marker{display:none}
.ea-all summary{display:flex;align-items:center;justify-content:center;min-height:50px;border:1px solid var(--c-line);border-radius:var(--r-control);font-weight:600}
.ea-all .lgrid{margin-top:0}
.ea-chips{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0 0}
.ea-chip{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border:1px solid var(--c-line);border-radius:999px;font-weight:600;color:var(--c-ink);text-decoration:none}
.ea-chip.on{background:var(--c-ink);border-color:var(--c-ink);color:var(--c-surface)}
.ea-fold summary{display:flex;align-items:center;gap:14px;padding:18px 20px;border-radius:var(--r-control);background:var(--c-muted)}
.ea-fold summary::after{content:"›";margin-left:auto;font-size:22px;color:var(--c-ink-2)}.ea-fold[open] summary::after{transform:rotate(90deg)}
.ea-fold__t{display:flex;flex-direction:column}.ea-fold__t span{color:var(--c-ink-2);font-size:14px}
.ea-fold .lgrid{margin-top:22px}
.lbody .ea-react{margin:12px 0 4px;display:flex}
.lbody .ea-react .lx-react{flex:1 1 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1px solid var(--c-line);border-radius:var(--r-control);overflow:hidden}
.lbody .ea-react .icon-btn{border:0;border-radius:0;justify-content:center;min-height:48px;padding:0 6px;white-space:nowrap;font-size:13px;gap:4px}
.lbody .ea-react .icon-btn svg{width:17px;height:17px}
.lbody .ea-react .icon-btn+.icon-btn{border-left:1px solid var(--c-line)}
.ltag--ea{background:var(--c-cta);color:var(--c-cta-ink,#fff)}
/* The e-alert in the portal (D555): counts on the page color, tighter sections, and the Tell us form. */
.pv-body .ea-sec.ea-top{padding-top:24px;padding-bottom:0}
.ea-top .ea-fact{background:var(--c-muted);color:var(--c-ink)}.ea-top .ea-fact span{color:var(--c-ink-2)}
.pv-body .ea-sec.block,.ea-sec.block{padding-top:28px;padding-bottom:8px}
@media (min-width:1200px){.pv-body .ea-sec.block,.ea-sec.block{padding-top:36px;padding-bottom:8px}}
.ea-sec+.pv-cta,.pv-cta+.ea-sec{margin-top:28px}.ea-sec:last-of-type{padding-bottom:40px}
.ea-wants{display:grid;gap:18px;padding:24px;border-radius:var(--r-control);background:var(--c-muted)}
.ea-wants h2{margin:6px 0 4px}.ea-wants p{margin:0;color:var(--c-ink-2)}
.ea-wants__f{display:grid;grid-template-columns:minmax(0,1fr);gap:14px}
@media (min-width:768px){.ea-wants{grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);align-items:end}.ea-wants__f{grid-template-columns:repeat(3,minmax(0,1fr))}.ea-wants__wide{grid-column:1/-1}.ea-wants .btn{grid-column:2;justify-self:start}}
.ea-wants label{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:600;color:var(--c-ink-2)}
.ea-wants input,.ea-wants select{min-height:48px;padding:0 14px;border:1px solid var(--c-line);border-radius:var(--r-control);background:var(--c-surface);color:var(--c-ink);font:inherit;font-size:16px}
.ea-wants--sent{display:block}
.pv-body .ea-sec>.wrap{max-width:1440px;width:100%}
@media (max-width:767px){.pv-wall>:nth-child(n+7){display:none}}

/* D556 question moments (design/claude-design-question-moments): one small question a visit on the e-alert page. */
.qm{--qm-edge:color-mix(in srgb,var(--c-ink-2) 30%,var(--c-bg));--qm-sky:color-mix(in srgb,var(--c-accent) 55%,#fff)}
.qm[hidden]{display:none}
.qm-face{border-radius:50%;object-fit:cover;object-position:50% 15%;flex:none}
.qm-face.ring{box-shadow:0 0 0 2px var(--c-accent)}
.qm-head{display:flex;align-items:center;gap:10px}
.qm-head>span{display:grid;gap:2px;flex:1;min-width:0}
.qm-head b{font-size:14px;font-weight:700}
.qm-head small{font-size:12px;color:var(--c-ink-2)}
.qm-skip,.qm-undo,.qm-link{background:none;border:0;padding:8px 4px;min-height:44px;font:inherit;font-size:13px;color:var(--c-ink-2);cursor:pointer}
.qm-skip:hover,.qm-undo:hover{color:var(--c-ink);text-decoration:underline}
.qm-link{color:var(--c-link);font-weight:600;font-size:14px}
.qm-go{flex:1}
.qm-go:disabled{opacity:.45;cursor:default}
.qm-acts{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.qm-busy{opacity:.7;pointer-events:none}
.qm-gone{opacity:0;transition:opacity .2s var(--ease)}
.qm-err{margin:8px 0 0;font-size:13px;color:#b42318}
.qm-noted{display:flex;align-items:center;gap:6px;margin:0;font-size:12px;color:var(--c-ink-2)}
.qm-noted svg,.qm-ok svg{flex:none}
.qm-noted svg{color:var(--c-live)}
/* The thanks line: a green check, the bold part first, Undo on the right. */
.qm-thanks{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:var(--r-panel);background:var(--c-tint);color:var(--c-ink)}
.qm-thanks p{margin:0;font-size:14px;line-height:1.45;flex:1}
.qm-thanks .qm-undo{margin-left:auto;padding:4px}
.qm-ok{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--c-live);color:#fff;flex:none}
.qm-yes{min-height:0;padding:0 0 0 6px}

/* 1a: a full-bleed note band in the feed. */
.qm-band{margin:28px 0;background:var(--c-tint);color:var(--c-ink)}
.qm-in{display:grid;gap:14px;padding:24px 20px 16px}
.qm-say{display:grid;gap:14px}
.qm-l1{margin:0;font-size:15px;line-height:1.45;color:var(--c-ink-2)}
.qm-l1 b{font-weight:600;color:var(--c-ink)}
.qm-l2{margin:0;font-family:var(--font-display);font-size:22px;font-weight:800;letter-spacing:-.02em;line-height:1.15}
.qm-map{height:250px;margin:0 -20px;background:var(--c-muted)}
.qm-map .leaflet-tile-pane{filter:grayscale(1) contrast(.9) brightness(1.06)}
.qm-mlabel span{display:inline-block;transform:translate(-50%,-50%);white-space:nowrap;padding:3px 7px;border-radius:3px;background:#fff;color:var(--c-ink);font:600 11px/1.2 var(--font-body);box-shadow:0 1px 3px rgba(0,0,0,.18);cursor:pointer}
.qm-mlabel.on span{background:var(--c-brand);color:#fff}
.qm-areas{display:flex;flex-wrap:wrap;gap:8px}
.qm-has-map .qm-areas{display:none}
.qm-chip{min-height:44px;padding:0 14px;border-radius:999px;border:1px solid var(--qm-edge);background:var(--c-bg);color:var(--c-ink);font:600 14px var(--font-body);cursor:pointer;transition:background .16s var(--ease),color .16s var(--ease)}
.qm-chip span{color:var(--c-ink-2);font-weight:500}
.qm-chip[aria-pressed=true]{background:var(--c-brand);border-color:var(--c-brand);color:#fff}.qm-chip[aria-pressed=true] span{color:rgba(255,255,255,.75)}
.qm-chip--big{min-height:52px;padding:0 18px;border-radius:var(--r-control)}
.qm-opts{display:flex;flex-wrap:wrap;gap:10px}
.qm-other{display:flex;gap:10px;align-items:stretch;width:100%}.qm-other[hidden]{display:none}.qm-other .field{flex:1;margin:0}
.qm-alt{border-color:var(--qm-edge)}
.qm-thumbs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.qm-thumb{position:relative;display:grid;gap:4px;color:var(--c-ink-2);text-decoration:none}
.qm-thumb img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r-media,4px)}
.qm-thumb small{font-size:12px}
.qm-heart{position:absolute;top:6px;left:6px;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#fff;color:var(--c-cta)}
.qm-heart svg{fill:currentColor}
.qm-done .qm-in{padding:16px 20px}
@media (min-width:900px){
  .qm-band{margin:40px 0}
  .qm-in{grid-template-columns:minmax(0,1fr) 640px;grid-template-areas:"say map" "areas map" "acts map";align-content:space-between;min-height:340px;padding:40px 0 40px 48px;gap:18px 48px}
  .qm-in--one,.qm-done .qm-in{grid-template-columns:minmax(0,1fr);grid-template-areas:none;min-height:0;padding:40px 48px}
  .qm-band .qm-say{grid-area:say}.qm-map{grid-area:map;height:auto;min-height:340px;margin:-40px 0}.qm-areas{grid-area:areas}.qm-band .qm-acts{grid-area:acts}
  .qm-band .qm-in--one .qm-say,.qm-band .qm-in--one .qm-acts{grid-area:auto}
  .qm-in--one{max-width:none}
  .qm-l1{font-size:18px}.qm-l2{font-size:36px}
  .qm-head .qm-face{width:44px!important;height:44px!important}
  .qm-in--one .qm-acts .qm-go{flex:none}
  .qm-thumbs{max-width:560px}
}

/* 1c: This or that, on the deep band. */
.qm-dark{background:radial-gradient(ellipse at 85% 0%,color-mix(in srgb,var(--c-accent) 30%,transparent),transparent 55%),linear-gradient(120deg,var(--c-deep),color-mix(in srgb,var(--c-deep) 85%,var(--c-brand)));color:#fff}
.qm-dark .qm-head small{font-size:13px;color:rgba(255,255,255,.86)}
.qm-dark .qm-l2{font-size:26px;color:#fff}
.qm-dark .qm-l1{color:rgba(255,255,255,.8)}
.qm-dark .qm-skip,.qm-dark .qm-undo,.qm-dark .qm-foot span{color:rgba(255,255,255,.75)}
.qm-pair{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.qm-side{display:grid;gap:4px;padding:0;border:0;background:none;color:#fff;text-align:left;cursor:pointer;transition:opacity .2s var(--ease)}
.qm-side b{font-size:15px;font-weight:700;margin-top:6px}.qm-side small{font-size:12px;color:rgba(255,255,255,.75)}
.qm-ph{position:relative;display:block;border-radius:var(--r-media,4px);overflow:hidden}
.qm-ph img{display:block;width:100%;aspect-ratio:3/4;object-fit:cover}
.qm-tick2{position:absolute;top:8px;right:8px;display:none;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--c-accent);color:#fff}
.qm-side.on .qm-ph{box-shadow:0 0 0 3px var(--c-accent)}.qm-side.on .qm-tick2{display:grid}.qm-side.off{opacity:.4}
.qm-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:13px}
.qm-dark .qm-thanks{background:rgba(255,255,255,.1);color:#fff}
@media (min-width:900px){.qm-dark .qm-in{grid-template-columns:minmax(0,1fr) 560px;grid-template-areas:"say pair" "foot pair";padding:48px 40px}.qm-dark .qm-say{grid-area:say}.qm-dark .qm-pair{grid-area:pair}.qm-dark .qm-foot{grid-area:foot}.qm-dark .qm-l2{font-size:34px}.qm-ph img{aspect-ratio:4/3}}

/* 1d: the greeting asks, in the hero. */
.qm-hero{display:grid;gap:14px;margin:0 -8px;padding:18px 16px;border-radius:var(--r-panel);background:rgba(6,12,20,.55);color:#fff;-webkit-backdrop-filter:blur(2px)}
.qm-hero .qm-q{font-family:var(--font-display);font-size:19px;font-weight:700;line-height:1.25}
.qm-k{font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--c-accent)}
.qm-read{display:grid;gap:2px}
.qm-read b{font-family:var(--font-display);font-size:26px;font-weight:800;letter-spacing:-.02em;color:var(--qm-sky)}
.qm-read span{font-size:14px;color:rgba(255,255,255,.8)}
.qm-track{position:relative;height:48px;margin:0 24px;touch-action:none;cursor:pointer;outline:none}
.qm-rail{position:absolute;left:0;right:0;top:22px;height:4px;border-radius:2px;background:rgba(255,255,255,.22)}
.qm-fill{position:absolute;left:0;top:0;bottom:0;border-radius:2px;background:var(--c-accent)}
.qm-tick{position:absolute;top:18px;width:2px;height:12px;margin-left:-1px;border-radius:1px;background:rgba(255,255,255,.3)}.qm-tick.on{background:var(--c-accent)}
.qm-knob{position:absolute;top:0;width:48px;height:48px;margin-left:-24px;display:grid;place-items:center;border-radius:50%;background:#fff;color:var(--c-brand);box-shadow:0 6px 18px rgba(0,0,0,.35);transition:left .14s var(--ease)}
.qm-track:focus-visible .qm-knob{outline:2px solid var(--c-accent);outline-offset:3px}
.qm-axis{position:relative;height:16px;margin:-6px 24px 0;font-size:11px;color:rgba(255,255,255,.7)}
.qm-axis span{position:absolute;transform:translateX(-50%);white-space:nowrap}
.qm-axis span:last-child{transform:translateX(-80%)}
.qm-hero .qm-skip{color:rgba(255,255,255,.75)}.qm-hero .qm-go{background:var(--c-cta);color:var(--c-cta-ink)}
.qm-hero .qm-thanks{background:transparent;padding:0;color:#fff}
.qm-hero.qm-done{gap:16px}
.qm-plan{display:grid;grid-template-columns:repeat(4,1fr);margin:4px 0 0;padding:0;list-style:none;position:relative}
.qm-plan:before{content:"";position:absolute;left:12.5%;right:12.5%;top:7px;height:2px;background:rgba(255,255,255,.3)}
.qm-plan li{position:relative;display:grid;justify-items:center;gap:2px;text-align:center;font-size:12px;color:rgba(255,255,255,.8)}
.qm-plan i{width:16px;height:16px;border-radius:50%;background:#fff;margin-bottom:6px}.qm-plan li:nth-child(2) i,.qm-plan li:nth-child(3) i{background:var(--c-accent)}.qm-plan li:nth-child(4) i{background:var(--qm-sky)}
.qm-plan b{font-size:13px;color:#fff}
.qm-path{position:relative;display:grid;grid-template-columns:repeat(3,1fr)}
.qm-pline{position:absolute;left:16.6%;right:16.6%;top:22px;height:2px;background:rgba(255,255,255,.3)}
.qm-pfill{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--c-brand);transition:width .2s var(--ease)}
.qm-stop{position:relative;display:grid;justify-items:center;gap:8px;min-height:96px;padding:0 4px;border:0;background:none;color:#fff;font:600 13px var(--font-body);cursor:pointer;text-align:center}
.qm-dot{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:#fff;color:var(--c-brand);transition:background .16s var(--ease),color .16s var(--ease)}
.qm-stop.past .qm-dot{background:var(--c-brand);color:#fff}.qm-stop.on .qm-dot{background:var(--c-accent);color:#fff}
.qm-hero .qm-noted{color:rgba(255,255,255,.8)}.qm-hero .qm-noted svg{color:var(--c-live)}
@media (min-width:1000px){.qm-hero{width:520px;justify-self:end;margin:0;padding:22px 22px 18px}.qm-hero .qm-q{font-size:21px}.qm-read b{font-size:30px}}

/* 1b: the follow-up right after a reaction, attached to that card. */
.lcard--hidden:has(.qm-sheet){opacity:1}
.qm-sheet{position:absolute;left:-6px;right:-6px;top:150px;z-index:6;display:grid;gap:14px;padding:16px;border-radius:16px;background:var(--c-surface);color:var(--c-ink);box-shadow:0 18px 44px rgba(6,12,20,.24),0 0 0 1px var(--c-line)}
.qm-sheet--right,.qm-sheet--left{top:40px;left:auto;right:auto;width:340px}.qm-sheet--right{left:calc(100% + 12px)}.qm-sheet--left{right:calc(100% + 12px)}
.qm-sh-head{display:flex;align-items:center;gap:10px}.qm-sh-head small{flex:1;font-size:12px;color:var(--c-ink-2)}
.qm-pill{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;background:var(--c-tint);color:var(--c-cta);font-size:12px;font-weight:700}
.qm-pill svg{width:14px;height:14px;fill:currentColor}.qm-pill--no{background:var(--c-chip);color:var(--c-ink-2)}.qm-pill--no svg{fill:none}
.qm-sheet .qm-q{font-family:var(--font-display);font-size:18px;font-weight:800;letter-spacing:-.01em}
.qm-tiles{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.qm-tile{display:flex;align-items:center;gap:8px;min-height:52px;padding:0 12px;border:1px solid var(--qm-edge,#c9d3d9);border-radius:var(--r-control);background:var(--c-bg);color:var(--c-ink);font:600 14px var(--font-body);text-align:left;cursor:pointer;transition:background .16s var(--ease),color .16s var(--ease)}
.qm-tile[aria-pressed=true]{background:var(--c-brand);border-color:var(--c-brand);color:#fff}
.qm-rows{display:grid}
.qm-row,.qm-row-in{display:flex;align-items:center;gap:12px;min-height:60px;padding:8px 0;border:0;border-bottom:1px solid var(--c-line);background:none;color:var(--c-ink);text-align:left;cursor:pointer;font:inherit;width:100%}
.qm-row>span,.qm-row-in>span{display:grid;gap:2px;flex:1;min-width:0}.qm-row b,.qm-row-in b{font-size:15px;font-weight:700}.qm-row small{font-size:12px;color:var(--c-ink-2)}
.qm-row>svg:last-child{color:var(--c-ink-2)}
.qm-row--last{border-bottom:0;padding:0;cursor:default}.qm-row--last .qm-row-in{border-bottom:0}
.qm-sheet .qm-thanks{padding:12px}
/* Why a home moved up (D556). */
.lnote{display:flex;align-items:center;gap:6px;margin:0 0 6px;font-size:13px;font-weight:600;color:var(--c-link)}