/* SEED apps landing (/tools/ concept). Builds on _kit/app-kit.css; seed-kit v2 tokens only. */

/* 1 · Hero */
.l-hero { position: relative; overflow: hidden; isolation: isolate; background: var(--seed-bg); color: var(--seed-ink); padding: 88px 0 72px; }
.l-hero::before { content: ""; position: absolute; inset: -30% -20% auto 30%; height: 140%; background: radial-gradient(closest-side, color-mix(in srgb, var(--seed-color-mineral-teal) 42%, transparent), transparent); z-index: -1; pointer-events: none; }
.l-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 64px; align-items: center; }
.l-hero-head { grid-column: 1; grid-row: 1; align-self: end; }
.l-hero-body { grid-column: 1; grid-row: 2; align-self: start; }
.l-hero-visual { grid-column: 2; grid-row: 1 / span 2; }
.l-hero h1 { margin-top: 28px; font-size: clamp(2.75rem, 5.4vw, 4.5rem); line-height: 1.02; }
.l-hero h1 span { color: var(--seed-accent); }
.l-hero .lead { margin-top: 24px; max-width: 32em; }
.l-browse { margin-top: 28px; }
.l-browse svg { transition: transform var(--seed-duration-fast) var(--seed-ease); }
.l-browse:hover svg { transform: translateY(3px); }

