/* The public trades pages (/trades, voice_agent/trades_pages.py): the design preview approved on
   29 Oct 2026, with real form controls. The same tokens as app.css (navy, lime, Manrope); this sheet
   stands alone, so the pages load nothing else but web/motion.js. Light only, as the design.
   The end of this sheet gives them the home page's design language and motion (as site.css does). */
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 200 800; font-display: swap; src: url("/app/fonts/manrope-latin.woff2") format("woff2"); }
:root {
  --navy: #0B1530; --navy-2: #142046; --navy-3: #1B2A57; --navy-line: #2A3658;
  --on-navy: #EEF1F8; --on-navy-2: #AEB6CC; --on-navy-3: #8C96B3;
  --lime: #C6F432; --lime-hover: #B0DE1E; --lime-soft: #EEF9C6; --lime-deep: #3F5200;
  --bg: #F5F7FB; --bg-2: #EBEFF6; --surface: #fff; --surface-2: #F8FAFD;
  --line: #E1E6EF; --line-strong: #C9D1DF;
  --text: #0B1530; --text-2: #34405E; --muted: #59637F;
  --ok: #157347; --ok-soft: #E1F3E9; --warn: #8A5300; --warn-soft: #FBF0D9;
  --star: #E8A317;
  --shadow-1: 0 1px 2px rgba(11,21,48,.06), 0 1px 1px rgba(11,21,48,.04);
  --shadow-2: 0 2px 4px rgba(11,21,48,.04), 0 10px 28px rgba(11,21,48,.08);
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;
  --r: 12px; --r-lg: 16px; --r-pill: 999px;
  --font: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --maxw: 1160px;
}
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 16px/1.55 var(--font); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
h1, h2, h3 { margin: 0; line-height: 1.12; letter-spacing: -.5px; font-weight: 800; }
p { margin: 0; }
a { color: inherit; }
.icon { width: 20px; height: 20px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.icon.sm { width: 16px; height: 16px; }
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--s4); }
@media (min-width: 720px) { .wrap { padding: 0 var(--s6); } }
section { padding: var(--s7) 0; }
.muted { color: var(--muted); }
.small { font-size: .875rem; } .tiny { font-size: .78rem; }
.eyebrow { font-size: .74rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.on-navy { background: var(--navy); color: var(--on-navy); }
.on-navy .eyebrow { color: var(--lime); }

/* nav */
.nav { position: sticky; top: 0; z-index: 30; background: var(--navy); border-bottom: 1px solid var(--navy-line); }
.nav .wrap { display: flex; align-items: center; gap: var(--s4); height: 60px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1.1rem; letter-spacing: -.5px; color: var(--on-navy); text-decoration: none; white-space: nowrap; }
.brand .mark { width: 30px; height: 30px; flex: none; }
.brand .for { font-weight: 700; color: var(--lime); font-size: .95rem; letter-spacing: -.2px; }
.nav .links { display: none; gap: var(--s5); margin-left: var(--s4); }
.nav .links a { color: var(--on-navy-2); text-decoration: none; font-weight: 600; font-size: .94rem; }
.nav .end { margin-left: auto; display: flex; gap: var(--s2); align-items: center; }
.nav .signin { color: var(--on-navy); text-decoration: none; font-weight: 600; font-size: .92rem; padding: 8px; white-space: nowrap; }
@media (min-width: 900px) { .nav .links { display: flex; } }
.nav .narrow-only { display: none; }
@media (max-width: 480px) { .nav .wide-only { display: none; } .nav .narrow-only { display: inline; } .nav .signin { padding: 8px 4px; } }
/* phones: the wordmark and "for Trades" always show; they shrink, so the header never scrolls sideways (1 Nov 2026) */
@media (max-width: 440px) { .nav .wrap { gap: var(--s2); } .brand { gap: 6px; font-size: 1rem; } .brand .for { font-size: .82rem; }
  .brand .mark { width: 26px; height: 26px; } .nav .btn.sm { padding-left: 12px; padding-right: 12px; } }
@media (max-width: 374px) { .brand { gap: 4px; font-size: .9rem; letter-spacing: -.4px; } .brand .for { font-size: .74rem; }
  .brand .mark { width: 22px; height: 22px; } .nav .signin { font-size: .85rem; padding: 8px 2px; } .nav .btn.sm { padding-left: 10px; padding-right: 10px; font-size: .82rem; } }
/* with a button in the header too (Post a job, Free profile), the label sits under the wordmark on phones */
@media (max-width: 440px) {
  .nav .wrap:has(.end .btn) .brand { display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto; column-gap: 6px; row-gap: 0; line-height: 1.05; }
  .nav .wrap:has(.end .btn) .brand .mark { grid-row: 1 / span 2; align-self: center; }
  .nav .wrap:has(.end .btn) .brand .for { font-size: .72rem; }
}

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); min-height: 48px; padding: 0 20px; border-radius: var(--r); border: 1px solid transparent;
  font: inherit; font-weight: 800; font-size: .98rem; line-height: 1; background: var(--navy); color: var(--lime); text-decoration: none; white-space: nowrap; cursor: pointer; }
.btn.cta { background: var(--lime); color: var(--navy); }
.btn.secondary { background: var(--surface); color: var(--text); border-color: var(--line-strong); }
.btn.outline { background: transparent; color: var(--on-navy); border-color: #3A4770; }
.btn.sm { min-height: 40px; padding: 0 14px; font-size: .9rem; border-radius: 10px; }
.btn.lg { min-height: 56px; padding: 0 28px; font-size: 1.05rem; }
.btn.block { width: 100%; }

/* chips */
.chip { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: var(--r-pill); font-size: .78rem; font-weight: 700; background: var(--bg-2); color: var(--text-2); white-space: nowrap; }
.chip.ok { background: var(--ok-soft); color: var(--ok); }
.chip.warn { background: var(--warn-soft); color: var(--warn); }
.chip.lime { background: var(--lime-soft); color: var(--lime-deep); }
.chip.navy { background: var(--navy); color: var(--lime); }
.chips { display: flex; gap: var(--s2); flex-wrap: wrap; }

/* cards */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-1); padding: var(--s5); }

/* hero */
.hero { padding: var(--s7) 0 var(--s8); position: relative; overflow: hidden; }
.hero::before { content: ""; position: absolute; right: -30%; top: -30%; width: 90vw; height: 90vw; max-width: 900px; max-height: 900px; border-radius: 50%;
  background: radial-gradient(circle, rgba(198,244,50,.10) 0%, transparent 62%); pointer-events: none; }
.hero .wrap { position: relative; }
.hero h1 { font-size: clamp(2.4rem, 1.4rem + 4.2vw, 4.2rem); letter-spacing: -1.4px; line-height: 1.02; max-width: 15ch; margin-top: var(--s3); }
.hero h1 em { font-style: normal; color: var(--lime); }
.hero .lead { margin-top: var(--s4); max-width: 44ch; font-size: 1.12rem; color: var(--on-navy-2); }
.hero .ticks { margin-top: var(--s5); display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); color: var(--on-navy-2); font-size: .92rem; font-weight: 600; }
.hero .ticks span { display: inline-flex; gap: 8px; align-items: center; }
.hero .ticks .icon { color: var(--lime); }

