/* DocHelp Jobs, the app look (Jamal picked example 3 "App style", 19 October 2026).
   Used by /jobs, every job page (/jobs/<ad>) and, later, /account/ and the clinic login.
   Reference render and direction: _working files - ignore/jobs-new-look-2026-10-19/.
   Dark, tactile, quick. Lilac for actions and the thing that is open (the open card's ring);
   lime only for New, progress and a filter you switched on (the pressed role tile).
   Overlays (the phone sheet, the apply steps) only behave as overlays when html.js is set
   (js/head.js); without JavaScript the apply form is simply on the page. */

/* Unbounded's lowercase j has almost no tail, so "jobs" read as "iobs" (Jamal, 23 October 2026: "the J in jobs is
   not showing, it looks cutt off"). Every j in the display font is drawn from Plus Jakarta Sans 700 instead:
   fonts/jobs-j.woff holds that one letter only (made with pyftsubset). */
@font-face{font-family:"Unbounded j";src:url(/fonts/jobs-j.woff) format("woff");font-weight:100 900;font-display:swap;unicode-range:U+006A}

:root{
  /* the list page keeps the App style black (his call, 19 October 2026). The ad itself, the phone sheet, the
     desktop panel and the job page, goes to the lighter purple with moving light: "the ad surfaces" at the end. */
  --bg:#160F24;--raised:#231A36;--raised-2:#2D2244;--raised-hi:#2A2040;--sheet:#1C1430;--tile-3:#3A2C5A;
  --lilac:#B79CFF;--lilac-hover:#C9B6FF;--lime:#C6F432;--text:#F4F1FA;--muted:#A79DBB;--ink:#160F24;
  --line:rgba(244,241,250,.09);--line-2:rgba(244,241,250,.17);--bad:#FF8FA3;--glass:rgba(22,15,36,.84);
  --display:"Unbounded j","Unbounded",ui-sans-serif,system-ui,sans-serif;
  --sans:"Plus Jakarta Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);--ease-sheet:cubic-bezier(.32,.72,0,1);
  --gut:16px;--tabbar:68px;
}
@media (min-width:768px){:root{--gut:32px}}
@media (min-width:1200px){:root{--gut:48px}}
@media (min-width:1600px){.wrap,.browse-in{max-width:1440px}}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;color-scheme:dark;scroll-padding-top:84px;background:var(--bg)}
html.locked{overflow:hidden}
body.jobs-app{margin:0;background:transparent;color:var(--text);font:400 16px/1.55 var(--sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:clip;min-height:100vh;padding-bottom:calc(var(--tabbar) + env(safe-area-inset-bottom))}
/* the light behind the job page (html[data-ad], set by functions/jobs/[slug].js): two fixed layers behind the
   content, drawn only there ("the ad surfaces" at the end). html carries the page colour, body is clear. */
body.jobs-app::before,body.jobs-app::after{content:"";position:fixed;inset:-20vh -20vw;z-index:-1;pointer-events:none;display:none}
:where(.jobs-app) img,:where(.jobs-app) svg{display:block;max-width:100%}
:where(.jobs-app) :is(button,input,select,textarea){font:inherit;color:inherit;letter-spacing:inherit}
:where(.jobs-app) button{cursor:pointer;background:none;border:0;padding:0;margin:0;-webkit-tap-highlight-color:transparent}
:where(.jobs-app) a{color:inherit;-webkit-tap-highlight-color:transparent}
:where(.jobs-app) p{margin:0}
:where(.jobs-app) :is(h1,h2,h3,h4){margin:0}
.jobs-app [hidden]{display:none!important}
.jobs-app :focus-visible{outline:2px solid var(--lime);outline-offset:3px}
.jobs-app main:focus{outline:0}
.jobs-app [tabindex="-1"]:focus-visible{outline:none}
.sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.ico{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex:none}
.wrap{width:100%;max-width:1328px;margin:0 auto;padding-left:var(--gut);padding-right:var(--gut)}
.hm-skip{position:absolute;left:12px;top:-80px;z-index:100;background:var(--lime);color:var(--ink)!important;padding:12px 16px;border-radius:14px;font-weight:700;text-decoration:none}
.hm-skip:focus{top:12px}
.ja-link{color:var(--lilac);font-weight:700;text-decoration:underline;text-underline-offset:3px}

/* top line: back to DocHelp and the phone */
.util{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:0 12px;min-height:44px;font-size:12.5px;color:var(--muted)}
.util a{text-decoration:none;min-height:44px;display:inline-flex;align-items:center;color:var(--muted);transition:color .2s}
@media (hover:hover){.util a:hover{color:var(--text)}}
.util .u-phone{color:var(--text);font-weight:700}
/* the two login tabs (21 October 2026, Jamal): Clinic login and Applicant login. Below 1024px they are the second row of the
   top strip, right-aligned under the phone; at 1024px and up the strip is hidden and the header carries them (.hdr-logins).
   Quiet pills on the page's own tokens: not lime (that is for counts) and not filled (the Apply button owns that). */
.util-logins,.hdr-logins{display:flex;align-items:center;gap:8px}
.util-logins{flex:0 0 100%;justify-content:flex-end;margin-bottom:12px}
.login-tab{height:30px;padding:0 14px;border-radius:999px;border:1px solid var(--line-2);background:var(--raised);color:var(--text);font-size:13px;font-weight:600;line-height:1;white-space:nowrap;display:inline-flex;align-items:center;text-decoration:none;transition:border-color .2s,background-color .2s}
@media (hover:hover){.login-tab:hover{border-color:var(--lilac)}}
.util .login-tab{height:32px;min-height:32px;color:var(--text);position:relative}
.util .login-tab::after{content:"";position:absolute;inset:-6px 0}
.login-tab,.util .login-tab{transition:border-color .2s ease,transform .16s var(--ease)}
.login-tab:active{transform:scale(.97)}

/* header */
.hdr{position:sticky;top:0;z-index:30;background:var(--glass);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-bottom:1px solid transparent;transition:border-color .25s}
.hdr.scrolled{border-bottom-color:var(--line)}
.hdr-in{display:flex;align-items:center;justify-content:space-between;gap:16px;height:60px}
.mark{font-family:var(--display);font-weight:600;font-size:17px;letter-spacing:-.01em;text-decoration:none;color:var(--text);display:inline-flex;align-items:baseline;gap:.34em;padding:10px 0}
.mark b{font-weight:600;color:var(--lilac)}
.icon-btn{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--raised);color:var(--text);flex:none;text-decoration:none;transition:transform .16s var(--ease),background-color .2s}
.icon-btn:active{transform:scale(.92)}
@media (hover:hover){.icon-btn:hover{background:var(--raised-2)}}
.hdr-tabs,.hdr-right{display:none}
/* the Sign in button in the sticky header below 1024px (21 October 2026, Jamal: "how do clinics login on their phones"):
   the strip with the two pills scrolls away and is hidden on a job page, so the header carries a person button beside
   the phone button; it opens a small menu with Clinic login and Applicant login (js/jobs-app.js). At 1024px and up the
   header has the pills, so both are hidden there. */
