/* @tapeflow/design-system/tokens.css */
/* Canonical visual tokens for TapeFlow, RunTools, Waste, Parking, Housing, CertDay, HomeCost and CampFit.
 * Product-specific data semantics belong in each app; visual fundamentals live here.
 */
:root {
  color-scheme: light;
  --ds-canvas: #f5f7fb;
  --ds-surface: #ffffff;
  --ds-surface-soft: #eef3f9;
  --ds-border: #d7e0eb;
  --ds-border-strong: #aab8ca;
  --ds-ink: #172033;
  --ds-muted: #526176;
  --ds-subtle: #637187;
  --ds-primary: #1256a0;
  --ds-primary-hover: #0e4682;
  --ds-primary-soft: #eaf2fc;
  --ds-on-primary: #ffffff;
  --ds-success: #12643d;
  --ds-success-soft: #e9f5ee;
  --ds-warning: #80570b;
  --ds-warning-soft: #fff5df;
  --ds-danger: #b4232c;
  --ds-danger-soft: #fcecee;
  --ds-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Apple SD Gothic Neo", "Noto Sans CJK KR", "Malgun Gothic", sans-serif;
  --ds-font-mono: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --ds-text-xs: 0.75rem;
  --ds-text-sm: 0.875rem;
  --ds-text-base: 1rem;
  --ds-text-lg: 1.125rem;
  --ds-text-xl: 1.25rem;
  --ds-text-2xl: 1.5rem;
  --ds-text-3xl: 2rem;
  --ds-leading-body: 1.6;
  --ds-leading-heading: 1.3;
  --ds-space-1: 0.25rem;
  --ds-space-2: 0.5rem;
  --ds-space-3: 0.75rem;
  --ds-space-4: 1rem;
  --ds-space-5: 1.25rem;
  --ds-space-6: 1.5rem;
  --ds-space-8: 2rem;
  --ds-space-10: 2.5rem;
  --ds-space-12: 3rem;
  --ds-radius-sm: 0.375rem;
  --ds-radius-control: 0.5rem;
  --ds-radius-card: 0.75rem;
  --ds-radius-lg: 1rem;
  --ds-radius-pill: 999px;
  --ds-content-width: 76rem;
  --ds-gutter: clamp(1rem, 3vw, 2rem);
  --ds-header-height: 4rem;
  --ds-control-height: 2.75rem;
  --ds-shadow-sm: 0 1px 2px rgb(23 32 51 / 5%);
  --ds-shadow-card: 0 2px 8px rgb(23 32 51 / 5%);
  --ds-duration-fast: 120ms;
  --ds-duration-normal: 180ms;
  --ds-ease: cubic-bezier(0.2, 0, 0, 1);
}

/* RunTools exposes a theme switch. Other apps retain their light default. */
:root.dark {
  color-scheme: dark;
  --ds-canvas: #101827;
  --ds-surface: #182337;
  --ds-surface-soft: #223149;
  --ds-border: #34445d;
  --ds-border-strong: #60728d;
  --ds-ink: #edf3fc;
  --ds-muted: #b4c2d7;
  --ds-subtle: #a0b1ca;
  --ds-primary: #8abaff;
  --ds-primary-hover: #b1d2ff;
  --ds-primary-soft: #203d63;
  --ds-on-primary: #102642;
  --ds-success: #83d7a7;
  --ds-success-soft: #153d2b;
  --ds-warning: #efcb78;
  --ds-warning-soft: #41351b;
  --ds-danger: #ffa1aa;
  --ds-danger-soft: #48242e;
  --ds-shadow-sm: 0 1px 2px rgb(0 0 0 / 16%);
  --ds-shadow-card: 0 2px 8px rgb(0 0 0 / 16%);
}