/* search box */
.searchbox { margin-top: var(--s6); background: var(--surface); border-radius: var(--r-lg); padding: var(--s3); display: grid; gap: var(--s2); max-width: 760px; box-shadow: 0 30px 80px -30px rgba(0,0,0,.6); }
@media (min-width: 720px) { .searchbox { grid-template-columns: 1.5fr 1fr auto; align-items: center; } }
.searchbox .in { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line-strong); border-radius: var(--r); padding: 0 14px; min-height: 52px; color: var(--muted); }
.searchbox .in b { color: var(--text); font-weight: 600; }
.searchbox .in .ph { color: var(--muted); }
.searchbox .btn { min-height: 52px; }
.hero .alt { margin-top: var(--s4); font-size: .92rem; color: var(--on-navy-2); }
.hero .alt a { color: var(--lime); font-weight: 700; }

/* section heads */
.sec-head { max-width: 680px; margin-bottom: var(--s5); }
.sec-head h2 { font-size: clamp(1.7rem, 1.2rem + 2vw, 2.6rem); letter-spacing: -1px; line-height: 1.06; margin-top: var(--s2); }
.sec-head p { margin-top: var(--s3); color: var(--muted); font-size: 1.04rem; }

/* trades grid */
.tgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); }
@media (min-width: 720px) { .tgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.tile { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s4); display: flex; flex-direction: column; gap: var(--s3); text-decoration: none; box-shadow: var(--shadow-1); }
.tile .ic { width: 44px; height: 44px; border-radius: 12px; background: var(--lime-soft); color: var(--lime-deep); display: grid; place-items: center; }
.tile .ic .icon { width: 24px; height: 24px; }
.tile b { font-size: 1.02rem; font-weight: 800; }
.tile span { font-size: .84rem; color: var(--muted); margin-top: -8px; }
.more-link { margin-top: var(--s4); font-weight: 700; display: inline-flex; gap: 6px; align-items: center; }

/* steps */
.steps { display: grid; gap: var(--s4); counter-reset: s; }
@media (min-width: 820px) { .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.step { counter-increment: s; }
.step::before { content: counter(s); display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--navy); color: var(--lime); font-weight: 800; margin-bottom: var(--s3); }
.step h3 { font-size: 1.15rem; }
.step p { margin-top: var(--s2); color: var(--muted); }

/* trade strip */
.strip { border-radius: 20px; padding: var(--s6) var(--s5); display: grid; gap: var(--s5); position: relative; overflow: hidden; }
@media (min-width: 900px) { .strip { grid-template-columns: 1.2fr 1fr; align-items: center; padding: var(--s7); } }
.strip h2 { font-size: clamp(1.7rem, 1.2rem + 2vw, 2.5rem); letter-spacing: -1px; color: var(--on-navy); margin-top: var(--s2); }
.strip p { color: var(--on-navy-2); margin-top: var(--s3); }
.strip ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s3); }
.strip li { display: flex; gap: 10px; color: var(--on-navy); font-weight: 600; }
.strip li .icon { color: var(--lime); margin-top: 2px; }
.strip .btns { display: flex; gap: var(--s3); flex-wrap: wrap; margin-top: var(--s5); }

