/* ATask public site — calm Zysys surfaces, controls, spacing and typography. */
@font-face {
  font-family: 'Ioskeley Mono';
  src: url('https://ahatem.github.io/IoskeleyMono/fonts/IoskeleyMono-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Ioskeley Mono';
  src: url('https://ahatem.github.io/IoskeleyMono/fonts/IoskeleyMono-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Defaults maintain system tokens and readable keyboard focus. */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: var(--font-sans); font-size: var(--text-body); line-height: var(--leading-prose); color: var(--color-text); background: var(--color-bg-page); -webkit-font-smoothing: antialiased; }
a { color: var(--color-accent); text-decoration: none; }
a:hover { color: var(--color-accent-hover); }
button { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }
::selection { background: var(--color-accent-bg); color: var(--color-text); }
[hidden] { display: none !important; }
[id] { scroll-margin-top: 100px; }
strong { font-weight: var(--weight-semibold); }
code, pre, .mono, .brand-glyph, .brand-text, .dependency-code { font-family: var(--font-mono); }
code { font-size: .96em; }
h1, h2, h3, p { margin: 0; }
.shell { width: calc(100% - (var(--layout-gutter) * 2)); max-width: var(--layout-max-width); margin-inline: auto; }
.skip-link { position: absolute; top: -100px; left: var(--space-24); z-index: 100; background: var(--color-surface); border: 2px solid var(--color-accent); padding: var(--space-10) var(--space-16); border-radius: var(--radius-control); }
.skip-link:focus { top: var(--space-12); }

/* Header borrows the system's quiet navigation and control borders. */
.site-header { background: var(--color-surface); border-bottom: 1px solid var(--color-border); position: relative; z-index: 10; }
.nav-layout { min-height: 70px; }
.wordmark { color: var(--color-text); flex-shrink: 0; }
.wordmark:hover { color: var(--color-text); }
.brand-glyph { display: grid; place-items: center; width: 34px; height: 34px; border-radius: var(--radius-control); background: var(--color-accent); color: var(--color-on-accent); font-size: 16px; font-weight: 700; line-height: 1; letter-spacing: -.08em; padding-right: 2px; }
.brand-text { font-size: 22px; font-weight: 700; letter-spacing: -.045em; line-height: 1; }
.brand-product { color: var(--color-text-subtle); font-size: var(--text-meta); font-weight: var(--weight-medium); border-left: 1px solid var(--color-border); padding-left: var(--space-12); }
.desktop-navigation a { color: var(--color-text-secondary); font-size: var(--text-body); font-weight: var(--weight-medium); padding: var(--space-8) 0; }
.desktop-navigation a:hover { color: var(--color-accent); }
.github-link { border: 1px solid var(--color-border-control); color: var(--color-accent); padding: var(--space-8) var(--space-14); border-radius: var(--radius-control); font-weight: var(--weight-semibold); font-size: var(--text-body); display: inline-flex; align-items: center; gap: var(--space-8); white-space: nowrap; }
.github-link:hover { background: var(--color-accent-bg); }
.menu-toggle { display: none; background: var(--color-surface); border: 1px solid var(--color-border-control); border-radius: var(--radius-control); width: 38px; height: 36px; align-items: center; justify-content: center; cursor: pointer; }
.menu-bars, .menu-bars::before, .menu-bars::after { display: block; position: relative; width: 17px; height: 2px; background: var(--color-text-secondary); }
.menu-bars::before, .menu-bars::after { content: ''; position: absolute; left: 0; }
.menu-bars::before { top: -6px; }.menu-bars::after { top: 6px; }
.mobile-navigation { border-top: 1px solid var(--color-border); background: var(--color-surface); padding: var(--space-8) var(--layout-gutter) var(--space-16); }
.mobile-navigation a { display: block; padding: var(--space-12) 0; border-bottom: 1px solid var(--color-row-divider); font-weight: var(--weight-medium); color: var(--color-text-secondary); }

/* Hero: one white surface, confident black type, and an honest CLI example. */
.hero-section { padding-top: 44px; }
.hero-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-card); padding: 48px; align-items: center; }
.hero-copy { min-width: 0; }
.eyebrow, .section-kicker, .card-index, .step-name, .check-label, .code-header, .budget-name { color: var(--color-text-muted); font-size: var(--text-meta); font-weight: var(--weight-semibold); }
.eyebrow { margin-bottom: var(--space-16); color: var(--color-accent); }
h1 { font-size: clamp(34px, 3.8vw, 49px); line-height: 1.15; letter-spacing: -.043em; font-weight: 600; max-width: 650px; }
h1 span { color: var(--color-accent); }
.hero-lead { font-size: 16px; line-height: 1.65; color: var(--color-text-secondary); max-width: 560px; margin-top: var(--space-24); }
.hero-lead strong { color: var(--color-text); }
.hero-detail { color: var(--color-text-muted); margin-top: var(--space-12); font-size: 14px; max-width: 570px; }
.hero-actions { margin-top: var(--space-28); }
.button { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-16); min-height: 40px; padding: var(--space-10) var(--space-16); border-radius: var(--radius-control); font-size: var(--text-body); font-weight: var(--weight-semibold); border: 1px solid transparent; cursor: pointer; transition: background .15s ease, border-color .15s ease; }
.button-primary { color: var(--color-on-accent); background: var(--color-accent); border-color: var(--color-accent); }
.button-primary:hover { background: var(--color-accent-hover); color: var(--color-on-accent); border-color: var(--color-accent-hover); }
.button-secondary { background: var(--color-surface); color: var(--color-text-secondary); border-color: var(--color-border-control); }
.button-secondary:hover { background: var(--color-surface-subtle); color: var(--color-text); }
.hero-meta { margin-top: var(--space-28); color: var(--color-text-muted); font-size: var(--text-meta); display: flex; flex-wrap: wrap; gap: var(--space-10); }
.hero-meta [aria-hidden] { color: var(--color-text-faint); }
.code-window { border: 1px solid var(--color-border); border-radius: var(--radius-card); overflow: hidden; background: var(--color-surface-subtle); min-width: 0; align-self: stretch; display: flex; flex-direction: column; }
.code-header { padding: var(--space-12) var(--space-16); border-bottom: 1px solid var(--color-border); background: var(--color-surface); }
.code-header-side { font-weight: var(--weight-regular); color: var(--color-text-subtle); white-space: nowrap; }
.code-body { padding: var(--space-20) var(--space-20); font-size: 12.5px; line-height: 1.85; color: var(--color-text); flex: 1; overflow-x: auto; white-space: nowrap; }
.code-comment { color: var(--color-text-subtle); }
.code-dollar { color: var(--color-text-subtle); }.command-name { color: var(--color-accent); font-weight: 700; }
.code-space { height: var(--space-12); }
.code-footer { border-top: 1px solid var(--color-border); padding: var(--space-10) var(--space-16); font-size: var(--text-meta); color: var(--color-text-muted); }
.footer-state { color: var(--color-success-text); white-space: nowrap; display: inline-flex; align-items: center; gap: var(--space-8); }
.status-dot { width: 7px; height: 7px; background: var(--color-success); border-radius: var(--radius-pill); display: inline-block; }
.hero-claim { display: flex; align-items: center; gap: var(--space-12); margin-top: var(--space-16); padding: 0 var(--space-8); color: var(--color-text-secondary); font-size: var(--text-body); }
.claim-rule { width: 3px; height: 22px; flex: none; background: var(--color-accent); border-radius: var(--radius-bar); }

