/* =============================================================================
   Youth Careers Canada — About / Contact / Legal.
   Loaded by: /about, /contact, /contact/thanks, /privacy, /terms.
   Owned by the about+contact+legal agent. Tokens only — no raw hex, no gradients.
   LIGHT THEME ONLY (2026-09-25): <html> is pinned to data-kds-theme="light".
   There are no prefers-color-scheme or [data-kds-theme="dark"] rules here and
   none should be added.
   Scale (2026-09-25): public surfaces run the `verandah` preset — display caps at
   3.75rem, leading 1.12, section rhythm roughly half what `marquee` used. Take the
   display size from --kds-text-display; do not restate it.
   v2 direction: editorial poster. Flat navy and orange blocks, tight radii,
   obvious hierarchy, settled motion (150ms hover / 160ms press).
   Prefixes: .yca- about · .ycn- contact · .ycl- legal.
   ========================================================================== */

:root {
  --yca-measure: 68ch;          /* legal + long-form reading measure */
  --yca-hairline: 1px solid var(--kds-border);
}

/* Long-form body copy. Deliberately larger and looser than UI text so the
   hierarchy between a heading and its paragraph is never ambiguous. */
.yca-prose { max-width: var(--yca-measure); }
.yca-prose p { margin: 0 0 var(--kds-sp-5); font-size: var(--kds-text-lg); line-height: 1.7; }
.yca-prose p:last-child { margin-bottom: 0; }
.yca-prose strong { font-weight: 700; }
.yca-prose a { color: var(--kds-accent); text-underline-offset: 3px; }

/* =============================================================================
   1. ABOUT — /about
   ========================================================================== */

/* ---- Hero -------------------------------------------------------------- */
.yca-hero { padding-block: clamp(2.25rem, 4.5vw, 3.5rem) clamp(1.75rem, 3vw, 2.5rem); }
.yca-hero__grid { display: grid; gap: clamp(1.5rem, 3vw, 2.75rem); grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); align-items: end; }
@media (max-width: 900px) { .yca-hero__grid { grid-template-columns: minmax(0, 1fr); align-items: start; } }

/* Size and leading come from the philosophy preset (verandah: 3.75rem cap, 1.12).
   Never restate a display size here or the whole surface falls out of scale. */
.yca-h {
  margin: 0;
  font-family: var(--kds-font-display);
  font-size: var(--kds-text-display);
  font-weight: 800;
  line-height: var(--kds-leading-display);
  letter-spacing: var(--kds-tracking-tight);
  text-wrap: balance;
}
.yca-h > span { display: block; }
/* Emphasis is a flat yellow underline, never gradient type. */
.yca-mark { box-shadow: inset 0 -0.16em 0 var(--ycc-yellow); }

.yca-hero__lead { margin: var(--kds-sp-6) 0 0; max-width: 52ch; font-size: var(--kds-text-lg); line-height: 1.65; color: var(--kds-fg-muted); }
.yca-hero__lead strong { color: var(--kds-fg); font-weight: 600; }

.yca-actions { display: flex; flex-wrap: wrap; gap: var(--kds-sp-3); margin-top: var(--kds-sp-6); }
.yca-actions .kds-btn { min-height: 48px; }
/* On a narrow screen a ragged stack of differently sized buttons reads as noise. */
@media (max-width: 560px) {
  .yca-actions, .yca-close__actions, .ycn-thanks__actions { display: grid; grid-template-columns: minmax(0, 1fr); }
}

