/* =====================================================================
   Basera design system — basera.css
   Every value here is transcribed 1:1 from the prototypes
   (references/claude-design/design_handoff_basera/*.dc.html).
   Mobile-first; @media (min-width:760px) = tablet, (min-width:1020px) = desktop,
   (min-width:1280px) = wide desktop (the top nav lines up with the page grid).
   All component classes use the `bs-` prefix.

   ONE PAGE CONTAINER. The top nav, the mega menus, every page body and the
   footer share one box: `max-width:var(--page-w)` (= --page-max of content
   plus a --gutter each side), centred, with `padding-inline:var(--gutter)`.
   So the logo sits exactly on the content's left edge and the last top-nav
   action on its right edge, at every width. Use `.bs-wrap` (or a class that
   copies its three declarations) for any new full-width section.
     --gutter    18px on a phone (unchanged), then clamp(24px, 3.2vw, 56px):
                 ~25 at 768, ~33 at 1024, ~41 at 1280, ~46 at 1440, 56 from 1750.
     --page-max  1600px of content; full bleed below that (1440 uses 93%).
     --side-w / --side-gap  the left rail (account menu, search filters):
                 240 + 28 up to 1439px, 264 + 40 from 1440px. From 1280px the
                 top nav's intents start on the same line as the column right
                 of the rail.
     --measure   ~70ch, the most a line of running text may span.
     --acct-narrow 880px, a reading / form page beside the account menu,
                 left-aligned on the content line (see "Account area" below
                 for the one layout rule every account page follows).
   Lanes inside a content area: .bs-lanes--2 / --3 / --4 (equal lanes that
   collapse 4 → 3 → 2 → 1 as the space shrinks, never below --lane-min each)
   and .bs-lanes--aside (content + a fixed --aside-w column from 1020px).
   ===================================================================== */