/* Interior cards mirror the supplied Zysys admin component language. */
.page-section { margin-top: 72px; }
.section-heading { margin-bottom: var(--space-20); }
.section-heading > div { max-width: 680px; }
.section-heading > p { max-width: 425px; color: var(--color-text-secondary); font-size: 14px; line-height: var(--leading-prose); padding-top: var(--space-16); }
.section-kicker { margin-bottom: var(--space-8); color: var(--color-accent); }
h2 { font-size: 27px; line-height: 1.3; letter-spacing: var(--tracking-title); font-weight: var(--weight-semibold); }
h3 { font-size: var(--text-section-title); line-height: 1.4; font-weight: var(--weight-semibold); }
.surface-card { border: 1px solid var(--color-border); background: var(--color-surface); border-radius: var(--radius-card); }
.reason-card { padding: var(--space-24); min-height: 248px; display: flex; flex-direction: column; }
.card-index { color: var(--color-accent); margin-bottom: var(--space-16); }
.reason-card h3 { margin-bottom: var(--space-10); }
.reason-card p { color: var(--color-text-secondary); flex: 1; }
.reason-card .card-foot { border-top: 1px solid var(--color-row-divider); margin-top: var(--space-20); padding-top: var(--space-12); color: var(--color-text-muted); font-size: var(--text-meta); }
.reason-card code, .step code, .example-card code, .check-card code, .install-section code { color: var(--color-text); font-size: .94em; }

