/* =============================================================================
   Youth Careers Canada — SHARED LANDING PARTIALS
   -----------------------------------------------------------------------------
   Owned by the shared-partials agent. Styles exactly five partials, each of which
   is included by more than one page:

     views/partials/lane.ejs                 .ycc-lane, .compass   (home, seeker)
     views/portal/partials/landing-audiences .ycc-aud    (employer, consultant)
     views/portal/partials/posting-specimen  .ycc-spec   (seeker, employer, consultant)
     views/portal/partials/landing-pricing   .ycc-price  (seeker, employer, consultant)
     views/portal/partials/landing-faq       .ycc-faq    (about, seeker, employer, consultant)

   Loaded on all four pages BEFORE the per-page stylesheet, so a page may still
   override. Tokens only: no raw hex, no raw colour/spacing px.

   LIGHT THEME ONLY (2026-09-25): <html> is pinned to data-kds-theme="light".
   No prefers-color-scheme block and no [data-kds-theme="dark"] rule belongs here.

   SCALE (2026-09-25): the public surfaces moved from `marquee` to `verandah` —
   display caps at 3.75rem with 1.12 leading, section rhythm roughly halved. The
   headings and the price figure below were re-tuned to sit under that cap. Do not
   restate a display size; these partials must stay smaller than the page's h1.

   Design language (direction 2026-09-25, "Impeccable" editorial poster):
     flat blocks of navy and orange do the structural work; no gradients anywhere,
     no eyebrow pills, no glow/halo/glass, radii capped by the brand tokens,
     Archivo (--kds-font-display) for headings, Inter for body, motion is a short
     ease-out lift and a 0.96 press. Never bounce.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   0. Section rhythm for these five partials
   -----------------------------------------------------------------------------
   .ycc-section in ycc.css still carries the marquee-era clamp(3.5rem, 8vw, 7rem),
   which stacked ~14rem of air between two bands on a 1440 screen. These five
   partials set their own, roughly half that, to match the verandah rhythm. Scoped
   to the partial roots on purpose: .ycc-section itself belongs to the orchestrator
   and is shared with pages this stylesheet does not own.
   -------------------------------------------------------------------------- */
.ycc-lane.ycc-section,
.ycc-faq.ycc-section,
.ycc-price.ycc-section,
.ycc-spec.ycc-section,

/* -----------------------------------------------------------------------------
   0b. Shared type + motion for these five partials
   -------------------------------------------------------------------------- */
