/* Flow + Features presentation pages (share tokens with styles.css) */
body.page{background:var(--surface);min-height:100dvh}
.page .topnav{display:flex;align-items:center;gap:12px;position:sticky;top:0;height:60px;padding:0 16px;background:color-mix(in srgb,var(--surface) 88%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);z-index:50;border-bottom:1px solid var(--sc-high)}
.page .topnav .brand{display:flex;align-items:center;gap:8px;font-weight:800;font-family:var(--display);font-size:18px}
.page .topnav .brand small{display:none}
.page .topnav nav{display:flex;gap:2px;margin-inline-start:auto;background:var(--sc);padding:4px;border-radius:999px}
.page .topnav nav a{padding:6px 12px;border-radius:999px;text-decoration:none;color:var(--on-surface-variant);font-weight:600;font-size:13px;white-space:nowrap}
.page .topnav nav a.on{background:var(--grad-brand);color:#fff}
.page .topnav .tools{display:none}
@media (min-width:900px){.page .topnav{padding:0 28px;position:fixed;inset:0 0 auto 0}.page .topnav .brand small{display:inline}.page .topnav nav a{padding:7px 18px;font-size:14px}.page .topnav .tools{display:flex}.pg{padding-top:96px!important}}
.pg{max-width:1280px;margin:0 auto;padding:28px 16px 64px}
.pg-head{max-width:720px;margin-bottom:28px}
.pg-head h1{font-family:var(--display);font-weight:800;font-size:clamp(34px,5vw,52px);letter-spacing:-.03em;line-height:1.05}
.pg-head p{color:var(--on-surface-variant);font-size:17px;margin-top:10px}

/* flow */
.flow-wrap{overflow-x:auto;padding-bottom:12px;margin-inline:-16px;padding-inline:16px}
.flow{position:relative;display:grid;grid-template-columns:180px 1fr;gap:28px 120px;min-width:1100px}
.flow-lines{position:absolute;inset:0;pointer-events:none;color:var(--primary);overflow:visible}
.flow-lines path{fill:none;stroke:currentColor;stroke-width:2;opacity:.55}
.flow-lines path.fan{stroke-dasharray:5 6;opacity:.45}
.flow-start{display:flex;flex-direction:column;align-items:center;gap:40px;padding-top:6px}
.flow-start .node.hub img{box-shadow:0 0 0 4px color-mix(in srgb,var(--primary) 35%,transparent),var(--card-shadow)}
.hub-note{font-size:12.5px;color:var(--on-surface-variant);text-align:center;margin-top:-24px}
.flow-groups{display:flex;flex-direction:column;gap:22px}
.lane{background:var(--sc-lowest);border-radius:28px;padding:14px 18px 16px;box-shadow:var(--card-shadow);position:relative}
.lane-label{font-family:var(--display);font-weight:800;font-size:15px;margin-bottom:10px;color:var(--on-surface)}
.flow-start .lane-label{margin-bottom:-28px;color:var(--on-surface-variant);font-size:13px}
.lane-row{display:flex;gap:64px;align-items:flex-start}
.lane-note{font-size:12.5px;color:var(--on-surface-variant);margin-top:8px}
.node{display:flex;flex-direction:column;gap:2px;width:130px;text-decoration:none;color:var(--on-surface);position:relative;z-index:1}
.node img{width:130px;height:281px;object-fit:cover;object-position:top;border-radius:18px;background:var(--sc);box-shadow:var(--card-shadow);border:4px solid #1b1f20;transition:transform .3s var(--spring-fast)}
.node b{font-size:13.5px;margin-top:6px;font-family:var(--display)}
.node small{font-size:11.5px;color:var(--on-surface-variant);line-height:1.35}
@media (hover:hover) and (pointer:fine){.node:hover img{transform:translateY(-4px) scale(1.02)}}
.node:active img{transform:scale(.97)}

/* features */
.legend{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.legend span{background:var(--sc-lowest);box-shadow:var(--card-shadow);border-radius:999px;padding:6px 14px;font-size:14px}
.tag{display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:8px;font-size:12px;font-weight:800;border:1.5px solid currentColor;transform:rotate(-2deg)}
.tag.mvp{color:var(--primary);background:color-mix(in srgb,var(--primary) 10%,transparent)}
.tag.later{color:var(--tertiary);background:color-mix(in srgb,var(--orange) 10%,transparent)}
:root[data-theme=dark] .tag.later{color:var(--orange)}
.phase{margin-top:36px}
.phase-head{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.phase-ic{width:56px;height:56px}
.phase-ic svg{width:100%;height:100%}
.phase-head small{font-size:12.5px;color:var(--on-surface-variant);font-weight:700}
.phase-head h2{font-family:var(--display);font-weight:800;font-size:26px;letter-spacing:-.02em;line-height:1.15}
.fgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.feat{display:flex;flex-direction:column;gap:6px;align-items:flex-start;padding:16px 18px;border-radius:24px;background:var(--sc-lowest);box-shadow:var(--card-shadow);text-decoration:none;color:var(--on-surface);transition:transform .3s var(--spring-fast)}
.feat b{font-size:16px;font-family:var(--display);margin-top:4px}
.feat p{font-size:14px;color:var(--on-surface-variant);flex:1}
.feat .see{font-size:13px;font-weight:700;color:var(--primary)}
@media (hover:hover) and (pointer:fine){.feat:hover{transform:translateY(-3px)}}
.feat:active{transform:scale(.98)}
.rules{margin-top:44px;background:var(--grad-brand);color:#fff;border-radius:28px;padding:22px 24px}
.rules h2{font-family:var(--display);font-weight:800;font-size:22px;margin-bottom:8px}
.rules ul{padding-inline-start:18px;display:flex;flex-direction:column;gap:6px}
.logo svg{width:100%;height:100%}
.lane{align-self:flex-start}
.lane-row{gap:44px}
@media (max-width:599px){.page .topnav .brand{font-size:0;gap:0}.page .topnav nav{margin-inline-start:auto}.page .topnav nav a{padding:6px 10px}}