/* The short version — a flat navy block beside the headline, not a floating card. */
.yca-short { padding: var(--kds-sp-6); background: var(--ycc-navy); color: var(--ycc-ivory); border-radius: var(--kds-radius-lg); }
.yca-short__h { margin: 0 0 var(--kds-sp-5); font-family: var(--kds-font-display); font-size: var(--kds-text-sm); font-weight: 700; letter-spacing: var(--kds-tracking-wide); text-transform: uppercase; color: var(--ycc-yellow); }
.yca-short__list { margin: 0; display: grid; gap: var(--kds-sp-4); }
.yca-short__row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--kds-sp-4); padding-bottom: var(--kds-sp-4); border-bottom: 1px solid #2C4058; }
.yca-short__list > .yca-short__row:last-child { padding-bottom: 0; border-bottom: 0; }
.yca-short__row dt { font-size: var(--kds-text-sm); color: #B6C3D2; }
.yca-short__row dd { margin: 0; font-family: var(--kds-font-display); font-size: var(--kds-text-lg); font-weight: 700; text-align: right; }

/* ---- Facts band: DELETED 2026-09-25 ------------------------------------
   The flat orange stripe used to read "5 career stages / 20 job categories /
   13 provinces and territories covered / Free". Advertising the size of the
   catalogue is an amateur tell, and the province figure implied national
   coverage the board does not have. The markup and these rules are both gone.
   Do not bring a .yca-facts band back. ---------------------------------- */

/* ---- Section rhythm ----------------------------------------------------
   .ycc-section (ycc.css, orchestrator-owned) still runs the marquee-era
   clamp(3.5rem, 8vw, 7rem). Halved here for the /about sections only — the
   selector is scoped so no page this stylesheet does not own is affected. */
.yca-mission.ycc-section,
#who-we-serve.ycc-section,
#how-it-works.ycc-section,
#quick-answers.ycc-section,
#commitment.ycc-section,

/* ---- Jump nav ---------------------------------------------------------- */
.yca-jump { border-bottom: var(--yca-hairline); }
/* NOTE: this <ul> also carries .ycc-wrap, which supplies margin-inline:auto and the
   page gutter. Reset margin/padding on the BLOCK axis only or the wrap collapses. */
.yca-jump__list { list-style: none; margin-block: 0; padding-block: 0; display: flex; flex-wrap: wrap; gap: 0 var(--kds-sp-6); }
.yca-jump__list a {
  display: inline-block; padding-block: var(--kds-sp-4);
  font-size: var(--kds-text-sm); font-weight: 600; color: var(--kds-fg-muted);
  text-decoration: none; border-bottom: 2px solid transparent;
  transition: color var(--kds-dur-fast) var(--kds-ease-standard), border-color var(--kds-dur-fast) var(--kds-ease-standard);
}
.yca-jump__list a:hover { color: var(--kds-fg); border-bottom-color: var(--ycc-orange); }
@media (max-width: 760px) { .yca-jump { overflow-x: auto; } .yca-jump__list { flex-wrap: nowrap; gap: 0 var(--kds-sp-5); } .yca-jump__list a { white-space: nowrap; } }

/* ---- Mission: a full-bleed navy block ---------------------------------- */
.yca-mission { background: var(--ycc-navy); color: var(--ycc-ivory); --kds-fg: var(--ycc-ivory); --kds-fg-muted: #C3CFDC; --kds-accent: var(--ycc-yellow); }
.yca-mission__grid { display: grid; gap: clamp(1.5rem, 3vw, 3rem); grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }
@media (max-width: 900px) { .yca-mission__grid { grid-template-columns: minmax(0, 1fr); } }
.yca-pull { margin: 0; font-family: var(--kds-font-display); font-size: clamp(1.5rem, 1rem + 1.5vw, 2.25rem); font-weight: 700; line-height: 1.2; letter-spacing: var(--kds-tracking-tight); text-wrap: balance; }
.yca-pull em { font-style: normal; color: var(--ycc-yellow); }
.yca-mission__sig { margin: var(--kds-sp-6) 0 0; padding-top: var(--kds-sp-5); border-top: 2px solid var(--ycc-orange); font-size: var(--kds-text-sm); color: #B6C3D2; max-width: 34ch; }
.yca-mission .yca-prose p { color: #DDE4EC; }
.yca-mission .yca-prose strong { color: var(--ycc-ivory); }
.yca-mission .yca-prose a { color: var(--ycc-yellow); }

/* ---- Section heads ----------------------------------------------------- */
.yca-head { max-width: 46ch; margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.yca-head h2 { margin: 0; font-family: var(--kds-font-display); font-size: clamp(1.6rem, 1rem + 1.6vw, 2.25rem); font-weight: 800; line-height: 1.15; letter-spacing: var(--kds-tracking-tight); text-wrap: balance; }
.yca-head p { margin: var(--kds-sp-4) 0 0; font-size: var(--kds-text-lg); line-height: 1.6; color: var(--kds-fg-muted); }

/* ---- Career stages: a hairline list, not a card grid ------------------- */
.yca-stages { list-style: none; margin: 0 0 clamp(1.5rem, 3vw, 2.25rem); padding: 0; border-top: 2px solid var(--kds-fg); }
.yca-stage { border-bottom: var(--yca-hairline); }
.yca-stage__link {
  display: grid; gap: var(--kds-sp-2) var(--kds-sp-6); align-items: baseline;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr) auto;
  padding: var(--kds-sp-5) var(--kds-sp-3) var(--kds-sp-5) var(--kds-sp-4);
  text-decoration: none; color: inherit;
  transition: background var(--kds-dur-fast) var(--kds-ease-standard), padding-left var(--kds-dur-fast) var(--kds-ease-standard);
}
.yca-stage__link:hover { background: var(--kds-surface-3); padding-left: var(--kds-sp-5); }
.yca-stage__link:active { transform: scale(.995); transition-duration: 160ms; }
.yca-stage__h { margin: 0; font-family: var(--kds-font-display); font-size: var(--kds-text-xl); font-weight: 700; letter-spacing: var(--kds-tracking-tight); }
.yca-stage__p { margin: 0; font-size: var(--kds-text-md); line-height: 1.55; color: var(--kds-fg-muted); }
.yca-stage__go { font-size: var(--kds-text-sm); font-weight: 600; color: var(--kds-fg-muted); white-space: nowrap; }
.yca-stage__link:hover .yca-stage__go { color: var(--kds-fg); }
@media (prefers-reduced-motion: reduce) { .yca-stage__link, .yca-stage__link:hover, .yca-stage__link:active { transform: none; padding-left: var(--kds-sp-4); } }
@media (max-width: 760px) {
  .yca-stage__link { grid-template-columns: minmax(0, 1fr); padding-inline: 0; }
  .yca-stage__link:hover { padding-left: 0; }
  .yca-stage__go { display: none; }
}

/* ---- How it works: two lanes ------------------------------------------ */
.yca-lanes { display: grid; gap: clamp(1.25rem, 2.5vw, 2rem); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 860px) { .yca-lanes { grid-template-columns: minmax(0, 1fr); } }
.yca-lane { padding: clamp(1.5rem, 3vw, 2.25rem); border-radius: var(--kds-radius-lg); background: var(--kds-surface); border: var(--yca-hairline); }
.yca-lane--dark { background: var(--ycc-navy); color: var(--ycc-ivory); border-color: transparent; }
.yca-lane__h { margin: 0 0 var(--kds-sp-2); font-family: var(--kds-font-display); font-size: var(--kds-text-2xl); font-weight: 800; letter-spacing: var(--kds-tracking-tight); }
.yca-lane__sub { margin: 0 0 var(--kds-sp-6); font-size: var(--kds-text-sm); color: var(--kds-fg-muted); }
.yca-lane--dark .yca-lane__sub { color: #B6C3D2; }
.yca-steps { counter-reset: yca-step; list-style: none; margin: 0; padding: 0; display: grid; gap: var(--kds-sp-5); }
.yca-steps > li { counter-increment: yca-step; display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: var(--kds-sp-4); }
.yca-steps > li::before {
  content: counter(yca-step);
  width: 2rem; height: 2rem; display: grid; place-items: center;
  border-radius: var(--kds-radius-full);
  background: var(--ycc-orange); color: var(--ycc-navy);
  font-family: var(--kds-font-display); font-size: var(--kds-text-sm); font-weight: 800;
}
.yca-steps b { display: block; font-size: var(--kds-text-md); font-weight: 700; }
.yca-steps p { margin: var(--kds-sp-1) 0 0; font-size: var(--kds-text-md); line-height: 1.55; color: var(--kds-fg-muted); }
.yca-lane--dark .yca-steps p { color: #C3CFDC; }
.yca-lane__foot { margin: var(--kds-sp-6) 0 0; }
.yca-lane__foot a { font-size: var(--kds-text-sm); font-weight: 600; }
.yca-lane--dark .yca-lane__foot a { color: var(--ycc-yellow); }

/* ---- Quick answers (speakable: .about-quick must stay) ----------------- */
.about-quick { margin: 0; display: grid; gap: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 2px solid var(--kds-fg); }
@media (max-width: 860px) { .about-quick { grid-template-columns: minmax(0, 1fr); } }
.about-quick__item { padding: var(--kds-sp-6) 0; border-bottom: var(--yca-hairline); }
.about-quick__item:nth-child(odd) { padding-right: clamp(1rem, 3vw, 3rem); }
.about-quick__item:nth-child(even) { padding-left: clamp(1rem, 3vw, 3rem); border-left: var(--yca-hairline); }
/* An odd number of answers would leave a half-width rule hanging. Let the last one span. */
.about-quick__item:last-child:nth-child(odd) { grid-column: 1 / -1; padding-right: 0; }
@media (max-width: 860px) {
  .about-quick__item:nth-child(odd) { padding-right: 0; }
  .about-quick__item:nth-child(even) { padding-left: 0; border-left: 0; }
}
.about-quick dt { margin: 0 0 var(--kds-sp-3); font-family: var(--kds-font-display); font-size: var(--kds-text-lg); font-weight: 700; line-height: 1.25; letter-spacing: var(--kds-tracking-tight); }
.about-quick dd { margin: 0; font-size: var(--kds-text-md); line-height: 1.65; color: var(--kds-fg-muted); max-width: 54ch; }

/* ---- Commitments ------------------------------------------------------- */
.yca-commit { list-style: none; margin: 0; padding: 0; display: grid; gap: 0 clamp(1.5rem, 4vw, 3.5rem); grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 2px solid var(--kds-fg); }
@media (max-width: 760px) { .yca-commit { grid-template-columns: minmax(0, 1fr); } }
.yca-commit > li { padding: var(--kds-sp-6) 0; border-bottom: var(--yca-hairline); }
.yca-commit h3 { margin: 0 0 var(--kds-sp-3); font-family: var(--kds-font-display); font-size: var(--kds-text-xl); font-weight: 700; letter-spacing: var(--kds-tracking-tight); }
.yca-commit p { margin: 0; font-size: var(--kds-text-md); line-height: 1.6; color: var(--kds-fg-muted); max-width: 48ch; }

.yca-cite { margin-top: clamp(2rem, 4vw, 3rem); padding: var(--kds-sp-5); background: var(--kds-surface); border: var(--yca-hairline); border-radius: var(--kds-radius-md); }
.yca-cite h3 { margin: 0 0 var(--kds-sp-2); font-size: var(--kds-text-sm); font-weight: 700; letter-spacing: var(--kds-tracking-wide); text-transform: uppercase; color: var(--kds-fg-muted); }
.yca-cite p { margin: 0; font-size: var(--kds-text-sm); line-height: 1.6; color: var(--kds-fg-muted); max-width: var(--yca-measure); }

/* ---- Where we serve (link-rich prose) ---------------------------------- */
.yca-serve h3 { margin: 0 0 var(--kds-sp-3); font-family: var(--kds-font-display); font-size: var(--kds-text-xl); font-weight: 700; letter-spacing: var(--kds-tracking-tight); }
.yca-serve + .yca-serve { margin-top: var(--kds-sp-7); }

/* ---- Closing block ----------------------------------------------------- */
.yca-close { background: var(--ycc-orange); color: var(--ycc-navy); }
.yca-close__grid { display: grid; gap: clamp(1.5rem, 4vw, 3rem); grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; }
@media (max-width: 860px) { .yca-close__grid { grid-template-columns: minmax(0, 1fr); } }
.yca-close h2 { margin: 0; font-family: var(--kds-font-display); font-size: clamp(1.6rem, 1rem + 1.6vw, 2.25rem); font-weight: 800; line-height: 1.15; letter-spacing: var(--kds-tracking-tight); text-wrap: balance; }
.yca-close p { margin: var(--kds-sp-4) 0 0; font-size: var(--kds-text-lg); line-height: 1.6; color: #5A3B12; max-width: 48ch; }
.yca-close__actions { display: flex; flex-wrap: wrap; gap: var(--kds-sp-3); }
.yca-close__actions .kds-btn { min-height: 48px; }
.yca-close__actions .kds-btn--ink { --kds-btn-bg: var(--ycc-navy); --kds-btn-fg: var(--ycc-ivory); }
.yca-close__actions .kds-btn--line { --kds-btn-bg: transparent; --kds-btn-fg: var(--ycc-navy); --kds-btn-border: var(--ycc-navy); }
.yca-close__actions .kds-btn--line:hover { background: color-mix(in srgb, var(--ycc-navy) 12%, transparent); }

/* =============================================================================
   2. CONTACT — /contact and /contact/thanks
   ========================================================================== */
.ycn-hero { padding-block: clamp(2rem, 4vw, 3.25rem) clamp(1.25rem, 2.5vw, 2rem); }
.ycn-hero h1 { margin: 0; font-family: var(--kds-font-display); font-size: clamp(1.9rem, 1rem + 2.4vw, 2.75rem); font-weight: 800; line-height: 1.14; letter-spacing: var(--kds-tracking-tight); }
.ycn-hero p { margin: var(--kds-sp-5) 0 0; max-width: 54ch; font-size: var(--kds-text-lg); line-height: 1.6; color: var(--kds-fg-muted); }

.ycn-grid { display: grid; gap: clamp(1.75rem, 4vw, 3.5rem); grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); align-items: start; padding-bottom: clamp(3rem, 7vw, 6rem); }
@media (max-width: 900px) { .ycn-grid { grid-template-columns: minmax(0, 1fr); } }

.ycn-form { border-top: 2px solid var(--kds-fg); padding-top: clamp(1.5rem, 3vw, 2.25rem); }
.ycn-form h2 { margin: 0 0 var(--kds-sp-2); font-family: var(--kds-font-display); font-size: var(--kds-text-2xl); font-weight: 800; letter-spacing: var(--kds-tracking-tight); }
.ycn-form__intro { margin: 0 0 var(--kds-sp-6); font-size: var(--kds-text-md); color: var(--kds-fg-muted); max-width: 52ch; }

.ycn-fields { display: grid; gap: var(--kds-sp-5); }
.ycn-row { display: grid; gap: var(--kds-sp-5); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 620px) { .ycn-row { grid-template-columns: minmax(0, 1fr); } }
.ycn-field label, .ycn-label { display: block; margin-bottom: var(--kds-sp-2); font-size: var(--kds-text-sm); font-weight: 600; color: var(--kds-fg); }
.ycn-opt { font-weight: 400; color: var(--kds-fg-faint); }
.ycn-req { color: var(--kds-danger); }
.ycn-field .kds-input, .ycn-field .kds-select, .ycn-field .kds-textarea { font-size: var(--kds-text-md); }
.ycn-field textarea.kds-textarea { min-height: 11rem; padding-inline: var(--kds-control-px); }
.ycn-field .kds-input[aria-invalid="true"], .ycn-field .kds-select[aria-invalid="true"], .ycn-field .kds-textarea[aria-invalid="true"] { border-color: var(--kds-danger); }
.ycn-field .kds-input[readonly] { background: var(--kds-surface-3); color: var(--kds-fg-muted); }
.ycn-hint { display: block; margin-top: var(--kds-sp-2); font-size: var(--kds-text-sm); color: var(--kds-fg-muted); }
.ycn-err { display: block; margin-top: var(--kds-sp-2); font-size: var(--kds-text-sm); font-weight: 600; color: var(--kds-danger); }

/* Honeypot — never shown to a person, never announced. */
.ycn-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.ycn-account { display: flex; gap: var(--kds-sp-3); align-items: flex-start; padding: var(--kds-sp-4); border: var(--yca-hairline); border-radius: var(--kds-radius-md); background: var(--kds-surface-2); font-size: var(--kds-text-sm); line-height: 1.5; cursor: pointer; }
.ycn-account input { margin-top: 2px; }

.ycn-alert { margin: 0 0 var(--kds-sp-6); padding: var(--kds-sp-4) var(--kds-sp-5); border: 1px solid var(--kds-danger); border-left-width: 4px; border-radius: var(--kds-radius-md); background: var(--kds-danger-soft); font-size: var(--kds-text-sm); }
.ycn-alert p { margin: 0 0 var(--kds-sp-2); font-weight: 700; }
.ycn-alert ul { margin: 0; padding-left: var(--kds-sp-5); display: grid; gap: var(--kds-sp-1); }
.ycn-alert a { color: var(--kds-fg); }

.ycn-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--kds-sp-4); margin-top: var(--kds-sp-6); padding-top: var(--kds-sp-6); border-top: var(--yca-hairline); }
.ycn-actions .kds-btn { min-height: 48px; }
.ycn-actions__note { font-size: var(--kds-text-sm); color: var(--kds-fg-muted); }

/* Aside: what happens next + support details */
.ycn-aside { display: grid; gap: var(--kds-sp-5); position: sticky; top: calc(var(--kds-sp-7) + 3.5rem); }
@media (max-width: 900px) { .ycn-aside { position: static; } }
.ycn-panel { padding: var(--kds-sp-6); border-radius: var(--kds-radius-lg); background: var(--ycc-navy); color: var(--ycc-ivory); }
.ycn-panel h2, .ycn-panel h3 { margin: 0 0 var(--kds-sp-5); font-family: var(--kds-font-display); font-size: var(--kds-text-sm); font-weight: 700; letter-spacing: var(--kds-tracking-wide); text-transform: uppercase; color: var(--ycc-yellow); }
.ycn-next { counter-reset: ycn-next; list-style: none; margin: 0; padding: 0; display: grid; gap: var(--kds-sp-5); }
.ycn-next > li { counter-increment: ycn-next; display: grid; grid-template-columns: 1.75rem minmax(0, 1fr); gap: var(--kds-sp-4); font-size: var(--kds-text-sm); line-height: 1.55; color: #C3CFDC; }
.ycn-next > li::before { content: counter(ycn-next); width: 1.75rem; height: 1.75rem; display: grid; place-items: center; border-radius: var(--kds-radius-full); background: var(--ycc-orange); color: var(--ycc-navy); font-family: var(--kds-font-display); font-weight: 800; font-size: var(--kds-text-xs); }
.ycn-next b { display: block; color: var(--ycc-ivory); font-weight: 700; }

.ycn-facts { border: var(--yca-hairline); border-radius: var(--kds-radius-lg); padding: var(--kds-sp-6); background: var(--kds-surface); }
.ycn-facts h3 { margin: 0 0 var(--kds-sp-4); font-size: var(--kds-text-sm); font-weight: 700; letter-spacing: var(--kds-tracking-wide); text-transform: uppercase; color: var(--kds-fg-muted); }
.ycn-facts dl { margin: 0; display: grid; gap: var(--kds-sp-4); }
.ycn-facts dt { font-size: var(--kds-text-sm); font-weight: 600; }
.ycn-facts dd { margin: var(--kds-sp-1) 0 0; font-size: var(--kds-text-sm); line-height: 1.55; color: var(--kds-fg-muted); }
.ycn-facts dd a { color: var(--kds-accent); }

/* ---- Thanks ------------------------------------------------------------ */
.ycn-thanks { padding-block: clamp(2.25rem, 4.5vw, 3.75rem); }
.ycn-thanks__grid { display: grid; gap: clamp(1.75rem, 4vw, 3.5rem); grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); align-items: start; }
@media (max-width: 860px) { .ycn-thanks__grid { grid-template-columns: minmax(0, 1fr); } }
.ycn-thanks h1 { margin: 0; font-family: var(--kds-font-display); font-size: clamp(1.9rem, 1rem + 2.4vw, 2.75rem); font-weight: 800; line-height: 1.14; letter-spacing: var(--kds-tracking-tight); }
.ycn-thanks__lead { margin: var(--kds-sp-5) 0 0; max-width: 46ch; font-size: var(--kds-text-lg); line-height: 1.6; color: var(--kds-fg-muted); }
.ycn-ref { display: inline-flex; align-items: baseline; gap: var(--kds-sp-3); margin-top: var(--kds-sp-6); padding: var(--kds-sp-4) var(--kds-sp-5); background: var(--ycc-orange); color: var(--ycc-navy); border-radius: var(--kds-radius-md); }
.ycn-ref span { font-size: var(--kds-text-sm); font-weight: 600; }
.ycn-ref strong { font-family: var(--kds-font-display); font-size: var(--kds-text-2xl); font-weight: 800; letter-spacing: var(--kds-tracking-tight); }
.ycn-thanks__actions { display: flex; flex-wrap: wrap; gap: var(--kds-sp-3); margin-top: var(--kds-sp-7); }
.ycn-thanks__actions .kds-btn { min-height: 48px; }

/* =============================================================================
   3. LEGAL — /privacy and /terms
   A reading surface. Generous measure, quiet furniture, obvious hierarchy.
   /js/legal.js depends on: [data-legal-link], .legal-section[id], [data-legal-jump].
   ========================================================================== */
.ycl-hero { background: var(--ycc-navy); color: var(--ycc-ivory); padding-block: clamp(2rem, 4vw, 3.25rem); }
.ycl-hero h1 { margin: 0; font-family: var(--kds-font-display); font-size: clamp(1.9rem, 1rem + 2.4vw, 2.75rem); font-weight: 800; line-height: 1.14; letter-spacing: var(--kds-tracking-tight); }
.ycl-hero__lead { margin: var(--kds-sp-4) 0 0; max-width: 56ch; font-size: var(--kds-text-lg); line-height: 1.6; color: #C3CFDC; }
.ycl-hero__meta { margin: var(--kds-sp-6) 0 0; padding-top: var(--kds-sp-4); border-top: 2px solid var(--ycc-orange); display: flex; flex-wrap: wrap; gap: var(--kds-sp-2) var(--kds-sp-6); font-size: var(--kds-text-sm); color: #B6C3D2; }
.ycl-hero__meta a { color: var(--ycc-yellow); }

.ycl-doc { padding-block: clamp(2.5rem, 5vw, 4.5rem) clamp(3rem, 7vw, 6rem); }
.ycl-grid { display: grid; gap: clamp(2rem, 5vw, 4.5rem); grid-template-columns: 15rem minmax(0, 1fr); align-items: start; }
@media (max-width: 1000px) { .ycl-grid { grid-template-columns: minmax(0, 1fr); gap: var(--kds-sp-6); } }

.ycl-index { position: sticky; top: calc(3.5rem + var(--kds-sp-5)); }
@media (max-width: 1000px) { .ycl-index { display: none; } }
.ycl-index__label { margin: 0 0 var(--kds-sp-4); padding-bottom: var(--kds-sp-3); border-bottom: 2px solid var(--kds-fg); font-size: var(--kds-text-xs); font-weight: 700; letter-spacing: var(--kds-tracking-wide); text-transform: uppercase; color: var(--kds-fg-muted); }
.ycl-index ol { list-style: none; margin: 0; padding: 0; counter-reset: ycl-toc; }
.ycl-index li { counter-increment: ycl-toc; }
.ycl-index a {
  display: grid; grid-template-columns: 1.6rem minmax(0, 1fr); gap: var(--kds-sp-2);
  padding: var(--kds-sp-3) var(--kds-sp-3) var(--kds-sp-3) var(--kds-sp-2);
  border-left: 2px solid var(--kds-border);
  font-size: var(--kds-text-sm); line-height: 1.4; color: var(--kds-fg-muted); text-decoration: none;
  transition: color var(--kds-dur-fast) var(--kds-ease-standard), border-color var(--kds-dur-fast) var(--kds-ease-standard);
}
.ycl-index a::before { content: counter(ycl-toc) "."; font-variant-numeric: tabular-nums; color: var(--kds-fg-faint); }
.ycl-index a:hover { color: var(--kds-fg); border-left-color: var(--kds-border-strong); }
.ycl-index a.is-active { color: var(--kds-fg); font-weight: 600; border-left-color: var(--ycc-orange); }
.ycl-index a.is-active::before { color: var(--ycc-orange); }

.ycl-jump { display: none; margin-bottom: var(--kds-sp-6); }
@media (max-width: 1000px) { .ycl-jump { display: block; } }
.ycl-jump select { width: 100%; min-height: 48px; }

.ycl-body { max-width: var(--yca-measure); font-size: var(--kds-text-lg); }
.ycl-intro { margin: 0 0 clamp(2rem, 4vw, 3rem); padding-bottom: clamp(1.5rem, 3vw, 2.25rem); border-bottom: 2px solid var(--kds-fg); font-size: var(--kds-text-lg); line-height: 1.7; color: var(--kds-fg); }

.legal-section { padding-block: clamp(1.75rem, 3.5vw, 2.75rem); border-bottom: var(--yca-hairline); scroll-margin-top: 5rem; }
.legal-section:last-child { border-bottom: 0; }
.legal-section h2 {
  margin: 0 0 var(--kds-sp-5);
  display: grid; grid-template-columns: 2.4rem minmax(0, 1fr); gap: var(--kds-sp-2);
  font-family: var(--kds-font-display); font-size: clamp(1.4rem, 1rem + 1.1vw, 1.9rem);
  font-weight: 700; line-height: 1.15; letter-spacing: var(--kds-tracking-tight);
}
.ycl-num { color: var(--ycc-orange); font-variant-numeric: tabular-nums; }
.legal-section p { margin: 0 0 var(--kds-sp-5); line-height: 1.75; }
.legal-section p:last-child { margin-bottom: 0; }
.legal-section ul { margin: 0 0 var(--kds-sp-5); padding: 0; list-style: none; display: grid; gap: var(--kds-sp-4); }
.legal-section ul li { position: relative; padding-left: var(--kds-sp-6); line-height: 1.7; }
.legal-section ul li::before { content: ""; position: absolute; left: 0; top: 0.72em; width: 10px; height: 2px; background: var(--ycc-orange); }
.legal-section a { color: var(--kds-accent); text-underline-offset: 3px; }

.legal-callout { margin: 0 0 var(--kds-sp-5); padding: var(--kds-sp-5); border-radius: var(--kds-radius-md); background: var(--kds-surface-3); border-left: 3px solid var(--ycc-orange); }
.legal-callout p { margin: 0 0 var(--kds-sp-2); font-size: var(--kds-text-md); }
.legal-callout p:last-child { margin-bottom: 0; }

.ycl-foot { margin-top: clamp(2rem, 4vw, 3rem); padding-top: var(--kds-sp-6); border-top: 2px solid var(--kds-fg); font-size: var(--kds-text-md); color: var(--kds-fg-muted); }
.ycl-foot a { color: var(--kds-accent); }

@media print {
  .ycl-index, .ycl-jump, .ycl-hero__meta { display: none !important; }
  .ycl-grid { grid-template-columns: minmax(0, 1fr); }
  .ycl-hero { background: none; color: #000; }
  .ycl-body { max-width: none; }
}