.ycc-lane__h,
.ycc-faq__h,
.ycc-price__h,
.ycc-spec__h,
.ycc-aud__h {
  margin: 0;
  font-family: var(--kds-font-display);
  font-weight: 800;
  font-size: clamp(1.75rem, 1.2rem + 1.7vw, 2.5rem);
  line-height: 1.14;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.ycc-lane__lead,
.ycc-faq__intro,
.ycc-price__sub,
.ycc-spec__lead,
.ycc-aud__lead {
  margin: var(--kds-sp-4) 0 0;
  max-width: 46ch;
  font-size: var(--kds-text-lg);
  line-height: 1.55;
  color: var(--kds-fg-muted);
  text-wrap: pretty;
}

/* A section marker. Sits BELOW its headline or inside a rail — never a pill above. */
.ycc-lane__list-h,
.ycc-spec__marker,
.ycc-price__role,
.ycc-spec__label,
.ycc-spec__tag {
  font-family: var(--kds-font-sans);
  font-size: var(--kds-text-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* =============================================================================
   1. lane.ejs — the career-area explorer  (home + /jobseeker)
   ========================================================================== */
.ycc-lane {
  background: var(--kds-surface);
  border-block: 1px solid var(--kds-border);
}

.ycc-lane__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  column-gap: clamp(2rem, 5vw, 5.5rem);
  row-gap: var(--kds-sp-6);
  align-items: start;
}
.ycc-lane__head { grid-column: 1; grid-row: 1; }
.ycc-lane__compass { grid-column: 1; grid-row: 2; }
.ycc-lane__list-wrap { grid-column: 2; grid-row: 1 / span 2; }

/* .ycc-lane__total / __total-n / __total-l: DELETED 2026-09-25. The lane used to
   headline "N open roles in M career areas". A marketing surface never advertises
   how big its index is — with a young board it just signals emptiness. The per-row
   counts stay, because each one sits on the filter link it describes. */

/* ---- the list of career areas ---- */
.ycc-lane__list-h {
  margin: 0 0 var(--kds-sp-4);
  color: var(--kds-fg-muted);
}

.ycc-lane__rows {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--kds-border);
  counter-reset: lane;
}
.ycc-lane__row { border-bottom: 1px solid var(--kds-border); }

.ycc-lane__link {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--kds-sp-4);
  padding: var(--kds-sp-4) var(--kds-sp-4) var(--kds-sp-4) var(--kds-sp-3);
  min-height: 56px;
  color: var(--kds-fg);
  text-decoration: none;
  transition: background var(--kds-dur-fast) var(--kds-ease-standard),
              padding-left var(--kds-dur-fast) var(--kds-ease-standard);
}
/* the flat orange marker that slides in on hover — colour as structure */
.ycc-lane__link::before {
  content: "";
  position: absolute;
  inset-block: 0;
  left: 0;
  width: 4px;
  background: var(--ycc-orange);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--kds-dur-fast) var(--kds-ease-standard);
}
.ycc-lane__link:hover,
.ycc-lane__link:focus-visible {
  background: var(--kds-surface-3);
  padding-left: var(--kds-sp-5);
}
.ycc-lane__link:hover::before,
.ycc-lane__link:focus-visible::before { transform: scaleX(1); }
.ycc-lane__link:active { transform: scale(0.99); }

.ycc-lane__body { display: block; min-width: 0; }
.ycc-lane__name {
  display: block;
  font-size: var(--kds-text-md);
  font-weight: 700;
  line-height: 1.25;
}
.ycc-lane__bar {
  display: block;
  height: 4px;
  margin-top: var(--kds-sp-2);
  background: color-mix(in srgb, var(--kds-fg) 10%, transparent);
}
.ycc-lane__bar-fill {
  display: block;
  height: 100%;
  width: var(--lane-pct, 10%);
  background: var(--ycc-orange);
}

.ycc-lane__count {
  font-family: var(--kds-font-display);
  font-size: var(--kds-text-xl);
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.ycc-lane__arrow {
  width: 18px;
  height: 18px;
  flex: none;
  color: var(--kds-fg-muted);
  transition: transform var(--kds-dur-fast) var(--kds-ease-standard),
              color var(--kds-dur-fast) var(--kds-ease-standard);
}
.ycc-lane__link:hover .ycc-lane__arrow,
.ycc-lane__link:focus-visible .ycc-lane__arrow {
  transform: translateX(3px);
  color: var(--kds-fg);
}

.ycc-lane__none {
  margin: 0;
  padding: var(--kds-sp-5) 0;
  border-block: 1px solid var(--kds-border);
  color: var(--kds-fg-muted);
}

.ycc-lane__more {
  display: inline-flex;
  align-items: center;
  gap: var(--kds-sp-3);
  margin-top: var(--kds-sp-5);
  min-height: 48px;
  padding-inline: var(--kds-sp-5);
  background: var(--kds-inverse);
  color: var(--kds-inverse-fg);
  border-radius: var(--kds-radius-md);
  font-size: var(--kds-text-sm);
  font-weight: 700;
  text-decoration: none;
  transition: transform var(--kds-dur-fast) var(--kds-ease-standard),
              background var(--kds-dur-fast) var(--kds-ease-standard);
}
.ycc-lane__more svg { width: 16px; height: 16px; }
.ycc-lane__more:hover { background: color-mix(in srgb, var(--kds-inverse) 86%, var(--ycc-orange)); }
.ycc-lane__more:active { transform: scale(0.96); }

/* ---- the compass diagram (enhanced by /js/public.js, complete without it) ---- */
.compass {
  margin: 0;
  padding: var(--kds-sp-5) clamp(1.5rem, 4vw, 3rem) var(--kds-sp-6);
}
.compass__plot {
  position: relative;
  aspect-ratio: 400 / 320;
}
.compass__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.compass__line {
  stroke: color-mix(in srgb, var(--kds-fg) 22%, transparent);
  stroke-width: 1.5;
  transition: stroke var(--kds-dur-fast) var(--kds-ease-standard);
}
.compass__center { fill: var(--kds-fg); }
.compass__node {
  fill: var(--ycc-orange);
  transition: fill var(--kds-dur-fast) var(--kds-ease-standard),
              transform var(--kds-dur-fast) var(--kds-ease-standard);
  transform-box: fill-box;
  transform-origin: center;
}
.compass__node--empty {
  fill: none;
  stroke: color-mix(in srgb, var(--kds-fg) 30%, transparent);
  stroke-width: 1.5;
}
/* focused state, set by public.js when a category row is hovered/focused */
.compass.is-focused .compass__node { fill: color-mix(in srgb, var(--ycc-orange) 28%, var(--kds-surface)); }
.compass.is-focused .compass__node.is-active { fill: var(--ycc-orange); transform: scale(1.18); }
.compass.is-focused .compass__line { stroke: color-mix(in srgb, var(--kds-fg) 10%, transparent); }
.compass.is-focused .compass__line.is-active { stroke: var(--kds-fg); }

.compass__labels {
  position: absolute;
  inset: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}
.compass__label {
  position: absolute;
  left: var(--x);
  top: var(--y);
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  gap: var(--kds-sp-2);
  padding: 0.28rem 0.5rem;
  background: var(--kds-surface);
  border: 1px solid var(--kds-border);
  border-radius: var(--kds-radius-sm);
  white-space: nowrap;
  transition: background var(--kds-dur-fast) var(--kds-ease-standard),
              color var(--kds-dur-fast) var(--kds-ease-standard),
              border-color var(--kds-dur-fast) var(--kds-ease-standard);
}
.compass__label-name {
  font-size: var(--kds-text-xs);
  font-weight: 700;
  letter-spacing: 0.02em;
}
.compass__label-n {
  font-family: var(--kds-font-display);
  font-size: var(--kds-text-xs);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--kds-fg-muted);
}
/* Each label is anchored clear of its node, in the direction that node sits from
   the hub, so a busy (larger) node is never covered by its own label. */
.compass__label[data-dir="up"]    { transform: translate(-50%, calc(-100% - 26px)); }
.compass__label[data-dir="down"]  { transform: translate(-50%, 26px); }
.compass__label[data-dir="right"] { transform: translate(26px, -50%); }
.compass__label[data-dir="left"]  { transform: translate(calc(-100% - 26px), -50%); }

.compass__label--center {
  background: var(--kds-fg);
  color: var(--kds-bg);
  border-color: var(--kds-fg);
  font-size: var(--kds-text-xs);
  font-weight: 700;
}
.compass.is-focused .compass__label { opacity: 0.55; }
.compass.is-focused .compass__label.is-active {
  opacity: 1;
  background: var(--ycc-orange);
  border-color: var(--ycc-orange);
  color: var(--ycc-navy);
}
.compass.is-focused .compass__label.is-active .compass__label-n { color: var(--ycc-navy); }

.compass__cap {
  margin: var(--kds-sp-5) 0 0;
  font-size: var(--kds-text-sm);
  line-height: 1.45;
  color: var(--kds-fg-muted);
  max-width: 40ch;
}

@media (max-width: 1040px) {
  .ycc-lane__grid { grid-template-columns: minmax(0, 1fr); }
  .ycc-lane__head,
  .ycc-lane__compass,
  .ycc-lane__list-wrap { grid-column: 1; grid-row: auto; }
  .ycc-lane__list-wrap { order: 2; }
  .ycc-lane__compass { order: 3; }
}
@media (max-width: 720px) {
  /* The diagram needs room the phone does not have. The same five labels become a
     plain wrapped row: no second markup, nothing lost. */
  .compass { padding-inline: 0; }
  .compass__plot { aspect-ratio: auto; }
  .compass__svg { display: none; }
  .compass__labels {
    position: static;
    display: flex;
    flex-wrap: wrap;
    gap: var(--kds-sp-2);
  }
  /* the [data-dir] anchors above are more specific, so reset them explicitly */
  .compass__label,
  .compass__label[data-dir] { position: static; transform: none; }
  .compass__label--center { display: none; }
}

/* =============================================================================
   2. landing-faq.ejs — the question index  (about + all three landings)
   ========================================================================== */
.ycc-faq { background: var(--kds-bg); }

.ycc-faq__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.5fr);
  column-gap: clamp(2rem, 5vw, 5.5rem);
  row-gap: var(--kds-sp-6);
  align-items: start;
}

.ycc-faq__aside { position: sticky; top: calc(var(--kds-sp-8) + 1rem); }

.ycc-faq__index {
  margin-top: var(--kds-sp-6);
  border-top: 2px solid var(--kds-fg);
}
.ycc-faq__index ol { list-style: none; margin: 0; padding: 0; }
.ycc-faq__index li { border-bottom: 1px solid var(--kds-border); }
.ycc-faq__index a {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--kds-sp-3);
  min-height: 46px;
  padding: var(--kds-sp-3) var(--kds-sp-2);
  color: var(--kds-fg);
  text-decoration: none;
  transition: background var(--kds-dur-fast) var(--kds-ease-standard),
              padding-left var(--kds-dur-fast) var(--kds-ease-standard);
}
.ycc-faq__index a::before {
  content: "";
  position: absolute;
  inset-block: 0;
  left: 0;
  width: 3px;
  background: var(--ycc-orange);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--kds-dur-fast) var(--kds-ease-standard);
}
.ycc-faq__index a:hover,
.ycc-faq__index a:focus-visible { background: var(--kds-surface-3); padding-left: var(--kds-sp-4); }
.ycc-faq__index a:hover::before,
.ycc-faq__index a:focus-visible::before { transform: scaleX(1); }
.ycc-faq__index-label { font-size: var(--kds-text-sm); font-weight: 700; }
.ycc-faq__index-n {
  font-family: var(--kds-font-display);
  font-size: var(--kds-text-xs);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--kds-fg-muted);
}

.ycc-faq__contact {
  margin: var(--kds-sp-6) 0 0;
  max-width: 34ch;
  font-size: var(--kds-text-sm);
  line-height: 1.5;
  color: var(--kds-fg-muted);
}
.ycc-faq__contact a { color: var(--kds-fg); font-weight: 700; text-underline-offset: 3px; }

/* ---- the question column ---- */
.ycc-faq__panel { min-width: 0; }
.ycc-faq__none { margin: 0; color: var(--kds-fg-muted); }

.ycc-faq__group { scroll-margin-top: 5.5rem; }
.ycc-faq__group:focus { outline: none; }
.ycc-faq__group + .ycc-faq__group { margin-top: var(--kds-sp-7); }

/* A flat navy bar is the group's label. Colour does the structural work. */
.ycc-faq__group-h {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--kds-sp-4);
  margin: 0;
  padding: var(--kds-sp-3) var(--kds-sp-4);
  background: var(--kds-inverse);
  color: var(--kds-inverse-fg);
  border-radius: var(--kds-radius-sm) var(--kds-radius-sm) 0 0;
}
.ycc-faq__group-name {
  font-family: var(--kds-font-sans);
  font-size: var(--kds-text-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.ycc-faq__group-n {
  font-size: var(--kds-text-xs);
  font-weight: 600;
  color: color-mix(in srgb, var(--kds-inverse-fg) 72%, var(--kds-inverse));
  white-space: nowrap;
}

.ycc-faq__q { border-bottom: 1px solid var(--kds-border); }
.ycc-faq__summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--kds-sp-4);
  padding: var(--kds-sp-4) var(--kds-sp-4) var(--kds-sp-4) 0;
  min-height: 52px;
  cursor: pointer;
  list-style: none;
  transition: color var(--kds-dur-fast) var(--kds-ease-standard);
}
.ycc-faq__summary::-webkit-details-marker { display: none; }
.ycc-faq__summary::marker { content: ""; }
.ycc-faq__summary:hover { color: var(--kds-fg); }
.ycc-faq__summary:hover .ycc-faq__q-mark { border-color: var(--kds-fg); background: var(--ycc-orange); color: var(--ycc-navy); }

.ycc-faq__q-text {
  font-size: var(--kds-text-md);
  font-weight: 700;
  line-height: 1.4;
  text-wrap: pretty;
}
.ycc-faq__q-mark {
  flex: none;
  width: 26px;
  height: 26px;
  margin-top: 1px;
  display: grid;
  place-items: center;
  border: 1px solid var(--kds-border-strong);
  border-radius: var(--kds-radius-xs);
  transition: background var(--kds-dur-fast) var(--kds-ease-standard),
              border-color var(--kds-dur-fast) var(--kds-ease-standard),
              color var(--kds-dur-fast) var(--kds-ease-standard);
}
.ycc-faq__q-mark svg {
  width: 12px; height: 12px; display: block;
  transition: transform var(--kds-dur-base) var(--kds-ease-standard);
}
.ycc-faq__q[open] .ycc-faq__q-mark svg { transform: rotate(45deg); }
.ycc-faq__q[open] .ycc-faq__q-mark {
  background: var(--kds-inverse);
  border-color: var(--kds-inverse);
  color: var(--kds-inverse-fg);
}

.ycc-faq__a {
  padding: 0 var(--kds-sp-7) var(--kds-sp-5) 0;
  max-width: 64ch;
}
.ycc-faq__a p {
  margin: 0;
  font-size: var(--kds-text-md);
  line-height: 1.6;
  color: var(--kds-fg-muted);
  text-wrap: pretty;
}
.ycc-faq__more { margin-top: var(--kds-sp-3) !important; }
.ycc-faq__more a { color: var(--kds-fg); font-weight: 700; text-underline-offset: 3px; }

@media (max-width: 900px) {
  .ycc-faq__grid { grid-template-columns: minmax(0, 1fr); }
  .ycc-faq__aside { position: static; }
  .ycc-faq__a { padding-right: var(--kds-sp-4); }
}

/* =============================================================================
   3. landing-pricing.ejs — flat orange price block + fact table
   ========================================================================== */
.ycc-price { background: var(--kds-bg); }

.ycc-price__top { max-width: 58ch; margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }

.ycc-price__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
  border-radius: var(--kds-radius-lg);
  overflow: hidden;
  border: 1px solid var(--kds-border);
}

/* The one flat orange block on the page. Navy ink on orange is 6.7:1. */
.ycc-price__panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(1.75rem, 3vw, 2.75rem);
  background: var(--ycc-orange);
  color: var(--ycc-navy);
}
.ycc-price__role { margin: 0; color: color-mix(in srgb, var(--ycc-navy) 78%, var(--ycc-orange)); }
.ycc-price__amount {
  margin: var(--kds-sp-4) 0 0;
  font-family: var(--kds-font-display);
  font-weight: 800;
  font-size: clamp(2.75rem, 2rem + 2.4vw, 3.5rem);
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.ycc-price__cur { font-size: 0.5em; vertical-align: 0.45em; margin-right: 0.06em; letter-spacing: 0; }
.ycc-price__per {
  margin: var(--kds-sp-4) 0 0;
  max-width: 20ch;
  font-size: var(--kds-text-md);
  font-weight: 700;
  line-height: 1.3;
}
.ycc-price__math {
  margin: var(--kds-sp-4) 0 var(--kds-sp-6);
  padding-top: var(--kds-sp-4);
  border-top: 2px solid var(--ycc-navy);
  font-size: var(--kds-text-sm);
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
}
.ycc-price__math strong { font-weight: 800; }

.ycc-price__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding-inline: var(--kds-sp-5);
  background: var(--ycc-navy);
  color: var(--ycc-ivory);
  border-radius: var(--kds-radius-md);
  font-size: var(--kds-text-md);
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  transition: transform var(--kds-dur-fast) var(--kds-ease-standard),
              background var(--kds-dur-fast) var(--kds-ease-standard);
}
.ycc-price__cta:hover { background: var(--ycc-navy-deep); }
.ycc-price__cta:active { transform: scale(0.96); }

.ycc-price__detail {
  padding: clamp(1.75rem, 3vw, 2.75rem);
  background: var(--kds-surface);
}
.ycc-price__facts { margin: 0; }
.ycc-price__facts > div {
  display: grid;
  grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr);
  gap: var(--kds-sp-4);
  padding-block: var(--kds-sp-3);
  border-top: 1px solid var(--kds-border);
}
.ycc-price__facts > div:first-child { border-top: 2px solid var(--kds-fg); }
.ycc-price__facts dt {
  font-size: var(--kds-text-sm);
  font-weight: 600;
  color: var(--kds-fg-muted);
}
.ycc-price__facts dd {
  margin: 0;
  font-size: var(--kds-text-sm);
  font-weight: 700;
  line-height: 1.4;
}

.ycc-price__note { margin-top: var(--kds-sp-6); }
.ycc-price__note h3 {
  margin: 0 0 var(--kds-sp-3);
  font-family: var(--kds-font-display);
  font-size: var(--kds-text-xl);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.ycc-price__note p {
  margin: 0 0 var(--kds-sp-3);
  max-width: 60ch;
  font-size: var(--kds-text-sm);
  line-height: 1.6;
  color: var(--kds-fg-muted);
  text-wrap: pretty;
}
.ycc-price__other,
.ycc-price__fine { font-size: var(--kds-text-xs) !important; }
.ycc-price__fine {
  margin: var(--kds-sp-4) 0 0 !important;
  padding-top: var(--kds-sp-3);
  border-top: 1px solid var(--kds-border);
  font-weight: 600;
  color: var(--kds-fg-faint);
}

@media (max-width: 880px) {
  .ycc-price__grid { grid-template-columns: minmax(0, 1fr); }
}

/* =============================================================================
   4. posting-specimen.ejs — a real posting, on a navy band
   ========================================================================== */
.ycc-spec__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  column-gap: clamp(2rem, 5vw, 5rem);
  row-gap: var(--kds-sp-6);
  align-items: center;
}

.ycc-spec__marker {
  margin: var(--kds-sp-6) 0 0;
  padding-top: var(--kds-sp-4);
  border-top: 2px solid var(--ycc-orange);
  color: var(--ycc-yellow);
}

/* The posting itself is paper: warm ivory in both themes, navy ink at 13:1. */
.ycc-spec__sheet { min-width: 0; }
.ycc-spec__tag {
  display: inline-block;
  margin: 0;
  padding: var(--kds-sp-2) var(--kds-sp-4);
  background: var(--ycc-orange);
  color: var(--ycc-navy);
  border-radius: var(--kds-radius-sm) var(--kds-radius-sm) 0 0;
}
.ycc-spec__card {
  --kds-fg: var(--ycc-navy);
  --kds-fg-muted: color-mix(in srgb, var(--ycc-navy) 72%, var(--ycc-ivory));
  --kds-border: color-mix(in srgb, var(--ycc-navy) 16%, var(--ycc-ivory));
  padding: clamp(1.25rem, 3vw, 2rem);
  background: var(--ycc-ivory);
  color: var(--ycc-navy);
  border-radius: 0 var(--kds-radius-lg) var(--kds-radius-lg) var(--kds-radius-lg);
}

