/* SEED app collection kit. Shared frame for every app concept page and the /tools/ landing.
   Load after seed/tokens/seed.css. Uses seed-kit v2 tokens only; app pages add their own section styles.
   Derived from concepts/vault-app/vault.css (1 Nov 2026). */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--seed-bg); color: var(--seed-ink); font-family: var(--seed-font-body); font-size: 1rem; line-height: var(--seed-leading-body); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
svg { width: 1.25rem; height: 1.25rem; flex: none; }
a { color: var(--seed-link); }
h1, h2, h3 { font-family: var(--seed-font-display); font-weight: 500; letter-spacing: -0.02em; line-height: var(--seed-leading-heading); margin: 0; text-wrap: balance; }
h1 { font-size: clamp(2.5rem, 5vw, 4rem); letter-spacing: -0.035em; }
h2 { font-size: clamp(2rem, 3.6vw, 3rem); }
h3 { font-size: 1.25rem; letter-spacing: -0.01em; }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 3px solid var(--seed-focus, var(--seed-link)); outline-offset: 3px; }
.wrap { width: min(100% - 32px, var(--seed-content-max)); margin-inline: auto; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: 16px; top: -60px; z-index: 50; padding: 12px 16px; border-radius: var(--seed-radius-sm); background: var(--seed-color-pale-mint); color: var(--seed-color-ink); }
.skip-link:focus { top: 12px; }
.mono { font-family: var(--seed-font-mono); font-size: 0.8125rem; }
.eyebrow { font-size: 0.875rem; font-weight: 600; color: var(--seed-link); margin-bottom: 16px; }
.lead { font-size: 1.125rem; color: var(--seed-muted); max-width: 36em; }
.fine { font-size: 0.8125rem; color: var(--seed-muted); }
.fine a { color: var(--seed-link); }
.center { text-align: center; }

/* Buttons, links, pills */
.button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 20px; border: 1px solid transparent; border-radius: var(--seed-radius-sm); background: var(--seed-primary); color: var(--seed-on-primary); font: 600 0.9375rem/1 var(--seed-font-body); text-decoration: none; cursor: pointer; white-space: nowrap; transition: background var(--seed-duration-fast) var(--seed-ease); }
.button:hover { background: var(--seed-primary-hover); }
.button-small { min-height: 40px; padding: 0 16px; font-size: 0.875rem; }
.button-secondary { background: transparent; color: var(--seed-ink); border-color: var(--seed-control-border); }
.button-secondary:hover { background: var(--seed-surface); }
.button svg { width: 18px; height: 18px; }
.text-link { display: inline-flex; align-items: center; gap: 6px; color: var(--seed-link); font-weight: 500; text-underline-offset: 0.2em; }
.text-link svg { width: 18px; height: 18px; transition: transform var(--seed-duration-fast) var(--seed-ease); }
.text-link:hover svg { transform: translateX(3px); }
.pill { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: var(--seed-radius-pill); background: var(--seed-bg); border: 1px solid var(--seed-line); color: var(--seed-muted); font-size: 0.75rem; font-weight: 600; white-space: nowrap; }
.pill svg { width: 13px; height: 13px; }
.pill-ok { background: var(--seed-success-bg); border-color: transparent; color: var(--seed-success); }
.status { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 10px; border: 1px solid var(--seed-line); border-radius: var(--seed-radius-pill); font: 400 0.8125rem var(--seed-font-mono); color: var(--seed-muted); }
.status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--seed-accent, var(--seed-color-pale-mint)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--seed-accent, var(--seed-color-pale-mint)) 25%, transparent); }

/* Signup (concept forms never submit) */
.signup { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 32px; max-width: 520px; }
.signup input { flex: 1 1 240px; min-height: 48px; padding: 0 16px; border: 1px solid var(--seed-control-border); border-radius: var(--seed-radius-sm); background: var(--seed-surface); color: var(--seed-ink); font: inherit; }
.signup input::placeholder { color: var(--seed-muted); }
.signup-note { flex-basis: 100%; font-size: 0.8125rem; color: var(--seed-muted); }
.signup-note[data-state="sent"] { color: var(--seed-success); }
.signup-center { margin-inline: auto; justify-content: center; }
.signup-center .signup-note { text-align: center; }
.honeypot { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form-status { flex-basis: 100%; font-size: 0.875rem; font-weight: 500; min-height: 0; }
.form-status:empty { display: none; }
.form-status[data-state="sent"] { color: var(--seed-success); }
.form-status[data-state="error"] { color: var(--seed-error); }
.signup-center .form-status { text-align: center; }

/* App icon: the family tile. Size with --s. Radius follows the 512/112 master ratio. */
.app-icon { --s: 48px; width: var(--s); height: var(--s); border-radius: calc(var(--s) * 0.21875); flex: none; box-shadow: 0 0 0 1px rgb(255 255 255 / .06) inset; }
.app-icon-lift { box-shadow: 0 0 0 1px var(--seed-line), 0 18px 40px -14px rgb(0 0 0 / .55); }

/* Shared SEED header: the collection frame */
.site-header { position: relative; z-index: 30; background: var(--seed-bg); color: var(--seed-ink); border-bottom: 1px solid var(--seed-line); }
.site-header-inner { display: flex; align-items: center; gap: 32px; min-height: 64px; }
.site-logo { display: inline-flex; }
.site-logo img { width: 128px; }
.site-nav { display: flex; gap: 4px; margin-right: auto; font-size: 0.875rem; }
.site-nav a { padding: 8px 12px; border-radius: var(--seed-radius-sm); color: var(--seed-muted); text-decoration: none; }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--seed-ink); background: var(--seed-surface); }
.site-actions { display: flex; align-items: center; gap: 16px; font-size: 0.875rem; }
.site-actions > a:not(.button) { color: var(--seed-muted); text-decoration: none; }