/* @tapeflow/design-system/foundation.css */
/* Low-priority defaults: local components and utility classes own layout. */
@layer base {
  *, *::before, *::after { box-sizing: border-box; }
  html {
    background: var(--ds-canvas);
    -webkit-text-size-adjust: 100%;
    scroll-padding-top: calc(var(--ds-header-height) + var(--ds-space-4));
  }
  body {
    margin: 0;
    background: var(--ds-canvas);
    color: var(--ds-ink);
    font-family: var(--ds-font-sans);
    font-size: var(--ds-text-base);
    line-height: var(--ds-leading-body);
    -webkit-font-smoothing: antialiased;
  }
  button, input, select, textarea { font: inherit; }
  button, [role="button"] { touch-action: manipulation; }
  button:disabled, [aria-disabled="true"] { cursor: not-allowed; }
  :focus-visible { outline: 2px solid var(--ds-primary); outline-offset: 3px; }
  ::selection { background: var(--ds-primary); color: var(--ds-on-primary); }
  h1, h2, h3 { text-wrap: balance; }
}

/* Accessibility preference overrides component and utility animation rules. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Caelion landing page */
:root {
  color-scheme: light;
  --landing-canvas: #f8f7f2;
  --landing-line: #dadbd3;
  --landing-muted: #5c655f;
  --landing-paper: #fffef9;
  --landing-moss: #e2e9d6;
  --landing-sky: #e3edf6;
  --landing-lilac: #eae5f0;
  --landing-sand: #f0e6d3;
}
html, body { background: var(--landing-canvas); color: var(--ds-ink); }
body { margin: 0; }
a { color: inherit; text-decoration: none; }
svg { display: block; }
a:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--ds-primary); outline-offset: 6px; }
.art-library { position: absolute; width: 0; height: 0; overflow: hidden; }
.skip { position: fixed; left: 20px; top: 16px; z-index: 20; padding: 14px 20px; background: var(--landing-paper); border: 1px solid currentColor; transform: translateY(-160%); }
.skip:focus { transform: translateY(0); }
.page { width: min(100% - 96px, 1216px); margin: 0 auto; }
.header { min-height: 96px; display: flex; align-items: center; justify-content: space-between; gap: 24px; border-bottom: 1px solid var(--landing-line); }
.brand { display: inline-flex; min-height: 44px; align-items: center; gap: 10px; font-size: 24px; font-weight: 720; letter-spacing: -.8px; }
.brand img { display: block; }
.header-caption { font-family: var(--ds-font-mono); font-size: 10px; letter-spacing: .12em; color: var(--landing-muted); }
.nav-link { display: inline-flex; min-height: 44px; align-items: center; gap: 24px; font-size: 14px; }
.nav-link svg { width: 16px; height: 16px; transition: transform 180ms ease; }
.nav-link:hover svg { transform: translate(2px, -2px); }
.hero { display: grid; grid-template-columns: 1.05fr 1fr; align-items: center; gap: 20px; min-height: 650px; padding: 62px 0 64px; }
.eyebrow { display: flex; align-items: center; gap: 9px; margin: 0 0 24px; font: 500 11px/1.5 var(--ds-font-mono); letter-spacing: .06em; color: var(--landing-muted); }
.tiny-cross { width: 11px; height: 11px; position: relative; flex: none; color: var(--ds-primary); }
.tiny-cross::before, .tiny-cross::after { content: ""; position: absolute; inset: 5px 0; background: currentColor; }
.tiny-cross::after { transform: rotate(90deg); }
h1 { margin: 0; font-size: clamp(64px, 7.8vw, 108px); font-weight: 750; line-height: 1.06; letter-spacing: -.075em; word-break: keep-all; }
h1 > span { display: block; }
h1 .title-bottom { display: flex; align-items: center; gap: 26px; margin-top: 7px; }
.title-spark { width: 64px; height: 64px; color: var(--ds-primary); transform: rotate(12deg); }
.hero-description { margin: 30px 0 27px; font-size: 17px; line-height: 1.8; letter-spacing: -.025em; color: var(--landing-muted); word-break: keep-all; }
.hero-link { display: inline-flex; align-items: center; justify-content: space-between; gap: 26px; min-height: 50px; padding: 12px 20px; border-radius: var(--ds-radius-control); background: var(--ds-primary); color: var(--ds-on-primary); font-size: 14px; font-weight: 600; transition: background 180ms ease; }
.hero-link > span { font-size: 20px; line-height: 1; transition: transform 180ms ease; }
.hero-link:hover, .service-link:hover { background: var(--ds-primary-hover); }
.hero-link:hover > span { transform: translateY(2px); }
.hero-collection { position: relative; height: 490px; isolation: isolate; }
.collection-orbit-frame { position: absolute; inset: 0; overflow: hidden; }
.collection-orbit { position: absolute; inset: 72px 18px 42px; border: 1px solid var(--landing-line); border-radius: 50%; transform: rotate(-22deg); }
.collection-orbit::after { content: ""; position: absolute; inset: 12px -5px; border: 1px dashed var(--landing-line); border-radius: 50%; transform: rotate(42deg); }
.collection-caption, .collection-footnote { position: absolute; font: 500 10px/1.5 var(--ds-font-mono); letter-spacing: .09em; color: var(--landing-muted); }
.collection-caption { top: 14px; right: 4px; }
.collection-footnote { bottom: 0; left: 45px; font-size: 9px; }
.paper-card { position: absolute; width: 220px; height: 230px; padding: 14px 15px; border: 1px solid rgb(30 43 35 / 10%); border-radius: 7px; box-shadow: 0 2px 0 #d9d9cf, 0 4px 0 #f5f3e9, 0 12px 16px rgb(30 43 35 / 8%), 0 35px 45px -22px rgb(30 43 35 / 24%); transition: transform 400ms ease; }
.paper-number { font: 500 9px/1.5 var(--ds-font-mono); letter-spacing: .07em; color: var(--landing-muted); }
.paper-card > svg { width: calc(100% + 28px); height: 160px; margin: 0 -14px; }
.paper-name { display: flex; justify-content: space-between; gap: 10px; padding-top: 8px; border-top: 1px solid rgb(30 43 35 / 12%); font-size: 13px; font-weight: 650; }
.paper-market { z-index: 1; left: 13px; top: 49px; background: #edf3fa; transform: rotate(-14deg); }
.paper-tools { z-index: 2; right: 13px; top: 74px; background: #f1edf7; transform: rotate(13deg); }
.paper-parking { z-index: 3; right: 0; top: 218px; background: #fbf0dc; transform: rotate(-5deg); }
.paper-waste { z-index: 4; left: 40px; top: 194px; background: #eaf0de; transform: rotate(5deg); }
.collection-stamp { position: absolute; z-index: 5; top: 0; left: 47%; width: 94px; height: 94px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; background: var(--landing-paper); border: 1px solid var(--landing-line); border-radius: 50%; transform: rotate(10deg); font-size: 11px; line-height: 1.5; text-align: center; }
.collection-stamp svg { width: 18px; height: 18px; color: var(--ds-primary); }
.collection-index { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1px solid var(--landing-line); border-bottom: 1px solid var(--landing-line); }
.collection-index a { min-height: 72px; padding: 22px 20px; display: flex; align-items: center; gap: 16px; font-size: 14px; transition: background 180ms ease; }
.collection-index a + a { border-left: 1px solid var(--landing-line); }
.collection-index a:nth-child(5n+1) { border-left: 0; }
.collection-index a:nth-child(n+6) { border-top: 1px solid var(--landing-line); }
.collection-index a > span { font: 500 11px var(--ds-font-mono); color: var(--landing-muted); }
.collection-index svg { width: 14px; height: 14px; margin-left: auto; flex: none; }
.collection-index a:hover { background: var(--ds-primary-soft); }
.services { padding-top: 116px; }
.section-heading { display: flex; justify-content: space-between; align-items: end; gap: 24px; padding-bottom: 46px; }
.section-heading .eyebrow { margin-bottom: 16px; }
.section-heading h2 { margin: 0; font-size: clamp(26px, 3vw, 38px); font-weight: 650; line-height: 1.3; letter-spacing: -.055em; word-break: keep-all; }
.section-count { display: flex; flex-direction: column; align-items: end; font: 400 40px/1 var(--ds-font-mono); letter-spacing: -.05em; }
.section-count span { margin-top: 9px; font-size: 9px; letter-spacing: .06em; color: var(--landing-muted); }
.card { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; gap: 80px; padding: 62px 0; border-top: 1px solid var(--landing-line); scroll-margin-top: 28px; }
.card:nth-child(even) .project-info { grid-column: 2; grid-row: 1; }
.card:nth-child(even) .project-visual { grid-column: 1; grid-row: 1; }
.project-meta { display: flex; align-items: center; gap: 16px; margin: 0 0 23px; font-size: 12px; color: var(--landing-muted); }
.project-number { padding: 4px 8px; border: 1px solid var(--landing-line); border-radius: 4px; font: 500 11px/1.4 var(--ds-font-mono); color: var(--ds-primary); }
h3 { margin: 0 0 13px; color: var(--ds-primary); font-size: 17px; line-height: 1.4; font-weight: 600; letter-spacing: -.02em; }
.description { margin: 0; font-size: clamp(28px, 3vw, 40px); font-weight: 650; line-height: 1.4; letter-spacing: -.055em; word-break: keep-all; }
.project-summary { max-width: 27em; margin: 22px 0 0; color: var(--landing-muted); font-size: 15px; line-height: 1.85; letter-spacing: -.025em; word-break: keep-all; }
.features { display: flex; flex-direction: column; gap: 6px; margin: 20px 0 25px; padding: 0; list-style: none; font-size: 13px; line-height: 1.6; }
.features li { position: relative; padding-left: 18px; }
.features li::before { content: "↗"; position: absolute; left: 0; color: var(--ds-primary); }
.service-link { display: inline-flex; align-items: center; justify-content: space-between; gap: 32px; min-height: 46px; padding: 12px 16px; border-radius: var(--ds-radius-control); color: var(--ds-on-primary); background: var(--ds-primary); font-size: 14px; font-weight: 600; transition: background 180ms ease; }
.service-link svg { width: 16px; height: 16px; transition: transform 180ms ease; }
.service-link:hover svg { transform: translate(2px, -2px); }
.service-note { margin: 13px 0 0; color: var(--landing-muted); font-size: 12px; line-height: 1.7; word-break: keep-all; }
.project-visual { position: relative; display: flex; flex-direction: column; justify-content: space-between; min-height: 420px; padding: 25px; border: 1px solid rgb(30 43 35 / 8%); border-radius: 5px; overflow: hidden; }
.project-visual::before { content: ""; position: absolute; inset: 13px; border: 1px solid rgb(30 43 35 / 9%); pointer-events: none; }
.waste-visual { background: var(--landing-moss); color: #3c5735; }
.market-visual { background: var(--landing-sky); color: #365675; }
.tools-visual { background: var(--landing-lilac); color: #5c4c73; }
.parking-visual { background: var(--landing-sand); color: #775b34; }
.visual-heading { display: flex; justify-content: space-between; gap: 10px; font: 500 9px/1.5 var(--ds-font-mono); letter-spacing: .06em; }
.visual-heading > span { white-space: nowrap; }
.project-object { width: calc(100% + 34px); min-height: 280px; margin: 0 -17px; transition: transform 400ms ease; }
.visual-note { position: relative; display: flex; align-items: center; gap: 8px; align-self: start; padding: 8px 10px; background: rgb(255 254 249 / 75%); border: 1px solid rgb(30 43 35 / 8%); border-radius: 3px; box-shadow: 0 3px 4px rgb(30 43 35 / 4%); font-size: 11px; transform: rotate(-2deg); }
.note-dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.visual-corner { position: absolute; right: 26px; bottom: 25px; font-size: 27px; line-height: 1; }
.closing { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 36px; margin-top: 35px; padding: 58px 0 68px; border-top: 1px solid var(--landing-line); border-bottom: 1px solid var(--landing-line); }
.closing > svg { width: 60px; height: 60px; color: var(--ds-primary); }
.closing .eyebrow { margin-bottom: 12px; }
.closing h2 { margin: 0; font-size: 32px; font-weight: 550; line-height: 1.5; letter-spacing: -.045em; }
.closing h2 br { display: none; }
.closing > a { display: inline-flex; align-items: center; gap: 24px; min-height: 44px; font-size: 13px; }
.footer { padding: 30px 0 24px; }
.footer-brand { display: inline-block; font-size: clamp(80px, 15vw, 190px); font-weight: 700; letter-spacing: -.075em; line-height: 1.2; }
.footer-brand > .brand-dot { color: var(--ds-primary); }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-top: 20px; }
.footer-bottom > span { color: var(--landing-muted); font: 400 10px/1.6 var(--ds-font-mono); letter-spacing: .02em; }
.footer-bottom a { display: inline-flex; align-items: center; gap: 20px; min-height: 44px; font-size: 12px; }
.footer a:hover, .closing > a:hover { color: var(--ds-primary); }
.not-found { min-height: 65vh; padding: 100px 0; }
.not-found h1 { font-size: clamp(30px, 5vw, 56px); letter-spacing: -.05em; }
.not-found p { color: var(--landing-muted); line-height: 1.8; }
.not-found a { display: inline-flex; align-items: center; min-height: 44px; margin-top: 18px; padding: 14px 20px; border-radius: var(--ds-radius-control); background: var(--ds-primary); color: var(--ds-on-primary); }
@media (hover: hover) and (pointer: fine) {
  .hero-collection:hover .paper-market { transform: translate(-6px, -6px) rotate(-17deg); }
  .hero-collection:hover .paper-tools { transform: translate(6px, -5px) rotate(16deg); }
  .hero-collection:hover .paper-parking { transform: translate(5px, 6px) rotate(-3deg); }
  .hero-collection:hover .paper-waste { transform: translate(-4px, 5px) rotate(3deg); }
  .card:hover .project-object { transform: translateY(-6px) rotate(-1deg); }
}
@media (prefers-reduced-motion: no-preference) {
  .hero-copy { animation: settle-in 650ms ease both; }
  .hero-collection { animation: settle-in 800ms 80ms ease both; }
  @keyframes settle-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
}
@media (max-width: 1120px) {
  .page { width: calc(100% - 64px); }
  .header-caption { display: none; }
  .hero { min-height: 590px; }
  h1 { font-size: 84px; }
  .title-spark { width: 48px; height: 48px; }
  .hero-collection { height: 430px; }
  .paper-card { width: 184px; height: 205px; }
  .paper-card > svg { height: 137px; }
  .paper-number { font-size: 8px; }
  .paper-name { font-size: 12px; }
  .paper-market { left: 2px; top: 55px; }
  .paper-tools { right: 3px; top: 80px; }
  .paper-parking { right: 0; top: 200px; }
  .paper-waste { left: 20px; top: 176px; }
  .collection-stamp { width: 80px; height: 80px; left: 44%; }
  .collection-caption, .collection-footnote { font-size: 8px; }
  .collection-index a { padding: 20px 14px; gap: 12px; font-size: 13px; }
  .card { gap: 50px; }
  .project-visual { min-height: 380px; padding: 22px; }
  .project-object { min-height: 250px; }
  .description { font-size: 34px; }
  .project-summary { font-size: 14px; }
}
@media (min-width: 701px) and (max-width: 860px) {
  .hero { grid-template-columns: 1.1fr .9fr; }
  h1 { font-size: 68px; }
  .hero .eyebrow { font-size: 8px; }
  .hero-description { font-size: 15px; }
  .hero-collection { width: 350px; justify-self: end; margin-left: -50px; scale: .85; transform-origin: right center; }
  .card { gap: 28px; }
  .description { font-size: 29px; }
  .project-visual { min-height: 340px; padding: 19px; }
  .project-object { min-height: 220px; }
  .visual-heading > span:last-child, .visual-corner { display: none; }
  .collection-index { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .collection-index a { font-size: 13px; padding: 18px 16px; gap: 12px; }
  .collection-index a:nth-child(n) { border-left: 0; border-top: 0; }
  .collection-index a:nth-child(even) { border-left: 1px solid var(--landing-line); }
  .collection-index a:nth-child(n+3) { border-top: 1px solid var(--landing-line); }
}
@media (max-width: 700px) {
  .page { width: calc(100% - 40px); }
  .header { min-height: 80px; gap: 12px; }
  .brand { font-size: 22px; }
  .brand img { width: 30px; height: 30px; }
  .nav-link { font-size: 12px; gap: 14px; }
  .hero { grid-template-columns: minmax(0, 1fr); gap: 27px; min-height: auto; padding: 45px 0 35px; }
  .eyebrow { font-size: 9px; }
  h1 { font-size: clamp(64px, 13vw, 86px); }
  .title-spark { width: 44px; height: 44px; }
  .hero-description { margin: 22px 0; font-size: 15px; }
  .hero-link { min-height: 48px; font-size: 13px; }
  .hero-collection { width: 350px; max-width: 100%; height: 382px; justify-self: center; }
  .paper-card { width: 164px; height: 181px; padding: 10px; }
  .paper-card > svg { height: 117px; }
  .paper-name { font-size: 11px; }
  .paper-market { left: 13px; top: 42px; }
  .paper-tools { right: 12px; top: 59px; }
  .paper-parking { right: 7px; top: 182px; }
  .paper-waste { left: 22px; top: 156px; }
  .collection-stamp { width: 70px; height: 70px; left: 43%; font-size: 10px; }
  .collection-caption, .collection-footnote { font-size: 7px; }
  .collection-orbit { inset: 61px 0 29px; }
  .collection-index { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .collection-index a { min-height: 62px; padding: 14px 12px; font-size: 12px; }
  .collection-index a:nth-child(n) { border-left: 0; border-top: 0; }
  .collection-index a:nth-child(even) { border-left: 1px solid var(--landing-line); }
  .collection-index a:nth-child(n+3) { border-top: 1px solid var(--landing-line); }
  .services { padding-top: 74px; }
  .section-heading { padding-bottom: 30px; gap: 16px; }
  .section-heading h2 { font-size: 26px; }
  .section-count { font-size: 30px; }
  .card { grid-template-columns: minmax(0, 1fr); gap: 30px; padding: 36px 0 40px; }
  .card:nth-child(even) .project-info, .card:nth-child(even) .project-visual { grid-column: auto; grid-row: auto; }
  .description { font-size: 33px; }
  .project-summary { font-size: 14px; }
  .project-visual { min-height: 305px; padding: 22px; }
  .project-object { min-height: 205px; }
  .visual-heading { font-size: 8px; }
  .visual-note { font-size: 10px; }
  .visual-corner { font-size: 22px; }
  .closing { grid-template-columns: auto 1fr; gap: 20px; padding: 38px 0; }
  .closing > svg { width: 38px; height: 38px; }
  .closing h2 { font-size: 27px; }
  .closing h2 br { display: block; }
  .closing > a { grid-column: 2; }
  .footer-brand { font-size: 23vw; }
  .footer-bottom > span { font-size: 8px; line-height: 1.8; }
  .footer-bottom a { gap: 8px; font-size: 11px; flex: none; }
}
@media (max-width: 359px) {
  .page { width: calc(100% - 32px); }
  .brand { font-size: 20px; }
  .nav-link { font-size: 11px; gap: 8px; }
  h1 { font-size: 62px; }
  .hero-collection { width: 288px; height: 354px; }
  .paper-card { width: 146px; height: 167px; }
  .paper-card > svg { height: 105px; }
  .paper-market { left: 7px; }
  .paper-tools { right: 6px; }
  .paper-parking { right: 0; top: 167px; }
  .paper-waste { left: 8px; top: 144px; }
  .paper-name { font-size: 10px; }
  .collection-caption { font-size: 6px; }
  .collection-footnote { left: 10px; }
  .collection-stamp { left: 41%; }
  .collection-index a { font-size: 11px; padding: 14px 9px; }
  .section-heading h2 { font-size: 23px; }
  .description { font-size: 30px; }
  .project-visual { min-height: 276px; padding: 21px; }
  .project-object { min-height: 185px; }
  .visual-heading > span:last-child, .visual-corner { display: none; }
}
@media (forced-colors: active) {
  .paper-card, .project-visual, .collection-index, .card { border-color: CanvasText; }
  .hero-link, .service-link, .not-found a { color: ButtonText; background: ButtonFace; border: 1px solid ButtonText; }
}

/* Shared operational pages keep the hub shell and its existing design tokens. */
.footer-nav, .document-nav { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 24px; }
.document-nav a { display: inline-flex; min-height: 44px; align-items: center; font-size: var(--ds-text-sm); }
.document-nav a[aria-current="page"] { color: var(--ds-primary); text-decoration: underline; text-underline-offset: 5px; }
.document { max-width: 860px; margin: 0 auto; padding: 64px 0 72px; font-size: var(--ds-text-base); line-height: 1.85; overflow-wrap: anywhere; }
.document-heading { margin-bottom: 32px; }
.document-heading .eyebrow { margin-bottom: 16px; }
.document h1 { font-size: clamp(32px, 5vw, 48px); line-height: 1.25; letter-spacing: -.045em; }
.document h2 { margin: 0 0 16px; font-size: clamp(22px, 3vw, 28px); line-height: 1.45; letter-spacing: -.025em; color: var(--ds-ink); word-break: keep-all; }
.document p { margin: 0 0 16px; }
.document p:last-child, .document ul:last-child, .document ol:last-child { margin-bottom: 0; }
.document-lead { margin-top: 20px !important; color: var(--landing-muted); font-size: var(--ds-text-lg); }
.document-date { color: var(--landing-muted); font-size: var(--ds-text-sm); }
.document-note { padding: 24px; border: 1px solid var(--landing-line); border-radius: var(--ds-radius-card); background: var(--landing-paper); }
.document a { color: var(--ds-primary); text-decoration: underline; text-underline-offset: 3px; }
.document a:hover { color: var(--ds-primary-hover); }
.document-index, .document-service-index { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.document-index { margin-top: 24px; }
.document-index a, .document-service-index a { display: inline-flex; min-height: 44px; align-items: center; }
.document-section { padding-top: 34px; margin-top: 34px; border-top: 1px solid var(--landing-line); scroll-margin-top: 24px; }
.document-section-first { margin-top: 0; }
.document ul, .document ol { margin: 0 0 16px; padding-left: 24px; }
.document li + li { margin-top: 12px; }
.document-provider-links li + li { margin-top: 8px; }
.document-contact { display: grid; gap: 8px; padding: 24px; margin: 24px 0; border: 1px solid var(--landing-line); border-radius: var(--ds-radius-card); background: var(--landing-paper); }
.document-contact > span { color: var(--landing-muted); font-size: var(--ds-text-sm); }
.document-contact > a { width: fit-content; min-height: 44px; display: inline-flex; align-items: center; font-size: clamp(20px, 4vw, 28px); font-weight: 650; }
.document .document-action { display: inline-flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 44px; padding: 10px 16px; background: var(--ds-primary); color: var(--ds-on-primary); border-radius: var(--ds-radius-control); text-decoration: none; }
.document .document-action:hover { background: var(--ds-primary-hover); }
.document-footer { border-top: 1px solid var(--landing-line); }
@media (max-width: 700px) {
  .footer-bottom { align-items: flex-start; flex-direction: column; gap: 12px; }
  .footer-nav { gap: 4px 20px; }
  .document-nav { gap: 4px 16px; }
  .document-nav a { font-size: var(--ds-text-xs); }
  .document { padding: 40px 0 48px; }
  .document-note, .document-contact { padding: 20px; }
  .document-section { padding-top: 28px; margin-top: 28px; }
  .document-index, .document-service-index { gap: 4px 16px; }
}
@media (max-width: 359px) { .document-nav { gap: 2px 10px; } .document-nav a { font-size: var(--ds-text-xs); } }
@media (forced-colors: active) { .document .document-action { background: ButtonFace; color: ButtonText; border: 1px solid ButtonText; } }