/* ---------- Fonts (self-hosted, variable woff2 from Google Fonts) ---------- */
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:200 800;font-stretch:100%;font-display:swap;
  src:url(/static/fonts/bricolage-grotesque-latin-ext-c4c7bb6a8d9bf486ff286d332f3c82f3.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:200 800;font-stretch:100%;font-display:swap;
  src:url(/static/fonts/bricolage-grotesque-latin-ad33cbc6d23292050f1f2010848ab619.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:100 900;font-display:swap;
  src:url(/static/fonts/hanken-grotesk-latin-ext-20672d21748524c379af4698d70a7aec.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:100 900;font-display:swap;
  src:url(/static/fonts/hanken-grotesk-latin-c501f578bf3fc800c20056df516ed9f2.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ---------- Tokens (spec §3) ---------- */
:root{
  /* Text greys (WCAG 2.2 AA, measured on paper / card / soft, the three page
     backgrounds): ink 16:1, ink2 8.3 / 8.9 / 7.6, muted 5.3 / 5.7 / 4.8.
     Every readable text colour must reach 4.5:1 on soft (the darkest of the
     three) — muted is the floor for secondary text, never lighter. */
  --paper:#FAF4EC;--card:#FFFCF7;--ink:#1C1626;--ink2:#4D4558;--muted:#6A6274;
  /* Decorative only (empty-state art, dividers): 2:1, NEVER for text or for the
     edge of a control. Form controls use --field (>=3:1 on white/paper/card). */
  --faint:#B9AFA0;--field:#8A8295;
  --line:#E7DCCB;--divider:#EDE3D4;--soft:#F3E9DA;--shell-bg:#EDE3D4;
  /* coral is the brand fill for decoration (logo, hearts, dots, charts); as text
     it is coral-dk (5.2:1 paper, 4.6:1 coral-soft), behind white text it is
     coral-strong (white 4.7:1), and in display type >=24px it is coral-lg (3.5:1). */
  --coral:#FF5436;--coral-dk:#C0331B;--coral-strong:#CF4329;--coral-lg:#E54C31;--coral-soft:#FFE3DB;--coral-tint:#FFF3EF;
  --marigold:#FFB22E;--amber:#E8941B;--amber-dk:#8C6005;--amber-soft:#FFF0D2;
  /* teal as text reaches 4.6:1 on teal-soft (pills) and white on teal 5.6:1 */
  --teal:#0F7569;--teal-dk:#0B5E55;--teal-soft:#D6EFEA;--teal-on-dark:#7FE0D2;--teal-tint:#F0F9F7;
  --plum:#2A1E3D;--indigo:#2C2A6B;
  --shadow-cta:0 10px 28px rgba(255,84,54,.32);
  --shadow-cta-teal:0 10px 28px rgba(18,138,124,.32);
  --shadow-card:0 4px 12px rgba(28,22,38,.08),0 10px 30px rgba(28,22,38,.07);
  --shadow-card-m:0 1px 2px rgba(28,22,38,.06),0 2px 6px rgba(28,22,38,.05);
  --shadow-modal:0 24px 60px rgba(28,22,38,.35);
  --shadow-sheet:0 -12px 40px rgba(28,22,38,.2);
  --shadow-hover:0 12px 40px rgba(28,22,38,.14),0 4px 12px rgba(28,22,38,.08);
  /* the phone tab bar (§54: a floating pill): 62px bar + 12px gap below it, before the safe area */
  --tabbar-h:80px;
  --font-display:'Bricolage Grotesque',sans-serif;
  --font-body:'Hanken Grotesk',sans-serif;
  /* Focus: a solid coral-dk edge (5:1 on paper) plus a soft halo — the halo
     alone (the old 16% coral) was not a visible indicator. */
  --focus:#C0331B;
  --focus-ring:0 0 0 1.5px var(--focus),0 0 0 5px rgba(192,51,27,.16);
  /* Layout (see the header): one container for nav, body and footer. */
  --gutter:18px;
  --page-max:1600px;
  --page-w:calc(var(--page-max) + 2 * var(--gutter));
  --side-w:240px;
  --side-gap:28px;
  --lane-gap:clamp(14px,1.6vw,24px);
  --measure:70ch;
}
@media (min-width:760px){:root{--gutter:clamp(24px,3.2vw,56px)}}
@media (min-width:1440px){:root{--side-w:264px;--side-gap:40px}}

/* ---------- Base ---------- */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--font-body);background:var(--shell-bg);color:var(--ink);-webkit-font-smoothing:antialiased;line-height:1.5;min-height:100vh}
a{color:var(--coral-dk);text-decoration:none}
a:hover{color:var(--coral-dk)}
/* A link inside running text is underlined, so it is not told apart by colour
   alone (WCAG 1.4.1). Links that are buttons, cards or nav items carry a class
   and keep their own look. */
:is(p,li,dd,td,.bs-help,.bs-alert,.bs-sub,.bs-small,.bs-body,.bs-xs) a:not([class]){text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
a:not([class]):hover{text-decoration:underline;text-underline-offset:3px}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:700;letter-spacing:-0.02em;line-height:1.18;margin:0;text-wrap:balance}
p{margin:0;text-wrap:pretty}
::selection{background:var(--coral-strong);color:#fff}
input::placeholder,textarea::placeholder{color:var(--muted);opacity:1}
input:focus,textarea:focus,select:focus{border-color:var(--focus) !important;box-shadow:var(--focus-ring);outline:none}
button{font-family:inherit}
button,[role=button]{-webkit-tap-highlight-color:transparent}
/* One visible focus ring everywhere a keyboard lands: 2px coral-dk (5:1 on the
   light backgrounds), drawn outside the element so it is never clipped by its
   own fill. On the plum surfaces it turns marigold (8.6:1 on plum). */
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.bs-footer :focus-visible,.bs-plum-card :focus-visible,.bs-poster--dark :focus-visible,.bs-btn--dark:focus-visible,.bs-chip.is-active:focus-visible{outline-color:var(--marigold)}
input:focus-visible,textarea:focus-visible,select:focus-visible{outline:none}
/* The few elements below that could not show a ring (their parent clips) get
   it inset instead. */
.bs-hscroll :focus-visible,.bs-seg :focus-visible{outline-offset:-2px}
/* Motion is decoration here: honour the OS "reduce motion" setting everywhere. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
}
[hidden]{display:none !important}
svg{flex:none}
img{max-width:100%;display:block}
@media (min-width:760px){
  body{background:var(--paper)}
  h1,h2,h3,h4{line-height:1.12}
}

/* ---------- Shell / layout ---------- */
.bs-shell{max-width:430px;margin:0 auto;min-height:100vh;background:var(--paper);position:relative;box-shadow:0 0 40px rgba(28,22,38,.12);display:flex;flex-direction:column}
.bs-main{flex:1 0 auto;min-width:0}
/* room under the content for the fixed tab bar (and the home-indicator area) */
.bs-page{padding:18px 18px calc(var(--tabbar-h) + 24px + env(safe-area-inset-bottom))}
.bs-page--flush{padding:0 0 calc(var(--tabbar-h) + 24px + env(safe-area-inset-bottom))}
.bs-page--actions{padding-bottom:96px}
.bs-page--notabs{padding-bottom:32px}
/* The page container (see the header). .bs-wrap is the bare version. */
.bs-wrap,.bs-container{width:100%;max-width:var(--page-w);margin-left:auto;margin-right:auto;padding-left:var(--gutter);padding-right:var(--gutter)}
.bs-hero-pad{max-width:var(--page-w);margin:0 auto;position:relative;padding:44px var(--gutter) 40px}
/* Running text never spans more than a comfortable line. */
.bs-prose{max-width:var(--measure)}
.bs-m-only{}
/* Hidden only BELOW the breakpoint. Do NOT flip these back with `display:revert`
   at the breakpoint — `revert` rolls back to the UA origin and would wipe out the
   element's own `display` (flex/grid/inline-flex) coming from its bs-* class. */
@media (max-width:759.98px){
  .bs-d-only{display:none !important}
}
@media (max-width:1019.98px){
  .bs-xl-only{display:none !important}
}
@media (min-width:760px){
  .bs-shell{max-width:none;box-shadow:none}
  .bs-page{max-width:var(--page-w);margin:0 auto;padding:32px var(--gutter) 64px;width:100%}
  .bs-page--flush{padding:24px var(--gutter) 64px}
  .bs-page--actions{padding-bottom:64px}
  /* A single focused task (checkout, report, poster): one centred column. */
  .bs-page--narrow{max-width:880px}
  .bs-page--post{max-width:880px;padding:36px var(--gutter) 72px}
  .bs-page--detail{padding:24px var(--gutter) 64px}
  .bs-hero-pad{padding:72px var(--gutter) 56px}
  .bs-m-only{display:none !important}
}
@media (min-width:1020px){
  .bs-xl-hide{display:none !important}
}

/* ---------- Grids ---------- */
.bs-grid-search{display:grid;grid-template-columns:1fr;gap:18px;margin-top:26px;align-items:start}
.bs-grid-detail{display:grid;grid-template-columns:1fr;gap:28px;margin-top:26px;align-items:start}
.bs-grid-dash{display:grid;grid-template-columns:1fr;gap:24px;margin-top:28px;align-items:start}
.bs-grid-admin{display:grid;grid-template-columns:1fr;gap:24px;margin-top:28px;align-items:start}
.bs-grid-review{display:grid;grid-template-columns:minmax(0,1fr);gap:28px;margin-top:18px;align-items:start}
.bs-grid-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:22px}
.bs-grid-results{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:20px}
.bs-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.bs-grid-facts{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.bs-grid-stats{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.bs-grid-tiles{display:grid;grid-template-columns:1fr;gap:16px}
.bs-stack{display:flex;flex-direction:column;gap:16px}
.bs-stack--sm{gap:14px}
.bs-stack--xs{gap:8px}
.bs-sticky-col{display:flex;flex-direction:column;gap:16px}
@media (min-width:760px){
  .bs-grid-search{gap:26px}
  .bs-grid-facts{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
  .bs-grid-stats{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px}
  .bs-grid-tiles{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
}
@media (min-width:1020px){
  /* The filter rail is the same width as the account menu, so the results
     start on the line the top nav's intents start on (from 1280px). */
  .bs-grid-search{grid-template-columns:var(--side-w) minmax(0,1fr);column-gap:var(--side-gap)}
  .bs-grid-detail{grid-template-columns:minmax(0,1fr) 360px}
  .bs-grid-dash{grid-template-columns:minmax(0,1fr) 380px}
  .bs-grid-admin{grid-template-columns:minmax(0,1fr) 340px}
  .bs-grid-review{grid-template-columns:minmax(0,1.4fr) minmax(300px,1fr)}
  .bs-sticky-col{position:sticky;top:92px}
}
/* Beside the account menu a small desktop has ~690px left: the dashboard's
   listings + leads pair stacks there rather than squeezing the listing rows
   into a 280px column. */
@media (min-width:1020px) and (max-width:1279.98px){
  .bs-acct-layout .bs-grid-dash{grid-template-columns:minmax(0,1fr)}
}
@media (min-width:1440px){
  .bs-grid-detail{grid-template-columns:minmax(0,1fr) 400px;gap:40px}
  .bs-grid-dash{grid-template-columns:minmax(0,1fr) 420px}
  .bs-grid-admin{grid-template-columns:minmax(0,1fr) 380px}
}

/* ---------- Lanes: 1 / 2 / 3 / 4 equal columns inside a content area ----------
   Each lane is at least --lane-min wide and there are never more than the
   class says, so a 3-lane block reads 3 → 2 → 1 as its box narrows — it
   follows the space it is given (beside the account menu, inside a card), not
   the viewport. One column on a phone whatever the class. */
.bs-lanes{--lanes:1;--lane-min:280px;display:grid;gap:var(--lane-gap);align-items:start;grid-template-columns:minmax(0,1fr)}
@media (min-width:760px){
  .bs-lanes--2{--lanes:2}
  .bs-lanes--3{--lanes:3}
  .bs-lanes--4{--lanes:4;--lane-min:220px}
  .bs-lanes--2,.bs-lanes--3,.bs-lanes--4{grid-template-columns:repeat(auto-fit,minmax(min(100%,max(var(--lane-min),(100% - (var(--lanes) - 1) * var(--lane-gap)) / var(--lanes))),1fr))}
}
/* Content plus a fixed side lane (a summary, a contact card) from 1020px. */
.bs-lanes--aside{--aside-w:360px}
@media (min-width:1020px){
  .bs-lanes--aside{grid-template-columns:minmax(0,1fr) var(--aside-w)}
  .bs-lanes--aside-start{grid-template-columns:var(--aside-w) minmax(0,1fr)}
}
.bs-lanes > *{min-width:0}

/* ---------- Typography ---------- */
.bs-eyebrow{display:inline-block;font-weight:700;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.bs-eyebrow--coral{color:var(--coral-dk)}
.bs-eyebrow--teal{color:var(--teal)}
.bs-eyebrow--sm{font-size:12px;letter-spacing:.12em}
.bs-eyebrow--xs{font-size:12px;letter-spacing:.1em}
.bs-eyebrow--on-dark{color:rgba(250,244,236,.6)}
.bs-eyebrow--marigold{color:var(--marigold)}
.bs-h1{font-size:28px}
.bs-h1--hero{font-size:32px;font-weight:800}
.bs-h1--sm{font-size:26px}
.bs-h1--detail{font-size:23px}
.bs-h2{font-size:22px}
.bs-h3{font-size:18.5px}
/* A heading that opens a section of a page: room above to separate it from the
   section before, and room below so it never sits on the card it introduces. */
.bs-section-h{margin:32px 0 12px}
.bs-section-h:first-child{margin-top:0}
.bs-section-h + .bs-plans,.bs-section-h + .bs-card,.bs-section-h + form.bs-card{margin-top:0}
.bs-card + .bs-help,.bs-plans + .bs-help{margin-top:10px}
.bs-section-h .bs-help{font-family:var(--font-body);font-size:14.5px;font-weight:400;letter-spacing:0}
/* A list of short rules or facts in one card ("Good to know"): each its own
   row, divided, with comfortable line height. */
.bs-rules{padding:4px 22px}
.bs-rules > p{padding:14px 0;line-height:1.6;color:var(--ink2);border-bottom:1px solid var(--divider)}
.bs-rules > p:last-child{border-bottom:none}
.bs-rules > p b{color:var(--ink)}
.bs-h3--sm{font-size:17.5px}
.bs-h3--xs{font-size:16.5px}
.bs-display{font-family:var(--font-display);font-weight:800;font-variant-numeric:tabular-nums}
.bs-num{font-variant-numeric:tabular-nums}
.bs-italic-coral{font-style:italic;color:var(--coral-lg)}
.bs-sub{font-size:15px;color:var(--ink2)}
.bs-muted{color:var(--muted)}
.bs-ink2{color:var(--ink2)}
.bs-teal{color:var(--teal)}
.bs-coral{color:var(--coral-dk)}
.bs-body{font-size:16px;color:var(--ink2)}
.bs-small{font-size:14px}
.bs-xs{font-size:13.5px}
.bs-bold{font-weight:700}
.bs-semi{font-weight:600}
.bs-center{text-align:center}
.bs-right{text-align:right}
.bs-truncate{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bs-mt-1{margin-top:4px}.bs-mt-2{margin-top:8px}.bs-mt-3{margin-top:12px}.bs-mt-4{margin-top:16px}.bs-mt-5{margin-top:20px}.bs-mt-6{margin-top:24px}
.bs-flex{display:flex;align-items:center;gap:10px}
.bs-flex--between{justify-content:space-between}
.bs-flex--baseline{align-items:baseline}
.bs-flex--start{align-items:flex-start}
.bs-flex--wrap{flex-wrap:wrap}
.bs-grow{flex:1;min-width:0}
.bs-none{flex:none}
.bs-section-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.bs-link{font-weight:600;font-size:14.5px;color:var(--coral-dk);background:transparent;border:none;cursor:pointer;padding:6px 0;font-family:inherit}
a.bs-link{display:inline-block}
.bs-link--muted{color:var(--muted)}
.bs-link--underline{text-decoration:underline;text-underline-offset:3px;color:var(--ink2)}
@media (min-width:760px){
  .bs-eyebrow{font-size:13px}
  .bs-eyebrow--sm{font-size:12px}
  .bs-eyebrow--xs{font-size:12.5px}
  .bs-h1{font-size:clamp(30px,4vw,42px)}
  .bs-h1--hero{font-size:clamp(42px,6vw,72px)}
  .bs-h1--sm{font-size:clamp(26px,3vw,34px)}
  .bs-h1--detail{font-size:clamp(28px,3.5vw,40px)}
  .bs-h1--auth{font-size:clamp(36px,4.5vw,54px)}
  .bs-h2{font-size:clamp(30px,4vw,42px)}
  .bs-h2--sm{font-size:clamp(28px,3.5vw,38px)}
  .bs-h3{font-size:22px}
  .bs-h3--sm{font-size:20.5px}
  .bs-h3--xs{font-size:17.5px}
  .bs-sub{font-size:15.5px}
  .bs-body{font-size:16.5px}
}

/* ---------- Icons ---------- */
.bs-i{display:inline-block;vertical-align:middle;flex:none}
.bs-heart{fill:none;stroke:var(--ink2)}
.is-saved .bs-heart,.bs-heart.is-saved{fill:var(--coral);stroke:var(--coral)}

/* ---------- Buttons ---------- */
.bs-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;font-family:inherit;font-weight:600;font-size:16.5px;line-height:1.2;padding:14px 22px;border-radius:999px;border:none;cursor:pointer;text-decoration:none;color:var(--ink);background:transparent;white-space:nowrap;transition:transform .14s ease,background .14s ease,border-color .14s ease,color .14s ease}
.bs-btn:hover{color:var(--ink)}
.bs-btn--primary{background:var(--coral-strong);color:#fff;box-shadow:var(--shadow-cta)}
.bs-btn--primary:hover{color:#fff}
.bs-btn--danger{background:var(--coral-dk);color:#fff;box-shadow:0 10px 28px rgba(192,51,27,.3)}
.bs-btn--danger:hover{color:#fff}
.bs-btn--teal{background:var(--teal);color:#fff;box-shadow:var(--shadow-cta-teal)}
.bs-btn--teal:hover{color:#fff}
.bs-btn--dark{background:var(--ink);color:var(--paper)}
.bs-btn--dark:hover{color:var(--paper)}
.bs-btn--outline{border:1.5px solid var(--line);background:transparent;color:var(--ink)}
.bs-btn--outline-paper{border:1.5px solid var(--line);background:var(--card);color:var(--ink)}
.bs-btn--outline-teal{border:1.5px solid var(--teal);background:transparent;color:var(--teal)}
.bs-btn--outline-teal:hover{color:var(--teal)}
.bs-btn--outline-danger{border:1.5px solid var(--line);background:var(--card);color:var(--coral-dk)}
.bs-btn--outline-danger:hover{color:var(--coral-dk)}
.bs-btn--soft{background:var(--coral-soft);color:var(--coral-dk)}
.bs-btn--soft:hover{color:var(--coral-dk)}
.bs-btn--ok{background:var(--teal-soft);color:var(--teal);cursor:default;box-shadow:none}
.bs-btn--ok:hover{color:var(--teal)}
.bs-btn--ghost{background:transparent;color:var(--coral-dk);padding:6px 0;font-size:15px;box-shadow:none}
.bs-btn--ghost:hover{color:var(--coral-dk);text-decoration:underline;text-underline-offset:3px}
.bs-btn--muted{background:transparent;color:var(--muted);font-size:15px;padding:10px;box-shadow:none}
.bs-btn--muted:hover{color:var(--ink2)}
.bs-btn--secondary{border:1.5px solid var(--line);background:var(--card);color:var(--ink2);font-size:15px;padding:12px}
.bs-btn--secondary:hover{color:var(--ink2)}
.bs-btn--disabled,.bs-btn:disabled,.bs-btn[aria-disabled=true]{background:var(--line) !important;color:var(--muted) !important;cursor:not-allowed !important;box-shadow:none !important;transform:none !important;border-color:var(--line) !important}
.bs-btn--block{width:100%;display:flex}
.bs-btn--sm{font-size:15px;padding:9px 15px}
.bs-btn--xs{font-size:14px;padding:7px 13px}
.bs-btn--md{font-size:15.5px;padding:10px 18px}
.bs-btn--lg{font-size:17.5px;padding:14px 30px}
.bs-btn--tight{padding-left:14px;padding-right:14px;font-size:15.5px}
.bs-btn--flex{flex:1}
.bs-btn--flex-lg{flex:1.4}
.bs-btn--icon{width:40px;height:40px;padding:0;border-radius:12px;border:1.5px solid var(--line);background:var(--card)}
.bs-btn--circle{width:34px;height:34px;padding:0;border-radius:99px;background:var(--soft);color:var(--ink2)}
@media (hover:hover){
  .bs-btn--primary:hover{background:var(--coral-dk);transform:translateY(-1px)}
  .bs-btn--teal:hover{background:var(--teal-dk)}
  .bs-btn--dark:hover{background:var(--plum)}
  .bs-btn--outline:hover,.bs-btn--outline-paper:hover,.bs-btn--icon:hover{border-color:var(--ink)}
  .bs-btn--outline-danger:hover{border-color:var(--coral-dk)}
  .bs-btn--soft:hover{background:#ffd6cb}
  .bs-btn--secondary:hover{border-color:var(--muted)}
  .bs-btn--circle:hover{background:var(--line)}
}

/* ---------- Chips / segmented tabs / hero tabs ---------- */
.bs-chip{display:inline-flex;align-items:center;justify-content:center;font-family:inherit;font-size:15px;font-weight:600;padding:9px 15px;border-radius:999px;background:var(--card);color:var(--ink2);border:1.5px solid var(--line);cursor:pointer;line-height:1.2;flex:none;text-decoration:none;white-space:nowrap;max-width:100%}
/* In a wrapping row a long chip label ("Not applicable (resale / rental / …)")
   wraps inside the chip instead of pushing the page sideways at 320px. */
.bs-chip-row:not(.bs-chip-row--nowrap) .bs-chip{white-space:normal;text-align:center}
.bs-chip:hover{color:var(--ink2)}
.bs-chip.is-active{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.bs-chip.is-active:hover{color:var(--paper)}
.bs-chip--grow{flex:1;text-align:center}
.bs-chip--block{width:100%;justify-content:flex-start}
.bs-chip--soft{background:var(--soft);border:none;padding:6px 12px;font-size:14.5px}
.bs-chip--soft:hover{background:var(--coral-soft);color:var(--coral-dk)}
.bs-chip--reason{border-radius:12px;padding:12px 15px;text-align:left;justify-content:flex-start;white-space:normal;line-height:1.3}
.bs-chip-row{display:flex;gap:8px;flex-wrap:wrap}
.bs-chip-row--nowrap{flex-wrap:nowrap}
@media (min-width:760px){
  .bs-chip{padding:7px 14px}
  .bs-chip-row{gap:6px}
}
@media (hover:hover){
  .bs-chip:not(.is-active):hover{border-color:var(--ink)}
}

.bs-seg{display:flex;gap:4px;background:var(--soft);border-radius:999px;padding:4px}
.bs-seg--inline{display:inline-flex;flex-wrap:wrap}
.bs-seg__tab{font-family:inherit;font-weight:600;font-size:15.5px;flex:1;border:none;border-radius:999px;padding:11px 0;background:transparent;color:var(--ink2);cursor:pointer;text-align:center;text-decoration:none;line-height:1.3;white-space:nowrap}
.bs-seg__tab:hover{color:var(--ink2)}
.bs-seg__tab.is-active{font-weight:700;background:var(--card);color:var(--ink);box-shadow:0 2px 6px rgba(28,22,38,.08)}
.bs-seg__tab.is-active:hover{color:var(--ink)}
.bs-seg__tab--wide{min-width:110px;padding-left:16px;padding-right:16px}
.bs-seg__badge{display:inline-block;margin-left:6px;font-size:13px;font-weight:800;padding:2px 7px;border-radius:999px;background:var(--coral-strong);color:#fff;vertical-align:1px;line-height:1.2}
@media (min-width:760px){
  .bs-seg__tab{padding:10px 0}
  .bs-seg__tab--wide{padding-left:16px;padding-right:16px}
}

.bs-tab{font-family:inherit;font-size:15.5px;font-weight:600;padding:10px 18px;border-radius:999px;background:transparent;color:var(--ink2);border:none;cursor:pointer;line-height:1;text-decoration:none;display:inline-block}
.bs-tab:hover{color:var(--ink2)}
.bs-tab.is-active{background:var(--ink);color:var(--paper)}
.bs-tab.is-active:hover{color:var(--paper)}

/* ---------- Pills (status) & meta chips ---------- */
.bs-pill{display:inline-flex;align-items:center;gap:4px;font-size:13px;font-weight:700;padding:4px 10px;border-radius:999px;line-height:1.3;background:var(--soft);color:var(--ink2);flex:none;white-space:nowrap}
.bs-pill--active,.bs-pill--ok,.bs-pill--verified{background:var(--teal-soft);color:var(--teal)}
.bs-pill--attention,.bs-pill--pending,.bs-pill--review{background:var(--amber-soft);color:var(--amber-dk)}
.bs-pill--muted,.bs-pill--paused,.bs-pill--rejected{background:var(--soft);color:var(--ink2)}
.bs-pill--closed{background:var(--plum);color:var(--paper)}
.bs-pill--warn,.bs-pill--flag{background:var(--coral-soft);color:var(--coral-dk)}
.bs-pill--ink{background:var(--ink);color:var(--paper)}
/* §52: a listing with an approved walkthrough video (cards). Paper on ink: 16:1. */
.bs-pill--video{background:var(--ink);color:var(--paper);line-height:1.2}
.bs-pill--dark{background:rgba(28,22,38,.75);color:var(--paper);line-height:1}
/* live: light teal on the plum cards it was drawn for; on a light card (the
   earnings table's "Free" status) it is the ordinary teal pill — the on-dark
   colours there measured 1.03:1. */
.bs-pill--live{background:var(--teal-soft);color:var(--teal);font-size:13.5px;padding:5px 11px}
.bs-plum-card .bs-pill--live{background:rgba(18,138,124,.35);color:var(--teal-on-dark)}
.bs-pill--staff{background:var(--plum);color:var(--paper);font-size:12px;letter-spacing:.12em;text-transform:uppercase;padding:5px 10px}
.bs-pill--owner{background:var(--amber-soft);color:var(--amber-dk);padding:5px 9px;line-height:1}
.bs-pill--agent{background:rgba(255,252,247,.9);color:var(--ink2);padding:5px 9px;line-height:1}
.bs-pill--rera{background:var(--teal-soft);color:var(--teal);padding:5px 9px;line-height:1}
/* House listing (§44): "Doorzad" in the lister's place, and the "Listed by
   Doorzad" badge. Plum, the brand's own ink, so it reads as us — not as the
   teal of a check that passed, nor the coral of a paid position. */
.bs-pill--house{background:var(--plum);color:var(--paper);padding:5px 9px;line-height:1}
/* Promotion (V7): coral, the brand's accent, so it reads as "placed here" rather
   than as the teal of something we checked. */
.bs-pill--promoted{background:var(--coral-soft);color:var(--coral-dk);padding:5px 9px;line-height:1}
.bs-pill--md{font-size:13.5px;padding:5px 10px}
.bs-pill--lg{font-size:14px;padding:6px 12px}
.bs-pill--xl{font-size:14.5px;padding:8px 16px}
.bs-meta{display:inline-block;font-size:13.5px;font-weight:600;padding:4px 9px;border-radius:999px;background:var(--soft);color:var(--ink2);line-height:1.3;white-space:nowrap}
.bs-meta-row{display:flex;gap:6px;flex-wrap:wrap}
@media (min-width:760px){
  .bs-pill--staff{font-size:12.5px;padding:6px 12px}
  .bs-pill--owner,.bs-pill--agent,.bs-pill--rera,.bs-pill--promoted,.bs-pill--house{font-size:13.5px;padding:5px 10px}
  .bs-meta{font-size:14px;padding:4px 10px}
}

/* ---------- Cards / tiles / facts ---------- */
.bs-card{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:18px}
.bs-card--raised{box-shadow:var(--shadow-card)}
.bs-card--tight{padding:16px}
.bs-card--menu{padding:8px;display:flex;flex-direction:column}
.bs-card--flat{padding:0;overflow:hidden}
.bs-card--soft{background:var(--soft);border:none;border-radius:16px;padding:14px 16px}
.bs-card--teal{background:var(--teal-soft);border:none;border-radius:22px;padding:20px}
.bs-card--note{background:var(--amber-soft);border:none;border-radius:14px;padding:13px 15px;font-size:14px;color:var(--amber-dk);line-height:1.55}
.bs-card--quote{background:var(--coral-soft);border:none;border-radius:14px;padding:13px 15px;font-size:15px;color:var(--coral-dk);line-height:1.5}
.bs-tile{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:14px}
.bs-tile--link{cursor:pointer}
.bs-tile--soft{background:var(--soft);border:none;border-radius:14px;padding:12px 14px}
.bs-tile--on-dark{background:rgba(250,244,236,.08);border:none;border-radius:12px;padding:10px 12px;color:var(--paper)}
.bs-fact{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:11px 13px}
.bs-fact__label{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.bs-fact__value{font-weight:700;font-size:15.5px;margin-top:2px}
.bs-fact--soft{background:var(--soft);border:none;border-radius:14px;padding:12px 14px}
.bs-fact--soft .bs-fact__label{font-size:13.5px;font-weight:600;letter-spacing:0;text-transform:none}
@media (min-width:760px){
  .bs-card{border-radius:26px;padding:24px}
  .bs-card--tight{padding:20px;border-radius:22px}
  .bs-card--menu{padding:8px}
  .bs-card--flat{padding:0}
  .bs-card--soft{border-radius:18px;padding:18px 20px}
  .bs-card--note{padding:14px 16px;font-size:14px}
  .bs-tile{border-radius:18px;padding:20px}
  .bs-fact{padding:14px 16px}
  .bs-fact__label{font-size:12.5px}
  .bs-fact__value{font-size:17px;margin-top:4px}
  .bs-fact--soft{padding:12px 14px}
}
@media (hover:hover) and (min-width:760px){
  .bs-tile--link:hover{border-color:var(--ink)}
}

/* ---------- Forms ---------- */
.bs-field{margin-top:12px}
.bs-field--first{margin-top:14px}
.bs-label{display:block;font-size:14px;font-weight:600;color:var(--ink2);margin-bottom:5px}
.bs-label--title{font-weight:700;font-size:15.5px;color:var(--ink);margin-bottom:8px}
.bs-help{font-size:14px;color:var(--muted);margin-top:6px}
.bs-help--center{text-align:center;font-size:13.5px;margin-top:10px}
/* Field edges use --field (3.4:1 on paper, 3.7:1 on white): WCAG 1.4.11 asks
   3:1 for the boundary that tells a reader "type here". */
.bs-input,.bs-textarea,.bs-select{display:block;width:100%;border:1.5px solid var(--field);border-radius:12px;padding:13px 14px;font-family:inherit;font-size:16px;background:#fff;outline:none;color:var(--ink);line-height:1.3;-webkit-appearance:none;appearance:none}
.bs-textarea{resize:vertical;font-size:16px;padding:12px 14px;min-height:72px}
.bs-input--lg{font-size:16.5px}
.bs-input--bold{font-size:17.5px;font-weight:700}
.bs-input-group{display:flex;align-items:center;border:1.5px solid var(--field);border-radius:12px;background:#fff;overflow:hidden}
.bs-input-group:focus-within{border-color:var(--focus);box-shadow:var(--focus-ring)}
.bs-input-group__prefix{padding:0 8px 0 14px;font-size:16px;font-weight:600;color:var(--ink2);flex:none;line-height:1}
.bs-input-group .bs-input{border:none;border-radius:0;padding-left:0;flex:1;min-width:0;box-shadow:none !important}
.bs-search-box{display:flex;align-items:center;gap:8px;border:1.5px solid var(--field);border-radius:12px;padding:10px 12px;background:#fff;flex:1;min-width:0}
.bs-search-box:focus-within{border-color:var(--focus);box-shadow:var(--focus-ring)}
.bs-search-box input{border:none;outline:none;background:transparent;font-family:inherit;font-size:15.5px;flex:1;color:var(--ink);min-width:0;min-height:28px;padding:0;box-shadow:none !important}
.bs-search-box svg{color:var(--muted)}
.bs-search-fake{width:100%;display:flex;align-items:center;gap:10px;border:1.5px solid var(--field);border-radius:14px;padding:14px;background:var(--card);cursor:pointer;font-family:inherit;box-shadow:0 2px 8px rgba(28,22,38,.06);text-align:left;color:var(--muted);font-size:16px;text-decoration:none}
.bs-search-fake:hover{color:var(--muted)}
.bs-otp-row{display:flex;gap:8px;margin-top:18px}
.bs-otp{flex:1;min-width:0;width:100%;height:54px;text-align:center;font-family:inherit;font-size:26px;font-weight:700;border:1.5px solid var(--field);border-radius:12px;background:#fff;color:var(--ink);outline:none;padding:0;font-variant-numeric:tabular-nums;caret-color:var(--coral)}
.bs-otp.is-filled{border-color:var(--ink)}
.bs-check{display:flex;gap:10px;align-items:flex-start;cursor:pointer;font-size:14.5px;color:var(--ink2)}
.bs-check input{position:absolute;opacity:0;width:0;height:0}
.bs-check__box{width:20px;height:20px;border-radius:6px;flex:none;display:grid;place-items:center;margin-top:1px;border:2px solid var(--field);background:transparent}
.bs-check__box svg{display:none}
.bs-check.is-checked .bs-check__box,.bs-check input:checked ~ .bs-check__box{border-color:var(--teal);background:var(--teal)}
.bs-check.is-checked .bs-check__box svg,.bs-check input:checked ~ .bs-check__box svg{display:block}
.bs-radio{display:flex;gap:10px;align-items:center;width:100%;border:1.5px solid var(--line);border-radius:13px;padding:12px 14px;background:#fff;cursor:pointer;font-family:inherit;font-size:15px;font-weight:600;color:var(--ink);text-align:left}
.bs-radio input{position:absolute;opacity:0;width:0;height:0}
.bs-radio__dot{width:18px;height:18px;border-radius:99px;flex:none;border:2px solid var(--field);background:transparent}
.bs-radio.is-checked,.bs-radio:has(input:checked){border-color:var(--coral-dk);background:var(--coral-soft)}
.bs-radio.is-checked .bs-radio__dot,.bs-radio:has(input:checked) .bs-radio__dot{border-color:var(--coral-dk);background:radial-gradient(circle at center,var(--coral-dk) 45%,transparent 50%)}
/* Reject-reason rows: dark chip on mobile (mobile prototype), radio row from 760px (desktop prototype) */
.bs-chip--reason .bs-radio__dot{display:none}
@media (min-width:760px){
  .bs-chip--reason{border-radius:13px;padding:12px 14px;gap:10px;align-items:center;background:#fff;color:var(--ink);border-color:var(--line)}
  .bs-chip--reason:hover,.bs-chip--reason:not(.is-active):hover{color:var(--ink);border-color:var(--line)}
  .bs-chip--reason .bs-radio__dot{display:block}
  .bs-chip--reason.is-active{background:var(--coral-soft);border-color:var(--coral-dk);color:var(--ink)}
  .bs-chip--reason.is-active:hover{color:var(--ink)}
  .bs-chip--reason.is-active .bs-radio__dot{border-color:var(--coral-dk);background:radial-gradient(circle at center,var(--coral-dk) 45%,transparent 50%)}
}
@media (min-width:760px){
  .bs-field{margin-top:14px}
  .bs-field--first{margin-top:18px}
  .bs-label{font-size:14.5px;margin-bottom:6px}
  .bs-label--title{font-size:15.5px}
  .bs-help--center{font-size:14px;margin-top:12px}
  .bs-input,.bs-select{padding:12px 14px}
  .bs-search-box{padding:12px 14px;gap:10px}
  .bs-search-box input{font-size:16.5px}
}

/* ---------- Alerts ---------- */
.bs-alert{border-radius:14px;padding:13px 15px;font-size:14.5px;font-weight:600;line-height:1.5;background:var(--coral-soft);color:var(--coral-dk)}
.bs-alert--warn{background:var(--amber-soft);color:var(--amber-dk)}
.bs-alert--teal{background:var(--teal-soft);color:var(--teal)}
.bs-alert--soft{background:var(--soft);color:var(--ink2)}
.bs-alert__sub{font-weight:400;font-size:13.5px;margin-top:2px}
@media (min-width:760px){
  .bs-alert{font-size:15px}
  .bs-alert__sub{font-size:14px}
}

/* ---------- Launch-city note (where Doorzad is live) ----------
   Shown on the home page (mobile + desktop) and in the search empty state
   while basera.cities.supported is a short list. Coral tint so it reads as
   news rather than as an error; the city itself is the only bold word. */
.bs-citynote{display:flex;align-items:flex-start;gap:8px;background:var(--coral-tint);border:1px solid var(--coral-soft);
  border-radius:12px;padding:9px 12px;font-size:14px;font-weight:600;line-height:1.45;color:var(--coral-dk)}
.bs-citynote strong{font-weight:800}
.bs-citynote svg{margin-top:1px}
@media (min-width:1020px){
  .bs-citynote{font-size:15px;padding:10px 14px;border-radius:14px}
}

/* ---------- Avatars ---------- */
.bs-avatar{width:40px;height:40px;border-radius:99px;background:var(--plum);color:var(--paper);display:grid;place-items:center;font-family:var(--font-display);font-weight:800;font-size:15.5px;flex:none;line-height:1;text-decoration:none;border:none;cursor:default;padding:0}
.bs-avatar--32{width:32px;height:32px;font-size:14.5px}
.bs-avatar--38{width:38px;height:38px;font-size:14.5px}
.bs-avatar--40{width:40px;height:40px;font-size:16.5px}
.bs-avatar--44{width:44px;height:44px;font-size:17.5px}
.bs-avatar--48{width:48px;height:48px;font-size:18.5px}
.bs-avatar--52{width:52px;height:52px;font-size:19.5px}
.bs-avatar--soft{background:var(--soft);color:var(--ink2);font-family:var(--font-body);font-weight:700;font-size:14.5px}
.bs-avatar--soft.bs-avatar--42{width:42px;height:42px;font-size:15.5px}
.bs-avatar--soft.bs-avatar--50{width:50px;height:50px;font-size:17.5px}
.bs-avatar--btn{cursor:pointer}

/* ---------- Mobile page chrome ---------- */
.bs-mbar{padding:18px 18px 0;display:flex;align-items:center;justify-content:space-between}
.bs-mhead{position:sticky;top:0;z-index:40;background:rgba(250,244,236,.97);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--divider);padding:14px 18px 10px}
.bs-logo{display:flex;align-items:center;gap:8px;text-decoration:none;color:var(--ink)}
.bs-logo:hover{color:var(--ink)}
.bs-logo__mark{width:28px;height:28px;border-radius:9px;background:var(--coral);display:grid;place-items:center;box-shadow:0 6px 16px rgba(255,84,54,.32);flex:none}
.bs-logo__mark--sm{width:22px;height:22px;border-radius:7px;box-shadow:none}
.bs-logo__text{font-family:var(--font-display);font-weight:800;font-size:19px}
/* The wordmark: the brand name in lowercase ("doorzad"), same Bricolage 800 and
   colour, leaning forward ~10deg. A skew, not font-style:oblique: Bricolage has
   no italic and browsers synthesise oblique at their own fixed angle, so the
   skew is the one slant that looks the same everywhere. It pivots on the
   baseline (no sideways drift toward the mark), the right padding keeps the
   leaning "d" from being clipped, and a transform never moves the layout box,
   so flex centring against the mark still holds. Emails, PDFs and share images
   draw the same lockup in their own way (mail/layout.html, *PdfService,
   Java2DSocialRenderer). Used by .bs-logo__text, the footer and the poster. */
.bs-logo__text,.bs-logo__word{display:inline-block;text-transform:lowercase;letter-spacing:-.025em;line-height:1.15;padding-right:.16em;transform:skewX(-10deg);transform-origin:0 78%}
.bs-back{position:absolute;top:14px;left:14px;width:40px;height:40px;border-radius:99px;border:none;background:rgba(28,22,38,.55);display:grid;place-items:center;cursor:pointer;color:var(--paper);z-index:2;text-decoration:none;padding:0}
.bs-back:hover{color:var(--paper)}
.bs-back--static{position:static}
.bs-back-link{display:inline-flex;align-items:center;gap:6px;font-family:inherit;font-weight:600;font-size:15px;border:none;background:transparent;color:var(--ink2);cursor:pointer;padding:4px 0;text-decoration:none}
.bs-back-link:hover{color:var(--ink)}
.bs-version{font-family:inherit;font-size:14px;color:var(--muted);background:transparent;border:none;cursor:default;padding:10px;-webkit-user-select:none;user-select:none}
@media (min-width:760px){
  .bs-logo__mark{width:30px;height:30px;border-radius:10px}
  .bs-logo__text{font-size:21px}
  .bs-back-link{padding:2px 0}
}

/* ---------- Top nav (tablet/desktop) ---------- */
.bs-topnav{display:none;position:sticky;top:0;z-index:50;background:rgba(250,244,236,.95);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
/* The bar is the page container: logo on the content's left edge, the last
   action on its right edge. */
.bs-topnav__bar{max-width:var(--page-w);margin:0 auto;padding:0 var(--gutter);height:72px;display:flex;align-items:center;gap:12px}
.bs-topnav__logo{display:flex;align-items:center;gap:9px;cursor:pointer;text-decoration:none;color:var(--ink)}
.bs-topnav__logo:hover{color:var(--ink)}
.bs-topnav__intents{display:none;gap:2px;flex:1}
.bs-topnav__spacer{flex:1}
.bs-topnav__intent{position:relative;font-family:inherit;font-weight:600;font-size:15.5px;border:none;background:transparent;padding:9px 11px;white-space:nowrap;border-radius:999px;cursor:pointer;line-height:1;color:var(--ink2);display:inline-flex;align-items:center;gap:4px;text-decoration:none}
.bs-topnav__intent:hover{color:var(--ink2)}
.bs-topnav__intent.is-active{color:var(--coral-dk)}
.bs-topnav__intent.is-open{background:rgba(28,22,38,.05);color:var(--coral-dk)}
.bs-topnav__caret{font-size:13px;opacity:.55}
.bs-topnav__right{display:flex;align-items:center;gap:10px;margin-left:auto}
.bs-topnav__signin{font-family:inherit;font-weight:600;font-size:15.5px;border:1.5px solid var(--line);border-radius:999px;padding:9px 16px;background:transparent;color:var(--ink);cursor:pointer;line-height:1;text-decoration:none;display:inline-block}
.bs-topnav__signin:hover{color:var(--ink)}
.bs-topnav__post{white-space:nowrap;display:none;font-family:inherit;font-weight:600;font-size:15.5px;border:none;border-radius:999px;padding:10px 18px;background:var(--coral-strong);color:#fff;cursor:pointer;box-shadow:var(--shadow-cta);line-height:1;transition:transform .14s ease;text-decoration:none}
.bs-topnav__post:hover{color:#fff}
.bs-topnav__burger{width:40px;height:40px;border-radius:12px;border:1.5px solid var(--line);background:var(--card);cursor:pointer;display:grid;place-items:center;flex:none;color:var(--ink);padding:0}
.bs-acct{position:relative}
.bs-acct__btn{font-family:inherit;display:flex;align-items:center;gap:8px;border:1.5px solid var(--line);border-radius:999px;padding:5px 12px 5px 5px;background:var(--card);cursor:pointer}
.bs-acct__chev{font-size:13px;color:var(--muted)}
.bs-acct__menu{display:none;position:absolute;right:0;top:calc(100% + 10px);width:264px;background:var(--card);border:1px solid var(--line);border-radius:18px;box-shadow:0 12px 40px rgba(28,22,38,.16),0 4px 12px rgba(28,22,38,.08);padding:14px;z-index:60;text-align:left}
.bs-acct__menu.is-open{display:block}
.bs-acct__head{display:flex;gap:11px;align-items:center;padding:4px 6px 12px;border-bottom:1px solid var(--divider)}
.bs-acct__name{font-weight:700;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bs-acct__phone{font-size:14px;color:var(--muted)}
.bs-acct__badge{margin-top:10px}
.bs-acct__list{display:flex;flex-direction:column;gap:2px;margin-top:8px}
.bs-acct__item{display:block;font-family:inherit;font-weight:600;font-size:15.5px;text-align:left;border:none;background:transparent;padding:9px 10px;border-radius:10px;cursor:pointer;color:var(--ink);width:100%;text-decoration:none;line-height:1.4}
.bs-acct__item:hover{color:var(--ink)}
.bs-acct__item--danger{color:var(--coral-dk)}
.bs-acct__item--danger:hover{color:var(--coral-dk)}
.bs-drawer{display:none;background:var(--card);border-top:1px solid var(--divider);box-shadow:0 24px 48px rgba(28,22,38,.12);padding:12px 16px 18px;flex-direction:column;gap:2px}
.bs-drawer.is-open{display:flex}
.bs-drawer__item{display:block;font-family:inherit;font-weight:600;font-size:16.5px;text-align:left;border:none;background:transparent;padding:12px 10px;border-radius:12px;cursor:pointer;color:var(--ink);width:100%;text-decoration:none}
.bs-drawer__item:hover{color:var(--ink)}
.bs-drawer__item--danger{color:var(--coral-dk)}
.bs-drawer__item--danger:hover{color:var(--coral-dk)}
.bs-drawer__post{font-family:inherit;font-weight:600;font-size:16.5px;border:none;border-radius:999px;padding:14px 20px;background:var(--coral-strong);color:#fff;cursor:pointer;box-shadow:var(--shadow-cta);margin-top:10px;text-align:center;text-decoration:none;display:block}
.bs-drawer__post:hover{color:#fff}
.bs-mega{display:none;position:absolute;left:0;right:0;top:100%;background:var(--card);border-bottom:1px solid var(--line);box-shadow:0 24px 48px rgba(28,22,38,.12)}
.bs-mega.is-open{display:block}
.bs-mega__inner{max-width:var(--page-w);margin:0 auto;padding:28px var(--gutter);display:grid;grid-template-columns:1fr 1fr 1fr 300px;gap:32px}
.bs-mega__title{font-size:12.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.bs-mega__list{display:flex;flex-direction:column;gap:2px;margin-top:10px;align-items:flex-start}
.bs-mega__link{font-family:inherit;font-size:16px;font-weight:600;color:var(--ink2);background:transparent;border:none;padding:7px 10px;margin-left:-10px;border-radius:9px;cursor:pointer;text-align:left;text-decoration:none;display:inline-block}
.bs-mega__promo{background:var(--soft);border-radius:18px;padding:20px;align-self:start}
.bs-mega__promo-eyebrow{font-size:12.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--coral-dk)}
.bs-mega__promo-title{font-family:var(--font-display);font-weight:800;font-size:19.5px;margin-top:8px;line-height:1.2;letter-spacing:-.02em}
.bs-mega__promo-body{font-size:15px;color:var(--ink2);margin-top:8px}
.bs-mega__promo-cta{display:inline-block;font-family:inherit;font-weight:600;font-size:15px;border:none;border-radius:999px;padding:10px 16px;background:var(--ink);color:var(--paper);cursor:pointer;margin-top:14px;text-decoration:none}
.bs-mega__promo-cta:hover{color:var(--paper)}
@media (min-width:760px){
  .bs-topnav{display:block}
}
@media (min-width:1020px){
  .bs-topnav__bar{gap:20px}
  .bs-topnav__intents{display:flex}
  .bs-topnav__spacer{display:none}
  .bs-topnav__post{display:inline-block}
  .bs-topnav__burger{display:none}
  .bs-drawer{display:none !important}
  .bs-topnav__right{margin-left:0}
}
/* Small desktops: the signed-in bar (Dashboard, bell, avatar, Post) has to fit
   beside six intents in ~950px, so the intents lose their carets (the menus
   still open) and some padding. */
@media (min-width:1020px) and (max-width:1279.98px){
  .bs-topnav__bar{gap:14px}
  .bs-topnav__intent{padding:9px 8px}
  .bs-topnav__caret{display:none}
}
/* Wide desktops: the bar is a three-column grid on the page's own lines — the
   logo over the left rail (account menu, search filters), the intents from the
   line where the column right of the rail starts (their text, not their hover
   pill, on that line), the actions ending on the content's right edge. */
@media (min-width:1280px){
  .bs-topnav__bar{display:grid;grid-template-columns:var(--side-w) minmax(0,1fr) auto;column-gap:var(--side-gap)}
  .bs-topnav__logo{justify-self:start}
  .bs-topnav__intents{margin-left:-11px;min-width:0}
}
@media (max-width:1019.98px){
  .bs-mega{display:none !important}
}
@media (hover:hover){
  .bs-topnav__signin:hover{border-color:var(--ink);background:rgba(28,22,38,.03)}
  .bs-topnav__post:hover{background:var(--coral-dk);transform:translateY(-1px)}
  .bs-acct__btn:hover{border-color:var(--ink)}
  .bs-acct__item:hover,.bs-drawer__item:hover{background:var(--soft)}
  .bs-drawer__post:hover{background:var(--coral-dk)}
  .bs-mega__link:hover{color:var(--coral-dk);background:var(--coral-tint)}
  .bs-mega__promo-cta:hover{background:var(--plum)}
}

/* ---------- Bottom tab bar (mobile) ---------- */
/* Each tab is a full-height, equal-width 56px target with a 24px icon and a
   13px label. The current tab is told apart by more than colour: a coral bar on
   its top edge, a bolder label and a heavier icon stroke. */
/* §54: the phone tab bar floats — a dark rounded bar 12px above the bottom edge,
   the active tab in a soft coral bubble. Paper on ink is 16:1; the active label is
   #FF8A70 on the bubble over ink (≥ 6:1). Everything that sits above the bar
   (toasts, install card, tour button) keys off --tabbar-h. */
.bs-tabbar{position:fixed;left:50%;bottom:max(12px,env(safe-area-inset-bottom));transform:translateX(-50%);width:calc(100% - 24px);max-width:420px;z-index:70;
  background:rgba(28,22,38,.94);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-radius:26px;
  box-shadow:0 14px 34px rgba(28,22,38,.30),0 2px 6px rgba(28,22,38,.18);display:flex;justify-content:space-around;align-items:stretch;padding:6px}
.bs-tabbar__item{position:relative;flex:1 1 0;min-width:48px;min-height:50px;font-family:inherit;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;border:none;background:transparent;cursor:pointer;padding:8px 2px 4px;border-radius:20px;font-weight:700;font-size:13px;color:rgba(250,244,236,.86);text-decoration:none;line-height:1.2;white-space:nowrap}
.bs-tabbar__item svg{width:24px;height:24px}
.bs-tabbar__item:hover{color:#fff}
.bs-tabbar__item.is-active{color:#FF8A70;background:rgba(255,84,54,.18);font-weight:800}
/* not by colour alone: a short bar tops the active bubble */
.bs-tabbar__item.is-active::before{content:"";position:absolute;top:2px;left:50%;width:18px;height:3px;margin-left:-9px;border-radius:3px;background:#FF8A70}
.bs-tabbar__item.is-active svg{stroke-width:2.3}
.bs-tabbar__item:focus-visible{outline:3px solid #FF8A70;outline-offset:-3px}
.bs-tabbar__item svg{fill:none}
.bs-tabbar__item.is-active .bs-tabbar__heart{fill:#FF8A70}
@media (min-width:760px){
  .bs-tabbar{display:none}
}

/* ---------- Footer (tablet/desktop) ---------- */
.bs-footer{display:none;background:var(--plum);color:var(--paper)}
.bs-footer__inner{max-width:var(--page-w);margin:0 auto;padding:44px var(--gutter);display:flex;justify-content:space-between;gap:32px;flex-wrap:wrap;align-items:center}
.bs-footer__brand{font-family:var(--font-display);font-weight:800;font-size:22px;cursor:default;-webkit-user-select:none;user-select:none}
.bs-footer__tag{font-size:15px;color:rgba(250,244,236,.6);margin-top:6px;max-width:340px}
.bs-footer__links{display:flex;gap:22px;font-size:15px;font-weight:600;color:rgba(250,244,236,.75);flex-wrap:wrap}
.bs-footer__links a{display:inline-block;padding:4px 0;min-width:24px;text-align:center;color:rgba(250,244,236,.82);font-weight:600;cursor:pointer}
.bs-footer__links a:hover{color:#fff}
@media (min-width:760px){
  .bs-footer{display:block}
}

/* ---------- Scroll rows ---------- */
.bs-hscroll{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.bs-hscroll::-webkit-scrollbar{display:none}
.bs-hscroll > *{flex:none}

/* ---------- Listing card ---------- */
.bs-listing-card{display:block;background:var(--card);border:1px solid var(--line);border-radius:22px;overflow:hidden;cursor:pointer;box-shadow:var(--shadow-card-m);color:var(--ink);text-decoration:none;position:relative}
.bs-listing-card:hover{color:var(--ink)}
.bs-listing-card__img{position:relative;height:190px;background-color:var(--soft);background-position:center;background-size:cover;background-repeat:no-repeat}
.bs-listing-card__badges{position:absolute;top:10px;left:10px;display:flex;gap:6px}
.bs-listing-card__save{position:absolute;top:8px;right:8px;width:38px;height:38px;border-radius:99px;border:none;background:rgba(255,252,247,.92);display:grid;place-items:center;cursor:pointer;padding:0;z-index:1}
.bs-listing-card__photos{position:absolute;bottom:10px;right:10px;display:inline-flex;align-items:center;gap:4px;font-size:13px;font-weight:700;padding:4px 8px;border-radius:999px;background:rgba(28,22,38,.6);color:var(--paper);line-height:1}
.bs-listing-card__nobrk{position:absolute;bottom:10px;left:10px;font-size:13px;font-weight:700;padding:5px 9px;border-radius:999px;background:rgba(28,22,38,.75);color:var(--paper);line-height:1}
.bs-listing-card__body{padding:13px 15px 15px}
.bs-listing-card__top{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.bs-listing-card__price{font-family:var(--font-display);font-weight:800;font-size:20.5px;font-variant-numeric:tabular-nums}
.bs-listing-card__area{font-size:14px;font-weight:600;color:var(--muted)}
.bs-listing-card__title{font-weight:700;font-size:16px;margin-top:4px}
.bs-listing-card__loc{font-size:14.5px;color:var(--ink2)}
.bs-listing-card__meta{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap}
.bs-listing-card__emi{margin-top:9px;font-size:14px;color:var(--teal);font-weight:600}
@media (min-width:760px){
  .bs-listing-card{border-radius:26px;transition:transform .22s cubic-bezier(.2,.7,.3,1),box-shadow .22s ease}
  /* 180px tall on a 300px card, as before, and in proportion on a wider one
     (the card grids gain columns, but a lane can still be 400px+). */
  .bs-listing-card__img{height:auto;aspect-ratio:5/3}
  .bs-listing-card__badges{top:12px;left:12px}
  .bs-listing-card__save{top:10px;right:10px;width:34px;height:34px}
  .bs-listing-card__photos{bottom:12px;right:12px;font-size:13px;padding:4px 9px}
  .bs-listing-card__nobrk{bottom:12px;left:12px;font-size:13.5px;padding:5px 10px}
  .bs-listing-card__body{padding:16px 18px 18px}
  .bs-listing-card__price{font-size:22px}
  .bs-listing-card__area{font-size:14px}
  .bs-listing-card__title{font-size:16.5px;margin-top:6px}
  .bs-listing-card__loc{font-size:15px;margin-top:2px}
  .bs-listing-card__meta{margin-top:12px}
  .bs-listing-card__emi{margin-top:12px;padding-top:12px;border-top:1px solid var(--divider);font-size:14.5px}
}
@media (hover:hover) and (min-width:760px){
  .bs-listing-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-hover)}
  .bs-listing-card__save:hover{background:#fff}
}
/* compact row variant (saved list on mobile) */
.bs-listing-row{background:var(--card);border:1px solid var(--line);border-radius:18px;overflow:hidden;cursor:pointer;display:flex;box-shadow:0 1px 2px rgba(28,22,38,.06);color:var(--ink);text-decoration:none}
.bs-listing-row:hover{color:var(--ink)}
.bs-listing-row__thumb{width:104px;flex:none;background-color:var(--soft);background-position:center;background-size:cover}
.bs-listing-row__body{padding:12px 14px;flex:1;min-width:0}
.bs-listing-row__price{font-family:var(--font-display);font-weight:800;font-size:17.5px;font-variant-numeric:tabular-nums}
.bs-listing-row__title{font-weight:700;font-size:14.5px;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bs-listing-row__loc{font-size:14px;color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bs-listing-row__save{border:none;background:transparent;padding:0 14px;cursor:pointer;flex:none}
.bs-thumb{width:52px;height:40px;border-radius:9px;flex:none;background-color:var(--soft);background-position:center;background-size:cover}
@media (min-width:760px){
  .bs-thumb{width:64px;height:48px;border-radius:10px}
}

/* ---------- Rows / lists ---------- */
.bs-list{display:flex;flex-direction:column}
.bs-row{display:flex;align-items:center;gap:12px;padding:13px 0;border-bottom:1px solid var(--divider);color:var(--ink);text-decoration:none}
.bs-row:hover{color:var(--ink)}
.bs-row--link{cursor:pointer}
.bs-row--wrap{flex-wrap:wrap;gap:10px 14px}
.bs-row--grid{display:grid;grid-template-columns:1fr auto auto auto;gap:10px;padding:14px 0}
.bs-row__body{flex:1;min-width:0}
.bs-row__title{font-weight:700;font-size:15.5px}
.bs-row__sub{font-size:14px;color:var(--muted)}
.bs-row__sub--ink2{color:var(--ink2)}
.bs-row__stat{text-align:right}
.bs-row__stat-n{font-weight:700;font-size:15.5px;font-variant-numeric:tabular-nums}
.bs-row__stat-n--coral{color:var(--coral-dk)}
.bs-row__stat-l{font-size:13.5px;color:var(--muted)}
.bs-row__chev{color:var(--muted);flex:none}
.bs-row__hint{display:flex;gap:8px;flex:none;align-items:center;font-size:14px;font-weight:600;color:var(--muted)}
.bs-nearby{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 0;border-bottom:1px solid var(--divider)}
.bs-nearby__label{display:flex;align-items:center;gap:9px;font-size:15px;font-weight:600}
.bs-nearby__dot{width:7px;height:7px;border-radius:99px;background:var(--teal);flex:none}
.bs-nearby__dist{font-size:14px;font-weight:700;color:var(--teal);font-variant-numeric:tabular-nums}
.bs-nearby--plain .bs-nearby__dist{color:var(--muted);font-weight:600}
.bs-lister{background:var(--soft);border-radius:16px;padding:14px 16px;display:flex;gap:12px;align-items:center}
.bs-lister__name{font-weight:700;font-size:15px}
.bs-lister__meta{font-size:14px;color:var(--ink2)}
/* One pill per thing that was actually checked — see VerificationBadges. */
.bs-lister__badges{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.bs-lister__badges .bs-pill{font-size:13px;padding:3px 9px}
.bs-lister .bs-avatar{width:40px;height:40px;font-size:15.5px}
@media (min-width:760px){
  .bs-row__title{font-size:16.5px}
  .bs-row__sub{font-size:14.5px}
  .bs-row--grid{gap:16px}
  .bs-nearby{padding:12px 0}
  .bs-nearby__label{gap:10px;font-size:16px}
  .bs-nearby__dot{width:8px;height:8px}
  .bs-nearby__dist{font-size:15px}
  .bs-lister{border-radius:18px;padding:18px 20px;gap:14px}
  .bs-lister__name{font-size:16px}
  .bs-lister__meta{font-size:14px}
  .bs-lister .bs-avatar{width:44px;height:44px;font-size:17.5px}
}
@media (hover:hover) and (min-width:760px){
  .bs-row--link:hover{background:var(--paper)}
}

/* ---------- Gallery ---------- */
.bs-gal{position:relative;height:300px;background-color:var(--soft);background-position:center;background-size:cover;background-repeat:no-repeat;overflow:hidden}
.bs-gal--sm{height:200px}
.bs-gal--review{height:260px}
.bs-gal__nav{position:absolute;top:50%;transform:translateY(-50%);width:34px;height:34px;border-radius:99px;border:none;background:rgba(255,252,247,.9);display:grid;place-items:center;cursor:pointer;box-shadow:0 2px 8px rgba(28,22,38,.18);color:var(--ink);padding:0;z-index:1}
.bs-gal__nav--prev{left:10px}
.bs-gal__nav--next{right:10px}
.bs-gal__counter{position:absolute;bottom:10px;right:12px;font-size:13px;font-weight:700;padding:4px 9px;border-radius:999px;background:rgba(28,22,38,.7);color:var(--paper);font-variant-numeric:tabular-nums;line-height:1.3}
.bs-gal__dots{position:absolute;bottom:12px;left:0;right:0;display:flex;justify-content:center;gap:5px}
.bs-gal__dot{width:6px;height:6px;border-radius:99px;background:rgba(250,244,236,.55);transition:width .2s}
.bs-gal__dot.is-active{width:18px;background:var(--paper)}
.bs-gal__badges{position:absolute;top:10px;left:10px;display:flex;gap:6px;flex-wrap:wrap}
.bs-gal__save{position:absolute;top:14px;right:14px;width:40px;height:40px;border-radius:99px;border:none;background:rgba(255,252,247,.92);display:grid;place-items:center;cursor:pointer;padding:0;z-index:1}
.bs-gal__tag{position:absolute;top:16px;right:14px}
.bs-gal__thumbs{display:none;gap:10px;margin-top:10px;overflow-x:auto;padding-bottom:4px;scrollbar-width:none}
.bs-gal__thumbs::-webkit-scrollbar{display:none}
.bs-gal__thumb{flex:none;width:86px;height:58px;border-radius:12px;background-color:var(--soft);background-position:center;background-size:cover;cursor:pointer;border:3px solid transparent;padding:0;opacity:.7}
.bs-gal__thumb.is-active{border-color:var(--coral);opacity:1}
.bs-gal__thumb--sm{width:64px;height:48px;border-radius:10px;border-width:2.5px;opacity:1}
@media (min-width:760px){
  .bs-gal{height:420px;border-radius:26px;margin-top:18px}
  .bs-gal--flat{border-radius:0;margin-top:0}
  .bs-gal--sm{height:260px;border-radius:22px}
  .bs-gal--review{height:380px;border-radius:22px;margin-top:0}
  .bs-gal__nav{width:42px;height:42px;background:rgba(255,252,247,.92);box-shadow:none}
  .bs-gal__nav--prev{left:14px}
  .bs-gal__nav--next{right:14px}
  .bs-gal--review .bs-gal__nav{width:38px;height:38px;background:rgba(255,252,247,.9);box-shadow:0 2px 8px rgba(28,22,38,.18)}
  .bs-gal--review .bs-gal__nav--prev{left:12px}
  .bs-gal--review .bs-gal__nav--next{right:12px}
  .bs-gal__counter{bottom:16px;right:16px;font-size:14px;padding:6px 12px}
  .bs-gal--review .bs-gal__counter{bottom:12px;right:12px;font-size:13.5px;padding:5px 10px}
  .bs-gal__dots{display:none}
  .bs-gal__badges{top:16px;left:16px;gap:8px}
  .bs-gal__save{top:16px;right:16px}
  .bs-gal__thumbs{display:flex}
  .bs-gal__thumb{width:110px;height:74px}
  .bs-gal__thumb--sm{width:64px;height:48px}
}
/* The detail gallery grows with its (now wider) column instead of turning
   into a letterbox — gently, so the price card under it stays near the fold:
   420px up to 1750px wide, 500px at most. */
@media (min-width:1020px){
  .bs-gal.pub-gal{height:clamp(420px,24vw,500px)}
}
@media (hover:hover) and (min-width:760px){
  .bs-gal__nav:hover,.bs-gal__save:hover{background:#fff}
}

/* ---------- Dialog: bottom sheet (mobile) / centered modal (tablet+) ---------- */
.bs-dialog{display:none;position:fixed;inset:0;z-index:200}
.bs-dialog.is-open{display:block}
.bs-dialog--top{z-index:210}
.bs-dialog__backdrop{position:fixed;inset:0;background:rgba(28,22,38,.45);animation:bs-fade .2s ease}
.bs-dialog__panel{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:430px;background:var(--card);border-radius:26px 26px 0 0;z-index:1;padding:14px 20px 22px;padding-bottom:max(22px,env(safe-area-inset-bottom));box-shadow:var(--shadow-sheet);max-height:88vh;overflow-y:auto;animation:bs-slide-up .28s cubic-bezier(.2,.7,.3,1)}
.bs-dialog__handle{width:44px;height:5px;border-radius:99px;background:var(--line);margin:0 auto}
.bs-dialog__head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-top:14px}
.bs-dialog__title{font-size:20.5px}
.bs-dialog__close{display:none;width:34px;height:34px;border-radius:99px;border:none;background:var(--soft);place-items:center;cursor:pointer;flex:none;color:var(--ink2);padding:0}
.bs-dialog__sub{font-size:15px;color:var(--ink2);margin-top:8px}
.bs-dialog__actions{display:flex;gap:8px;margin-top:14px}
@keyframes bs-slide-up{from{transform:translate(-50%,24px);opacity:.6}to{transform:translate(-50%,0);opacity:1}}
@keyframes bs-fade{from{opacity:0}to{opacity:1}}
@keyframes bs-pop{from{transform:translateY(10px);opacity:0}to{transform:translateY(0);opacity:1}}
@media (min-width:760px){
  .bs-dialog.is-open{display:grid;place-items:center;padding:20px}
  .bs-dialog__backdrop{background:rgba(28,22,38,.5)}
  .bs-dialog__panel{position:relative;bottom:auto;left:auto;transform:none;max-width:520px;border-radius:24px;padding:28px;box-shadow:var(--shadow-modal);max-height:86vh;overflow:auto;animation:bs-pop .22s ease}
  .bs-dialog__panel--sm{max-width:400px}
  .bs-dialog__panel--md{max-width:440px}
  .bs-dialog__panel--lg{max-width:460px}
  .bs-dialog__panel--xl{max-width:480px}
  .bs-dialog__panel--wide{max-width:560px}
  .bs-dialog__handle{display:none}
  .bs-dialog__head{margin-top:0}
  .bs-dialog__title{font-size:23px}
  .bs-dialog__close{display:grid}
  .bs-dialog__sub{margin-top:6px}
  .bs-dialog__actions{gap:10px;margin-top:16px}
}

/* ---------- Toast ---------- */
.bs-toast{position:fixed;left:50%;bottom:calc(var(--tabbar-h) + 16px + env(safe-area-inset-bottom));transform:translate(-50%,8px);background:var(--ink);color:var(--paper);font-size:15px;font-weight:600;padding:12px 18px;border-radius:999px;box-shadow:0 12px 40px rgba(28,22,38,.25);z-index:300;opacity:0;pointer-events:none;transition:opacity .2s ease,transform .2s ease;max-width:calc(100% - 36px);text-align:center}
.bs-toast.is-show{opacity:1;transform:translate(-50%,0)}
.bs-toast--ok{background:var(--teal);color:#fff}
.bs-toast--warn{background:var(--coral-dk);color:#fff}
@media (min-width:760px){
  .bs-toast{bottom:28px}
}
/* The sign-in welcome (AuthController flashKind=welcome): a card at the TOP of the
   page it lands on, where it is seen — it answers "am I signed in?". */
.bs-toast.bs-toast--welcome{top:84px;bottom:auto;transform:translate(-50%,-8px);background:var(--teal);color:#fff;font-size:16.5px;padding:14px 22px 14px 48px;border-radius:16px;text-align:left;box-shadow:0 16px 44px rgba(18,138,124,.35)}
.bs-toast.bs-toast--welcome.is-show{transform:translate(-50%,0)}
.bs-toast.bs-toast--welcome::before{content:"\2713";position:absolute;left:16px;top:50%;width:22px;height:22px;margin-top:-11px;border-radius:50%;background:#fff;color:var(--teal);font-size:14.5px;font-weight:800;line-height:22px;text-align:center}
.bs-acct__hi{font-size:15px;font-weight:600;color:var(--ink);white-space:nowrap;max-width:140px;overflow:hidden;text-overflow:ellipsis}
/* the greeting only where the top bar has room for it beside the menus */
/* (from 1600px: from 1280 the intents start on the content column's line, and
   below 1600 the greeting would push the actions past the content's right edge) */
@media (max-width:1599.98px){.bs-acct__hi{display:none}}
/* a tablet keeps the single column, but not a phone-width one */
@media (min-width:760px) and (max-width:899.98px){.bs-account{max-width:640px}}

/* ---------- Empty state ---------- */
.bs-empty{text-align:center;padding:64px 24px;color:var(--muted)}
.bs-empty--sm{padding:56px 24px}
.bs-empty__icon{color:var(--faint)}
.bs-empty__title{font-weight:700;font-size:18.5px;color:var(--ink2);margin-top:8px}
.bs-empty__body{font-size:15px;margin-top:6px}
.bs-empty .bs-btn{margin-top:16px}
.bs-empty .bs-btn--md{padding:13px 24px}
.bs-empty--sm .bs-btn--md{padding:12px 22px;box-shadow:none}
@media (min-width:760px){
  .bs-empty{padding:70px 20px}
  .bs-empty--sm{padding:60px 20px}
  .bs-empty__title{font-size:19.5px}
  .bs-empty__body{font-size:15.5px}
  .bs-empty .bs-btn{margin-top:18px}
  .bs-empty .bs-btn--md{padding:12px 22px}
}

/* ---------- Stat tiles ---------- */
.bs-stat{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:14px;color:var(--ink);text-decoration:none;display:block}
.bs-stat:hover{color:var(--ink)}
.bs-stat--link{cursor:pointer}
.bs-stat__head{display:flex;justify-content:space-between;align-items:center}
.bs-stat__label{font-size:14px;font-weight:600;color:var(--ink2)}
.bs-stat__value{font-family:var(--font-display);font-weight:800;font-size:26px;margin-top:3px;font-variant-numeric:tabular-nums;letter-spacing:-.02em;line-height:1.1}
.bs-stat__value--coral{color:var(--coral-lg)}
.bs-stat__value--teal{color:var(--teal)}
.bs-stat__value--sm{font-size:24px}
.bs-stat__delta{font-size:13.5px;font-weight:600;margin-top:2px;color:var(--muted)}
.bs-stat__delta--ok{color:var(--teal)}
.bs-stat__delta--warn{color:var(--amber-dk)}
.bs-stat--big .bs-stat__value{font-size:28px;margin-top:4px}
@media (min-width:760px){
  .bs-stat{border-radius:18px;padding:20px}
  .bs-stat__label{font-size:14.5px}
  .bs-stat__value{font-size:32px;margin-top:6px}
  .bs-stat__value--sm,.bs-stat--big .bs-stat__value{font-size:32px}
}
@media (hover:hover) and (min-width:760px){
  .bs-stat--link:hover{border-color:var(--ink)}
}

/* ---------- Plum card (charts) ---------- */
.bs-plum-card{background:var(--plum);border-radius:22px;padding:18px;color:var(--paper)}
.bs-plum-card--sm{border-radius:20px}
.bs-plum-card__head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.bs-plum-card__eyebrow{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:rgba(250,244,236,.6)}
.bs-plum-card__eyebrow--marigold{color:var(--marigold)}
.bs-plum-card__value{font-family:var(--font-display);font-weight:800;font-size:32px;margin-top:4px;font-variant-numeric:tabular-nums}
.bs-plum-card__title{font-family:var(--font-display);font-weight:800;font-size:28px;margin-top:4px;line-height:1.15}
.bs-plum-card__title--sm{font-size:18.5px;margin-top:6px}
.bs-plum-card__body{font-size:14px;color:rgba(250,244,236,.75);margin-top:6px}
.bs-plum-card__axis{display:flex;justify-content:space-between;font-size:13px;font-weight:700;color:rgba(250,244,236,.66);margin-top:6px}
.bs-plum-card__row{display:flex;gap:10px;margin-top:12px}
.bs-plum-card .bs-tile--on-dark{flex:1}
.bs-plum-card .bs-tile--on-dark .bs-tile__label{font-size:13px;color:rgba(250,244,236,.6)}
.bs-plum-card .bs-tile--on-dark .bs-tile__value{font-weight:700;font-size:14.5px;margin-top:2px}
.bs-sparkline{width:100%;height:72px;margin-top:10px;display:block}
.bs-sparkline__area{fill:rgba(255,84,54,.25)}
.bs-sparkline__line{fill:none;stroke:var(--coral);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.bs-sparkline--marigold .bs-sparkline__area{fill:rgba(255,178,46,.22)}
.bs-sparkline--marigold .bs-sparkline__line{stroke:var(--marigold)}
@media (min-width:760px){
  .bs-plum-card{padding:20px}
  .bs-plum-card--lg{padding:22px}
  .bs-plum-card__value{font-size:30px}
  .bs-plum-card__title{font-size:28px}
  .bs-plum-card__title--sm{font-size:24px}
  .bs-plum-card__axis{margin-top:4px}
  .bs-sparkline{height:64px;margin-top:8px}
  .bs-sparkline__area{fill:rgba(255,178,46,.22)}
  .bs-sparkline__line{stroke:var(--marigold)}
}

/* ---------- Donut + legend ---------- */
.bs-donut-wrap{display:flex;flex-wrap:wrap;align-items:center;gap:18px;margin-top:16px}
.bs-donut{position:relative;width:118px;height:118px;flex:none}
.bs-donut svg{width:100%;height:100%;display:block}
.bs-donut__center{position:absolute;inset:0;display:grid;place-items:center;text-align:center}
.bs-donut__total{font-family:var(--font-display);font-weight:800;font-size:28px;line-height:1;color:var(--paper);font-variant-numeric:tabular-nums}
.bs-donut__label{font-size:13px;font-weight:600;color:rgba(250,244,236,.6);margin-top:2px}
.bs-legend{flex:1 1 160px;display:flex;flex-direction:column;gap:9px;min-width:0}
.bs-legend__row{display:flex;align-items:center;gap:8px;min-height:26px;cursor:pointer;color:inherit;text-decoration:none}
.bs-legend__row:hover{color:inherit}
.bs-legend__swatch{width:10px;height:10px;border-radius:3px;flex:none}
.bs-legend__label{font-size:14px;font-weight:600;color:rgba(250,244,236,.85);flex:1;min-width:0}
.bs-legend__value{font-family:var(--font-display);font-weight:800;font-size:16.5px;font-variant-numeric:tabular-nums}
.bs-legend__chev{color:rgba(250,244,236,.5);flex:none}
@media (min-width:760px){
  .bs-donut-wrap{gap:22px;margin-top:18px}
  .bs-donut{width:130px;height:130px}
  .bs-donut__total{font-size:30px}
  .bs-donut__label{font-size:13px}
  .bs-legend{gap:10px}
  .bs-legend__row{gap:9px}
  .bs-legend__label{font-size:14.5px}
  .bs-legend__value{font-size:17.5px}
}

/* ---------- Bar chart ---------- */
.bs-bars{display:flex;align-items:flex-end;gap:8px;height:104px;margin-top:12px}
.bs-bars__col{flex:1;display:flex;flex-direction:column;align-items:center;gap:5px;height:100%;justify-content:flex-end}
.bs-bars__n{font-size:13px;font-weight:700;color:var(--ink2);font-variant-numeric:tabular-nums}
.bs-bars__bar{width:100%;max-width:26px;border-radius:6px 6px 3px 3px;background:var(--coral);min-height:4px;transition:height .4s}
.bs-bars__bar--weekend{background:var(--marigold)}
.bs-bars__bar--zero{background:var(--soft)}
.bs-bars__bar--indigo{background:var(--indigo)}
.bs-bars__bar--today{background:var(--teal)}
.bs-bars__day{font-size:13px;font-weight:700;color:var(--muted)}
@media (min-width:760px){
  .bs-bars--lg{gap:10px;height:118px;margin-top:14px}
  .bs-bars--lg .bs-bars__n,.bs-bars--lg .bs-bars__day{font-size:13px}
}

/* ---------- Sticky action bar ---------- */
.bs-sticky-actions{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:430px;background:rgba(255,252,247,.97);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-top:1px solid var(--line);padding:12px 16px 16px;padding-bottom:max(16px,env(safe-area-inset-bottom));display:flex;gap:10px;z-index:60}
.bs-sticky-actions .bs-btn{padding-left:14px;padding-right:14px;font-size:15.5px}
.bs-decision{flex:1;text-align:center;font-size:15px;font-weight:700;padding:14px;border-radius:999px;background:var(--soft);color:var(--ink2)}
.bs-decision--ok{background:var(--teal-soft);color:var(--teal)}
@media (min-width:760px){
  .bs-sticky-actions{position:static;transform:none;max-width:none;background:transparent;backdrop-filter:none;border:none;padding:0;flex-direction:column;gap:10px;margin-top:18px}
  .bs-sticky-actions .bs-btn{padding:14px 22px;font-size:16.5px;flex:none;width:100%}
  .bs-decision{display:inline-block;flex:none;font-size:14.5px;padding:8px 16px;text-align:left}
}

/* ---------- Due-diligence ---------- */
.bs-dd-list{margin-top:12px;display:flex;flex-direction:column}
.bs-dd-item{display:flex;gap:10px;align-items:flex-start;padding:6px 0;font-size:14.5px;color:var(--ink2);line-height:1.5}
.bs-dd-item svg{margin-top:2px;color:var(--teal)}
.bs-dd-item--card{padding:8px 0}
.bs-dd-agree{display:flex;gap:10px;align-items:flex-start;width:100%;border:1.5px solid var(--line);border-radius:14px;padding:12px;background:var(--card);cursor:pointer;font-family:inherit;color:var(--ink2);margin-top:14px;text-align:left;position:relative}
.bs-dd-agree input{position:absolute;opacity:0;width:0;height:0}
.bs-dd-agree.is-checked,.bs-dd-agree:has(input:checked){border-color:var(--teal);background:var(--teal-tint)}
.bs-dd-agree__box{width:20px;height:20px;border-radius:6px;flex:none;display:grid;place-items:center;margin-top:1px;border:2px solid var(--field);background:transparent}
.bs-dd-agree__box svg{display:none}
.bs-dd-agree.is-checked .bs-dd-agree__box,.bs-dd-agree:has(input:checked) .bs-dd-agree__box{border-color:var(--teal);background:var(--teal)}
.bs-dd-agree.is-checked .bs-dd-agree__box svg,.bs-dd-agree:has(input:checked) .bs-dd-agree__box svg{display:block}
.bs-dd-agree__text{font-size:14px;line-height:1.5}
.bs-dd-agree + .bs-btn{margin-top:14px}
@media (min-width:760px){
  .bs-dd-list{margin-top:14px;gap:9px}
  .bs-dd-item{padding:0;font-size:15px;color:var(--ink)}
  .bs-dd-agree{margin-top:16px;background:#fff}
  .bs-dd-agree.is-checked,.bs-dd-agree:has(input:checked){background:#F0FAF8}
  .bs-dd-agree__text{font-size:14.5px;color:var(--ink)}
}

/* ---------- Auth screen ---------- */
.bs-auth{padding:18px 18px 32px}
.bs-auth__pitch{display:none}
.bs-auth__card{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:18px;margin-top:16px}
.bs-auth__intro{margin-top:14px}
.bs-auth__point{display:flex;gap:14px;align-items:flex-start}
.bs-auth__point-icon{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;flex:none}
.bs-auth__point-icon--coral{background:var(--coral-soft);color:var(--coral-dk)}
.bs-auth__point-icon--amber{background:var(--amber-soft);color:var(--amber-dk)}
.bs-auth__point-icon--teal{background:var(--teal-soft);color:var(--teal)}
.bs-auth__point-title{font-weight:700;font-size:16.5px}
.bs-auth__point-body{font-size:15px;color:var(--ink2)}
.bs-auth__rolelabel{margin-top:18px;margin-bottom:0}
.bs-auth__roles{display:flex;gap:8px;margin-top:8px}
.bs-auth__cta{margin-top:16px}
.bs-auth__hint{font-size:14px;color:var(--muted);margin-top:6px;min-height:18px}
.bs-auth__staff{display:inline-flex;align-items:center;gap:8px;font-family:inherit;font-size:14px;font-weight:700;padding:11px 14px;border-radius:12px;background:var(--plum);color:var(--paper);border:1.5px solid var(--plum);width:100%;margin-top:10px;text-align:left}
.bs-auth__resend{display:flex;justify-content:center;gap:6px;margin-top:12px;font-size:14px;color:var(--muted);flex-wrap:wrap}
.bs-auth__resend button,.bs-auth__resend a{font-family:inherit;font-weight:700;font-size:14px;border:none;background:transparent;color:var(--coral-dk);cursor:pointer;padding:4px 2px}
.bs-auth__resend button:disabled{color:var(--muted);cursor:default}
.bs-auth__change{display:block;text-align:center;margin-top:6px;padding:6px 0;font-size:14px;font-weight:600;color:var(--ink2);text-decoration:underline;text-underline-offset:3px}
@media (min-width:760px){
  .bs-auth{max-width:var(--page-w);margin:0 auto;padding:56px var(--gutter) 80px;display:grid;grid-template-columns:1fr;gap:32px;align-items:center}
  .bs-auth__pitch{display:block}
  .bs-auth__intro{display:none}
  .bs-auth__card{border-radius:26px;box-shadow:var(--shadow-card);padding:28px;margin-top:0}
  .bs-auth__rolelabel{margin-top:22px}
  .bs-auth__roles{margin-top:10px}
  .bs-auth__cta{margin-top:20px;font-size:17px}
  .bs-auth__hint{font-size:14px;margin-top:8px}
  .bs-auth__pitch-list{display:flex;flex-direction:column;gap:16px;margin-top:28px;max-width:440px}
}
@media (min-width:1020px){
  .bs-auth{grid-template-columns:1fr 460px;gap:48px}
}

/* ---------- Account screen ---------- */
.bs-account{max-width:430px;margin:0 auto}
.bs-account__head{display:flex;gap:14px;align-items:center}
.bs-account__name{font-weight:700;font-size:17.5px}
.bs-account__phone{font-size:14px;color:var(--muted)}
.bs-account__badge{margin-top:5px}
.bs-account__item{display:flex;justify-content:space-between;align-items:center;font-family:inherit;font-weight:600;font-size:16.5px;text-align:left;border:none;background:transparent;padding:14px 12px;border-radius:14px;cursor:pointer;color:var(--ink);width:100%;text-decoration:none}
.bs-account__item:hover{color:var(--ink)}
.bs-account__item-chev{color:var(--muted);font-size:16.5px}
.bs-account__signout{font-family:inherit;font-weight:600;font-size:16.5px;text-align:left;border:none;background:transparent;padding:14px 12px;border-radius:14px;cursor:pointer;color:var(--coral-dk);width:100%}
.bs-account__foot{text-align:center;margin-top:26px}
@media (hover:hover){
  .bs-account__item:hover{background:var(--soft)}
  .bs-account__signout:hover{background:var(--coral-tint)}
}
@media (min-width:760px){
  .bs-account{padding-top:32px;padding-bottom:64px}
}
/* Settings rows: a value / count before the chevron; a section title above a menu card */
.bs-account__email{font-size:14px;color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bs-account__section{font-size:12.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:22px 4px 8px}
.bs-account__item-end{display:flex;align-items:center;gap:8px;min-width:0;flex:none;max-width:60%}
.bs-account__item-meta{font-size:14.5px;font-weight:500;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.bs-account__item--danger{color:var(--coral-dk)}
.bs-account__item--danger:hover{color:var(--coral-dk)}
.bs-count{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 7px;border-radius:999px;background:var(--coral-strong);color:#fff;font-size:13.5px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums}
/* Sub-pages (profile, mobile, devices, notifications): a little wider on tablet+ */
.bs-account--settings .bs-back-link{margin-bottom:10px}
.bs-account__title{font-size:26px}
.bs-account__lede{font-size:15px;color:var(--ink2);margin-top:6px}
@media (hover:hover){
  .bs-account__item--danger:hover{background:var(--coral-tint)}
}
@media (min-width:760px){
  .bs-account--settings{max-width:640px}
  .bs-account__title{font-size:clamp(28px,3vw,34px)}
  .bs-account__section{font-size:13px}
}

/* ---------- Notification bell + badges ---------- */
.bs-bell{position:relative;width:40px;height:40px;border-radius:999px;border:1.5px solid var(--line);background:var(--card);display:grid;place-items:center;flex:none;color:var(--ink);text-decoration:none;padding:0}
.bs-bell:hover{color:var(--ink)}
.bs-bell--m{width:38px;height:38px}
.bs-bell__badge{position:absolute;top:-6px;right:-7px;min-width:20px;height:20px;padding:0 5px;border-radius:999px;background:var(--coral-strong);color:#fff;font-size:13px;font-weight:700;line-height:20px;text-align:center;border:2px solid var(--paper);box-sizing:content-box;font-variant-numeric:tabular-nums}
.bs-acct__settings{display:flex;justify-content:space-between;align-items:center;margin-top:10px;padding:9px 10px;border-radius:10px;background:var(--soft);font-weight:600;font-size:15px;color:var(--ink2);text-decoration:none}
.bs-acct__settings:hover{color:var(--ink)}
.bs-tabbar__icon{position:relative;display:inline-flex}
.bs-tabbar__dot{position:absolute;top:-2px;right:-5px;width:10px;height:10px;border-radius:99px;background:var(--coral);border:2px solid var(--ink)}
@media (hover:hover){
  .bs-bell:hover{border-color:var(--ink)}
}

/* ---------- Notification feed ---------- */
.bs-feed{display:flex;flex-direction:column}
.bs-feed__item{display:flex;gap:12px;align-items:flex-start;padding:14px 12px;border-radius:14px;color:var(--ink);text-decoration:none;position:relative}
.bs-feed__item:hover{color:var(--ink)}
.bs-feed__item + .bs-feed__item{border-top:1px solid var(--divider)}
.bs-feed__item.is-unread{background:var(--coral-tint)}
.bs-feed__item.is-unread + .bs-feed__item{border-top-color:transparent}
.bs-feed__icon{width:36px;height:36px;border-radius:12px;display:grid;place-items:center;flex:none;background:var(--soft);color:var(--ink2)}
.bs-feed__icon--ok{background:var(--teal-soft);color:var(--teal)}
.bs-feed__icon--warn{background:var(--coral-soft);color:var(--coral-dk)}
.bs-feed__icon--lead{background:var(--amber-soft);color:var(--amber-dk)}
.bs-feed__body{flex:1;min-width:0}
.bs-feed__title{font-weight:600;font-size:15.5px;line-height:1.35}
.bs-feed__item.is-unread .bs-feed__title{font-weight:700}
.bs-feed__text{font-size:14.5px;color:var(--ink2);margin-top:3px;line-height:1.45}
.bs-feed__meta{font-size:14px;color:var(--muted);margin-top:5px;display:flex;align-items:center;gap:6px}
.bs-feed__dot{width:8px;height:8px;border-radius:99px;background:var(--coral);flex:none;margin-top:6px}
.bs-feed__head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap}
@media (hover:hover){
  .bs-feed__item:hover{background:var(--soft)}
  .bs-feed__item.is-unread:hover{background:var(--coral-soft)}
}
@media (min-width:760px){
  .bs-feed__item{padding:16px 14px}
  .bs-feed__title{font-size:16.5px}
  .bs-feed__text{font-size:15px}
}

/* ---------- Signed-in devices ---------- */
.bs-device{display:flex;gap:12px;align-items:center;padding:14px 12px}
.bs-device + .bs-device{border-top:1px solid var(--divider)}
.bs-device__icon{width:40px;height:40px;border-radius:12px;background:var(--soft);color:var(--ink2);display:grid;place-items:center;flex:none}
.bs-device__body{flex:1;min-width:0}
.bs-device__name{font-weight:700;font-size:16px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.bs-device__meta{font-size:14px;color:var(--muted);margin-top:2px}
.bs-device form{flex:none}

/* ---------- Error pages ---------- */
.bs-error{min-height:60vh;display:grid;place-items:center;text-align:center;padding:48px 24px}
.bs-error__code{font-family:var(--font-display);font-weight:800;font-size:72px;line-height:1;color:var(--coral-lg);letter-spacing:-.03em}
.bs-error__title{font-size:28px;margin-top:12px}
.bs-error__body{font-size:16px;color:var(--ink2);margin-top:8px;max-width:420px}
.bs-error .bs-btn{margin-top:22px}
@media (min-width:760px){
  .bs-error__code{font-size:120px}
  .bs-error__title{font-size:clamp(30px,4vw,42px)}
}

/* ---------- Home hero blobs (desktop) ---------- */
.bs-hero{position:relative;overflow:hidden}
.bs-hero__blob{position:absolute;border-radius:50%;pointer-events:none}
.bs-hero__blob--marigold{top:-120px;right:-80px;width:420px;height:420px;background:var(--marigold);opacity:.32;filter:blur(90px)}
.bs-hero__blob--coral{bottom:-140px;left:-100px;width:380px;height:380px;background:var(--coral);opacity:.22;filter:blur(100px)}
.bs-dot{display:inline-block;width:8px;height:8px;border-radius:99px;flex:none}
.bs-dot--teal{background:var(--teal)}
.bs-dot--coral{background:var(--coral)}
.bs-dot--marigold{background:var(--marigold)}

/* ---------- Env banner (non-prod) ---------- */
.bs-envbar{background:var(--marigold);color:var(--ink);font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;text-align:center;padding:4px 10px}

/* ---------- Misc ---------- */
.bs-divider{height:1px;background:var(--divider);border:none;margin:0}
.bs-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* Skip link: hidden (.bs-sr) until it takes keyboard focus. */
.bs-skip:focus,.bs-skip:focus-visible{position:fixed;left:12px;top:12px;width:auto;height:auto;clip:auto;clip-path:none;overflow:visible;white-space:normal;z-index:1000;padding:10px 16px;border-radius:10px;background:var(--ink);color:#fff;font-weight:700;text-decoration:none;outline:3px solid var(--coral)}
main[tabindex="-1"]:focus{outline:none}
/* Links inside running text are underlined, never told apart by colour alone (WCAG 1.4.1). */
:where(p,li,.lg-qa__a,.ls-hint,.ad-r__sub,.bs-help,.bs-empty__body) a:not([class*="bs-btn"]):not(.bs-chip){text-decoration:underline;text-underline-offset:3px}
/* Radio chips hide their input, so the chip carries the focus ring. */
.bs-chip:has(input:focus-visible){outline:3px solid var(--coral-dk);outline-offset:2px}
/* "Get new homes on Telegram" (fragments/telegram.html). */
.bs-tg{display:flex;align-items:center;gap:14px;flex-wrap:wrap;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:14px 16px}
.bs-tg__icon,.bs-tg-note__icon{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--teal-soft);color:var(--teal)}
.bs-tg__text{flex:1 1 220px;min-width:0;display:grid;gap:2px;font-size:15px;color:var(--ink2);line-height:1.45}
.bs-tg__text b{color:var(--ink);font-size:16px}
.bs-tg__btn{flex:none;min-height:44px}
.bs-tg-note{display:flex;align-items:center;gap:10px;margin:12px 0 0;font-size:14px;color:var(--ink2);line-height:1.45}
.bs-tg-note[hidden]{display:none}
.bs-tg-note__icon{width:36px;height:36px}
.bs-tg-note a{color:var(--teal);font-weight:700;text-decoration:underline;text-underline-offset:3px}
/* A lead's name opens its details sheet (role=button). */
[data-lead-open]{cursor:pointer}
[data-lead-open]:focus-visible{outline:3px solid var(--coral-dk);outline-offset:2px;border-radius:6px}
.bs-share{display:flex;height:12px;border-radius:99px;overflow:hidden;margin-top:12px}
.bs-share__keep{width:80%;background:var(--teal)}
.bs-share__ours{width:20%;background:var(--marigold)}
.bs-kv{display:flex;justify-content:space-between;font-size:14.5px;padding:4px 0;gap:10px}
.bs-kv b{font-variant-numeric:tabular-nums}
.bs-kv--total{border-top:1px solid var(--line);margin-top:4px;padding-top:8px}
.bs-kv__coral{color:var(--coral-dk)}
.bs-kv__teal{color:var(--teal)}
.bs-qr{width:190px;height:190px;margin:16px auto 0;border-radius:12px;background:#fff;display:block;object-fit:contain}
.bs-poster{background:#fff;border:1.5px solid var(--line);border-radius:20px;padding:22px;margin-top:14px;text-align:center}
.bs-poster--dark{background:var(--plum);color:var(--paper);border:none;border-radius:18px;margin-top:16px}
.bs-photo-drop{border:1.5px dashed var(--line);border-radius:16px;padding:22px;text-align:center;color:var(--muted);cursor:pointer;background:var(--card);font-size:14.5px;font-weight:600}
.bs-photo-drop:hover{border-color:var(--ink);color:var(--ink2)}
.bs-photo-thumb{width:52px;height:40px;border-radius:9px;flex:none;background-color:var(--soft);background-position:center;background-size:cover}
.bs-step{display:flex;align-items:center;gap:10px;font-weight:700;font-size:15.5px}
.bs-step__n{width:26px;height:26px;border-radius:99px;background:var(--ink);color:var(--paper);display:grid;place-items:center;font-family:var(--font-display);font-weight:800;font-size:14px;flex:none}

/* ---------- Install hint ("Add to Home screen") ----------
   A quiet card floating above the tab bar on phones, bottom-right from tablet
   up. Hidden in the markup; shell.js unhides it at most once per device and
   sets data-mode=prompt (a real install prompt is waiting) or data-mode=ios
   (Safari's Share menu is the only route), which picks the sub-line. */
.bs-install{position:fixed;left:12px;right:12px;bottom:calc(var(--tabbar-h) + 16px + env(safe-area-inset-bottom));z-index:80;display:flex;align-items:center;gap:12px;
  background:var(--card);border:1px solid var(--line);border-radius:18px;padding:12px 14px;box-shadow:var(--shadow-card)}
.bs-install__mark{width:34px;height:34px;border-radius:11px;background:var(--coral);display:grid;place-items:center;flex:none}
.bs-install__text{min-width:0;flex:1}
.bs-install__title{font-family:var(--font-display);font-weight:700;font-size:15.5px;letter-spacing:-0.01em;line-height:1.2}
.bs-install__sub{display:none;font-size:14px;color:var(--ink2);margin-top:3px}
.bs-install__sub svg{vertical-align:-2px}
.bs-install[data-mode="prompt"] .bs-install__sub--prompt{display:block}
.bs-install[data-mode="ios"] .bs-install__sub--ios{display:block}
.bs-install__act{flex:none}
.bs-install__x{flex:none;align-self:flex-start;border:none;background:transparent;color:var(--muted);font-size:20.5px;line-height:1;padding:2px 4px;cursor:pointer;border-radius:8px}
.bs-install__x:hover{color:var(--ink)}
@media (min-width:760px){
  .bs-install{left:auto;right:24px;bottom:24px;max-width:420px;border-radius:20px;padding:14px 16px}
  .bs-install__title{font-size:16.5px}
  .bs-install__sub{font-size:14.5px}
}

/* ---------- Partner referral offer (§21) ----------
   One card, one screenful, on the listing detail page and on the lister's manage
   page after a deal closes. Lives here rather than in a page stylesheet because
   fragments/partner.html is shared by pages that load public.css and lister.css.
   The refused button is the consent gate (shell.js): it reads as unavailable
   rather than merely inert, so it is obvious what is missing. */
.pr-offer{margin-top:14px;border-color:var(--coral);background:var(--card)}
.pr-offer__head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.pr-offer__eyebrow{color:var(--coral-dk)}
.pr-offer__kind{font-size:13px}
.pr-offer__title{display:block;font-family:var(--font-display);font-size:17.5px;letter-spacing:-0.01em;margin-top:8px}
.pr-offer__blurb{margin-top:5px;line-height:1.55}
.pr-offer__done{margin-top:12px}
.pr-offer__err{margin-top:12px}
.pr-offer__agree{margin-top:14px}
.pr-offer__btn{margin-top:14px}
.pr-offer__btn[disabled]{opacity:.5;cursor:not-allowed;box-shadow:none}
.pr-offer__foot{margin-top:8px;line-height:1.5}
@media (min-width:760px){
  .pr-offer{margin-top:18px;border-radius:20px}
  .pr-offer__title{font-size:19.5px}
  .pr-offer__kind{font-size:13.5px}
}

/* ---------- Account area: menu left, page right ----------
   Every page reached from the account menu — including the Help pages (/services,
   /help and the legal pages) when someone is signed in, and the sub-pages
   (manage, edit, post-done, checkout) — wraps its .bs-page in .bs-acct-layout
   with fragments/account :: side beside it. Below 900px the menu is not shown
   and the layout is a plain block (the phone's Account list + back links).

   ONE RULE for every page in it:
     - the content starts on ONE left line: right after the menu + --side-gap
       (the gutter below 900px), never centred in the space that is left;
     - ONE top offset: the page's title block (.bs-acct-head) is the first
       thing in .bs-acct-main, so every h1 sits at the same x and y;
     - ONE title block: .bs-acct-head = eyebrow + h1.bs-acct-title + optional
       .bs-acct-head__sub, with optional .bs-acct-head__actions on the right
       (they end on the page's own right edge);
     - TWO widths: data pages (dashboard, my listings, leads, saved, plan,
       pricing, manage) take the whole main area; reading and form pages carry
       .bs-page--narrow and stop at --acct-narrow, LEFT-aligned on the line.
       Running text inside them keeps --measure.
   The manage page is the one exception to the title rule: it fills
   .bs-acct-main with its own grid and its title lives in its summary column. */
:root{--acct-narrow:880px}
.bs-acct-layout{display:block}
.bs-acct-side{display:none}
.bs-acct-tiles{display:none}
/* At every width: a page in the account area is never a centred phone column of
   its own — it fills the column the layout gives it (the gutter-to-gutter
   single column below 900px, the main area beside the menu above). */
.bs-acct-layout .bs-acct-main .bs-account{max-width:none;margin:0;padding-top:0;padding-bottom:0}
/* The title block. Scoped to .bs-acct-layout so a signed-out visitor's help and
   legal pages (no layout class) keep their public look exactly. */
.bs-acct-layout .bs-acct-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 20px;margin:0 0 20px}
.bs-acct-layout .bs-acct-head__text{flex:1 1 280px;min-width:0}
.bs-acct-layout .bs-acct-head .bs-eyebrow{display:block;margin:0;color:var(--coral-dk)}
.bs-acct-layout .bs-acct-head .bs-acct-title{font-family:var(--font-display);font-size:26px;font-weight:700;line-height:1.15;letter-spacing:-.02em;color:var(--ink);margin:6px 0 0}
.bs-acct-layout .bs-acct-head .bs-acct-head__sub{font-size:15px;line-height:1.55;color:var(--ink2);margin:8px 0 0;max-width:var(--measure)}
.bs-acct-layout .bs-acct-head__actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px;flex:none}
.bs-acct-layout .bs-acct-head__actions form{margin:0}
/* The block's own bottom margin is the gap to the first card on every page. */
.bs-acct-layout .bs-acct-main .bs-acct-head + *{margin-top:0 !important}
.bs-acct-layout .bs-acct-main .bs-back-link{margin:0 0 10px}
@media (min-width:760px){
  .bs-acct-layout .bs-acct-head{margin-bottom:24px}
  .bs-acct-layout .bs-acct-head .bs-acct-title{font-size:clamp(30px,2.8vw,36px);margin-top:8px}
  .bs-acct-layout .bs-acct-head .bs-acct-head__sub{font-size:16px}
  /* Tablet (no menu yet): one top offset too — the post form's taller padding
     does not apply here. (From 900px the rule below takes the padding to 0.) */
  .bs-acct-layout .bs-acct-main .bs-page{padding-top:32px;margin-left:0;margin-right:0}
  /* One card shape across the account pages: the plain card's 26px corner for
     the tight, teal and panel variants too (their padding stays their own).
     The manage page (.mg, not a .bs-page) keeps its own design. */
  .bs-acct-layout .bs-acct-main > .bs-page :is(.bs-card--tight,.bs-card--teal,.ls-panel){border-radius:26px}
}
@media (min-width:900px){
  /* The page container, split into the menu (--side-w, sticky) and
     .bs-acct-main, which takes every pixel left. .bs-acct-main is a plain block:
     a page fills it with its own grid (.bs-lanes, or its own) — the manage
     page's menu | summary | content is the menu here plus two lanes there. */
  .bs-acct-layout{display:grid;grid-template-columns:var(--side-w) minmax(0,1fr);gap:var(--side-gap);align-items:start;max-width:var(--page-w);margin:0 auto;padding:32px var(--gutter) 0;width:100%}
  .bs-acct-side{display:flex;flex-direction:column;gap:12px;position:sticky;top:88px;max-height:calc(100vh - 104px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
  .bs-acct-main{min-width:0}
  /* Only beside the menu: help, legal and pricing pages are wrapped the same way
     for a signed-out visitor but get no .bs-acct-layout (no menu), and there they
     must keep the ordinary page gutter and width. */
  .bs-acct-layout .bs-acct-main .bs-page{max-width:none;margin:0;padding:0 0 64px}
  /* Reading and form pages keep a column's width ON the content's left line
     (margin 0, never auto); data pages take the whole main area. */
  .bs-acct-layout .bs-acct-main .bs-page.bs-page--narrow,.bs-acct-layout .bs-acct-main .bs-page.bs-page--post{max-width:var(--acct-narrow);margin:0}
  .bs-acct-layout .bs-acct-main .bs-acct-dup{display:none !important}
  .bs-acct-layout .bs-acct-main .bs-back-link,.bs-acct-layout .bs-acct-main [data-back-to-account]{display:none !important}
  /* Three lanes at most (six tiles = two even rows), two when the main area narrows. */
  .bs-acct-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(max(220px,(100% - 28px) / 3),1fr));gap:14px;margin-top:18px}
  /* A staff page reusing an account-area form (§44: "Post for a lister", the
     house listing edit): the same title block and widths, no account menu —
     so one lane, and its back link to the admin console stays. */
  .bs-acct-layout.bs-acct-layout--solo{grid-template-columns:minmax(0,1fr)}
  .bs-acct-layout.bs-acct-layout--solo .bs-acct-main .bs-back-link{display:inline-flex !important}
}
.bs-acct-side__head{display:flex;align-items:center;gap:12px;padding:14px;text-decoration:none;color:var(--ink);border:1.5px solid transparent}
.bs-acct-side__head.is-active{border-color:var(--ink)}
.bs-acct-side__who{display:flex;flex-direction:column;min-width:0}
.bs-acct-side__name{font-weight:700;font-size:16.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bs-acct-side__sub{font-size:14px;color:var(--muted)}
.bs-acct-side__nav{display:flex;flex-direction:column;padding:8px}
.bs-acct-side__nav a,.bs-acct-side__signout button{display:flex;justify-content:space-between;align-items:center;gap:8px;font-family:inherit;font-weight:600;font-size:15.5px;color:var(--ink2);text-decoration:none;padding:10px 12px;border-radius:12px;border:none;background:transparent;cursor:pointer;width:100%;text-align:left}
.bs-acct-side__nav a:hover,.bs-acct-side__signout button:hover{background:var(--soft);color:var(--ink)}
.bs-acct-side__nav a.is-active{background:var(--ink);color:var(--paper)}
.bs-acct-side__group{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding:14px 12px 6px}
.bs-acct-side__group:first-child{padding-top:6px}
.bs-acct-side__signout{margin:8px 0 0;border-top:1px solid var(--divider);padding-top:8px}
.bs-acct-side__signout button{color:var(--coral-dk)}
.bs-acct-tile{display:flex;flex-direction:column;gap:4px;padding:18px;text-decoration:none;color:var(--ink);transition:transform .15s ease,box-shadow .15s ease}
.bs-acct-tile:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(28,22,38,.08)}
.bs-acct-tile__title{font-weight:700;font-size:17px}
.bs-acct-tile__sub{font-size:14.5px;color:var(--muted);line-height:1.45}

/* ---------- The Dashboard (/account, §30) ---------- */
.bs-hub__head{margin-bottom:14px}
.bs-hub__h1{font-size:28px;font-weight:800;letter-spacing:-.02em;margin-top:6px;color:var(--ink)}
.bs-hub__stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:14px}
.bs-hub__stat{display:flex;flex-direction:column;gap:2px;padding:14px 16px;text-decoration:none;color:var(--ink);transition:transform .15s ease,box-shadow .15s ease}
.bs-hub__stat:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(28,22,38,.08)}
.bs-hub__stat--hot{border-color:var(--coral);background:var(--coral-tint)}
.bs-hub__num{font-size:28px;font-weight:800;line-height:1.1;font-variant-numeric:tabular-nums}
.bs-hub__label{font-size:15px;font-weight:600;color:var(--ink2)}
.bs-hub__sub{font-size:14px;color:var(--muted)}
@media (min-width:900px){
  .bs-hub__h1{font-size:36px}
  .bs-hub__stats{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:0}
  .bs-hub__stat{padding:18px}
  .bs-acct-main .bs-account__head{margin-top:18px}
}
/* the top bar's way back to the Dashboard: an icon, with the word where there is room */
.bs-topnav__dash{display:inline-flex;align-items:center;gap:7px;min-height:40px;padding:0 12px;border:1.5px solid var(--line);border-radius:999px;background:var(--card);color:var(--ink);font-weight:600;font-size:15px;text-decoration:none;white-space:nowrap}
.bs-topnav__dash:hover{border-color:var(--ink);color:var(--ink)}
@media (max-width:1599.98px){.bs-topnav__dash-label{display:none}.bs-topnav__dash{padding:0 11px}}
/* "Reels" joins the intents only where the bar has room to spare; below that it
   is in the drawer and on the home page's stories rail. */
@media (max-width:1339.98px){.bs-topnav__intent--wide{display:none}}

/* ---------- Plans (§32) ---------- */
.bs-plans{display:grid;grid-template-columns:1fr;gap:14px;margin-top:18px}
@media (min-width:760px){.bs-plans{grid-template-columns:repeat(3,minmax(0,1fr))}}
.bs-plan{position:relative;display:flex;flex-direction:column;gap:8px;padding:20px;border:1.5px solid var(--line)}
.bs-plan.is-current{border-color:var(--teal)}
.bs-plan--pro{border-color:var(--ink)}
.bs-plan__badge{position:absolute;top:-11px;left:18px;background:var(--ink);color:var(--paper);font-size:13.5px;font-weight:700;padding:3px 10px;border-radius:999px}
.bs-plan__name{font-size:20.5px;font-weight:800;color:var(--ink)}
.bs-plan__price{font-size:30px;font-weight:800;letter-spacing:-.02em;color:var(--ink)}
.bs-plan__price small{font-size:15.5px;font-weight:600;color:var(--muted)}
.bs-plan__for{font-size:15px;color:var(--ink2)}
.bs-plan__list{margin:6px 0 0;padding:0;list-style:none;display:grid;gap:7px;font-size:15.5px}
.bs-plan__list li{padding-left:22px;position:relative}
.bs-plan__list li::before{content:"\2713";position:absolute;left:0;color:var(--teal);font-weight:800}
.bs-plan__note{margin-top:auto;padding-top:8px;font-size:14px;color:var(--muted)}
.bs-plans--compact .bs-plan{gap:10px}
.bs-plans__cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:18px}
.bs-plan-current{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:18px;margin-top:14px}
.bs-plan-current__count{font-weight:700;color:var(--ink2);white-space:nowrap}
.bs-plan-row{display:flex;align-items:center;gap:12px;padding:12px;border-bottom:1px solid var(--divider)}
.bs-plan-row:last-child{border-bottom:none}
.bs-plan-row__title{font-weight:600;color:var(--ink);display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ls-plan-card{margin-top:10px;display:grid;gap:8px}
.ls-plan-card__row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--card)}
.ls-plan-card__row > .bs-grow{flex:1 1 160px}
/* The manage page's side column stretches its buttons; these stay compact. */
.ls-plan-card .bs-btn,.ls-side .ls-plan-card .bs-btn{width:auto;flex:none;margin-top:0;font-size:14px;padding:7px 13px}

/* ---------- Phones: small running text one step up ----------
   Hints, help, notes and other small running text are 13.5–14.5px at the
   mobile-first base, which reads small in the hand. On phones they go to
   15px; their line heights stay as designed (only the size changes), and
   tablet and desktop keep the sizes above. a11y-mobile-type.spec.ts checks it. */
@media (max-width:759.98px){
  .bs-small,.bs-help,.bs-help--center,.bs-card--note,.bs-plum-card__body,.bs-auth__hint,
  .bs-alert,.bs-dd-item,.bs-link{font-size:15px}
}