/* App bar: the product's own identity, sticky under the SEED header */
.appbar { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--seed-bg) 88%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--seed-line); }
.appbar-inner { display: flex; align-items: center; gap: 32px; min-height: 64px; }
.app-id { display: inline-flex; align-items: center; gap: 10px; color: var(--seed-ink); text-decoration: none; font: 500 1.125rem/1 var(--seed-font-display); letter-spacing: -0.01em; white-space: nowrap; }
.app-id .app-icon { --s: 32px; }
.app-id small { font: 400 0.75rem var(--seed-font-body); color: var(--seed-muted); letter-spacing: 0; }
.appbar-nav { display: flex; gap: 4px; margin-right: auto; }
.appbar-nav a { padding: 8px 12px; border-radius: var(--seed-radius-sm); color: var(--seed-muted); font-size: 0.875rem; text-decoration: none; transition: color var(--seed-duration-fast), background var(--seed-duration-fast); }
.appbar-nav a:hover, .appbar-nav a[aria-current="true"] { color: var(--seed-ink); background: var(--seed-surface); }

/* App window: the signature "this is software" frame. Fictional content must be labelled. */
.win { border-radius: var(--seed-radius-lg); background: var(--seed-surface); color: var(--seed-ink); overflow: hidden; box-shadow: 0 0 0 1px var(--seed-line), 0 40px 100px -40px rgb(0 0 0 / .65); }
.win-bar { display: flex; align-items: center; gap: 12px; height: 40px; padding: 0 14px; background: var(--seed-bg); border-bottom: 1px solid var(--seed-line); }
.win-dots { display: flex; gap: 6px; }
.win-dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--seed-line); }
.win-url { margin-inline: auto; padding: 3px 12px; border-radius: 6px; background: var(--seed-surface); font: 400 0.75rem var(--seed-font-mono); color: var(--seed-muted); }
.win-body { display: grid; grid-template-columns: 200px minmax(0, 1fr); min-height: 360px; }
.win-side { padding: 16px 12px; background: var(--seed-color-ink); color: rgb(255 255 255 / .72); display: grid; align-content: start; gap: 2px; font-size: 0.8125rem; }
.win-side a, .win-side span { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 8px; color: inherit; text-decoration: none; }
.win-side [aria-current] { background: rgb(198 241 214 / .12); color: var(--seed-color-pale-mint); }
.win-side img { width: 20px; height: 20px; border-radius: 5px; }
.win-main { padding: 24px; display: grid; align-content: start; gap: 16px; }
.win-caption { margin-top: 12px; font: 400 0.75rem var(--seed-font-mono); color: var(--seed-muted); text-align: right; }

/* Sections */
.section { padding: 120px 0; }
.section-tight { padding: 72px 0; }
.section-head { max-width: 760px; margin-bottom: 56px; }
.section-head > p:not(.eyebrow) { margin-top: 16px; color: var(--seed-muted); font-size: 1.0625rem; max-width: 40em; }
.section-head-center { margin-inline: auto; text-align: center; }
.section-head-center > p:not(.eyebrow) { margin-inline: auto; }
.section-head-split { max-width: none; display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: end; }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: center; }
.surface { background: var(--seed-surface); }
.card { padding: 28px; border: 1px solid var(--seed-line); border-radius: var(--seed-radius-lg); background: var(--seed-surface); }

/* Proof row */
.proof { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin-top: 64px; padding-top: 32px; border-top: 1px solid var(--seed-line); }
.proof li { display: flex; gap: 12px; align-items: flex-start; }
.proof svg { width: 24px; height: 24px; color: var(--seed-accent); margin-top: 2px; }
.proof div { display: grid; }
.proof strong { font-weight: 600; }
.proof span { font-size: 0.875rem; color: var(--seed-muted); }