.honest { display: grid; gap: var(--s3); }
@media (min-width: 820px) { .honest { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.honest .card h3 { font-size: 1.02rem; display: flex; gap: 10px; align-items: center; }
.honest .card p { margin-top: var(--s2); color: var(--muted); font-size: .94rem; }

footer { background: var(--navy); color: var(--on-navy-2); padding: var(--s6) 0; font-size: .88rem; margin-top: var(--s7); }
footer .wrap { display: flex; flex-direction: column; gap: var(--s3); }
footer nav { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); }
footer nav a { color: var(--on-navy-2); text-decoration: none; }

/* page header (light pages) */
.phead { padding: var(--s5) 0 var(--s4); }
.phead h1 { font-size: clamp(1.7rem, 1.3rem + 1.6vw, 2.4rem); letter-spacing: -1px; }
.phead p { color: var(--muted); margin-top: var(--s2); }
.crumbs { font-size: .84rem; color: var(--muted); margin-bottom: var(--s2); }

/* post job */
.progress { display: flex; gap: 6px; margin-top: var(--s4); }
.progress i { flex: 1; height: 6px; border-radius: 3px; background: var(--line); }
.progress i.on { background: var(--navy); }
.form-col { max-width: 640px; }
.qcard { margin-bottom: var(--s4); }
.qcard .qh { display: flex; align-items: center; gap: var(--s3); margin-bottom: var(--s4); }
.qcard .num { width: 30px; height: 30px; border-radius: 50%; background: var(--navy); color: var(--lime); font-weight: 800; font-size: .88rem; display: grid; place-items: center; flex: none; }
.qcard .num.done { background: var(--lime); color: var(--navy); }
.qcard h2 { font-size: 1.12rem; }
.label { display: block; font-weight: 700; font-size: .9rem; margin-bottom: 6px; }
.field + .field { margin-top: var(--s4); }
.input { display: flex; align-items: center; min-height: 48px; padding: 12px 14px; border: 1px solid var(--line-strong); border-radius: var(--r); background: var(--surface); color: var(--text); font-size: 1rem; gap: 10px; }
.input.area { min-height: 110px; align-items: flex-start; line-height: 1.5; }
.input .ph { color: var(--muted); }
.input .chev { margin-left: auto; color: var(--muted); }
.help { display: block; font-size: .82rem; color: var(--muted); margin-top: 6px; }
.opts { display: flex; flex-wrap: wrap; gap: var(--s2); }
.opt { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border: 1px solid var(--line-strong); border-radius: var(--r-pill); background: var(--surface); font-weight: 700; font-size: .92rem; }
.opt.on { background: var(--navy); color: var(--lime); border-color: var(--navy); }
.opt.on .icon { color: var(--lime); }
.photos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s2); }
.ph-slot { aspect-ratio: 1; border-radius: var(--r); border: 1.5px dashed var(--line-strong); display: grid; place-items: center; color: var(--muted); font-size: .8rem; font-weight: 700; text-align: center; }
.ph-slot.filled { border: 0; background: linear-gradient(135deg, #DDE3EE, #C9D1DF); position: relative; }
.field-row { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: var(--s3); }
.consent { background: var(--lime-soft); border: 1px solid #DDEFA0; border-radius: var(--r); padding: var(--s4); font-size: .9rem; color: var(--text-2); display: flex; gap: 12px; }
.consent .box { width: 22px; height: 22px; border-radius: 6px; background: #fff; border: 2px solid var(--navy); color: var(--lime); display: grid; place-items: center; flex: none; margin-top: 1px; }
.consent b { color: var(--text); }
.fine { font-size: .8rem; color: var(--muted); margin-top: var(--s3); }

/* search */
.filters { display: flex; gap: var(--s2); overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.filters .opt { flex: none; min-height: 40px; font-size: .86rem; }
.results { display: grid; gap: var(--s3); }
.layout { display: grid; gap: var(--s5); }
@media (min-width: 980px) { .layout { grid-template-columns: 260px minmax(0, 1fr); align-items: start; } .side-filters { display: block !important; } .filters.mob { display: none; } }
.side-filters { display: none; }
.side-filters h3 { font-size: .95rem; margin-bottom: var(--s2); }
.side-filters .grp + .grp { margin-top: var(--s5); }
.side-filters label { display: flex; gap: 10px; align-items: center; font-size: .92rem; padding: 4px 0; }
.side-filters .cb { width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid var(--line-strong); flex: none; }
.side-filters .cb.on { background: var(--navy); border-color: var(--navy); }
.tcard { padding: var(--s4); }
.tcard .top { display: flex; gap: var(--s3); align-items: flex-start; }
.avatar { width: 52px; height: 52px; border-radius: 14px; background: var(--navy); color: var(--lime); display: grid; place-items: center; font-weight: 800; font-size: 1.05rem; flex: none; }
.tcard h3 { font-size: 1.08rem; }
.tcard .sub { font-size: .86rem; color: var(--muted); margin-top: 2px; }
.stars { display: inline-flex; align-items: center; gap: 4px; font-weight: 800; font-size: .9rem; }
.stars .s { position: relative; display: inline-block; color: var(--line-strong); letter-spacing: 1px; white-space: nowrap; }
.stars .s .fill { position: absolute; left: 0; top: 0; overflow: hidden; color: var(--star); }
.stars small { color: var(--muted); font-weight: 600; }
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s2); margin-top: var(--s4); padding: var(--s3) 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.facts div { font-size: .78rem; color: var(--muted); }
.facts b { display: block; color: var(--text); font-size: .95rem; font-weight: 800; }
.ls-badge { display: inline-flex; align-items: center; gap: 6px; margin-top: var(--s3); padding: 6px 10px; border-radius: var(--r-pill); background: var(--navy); color: var(--on-navy); font-size: .78rem; font-weight: 700; }
.ls-badge .icon { color: var(--lime); width: 15px; height: 15px; }
.tcard .acts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2); margin-top: var(--s4); }
.tcard .acts .btn { white-space: normal; text-align: center; line-height: 1.2; padding: 8px 12px; min-width: 0; }
@media (max-width: 480px) { .tcard .acts { grid-template-columns: minmax(0, 1fr); } }
.tcard .quote { margin-top: var(--s3); font-size: .9rem; color: var(--text-2); font-style: italic; }
.disclose { font-size: .82rem; color: var(--muted); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: var(--s3) var(--s4); display: flex; gap: 10px; }
.disclose .icon { flex: none; margin-top: 1px; }
.res-head { display: flex; justify-content: space-between; align-items: center; gap: var(--s3); margin: var(--s4) 0 var(--s3); flex-wrap: wrap; }
.sortsel { font-size: .86rem; font-weight: 700; display: inline-flex; gap: 6px; align-items: center; }

/* join / pricing */
.plans { display: grid; gap: var(--s4); }
@media (min-width: 900px) { .plans { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.plan { position: relative; display: flex; flex-direction: column; }
.plan.rec { border: 2px solid var(--navy); }
.plan .flag { position: absolute; top: -13px; left: var(--s5); background: var(--lime); color: var(--navy); font-size: .74rem; font-weight: 800; padding: 4px 10px; border-radius: var(--r-pill); }
.plan h3 { font-size: 1.15rem; }
.plan .amount { font-size: 2.4rem; font-weight: 800; letter-spacing: -1.5px; margin-top: var(--s2); }
.plan .amount small { font-size: 1rem; color: var(--muted); font-weight: 600; letter-spacing: 0; }
.plan .for { color: var(--muted); font-size: .92rem; margin-top: 2px; }
.plan ul { list-style: none; padding: 0; margin: var(--s4) 0 var(--s5); display: grid; gap: 10px; }
.plan li { display: flex; gap: 10px; font-size: .95rem; }
.plan li .icon { color: var(--ok); margin-top: 2px; }
.plan .btn { margin-top: auto; }
.split { display: grid; gap: var(--s4); }
@media (min-width: 820px) { .split { grid-template-columns: 1fr 1fr; } }
.feature h3 { display: flex; gap: 10px; align-items: center; font-size: 1.06rem; }
.feature h3 .ic { width: 36px; height: 36px; border-radius: 10px; background: var(--navy); color: var(--lime); display: grid; place-items: center; }
.feature p { margin-top: var(--s2); color: var(--muted); font-size: .95rem; }
.phone-mock { background: var(--navy-2); border: 1px solid var(--navy-line); border-radius: 22px; padding: var(--s4); max-width: 380px; color: var(--on-navy); }
.phone-mock .ntf { background: var(--navy-3); border-radius: 14px; padding: var(--s3) var(--s4); font-size: .88rem; }
.phone-mock .ntf + .ntf { margin-top: var(--s2); }
.phone-mock .ntf b { display: block; color: var(--on-navy); }
.phone-mock .ntf span { color: var(--on-navy-2); }
.phone-mock .ntf .k { font-size: .7rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--lime); }
.faq details { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: var(--s4); }
.faq details + details { margin-top: var(--s2); }
.faq summary { font-weight: 800; list-style: none; display: flex; justify-content: space-between; gap: var(--s3); }
.faq p { margin-top: var(--s2); color: var(--muted); font-size: .94rem; }
.layout > * { min-width: 0; }

.filters.mob { -webkit-mask-image: linear-gradient(90deg,#000 85%,transparent); mask-image: linear-gradient(90deg,#000 85%,transparent); }
.disclose a, .honest a, .fine a { color: inherit; font-weight: 700; }

/* --- real pages: links, focus, forms, notices, content ------------------------------------------ */
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--lime-deep); outline-offset: 2px; }
.on-navy :focus-visible, .nav :focus-visible, footer :focus-visible { outline-color: var(--lime); }
.btn:hover { filter: brightness(1.08); }
.btn.cta:hover { background: var(--lime-hover); filter: none; }
.btn[disabled], .btn[aria-busy=true] { opacity: .6; cursor: progress; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 40; background: var(--lime); color: var(--navy); padding: 8px 12px; border-radius: 8px; font-weight: 800; }
.skip:focus { left: 8px; }
.nav .links a[aria-current=page] { color: var(--on-navy); }
.nav .links a:hover, .nav .signin:hover { color: var(--on-navy); }

/* search box with real fields */
.searchbox label.in { cursor: text; }
.searchbox select, .searchbox input { flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; color: var(--text); min-height: 48px; outline: none; appearance: none; }
.searchbox select { cursor: pointer; font-weight: 600; }
.searchbox .in:focus-within { border-color: var(--navy); box-shadow: 0 0 0 3px var(--lime-soft); }
.more-trades { margin-top: var(--s4); display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); font-size: .92rem; color: var(--muted); }
.more-trades a { font-weight: 700; color: var(--text); }
.tile:hover { border-color: var(--line-strong); box-shadow: var(--shadow-2); }

/* form fields */
input.input, select.input, textarea.input { width: 100%; font: inherit; appearance: none; }
textarea.input { min-height: 130px; resize: vertical; line-height: 1.5; }
select.input { background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 40px; cursor: pointer; }
.input:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px var(--lime-soft); }
.input::placeholder { color: var(--muted); }
.input[aria-invalid=true] { border-color: #B4261D; }
.opts input { position: absolute; opacity: 0; pointer-events: none; }
.opts label.opt { cursor: pointer; position: relative; }
.opts label.opt .icon { display: none; }
.opts input:checked + .opt, .opts label.opt:has(input:checked) { background: var(--navy); color: var(--lime); border-color: var(--navy); }
.opts label.opt:has(input:checked) .icon { display: inline; }
.opts label.opt:has(input:focus-visible) { outline: 3px solid var(--lime-deep); outline-offset: 2px; }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
legend { padding: 0; }
.qcard legend h2 { font-size: 1.12rem; }
.consent { cursor: pointer; align-items: flex-start; }
.consent input { width: 22px; height: 22px; margin: 1px 0 0; flex: none; accent-color: var(--navy); cursor: pointer; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.code-input { font-size: 1.6rem; font-weight: 800; letter-spacing: .3em; text-align: center; max-width: 280px; }
.notice { display: flex; gap: 10px; align-items: flex-start; border-radius: var(--r); padding: var(--s3) var(--s4); font-size: .92rem; margin-bottom: var(--s4); }
.notice .icon { margin-top: 2px; }
.notice.err { background: #FBE6E3; color: #8A1C14; border: 1px solid #F3C5BF; }
.notice.ok { background: var(--ok-soft); color: var(--ok); border: 1px solid #BFE3CD; }
.notice.warn { background: var(--warn-soft); color: var(--warn); border: 1px solid #F0DDB5; }
.notice a { color: inherit; font-weight: 700; }
.safety { background: var(--warn-soft); color: var(--warn); border-radius: var(--r); padding: var(--s3) var(--s4); font-size: .9rem; font-weight: 600; margin-top: var(--s3); }
.safety[hidden] { display: none; }

/* results */
.empty { text-align: center; padding: var(--s7) var(--s5); }
.empty h2 { font-size: 1.3rem; }
.empty p { color: var(--muted); margin: var(--s2) auto var(--s4); max-width: 46ch; }
.no-reviews { font-size: .86rem; font-weight: 700; color: var(--muted); }
.tcard .desc { margin-top: var(--s3); font-size: .92rem; color: var(--text-2); }
.tcard h3 a { text-decoration: none; }
.tcard h3 a:hover { text-decoration: underline; }
.tcard .acts.one { grid-template-columns: 1fr; }
.col { max-width: 780px; }

/* content pages (hubs, towns, policies) */
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.crumbs li + li::before { content: "›"; margin-right: 6px; color: var(--line-strong); }
.crumbs a { color: var(--muted); }
.on-navy .crumbs, .on-navy .crumbs a { color: var(--on-navy-2); }
.prose { max-width: 720px; }
.prose h2 { font-size: 1.35rem; letter-spacing: -.4px; margin-top: var(--s6); }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: 1.05rem; margin-top: var(--s5); }
.prose p, .prose ul, .prose ol { margin: var(--s3) 0 0; color: var(--text-2); }
.prose ul, .prose ol { padding-left: 1.2em; display: grid; gap: 6px; }
.prose a { font-weight: 700; }
.two-col { display: grid; gap: var(--s5); }
.results > *, .two-col > * { min-width: 0; }
@media (min-width: 980px) { .two-col { grid-template-columns: minmax(0, 1fr) 340px; align-items: start; } }
.aside-card { position: sticky; top: 76px; }
.aside-card h2 { font-size: 1.15rem; }
.aside-card p { margin-top: var(--s2); color: var(--muted); font-size: .94rem; }
.aside-card .btn { margin-top: var(--s4); }
.town-links { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s3); }
.town-links a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: var(--r-pill); background: var(--surface); text-decoration: none; font-weight: 700; font-size: .9rem; }
.town-links a:hover { border-color: var(--navy); }
.listed { margin-top: var(--s4); }
.page-hero { padding: var(--s6) 0 var(--s7); }
.page-hero h1 { font-size: clamp(2rem, 1.3rem + 3vw, 3.2rem); letter-spacing: -1.2px; line-height: 1.05; max-width: 20ch; margin-top: var(--s3); }
.page-hero .lead { margin-top: var(--s4); max-width: 56ch; font-size: 1.08rem; color: var(--on-navy-2); }
.page-hero .btns { display: flex; gap: var(--s3); flex-wrap: wrap; margin-top: var(--s5); }
.updated { font-size: .84rem; color: var(--muted); margin-top: var(--s3); }
.on-navy .updated { color: var(--on-navy-3); }
.review { border-top: 1px solid var(--line); padding: var(--s4) 0; }
.review:first-child { border-top: 0; padding-top: 0; }
.review p { margin-top: var(--s2); color: var(--text-2); }
.review .by { font-size: .84rem; color: var(--muted); margin-top: var(--s2); }
.stars-pick { display: flex; flex-direction: row-reverse; justify-content: flex-end; gap: 4px; }
.stars-pick input { position: absolute; opacity: 0; }
.stars-pick label { font-size: 2.1rem; line-height: 1; color: var(--line-strong); cursor: pointer; padding: 2px; }
.stars-pick input:checked ~ label, .stars-pick label:hover, .stars-pick label:hover ~ label { color: var(--star); }
.stars-pick input:focus-visible + label { outline: 3px solid var(--lime-deep); border-radius: 6px; }
.plan .note { font-size: .84rem; color: var(--muted); margin-top: var(--s2); }
table.cmp { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; font-size: .94rem; }
table.cmp th, table.cmp td { text-align: left; padding: 12px 14px; border-top: 1px solid var(--line); }
table.cmp thead th { background: var(--surface-2); border-top: 0; font-size: .84rem; color: var(--muted); }
.table-wrap { overflow-x: auto; }
footer .foot-trades { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s3); font-size: .82rem; }
footer .foot-trades b { color: var(--on-navy); font-weight: 700; margin-right: var(--s1); }
footer a:hover { color: var(--on-navy); }
footer .brandline { color: var(--on-navy); font-weight: 700; }
.field-row .field + .field { margin-top: 0; }
@media (max-width: 520px) { .field-row { grid-template-columns: minmax(0, 1fr); } }
.qcard legend.qh { float: left; width: 100%; }
.qcard legend.qh + * { clear: both; }
.page-hero .ticks { margin-top: var(--s5); display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); color: var(--on-navy-2); font-size: .92rem; font-weight: 600; }
.page-hero .ticks span { display: inline-flex; gap: 8px; align-items: center; }
.page-hero .ticks .icon { color: var(--lime); }
.page-hero .ls-badge { margin-top: var(--s4); background: var(--navy-3); }

/* Logos, quote requests, credit bundles and the UK town lists (29 Oct 2026). */
.avatar.logo { background: #fff; border: 1px solid var(--line); overflow: hidden; padding: 0; }
.avatar.logo img { width: 100%; height: 100%; object-fit: contain; display: block; }
.pro-head { display: flex; gap: var(--s4); align-items: center; margin-top: var(--s2); }
.pro-head .avatar.big { width: 76px; height: 76px; border-radius: 18px; font-size: 1.4rem; }
.pro-head h1 { margin-top: 4px; }
@media (max-width: 480px) { .pro-head { align-items: flex-start; gap: var(--s3); } .pro-head .avatar.big { width: 60px; height: 60px; border-radius: 14px; } }
.quote-sec { background: var(--surface-2); border-top: 1px solid var(--line); }
.quote-form .field + .field, .quote-form .field-row { margin-top: var(--s4); }
.quote-form .field-row .field + .field { margin-top: 0; }
@media (max-width: 600px) { .quote-form .field-row .field + .field { margin-top: var(--s4); } }
.bundles-card { margin-top: var(--s5); }
.bundles { list-style: none; padding: 0; margin: var(--s4) 0 0; display: grid; gap: var(--s3); }
@media (min-width: 700px) { .bundles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.bundles li { border: 1px solid var(--line-strong); border-radius: var(--r); padding: var(--s3) var(--s4); display: flex; flex-direction: column; gap: 2px; }
.bundles .amt { font-size: 1.5rem; font-weight: 800; }
.flag-sm { align-self: flex-start; margin-top: 6px; background: var(--lime); color: var(--navy); font-size: .74rem; font-weight: 800; padding: 3px 9px; border-radius: var(--r-pill); }
h3.nation { font-size: .95rem; margin-top: var(--s4); color: var(--text-2); }

/* --- the home page's design language (home.css, site.css) ----------------------------------------
   The same width, type, pill buttons, eyebrows and navy hero with two slow lime glows. */
:root { --ease-s: cubic-bezier(.2, .8, .2, 1); --card-r: 18px; }
body { font-size: 17px; }
@media (min-width: 1024px) { body { font-size: 18px; } }
.wrap { max-width: 1180px; padding: 0 16px; }
@media (min-width: 640px) { .wrap { padding: 0 24px; } }
@media (min-width: 1024px) { .wrap { padding: 0 32px; } }
main > section { padding: 88px 0; }
@media (min-width: 1024px) { main > section { padding: 128px 0; } }
main > section[style*="padding-top:0"] { padding-top: 0; }
.icon { stroke-width: 1.75; }
:focus-visible { outline-width: 3px; outline-offset: 2px; }
main p { line-height: 1.6; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: .16em; color: var(--lime-deep); }
.eyebrow::before { content: ""; width: 16px; height: 2px; background: currentColor; flex: none; }
.on-navy .eyebrow { color: var(--lime); }
.eyebrow.dot { gap: 10px; padding: 8px 14px; border-radius: 999px; background: rgba(198, 244, 50, .08); border: 1px solid rgba(198, 244, 50, .28); color: var(--lime); }
.eyebrow.dot::before { width: 8px; height: 8px; border-radius: 50%; background: var(--lime); }
.sec-head { max-width: 720px; margin-bottom: 40px; }
.sec-head h2 { margin-top: 14px; font-size: clamp(2.1rem, 1.5rem + 2.6vw, 3.4rem); letter-spacing: -.03em; line-height: 1.08; }
.sec-head p { color: var(--text-2); font-size: 1em; }
.btn { min-height: 52px; border-radius: 999px; font-weight: 700; padding: 0 24px; transition: transform .25s var(--ease-s), background-color .2s, border-color .2s; }
.btn.sm { min-height: 44px; padding: 0 18px; border-radius: 999px; }
.btn.lg { min-height: 56px; }
.btn.cta:hover { transform: translateY(-1px); }
.card, .tile { border-radius: var(--card-r); }
@media (min-width: 1024px) { .card { padding: 32px; } }
.tile { transition: transform .25s var(--ease-s), box-shadow .25s; }
.tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }
.plan .amount { font-size: clamp(2.4rem, 1.9rem + 1.6vw, 3.6rem); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
:is(.hero, .page-hero) { position: relative; overflow: hidden; isolation: isolate; background: radial-gradient(120% 80% at 50% 0%, #12204A 0%, var(--navy) 55%, #070E22 100%); }
:is(.hero, .page-hero)::before { display: none; }
main > .hero { padding: 40px 0 88px; }
@media (min-width: 1024px) { main > .hero { padding: 96px 0 128px; } main > .page-hero { padding-top: 88px; padding-bottom: 104px; } }
.hero h1, .page-hero h1 { margin-top: 22px; letter-spacing: -.035em; line-height: 1.04; }
.hero h1 { font-size: clamp(2.5rem, 1.2rem + 6vw, 5rem); }
.glow { position: absolute; z-index: -1; width: 600px; height: 600px; border-radius: 50%; pointer-events: none; opacity: .18;
  background: radial-gradient(circle, var(--lime) 0%, rgba(198, 244, 50, .35) 30%, transparent 68%); }
.glow.g1 { right: -260px; top: -220px; }
.glow.g2 { left: -300px; top: 420px; }
.js .glow.g1 { animation: drift-a 24s ease-in-out infinite alternate; }
.js .glow.g2 { animation: drift-b 24s ease-in-out -8s infinite alternate; }
@keyframes drift-a { to { transform: translate3d(-80px, 60px, 0) scale(1.08); } }
@keyframes drift-b { to { transform: translate3d(90px, -50px, 0) scale(1.1); } }

/* --- motion (web/motion.js): only under the "js" class, so without scripts everything shows ---- */
.progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 60; background: var(--lime); transform-origin: 0 50%; transform: scaleX(0); pointer-events: none; }
.js [data-reveal] { opacity: 0; transform: translate3d(0, 24px, 0); transition: opacity .7s var(--ease-s), transform .7s var(--ease-s); transition-delay: calc(var(--i, 0) * 90ms); }
.js [data-reveal].in { opacity: 1; transform: none; }
[data-split] .w { display: inline-block; }
.js [data-split] .w { opacity: 0; transform: translate3d(0, .45em, 0); transition: opacity .6s var(--ease-s), transform .7s var(--ease-s); transition-delay: calc(var(--w, 0) * 45ms); }
.js [data-split].in .w { opacity: 1; transform: none; }
/* in the first screen (data-hero) nothing starts hidden: it paints at once and only rises into place */
.js [data-hero] [data-reveal], .js [data-hero] [data-split] .w { opacity: 1; }
.still [data-reveal], .still [data-split] .w { opacity: 1 !important; transform: none !important; transition: none !important; }
.still .glow { animation: none !important; translate: none !important; }
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal], .js [data-split] .w { opacity: 1 !important; transform: none !important; transition: none !important; }
  .glow { animation: none !important; } .tile:hover, .btn.cta:hover { transform: none; }
}

/* printed or saved as PDF: everything shown, nothing waiting to scroll into view */
@media print {
  .js [data-reveal], .js [data-split] .w, .js .top-hero .hero-h1 .ln, .js .phone.armed .msg, .js .phone.armed .booked,
  .js .story.armed .at, .js .uline::after { opacity: 1 !important; transform: none !important; transition: none !important; }
  .js .cmp:not(.in) .bt i, .bars.grow .bt i { transform: scaleX(var(--k, 0)) !important; }
  .progress, .glow, .rings, .marquee, .hc-launch, .hc-panel { display: none !important; }
}

/* --- the homeowner's pages: the job link and "Your jobs" (trades_pages.render_my_job, phone_login.py) --- */
.hj-col { max-width: 680px; margin: 0 auto; }
main > .hj-hero { padding: 36px 0 72px; }
@media (min-width: 1024px) { main > .hj-hero { padding: 64px 0 96px; } }
.hj-hero h1 { font-size: clamp(2rem, 1.4rem + 3vw, 3rem); max-width: 18ch; }
.hj-hero .lead { margin-top: var(--s3); font-size: 1rem; color: var(--on-navy-2); }
.hj-hero .lead b { color: var(--on-navy); }
.hj-chip { margin-top: var(--s4); }
.hj-hero .chip { height: 32px; padding: 0 14px; font-size: .85rem; background: rgba(255,255,255,.08); color: var(--on-navy); border: 1px solid var(--navy-line); }
.hj-hero .chip.ok { background: rgba(198,244,50,.12); color: var(--lime); border-color: rgba(198,244,50,.35); }
.hj-hero .chip.warn { background: rgba(232,163,23,.14); color: #F5C35A; border-color: rgba(232,163,23,.4); }
.chip .cdot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
.hj { margin-top: -48px; position: relative; z-index: 2; padding-bottom: var(--s7); }
.hj .notice { box-shadow: var(--shadow-2); }
.hj-card { margin-bottom: var(--s4); box-shadow: var(--shadow-2); }
.hj-card h2 { font-size: 1.2rem; letter-spacing: -.02em; }
.hj-card h2 + p, .hj-card h2 + div, .hj-card h2 + ol { margin-top: var(--s3); }
.hj-card h3 { font-size: 1rem; margin-top: var(--s5); }
.hj-facts { display: flex; flex-wrap: wrap; gap: var(--s2); }
.hj-facts div { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: var(--bg-2); color: var(--text-2); font-size: .86rem; font-weight: 700; }
.hj-facts .k { display: inline-flex; color: var(--lime-deep); }
.hj-desc { margin-top: var(--s4); padding: var(--s4); border-radius: var(--r); background: var(--surface-2); border: 1px solid var(--line); color: var(--text); white-space: pre-line; overflow-wrap: anywhere; }
.hj-steps { list-style: none; margin: var(--s4) 0 0; padding: 0; }
.hj-steps li { position: relative; display: flex; gap: var(--s3); padding-bottom: var(--s4); }
.hj-steps li:last-child { padding-bottom: 0; }
.hj-steps li:not(:last-child)::before { content: ""; position: absolute; left: 13px; top: 30px; bottom: 2px; width: 2px; background: var(--line); }
.hj-steps li.done:not(:last-child)::before { background: var(--navy); }
.hj-steps .mk { width: 28px; height: 28px; border-radius: 50%; flex: none; display: grid; place-items: center; border: 2px solid var(--line-strong); background: var(--surface); }
.hj-steps .done .mk { background: var(--navy); border-color: var(--navy); color: var(--lime); }
.hj-steps .now .mk { border-color: var(--navy); box-shadow: 0 0 0 4px var(--lime-soft); }
.hj-steps .now .mk::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--lime-deep); }
.hj-steps .stop .mk { background: var(--warn-soft); border-color: #F0DDB5; color: var(--warn); }
.hj-steps b { display: block; font-size: .98rem; line-height: 1.35; padding-top: 3px; }
.hj-steps .todo b { color: var(--muted); font-weight: 700; }
.hj-steps span { display: block; margin-top: 2px; font-size: .88rem; color: var(--muted); }
.hj-steps .hj-dots { display: inline-flex; vertical-align: -1px; margin-right: 4px; }
.hj-dots { display: inline-flex; gap: 4px; }
.hj-dots i { width: 12px; height: 12px; border-radius: 50%; background: var(--bg-2); border: 1px solid var(--line-strong); }
.hj-dots i.on { background: var(--lime); border-color: var(--lime-deep); }
.hj-big { display: flex; align-items: center; gap: var(--s3); margin-top: var(--s5); padding: var(--s3) var(--s4); border-radius: var(--r); background: var(--navy); color: var(--on-navy); font-weight: 800; }
.hj-big .hj-dots i { width: 16px; height: 16px; background: transparent; border-color: #3A4770; }
.hj-big .hj-dots i.on { background: var(--lime); border-color: var(--lime); }
.hj-trades { display: grid; gap: var(--s3); }
.hj-trade { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; padding: var(--s3); border: 1px solid var(--line); border-radius: var(--r); }
.hj-trade .avatar { width: 44px; height: 44px; border-radius: 12px; font-size: .95rem; }
.hj-trade .grow { flex: 1 1 140px; min-width: 0; display: grid; }
.hj-trade .grow a { color: var(--text-2); font-weight: 600; }
.hj-trade .btn { flex: 1 1 100%; }
@media (min-width: 520px) { .hj-trade .btn { flex: none; } }
.hj-quote { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; padding: var(--s3) var(--s4); border: 1px solid var(--line); border-radius: var(--r); margin-top: var(--s3); }
.hj-quote .n { width: 32px; height: 32px; border-radius: 10px; background: var(--navy); color: var(--lime); display: grid; place-items: center; font-weight: 800; flex: none; }
.hj-quote .grow { flex: 1 1 180px; min-width: 0; font-size: .92rem; }
.hj-quote.picked { border-color: var(--lime-deep); background: var(--lime-soft); }
.hj-quote form, .hj-quote .btn { flex: 1 1 100%; }
@media (min-width: 520px) { .hj-quote form, .hj-quote .btn { flex: none; } }
.hj-visits { margin-top: var(--s5); }
.hj-visit { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; padding: var(--s3) var(--s4); border: 1px solid var(--line); border-radius: var(--r); margin-top: var(--s3); }
.hj-visit .n { width: 32px; height: 32px; border-radius: 10px; background: var(--navy); color: var(--lime); display: grid; place-items: center; font-weight: 800; flex: none; }
.hj-visit .grow { flex: 1 1 180px; min-width: 0; display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.hj-visit .when { font-size: .92rem; color: var(--text-2); }
.hj-visit.off { opacity: .7; }
.hj-visit.off .when { text-decoration: line-through; }
.hj-visit form, .hj-visit .btn { flex: 1 1 100%; }
@media (min-width: 520px) { .hj-visit form, .hj-visit .btn { flex: none; } }
/* Hired / Not hired and the rating (2055) */
.hj-hire { padding: var(--s4); border: 1px solid var(--line); border-radius: var(--r); margin-top: var(--s3); }
.hj-hire .top { display: flex; align-items: flex-start; gap: var(--s3); }
.hj-hire .top .grow { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.hj-hire-btns { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); margin-top: var(--s3); }
.hj-hire-btns .btn { width: 100%; min-height: 44px; }
.hj-hire-btns .btn[aria-pressed="true"] { background: var(--navy); color: var(--lime); border-color: var(--navy); }
.hj-rate { margin-top: var(--s4); padding-top: var(--s4); border-top: 1px dashed var(--line); display: flex; flex-direction: column; gap: var(--s2); }
.hj-rate fieldset { border: 0; padding: 0; margin: 0; }
.hj-rate textarea { min-height: 84px; resize: vertical; }
.hj-reply { margin: var(--s2) 0 0; padding: var(--s3); background: var(--bg-2); border-radius: var(--r); font-size: .92rem; }
.review .verified { display: inline-flex; align-items: center; gap: 4px; font-size: .78rem; font-weight: 700; color: var(--ok); }
.review .reply { margin-top: var(--s2); padding: var(--s2) var(--s3); border-left: 3px solid var(--lime); background: var(--bg-2); border-radius: 0 8px 8px 0; font-size: .92rem; }
.reviews-how { font-size: .88rem; color: var(--text-2); margin: var(--s2) 0 var(--s4); }
.hj-navy { background: var(--navy); color: var(--on-navy); border-color: var(--navy-line); }
.hj-navy p { color: var(--on-navy-2); margin-bottom: var(--s4); }
.hj-navy p b { color: var(--on-navy); }
.hj-acts { display: grid; gap: var(--s3); margin-top: var(--s4); }
.hj-del summary { cursor: pointer; padding: var(--s3) 0; color: var(--text-2); font-size: .92rem; }
.hj-del p { margin: 0 0 var(--s3); }
.btn.danger { background: #B42318; color: #fff; }
.btn.danger:hover { background: #912018; }
.hj-line { margin-top: var(--s4); text-align: center; color: var(--muted); font-size: .94rem; }
.hj-line a { display: inline-flex; align-items: center; gap: 6px; color: var(--text); text-decoration: none; }
.hj-line a b { font-size: 1.05rem; }
.hj-top { display: grid; gap: var(--s3); margin-bottom: var(--s4); }
@media (min-width: 560px) { .hj-top { grid-template-columns: 1fr 1fr; } }
.hj-job + .hj-job { margin-top: var(--s5); }
.hj-job .hj-link { display: inline-flex; margin-top: var(--s4); }
.hj-section { margin: var(--s6) 0 var(--s3); font-size: 1.05rem; }
.row-between { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s3); flex-wrap: wrap; }
.hj-job .chip { height: 28px; }
.hj-job .hj-link { margin-top: var(--s2); }
.hj-hacts { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s5); }
.hj-hacts .btn { flex: 1 1 160px; }
@media (min-width: 560px) { .hj-hacts .btn { flex: none; } }
#manage { scroll-margin-top: 76px; }

/* the free profile beside the plans (sign-up is free; a plan puts the profile live) */
.plans-free { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--s3); margin: 0 0 var(--s5); text-align: center; }
.plans-free span { color: var(--muted); font-size: .92rem; }

/* /trades/start: the short page for ad and email visitors, phone first (trades_pages.render_start) */
.ad-page { padding-bottom: 84px; }
.ad-page .nav .end { margin-left: auto; }
.ad-page .nav .signin { color: var(--on-navy); font-weight: 700; text-decoration: none; }
.ad-hero { padding: var(--s6) 0 var(--s7); }
.ad-grid { display: grid; gap: var(--s6); align-items: center; }
@media (min-width: 860px) { .ad-grid { grid-template-columns: 1.15fr .85fr; } }
.ad-hero h1 { font-size: clamp(2.2rem, 1.5rem + 3.4vw, 3.6rem); letter-spacing: -1.2px; line-height: 1.04; margin-top: var(--s3); max-width: 14ch; }
.ad-hero .lead { margin-top: var(--s4); font-size: 1.1rem; color: var(--on-navy-2); max-width: 40ch; }
.ad-cta { margin-top: var(--s5); max-width: 420px; }
.ad-cta .btn.lg { min-height: 60px; font-size: 1.1rem; }
.ad-fine { margin-top: var(--s3); font-size: .84rem; color: var(--on-navy-3); }
.ad-phone { margin: 0 auto; width: 100%; max-width: 280px; text-align: center; }
.ad-phone-screen { position: relative; background: linear-gradient(180deg, var(--navy-3), var(--navy-2)); border: 6px solid #050B1C; border-radius: 34px;
  padding: 40px var(--s3) var(--s4); box-shadow: 0 20px 50px rgba(0,0,0,.35); min-height: 300px; }
.ad-phone-notch { position: absolute; top: 8px; left: 50%; width: 76px; height: 18px; margin-left: -38px; border-radius: 10px; background: #050B1C; }
.ad-phone-time { font-size: 2.4rem; font-weight: 800; letter-spacing: -1px; color: var(--on-navy); }
.ad-ntf { display: flex; gap: var(--s3); text-align: left; margin-top: var(--s4); background: rgba(255,255,255,.08); border: 1px solid var(--navy-line);
  border-radius: 16px; padding: var(--s3); }
.ad-ntf-ic { flex: none; width: 38px; height: 38px; border-radius: 10px; background: var(--lime); color: var(--navy); display: grid; place-items: center; }
.ad-ntf .k { display: block; font-size: .66rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--lime); }
.ad-ntf b { display: block; color: var(--on-navy); font-size: .98rem; }
.ad-ntf span:not(.k):not(.ad-ntf-ic) { color: var(--on-navy-2); font-size: .86rem; }
.ad-keys { display: flex; justify-content: center; gap: var(--s3); margin-top: var(--s5); }
.ad-keys span { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 1.2rem;
  background: rgba(255,255,255,.08); color: var(--on-navy-2); }
.ad-keys span.on { background: var(--lime); color: var(--navy); box-shadow: 0 0 0 6px rgba(198,244,50,.18); }
.ad-phone figcaption { margin-top: var(--s2); color: var(--on-navy-3); }
.ad-body { padding: var(--s6) 0 var(--s5); }
.ad-narrow { max-width: 640px; }
.ad-benefits { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3); }
.ad-benefits li { display: flex; gap: var(--s3); align-items: flex-start; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s4); }
.ad-benefits .ic { flex: none; width: 40px; height: 40px; border-radius: 10px; background: var(--lime-soft); color: var(--lime-deep); display: grid; place-items: center; }
.ad-benefits b { display: block; font-size: 1.02rem; }
.ad-benefits small { display: block; color: var(--muted); font-size: .88rem; }
.ad-credits { margin-top: var(--s5); }
.ad-credits h2 { font-size: 1.15rem; }
.ad-credits > p { margin-top: var(--s2); color: var(--text-2); font-size: .95rem; }
.ad-plans { list-style: none; margin: var(--s4) 0 var(--s3); padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s2); }
.ad-plans li { border: 1px solid var(--line); border-radius: var(--r); padding: var(--s3) var(--s2); text-align: center; background: var(--surface-2); }
.ad-plans b { display: block; font-size: .9rem; }
.ad-plans span { display: block; font-weight: 800; font-size: 1.25rem; }
.ad-plans span small { font-size: .7rem; font-weight: 600; color: var(--muted); }
.ad-plans > li > small { display: block; font-size: .76rem; color: var(--muted); }
.ad-more { margin-top: var(--s4); text-align: center; }
.ad-more a { font-weight: 700; color: var(--text); }
.ad-cta-end { margin: var(--s5) auto 0; }
.ad-page footer { margin-top: var(--s5); }
.ad-sticky { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; padding: var(--s3) var(--s4) calc(var(--s3) + env(safe-area-inset-bottom));
  background: rgba(11,21,48,.96); border-top: 1px solid var(--navy-line); }
