/* Ported from the Anders Group design repo: css/components.css
   Scoped to .anders-design and re-indented on the way in; the rules
   themselves are verbatim. Do not hand-edit — a re-port overwrites this
   file. Change the design repo and re-run:
     node tools/port-design.js
   See JOB-TEMPLATES-PLAN.md. */

/* =========================================================================
   ANDERS GROUP — UI COMPONENTS
   Reusable component classes. Requires tokens.css (link it first).

   Hierarchy comes from size and weight, never a second family or heavier cut:
   system-ui only, 700 is the maximum weight. Every color references a token —
   no hardcoded hex. Each interactive element has a visible focus ring and a
   44px touch target. All motion is gated behind prefers-reduced-motion.

   Distilled from the Anders Group design explorations (job page, job search,
   quick-apply, editorial). Colorways: navy is the brand/wayfinding voice,
   lime is the single high-intent action, emerald/amber/coral are status only.
   ========================================================================= */

/* ===== Base ===== */
.anders-design * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html:has(.anders-design) {
  scroll-behavior: smooth;
}

body.anders-design {
  font-family: var(--sans);
  background: var(--bg);
  color: var(--ink);
  font-size: 15.5px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.anders-design b,
.anders-design strong {
  font-weight: 700;
}

/* cap "bolder" — 700 is the system max */
.anders-design a {
  color: var(--accent);
  text-decoration: none;
}

.anders-design a:hover {
  text-decoration: underline;
}

.anders-design button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
}

.anders-design input,
.anders-design select,
.anders-design textarea {
  font-family: inherit;
}

.anders-design img,
.anders-design svg {
  max-width: 100%;
}

.anders-design :focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: 5px;
}

/* Visually hidden but screen-reader-accessible (distinct from .logo .sr-only,
   which is scoped to that one component only). Use for a real <label> whose
   text is redundant on-screen (a placeholder or heading already says it) but
   still required for accessible name/labeling. */
.anders-design .visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ===== Typography roles (one family; scale + weight do the work) ===== */
.anders-design .disp {
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.08;
}

.anders-design h1,
.anders-design h2,
.anders-design h3 {
  color: var(--ink);
  letter-spacing: -.01em;
  line-height: 1.18;
  font-weight: 700;
}

.anders-design .tnum {
  font-feature-settings: var(--tnum);
}

/* tabular figures — stats & money */
.anders-design .kicker {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
}

.anders-design .lede {
  font-size: 17px;
  line-height: 1.65;
  color: var(--slate);
}

/* ===== Layout helpers ===== */
.anders-design .container {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 var(--s-4);
}

@media(min-width:768px) {
  .anders-design .container {
    padding: 0 var(--s-6);
  }
}

/* ===== Buttons ===== */
.anders-design .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 11px 22px;
  font-weight: 700;
  font-size: 15px;
  line-height: 1;
  border-radius: var(--r-pill);
  white-space: nowrap;
  transition: background .18s ease,color .18s ease,transform .12s ease,box-shadow .18s ease,filter .18s ease;
}

.anders-design .btn:hover {
  text-decoration: none;
}

.anders-design .btn:active {
  transform: translateY(1px);
}

.anders-design .btn:disabled,
.anders-design .btn[aria-disabled="true"] {
  opacity: .45;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
  filter: none;
}

.anders-design .btn:disabled:hover {
  transform: none;
}

.anders-design .btn-sm {
  min-height: 44px;
  font-size: 13px;
  padding: 8px 16px;
  gap: 6px;
}

/* compact type, full 44px tap target */
.anders-design .btn-lg {
  font-size: 18px;
}

.anders-design .btn-block {
  display: flex;
  width: 100%;
  border-radius: var(--r-btn);
  min-height: 52px;
  padding: 15px;
  font-size: 16px;
}

/* Primary — the single high-intent action. Lime fill, navy ink. */
.anders-design .btn-primary {
  background: var(--action-cta);
  color: var(--action-ink);
  box-shadow: var(--action-shadow);
}

.anders-design .btn-primary:hover {
  background: var(--action-d);
  transform: translateY(-1px);
}

.anders-design .btn-primary:active {
  transform: translateY(0);
}

/* Navy — the action on all-white / headerless surfaces where lime would not
   be the most isolated element. Navy fill, lime text (max contrast). */
.anders-design .btn-navy {
  background: var(--navy);
  color: var(--action);
  box-shadow: 0 6px 20px rgba(11,34,57,.24);
}

.anders-design .btn-navy:hover {
  background: var(--accent-d);
  transform: translateY(-1px);
}

/* Ghost / outline — quiet secondary ("Ask a recruiter", "View search"). */
.anders-design .btn-ghost,
.anders-design .btn-out {
  background: var(--card);
  color: var(--accent);
  border: 1.6px solid var(--accent-line);
  font-weight: 600;
}

.anders-design .btn-ghost:hover,
.anders-design .btn-out:hover {
  border-color: var(--accent);
  background: var(--canvas);
}

/* Soft — lowest-emphasis tinted action. */
.anders-design .btn-soft {
  background: var(--accent-soft);
  color: var(--accent);
  border-radius: 10px;
  font-weight: 600;
}

.anders-design .btn-soft:hover {
  background: var(--accent-line);
}

/* ===== Pills, chips, status ===== */
.anders-design .pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  font-size: 12px;
  line-height: 1;
  padding: 6px 12px;
  border-radius: var(--r-pill);
}