/* Plans */
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: stretch; margin-bottom: 24px; }
.plan { display: flex; flex-direction: column; gap: 20px; padding: 32px; border: 1px solid var(--seed-line); border-radius: var(--seed-radius-lg); background: var(--seed-surface); color: var(--seed-ink); }
.plan header { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.plan h3 { font-size: 1.375rem; }
.price { display: flex; align-items: baseline; gap: 8px; }
.price b { font: 500 2.75rem/1 var(--seed-font-display); letter-spacing: -0.03em; }
.price span { color: var(--seed-muted); font-size: 0.9375rem; }
.plan ul { display: grid; gap: 10px; margin-bottom: auto; }
.plan li { display: flex; gap: 10px; font-size: 0.9375rem; }
.plan li svg { width: 18px; height: 18px; color: var(--seed-link); margin-top: 3px; }
.plan .button { align-self: stretch; }
.plan-featured { background: var(--seed-color-ink); color: #fff; border-color: transparent; }
.plan-featured .price span, .plan-featured > p { color: rgb(255 255 255 / .72); }
.plan-featured li svg { color: var(--seed-color-pale-mint); }
.plan-featured .button { background: var(--seed-color-pale-mint); color: var(--seed-color-ink); }

/* Suite: the rest of the collection, as an app dock. Mark the current app with aria-current. */
.suite { background: var(--seed-surface); }
.suite-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.suite-grid a { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 14px; align-items: center; padding: 14px; border: 1px solid var(--seed-line); border-radius: var(--seed-radius-md); background: var(--seed-bg); color: var(--seed-ink); text-decoration: none; transition: border-color var(--seed-duration-fast), transform var(--seed-duration-base) var(--seed-ease); }
.suite-grid a:hover { border-color: var(--seed-control-border); transform: translateY(-2px); }
.suite-grid a[aria-current="page"] { border-color: var(--seed-color-mineral-teal); }
.suite-grid .app-icon { --s: 44px; grid-row: span 2; }
.suite-grid strong { font: 500 1rem var(--seed-font-display); }
.suite-grid span { font-size: 0.75rem; font-weight: 600; color: var(--seed-link); }
@media (prefers-reduced-motion: reduce) { .suite-grid a:hover { transform: none; } }
.dock { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 10px; padding: 10px; border-radius: 22px; background: color-mix(in srgb, var(--seed-color-ink) 82%, transparent); box-shadow: 0 0 0 1px rgb(255 255 255 / .08), 0 24px 60px -24px rgb(0 0 0 / .7); backdrop-filter: blur(12px); }
.dock a { display: block; border-radius: 12px; transition: transform var(--seed-duration-fast) var(--seed-ease); }
.dock a:hover { transform: translateY(-4px); }
.dock .app-icon { --s: 44px; }
@media (prefers-reduced-motion: reduce) { .dock a:hover { transform: none; } }

/* Updates timeline */
.timeline { position: relative; display: grid; gap: 32px; padding-left: 28px; border-left: 1px solid var(--seed-line); }
.timeline li { position: relative; }
.timeline li::before { content: ""; position: absolute; left: -34px; top: 6px; width: 11px; height: 11px; border-radius: 50%; background: var(--seed-bg); border: 2px solid var(--seed-color-mineral-teal); }
.timeline li:first-child::before { background: var(--seed-color-mineral-teal); }
.timeline .mono { color: var(--seed-link); }
.timeline h3 { margin-top: 4px; }
.timeline p { margin-top: 6px; color: var(--seed-muted); }

/* Questions */
.questions { border-top: 1px solid var(--seed-line); }
.questions details { border-bottom: 1px solid var(--seed-line); }
.questions summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 64px; padding: 16px 0; font-weight: 500; cursor: pointer; list-style: none; }
.questions summary::-webkit-details-marker { display: none; }
.questions summary span { position: relative; width: 14px; height: 14px; flex: none; }
.questions summary span::before, .questions summary span::after { content: ""; position: absolute; inset: 6px 0 auto; height: 2px; background: currentColor; border-radius: 2px; transition: transform var(--seed-duration-base) var(--seed-ease); }
.questions summary span::after { transform: rotate(90deg); }
.questions details[open] summary span::after { transform: rotate(0); }
.questions details p { padding: 0 32px 24px 0; color: var(--seed-muted); max-width: 68ch; }

/* Final call */
.final { padding: 128px 0; background: var(--seed-bg); color: var(--seed-ink); text-align: center; position: relative; overflow: hidden; isolation: isolate; }
.final::before { content: ""; position: absolute; inset: 0; background: radial-gradient(40% 60% at 50% 30%, color-mix(in srgb, var(--seed-color-mineral-teal) 45%, transparent), transparent); z-index: -1; }
.final-inner { display: grid; justify-items: center; }
.final-inner > .app-icon { --s: 104px; margin-bottom: 32px; }
.final h2 { font-size: clamp(2.25rem, 4.5vw, 3.5rem); }
.final-inner > p { margin-top: 12px; color: var(--seed-muted); font-size: 1.125rem; }

/* Footer */
.site-footer { background: var(--seed-bg); color: var(--seed-ink); border-top: 1px solid var(--seed-line); padding: 48px 0; }
.footer-inner { display: grid; grid-template-columns: 1fr auto; gap: 24px 48px; align-items: start; }
.footer-brand p { margin-top: 12px; color: var(--seed-muted); font-size: 0.875rem; max-width: 34em; }
.footer-brand img { width: 140px; }
.site-footer nav { display: grid; grid-template-columns: repeat(3, auto); gap: 8px 32px; font-size: 0.875rem; }
.site-footer nav a { color: var(--seed-muted); text-decoration: none; }
.site-footer nav a:hover { color: var(--seed-ink); }

/* Restrained entrances (max 360ms). Add .reveal; kit.js adds .in when visible. */
.js .reveal { opacity: 0; transform: translateY(12px); transition: opacity var(--seed-duration-slow) var(--seed-ease), transform var(--seed-duration-slow) var(--seed-ease); }
.js .reveal.in { opacity: 1; transform: none; }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes caret { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; transition: none; } }