@media (min-width: 860px) { .ad-sticky { display: none; } .ad-page { padding-bottom: 0; } }

/* /trades/start since 31 Oct 2026: the video, then the sign-up by mobile, one question at a time
   (trades_pages.signup_form, web/trade-signup.js). Phone first: one column. */
.ts-hero { padding: var(--s4) 0 var(--s4); }
.ts-col { max-width: 560px; }
.ts-hero h1 { font-size: clamp(1.9rem, 1.3rem + 3vw, 3.2rem); letter-spacing: -1px; line-height: 1.05; }
.ts-offer { margin-top: var(--s2); font-size: .98rem; font-weight: 700; color: var(--lime); line-height: 1.35; }
.ts-how { padding: var(--s2) 0 var(--s6); }
.ts-how .lead { font-size: 1.05rem; color: var(--on-navy-2); }
.ts-video { margin: var(--s4) 0 0; }
.ts-frame { position: relative; border-radius: var(--r-lg); overflow: hidden; background: var(--navy-2); aspect-ratio: 1 / 1; box-shadow: 0 16px 40px rgba(0,0,0,.35); }
.ts-frame video { display: block; width: 100%; height: 100%; object-fit: cover; }
.ts-sound { position: absolute; right: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px;
  border-radius: var(--r-pill); border: 0; background: rgba(11,21,48,.82); color: var(--on-navy); font: inherit; font-weight: 700; font-size: .86rem; cursor: pointer; }
.ts-sound[aria-pressed=true] { background: var(--lime); color: var(--navy); }
.ts-video figcaption { margin-top: 6px; color: var(--on-navy-3); }
.ts { margin-top: var(--s4); background: var(--surface); color: var(--text); border-radius: var(--r-lg); padding: var(--s4) var(--s4); box-shadow: var(--shadow-2); scroll-margin-top: 76px; }
.ts fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.ts fieldset[hidden], .ts [hidden] { display: none; }
.ts-dots { display: flex; gap: 6px; margin-bottom: var(--s3); }
.ts-dots i { flex: 1 1 0; height: 4px; border-radius: 2px; background: var(--line); }
.ts-dots i.on { background: var(--lime-deep); }
.ts-q { padding: 0; font-size: 1.35rem; font-weight: 800; letter-spacing: -.4px; margin-bottom: var(--s3); }
.ts-q label { cursor: default; }
.ts-sub { display: block; font-weight: 700; font-size: .92rem; margin: var(--s4) 0 6px; }
.ts .input { width: 100%; font: inherit; }
.ts .ts-big { min-height: 56px; font-size: 1.15rem; }
.ts .ts-code { letter-spacing: .4em; font-weight: 800; text-align: center; }
.ts .btn.lg { margin-top: var(--s4); min-height: 58px; font-size: 1.08rem; }
.ts-hint { margin-top: var(--s2); font-size: .88rem; color: var(--muted); }
.ts-hint a, .ts-alt a { color: var(--text); font-weight: 700; }
.ts-link { background: none; border: 0; padding: 0; font: inherit; font-weight: 700; color: var(--text); text-decoration: underline; cursor: pointer; }
.ts-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2); margin-top: var(--s3); }
@media (min-width: 520px) { .ts-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ts-tile { display: flex; align-items: center; gap: 8px; min-height: 56px; padding: 8px 10px; text-align: left; border: 1.5px solid var(--line-strong);
  border-radius: var(--r); background: var(--surface); color: var(--text); font: inherit; font-weight: 700; font-size: .9rem; line-height: 1.2; cursor: pointer; }
.ts-tile .icon { width: 22px; height: 22px; color: var(--lime-deep); }
.ts-tile[aria-pressed=true] { background: var(--navy); border-color: var(--navy); color: var(--lime); }
.ts-tile[aria-pressed=true] .icon { color: var(--lime); }
.ts-areas { margin-top: var(--s2); }
.ts-msg { margin-top: var(--s3); color: #B4261D; font-weight: 700; font-size: .92rem; }
.ts-msg:empty { display: none; }
.ts-done { font-size: 1.1rem; padding: var(--s3) 0; }
.ts-alt { margin-top: var(--s4); text-align: center; font-size: .88rem; }
.ts-trial { margin: 0 0 var(--s3); padding: 12px 14px; border-radius: var(--r); background: var(--lime); color: var(--navy); font-weight: 800; font-size: 1rem; line-height: 1.35; text-align: center; }
.ts-trial small { display: block; margin-top: 2px; font-weight: 600; font-size: .82rem; }
.ts-offer-note { margin: 0 0 var(--s3); padding: 10px 12px; border-radius: var(--r); background: var(--navy); color: var(--lime); font-weight: 700; font-size: .95rem; }
.ts-ticks { list-style: none; margin: var(--s3) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px var(--s3); justify-content: center; }
.ts-ticks li { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; font-size: .84rem; color: var(--on-navy); }
.ts-ticks .icon { color: var(--lime); }
.ts-more { margin-top: var(--s3); text-align: center; font-size: .9rem; color: var(--on-navy-3); }
.ts-more a { color: var(--on-navy-2); font-weight: 700; }
.ad-sticky { transition: transform .25s ease; }
.ad-sticky.away, .ad-sticky.gone { transform: translateY(110%); }
/* the cookie bar (consent.js, a compact bar on this page): the sticky "Start free" sits above it, never under it */
body.ad-page.adc-on { padding-bottom: calc(84px + var(--adc-h, 0px)); }
body.ad-page.adc-on .ad-sticky { bottom: var(--adc-h, 0px); }

/* --- the trades plans' Monthly / Yearly switch (trades_pages.py plans_switch, web/motion.js) ------ */
.iv-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--s3) var(--s4); margin: 0 0 var(--s5); text-align: center; }
.iv-ctl { display: inline-flex; padding: 4px; border-radius: var(--r-pill); background: var(--bg-2); border: 1px solid var(--line); max-width: 100%; }
.iv-ctl[hidden] { display: none; }
.iv-ctl button { min-height: 44px; padding: 0 var(--s4); border: 0; border-radius: var(--r-pill); background: none; font: inherit; font-weight: 700; color: var(--text-2); cursor: pointer; white-space: nowrap; }
.iv-ctl button[aria-pressed=true] { background: var(--navy); color: var(--lime); }
.iv-ctl button:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; }
.iv-first { margin: 0; flex: 1 1 100%; font-weight: 700; }
.iv-first small { display: block; font-weight: 600; color: var(--muted); }
[data-iv][hidden] { display: none !important; }
.ad-first { margin: 0 0 var(--s2); text-align: center; }
.ad-first small { display: block; color: var(--muted); }
/* Post a job by text (2062): the landline note, a full-width code box, "Wrong number? Change it". */
.help.warn { color: #8A4B00; font-weight: 700; }
.help[hidden] { display: none; }
.qcard .field + .field { margin-top: var(--s4); }
.code-input { max-width: none; width: 100%; min-height: 64px; }
.center { text-align: center; }
.change-phone { margin-top: var(--s4); }
.change-phone summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-weight: 700; color: var(--navy); }
.change-phone form { margin-top: var(--s2); }
button[data-resend]:disabled { opacity: .6; cursor: default; }