/* The home screen device */
.l-hero-visual { margin: 0; justify-self: end; width: min(100%, 540px); }
.device { position: relative; padding: 20px 22px 26px; border-radius: 40px; background: linear-gradient(160deg, color-mix(in srgb, var(--seed-color-mineral-teal) 55%, var(--seed-color-ink)), var(--seed-color-ink) 70%); box-shadow: 0 0 0 1px rgb(255 255 255 / .1), 0 0 0 10px rgb(255 255 255 / .03), 0 60px 120px -40px rgb(0 0 0 / .8); animation: rise var(--seed-duration-slow) var(--seed-ease) both; }
.device-status { display: flex; align-items: center; justify-content: space-between; padding: 0 6px 18px; color: rgb(255 255 255 / .7); }
.device-status .mono { font-size: 0.75rem; }
.device-status img { width: 16px; height: 16px; opacity: .8; }
.springboard { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px 14px; }
.sb-app { display: grid; justify-items: center; gap: 8px; color: #fff; text-decoration: none; font-size: 0.8125rem; font-weight: 500; }
.sb-app .app-icon { --s: min(72px, 100%) !important; width: 100%; max-width: 72px; height: auto; aspect-ratio: 1; border-radius: 22%; box-shadow: 0 0 0 1px rgb(255 255 255 / .08), 0 10px 24px -10px rgb(0 0 0 / .6); transition: transform var(--seed-duration-fast) var(--seed-ease); }
.sb-app:hover .app-icon { transform: translateY(-3px); }
.sb-app span { opacity: .92; }

.l-proof { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin-top: 80px; padding-top: 36px; border-top: 1px solid var(--seed-line); }
.l-proof li { display: grid; gap: 4px; }
.l-proof b { font: 500 clamp(2rem, 3.4vw, 2.75rem)/1 var(--seed-font-display); letter-spacing: -0.03em; }
.l-proof span { font-size: 0.9375rem; color: var(--seed-muted); }

/* 2 · App library */
.filters { display: flex; flex-wrap: wrap; gap: 8px; }
.filters button { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border: 1px solid var(--seed-control-border); border-radius: var(--seed-radius-pill); background: var(--seed-surface); color: var(--seed-ink); font: 500 0.9375rem var(--seed-font-body); cursor: pointer; transition: background var(--seed-duration-fast), color var(--seed-duration-fast); }
.filters button span { font: 400 0.75rem var(--seed-font-mono); color: var(--seed-muted); }
.filters button:hover { background: var(--seed-bg); }
.filters button[aria-pressed="true"] { background: var(--seed-color-ink); border-color: var(--seed-color-ink); color: #fff; }
.filters button[aria-pressed="true"] span { color: var(--seed-color-pale-mint); }
.filter-desc { margin: 20px 0 32px; color: var(--seed-muted); min-height: 1.6em; }
.app-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.app-card[hidden] { display: none; }
.app-card-feature { grid-column: span 2; }
.app-card.app-card-feature a { position: relative; overflow: hidden; isolation: isolate; padding-right: calc(40% + 28px); background: var(--seed-color-ink); border-color: transparent; color: #fff; }
.app-card-feature .ac-photo { position: absolute; top: 0; right: 0; bottom: 0; width: 40%; height: 100%; object-fit: cover; z-index: -1; -webkit-mask-image: linear-gradient(to right, transparent, #000 35%); mask-image: linear-gradient(to right, transparent, #000 35%); }
.app-card-feature .ac-price { background: rgb(181 207 116 / .14); color: var(--seed-color-pale-mint); }
.app-card-feature .ac-cat, .app-card-feature .ac-line, .app-card-feature .ac-works { color: rgb(255 255 255 / .72); }
.app-card-feature .ac-line { margin-bottom: 16px; }
.app-card-feature .ac-foot { border-color: rgb(255 255 255 / .14); }
.app-card-feature .ac-open { color: var(--seed-color-pale-mint); }
.app-card-feature .ac-works img { box-shadow: 0 0 0 1px rgb(255 255 255 / .22); }
.ac-sources { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 24px; }
.ac-sources li { padding: 3px 10px; border-radius: var(--seed-radius-pill); border: 1px solid rgb(255 255 255 / .18); font-size: 0.75rem; color: rgb(255 255 255 / .86); }
.app-card a { display: flex; flex-direction: column; height: 100%; padding: 28px; border: 1px solid var(--seed-line); border-radius: var(--seed-radius-lg); background: var(--seed-surface); color: var(--seed-ink); text-decoration: none; transition: border-color var(--seed-duration-fast), box-shadow var(--seed-duration-base) var(--seed-ease), transform var(--seed-duration-base) var(--seed-ease); }
.app-card a:hover { border-color: var(--seed-control-border); transform: translateY(-3px); box-shadow: 0 24px 48px -28px rgb(16 26 26 / .35); }
.ac-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 24px; }
.ac-top .app-icon { box-shadow: 0 10px 24px -12px rgb(16 26 26 / .6); }
.ac-price { padding: 4px 10px; border-radius: var(--seed-radius-pill); background: var(--seed-bg); font-size: 0.75rem; font-weight: 600; color: var(--seed-link); white-space: nowrap; }
.ac-cat { font-size: 0.8125rem; font-weight: 600; color: var(--seed-muted); }
.app-card h3 { margin-top: 4px; font-size: 1.5rem; }
.ac-line { margin-top: 10px; color: var(--seed-muted); margin-bottom: 24px; }
.ac-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 20px; border-top: 1px solid var(--seed-line); }
.ac-works { display: inline-flex; align-items: center; gap: 4px; font-size: 0.75rem; color: var(--seed-muted); }
.ac-works > span { margin-right: 6px; }
.ac-works img { width: 24px; height: 24px; border-radius: 6px; }
.ac-open { display: inline-flex; align-items: center; gap: 6px; font-size: 0.875rem; font-weight: 600; color: var(--seed-link); white-space: nowrap; }
.ac-open svg { width: 16px; height: 16px; transition: transform var(--seed-duration-fast) var(--seed-ease); }
.app-card a:hover .ac-open svg { transform: translateX(3px); }
.l-apps-note { margin-top: 40px; max-width: 60em; margin-inline: auto; }

/* 3 · Moments */
.l-moments { padding-top: 0; }
.moments { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.moments .m-wide { grid-column: span 2; grid-row: span 2; }
.moments a { position: relative; display: block; height: 100%; min-height: 260px; border-radius: var(--seed-radius-lg); overflow: hidden; color: #fff; text-decoration: none; isolation: isolate; }
.moments a > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 600ms var(--seed-ease); }
.moments a::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgb(16 26 26 / .82), rgb(16 26 26 / .1) 55%, transparent); }
.moments a:hover > img { transform: scale(1.03); }
.m-tag { position: absolute; left: 16px; top: 16px; display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px 4px 4px; border-radius: var(--seed-radius-pill); background: rgb(16 26 26 / .72); backdrop-filter: blur(8px); font-size: 0.8125rem; font-weight: 600; }
.m-tag .app-icon { border-radius: 50%; }
.m-text { position: absolute; left: 20px; right: 20px; bottom: 18px; font: 500 1.1875rem/1.25 var(--seed-font-display); letter-spacing: -0.01em; text-wrap: balance; }
.m-wide .m-text { font-size: clamp(1.5rem, 2.4vw, 2rem); max-width: 16em; left: 28px; bottom: 26px; }
@media (prefers-reduced-motion: reduce) { .moments a:hover > img { transform: none; } }

/* 4 · Better together */
.l-together { background: var(--seed-bg); color: var(--seed-ink); }
.l-together .section-head-split > p { color: var(--seed-muted); font-size: 1.0625rem; }
.combos { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border: 1px solid var(--seed-line); border-radius: var(--seed-radius-pill); margin-bottom: 40px; }
.combos button { min-height: 44px; padding: 0 18px; border: 0; border-radius: var(--seed-radius-pill); background: transparent; color: var(--seed-muted); font: 500 0.9375rem var(--seed-font-body); cursor: pointer; transition: background var(--seed-duration-fast), color var(--seed-duration-fast); }
.combos button:hover { color: var(--seed-ink); }
.combos button[aria-selected="true"] { background: var(--seed-color-pale-mint); color: var(--seed-color-ink); }
.flow[hidden] { display: none; }
.flow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; counter-reset: step; }
.flow li { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 24px; border: 1px solid var(--seed-line); border-radius: var(--seed-radius-lg); background: var(--seed-surface); }
.flow li:not(:last-child)::after { content: ""; position: absolute; top: 44px; right: -21px; width: 22px; height: 1px; background: var(--seed-color-pale-mint); opacity: .6; }
.flow-app { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.flow-app .mono { color: var(--seed-muted); }
.flow h3 { font-size: 1.1875rem; }
.flow p { color: var(--seed-muted); font-size: 0.9375rem; }
.flow-chip { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; margin-top: auto; padding: 6px 12px; border-radius: var(--seed-radius-pill); background: var(--seed-bg); font: 400 0.75rem var(--seed-font-mono); color: var(--seed-ink); }
.flow-chip svg { width: 14px; height: 14px; color: var(--seed-accent); }
.combo-panels .flow:not([hidden]) li { animation: rise var(--seed-duration-slow) var(--seed-ease) both; }
.combo-panels .flow li:nth-child(2) { animation-delay: 40ms; }
.combo-panels .flow li:nth-child(3) { animation-delay: 80ms; }
.combo-panels .flow li:nth-child(4) { animation-delay: 120ms; }
@media (prefers-reduced-motion: reduce) { .combo-panels .flow li { animation: none !important; } }

/* 5 · The stack */
.stack-copy .lead { margin-top: 20px; }
.promises { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin: 40px 0 32px; }
.promises li { display: flex; gap: 12px; }
.promises svg { width: 24px; height: 24px; color: var(--seed-link); margin-top: 2px; }
.promises div { display: grid; }
.promises strong { font-weight: 600; }
.promises span { font-size: 0.875rem; color: var(--seed-muted); }
.stack { margin: 0; display: grid; gap: 10px; }
.layer { border-radius: var(--seed-radius-md); padding: 18px 20px; }
.layer-label { display: block; margin-bottom: 12px; font-size: 0.75rem; color: var(--seed-muted); }
.layer-apps { background: var(--seed-surface); border: 1px solid var(--seed-line); }
.layer-apps ul { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px 8px; }
.layer-apps li { display: grid; justify-items: center; gap: 6px; font-size: 0.75rem; color: var(--seed-muted); }
.layer-perm { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 20px; border: 1px dashed var(--seed-control-border); background: transparent; }
.layer-perm .layer-label { margin: 0; color: var(--seed-link); }
.layer-perm p { font-size: 0.8125rem; color: var(--seed-muted); text-align: right; }
.layer-vault, .layer-ai { display: flex; align-items: center; gap: 16px; background: var(--seed-color-ink); color: #fff; }
.layer-vault strong, .layer-ai strong { display: block; font: 500 1.125rem var(--seed-font-display); }
.layer-vault span, .layer-ai span { font-size: 0.875rem; color: rgb(255 255 255 / .72); }
.layer-ai { background: color-mix(in srgb, var(--seed-color-mineral-teal) 85%, var(--seed-color-ink)); }
.layer-ai svg { width: 48px; height: 48px; padding: 11px; border-radius: 12px; background: rgb(16 26 26 / .35); color: var(--seed-color-pale-mint); }
.layer-src { border: 1px solid var(--seed-line); }
.sources { display: flex; flex-wrap: wrap; gap: 8px; }
.sources li { padding: 4px 12px; border-radius: var(--seed-radius-pill); background: var(--seed-surface); border: 1px solid var(--seed-line); font-size: 0.8125rem; }

/* 6 · Plans */
.l-plans .section-head > p:not(.eyebrow) { margin-inline: auto; }
.plan-apps { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; }
.plan-apps .app-icon { border-radius: 7px; }
.plan ul { margin-bottom: 0; }
.keepables { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 24px; }
.keepables a { display: flex; align-items: center; gap: 16px; padding: 18px 20px; 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); }
.keepables a:hover { border-color: var(--seed-control-border); }
.keepables a > span { display: grid; margin-right: auto; }
.keepables strong { font: 500 1.0625rem var(--seed-font-display); }
.keepables a > span span { font-size: 0.875rem; color: var(--seed-muted); }
.keepables > a > svg { color: var(--seed-link); }

/* 7 · News + FAQ */
.l-news .text-link { display: inline-flex; }
.l-faq { padding-top: 0; }

/* 8 · Close */
.final .dock { margin-bottom: 48px; }

/* Responsive */
/* The real dashboard, live and small: copy left, demo right (founder feedback, 2 Nov 2026). */
.l-dash { background: var(--seed-bg); color: var(--seed-ink); }
@media (max-width: 1080px) {
  .app-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .flow li:nth-child(2)::after { display: none; }
}
@media (max-width: 900px) {
  .l-hero { padding-top: 56px; }
  .l-hero-grid { grid-template-columns: 1fr; row-gap: 40px; }
    .l-hero-head, .l-hero-body, .l-hero-visual { grid-column: 1; grid-row: auto; }
  .l-hero-visual { justify-self: center; order: 2; }
  .l-hero-body { order: 3; }
  .l-proof { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 24px; margin-top: 64px; }
  .moments { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .moments .m-wide { grid-column: 1 / -1; grid-row: auto; min-height: 340px; }
  .moments .m-wide a { min-height: 340px; }
  .keepables { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .app-cards { grid-template-columns: 1fr; }
  .app-card-feature { grid-column: auto; }
  .app-card.app-card-feature a { padding: 24px 24px 0; }
  .app-card-feature .ac-photo { position: static; width: calc(100% + 48px); max-width: none; height: 200px; margin: 24px -24px 0; -webkit-mask-image: linear-gradient(to bottom, transparent, #000 40%); mask-image: linear-gradient(to bottom, transparent, #000 40%); }
  .flow { grid-template-columns: 1fr; }
  .flow li::after { display: none; }
  .promises { grid-template-columns: 1fr; }
  .layer-apps ul { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .layer-apps li span { display: none; }
  .layer-perm { flex-direction: column; align-items: flex-start; gap: 4px; }
  .layer-perm p { text-align: left; }
  .combos { display: flex; border-radius: var(--seed-radius-md); }
  .combos button { flex: 1 1 auto; border-radius: var(--seed-radius-sm); }
}
@media (max-width: 520px) {
  .device { padding: 16px 14px 20px; border-radius: 32px; }
  .springboard { gap: 14px 10px; }
  .sb-app { font-size: 0.75rem; }
  .moments { grid-template-columns: 1fr; }
  .moments a, .moments .m-wide a { min-height: 280px; }
  .ac-foot { flex-wrap: wrap; }
  .app-card a { padding: 24px; }
  .l-proof span { font-size: 0.875rem; }
}