/* Responsive frame */
@media (max-width: 1080px) {
  .appbar-nav { display: none; }
  .appbar-inner { justify-content: space-between; }
  .proof { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .section { padding: 88px 0; }
  .split, .section-head-split { grid-template-columns: 1fr; gap: 40px; }
  .section-head-split { gap: 16px; }
  .plans { grid-template-columns: 1fr; }
  .win-body { grid-template-columns: 1fr; }
  .win-side { display: none; }
  .footer-inner { grid-template-columns: 1fr; }
  .site-footer nav { grid-template-columns: repeat(2, auto); justify-content: start; }
}
@media (max-width: 720px) {
  .site-nav, .site-actions > a:not(.button) { display: none; }
  .site-header-inner { justify-content: space-between; }
  .section { padding: 72px 0; }
  .section-head { margin-bottom: 40px; }
  .win-main { padding: 16px; }
  .final { padding: 96px 0; }
}
@media (max-width: 520px) {
  .proof { grid-template-columns: 1fr; }
  .signup .button { flex: 1 1 100%; }
  .suite-grid { grid-template-columns: 1fr; }
  .app-id small { display: none; }
  .appbar .button { padding: 0 14px; }
}

/* Real SEED dashboard, 2 Nov 2026 (founder feedback): screenshots and the small live demo.
   Screenshots live in _kit/dashboard/<app>/ (see its README); never hand-build app UI. */
.dash-shot { margin: 0; border-radius: var(--seed-radius-lg); overflow: hidden; background: var(--seed-surface); box-shadow: 0 0 0 1px var(--seed-line), 0 30px 70px -36px color-mix(in srgb, var(--seed-color-ink) 55%, transparent); }
.dash-shot img { display: block; width: 100%; height: auto; }
.dash-shot-crop img { height: var(--crop, 440px); object-fit: cover; object-position: top center; }
[data-seed-theme="dark"] .dash-shot, .dash-shot.on-dark { background: var(--seed-color-ink); box-shadow: 0 0 0 1px color-mix(in srgb, var(--seed-color-white) 14%, transparent), 0 40px 90px -40px color-mix(in srgb, var(--seed-color-ink) 90%, transparent); }
/* The live demo renders at a 960px desktop width (app selector visible) and is scaled to fit; kit.js sets the scale. */
.dash-live { position: relative; overflow: hidden; border-radius: var(--seed-radius-lg); background: var(--seed-bg); box-shadow: 0 0 0 1px var(--seed-line), 0 30px 70px -36px color-mix(in srgb, var(--seed-color-ink) 55%, transparent); }
.dash-live iframe { display: block; width: 100%; height: 600px; border: 0; }
.dash-live.is-scaled iframe { position: absolute; top: 0; left: 0; transform-origin: 0 0; }
@media (max-width: 520px) { .dash-live iframe { height: 560px; } }

/* The site-wide glass header (/seed/navigation-glass-v2.css) assumes the header floats over page content.
   The app pages' header sits in flow above the dark hero, so keep its own solid Ink surface. */
.site-header.site-header[data-seed-theme="dark"]:not([data-overlay="true"]) { background: var(--seed-bg); color: var(--seed-ink); border-bottom: 1px solid var(--seed-line); }
.site-header.site-header[data-seed-theme="dark"]:not([data-overlay="true"])::before { display: none; }