.anders-design .pill .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}

/* Neon chip — urgency/promise badge on dark headers ("60 SECONDS"). */
.anders-design .pill-action {
  background: var(--action);
  color: var(--action-ink);
  font-size: 11px;
  letter-spacing: .1em;
  padding: 4px 11px;
  white-space: nowrap;
}

.anders-design .pill-open {
  background: var(--green-soft);
  color: var(--green);
}

.anders-design .pill-open .dot {
  box-shadow: 0 0 0 3px var(--green-soft);
}

.anders-design .pill-up {
  background: var(--green-soft);
  color: var(--green);
}

/* above-market pay */
.anders-design .pill-fast {
  background: var(--amber-soft);
  color: var(--amber);
}

/* fills fast / nudge */
.anders-design .pill-saved {
  background: var(--coral-soft);
  color: var(--coral);
}

/* saved / favorites */

/* Category chip — navy wayfinding tint. */
.anders-design .chip {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  color: var(--accent);
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  padding: 5px 11px;
  border-radius: var(--r-pill);
}

/* ===== Cards ===== */
.anders-design .card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow);
}

.anders-design .card-pad {
  padding: var(--s-6);
}

.anders-design .card-flat {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r);
}

/* ===== Page container =====
   The one content width for the whole site. The header and footer inners use it
   too, so chrome lines up with page content instead of floating free of it. */
.anders-design .shell {
  max-width: 1240px;
  margin: 0 auto;
  padding-left: var(--s-4);
  padding-right: var(--s-4);
}

/* ===== Site header — one component, every page =====
   Sticky: the job pages anchor their jump-nav scroll offsets to it, and on a
   phone it keeps the phone number and job search one tap away mid-scroll. */
.anders-design .nav {
  position: sticky;
  top: 0;
  z-index: 40;
  border-bottom: 1px solid var(--line);
  background: var(--card);
}

/* Height comes off --h-header (minus this element's 1px bottom border) so the
   header and everything that sticks under it share one number. */
.anders-design .nav-in {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-height: calc(var(--h-header) - 1px);
}

/* Stretch the link to the bar's full height: the wordmark is shorter than the
   header, so without this the tap target is only as tall as the image. */
.anders-design .nav .logo {
  align-self: stretch;
}

/* Tap-to-call is the highest-intent action in the header on a phone, so it
   stays visible at every width; the label collapses to the icon under 640px. */
.anders-design .nav-phone {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 44px;
  color: var(--accent);
  font-weight: 700;
  font-size: 15px;
  white-space: nowrap;
}

.anders-design .nav-phone:hover {
  color: var(--accent-d);
  text-decoration: none;
}

.anders-design .nav-phone .num {
  display: none;
}

@media(min-width:640px) {
  .anders-design .nav-phone .num {
    display: inline;
  }
}

.anders-design .logo {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  width: 86px;
  flex: none;
  background-image: url("../images/design/brand-1.png");
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 86px 32px;
}

.anders-design .logo .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

.anders-design .nav-links {
  display: none;
  gap: 22px;
  font-weight: 600;
  font-size: 14.5px;
}

.anders-design .nav-links a {
  color: var(--slate);
}

.anders-design .nav-links a:hover {
  color: var(--accent);
  text-decoration: none;
}

.anders-design .nav-links a[aria-current="page"] {
  color: var(--accent);
}

.anders-design .nav-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--s-3);
}

/* The search button is redundant on a phone (the nav collapses to logo + call)
   and earns its place once there is room for it beside the links. */
.anders-design .nav-right .btn {
  display: none;
}

@media(min-width:768px) {
  .anders-design .nav-links {
    display: flex;
  }

  .anders-design .nav-right .btn {
    display: inline-flex;
  }
}

/* ===== Footer ===== */
.anders-design .foot {
  background: var(--navy);
  color: var(--on-navy-dim);
}

.anders-design .foot a {
  color: var(--on-navy);
}

.anders-design .foot a:hover {
  color: var(--on-navy-hi);
}

/* On dark surfaces (footer, navy crowns) the guide's own reversed-white lockup is
   the correct treatment, not the green pill — swap the background-image only. */
.anders-design .foot .logo,
.anders-design .site-footer .logo,
.anders-design .logo-rev {
  background-image: url("../images/design/brand-2.png");
  width: 101px;
  background-size: 101px 24px;
}

/* Pairs with .shell for its width and side padding, so the footer columns
   line up with the page content above them. */
.anders-design .foot-in {
  padding-top: 40px;
  padding-bottom: 28px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
}

.anders-design .foot h3,
.anders-design .foot h4 {
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--on-navy-dim);
  margin-bottom: 12px;
  font-weight: 700;
}

.anders-design .foot ul {
  list-style: none;
}

.anders-design .foot li {
  margin-bottom: 9px;
}

.anders-design .foot-tag {
  font-size: 14px;
  color: var(--on-navy-dim);
  margin-top: 10px;
  max-width: 260px;
  line-height: 1.6;
}

.anders-design .foot-bottom {
  border-top: 1px solid rgba(255,255,255,.10);
  text-align: center;
  padding: 16px;
  font-size: 12.5px;
  color: var(--on-navy-dim);
}

@media(min-width:640px) {
  .anders-design .foot-in {
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
  }
}

/* ===== Breadcrumbs ===== */
.anders-design .crumbs {
  font-size: 13px;
  color: var(--muted);
}

.anders-design .crumbs a {
  color: var(--slate);
  font-weight: 600;
}

.anders-design .crumbs a:hover {
  color: var(--accent);
}

.anders-design .crumbs .sep {
  color: var(--accent-line);
  margin: 0 2px;
}

/* ===== Section heading ===== */
.anders-design .section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: var(--s-3);
}

.anders-design .section-head h2 {
  font-size: 19px;
}

.anders-design .section-head a {
  font-size: 14px;
  font-weight: 600;
}

/* ===== Form fields — floating label ===== */
.anders-design .field {
  position: relative;
  margin-bottom: 11px;
}

.anders-design .field input,
.anders-design .field select,
.anders-design .field textarea {
  width: 100%;
  min-height: 52px;
  border: 1.5px solid var(--line);
  border-radius: var(--r-field);
  padding: 20px 13px 7px;
  font-size: 15px;
  color: var(--ink);
  background: var(--card);
  outline: none;
  transition: border-color .15s ease,box-shadow .15s ease;
}

.anders-design .field textarea {
  min-height: 96px;
  padding-top: 26px;
  resize: vertical;
}

/* clears the floated label */
.anders-design .field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23526374' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
}

.anders-design .field input:focus,
.anders-design .field select:focus,
.anders-design .field textarea:focus,
.anders-design .field .advs-trigger:focus,
.anders-design .field .advs-trigger.is-open {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

/* adv-select enhancement of a .field select — same box, same chevron */
.anders-design .field .advs-trigger {
  width: 100%;
  min-height: 52px;
  border: 1.5px solid var(--line);
  border-radius: var(--r-field);
  padding: 20px 32px 7px 13px;
  font-size: 15px;
  color: var(--ink);
  background-color: var(--card);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23526374' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
  transition: border-color .15s ease,box-shadow .15s ease;
}

.anders-design .field .advs-trigger.is-placeholder .advs-value {
  color: var(--muted);
}

/* top is (52 - 24) / 2: the field's height less the label's line box, which is
   15px text at the inherited 1.6. Centring the line box lands the ink 20px
   from either edge; the 15px this used to carry sat it a pixel low, which
   reads as the label drifting under the centre once the field is empty. Retune
   it if the field height or the body leading moves. */
.anders-design .field label {
  position: absolute;
  left: 13px;
  top: 14px;
  font-size: 15px;
  color: var(--muted);
  pointer-events: none;
  transition: .15s ease;
}

.anders-design .field input:focus + label,
.anders-design .field textarea:focus + label,
.anders-design .field input:not(:placeholder-shown) + label,
.anders-design .field textarea:not(:placeholder-shown) + label,
.anders-design .field.filled label {
  top: 7px;
  font-size: 10.5px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
}

.anders-design .field .opt {
  font-size: 10.5px;
  color: var(--muted);
  font-weight: 500;
}

/* Helper text under a field. The floating label needs placeholder=" ", so any
   real guidance that would have lived in the placeholder belongs here — where
   it stays readable once the field has content. */
.anders-design .field-hint {
  margin: -5px 0 11px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--muted);
}

.anders-design .row2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

@media(max-width:479px) {
  .anders-design .row2 {
    grid-template-columns: 1fr;
    gap: 0;
  }
}

/* Search bar */
.anders-design .search {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--card);
  border: 1.5px solid var(--line);
  border-radius: var(--r-field);
  padding: 5px 5px 5px 13px;
}

.anders-design .search:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.anders-design .search>svg {
  color: var(--accent);
  flex: none;
}

.anders-design .search input {
  border: 0;
  outline: none;
  width: 100%;
  font-size: 14.5px;
  color: var(--ink);
  background: transparent;
}

.anders-design .search .go {
  min-height: 44px;
  border-radius: 9px;
  background: var(--navy);
  color: var(--action);
  padding: 8px 15px;
  font-weight: 700;
  font-size: 13px;
  flex: none;
}

.anders-design .search .go:hover {
  background: var(--accent-d);
}

/* Filter anchor — empty vs. set state carried by color, never a stripe.
   Wraps an adv-select: icon + .anchor-body (select + its floated label,
   enhanced in place by adv-select.js) + chevron. The trigger button's own
   content-height is well under the 44px touch target, so the whole pill
   stays the clickable surface — page script forwards clicks on .anchor to
   the real .advs-trigger button (see design-system.html's inline script). */
.anders-design .anchor {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  border: 1.5px solid var(--line);
  background: var(--panel);
  border-radius: var(--r-field);
  padding: 8px 14px;
  min-width: 148px;
  cursor: pointer;
  transition: .15s ease;
}

.anders-design .anchor:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.anders-design .anchor .ic {
  color: var(--muted);
  flex: none;
  pointer-events: none;
}

.anders-design .anchor-body {
  position: relative;
  flex: 1;
  min-width: 0;
}

.anders-design .anchor-body label {
  display: block;
  font-size: 10px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
  line-height: 1;
  margin-bottom: 2px;
  pointer-events: none;
}

.anders-design .anchor .advs-trigger {
  padding: 0;
  border: 0;
  background: none;
  font-weight: 600;
  font-size: 14px;
  color: var(--muted);
}

.anders-design .anchor .chev {
  margin-left: auto;
  color: var(--muted);
  flex: none;
  pointer-events: none;
}

.anders-design .anchor.set {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.anders-design .anchor.set .ic,
.anders-design .anchor.set .anchor-body label {
  color: var(--accent);
}

.anders-design .anchor.set .advs-value {
  color: var(--ink);
}

/* Upload — dashed drop affordance */
.anders-design .upload {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1.5px dashed var(--accent-line);
  border-radius: var(--r-field);
  padding: 12px 14px;
  cursor: pointer;
  color: var(--slate);
  font-size: 13.5px;
  background: var(--panel);
  min-height: 52px;
}

.anders-design .upload:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.anders-design .upload .u-sub {
  display: block;
  font-size: 11.5px;
  color: var(--muted);
}

/* Consent — small print, checkbox */
.anders-design .consent {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  cursor: pointer;
}

.anders-design .consent input {
  margin-top: 3px;
  width: 16px;
  height: 16px;
  flex: none;
  accent-color: var(--accent);
}

.anders-design .consent span {
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--muted);
}

.anders-design .consent a {
  color: var(--accent);
  font-weight: 600;
}

/* ===== Fact band + emphasis figure (money is the loudest thing on screen) ===== */
.anders-design .facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  background: var(--card);
  box-shadow: var(--shadow);
}

.anders-design .fact {
  padding: 15px 18px;
  border-right: 1px solid var(--line-2);
  border-bottom: 1px solid var(--line-2);
}

.anders-design .fact:nth-child(2n) {
  border-right: 0;
}

.anders-design .fact .lab {
  font-size: 11px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
  margin-bottom: 6px;
}

.anders-design .fact .val {
  font-weight: 700;
  color: var(--ink);
  font-size: 18px;
  line-height: 1.15;
}

.anders-design .fact .sub {
  font-size: 12.5px;
  color: var(--slate);
  margin-top: 3px;
}

/* the emphasis figure — reserved single purpose */
.anders-design .fact.pay .val {
  font-size: 28px;
  letter-spacing: -.02em;
  color: var(--emph);
  font-feature-settings: var(--tnum);
}

@media(min-width:768px) {
  .anders-design .facts {
    grid-template-columns: 1.25fr 1fr 1fr 1fr;
  }

  .anders-design .fact {
    border-bottom: 0;
  }

  .anders-design .fact:nth-child(2n) {
    border-right: 1px solid var(--line-2);
  }

  .anders-design .fact:last-child {
    border-right: 0;
  }
}

/* ===== Job listing — list row + compact box ===== */
.anders-design .job-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 16px 18px;
  transition: box-shadow .18s ease,border-color .18s ease,transform .18s ease;
}

.anders-design .job-row:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--accent-line);
}

.anders-design .job-row .j-title {
  font-weight: 700;
  font-size: 16px;
  color: var(--accent);
  display: block;
  margin-bottom: 2px;
}

.anders-design .job-row .j-fac {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 8px;
}

.anders-design .job-row .j-meta {
  display: flex;
  gap: 16px;
  font-size: 13.5px;
  color: var(--slate);
  align-items: center;
  flex-wrap: wrap;
}

.anders-design .job-row .j-meta .i {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.anders-design .job-row .j-meta .i svg {
  color: var(--accent);
}

.anders-design .job-row .j-right {
  flex: none;
  text-align: right;
}

.anders-design .job-row .j-pay {
  font-weight: 700;
  font-size: 20px;
  color: var(--emph);
  font-feature-settings: var(--tnum);
  line-height: 1.1;
}

.anders-design .job-row .j-pw {
  font-size: 12px;
  color: var(--muted);
}

.anders-design .job-box {
  display: block;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 15px 16px;
  box-shadow: var(--shadow);
  transition: box-shadow .18s ease,transform .18s ease;
}

.anders-design .job-box:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
  text-decoration: none;
}

.anders-design .job-box .b-city {
  font-weight: 700;
  font-size: 14.5px;
  color: var(--ink);
  margin-bottom: 2px;
}

.anders-design .job-box .b-fac {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 9px;
}

.anders-design .job-box .b-foot {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.anders-design .job-box .b-pay {
  font-weight: 700;
  font-size: 18px;
  color: var(--emph);
  font-feature-settings: var(--tnum);
}

.anders-design .job-box .b-sh {
  font-size: 12px;
  color: var(--slate);
}

/* ===== FAQ accordion — flat list, top-border dividers (no card box) ===== */
.anders-design .faq {
  border-top: 1px solid var(--line);
}

.anders-design .faq details {
  border-bottom: 1px solid var(--line);
}

.anders-design .faq summary {
  list-style: none;
  cursor: pointer;
  min-height: 44px;
  font-weight: 700;
  font-size: 16px;
  color: var(--ink);
  padding: var(--s-4) var(--s-1);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-4);
}

.anders-design .faq summary::-webkit-details-marker {
  display: none;
}

/* +/× indicator is drawn with pseudo-element bars, not the text glyph —
   font glyph metrics never center optically inside the circle */
.anders-design .faq summary .pm {
  flex: none;
  position: relative;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 0;
  transition: transform .2s ease;
}

.anders-design .faq summary .pm::before,
.anders-design .faq summary .pm::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 10px;
  height: 2px;
  border-radius: 1px;
  background: currentColor;
  transform: translate(-50%,-50%);
}

.anders-design .faq summary .pm::after {
  width: 2px;
  height: 10px;
}

.anders-design .faq details[open] summary .pm {
  transform: rotate(45deg);
}

/* No max-width: the measure belongs to the container the accordion sits in,
   not the answer. Capping here left answers ending short of their own
   questions and of every sibling block. */
/* The right inset is the summary's own icon column reproduced — its var(--s-1)
   edge, the 22px +/× circle and the var(--s-4) gap before it — so a full-width
   answer stops clear of the control above it rather than running out to the
   same edge the icon sits on. Phone rows keep it at exactly that: there the
   answer needs the measure more than it needs the air. */
.anders-design .faq .ans {
  padding: 0 calc(var(--s-1) + 22px + var(--s-4)) var(--s-card) var(--s-1);
  font-size: 15px;
  color: var(--slate);
  line-height: 1.6;
}

/* Wide enough to spare it: add var(--s-6) of air past the icon column. */
@media(min-width:640px) {
  .anders-design .faq .ans {
    padding-right: calc(var(--s-1) + 22px + var(--s-4) + var(--s-6));
  }
}

/* Same reasoning one level down. The answers are paragraphs inside a section,
   so `.anders-design .section p` in anders-job-search.css caps them at its 76ch
   measure — which on a landing page's full-width accordion stops the text short
   of the question above it and of every other row. An answer opens inside a row
   the reader has just clicked; the row is the measure. */
.anders-design .faq .ans p {
  max-width: none;
}

/* ===== Quick-apply form (navy crown + white body) ===== */
.anders-design .apply {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow-md);
}

.anders-design .apply .crown {
  background: var(--hero-dark);
  color: var(--on-navy-hi);
  padding: 20px 22px;
  border-radius: var(--r) var(--r) 0 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.anders-design .apply .crown h3 {
  color: var(--on-navy-hi);
  font-size: 21px;
  font-weight: 700;
}

.anders-design .apply .crown p {
  color: var(--on-navy);
  font-size: 13px;
  margin-top: 4px;
  max-width: 32ch;
}

.anders-design .apply .badge {
  flex: none;
  background: var(--action);
  color: var(--action-ink);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  padding: 5px 11px;
  border-radius: var(--r-pill);
}

/* headerless variant — title on white; pairs with .btn-navy */
.anders-design .apply .plain-head {
  padding: 22px 22px 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.anders-design .apply .plain-head h3 {
  font-size: 21px;
}

.anders-design .apply .plain-head p {
  color: var(--slate);
  font-size: 13px;
  margin-top: 4px;
  max-width: 32ch;
}

.anders-design .apply .badge-light {
  flex: none;
  background: var(--action-soft);
  color: var(--green);
  border: 1px solid var(--green-soft);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  padding: 5px 11px;
  border-radius: var(--r-pill);
}

.anders-design .apply-body {
  padding: 20px 22px 22px;
}

.anders-design .proof {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--slate);
  margin-top: 12px;
}

.anders-design .proof .stars {
  color: var(--amber);
  letter-spacing: 1px;
}

.anders-design .divider {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--muted);
  font-size: 12.5px;
  margin: 14px 0;
}

.anders-design .divider::before,
.anders-design .divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

.anders-design .talk-line {
  text-align: center;
  font-size: 13px;
  color: var(--slate);
  margin-top: 12px;
}

.anders-design .talk-line a,
.anders-design .talk-line strong {
  color: var(--accent);
  font-weight: 700;
}

/* ===== Avatar (initials, shared by byline + author-bio) ===== */
.anders-design .avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  flex: none;
  background: var(--cta);
  color: var(--on-navy-hi);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
}

.anders-design .avatar.lg {
  width: 56px;
  height: 56px;
  font-size: 18px;
}

/* Author page identity block. Large enough to anchor its own grid column and
   hold a portrait at a readable size — the author hero is the one place the
   system shows a real face, so this is a portrait frame, not a byline chip. */
.anders-design .avatar.xl {
  width: 128px;
  height: 128px;
  font-size: 40px;
}

@media(min-width:768px) {
  .anders-design .avatar.xl {
    width: 160px;
    height: 160px;
    font-size: 48px;
  }
}

/* ===== Byline (post meta: avatar + name + date/read time + categories) ===== */
.anders-design .byline {
  display: flex;
  gap: var(--s-3);
  align-items: flex-start;
}

.anders-design .byline .bl-name {
  font-weight: 700;
  font-size: 14.5px;
  color: var(--ink);
}

.anders-design .byline .bl-name:hover {
  color: var(--accent);
}

.anders-design .byline .bl-meta {
  font-size: 13px;
  color: var(--muted);
  font-feature-settings: var(--tnum);
}

.anders-design .byline .bl-cats {
  font-size: 13px;
  color: var(--slate);
}

.anders-design .byline .bl-cats a {
  color: var(--accent);
  font-weight: 600;
}

/* ===== Author bio (end-of-article block) ===== */
.anders-design .author {
  display: flex;
  gap: var(--s-4);
  align-items: flex-start;
  padding: var(--s-6);
  background: var(--panel);
  border-radius: var(--r);
}

.anders-design .author .an {
  font-size: 15px;
}

.anders-design .author .an a {
  color: var(--ink);
}

.anders-design .author .an a:hover {
  color: var(--accent);
}

.anders-design .author .ab {
  font-size: 13.5px;
  color: var(--slate);
  line-height: 1.6;
  margin-top: 4px;
}

.anders-design .author .more {
  display: inline-block;
  margin-top: 8px;
  font-weight: 600;
  font-size: 13.5px;
}

/* ===== Author hero (the identity block on an /authors/<slug>/ page) =====
   The mist band is the one soft brand surface (--canvas), so an author page
   opens on brand without spending the neon action. Sits between the crumb
   band and the article list; the page owns the .shell wrapper inside it.
   Facts are label/value pairs, deliberately NOT oversized figures — a person
   is not a stat dashboard. */
/* --ah-measure is the reading measure the identity column is bound to from
   1024up; it is 75ch at the .lede size the bio renders in, resolved to px
   because the grid track computes ch against .ah-top's own (smaller) font
   size and would come out ~140px short. --ah-media-col and --ah-portrait are
   read in the 1024 block below. */
.anders-design .author-hero {
  --ah-measure: 800px;
  --ah-media-col: 320px;
  --ah-portrait: 192px;
  background: var(--canvas);
  border-bottom: 1px solid var(--action-line);
}

/* Vertical padding only, as LONGHANDS: .ah-in shares its element with the
   page's own .shell wrapper, whose padding-left/right must survive. A
   `padding:` shorthand here wins on specificity and silently zeroes the
   horizontal gutter, pulling the whole hero out of the page's content column
   (see docs/LEARNINGS.md 2026-07-30). */
.anders-design .author-hero .ah-in {
  padding-top: var(--s-8);
  padding-bottom: var(--s-section);
}

/* Two named areas rather than a flex row: the media column carries the
   portrait AND anything hanging under it (.ah-linklist), so it needs to be a
   real column with its own width, not a floated avatar the text wraps beside.
   Stacked at the 375 baseline — a 128px portrait next to the text would cut
   the bio to ~30ch and break an email address mid-word. */
.anders-design .author-hero .ah-top {
  display: grid;
  grid-template-areas: "media" "id";
  gap: var(--s-6);
  align-items: start;
}

.anders-design .author-hero .ah-media {
  grid-area: media;
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  align-items: flex-start;
}

.anders-design .author-hero .ah-id {
  grid-area: id;
  min-width: 0;
}

.anders-design .author-hero h1 {
  font-size: 30px;
  letter-spacing: -.02em;
  line-height: 1.1;
  text-wrap: balance;
}

/* Order inside .ah-id is name -> social -> role -> bio. The social icons sit
   directly under the name because they identify the same person; the role is
   a caption on that identity, so it follows rather than leads. Hence
   margin-TOP here — the role no longer sits above the h1. */
.anders-design .author-hero .ah-role {
  margin-top: var(--s-2);
  margin-bottom: 0;
  color: var(--accent);
  font-size: 13.5px;
  font-weight: 600;
}

.anders-design .author-hero .ah-bio {
  max-width: 75ch;
  margin-top: var(--s-3);
}

.anders-design .author-hero .ah-bio p {
  margin: 0 0 var(--s-3);
}

.anders-design .author-hero .ah-bio p:last-child {
  margin-bottom: 0;
}

.anders-design .author-hero .ah-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3) var(--s-6);
  margin-top: var(--s-4);
}

.anders-design .author-hero .ah-links>a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  font-size: 14px;
  font-weight: 600;
  word-break: break-word;
}

.anders-design .author-hero .ah-links>a svg {
  flex: none;
}

/* Social profiles — same icon-circle affordance as .share-row (styled with it
   below). Its own row under the name, not folded into .ah-links: contact
   details are optional per author and may render nothing at all. */
.anders-design .author-hero .ah-social {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin-top: var(--s-3);
}

/* Link list hanging under the portrait — an author's own channels (podcast,
   video, elsewhere they publish). Capped narrow so it reads as a caption to
   the portrait rather than a second content column. */
.anders-design .author-hero .ah-linklist {
  max-width: none;
}

.anders-design .author-hero .ah-linklist h2 {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--slate);
  text-transform: uppercase;
  letter-spacing: .02em;
  margin-bottom: var(--s-2);
}

.anders-design .author-hero .ah-linklist ul {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  list-style: none;
  margin: 0;
  padding: 0;
}

.anders-design .author-hero .ah-linklist li {
  border-left: 2px solid var(--action-line);
  padding-left: var(--s-3);
}

/* Sizing lives on the li so the anchor and its unlinked note share one metric.
   Only the leading keyword is the anchor, so it keeps the site's link colour
   and gets the weight step — with a sentence of plain text beside it, colour
   plus weight is what marks which words are actually clickable. */
.anders-design .author-hero .ah-linklist li {
  font-size: 15px;
  line-height: 1.5;
}

.anders-design .author-hero .ah-linklist a {
  font-weight: 700;
  color: var(--accent);
}

.anders-design .author-hero .ah-linklist a:hover {
  text-decoration: underline;
}

.anders-design .author-hero .ah-linknote {
  font-weight: 400;
  color: var(--slate);
}

@media(min-width:640px) {
  /* Media column is bounded, not fluid: it holds a fixed-size portrait, so
       letting it flex would only add slack between it and the identity text. */
  .anders-design .author-hero .ah-top {
    grid-template-columns: minmax(180px,240px) 1fr;
    grid-template-areas: "media id";
  }
}

@media(min-width:768px) {
  .anders-design .author-hero .ah-top {
    gap: var(--s-6);
  }

  .anders-design .author-hero h1 {
    font-size: 40px;
  }
}

/* Both tracks are bounded from here up, and the slack goes to the gutter.
   A `1fr` identity track measured 976px against a bio that stops at its 75ch
   measure (811px), so ~165px hung off the right of the hero with nothing in
   it, while the media column sat at 240px and wrapped every link-list item to
   five lines. Bounding the identity track at the measure and handing the
   media column 320px fixes both; space-between then parks the remainder
   between the two columns as a real gutter rather than as a dead right edge. */
@media(min-width:1024px) {
  .anders-design .author-hero .ah-top {
    grid-template-columns: minmax(0, var(--ah-media-col)) minmax(0, var(--ah-measure));
    column-gap: var(--s-8);
    justify-content: space-between;
  }

  /* 192px is the ceiling the asset supports: the registered crop is 320x320,
     so a square larger than that would upscale — going bigger needs a larger
     `cxs-author-avatar` size plus a thumbnail regen, not more CSS. */
  .anders-design .author-hero .avatar.xl {
    width: var(--ah-portrait);
    height: var(--ah-portrait);
    font-size: 56px;
  }

  .anders-design .author-hero .ah-bio {
    max-width: none;
  }
}

/* ===== Share row (end-of-article social links) ===== */
.anders-design .share-row {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex-wrap: wrap;
}

.anders-design .share-row .lab {
  font-size: 13px;
  font-weight: 700;
  color: var(--slate);
}

.anders-design .share-row a,
.anders-design .author-hero .ah-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--line);
  color: var(--slate);
  flex: none;
}

.anders-design .share-row a:hover,
.anders-design .author-hero .ah-social a:hover {
  border-color: var(--accent);
  color: var(--accent);
  text-decoration: none;
}

/* On the mist hero band the card-white fill reads as a lift, not a hole */
.anders-design .author-hero .ah-social a {
  background: var(--card);
}

/* ===== Post media (placeholder art: gradient token + inline SVG icon) ===== */
.anders-design .pc-media {
  position: relative;
  aspect-ratio: 16/9;
  flex: none;
  overflow: hidden;
  background: var(--hero-dark);
  color: var(--on-dark-2);
  display: flex;
  align-items: center;
  justify-content: center;
}

.anders-design .pc-media.alt {
  background: var(--cta);
}

.anders-design .pc-media svg {
  width: 30%;
  height: 30%;
  opacity: .92;
}

/* ===== Post card (archive grid + related grid, whole-card link) ===== */
.anders-design .post-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  overflow: hidden;
  color: inherit;
  transition: box-shadow .18s ease,transform .18s ease;
}

.anders-design .post-card:hover,
.anders-design .post-card:focus-visible {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
  text-decoration: none;
}

.anders-design .post-card .pc-body {
  padding: var(--s-card);
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 8px;
}

.anders-design .post-card .pc-body>.chip {
  align-self: flex-start;
}

.anders-design .post-card .pc-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.28;
  text-wrap: balance;
}

.anders-design .post-card .pc-excerpt {
  font-size: 14px;
  color: var(--slate);
  line-height: 1.55;
  flex: 1;
}

.anders-design .post-card .pc-meta {
  margin-top: auto;
  padding-top: 8px;
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 12.5px;
  color: var(--muted);
  font-feature-settings: var(--tnum);
}

.anders-design .post-card .pc-meta .sep {
  color: var(--accent-line);
}

/* Featured variant — larger, 2-col from tablet up */
.anders-design .post-card.feat .pc-title {
  font-size: 20px;
}

.anders-design .post-card.feat .pc-excerpt {
  font-size: 15px;
}

@media(min-width:768px) {
  .anders-design .post-card.feat {
    flex-direction: row;
  }

  .anders-design .post-card.feat .pc-media {
    width: 44%;
    aspect-ratio: auto;
  }

  .anders-design .post-card.feat .pc-body {
    flex: 1;
    justify-content: center;
    padding: var(--s-8);
  }

  .anders-design .post-card.feat .pc-title {
    font-size: 25px;
  }
}

/* ===== Post grid (responsive card grid, 1 -> 2 -> 3 col) ===== */
.anders-design .post-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-6);
}

@media(min-width:640px) {
  .anders-design .post-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media(min-width:1024px) {
  .anders-design .post-grid.cols-3 {
    grid-template-columns: repeat(3,1fr);
  }
}

/* ===== Category tabs (archive filter row) — horizontal scroll, never wraps.
   JS adds edge fades only while more content remains in that direction and
   enables mouse-dragging on desktop; touch keeps native momentum scrolling. ===== */
.anders-design .cat-tabs {
  display: flex;
  gap: var(--s-2);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 2px;
  overscroll-behavior-inline: contain;
}

.anders-design .cat-tabs::-webkit-scrollbar {
  display: none;
}

.anders-design .cat-tabs.is-scrollable {
  cursor: grab;
  user-select: none;
}

.anders-design .cat-tabs.is-dragging {
  cursor: grabbing;
}

.anders-design .cat-tabs.has-scroll-right {
  -webkit-mask-image: linear-gradient(to right,black calc(100% - var(--s-8)),transparent);
  mask-image: linear-gradient(to right,black calc(100% - var(--s-8)),transparent);
}

.anders-design .cat-tabs.has-scroll-left {
  -webkit-mask-image: linear-gradient(to right,transparent,black var(--s-8));
  mask-image: linear-gradient(to right,transparent,black var(--s-8));
}

.anders-design .cat-tabs.has-scroll-left.has-scroll-right {
  -webkit-mask-image: linear-gradient(to right,transparent,black var(--s-8),black calc(100% - var(--s-8)),transparent);
  mask-image: linear-gradient(to right,transparent,black var(--s-8),black calc(100% - var(--s-8)),transparent);
}

.anders-design .cat-tabs a {
  flex: none;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--s-4);
  border-radius: var(--r-pill);
  font-size: 14px;
  font-weight: 600;
  color: var(--accent);
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
}

