/* ==========================================================================
   99CentGigs brand layer: "Marquee"
   Loaded LAST on every page so it wins over each page's own styles.
   - One typeface everywhere: Geist. Headlines bold, tight and in normal
     capitalization; the video-letter hero is the only all-caps moment.
   - Color: ink, paper, and the existing 99CentGigs green.
   - One header and one footer everywhere.
   Fonts are self-hosted (about 90KB total), no Google Fonts round trip.
   ========================================================================== */

@font-face{ font-family:'Geist'; font-weight:400; font-style:normal; font-display:swap; src:url('/fonts/geist-400.woff2') format('woff2'); }
@font-face{ font-family:'Geist'; font-weight:500; font-style:normal; font-display:swap; src:url('/fonts/geist-500.woff2') format('woff2'); }
@font-face{ font-family:'Geist'; font-weight:600; font-style:normal; font-display:swap; src:url('/fonts/geist-600.woff2') format('woff2'); }
@font-face{ font-family:'Geist'; font-weight:700; font-style:normal; font-display:swap; src:url('/fonts/geist-700.woff2') format('woff2'); }
@font-face{ font-family:'Geist'; font-weight:800; font-style:normal; font-display:swap; src:url('/fonts/geist-800.woff2') format('woff2'); }

:root{
  --b-ink:#0D0D0B;
  --b-paper:#ffffff;
  --b-line:#E4E2DB;
  --b-muted:#55534C;
  --b-green:#00A63D;
  --b-green-dark:#00a63d;
  --b-display:'Geist', 'Helvetica Neue', Arial, sans-serif;
  --b-body:'Geist', 'Helvetica Neue', Arial, sans-serif;
}

/* ---------- Page ground: clean paper instead of the colored wash ---------- */
html:root body{ background-color:var(--b-paper) !important; background-image:none !important; color:var(--b-ink); }

/* ---------- Type ---------- */
html:root body,
html:root body :where(p, span, a, li, label, input, select, textarea, button, div, td, th, small, strong, em, b, dt, dd, option, h2, h3, h4, h5, h6){
  font-family:var(--b-body) !important;
}
html:root body{ letter-spacing:0 !important; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }

/* Everything that isn't a headline: Geist, confident weights */
html:root body :is(h2, .section-title, .meet-title, .ph-title){
  font-family:var(--b-body) !important; font-weight:700 !important; letter-spacing:-.015em !important;
}
html:root body :is(h3, h4, .sub-title, .card-title, .lc-title, .sc-title, .vc-title, .review-title, .opt-card h3, .faq-card h2, .results-count, .filters h3, .li-info .name, .hf-card-title){
  font-family:var(--b-body) !important; font-weight:600 !important; letter-spacing:-.01em !important;
}
/* Small uppercase labels ("For Job Seekers", "Step 1 of 2"): tracked, not shouty */
html:root body :is(.hf-eyebrow, .hp-eyebrow, .doc-eyebrow, .why-eyebrow, .sell-eyebrow, .eyebrow){
  font-family:var(--b-body) !important; font-weight:700 !important; letter-spacing:.18em !important;
}

/* Headlines: Geist bold, tight tracking, normal capitalization */
html:root body :is(h1, .hf-title, .hp-title, .form-instruction, .compare-title, .doc-title, .how-title, .why-title, .pitch-title, .b-display){
  font-family:var(--b-display) !important;
  font-weight:700 !important;
  text-transform:none !important;
  letter-spacing:-.045em !important;
  font-synthesis:none;
}
html:root body :is(h1, .hf-title, .hp-title, .form-instruction, .compare-title, .doc-title, .how-title, .why-title, .pitch-title, .b-display) *{
  font-family:inherit !important; font-weight:inherit !important; letter-spacing:inherit !important;
}
html:root body h1, html:root body .hero-caption h1, html:root body .hero-strip h1{
  font-size:clamp(36px, 4.8vw, 64px) !important; line-height:1.04 !important; margin-bottom:12px;
}
html:root body :is(.hf-title, .hp-title, .compare-title){
  font-size:clamp(42px, 6.2vw, 92px) !important; line-height:1 !important;
}
html:root body :is(.form-instruction, .why-title){
  font-size:clamp(26px, 3vw, 36px) !important; line-height:1.1 !important;
}


/* ==========================================================================
   HEADER (identical on every page)
   ========================================================================== */
html:root body nav.site-header{
  position:relative !important; inset:auto !important; z-index:20;
  display:flex !important; align-items:center !important; justify-content:space-between !important;
  gap:24px; flex-wrap:nowrap; width:100%; max-width:1360px; box-sizing:border-box;
  margin:0 auto !important; padding:16px clamp(16px, 3vw, 40px) !important;
  background:transparent !important; border:none !important; box-shadow:none !important;
}
html:root body nav.site-header .logo{ display:flex; align-items:center; flex:0 0 auto; margin:0 !important; }
html:root body nav.site-header .logo img{ height:34px !important; width:auto !important; display:block; }
html:root body nav.site-header .nav-links{
  display:flex !important; align-items:center; gap:30px; margin:0 auto 0 36px !important; position:static !important; transform:none !important;
}
html:root body nav.site-header .nav-links a{
  font-family:var(--b-body) !important; font-size:15.5px !important; font-weight:600 !important; letter-spacing:-.005em !important;
  text-transform:none !important; color:var(--b-ink) !important; text-decoration:none !important; opacity:1 !important;
  padding:6px 0; border-bottom:2px solid transparent; background:none !important;
}
html:root body nav.site-header .nav-links a:hover{ border-bottom-color:var(--b-ink); }
html:root body nav.site-header .nav-links a.current{ border-bottom-color:var(--b-green); }
html:root body nav.site-header .nav-right{ display:flex; align-items:center; flex:0 0 auto; margin:0 !important; width:auto !important; border-top:none !important; padding-top:0 !important; }
html:root body nav.site-header .nav-right .signin-link,
html:root body nav.site-header .nav-right #signinLink{ font-size:14.5px !important; font-weight:600 !important; white-space:nowrap; }
html:root body nav.site-header .nav-right .btn-signin{ white-space:nowrap; font-size:14.5px !important; }

@media (max-width:860px){
  /* Row 1: logo + account/post. Row 2: the three section links. */
  html:root body nav.site-header{ flex-wrap:wrap !important; row-gap:10px; gap:12px; padding:12px 16px !important; }
  html:root body nav.site-header .logo img{ height:28px !important; }
  html:root body nav.site-header .nav-right{ margin-left:auto !important; }
  html:root body nav.site-header .nav-links{
    order:3; width:100%; margin:0 !important; justify-content:space-between; gap:8px;
    padding-top:10px; border-top:1px solid var(--b-line);
  }
  html:root body nav.site-header .nav-links a{ font-size:14.5px !important; padding:4px 0; }
}
@media (max-width:420px){
  html:root body nav.site-header .nav-right .signin-link,
  html:root body nav.site-header .nav-right #signinLink{ font-size:13px !important; }
  html:root body nav.site-header .nav-right .btn-signin{ font-size:13px !important; padding:8px 12px !important; }
  html:root body nav.site-header .nav-right .btn-signin svg{ display:none; }
}

/* ==========================================================================
   FOOTER (identical on every page): black band, like the video sections
   ========================================================================== */
html:root body footer.site-footer{
  background:var(--b-ink) !important; color:#fff; border-top:none !important;
  margin:64px 0 0 !important; padding:44px 20px 28px !important; text-align:center;
  width:auto; max-width:none;
}
/* Footers that sit inside a centered page column still run edge to edge */
html:root body .page footer.site-footer, html:root body .wrap footer.site-footer{ margin-left:calc(50% - 50vw) !important; margin-right:calc(50% - 50vw) !important; }
html:root body footer.site-footer .footer-tag{
  font-family:var(--b-display) !important; font-weight:700 !important; text-transform:none;
  font-size:clamp(34px, 5vw, 64px); line-height:1.02; letter-spacing:-.045em; color:#fff; margin:0 0 22px;
}
html:root body footer.site-footer .footer-tag span{ color:var(--b-green); font-family:inherit !important; }
html:root body footer.site-footer .footer-links{ margin:0 auto 18px !important; }
html:root body footer.site-footer .footer-links a{ color:rgba(255,255,255,.88) !important; font-family:var(--b-body) !important; }
html:root body footer.site-footer .footer-links a:hover,
html:root body footer.site-footer .footer-links a:focus-visible{ color:#fff !important; text-decoration-color:var(--b-green); }
html:root body footer.site-footer .footer-copy{ color:rgba(255,255,255,.55) !important; font-family:var(--b-body) !important; }
html:root body footer.site-footer .footer-cookie{ color:rgba(255,255,255,.65) !important; }
html:root body footer.site-footer .footer-cookie a{ color:#fff !important; }

/* Clicks land below the header, not under it */
html{ scroll-padding-top:16px; }

/* ==========================================================================
   Header buttons: base shape on every page (some pages had no styles for them)
   ========================================================================== */
html:root body nav.site-header .btn-signin{
  display:inline-flex !important; align-items:center; gap:8px; padding:9px 16px !important;
  text-decoration:none !important; line-height:1.2; font-weight:700 !important;
}
html:root body nav.site-header .btn-signin svg{ width:16px !important; height:16px !important; flex:0 0 auto; }
html:root body nav.site-header .signin-link{ text-decoration:none; padding:9px 14px; }

/* ==========================================================================
   Page titles
   Light pages: ink headline (green only on accent words).
   Every page title uses the homepage 'Find Your Next Gig.' style (no black bands).
   ========================================================================== */
html:root body h1{ color:var(--b-ink) !important; }
html:root body.flow-post .hero-strip{
  background:var(--b-paper) !important; background-image:none !important; color:var(--b-ink) !important;
  border:none !important; border-radius:0 !important; box-shadow:none !important;
  max-width:1120px; margin:10px auto 0 !important; padding:clamp(30px,4vw,52px) clamp(18px,4vw,48px) !important;
  text-align:center !important;
}
html:root body.flow-post .hero-strip h1{ color:var(--b-ink) !important; margin-left:auto; margin-right:auto; }
html:root body.flow-post .hero-strip :is(.sub, p){ color:#00a63d !important; margin-left:auto !important; margin-right:auto !important; }
html:root body.flow-post .hero-strip :is(.doc-eyebrow, .eyebrow, .hero-eyebrow){ color:var(--b-green-dark) !important; }
html:root body.flow-post .hero-strip .glass-banner{ background:none !important; box-shadow:none !important; border:none !important; }

/* Post page: the title band sits on paper, not inside a second black strip */
html:root body .hero-strip-band{ background:none !important; background-image:none !important; padding:0 16px !important; }
/* "Why 99CentGigs" sections: small label, bold headline */
html:root body :is(.compare-eyebrow, .why-eyebrow){
  font-family:var(--b-body) !important; font-size:13px !important; font-weight:700 !important; letter-spacing:.2em !important; text-transform:uppercase; color:var(--b-green-dark) !important;
}

html:root body .why-panel{ background:var(--b-paper) !important; background-image:none !important; border:none !important; }
html:root body .why-panel .why-title{ color:var(--b-ink) !important; }
html:root body .why-panel .why-list li{ color:var(--b-ink) !important; }
html:root body .why-panel .why-list svg{ stroke:var(--b-green) !important; }

/* ---------- Logo: 99Cent in ink, Gigs in green ---------- */
html:root body nav.site-header .logo.wordmark{
  font-family:var(--b-display) !important; font-weight:800 !important; text-transform:none;
  font-size:27px; line-height:1; letter-spacing:-.055em; color:var(--b-ink) !important; text-decoration:none !important;
}
html:root body nav.site-header .logo.wordmark span{ color:var(--b-green) !important; font-family:inherit !important; }
@media (max-width:860px){ html:root body nav.site-header .logo.wordmark{ font-size:24px; } }
@media (max-width:420px){ html:root body nav.site-header .logo.wordmark{ font-size:22px; } }
html:root body nav.site-header .logo.wordmark{ display:inline-block !important; gap:0 !important; white-space:nowrap; }
html:root body nav.site-header .logo.wordmark span{ display:inline !important; margin:0 !important; padding:0 !important; }
/* Pages that center one card in the window still get a full-width footer */
html:root body > footer.site-footer{ align-self:stretch; }
/* My Listings keeps its checkout bar pinned to the bottom; leave room for it */
html:root body:has(.checkout-bar) footer.site-footer{ padding-bottom:120px !important; }

/* ---------- Header: two simple glass pills (2026-09-27) ----------
   Sign In and Post an Opportunity each get their own pill: white glass
   fill, black border. No section links in the header. */
html:root body nav.site-header .nav-links{ display:none !important; }
html:root body nav.site-header .nav-right{
  display:flex !important; align-items:center; gap:10px !important;
  padding:0 !important; background:none !important; border:0 !important; box-shadow:none !important;
}
html:root body nav.site-header .nav-right .glass-lens{ display:none !important; }
html:root body nav.site-header .nav-right :is(#signinLink, #siteSignOutLink, .btn-signin){
  display:inline-flex !important; align-items:center; justify-content:center; gap:6px;
  height:38px; box-sizing:border-box; padding:0 18px !important; margin:0 !important;
  border-radius:999px !important; border:1.5px solid #000 !important;
  background:radial-gradient(120% 100% at 50% 0%, rgba(255,255,255,0.98) 0%, rgba(255,255,255,0.78) 55%, rgba(255,255,255,0.62) 100%) !important;
  -webkit-backdrop-filter:blur(12px) saturate(170%); backdrop-filter:blur(12px) saturate(170%);
  box-shadow:inset 0 2px 1px #fff, inset 0 -6px 12px rgba(20,21,26,0.06), 0 8px 18px -10px rgba(20,21,26,0.45) !important;
  color:#000 !important; font-size:14px !important; font-weight:600 !important; line-height:1 !important;
  text-decoration:none !important; text-shadow:none !important; text-transform:none !important; letter-spacing:-0.01em !important;
  opacity:1 !important; transform:none !important; transition:background .18s ease, color .18s ease !important;
}
html:root body nav.site-header .nav-right :is(#signinLink, #siteSignOutLink, .btn-signin):hover{
  background:#000 !important; color:#fff !important;
}
html:root body nav.site-header .nav-right :is(#signinLink, #siteSignOutLink, .btn-signin):focus-visible{ outline:2px solid #00a63d; outline-offset:3px; }
html:root body nav.site-header .nav-right .btn-signin svg{ display:none !important; }
@media (max-width:560px){
  html:root body nav.site-header .nav-right{ gap:8px !important; }
  html:root body nav.site-header .nav-right :is(#signinLink, #siteSignOutLink, .btn-signin){ height:34px; padding:0 12px !important; font-size:13px !important; }
}

/* ---------- Home: "See All Listings" sits on the count row ---------- */
html:root body .hf-countrow{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin:20px 0 12px; }
html:root body .hf-countrow .hf-count{ margin:0 !important; }
html:root body .hf-seeall{
  display:inline-flex; align-items:center; gap:7px; height:38px; box-sizing:border-box; padding:0 16px; flex-shrink:0;
  border-radius:999px; border:1.5px solid #000; color:#000 !important; text-decoration:none;
  font-size:14px; font-weight:600; letter-spacing:-0.01em;
  background:radial-gradient(120% 100% at 50% 0%, rgba(255,255,255,0.98) 0%, rgba(255,255,255,0.78) 55%, rgba(255,255,255,0.62) 100%);
  box-shadow:inset 0 2px 1px #fff, inset 0 -6px 12px rgba(20,21,26,0.06), 0 8px 18px -10px rgba(20,21,26,0.45);
  transition:background .18s ease, color .18s ease;
}
html:root body .hf-seeall:hover{ background:#000; color:#fff !important; }
html:root body .hf-seeall svg{ width:16px; height:16px; stroke:currentColor; }
@media (max-width:420px){ html:root body .hf-seeall{ height:34px; padding:0 12px; font-size:13px; } }
/* How It Works: each lane ends in a short pill, same look as the header pills */
html:root body .mq-lane .mq-lane-pill{ margin-top:auto; align-self:flex-start; }

/* ---------- 2026-09-27: green lines, pros row, one button size ---------- */
/* Green that stays readable on the light background */
html:root body .mq-sub-green{ color:#00a63d !important; font-weight:600; }
html:root body .mq-secure{ color:#00a63d !important; font-weight:600; }
html:root body .mq-secure svg{ stroke:#00a63d !important; }
/* "See All Pros" on the right of the pros count, like "See All Listings" */
html:root body .mq-pros .hp-countrow{ margin:34px 0 14px; }
html:root body .mq-pros .hp-countrow + .hp-grid{ margin-top:0 !important; }
html:root body .mq-pros .hp-countrow .hf-count{ color:rgba(255,255,255,0.8) !important; }
/* Every button on the site is the size of "See All Listings":
   38px tall, 14px text, 16px side padding. Shapes and colors stay as they are. */
html:root body :is(.mq-btn, .hf-go, .hf-all, .search-btn, .continue-btn, .submit-btn, .contact-btn, .checkout-btn,
  .pay-btn, .apply-btn, .btn-primary, .signup-btn, .compare-btn, .pay-now, .cta-quote, .cta-interested,
  .load-more-btn, .cancel-btn, .btn-secondary, .save-btn, .google-btn, .report-modal-submit, .report-modal-cancel,
  .vh-request-btn, .hpost-start){
  height:38px !important; min-height:0 !important; box-sizing:border-box !important;
  padding-top:0 !important; padding-bottom:0 !important; padding-left:16px !important; padding-right:16px !important;
  font-size:14px !important; line-height:1 !important;
  align-items:center; justify-content:center;
}
html:root body :is(.mq-btn, .hf-go, .hf-all, .search-btn) svg{ width:16px !important; height:16px !important; }
/* Home search: the bar is slimmer so the 38px Search button sits neatly beside it */
html:root body .hf-bar{ align-items:center; }
html:root body .hf-q{ height:46px !important; }html:root body .mq-pros .hf-seeall{ background:#fff !important; border-color:#fff !important; }
html:root body .mq-pros .hf-seeall:hover{ background:#00a63d !important; border-color:#00a63d !important; color:#fff !important; }

/* ---------- 2026-09-27: post page cards, footer gap, How It Works toggle ---------- */
/* Thin black border on the "What are you posting?" cards */
html:root body .opt-card{ border:1px solid var(--b-ink) !important; }
/* The black "Why 99CentGigs" band runs straight into the footer (no white strip) */
html:root body .compare-band ~ footer.site-footer{ margin-top:0 !important; }
html:root body .compare-band{ margin-bottom:0 !important; }
/* How It Works: just a button until it's opened */
html:root body .mq-how-toggle{ display:flex; justify-content:center; }
html:root body .mq-how.is-collapsed{ padding-top:36px !important; padding-bottom:36px !important; }
html:root body #howToggle{ cursor:pointer; font-family:inherit; }
html:root body #howToggle svg{ transition:transform .2s ease; }
html:root body #howToggle[aria-expanded="true"] svg{ transform:rotate(180deg); }
html:root body #howBody{ margin-top:28px; }
html:root body #howBody[hidden]{ display:none !important; }
html:root body .mq-how.is-collapsed ~ footer.site-footer{ margin-top:0 !important; }
/* ==========================================================================
   One title style for the whole site (2026-09-27): the "Find Your Next Gig."
   look. Light section, small green all-caps label, huge bold near-black
   title with the green accent word, green one-line subtitle, all centered.
   ========================================================================== */
/* Sections: light, no black boxes behind page and section titles */
html:root body :is(.hero-strip, .hero-strip-band, .compare-band, .why-panel, section.mq-pros){
  background:var(--b-paper) !important; background-image:none !important;
  color:var(--b-ink) !important; box-shadow:none !important; border:0 !important;
}
html:root body .hero-strip{ padding:clamp(36px,5vw,64px) 16px 10px !important; border-radius:0 !important; text-align:center !important; }
/* Label above the title */
html:root body :is(.doc-eyebrow, .compare-eyebrow, .why-eyebrow, .mq-eyebrow, .hf-eyebrow){
  font-size:13px !important; font-weight:700 !important; letter-spacing:.2em !important; text-transform:uppercase !important;
  color:var(--b-green-dark) !important; text-align:center !important; margin:0 0 10px !important;
}
/* The title */
html:root body :is(.hero-strip h1, .hero-caption h1, .doc > h1, .compare-title, .why-title, .mq-title){
  font-family:var(--b-display) !important; font-weight:700 !important; text-transform:none !important;
  font-size:clamp(50px, 8.8vw, 132px) !important; letter-spacing:-.055em !important; line-height:1 !important;
  color:var(--b-ink) !important; text-align:center !important; margin:0 0 16px !important; text-wrap:balance;
}
html:root body :is(.hero-strip h1, .hero-caption h1, .doc > h1, .compare-title, .why-title, .mq-title) span{ color:var(--b-green) !important; }
html:root body section.mq-pros .mq-title{ color:var(--b-ink) !important; }
/* The one-line subtitle */
html:root body :is(.hero-strip .sub, .hero-caption > p, .mq-sub){
  font-size:clamp(17px, 1.6vw, 20px) !important; font-weight:600 !important; color:#00a63d !important;
  text-align:center !important; max-width:640px; margin:0 auto !important; letter-spacing:normal !important;
}
html:root body section.mq-pros .mq-sub{ color:#00a63d !important; }

/* Pros section on the light background */
html:root body section.mq-pros .hp-countrow .hf-count{ color:#3a3c44 !important; }
html:root body section.mq-pros .hf-seeall{
  border-color:#000 !important;
  background:radial-gradient(120% 100% at 50% 0%, rgba(255,255,255,0.98) 0%, rgba(255,255,255,0.78) 55%, rgba(255,255,255,0.62) 100%) !important;
}
html:root body section.mq-pros .hf-seeall:hover{ background:#000 !important; border-color:#000 !important; color:#fff !important; }
html:root body section.mq-pros .mq-link-light{ color:var(--b-ink) !important; }
html:root body section.mq-pros .mq-yours{ border-color:rgba(13,13,11,0.14) !important; color:#3a3c44 !important; }
html:root body section.mq-pros .mq-yours b{ color:var(--b-green-dark) !important; }
html:root body section.mq-pros .hf-empty{ color:#3a3c44 !important; }
html:root body section.mq-pros .hp-skel{ background:linear-gradient(90deg, #eceee9, #f6f7f4, #eceee9) !important; background-size:200% 100% !important; }

/* "Why 99CentGigs" list on the light background */
html:root body .why-panel .why-list{ max-width:640px; margin-left:auto; margin-right:auto; }
html:root body .why-panel .why-list li, html:root body .why-panel .why-list strong{ color:var(--b-ink) !important; }
html:root body .why-panel .why-list svg{ stroke:var(--b-green) !important; }
/* Homepage Post an Opportunity: the button to start posting */
html:root body .mq-post-cta{ display:flex; justify-content:center; margin-top:24px; }
html:root body .mq-post-cta + .mq-secure{ margin-top:14px !important; }

/* Pros section: black-bordered "Your Business Belongs Here" box; request line in two colors, no underline */
html:root body section.mq-pros .mq-yours{ border:1px solid #000 !important; background:#000 !important; color:#fff !important; }
html:root body section.mq-pros .mq-yours b{ color:var(--b-green) !important; }
html:root body section.mq-pros .mq-request{ text-decoration:none !important; color:var(--b-ink) !important; }
html:root body section.mq-pros .mq-request .mq-request-q{ color:#00a63d !important; }
/* Homepage Post an Opportunity: tighter spacing */
html:root body section.mq-post{ padding:clamp(32px,3.5vw,48px) 20px clamp(28px,3vw,40px) !important; }
html:root body section.mq-post .mq-perks{ margin-top:20px !important; padding-top:18px !important; }
html:root body section.mq-post .mq-post-cta{ margin-top:18px !important; }html:root body section.mq-pros{ padding-bottom:clamp(28px,3vw,40px) !important; }

/* Homepage service videos: no initials bubble */
html:root body .hp-card .hp-avatar{ display:none !important; }

/* ==========================================================================
   Every card on the site gets the same clear drop shadow so it stands out
   from the page (2026-09-27).
   ========================================================================== */
html:root body{
  --card-lift: 0 1px 2px rgba(13,13,11,0.08), 0 16px 34px -14px rgba(13,13,11,0.38);
}
/* Light cards */
html:root body :is(.card:not(.seg-item .card), .form-wrap, .listing-card, .service-card, .vol-card, .settings-card,
  .profile-card, .signup-card, .confirm-card, .faq-card, .price-card, .lead-card, .applicant-card, .opt-card,
  .empty-panel, .how-step, .listing-row, .filters, .auth-wrap .panel, .comp-table, .mq-tile, .hf-panel,
  .why-panel, .am-note, .bundle-toggle, .terms-check, .faq-contact, .special-box, .highlight-tile, .doc, .callout,
  .mq-yours){
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.9), var(--card-lift) !important;
}
/* Glass cards keep their shine and rim, with the stronger drop underneath */
html:root body :is(.hf-card, .hp-card){
  box-shadow:inset 0 2px 1px #fff, inset 0 -10px 20px rgba(20,21,26,0.05), inset 0 0 0 1px rgba(20,21,26,0.06), var(--card-lift) !important;
}
/* Dark cards: same drop, no white inner line */
html:root body :is(.hpost-price, .scenario, .sc-card){
  box-shadow:inset 0 2px 1px rgba(255,255,255,0.3), var(--card-lift) !important;
}
/* "Compare Selected" (bottom bar on the browse pages): green glass */
html:root body .compare-btn{
  color:#fff !important;
  background:radial-gradient(120% 100% at 50% 0%, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0.05) 50%, rgba(255,255,255,0) 100%), linear-gradient(180deg, #00a63d 0%, #00a63d 45%, #00a63d 100%) !important;
  border:1.5px solid rgba(255,255,255,0.55) !important;
  box-shadow:inset 0 2px 1px rgba(255,255,255,0.6), inset 0 -6px 12px rgba(0,0,0,0.14), 0 12px 24px -12px rgba(0,166,61,0.6) !important;
}
html:root body .compare-btn svg{ stroke:#fff !important; }
html:root body .compare-btn:hover{ color:#fff !important; }
html:root body .compare-btn:disabled{ opacity:.55; cursor:not-allowed; }
/* Terms / Privacy: the "Last updated" line centers under the centered title */
html:root body .doc > .updated{ text-align:center !important; }
/* Phones: logo and both header pills stay on one line */
@media (max-width:420px){
  html:root body nav.site-header{ flex-wrap:nowrap !important; gap:8px !important; padding:10px 12px !important; }
  html:root body nav.site-header .logo.wordmark{ font-size:20px !important; }
  html:root body nav.site-header .nav-right{ gap:6px !important; margin-left:auto !important; }
  html:root body nav.site-header .nav-right :is(#signinLink, #siteSignOutLink, .btn-signin){ height:32px !important; padding:0 10px !important; font-size:12.5px !important; }
}
/* Toggles (e.g. Employment Type): only the clear glass bubble marks the choice;
   the chosen option no longer draws its own dark pill inside it */
html:root body .seg-track .seg-item .pill,
html:root body .seg-track .seg-item input:checked + .pill,
html:root body .seg-track .seg-item.seg-on .pill{
  background:transparent !important; background-image:none !important;
  border-color:transparent !important; box-shadow:none !important;
}
/* Form section titles (Employer Profile, Job Details, How Should People Apply?) in green */
html:root body .section-block .section-title{ color:#00a63d !important; }
/* Signed-in header links ("Your Leads", "Sign Out") use the same pill as Sign In */
html:root body nav.site-header .nav-right a.signin-link{
  display:inline-flex; align-items:center; justify-content:center; height:38px; box-sizing:border-box;
  padding:0 18px !important; margin:0 !important; border-radius:999px !important; border:1.5px solid #000 !important;
  background:radial-gradient(120% 100% at 50% 0%, rgba(255,255,255,0.98) 0%, rgba(255,255,255,0.78) 55%, rgba(255,255,255,0.62) 100%) !important;
  box-shadow:inset 0 2px 1px #fff, inset 0 -6px 12px rgba(20,21,26,0.06), 0 8px 18px -10px rgba(20,21,26,0.45) !important;
  color:#000 !important; font-size:14px !important; font-weight:600 !important; line-height:1 !important; text-decoration:none !important; white-space:nowrap;
}
html:root body nav.site-header .nav-right a.signin-link:hover{ background:#000 !important; color:#fff !important; }
@media (max-width:420px){
  html:root body nav.site-header .nav-right a.signin-link{ height:32px; padding:0 10px !important; font-size:12.5px !important; }
}
/* Header logo: the 99CentGigs photo-letter image (2026-09-28).
   multiply blends its white background into the header so no white box shows. */
html:root body nav.site-header .logo.logo-img{ display:flex !important; align-items:center; flex:0 0 auto; line-height:0; }
html:root body nav.site-header .logo.logo-img img{ height:40px !important; width:auto !important; display:block; mix-blend-mode:multiply; }
@media (max-width:860px){ html:root body nav.site-header .logo.logo-img img{ height:34px !important; } }
@media (max-width:420px){ html:root body nav.site-header .logo.logo-img img{ height:26px !important; } }
/* Service Pro section: a black panel directly behind the video clips only;
   the section and its text stay on the light background (2026-09-28) */
html:root body section.mq-pros .hp-grid{
  background:#000; border-radius:28px; padding:24px;
  box-shadow:0 1px 2px rgba(13,13,11,0.08), 0 16px 34px -14px rgba(13,13,11,0.38);
}
@media (max-width:1000px){ html:root body section.mq-pros .hp-grid{ margin-left:0 !important; margin-right:0 !important; padding:18px !important; } }
@media (max-width:640px){ html:root body section.mq-pros .hp-grid{ border-radius:22px; padding:14px !important; } }
/* Homepage: "How It Works" button in green */
html:root body #howToggle{
  background:#00a63d !important; border-color:#00a63d !important; color:#fff !important;
  box-shadow:inset 0 2px 1px rgba(255,255,255,0.35), 0 10px 22px -10px rgba(0,166,61,0.6) !important;
}
html:root body #howToggle:hover{ background:#00a63d !important; border-color:#00a63d !important; color:#fff !important; }
html:root body #howToggle svg{ stroke:#fff !important; }

/* One Place. Three Ways In.: the three columns take turns fading to green
   and back to black, one at a time, starting with Looking for Work */
@keyframes laneGlow{
  0%, 40%, 100% { color:var(--b-ink); border-color:var(--b-ink); background-color:var(--b-ink); }
  12%, 26%      { color:#00a63d;      border-color:#00a63d;      background-color:#00a63d; }
}
@keyframes laneGlowText{
  0%, 40%, 100% { color:var(--b-ink); }
  12%, 26%      { color:#00a63d; }
}
html:root body section.mq-how .mq-lane h3{ animation:laneGlowText 7.5s ease-in-out infinite; }
html:root body section.mq-how .mq-lane h3{ border-bottom-color:currentColor !important; }
html:root body section.mq-how .mq-lane .mq-steps li b{ animation:laneGlowText 7.5s ease-in-out infinite; }
html:root body section.mq-how .mq-lane .mq-step-n{ animation:laneGlow 7.5s ease-in-out infinite; color:#fff !important; }
html:root body section.mq-how .mq-lane:nth-child(2) :is(h3, .mq-steps li b, .mq-step-n){ animation-delay:2.5s; }
html:root body section.mq-how .mq-lane:nth-child(3) :is(h3, .mq-steps li b, .mq-step-n){ animation-delay:5s; }
@media (prefers-reduced-motion: reduce){
  html:root body section.mq-how .mq-lane :is(h3, .mq-steps li b, .mq-step-n){ animation:none; }
}
/* Small green labels above titles ("For Job Seekers", "Post an Opportunity",
   "Why 99CentGigs", "Legal", "Get Started"...): twice as big, site-wide */
html:root body :is(.doc-eyebrow, .compare-eyebrow, .why-eyebrow, .mq-eyebrow, .hf-eyebrow, .sell-eyebrow, .hero-eyebrow, .hp-eyebrow){
  font-size:clamp(20px, 2.2vw, 26px) !important; letter-spacing:.14em !important; line-height:1.2 !important; margin-bottom:14px !important;
}
/* Slogan lines under titles ("Real Connections. No Bots. No Ghosting.",
   "Watch Them Work...", "Hiring, Looking for Volunteers...", page subtitles):
   twice as big, site-wide */
html:root body :is(.hero-strip .sub, .hero-caption > p, .mq-sub){
  font-size:clamp(22px, 3.1vw, 40px) !important; line-height:1.25 !important; max-width:980px !important;
  letter-spacing:-0.01em !important; text-wrap:balance;
}
/* Post page (Got an Opportunity? Post It.): the three cards take turns fading
   to green and back to black, one at a time, like the How It Works columns.
   CSS-only color animation: no scripts, no effect on page speed. */
@property --glow{ syntax:'<color>'; inherits:true; initial-value:#0D0D0B; }
@keyframes glowVar{
  0%, 40%, 100% { --glow:#0D0D0B; }
  12%, 26%      { --glow:#00a63d; }
}
html:root body .glow-cycle .opt-card{ --glow:#0D0D0B; animation:glowVar 7.5s ease-in-out infinite; border-color:var(--glow) !important; }
html:root body .glow-cycle .opt-card .title{ color:var(--glow) !important; }
html:root body .glow-cycle .opt-card:nth-child(2){ animation-delay:2.5s; }
html:root body .glow-cycle .opt-card:nth-child(3){ animation-delay:5s; }
@media (prefers-reduced-motion: reduce){
  html:root body .glow-cycle .opt-card, html:root body .glow-cycle .opt-card .title{ animation:none; }
}
/* The whole card flashes, not just its title (2026-09-28):
   every line of text in the card follows the same green/black cycle */
html:root body .glow-cycle .opt-card .desc{ color:var(--glow) !important; }
/* How It Works columns: same cycle for all the text in each column */
html:root body section.mq-how .mq-lane{ --glow:#0D0D0B; animation:glowVar 7.5s ease-in-out infinite; }
html:root body section.mq-how .mq-lane:nth-child(2){ animation-delay:2.5s; }
html:root body section.mq-how .mq-lane:nth-child(3){ animation-delay:5s; }
html:root body section.mq-how .mq-lane :is(h3, .mq-steps li, .mq-steps li b, .mq-steps li span){ animation:none !important; color:var(--glow) !important; }
html:root body section.mq-how .mq-lane h3{ border-bottom-color:var(--glow) !important; }
html:root body section.mq-how .mq-lane .mq-step-n{ animation:none !important; background-color:var(--glow) !important; color:#fff !important; }
@media (prefers-reduced-motion: reduce){
  html:root body section.mq-how .mq-lane, html:root body .glow-cycle .opt-card{ animation:none !important; }
}
/* ...and the whole card grows a little while it's green, then settles back */
@keyframes glowGrow{
  0%, 40%, 100% { transform:scale(1); }
  12%, 26%      { transform:scale(1.06); }
}
html:root body .glow-cycle .opt-card{ animation:glowVar 7.5s ease-in-out infinite, glowGrow 7.5s ease-in-out infinite; transform-origin:50% 50%; position:relative; }
html:root body .glow-cycle .opt-card:nth-child(2){ animation-delay:2.5s, 2.5s; }
html:root body .glow-cycle .opt-card:nth-child(3){ animation-delay:5s, 5s; }
html:root body section.mq-how .mq-lane{ animation:glowVar 7.5s ease-in-out infinite, glowGrow 7.5s ease-in-out infinite; transform-origin:50% 40%; }
html:root body section.mq-how .mq-lane:nth-child(2){ animation-delay:2.5s, 2.5s; }
html:root body section.mq-how .mq-lane:nth-child(3){ animation-delay:5s, 5s; }
@media (prefers-reduced-motion: reduce){
  html:root body section.mq-how .mq-lane, html:root body .glow-cycle .opt-card{ animation:none !important; }
}
/* Post page calculator: the prices change in the same white box as the
   "I need __ days" number, and all the card text is bold */
html:root body .scenario .calc-box{
  display:inline-block; padding:6px 16px; border-radius:12px; color:#0d0d0b !important; font-weight:800 !important;
  background:linear-gradient(180deg, rgba(255,255,255,0.98), rgba(255,255,255,0.82)) !important;
  border:1.5px solid rgba(255,255,255,0.9);
  box-shadow:inset 0 2px 1px #fff, inset 0 -3px 6px rgba(20,21,26,0.08), 0 8px 18px -8px rgba(0,0,0,0.6);
  font-variant-numeric:tabular-nums; transition:transform .15s ease;
}
html:root body .scenario :is(.sc-label, .sc-detail, .scenario-setup, .days-input-row label){ font-weight:800 !important; }
html:root body .scenario .sc-amount{ font-weight:800 !important; margin-bottom:10px !important; }
html:root body .scenario .sc-detail{ color:rgba(255,255,255,0.88) !important; }
html:root body .scenario .days-input-row input{ font-weight:800 !important; }
/* Post page calculator: solid colors, no gradients, sharp edges */
html:root body .scenario{ background:#000 !important; background-image:none !important; border:1px solid #000 !important; }
html:root body .scenario .sc-card.us{ background:#00A63D !important; background-image:none !important; border:2px solid #00A63D !important; box-shadow:none !important; }
html:root body .scenario .sc-card.them{ background:#B3261E !important; background-image:none !important; border:2px solid #B3261E !important; box-shadow:none !important; }
html:root body .scenario .calc-box, html:root body .scenario .days-input-row input{
  background:#fff !important; background-image:none !important; border:2px solid #fff !important; box-shadow:none !important; color:#0d0d0b !important;
}
/* ...and animated: the boxes pop when the number changes, and the days box
   gently pulses until someone tries it */
@keyframes calcBump{ 0%{ transform:scale(1); } 35%{ transform:scale(1.14); } 100%{ transform:scale(1); } }
html:root body .scenario .calc-box.bump{ animation:calcBump .4s cubic-bezier(.34,1.56,.64,1); }
@keyframes tryMe{ 0%, 100%{ box-shadow:0 0 0 0 rgba(0,166,61,0.7); } 50%{ box-shadow:0 0 0 8px rgba(0,166,61,0); } }
html:root body .scenario .days-input-row input:not(.used){ animation:tryMe 1.8s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce){
  html:root body .scenario .calc-box.bump, html:root body .scenario .days-input-row input{ animation:none !important; }
}
/* Calculator cards take turns growing and settling (solid colors, sharp) */
@keyframes cardTurn{ 0%, 45%, 100%{ transform:scale(1); } 15%, 30%{ transform:scale(1.05); } }
html:root body .scenario .sc-card{ animation:cardTurn 4.4s ease-in-out infinite; transform-origin:50% 50%; }
html:root body .scenario .sc-card.them{ animation-delay:2.2s; }
@media (prefers-reduced-motion: reduce){ html:root body .scenario .sc-card{ animation:none !important; } }
/* FAQ section headings (Pricing & Billing, Posting a Listing...): one size up, homepage green */
html:root body .faq-section-title{ font-size:20px !important; color:#00a63d !important; margin-bottom:14px !important; }

/* Homepage touch-ups (2026-09-28) */
/* "Real Connections. No Bots. No Ghosting.": only "No Bots." in green */
html:root body .mq-sub.mq-sub-mixed{ color:var(--b-ink) !important; }
html:root body .mq-sub.mq-sub-mixed span{ color:#00a63d !important; }
/* Browsing Is Always Free / People Decide / No Expired / An Update...: two sizes up, bold */
html:root body .hf-truths li{ font-size:clamp(17px, 1.7vw, 20px) !important; font-weight:800 !important; color:var(--b-ink) !important; }
html:root body .hf-truths svg{ width:20px !important; height:20px !important; }
/* Less space between "Find a Local Service Pro." and "Watch Them Work..." */
html:root body section.mq-pros .mq-title{ margin-bottom:4px !important; }
/* "Not Sure Who to Hire? Tell Us What You Need": two sizes up */
html:root body section.mq-pros .mq-request{ font-size:clamp(18px, 1.8vw, 21px) !important; }
/* "We Never See Your Card. PayPal Handles Every Payment.": black, flashing */
@keyframes secureFlash{ 0%, 100%{ opacity:1; } 50%{ opacity:.3; } }
html:root body section.mq-post .mq-secure{ color:var(--b-ink) !important; animation:secureFlash 1.8s ease-in-out infinite; }
html:root body section.mq-post .mq-secure svg{ stroke:var(--b-ink) !important; }
/* The check points (Unlimited Applicants, Pay Only for the Days...): bold, one size up */
html:root body section.mq-post .mq-perks li{ font-size:18px !important; font-weight:700 !important; }
html:root body section.mq-post .mq-perks li strong{ font-weight:800 !important; }
@media (prefers-reduced-motion: reduce){ html:root body section.mq-post .mq-secure{ animation:none !important; } }
/* Homepage checkmark lines (Browsing Is Always Free, People Decide, No Expired
   Listings): one at a time, each flashes
   green and grows, then settles back. CSS only. */
@keyframes truthGrow{ 0%, 40%, 100%{ transform:scale(1); } 12%, 26%{ transform:scale(1.14); } }
html:root body .hf-truths li{
  --glow:#0D0D0B; color:var(--glow) !important; transform-origin:50% 50%;
  animation:glowVar 6s ease-in-out infinite, truthGrow 6s ease-in-out infinite;
}
html:root body .hf-truths li:nth-child(2){ animation-delay:2s, 2s; }
html:root body .hf-truths li:nth-child(3){ animation-delay:4s, 4s; }
html:root body .hf-truths li:nth-child(4){ animation-delay:6s, 6s; }
@media (prefers-reduced-motion: reduce){ html:root body .hf-truths li{ animation:none !important; } }
/* Post section slogan: the first part in black, the rest stays green */
html:root body .mq-sub .mq-sub-ink{ color:var(--b-ink) !important; }

/* Tighter stack: label, title and slogan sit close together, site-wide */
html:root body :is(.doc-eyebrow, .compare-eyebrow, .why-eyebrow, .mq-eyebrow, .hf-eyebrow, .sell-eyebrow, .hero-eyebrow, .hp-eyebrow){ margin-bottom:2px !important; }
html:root body :is(.hero-strip h1, .hero-caption h1, .doc > h1, .compare-title, .why-title, .mq-title){ margin-top:0 !important; margin-bottom:6px !important; line-height:.96 !important; }
html:root body :is(.hero-strip .sub, .hero-caption > p, .mq-sub){ margin-top:0 !important; }
/* 2026-09-28 */
/* Small labels ("For Job Seekers", "Get Started"...): letters closer together */
html:root body :is(.doc-eyebrow, .compare-eyebrow, .why-eyebrow, .mq-eyebrow, .hf-eyebrow, .sell-eyebrow, .hero-eyebrow, .hp-eyebrow){ letter-spacing:.04em !important; }
/* Page slogans picked to be black ("Choose the Option...", "No Commissions... Show off Your Work and Get Found for Just 99¢ a Day.") */
html:root body .hero-strip .sub.sub-ink{ color:var(--b-ink) !important; }
/* "Fill Out the Form Below to Create Your Listing" in black */
html:root body .form-instruction{ color:var(--b-ink) !important; }
/* Continue buttons on the posting forms: white pill with a green border */
html:root body .continue-btn{
  background:#fff !important; background-image:none !important; color:var(--b-ink) !important;
  border:2px solid #00a63d !important; border-radius:999px !important;
  box-shadow:0 8px 18px -10px rgba(0,166,61,0.55) !important;
}
html:root body .continue-btn:hover{ background:#00a63d !important; color:#fff !important; }
html:root body .continue-btn svg{ stroke:currentColor !important; }
/* Header "Post an Opportunity": white pill with a green border, like the
   Continue buttons (all pages, all screen sizes). :not(#_) lifts it above
   the shared header-pill rule. */
html:root body nav.site-header .nav-right a.btn-signin:not(#_){
  background:#fff !important; background-image:none !important; color:var(--b-ink) !important;
  border:2px solid #00a63d !important;
  box-shadow:0 8px 18px -10px rgba(0,166,61,0.55) !important;
}
html:root body nav.site-header .nav-right a.btn-signin:not(#_):hover{ background:#00a63d !important; color:#fff !important; }
/* Header "Post an Opportunity" and every Continue button: green fill with white
   letters when pointed at, focused, pressed or tapped (phones have no hover) */
html:root body nav.site-header .nav-right a.btn-signin:not(#_):is(:hover, :focus-visible, :active, .is-pressed),
html:root body .continue-btn:is(:hover, :focus-visible, :active, .is-pressed){
  background:#00a63d !important; border-color:#00a63d !important; color:#fff !important;
}
html:root body nav.site-header .nav-right a.btn-signin:not(#_), html:root body .continue-btn{ transition:background .15s ease, color .15s ease !important; }
/* Audio Rights / Visual Rights (service video): no black bar. Each option is a
   clear glass button that fills black, with white letters, when chosen. */
html:root body .type-options.no-seg{
  display:flex !important; flex-wrap:wrap; gap:10px !important; padding:0 !important;
  background:none !important; background-image:none !important; border:0 !important; box-shadow:none !important; border-radius:0 !important;
}
html:root body .type-options.no-seg .type-opt input:checked + .pill{
  background:#0d0d0b !important; background-image:none !important; color:#fff !important;
  border-color:#0d0d0b !important;
  box-shadow:inset 0 2px 1px rgba(255,255,255,0.28), 0 8px 18px -10px rgba(0,0,0,0.6) !important;
}
/* Checkout Pay button: same as the Continue buttons (white, green border, green
   when pressed); faded and inactive until the Terms box is ticked */
html:root body .continue-btn:disabled,
html:root body .continue-btn:disabled:is(:hover, :active, .is-pressed){
  opacity:.45 !important; cursor:not-allowed !important;
  background:#fff !important; color:var(--b-ink) !important; border-color:#00a63d !important;
}
/* Phones and tablets: nothing, including images while they load, can stick out
   past the screen edge or make the page scroll sideways */
@media (max-width:820px){
  html, body{ overflow-x:clip !important; }
  html:root body :is(img, video, iframe, canvas):not(.vh-letter video){ max-width:100% !important; }
  html:root body img{ height:auto; }
  html:root body :is(.hp-thumb img, .hp-thumb video, .vh-letter video){ height:100% !important; }
}
/* Videos fill their boxes edge to edge (no bars, no blurred sides) */
html:root body .hp-thumb :is(img, video){ object-fit:cover !important; }
html:root body .hp-thumb img.hp-bg{ display:none !important; }
html:root body .sc-media :is(video, > img){ object-fit:cover !important; }
/* A pro's profile: the video box takes the video's own shape, so it is filled
   completely and nothing is cropped */
html:root body #videoCard{ width:fit-content !important; max-width:100% !important; margin-left:auto !important; margin-right:auto !important; background:transparent !important; padding:0 !important; overflow:hidden; line-height:0; }
/* Dashboard: Quote Requests tab */
html:root body .quotes-head{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; font-size:18px !important; margin:4px 0 10px !important; }
html:root body .quotes-note{ font-size:13.5px; font-weight:500; color:#55534C; }
html:root body .quote-msg{ white-space:pre-line; margin-top:6px; color:#0d0d0b !important; display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; }
/* Phones: How It Works stacks its three sections (no half-hidden columns) */
@media (max-width:640px){
  html:root body .mq-lanes{
    grid-auto-flow:row !important; grid-auto-columns:auto !important; grid-template-columns:1fr !important;
    overflow:visible !important; scroll-snap-type:none !important; margin:24px 0 0 !important; padding:0 !important; gap:28px !important;
  }
}
/* Phones: posting-form bottom row (Back / Save Progress / Continue) fits.
   Continue takes its own full-width line; Back and Save Progress sit below. */
@media (max-width:560px){
  html:root body .cta-row:has(.continue-btn){
    flex-wrap:wrap !important; justify-content:space-between !important; align-items:center !important; gap:10px 12px !important;
  }
  html:root body .cta-row:has(.continue-btn) .continue-btn{ flex:1 1 100% !important; order:-1; width:100% !important; }
  html:root body .cta-row:has(.continue-btn) > :not(.continue-btn){ flex:0 1 auto !important; margin:0 !important; white-space:nowrap; }
}
/* Long web addresses and emails wrap instead of being cut off */
html:root body :is(.biz-row, .contact-group, .links-list) a{ overflow-wrap:anywhere; word-break:break-word; }
html:root body .continue-btn{ display:inline-flex !important; }
@media (max-width:560px){ html:root body .cta-row:has(.continue-btn){ display:flex !important; } }@media (max-width:560px){ html:root body .cta-row:has(.continue-btn){ flex-direction:row !important; } html:root body .cta-row:has(.continue-btn) .price-note{ flex:1 1 100% !important; text-align:center; } }

/* Phones: service videos in a 2 x 2 grid instead of a sideways row */
@media (max-width:640px){
  html:root body section.mq-pros .hp-grid{
    display:grid !important; grid-template-columns:repeat(2, minmax(0,1fr)) !important; grid-auto-flow:row !important; grid-auto-columns:auto !important;
    overflow:visible !important; scroll-snap-type:none !important; gap:10px !important;
  }
  html:root body section.mq-pros .hp-card{ height:250px !important; }
  html:root body section.mq-pros .hp-info{ padding:18px 10px 10px !important; }
  html:root body section.mq-pros .hp-name{ font-size:13.5px !important; }
  html:root body section.mq-pros .hp-meta{ font-size:12px !important; }
  html:root body section.mq-pros .hp-play{ width:42px !important; height:42px !important; margin:-21px 0 0 -21px !important; }
  html:root body section.mq-pros .hp-dur{ font-size:11px !important; top:8px !important; right:8px !important; }
}
/* Phones: on the job/gig details steps, Save & Continue sits inside .cta-right
   (a column). Keep it full height instead of squashing to 20px. */
@media (max-width:560px){
  html:root body .cta-row .cta-right:has(.continue-btn){ flex:1 1 100% !important; order:-1; margin-left:0 !important; flex-direction:column !important; align-items:stretch !important; gap:10px !important; }
  html:root body .cta-row .cta-right .continue-btn{ flex:0 0 auto !important; min-height:44px !important; justify-content:center !important; }
  html:root body .tri-toggle{ flex-wrap:wrap !important; max-width:100%; }
}
/* Long listing titles wrap instead of running off the screen */
html:root body .provider-header > div{ min-width:0; }
html:root body :is(h1, h2, .ph-title){ overflow-wrap:break-word; }
@media (max-width:560px){ html:root body .ph-title{ overflow-wrap:anywhere; hyphens:auto; } }
/* Detail pages: long links or words in a description can't widen the page */
html:root body .detail-wrap > *{ min-width:0; }
html:root body :is(.body-text, .card) :is(p, li, a, span){ overflow-wrap:anywhere; }
/* Request a Service: Send Request and Save for Later match the Continue /
   Post an Opportunity buttons (white pill, green border, green when pressed) */
html:root body .green-pill{
  background:#fff !important; background-image:none !important; color:var(--b-ink) !important;
  border:2px solid #00a63d !important; border-radius:999px !important;
  box-shadow:0 8px 18px -10px rgba(0,166,61,0.55) !important;
  font-weight:700 !important; cursor:pointer; transition:background .15s ease, color .15s ease !important;
}
html:root body .green-pill:not(:disabled):is(:hover, :focus-visible, :active){ background:#00a63d !important; border-color:#00a63d !important; color:#fff !important; }
html:root body .green-pill:disabled{ opacity:.5; cursor:not-allowed; }
/* iPhones zoom the whole page when a text box under 16px is tapped.
   16px on phones keeps the page still while people type. */
@media (max-width:640px){
  html:root body :is(input:not([type=checkbox]):not([type=radio]):not([type=range]), select, textarea){ font-size:16px !important; }
}
/* Homepage "I Want To…" (the only section under the hero since 2026-09-30) */
html:root body .iw{ padding:44px 16px 8px; text-align:center; }
html:root body .iw .iw-label{ font-size:clamp(28px, 3.4vw, 44px) !important; font-weight:700 !important; letter-spacing:-0.035em; color:var(--b-ink, #0d0d0b) !important; margin:0 0 20px !important; text-transform:none !important; }
html:root body .iw .iw-label span{ color:#00a63d; }
html:root body .iw-row{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; max-width:900px; margin:0 auto; }
html:root body .iw-btn{
  flex:1 1 220px; max-width:280px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  padding:16px 18px; border:2px solid #00a63d; border-radius:999px; background:#fff; color:#0d0d0b; text-decoration:none;
  font-weight:700; font-size:18px; letter-spacing:-0.01em; box-shadow:0 8px 18px -10px rgba(0,166,61,.55); transition:background .15s ease, color .15s ease;
}
html:root body .iw-btn small{ font-size:13px; font-weight:600; color:#00873a; }
html:root body .iw-btn:is(:hover, :focus-visible, :active){ background:#00a63d; color:#fff; }
html:root body .iw-btn:is(:hover, :focus-visible, :active) small{ color:#fff; }
html:root body .iw-btn:focus-visible{ outline:2px solid #0d0d0b; outline-offset:3px; }
@media (max-width:640px){ html:root body .iw-btn{ flex:1 1 100%; max-width:none; padding:13px 16px; } }
/* Homepage How It Works sits right under "I Want To…" on the same background */
html:root body .iw + .mq-how{ background:transparent !important; border-top:none !important; padding-top:24px !important; }
/* How It Works: Post an Opportunity + Got More Questions? side by side */
html:root body .mq-lane .mq-lane-pills{ margin-top:auto; display:flex; flex-wrap:wrap; gap:10px; }
html:root body .mq-lane .mq-lane-pills .mq-lane-pill{ margin-top:0; }
html:root body .mq-how-faq{ display:flex; justify-content:center; margin:28px 0 8px; }
/* Post page cards (2026-09-30): instead of only the text turning green, the
   whole card fills green with white letters on its turn, then back to white. */
@property --cardbg{ syntax:'<color>'; inherits:true; initial-value:#ffffff; }
@property --cardtx{ syntax:'<color>'; inherits:true; initial-value:#0D0D0B; }
@keyframes cardFill{
  0%, 40%, 100% { --cardbg:#ffffff; --cardtx:#0D0D0B; }
  12%, 26%      { --cardbg:#00a63d; --cardtx:#ffffff; }
}
html:root body .glow-cycle .opt-card{
  --cardbg:#ffffff; --cardtx:#0D0D0B;
  background:var(--cardbg) !important; background-image:none !important;
  animation:glowVar 7.5s ease-in-out infinite, glowGrow 7.5s ease-in-out infinite, cardFill 7.5s ease-in-out infinite;
}
html:root body .glow-cycle .opt-card:nth-child(2){ animation-delay:2.5s, 2.5s, 2.5s; }
html:root body .glow-cycle .opt-card:nth-child(3){ animation-delay:5s, 5s, 5s; }
html:root body .glow-cycle .opt-card :is(.title, .desc){ color:var(--cardtx) !important; }
@media (prefers-reduced-motion: reduce){ html:root body .glow-cycle .opt-card{ animation:none !important; } }
/* Header "Post an Opportunity": solid green with white letters (2026-09-30) */
html:root body nav.site-header .nav-right a.btn-signin:not(#_){
  background:#00a63d !important; background-image:none !important; color:#fff !important; border-color:#00a63d !important;
}
html:root body nav.site-header .nav-right a.btn-signin:not(#_) svg{ stroke:#fff !important; }
html:root body nav.site-header .nav-right a.btn-signin:not(#_):is(:hover, :focus-visible, :active, .is-pressed){
  background:#00a63d !important; color:#fff !important; filter:brightness(.9);
}
/* Post page: limited-time free week banner */
html:root body .promo-week{
  display:inline-flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:4px 10px;
  margin:18px auto 0; padding:12px 20px; border:2px solid #00a63d; border-radius:999px; background:#fff;
  color:#0d0d0b; font-size:16px; line-height:1.35; max-width:92%;
}
html:root body .promo-week strong{ color:#00a63d; font-weight:800; }
html:root body .promo-week b{ font-weight:800; letter-spacing:.02em; }
@media (max-width:640px){ html:root body .promo-week{ border-radius:18px; font-size:15px; } }
/* Trademark marks (2026-09-30): small ™ on the header logo and the hero */
html:root body nav.site-header a.logo-img{ display:inline-flex; align-items:flex-start; }
html:root body nav.site-header a.logo-img .tm{ font-size:11px; font-weight:700; line-height:1; margin:1px 0 0 2px; color:#0d0d0b; vertical-align:top; }
html:root body .video-hero .vh-mark{ position:relative; }
html:root body .video-hero .vh-tm{ position:absolute; top:2%; right:0; font-size:clamp(12px, 1.8vw, 26px); font-weight:800; line-height:1; color:#0d0d0b; pointer-events:none; }
html:root body nav.site-header a.logo-img, html:root body nav.site-header a.logo-img .tm{ text-decoration:none !important; }
html:root body .video-hero .vh-tm{ z-index:3; top:0; }
html:root body .video-hero{ position:relative; }
html:root body .video-hero > .vh-tm{ position:absolute; top:10px; right:10px; z-index:3; }
html:root body a.promo-week{ text-decoration:none; }
html:root body .iw .promo-home{ margin-top:22px; }
html:root body a.promo-week:hover{ background:#f3fbf6; }
/* Free week banners: black box, green headline, white details (2026-09-30) */
html:root body .promo-week{ background:#0d0d0b !important; border-color:#0d0d0b !important; color:#fff !important; }
html:root body .promo-week strong{ color:#3ddc7a !important; }
html:root body .promo-week span, html:root body .promo-week b{ color:#fff !important; }
html:root body a.promo-week:hover{ background:#000 !important; }
/* Header logo ™: smaller and tucked up against the top-right of the "s" */
html:root body nav.site-header a.logo-img .tm{ font-size:9px !important; margin:0 0 0 -3px !important; position:relative; top:1px; }
html:root body nav.site-header a.logo-img .tm{ align-self:flex-start !important; top:3px !important; }
/* Homepage tagline above "I Want To…" (the page h1) */
html:root body .iw .iw-tag{ max-width:900px; margin:0 auto 30px; }
html:root body .iw .iw-tagline{
  margin:0 !important; font-size:clamp(26px, 3.4vw, 44px) !important; font-weight:700 !important; line-height:1.1 !important;
  letter-spacing:-0.035em !important; color:#0d0d0b !important; text-transform:none !important; text-wrap:balance;
}
html:root body .iw .iw-tagline span{ color:#00a63d !important; }
html:root body .iw .iw-tagsub{ margin:12px 0 0 !important; font-size:clamp(17px, 1.6vw, 20px) !important; font-weight:600 !important; color:#0d0d0b !important; }
html:root body .iw{ padding-top:34px; }
/* Job seeker profile: "Save Profile & Browse Jobs" solid green, white text */
html:root body #submitBtn.save-btn{ background:#00a63d !important; background-image:none !important; border-color:#00a63d !important; color:#fff !important; }
html:root body #submitBtn.save-btn svg{ stroke:#fff !important; }
html:root body #submitBtn.save-btn:is(:hover, :focus-visible, :active){ background:#00a63d !important; color:#fff !important; filter:brightness(.92); }
/* Dashboard > Settings > Delete My Account */
html:root body .delete-card .delete-explain{ font-size:15px; line-height:1.55; color:#0d0d0b; margin:0 0 16px; }
html:root body .delete-btn{
  display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 22px; cursor:pointer;
  border-radius:999px; border:2px solid #c94b4b; background:#fff; color:#b23a3a; font:700 15px/1 inherit;
}
html:root body .delete-btn:is(:hover, :focus-visible){ background:#c94b4b; color:#fff; }
html:root body .delete-btn:focus-visible{ outline:2px solid #0d0d0b; outline-offset:3px; }
html:root body .delete-btn:disabled{ opacity:.6; cursor:wait; }
html:root body .delete-done{ font-weight:700; color:#0d0d0b; }
/* FAQ answers with lists (posting rules, safety tips) */
html:root body .faq-a-inner .faq-list{ margin:8px 0 12px 1.2em; padding:0; }
html:root body .faq-a-inner .faq-list li{ margin:4px 0; line-height:1.5; }
html:root body .safety-tips-link{ display:inline-block; margin:8px 0 0; font-size:14px; font-weight:600; color:#1a56db; text-decoration:underline; }

/* ===== Accessibility (2026-09-30) =====================================
   Text on or in green must reach WCAG AA contrast (4.5:1). Our bright green
   #00a63d with white text is only 3.2:1, so wherever green carries small
   text it uses the deeper #00843a (4.8:1 on white, 4.6:1 on the page
   background). Bright green stays for borders, big headlines and accents. */
html:root{ --accent-dark:#00843a; }
html:root body :is(nav.site-header .nav-right a.btn-signin:not(#_), #howToggle, .hf-more-btn, #submitBtn.save-btn, .am-score, .interview, .us .sc-label){
  background:#00843a !important; background-image:none !important; border-color:#00843a !important; color:#fff !important;
}
html:root body :is(nav.site-header .nav-right a.btn-signin:not(#_), #howToggle, .hf-more-btn, #submitBtn.save-btn):is(:hover, :focus-visible, :active, .is-pressed){
  background:#00843a !important; filter:brightness(.9);
}
html:root body :is(.continue-btn, .iw-btn, .green-pill, .promo-week):is(:hover, :focus-visible, :active, .is-pressed){ background:#00843a !important; border-color:#00843a !important; color:#fff !important; }
html:root body .iw-btn:is(:hover, :focus-visible, :active) small{ color:#fff !important; }
html:root body :is(.doc-eyebrow, .interested, .terms-check a, .iw-btn small){ color:#00843a !important; }
html:root body #ourDetail{ color:#fff !important; }
html:root body :is(.us, #ourDetail){ background-color:#00843a !important; }
html:root body .special-label{ color:#006b2e !important; }
/* Posting cards fill with the deeper green while white text shows */
@keyframes cardFill{
  0%, 40%, 100% { --cardbg:#ffffff; --cardtx:#0D0D0B; }
  12%, 26%      { --cardbg:#00843a; --cardtx:#ffffff; }
}

/* Keyboard users always see where they are */
html:root body :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible{
  outline:3px solid #1a56db !important; outline-offset:2px !important;
}
/* "Skip to main content": hidden until a keyboard user presses Tab */
html:root body .skip-link{
  position:absolute; left:12px; top:-60px; z-index:10000; padding:10px 16px; border-radius:999px;
  background:#0d0d0b; color:#fff !important; font-weight:700; text-decoration:none;
}
html:root body .skip-link:focus{ top:12px; }
/* Hero video pause button */
html:root body .video-hero > .vh-pause{
  position:absolute; right:12px; bottom:10px; z-index:4; height:32px; padding:0 14px; border-radius:999px; cursor:pointer;
  border:1.5px solid #0d0d0b; background:rgba(255,255,255,.92); color:#0d0d0b; font:700 13px/1 inherit;
}
html:root body .video-hero > .vh-pause:hover{ background:#0d0d0b; color:#fff; }
/* Small green text (subtitles, notes) uses the deeper green so it reads at
   4.5:1; big headline words keep the bright green. */
html:root body :is(.hero-strip .sub, .hero-caption > p, .mq-sub, .mq-sub-green, .mq-secure, section.mq-pros .mq-sub, section.mq-pros .mq-request .mq-request-q, .section-block .section-title, .mq-sub.mq-sub-mixed span){ color:#00843a !important; }
html:root body.flow-post .hero-strip :is(.sub, p){ color:#00843a !important; }
html:root body .hero-strip .sub.sub-ink, html:root body .mq-sub .mq-sub-ink{ color:var(--b-ink) !important; }
html:root body .iw .iw-tagsub{ color:#0d0d0b !important; }
html:root body :is(.doc-eyebrow, .compare-eyebrow, .why-eyebrow, .mq-eyebrow, .hf-eyebrow, .sell-eyebrow, .hero-eyebrow, .hp-eyebrow){ opacity:1 !important; }
html:root{ --b-green-dark:#00843a; }
html:root body .glow-cycle .opt-card .desc{ opacity:1 !important; }

/* Friction fixes (2026-10-02): bigger tap areas on phones for small
   controls, without changing how they look. */
html:root body :is(.fg-header){ min-height:44px; }
html:root body .checkbox-row{ min-height:36px; display:flex; align-items:center; gap:10px; cursor:pointer; }
html:root body .checkbox-row input[type=checkbox]{ width:20px; height:20px; flex-shrink:0; }
html:root body #saveProgressBtn{ min-height:44px; padding:0 6px !important; }
html:root body :is(.forgot-link, .switch-link, .back-link, a.back, .safety-tips-link){ display:inline-flex; align-items:center; min-height:44px; }
html:root body #moreDetailsToggle{ min-height:44px; }
html:root body .terms-check input[type=checkbox], html:root body #agreeTerms{ width:20px !important; height:20px !important; }
html:root body #contactInfoCard :is(.biz-row a, .links-list a){ display:inline-flex; align-items:center; min-height:40px; }

/* Header logo: the gold-coin logo (Logo draft - cleaned), since 2026-10-03.
   It has a transparent background, so no blend mode is needed. */
html:root body nav.site-header .logo.logo-img img{ height:46px !important; width:auto !important; mix-blend-mode:normal !important; }
@media (max-width:860px){ html:root body nav.site-header .logo.logo-img img{ height:40px !important; } }
@media (max-width:420px){ html:root body nav.site-header .logo.logo-img img{ height:32px !important; } }
/* Smallest phones (360px and below): keep the logo and both header buttons on screen */
@media (max-width:360px){
  html:root body nav.site-header .logo.logo-img img{ height:28px !important; }
  html:root body nav.site-header .nav-right{ gap:5px !important; }
  html:root body nav.site-header .nav-right :is(#signinLink, #siteSignOutLink, .btn-signin, a.signin-link, a.btn-signin:not(#_)){ padding:0 9px !important; font-size:12px !important; }
}
/* Homepage hero: the logo image fills the width (replaced the photo letters 2026-10-03) */
html:root body .video-hero{ height:auto !important; min-height:0 !important; }
html:root body .video-hero .vh-logo{ width:100%; padding:0 1.5vw; box-sizing:border-box; display:flex; justify-content:center; }
html:root body .video-hero .vh-logo img{ display:block; width:100%; height:auto; max-width:100%; }
/* Homepage hero animation (option 3, 2026-10-03): the coin drops in spinning,
   bounces once and lands; then "CentGigs" slides in. Plays once per visit to
   the page. People with "reduce motion" turned on see the logo still. */
html:root body .video-hero{ overflow:hidden; }
html:root body .hero-stage{ position:relative; width:100%; aspect-ratio:2000/645; perspective:1600px; }
html:root body .hero-coin{ position:absolute; left:-0.2%; top:0; width:32.25%; aspect-ratio:1; z-index:1; transform-style:preserve-3d; }
html:root body .hero-coin-face{ position:absolute; inset:0; width:100%; height:100%; display:block; backface-visibility:hidden; -webkit-backface-visibility:hidden; }
html:root body .hero-coin-back{ transform:rotateY(180deg); }
html:root body .hero-text{ position:absolute; inset:0; width:100%; height:auto; display:block; z-index:2; }
@keyframes heroCoinDrop{
  0%  { transform:translateY(-55%) rotateY(0deg); opacity:0; }
  12% { opacity:1; }
  60% { transform:translateY(0) rotateY(900deg); }
  75% { transform:translateY(-6%) rotateY(1000deg); }
  100%{ transform:translateY(0) rotateY(1080deg); opacity:1; }
}
@keyframes heroTextIn{ from{ opacity:0; transform:translateX(6%); } to{ opacity:1; transform:none; } }
html:root body .hero-coin{ animation:heroCoinDrop 1.6s cubic-bezier(.3,.6,.3,1) .2s both; }
html:root body .hero-text{ animation:heroTextIn .8s 1.2s ease-out both; }
@media (prefers-reduced-motion: reduce){ html:root body :is(.hero-coin, .hero-text){ animation:none !important; } }
/* Homepage hero (2026-10-03, replaces the coin drop at the owner's request):
   the whole logo zooms in once, quickly. Still for reduced-motion users. */
@keyframes heroLogoZoom{ from{ transform:scale(.6); opacity:0; } to{ transform:scale(1); opacity:1; } }
html:root body .hero-logo-zoom{ transform-origin:50% 50%; }
@media (prefers-reduced-motion: reduce){ html:root body .hero-logo-zoom{ animation:none !important; } }

/* Hero zoom, take 2: starts small and visible, then clearly grows into place.
   Waits for the image to load (the .wait/.go classes are set by a tiny script). */
@keyframes heroLogoGrow{ 0%{ transform:scale(.2); opacity:0; } 12%{ opacity:1; } 100%{ transform:scale(1); opacity:1; } }
html:root body .hero-logo-zoom.wait{ opacity:0; }
html:root body .hero-logo-zoom.go{ animation:heroLogoGrow 1.2s cubic-bezier(.3,.1,.3,1) both; }
@media (prefers-reduced-motion: reduce){ html:root body .hero-logo-zoom.wait{ opacity:1; } html:root body .hero-logo-zoom.go{ animation:none !important; } }

/* "I Want To..." buttons: smaller boxes, less padding, same text size (2026-10-03) */
html:root body .iw-btn{ flex:0 1 auto !important; min-width:190px; max-width:none !important; padding:8px 18px !important; gap:2px !important; }
html:root body .iw-row{ gap:10px !important; }
@media (max-width:640px){ html:root body .iw-btn{ flex:0 0 auto !important; width:250px; min-width:0; padding:6px 14px !important; } html:root body .iw-row{ gap:8px !important; } }
/* Homepage "Real Pros. Real Work." (2026-10-03) */
html:root body .rp{ padding:44px 16px 8px; text-align:center; }
html:root body .rp .rp-title{ margin:0 0 6px !important; font-size:clamp(28px, 3.4vw, 44px) !important; font-weight:700 !important; letter-spacing:-0.035em; line-height:1.1 !important; color:#0d0d0b !important; text-transform:none !important; }
html:root body .rp .rp-title span{ color:#00a63d !important; }
html:root body .rp .rp-sub{ margin:0 auto 22px; max-width:620px; font-size:17px; font-weight:600; color:#0d0d0b; }
html:root body .rp-row{ display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:12px; max-width:1180px; margin:0 auto; }
html:root body .rp-card{ position:relative; display:block; aspect-ratio:9/16; border-radius:18px; overflow:hidden; background:#0d0d0b; text-decoration:none; box-shadow:0 14px 28px -16px rgba(0,0,0,.55); }
html:root body .rp-card video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
html:root body .rp-card .rp-info{ position:absolute; left:0; right:0; bottom:0; padding:30px 12px 12px; background:linear-gradient(180deg, transparent, rgba(0,0,0,.82)); color:#fff; text-align:left; }
html:root body .rp-card .rp-name{ font-weight:800; font-size:15px; line-height:1.2; color:#fff; }
html:root body .rp-card .rp-meta{ font-size:12.5px; font-weight:600; margin-top:3px; color:#fff; opacity:.9; }
html:root body .rp-card:focus-visible{ outline:3px solid #1a56db; outline-offset:3px; }
html:root body .rp-all{ display:inline-flex; align-items:center; min-height:44px; padding:0 22px; margin-top:20px; border-radius:999px; border:2px solid #00a63d; background:#fff; color:#0d0d0b; font-weight:700; text-decoration:none; }
html:root body .rp-all:is(:hover, :focus-visible){ background:#00843a; border-color:#00843a; color:#fff; }
@media (max-width:860px){ html:root body .rp-row{ grid-template-columns:repeat(2, minmax(0,1fr)); max-width:520px; } html:root body .rp-card:nth-child(n+5){ display:none; } }

/* Homepage "Advertise Your Business" line under the I Want To buttons (2026-10-03). */
html:root body .iw .iw-advertise{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;
  margin:14px auto 0;padding:0 12px;font-weight:700;font-size:18px;line-height:1.25;
  color:#00843a !important;text-decoration:none;text-align:center;
}
html:root body .iw .iw-advertise:hover{text-decoration:underline}
html:root body .iw .iw-advertise span{transition:transform .2s}
html:root body .iw .iw-advertise:hover span{transform:translateX(3px)}
@media (max-width:600px){html:root body .iw .iw-advertise{font-size:16px}}
/* HEADER (2026-10-04): the header 99CentGigs is set in Anton to match the
   homepage video hero, in solid black. The logo image stays
   in the HTML (its alt text and the link's aria-label still name the site);
   it is hidden and the word is drawn by ::before, so every page changes from
   this one stylesheet. */
@font-face{ font-family:'Anton'; font-style:normal; font-weight:400; font-display:swap; src:url('/fonts/anton-regular.woff2') format('woff2'); }
html:root body nav.site-header a.logo-img:not(#_) img{ display:none !important; }
html:root body nav.site-header a.logo-img:not(#_){ align-items:flex-start; line-height:1 !important; }
html:root body nav.site-header a.logo-img:not(#_)::before{
  content:"99CentGigs"; display:block; font-family:Arial,"Liberation Sans",Helvetica,sans-serif; font-weight:400; font-size:32px; line-height:1.12; letter-spacing:-0.081em;
  color:#0d0d0b;
}
@media (max-width:860px){ html:root body nav.site-header a.logo-img:not(#_)::before{ font-size:28px; } }
@media (max-width:420px){ html:root body nav.site-header a.logo-img:not(#_)::before{ font-size:24px; } }
html:root body nav.site-header a.logo-img:not(#_) .tm{ top:0 !important; margin-left:2px !important; }

/* Header "Post an Opportunity": solid black instead of green, on every page. */
html:root body nav.site-header .nav-right a.btn-signin:not(#_):not(#__){
  background:#0d0d0b !important; background-image:none !important;
  border:1px solid #000 !important; color:#fff !important;
  box-shadow:0 6px 14px -6px rgba(0,0,0,.55) !important;
  text-shadow:none !important; filter:none !important;
}
html:root body nav.site-header .nav-right a.btn-signin:not(#_):not(#__):is(:hover, :focus-visible, :active, .is-pressed){
  background:#2a2a27 !important; background-image:none !important;
  border-color:#000 !important; color:#fff !important; filter:none !important;
}
html:root body nav.site-header .nav-right a.btn-signin:not(#_):not(#__) svg{ stroke:#fff !important; }

/* 2026-10-04: homepage tagline set at magazine scale (about 3x the old size),
   tight leading; phones keep the longest word ("Volunteering") on screen. */
html:root body .iw .iw-tag{ max-width:1240px !important; }
html:root body .iw .iw-tagline{ font-size:clamp(46px, 10vw, 140px) !important; line-height:.94 !important; letter-spacing:-0.05em !important; font-weight:800 !important; }
html:root body .iw .iw-tagsub{ margin-top:18px !important; }
@media (max-width:420px){ html:root body .iw .iw-tagline{ font-size:clamp(40px, 12.4vw, 52px) !important; } }
/* Header ™ sits right against the Anton logo. */
html:root body nav.site-header a.logo-img:not(#_) .tm{ margin-left:-3px !important; }
/* VIDEO TITLE BANDS (2026-10-04, approved on the Post page): a video of people
   working fills the title area edge to edge, right under the header, and the
   page title sits on top in white Anton (green accent words). js/vband.js
   cycles the clips, keeps them playing and handles Pause. */
@font-face{ font-family:'Anton'; font-style:normal; font-weight:400; font-display:swap; src:url('/fonts/anton-regular.woff2') format('woff2'); }
html:root body .vband{ position:relative; overflow:hidden; width:100vw; max-width:none; box-sizing:border-box; margin:0 calc(50% - 50vw) 22px;
  padding:clamp(48px, 8vw, 112px) 16px clamp(44px, 7vw, 96px); background:#0d0d0b; text-align:center; }
html:root body .vband > video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
html:root body .vband::after{ content:""; position:absolute; inset:0; background:rgba(0,0,0,.34); pointer-events:none; }
html:root body .vband > :not(video):not(.vband-pause){ position:relative; z-index:1; }
html:root body .vband:not(#_) :is(.hero-strip, .hero-caption){ background:transparent !important; box-shadow:none !important; border:0 !important; margin:0 auto !important; padding:0 !important; max-width:1200px; }
html:root body .vband:not(#_) .doc-eyebrow{ color:#fff !important; text-shadow:0 1px 8px rgba(0,0,0,.5); }
html:root body .vband:not(#_) h1{ font-family:Anton, Impact, "Arial Narrow", sans-serif !important; font-weight:400 !important; font-size:clamp(46px, 8.6vw, 140px) !important;
  line-height:.98 !important; letter-spacing:.005em !important; text-transform:uppercase !important; color:#fff !important; -webkit-text-fill-color:#fff;
  margin:8px auto 0 !important; max-width:1200px; text-wrap:balance; text-shadow:0 2px 14px rgba(0,0,0,.45) !important; }
html:root body .vband:not(#_) h1 span{ color:#19c25a !important; -webkit-text-fill-color:#19c25a; text-shadow:0 2px 14px rgba(0,0,0,.45) !important; }
html:root body .vband:not(#_) h1 br.m-br{ display:none; }
html:root body .vband:not(#_) :is(.hero-strip, .hero-caption) p{ color:#fff !important; text-shadow:0 1px 10px rgba(0,0,0,.6); margin-top:16px !important; }
html:root body .vband:not(#_) :is(.hero-strip, .hero-caption) p a{ color:#fff !important; text-decoration:underline !important; }
html:root body .vband:not(#_) .cat-switch{ margin:0 auto 22px !important; }
html:root body .vband-pause{ position:absolute; z-index:2; right:10px; bottom:10px; width:32px; height:32px; border-radius:50%; border:1px solid rgba(255,255,255,.4); background:rgba(13,13,11,.55); color:#fff; font:700 11px/1 Geist,Arial,sans-serif; cursor:pointer; display:flex; align-items:center; justify-content:center; padding:0; }
html:root body .vband-pause:focus-visible{ outline:3px solid #1a56db; outline-offset:2px; }
@media (prefers-reduced-motion:reduce){ html:root body .vband:not(.vband-on) > video{ display:none; } html:root body .vband{ background:#0d0d0b var(--vband-poster) center/cover no-repeat; } }

/* Full-width bands use width:100vw, which is a scrollbar-width wider than the window on desktop browsers. Clip that sliver so no sideways scrollbar appears (2026-10-04). */
html:root, html:root body{ overflow-x:clip; }

/* Homepage tagline sizes (2026-10-05): "All in One Place." one step smaller; the Browse free line two steps bigger. */
html:root body .iw .iw-tagline span{ font-size:.8em !important; }
html:root body .iw .iw-tagsub{ font-size:clamp(24px,3.2vw,40px) !important; line-height:1.2 !important; font-weight:700 !important; }

/* Homepage intro slide (2026-10-05): full-width black slide image; the three buttons sit on its right side. */
html:root body .iw{ padding-top:0 !important; }
html:root body .iws{ position:relative; width:100vw; margin:0 calc(50% - 50vw) 26px; aspect-ratio:16 / 9; background:#191914; overflow:hidden; text-align:left; }
html:root body .iws-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
html:root body .iws-sr{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
html:root body .iws .iw-row{ position:absolute; left:55%; right:4%; top:8%; transform:none; width:auto; max-width:none; margin:0; display:flex; flex-direction:row; align-items:stretch; gap:clamp(8px,1.2vw,18px); }
html:root body .iws .iw-btn{ flex:1 1 0 !important; width:auto !important; min-width:0 !important; box-sizing:border-box; padding:clamp(5px,.7vw,11px) clamp(6px,.8vw,12px) !important; font-size:clamp(11px,1.15vw,18px) !important; line-height:1.15 !important; }
html:root body .iws .iw-btn small{ font-size:.55em !important; }
@media (max-width:700px){
  html:root body .iws{ aspect-ratio:auto; padding-bottom:22px; }
  html:root body .iws-img{ position:static; height:auto; }
  html:root body .iws .iw-row{ position:static; transform:none; width:auto; padding:14px 16px 0; align-items:center; flex-direction:column; }
  html:root body .iws .iw-btn{ width:100% !important; max-width:340px; font-size:18px !important; }
}
/* Intro slide buttons v2 (2026-10-05): a horizontal row right under "I Want To...", clear fill, white border and text. */
@media (min-width:701px){
  html:root body .iws .iw-row{ left:6.9%; right:auto; top:25.5%; width:58%; flex-direction:row; gap:clamp(8px,1.1vw,16px); }
}
html:root body .iws .iw-btn:not(#_){ background:transparent !important; background-image:none !important; border:2px solid #fff !important; color:#fff !important; box-shadow:none !important; text-shadow:none !important; border-radius:999px !important; filter:none !important; }
html:root body .iws .iw-btn:not(#_) small{ color:#fff !important; opacity:.85; }
html:root body .iws .iw-btn:not(#_):is(:hover, :focus-visible, :active){ background:#fff !important; color:#0d0d0b !important; }
html:root body .iws .iw-btn:not(#_):is(:hover, :focus-visible, :active) small{ color:#0d0d0b !important; }
html:root body .iws .iw-btn:focus-visible{ outline:3px solid #1a56db; outline-offset:3px; }
/* Intro slide buttons v3: larger and easier to see. */
@media (min-width:701px){
  html:root body .iws .iw-row{ width:74%; top:24.5%; gap:clamp(10px,1.4vw,22px); }
  html:root body .iws .iw-btn:not(#_){ padding:clamp(9px,1.3vw,20px) clamp(10px,1.4vw,22px) !important; font-size:clamp(15px,2vw,32px) !important; font-weight:800 !important; border-width:3px !important; }
  html:root body .iws .iw-btn:not(#_) small{ font-size:.5em !important; opacity:1; }
}
/* Intro slide v2 (2026-10-05): the small lines are 2x larger; the buttons (2x larger) sit between them and the headline. */
html:root body .iws2{ width:100vw; margin:0 calc(50% - 50vw) 26px; background:#191914; text-align:left; overflow:hidden; padding-bottom:clamp(8px,1.5vw,24px); }
html:root body .iws2-img{ display:block; width:100%; height:auto; }
html:root body .iws2 .iw-row{ display:flex; flex-direction:row; flex-wrap:nowrap; align-items:stretch; gap:clamp(10px,1.6vw,26px); padding:clamp(14px,2vw,30px) 2.43% clamp(18px,2.6vw,40px); margin:0; max-width:none; }
html:root body .iws2 .iw-btn:not(#_){ flex:1 1 0 !important; width:auto !important; min-width:0 !important; box-sizing:border-box; display:flex !important; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:clamp(14px,2vw,32px) clamp(10px,1.6vw,26px) !important; font-size:clamp(20px,3.6vw,56px) !important; line-height:1.1 !important; font-weight:800 !important;
  background:transparent !important; background-image:none !important; border:4px solid #fff !important; color:#fff !important; box-shadow:none !important; text-shadow:none !important; border-radius:999px !important; filter:none !important; }
html:root body .iws2 .iw-btn:not(#_) small{ font-size:.42em !important; color:#fff !important; opacity:1; margin-top:.35em; font-weight:600; }
html:root body .iws2 .iw-btn:not(#_):is(:hover, :focus-visible, :active){ background:#fff !important; color:#0d0d0b !important; }
html:root body .iws2 .iw-btn:not(#_):is(:hover, :focus-visible, :active) small{ color:#0d0d0b !important; }
html:root body .iws2 .iw-btn:focus-visible{ outline:3px solid #1a56db; outline-offset:3px; }
@media (max-width:700px){
  html:root body .iws2 .iw-row{ flex-direction:column; align-items:center; padding:14px 16px 18px; }
  html:root body .iws2 .iw-btn:not(#_){ width:100% !important; max-width:340px; font-size:22px !important; padding:14px 20px !important; }
}
/* Button sub-lines: large enough to read. */
html:root body .iws2 .iw-btn:not(#_) small{ font-size:max(14px,.55em) !important; font-weight:700 !important; line-height:1.2; margin-top:.3em; }

/* Free-week sentences sit as plain text under "All in One Place." on the black slide (no box). */
html:root body .iws2 .iws2-promo:not(#_){ display:block; padding:0 2.43% clamp(6px,1vw,16px); background:none !important; border:0 !important; border-radius:0 !important; box-shadow:none !important; text-decoration:none !important; text-align:left; }
html:root body .iws2 .iws2-promo strong{ display:block; color:#19c25a !important; font-size:clamp(18px,2.7vw,42px); font-weight:800; line-height:1.15; }
html:root body .iws2 .iws2-promo span{ display:block; margin-top:.4em; color:#fff !important; font-size:clamp(15px,1.9vw,30px); font-weight:600; line-height:1.3; }
html:root body .iws2 .iws2-promo b{ color:#fff; font-weight:900; }
html:root body .iws2 .iws2-promo:hover strong{ text-decoration:underline; }
html:root body .iws2 .iws2-promo:focus-visible{ outline:3px solid #1a56db; outline-offset:4px; }
/* Slide buttons match the header pills exactly: 38px tall, 14.5px bold text, same padding. */
html:root body .iws2 .iw-row{ flex-wrap:wrap; justify-content:flex-start; gap:10px; padding-top:clamp(10px,1.4vw,20px); padding-bottom:clamp(14px,2vw,28px); }
html:root body .iws2 .iw-btn:not(#_){ flex:0 0 auto !important; display:inline-flex !important; flex-direction:row; align-items:center; justify-content:center; height:38px !important; width:auto !important; min-width:0 !important; max-width:none !important; padding:0 18px !important; font-size:14.5px !important; font-weight:700 !important; line-height:1 !important; border:1.5px solid #fff !important; white-space:nowrap; }
html:root body .iws2 .iw-btn:not(#_) small{ display:none !important; }
@media (max-width:700px){ html:root body .iws2 .iw-row{ flex-direction:row; justify-content:flex-start; align-items:center; padding:12px 16px 16px; } html:root body .iws2 .iw-btn:not(#_){ width:auto !important; max-width:none; font-size:14.5px !important; padding:0 14px !important; } }
html:root body .iws2 .iw-btn:not(#_){ font-size:14px !important; font-weight:600 !important; }
@media (max-width:700px){ html:root body .iws2 .iw-btn:not(#_){ font-size:14px !important; } }

/* How It Works: the user's halftone dot pattern sits behind the section; the button stays in front. */
html:root body #how.mq-how:not(#_){ position:relative; background:#fff url('/images/halftone-tile.webp') center top / 640px 640px repeat !important; padding-top:clamp(36px,5vw,64px); padding-bottom:clamp(36px,5vw,64px); }
html:root body #how .mq-how-toggle{ position:relative; z-index:2; }
html:root body #howBody:not([hidden]){ position:relative; z-index:2; background:rgba(255,255,255,.94); border-radius:20px; padding:clamp(16px,3vw,36px); margin-top:22px; }
/* Intro slide spacing: text sits at the very top, more room above the buttons, and no white gaps between the hero, slide and How It Works. */
html:root body .iw:not(#_){ padding-top:0 !important; padding-bottom:0 !important; }
html:root body .iws2:not(#_){ margin-bottom:0 !important; padding-top:0; }
html:root body .iws2 .iw-row{ padding-top:clamp(20px,3.2vw,48px) !important; }
html:root body .iw + .mq-how, html:root body #how.mq-how:not(#_){ margin-top:0 !important; }
/* More room between the buttons and the headline. */
html:root body .iws2 .iw-row:not(#_){ padding-bottom:clamp(36px,6vw,90px) !important; }

/* All page titles use the hero's font: Arial, regular weight, tight spacing (2026-10-05). Image titles are unchanged. */
html:root body :is(h1, .mq-title, .how-title):not(#_):not(#__):not(.pp-title):not(.a11y-title):not(.faq-title):not(.iws-sr){
  font-family:Arial,"Liberation Sans",Helvetica,sans-serif !important; font-weight:400 !important; letter-spacing:-0.045em !important; text-transform:none !important; }
html:root body :is(h1, .mq-title, .how-title) :is(span, em):not(#_):not(#__):not(.ch):not(.cm){ font-family:inherit !important; font-weight:inherit !important; text-transform:none !important; }
/* Offer line: "New Here?" in the slide's green, the rest in a light green, on one line. */
html:root body .iws2 .iws2-promo strong:not(#_){ display:inline; color:#00be63 !important; font-size:clamp(18px,2.7vw,42px); font-weight:800; }
html:root body .iws2 .iws2-promo .iws2-free{ display:inline; font-style:normal; font-weight:700; color:#9be9bd !important; font-size:clamp(18px,2.7vw,42px); line-height:1.15; }
/* DEPTH SYSTEM (2026-10-05): every page except the homepage hero is built in layers.
   1 background (patterns stay put while the page moves over them), 2 foreground content, 3 raised images,
   4 cards and buttons on top with their own shadows. */
html:root body :is(.card:not(.reason .card), .opt-card, .faq-card, .settings-card, .profile-card, .search-card, .sc-card, .contact-card, .signup-card, .service-card, .price-card, .listing-card, .lead-card, .confirm-card, .applicant-card, .delete-card, .compare-wrap, .form-wrap, .bundle-toggle, .filters, .special-box, .promo-inner, .highlight-tile, .comp-table, .applicant-mock, .leads-preview, .search-fields):not(#_):not(#__){
  z-index:3; box-shadow:0 1px 0 rgba(0,0,0,.08), 0 18px 30px -14px rgba(0,0,0,.45); }
html:root body :is(.btn-signin, .continue-btn, .btn, .save-btn, .submit-btn, .nf-btn, .contact-btn, .search-btn, .load-more-btn, .cta-btn, .compare-btn, .pay-btn, .checkout-btn, .signup-btn, .google-btn, .am-btn, .lb-btn, button[type="submit"]):not(#_):not(#__){
  position:relative; z-index:4; box-shadow:0 2px 0 rgba(0,0,0,.2), 0 10px 18px -8px rgba(0,0,0,.5); }
html:root body :is(.btn-signin, .continue-btn, .btn, .save-btn, .submit-btn, .contact-btn, .search-btn, .cta-btn, .pay-btn, .checkout-btn, .signup-btn):not(#_):not(#__):active{ transform:translateY(1px); box-shadow:0 1px 0 rgba(0,0,0,.2), 0 4px 8px -4px rgba(0,0,0,.5); }
/* raised images */
html:root body img:is([src*="faq-title"], [src*="terms-title"], .nbk-img):not(#_):not(#__){ filter:drop-shadow(0 3px 0 rgba(0,0,0,.18)) drop-shadow(0 16px 16px rgba(0,0,0,.35)); }
html:root body h1.a11y-title img:not(#_):not(#__){ filter:drop-shadow(0 0 5px rgba(250,250,247,.95)) drop-shadow(0 3px 0 rgba(0,0,0,.18)) drop-shadow(0 16px 16px rgba(0,0,0,.35)); }
html:root body img:is([src*="services-leads-preview"], [src*="applicant-cindy"]):not(#_):not(#__){ border-radius:14px; box-shadow:0 2px 0 rgba(0,0,0,.14), 0 24px 36px -16px rgba(0,0,0,.55); }
/* patterned backgrounds stay still while the content slides over them */
html:root body :is(.doc, #how.mq-how):not(#_):not(#__){ background-attachment:fixed !important; }
@media (prefers-reduced-motion:reduce), (hover:none){ html:root body :is(.doc, #how.mq-how):not(#_):not(#__){ background-attachment:scroll !important; } }
/* depth on the homepage slide and How It Works: buttons sit on top (on black the lift is a light edge) */
html:root body .iws2 .iw-btn:not(#_):not(#__){ position:relative; z-index:4; box-shadow:0 3px 0 rgba(255,255,255,.3), 0 14px 22px -10px rgba(255,255,255,.28); }
html:root body .iws2 .iw-btn:not(#_):not(#__):active{ transform:translateY(2px); box-shadow:0 1px 0 rgba(255,255,255,.3); }
html:root body #howToggle:not(#_):not(#__){ position:relative; z-index:4; box-shadow:0 2px 0 rgba(0,0,0,.2), 0 12px 20px -8px rgba(0,0,0,.55); }

/* Step meters (1-5): blue instead of green */
html:root body .progress-wrap .step.active .num:not(#_):not(#__), html:root body .progress-wrap .step.done .num:not(#_):not(#__){ background:#1a56db !important; border-color:#1a56db !important; color:#fff !important; }
html:root body .progress-wrap .step.active:not(#_){ color:#000 !important; }
/* Large desktop screens: keep the homepage at a comfortable scale instead of growing with the window */
@media (min-width:1500px){
  html:root body .vg-vids{ height:clamp(420px,70svh,600px) !important; }
  html:root body .vg-title{ font-size:min(21vw,300px) !important; }
  
  html:root body .iws2 > *{ max-width:1400px; margin-left:auto !important; margin-right:auto !important; }
}
@media (min-width:2200px){
  html:root body .vg-title{ font-size:min(21vw,340px) !important; }
}
@media (min-width:1500px){
  html:root body .vband:not(#_){ padding:clamp(48px,6vw,84px) 16px clamp(44px,5vw,70px); }
  html:root body .vband:not(#_) h1{ font-size:min(8.6vw,96px) !important; }
  html:root body .iw .iw-tagline{ font-size:112px !important; }
  html:root body .how-title{ font-size:4.6rem !important; }
  html:root body .compare-eyebrow{ font-size:4.6rem !important; }
  html:root body .pz:not(#_){ width:min(100vw,1400px) !important; margin:0 auto !important; }
  html:root body .pz-text h1{ font-size:157px !important; }
  html:root body .pz + .form-wrap:not(#_){ margin-top:-238px !important; }
}

/* Desktop type ceiling: no headline or display text is larger than the "Choose the Option That Matches What You Need" size (40px). */
@media (min-width:1025px){
  html:root body :is(.vband h1, .vband h1 span, .compare-title, .compare-eyebrow, .how-title, .iw-tagline, .iw-tagline span, .hero-strip h1, .iws2-promo strong, .iws2-promo .iws2-free, .doc-title, .hf-title, .hp-title, .pitch-title):not(#_):not(#__):not(#___){ font-size:40px !important; line-height:1.1 !important; }
  html:root body .hero-strip h1.job-title-img, html:root body .hero-strip h1.vol-title, html:root body .hero-strip h1.svc-title, html:root body .hero-strip h1.ad-title{ font-size:inherit !important; }
}
/* Homepage slide: headline images stay at a comfortable reading size on big screens */
@media (min-width:1100px){
  html:root body .iws2 > *{ max-width:1100px !important; margin-left:auto !important; margin-right:auto !important; }
}
/* ===== Desktop tuning (1025px and wider) ===== */
@media (min-width:1025px){
  /* Homepage: calmer scale under the hero */
  html:root body .iws2 > *{ max-width:940px !important; }
  html:root body .iws2-promo strong:not(#_):not(#__):not(#___), html:root body .iws2-promo .iws2-free:not(#_):not(#__):not(#___){ font-size:28px !important; }
  html:root body .iws2-promo span:not(#_){ font-size:17px !important; }
  html:root body .mq-title:not(#_):not(#__), html:root body .mq-title span:not(#_):not(#__){ font-size:48px !important; line-height:1.05 !important; }
  /* One button scale across the site */
  html:root body :is(.btn-signin, .signin-link, .continue-btn, .submit-btn, .save-btn, .cta-btn, .compare-btn, .load-more-btn, .nf-btn, .contact-btn, .pay-btn, .search-btn):not(#_):not(#__){ min-height:40px; font-size:14.5px !important; }
  html:root body :is(.continue-btn, .submit-btn, .save-btn, .cta-btn, .pay-btn):not(#_):not(#__){ padding-left:24px !important; padding-right:24px !important; }
  /* Jobs & Gigs / Services switch: oblong, not round */
  html:root body .cat-switch.seg-track:not(#_):not(#__){ border-radius:12px !important; }
  html:root body .cat-switch.seg-track .seg-item:not(#_):not(#__){ border-radius:9px !important; }
  html:root body .cat-switch.seg-track .seg-lens:not(#_):not(#__){ border-radius:10px !important; }
  /* Search tabs and bar */
  html:root body .search-card .tabs.seg-track:not(#_):not(#__){ border-radius:12px !important; }
  html:root body .search-card .tabs .tab:not(#_):not(#__){ border-radius:9px !important; height:34px !important; font-size:14px !important; }
}
/* Touch devices: scrolling stops at the footer, no bounce showing the background past it */
html, body{ overscroll-behavior-y:none; }
html:root body footer.site-footer{ position:relative; }

/* Text boxes, drop-downs and text areas: one focus ring only (their own green border/ring), no extra blue outline around it. */
html:root body :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]), select, textarea):focus-visible{ outline:none !important; border-color:#00843a !important; }
/* ===== Desktop fill (2026-10-07): on computer screens the page content grows in proportion, so it fills
   the screen instead of floating as a small column in a big empty room. Phones and tablets are unchanged.
   The header and footer keep their size; only the content between them scales. ===== */
@media (min-width:1025px){ :root{ --dz:1.1; } }
@media (min-width:1280px){ :root{ --dz:1.2; } }
@media (min-width:1440px){ :root{ --dz:1.3; } }
@media (min-width:1680px){ :root{ --dz:1.42; } }
@media (min-width:1920px){ :root{ --dz:1.55; } }
@media (min-width:2400px){ :root{ --dz:1.8; } }
@media (min-width:1025px){
  html:root body > :is(main, .page, section, div, p):not(.site-footer):not(.vg-hero):not(.skip-link):not([class*=ccg]):not([id*=ccg]):not(.compare-bar):not([class*=overlay]):not([class*=modal]):not([class*=lightbox]){ zoom:var(--dz); }
  /* Full-width picture banners already fill the screen edge to edge: they stay as they are. */
  html:root body :is(.nbk, .pz){ zoom:calc(1 / var(--dz)); }
  /* Edge-to-edge dark band on the homepage: still edge to edge, with its content scaled up. */
  html:root body .iws2:not(#_){ width:calc(100vw / var(--dz)); margin-left:calc(50% - 50vw / var(--dz)); margin-right:calc(50% - 50vw / var(--dz)); }
}
/* ===== One header on every page (2026-10-07): a white bar running edge to edge, same height, same spacing,
   same shadow as the homepage. Only the bar's background changes; the logo and buttons stay where they were. ===== */
html:root body nav.site-header:not(#_):not(#__){ position:relative !important; z-index:60 !important; background:transparent !important; box-shadow:none !important; border-radius:0 !important; }
html:root body nav.site-header:not(#_):not(#__)::before{ content:""; position:absolute; top:0; bottom:0; left:50%; width:100vw; transform:translateX(-50%); background:#fff; box-shadow:0 2px 0 rgba(0,0,0,.08), 0 12px 20px -12px rgba(0,0,0,.35); z-index:-1; pointer-events:none; }
html:root{ overflow-x:clip; }