/* SYOK site layer — shared by syok.group and every product site.
   Load after tokens.css and components.css. Uses semantic tokens only.
   What each block is and when to reuse it: see ../TEMPLATE.md.
   Written for this repository (not part of @syok/design). */

/* ---------------------------------------------------------------------------
   S1 Header: brand on the left, nav in the middle, actions on the right.
   The theme switch sits in the actions on every SYOK site.
   --------------------------------------------------------------------------- */
.app-header .syok-mark svg { height: 24px; }
.app-header-actions { gap: var(--space-2); }
.theme-switch .icon { width: 14px; height: 14px; }
@media (max-width: 599px) { .theme-switch .theme-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } }

/* ---------------------------------------------------------------------------
   S2 Hero: the first screen. .site-hero-mark for the master mark (group site),
   a .syok-lockup for a product site.
   --------------------------------------------------------------------------- */
.site-hero { padding-block: var(--space-8); }
.site-hero .display { margin-block: var(--space-3) var(--space-4); max-width: 18ch; }
.site-hero-mark svg { height: clamp(56px, 12vw, 96px); }
.site-hero .tagline { margin-top: var(--space-4); font-family: var(--font-display); font-size: var(--text-xl); font-weight: var(--weight-bold); }
.site-hero .lead { margin-top: var(--space-5); max-width: var(--measure); }
.site-hero .actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }

/* ---------------------------------------------------------------------------
   S3 Feature cards: icon, title, one or two lines. Use inside .auto-grid.
   --------------------------------------------------------------------------- */
.feature .icon-wrap { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: var(--radius-md); background: var(--color-secondary-soft); color: var(--color-secondary); }
.feature h3 { font-size: var(--text-lg); }
.feature p { color: var(--color-text-muted); font-size: var(--text-sm); }

/* ---------------------------------------------------------------------------
   S4 Product card: a product's lockup, one line, a status badge.
   --------------------------------------------------------------------------- */
.product-card { display: grid; gap: var(--space-4); max-width: 40rem; }
.product-card .syok-lockup svg { height: 32px; }
.product-card p { color: var(--color-text-muted); }

/* ---------------------------------------------------------------------------
   S5 Term list: a short bold term and a muted line, in rows.
   --------------------------------------------------------------------------- */
.term-list { display: grid; gap: var(--space-3); padding: 0; margin: 0; list-style: none; max-width: var(--measure); }
.term-list li { display: grid; grid-template-columns: 88px 1fr; gap: var(--space-3); align-items: baseline; }
.term-list b { font-family: var(--font-display); }
.term-list span { color: var(--color-text-muted); font-size: var(--text-sm); }

/* ---------------------------------------------------------------------------
   S6 Checklist: promises and commitments, each with a green tick.
   --------------------------------------------------------------------------- */
.checklist { display: grid; gap: var(--space-3); padding: 0; margin: 0; list-style: none; max-width: var(--measure); }
.checklist li { display: flex; gap: var(--space-3); align-items: flex-start; }
.checklist svg { flex-shrink: 0; width: 20px; height: 20px; margin-top: 2px; color: var(--color-success); }

/* ---------------------------------------------------------------------------
   S7 Steps: a numbered "how it works" list.
   --------------------------------------------------------------------------- */
.steps { display: grid; gap: var(--space-4); counter-reset: step; max-width: var(--measure); padding: 0; margin: 0; list-style: none; }
.steps li { display: grid; grid-template-columns: 40px 1fr; gap: var(--space-3); align-items: start; }
.steps li::before { counter-increment: step; content: counter(step); display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--color-surface-muted); font-family: var(--font-display); font-weight: var(--weight-bold); }
.steps h3 { font-size: var(--text-base); }
.steps p { color: var(--color-text-muted); font-size: var(--text-sm); }

/* ---------------------------------------------------------------------------
   S8 Footer: brand strip, mark or lockup with one line, copyright.
   --------------------------------------------------------------------------- */
.site-footer .syok-mark svg, .site-footer .syok-lockup svg { height: 32px; }

/* ---------------------------------------------------------------------------
   S9 Key facts: a row of short numbers under the hero.
   --------------------------------------------------------------------------- */
.facts { display: flex; flex-wrap: wrap; gap: var(--space-5); margin-top: var(--space-6); font-size: var(--text-sm); color: var(--color-text-muted); }
.facts b { display: block; font-family: var(--font-display); font-size: var(--text-xl); color: var(--color-text); }