.anders-design .cat-tabs a:hover {
  border-color: var(--accent);
  text-decoration: none;
}

.anders-design .cat-tabs a[aria-current="page"] {
  background: var(--accent);
  color: var(--on-navy-hi);
  border-color: var(--accent);
}

/* ===== Pagination ===== */
.anders-design .pager {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  align-items: center;
  justify-content: center;
}

.anders-design .pager a,
.anders-design .pager span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 44px;
  min-height: 44px;
  padding: 0 14px;
  border-radius: var(--r-field);
  font-weight: 700;
  font-size: 14px;
  font-feature-settings: var(--tnum);
  color: var(--slate);
  background: var(--card);
  border: 1px solid var(--line);
}

.anders-design .pager a:hover {
  border-color: var(--accent);
  color: var(--accent);
  text-decoration: none;
}

.anders-design .pager a[aria-current="page"] {
  background: var(--accent);
  color: var(--on-navy-hi);
  border-color: var(--accent);
}

/* ===== Inline CTA band (job-center conversion unit) ===== */
/* Self-contained spacing: this card gets embedded inside article prose (see
   blog-article.html), and its own h3/p must not inherit .prose's heading/
   paragraph rhythm rules — full margin resets here, not just the properties
   this component itself cares about, so nesting context never leaks in. */
.anders-design .cta-inline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  border-radius: var(--r);
  padding: var(--s-6);
  margin: var(--s-6) 0;
}

.anders-design .cta-inline h3 {
  font-size: 19px;
  margin: 0;
}

.anders-design .cta-inline p {
  color: var(--slate);
  font-size: 14px;
  margin: 4px 0 0;
}

/* ===== Rail card heading (wraps .poplist in the sticky job-alert rail) ===== */
.anders-design .rail-card h3 {
  font-size: 16px;
  margin-bottom: var(--s-4);
}

/* ===== Rail list (numbered links: editor's picks / more in category) ===== */
.anders-design .poplist {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

.anders-design .poplist li {
  display: flex;
  gap: var(--s-3);
  align-items: flex-start;
}

.anders-design .poplist .n {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  font-feature-settings: var(--tnum);
}

.anders-design .poplist a {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.35;
}

.anders-design .poplist a:hover {
  color: var(--accent);
}

/* ===== Job-alert card: extends .apply with an accessible expand-on-engage ===== */
/* All fields stay in the DOM and in tab order at all times (no hidden/display:none).
   :focus-within reveals them the moment the FIRST field is focused, so a keyboard user
   never tabs into something invisible. A tiny script (see templates) adds .ja-open on
   first focus so the reveal STAYS open once triggered, instead of collapsing again the
   moment focus leaves the card (:focus-within alone would close it on blur). :has() is
   a no-JS fallback that keeps a filled/autofilled card open regardless.
   overflow:hidden on the inner wrapper is needed only while collapsed, for the
   grid-row trick to visually clip content — switched to visible once open, so the
   "Preferred location" dropdown panel (position:absolute) can escape the card instead
   of being clipped by this same ancestor (see docs/LEARNINGS.md). */
.anders-design .ja-more {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows .3s ease,opacity .2s ease;
}

.anders-design .ja-more>div {
  overflow: hidden;
  min-height: 0;
}

.anders-design .apply:focus-within .ja-more,
.anders-design .apply.ja-open .ja-more,
.anders-design .apply:has(.ja-more input:not(:placeholder-shown)) .ja-more {
  grid-template-rows: 1fr;
  opacity: 1;
}

.anders-design .apply:focus-within .ja-more>div,
.anders-design .apply.ja-open .ja-more>div,
.anders-design .apply:has(.ja-more input:not(:placeholder-shown)) .ja-more>div {
  overflow: visible;
}

.anders-design .apply .ja-fine {
  font-size: 11.5px;
  color: var(--muted);
  line-height: 1.5;
  margin-top: 10px;
  text-align: center;
}

/* ===== Newsletter panel (supporting, footer-adjacent conversion unit) ===== */
.anders-design .nl-panel {
  background: var(--canvas);
  border: 1px solid var(--action-line);
  border-radius: var(--r);
  padding: var(--s-8);
  text-align: center;
}

.anders-design .nl-panel h2 {
  font-size: 23px;
}

.anders-design .nl-panel p {
  color: var(--slate);
  font-size: 15px;
  margin-top: 6px;
  max-width: 52ch;
  margin-left: auto;
  margin-right: auto;
}

.anders-design .nl-panel .nl-row {
  display: flex;
  gap: 10px;
  max-width: 420px;
  margin: var(--s-4) auto 0;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.anders-design .nl-panel input[type=email] {
  flex: 1;
  min-width: 180px;
  min-height: 48px;
  padding: 0 var(--s-4);
  border-radius: var(--r-field);
  border: 1px solid var(--accent-line);
  background: var(--card);
  font-size: 15px;
  color: var(--ink);
}

.anders-design .nl-panel input[type=email]:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

/* ===== Motion — everything above animates only when motion is allowed ===== */
@media(prefers-reduced-motion:reduce) {
  /* html explicitly: scroll-behavior only applies to the scrolling element, and
       a universal selector never matches it. */
  html:has(.anders-design) {
    scroll-behavior: auto !important;
  }

  .anders-design *,
  .anders-design *::before,
  .anders-design *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}