/* Reuses Kaitu's existing OverviewPage tokens and brand. */
@import url("tokens.css");
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 28px; }
body { margin: 0; background: var(--kt-canvas); color: var(--kt-text); font: 15px/1.6 -apple-system, BlinkMacSystemFont, "PingFang SC", "Segoe UI", sans-serif; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--kt-link); }
button { font: inherit; cursor: pointer; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--kt-accent); outline-offset: 4px; }
.wrap { width: min(1200px, calc(100% - 96px)); margin-inline: auto; }
.skip { position: absolute; left: 16px; top: -80px; padding: 12px; background: var(--kt-card); z-index: 9; }
.skip:focus { top: 12px; }
.header { display: flex; align-items: center; justify-content: space-between; padding-block: 25px; }
.brand { display: inline-flex; gap: 9px; align-items: center; font-size: 22px; font-weight: 600; letter-spacing: -.4px; }
.brand small { color: var(--kt-muted); font-size: 14px; font-weight: 400; margin-left: 4px; }
nav { display: flex; gap: 28px; font-size: 14px; color: var(--kt-secondary); }
.intro { padding-block: 68px 56px; }
.muted { color: var(--kt-muted); font-size: 13px; }
h1 { margin: 20px 0; font-size: 38px; line-height: 1.4; font-weight: 600; letter-spacing: -.8px; }
h2 { margin: 0 0 20px; font-size: 22px; line-height: 1.5; font-weight: 600; letter-spacing: -.3px; }
h3 { font-size: 16px; font-weight: 600; line-height: 24px; margin: 14px 0 9px; }
.lead { color: var(--kt-secondary); font-size: 16px; line-height: 1.9; margin: 20px 0 26px; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; }
.button { display: inline-flex; justify-content: center; align-items: center; min-height: 36px; padding: 7px 14px; background: var(--kt-control); border-radius: 8px; font-size: 14px; font-weight: 500; }
.button:hover { background: var(--kt-subtle); }
.button.primary { background: var(--kt-primary); color: var(--kt-on-primary); }
.button.primary:hover { opacity: .85; }
.intro-note { margin-top: 20px; }
.product { padding-bottom: 76px; }
.preview-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; }
.preview-heading h2 { font-size: 20px; }
.preview-heading > span, .preview-foot { font-size: 12px; color: var(--kt-muted); }
.sections { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 10px; background: var(--kt-control); width: fit-content; }
.sections button { display: inline-flex; align-items: center; gap: 8px; height: 36px; border: 0; border-radius: 7px; padding: 0 16px; background: transparent; color: var(--kt-muted); font-size: 14px; }
.sections button[aria-pressed="true"] { color: var(--kt-text); background: var(--kt-card); box-shadow: var(--kt-shadow); }
.sections i, .step-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.today { background: var(--kt-today); }
.health { background: var(--kt-health); }
.doing { background: var(--kt-projects); }
.news { background: var(--kt-feed); }
.me { background: var(--kt-me); }
.preview-caption { margin: 16px 0; color: var(--kt-secondary); font-size: 14px; }
.preview-window { overflow: auto; border-radius: 16px; box-shadow: var(--kt-shadow); background: var(--kt-card); border: 1px solid var(--kt-control); }
.preview-window iframe { display: block; width: 100%; min-width: 1200px; height: 760px; border: 0; background: var(--kt-card); }
.preview-foot { display: flex; justify-content: space-between; gap: 20px; margin-top: 14px; }
.preview-foot a { white-space: nowrap; }
.workflow { padding-block: 8px 70px; }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 54px; margin-top: 30px; }
.steps p { color: var(--kt-secondary); margin: 0; font-size: 14px; line-height: 1.8; }
.data-area { background: var(--kt-subtle); padding-block: 64px; }
.data-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 100px; align-items: center; }
.data-grid p { color: var(--kt-secondary); font-size: 14px; line-height: 1.9; }
.link { display: inline-block; color: var(--kt-link); margin-top: 15px; font-size: 14px; }
.folder { padding: 24px 28px; background: var(--kt-card); border-radius: 12px; box-shadow: var(--kt-shadow); }
.folder-title { font-size: 16px; font-weight: 600; display: flex; justify-content: space-between; }
.folder-title span { font-size: 12px; color: var(--kt-muted); font-weight: 400; }
dl { margin: 20px 0 0; }
dl > div { display: flex; justify-content: space-between; padding-block: 6px; gap: 20px; font-size: 13px; }
dt { font-family: ui-monospace, SFMono-Regular, monospace; }
dd { margin: 0; color: var(--kt-muted); }
.folder > p { margin: 20px 0 0; font-size: 12px; color: var(--kt-muted); }
.start { display: grid; grid-template-columns: 1fr 1fr; gap: 100px; padding-block: 72px; }
.start p { color: var(--kt-secondary); line-height: 1.9; font-size: 14px; }
.start .button { margin-top: 12px; }
details { padding: 18px 0; border-bottom: 1px solid var(--kt-control); }
summary { cursor: pointer; font-size: 14px; font-weight: 500; }
.faq p { font-size: 13px; }
footer { display: grid; grid-template-columns: 1fr auto; gap: 16px; padding-block: 32px; border-top: 1px solid var(--kt-control); }
footer .brand { font-size: 18px; }
footer .brand svg { width: 26px; height: 26px; }
footer p { margin: 9px 0; color: var(--kt-muted); font-size: 12px; }
.footer-links { display: flex; gap: 24px; font-size: 13px; align-items: center; }
.disclaimer { grid-column: 1 / -1; color: var(--kt-faint); }
@media (max-width: 800px) {
 .wrap { width: calc(100% - 40px); }
 .header { padding-block: 20px; }
 nav { gap: 16px; font-size: 12px; }
 nav a:first-child, .brand small { display: none; }
 .intro { padding-block: 40px; }
 h1 { font-size: 30px; line-height: 1.4; }
 h2 { font-size: 20px; }
 .lead { font-size: 15px; }
 .preview-heading { display: block; }
 .preview-heading h2 { margin-bottom: 5px; }
 .preview-heading > span { display: block; margin-bottom: 18px; }
 .sections { gap: 2px; }
 .sections button { padding-inline: 9px; gap: 5px; font-size: 12px; }
 .preview-window iframe { height: 620px; }
 .preview-foot { flex-direction: column; gap: 7px; }
 .product { padding-bottom: 52px; }
 .steps, .data-grid, .start { grid-template-columns: 1fr; gap: 28px; }
 .workflow { padding-bottom: 48px; }
 .data-area { padding-block: 40px; }
 .start { padding-block: 48px; }
 .folder { padding: 22px; }
 footer { grid-template-columns: 1fr; }
 .footer-links { margin-top: 4px; }
 .disclaimer { grid-column: 1; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }