/* Hermes landing. Tokens come from tokens.css (copied from brand/ at deploy). Flat surfaces, one accent, no shadows.
   Nav, hero with the live window replica, feature cards, the asc panel, get it, and a footer of round glyph buttons
   over the engraved wordmark. */
* { box-sizing: border-box; margin: 0; }
html { scroll-behavior: smooth; }
body { font-family: var(--font); font-size: var(--size-body); line-height: 24px; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; }
a { color: inherit; }
code { font-size: .9em; padding: 2px 6px; border-radius: 6px; background: var(--surface); }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--sp-5); }
.center { text-align: center; }

.btn { height: var(--control); padding: 0 var(--sp-5); border-radius: var(--r-pill); display: inline-flex; align-items: center; gap: var(--sp-2); font-weight: 600; font-size: 15px; text-decoration: none; transition: background var(--motion), color var(--motion); }
.btn-solid { background: var(--accent); color: var(--bg); }
.btn-solid:hover { background: color-mix(in srgb, var(--accent) 86%, var(--text)); }
.btn-ghost { background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--accent); }
.btn-ghost:hover { background: color-mix(in srgb, var(--accent) 18%, transparent); }
.btn:focus-visible, .icons a:focus-visible, .nav-brand:focus-visible, .nav-links a:focus-visible, .row:focus-visible, .tab:focus-visible { outline: 4px solid var(--ring); outline-offset: 2px; }

.nav { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: var(--sp-5); height: 64px; padding: 0 var(--sp-5); background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(20px); border-bottom: 1px solid var(--line); }
.nav-brand { display: flex; align-items: center; gap: var(--sp-2); font-weight: 700; text-decoration: none; }
.nav-brand img { border-radius: var(--r-icon); }
.nav-links { display: flex; gap: var(--sp-5); margin-left: auto; font-size: 15px; }
.nav-links a { text-decoration: none; color: var(--sub); }
.nav-links a:hover { color: var(--text); }

.hero { padding: var(--sp-9) 0 var(--sp-8); }
.kicker { font-size: 15px; color: var(--accent); font-weight: 600; margin-bottom: var(--sp-4); }
h1 { font-size: var(--size-display); line-height: 64px; letter-spacing: -0.03em; font-weight: 700; }
.lead { max-width: var(--measure); font-size: 20px; line-height: 28px; color: var(--sub); margin-top: var(--sp-5); }
.cta { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-6); }
.fine { margin-top: var(--sp-3); font-size: var(--size-footnote); color: var(--sub); }

/* the live window: same layout as the Mac app */
.demo-wrap { margin-top: var(--sp-8); }
.win { display: grid; grid-template-columns: 260px 1fr; height: 560px; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); background: var(--bg); color: var(--text); font-size: 13px; line-height: 18px; text-align: left; }
.win-side { display: flex; flex-direction: column; padding: var(--sp-4); background: var(--surface); border-right: 1px solid var(--line); }
.lights { display: flex; gap: var(--sp-2); }
.lights i { width: 12px; height: 12px; border-radius: 50%; background: var(--line); }
.welcome { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-2); text-align: center; }
.welcome img { border-radius: var(--r-icon); margin-bottom: var(--sp-2); }
.welcome b { font-size: 17px; }
.welcome span { color: var(--sub); }
.side-foot { display: flex; justify-content: space-between; font-size: 11px; color: var(--sub); }
.side-foot a { color: var(--accent); text-decoration: none; }
.win-main { display: flex; flex-direction: column; min-width: 0; }
.bar { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3); border-bottom: 1px solid var(--line); }
.bar button { border: 0; background: none; color: var(--sub); font: inherit; cursor: pointer; padding: var(--sp-1); }
.search { flex: 1; height: 32px; border: 0; border-radius: var(--r-pill); padding: 0 var(--sp-3); background: var(--surface); color: var(--text); font: inherit; }
.list { overflow-y: auto; padding: var(--sp-2) 0; }
.row { display: flex; align-items: center; gap: var(--sp-3); width: calc(100% - 16px); margin: 0 var(--sp-2); padding: var(--sp-2); border: 0; border-radius: var(--r-row); background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; transition: background .12s ease-out; }
.row:hover { background: var(--surface); }
.tile { flex: none; display: grid; place-items: center; border-radius: var(--r-icon); background: var(--surface); color: var(--accent); font-weight: 600; }
.row:hover .tile { background: var(--bg); }
.row b { display: block; font-size: 14px; }
.ver { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 500; color: var(--sub); }
.dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.tabs { display: flex; gap: 2px; margin-left: auto; padding: 2px; border-radius: var(--r-pill); background: var(--surface); flex-wrap: wrap; }
.tab { border: 0; height: 26px; padding: 0 var(--sp-3); border-radius: var(--r-pill); background: none; color: var(--sub); font: inherit; cursor: pointer; }
.tab[aria-selected="true"] { background: var(--bg); color: var(--text); }
.pane { padding: var(--sp-5); overflow-y: auto; display: grid; gap: var(--sp-4); align-content: start; }
.pane small { display: block; font-size: 11px; color: var(--sub); }
.next { display: flex; align-items: center; gap: var(--sp-2); }
.links { display: flex; gap: var(--sp-3); }
.links a { color: var(--accent); text-decoration: none; }
.demo-hint { margin-top: var(--sp-3); font-size: var(--size-footnote); color: var(--sub); text-align: center; }

.sec { padding: var(--sp-9) 0; }
.field { background: var(--surface); }
.sec-head { max-width: var(--measure); margin-bottom: var(--sp-7); }
h2 { font-size: var(--size-title); line-height: 40px; letter-spacing: -0.02em; font-weight: 700; }
.sec-head p, .body { color: var(--sub); margin-top: var(--sp-3); max-width: var(--measure); }
.center .body { margin-left: auto; margin-right: auto; }
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); }
.card { padding: var(--sp-5); border-radius: var(--r-card); background: var(--surface); }
.card h3 { font-size: var(--size-headline); line-height: 28px; margin: var(--sp-3) 0 var(--sp-2); }
.card p { color: var(--sub); font-size: 15px; line-height: 22px; }
.ic { width: 32px; height: 32px; fill: none; stroke: var(--accent); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-7); align-items: center; }
.two > * { min-width: 0; }
.term { border-radius: var(--r-group); background: var(--bg); border: 1px solid var(--line); padding: var(--sp-5); }
.term pre { font: 13px/20px ui-monospace, SFMono-Regular, Menlo, monospace; overflow-x: auto; }
.term .dim { color: var(--sub); }
.term figcaption { margin-top: var(--sp-3); font-size: var(--size-footnote); color: var(--sub); }
.plat-row { display: flex; justify-content: center; margin-top: var(--sp-6); }
.plat-row > div { max-width: 420px; padding: var(--sp-6); border-radius: var(--r-card); background: var(--surface); display: grid; gap: var(--sp-2); justify-items: center; }
.plat-row small { color: var(--sub); font-size: var(--size-footnote); }
.plat-row b { font-size: var(--size-headline); }
.plat-row p { color: var(--sub); font-size: 15px; margin-bottom: var(--sp-3); }

/* Footer: round glyph buttons, the engraved wordmark, one fine line */
.foot { text-align: center; padding: var(--sp-9) var(--sp-4) var(--sp-5); background: var(--bg); overflow: hidden; border-top: 1px solid var(--line); }
.icons { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-3); }
.icons a { width: var(--control); height: var(--control); border-radius: 24px; display: inline-grid; place-items: center; color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); text-decoration: none; transition: background var(--motion), color var(--motion); }
.icons a:hover { background: var(--accent); color: var(--bg); }
.word-band { position: relative; width: 100vw; margin: var(--sp-6) 0 0 calc(50% - 50vw); height: clamp(160px, 24vw, 340px); }
.word-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: none; }
.word-band.live .word-canvas { display: block; }
.word-plain { position: absolute; inset: 0; display: grid; place-items: center; font-weight: 700; font-size: clamp(72px, 18vw, 260px); letter-spacing: -0.04em; line-height: 1; color: var(--accent); }
.word-band.live .word-plain { display: none; }
.legal { margin-top: var(--sp-2); font-size: var(--size-footnote); line-height: 16px; color: var(--sub); text-wrap: balance; }

.js .reveal { opacity: 0; transform: translateY(16px); transition: opacity .5s ease, transform .5s ease; }
.js .reveal.in { opacity: 1; transform: none; }

@media (max-width: 900px) {
  .cards { grid-template-columns: 1fr 1fr; }
  .two { grid-template-columns: 1fr; }
  .win { grid-template-columns: 1fr; height: 600px; }
  .win-side { display: none; }
}
@media (max-width: 600px) {
  h1 { font-size: 44px; line-height: 48px; }
  .nav-links { display: none; }
  .nav .btn { margin-left: auto; }
  .cards { grid-template-columns: 1fr; }
  .wrap { padding: 0 var(--sp-4); }
  .tabs { margin-left: 0; }
  .bar.detail { flex-wrap: wrap; }
  .word-band { height: 200px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .btn, .row, .icons a { transition: none; }
}