/* Patidar Vepar — design system. Shared stylesheet (was inlined in
   views/layout.php); served cached + cache-busted via Asset::url. */
/* Patidar Vepar — design system (source of truth: the published web artefact) */
:root{
  --green:#12483A;--green-600:#1B5E49;--green-700:#0E3A2E;
  /* Text and icons on a green fill (buttons, selected chips, my chat bubbles).
     White on the deep light-mode green; the dark paper colour on the light
     dark-mode green, where white measures only 2.4:1. --on-green-rgb is the
     same colour for rgba() tints; --hero is the home hero's top colour. */
  --on-green:#FFFFFF;--on-green-rgb:255,255,255;--hero:var(--green);
  /* Chrome (top bar) stays a deep green in BOTH themes so the brand bar never
     flips to the dark-mode mint accent; only the page body follows the theme. */
  --bar:#103F32;--bar-2:#0C3227;--on-bar:#FFFFFF;--on-bar-dim:rgba(255,255,255,.72);--bar-hair:rgba(255,255,255,.14);
  --gold:#B0810B;--gold-deep:#8f6608;--gold-soft:#F4E9C6;--maroon:#8A2437;--foot:#F3F0E7;
  /* --gold stays the brand fill (icons, chips, rules). --gold-ink is the darker
     tone for gold TEXT, which #B0810B fails WCAG AA for at 3.6:1 on white. */
  --gold-ink:#7A5606;
  --ink:#132019;--ink-2:#3C4B44;--ink-3:#5F6C65;
  --paper:#F5F3EC;--surface:#FFFFFF;--surface-2:#FBFAF5;
  --line:#E2E0D6;--line-2:#CFCDBF;--ok:#1B7A4B;--ok-bg:#E7F3EB;
  /* Soft status fills + the review star, referenced across views (chat lead
     pills, the requirements scope bar, rating stars). Defined here so no view
     falls back to an undefined colour. */
  --green-soft:#E7F3EB;--maroon-soft:#E7C9CE;--star:#E0A93B;
  --r-sm:8px;--r:12px;--r-lg:18px;--r-pill:999px;--tap:48px;
  --shadow:0 1px 2px rgba(19,32,25,.06),0 6px 20px rgba(19,32,25,.06);
  --shadow-lg:0 2px 6px rgba(19,32,25,.08),0 18px 44px rgba(19,32,25,.12);
  --font:"Hind Vadodara",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --green:#3DBB8E;--green-600:#57CBA0;--green-700:#1B2620;
  --on-green:#0E1512;--on-green-rgb:14,21,18;--hero:var(--bar);
  --bar:#0C3227;--bar-2:#08241C;--on-bar:#EAF7F1;--on-bar-dim:rgba(234,247,241,.66);--bar-hair:rgba(255,255,255,.10);
  --gold:#E7C35B;--gold-deep:#C99B2E;--gold-soft:#3A3413;--maroon:#E8879A;--foot:#111A16;
  /* Dark mode: the bright gold already reads on dark surfaces, so gold TEXT
     can keep it. */
  --gold-ink:#E7C35B;
  --ink:#EAF1EC;--ink-2:#B6C3BC;--ink-3:#8A9891;
  --paper:#0E1512;--surface:#16201B;--surface-2:#1B2620;
  --line:#26332C;--line-2:#33443B;--ok:#57CBA0;--ok-bg:#16281F;
  --green-soft:#16281F;--maroon-soft:#2E1720;--star:#ECC24E;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 6px 20px rgba(0,0,0,.35);
  --shadow-lg:0 2px 6px rgba(0,0,0,.5),0 18px 44px rgba(0,0,0,.5);
}}
:root[data-theme="dark"]{
  --green:#3DBB8E;--green-600:#57CBA0;--green-700:#1B2620;
  --on-green:#0E1512;--on-green-rgb:14,21,18;--hero:var(--bar);
  --bar:#0C3227;--bar-2:#08241C;--on-bar:#EAF7F1;--on-bar-dim:rgba(234,247,241,.66);--bar-hair:rgba(255,255,255,.10);
  --gold:#E7C35B;--gold-deep:#C99B2E;--gold-soft:#3A3413;--maroon:#E8879A;--foot:#111A16;
  --gold-ink:#E7C35B;
  --ink:#EAF1EC;--ink-2:#B6C3BC;--ink-3:#8A9891;
  --paper:#0E1512;--surface:#16201B;--surface-2:#1B2620;
  --line:#26332C;--line-2:#33443B;--ok:#57CBA0;--ok-bg:#16281F;
  --green-soft:#16281F;--maroon-soft:#2E1720;--star:#ECC24E;
}
*{box-sizing:border-box}html,body{margin:0}
body{background:var(--paper);color:var(--ink);font:16px/1.6 var(--font);-webkit-font-smoothing:antialiased}
h1,h2,h3{margin:0;line-height:1.28;letter-spacing:-.01em}
a{color:inherit;text-decoration:none}
.wrap{max-width:1200px;margin:0 auto;padding:0 20px}
@media (max-width:520px){.wrap{padding:0 16px}}
/* iOS Safari zooms the whole page in when a focused field is under 16px. Hold
   every text field at 16px on phones so tapping into any form never zooms —
   overrides the 14px a view may set, without touching the desktop sizing. */
@media (max-width:768px){
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=hidden]),
  textarea, select{font-size:16px !important}
}
.muted{color:var(--ink-3)}
.ic-svg{width:1em;height:1em}
/* The "‹ back" link at the top of owner pages. Shared here so a page that
   forgets its own copy never draws the arrow at full width. */
.chat-back{display:inline-flex;align-items:center;gap:6px;color:var(--ink-3);text-decoration:none;font-size:14px;font-weight:600;margin-bottom:12px}
.chat-back svg{width:18px;height:18px}
.chat-back:hover{color:var(--green)}
/* chrome — the top bar keeps a deep-green identity in both themes (var(--bar)),
   with a hairline gold underline that ties it to the PV mark. */
