/* ZenInsure design system tokens (tokens.css, verbatim copy) drive every value here. Light and dark follow the OS. */
@font-face { font-family: "Poppins"; font-weight: 400; font-style: normal; font-display: swap; src: url("fonts/poppins-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 500; font-style: normal; font-display: swap; src: url("fonts/poppins-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 600; font-style: normal; font-display: swap; src: url("fonts/poppins-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 700; font-style: normal; font-display: swap; src: url("fonts/poppins-latin-700-normal.woff2") format("woff2"); }

:root {
  color-scheme: light dark;
  font: var(--zi-text-xl)/1.6 var(--zi-font-sans);
  color: var(--zi-color-text);
  background: var(--zi-color-bg);
  -webkit-font-smoothing: antialiased;
}
* { box-sizing: border-box; }
body { margin: 0; }
:focus-visible { outline: 2px solid var(--zi-color-focus); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

.wrap { max-width: 720px; margin: 0 auto; padding: 0 var(--zi-space-5); }

.top { background: var(--zi-color-surface); border-bottom: 1px solid var(--zi-color-border); }
.top-in { display: flex; align-items: center; gap: var(--zi-space-3); height: 56px; }
.brand { font-weight: 600; font-size: var(--zi-text-xl); letter-spacing: 0.08em; }

.hero { padding: var(--zi-space-8) 0 var(--zi-space-6); }
.eyebrow { margin: 0 0 var(--zi-space-2); font-size: var(--zi-text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--zi-color-text-muted); }
h1 { margin: 0 0 var(--zi-space-3); font-size: var(--zi-text-3xl); font-weight: 600; line-height: 1.25; }
.lead { margin: 0 0 var(--zi-space-6); color: var(--zi-color-text-secondary); }

.download { display: flex; flex-direction: column; align-items: flex-start; gap: var(--zi-space-2); padding: var(--zi-space-5); background: var(--zi-color-surface); border: 1px solid var(--zi-color-border); border-radius: var(--zi-radius-lg); box-shadow: var(--zi-shadow-sm); }
.btn { display: inline-flex; align-items: center; gap: var(--zi-space-2); padding: 10px var(--zi-space-5); border-radius: var(--zi-radius-md); background: var(--zi-color-primary); color: var(--zi-color-on-primary); font-weight: 600; font-size: var(--zi-text-xl); text-decoration: none; transition: background var(--zi-duration) var(--zi-ease); }
.btn:hover { background: var(--zi-color-primary-hover); }
.meta { margin: 0; font-size: var(--zi-text-sm); color: var(--zi-color-text-muted); }
.sum { font-size: var(--zi-text-sm); color: var(--zi-color-text-muted); }
.sum summary { cursor: pointer; }
.sum code { display: block; margin-top: var(--zi-space-2); word-break: break-all; }

h2 { margin: var(--zi-space-8) 0 var(--zi-space-3); font-size: var(--zi-text-2xl); font-weight: 600; }
h3 { margin: 0 0 var(--zi-space-1); font-size: var(--zi-text-xl); font-weight: 600; }
p { margin: 0 0 var(--zi-space-3); }
code { font: var(--zi-text-lg) var(--zi-font-mono); padding: 1px 6px; border-radius: var(--zi-radius-xs); background: var(--zi-color-surface-muted); border: 1px solid var(--zi-color-border); }
a { color: var(--zi-color-link); }

.steps { list-style: none; counter-reset: step; margin: 0; padding: 0; display: grid; gap: var(--zi-space-3); }
.steps li { counter-increment: step; position: relative; padding: var(--zi-space-4) var(--zi-space-4) var(--zi-space-2) 64px; background: var(--zi-color-surface); border: 1px solid var(--zi-color-border); border-radius: var(--zi-radius-md); }
.steps li::before { content: counter(step); position: absolute; left: var(--zi-space-4); top: var(--zi-space-4); width: 32px; height: 32px; display: grid; place-items: center; border-radius: var(--zi-radius-full); background: var(--zi-color-brand-soft); color: var(--zi-color-link); font-weight: 700; }

.faq { margin: 0; }
.faq dt { margin-top: var(--zi-space-4); font-weight: 600; }
.faq dd { margin: var(--zi-space-1) 0 0; color: var(--zi-color-text-secondary); }

.foot { padding-top: var(--zi-space-8); padding-bottom: var(--zi-space-8); font-size: var(--zi-text-sm); color: var(--zi-color-text-muted); }

@media (max-width: 480px) {
  .steps li { padding-left: 56px; }
}