/* ── Homepage layout ── */
html { color-scheme: dark; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { background: var(--surface); color: var(--ink); font-family: var(--font-sans); }
.hp-wrap { max-width: var(--container-max); margin: 0 auto; padding-inline: var(--space-8); }
.hp-sec { padding-block: var(--space-24); scroll-margin-top: 76px; }
.hp-sec.is-band { background: var(--surface-sunken); border-block: 1px solid var(--line); }
.hp-sec + .hp-sec:not(.is-band) { border-top: 1px solid var(--line); }
.is-band + .hp-sec { border-top: 0 !important; }
.hp-sec.is-cont { border-top: 0 !important; padding-top: var(--space-8); }
.hp-sec.is-band:has(+ .is-cont) { border-bottom: 0; }
.hp-head { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: var(--space-4) var(--space-12); align-items: end; margin-bottom: var(--space-12); }
.hp-head > div { display: flex; flex-direction: column; gap: var(--space-4); }
.hp-head .dsk-lead { font-size: 18px; line-height: 28px; }
.hp-stack { display: flex; flex-direction: column; gap: var(--space-16); }
.hp-sub { display: flex; flex-direction: column; gap: var(--space-6); scroll-margin-top: 96px; }
.hp-sub-h { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-3) var(--space-8); }
.hp-sub-h h3 { margin: 0; font-family: var(--font-display); font-size: 24px; line-height: 30px; font-weight: 800; text-wrap: balance; }
.hp-sub-h p { margin: 0; max-width: 36em; color: var(--ink-muted); font-size: 15px; line-height: 23px; }
.hp-level { font-size: 11px; line-height: 16px; letter-spacing: .2em; text-transform: uppercase; font-weight: 700; color: var(--build); }
.hp-nav { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; }
.hp-nav .dsk-sitenav { background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.hp-nav .dsk-sitenav-bar, .hp-nav .dsk-mega { max-width: var(--container-max); margin: 0 auto; box-sizing: border-box; }
.hp-nav .dsk-mega { left: 0; right: 0; margin-inline: auto; width: min(100%, var(--container-max)); border: 1px solid var(--line); border-top: 0; border-radius: 0 0 var(--radius-sm) var(--radius-sm); }
.hp-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-8); align-items: start; }
.hp-field { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--space-8); align-items: start; }
.hp-field-events { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
.hp-field-events .hp-link { grid-column: 1 / -1; }
.hp-field-events { display: flex; flex-direction: column; gap: var(--space-4); }
.hp-field-events .dsk-event { grid-template-columns: 64px minmax(0, 1fr); }
@media (max-width: 720px) { .hp-field-events { grid-template-columns: 1fr; } }
.hp-link { color: var(--ink); font-weight: 600; font-size: 15px; text-decoration: none; display: inline-flex; gap: var(--space-2); align-items: center; }
.hp-link:hover { color: var(--accent); }
.hp-cta { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: var(--space-6) var(--space-12); align-items: end; }
.hp-cta > div:first-child { display: flex; flex-direction: column; gap: var(--space-4); }
.hp-cta-r { display: flex; flex-direction: column; gap: var(--space-6); align-items: flex-start; }
.hp-head.is-solo { grid-template-columns: minmax(0, 1fr); }
.hp-anchor { scroll-margin-top: 96px; }
.hp-field-posts { display: flex; flex-direction: column; gap: var(--space-4); }
.hp-cta-models { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.hp-cta-model { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-6); border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-raised); }
.hp-cta-model b { font-family: var(--font-display); font-size: 20px; line-height: 26px; font-weight: 800; }
.hp-cta-model p { margin: 0; color: var(--ink-muted); font-size: 15px; line-height: 23px; flex: 1; }
.hp-cta-model .dsk-btn { align-self: flex-start; }
.hp-foot { background: var(--surface-sunken); border-top: 1px solid var(--line); padding-block: var(--space-16) var(--space-8); }
.hp-foot-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: var(--space-8); }
.hp-foot-brand { display: flex; flex-direction: column; gap: var(--space-4); align-items: flex-start; }
.hp-foot-brand p { margin: 0; color: var(--ink-muted); font-size: 14px; line-height: 21px; max-width: 26em; }
.hp-foot-col { display: flex; flex-direction: column; gap: var(--space-2); }
.hp-foot-col b { font-size: 11px; line-height: 16px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: var(--space-2); }
.hp-foot-col a { color: var(--ink-muted); text-decoration: none; font-size: 14px; line-height: 22px; }
.hp-foot-col a:hover { color: var(--ink); }
.hp-foot-base { margin-top: var(--space-12); padding-top: var(--space-6); border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-3); font-size: 12px; color: var(--ink-faint); }
.hp-note { font-size: 12px; color: var(--ink-faint); }
@media (max-width: 960px) {
  .hp-wrap { padding-inline: var(--space-4); }
  .hp-sec { padding-block: var(--space-16); scroll-margin-top: 64px; }
  .hp-head, .hp-two, .hp-field, .hp-cta-models, .hp-cta { grid-template-columns: 1fr; }
  .hp-head { margin-bottom: var(--space-8); }
  .hp-foot-grid { grid-template-columns: 1fr 1fr; }
  .hp-foot-brand { grid-column: 1 / -1; }
  .hp-nav .dsk-sitenav-bar { padding-inline: var(--space-4); }
}
@media (max-width: 640px) { .hp-field .dsk-blog-grid { grid-template-columns: 1fr; } }
.hp-page-hero { display: flex; flex-direction: column; gap: var(--space-4); align-items: flex-start; max-width: 60rem; }
.hp-toolnav { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); }
.hp-toolnav a { padding: 8px 14px; border: 1px solid var(--line-strong); border-radius: var(--radius-pill); color: var(--ink); text-decoration: none; font-size: 14px; }
.hp-toolnav a:hover { border-color: var(--accent); color: var(--accent); }
.hp-os-prev { display: flex; flex-direction: column; gap: var(--space-8); padding: var(--space-6); border: 1px solid var(--line); border-radius: var(--radius-sm); }