/* BeatTheDoor owner app and public pages: shared tokens and components. Light everywhere (dark mode is switched off, see the next line). */
/* The app is light on every phone and computer: the dark-mode rules below are kept, but this width condition (never true) keeps them switched off. To bring dark mode back, delete "and (min-width:100000px)" everywhere in this file. */
:root{
  --bg:#F7F5F0; --panel:#FFFFFF; --sand:#EFEBE2; --line:#E4E0D6; --ink:#0F1419; --ink2:#4A4F56; --ink3:#5C6168;
  --signal:#FF5B23; --signal-soft:#FFE6DB; --ok:#0F766E; --ok-soft:#D8F5F0; --warn:#9A5B00; --warn-soft:#FFEFD0; --bad:#B42318; --bad-soft:#FDE4E1;
  --rail:#0F1419; --rail-ink:#F7F5F0; --rail-dim:#9EA3AA; --muted:#5C6168;
  --f-ui:'Schibsted Grotesk',system-ui,-apple-system,'Segoe UI',sans-serif; --f-mono:'JetBrains Mono',ui-monospace,Consolas,monospace;
  color-scheme:light;
}
@media (prefers-color-scheme:dark) and (min-width:100000px){:root{
  --bg:#0B0F13; --panel:#141A21; --sand:#1B232C; --line:#26303A; --ink:#F2EFE8; --ink2:#C4C1BA; --ink3:#9EA3AA;
  --signal:#FF6B38; --signal-soft:#3A1E12; --ok:#2DD4BF; --ok-soft:#0F2E2B; --warn:#F5B547; --warn-soft:#33260C; --bad:#FF7A6B; --bad-soft:#38161A;
  --rail:#070A0D; --muted:#9EA3AA; color-scheme:dark}}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--ink);font-family:var(--f-ui);font-size:15px;line-height:1.5}
a{color:var(--ink);text-underline-offset:3px}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--signal);outline-offset:2px}
.mono{font-family:var(--f-mono);font-variant-numeric:tabular-nums}
.muted{color:var(--ink3);font-size:13px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}