/* Stepper and dependencies communicate behavior without presenting a dashboard. */
.execution-card { overflow: hidden; }
.steps-grid { align-items: stretch; }
.step { padding: var(--space-24); position: relative; display: flex; flex-direction: column; gap: var(--space-10); }
.step:not(:first-child) { border-left: 1px solid var(--color-row-divider); }
.step-head { display: flex; gap: var(--space-10); align-items: center; margin-bottom: var(--space-4); }
.step-number { display: inline-grid; place-items: center; width: 29px; height: 29px; border: 1px solid var(--color-border-control); border-radius: var(--radius-control); font-family: var(--font-mono); font-size: var(--text-mono-sm); font-weight: 700; color: var(--color-accent); }
.step-name { font-weight: var(--weight-semibold); }
.step h3 { font-size: var(--text-section-title); }
.step p { color: var(--color-text-secondary); line-height: var(--leading-prose); flex: 1; }
.step-command { display: inline-block; margin-top: var(--space-12); color: var(--color-accent) !important; white-space: nowrap; overflow-x: auto; font-size: var(--text-mono-sm) !important; }
.dependency-note { border-top: 1px solid var(--color-border); background: var(--color-surface-subtle); padding: var(--space-16) var(--space-24); }
.dependency-note p { color: var(--color-text-secondary); max-width: 690px; }.dependency-note strong { color: var(--color-text); }
.dependency-code { color: var(--color-accent); border: 1px solid var(--color-border); background: var(--color-surface); border-radius: var(--radius-badge); font-size: var(--text-mono-sm); padding: var(--space-8) var(--space-10); white-space: nowrap; }

/* Proof declarations show the actual CLI grammar and the two mandatory categories. */
.check-card { padding: var(--space-24); min-width: 0; }
.check-head { margin-bottom: var(--space-16); }
.check-label { color: var(--color-accent); }
.required-label { color: var(--color-text-muted); font-size: var(--text-meta); border: 1px solid var(--color-border); background: var(--color-surface-subtle); border-radius: var(--radius-badge); padding: var(--space-4) var(--space-8); }
.check-card h3 { margin-bottom: var(--space-8); }
.check-card p { color: var(--color-text-secondary); min-height: 48px; }
.check-card pre { margin: var(--space-20) 0 var(--space-16); overflow-x: auto; border: 1px solid var(--color-border); border-radius: var(--radius-control); background: var(--color-surface-subtle); color: var(--color-text); padding: var(--space-12) var(--space-14); font-size: var(--text-mono); line-height: 1.6; }
.check-foot { color: var(--color-text-muted); font-size: var(--text-meta); border-top: 1px solid var(--color-row-divider); padding-top: var(--space-12); }
.check-foot strong { color: var(--color-text); }
.example-card { margin-top: var(--space-16); overflow: hidden; }
.example-heading { padding: var(--space-20) var(--space-24) var(--space-14); }
.example-heading p { margin-top: var(--space-6); color: var(--color-text-secondary); }
.example-card pre { margin: 0 var(--space-24) var(--space-24); background: var(--color-surface-subtle); border: 1px solid var(--color-border); border-radius: var(--radius-control); padding: var(--space-16); overflow-x: auto; line-height: 1.8; font-size: var(--text-mono); }
.copy-action { color: var(--color-accent); background: var(--color-surface); border: 1px solid var(--color-border-control); border-radius: var(--radius-control); padding: var(--space-6) var(--space-12); font-size: var(--text-meta); font-weight: var(--weight-semibold); white-space: nowrap; cursor: pointer; }
.copy-action:hover { background: var(--color-accent-bg); }
.budget-line { border-top: 1px solid var(--color-border); padding-top: var(--space-16); margin-top: var(--space-20); color: var(--color-text-secondary); font-size: var(--text-body); }
.budget-line strong { color: var(--color-text); font-variant-numeric: tabular-nums; }
.budget-line a { margin-left: auto; font-weight: var(--weight-semibold); }
.qualification { color: var(--color-text-muted); font-size: var(--text-meta); margin-top: var(--space-14); }