.topbar{background:linear-gradient(180deg,var(--bar),var(--bar-2));color:var(--on-bar);position:sticky;top:0;z-index:50}
.topbar::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:linear-gradient(90deg,transparent,var(--gold) 22%,var(--gold-deep) 55%,var(--gold) 80%,transparent)}
.topbar .wrap{display:flex;align-items:center;gap:8px;height:62px}
.brand{display:flex;align-items:center;gap:11px;font-weight:700;font-size:19px;color:var(--on-bar);letter-spacing:-.01em;white-space:nowrap;flex:none}
.brand .mark{width:34px;height:34px;border-radius:10px;background:linear-gradient(150deg,var(--gold),var(--gold-deep));display:grid;place-items:center;color:#0C3227;font-weight:800;font-size:14px;flex:none;box-shadow:0 2px 8px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.35)}
.topbar .sep{flex:1}
/* nav links: quiet text + icon, translucent hover, gold underline when active */
.topbar .tb-link{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 13px;border-radius:10px;color:var(--on-bar-dim);font-weight:600;font-size:14px;position:relative;white-space:nowrap;transition:background .15s,color .15s}
.topbar .tb-link:hover{color:var(--on-bar);background:var(--bar-hair)}
.topbar .tb-link.active{color:var(--on-bar)}
.topbar .tb-link.active::before{content:"";position:absolute;left:13px;right:13px;bottom:-1px;height:2px;border-radius:2px;background:var(--gold)}
.topbar .tb-link .ic-svg{width:17px;height:17px}
.topbar .tb-link .cnt{margin-left:2px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--gold);color:#1a1205;font-size:11px;font-weight:800;display:inline-grid;place-items:center}
/* the one primary action, lifted into a gold pill */
.topbar .tb-cta{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 17px;border-radius:var(--r-pill);background:linear-gradient(150deg,var(--gold),var(--gold-deep));color:#1a1205;font-weight:700;font-size:14px;white-space:nowrap;box-shadow:0 3px 12px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.4)}
.topbar .tb-cta:hover{filter:brightness(1.05)}
.topbar .tb-cta .ic-svg{width:17px;height:17px}
/* quiet outline "Sign in" for signed-out visitors, beside the gold CTA */
.topbar .tb-signin{display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 15px;border-radius:var(--r-pill);border:1px solid rgba(255,255,255,.28);color:var(--on-bar);font-weight:600;font-size:14px;white-space:nowrap;transition:background .15s}
.topbar .tb-signin:hover{background:var(--bar-hair)}
.topbar .tb-signin .ic-svg{width:16px;height:16px}
/* quiet sign-out button beside the account chip (POST form) */
.topbar .tb-signout{display:inline-flex}
.topbar .tb-signout button{border:0;background:transparent;cursor:pointer;font:inherit}
.topbar .tb-signout .ic-svg{width:18px;height:18px}
/* signed-in account chip */
.topbar .tb-acct{display:inline-flex;align-items:center;gap:9px;height:40px;padding:3px 14px 3px 3px;border-radius:var(--r-pill);background:var(--bar-hair);border:1px solid rgba(255,255,255,.16);color:var(--on-bar);font-weight:600;font-size:13.5px;max-width:180px}
.topbar .tb-acct .av{width:32px;height:32px;border-radius:50%;flex:none;display:grid;place-items:center;background:linear-gradient(150deg,var(--gold-soft),#e9d59b);color:var(--gold-deep);font-weight:800;font-size:14px}
:root[data-theme="dark"] .topbar .tb-acct .av,:root:not([data-theme="light"]) .topbar .tb-acct .av{background:linear-gradient(150deg,#4a4218,#2f2a10);color:var(--gold)}
.topbar .tb-acct .nm{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.only-wide{display:inline-flex}
/* Below 860px the inline nav would crowd, so it collapses into the hamburger
   drawer (which carries every link) — tablets and small laptops use the drawer. */
@media (max-width:860px){.only-wide,.topbar .tb-link.only-wide,.topbar .tb-cta.only-wide,.topbar .tb-acct.only-wide{display:none}.topbar .wrap{gap:10px}}
@media (max-width:560px){.hero .wrap{padding:26px 16px 30px}}
.info-page{max-width:760px}
.info-page h1{font-size:28px;margin:0 0 6px;letter-spacing:-.01em}
.info-updated{color:var(--ink-3);font-size:13px;margin:0 0 22px}
.info-body{color:var(--ink-2);font-size:15.5px;line-height:1.65}
.info-body h2{color:var(--ink);font-size:18px;margin:28px 0 8px}
.info-body p{margin:0 0 14px}
.info-body ul{margin:0 0 14px;padding-left:20px}
.info-body li{margin:0 0 7px}
.info-body a{color:var(--green);font-weight:600}
.info-body b{color:var(--ink)}
.info-contact{display:flex;flex-wrap:wrap;gap:12px;margin:6px 0 20px}
.info-contact .ic-card{flex:1;min-width:220px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px;box-shadow:var(--shadow)}
.info-contact .ic-card .ic-lbl{font-size:12px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--gold-ink);margin-bottom:6px}
.info-contact .ic-card a,.info-contact .ic-card span{font-size:15px;color:var(--ink);font-weight:600;word-break:break-word}
footer{border-top:1px solid var(--line);margin-top:56px;color:var(--ink-3);font-size:14px;background:var(--foot);position:relative}
footer::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,var(--green),var(--gold) 60%,var(--green))}
/* Floating "Contact support" button — on every public page, above the content. */
.vp-support-fab{position:fixed;right:20px;bottom:calc(20px + env(safe-area-inset-bottom,0px));z-index:60;display:inline-flex;align-items:center;gap:9px;background:var(--green);color:var(--on-green);text-decoration:none;font-weight:700;font-size:14.5px;padding:13px 18px;border-radius:var(--r-pill,999px);box-shadow:0 10px 30px rgba(9,16,12,.28);transition:transform .15s ease,box-shadow .15s ease}
.vp-support-fab:hover{transform:translateY(-2px);box-shadow:0 14px 36px rgba(9,16,12,.34)}
.vp-support-fab:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.vp-support-fab svg{width:20px;height:20px;flex:none}
@media (max-width:560px){.vp-support-fab{right:14px;bottom:calc(14px + env(safe-area-inset-bottom,0px));padding:14px}.vp-support-fab .vp-fab-lbl{display:none}}
/* footer: a four-column layout (brand · explore · company · get-the-app) that
   collapses to two columns on phones, over a bottom bar. */
footer .ft-in{max-width:1200px;margin:0 auto;padding:34px 20px 18px}
footer .ft-cols{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.4fr;gap:28px}
@media (max-width:760px){footer .ft-cols{grid-template-columns:1fr 1fr;gap:22px}footer .ft-brandcol{grid-column:1/-1}}
@media (max-width:540px){footer .ft-cols{grid-template-columns:1fr;gap:22px}footer nav.ft-col{display:grid;grid-template-columns:1fr 1fr;gap:2px 18px}footer nav.ft-col h4{grid-column:1/-1}}
footer .ft-brandcol .brand{color:var(--ink)}
footer .ft-brandcol .brand .mark{box-shadow:0 2px 8px rgba(0,0,0,.15)}
footer .ft-tagline{margin:14px 0 0;font-size:14px;font-weight:600;color:var(--ink-2);max-width:34ch;line-height:1.5}
footer .ft-blurb{margin:10px 0 0;font-size:13px;color:var(--ink-3);max-width:36ch;line-height:1.6}
footer .ft-reach{margin:14px 0 0;font-size:13px;color:var(--ink-3);max-width:36ch;line-height:1.6}
footer .ft-reach a{color:var(--green);font-weight:600}
footer .ft-reach a:hover{text-decoration:underline}
footer .ft-col h4{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin:2px 0 12px}
footer .ft-col a,footer .ft-col .foot-signout button{display:flex;align-items:center;gap:8px;color:var(--ink-2);font-weight:600;font-size:14px;padding:6px 0;background:none;border:0;font:inherit;cursor:pointer;text-align:start}
footer .ft-col a:hover{color:var(--green)}
footer .ft-col .foot-signout{display:block;margin:0}
footer .ft-col .foot-signout button:hover{color:var(--maroon)}
footer .ft-col a .dotm,footer .ft-col .foot-signout .dotm{width:5px;height:5px;border-radius:50%;background:var(--gold);opacity:0;transition:opacity .15s}
footer .ft-col a:hover .dotm,footer .ft-col .foot-signout button:hover .dotm{opacity:1}
footer .fa-lbl{display:none}
footer .fa-soon{margin:0 0 10px;font-size:13.5px;font-weight:600;color:var(--ink-2);max-width:210px;line-height:1.5}
footer .foot-theme{margin-top:14px}
footer .ft-lbl{display:block;font-size:12px;font-weight:700;letter-spacing:.02em;color:var(--ink-3);margin-bottom:8px}
footer .ft-bottom{border-top:1px solid var(--line);margin-top:6px}
footer .ft-bottom .wrapb{max-width:1200px;margin:0 auto;padding:16px 20px;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
footer .ft-by{font-size:13px;color:var(--ink-3)}
footer .ft-by a{color:var(--ink-2);font-weight:600}
footer .ft-by a:hover{color:var(--green)}
footer .ft-cc{font-size:12.5px;color:var(--ink-3)}
footer .ft-tag{font-size:12.5px;color:var(--ink-3)}
footer .ft-tag b{color:var(--ink-2);font-weight:700}
.ft-seg{display:inline-flex;background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-pill);padding:3px}
.ft-seg button{font:inherit;font-size:13px;font-weight:600;color:var(--ink-3);background:none;border:0;padding:6px 14px;border-radius:var(--r-pill);cursor:pointer;min-height:34px}
.ft-seg button.on{background:var(--green);color:var(--on-green)}
/* Reusable "what does this mean" info tip — drop <span class="vtip" tabindex="0"
   role="button" data-tip="…">i</span> beside any jargon term. */
.vtip{position:relative;display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;border:1px solid var(--line-2);background:var(--surface);color:var(--ink-3);font-size:11px;font-weight:700;font-style:normal;line-height:1;cursor:pointer;vertical-align:middle;margin-left:4px;user-select:none;flex:none}
/* Keep the 16px glyph but give it a >=28px invisible tap target (WCAG 2.5.5). */
.vtip::before{content:"";position:absolute;inset:-6px}
.vtip:hover,.vtip:focus{border-color:var(--green);color:var(--green);outline:none}
.vtip-pop{position:fixed;z-index:80;max-width:270px;background:var(--ink);color:var(--paper);font-size:12.5px;font-weight:500;line-height:1.5;padding:10px 12px;border-radius:10px;box-shadow:var(--shadow-lg)}
.vtip-pop.has-link{display:flex;flex-direction:column;gap:7px}
.vtip-pop .vtip-more{color:var(--gold-soft);font-weight:700;text-decoration:none;align-self:flex-start}
.vtip-pop .vtip-more:hover,.vtip-pop .vtip-more:focus{text-decoration:underline;outline:none}
/* mobile nav: a menu button in the top bar opens a slide-in drawer, so the
   primary sections are one tap away instead of buried in the footer. Desktop
   keeps its inline links and never shows the button. */
.navburger{display:none;position:relative;width:42px;height:42px;border-radius:11px;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.14);color:#fff;align-items:center;justify-content:center;cursor:pointer;flex:none}
.navburger svg{width:22px;height:22px}
.navburger .nb-dot{position:absolute;top:-4px;right:-4px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:var(--gold);color:#1a1205;font-size:10px;font-weight:800;display:grid;place-items:center;border:2px solid var(--green);box-sizing:content-box}
.navdrawer{position:fixed;inset:0;z-index:75;visibility:hidden}
.navdrawer .scrim{position:absolute;inset:0;background:rgba(9,16,12,.46);opacity:0;transition:opacity .22s ease}
.navdrawer .panel{position:absolute;top:0;right:0;bottom:0;width:288px;max-width:86%;background:var(--surface);box-shadow:-12px 0 40px rgba(9,16,12,.28);transform:translateX(100%);transition:transform .24s cubic-bezier(.3,.7,.3,1);display:flex;flex-direction:column;padding-top:env(safe-area-inset-top,0px)}
.navdrawer.open{visibility:visible}
.navdrawer.open .scrim{opacity:1}
.navdrawer.open .panel{transform:translateX(0)}
.nd-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:16px 16px 12px;border-bottom:1px solid var(--line)}
.nd-who{display:flex;align-items:center;gap:11px;min-width:0}
.nd-av{width:40px;height:40px;border-radius:11px;flex:none;display:grid;place-items:center;background:var(--gold-soft);color:var(--gold);font-weight:800;font-size:16px}
.nd-name{min-width:0}
.nd-nm{font-size:15px;font-weight:700;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nd-rn{font-size:12px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nd-x{width:36px;height:36px;border-radius:9px;border:1px solid var(--line-2);background:var(--surface);color:var(--ink-3);display:grid;place-items:center;cursor:pointer;flex:none}
.nd-x svg{width:18px;height:18px}
.nd-nav{flex:1;overflow:auto;padding:8px}
.nd-row{display:flex;align-items:center;gap:13px;padding:13px 12px;border-radius:11px;color:var(--ink);text-decoration:none;font-weight:600;font-size:15px;width:100%;background:none;border:0;font-family:inherit;cursor:pointer;text-align:start}
.nd-row:hover{background:var(--surface-2)}
.nd-ic{width:36px;height:36px;border-radius:9px;flex:none;display:grid;place-items:center;background:var(--surface-2);border:1px solid var(--line);color:var(--green)}
.nd-ic svg{width:19px;height:19px}
.nd-lbl{flex:1}
.nd-badge{min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--green);color:var(--on-green);font-size:11px;font-weight:800;display:grid;place-items:center}
.nd-row.primary{background:var(--green);color:var(--on-green);margin-top:4px}
.nd-row.primary .nd-ic{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.22);color:var(--on-green)}
.nd-div{height:1px;background:var(--line);margin:8px 12px}
.nd-row.out .nd-ic{color:var(--maroon);background:var(--surface)}
.nd-row.out .nd-lbl{color:var(--maroon)}
.nd-foot{padding:12px 16px calc(14px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line);color:var(--ink-3);font-size:12px}
body.nav-open{overflow:hidden}
@media (max-width:860px){.navburger{display:inline-flex}}
/* Small phones (320–380px): logo, name, Sign in and the menu do not fit in
   one row, so Sign in shows its icon only (its text stays for screen readers). */
@media (max-width:380px){.topbar .tb-signin{font-size:0;gap:0;width:40px;padding:0;justify-content:center}.topbar .tb-signin .ic-svg{width:18px;height:18px}}
/* Signed in, the bar carries five links plus the account chip — far wider than
   the signed-out bar, which the 860px rule above was sized for. Between 861px
   and ~1060px that longer bar overflowed the screen (sideways scroll, "My
   account" cut off), so a SIGNED-IN bar collapses into the ☰ drawer earlier,
   at 1100px. The signed-out bar is unchanged. */
@media (max-width:1100px){
  .topbar.tb-signed .only-wide,
  .topbar.tb-signed .tb-link.only-wide,
  .topbar.tb-signed .tb-cta.only-wide,
  .topbar.tb-signed .tb-acct.only-wide{display:none}
  .topbar.tb-signed .wrap{gap:10px}
  .topbar.tb-signed .navburger{display:inline-flex}
}
/* The drawer is desktop-hidden above its collapse point: 860px signed out,
   1100px signed in (so the earlier-collapsing signed-in bar still has a drawer
   to open between 861–1100px). */
@media (min-width:861px){.navdrawer:not(.nd-signed){display:none}}
@media (min-width:1101px){.navdrawer.nd-signed{display:none}}
/* English-only input guard: the field turns and a message shows when a
   non-Latin (e.g. Gujarati) letter is typed. */
.eng-bad{border-color:var(--maroon) !important}
.eng-msg{color:var(--maroon);font-size:12px;font-weight:600;margin-top:5px;display:flex;align-items:center;gap:5px}
.eng-msg svg{width:14px;height:14px;flex:none}
/* buttons / chips / badges */
/* font-family:inherit so a <button class="btn"> uses the site font too — a
   button does NOT inherit font-family from the body on its own, so without this
   button-element CTAs (e.g. the "Post another" / copy-link actions on the
   requirement-posted screen) rendered in the browser's default font. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:var(--tap);padding:0 22px;border-radius:var(--r-pill);background:var(--green);color:var(--on-green);font-family:inherit;font-weight:600;font-size:16px;border:0;cursor:pointer;box-shadow:var(--shadow)}
.btn:hover{filter:brightness(1.06)}.btn.gold{background:var(--gold);color:#1a1205}
.btn.ghost{background:var(--surface);color:var(--ink);border:1px solid var(--line-2);box-shadow:none}
.btn.block{width:100%}.btn.sm{min-height:40px;font-size:14px;padding:0 16px}
.badge{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;padding:4px 10px;border-radius:var(--r-pill);background:var(--ok-bg);color:var(--ok)}
.badge .ic-svg{width:14px;height:14px}
.badge.l0{background:var(--surface-2);color:var(--ink-3);border:1px solid var(--line)}
.badge.l3{background:var(--gold-soft);color:var(--gold-ink)}
.badge.fast{background:var(--gold-soft);color:var(--gold-ink)}
.chip{display:inline-flex;align-items:center;gap:7px;font-size:14px;font-weight:500;padding:8px 14px;border-radius:var(--r-pill);background:var(--surface);border:1px solid var(--line-2);color:var(--ink-2)}
.chip.on{background:var(--green);color:var(--on-green);border-color:var(--green)}
/* Popular-search pills and city tiles — shared by the home page and the city
   hub (moved here from home.php so both pages use one copy). */
.popsearch{display:flex;flex-wrap:wrap;gap:9px;align-items:center;margin-top:16px}
.popsearch .lbl{font-size:12.5px;color:var(--ink-3);font-weight:600}
.psch{display:inline-flex;align-items:center;gap:6px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-pill);padding:7px 13px;font-size:13px;font-weight:600;color:var(--ink-2);box-shadow:var(--shadow)}
.citytiles{display:flex;flex-wrap:wrap;gap:12px}
.citytile{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:14px 15px;display:flex;align-items:flex-start;gap:11px;flex:0 1 auto;min-width:150px;max-width:100%}
.citytile>div{display:flex;flex-direction:column;justify-content:center;min-height:38px;min-width:0}
.citytile .cic{width:38px;height:38px;border-radius:10px;flex:none;display:grid;place-items:center;background:var(--gold-soft);color:var(--gold)}
.citytile .cic svg{width:20px;height:20px}
.citytile b{display:block;font-size:14.5px;color:var(--ink);line-height:1.25;white-space:nowrap}
.citytile span{font-size:12px;color:var(--ink-3)}
/* Referral "how do you know them" chips — a radio group that reads as pills. */
.ctx-chip{display:inline-flex;align-items:center;gap:7px;font-size:14px;font-weight:600;padding:8px 14px;border-radius:var(--r-pill);border:1px solid var(--line-2);background:var(--surface);color:var(--ink-2);cursor:pointer}
.ctx-chip input{accent-color:var(--green)}
.ctx-chip:has(input:checked){background:var(--green);color:var(--on-green);border-color:var(--green)}
.ctx-chip:has(input:checked) input{accent-color:var(--on-green)}
.refer-row{display:flex;align-items:center;gap:14px;padding:14px 0;border-bottom:1px solid var(--line)}
.refer-row:last-child{border-bottom:0}
.refer-row .logo{width:44px;height:44px;border-radius:12px;flex:none;display:grid;place-items:center;background:var(--green-700);color:#fff;font-weight:700;font-size:18px}
.subchips{display:flex;flex-wrap:wrap;gap:8px}
.eyebrow{font-size:13px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--gold-ink)}
main{display:block}
.page{padding-block:26px 8px}
h1{font-size:24px}
/* category grid */
.grid-head{display:flex;align-items:baseline;justify-content:space-between;margin:18px 0 14px;gap:12px}
.grid-head h2{font-size:20px}
.cat-grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
.cat{display:flex;align-items:center;gap:14px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px;box-shadow:var(--shadow)}
.cat:hover{border-color:var(--green)}
.cat .ic{width:44px;height:44px;border-radius:11px;flex:none;display:grid;place-items:center;background:var(--green-700);color:var(--gold)}
.cat .ic .ic-svg{width:24px;height:24px}
.cat b{display:block;font-weight:600;font-size:15px}
.cat span{font-size:13px;color:var(--ink-3)}
/* hero + search */
.hero{background:radial-gradient(120% 120% at 100% 0%,rgba(176,129,11,.10),transparent 60%),linear-gradient(180deg,var(--hero),var(--green-700));color:#fff;border-radius:0 0 26px 26px;box-shadow:var(--shadow)}
.hero .wrap{padding:34px 20px 40px}
/* Fills the content width on desktop and scales down on phones. The measure is
   generous (headlines rotate and vary in length) and text-wrap:balance keeps the
   two lines even; min-height reserves ~2 lines so the search bar does not jump as
   the rotated line changes length. */
.hero h1{margin:0;font-size:clamp(28px,4.8vw,48px);line-height:1.08;letter-spacing:-.02em;max-width:min(100%,720px);text-wrap:balance;min-height:2.16em}
.hero p{margin:8px 0 0;color:rgba(255,255,255,.82)}
.searchbar{margin-top:22px;background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);display:flex;align-items:center;gap:6px;padding:8px;max-width:720px}
/* The input clears its own outline, so show focus on the whole bar instead —
   a visible 2px green ring whenever any field inside has keyboard focus. */
.searchbar:focus-within{box-shadow:var(--shadow-lg),0 0 0 2px var(--green)}
.searchbar .fld{display:flex;align-items:center;gap:10px;padding:0 12px;height:52px;flex:1;color:var(--ink);position:relative}
.searchbar .fld .ic-svg{width:20px;height:20px;color:var(--ink-3);flex:none}
.searchbar input{border:0;outline:0;background:transparent;font:16px var(--font);color:var(--ink);width:100%}
.searchbar input::placeholder{color:var(--ink-3)}
.searchbar .city{flex:none;border-left:1px solid var(--line);width:180px}
.searchbar .go{width:52px;height:52px;border-radius:var(--r);flex:none;padding:0}
@media (max-width:640px){.searchbar{flex-wrap:wrap}.searchbar .city{border-left:0;border-top:1px solid var(--line);width:100%;order:3}.searchbar .go{order:2}}
.hero .trust{display:flex;flex-wrap:wrap;gap:16px;margin-top:20px;color:rgba(255,255,255,.85);font-size:14px}
.hero .trust span.t{display:inline-flex;align-items:center;gap:8px}
.hero .trust .ic-svg{width:16px;height:16px;color:var(--gold)}
/* Buyer CTA under the hero search — offered to everyone on landing. */
.hero-post{margin-top:14px;max-width:720px;display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);border-radius:var(--r-lg);padding:12px 14px}
.hero-post .hp-txt{color:rgba(255,255,255,.9);font-size:13px;line-height:1.45}
.hero-post .hp-txt b{color:#fff;font-weight:700}
.hero-post .hp-btn{display:inline-flex;align-items:center;gap:8px;background:linear-gradient(150deg,var(--gold),var(--gold-deep));color:#1a1205;font-weight:700;font-size:14px;border-radius:var(--r-pill);padding:11px 18px;white-space:nowrap;box-shadow:0 3px 12px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.4)}
.hero-post .hp-btn:hover{filter:brightness(1.05)}
.hero-post .hp-btn .ic-svg{width:16px;height:16px}
@media (max-width:560px){.hero-post{justify-content:center;text-align:center}.hero-post .hp-btn{width:100%;justify-content:center}}
/* results */
.crumb{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--ink-3);margin-bottom:10px;flex-wrap:wrap}
.crumb a{color:var(--green);font-weight:600}
/* /trust and /safety — the info-page frame with a richer inner layout (breadcrumb,
   "On this page" chip row, section cards, badge ladder, signals table, points fold,
   trick grid and the maroon OTP box). Shared by both pages, so it lives here. */
.trust-page .tp-intro{font-size:16px;color:var(--ink-2);line-height:1.6;margin:0 0 20px;max-width:64ch}
.trust-page .onthis{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 26px}
.trust-page .onthis a{font-size:13px;font-weight:600;color:var(--ink-2);background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:6px 12px;text-decoration:none}
.trust-page .onthis a:hover{border-color:var(--green);color:var(--green)}
.trust-page .tp-card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:20px 22px;margin:0 0 18px;box-shadow:var(--shadow);scroll-margin-top:78px}
.trust-page .tp-card h2{font-size:20px;color:var(--ink);margin:0 0 8px;letter-spacing:-.01em}
.trust-page .tp-card h3{font-size:15.5px;color:var(--ink);margin:18px 0 6px}
.trust-page .tp-card p{color:var(--ink-2);font-size:15px;line-height:1.62;margin:0 0 12px}
.trust-page .tp-card ul,.trust-page .tp-card ol{color:var(--ink-2);font-size:15px;line-height:1.6;margin:0 0 12px;padding-left:20px}
.trust-page .tp-card ul.tp-group,.trust-page .tp-card ul.tp-rules{list-style:none;padding-left:0}
.trust-page .tp-card li{margin:0 0 7px}
.trust-page .tp-card a{color:var(--green);font-weight:600}
.trust-page .tp-card b,.trust-page .tp-card strong{color:var(--ink)}
.trust-page .tp-cue{white-space:nowrap}
.trust-page .badge-ladder{list-style:none;padding:0;margin:14px 0;display:grid;gap:10px}
@media(min-width:620px){.trust-page .badge-ladder{grid-template-columns:1fr 1fr}}
.trust-page .bl-item{border:1px solid var(--line);border-radius:12px;padding:12px 14px;background:var(--surface-2)}
.trust-page .bl-head{display:flex;align-items:center;gap:8px;margin-bottom:4px}
.trust-page .bl-step{width:22px;height:22px;border-radius:50%;background:var(--green);color:var(--on-green);font-size:12px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;flex:none}
.trust-page .bl-item.is-zero .bl-step{background:var(--line-2);color:var(--ink-3)}
.trust-page .bl-head b{font-size:15px;color:var(--ink)}
.trust-page .bl-item p{font-size:13.5px;margin:0 0 2px}
.trust-page .bl-item .bl-how{color:var(--ink-3);font-size:12.5px;margin-top:4px}
.trust-page .tp-note{display:flex;gap:10px;background:var(--ok-bg);border:1px solid var(--line);border-radius:12px;padding:12px 14px;font-size:14px;color:var(--ink-2);line-height:1.55;margin:14px 0 0}
.trust-page .tp-note svg{width:18px;height:18px;color:var(--green);flex:none;margin-top:1px}
.trust-page .sig-table{width:100%;border-collapse:collapse;margin:12px 0;font-size:14px}
.trust-page .sig-table th,.trust-page .sig-table td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--line);vertical-align:top;color:var(--ink-2);line-height:1.5}
.trust-page .sig-table th{color:var(--ink-3);font-size:11.5px;text-transform:uppercase;letter-spacing:.04em;font-weight:700}
.trust-page .sig-table td b{color:var(--ink)}
.trust-page .sig-table tr:last-child td{border-bottom:0}
.trust-page .tp-group li{padding-left:16px;position:relative}
.trust-page .tp-group li::before{content:"\203A";position:absolute;left:0;color:var(--gold);font-weight:700}
.trust-page .tp-fold{border:1px solid var(--line);border-radius:12px;background:var(--surface-2);padding:0 14px;margin:14px 0 0}
.trust-page .tp-fold summary{cursor:pointer;font-weight:600;color:var(--green);padding:12px 0;list-style:none}
.trust-page .tp-fold summary::-webkit-details-marker{display:none}
.trust-page .tp-fold[open] summary{border-bottom:1px solid var(--line);margin-bottom:10px}
.trust-page .tp-fold ul{margin:0 0 12px}
.trust-page .tp-flag{color:var(--ink)}
.trust-page .tp-close{text-align:center;color:var(--ink-2);font-size:15px;line-height:1.8;margin:22px 0 8px}
.trust-page .tp-close a{margin:0 4px}
.safety-page .otp-box{display:flex;gap:12px;align-items:flex-start;background:var(--surface);border:1.5px solid var(--maroon);border-left-width:4px;border-radius:12px;padding:14px 16px;margin:0 0 20px;color:var(--ink-2);font-size:15px;line-height:1.55}
.safety-page .otp-box b{color:var(--ink)}
.safety-page .otp-box svg{width:22px;height:22px;color:var(--maroon);flex:none;margin-top:1px}
.safety-page .trick-grid{display:grid;gap:10px;margin-top:6px}
@media(min-width:560px){.safety-page .trick-grid{grid-template-columns:1fr 1fr}}
.safety-page .trick{border:1px solid var(--line);border-radius:12px;background:var(--surface-2);padding:12px 14px}
.safety-page .trick b{display:block;color:var(--ink);font-size:14.5px;margin-bottom:4px}
.safety-page .trick p{margin:0;font-size:13.5px;color:var(--ink-2);line-height:1.55}
.safety-page .gov{color:var(--ink-3);font-weight:500;font-size:13px}
.tier-label{display:flex;align-items:center;gap:12px;margin:26px 0 12px;color:var(--ink-3);font-size:13px;font-weight:600}
.tier-label::before,.tier-label::after{content:"";height:1px;background:var(--line);flex:1}
/* Two business cards per row on wide screens, one per row on phones. Tier
   dividers span the full width so a "nearby cities" break still reads clearly. */