.pt{display:flex;align-items:center;gap:20px;flex-wrap:wrap;padding:12px 20px;background:var(--rail);color:var(--rail-ink)}
.pt a{color:var(--rail-ink);text-decoration:none}
.pt nav{display:flex;gap:16px;margin-left:auto;font-size:14px;color:var(--rail-dim)}
.pt nav a{color:var(--rail-dim)}.pt nav a:hover{color:var(--rail-ink)}
.brand{display:flex;align-items:center;gap:10px;font-weight:700}
.brand i{width:24px;height:24px;border-radius:6px;background:var(--signal);display:grid;place-items:center}
.brand i:after{content:"";width:9px;height:13px;border:2px solid #0F1419;border-radius:2px 2px 0 0;border-bottom:0}
.pm{max-width:1192px;margin:0 auto;padding:28px 20px;display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:20px;align-items:start}
.pm.one{grid-template-columns:minmax(0,1fr)}
.pf{max-width:1192px;margin:0 auto;padding:10px 20px 40px;color:var(--ink3);font-size:12.5px}
@media (max-width:760px){.pm{grid-template-columns:minmax(0,1fr);padding:20px 16px}.pt{padding:12px 16px}.pf{padding-inline:16px}}

.card,.prof,.inq{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:20px;min-width:0}
.prof{display:flex;flex-direction:column;gap:14px}
.prof h1{font-size:28px;line-height:1.15;letter-spacing:-.02em;margin:2px 0 8px}
.prof h2,.inq h2,.card h2{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink3);margin:0 0 12px;font-weight:600}
.ph{display:flex;gap:16px;align-items:flex-start}
.ph-img{width:76px;height:76px;border-radius:14px;background:var(--ink);color:var(--bg);display:grid;place-items:center;font-size:30px;font-weight:700;flex:none}
.ph-t{min-width:0}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{display:inline-block;font-size:12px;font-weight:600;padding:3px 10px;border-radius:999px;background:var(--sand);color:var(--ink2)}
.chip.ok{background:var(--ok-soft);color:var(--ok)}.chip.warn{background:var(--warn-soft);color:var(--warn)}.chip.bad{background:var(--bad-soft);color:var(--bad)}.chip.sig{background:var(--signal-soft);color:var(--signal)}
.src{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.srcbox{border:1px solid var(--line);border-radius:8px;padding:4px 10px;background:var(--panel);display:inline-flex;gap:6px;align-items:center;flex-wrap:wrap;font-size:14px}
.stars{color:var(--signal);letter-spacing:1px}
.ticker{background:var(--ink);color:var(--bg);border-radius:12px;padding:12px 14px;display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.ticker b{color:var(--signal);font-size:24px}.ticker span{flex:1;min-width:180px}
.kv{display:grid;grid-template-columns:110px minmax(0,1fr);gap:8px 12px;font-size:14px;margin:0}
.kv dt{color:var(--ink3)}.kv dd{margin:0;overflow-wrap:anywhere}
.disc{background:var(--sand);border:1px dashed var(--ink3);border-radius:10px;padding:12px 14px;font-size:13.5px;margin:0}
.docs{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.docs li{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:10px 0;border-top:1px solid var(--line)}
.docs li:first-child{border-top:0}

.btn{display:inline-block;border:1px solid var(--line);background:var(--panel);border-radius:8px;padding:9px 14px;font-weight:600;text-decoration:none;text-align:center;color:var(--ink)}
.btn:hover{border-color:var(--ink3)}
.btn.pri{background:var(--signal);border-color:var(--signal);color:#0F1419}
.btn.dark{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.btn.sm{padding:5px 10px;font-size:13px}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.btns{display:flex;gap:8px;flex-wrap:wrap}
form{display:flex;flex-direction:column;gap:12px}
form[hidden]{display:none}
label{display:flex;flex-direction:column;gap:4px;font-size:12.5px;font-weight:600;color:var(--ink3)}
label.cb{flex-direction:row;gap:8px;align-items:flex-start;font-weight:400;font-size:13.5px;color:var(--ink2)}
label.cb input{margin-top:3px}
input,select,textarea{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:9px 10px;width:100%;min-width:0;font-size:15px;font-weight:400;color:var(--ink)}
input[type=checkbox],input[type=radio]{width:auto}
textarea{min-height:84px;resize:vertical}
.msg{border-radius:8px;padding:10px 12px;font-size:14px}
.msg.err{background:var(--bad-soft);color:var(--bad)}.msg.ok{background:var(--ok-soft);color:var(--ok)}
.toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:10px;font-size:14px;opacity:0;pointer-events:none;transition:opacity .2s;z-index:50;max-width:calc(100% - 32px)}
.toast.on{opacity:1}
@media (prefers-reduced-motion:reduce){.toast{transition:none}}

/* directory home */
.hero{background:var(--rail);color:var(--rail-ink);padding:44px 20px 36px}
.hero-in{max-width:1192px;margin:0 auto}
.eyebrow{margin:0 0 10px;font-size:12px;text-transform:uppercase;letter-spacing:.1em;color:var(--signal);font-weight:600}
.hero h1{margin:0 0 12px;font-size:clamp(28px,4.6vw,44px);line-height:1.1;letter-spacing:-.03em;max-width:20ch;text-wrap:balance}
.lede{margin:0 0 26px;max-width:62ch;color:#C9C6BE;font-size:16px}
.paths{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px}
.path{text-align:left;background:#ffffff0d;border:1px solid #2A313B;color:var(--rail-ink);border-radius:14px;padding:16px;display:flex;flex-direction:column;gap:6px}
.path:hover{border-color:#ffffff40;background:#ffffff14}
.path[aria-pressed="true"]{border-color:var(--signal);background:#ff5b231a}
.path b{font-size:16px}.path span{font-size:13.5px;color:#C9C6BE;flex:1}
.path i{font-style:normal;font-weight:600;color:var(--signal);font-size:13.5px;margin-top:4px}
.dir{max-width:1192px;margin:0 auto;padding:26px 20px 10px;display:flex;flex-direction:column;gap:16px}
.modehint{margin:0;font-size:15px;color:var(--ink2)}
.sbar{flex-direction:row;flex-wrap:wrap;align-items:flex-end;gap:10px;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:14px}
.sbar label{flex:0 1 auto}.sbar label.grow{flex:1 1 240px}.sbar label.cb{align-self:center;padding-top:16px}
.sbar select{min-width:150px}
.res{list-style:none;margin:0;padding:0;background:var(--panel);border:1px solid var(--line);border-radius:14px}
.res li{display:flex;gap:14px;align-items:center;justify-content:space-between;padding:14px 16px;border-top:1px solid var(--line);flex-wrap:wrap}
.res li:first-child{border-top:0}
.rt{min-width:0;flex:1 1 280px}.rn{font-weight:600;font-size:16px}
.rb{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.pager{display:flex;gap:12px;align-items:center;justify-content:center;margin-top:12px}
.empty{text-align:center;color:var(--ink3)}
.how h2{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink3);margin:10px 0 12px}
.steps3{margin:0 0 12px;padding:0;list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}
.steps3 li{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px;font-size:14px;color:var(--ink2)}
.steps3 b{color:var(--ink)}

/* directory home: endpoint cards */
.hero2{background:var(--rail);color:var(--rail-ink);padding:40px 20px 84px}
.hero2 h1{margin:0 0 12px;font-size:clamp(28px,4.6vw,46px);line-height:1.08;letter-spacing:-.03em;max-width:22ch;text-wrap:balance}
.eps{max-width:1192px;margin:-56px auto 0;padding:0 20px;display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;position:relative}
.ep{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:22px;display:flex;flex-direction:column;gap:10px;box-shadow:0 10px 30px #0f14190f}
.ep .role{margin:0;font-size:12px;text-transform:uppercase;letter-spacing:.09em;color:var(--signal);font-weight:700}
.ep h2{margin:0;font-size:21px;line-height:1.2;letter-spacing:-.02em;text-transform:none;color:var(--ink);font-weight:700}
.ep .blurb{margin:0;color:var(--ink2);font-size:14.5px}
.gets{list-style:none;margin:2px 0 8px;padding:0;display:flex;flex-direction:column;gap:7px;flex:1;font-size:14px;color:var(--ink)}
.gets li{padding-left:22px;position:relative}
.gets li:before{content:"";position:absolute;left:3px;top:6px;width:9px;height:5px;border-left:2px solid var(--ok);border-bottom:2px solid var(--ok);transform:rotate(-45deg)}
.ep .btn{align-self:stretch}
.ep .btn[aria-pressed="true"]{box-shadow:0 0 0 3px var(--signal-soft);border-color:var(--signal)}
.dir{padding-top:34px}

/* endpoint cards v2: icon tile, tone per audience, 3 + 2 layout */
.ep{--tone:var(--signal);--tint:var(--signal-soft);gap:12px;transition:transform .15s ease,box-shadow .15s ease}
.ep:hover{transform:translateY(-3px);box-shadow:0 16px 38px #0f141922}
.ep.t-lender{--tone:var(--ok);--tint:var(--ok-soft)}
.ep.t-buyer{--tone:#2F5BEA;--tint:#E8EEFF}
.ep.t-jobs{--tone:var(--warn);--tint:var(--warn-soft)}
.ep.t-partner{--tone:var(--ink2);--tint:var(--sand)}
@media (prefers-color-scheme:dark) and (min-width:100000px){.ep.t-buyer{--tone:#8FA8FF;--tint:#1B2440}}
.ep .ico{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;background:var(--tint);color:var(--tone)}
.ep .ico svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ep .role{color:var(--tone)}
.ep h2{font-size:23px;line-height:1.15}
.ep .btn.pri,.ep .btn.dark{background:var(--tone);border-color:var(--tone);color:#fff}
.ep .btn.pri{color:#0F1419}
.ep .gets li:before{border-color:var(--tone)}
@media (min-width:1000px){
  .eps{grid-template-columns:repeat(6,minmax(0,1fr))}
  .eps .ep{grid-column:span 2}
  .eps .ep:nth-child(4),.eps .ep:nth-child(5){grid-column:span 3}
}
@media (prefers-reduced-motion:reduce){.ep{transition:none}.ep:hover{transform:none}}

/* endpoint cards v3: one width for every card, same container width as the search and jobs section below (1000px) */
.eps{display:flex;flex-wrap:wrap;justify-content:center;max-width:1192px;gap:16px}
.eps .ep{grid-column:auto;flex:0 1 calc((100% - 32px) / 3);min-width:0}
@media (max-width:860px){.eps .ep{flex-basis:calc((100% - 16px) / 2)}}
@media (max-width:600px){.eps .ep{flex-basis:100%}}

/* phone menus */
.burger{display:none;margin-left:auto;width:44px;height:44px;border-radius:10px;border:1px solid #ffffff33;cursor:pointer;align-items:center;justify-content:center}
.burger span,.burger span:before,.burger span:after{display:block;width:20px;height:2px;background:var(--rail-ink);border-radius:2px;position:relative;content:""}
.burger span:before{position:absolute;top:-6px}.burger span:after{position:absolute;top:6px}
.mnu-t{position:absolute;opacity:0;pointer-events:none}
.mnu-t:focus-visible + .burger{outline:2px solid var(--signal);outline-offset:2px}
@media (max-width:700px){
  .burger{display:flex}
  .pt nav{display:none;margin-left:0;flex-basis:100%;flex-direction:column;gap:0;border-top:1px solid #2A313B;padding-top:6px}
  .mnu-t:checked ~ nav{display:flex}
  .pt nav a{padding:14px 4px;font-size:16px;border-bottom:1px solid #1D252E;min-height:48px;display:flex;align-items:center}
  .pt nav a:last-child{border-bottom:0}
  .btn{min-height:44px}
  input,select,textarea{font-size:16px}
}

/* align the hero text with the cards and the search section (all 960px inside the page gutters) */
.hero2 .hero-in{max-width:1152px}

/* menu everywhere: a menu button at every width, header content in the same 960px column as the page */
.pt{position:relative;padding:12px max(20px, calc((100% - 1152px) / 2))}
.burger,.burger2{display:flex;margin-left:auto;width:44px;height:44px;border-radius:10px;border:1px solid #ffffff33;background:none;cursor:pointer;align-items:center;justify-content:center;flex:none}
.burger2 span,.burger2 span:before,.burger2 span:after{display:block;width:20px;height:2px;background:var(--rail-ink);border-radius:2px;position:relative;content:""}
.burger2 span:before{position:absolute;top:-6px}.burger2 span:after{position:absolute;top:6px}
.pt nav{display:none;position:absolute;z-index:50;top:100%;left:0;right:0;margin:0;flex-direction:column;gap:0;background:var(--rail);border-top:1px solid #2A313B;box-shadow:0 18px 30px #0006;padding:6px max(20px, calc((100% - 1152px) / 2)) 12px}
.mnu-t:checked ~ nav{display:flex}
.pt nav a{padding:14px 2px;font-size:16px;border-bottom:1px solid #1D252E;min-height:50px;display:flex;align-items:center;color:var(--rail-ink)}
.pt nav a:last-child{border-bottom:0}
.pt .bizpick{margin-left:auto;max-width:46%}
.pt .bizpick + .burger2{margin-left:0}
.pm,.pf,.dir,.eps,.hero2 .hero-in{max-width:1192px}

.hero2 .hero-in{max-width:1152px}

/* menu panel: opens under the menu button and reveals right to left */
.pt nav{display:flex;visibility:hidden;position:absolute;z-index:50;top:calc(100% + 8px);left:auto;right:max(20px, calc((100% - 1152px) / 2));width:min(320px, calc(100% - 40px));
  flex-direction:column;gap:0;background:var(--rail);border:1px solid #2A313B;border-radius:14px;box-shadow:0 18px 40px #0008;padding:4px 16px;
  clip-path:inset(-20px -30px -50px 100%);transition:clip-path .24s ease, visibility 0s linear .24s}
.mnu-t:checked ~ nav{visibility:visible;clip-path:inset(-20px -30px -50px -30px);transition:clip-path .24s ease, visibility 0s}
.pt nav a{padding:14px 2px;min-height:50px}
@media (prefers-reduced-motion:reduce){.pt nav,.mnu-t:checked ~ nav{transition:none}}

/* endpoint cards v4: a plain 3-column grid, every card the same width, last row left-aligned (works for 5, 7 or any number) */
.eps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));justify-content:start;gap:16px;max-width:1192px}
.eps .ep{flex:none;width:auto;min-width:0;grid-column:auto}
@media (max-width:860px){.eps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.eps{grid-template-columns:minmax(0,1fr)}}
.eps .ep:nth-child(n){grid-column:auto}

/* search first: the search bar lives in the hero, results appear right under it, then the audience cards */
.hero2{padding:34px 20px 30px}
.hero2 h1{margin-bottom:10px}
.hero2 .lede{margin-bottom:20px}
.hero2 .sbar{margin:0;box-shadow:0 14px 34px #0006}
.hero2 .modehint{margin:12px 0 0;color:#C9C6BE;font-size:14px}
.resultsec{padding-top:22px;padding-bottom:0}
.resultsec:has(#results:empty){display:none}
.eps{margin:26px auto 0}
.hero2 .sbar .btn.pri{align-self:flex-end}

/* endpoint cards v5: header row, two-line taglines, HD 3D look */
.eps{perspective:1400px}
.ep{--edge:#C2410C;position:relative;gap:14px;padding:24px 22px 22px;border:1px solid rgba(15,20,25,.08);border-radius:20px;
  background:linear-gradient(180deg,#ffffff 0%,#fbf9f5 100%);
  box-shadow:inset 0 1px 0 #fff, inset 0 -1px 0 rgba(15,20,25,.04), 0 1px 2px rgba(15,20,25,.06), 0 10px 18px -8px rgba(15,20,25,.16), 0 34px 46px -26px rgba(15,20,25,.34);
  transform-style:preserve-3d;transition:transform .22s ease, box-shadow .22s ease}
.ep:hover{transform:translateY(-8px) rotateX(2.5deg);box-shadow:inset 0 1px 0 #fff, 0 2px 4px rgba(15,20,25,.08), 0 18px 26px -10px rgba(15,20,25,.2), 0 46px 60px -28px rgba(15,20,25,.42)}
.ep.t-lender{--edge:#0B5E55}.ep.t-buyer{--edge:#1D3FB8}.ep.t-jobs{--edge:#7A4700}.ep.t-partner{--edge:#2D333A}
.ep .eh{display:flex;align-items:center;gap:12px}
.ep .ico{width:52px;height:52px;border-radius:15px;flex:none;color:#fff;
  background:linear-gradient(160deg,color-mix(in srgb,var(--tone) 78%,#fff) 0%,var(--tone) 55%,var(--edge) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55), inset 0 -3px 5px rgba(0,0,0,.18), 0 8px 14px -5px color-mix(in srgb,var(--tone) 70%,transparent), 0 2px 0 var(--edge)}
.ep .ico svg{width:26px;height:26px;stroke-width:1.9;filter:drop-shadow(0 1px 1px rgba(0,0,0,.25))}
.ep .role{margin:0;font-size:15px;font-weight:700;letter-spacing:0;text-transform:none;color:var(--ink)}
.ep h2{font-size:22px;line-height:1.18;letter-spacing:-.02em;min-height:2.36em}
.ep .blurb{font-size:14.5px}
.ep .gets li:before{border-color:var(--tone)}
.ep .btn{border:0;border-radius:12px;min-height:46px;font-size:15px;color:#fff;
  background:linear-gradient(180deg,color-mix(in srgb,var(--tone) 82%,#fff) 0%,var(--tone) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45), 0 3px 0 var(--edge), 0 10px 16px -6px color-mix(in srgb,var(--tone) 60%,transparent);
  transition:transform .12s ease, box-shadow .12s ease}
.ep .btn.pri{color:#1a0d05}
.ep .btn:hover{transform:translateY(-1px)}
.ep .btn:active{transform:translateY(2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 0 1px 0 var(--edge)}
.ep .btn[aria-pressed="true"]{outline:3px solid color-mix(in srgb,var(--tone) 35%,transparent);outline-offset:2px}
@media (prefers-color-scheme:dark) and (min-width:100000px){
  .ep{background:linear-gradient(180deg,#1b232c 0%,#141a21 100%);border-color:rgba(255,255,255,.07);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.07), 0 10px 18px -8px rgba(0,0,0,.6), 0 34px 46px -26px rgba(0,0,0,.8)}
  .ep .role{color:var(--ink)}
}
@media (prefers-reduced-motion:reduce){.ep,.ep:hover,.ep .btn,.ep .btn:hover{transition:none;transform:none}}

/* menu icons */
.pt nav a svg{width:20px;height:20px;flex:none;margin-right:12px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;opacity:.85}

/* card hover: the whole card floods with its own colour */
.ep{overflow:hidden;isolation:isolate}
.ep::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;opacity:0;transition:opacity .28s ease;
  background:radial-gradient(120% 80% at 0% 0%,color-mix(in srgb,var(--tone) 70%,#fff) 0%,transparent 55%),linear-gradient(165deg,color-mix(in srgb,var(--tone) 60%,var(--edge)) 0%,var(--edge) 100%)}
.ep .role,.ep h2,.ep .blurb,.ep .gets,.ep .gets li:before,.ep .ico,.ep .btn{transition:color .25s ease,background .25s ease,border-color .25s ease,box-shadow .25s ease}
@media (hover:hover) and (pointer:fine){
.ep:hover::before,.ep:focus-within::before{opacity:1}
.ep:hover,.ep:focus-within{border-color:transparent}
.ep:hover .role,.ep:hover h2,.ep:focus-within .role,.ep:focus-within h2{color:#fff}
.ep:hover .blurb,.ep:hover .gets,.ep:focus-within .blurb,.ep:focus-within .gets{color:rgba(255,255,255,.92)}
.ep:hover .gets li:before,.ep:focus-within .gets li:before{border-color:#fff}
.ep:hover .ico,.ep:focus-within .ico{background:#fff;color:var(--tone);box-shadow:inset 0 -3px 5px rgba(0,0,0,.08),0 10px 18px -6px rgba(0,0,0,.45),0 2px 0 rgba(0,0,0,.18)}
.ep:hover .ico svg,.ep:focus-within .ico svg{filter:none}
.ep:hover .btn,.ep:focus-within .btn{background:#fff;color:var(--edge);box-shadow:0 3px 0 rgba(0,0,0,.28),0 12px 18px -8px rgba(0,0,0,.5)}
.ep:hover .btn:active{transform:translateY(2px);box-shadow:0 1px 0 rgba(0,0,0,.28)}
}  /* end: pointer devices only */
@media (hover:none){.ep:hover::before{opacity:0}.ep:hover .role,.ep:hover h2{color:var(--ink)}}
@media (prefers-reduced-motion:reduce){.ep::before,.ep .role,.ep h2,.ep .blurb,.ep .gets,.ep .ico,.ep .btn{transition:none}}

/* search bar: a text box, two lists and a button */
.hero2 .sbar label.grow{flex:1 1 260px}
.hero2 .sbar select{min-width:150px}
.hero2 h1{margin-bottom:22px}

/* audience pages */
.aud{--tone:#FF5B23;--edge:#C2410C;--tint:#FFE6DB}
.aud.t-lender{--tone:#0F766E;--edge:#0B5E55;--tint:#D8F5F0}
.aud.t-buyer{--tone:#2F5BEA;--edge:#1D3FB8;--tint:#E8EEFF}
.aud.t-jobs{--tone:#9A5B00;--edge:#7A4700;--tint:#FFEFD0}
.aud.t-partner{--tone:#4A4F56;--edge:#2D333A;--tint:#EFEBE2}
.aud-hero{background:var(--rail);color:var(--rail-ink);padding:44px 20px 52px;position:relative;overflow:hidden}
.aud-hero:after{content:"";position:absolute;right:-120px;top:-140px;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,var(--tone) 0%,transparent 68%);opacity:.34;pointer-events:none}
.aud-hero .hero-in{max-width:1152px;margin:0 auto;position:relative;z-index:1}
.aud-tag{display:inline-flex;align-items:center;gap:12px;margin:0 0 14px;font-weight:700;font-size:15px}
.aud-tag .ico{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;color:#fff;background:linear-gradient(160deg,color-mix(in srgb,var(--tone) 78%,#fff),var(--tone) 55%,var(--edge));box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 8px 14px -5px color-mix(in srgb,var(--tone) 70%,transparent)}
.aud-tag .ico svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.aud-hero h1{margin:0 0 14px;font-size:clamp(32px,5.4vw,54px);line-height:1.06;letter-spacing:-.03em;text-wrap:balance}
.aud-hero .sub{margin:0 0 26px;max-width:58ch;color:#D5D2CA;font-size:17px}
.aud-hero .btns{gap:12px}
.btn.cta{background:var(--tone);border-color:var(--tone);color:#fff;min-height:48px;padding:0 24px;font-size:16px;border-radius:12px;display:inline-flex;align-items:center;box-shadow:0 3px 0 var(--edge),0 12px 20px -8px color-mix(in srgb,var(--tone) 60%,transparent)}
.aud.t-owner .btn.cta{color:#1a0d05}
.btn.cta:hover{filter:brightness(1.06)}
.btn.ghost{background:transparent;color:var(--rail-ink);border-color:#ffffff40;min-height:48px;padding:0 20px;display:inline-flex;align-items:center;border-radius:12px;font-size:16px}
.sec{max-width:1192px;margin:0 auto;padding:36px 20px 0}
.sech{margin:0 0 16px;font-size:12px;text-transform:uppercase;letter-spacing:.09em;color:var(--ink3);font-weight:700}
.h-sm{margin:0 0 6px;font-size:18px;text-transform:none;letter-spacing:-.01em;color:var(--ink)}
.feats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.feat{background:linear-gradient(180deg,#fff,#fbf9f5);border:1px solid rgba(15,20,25,.08);border-radius:18px;padding:22px;box-shadow:inset 0 1px 0 #fff,0 1px 2px rgba(15,20,25,.06),0 18px 28px -18px rgba(15,20,25,.3)}
.feat .fi{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;background:var(--tint);color:var(--tone);margin-bottom:12px}
.feat .fi svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.feat h3{margin:0 0 6px;font-size:18px;letter-spacing:-.01em}.feat p{margin:0;color:var(--ink2);font-size:14.5px}
.howsteps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.howsteps li{display:flex;gap:14px;align-items:flex-start;background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:18px}
.howsteps .sn{flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--tone);color:#fff;font-weight:700}
.aud.t-owner .howsteps .sn{color:#1a0d05}
.howsteps b{display:block;margin-bottom:2px}.howsteps p{margin:0;color:var(--ink2);font-size:14px}
.faq details{border-top:1px solid var(--line);padding:14px 2px}.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;font-weight:600;font-size:16px;list-style:none;display:flex;justify-content:space-between;gap:12px}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"+";font-size:22px;line-height:1;color:var(--tone);font-weight:500}
.faq details[open] summary:after{content:"–"}
.faq p{margin:10px 0 0;color:var(--ink2);max-width:70ch}
.band{margin-top:44px;background:linear-gradient(165deg,color-mix(in srgb,var(--tone) 60%,var(--edge)),var(--edge));color:#fff}
.band-in{max-width:1192px;margin:0 auto;padding:34px 20px;display:flex;gap:20px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.band h2{margin:0;font-size:clamp(22px,3.4vw,32px);letter-spacing:-.02em;max-width:22ch;text-wrap:balance}
.band .btn.cta{background:#fff;color:var(--edge);border-color:#fff;box-shadow:0 3px 0 rgba(0,0,0,.25)}
.aud #start .sbar{margin-top:0}
.aud #start .card{max-width:640px}
@media (max-width:860px){.feats,.howsteps{grid-template-columns:minmax(0,1fr)}.aud-hero{padding:34px 16px 40px}.sec{padding:28px 16px 0}.band-in{padding:28px 16px}}
.aud .pt nav a[aria-current="page"]{background:#ffffff14;border-radius:8px}

/* the whole card is the link */
.ep .btn::after{content:"";position:absolute;inset:0;border-radius:inherit;z-index:2}
.ep{cursor:pointer}
.ep .btn:focus-visible{outline:none}
.ep:focus-within{outline:3px solid color-mix(in srgb,var(--tone) 55%,transparent);outline-offset:3px}

/* sign-in box (modal and inline) */
.gate{display:flex;flex-direction:column;gap:12px}
.gate h3{margin:0;font-size:20px;letter-spacing:-.01em}
.gate form{display:flex;flex-direction:column;gap:12px}
.gate .seg{display:flex;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.gate .seg button{flex:1;background:var(--panel);border:0;padding:9px 12px;font-weight:600;color:var(--ink2)}
.gate .seg button[aria-pressed="true"]{background:var(--ink);color:var(--bg)}
.gatebox{background:var(--sand);border:1px solid var(--line);border-radius:14px;padding:18px}
.gate-modal{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:16px}
.gate-bg{position:absolute;inset:0;background:#000a}
.gate-card{position:relative;width:min(440px,100%);max-height:92vh;overflow:auto;background:var(--panel);border-radius:18px;padding:24px;box-shadow:0 30px 80px #0009}
.gate-x{position:absolute;top:12px;right:12px;width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:var(--sand);font-size:22px;line-height:1;color:var(--ink2,var(--ink3));cursor:pointer;display:grid;place-items:center;padding:0}
.gate-x:hover{background:var(--panel);color:var(--ink)}
.gate-card{padding-top:56px}                                       /* room above the content so the close box never overlaps it */
.prof.locked .gatebox{margin-top:4px}
.signout .muted{color:var(--rail-dim)}
.hp-note{font-size:13px}

/* provider dashboard */
.row2{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:16px}
.stat{flex:1 1 180px;display:flex;flex-direction:column;gap:2px;justify-content:center}.stat b{font-size:28px;letter-spacing:-.03em}.stat span{color:var(--ink2);font-size:13px}
.listing{margin-bottom:14px}.lh{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;flex-wrap:wrap;margin-bottom:10px}.lh h3{margin:0;font-size:20px}
.lf .two{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}

/* home headline: the five audiences, in the same capitalisation as the menu, each linking to its page in its own colour */
.hero2 h1{margin-bottom:12px}
.hero2 .who{margin:0 0 22px;font-size:clamp(19px,2.5vw,27px);line-height:1.35;font-weight:600;letter-spacing:-.01em;color:#D5D2CA;max-width:30ch;text-wrap:balance}
.hero2 .who a{text-decoration:none;white-space:nowrap;border-bottom:2px solid currentColor;padding-bottom:1px}
.hero2 .who a:hover{filter:brightness(1.15)}
.who .w-owner{color:#FF8A5C}.who .w-lender{color:#3EDBC9}.who .w-buyer{color:#9DB3FF}.who .w-jobs{color:#F5B547}.who .w-partner{color:#E4E1DA}
@media (max-width:700px){.hero2 .who{max-width:none}}

.hero2 h1{max-width:none}

/* home hero v3: the five audiences as one row of icon chips across the full width, tighter spacing so the header stays short */
.hero2{padding:26px 20px 24px}
.hero2 .eyebrow{margin:0 0 6px}
.hero2 h1{margin:0 0 14px;font-size:clamp(28px,4.2vw,44px)}
.aud-chips{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 16px}
.ac{--tone:#FF5B23;--edge:#C2410C;flex:1 1 auto;display:flex;align-items:center;justify-content:center;gap:9px;min-height:46px;padding:6px 14px 6px 8px;border-radius:14px;
  color:#F2EFE8;font-weight:600;font-size:14px;text-decoration:none;white-space:nowrap;
  background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.03));border:1px solid rgba(255,255,255,.14);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 6px 14px -8px rgba(0,0,0,.6);transition:background .2s ease,border-color .2s ease,transform .15s ease,color .2s ease}
.ac.t-lender{--tone:#0F766E;--edge:#0B5E55}.ac.t-buyer{--tone:#2F5BEA;--edge:#1D3FB8}.ac.t-jobs{--tone:#9A5B00;--edge:#7A4700}.ac.t-partner{--tone:#4A4F56;--edge:#2D333A}
.ac .ci{width:30px;height:30px;border-radius:9px;flex:none;display:grid;place-items:center;color:#fff;
  background:linear-gradient(160deg,color-mix(in srgb,var(--tone) 78%,#fff),var(--tone) 60%,var(--edge));box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 4px 8px -3px color-mix(in srgb,var(--tone) 70%,transparent)}
.ac .ci svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.ac:hover,.ac:focus-visible{background:linear-gradient(165deg,color-mix(in srgb,var(--tone) 60%,var(--edge)),var(--edge));border-color:transparent;transform:translateY(-2px);color:#fff}
.ac:hover .ci,.ac:focus-visible .ci{background:#fff;color:var(--tone)}
@media (prefers-reduced-motion:reduce){.ac,.ac:hover{transition:none;transform:none}}
@media (max-width:700px){.ac{flex:1 1 calc(50% - 8px);justify-content:flex-start}}

/* phone: the chips become one swipeable row so the header stays short */
@media (max-width:700px){
  .aud-chips{flex-wrap:nowrap;overflow-x:auto;margin-inline:-20px;padding:2px 20px 6px;scroll-snap-type:x proximity;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .aud-chips::-webkit-scrollbar{display:none}
  .ac{flex:0 0 auto;scroll-snap-align:start;justify-content:flex-start}
  .hero2 .sbar{padding:12px}
}

/* home hero v4: headline with a short slogan beside it (under it on a phone); no repeated audience list, the menu and the cards already have it */
.hline{display:flex;align-items:flex-end;justify-content:space-between;gap:6px 32px;flex-wrap:wrap;margin:0 0 16px}
.hline h1{margin:0}
.slogan{margin:0 0 4px;font-weight:700;font-size:clamp(17px,2vw,22px);letter-spacing:-.01em;color:#D5D2CA;text-align:right}
.slogan .s1{color:#F2EFE8}.slogan .s2{color:#3EDBC9}.slogan .s3{color:#FF8A5C}
@media (max-width:860px){.slogan{text-align:left;margin:2px 0 0}.hero2{padding:22px 16px 22px}}
/* headline and slogan fit on one row inside the 960px column */
.hero2 h1{font-size:clamp(26px,3.6vw,40px)}
.slogan{font-size:clamp(16px,1.6vw,20px);white-space:nowrap}
@media (min-width:861px){.hline{flex-wrap:nowrap}}
@media (max-width:860px){.hero2 h1{font-size:clamp(26px,6.4vw,36px)}.slogan{white-space:normal}}

/* Service Providers is violet everywhere (card, hover flood, page, menu); no more grey or black */
.ep.t-partner,.aud.t-partner,.ac.t-partner{--tone:#7C3AED;--edge:#5B21B6;--tint:#EDE5FF}

/* header menu: every row in its audience's colour */
.pt nav a{--t:#FF5B23;--e:#C2410C;--l:#FF8A5C;padding:10px 8px;margin:0 -8px;border-radius:10px;transition:background .18s ease}
.pt nav a[href="/lenders/"]{--t:#047857;--e:#065F46;--l:#34D399}
.pt nav a[href="/buyers/"]{--t:#BE123C;--e:#9F1239;--l:#FB7185}
.pt nav a[href="/search/"]{--t:#0369A1;--e:#075985;--l:#38BDF8}
.pt nav a[href="/jobs/"]{--t:#9A5B00;--e:#7A4700;--l:#F5B547}
.pt nav a[href="/providers/"]{--t:#7C3AED;--e:#5B21B6;--l:#C4A8FF}
.pt nav a svg{width:32px;height:32px;padding:7px;border-radius:10px;margin-right:12px;opacity:1;stroke:#fff;
  background:linear-gradient(160deg,color-mix(in srgb,var(--t) 78%,#fff),var(--t) 60%,var(--e));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 4px 8px -4px color-mix(in srgb,var(--t) 70%,transparent)}
.pt nav a:hover,.pt nav a:focus-visible{background:color-mix(in srgb,var(--t) 24%,transparent);color:#fff}
.pt nav a[aria-current="page"]{background:color-mix(in srgb,var(--t) 16%,transparent);box-shadow:inset 3px 0 0 var(--l)}
.pt nav a.signout{--t:#4A4F56;--e:#2D333A;--l:#9EA3AA}
@media (prefers-reduced-motion:reduce){.pt nav a{transition:none}}

/* global footer */
.gf{background:var(--rail);color:var(--rail-dim);margin-top:48px;padding:34px 20px 26px;font-size:13px}
.gf-in{max-width:1192px;margin:0 auto}
.gf-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin-bottom:22px}
.gf h4{margin:0 0 10px;font-size:12px;text-transform:uppercase;letter-spacing:.09em;color:#fff}
.gf nav{display:flex;flex-direction:column;gap:7px}
.gf a{color:var(--rail-dim);text-decoration:none}.gf a:hover{color:#fff;text-decoration:underline}
.gf-disc{border-top:1px solid #2A313B;padding-top:18px;color:#B8B5AE;line-height:1.55;max-width:90ch}
.gf-disc p{margin:0 0 10px}
.gf-fine{margin:14px 0 0;color:#8F949B;font-size:12px}
@media (max-width:700px){.gf{padding:28px 16px 22px}.gf-cols{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.gf-cols nav:last-child{grid-column:1/-1}}
.fine{font-size:12.5px;color:var(--ink3);margin:0}
.consent a{color:var(--ink2)}

.gf-in{max-width:1152px}
.gf-disc{max-width:none}
.gf-cols{display:flex;justify-content:space-between;gap:22px}
.gf-cols nav:last-child{align-items:flex-end;text-align:right}
@media (max-width:700px){.gf-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.gf-cols nav:last-child{grid-column:1/-1;align-items:flex-start;text-align:left}}

.gate .why{background:var(--sand);border:1px solid var(--line);border-radius:12px;padding:10px 14px;font-size:13px;color:var(--ink2)}
.gate .why b{display:block;margin-bottom:4px;color:var(--ink)}
.gate .why ul{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:3px}
/* consent checkbox: big enough to tap, and the whole line is the target */
label.cb{display:flex;align-items:flex-start;gap:12px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--panel);cursor:pointer;font-size:14px;line-height:1.45;color:var(--ink)}
label.cb input[type=checkbox]{flex:none;width:24px;height:24px;margin:1px 0 0;accent-color:var(--signal);cursor:pointer}
label.cb:has(input:checked){border-color:var(--signal);background:var(--signal-soft)}
label.cb:has(input:focus-visible){outline:3px solid color-mix(in srgb,var(--signal) 45%,transparent);outline-offset:2px}

/* search pages: the search box lives in the hero, like the home page; the results section only shows once there are results */
.aud-hero .sbar{margin:0 0 14px;box-shadow:0 14px 34px #0006;max-width:none;width:100%}
.aud-hero .sbar label.grow{flex:1 1 260px}
.aud-hero .btns{margin-top:2px}
.aud .sec.results-only:has(#results:empty){display:none}
.aud .sec.results-only{padding-top:28px}
/* tighter vertical rhythm on the inner pages: sections sit closer, cards stay side by side */
.aud-hero{padding:26px 20px 28px}
.aud-hero h1{margin:0 0 8px}
.aud-hero .sub{margin:0 0 16px}
.aud-hero .aud-tag{margin-bottom:10px}
.aud .sec{padding-top:22px}
.aud .sech{margin:0 0 10px}
.aud .feats,.aud .howsteps{gap:12px}
.aud .howsteps li{padding:14px 16px}
.aud .faq details{padding:11px 2px}
.aud .gf{margin-top:26px}
@media (max-width:860px){.aud-hero{padding:22px 16px 24px}.aud .sec{padding-top:18px}}

/* the person's own areas, first in the menu */
.pt nav a .you{margin-left:auto;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:2px 8px;border-radius:999px;background:color-mix(in srgb,var(--l) 28%,transparent);color:#fff}

.kv .by{margin-left:8px;font-size:11px;font-weight:600;color:var(--ink3);white-space:nowrap}

/* sign-up forms: related fields share a row; the card is as wide as the page body */
.frow{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media (max-width:560px){.frow{grid-template-columns:minmax(0,1fr)}}
.aud #start .card,.aud #signup.card{max-width:none}
.cb.remember{font-size:13px;padding:10px 12px}

/* saved searches on the lender and buyer pages */
.savedlist{margin:0 0 12px;color:var(--rail-dim);font-size:13px;display:flex;flex-wrap:wrap;gap:6px;align-items:center}.savedlist:empty{display:none}
.savedlist .chip{display:inline-flex;align-items:center;gap:6px}.savedlist .x{border:0;background:none;color:inherit;font-size:16px;line-height:1;padding:0 2px;cursor:pointer}
.savebar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:12px 0;padding:10px 14px;border:1px dashed var(--line);border-radius:12px;font-size:14px}

/* role menu: whose menu this is, the role's own pages, switch role */
.pt nav .whoami{display:flex;flex-direction:column;padding:12px 2px 8px;color:var(--rail-dim);font-size:12px;letter-spacing:.06em;text-transform:uppercase;border-bottom:1px solid #1D252E}
.pt nav .whoami b{font-size:16px;letter-spacing:0;text-transform:none;color:var(--rail-ink);margin-top:2px}
.pt nav .swlabel{padding:12px 2px 2px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--rail-dim)}
.pt nav[data-role="owner"] a{--t:#FF5B23;--e:#C2410C;--l:#FF8A5C}
.pt nav[data-role="lender"] a{--t:#047857;--e:#065F46;--l:#34D399}
.pt nav[data-role="buyer"] a{--t:#BE123C;--e:#9F1239;--l:#FB7185}
.pt nav[data-role="interests"] a{--t:#0369A1;--e:#075985;--l:#38BDF8}
.pt nav[data-role="jobseeker"] a{--t:#9A5B00;--e:#7A4700;--l:#F5B547}
.pt nav[data-role="provider"] a{--t:#7C3AED;--e:#5B21B6;--l:#C4A8FF}
.pt nav a.plain,.pt nav a[data-switch]{--t:#4A4F56;--e:#2D333A;--l:#9EA3AA}

.pt nav a .count{margin-left:auto;font-size:11px;font-weight:700;min-width:20px;text-align:center;padding:1px 7px;border-radius:999px;background:var(--signal);color:#0F1419}

.pt .bizpick + .burger{margin-left:0}

/* breadcrumbs: a quiet strip under the header, in the same column as the page */
.crumbs{background:var(--rail);padding:0 max(20px, calc((100% - 1152px) / 2)) 12px;font-size:13px;color:var(--rail-dim)}
.crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 0;align-items:center}
.crumbs li+li:before{content:"\203A";margin:0 8px;color:#6b7280}
.crumbs a{color:var(--rail-dim);text-decoration:none}.crumbs a:hover{color:#fff;text-decoration:underline}
.crumbs li[aria-current="page"]{color:var(--rail-ink);font-weight:600;overflow-wrap:anywhere}
@media (max-width:760px){.crumbs{padding-inline:16px;font-size:12.5px}}
/* feature cards: the title sits next to the icon, the description runs under both */
.feat{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:14px;row-gap:10px;align-items:center}
.feat .fi{margin-bottom:0}
.feat h3{margin:0;font-size:17px;line-height:1.25}
.feat p{grid-column:1 / -1}

/* search limits: the bar that asks for an account or a plan, and the blurred rows behind it */
.wallbar{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin:10px 0;padding:12px 14px;border-radius:12px;background:var(--signal-soft);font-size:14px}
.wallbar.pay{background:#FAEEDA;color:#633806}
.lockrow{opacity:.8}.lockrow .blur{display:inline-block;height:14px;width:min(240px,60%);border-radius:4px;background:var(--line)}
.grp{margin-bottom:14px}.grp .gh{margin:0 0 6px;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink3)}

/* My area pages: lists inside cards, and cards side by side */
#me .row2{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px;align-items:start}
#me .list{list-style:none;margin:0;padding:0}
#me .list li{display:flex;gap:10px;justify-content:space-between;align-items:center;padding:9px 0;border-top:1px solid var(--line)}#me .list li:first-child{border-top:0}
#me .list .t small{display:block;color:var(--ink3);font-size:13px}

/* the global search: the filters row, "See all" links, and the header search icon */
.sfilters{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:flex-end;margin-top:10px;padding:10px 14px;background:var(--panel);border:1px solid var(--line);border-radius:12px}
.sfilters[hidden]{display:none}
.sfilters label{flex:0 1 auto}.sfilters label.cb{padding:0;border:0;background:none;align-self:center}
.grp .gh .seeall{margin-left:10px;font-size:12px;text-transform:none;letter-spacing:0;color:var(--tone,var(--ink2))}
.hsearch{margin-left:auto;width:44px;height:44px;border-radius:10px;border:1px solid #ffffff33;display:grid;place-items:center;color:var(--rail-ink)}
.hsearch svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.hsearch:hover{background:#ffffff14}
.hsearch ~ .burger{margin-left:8px}.pt .bizpick + .hsearch{margin-left:0}

/* the filters sit in the same row as the search, and the text box gives up some width */
.sbar .sfilters{display:contents}.sbar .sfilters[hidden]{display:none}
.sbar .sq{flex:1 1 150px}.sbar .sq input{min-width:0}
.sbar .sfilters label{flex:0 1 auto}.sbar .sfilters select{min-width:130px}.sbar .sfilters input{width:84px;min-width:0}

.also{margin:4px 0 12px;font-size:13px}.also a{color:var(--tone,var(--ink2))}

/* job seeker windows (jobflow.js) and the clickable "How it works" cards */
.howsteps li.tap{cursor:pointer;transition:transform .12s,box-shadow .12s}.howsteps li.tap:hover,.howsteps li.tap:focus-visible{transform:translateY(-2px);box-shadow:0 10px 24px -12px rgba(0,0,0,.35);outline:0}
.gate .jf-x{position:absolute;top:10px;right:12px;width:32px;height:32px;border:0;border-radius:50%;background:transparent;color:inherit;font-size:22px;line-height:1;cursor:pointer}
.jf .jf-h,.jf h3{margin:0 0 6px;padding-right:28px}
.jf-q{border:0;padding:0;margin:0 0 14px}.jf-q legend{font-weight:600;margin:0 0 6px;padding:0}
.jf-opt{display:inline-flex;align-items:center;gap:6px;margin:0 14px 4px 0;font-weight:500}
.jf-opt input[type=radio]{width:18px;height:18px;min-height:0;margin:0;padding:0;flex:none}
.jf-opt{flex-direction:row}
.gate label.jf-opt{display:inline-flex;flex-direction:row;align-items:center;gap:6px}
.gate label.jf-opt input[type=radio]{width:18px;height:18px;min-height:0;margin:0;padding:0;flex:none}
/* wide windows (jobflow.js modal({wide:true})): a two-column form that fits one screen on a desktop, one column on a phone */
.gate-card.wide{width:min(720px,100%)}
.jf-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px 14px;align-items:start}
.jf-grid>label{margin:0}.jf-grid .span2{grid-column:1/-1}
.jf-grid .cb{padding:10px 12px}.jf-grid textarea{min-height:0}
.gate-card.wide .jf h3{margin-bottom:2px}
@media (max-width:640px){.gate-modal{padding:8px}.gate-card{padding:52px 16px 16px}}
.gate form.jf-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px 14px}
@media (max-width:640px){.gate form.jf-grid{gap:8px 10px}.gate form.jf-grid .m2{grid-column:1/-1}}
.gate form.jf-grid label{gap:3px;font-size:12.5px}
.gate form.jf-grid input:not([type=checkbox]),.gate form.jf-grid select{min-height:0;height:38px;padding:6px 10px;font-size:14px}
.gate form.jf-grid textarea{padding:8px 10px;font-size:14px}
.gate form.jf-grid .cb{padding:8px 10px;font-size:13px}
.gate form.jf-grid .btn{min-height:42px}
.gate form[hidden]{display:none}
.gate form.jf-grid .hp{display:none}
.gate form.jf-grid{align-items:end}
/* Connections tabs (also used by the owner dashboard, which has its own copy in owner.css) */
.subtabs{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 16px}
.subtabs a{padding:8px 14px;border:1px solid var(--line,#e2ddd3);border-radius:999px;font-size:14px;font-weight:600;text-decoration:none;color:inherit;background:#fff}
.subtabs a b{margin-left:4px;opacity:.6;font-weight:600}
.subtabs a[aria-current=page]{background:#0f1419;color:#fff;border-color:#0f1419}
.subtabs a[aria-current=page] b{opacity:.8}
.conn .rb{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:flex-end}

/* Network page: shortcut buttons and the search line */
.netcard{margin:0 0 16px}
.intents{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px}
.nb{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;margin-left:4px;border-radius:999px;background:#fff;color:#c2410c;font-size:12px}
.netsearch{display:flex;gap:8px}.netsearch input[name=q]{flex:1 1 auto;min-width:0}

/* the sixth card on the home page: a business that is not listed yet */
.ep.t-add{--tone:#BE185D;--edge:#9D174D;--tint:#FCE7F3}

/* Plans and limits card */
.lm .subtabs{margin-bottom:12px}
.lm-w{overflow-x:auto}
.lm-t{border-collapse:collapse;width:100%;min-width:560px;font-size:14px}
.lm-t th,.lm-t td{padding:9px 10px;text-align:left;border-bottom:1px solid var(--line,#e2ddd3);vertical-align:top}
.lm-t thead th{font-size:13px;font-weight:700;white-space:nowrap}
.lm-t tbody th{font-weight:500;width:42%}
.lm-t td{white-space:nowrap}
.lm-t .you{background:#fff4ec}
.lm-t th.you small{display:block;font-weight:600;color:#c2410c;font-size:11px}
.lm-y{color:#0f766e;font-weight:700}.lm-n{color:#9a948a}

/* the Near row: the second row of the search card, same fields and buttons as the first */
.sbar .nearbar{flex:1 1 100%;display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px;border-top:1px solid var(--line);padding-top:12px;margin-top:2px}
.sbar .nearbar label.grow{flex:1 1 240px}
.sbar .nearbar select{min-width:150px}
.sbar .nearbar .btn{align-self:flex-end}
.sbar .nearbar .nearnote{flex:1 1 100%;font-size:13px}
.sbar .nearbar .nearnote:empty{display:none}
.jf [hidden],.gate-modal [hidden]{display:none!important}

.t-add a[data-missing]{color:inherit;font-weight:600;text-decoration:underline}

/* greyed-out key facts: a bar where the value would be (the value itself is never in the page) */
.mask{display:inline-block;vertical-align:middle;width:min(240px,70%);height:.9em;border-radius:6px;background:linear-gradient(90deg,#d9d6cf,#e8e5de,#d9d6cf);opacity:.8}
.mask.sm{width:110px;height:.8em}
.chip .mask{width:90px;height:.7em}
.prof.locked .src .mask{width:70px;margin-right:6px}
.lockedcard{position:relative}
.lockedcard form{filter:grayscale(1);opacity:.4;pointer-events:none;user-select:none}
.lockedcard .lockmsg{position:absolute;inset:48px 12px auto 12px;z-index:2;background:var(--panel,#fff);border:1px solid var(--line,#ddd);border-radius:12px;padding:14px;box-shadow:0 10px 28px #0002}
.lockedcard .lockmsg p{margin:0 0 8px}
.limitnote{background:#fff4e5;border:1px solid #f0c98a;border-radius:10px;padding:10px 12px;margin:0 0 10px}

/* the review card: an app-icon tile, a QR code in a white rounded tile, one button */
.reviewcard{margin:14px 0;padding:18px;border:1px solid var(--line,#e2ded5);border-radius:22px;background:linear-gradient(180deg,#fff,#faf8f4);box-shadow:0 8px 24px #0f141914}
.rc-head{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.rc-icon{width:52px;height:52px;border-radius:23%;background:#0F1419;display:grid;place-items:center;box-shadow:0 3px 10px #0f141940,inset 0 1px 0 #ffffff30;flex:0 0 52px}
.rc-icon img{display:block;border-radius:8px}
.rc-head h2{margin:0;font-size:19px;line-height:1.2}.rc-biz{margin:2px 0 0;color:var(--muted,#6b665c);font-size:14px}
.rc-body{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.rc-qr{width:156px;flex:0 0 156px;padding:10px;background:#fff;border:1px solid #e6e2d9;border-radius:18px;box-shadow:0 2px 8px #0f14190d}
.rc-qr svg{width:100%;height:auto;display:block}
.rc-side{flex:1 1 200px}.rc-side p{margin:0 0 10px}
.rc-fine{margin:12px 0 0;font-size:13px;color:var(--muted,#6b665c)}

/* the buy and sell board */
.sg-card{list-style:none}
.seg{display:inline-flex;gap:0;border:1px solid var(--line,#ddd);border-radius:999px;overflow:hidden;margin-left:8px;vertical-align:middle}
.seg button{border:0;background:#fff;padding:9px 16px;font:inherit;cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--ink,#0F1419);color:#fff}
#board .res,#results .res{padding:0;margin:0}
#mine h2{margin:0 0 6px;font-size:22px}#mine h3{margin:14px 0 6px;font-size:16px}

.setupbar{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:0;padding:9px max(16px,calc((100% - 1152px)/2));background:#fff4e5;border-bottom:1px solid #f0c98a;font-size:14px;color:#3a2a0a}
.setupbar a{font-weight:600;color:#7a3f00;text-decoration:underline}.setupbar button{margin-left:auto;border:0;background:none;font-size:20px;line-height:1;cursor:pointer;color:#7a3f00}

/* My interests */
.gh{font-size:13px;color:var(--muted,#6b665c);font-weight:500;margin:18px 0 6px;letter-spacing:.02em}
.goal{display:flex;flex-direction:row;gap:10px;align-items:flex-start;padding:11px 13px;border:1px solid var(--line,#e2ded5);border-radius:12px;margin-bottom:7px;background:#fff;cursor:pointer}
.goal.on{border-color:#2f6fdb;background:#eef4ff}.goal input{margin-top:4px;width:17px;height:17px;flex:0 0 17px}
.goal b{display:block;font-weight:600}.goal small{display:block;color:var(--muted,#6b665c);margin:2px 0 4px}.goal .chip{margin:3px 6px 0 0;text-decoration:none}
.msel{min-height:150px}

.ep.t-customer{--tone:#0369A1;--tint:#E0F2FE;--edge:#075985}
.hsign{display:inline-flex;align-items:center;height:44px;padding:0 14px;margin-right:8px;border:1px solid #ffffff55;border-radius:12px;color:#fff;font-weight:600;font-size:14px;text-decoration:none}
.hsign:hover{background:#ffffff1a}
nav a.signin-link{border-bottom:1px solid #ffffff22;margin-bottom:4px}

/* Landing cards: short actions, business-type tags, uneven columns, button at the foot */
.eps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:start;gap:16px}
.mcol{display:flex;flex-direction:column;gap:16px;min-width:0}
.eps .ep{padding:16px 18px;gap:8px;flex:none;transition:background .2s,box-shadow .2s}
.eps .ep,.eps .ep:hover{transform:none}
.eps .ep *{transition:none}
.eps .ep:hover{box-shadow:0 10px 26px #0f141926}
.eps .ep h2{font-size:20px;line-height:1.15;letter-spacing:-.01em;text-shadow:0 1px 0 var(--panel),0 2px 0 rgba(0,0,0,.10),0 4px 6px rgba(0,0,0,.16)}
.eps .ep .role{font-weight:700;text-shadow:0 1px 0 var(--panel),0 2px 3px rgba(0,0,0,.14)}
.eps .ep .blurb{font-size:13.5px;line-height:1.4}
.eps .ep .ico{width:38px;height:38px;border-radius:10px;background:var(--tint);color:var(--tone)}
.eps .ep .ico svg{width:21px;height:21px}
.ep.t-customer{--tone:#0369A1;--tint:#E0F2FE;--edge:#075985}
.ep.t-supplier{--tone:#BE123C;--tint:#FFE4EA;--edge:#9F1239}
@media (prefers-color-scheme:dark) and (min-width:100000px){.ep.t-customer{--tone:#7CC4EE;--tint:#0F2A3B}.ep.t-supplier{--tone:#FF8FA8;--tint:#3A1420}}
.mchips{display:flex;flex-wrap:wrap;gap:4px;margin:0}
.mchips em{font-style:normal;font-size:11px;padding:2px 7px;border-radius:99px;background:var(--tint);color:var(--edge,var(--ink2))}
.macts{display:flex;flex-direction:column;gap:1px;margin-top:2px}
.macts a{display:flex;align-items:center;gap:9px;font-size:13.5px;font-weight:600;padding:4px 6px;border-radius:9px;color:var(--ink);text-decoration:none;text-shadow:0 1px 0 var(--panel),0 2px 2px rgba(0,0,0,.10)}
.macts a i{width:7px;height:7px;border-radius:50%;background:var(--edge,var(--tone));flex:0 0 7px;opacity:.8}
.mnote{margin:6px 0 4px;font-size:11.5px;color:var(--muted,var(--ink2))}
.mgo{width:100%;text-align:center;margin-top:6px;padding:10px 14px}
/* the card turns to its own colour with white text only where there is a real mouse; on a phone a tap would leave it half-lit and unreadable */
@media (hover:hover) and (pointer:fine){
.eps .ep:hover h2,.eps .ep:hover .role,.eps .ep:hover .blurb,.eps .ep:hover .macts a,.eps .ep:hover .mnote,.eps .ep:hover .mchips em{color:#fff;text-shadow:0 1px 0 rgba(0,0,0,.28),0 3px 5px rgba(0,0,0,.28)}
.eps .ep:hover .macts a i{background:#fff;opacity:1}
.eps .ep:hover .mchips em{background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.45)}
.eps .ep:hover .ico{background:#fff;color:var(--edge,var(--tone))}
.eps .ep:hover .ico svg{filter:none}
.eps .ep:hover .mgo{background:rgba(0,0,0,.3);color:#fff;border-color:rgba(255,255,255,.55);text-shadow:0 1px 1px rgba(0,0,0,.35)}
}  /* end: pointer devices only */
@media (max-width:900px){.eps{grid-template-columns:1fr}}
@media (max-width:560px){.hsign .hmore{display:none}}
.hsign .hmore{margin-left:.3em}
/* Tab strip of a grouped page (the pages of one menu item) */
.substrip{max-width:1192px;margin:0 auto;padding:14px 20px 0}
.substrip-in{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.substrip b{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink2);margin-right:6px}
.substrip a{font-size:14px;font-weight:600;padding:7px 13px;border:1px solid var(--line);border-radius:99px;background:var(--panel);color:var(--ink);text-decoration:none}
.substrip a:hover{border-color:var(--signal)}
.substrip a[aria-current=page]{background:var(--ink);color:var(--panel);border-color:var(--ink)}
@media (max-width:560px){.substrip{padding:12px 16px 0}}
/* Business-type picker (post what I want to buy) */
.tp{border:1px solid var(--line);border-radius:12px;padding:10px 12px}
.tp legend{font-size:13px;color:var(--ink2);padding:0 6px}
.tpq{width:100%;margin-bottom:8px}
.tplist{max-height:200px;overflow:auto;display:grid;grid-template-columns:1fr 1fr;gap:2px 14px}
.tplist label.cb{flex-direction:row;align-items:center;gap:8px;font-size:14px;padding:3px 2px}
.tplist label[hidden]{display:none}
.tpn{margin:8px 0 0;font-size:13px}
@media (max-width:560px){.tplist{grid-template-columns:1fr}}
/* The post-a-listing window: wider, four columns, so it fits one screen without scrolling */
.gate-card.xwide{width:min(1020px,100%)}
.gate-card.xwide .jf-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px 12px}
.gate-card.xwide .jf-grid .s2{grid-column:span 2}
.gate-card.xwide fieldset .row label.cb{padding:5px 10px;font-size:13px}
.gate-card.xwide .tplist{max-height:150px;grid-template-columns:repeat(3,1fr)}
@media (max-width:760px){.gate-card.xwide .jf-grid{grid-template-columns:1fr 1fr}.gate-card.xwide .jf-grid .s2{grid-column:1/-1}.gate-card.xwide .tplist{grid-template-columns:1fr}}

.gate-card.xwide fieldset .row{display:flex;flex-wrap:wrap;gap:6px 8px}.gate-card.xwide fieldset .row label.cb{flex:0 0 auto;width:auto;align-items:center}

/* readable helper text and links on the dark audience hero */
.aud-hero .muted{color:#D5D2CA;font-size:15px;margin:14px 0 0}
.aud-hero .muted a{color:#FF8A5C;font-weight:600;text-decoration:underline;text-underline-offset:2px}
.aud-hero .muted a:hover{color:#fff}

/* pick-a-job window: the Answer button sits on the same line as the job */
#jf-jobs .res li{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:12px}
#jf-jobs .res li .rt{flex:1 1 auto;min-width:0}
#jf-jobs .res li .rb{flex:0 0 auto;width:auto;margin:0}
#jf-jobs .res li .rb .btn{width:auto}

/* check-box lists in the step windows: several columns, sized to the content */
.chkgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:6px 10px}
.chkgrid .chk{display:flex;flex-direction:row;align-items:center;gap:8px;margin:0;padding:6px 10px;border:1px solid var(--line);border-radius:8px;font-size:14px;font-weight:500;cursor:pointer}
.chkgrid .chk input{width:auto;margin:0;flex:0 0 auto}
.chkgrid .chk:has(input:checked){border-color:var(--tone,#FF5A1F);background:var(--sand)}
.gate-card.wide{max-height:calc(100vh - 32px);overflow:auto}
.gate-card.xwide .jf-grid .span2{grid-column:1/-1}
.gate-card.xwide{max-height:calc(100vh - 32px);overflow:auto}
.gate-card .jf-grid .btns.span2{position:sticky;bottom:0;background:var(--panel);padding:10px 0 2px;margin-top:4px}

.whoami{border:0;padding:0;margin:10px 0 0}.whoami legend{font-weight:700;font-size:14px;padding:0}

/* sign-in window: choices in two columns and the explanation folded, so it fits without scrolling */
.gate details.why{margin:8px 0}.gate details.why summary{cursor:pointer}.gate details.why:not([open]) ul{display:none}
.whoami .chkgrid{grid-template-columns:1fr 1fr;gap:6px}.whoami .chk{padding:6px 8px;font-size:13px}
.whoami p.muted{font-size:12px}
.gate details.why{padding:6px 12px}.gate details.why summary b{display:inline;margin:0}
.gate label.remember{padding:6px 10px;font-size:12px;gap:8px}.gate label.remember input{width:18px;height:18px}
.gate:has(.whoami){gap:8px}.gate:has(.whoami) form{gap:8px}.gate:has(.whoami) label{margin:0}

/* sign-in window, tighter: arrow and label on one line, shorter fields, no repeated intro */
.gate:has(.whoami) details.why summary{display:flex;align-items:center;gap:8px;list-style:none;cursor:pointer}
.gate:has(.whoami) details.why summary::-webkit-details-marker{display:none}
.gate:has(.whoami) details.why summary::before{content:"▸";font-size:14px;line-height:1}
.gate:has(.whoami) details.why[open] summary::before{content:"▾"}
.gate:has(.whoami) details.why summary b{display:inline;margin:0}
.gate:has(.whoami) details.why{padding:8px 12px}
.gate:has(.whoami) > p.muted{display:none}
.gate:has(.whoami) input:not([type=checkbox]){padding-top:8px;padding-bottom:8px;min-height:0}
.whoami summary{cursor:pointer;font-weight:700;font-size:14px;margin-top:10px}
/* the sign-in box inside the locked card must stay usable: only the inquiry form behind it is greyed out */
.lockedcard .lockmsg form{filter:none;opacity:1;pointer-events:auto;user-select:auto}

/* tap pieces: big tiles and pills for any "tap instead of type" screen (ask for help) */
.tapgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:8px}
.taptile{display:flex;flex-direction:column;align-items:flex-start;gap:4px;text-align:left;padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--panel);cursor:pointer;font-size:14px;font-weight:600;color:var(--ink)}
.taptile:hover,.taptile:focus-visible{border-color:var(--ink3);transform:translateY(-1px)}
.taptile i{font-size:20px;color:var(--tone,var(--signal,#FF5B23))}.taptile small{font-weight:400;font-size:12px}
.tappills{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0}
.tappills button{padding:7px 12px;border:1px solid var(--line);border-radius:999px;background:var(--panel);font-size:13px;font-weight:600;color:var(--ink2);cursor:pointer}
.tappills button[aria-pressed="true"]{background:var(--ink);color:var(--panel);border-color:var(--ink)}
.tapnote{margin:8px 0 0;font-size:13px}

/* ask for help: subjects as tabs down the side, their problems in the panel */
.helpcols{display:grid;grid-template-columns:200px 1fr;gap:14px;align-items:start}
.helptabs{display:flex;flex-direction:column;gap:4px;border-right:1px solid var(--line);padding-right:10px}
.helptabs button{display:flex;align-items:center;gap:8px;text-align:left;padding:9px 10px;border:0;border-radius:10px;background:transparent;font-size:14px;font-weight:600;color:var(--ink2);cursor:pointer}
.helptabs button i{font-size:18px}
.helptabs button:hover{background:var(--line)}
.helptabs button[aria-selected="true"]{background:var(--ink);color:var(--panel)}
.helphead{margin:0 0 8px;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink3)}
@media(max-width:640px){.helpcols{grid-template-columns:1fr}.helptabs{flex-direction:row;overflow-x:auto;border-right:0;border-bottom:1px solid var(--line);padding:0 0 8px}.helptabs button{white-space:nowrap}}
.helppanel .jf-h{font-size:17px;margin:0 0 6px}

/* the ask's brief: the same small card for every ask */
.briefcard{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;margin:10px 0}
.briefcard div{border:1px solid var(--line);border-radius:10px;padding:8px 10px;background:var(--panel)}
.briefcard dt{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink3)}
.briefcard dd{margin:2px 0 0;font-size:14px;font-weight:600}
.askstory{margin:6px 0 10px;padding:10px 12px;border-left:3px solid var(--signal,#FF5B23);background:var(--panel);border-radius:0 10px 10px 0;font-size:14px;line-height:1.5;color:var(--ink)}

/* cross references at the bottom of an ask */
#helprel{margin-top:22px;padding-top:6px;border-top:1px solid var(--line)}
.relh{font-size:15px;margin:14px 0 8px}
.relgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px}
.relcard{display:flex;flex-direction:column;gap:4px;padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--panel);color:var(--ink);text-decoration:none;font-size:13px}
.relcard:hover{border-color:var(--ink3);transform:translateY(-1px)}
.relcard b{font-size:14px;line-height:1.3}
.relkind{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--signal,#FF5B23)}
.relbrief{display:flex;flex-wrap:wrap;gap:4px}.relbrief i{font-style:normal;font-size:12px;padding:2px 8px;border-radius:999px;background:var(--line)}

/* "I know someone": search, add a name, and the suggestion cards */
.kfind{display:block;margin:8px 0 4px}.kfind input,.kaddrow input{width:100%;padding:8px 10px;border:1px solid var(--line);border-radius:10px;font:inherit;background:var(--panel);color:var(--ink)}
.kadd{margin:8px 0}.kadd summary{cursor:pointer;font-size:13px;font-weight:600;color:var(--ink2)}.kaddrow{display:flex;gap:6px;margin-top:6px}.kaddrow input{flex:1}
.kx{border:0;background:transparent;cursor:pointer;font-size:15px;line-height:1;padding:0 0 0 4px;color:var(--ink2)}
.sugcard a{color:var(--ink);text-decoration:none}.sugcard a:hover b{text-decoration:underline}.sugcard .btn{align-self:flex-start;margin-top:4px}
#helpsug{margin-top:22px;padding-top:6px;border-top:1px solid var(--line)}

/* the asks board */
#askboard{width:100%;padding-bottom:40px}
.boardtop{display:flex;gap:14px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin:10px 0 14px}
.stats3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;flex:1;min-width:260px}
.stats3 div{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:8px 12px}.stats3 b{display:block;font-size:22px;font-weight:600}.stats3 span{font-size:12px;color:var(--ink3)}
.boardbar{display:flex;gap:10px;flex-wrap:wrap;align-items:end;margin:10px 0 4px}.boardbar label{display:flex;flex-direction:column;gap:3px;font-size:12px;color:var(--ink3)}.boardbar .grow{flex:1;min-width:180px}
.boardbar select,.boardbar input{padding:8px 10px;border:1px solid var(--line);border-radius:10px;font:inherit;font-size:14px;background:var(--panel);color:var(--ink)}
.boardcard .who{display:flex;align-items:center;gap:8px}.boardcard .who b{font-size:14px}
.boardcard .av{width:30px;height:30px;border-radius:50%;background:var(--sand,#eee);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:var(--ink);flex:none}.boardcard .av.g{color:var(--ink3)}
.boardcard.mine{border:2px solid var(--signal,#FF5B23)}
.aud.t-asks{--tone:#1B7F8C;--edge:#145E69;--tint:#DDF1F4}
.ep.t-asks{--tone:#1B7F8C;--tint:#DDF1F4;--edge:#145E69}
@media (prefers-color-scheme:dark) and (min-width:100000px){.ep.t-asks{--tone:#6CD0DC;--tint:#10303A}}

/* info cards that fill the short columns on the landing page */
.ep.t-info{--tone:var(--ink2);--tint:var(--sand);--edge:var(--ink2)}
.infol{margin:0;padding:0;list-style:none;counter-reset:i;display:flex;flex-direction:column;gap:8px;font-size:13.5px;line-height:1.4;color:var(--ink2)}
.infol li{counter-increment:i;position:relative;padding-left:26px}.infol li:before{content:counter(i);position:absolute;left:0;top:1px;width:18px;height:18px;border-radius:50%;background:var(--tint);color:var(--ink);font-size:11px;font-weight:700;display:grid;place-items:center}
.infol b{color:var(--ink);font-weight:600}
.faq{display:flex;flex-direction:column;gap:2px}.faq details{border-top:1px solid var(--line);padding:6px 0}.faq details:first-child{border-top:0}
.faq summary{cursor:pointer;font-size:13.5px;font-weight:600;color:var(--ink);list-style:none;display:flex;justify-content:space-between;gap:8px}.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"+";color:var(--ink3);font-weight:400}.faq details[open] summary:after{content:"\2212"}
.faq p{margin:6px 0 2px;font-size:13px;line-height:1.45;color:var(--ink2)}
/* info cards are not links, so they do not flood with colour on hover: the text stays dark on the light card */
.eps .ep.t-info:hover::before,.eps .ep.t-info:focus-within::before{opacity:0}
.eps .ep.t-info:hover,.eps .ep.t-info:focus-within{border-color:var(--line);box-shadow:0 10px 26px #0f141914}
.eps .ep.t-info:hover .role,.eps .ep.t-info:hover h2,.eps .ep.t-info:focus-within .role,.eps .ep.t-info:focus-within h2{color:var(--ink);text-shadow:0 1px 0 var(--panel),0 2px 3px rgba(0,0,0,.10)}
.eps .ep.t-info:hover .ico,.eps .ep.t-info:focus-within .ico{background:var(--tint);color:var(--tone);box-shadow:none}
.eps .ep.t-info:hover .mgo,.eps .ep.t-info:focus-within .mgo{background:var(--ink);color:var(--bg);border-color:var(--ink);text-shadow:none}
.ep.t-scale{--tone:#4338CA;--tint:#E0E7FF;--edge:#3730A3}
@media (prefers-color-scheme:dark) and (min-width:100000px){.ep.t-scale{--tone:#A5B4FC;--tint:#1E1B4B}}

/* banners at the top of the dashboards (see banners.js) */
.appbanners{display:flex;flex-direction:column;gap:10px;margin:0 0 14px}
.appbanner{position:relative;display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:12px 40px 12px 14px;border:1px solid var(--line);border-left:4px solid var(--tone,var(--signal));border-radius:12px;background:var(--panel)}
.appbanner .ab-ico{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;background:var(--tint,var(--sand));color:var(--tone,var(--signal));flex:none}
.appbanner .ab-ico svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.appbanner .ab-t{flex:1;min-width:220px;display:flex;flex-direction:column;gap:2px}.appbanner .ab-t b{font-size:15px}.appbanner .ab-t span{font-size:13px;color:var(--ink2)}
.ab-x{position:absolute;top:6px;right:8px;width:28px;height:28px;border:0;border-radius:8px;background:transparent;color:var(--ink3);font-size:20px;line-height:1;cursor:pointer}.ab-x:hover{background:var(--sand);color:var(--ink)}
.appbanner.t-scale{--tone:#4338CA;--tint:#E0E7FF}
@media (prefers-color-scheme:dark) and (min-width:100000px){.appbanner.t-scale{--tone:#A5B4FC;--tint:#1E1B4B}}

/* dark mode: cards and pills that were drawn white now follow the theme, so their text stays readable */
@media (prefers-color-scheme:dark) and (min-width:100000px){
  .feat{background:linear-gradient(180deg,#1b232c,#141a21);border-color:rgba(255,255,255,.08);box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 1px 2px rgba(0,0,0,.4),0 18px 28px -18px rgba(0,0,0,.7)}
  .subtabs a,.seg button,.goal{background:var(--panel);color:var(--ink)}
  .nb{background:var(--panel);color:var(--signal)}
  .reviewcard{background:linear-gradient(180deg,#1b232c,#141a21);box-shadow:0 8px 24px rgba(0,0,0,.45)}
  .limitnote,.setupbar{background:var(--warn-soft);border-color:rgba(245,181,71,.35);color:var(--ink)}
  .lm-t .you{background:var(--signal-soft)}
  .subtabs a[aria-current=page],.seg button[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
  .lm-t th.you small{color:var(--signal)}
  .goal.on{background:var(--signal-soft);border-color:var(--signal)}
}

/* Plans and limits: a white page around the card; on a phone each plan becomes its own card of "what you get: value" rows instead of a wide table to scroll */
.lm-cards{display:none}
body.plans-pg{background:#fff}
body.plans-pg .lm.card{border-color:var(--line);box-shadow:0 1px 2px rgba(15,20,25,.05)}
@media (max-width:720px){
  .lm-w{display:none}
  .lm-cards{display:grid;gap:12px}
  .lm-plan{border:1px solid var(--line);border-radius:14px;overflow:hidden}
  .lm-plan h4{margin:0;padding:12px 14px;font-size:16px;background:var(--sand);display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
  .lm-plan.you{border-color:var(--signal);box-shadow:0 0 0 1px var(--signal)}
  .lm-plan.you h4{background:var(--signal-soft)}
  .lm-plan h4 small{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--signal);background:var(--panel);border-radius:999px;padding:2px 9px}
  .lm-r{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:12px;align-items:start;padding:10px 14px;border-top:1px solid var(--line);font-size:14.5px}
  .lm-r span{color:var(--ink2)}
  .lm-r b{font-weight:600;text-align:right}
  body.plans-pg .lm.card{padding:14px}
}
@media (prefers-color-scheme:dark) and (min-width:100000px){body.plans-pg{background:var(--bg)}body.plans-pg .lm.card{box-shadow:none}}

/* phones: links that were only 16 to 28px tall get a comfortable tap area (about 40px) without changing how they look on a computer */
@media (max-width:720px){
  .gf-cols a{display:block;padding:10px 0}
  .macts a{min-height:40px;box-sizing:border-box;align-items:center}
  a.rn{padding:10px 0;display:inline-flex;align-items:center}
  .pt .brand{min-height:40px;display:inline-flex;align-items:center}
  .crumbs a{display:inline-block;padding:11px 2px}
  a.chip{padding-top:9px;padding-bottom:9px}
}

/* phones: tables turn into one card per row (labels come from gate.js) */
@media (max-width:720px){
  table.stack{min-width:0!important;width:100%;display:block}
  table.stack thead{display:none}
  table.stack tbody,table.stack tr{display:block}
  table.stack tr{border:1px solid var(--line);border-radius:12px;padding:6px 12px;margin:0 0 10px;background:var(--panel)}
  table.stack td,table.stack tbody th{display:flex;justify-content:space-between;align-items:baseline;gap:12px;border:0;padding:6px 0;text-align:right;white-space:normal;width:auto}
  table.stack td[data-label]::before{content:attr(data-label);color:var(--ink3);font-weight:600;font-size:12.5px;text-align:left;flex:none;max-width:45%}
}

/* the website link in the footer's last line looks like the text around it, underlined */
.gf-fine a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.gf-fine a:hover{color:#fff}

/* rows whose title is the link: a small arrow shows it can be tapped, and on a phone the chip goes under the details instead of in a column of its own */
li.rowlink a.rn::after,li.rowlink .t > a::after{content:" \203A";color:var(--ink3);font-weight:400}
li.rowlink a.rn,li.rowlink .t > a{text-decoration:none;color:var(--ink);font-weight:600}
li.rowlink a.rn:hover,li.rowlink .t > a:hover{text-decoration:underline}
@media (max-width:720px){
  .res li.rowlink{display:block}
  .res li.rowlink a.rn{display:inline-block;padding:6px 0}
  .res li.rowlink .rb{margin-top:6px;justify-content:flex-start}
}
li.rowlink{cursor:pointer;transition:background .15s}
li.rowlink:hover{background:var(--sand)}

/* "This ask / job is for [business]": shown only to owners with more than one business */
.forbiz{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-weight:600}
.forbiz select{font:inherit;font-weight:600;padding:7px 10px;border:1px solid var(--line);border-radius:10px;background:var(--panel);color:var(--ink);max-width:100%}
.forbiz-card{padding:12px 16px}

/* the animated "how it works" in an audience page's header (howdemo.js) */
.aud-hero .hero-in.has-demo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.95fr);gap:36px;align-items:stretch}
.hcopy{min-width:0}
.hdemo{min-width:0}
.hd-stage{position:relative;padding:0 0 4px}
.hd-win{background:var(--bg);color:var(--ink);border-radius:16px;padding:16px 16px 10px;box-sizing:border-box;transition:opacity .18s ease,transform .18s ease}
.hd-win.out{opacity:0;transform:translateY(8px)}
.hd-top{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:12px;color:var(--ink3);margin:0 0 10px}
.hd-top span:last-child{background:var(--signal-soft);color:#993C1D;border-radius:999px;padding:2px 9px;font-size:11px;font-weight:600}
.hd-win h4{margin:0;font-size:17px;color:var(--ink)}
.hd-line{margin:2px 0 10px;font-size:13px;color:var(--ink2)}
.hd-row{display:flex;justify-content:space-between;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin:0 0 8px;font-size:13.5px;color:var(--ink);opacity:0;transform:translateY(6px);animation:hdin .35s ease forwards}
.hd-row em{font-style:normal;font-size:12.5px;color:var(--ok);text-align:right}
.hd-row.hl{border-color:var(--signal)}
.hd-row.act{background:var(--signal);border-color:var(--signal);color:#fff;justify-content:center;font-weight:600}
@keyframes hdin{to{opacity:1;transform:none}}
.hd-tag{position:absolute;display:inline-flex;align-items:center;gap:7px;background:#fff;border:1px solid var(--line);color:#0F5F52;border-radius:999px;padding:6px 12px;font-size:12.5px;font-weight:600;opacity:0;pointer-events:none;white-space:nowrap}
.hd-tag.t1{left:-14px;top:-4px}
.hd-tag.t2{right:-8px;bottom:18%}
.hd-tag.go{animation:hdfloat 2.8s ease-in-out forwards}
.hd-tag.t2.go{animation-delay:.6s}
@keyframes hdfloat{0%{opacity:0;transform:translateY(12px)}16%{opacity:1;transform:none}80%{opacity:1;transform:translateY(-6px)}100%{opacity:0;transform:translateY(-14px)}}
.hd-ck{width:12px;height:7px;border-left:2px solid var(--ok);border-bottom:2px solid var(--ok);transform:rotate(-45deg) translateY(-1px)}
.hd-steps{display:flex;gap:6px;margin:12px 0 0;flex-wrap:wrap}
.hd-steps button{display:inline-flex;align-items:center;gap:6px;background:transparent;border:1px solid rgba(255,255,255,.22);color:#C9C6BE;border-radius:999px;padding:5px 10px 5px 5px;font:inherit;font-size:12.5px;cursor:pointer;white-space:nowrap}
.hd-steps button b{width:22px;height:22px;border-radius:50%;background:rgba(255,255,255,.14);color:#F7F5F0;display:inline-grid;place-items:center;font-size:12px;font-weight:600}
.hd-steps button[aria-current="true"]{border-color:var(--signal);color:#fff}
.hd-steps button[aria-current="true"] b{background:var(--signal)}
.hd-steps .hd-play{padding:6px 10px;margin-left:auto}
.hd-pp{width:10px;height:12px;border-left:3px solid #F7F5F0;border-right:3px solid #F7F5F0}
.hd-play.paused .hd-pp{width:0;height:0;border-left:10px solid #F7F5F0;border-right:0;border-top:6px solid transparent;border-bottom:6px solid transparent}
.hd-bar{height:3px;background:rgba(255,255,255,.18);border-radius:2px;margin-top:10px;overflow:hidden}
.hd-bar i{display:block;height:100%;width:0;background:var(--signal)}
@media (max-width:860px){
  .aud-hero .hero-in.has-demo{grid-template-columns:minmax(0,1fr);gap:22px}
  .hd-steps button[data-i] span{display:none}
  .hd-steps button{padding:5px}
  .hd-tag.t1{left:-6px}.hd-tag.t2{right:-4px}
}
@media (prefers-reduced-motion:reduce){.hd-row,.hd-win{animation:none;transition:none;opacity:1;transform:none}.hd-tag.go{animation:none;opacity:1}}

/* the hero's own search: a name, a state and Search; it opens the search window with the results */
.hero-find{margin:18px 0 0;max-width:560px}
.hs-h{margin:0 0 8px;font-size:13px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:#C9C6BE}
.hs-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,150px) auto;gap:10px;align-items:end}
.hero-find label{display:flex;flex-direction:column;gap:4px;font-size:12.5px;font-weight:600;color:#C9C6BE;margin:0}
.hero-find input,.hero-find select{height:44px;border-radius:10px;border:1px solid transparent;background:#fff;color:var(--ink);padding:0 12px;font:inherit;font-size:15px;width:100%;box-sizing:border-box}
.hero-find .btn{height:44px}
@media (max-width:860px){.hs-row{grid-template-columns:minmax(0,1fr) minmax(0,120px)}.hs-row .btn{grid-column:1 / -1}}

/* both sides of the header end at the same line: the headline and text sit at the top, the search sits at the bottom, level with the demo's progress bar */
@media (min-width:861px){
  .aud-hero .hero-in.has-demo .hcopy{display:flex;flex-direction:column}
  .aud-hero .hero-in.has-demo .hbot{margin-top:auto;padding-top:18px}
  .aud-hero .hero-in.has-demo .hdemo{display:flex;flex-direction:column}
  .hdemo .hd-stage{flex:1 1 auto;display:flex;flex-direction:column}
  .hdemo .hd-win{flex:1 1 auto}
}
@media (min-width:861px) and (max-width:1010px){
  .hd-steps button[data-i] span{display:none}
  .hd-steps button{padding:5px}
}

/* what the page is for, said plainly at the top of the header: a role line above the headline and three things you can do here */
.hero-role{display:inline-block;margin:0 0 12px;padding:4px 12px;border-radius:999px;background:rgba(255,255,255,.12);color:#F7F5F0;font-size:12.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.hero-chips{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.hero-chips li{display:inline-flex;align-items:center;gap:7px;padding:5px 12px;border:1px solid rgba(255,255,255,.22);border-radius:999px;color:#E8E5DD;font-size:13px}
.hero-chips li::before{content:"";width:9px;height:5px;border-left:2px solid var(--signal);border-bottom:2px solid var(--signal);transform:rotate(-45deg) translateY(-1px)}
.hbot .btns{margin-top:0}

.hero-role{align-self:flex-start}
.hd-win{display:flex;flex-direction:column}
.hd-rows{flex:1 1 auto;display:flex;flex-direction:column;justify-content:center}
.hd-rows .hd-row:last-child{margin-bottom:6px}

.hs-more{margin-top:12px}
.hbot .hero-find + .hs-more{margin-top:14px}
.hs-more .btn{min-height:40px;padding:0 16px;font-size:14px}

.howsteps[hidden]{display:none!important}

/* ---------------------------------------------------------------------------------------------------------------------------------
   One colour per audience, the same everywhere: the menu icon, the home card, the page header, the floating demo and its buttons, the inner pages.
   tone = the solid colour, edge = its dark edge, tint = the light background, lite = the same colour made light enough for the dark header
   owners orange · customers sky blue · lenders emerald · suppliers crimson · service providers purple · job seekers amber · ask board cyan
   --------------------------------------------------------------------------------------------------------------------------------- */
.aud{--lite:#FF8A5C}
.aud.t-customer,.ep.t-customer,.ac.t-customer{--tone:#0369A1;--edge:#075985;--tint:#E0F2FE;--lite:#38BDF8}
.aud.t-lender,.ep.t-lender,.ac.t-lender{--tone:#047857;--edge:#065F46;--tint:#D1FAE5;--lite:#34D399}
.aud.t-buyer,.ep.t-buyer,.ac.t-buyer,.aud.t-supplier,.ep.t-supplier{--tone:#BE123C;--edge:#9F1239;--tint:#FFE4EA;--lite:#FB7185}
.aud.t-partner,.ep.t-partner,.ac.t-partner{--tone:#7C3AED;--edge:#5B21B6;--tint:#EDE5FF;--lite:#A78BFA}
.aud.t-jobs,.ep.t-jobs,.ac.t-jobs{--tone:#9A5B00;--edge:#7A4700;--tint:#FFEFD0;--lite:#F5B547}
.aud.t-asks,.ep.t-asks{--tone:#1B7F8C;--edge:#145E69;--tint:#DDF1F4;--lite:#6CD0DC}
.pt nav a[href="/search/"]{--t:#0369A1;--e:#075985;--l:#7DD3FC}
.pt nav a[href="/lenders/"]{--t:#047857;--e:#065F46;--l:#34D399}
.pt nav a[href="/buyers/"]{--t:#BE123C;--e:#9F1239;--l:#FDA4AF}
.pt nav a[href="/asks/"]{--t:#1B7F8C;--e:#145E69;--l:#6CD0DC}

/* the header demo takes the page's colours: a light window in the page's tint, buttons and highlights in the page's colour */
.hd-win{background:var(--tint,var(--bg))}
.hd-top span:last-child{background:#fff;color:var(--edge,#993C1D)}
.hd-row em{color:var(--edge,var(--ok))}
.hd-row.hl{border-color:var(--tone,var(--signal))}
.hd-row.act{background:var(--tone,var(--signal));border-color:var(--tone,var(--signal));color:#fff}
.hd-steps button[aria-current="true"]{border-color:var(--lite,var(--signal))}
.hd-steps button[aria-current="true"] b{background:var(--lite,var(--signal));color:#0F1419}
.hd-bar i{background:var(--lite,var(--signal))}
.hd-tag{color:var(--edge,#0F5F52)}
.hd-ck{border-color:var(--edge,var(--ok))}
.hero-chips li::before{border-color:var(--lite,var(--signal))}

/* the second button in a header (My dashboard, My inquiries, Manage my listings, My asks...) takes the page's colour like the first one */
.hbot .hs-more .btn,.hbot .btns .btn.ghost{background:var(--tone,var(--signal));border-color:var(--tone,var(--signal));color:#fff}
.hbot .hs-more .btn:hover,.hbot .btns .btn.ghost:hover{background:var(--edge,var(--signal));border-color:var(--edge,var(--signal))}

/* Plans and limits: each audience's tab takes its colour, each plan is a column with a name and a price tag, the plan you are on stands out */
.lm[data-tab="everyone"]{--tone:#0F1419;--edge:#0F1419;--tint:#EFEBE2}
.lm[data-tab="owners"]{--tone:#FF5B23;--edge:#C2410C;--tint:#FFE6DB}
.lm[data-tab="providers"]{--tone:#7C3AED;--edge:#5B21B6;--tint:#EDE5FF}
.lm[data-tab="seekers"]{--tone:#9A5B00;--edge:#7A4700;--tint:#FFEFD0}
.lm .subtabs a[aria-current="page"]{background:var(--tone);border-color:var(--tone);color:#fff}
.lm-t{border-collapse:separate;border-spacing:0;table-layout:fixed;min-width:600px}
.lm-t thead th.lm-h{background:var(--tint);text-align:center;white-space:normal;padding:14px 10px 12px;border-bottom:3px solid var(--tone);border-radius:12px 12px 0 0;vertical-align:middle}
.lm-t thead th:first-child{background:none;border-bottom:3px solid transparent;width:40%}
.lm-nm{display:block;font-size:15px;font-weight:700;color:var(--ink)}
.lm-pr{display:inline-block;margin-top:5px;padding:2px 11px;border-radius:999px;background:var(--tone);color:#fff;font-size:12px;font-weight:600}
.lm-t th.lm-h small{display:block;margin-top:6px;color:var(--edge);font-size:11px;font-weight:700;letter-spacing:.03em;text-transform:uppercase}
.lm-t tbody th{font-weight:500;text-align:left}
.lm-t td{text-align:center;border-left:1px solid var(--line)}
.lm-t tbody tr:nth-child(even) th,.lm-t tbody tr:nth-child(even) td{background:rgba(15,20,25,.025)}
.lm-t td.you{background:var(--tint)!important;font-weight:600}
.lm-t td.you:last-child,.lm-t thead th.lm-h.you{box-shadow:none}
.lm-y{color:var(--tone,#0f766e);font-size:16px}
.lm-plan{border-top:4px solid var(--tone)}
.lm-plan.you{border-color:var(--tone);box-shadow:0 0 0 1px var(--tone)}
.lm-plan.you h4{background:var(--tint)}
.lm-plan h4{background:var(--tint);justify-content:flex-start;gap:10px}
.lm-plan h4 .lm-nm{font-size:16px}
.lm-plan h4 .lm-pr{margin:0 0 0 auto}
.lm-plan h4 small{flex-basis:100%;color:var(--edge);background:none;padding:0;border-radius:0}
.lm-plan .lm-r b .lm-y{font-size:17px}
.lm-r b .lm-y{color:var(--tone,#0f766e)}
.lm-r b .lm-n{color:#9a948a}

/* reviews on a business page: summary and one button under the name, the owner's description, the reviews, and the tap window */
.rvsum,.rvown,.rvlist{margin:0 0 14px}
.rvhead{display:flex;align-items:baseline;gap:10px}
.rvavg{font-size:26px;font-weight:600}
.rvtop{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.rvnote{margin:10px 0 0;font-size:13.5px}
.rvitem{padding:12px 0;border-top:1px solid var(--line)}
.rvitem:first-of-type{border-top:0}
.rvitem p{margin:4px 0}
.rvwho{font-size:14px}
.rvreply{margin:8px 0 0;padding:6px 10px;border-left:3px solid var(--line);font-size:13.5px;color:var(--ink2)}
.rvopts{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px}
.rvopts button{font:inherit;font-size:14px;padding:9px 14px;border-radius:10px;border:1px solid var(--line);background:var(--panel);color:var(--ink);cursor:pointer}
.rvopts button[aria-pressed="true"]{background:var(--signal-soft);border-color:var(--signal);color:#8A2C0B}
.rvprog{display:flex;gap:6px;margin:0 0 12px}
.rvprog i{flex:1;height:4px;border-radius:2px;background:var(--line)}
.rvprog i.on{background:var(--ink)}
.rvq{margin:8px 0 2px;font-weight:600;font-size:16px}
.rvh{margin:0 0 8px;font-size:13.5px}
.rvprev{border:1px dashed var(--line);border-radius:10px;padding:10px 12px;margin:0 0 12px;font-size:14.5px;line-height:1.55}
.rvprev small{display:block;color:var(--ink3);font-size:12px;margin-bottom:2px}
.rvbar{display:none}
/* the long Leave a review button at the bottom of phone screens is gone: the Reviews card already has it */
.rvbar{display:none!important}

/* the nearby card: no Near box or buttons; a line saying where, a small change link, an optional word, and distance chips. On a phone the optional word is hidden. */
.nearline{margin:0 0 8px}
.linkbtn{background:none;border:0;padding:0;font:inherit;color:var(--ink);text-decoration:underline;cursor:pointer}
.nearplace{display:flex;flex-direction:row;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 10px}
.nearplace input{flex:1 1 180px;min-width:0;height:42px}
.nearplace .btn{height:42px}
.nearbar{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:end}
.nearwhat{margin:0}
.nearmiles{display:flex;gap:6px}
.nearmiles button{font:inherit;font-size:14px;padding:9px 14px;border-radius:999px;border:1px solid var(--line);background:var(--panel);color:var(--ink);cursor:pointer;min-height:40px}
.nearmiles button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--bg)}
@media (max-width:720px){.nearwhat{display:none}.nearbar{grid-template-columns:minmax(0,1fr)}.nearmiles button{flex:1}}
.iconbtn{width:42px;height:42px;flex:none;display:inline-grid;place-items:center;border:1px solid var(--line);border-radius:10px;background:var(--panel);color:var(--ink);cursor:pointer;padding:0}
.iconbtn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.iconbtn:hover{background:var(--sand)}

/* ---------------------------------------------------------------------------------------------------------------------------------
   Business and provider pages, the pages most people see: raised boxes (a light top edge and layered shadows, like the cards on the home page),
   a lifted avatar, buttons that press down, and a rating card that leads. Only on pages with body.bizpage.
   --------------------------------------------------------------------------------------------------------------------------------- */
.bizpage .prof,.bizpage .card,.bizpage .inq{background:linear-gradient(180deg,#fff 0%,#fbf9f5 100%);border:1px solid rgba(15,20,25,.08);border-radius:20px;
  box-shadow:inset 0 1px 0 #fff,0 1px 2px rgba(15,20,25,.06),0 18px 28px -18px rgba(15,20,25,.3)}
.bizpage .prof .card,.bizpage .prof .reviewcard{border-radius:16px;box-shadow:inset 0 1px 0 #fff,0 1px 2px rgba(15,20,25,.07),0 12px 20px -14px rgba(15,20,25,.32)}
.bizpage .ph-img{background:linear-gradient(160deg,#2B333D 0%,#0F1419 72%);border-radius:18px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2),inset 0 -3px 5px rgba(0,0,0,.25),0 10px 16px -8px rgba(15,20,25,.55),0 3px 0 rgba(0,0,0,.28)}
.bizpage .prof h1{font-size:30px}
.bizpage .chip{box-shadow:inset 0 1px 0 rgba(255,255,255,.65),0 1px 2px rgba(15,20,25,.14)}
.bizpage .srcbox{border-radius:12px;box-shadow:inset 0 1px 0 #fff,0 1px 2px rgba(15,20,25,.08),0 6px 10px -8px rgba(15,20,25,.3)}
/* the rating card leads the page */
.bizpage .rvsum{background:linear-gradient(180deg,#fff 0%,#FFF3EC 100%);border-top:3px solid var(--signal)}
.bizpage .rvavg{font-size:36px;line-height:1;letter-spacing:-.02em}
.bizpage .rvhead{align-items:center;gap:12px;flex-wrap:wrap}
.bizpage .rvhead .stars{font-size:20px}
.bizpage .rvtop .chip{font-size:12.5px}
/* buttons press down */
.bizpage .btn{border-radius:12px;padding:10px 16px;border-color:rgba(15,20,25,.14);box-shadow:inset 0 1px 0 #fff,0 2px 0 rgba(15,20,25,.12),0 10px 14px -10px rgba(15,20,25,.4);transition:transform .12s ease,box-shadow .12s ease}
.bizpage .btn:hover{transform:translateY(-1px)}
.bizpage .btn:active{transform:translateY(2px);box-shadow:inset 0 1px 0 #fff,0 0 0 rgba(0,0,0,0)}
.bizpage .btn.pri{background:linear-gradient(180deg,color-mix(in srgb,var(--role,var(--signal)) 80%,#fff) 0%,var(--role,var(--signal)) 100%);border-color:color-mix(in srgb,var(--role,var(--signal)) 85%,#000);color:var(--on-role,#0F1419);box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 3px 0 color-mix(in srgb,var(--role,var(--signal)) 68%,#000),0 12px 18px -8px color-mix(in srgb,var(--role,var(--signal)) 55%,transparent)}
.bizpage .btn.pri:active{transform:translateY(3px);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 0 0 transparent}
.bizpage .btn.dark{background:linear-gradient(180deg,#2B333D 0%,#0F1419 100%);border-color:#0F1419;box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 3px 0 #000,0 12px 18px -8px rgba(15,20,25,.6)}
.bizpage .btn.sm{padding:8px 14px}
/* lists and tiles */
.bizpage .res{border-radius:16px;background:#fff;box-shadow:inset 0 1px 0 #fff,0 1px 2px rgba(15,20,25,.06),0 10px 16px -12px rgba(15,20,25,.3)}
.bizpage .res li{transition:background .15s}
.bizpage .nearmiles button{box-shadow:inset 0 1px 0 #fff,0 2px 0 rgba(15,20,25,.1);transition:transform .12s}
.bizpage .nearmiles button:active{transform:translateY(2px);box-shadow:none}
.bizpage .nearmiles button[aria-pressed="true"]{background:linear-gradient(180deg,#2B333D,#0F1419);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 2px 0 #000}
.bizpage input,.bizpage select,.bizpage textarea{box-shadow:inset 0 1px 2px rgba(15,20,25,.08);border-radius:10px}
.bizpage .iconbtn{border-radius:12px;box-shadow:inset 0 1px 0 #fff,0 2px 0 rgba(15,20,25,.12)}
.bizpage .rvitem{padding:14px 0}
.bizpage .rvreply{border-left-color:var(--signal)}
.bizpage .disc{border-radius:14px}
@media (max-width:760px){
  .bizpage .prof,.bizpage .card,.bizpage .inq{border-radius:18px;box-shadow:inset 0 1px 0 #fff,0 1px 2px rgba(15,20,25,.06),0 12px 20px -16px rgba(15,20,25,.3)}
  .bizpage .prof h1{font-size:26px}
  .bizpage .rvavg{font-size:32px}
}

/* weather and street view on a business page */
.wx{margin:14px 0;padding:14px 16px}
.wx h2{font-size:15px;margin:0 0 6px}
.wx-now{margin:0 0 8px;font-size:14px}.wx-now b{font-size:26px;margin-right:6px}.wx-now span{color:var(--ink3)}
.wx-days{list-style:none;margin:0;padding:0;display:grid;gap:4px;font-size:13.5px}
.wx-days li{display:grid;grid-template-columns:96px 74px minmax(0,1fr);gap:8px}
.wx-d{font-weight:600}.wx-s{color:var(--ink3);overflow-wrap:anywhere}
.wx .fine{margin:8px 0 0}
.svframe{display:block;width:100%;height:min(60vh,420px);border:0;border-radius:10px;background:#e8e5de}
@media(max-width:520px){.wx-days li{grid-template-columns:80px 64px minmax(0,1fr)}}

/* rating breakdown, desktop sticky bar, contact strip, and the locked-details card */
.rvdist{display:grid;gap:4px;margin:12px 0 4px;max-width:360px}
.rvd{display:grid;grid-template-columns:30px minmax(0,1fr) 26px;gap:8px;align-items:center;font-size:12.5px;color:var(--ink3)}
.rvd i{display:block;height:8px;border-radius:99px;background:rgba(15,20,25,.08);box-shadow:inset 0 1px 2px rgba(15,20,25,.12);overflow:hidden}
.rvd u{display:block;height:100%;border-radius:99px;background:linear-gradient(180deg,#FF7A47,#FF5B23);text-decoration:none}
.rvd span:last-child{text-align:right}
.rvtopbar{position:fixed;top:0;left:0;right:0;z-index:40;background:rgba(255,255,255,.96);backdrop-filter:blur(8px);border-bottom:1px solid rgba(15,20,25,.1);box-shadow:0 10px 24px -16px rgba(15,20,25,.4)}
.rvtopbar[hidden]{display:none}
.rvtb-in{max-width:1120px;margin:0 auto;padding:8px 20px;display:flex;align-items:center;gap:12px}
.rvtb-in b{font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.rvtb-in .stars{color:#FF5B23}
.rvtb-sp{flex:1}
@media (max-width:860px){.rvtopbar{display:none!important}}
.cstrip{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:10px}
.bizpage .btn.cs{display:flex;align-items:center;justify-content:center;gap:8px;min-height:46px;font-weight:700;text-decoration:none}
.lockedcard .lockmsg{inset:56px 14px auto 14px;border-radius:16px;border-top:3px solid var(--signal);box-shadow:inset 0 1px 0 #fff,0 18px 32px -14px rgba(15,20,25,.4)}
.lockedcard .lockmsg p:first-child b{display:block;font-size:17px;margin-bottom:4px}
.prof.locked .kv dd .mask{height:1em}

/* questions and answers */
.qa{margin:0 0 14px}
.qahead{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:4px}
.qahead h2{margin:0}
.qaitem{padding:14px 0;border-top:1px solid var(--line)}
.qaitem:first-of-type{border-top:0}
.qaq{margin:0;font-weight:700;display:flex;gap:10px;align-items:flex-start}
.qaic{flex:none;width:24px;height:24px;border-radius:8px;background:linear-gradient(180deg,#2B333D,#0F1419);color:#fff;font-size:12px;font-weight:800;display:inline-flex;align-items:center;justify-content:center;box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 2px 0 rgba(0,0,0,.25)}
.qaic.a{background:linear-gradient(180deg,#FF7A47,#FF5B23);color:#0F1419;box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 2px 0 #C2410C}
.qameta{margin:2px 0 0 34px;font-size:12.5px}
.qaans{margin:8px 0 0 34px;padding:10px 12px;border-radius:14px;background:#FFF3EC;border:1px solid rgba(255,91,35,.25);display:flex;gap:10px;align-items:flex-start;box-shadow:inset 0 1px 0 #fff}
.qaans p{margin:0}
.qaans .qameta{margin:2px 0 0}
.qawait{margin:6px 0 0 34px;font-size:13.5px;color:var(--ink3);font-style:italic}
.qaitem .btns{margin:8px 0 0 34px}
@media (max-width:760px){.qaans,.qawait,.qaitem .btns,.qameta{margin-left:0}}

/* report and block links under reviews, questions and asks */
.linklike{background:none;border:0;padding:6px 0;font:inherit;font-size:12.5px;color:var(--ink3);text-decoration:underline;cursor:pointer}
.rvact{margin:4px 0 0;font-size:12.5px;color:var(--ink3)}
.cb{display:flex;gap:10px;align-items:flex-start;margin:6px 0;font-size:14px}.cb input{margin-top:3px}

/* inside the iOS and Android apps nothing is sold: no plan, price, upgrade or billing prompt */
.in-app a[href="/plans/"], .in-app a[href^="/plans/?"], .in-app a[href="/me/plan/"], .in-app a[href^="/me/plan/?"], .in-app a[href="#/plan"],
.in-app [data-act="plan"], .in-app [data-act="plan-window"], .in-app [data-act="plan-portal"], .in-app [data-plan], .in-app [data-cancel],
.in-app .wallbar.pay a, .in-app .wallbar.pay button, .in-app .lm-cards, .in-app #limits { display: none !important; }

.share-btn{display:none}.in-app .share-btn{display:flex}
/* the apps leave out loans and investing (Apple's financial-services rules): no lender or investor pages, profile, packet or valuation entry points */
.in-app a[href="/lenders/"], .in-app a[href^="/lenders/"], .in-app a[href="/me/lending/"], .in-app a[href="/me/introductions/"],
.in-app a[href="#/packets"], .in-app a[href="#/valuation"], .in-app a[href="#/matches"], .in-app article.ep.t-lender { display: none !important; }

/* nearby list: separate tappable cards with a letter badge and a distance pill, one steady colour (no striping) */
.nearlist.res,.bizpage .nearlist.res{display:grid;gap:8px;background:transparent;border:0;border-radius:0;box-shadow:none;padding:0}
.nearlist .nearrow{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:12px;align-items:center;padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:var(--panel);flex-wrap:nowrap}
.nearlist .nearrow:first-child{border-top:1px solid var(--line)}
.nearlist .nearrow:active{background:var(--sand)}
.nearlist .nearav{width:40px;height:40px;border-radius:12px;background:var(--signal-soft);color:var(--signal);font-weight:700;font-size:18px;display:grid;place-items:center}
.nearlist .rt{flex:none;min-width:0}
.nearlist .rn{font-size:16px;font-weight:600;text-decoration:none;color:var(--ink);padding:0;display:block;line-height:1.25;overflow-wrap:anywhere}
.nearlist .rt .muted{font-size:13px;margin-top:2px}
.nearlist .rt .chip{margin-top:6px;display:inline-block}
.nearlist .neardist{font-size:13px;font-weight:600;color:var(--ink2);background:var(--sand);border-radius:999px;padding:4px 10px;white-space:nowrap}

/* owner dashboard: the next step first, then one grid of every action */
.hub h2{margin:0 0 10px}
.hubgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.hubtile{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:84px;padding:10px 6px;border:1px solid var(--line);border-radius:14px;background:var(--panel);color:var(--ink);font:inherit;font-size:13px;font-weight:600;text-align:center;text-decoration:none;cursor:pointer}
.hubtile:active{background:var(--sand)}
.hubic{width:34px;height:34px;border-radius:11px;background:var(--signal-soft);color:var(--signal);display:grid;place-items:center;font-size:18px;font-weight:700;line-height:1}
.hublb{line-height:1.2}
.hubbd{position:absolute;top:6px;right:6px;background:var(--signal);color:#fff;border-radius:999px;font-size:11px;font-weight:700;padding:2px 7px}
@media (min-width:720px){.hubgrid{grid-template-columns:repeat(5,minmax(0,1fr))}}

/* listings: the two post choices sit in one row as a segmented pair; long legends no longer sit on the border; the filter bar is a tight grid */
.jf-h + .btns{display:grid;grid-template-columns:1fr 1fr;gap:0;margin:8px 0 14px;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--panel)}
.jf-h + .btns>.btn{border:0;border-radius:0;box-shadow:none;margin:0;min-height:44px;width:auto;padding:10px 8px;font-size:15px;line-height:1.2}
.jf-h + .btns>.btn + .btn{border-left:1px solid var(--line)}
.tp{padding:12px 14px 14px;min-width:0}
.tp legend{float:left;width:100%;padding:0;margin:0 0 8px;font-weight:600;line-height:1.3}
.tp legend + *{clear:both}
.tplist{max-height:none}
.sbar{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:end}
.sbar label{margin:0;min-width:0}.sbar select,.sbar input{width:100%;min-width:0}
.sbar .btn{width:100%;grid-column:auto;min-height:44px}
@media (min-width:760px){.sbar{grid-template-columns:repeat(3,minmax(0,1fr)) auto}.sbar .btn{grid-column:auto;width:auto}}
/* any list of businesses or items: every second row a touch darker, in both themes */
.res li:nth-child(even),.list li:nth-child(even){background:var(--sand)}
.res li,.list li{padding-left:12px;padding-right:12px}
.nearlist .nearrow:nth-child(even){background:var(--sand)}
.nearlist .nearrow:nth-child(even) .nearav{background:var(--panel)}

/* the apps sell nothing and send nobody to a price list: the Lead Finder card and any link to the website's Lead Finder or demo pages (they show plan prices) are left out inside the apps */
.in-app .ep.t-scale, .in-app a[href^="https://beatthedoor.com/leads"], .in-app a[href^="https://beatthedoor.com/book"], .in-app a[href^="/client"] { display: none !important; }

/* search results: one section per kind, stacked, each in its own colour */
.sres{--tone:#FF5B23;--edge:#C2410C;--tint:#FFE6DB;margin:0 0 18px;background:var(--panel);border:1px solid color-mix(in srgb,var(--tone) 30%,var(--line));border-radius:16px;overflow:hidden;box-shadow:0 12px 20px -18px rgba(15,20,25,.4)}
.sres>header{display:flex;align-items:center;gap:10px;padding:11px 16px;background:var(--tint);border-bottom:1px solid color-mix(in srgb,var(--tone) 25%,var(--line));border-left:5px solid var(--tone)}
.sres>header h3{margin:0;font-size:15px;color:var(--edge)}
.sres>header .n{background:var(--tone);color:#fff;border-radius:999px;padding:1px 9px;font-size:12px}
.sres>header .seeall{margin-left:auto;font-size:13px;font-weight:700;color:var(--edge)}
.sres .res{border:0;border-radius:0;background:transparent}
.sres-providers{--tone:#7C3AED;--edge:#5B21B6;--tint:#EDE5FF}
.sres-asks{--tone:#1B7F8C;--edge:#145E69;--tint:#DDF1F4}
.sres-jobs{--tone:#9A5B00;--edge:#7A4700;--tint:#FFEFD0}
/* the search bar on inner pages */
.pgs{--tone:#FF5B23;--edge:#C2410C;padding:12px 20px;background:var(--rail,#0f1419)}
.pgs-in{width:100%;max-width:760px;margin:0 auto;display:flex;gap:8px}
.pgs input[type=search]{flex:1;min-width:0;height:46px;border-radius:12px;border:2px solid transparent;padding:0 14px;font-size:16px;background:#fff;color:#0f1419;box-shadow:inset 0 1px 2px rgba(15,20,25,.12)}
.pgs input[type=search]:focus{outline:0;border-color:var(--tone)}
.pgs button{height:46px;border:0;border-radius:12px;padding:0 20px;font-weight:700;font-size:15px;cursor:pointer;color:#fff;background:linear-gradient(180deg,var(--tone),var(--edge));box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 3px 0 rgba(0,0,0,.35)}
.pgs button:active{transform:translateY(2px);box-shadow:none}
.pgs-providers{--tone:#7C3AED;--edge:#5B21B6}.pgs-asks{--tone:#1B7F8C;--edge:#145E69}.pgs-jobs{--tone:#B7791F;--edge:#7A4700}
.sres.none{box-shadow:none}.sres.none>header{padding:8px 16px}.sres.none>header .n{background:var(--line,#ddd);color:var(--ink3,#667085)}
/* the search card on pages without a hero: the same dark card and fields as the hero search, at the top of the page content */
.pgs-card{grid-column:1/-1;--tone:#FF5B23;--edge:#C2410C;background:var(--rail,#0f1419);border-radius:16px;padding:16px 20px;margin:0 0 4px}
.pgs-card .hero-find{margin:0;max-width:none}
.pgs-providers{--tone:#7C3AED;--edge:#5B21B6}.pgs-asks{--tone:#1B7F8C;--edge:#145E69}.pgs-jobs{--tone:#B7791F;--edge:#7A4700}
.pgs-card .hero-find .btn.pri{background:var(--tone);border-color:var(--tone);color:#fff}
/* the hero search and the button under it keep the same gap on every page */
.hbot .hero-find ~ .btns{margin-top:14px}
/* windows in the colour of their page */
.gate-modal.toned .btn.pri{background:var(--tone);border-color:var(--tone);color:var(--on,#fff)}
.gate-modal.toned .btn.pri:hover{background:var(--edge,var(--tone));border-color:var(--edge,var(--tone))}
.gate-modal.toned input:focus,.gate-modal.toned select:focus,.gate-modal.toned textarea:focus{border-color:var(--tone);outline:2px solid color-mix(in srgb,var(--tone) 35%,transparent);outline-offset:1px}
.gate-modal.toned :focus-visible{outline-color:var(--tone)}
.gate-modal.toned a:not(.btn){color:var(--edge,var(--tone))}
/* every audience page hero is the same height on a computer, without empty space: the headline is two lines and the text four lines tall */
@media (min-width:861px){
  .aud-hero .sub{line-height:1.5;min-height:6em}                       /* the text is always four lines tall, so every hero ends at the same line without extra space */
  .aud-hero h1{min-height:2.12em}
  .aud-hero .hero-in.has-demo .hbot{padding-top:10px}
}
.hero-find .hs-h{display:none}                                          /* no slogan line above the search box */
.aud-hero .hbot .btns .btn{height:40px!important;min-height:40px!important;padding-block:0!important;display:inline-flex;align-items:center}                /* the same button height in every hero */
/* the "Acting as" strip on the dashboard: one tap switches the menu and the dashboard together */
.rolestrip{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin:0 0 14px}
.rolestrip>span{font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ink3)}
.rolestrip button{border:1px solid var(--line);background:var(--panel);border-radius:999px;padding:6px 14px;font:inherit;font-size:14px;font-weight:600;cursor:pointer}
.rolestrip button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--bg)}

/* a signed-in person's action buttons and dashboard cards wear the colour of the role they act as (owner orange, provider purple, lender green, buyer rose, job seeker amber, customer sky), the same colours as the home cards. The logo, header and menu frame stay as they are. */
:root[data-role="owner"]{--role:#FF5B23;--role-soft:#FFE6DB;--on-role:#0F1419}
:root[data-role="provider"]{--role:#7C3AED;--role-soft:#EDE5FF;--on-role:#fff}
:root[data-role="lender"]{--role:#047857;--role-soft:#D1FAE5;--on-role:#fff}
:root[data-role="buyer"]{--role:#BE123C;--role-soft:#FFE4EA;--on-role:#fff}
:root[data-role="jobseeker"]{--role:#9A5B00;--role-soft:#FFEFD0;--on-role:#fff}
:root[data-role="customer"]{--role:#0369A1;--role-soft:#E0F2FE;--on-role:#fff}
:root[data-role] .btn.pri,:root[data-role] .btn.cta{background:var(--role);border-color:var(--role);color:var(--on-role)}
:root[data-role] .btn.pri:hover,:root[data-role] .btn.cta:hover{background:color-mix(in srgb,var(--role) 85%,#000);border-color:color-mix(in srgb,var(--role) 85%,#000)}
:root[data-role] .rolestrip button[aria-pressed="true"]{background:var(--role);border-color:var(--role);color:var(--on-role,#fff)}
/* a person's own pages: a banner and cards in their role's colour, the same family as the home cards and the audience banners */
body[data-me] .sec>h1{margin:0!important;padding:22px 24px 6px;color:#fff;border-radius:16px 16px 0 0;background:radial-gradient(circle at 100% 0,color-mix(in srgb,var(--tone) 55%,transparent) 0,transparent 55%),var(--rail)}
body[data-me] .sec>p.muted{margin:-1px 0 18px!important;padding:0 24px 20px;color:#D5D2CA;border-radius:0 0 16px 16px;border-bottom:4px solid var(--tone);background:radial-gradient(circle at 100% 0,color-mix(in srgb,var(--tone) 55%,transparent) 0,transparent 55%) no-repeat,var(--rail)}
body[data-me] .card{border-top:4px solid var(--tone)}
body[data-me] .card h2{color:var(--edge)}
body[data-me] .res li:first-child,body[data-me] .list li:first-child{border-top:0}
:root[data-role] .main .card,:root[data-role] .dcards .card{border-top:4px solid var(--role)}
:root[data-role] .main .card h2{color:color-mix(in srgb,var(--role) 55%,#000)}

/* phones: Search and My dashboard share one line under the fields */
@media (max-width:860px){
  .hbot .hero-find:has(+ .hs-more) .hs-row .btn{grid-column:1 / -1;justify-self:start;width:calc(50% - 5px)}
  .hbot .hero-find + .hs-more{margin-top:-44px;margin-left:calc(50% + 5px);width:calc(50% - 5px)}
  .hbot .hero-find + .hs-more .btn{width:100%;height:44px;min-height:44px;padding:0 8px;justify-content:center}
}

/* the search / job windows: the same round close box as the sign-in window, kept in view at the top right while the results scroll */
.gate-card:has(.jf){padding-top:14px}
.gate .jf-x{position:sticky;top:0;z-index:4;display:grid;place-items:center;width:36px;height:36px;margin:0 -6px -36px auto;padding:0;border:1px solid var(--line);border-radius:50%;background:var(--sand);color:var(--ink2,var(--ink3));font-size:0;cursor:pointer}
.gate .jf-x::before{content:"";width:16px;height:16px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") center/contain no-repeat}
.gate .jf-x:hover{background:var(--panel);color:var(--ink)}
.jf .jf-h,.jf h3{padding-right:48px}
@media (max-width:640px){
  .gate-card:has(.jf){padding:12px 14px 14px;max-height:86vh;border-radius:16px}
  .gate-card:has(.jf) .jf h3{font-size:18px}
}

/* phones: an even margin around the window on every side, and the page itself never scrolls sideways */
@media (max-width:640px){
  .gate-modal{padding:14px}
  .gate-card:has(.jf){padding:12px 16px 16px;max-height:calc(100vh - 28px)}
  .gate-card{box-sizing:border-box;max-width:100%}
  .gate-card .jf, .gate-card .jf-body{min-width:0;max-width:100%}
  .gate-card .jf-body *{max-width:100%;box-sizing:border-box}
  html,body{overflow-x:clip;max-width:100%}
}

/* phones: a box under 16px makes iPhones zoom in when it is tapped, which widens the page. Every text box and menu is 16px. */
@media (max-width:900px){
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),select,textarea{font-size:16px!important}
}

/* one window shape for sign-in and search: the same curve, and the close box in the same corner (12px from the top and the right) */
.gate-card,.gate-card:has(.jf){border-radius:22px}
.gate .jf-x{margin:0 -4px -36px auto;top:0}
@media (max-width:640px){.gate-card:has(.jf){border-radius:22px;padding:12px 16px 16px}.gate .jf-x{margin-right:-4px}}
.gate .jf-x{margin-right:-20px}
@media (max-width:640px){.gate .jf-x{margin-right:-20px}}
.gate .jf-x{margin-right:0;transform:translateX(12px)}                 /* the window pads 24px, the box sits 12px from the edge, like the sign-in window */
@media (max-width:640px){.gate .jf-x{transform:translateX(16px)}}      /* phones pad 16px */

/* a locked inquiry card: the sign-in box sits over the greyed form, and the card grows to the taller of the two, so the box never hangs out over the footer */
.lockedcard{display:grid;grid-template-columns:minmax(0,1fr);align-content:start}
.lockedcard>*{grid-column:1}
.lockedcard>.lockmsg,.lockedcard>form:first-of-type{grid-row:2}
.lockedcard>.lockmsg{position:relative;inset:auto;margin:10px 0 0;align-self:start}
.lockedcard>form:first-of-type{align-self:start}

/* the signed-in menu is short: Job Board and Ask Board share a row, related pages share an item, and it scrolls if a phone is still too small */
.pt nav .pair{display:grid;grid-template-columns:1fr 1fr;gap:0;border-bottom:1px solid #1D252E}
.pt nav .pair a{border-bottom:0;min-height:46px;padding:12px 2px}
.pt nav .pair a + a{border-left:1px solid #1D252E;padding-left:16px}
.pt nav .pair a:last-child{border-bottom:0}
.mnu-t:checked ~ nav{max-height:calc(100vh - 70px);max-height:calc(100dvh - 70px);overflow-y:auto;overscroll-behavior:contain}
@media (max-width:640px){.pt nav a{min-height:46px;padding-top:11px;padding-bottom:11px;font-size:15.5px}}