/* Plain row comparisons explain roles rather than claiming competitors have no tests. */
.comparison-card { overflow: hidden; }
.comparison-row { padding: var(--space-16) var(--space-24); align-items: center; }
.comparison-row:not(:last-child) { border-bottom: 1px solid var(--color-border); }
.comparison-row div a { font-weight: var(--weight-semibold); font-size: var(--text-subsection-title); }
.comparison-quiet { display: block; color: var(--color-text-muted); font-size: var(--text-meta); margin-top: var(--space-4); }
.comparison-row p { color: var(--color-text-secondary); }
.comparison-row strong { color: var(--color-text); }

/* Install panel uses the shared card/header tokens; source and action stay separate. */
.install-section { margin-bottom: 84px; }
.install-card { padding: 0; overflow: hidden; }
.install-left { padding: var(--space-28); display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: var(--space-14); }
.install-left h3 { font-size: 19px; }.install-left p { color: var(--color-text-secondary); }
.install-left .button { margin-top: var(--space-8); }
.install-attributes { display: flex; flex-wrap: wrap; gap: var(--space-8); }
.install-attributes span { background: var(--color-surface-subtle); border: 1px solid var(--color-border); border-radius: var(--radius-badge); padding: var(--space-4) var(--space-8); font-size: var(--text-meta); color: var(--color-text-secondary); }
.install-left .install-caveat { margin-top: var(--space-6); font-size: var(--text-meta); color: var(--color-text-muted); }
.install-code { background: var(--color-surface-subtle); border-left: 1px solid var(--color-border); min-width: 0; }
.install-code .code-header { background: var(--color-surface-subtle); }
.install-code pre { padding: var(--space-20); margin: 0; color: var(--color-text); overflow-x: auto; font-size: var(--text-mono-sm); line-height: 1.9; }
.install-code-foot { border-top: 1px solid var(--color-border); color: var(--color-text-muted); padding: var(--space-10) var(--space-16); font-size: var(--text-meta); }

/* Footer keeps data-light cues from the reference design system. */
.site-footer { border-top: 1px solid var(--color-border); background: var(--color-surface); }
.footer-layout { min-height: 80px; padding-block: var(--space-16); }
.footer-layout .brand-text { font-size: 19px; }
.footer-description, .footer-links { color: var(--color-text-muted); font-size: var(--text-meta); }
.footer-links a { color: var(--color-text-secondary); }
.footer-links a:hover { color: var(--color-accent); }

/* Compact breakpoints preserve readability and avoid hidden navigation. */
@media (max-width: 1120px) { .desktop-navigation { gap: var(--space-14); } .brand-product { display: none; } }
@media (max-width: 940px) { .desktop-navigation { display: none !important; }.menu-toggle { display: flex; } .hero-card { padding: var(--space-28); gap: var(--space-24); } }
@media (max-width: 767px) { .step:not(:first-child) { border-left: 0; border-top: 1px solid var(--color-row-divider); } .step { min-height: 0; }.check-card p { min-height: 0; } .section-heading > p { padding-top: 0; } }
@media (max-width: 640px) {
  .shell { width: calc(100% - (var(--space-16) * 2)); }
  .hero-section { padding-top: var(--space-20); }
  .hero-card { padding: var(--space-24); }
  .nav-layout { min-height: 62px; }
  .brand-glyph { width: 30px; height: 30px; }
  h1 { font-size: clamp(30px, 8vw, 40px); }
  h2 { font-size: 23px; }
  .hero-lead { font-size: 14px; line-height: var(--leading-prose); margin-top: var(--space-20); }
  .hero-meta { gap: var(--space-6); margin-top: var(--space-20); }
  .hero-actions .button { width: 100%; }
  .hero-actions { align-items: stretch; }
  .code-header-side { font-size: 10px; }
  .code-body { padding: var(--space-16); font-size: var(--text-mono-sm); }
  .page-section { margin-top: 52px; }
  .reason-card, .check-card { padding: var(--space-20); min-height: 0; }
  .step { padding: var(--space-20); }
  .dependency-note { padding: var(--space-16) var(--space-20); }
  .example-heading { padding: var(--space-20); }
  .example-card pre { margin: 0 var(--space-20) var(--space-20); }
  .comparison-row { padding: var(--space-20); }
  .install-left { padding: var(--space-20); }
  .install-code { border-left: none; border-top: 1px solid var(--color-border); }
  .install-code pre { padding: var(--space-16); }
  .footer-layout { align-items: flex-start; }
  .footer-description { display: none; }
  .budget-line a { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .button { transition: none; } }