.results-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;align-items:start;margin-top:20px}
.results-grid .result{margin-bottom:0}
.results-grid .tier-label{grid-column:1/-1;margin:10px 0 2px}
@media (max-width:640px){.results-grid{grid-template-columns:1fr;gap:14px}}
.result{display:block;position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow);margin-bottom:16px;color:inherit}
.result:hover{border-color:var(--green)}
/* Whole-card navigation: a transparent anchor stretched over the card. The
   content above it is non-interactive (just paints), so clicks land here; the
   contact button sits above it at a higher z-index. */
.result .result-link{color:inherit;text-decoration:none}
.result .result-link::after{content:"";position:absolute;inset:0;z-index:1;border-radius:inherit}
.result .rcontact{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;margin-top:14px;min-height:40px;border:1px solid var(--line-2);border-radius:var(--r-pill);background:var(--surface);color:var(--ink);font:inherit;font-size:13.5px;font-weight:700;cursor:pointer;text-decoration:none;position:relative;z-index:2}
.result .rcontact:hover{border-color:var(--green);color:var(--green)}
.result .rcontact svg{width:16px;height:16px;flex:none}
/* The same whole-card-link + contact-button treatment for the .bcard rail
   cards (home rails, "More in trade"). .bd carries z-index:1, so the stretched
   link sits at 2 and the button at 3. Defined globally so every page with a
   .bcard inherits it. */
.bcard{position:relative}
.bcard .bcard-link{position:absolute;inset:0;z-index:2;border-radius:inherit}
/* A direct child of .bcard (not inside .bd, whose z-index:1 would trap it below
   the stretched link). Sibling of the link at a higher z-index, inset to match
   the card body. */
.bcard .bcontact{display:flex;align-items:center;justify-content:center;gap:7px;margin:auto 14px 14px;min-height:38px;border:1px solid var(--line-2);border-radius:var(--r-pill);background:var(--surface);color:var(--ink);font:inherit;font-size:13px;font-weight:700;cursor:pointer;position:relative;z-index:3}
.bcard .bcontact:hover{border-color:var(--green);color:var(--green)}
.bcard .bcontact svg{width:15px;height:15px;flex:none}
.result .cover{display:block;position:relative;height:92px;background:var(--surface-2)}
.result .cover img{width:100%;height:100%;object-fit:cover;display:block}
.result .cover.ph{background:
  radial-gradient(120% 160% at 100% 0%, rgba(176,129,11,.18), transparent 60%),
  linear-gradient(180deg,var(--green),var(--green-700))}
.result .logo{position:absolute;left:16px;bottom:-22px;width:56px;height:56px;border-radius:14px;display:grid;place-items:center;background:var(--green-700);color:#fff;font-weight:700;font-size:22px;overflow:hidden;border:3px solid var(--surface);box-shadow:var(--shadow)}
.result .logo img,.profile-head .logo img{width:100%;height:100%;object-fit:cover;border-radius:inherit;display:block}
.result .rbody{display:block;padding:30px 16px 16px}
.result .rname{display:block;font-weight:700;font-size:17px;margin:0 0 4px}
.result .rcity{display:inline-flex;align-items:center;gap:5px;font-size:13.5px;color:var(--ink-3);margin-bottom:9px}
.result .rcity svg{width:14px;height:14px;flex:none}
.wallpaper{position:relative;width:100%;height:clamp(170px,40vw,280px);border-radius:var(--r-lg) var(--r-lg) 0 0;overflow:hidden;border:1px solid var(--line);border-bottom:0;background:var(--surface-2)}
.wallpaper img{width:100%;height:100%;object-fit:cover;display:block}
.wallpaper.clickable{cursor:zoom-in}
.wallpaper.ph{background:
  radial-gradient(120% 160% at 100% 0%, rgba(176,129,11,.18), transparent 60%),
  linear-gradient(180deg,var(--green),var(--green-700))}
/* Option 2 header: the logo + name sit low on the cover over a soft fade. */
.cover-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(6,14,10,.05) 34%,rgba(6,14,10,.74))}
.cover-id{position:absolute;left:0;right:0;bottom:0;z-index:2;display:flex;align-items:flex-end;gap:14px;padding:16px 18px;pointer-events:none}
.cover-id .logo{width:90px;height:90px;border-radius:20px;flex:none;display:grid;place-items:center;background:linear-gradient(150deg,var(--green-600),var(--green-700));color:#fff;font-weight:700;font-size:34px;overflow:hidden;border:3px solid rgba(255,255,255,.92);box-shadow:0 2px 14px rgba(0,0,0,.42)}
.cover-id .logo img{width:100%;height:100%;object-fit:cover;border-radius:inherit;display:block}
.cover-id-txt{min-width:0;padding-bottom:2px}
.cover-id h1{color:#fff;font-size:clamp(19px,4.6vw,24px);line-height:1.15;margin:0;text-shadow:0 1px 12px rgba(0,0,0,.55)}
.cover-id .autonote{color:rgba(255,255,255,.9);margin-top:3px}
.cover-expand{position:absolute;top:11px;right:11px;z-index:3;width:32px;height:32px;border:0;padding:0;border-radius:9px;background:rgba(0,0,0,.42);display:grid;place-items:center;cursor:pointer}
.cover-expand svg{width:16px;height:16px;stroke:#fff}
.cover-expand:focus-visible{outline:2px solid #fff;outline-offset:2px}
.wallpaper.clickable:hover .cover-expand{background:rgba(0,0,0,.6)}
.cover-share{position:absolute;top:11px;left:11px;z-index:4;background:rgba(255,255,255,.94);border-color:transparent;color:var(--ink-2);box-shadow:0 2px 8px rgba(0,0,0,.18)}
:root[data-theme="dark"] .cover-share{background:rgba(22,32,27,.92);color:var(--ink)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .cover-share{background:rgba(22,32,27,.92);color:var(--ink)}}
/* 1-tap WhatsApp share. Defined AFTER .cover-share so the green wins over the
   cover chip's white background while keeping its absolute positioning. */
.vp-washare{display:inline-flex;align-items:center;gap:8px;background:#25D366;border:1px solid transparent;color:#0B2E1A;border-radius:var(--r-pill);padding:8px 15px;font-family:inherit;font-size:13.5px;font-weight:700;cursor:pointer;line-height:1;text-decoration:none}
.vp-washare:hover{filter:brightness(1.05)}
.vp-washare svg{width:16px;height:16px}
.wallpaper + .profile-head{border-radius:0 0 var(--r-lg) var(--r-lg);border-top:0}
.wallpaper + .profile-head{padding-top:16px}
/* Full-cover lightbox */
.cover-lightbox{position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.92);display:none;align-items:center;justify-content:center;padding:24px}
.cover-lightbox.on{display:flex}
.cover-lightbox img{max-width:100%;max-height:100%;object-fit:contain;border-radius:10px}
.cover-lightbox .x{position:absolute;top:14px;right:18px;color:#fff;font-size:32px;line-height:1;cursor:pointer}
/* Multi-photo gallery controls (shown only when the opener has data-gallery).
   On the always-dark backdrop, so white works in both themes. */
.cover-lightbox .vpimg-nav{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border:0;border-radius:50%;background:rgba(0,0,0,.45);color:#fff;font-size:28px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}
.cover-lightbox .vpimg-nav.prev{left:14px}
.cover-lightbox .vpimg-nav.next{right:14px}
.cover-lightbox .vpimg-nav[hidden]{display:none}
.cover-lightbox .vpimg-nav:hover{background:rgba(0,0,0,.65)}
.cover-lightbox .vpimg-count{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);color:#fff;font-size:13px;font-weight:600;background:rgba(0,0,0,.45);border-radius:var(--r-pill);padding:4px 11px}
.cover-lightbox .vpimg-count[hidden]{display:none}
.result .meta{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;font-size:14px;color:var(--ink-3)}
.result .trust{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:750;padding:3px 9px 3px 7px;border-radius:var(--r-pill);border:1px solid transparent}
.result .trust svg{width:13px;height:13px}
.result .trust.hi{background:var(--ok-bg);color:var(--ok)}
.result .trust.mid{background:var(--gold-soft);color:var(--gold-ink)}
.result .trust.lo{background:var(--surface-2);color:var(--ink-3);border-color:var(--line)}
.result .rmatch{display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin-top:11px;padding-top:11px;border-top:1px solid var(--line)}
.result .rmatch-lbl{font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--gold-ink)}
.result .rmatch-item{display:inline-flex;align-items:center;gap:7px;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-pill);padding:4px 11px 4px 5px;font-size:12.5px;color:var(--ink-2)}
.result .rmatch-img{width:22px;height:22px;border-radius:50%;flex:none;background:var(--surface) center/cover no-repeat;border:1px solid var(--line)}
.result .rmatch-t b{color:var(--green);font-weight:700}
.fallback{background:var(--surface-2);border:1px dashed var(--line-2);border-radius:var(--r-lg);padding:22px;text-align:center;margin-top:24px}
.fallback h3{font-size:17px;margin-bottom:6px}.fallback p{margin:0 0 14px;color:var(--ink-3)}
/* profile */
.profile-head{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow);padding:22px;display:flex;gap:18px;align-items:flex-start}
.profile-head .logo{width:72px;height:72px;border-radius:16px;flex:none;display:grid;place-items:center;background:linear-gradient(150deg,var(--green-600),var(--green-700));color:#fff;font-weight:700;font-size:28px;overflow:hidden}
/* A real (often transparent-PNG) logo must read on white, not on the dark
   green tile that backs the initial-letter fallback — otherwise the
   transparent areas look black. White only when an <img> is actually there. */
.profile-head .logo:has(img),.cover-id .logo:has(img),.result .logo:has(img),.refer-row .logo:has(img){background:#fff}
.profile-head h1{font-size:23px;margin-bottom:6px}
.profile-head .meta{display:flex;flex-wrap:wrap;gap:8px 10px;align-items:center;margin-top:10px}
.cta-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
/* A trust signal and its (i) tip wrap as one unit; on a phone the row wraps,
   so the dots go and the gap separates the items. */
.profile-head .meta .mi{display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
@media (max-width:560px){.profile-head .meta .meta-dot,.result .meta .meta-dot{display:none}.cta-row .btn{flex:1 1 100%;justify-content:center}}
.autonote{font-size:12px;color:var(--ink-3);display:inline-flex;align-items:center;gap:6px;margin-top:8px}
.cols{display:grid;grid-template-columns:1fr;gap:16px;margin-top:18px}
@media (min-width:820px){.cols{grid-template-columns:1.5fr 1fr}}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:18px;box-shadow:var(--shadow)}
.card h2{font-size:16px;margin-bottom:12px;display:flex;align-items:center;gap:9px}
.card h2 .ic-svg{width:18px;height:18px;color:var(--green)}
.prod{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.prod .item{border:1px solid var(--line);border-radius:var(--r-sm);padding:12px;background:var(--surface-2);overflow:hidden}
.prod .item .pimg{position:relative;display:block;aspect-ratio:1/1;margin:-12px -12px 10px;border-bottom:1px solid var(--line);overflow:hidden;background:var(--surface-2)}
/* Blurred fill: the whole photo is shown (contain), and any letterbox space is
   filled with a blurred, zoomed copy of the same photo — so no shape is cropped. */
.prod .item .pimg .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:blur(16px) brightness(.92);transform:scale(1.2)}
.prod .item .pimg .fg{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.prod .item .pimg.ph{display:grid;place-items:center;color:var(--ink-3)}
.prod .item .pimg.ph .ic-svg{width:34px;height:34px;opacity:.45}
.prod .item b{font-size:14px;display:block;margin-bottom:4px}
.prod .item .price{font-size:14px;color:var(--gold-ink);font-weight:600}
.stack{display:flex;flex-direction:column;gap:16px}
.safety{display:flex;gap:12px;align-items:flex-start;background:var(--gold-soft);border-radius:var(--r);padding:14px 16px}
.safety .ic-svg{width:20px;height:20px;color:var(--gold);flex:none;margin-top:2px}
.safety p{margin:0;font-size:13px;color:var(--ink-2)}
.safety .safety-tx{display:flex;flex-direction:column;gap:4px}
.safety .safety-more{font-size:13px;font-weight:700;color:var(--gold-deep);text-decoration:none;align-self:flex-start}
.safety .safety-more:hover{text-decoration:underline}
/* Sidebar extras (detail-page right column): a post-a-requirement card + a trust card. */
.rp-card.sidecard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:16px;text-align:center;margin-top:0}
.rp-card.sidecard .ic{width:44px;height:44px;border-radius:12px;background:var(--gold-soft);color:var(--gold);display:flex;align-items:center;justify-content:center;margin:0 auto 10px}
.rp-card.sidecard .ic .ic-svg{width:22px;height:22px}
.rp-card.sidecard h2{font-size:15px;font-weight:700;margin:0 0 4px}
.rp-card.sidecard p{font-size:12.5px;color:var(--ink-3);margin:0 0 12px}
.rp-card.sidecard .btn{display:inline-flex}
.rp-card.sidecard .reach{font-size:11px;color:var(--ink-3);margin-top:9px}
.rp-card.sidecard .reach b{color:var(--gold-ink)}
.trust h3{font-size:13.5px;font-weight:700;margin:0 0 10px;display:flex;align-items:center;gap:7px}
.trust h3 .ic-svg{width:17px;height:17px;color:var(--gold);flex:none}
.trust-row{display:flex;gap:9px;align-items:flex-start;padding:7px 0;border-top:1px solid var(--line);font-size:12.5px;color:var(--ink-2);line-height:1.45}
.trust-row:first-of-type{border-top:none;padding-top:0}
.trust-row .c{color:var(--ok);font-weight:800;flex:none}
.trust-row b{color:var(--ink)}
/* auth */
.auth-wrap{max-width:420px;margin:40px auto;padding:0 20px}
.auth-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);padding:28px}
.auth-card .mark{width:52px;height:52px;border-radius:14px;background:linear-gradient(150deg,var(--gold),#8f6608);display:grid;place-items:center;color:#0C3227;font-weight:800;font-size:22px;margin-bottom:18px}
.auth-card h1{font-size:22px;margin-bottom:6px}.auth-card .sub{color:var(--ink-3);margin:0 0 22px}
.field{margin-bottom:16px}.field label{display:block;font-size:14px;font-weight:600;margin-bottom:8px}
.phone-input{display:flex;align-items:center;border:1.5px solid var(--line-2);border-radius:var(--r);overflow:hidden;background:var(--surface-2)}
.phone-input:focus-within{border-color:var(--green)}
.phone-input .cc{flex:none;padding:0 12px;height:52px;display:grid;place-items:center;color:var(--ink-2);font-weight:600;border-right:1px solid var(--line);background:var(--surface)}
.phone-input input{flex:1;min-width:0;border:0;outline:0;background:transparent;height:52px;padding:0 14px;font:18px/1 var(--font);letter-spacing:.06em;color:var(--ink)}
/* OTP entry — a single styled box (no-JS fallback) that JS upgrades to six cells. */
.otp-input{width:100%;height:56px;border:1.5px solid var(--line-2);border-radius:var(--r);background:var(--surface-2);color:var(--ink);text-align:center;font:700 24px/1 var(--font);letter-spacing:.5em;padding-left:.5em}
.otp-input:focus{outline:0;border-color:var(--green)}
/* The name step's text field — same box as the phone and OTP fields. */
.auth-text{width:100%;height:52px;border:1.5px solid var(--line-2);border-radius:var(--r);background:var(--surface-2);color:var(--ink);padding:0 14px;font:16px/1 var(--font)}
.auth-text:focus{outline:0;border-color:var(--green)}
.otp-input.otp-hidden{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;overflow:hidden;padding:0;margin:-1px;border:0}
.otp-seg{display:flex;gap:9px}
.otp-seg .otp-cell{flex:1;min-width:0;height:56px;border:1.5px solid var(--line-2);border-radius:var(--r);background:var(--surface-2);text-align:center;font:700 23px/1 var(--font);color:var(--ink);font-variant-numeric:tabular-nums;outline:0;transition:border-color .12s,box-shadow .12s}
.otp-seg .otp-cell:focus{border-color:var(--green);box-shadow:0 0 0 3px color-mix(in srgb,var(--green) 22%,transparent);background:var(--surface)}
.otp-seg .otp-cell.filled{border-color:var(--green)}
/* Skeleton shimmer — a layout-shaped placeholder while data loads (not a spinner). */
@keyframes vpsk{0%{opacity:.55}50%{opacity:1}100%{opacity:.55}}
.sk{display:block;background:var(--line);border-radius:8px;animation:vpsk 1.5s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.sk{animation:none;opacity:.7}}
/* A generic layout-shaped skeleton CARD for owner pages (a titled card with
   field rows), and the load-error state with a Retry button — so a failed fetch
   is a dead end no longer. Shared by the owner self-service pages. */
.sk-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow);padding:18px 16px;margin:0 0 14px}
.sk-card .sk{margin:0 0 12px}
.vp-loaderr{text-align:center;padding:40px 20px;color:var(--ink-3)}
.vp-loaderr p{margin:0 0 16px;font-size:14.5px}
.vp-retry{display:inline-flex;align-items:center;gap:7px;min-height:42px;padding:0 20px;border:0;border-radius:var(--r-pill);background:var(--green);color:var(--on-green);font:inherit;font-weight:700;font-size:14px;cursor:pointer}
.vp-retry:hover{filter:brightness(1.05)}
.vp-retry svg{width:16px;height:16px}
.terms{font-size:12px;color:var(--ink-3);text-align:center;margin-top:16px}.terms a{color:var(--green);font-weight:600}
/* search suggestions (type-ahead) */
.ac{position:absolute;top:calc(100% + 10px);left:-9px;right:-9px;z-index:30;background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r);box-shadow:var(--shadow-lg);padding:6px;display:none;max-height:min(60vh,340px);overflow:auto;text-align:left}
.ac.open{display:block}
.ac .achd{font-size:11.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3);padding:8px 10px 4px}
.ac .row{display:flex;align-items:center;gap:11px;padding:10px;border-radius:10px;cursor:pointer;color:var(--ink)}
.ac .row:hover,.ac .row.hi{background:var(--surface-2)}
.ac .row .ai{width:30px;height:30px;flex:none;display:grid;place-items:center;border-radius:8px;background:var(--surface-2);border:1px solid var(--line);color:var(--green)}
:root[data-theme="dark"] .ac .row .ai{background:var(--paper)}
.ac .row .ai .ic-svg{width:16px;height:16px}
.ac .row .al{flex:1;min-width:0;font-size:15px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ac .row .al mark{background:transparent;color:var(--green-700);font-weight:800;padding:0}
:root[data-theme="dark"] .ac .row .al mark{color:#7FD3AE}
.ac .row .ah{font-size:12px;color:var(--ink-3);flex:none}
.ac .acft{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--ink-3);padding:7px 10px 3px;border-top:1px solid var(--line);margin-top:4px}
.ac .acft .ic-svg{width:12px;height:12px}