.hdr-in{position:relative}
.hdr-signin{margin-left:auto;margin-right:-8px}
.hdr-signin[aria-expanded="true"]{background:var(--raised-2)}
.signin-menu{position:absolute;right:var(--gut);top:calc(100% + 6px);z-index:5;min-width:220px;padding:6px;display:grid;gap:2px;background:var(--raised);border:1px solid var(--line-2);border-radius:14px;box-shadow:0 16px 40px rgba(8,4,16,.5);transform-origin:top right}
.signin-menu[hidden]{display:none}
.signin-menu-item{display:flex;align-items:center;width:100%;height:48px;padding:0 14px;border-radius:10px;color:var(--text);font-size:15px;font-weight:600;line-height:1.2;text-decoration:none;transition:background-color .15s,transform .16s var(--ease)}
@media (hover:hover){.signin-menu-item:hover{background:var(--raised-2)}}
.signin-menu-item:active{transform:scale(.98)}
.jobs-app .signin-menu-item:focus-visible{outline-offset:-2px;background:var(--raised-2)}
@keyframes menuIn{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:no-preference){.signin-menu:not([hidden]){animation:menuIn .12s var(--ease)}}
.tab-pill{height:40px;padding:0 18px;border-radius:999px;font-weight:600;font-size:14px;color:var(--muted);display:inline-flex;align-items:center;gap:8px;text-decoration:none;transition:background-color .2s,color .2s}
@media (hover:hover){.tab-pill:hover{color:var(--text)}}
.tab-pill[aria-current="true"]{background:var(--lilac);color:var(--ink)}
.count-dot{min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--lime);color:var(--ink);font-size:11.5px;font-weight:800;display:inline-grid;place-items:center;line-height:1}

/* hero */
.hero{padding-top:18px}
.hero h1{font-family:var(--display);font-weight:600;font-size:clamp(30px,8.3vw,46px);line-height:1.05;letter-spacing:-.03em;margin:0 0 14px;max-width:360px;text-wrap:balance}
.lede{color:var(--muted);font-size:15px;line-height:1.55;max-width:46ch}

/* search */
.search-wrap{padding-top:20px}
.search{display:grid;grid-template-columns:1fr auto;align-items:center;background:var(--raised);border-radius:22px;padding:5px;border:1px solid var(--line);margin:0}
.sf-row{display:flex;align-items:center;gap:10px;padding:0 10px 0 14px;min-height:54px;border-radius:17px;transition:background-color .2s}
.sf-q{grid-column:1/-1;border-bottom:1px solid var(--line);border-radius:17px 17px 0 0}
.sf-row:focus-within{background:var(--raised-2);box-shadow:inset 0 0 0 2px var(--lilac)}
.sf-row .ico{color:var(--muted)}
.jobs-app .sf-row input[type]{flex:1;width:auto;min-width:0;background:none;border:0;border-radius:0;outline:0;height:52px;padding:0;font-size:16px;color:var(--text);box-shadow:none}
.jobs-app .sf-row input[type]:focus{border:0;box-shadow:none}
.sf-row input::placeholder{color:var(--muted);opacity:1}
.sf-row input::-webkit-calendar-picker-indicator{display:none}
input[type=search]::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
.sf-go{height:44px;padding:0 20px;margin-right:4px;border-radius:999px;background:var(--lilac);color:var(--ink);font-weight:700;font-size:15px;transition:transform .16s var(--ease),background-color .2s}
@media (hover:hover){.sf-go:hover{background:var(--lilac-hover)}}
.sf-go:active{transform:scale(.95)}

/* role tiles: the main role filter. A tile shows only when its role has an ad. */
.browse{padding-top:24px}
.label{font-size:12.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin:0 0 6px}
.tiles{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:8px var(--gut) 10px;scroll-padding-left:var(--gut);scrollbar-width:none;overscroll-behavior-x:contain}
.tiles::-webkit-scrollbar{display:none}
.tile{position:relative;flex:1 0 162px;max-width:240px;height:96px;border-radius:22px;padding:14px 16px;text-align:left;scroll-snap-align:start;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;transition:transform .2s var(--ease),box-shadow .22s var(--ease)}
.tile:active{transform:scale(.96)}
.tile-name{font-family:var(--display);font-weight:600;font-size:18px;line-height:1.12;letter-spacing:-.02em;hyphens:none}
.t1{background:var(--lilac);color:var(--ink)}
.t2{background:var(--text);color:var(--ink)}
.t3{background:var(--tile-3);color:var(--text)}
.tile-on{position:absolute;top:12px;right:12px;width:28px;height:28px;border-radius:50%;background:var(--ink);color:var(--lime);display:grid;place-items:center;opacity:0;transform:scale(.6);transition:transform .24s var(--ease),opacity .18s ease}
.tile-on .ico{width:15px;height:15px;stroke-width:2.8}
.t3 .tile-on{background:var(--lime);color:var(--ink)}
.tile[aria-pressed="true"] .tile-on{opacity:1;transform:scale(1)}
.tile[aria-pressed="true"]{box-shadow:0 0 0 3px var(--bg),0 0 0 5.5px var(--lime)}

/* filter chips */
.chips{display:flex;gap:8px;overflow-x:auto;padding:6px var(--gut) 8px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;height:44px;padding:0 16px;border-radius:999px;background:var(--raised);box-shadow:inset 0 0 0 1px var(--line-2);font-weight:600;font-size:14px;display:inline-flex;align-items:center;gap:6px;white-space:nowrap;transition:background-color .2s,color .2s,box-shadow .2s,transform .16s var(--ease)}
.chip:active{transform:scale(.95)}
.chip .ico{width:15px;height:15px;stroke-width:2.6;display:none}
.chip[aria-pressed="true"]{background:var(--lilac);color:var(--ink);box-shadow:none}
.chip[aria-pressed="true"] .ico{display:block}
@media (hover:hover){.chip:not([aria-pressed="true"]):not(.chip-clear):hover{box-shadow:inset 0 0 0 1px var(--lilac)}}
.chip-clear{background:none;box-shadow:none;color:var(--lilac);text-decoration:underline;text-underline-offset:3px;padding:0 10px}

/* results and the board */
.results{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:14px 0 10px;min-height:20px}
.results p{color:var(--muted);font-size:14px}
.results b{color:var(--text);font-weight:800;font-size:15px}
.board{padding-top:6px;padding-bottom:8px}
.feed{display:grid;gap:14px}