.ycc-spec__head {
  display: flex;
  align-items: flex-start;
  gap: var(--kds-sp-4);
  padding-bottom: var(--kds-sp-4);
  border-bottom: 1px solid var(--kds-border);
}
.ycc-spec__mark {
  flex: none;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  background: var(--ycc-navy);
  color: var(--ycc-ivory);
  border-radius: var(--kds-radius-sm);
  font-family: var(--kds-font-display);
  font-size: var(--kds-text-md);
  font-weight: 800;
  letter-spacing: 0.02em;
}
.ycc-spec__ident { min-width: 0; }
.ycc-spec__label { margin: 0; color: var(--kds-fg-muted); }
.ycc-spec__company {
  margin: var(--kds-sp-2) 0 0;
  font-family: var(--kds-font-display);
  font-size: var(--kds-text-lg);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.015em;
}
.ycc-spec__note {
  margin: 0.2rem 0 0;
  font-size: var(--kds-text-xs);
  color: var(--kds-fg-muted);
}

.ycc-spec__title {
  margin: var(--kds-sp-5) 0 0;
  font-family: var(--kds-font-display);
  font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.ycc-spec__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--kds-sp-2);
  margin: var(--kds-sp-4) 0 0;
  padding: 0;
  list-style: none;
}
.ycc-spec__chips li {
  padding: 0.25rem 0.65rem;
  border: 1px solid color-mix(in srgb, var(--ycc-navy) 30%, var(--ycc-ivory));
  border-radius: var(--kds-radius-full);
  font-size: var(--kds-text-xs);
  font-weight: 600;
}
.ycc-spec__chips li:first-child {
  background: var(--ycc-navy);
  border-color: var(--ycc-navy);
  color: var(--ycc-ivory);
}

.ycc-spec__fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--kds-sp-5);
  margin: var(--kds-sp-5) 0 0;
}
.ycc-spec__field {
  padding-block: var(--kds-sp-3);
  border-top: 1px solid var(--kds-border);
}
.ycc-spec__field--wide { grid-column: 1 / -1; }
.ycc-spec__field dt {
  font-size: var(--kds-text-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--kds-fg-muted);
}
.ycc-spec__field dd {
  margin: var(--kds-sp-2) 0 0;
  font-size: var(--kds-text-sm);
  font-weight: 700;
  line-height: 1.45;
}

.ycc-spec__foot {
  display: flex;
  align-items: center;
  gap: var(--kds-sp-4);
  margin-top: var(--kds-sp-5);
  padding-top: var(--kds-sp-4);
  border-top: 1px solid var(--kds-border);
}
.ycc-spec__apply {
  flex: none;
  display: inline-grid;
  place-items: center;
  min-height: 44px;
  padding-inline: var(--kds-sp-5);
  background: var(--ycc-orange);
  color: var(--ycc-navy);
  border-radius: var(--kds-radius-md);
  font-size: var(--kds-text-sm);
  font-weight: 700;
}
.ycc-spec__disclaimer {
  margin: 0;
  font-size: var(--kds-text-xs);
  line-height: 1.45;
  color: var(--kds-fg-muted);
}

@media (max-width: 900px) {
  .ycc-spec__grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 520px) {
  .ycc-spec__fields { grid-template-columns: minmax(0, 1fr); }
  .ycc-spec__foot { flex-direction: column; align-items: flex-start; }
}

/* =============================================================================
   5. landing-audiences.ejs — the five career stages, as a real sequence
   ========================================================================== */
.ycc-aud { background: var(--kds-surface-3); }

.ycc-aud__head { max-width: 56ch; margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }

.ycc-aud__ladder {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--kds-sp-5) var(--kds-sp-5);
  margin: 0;
  padding: 0;
  list-style: none;
}
.ycc-aud__step {
  padding-top: var(--kds-sp-4);
  border-top: 2px solid var(--kds-fg);
}
.ycc-aud__num {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  background: var(--ycc-orange);
  color: var(--ycc-navy);
  border-radius: var(--kds-radius-xs);
  font-family: var(--kds-font-display);
  font-size: var(--kds-text-sm);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.ycc-aud__name {
  margin: var(--kds-sp-4) 0 0;
  font-family: var(--kds-font-display);
  font-size: var(--kds-text-lg);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.ycc-aud__desc {
  margin: var(--kds-sp-3) 0 0;
  font-size: var(--kds-text-sm);
  line-height: 1.55;
  color: var(--kds-fg-muted);
  text-wrap: pretty;
}
.ycc-aud__link {
  display: inline-flex;
  align-items: center;
  gap: var(--kds-sp-2);
  margin-top: var(--kds-sp-3);
  min-height: 44px;
  color: var(--kds-fg);
  font-size: var(--kds-text-sm);
  font-weight: 700;
  text-decoration: none;
  box-shadow: inset 0 -2px 0 var(--ycc-orange);
  transition: box-shadow var(--kds-dur-fast) var(--kds-ease-standard);
}
.ycc-aud__link svg {
  width: 14px;
  height: 14px;
  transition: transform var(--kds-dur-fast) var(--kds-ease-standard);
}
.ycc-aud__link:hover { box-shadow: inset 0 -2px 0 var(--kds-fg); }
.ycc-aud__link:hover svg { transform: translateX(3px); }

/* The stacked variant (consultant landing passes stack: true) reads as a list. */
.ycc-aud--stack .ycc-aud__ladder { grid-template-columns: minmax(0, 1fr); gap: 0; }
.ycc-aud--stack .ycc-aud__step {
  display: grid;
  grid-template-columns: 38px minmax(0, 20ch) minmax(0, 1fr);
  align-items: start;
  gap: var(--kds-sp-5);
  padding-block: var(--kds-sp-5);
  border-top: 1px solid var(--kds-border);
}
.ycc-aud--stack .ycc-aud__step:first-child { border-top: 2px solid var(--kds-fg); }
.ycc-aud--stack .ycc-aud__num { width: 38px; height: 38px; }
.ycc-aud--stack .ycc-aud__name { margin: 0; align-self: center; }
.ycc-aud--stack .ycc-aud__desc { margin: 0; align-self: center; }

@media (max-width: 1080px) {
  .ycc-aud__ladder { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .ycc-aud__ladder { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .ycc-aud__step { padding-block: var(--kds-sp-5); border-top-width: 1px; }
  .ycc-aud__step:first-child { border-top-width: 2px; }
  .ycc-aud--stack .ycc-aud__step { grid-template-columns: minmax(0, 1fr); gap: var(--kds-sp-3); }
}

/* =============================================================================
   6. Motion + print
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .ycc-lane__link,
  .ycc-lane__arrow,
  .ycc-lane__more,
  .ycc-faq__index a,
  .ycc-faq__q-mark,
  .ycc-price__cta,
  .ycc-aud__link,
  .ycc-aud__link svg,
  .compass__node,
  .compass__label,
  .compass__line { transition: none !important; }
  .ycc-lane__link:hover,
  .ycc-faq__index a:hover { padding-left: var(--kds-sp-3); }
  .ycc-lane__link:active,
  .ycc-lane__more:active,
  .ycc-price__cta:active { transform: none; }
}

@media print {
  .ycc-lane__compass { display: none; }
  .ycc-faq__q[open] .ycc-faq__q-mark,
  .ycc-faq__q-mark { display: none; }
  .ycc-faq__a { display: block !important; }
  .ycc-price__panel,
  .ycc-spec__card { background: #fff !important; color: #000 !important; }
}