/* The public site's layer on the platform tokens. Selective motion: one
   entrance on the hero, honoured only when the reader has not asked for
   reduced motion (app.css turns every transition and animation off then). */
.site .site-header.public { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5); }
.site .site-header.public nav { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); align-items: center; }
.site .site-header.public nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: 0.3em; }
.site .site-header.public .cta { border: 1px solid var(--border-strong); border-radius: var(--radius-sm); padding: var(--space-1) var(--space-3); }
.site .site-header.public .login { color: var(--text-muted); }
.content.public { max-width: 56rem; }
.hero { padding-block: var(--space-8) var(--space-6); }
.hero h1 { font-size: var(--font-size-3xl); max-width: 40ch; }
.hero .lede, .content.public .lede { font-size: var(--font-size-lg); max-width: 60ch; }
.kicker { text-transform: uppercase; letter-spacing: var(--font-tracking-wide, 0.06em); font-size: var(--font-size-sm); color: var(--text-muted); margin-block-end: var(--space-2); }
.band { padding-block: var(--space-6); border-block-start: 1px solid var(--border); }
.band h2 { margin-block-start: 0; }
.cta-row { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-block: var(--space-4); }
.button { display: inline-block; padding: var(--space-2) var(--space-4); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--text); color: var(--surface); text-decoration: none; }
.button.quiet { background: var(--surface); color: var(--text); }
@media (hover: hover) { .button:hover { background: var(--text-muted); color: var(--surface); transform: translateY(-1px); } .button.quiet:hover { background: var(--surface-sunken); color: var(--text); } }
.button:active { transform: translateY(1px); }
.journey li, .steps li { margin-block: var(--space-3); }
.resources li { margin-block: var(--space-2); }
.enquiry .hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.hero h1, .hero .lede { animation: rise var(--motion-duration-slow) var(--motion-easing-entrance) both; }
.hero .lede { animation-delay: var(--motion-duration-fast); }