/* ad cards */
.card{position:relative;background:var(--raised);border-radius:24px;padding:16px 16px 18px;box-shadow:inset 0 0 0 1px rgba(244,241,250,.05);transition:transform .2s var(--ease),background-color .2s,box-shadow .2s}
.card:has(.card-open:active){transform:scale(.985)}
@media (hover:hover){.card:not(.card-private):hover{background:var(--raised-hi);box-shadow:inset 0 0 0 1px rgba(183,156,255,.3)}}
.card.is-selected{background:var(--raised-hi);box-shadow:inset 0 0 0 1.5px var(--lilac)}
.card.is-selected .heart{background:var(--tile-3)}
.card.is-selected .noexp{color:var(--lilac-hover)}
.card-top{display:flex;align-items:center;gap:12px}
.logo-tile{flex:none;width:56px;height:56px;border-radius:16px;background:#fff;display:grid;place-items:center;overflow:hidden}
.logo-tile img{width:34px;height:34px;object-fit:contain}
.logo-tile.plain{background:var(--raised-2);color:var(--lilac)}
.logo-tile.plain .ico{width:26px;height:26px}
.logo-tile.lg{width:68px;height:68px;border-radius:20px}
.logo-tile.lg img{width:42px;height:42px}
.logo-tile.sm{width:48px;height:48px;border-radius:14px}
.logo-tile.sm img{width:29px;height:29px}
.logo-tile.xs{width:30px;height:30px;border-radius:9px}
.logo-tile.xs img{width:19px;height:19px}
.logo-tile.xs .ico{width:16px;height:16px}
.card-who{flex:1;min-width:0;line-height:1.3}
.card-practice{display:block;font-weight:700;font-size:14.5px}
.card-where{display:block;color:var(--muted);font-size:13.5px}
.heart{position:relative;z-index:2;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--raised-2);color:var(--text);flex:none;transition:transform .16s var(--ease),background-color .2s,color .2s}
.heart svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linejoin:round;transition:fill .2s}
.heart[aria-pressed="true"]{color:var(--lilac)}
.heart[aria-pressed="true"] svg{fill:var(--lilac)}
.heart:active{transform:scale(.86)}
.heart.pop svg{animation:pop .38s var(--ease)}
.heart.big{width:56px;height:56px;border-radius:18px}
.card-mid{margin-top:14px;display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.badges{display:flex;flex-wrap:wrap;gap:6px}
.badges:empty{display:none}
.badge-new,.badge-applied{display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:7px;font-size:11px;font-weight:800;letter-spacing:.07em;text-transform:uppercase}
.badge-new{background:var(--lime);color:var(--ink)}
.badge-applied{box-shadow:inset 0 0 0 1.5px var(--lime);color:var(--lime)}
.card-title{font-size:19px;line-height:1.25;font-weight:700;letter-spacing:-.01em}
.card-open{text-decoration:none;color:inherit}
.card-open::after{content:"";position:absolute;inset:0;border-radius:24px;z-index:1}
.card-open:focus-visible{outline:0}
.card-open:focus-visible::after{outline:2px solid var(--lime);outline-offset:3px}
.mini-chips,.ad-chips{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.mini-chips li,.ad-chips li{min-height:30px;padding:5px 12px;border-radius:999px;background:var(--raised-2);font-size:13px;font-weight:600;display:inline-flex;align-items:center;line-height:1.3}
.mini-chips li.pay,.ad-chips li.pay{background:rgba(183,156,255,.2);color:#ECE5FF}
.mini-chips li.noexp,.ad-chips li.noexp{box-shadow:inset 0 0 0 1.5px rgba(183,156,255,.55);background:none;color:var(--lilac)}
.mini-chips li.close,.ad-chips li.close{background:none;box-shadow:none;padding-left:4px;padding-right:4px;color:var(--muted);font-weight:500}

/* the private listings card (his words) */
.card-private{background:var(--lilac);color:var(--ink);box-shadow:none;padding:22px 20px 20px}
.card-private:has(.pc-btn:active){transform:scale(.985)}
.pc-h{font-family:var(--display);font-weight:600;font-size:22px;line-height:1.14;letter-spacing:-.02em;margin:0 0 10px;max-width:16ch}
.card-private p{margin:0 0 18px;font-size:15.5px;line-height:1.5;color:#21173A;font-weight:500;max-width:44ch}
.card-private :focus-visible{outline-color:var(--ink)}
.pc-btn::after{content:"";position:absolute;inset:0;border-radius:24px}

/* buttons */
.jobs-app .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:0 22px;border-radius:999px;font-weight:700;font-size:15.5px;line-height:1.2;text-decoration:none;white-space:nowrap;border:0;cursor:pointer;transition:transform .16s var(--ease),background-color .2s,color .2s,box-shadow .2s}
.jobs-app .btn:active{transform:scale(.97)}
.jobs-app .btn .ico{width:18px;height:18px}
.jobs-app .btn .arrow{display:none}
.jobs-app .btn-lilac,.jobs-app .btn-primary{background:var(--lilac);color:var(--ink)}
@media (hover:hover){.jobs-app .btn-lilac:hover,.jobs-app .btn-primary:hover{background:var(--lilac-hover)}}
.jobs-app .btn-ink{background:var(--ink);color:var(--text)}
@media (hover:hover){.jobs-app .btn-ink:hover{background:#2A1F45}}
.jobs-app .btn-ghost{background:none;color:var(--text);box-shadow:inset 0 0 0 1.5px var(--line-2)}
@media (hover:hover){.jobs-app .btn-ghost:hover{box-shadow:inset 0 0 0 1.5px var(--lilac)}}
.jobs-app .btn:disabled{background:var(--raised-2);color:var(--muted);cursor:not-allowed;box-shadow:none}

/* empty results and the empty list */
.empty{background:var(--raised);border-radius:24px;padding:22px 20px;box-shadow:inset 0 0 0 1px rgba(183,156,255,.35)}
.empty-h{font-family:var(--display);font-weight:600;font-size:19px;line-height:1.2;letter-spacing:-.015em;margin:0 0 8px;display:block}
.empty p:not(.empty-h){color:var(--muted);margin:0 0 16px;max-width:46ch}
.empty p:last-child{margin-bottom:0}
.p2-empty strong{display:block;font-family:var(--display);font-weight:600;font-size:19px;line-height:1.2;letter-spacing:-.015em;margin:0 0 8px;color:var(--text)}

/* the ad, shared by the phone sheet, the desktop panel and the job page */
.ad-head{display:flex;align-items:center;gap:14px}
.ad-who{min-width:0}
.ad-practice{font-weight:700;font-size:16px}
.ad-addr{margin-top:2px;color:var(--muted);font-size:14px}
.ad .badges{margin-top:22px}
.ad-title{font-family:var(--sans);font-weight:800;font-size:26px;line-height:1.16;letter-spacing:-.02em;margin:10px 0 0;outline:0}
.ad-chips li{min-height:34px;font-size:14px;padding:6px 14px}
.ad-chips li.close{padding-left:0}
.ad-actions{display:flex;align-items:center;gap:10px;margin-top:20px}
.ad-actions .btn{height:52px;padding:0 28px}
.ad-actions .heart.big{width:52px;height:52px;border-radius:16px}
.rtw-line{margin-top:20px;padding:14px 16px;border-radius:16px;background:rgba(183,156,255,.1);box-shadow:inset 0 0 0 1px rgba(183,156,255,.38);font-size:14.5px;line-height:1.5}
.rtw-line b{color:var(--lilac)}
.ad-body{margin-top:22px;font-size:15.5px;line-height:1.65;color:#E7E2F1}
.ad-body h2,.ad-body h3{font-size:16px;font-weight:800;margin:26px 0 8px;color:var(--text);font-family:var(--sans);letter-spacing:0}
.ad-body p{margin:0 0 12px}
.ad-body ul{margin:0 0 12px;padding-left:20px}
.ad-body li{margin:0 0 6px;padding-left:2px}
.ad-body li::marker{color:var(--lilac)}
.ad-body .p2-q-intro{margin-top:22px;font-weight:700;color:var(--text)}
.ad-meta{margin-top:24px;padding-top:16px;border-top:1px solid var(--line);color:var(--muted);font-size:13.5px;display:grid;gap:6px}
.ad.fade{animation:fadeUp .32s var(--ease) backwards}

/* the job page: the ad on its own address */
.adpage{padding-top:14px;max-width:820px}
.back-link{display:inline-flex;align-items:center;gap:6px;min-height:44px;color:var(--muted);text-decoration:none;font-weight:600;font-size:14px}
@media (hover:hover){.back-link:hover{color:var(--text)}}
.back-link .ico{width:18px;height:18px}
.adpage .ad{margin-top:8px}
.adpage-body .ad-body,.adpage .rtw-line{max-width:36em}
.adpage .ad-title{font-family:var(--display);font-weight:600;font-size:clamp(28px,7vw,40px);line-height:1.08;letter-spacing:-.025em}
.adpage-body{max-width:820px;padding-bottom:12px}
.ad-end{display:none}
/* phone job page: the apply bar carries Apply and the heart, so the in-text pair is hidden; the util bar's second back link too */
@media (max-width:1023px){html.js .adpage .ad-actions{display:none}html[data-ad] .util{display:none}}
/* the job page's right-hand card on a computer: logo, practice, place, pay, key facts, Apply, heart */
.ad-side{display:none}
.side-practice{font-weight:800;font-size:18px;line-height:1.25;margin-top:14px}
.side-addr{color:var(--muted);font-size:14px;margin-top:4px}
.side-pay{font-family:var(--display);font-weight:600;font-size:21px;letter-spacing:-.02em;line-height:1.2;margin-top:18px}
.side-facts{list-style:none;margin:16px 0 0;padding:16px 0 0;border-top:1px solid var(--line);display:grid;gap:10px;font-size:14.5px;line-height:1.4}
.side-facts li{display:flex;gap:10px;align-items:flex-start}
.side-facts li::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--lilac);margin-top:8px}
.side-actions{display:flex;gap:10px;margin-top:22px}
.side-actions .btn{flex:1;height:54px;padding:0 16px}
.side-actions .heart.big{width:54px;height:54px;border-radius:17px}
.side-ref{margin-top:14px;color:var(--muted);font-size:13px}
.ad-side .heart.big{background:var(--tile-3)}
.closed-note{margin-top:16px;padding:14px 16px;border-radius:16px;background:rgba(255,143,163,.1);box-shadow:inset 0 0 0 1px rgba(255,143,163,.45);color:#FFD6DD;font-size:14.5px;line-height:1.5}
.closed-card{margin-top:24px;background:var(--raised);border-radius:24px;padding:22px 20px}
.closed-card h2{font-family:var(--display);font-weight:600;font-size:22px;letter-spacing:-.02em;line-height:1.15;margin:0 0 10px}
.closed-card p{color:var(--muted)}
.closed-card a{color:var(--lilac);font-weight:700}

/* phone sheet */
.sheet,.js .flow{position:fixed;inset:0;z-index:50}
.js .flow{z-index:60}
.scrim{position:absolute;inset:0;background:rgba(8,5,14,.68);opacity:0;transition:opacity .34s ease}
.sheet.open .scrim,.flow.open .scrim{opacity:1}
.sheet-body{position:absolute;left:0;right:0;bottom:0;top:calc(env(safe-area-inset-top) + 10px);background:var(--sheet);border-radius:28px 28px 0 0;display:flex;flex-direction:column;transform:translateY(103%);transition:transform .46s var(--ease-sheet);outline:0;box-shadow:0 -1px 0 var(--line)}
.sheet.open .sheet-body{transform:none}
@media (min-width:768px){.sheet-body{left:max(0px,calc(50% - 380px));right:max(0px,calc(50% - 380px))}}
.sheet-grab{flex:none;height:30px;display:grid;place-items:center;touch-action:none;cursor:grab}
.sheet-grab span{width:44px;height:5px;border-radius:3px;background:rgba(244,241,250,.3)}
.sheet-close{position:absolute;top:14px;right:14px;z-index:3}
.sheet-scroll{flex:1;overflow:auto;padding:4px 20px 30px;overscroll-behavior:contain}
.sheet-scroll .ad-head{padding-right:50px}
.sheet-bar,.panel-bar{flex:none;display:flex;gap:10px;padding:12px 16px calc(12px + env(safe-area-inset-bottom));border-top:1px solid var(--line);background:var(--sheet)}
.sheet-bar .btn,.panel-bar .btn{flex:1;height:56px;font-size:16.5px}

/* desktop side panel */
.panel{display:none}

/* track your applications */
.track{padding-top:44px;padding-bottom:8px}
.track-head{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.track-head h2,.sec-h{font-family:var(--display);font-weight:600;font-size:22px;letter-spacing:-.02em;line-height:1.15}
.track-card{background:var(--raised);border-radius:24px;padding:18px 16px 20px;display:grid;gap:18px}
.track-card > p{color:var(--muted);max-width:52ch}
.tc-list{display:grid;gap:12px}
.tc-item{background:var(--raised-2);border-radius:18px;padding:14px 16px}
.tc-top{display:flex;align-items:center;gap:12px}
.tc-title{font-weight:700;font-size:16px;line-height:1.3}
.tc-sub{margin-top:2px;color:var(--muted);font-size:14px}
.tc-stage{margin-top:12px;display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;font-size:14px}
.tc-chip{display:inline-flex;align-items:center;height:26px;padding:0 10px;border-radius:999px;background:var(--lime);color:var(--ink);font-weight:800;font-size:12.5px}
.tc-chip.ended{background:var(--raised);color:var(--muted);box-shadow:inset 0 0 0 1px var(--line-2)}
.tc-next{color:var(--muted)}
.tc-bar{margin-top:12px;height:5px;border-radius:3px;background:rgba(244,241,250,.14);overflow:hidden}
.tc-bar i{display:block;height:100%;background:var(--lime);border-radius:3px;transform-origin:left center;transition:transform .4s var(--ease)}
.tc-hint{color:var(--muted);font-size:13.5px}
.tc-actions{display:flex;flex-wrap:wrap;gap:10px}
.tc-right{display:grid;gap:12px;justify-items:start}

/* how it works, for practices, training */
.band{padding-top:44px}
.band-card{background:var(--raised);border-radius:24px;padding:20px 18px 22px}
.band-card > p{color:#E7E2F1;max-width:62ch;margin-top:10px}
.band-card > p:first-of-type{margin-top:12px}
.eyebrow{display:block;font-size:12.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin:0 0 6px}
.how-list{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:10px}
.how-list li{background:var(--raised-2);border-radius:18px;padding:14px 16px;color:#E7E2F1;line-height:1.55}
.band-card .btn{margin-top:16px}
.p2-also{margin-top:14px;color:var(--muted)}
.p2-also a{color:var(--lilac);font-weight:700}
.practice-card .p2-panel-foot{margin-top:16px;color:var(--muted)}
.practice-card .p2-panel-foot a{color:var(--lilac);font-weight:700}
.practice-card form{margin-top:16px}

/* footer */
.foot{margin-top:48px;padding-top:32px;padding-bottom:36px;border-top:1px solid var(--line);color:var(--muted);font-size:14px;display:grid;gap:10px}
.foot .mark{font-size:16px;padding:0}
.foot nav{display:flex;flex-wrap:wrap;gap:4px 20px}
.foot nav a,.foot .f-phone{color:var(--text);text-decoration:none;min-height:44px;display:inline-flex;align-items:center}
@media (hover:hover){.foot nav a:hover,.foot .f-phone:hover{text-decoration:underline;text-underline-offset:3px}}

/* phone tab bar and the job page's apply bar */
.tabbar,.apply-bar{position:fixed;left:0;right:0;bottom:0;z-index:40;height:calc(var(--tabbar) + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);background:var(--glass);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-top:1px solid var(--line)}
.tabbar{display:grid;grid-template-columns:repeat(3,1fr)}
.tb{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:11.5px;font-weight:700;color:var(--muted);position:relative;text-decoration:none;transition:color .2s}
.tb-ico{width:58px;height:30px;border-radius:999px;display:grid;place-items:center;transition:background-color .22s,color .22s}
.tb .ico{width:22px;height:22px}
.tb[aria-current="true"]{color:var(--text)}
.tb[aria-current="true"] .tb-ico{background:rgba(183,156,255,.22);color:var(--lilac)}
.tb .count-dot{position:absolute;top:5px;left:calc(50% + 8px)}
.tb:active .tb-ico{transform:scale(.92)}
.apply-bar{display:flex;align-items:center;gap:10px;padding:8px 16px calc(8px + env(safe-area-inset-bottom));height:auto}
.apply-bar .btn{flex:1;height:52px}
.apply-bar .heart{width:52px;height:52px;border-radius:16px}

/* toast */
.toast{position:fixed;left:50%;bottom:calc(var(--tabbar) + 18px + env(safe-area-inset-bottom));z-index:80;transform:translate(-50%,16px);opacity:0;background:var(--text);color:var(--ink);font-weight:700;font-size:14.5px;padding:12px 18px;border-radius:999px;pointer-events:none;max-width:calc(100% - 32px);text-align:center;transition:transform .3s var(--ease),opacity .22s}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* the apply steps (both job forms). Without JavaScript: a plain form on the page. */
.flow{margin-top:28px}
.flow-card{background:var(--sheet);border-radius:24px;outline:0}
.flow-head{padding:16px 16px 12px;border-bottom:1px solid var(--line)}
.fh-row{display:flex;align-items:center;gap:8px}
.fh-for{flex:1;min-width:0;display:flex;align-items:center;justify-content:center;gap:10px}
.fh-title{font-weight:700;font-size:15px;line-height:1.3;font-family:var(--sans);letter-spacing:0;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;text-align:center}
.bars{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin:12px 4px 0}
.bars i{display:block;height:5px;border-radius:3px;background:rgba(244,241,250,.14);overflow:hidden;position:relative}
.bars i::after{content:"";position:absolute;inset:0;border-radius:3px;background:var(--lime);transform:scaleX(0);transform-origin:left center;transition:transform .4s var(--ease)}
.bars i.on::after{transform:scaleX(1)}
.fh-step{margin:10px 4px 0;font-size:13px;color:var(--muted);font-weight:600}
.fh-step b{color:var(--text);font-weight:700}
.flow-body{padding:24px 20px 32px}
.flow-intro{color:var(--muted);margin-bottom:22px;max-width:52ch}
.flow-step + .flow-step{margin-top:36px}
.step-h{font-family:var(--display);font-weight:600;font-size:26px;line-height:1.1;letter-spacing:-.025em;margin:0 0 22px;outline:0}
.flow-foot{padding:12px 16px calc(12px + env(safe-area-inset-bottom));border-top:1px solid var(--line);background:inherit;border-radius:0 0 24px 24px}
.btn-next{width:100%;height:58px;font-size:17px}
html:not(.js) .flow-head .icon-btn,html:not(.js) .bars,html:not(.js) .fh-step,html:not(.js) .flow-foot,html:not(.js) .review{display:none}
.js .flow{margin:0}
.js .flow-card{position:absolute;inset:0;background:var(--bg);border-radius:0;display:flex;flex-direction:column;transform:translateY(100%);transition:transform .46s var(--ease-sheet)}
.js .flow.open .flow-card{transform:none}
.js .flow-head{flex:none;padding:calc(8px + env(safe-area-inset-top)) 12px 12px}
.js .flow-body{flex:1;overflow:auto;overscroll-behavior:contain;padding:26px 20px 36px}
.js .flow-step + .flow-step{margin-top:0}
.js .flow-foot{flex:none;border-radius:0}
.js .flow .p2-send > button[type=submit]{display:none}
.js .flow[data-at]:not([data-at="1"]) .p2-signed,.js .flow[data-at]:not([data-at="1"]) .flow-intro{display:none}
.js .flow-step.fwd{animation:inR .26s var(--ease) backwards}
.js .flow-step.back{animation:inL .26s var(--ease) backwards}
@media (min-width:768px){
  .js .flow-card{inset:auto;left:50%;top:50%;width:min(640px,calc(100% - 48px));height:min(880px,calc(100% - 48px));border-radius:28px;background:var(--sheet);box-shadow:inset 0 0 0 1px var(--line),0 40px 80px rgba(0,0,0,.45);overflow:hidden;opacity:0;transform:translate(-50%,-47%) scale(.97);transition:transform .38s var(--ease),opacity .26s ease}
  .js .flow.open .flow-card{opacity:1;transform:translate(-50%,-50%)}
  .js .flow-head{padding:14px 16px}
  .js .flow-body{padding:32px 36px 40px}
  .js .flow-foot{padding:14px 20px}
}

/* form pieces: the real fields the shared builders write (functions/_lib/publicjobs.js) */
.jobs-app fieldset{border:0;margin:0 0 26px;padding:0;min-width:0}
.jobs-app legend{font-weight:700;font-size:16px;line-height:1.4;margin:0 0 12px;padding:0;color:var(--text)}
.p2-group > legend{font:800 20px/1.3 var(--sans);margin-bottom:16px}
.p2-choice{display:flex;flex-wrap:wrap;gap:8px}
.p2-choice > .p2-hint,.p2-choice > .p2-stop,.p2-choice > .p2-field-err{flex-basis:100%}
.p2-choice > .p2-hint{margin:-4px 0 4px}
.p2-opt{position:relative;display:flex;align-items:center;gap:12px;min-height:46px;padding:10px 16px;border-radius:999px;background:var(--raised);box-shadow:inset 0 0 0 1.5px rgba(244,241,250,.08);cursor:pointer;font-weight:500;line-height:1.4;transition:transform .16s var(--ease),box-shadow .2s,background-color .2s,color .2s}
.p2-stacked .p2-opt,.p2-choice[data-qkey] .p2-opt,.p2-cvpick .p2-opt{flex-basis:100%;min-height:54px;padding:13px 16px;border-radius:16px}
.p2-opt:active{transform:scale(.98)}
.p2-opt input,.p2-check input{-webkit-appearance:none;appearance:none;flex:none;width:22px;height:22px;margin:0;border-radius:50%;box-shadow:inset 0 0 0 2px var(--muted);display:grid;place-items:center;background:none;cursor:pointer;transition:background-color .2s,box-shadow .2s}
.p2-opt input[type=checkbox],.p2-check input{border-radius:7px}
.p2-opt input:checked,.p2-check input:checked{background:var(--lilac);box-shadow:none}
.p2-opt input[type=radio]:checked::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--ink)}
.p2-opt input[type=checkbox]:checked::after,.p2-check input:checked::after{content:"";width:11px;height:6px;border-left:2.5px solid var(--ink);border-bottom:2.5px solid var(--ink);transform:translateY(-1px) rotate(-45deg)}
.p2-opt input:focus-visible,.p2-check input:focus-visible{outline:2px solid var(--lime);outline-offset:3px}
.p2-opt:has(input:checked){box-shadow:inset 0 0 0 1.5px var(--lilac);background:rgba(183,156,255,.13)}
.p2-opt:has(input:disabled){opacity:.6;cursor:default}
.p2-days .p2-opt{flex:1 0 0;min-width:0;justify-content:center;padding:0;min-height:50px;border-radius:14px;font-weight:700;font-size:14px}
.p2-days .p2-opt input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.p2-days .p2-opt:has(input:focus-visible){outline:2px solid var(--lime);outline-offset:2px}
.p2-days .p2-opt:has(input:checked){background:var(--lilac);color:var(--ink);box-shadow:none}
fieldset[aria-invalid="true"] .p2-opt{box-shadow:inset 0 0 0 1.5px rgba(255,143,163,.5)}
.jobs-app .field{margin:0 0 18px}
.jobs-app .field > label{display:block;font-weight:700;font-size:15px;margin:0 0 8px}
.field-row{display:grid;gap:0 14px}
@media (min-width:640px){.field-row{grid-template-columns:1fr 1fr}}
.jobs-app input[type=text],.jobs-app input[type=email],.jobs-app input[type=tel],.jobs-app select,.jobs-app textarea{width:100%;height:54px;padding:0 16px;border-radius:16px;background:var(--raised);border:1.5px solid rgba(244,241,250,.13);color:var(--text);font-size:16px;outline:0;transition:border-color .2s,box-shadow .2s}
.jobs-app select{appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--lilac) 50%),linear-gradient(135deg,var(--lilac) 50%,transparent 50%);background-position:calc(100% - 22px) 52%,calc(100% - 16px) 52%;background-size:6px 6px;background-repeat:no-repeat;padding-right:40px}
.jobs-app select option{background:var(--raised);color:var(--text)}
.jobs-app input:not([type=radio],[type=checkbox]):focus,.jobs-app select:focus,.jobs-app textarea:focus{border-color:var(--lilac);box-shadow:0 0 0 4px rgba(183,156,255,.24)}
.jobs-app textarea{height:auto;min-height:210px;padding:14px 16px;line-height:1.55;resize:vertical}
.jobs-app input[aria-invalid="true"],.jobs-app textarea[aria-invalid="true"],.jobs-app select[aria-invalid="true"]{border-color:var(--bad)}
.p2-hint{margin-top:8px;color:var(--muted);font-size:13.5px;line-height:1.5}
.p2-letter-intro{margin:0 0 14px;padding:16px 18px;border-radius:18px;background:rgba(183,156,255,.1);box-shadow:inset 0 0 0 1px rgba(183,156,255,.38);font-size:15px;line-height:1.55;font-weight:500;color:var(--text)}
.p2-field-err,.rc-err{margin-top:8px;color:var(--bad);font-size:13.5px;font-weight:600;line-height:1.45}
.rc-err{margin:12px 0 0}
.p2-money{position:relative;max-width:220px}
.p2-money-sign{position:absolute;left:16px;top:50%;transform:translateY(-50%);color:var(--muted);font-weight:700;pointer-events:none}
.jobs-app .p2-money input{padding-left:32px}
.p2-stop{margin-top:6px;padding:14px 16px;border-radius:16px;background:rgba(255,143,163,.1);box-shadow:inset 0 0 0 1px rgba(255,143,163,.45);color:#FFD6DD;font-weight:600;font-size:14.5px;line-height:1.5}
.p2-check{display:flex;gap:12px;align-items:center;padding:14px 16px;border-radius:16px;background:var(--raised);margin:6px 0 0;font-weight:600;line-height:1.4}
.p2-check label{cursor:pointer;flex:1}
.p2-check:has(input[aria-invalid="true"]){box-shadow:inset 0 0 0 1.5px rgba(255,143,163,.55)}
.p2-check-hint{margin:8px 0 18px}
.jobs-app .p2-cv > label{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.p2-cv input[type=file]{display:block;width:100%;min-height:150px;padding:28px 18px;border-radius:24px;border:2px dashed rgba(183,156,255,.5);background:rgba(183,156,255,.06);color:var(--muted);font-size:14px;cursor:pointer;transition:background-color .2s,border-color .2s}
@media (hover:hover){.p2-cv input[type=file]:hover{background:rgba(183,156,255,.11)}}
.p2-cv input[type=file]:focus-visible{outline:2px solid var(--lime);outline-offset:3px}
.p2-cv input[type=file]::file-selector-button{display:block;margin:0 0 12px;height:48px;padding:0 22px;border:0;border-radius:999px;background:var(--lilac);color:var(--ink);font:700 15px var(--sans);cursor:pointer}
.p2-cv input[type=file][aria-invalid="true"]{border-color:var(--bad)}
.p2-signed{margin:0 0 20px;padding:12px 14px;border-radius:16px;background:var(--raised-2);font-size:14.5px;line-height:1.5}
.p2-signed a{color:var(--lilac);font-weight:700}
.p2-hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.p2-progress{margin-top:14px;display:grid;gap:8px}
.p2-progress progress{width:100%;height:8px;border-radius:4px;overflow:hidden;appearance:none;-webkit-appearance:none;background:rgba(244,241,250,.14);border:0}
.p2-progress progress::-webkit-progress-bar{background:rgba(244,241,250,.14)}
.p2-progress progress::-webkit-progress-value{background:var(--lime)}
.p2-progress progress::-moz-progress-bar{background:var(--lime)}
.p2-progress-text{color:var(--muted);font-size:13.5px}
.p2-send{margin-top:8px}
.p2-send > button[type=submit]{width:100%;height:58px;font-size:17px;margin-top:16px}
.p2-notice{margin-top:16px;background:var(--raised);border-radius:18px;padding:0 16px}
.p2-notice summary{cursor:pointer;padding:16px 0;font-weight:700;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px}
.p2-notice summary::-webkit-details-marker{display:none}
.p2-notice summary::after{content:"+";color:var(--lilac);font-size:22px;line-height:1;font-weight:600;transition:transform .25s var(--ease)}
.p2-notice[open] summary::after{transform:rotate(45deg)}
.p2-notice p{font-size:13.5px;color:var(--muted);line-height:1.6;margin:0 0 12px}
.p2-notice a{color:var(--lilac)}
.band-card .p2-notice{background:var(--raised-2)}
.rc-note{margin-top:16px;color:var(--muted)}
.rc-note a{color:var(--lilac)}

/* check and send: what was typed, with a way back to each part */
.review{margin-bottom:8px}
.rv-group{background:var(--raised);border-radius:20px;padding:14px 16px 6px;margin:0 0 12px}
.rv-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:4px}
.rv-head h4{font-size:15.5px;font-weight:800}
.rv-edit{color:var(--lilac);font-weight:700;font-size:14px;min-height:44px;min-width:44px;display:inline-flex;align-items:center;justify-content:center;padding:0 6px;text-decoration:underline;text-underline-offset:3px}
.rv-group dl{margin:0}
.rv-row{padding:9px 0;border-top:1px solid var(--line)}
.rv-row dt{color:var(--muted);font-size:13px;line-height:1.4}
.rv-row dd{margin:2px 0 0;font-size:15px;line-height:1.45;overflow-wrap:anywhere;white-space:pre-line}
.rv-row dd.clamp{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;line-clamp:4;overflow:hidden}

/* sent */
.form-success{display:none;text-align:center;padding-top:6px}
.form-success.show{display:block}
.form-success:focus{outline:0}
.done-tick{width:76px;height:76px;border-radius:50%;background:var(--lime);color:var(--ink);display:grid;place-items:center;margin:0 auto 20px}
.done-tick .ico{width:34px;height:34px;stroke-width:2.6}
.form-success h3{font-family:var(--display);font-weight:600;font-size:26px;line-height:1.1;letter-spacing:-.025em;margin:0 0 12px}
.form-success > p{color:var(--muted);max-width:44ch;margin:0 auto 10px}
.form-success .p2-ref{color:var(--text)}
.form-success a{color:var(--lilac);font-weight:700}
.p2-train{text-align:left;margin-top:20px;border-radius:22px;padding:18px 16px;box-shadow:inset 0 0 0 1px var(--line-2)}
.p2-train-h{font-weight:800;font-size:16px;font-family:var(--sans);letter-spacing:0}
.p2-train p{color:var(--muted);margin-top:4px}
.p2-train-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.p2-train-links .btn{color:var(--ink)}
.p2-train-links .btn-ghost{color:var(--text)}
.p2-train-phone a{color:var(--lilac)}

/* phones: lift the first job card higher above the tab bar (review item, 19 October 2026) */
@media (max-width:1023px){
  .hero{padding-top:6px}
  .hero h1{margin-bottom:10px}
  .search-wrap{padding-top:14px}
  .browse{padding-top:12px}
  .label{margin-bottom:2px}
  .tiles{padding-top:6px;padding-bottom:8px}
  .chips{padding-top:4px;padding-bottom:6px}
  .results{padding:8px 0 8px;min-height:0}
  .board{padding-top:0}
}

/* desktop */
@media (min-width:1024px){
  body.jobs-app{padding-bottom:0}
  .util{display:none}
  .hdr-in{height:72px}
  .hdr-call,.hdr-signin,.signin-menu{display:none}
  .hdr-tabs{display:flex;gap:4px;background:var(--raised);padding:4px;border-radius:999px}
  .hdr-right{display:flex;flex-direction:column;align-items:flex-end;gap:6px;font-size:14px}
  .hdr-right{position:relative;top:-2px}
  .hdr-logins .login-tab{font-size:14px}
  .hdr-contact{display:flex;align-items:center;gap:24px}
  .hdr-contact a{text-decoration:none;color:var(--muted);line-height:20px;transition:color .2s}
  .hdr-contact .h-phone{color:var(--text);font-weight:700}
  .tabbar,.apply-bar{display:none}
  .toast{bottom:28px}
  .hero{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:56px;align-items:end;padding-top:44px}
  .hero h1{font-size:clamp(56px,5vw,74px);margin:0;max-width:720px}
  .lede{font-size:17px;padding-bottom:12px;max-width:424px}
  .search-wrap{padding-top:34px}
  .search{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) auto;border-radius:999px;padding:6px}
  .sf-row{min-height:60px;border-radius:999px;padding:0 20px}
  .sf-q{grid-column:auto;border-bottom:0;border-radius:999px}
  .sf-w{border-radius:0;position:relative}
  .sf-w::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:1px;background:var(--line-2)}
  .sf-w:focus-within{border-radius:999px}
  .sf-go{height:56px;padding:0 32px;font-size:16px;margin:0}
  .browse{padding-top:34px}
  .browse-in{display:flex;flex-wrap:wrap;align-items:center;gap:6px 22px;max-width:1328px;margin:0 auto;padding:0 var(--gut)}
  .tiles{overflow:visible;scroll-snap-type:none;padding:8px 0}
  .tile{flex:1 1 250px;max-width:320px;height:110px;padding:18px 20px}
  .tile-name{font-size:22px}
  .chips{flex-wrap:wrap;overflow:visible;padding:0}
  .chip{height:40px}
  .board.has-panel{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:28px;align-items:start}
  .card{padding:20px 20px 22px}
  .board.has-panel .panel{display:flex;flex-direction:column;position:sticky;top:88px;margin-top:44px;height:calc(100vh - 120px);max-height:920px;min-height:500px;background:var(--sheet);border-radius:28px;box-shadow:inset 0 0 0 1px var(--line);overflow:hidden}
  .panel-scroll{flex:1;overflow:auto;padding:30px 34px 30px;overscroll-behavior:auto} /* chains to the page at the end, so the panel slides up and its Apply bar shows */
  .panel-bar{padding:14px 20px;border-radius:0 0 28px 28px}
  .panel-empty{flex:1;display:grid;place-items:center;color:var(--muted);padding:40px;text-align:center}
  .ad-title{font-size:30px}
  .track,.band{padding-top:64px}
  .track-head h2,.sec-h{font-size:28px}
  .track-card{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);align-items:start;gap:28px 40px;padding:28px 32px}
  .band-card{padding:28px 32px 30px}
  .how-list{grid-template-columns:repeat(3,1fr)}
  .practice-card form{max-width:640px}
  .foot{grid-template-columns:auto 1fr auto;align-items:center;gap:12px 32px}
  .adpage{padding-top:28px}
  .adpage.has-side{max-width:1440px;display:grid;grid-template-columns:minmax(0,820px) 372px;column-gap:64px;justify-content:start;align-items:start}
  .adpage.has-side .adpage-body .ad-body,.adpage.has-side .rtw-line{max-width:600px}
  .adpage.has-side > .ad .badges{margin-top:6px}
  .adpage.has-side .back-link{grid-column:1/-1}
  .adpage.has-side > .ad,.adpage.has-side .adpage-body{grid-column:1;max-width:820px}
  .adpage.has-side > .ad .ad-head,.adpage.has-side > .ad .ad-actions,.adpage.has-side > .ad .ad-chips,.adpage.has-side .ad-end{display:none}
  .adpage.has-side .ad-side{display:block;grid-column:2;grid-row:2/4;position:sticky;top:88px;margin-top:14px;background:var(--raised);border-radius:28px;padding:26px 26px 24px;box-shadow:inset 0 0 0 1px var(--line)}
  .ad-end{display:flex;margin-top:24px}
  .ad-end .btn{height:52px;padding:0 28px}
}
@media (hover:hover) and (min-width:1024px){.tile:hover{transform:translateY(-3px)}.hdr-contact a:hover{color:var(--text)}}

/* motion: one strong ease-out, 160 to 460ms */
@keyframes pop{0%{transform:scale(1)}40%{transform:scale(1.32)}100%{transform:scale(1)}}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes slideIn{from{opacity:0;transform:translateX(40px)}to{opacity:1;transform:none}}
@keyframes cardIn{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes inR{from{opacity:0;transform:translateX(32px)}to{opacity:1;transform:none}}
@keyframes inL{from{opacity:0;transform:translateX(-32px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:no-preference){
  .hero h1{animation:rise .38s var(--ease) backwards}
  .lede{animation:rise .38s .04s var(--ease) backwards}
  .search-wrap{animation:rise .38s .08s var(--ease) backwards}
  .tile{animation:slideIn .38s .08s var(--ease) backwards}
  .tile:nth-child(2){animation-delay:.12s}
  .tile:nth-child(3){animation-delay:.16s}
  .card.enter{animation:cardIn .36s var(--ease) backwards}
}
@media (prefers-reduced-motion:reduce){
  .jobs-app *,.jobs-app *::before,.jobs-app *::after{animation-duration:.001ms!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:.001ms!important;transition-delay:0s!important}
}

/* the ad surfaces (his call, 19 October 2026: the list stays black, the job itself goes lighter): the phone
   sheet, the desktop panel and the whole job page take the softer purple, lighter cards, muted text 5.3:1 or
   better on every surface, and lilac and lime light. On the job page the light moves by itself and loops with no
   jump: X, Y and size run as three alternate loops of different lengths, so the drift never comes to rest.
   Reduced motion: still. */
.sheet-body,.board.has-panel .panel,html[data-ad]{--bg:#261B40;--raised:#41336A;--raised-2:#4A3A73;--raised-hi:#4B3C7A;--sheet:#2E2249;--tile-3:#56458A;--muted:#C4BBD8;--line:rgba(244,241,250,.11);--line-2:rgba(244,241,250,.2);--glass:rgba(38,27,64,.72)}
.sheet-body,.board.has-panel .panel{isolation:isolate}
.sheet-body::before,.board.has-panel .panel::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:inherit;background:radial-gradient(70% 50% at 100% 0%,rgba(183,156,255,.3),transparent 70%),radial-gradient(60% 40% at 0% 100%,rgba(198,244,50,.12),transparent 70%)}
html[data-ad] body.jobs-app::before,html[data-ad] body.jobs-app::after{display:block}
html[data-ad] body.jobs-app::before{background:radial-gradient(52vw 62vh at 80% 12%,rgba(183,156,255,.42),transparent 68%),radial-gradient(46vw 56vh at 20% 88%,rgba(122,90,255,.34),transparent 68%);animation:auX 37s cubic-bezier(.45,0,.55,1) infinite alternate,auY 53s cubic-bezier(.45,0,.55,1) infinite alternate,auS 29s cubic-bezier(.45,0,.55,1) infinite alternate}
html[data-ad] body.jobs-app::after{background:radial-gradient(38vw 44vh at 16% 20%,rgba(198,244,50,.17),transparent 68%),radial-gradient(34vw 40vh at 86% 90%,rgba(198,244,50,.12),transparent 68%);animation:auX 47s cubic-bezier(.45,0,.55,1) infinite alternate-reverse,auY 31s cubic-bezier(.45,0,.55,1) infinite alternate-reverse,auS 41s cubic-bezier(.45,0,.55,1) infinite alternate-reverse}
@keyframes auX{from{translate:-6vw 0}to{translate:6vw 0}}
@keyframes auY{from{transform:translateY(-5vh)}to{transform:translateY(5vh)}}
@keyframes auS{from{scale:.94}to{scale:1.08}}
@media (max-width:767px){html[data-ad] body.jobs-app::before{background:radial-gradient(120vw 60vh at 90% 0%,rgba(183,156,255,.32),transparent 70%),radial-gradient(100vw 50vh at 10% 100%,rgba(122,90,255,.28),transparent 70%)}html[data-ad] body.jobs-app::after{background:radial-gradient(90vw 40vh at 0% 30%,rgba(198,244,50,.14),transparent 70%)}}
html[data-ad] .adpage.has-side .ad-side{background:rgba(51,39,79,.78);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
@media (prefers-reduced-transparency:reduce){html[data-ad] .adpage.has-side .ad-side{background:var(--raised);-webkit-backdrop-filter:none;backdrop-filter:none}}
html[data-ad] .closed-card,html[data-ad] .track-card,html[data-ad] .band-card{box-shadow:inset 0 0 0 1px rgba(183,156,255,.18)}