/* The HRHS app frame (5.1.0; 5.2.0 navigation). Everything here is scoped
 * under .hx or the hx- prefix, so a page body drawn inside the frame keeps its
 * own sheet. Phone first: the top bar (your picture, Messages, the bell), the
 * page, a floating tab bar with ＋ raised in the middle. From 1000px the tabs
 * become a navy rail on the left (answer 6). Light only for version 1
 * (answer 16).
 *
 * 5.2.0 (Angel, 20 Oct 2026: "fly out menus, page transitions, off page
 * slide scrolling elements. The experience needs to feel high end"): the
 * profile menu the app slides aside to show, the bell's list dropping from
 * the top, ＋ rising with a spring, pages sliding in from the right
 * (cross-document view transitions), swipe from the left edge to go back,
 * rows of cards that run off the screen, and a tab bar that steps aside
 * while you read. All of it stands still for anyone who asks their phone
 * for less motion. */
:root{
  --hx-navy:#0A1A2F; --hx-green:#0BFF84; --hx-green-ink:#0A7A4B; --hx-green-bed:#E6F7EF; --hx-green-line:#BFE6D2;
  --hx-page:#F1F4F9; --hx-card:#FFFFFF; --hx-tint:#F7F9FC; --hx-hair:#E4EAF3; --hx-hair-2:#D5DEE9;
  --hx-body:#3D5069; --hx-label:#5D6E86; --hx-faint:#9AABC0; --hx-on-navy:#C9D4E3; --hx-quiet:#6B7C93;
  --hx-amber:#8A5A05; --hx-amber-bed:#FFF7E8; --hx-amber-line:#F0DFB8;
  --hx-gold:#C9A227; --hx-gold-ink:#6E4704;
  --hx-top-h:60px; --hx-tabs-h:66px; --hx-tabs-gap:12px;
  --hx-ease:cubic-bezier(.2,.8,.2,1); --hx-spring:cubic-bezier(.2,1.15,.3,1);
  --hx-lift:0 1px 2px rgba(10,26,47,.05),0 16px 34px -22px rgba(10,26,47,.38);
  --hx-sans:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --hx-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
body.hrhs-in-app{background:var(--hx-page);margin:0;-webkit-tap-highlight-color:transparent}
.hx{font-family:var(--hx-sans);color:var(--hx-navy);min-height:100vh;min-height:100svh}
.hx *,.hx *::before,.hx *::after{box-sizing:border-box}
.hx-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hx a:focus-visible,.hx button:focus-visible{outline:2px solid var(--hx-green-ink);outline-offset:2px}
.hx-app{position:relative;background:var(--hx-page);min-height:100vh;min-height:100svh}

/* ── the top bar ───────────────────────────────────────────────── */
.hx-top{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:10px;
  height:calc(var(--hx-top-h) + env(safe-area-inset-top,0px));
  padding:calc(8px + env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) 8px max(16px,env(safe-area-inset-left,0px));
  background:rgba(241,244,249,.86);-webkit-backdrop-filter:saturate(1.5) blur(18px);backdrop-filter:saturate(1.5) blur(18px);
  box-shadow:0 1px 0 rgba(10,26,47,.07);transition:background .25s ease,box-shadow .25s ease;view-transition-name:hx-top}
.hx-top.is-root{background:transparent;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
html.hx-scrolled .hx-top.is-root{background:rgba(241,244,249,.86);-webkit-backdrop-filter:saturate(1.5) blur(18px);backdrop-filter:saturate(1.5) blur(18px);box-shadow:0 1px 0 rgba(10,26,47,.07)}
.hx-top:not(.is-root){display:grid;grid-template-columns:minmax(42px,1fr) minmax(0,auto) minmax(42px,1fr)}
.hx-title{min-width:0;margin:0;font:700 17px/1.2 var(--hx-sans);letter-spacing:-.02em;color:var(--hx-navy);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center}
.hx-me{width:44px;height:44px;border-radius:50%;border:0;padding:0;cursor:pointer;flex:none;background:var(--hx-navy);color:var(--hx-green);
  display:grid;place-items:center;font:800 15px/1 var(--hx-sans);letter-spacing:-.02em;
  box-shadow:0 0 0 3px #fff,0 8px 18px -8px rgba(10,26,47,.6);transition:transform .18s ease}
.hx-hi{flex:1;min-width:0;display:grid}
.hx-hi small{font:500 13px/1.25 var(--hx-sans);color:var(--hx-label)}
.hx-hi b{font:800 18px/1.2 var(--hx-sans);letter-spacing:-.03em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hx-ttl{flex:1;min-width:0;text-align:center;font:700 16px/1.2 var(--hx-sans);letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  opacity:0;transform:translateY(6px);transition:opacity .2s ease,transform .25s ease}
html.hx-scrolled .hx-ttl{opacity:1;transform:none}
.hx-acts{display:flex;gap:8px;align-items:center;justify-self:end;flex:none}
.hx-ib{position:relative;width:42px;height:42px;border-radius:50%;border:0;padding:0;cursor:pointer;flex:none;background:var(--hx-card);color:var(--hx-navy);
  display:grid;place-items:center;text-decoration:none;box-shadow:0 1px 2px rgba(10,26,47,.06),0 10px 22px -12px rgba(10,26,47,.35);transition:transform .18s ease}
.hx-ib svg{display:block}
.hx-n{position:absolute;top:-4px;right:-5px;min-width:20px;height:20px;padding:0 5px;border-radius:10px;background:var(--hx-green);color:var(--hx-navy);
  font:800 11px/20px var(--hx-sans);font-style:normal;text-align:center;box-shadow:0 0 0 2.5px var(--hx-page)}
.hx-dot{position:absolute;top:10px;right:11px;width:9px;height:9px;border-radius:50%;background:var(--hx-green-ink);box-shadow:0 0 0 2px #fff}
.hx-back{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;color:var(--hx-navy);text-decoration:none;flex:none;justify-self:start;
  background:var(--hx-card);box-shadow:0 1px 2px rgba(10,26,47,.06),0 10px 22px -12px rgba(10,26,47,.35);transition:transform .18s ease}
.hx-me:active,.hx-ib:active,.hx-back:active,.hx-press:active{transform:scale(.94)}
.hx-av{width:34px;height:34px;border-radius:50%;background:var(--hx-navy);color:#fff;display:grid;place-items:center;
  font:700 13px/1 var(--hx-sans);text-decoration:none;flex:none}
/* On a phone the inner screens keep the bar to three things: back, name, bell. */
@media (max-width:999px){.hx-top:not(.is-root) .hx-ib--msgs{display:none}}

/* The big title of a tab's first screen, which the bar takes over on scroll. */
.hx-lt{padding:2px 20px 12px}
.hx-lt .hx-title{font:800 32px/1.06 var(--hx-sans);letter-spacing:-.045em;text-align:left;white-space:normal}

.hx-off{display:flex;align-items:center;gap:8px;background:var(--hx-amber-bed);color:var(--hx-amber);font:600 12.5px/1.35 var(--hx-sans);
  padding:8px 16px;border-bottom:1px solid var(--hx-amber-line);position:sticky;top:calc(var(--hx-top-h) + env(safe-area-inset-top,0px));z-index:49}
.hx-off[hidden]{display:none}

/* ── the switch under a tab: a segmented control, or chips when long ── */
.hx-sub{display:flex;gap:7px;overflow-x:auto;scrollbar-width:none;padding:2px 16px 8px}
.hx-sub::-webkit-scrollbar{display:none}
.hx-sub a{position:relative;flex:none;text-decoration:none;white-space:nowrap}
.hx-sub a > span{position:relative;z-index:1}
.hx-sub__pill{position:absolute;inset:0;view-transition-name:hx-pill}
.hx-sub--seg{display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));gap:0;margin:2px 16px 10px;padding:4px;border-radius:17px;background:#E4EAF3;overflow:visible}
.hx-sub--seg a{display:grid;place-items:center;height:38px;border-radius:13px;padding:0 6px;font:600 13.5px/1 var(--hx-sans);color:var(--hx-label);text-align:center}
.hx-sub--seg a > span{max-width:100%;overflow:hidden;text-overflow:ellipsis}
.hx-sub--seg a[aria-current="page"]{color:var(--hx-navy);font-weight:700}
.hx-sub--seg .hx-sub__pill{border-radius:13px;background:#fff;box-shadow:0 1px 2px rgba(10,26,47,.08),0 6px 14px -8px rgba(10,26,47,.4)}
.hx-sub--chips a{display:flex;align-items:center;height:38px;border-radius:19px;padding:0 15px;font:600 13.5px/1 var(--hx-sans);color:var(--hx-body);
  background:#fff;box-shadow:inset 0 0 0 1px var(--hx-hair)}
.hx-sub--chips a[aria-current="page"]{color:#fff;box-shadow:none}
.hx-sub--chips .hx-sub__pill{border-radius:19px;background:var(--hx-navy)}

.hx-main{display:block;padding-bottom:calc(var(--hx-tabs-h) + var(--hx-tabs-gap) + 30px + env(safe-area-inset-bottom,0px))}

/* ── the floating tab bar, ＋ raised in the middle ─────────────────── */
.hx-tabs{position:fixed;left:max(10px,env(safe-area-inset-left,0px));right:max(10px,env(safe-area-inset-right,0px));
  bottom:calc(var(--hx-tabs-gap) + env(safe-area-inset-bottom,0px));z-index:60;height:var(--hx-tabs-h);
  display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);align-items:center;
  background:rgba(255,255,255,.94);-webkit-backdrop-filter:saturate(1.6) blur(20px);backdrop-filter:saturate(1.6) blur(20px);border-radius:26px;
  box-shadow:0 1px 2px rgba(10,26,47,.06),0 22px 44px -16px rgba(10,26,47,.5),inset 0 0 0 1px rgba(10,26,47,.04);
  transition:transform .5s var(--hx-ease),opacity .3s ease;view-transition-name:hx-tabs}
html.hx-bar-hidden .hx-tabs,html.hx-typing .hx-tabs{transform:translateY(calc(100% + 44px + env(safe-area-inset-bottom,0px)));opacity:0;pointer-events:none}
.hx-tab{position:relative;display:grid;justify-items:center;align-content:center;gap:2px;height:100%;min-width:0;border:0;padding:0;background:transparent;
  color:var(--hx-quiet);font:600 10px/1.15 var(--hx-sans);letter-spacing:-.01em;text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.hx-tab__ic{width:46px;height:30px;border-radius:15px;display:grid;place-items:center;transition:background .3s ease,color .3s ease,transform .18s ease}
.hx-tab__t{max-width:100%;padding:0 1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hx-tab[aria-current="page"]{color:var(--hx-navy);font-weight:700}
.hx-tab[aria-current="page"] .hx-tab__ic{background:var(--hx-green-bed);color:var(--hx-green-ink)}
.hx-tab:active .hx-tab__ic{transform:scale(.9)}
.hx-tab--plus{align-content:start}
.hx-tab__pl{width:60px;height:60px;border-radius:21px;background:var(--hx-green);color:var(--hx-navy);display:grid;place-items:center;margin-top:-30px;
  box-shadow:0 14px 26px -10px rgba(10,122,75,.7),0 0 0 6px var(--hx-page);transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
.hx-tab--plus:active .hx-tab__pl{transform:scale(.9)}
.hx-tab__pl svg{transition:transform .45s cubic-bezier(.3,1.5,.5,1)}
.hx.is-plus .hx-tab__pl svg{transform:rotate(135deg)}
.hx.is-plus .hx-tabs{z-index:83}

/* ── rail (laptop) ─────────────────────────────────────────────── */
.hx-rail{display:none}
@media (min-width:1000px){
  .hx-rail{display:flex;flex-direction:column;gap:4px;position:fixed;left:0;top:0;bottom:0;width:240px;z-index:55;
    background:var(--hx-navy);color:#fff;padding:20px 14px 16px;overflow-y:auto;view-transition-name:hx-rail}
  .hx-rail__logo{display:block;padding:2px 8px 18px}
  .hx-rail__logo svg{height:24px;width:auto;display:block}
  .hx-rail__new{display:flex;align-items:center;justify-content:center;gap:8px;background:var(--hx-green);color:var(--hx-navy);border:0;
    border-radius:12px;padding:11px 12px;font:700 14px/1 var(--hx-sans);cursor:pointer;margin-bottom:12px}
  .hx-rail__it{display:flex;align-items:center;gap:12px;color:var(--hx-on-navy);padding:10px 12px;border-radius:10px;
    font:600 14.5px/1.2 var(--hx-sans);text-decoration:none;position:relative}
  .hx-rail__it:hover{background:rgba(255,255,255,.06);color:#fff}
  .hx-rail__it[aria-current="page"]{background:rgba(255,255,255,.1);color:#fff}
  .hx-rail__it[aria-current="page"] svg{color:var(--hx-green)}
  .hx-rail__grp{font:600 10px/1 var(--hx-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--hx-faint);padding:14px 12px 4px}
  .hx-rail__it--sm{padding:7px 12px;font-size:13.5px}
  .hx-rail__sp{flex:1}
  .hx-rail__side{font:600 10px/1 var(--hx-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--hx-faint);padding:10px 12px 6px}
  .hx-rail__who{display:flex;align-items:center;gap:10px;color:#fff;background:rgba(255,255,255,.06);padding:10px;border-radius:12px;text-decoration:none;
    border:0;width:100%;text-align:left;font:inherit;cursor:pointer}
  .hx-rail__who:hover{background:rgba(255,255,255,.1)}
  .hx-rail__who .hx-av{background:var(--hx-green);color:var(--hx-navy)}
  .hx-rail__who b{display:block;font:700 13.5px/1.2 var(--hx-sans)}
  .hx-rail__who small{display:block;font:500 11.5px/1.3 var(--hx-sans);color:var(--hx-faint)}
  .hx-app{margin-left:240px}
  .hx-top{height:72px;padding:14px 32px;gap:14px}
  .hx-top:not(.is-root){display:flex}
  .hx-title{text-align:left;font-size:20px;font-weight:800;letter-spacing:-.03em;flex:1}
  .hx-me{display:none}
  .hx-hi{display:flex;align-items:baseline;gap:8px}
  .hx-hi small{font-size:15px}
  .hx-hi b{font-size:22px}
  .hx-lt{padding:4px 32px 14px}
  .hx-lt .hx-title{font-size:30px}
  .hx-off{top:72px;padding-left:32px}
  .hx-sub{padding:4px 32px 10px}
  .hx-sub--seg{margin:2px 32px 12px;max-width:540px}
  .hx-tabs{display:none}
  .hx-main{padding-bottom:40px}
}

/* ── the profile menu, behind your picture ─────────────────────── */
.hx-dr{position:fixed;top:0;bottom:0;left:0;z-index:1;width:calc(min(258px,68vw) - 4px);color:#fff;overflow-y:auto;overscroll-behavior:contain;
  padding:calc(22px + env(safe-area-inset-top,0px)) 10px calc(20px + env(safe-area-inset-bottom,0px)) max(18px,env(safe-area-inset-left,0px))}
.hx-dr[hidden]{display:none}
.hx-dr__in{min-height:100%;display:flex;flex-direction:column;gap:18px}
.hx-dr a{color:inherit;text-decoration:none}
.hx-di{opacity:0;transform:translateX(-22px);transition:opacity .3s ease,transform .5s var(--hx-ease);transition-delay:calc(var(--d,0) * 40ms + 60ms)}
.hx.is-drawer .hx-di{opacity:1;transform:none}
.hx-dr__x{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);border:0;padding:0;background:none;color:#fff}
.hx-dr__x:focus{position:static;width:40px;height:40px;clip:auto;border-radius:50%;background:rgba(255,255,255,.1);display:grid;place-items:center;align-self:flex-end}
.hx-dr__me{display:flex;align-items:center;gap:14px;padding-top:24px}
.hx-dr__av{width:58px;height:58px;border-radius:50%;background:var(--hx-green);color:var(--hx-navy);display:grid;place-items:center;flex:none;
  font:800 21px/1 var(--hx-sans);letter-spacing:-.03em}
.hx-dr__who{display:grid;min-width:0}
.hx-dr__who b{font:800 20px/1.15 var(--hx-sans);letter-spacing:-.03em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hx-dr__who span{font:400 13px/1.35 var(--hx-sans);color:#AEBCCD;margin-top:2px}
.hx-dr .hx-dr__who a{font:700 13px/1 var(--hx-sans);color:var(--hx-green);margin-top:8px}
.hx-dr__lb{font:700 10.5px/1 var(--hx-sans);letter-spacing:.14em;text-transform:uppercase;color:#8FA0B6;margin-bottom:-8px}
.hx-dr__list{display:grid;gap:2px}
.hx-dr__row{display:flex;align-items:center;gap:12px;min-height:50px;border-radius:14px;padding:4px 4px}
a.hx-dr__row:active,a.hx-dr__row:hover{background:rgba(255,255,255,.06)}
.hx-dr__ic{width:38px;height:38px;border-radius:12px;background:rgba(255,255,255,.07);color:var(--hx-green);display:grid;place-items:center;flex:none}
.hx-dr__ic.is-on{background:var(--hx-green);color:var(--hx-navy)}
.hx-dr__t{flex:1;min-width:0;display:grid}
.hx-dr__t b{font:600 15px/1.3 var(--hx-sans);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hx-dr__t span{font:400 12.5px/1.3 var(--hx-sans);color:#AEBCCD;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hx-dr__st,.hx-dr__sw{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;flex:none}
.hx-dr__st{background:rgba(11,255,132,.16);color:var(--hx-green)}
.hx-dr__sw{color:#C9D4E3;box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)}
.hx-dr__hr{height:1px;background:rgba(255,255,255,.1);flex:none}
.hx-dr__sp{flex:1}
.hx-dr__ft{display:flex;align-items:center;justify-content:space-between;gap:12px}
.hx-dr .hx-dr__out{display:inline-flex;align-items:center;gap:10px;color:#AEBCCD;font:600 14px/1 var(--hx-sans);min-height:44px}
.hx-dr__logo{display:flex;opacity:.9}
.hx-dr__logo svg{height:16px;width:auto;display:block}
html.hx-drawer-open,html.hx-drawer-open body{background:var(--hx-navy)}
.hx-app.is-frozen{position:fixed;inset:0;z-index:2;overflow:hidden;transform-origin:0 50%}
.hx-app{transition:transform .55s var(--hx-ease),border-radius .55s var(--hx-ease),box-shadow .55s ease}
.hx.is-drawer .hx-app{transform:translateX(min(258px,68vw)) scale(.82);border-radius:36px;box-shadow:-30px 0 70px rgba(0,0,0,.5);cursor:pointer}
.hx.is-drawer .hx-app > *{pointer-events:none}
@media (min-width:1000px){
  .hx-dr{z-index:86;width:330px;padding-right:18px;padding-left:22px;background:var(--hx-navy);transform:translateX(-102%);transition:transform .45s var(--hx-ease);box-shadow:30px 0 60px -20px rgba(0,0,0,.5)}
  .hx.is-drawer .hx-dr{transform:none}
  .hx.is-drawer .hx-app{transform:none;border-radius:0;box-shadow:none;cursor:auto}
  .hx.is-drawer .hx-app > *{pointer-events:auto}
  html.hx-drawer-open,html.hx-drawer-open body{background:var(--hx-page)}
  .hx-dr__x{position:absolute;top:16px;right:14px;width:40px;height:40px;clip:auto;border-radius:50%;background:rgba(255,255,255,.08);display:grid;place-items:center;cursor:pointer}
}

/* ── fly-outs: the scrim, ＋ rising, the bell dropping ─────────────── */
.hx-scrim{position:fixed;inset:0;z-index:80;background:rgba(10,26,47,.4);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);opacity:0;transition:opacity .35s ease}
.hx-scrim.is-on{opacity:1}
.hx-scrim[hidden],.hx-sheet[hidden],.hx-ns[hidden],.hx-toast[hidden]{display:none}
.hx-sheet{position:fixed;left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom,0px));z-index:82;background:var(--hx-card);border-radius:32px;
  padding:8px 12px 12px;display:grid;gap:2px;max-height:86vh;overflow:auto;overscroll-behavior:contain;
  box-shadow:0 30px 60px -20px rgba(10,26,47,.6);transform:translateY(calc(100% + 40px));transition:transform .55s var(--hx-spring)}
.hx-sheet.is-open{transform:none}
/* ＋'s sheet floats over the tab bar, so the ＋ (an × while it is open)
   closes it where the thumb already is. */
@media (max-width:999px){
  .hx-sheet--plus{bottom:calc(var(--hx-tabs-h) + var(--hx-tabs-gap) + 20px + env(safe-area-inset-bottom,0px));transform:translateY(calc(100% + 140px))}
}
.hx-sheet h3{margin:0;padding:4px 8px 8px;font:800 21px/1.2 var(--hx-sans);letter-spacing:-.035em}
.hx-sheet__grab{width:42px;height:5px;border-radius:3px;background:#C3CEDC;justify-self:center;margin:2px 0 8px}
.hx-pa-list{display:grid;gap:2px}
.hx-pa{display:flex;align-items:center;gap:14px;padding:10px 8px;border-radius:20px;color:var(--hx-navy);text-decoration:none}
.hx-pa:active,.hx-pa:hover{background:var(--hx-page)}
.hx-pa__ic{width:52px;height:52px;border-radius:18px;display:grid;place-items:center;flex:none;background:var(--hx-green-bed);color:var(--hx-green-ink)}
.hx-pa__ic.is-go{background:var(--hx-green);color:var(--hx-navy)}
.hx-pa__t{flex:1;min-width:0;display:grid;gap:1px}
.hx-pa__t b{font:700 16px/1.25 var(--hx-sans);letter-spacing:-.02em}
.hx-pa__t span{font:400 13px/1.35 var(--hx-sans);color:var(--hx-label)}
.hx-sheet.is-open .hx-pa{animation:hx-rise .45s calc(80ms + var(--d,0) * 45ms) var(--hx-ease) backwards}
@media (min-width:1000px){
  .hx-sheet{left:50%;right:auto;top:50%;bottom:auto;width:460px;border-radius:24px;padding:18px 16px 16px;opacity:0;
    transform:translate(-50%,-46%) scale(.98);transition:transform .3s var(--hx-ease),opacity .2s ease}
  .hx-sheet.is-open{transform:translate(-50%,-50%);opacity:1}
  .hx-sheet__grab{display:none}
}

.hx-ns{position:fixed;left:0;right:0;top:0;z-index:84;max-height:88vh;max-height:88dvh;background:var(--hx-page);border-radius:0 0 32px 32px;
  display:flex;flex-direction:column;box-shadow:0 30px 60px -20px rgba(10,26,47,.6);transform:translateY(-104%);transition:transform .6s cubic-bezier(.2,.9,.2,1)}
.hx.is-notif .hx-ns{transform:none}
.hx-ns__hd{display:flex;align-items:center;gap:8px;padding:calc(14px + env(safe-area-inset-top,0px)) 14px 4px 20px;flex:none}
.hx-ns__hd h2{flex:1;margin:0;font:800 27px/1.1 var(--hx-sans);letter-spacing:-.045em}
.hx-ns__all{border:0;background:none;padding:8px;cursor:pointer;font:700 13.5px/1 var(--hx-sans);color:var(--hx-green-ink)}
.hx-ns__all[hidden]{display:none}
.hx-ns__x{width:40px;height:40px;border-radius:50%;border:0;cursor:pointer;background:var(--hx-card);color:var(--hx-navy);display:grid;place-items:center;
  box-shadow:0 1px 2px rgba(10,26,47,.06),0 10px 22px -12px rgba(10,26,47,.35)}
.hx-ns__body{overflow-y:auto;overscroll-behavior:contain;padding:0 12px 4px;-webkit-overflow-scrolling:touch}
.hx-ns__grab{width:42px;height:5px;border-radius:3px;background:#C3CEDC;margin:8px auto 12px;flex:none}
.hx-ns__skel{padding-top:12px}
.hx-ns__skel i{display:block;height:68px;border-radius:20px;margin-bottom:8px;background:linear-gradient(90deg,#fff 0,#F7F9FC 50%,#fff 100%);background-size:200% 100%;animation:hx-shimmer 1.2s linear infinite}
.hx-grp{font:700 11px/1 var(--hx-sans);letter-spacing:.13em;text-transform:uppercase;color:var(--hx-quiet);margin:16px 8px 8px}
.hx-nr{position:relative;display:flex;gap:12px;align-items:flex-start;padding:12px;margin-bottom:8px;border-radius:20px;background:var(--hx-card);
  color:var(--hx-navy);text-decoration:none;box-shadow:0 1px 2px rgba(10,26,47,.04);animation:hx-rise .5s calc(var(--d,0) * 40ms) var(--hx-ease) backwards;transition:transform .18s ease}
.hx-nr:active{transform:scale(.985)}
.hx-nr .hx-row__go{align-self:center}
.hx-nt{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;flex:none;font:800 12px/1 var(--hx-sans);letter-spacing:-.02em}
.hx-nt--g{background:var(--hx-green);color:var(--hx-navy)}
.hx-nt--n{background:var(--hx-navy);color:var(--hx-green)}
.hx-nt--l{background:var(--hx-green-bed);color:var(--hx-green-ink)}
.hx-nx{flex:1;min-width:0;display:grid;gap:2px;padding-right:12px}
.hx-nx small{font:600 11.5px/1.3 var(--hx-sans);color:var(--hx-quiet)}
.hx-nx b{font:700 14px/1.3 var(--hx-sans)}
.hx-nx span{font:400 13px/1.4 var(--hx-sans);color:var(--hx-label)}
.hx-nr__u{position:absolute;top:14px;right:12px;width:8px;height:8px;border-radius:50%;background:var(--hx-green-ink)}
.hx-ns__empty{display:grid;justify-items:center;gap:6px;text-align:center;padding:26px 20px 14px}
.hx-ns__empty b{font:800 18px/1.25 var(--hx-sans);letter-spacing:-.03em;margin-top:6px}
.hx-ns__empty span{font:400 13.5px/1.45 var(--hx-sans);color:var(--hx-label);max-width:290px}
.hx-ns__err{display:grid;justify-items:center;gap:10px;padding:26px 20px 14px;text-align:center;font:500 14px/1.4 var(--hx-sans);color:var(--hx-label)}
@media (min-width:1000px){
  .hx-ns{left:auto;right:24px;top:80px;width:420px;max-height:min(660px,80vh);border-radius:24px;opacity:0;transform:translateY(-10px) scale(.98);
    transition:transform .3s var(--hx-ease),opacity .2s ease}
  .hx.is-notif .hx-ns{transform:none;opacity:1}
  .hx-ns__hd{padding-top:16px}
  .hx-ns__grab{display:none}
  .hx-ns__body{padding-bottom:12px}
}
.hx-toast{position:fixed;left:16px;right:16px;margin:0 auto;width:fit-content;bottom:calc(var(--hx-tabs-h) + var(--hx-tabs-gap) + 16px + env(safe-area-inset-bottom,0px));z-index:90;
  background:var(--hx-navy);color:#fff;font:600 13.5px/1.35 var(--hx-sans);padding:10px 14px;border-radius:14px;max-width:88vw;
  box-shadow:0 10px 24px -10px rgba(10,26,47,.6);animation:hx-rise .35s var(--hx-ease) both}
@media (min-width:1000px){.hx-toast{bottom:28px;left:256px}}
html.hx-lock{overflow:hidden}

/* ── swipe from the left edge to go back (iPhone, installed) ─────── */
html.hx-swiping,html.hx-swiping body{background:#DCE3EC}
.hx-app.is-swiping{transition:none;box-shadow:-20px 0 40px -18px rgba(10,26,47,.5)}
.hx-app.is-swipe-done{transition:transform .26s cubic-bezier(.3,.7,.4,1)}

/* ── page to page: slide deeper, slide back, fade between tabs ───── */
::view-transition-group(hx-top),::view-transition-group(hx-tabs),::view-transition-group(hx-rail){animation-duration:.32s;animation-timing-function:var(--hx-ease)}
::view-transition-group(hx-pill){animation-duration:.4s;animation-timing-function:cubic-bezier(.2,.8,.2,1)}
html[data-hx-nav]::view-transition-old(root),html[data-hx-nav]::view-transition-new(root){mix-blend-mode:normal;animation-duration:.44s;animation-timing-function:cubic-bezier(.22,.8,.2,1);animation-fill-mode:both}
html[data-hx-nav="push"]::view-transition-old(root){animation-name:hx-vt-under}
html[data-hx-nav="push"]::view-transition-new(root){animation-name:hx-vt-in;box-shadow:-20px 0 40px -18px rgba(10,26,47,.45)}
html[data-hx-nav="back"]::view-transition-old(root),html[data-hx-nav="swipe"]::view-transition-old(root){animation-name:hx-vt-out;z-index:2;box-shadow:-20px 0 40px -18px rgba(10,26,47,.45)}
html[data-hx-nav="back"]::view-transition-new(root),html[data-hx-nav="swipe"]::view-transition-new(root){animation-name:hx-vt-over}
html[data-hx-nav="swipe"]::view-transition-old(root){animation-duration:.24s}
html[data-hx-nav="tab"]::view-transition-old(root){animation:hx-vt-fade-out .16s ease both}
html[data-hx-nav="tab"]::view-transition-new(root){animation:hx-vt-fade-in .34s .03s var(--hx-ease) both}
html[data-hx-nav="seg"]::view-transition-old(root){animation:hx-vt-fade-out .18s ease both}
html[data-hx-nav="seg"]::view-transition-new(root){animation:hx-vt-fade-in .26s ease both}
@media (min-width:1000px){
  html[data-hx-nav="push"]::view-transition-old(root),html[data-hx-nav="back"]::view-transition-old(root){animation:hx-vt-fade-out .16s ease both;box-shadow:none}
  html[data-hx-nav="push"]::view-transition-new(root),html[data-hx-nav="back"]::view-transition-new(root){animation:hx-vt-fade-in .3s .03s var(--hx-ease) both;box-shadow:none}
}
@keyframes hx-vt-in{from{transform:translateX(100%)}to{transform:none}}
@keyframes hx-vt-under{from{transform:none}to{transform:translateX(-28%);filter:brightness(.9)}}
@keyframes hx-vt-out{from{transform:none}to{transform:translateX(100%)}}
@keyframes hx-vt-over{from{transform:translateX(-28%);filter:brightness(.9)}to{transform:none;filter:none}}
@keyframes hx-vt-fade-out{to{opacity:0}}
@keyframes hx-vt-fade-in{from{opacity:0;transform:translateY(8px) scale(.996)}to{opacity:1;transform:none}}
@keyframes hx-rise{from{opacity:0;transform:translateY(14px) scale(.99)}to{opacity:1;transform:none}}
@keyframes hx-shimmer{from{background-position:200% 0}to{background-position:-200% 0}}
@keyframes hx-up{from{transform:translateY(16px);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){
  .hx *,.hx *::before,.hx *::after{animation-duration:.01ms!important;animation-delay:0s!important;transition-duration:.01ms!important;transition-delay:0s!important}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
}
html.hx-sheet-open{overflow:hidden}

/* ── building blocks the app's own screens use ─────────────────── */
.hx-pad{max-width:1040px;padding:14px 16px 28px;display:grid;gap:16px;align-content:start}
@media (min-width:1000px){.hx-pad{padding:24px 32px 40px;gap:20px}}
.hx-pad--narrow{max-width:720px}
.hx-h1{margin:0;font:800 24px/1.1 var(--hx-sans);letter-spacing:-.035em}
.hx-muted{color:var(--hx-label);font-size:13.5px;margin:0}
.hx-sec{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:4px 0 -6px}
.hx-sec h2{margin:0;font:700 16px/1.25 var(--hx-sans);letter-spacing:-.02em}
.hx-sec a{font:600 13px/1 var(--hx-sans);color:var(--hx-green-ink);text-decoration:none}
.hx-card{background:var(--hx-card);border:1px solid var(--hx-hair);border-radius:18px;box-shadow:0 1px 2px rgba(10,26,47,.05);overflow:hidden}
.hx-card--p{padding:14px 16px}
.hx-card--green{background:var(--hx-green-bed);border-color:var(--hx-green-line)}
.hx-list{background:var(--hx-card);border:1px solid var(--hx-hair);border-radius:18px;overflow:hidden}
.hx-row{display:flex;align-items:center;gap:12px;padding:12px 14px;border-top:1px solid var(--hx-hair);color:var(--hx-navy);text-decoration:none;
  background:transparent;width:100%;text-align:left;font:inherit}
.hx-row:first-child{border-top:0}
a.hx-row:hover,button.hx-row:hover{background:var(--hx-tint)}
.hx-row__b{flex:1;min-width:0;display:grid;gap:1px}
.hx-row__b b{font:600 14.5px/1.3 var(--hx-sans);letter-spacing:-.01em}
.hx-row__b span{font:400 12.5px/1.35 var(--hx-sans);color:var(--hx-label)}
.hx-row__go{color:var(--hx-faint);flex:none;display:grid}
.hx-ico{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;flex:none;background:var(--hx-tint);color:var(--hx-navy)}
.hx-ico--g{background:var(--hx-green-bed);color:var(--hx-green-ink)}
.hx-logo-sq{width:40px;height:40px;border-radius:12px;background:var(--hx-navy);color:var(--hx-green);display:grid;place-items:center;
  font:800 13px/1 var(--hx-sans);letter-spacing:-.02em;flex:none;overflow:hidden}
.hx-logo-sq img{width:100%;height:100%;object-fit:cover}
.hx-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;border:0;border-radius:12px;padding:11px 16px;
  font:700 14.5px/1 var(--hx-sans);cursor:pointer;white-space:nowrap;text-decoration:none}
.hx-btn--g{background:var(--hx-green);color:var(--hx-navy)}
.hx-btn--n{background:var(--hx-navy);color:#fff}
.hx-btn--o{background:var(--hx-card);color:var(--hx-navy);box-shadow:inset 0 0 0 1px var(--hx-hair-2)}
.hx-btn--s{padding:8px 12px;font-size:13px;border-radius:10px}
.hx-btn--w{width:100%}
.hx-btn--ghost{background:transparent;color:var(--hx-green-ink)}
.hx-chips{display:flex;gap:7px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.hx-chips::-webkit-scrollbar{display:none}
@media (min-width:1000px){.hx-chips{flex-wrap:wrap;overflow:visible}}
.hx-chip{display:inline-flex;align-items:center;gap:5px;border-radius:999px;padding:6px 11px;font:600 12.5px/1 var(--hx-sans);
  background:var(--hx-tint);color:var(--hx-navy);border:1px solid var(--hx-hair);white-space:nowrap;text-decoration:none}
.hx-chip--gb{background:var(--hx-green-bed);color:var(--hx-green-ink);border-color:var(--hx-green-line)}
.hx-search{display:flex;align-items:center;gap:10px;background:var(--hx-card);border:1px solid var(--hx-hair-2);border-radius:14px;padding:4px 6px 4px 14px;color:var(--hx-label)}
.hx-search input{flex:1;min-width:0;border:0;outline:0;font:500 15px/1.2 var(--hx-sans);color:var(--hx-navy);background:transparent;padding:10px 0}
.hx-hscroll{display:flex;gap:10px;overflow-x:auto;scrollbar-width:none;margin:0 -16px;padding:0 16px}
.hx-hscroll::-webkit-scrollbar{display:none}
@media (min-width:1000px){.hx-hscroll{margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}}
.hx-mini{width:200px;flex:none;background:var(--hx-card);border:1px solid var(--hx-hair);border-radius:16px;padding:12px;display:grid;gap:6px;
  color:var(--hx-navy);text-decoration:none}
@media (min-width:1000px){.hx-mini{width:auto}}
.hx-mini b{font:700 14px/1.25 var(--hx-sans)}
.hx-mini span{font:400 12px/1.3 var(--hx-sans);color:var(--hx-label)}
.hx-mini .hx-green{color:var(--hx-green-ink);font-weight:600}
.hx-rate{font:600 12.5px/1 var(--hx-sans);color:var(--hx-gold-ink);display:inline-flex;gap:4px;align-items:center}
.hx-grid2{display:grid;gap:12px}
@media (min-width:1000px){.hx-grid2{grid-template-columns:repeat(2,minmax(0,1fr))}}
.hx-cols{display:grid;gap:16px;align-content:start}
.hx-cols > div{display:grid;gap:16px;align-content:start;min-width:0}
@media (min-width:1000px){.hx-cols{grid-template-columns:minmax(0,1fr) 340px;gap:24px}}

/* the Home banner and the app icon */
.hx-getapp{display:flex;align-items:center;gap:12px;background:var(--hx-navy);color:#fff;border-radius:22px;padding:12px 12px 12px 14px;
  margin:4px 20px 10px;animation:hx-rise .6s var(--hx-ease) backwards}
.hx-getapp[hidden]{display:none}
@media (min-width:1000px){.hx-getapp{margin:4px 32px 12px;max-width:976px}}
.hx-getapp__t{flex:1;min-width:0;display:grid}
.hx-getapp__t b{font:700 15px/1.25 var(--hx-sans)}
.hx-getapp__t span{font:400 12.5px/1.3 var(--hx-sans);color:var(--hx-on-navy)}
.hx-getapp__x{border:0;background:transparent;color:var(--hx-on-navy);width:32px;height:32px;display:grid;place-items:center;cursor:pointer;border-radius:8px}
.hx-appicon{width:62px;height:62px;border-radius:15px;background:var(--hx-navy);display:grid;place-items:center;flex:none;
  box-shadow:0 6px 14px -6px rgba(10,26,47,.6)}
.hx-appicon svg{width:46px;height:auto}
.hx-appicon--sm{width:40px;height:40px;border-radius:10px}
.hx-appicon--sm svg{width:30px}
.hx-waiting{font:600 12.5px/1.35 var(--hx-sans);color:var(--hx-amber);background:var(--hx-amber-bed);border:1px dashed var(--hx-amber-line);
  border-radius:12px;padding:8px 12px;margin:8px 0}

/* the Get the app screen */
.hx-seg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;background:var(--hx-hair);border-radius:12px;padding:3px;gap:3px;max-width:420px}
.hx-seg button{border:0;background:transparent;border-radius:9px;padding:8px 6px;font:600 13.5px/1 var(--hx-sans);cursor:pointer;color:var(--hx-body)}
.hx-seg button[aria-pressed="true"]{background:var(--hx-card);color:var(--hx-navy);box-shadow:0 1px 2px rgba(10,26,47,.12)}
.hx-howto{display:grid;gap:14px}
.hx-howto[hidden]{display:none}
.hx-step{display:grid;grid-template-columns:28px 1fr;gap:10px;align-items:start}
.hx-step__n{width:28px;height:28px;border-radius:50%;background:var(--hx-green-bed);color:var(--hx-green-ink);font:700 13px/28px var(--hx-sans);text-align:center}
.hx-step__t{display:grid;gap:3px;min-width:0}
.hx-step__t b{font:700 15px/1.3 var(--hx-sans)}
.hx-step__t > span{font:400 13px/1.4 var(--hx-sans);color:var(--hx-label)}
.hx-shot{margin-top:6px;border:1px solid var(--hx-hair-2);border-radius:12px;background:#F2F3F6;font:400 12.5px/1.3 var(--hx-sans);color:var(--hx-body);overflow:hidden}
.hx-shot--bar{display:flex;justify-content:space-around;align-items:center;padding:7px 6px}
.hx-shot--menu{display:grid}
.hx-shot--menu span{padding:8px 12px;border-top:1px solid var(--hx-hair-2);display:flex;justify-content:space-between;align-items:center}
.hx-shot--menu span:first-child{border-top:0}
.hx-shot .hx-hl{color:var(--hx-navy);background:var(--hx-green);border-radius:9px;padding:4px 7px;font-weight:700;display:inline-grid;place-items:center;
  box-shadow:0 0 0 4px rgba(11,255,132,.25)}
.hx-shot--menu .hx-hlrow{background:var(--hx-green-bed);color:var(--hx-navy);font-weight:700;box-shadow:inset 3px 0 0 var(--hx-green-ink)}
.hx-shot--add{display:flex;justify-content:space-between;align-items:center;padding:9px 12px;gap:8px}
.hx-shot--add b{font-size:12px;color:var(--hx-navy)}
.hx-shot--dlg{display:grid;grid-template-columns:auto 1fr;gap:6px 10px;padding:12px;background:#fff}
.hx-shot--dlg .hx-dt{display:grid}
.hx-shot--dlg .hx-dt b{color:var(--hx-navy);font-size:13.5px}
.hx-shot--dlg .hx-dt span{font-size:11.5px;color:var(--hx-label)}
.hx-shot--dlg .hx-db{grid-column:1 / -1;display:flex;justify-content:flex-end;gap:14px;align-items:center;font-weight:600}
html.hx-installed .hx-only-browser{display:none}
.hx-qr{background:#fff;border:1px solid var(--hx-hair);border-radius:12px;padding:8px;display:inline-block}
.hx-qr svg{display:block;width:132px;height:132px}

/* ── page bodies inside the frame ──────────────────────────────── */
/* The strip is gone, so a page's own phone dock sits above the tabs, and on
 * Home (where ＋ and Pros already do its two jobs) it goes. */
/* 5.2.0: and the pages' own phone docks (Find a pro / Post jobs, Edit /
 * Post jobs) go everywhere in the app: ＋ posts jobs, the tabs find a pro,
 * and each page keeps its own buttons in its body. */
body.hrhs-in-app .dock{display:none!important}
body.hrhs-in-app .tabbar,body.hrhs-in-app .strip{display:none}
/* Home's and Jobs' phone action stacks (Post jobs, Messages, the neighborhood)
 * were the navigation before the tabs; ＋ and the tabs do those jobs now. */
body.hrhs-in-app .stack{display:none}

/* ── page bodies that bleed to the screen edge (5.1.0) ──────────────
   The directory's filter band reaches the edges with 50vw maths. In the app
   the page is narrower than the screen (the 240px rail from 1000px), so the
   band ran 120px past the right edge. It pins under the app's own top bar
   (5.2.0: 60px plus the phone's notch, 72px on a laptop), not the website's
   header. */
body.hrhs-in-app .hrhs-fbar-band{top:calc(var(--hx-top-h) + env(safe-area-inset-top,0px))}
@media (min-width:1000px){body.hrhs-in-app .hrhs-fbar-band{top:72px}}
@media (min-width:1000px){
  body.hrhs-in-app .hrhs-fbar-band{margin-left:calc(50% - 50vw + 120px);margin-right:calc(50% - 50vw + 120px);padding:0 calc(50vw - 50% - 120px)}
}
/* A tab's first screen is named once, in the big title under the bar. The
   page's own heading stays for its eyebrow and line, and steps aside. */
body.hrhs-in-app.hx-root .phead__t > h1{display:none}

/* ── Home and Pros, inside the app (5.2.0) ──────────────────────────
   Rows of cards that run off the screen (.hx-slide, snapping as you swipe),
   your home as a photo card, quick actions. On a laptop the rows become
   grids. Comp: the HRHS App Navigation canvas, boards 1 and 5. */
.hx-home{display:grid;gap:6px;padding:2px 0 8px;max-width:1040px}
.hx-home > *{min-width:0}
.hx-lead{margin:-6px 20px 6px;font:400 14.5px/1.45 var(--hx-sans);color:var(--hx-label)}
.hx-hsec{display:grid;gap:0;margin-top:14px}
.hx-sh{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:0 20px;margin:0 0 12px}
.hx-sh h2{margin:0;font:800 18px/1.25 var(--hx-sans);letter-spacing:-.03em;display:flex;align-items:center;gap:8px}
.hx-sh a,.hx-sh__a{font:600 13.5px/1 var(--hx-sans);color:var(--hx-green-ink);text-decoration:none;background:none;border:0;padding:0;cursor:pointer}
.hx-sh__n{min-width:22px;height:22px;padding:0 7px;border-radius:11px;background:var(--hx-navy);color:var(--hx-green);font:800 11.5px/22px var(--hx-sans);text-align:center}
.hx-actf{margin:0;display:inline-flex}
.hx-eb{font:700 10.5px/1.2 var(--hx-sans);letter-spacing:.12em;text-transform:uppercase;color:var(--hx-green-ink)}
.hx-press{transition:transform .18s ease}

.hx-slide{display:flex;gap:12px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-padding:0 20px;padding:2px 20px 18px;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
.hx-slide::-webkit-scrollbar{display:none}
.hx-slide > *{scroll-snap-align:start;flex:none;animation:hx-rise .6s calc(var(--d,0) * 50ms + 80ms) var(--hx-ease) backwards}
.hx-slide--chips{gap:8px;padding-bottom:6px;scroll-snap-type:none}
.hx-slide--tiles{gap:14px}
.hx-slide--cards{align-items:stretch}
.hx-slide--cards > *{width:286px;margin:0!important}

/* your home, as a photo card */
.hx-hero{position:relative;display:block;margin:4px 20px 0;height:228px;border-radius:30px;overflow:hidden;color:#fff;text-decoration:none;
  box-shadow:0 24px 44px -26px rgba(10,26,47,.8);animation:hx-rise .7s var(--hx-ease) backwards;isolation:isolate}
.hx-hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.04)}
.hx-hero__scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,26,47,.1) 0%,rgba(10,26,47,.34) 42%,rgba(10,26,47,.94) 100%)}
.hx-hero__chip{position:absolute;top:14px;left:14px;max-width:calc(100% - 28px);display:flex;align-items:center;gap:7px;height:34px;padding:0 11px 0 10px;border-radius:17px;
  background:rgba(10,26,47,.52);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);font:600 13px/1 var(--hx-sans)}
.hx-hero__chip > span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hx-hero__tag{position:absolute;top:56px;left:14px;display:flex;align-items:center;gap:5px;height:26px;padding:0 10px;border-radius:13px;background:var(--hx-green);color:var(--hx-navy);
  font:700 11.5px/1 var(--hx-sans)}
.hx-hero__body{position:absolute;left:16px;right:16px;bottom:16px;display:grid;gap:2px}
.hx-hero__body small{font:500 12.5px/1.3 var(--hx-sans);color:rgba(255,255,255,.8)}
.hx-hero__body b{font:800 27px/1.1 var(--hx-sans);letter-spacing:-.045em;margin-bottom:8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hx-hero__line{font:500 13px/1.4 var(--hx-sans);color:rgba(255,255,255,.86);margin-top:-6px}
.hx-hero__bar{background:#fff;color:var(--hx-navy);border-radius:16px;padding:10px 12px;display:grid;gap:8px}
.hx-hero__r{display:flex;justify-content:space-between;gap:10px;font:600 12px/1.3 var(--hx-sans)}
.hx-hero__r > span:first-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hx-hero__r > span:last-child{color:var(--hx-label);font-weight:500}
.hx-meter{display:block;height:8px;border-radius:4px;background:var(--hx-hair);overflow:hidden}
.hx-meter i{display:block;height:100%;border-radius:4px;background:var(--hx-green);transform-origin:0 50%;animation:hx-grow 1s .35s var(--hx-ease) both}
.hx-hero--add .hx-hero__body b{margin-bottom:4px}
.hx-hero__go{justify-self:start;margin-top:10px}
@keyframes hx-grow{from{transform:scaleX(0)}to{transform:none}}

/* four quick actions */
.hx-qa{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;padding:18px 20px 2px;animation:hx-rise .7s .08s var(--hx-ease) backwards}
.hx-qa__it{display:grid;justify-items:center;gap:8px;font:600 12px/1.25 var(--hx-sans);color:var(--hx-body);text-align:center;text-decoration:none}
.hx-qa__ic{width:58px;height:58px;border-radius:20px;background:var(--hx-card);color:var(--hx-navy);display:grid;place-items:center;box-shadow:0 1px 2px rgba(10,26,47,.05),0 12px 24px -16px rgba(10,26,47,.4);transition:transform .18s ease}
.hx-qa__ic.is-go{background:var(--hx-green);color:var(--hx-navy)}
.hx-qa__it:active .hx-qa__ic{transform:scale(.92)}
/* Four across down to the narrowest phones in use; two by two below that. */
@media (max-width:339px){
  .hx-qa{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:14px}
}

/* cards in the rows */
.hx-wcard,.hx-jcard,.hx-scard{width:280px;background:var(--hx-card);border-radius:24px;box-shadow:var(--hx-lift);padding:16px;display:flex;flex-direction:column;gap:8px;
  color:var(--hx-navy);text-decoration:none}
.hx-wcard > b,.hx-jcard > b,.hx-scard > b{font:800 16.5px/1.25 var(--hx-sans);letter-spacing:-.03em}
.hx-wcard__hd{display:flex;align-items:center;gap:10px}
.hx-wcard__ic{width:36px;height:36px;border-radius:12px;background:var(--hx-green-bed);color:var(--hx-green-ink);display:grid;place-items:center;flex:none;font:800 11px/1 var(--hx-sans)}
.hx-wcard__ic.is-n{background:var(--hx-navy);color:var(--hx-green)}
.hx-wcard__l,.hx-jcard__l,.hx-scard__l{font:400 13.5px/1.45 var(--hx-sans);color:var(--hx-label);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.hx-wcard__a,.hx-scard__a{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;padding-top:6px}
.hx-jcard{width:250px}
.hx-jcard__ft{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto;padding-top:10px;border-top:1px solid #EEF2F8}
.hx-st{display:inline-flex;align-items:center;height:26px;padding:0 10px;border-radius:13px;font:700 12px/1 var(--hx-sans);background:#EEF2F8;color:var(--hx-body)}
.hx-st--g{background:var(--hx-green);color:var(--hx-navy)}
.hx-st--l{background:var(--hx-green-bed);color:var(--hx-green-ink)}
.hx-go{display:inline-flex;align-items:center;gap:2px;font:700 13px/1 var(--hx-sans);color:var(--hx-green-ink)}
.hx-jcard--new{background:transparent;box-shadow:inset 0 0 0 1.5px var(--hx-hair-2);justify-content:center}
.hx-jcard--new .hx-qa__ic{width:46px;height:46px;border-radius:16px;box-shadow:none}
.hx-scard{width:250px}
.hx-scard.is-done{opacity:.72}
.hx-ck{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:#fff;box-shadow:inset 0 0 0 2px var(--hx-hair-2);color:transparent}
.hx-scard.is-done .hx-ck{background:var(--hx-green-bed);box-shadow:none;color:var(--hx-green-ink)}
.hx-scard__done{margin-top:auto;font:700 12.5px/1 var(--hx-sans);color:var(--hx-green-ink)}

/* a pro, as a card with a picture */
.hx-pcard{width:250px;display:block;color:var(--hx-navy);text-decoration:none}
.hx-pcard__img{position:relative;display:block;height:164px;border-radius:24px;overflow:hidden;background:var(--hx-hair)}
.hx-pcard__cover{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;z-index:1}
.hx-pcard__img.is-brand::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 85% 0%,rgba(255,255,255,.16),transparent 60%);pointer-events:none}
.hx-pcard__logo{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);width:150px;height:72px;border-radius:16px;background:#fff;display:grid;place-items:center;padding:10px;
  box-shadow:0 14px 30px -14px rgba(0,0,0,.5);z-index:2}
.hx-pcard__logo img{max-width:100%;max-height:100%;object-fit:contain;display:block}
.hx-pcard__mono{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);font:800 44px/1 var(--hx-sans);letter-spacing:-.05em;color:#fff;opacity:.95}
.hx-pcard__rate{position:absolute;left:10px;bottom:10px;z-index:3;display:flex;align-items:center;gap:4px;height:28px;padding:0 10px;border-radius:14px;
  background:rgba(10,26,47,.62);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#fff;font:700 12.5px/1 var(--hx-sans)}
.hx-pcard__rate small{font-weight:500;opacity:.8}
.hx-star{color:var(--hx-gold)}
.hx-pcard__saved{position:absolute;top:10px;right:10px;z-index:3;width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.92);display:grid;place-items:center;color:var(--hx-green-ink)}
.hx-pcard__saved svg{fill:var(--hx-green)}
.hx-pcard__t{display:grid;gap:2px;padding:10px 4px 0}
.hx-pcard__t b{font:700 15px/1.25 var(--hx-sans);letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hx-pcard__t span{font:400 12.5px/1.3 var(--hx-sans);color:var(--hx-label);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* a pro you know, as a tile */
.hx-ptile{width:84px;display:grid;justify-items:center;gap:6px;text-align:center;color:var(--hx-navy);text-decoration:none}
.hx-ptile__lg{position:relative;width:68px;height:68px;border-radius:23px;display:grid;place-items:center;color:#fff;font:800 18px/1 var(--hx-sans);letter-spacing:-.03em;
  box-shadow:0 12px 22px -16px rgba(10,26,47,.7)}
.hx-ptile__ck{position:absolute;right:-4px;bottom:-4px;width:22px;height:22px;border-radius:50%;background:var(--hx-green);color:var(--hx-navy);display:grid;place-items:center;box-shadow:0 0 0 3px var(--hx-page)}
.hx-ptile b{font:700 12.5px/1.25 var(--hx-sans);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;max-width:100%}
.hx-ptile > span:last-child{font:400 11.5px/1.25 var(--hx-sans);color:var(--hx-label);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hx-ptile--find .hx-ptile__lg{background:var(--hx-card);color:var(--hx-navy);box-shadow:inset 0 0 0 1.5px var(--hx-hair-2)}

/* the search pill and the trade chips */
.hx-find{display:flex;align-items:center;gap:10px;margin:0 20px;height:58px;border-radius:29px;background:var(--hx-card);padding:0 7px 0 18px;color:var(--hx-navy);
  box-shadow:0 1px 2px rgba(10,26,47,.05),0 16px 30px -20px rgba(10,26,47,.4)}
.hx-find input{flex:1;min-width:0;border:0;outline:0;background:transparent;font:500 16px/1 var(--hx-sans);color:var(--hx-navy);padding:0;height:100%}
.hx-find input::placeholder{color:var(--hx-quiet)}
.hx-find input::-webkit-search-cancel-button{-webkit-appearance:none}
.hx-find__go{width:44px;height:44px;border-radius:50%;border:0;background:var(--hx-navy);color:#fff;display:grid;place-items:center;cursor:pointer;flex:none}
.hx-pros .hx-slide--chips{padding-top:14px}
.hx-trade{flex:none;display:flex;align-items:center;gap:8px;height:42px;padding:0 15px 0 12px;border-radius:21px;background:var(--hx-card);color:var(--hx-body);
  font:600 13.5px/1 var(--hx-sans);text-decoration:none;white-space:nowrap;box-shadow:inset 0 0 0 1px var(--hx-hair);transition:background .2s ease,transform .18s ease}
.hx-trade:active{transform:scale(.96);background:var(--hx-navy);color:#fff}
.hx-trade svg{flex:none}
.hx-trade .i-ink{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.hx-trade .i-go{fill:none;stroke:var(--hx-green-ink);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.hx-trade circle.i-go{fill:none}

.hx-quiet{display:flex;gap:12px;align-items:flex-start;margin:0 20px;padding:14px 16px;border-radius:22px;background:var(--hx-card);box-shadow:0 1px 2px rgba(10,26,47,.04)}
.hx-quiet__ic{width:38px;height:38px;border-radius:13px;background:var(--hx-green-bed);color:var(--hx-green-ink);display:grid;place-items:center;flex:none}
.hx-quiet > span:last-child{display:grid;gap:2px;font:400 13.5px/1.45 var(--hx-sans);color:var(--hx-label)}
.hx-quiet b{font:700 14.5px/1.3 var(--hx-sans);color:var(--hx-navy)}
.hx-cta{display:flex;align-items:center;gap:14px;margin:16px 20px 0;padding:16px 16px 16px 18px;border-radius:24px;background:var(--hx-navy);color:#fff;text-decoration:none;
  box-shadow:0 24px 44px -28px rgba(10,26,47,.9)}
.hx-cta__t{flex:1;display:grid;gap:3px}
.hx-cta__t b{font:800 17px/1.25 var(--hx-sans);letter-spacing:-.03em}
.hx-cta__t span{font:400 13.5px/1.4 var(--hx-sans);color:var(--hx-on-navy)}
.hx-cta .hx-qa__ic{box-shadow:none;width:50px;height:50px;border-radius:17px}
.hx-list--lift{margin:0 20px;border:0;border-radius:24px;box-shadow:var(--hx-lift)}
.hx-home__saved{margin:4px 20px 6px}

/* a companion's cards (the association, your neighbors) in the app's shapes */
.hx-home__slot{margin:14px 20px 0}
.hx-home__slot > .sec,.hx-slide--cards > .rcard{background:var(--hx-card);border:0;border-radius:24px;box-shadow:var(--hx-lift);padding:16px;margin:0}
.hx-home__slot .sec__t{font-size:18px;font-weight:800;letter-spacing:-.03em}

@media (min-width:1000px){
  .hx-home{padding:6px 0 10px}
  .hx-hero{margin:4px 32px 0;height:260px}
  .hx-qa{max-width:560px;padding:20px 32px 4px}
  .hx-sh,.hx-lead{padding:0 32px}
  .hx-lead{margin:-6px 0 8px}
  .hx-slide{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));overflow:visible;padding:2px 32px 18px;scroll-snap-type:none}
  .hx-slide > *{width:auto}
  .hx-slide--chips{display:flex;flex-wrap:wrap}
  .hx-slide--tiles{grid-template-columns:repeat(auto-fill,minmax(96px,1fr))}
  .hx-ptile{width:auto}
  .hx-find,.hx-quiet,.hx-cta,.hx-list--lift,.hx-home__slot,.hx-home__saved{margin-left:32px;margin-right:32px}
  .hx-find{max-width:640px}
}
.hx-trade .hrhs-svcicon--dot{width:10px;height:10px;border-radius:50%;background:var(--d,#7488A1);display:inline-block;margin:0 4px}
/* The website's header height is what a page's own sticky rows sit under
   (a pro's page: its section tabs). In the app that is the app's top bar. */
body.hrhs-in-app{--hrhs-hdr-h:calc(var(--hx-top-h) + env(safe-area-inset-top,0px))}
@media (min-width:1000px){body.hrhs-in-app{--hrhs-hdr-h:72px}}

/* A pro's page brings its own action bar (Get a quote, Message). In the app
   it floats like the tab bar, and the tab bar steps aside for it, the way a
   phone hides its tabs on a page pushed in from the right. */
body.hrhs-in-app:has(.hrhs-profile-dock) .hx-tabs{transform:translateY(calc(100% + 44px + env(safe-area-inset-bottom,0px)));opacity:0;pointer-events:none}
@media (max-width:959px){
  body.hrhs-in-app .hrhs-profile-dock{left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom,0px));border:0;border-radius:24px;padding:10px;
    box-shadow:0 1px 2px rgba(10,26,47,.06),0 22px 44px -16px rgba(10,26,47,.5)}
  body.hrhs-in-app .hrhs-profile-dock .hrhs-btn{border-radius:16px}
}
@media (min-width:1000px){body.hrhs-in-app .hrhs-dbar{left:240px}}