/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* Page chrome on the theme tokens (brand.css). */
body { margin: 0; background: var(--color-bg); color: var(--color-text); font: var(--text-md)/var(--leading-normal) var(--font-sans); }
a { color: var(--color-primary); }

.hero { background: var(--hero-bg); color: var(--hero-text); border-bottom: 1px solid var(--color-border); }
.hero nav { max-width: 1120px; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-6);
  padding-block: var(--space-4); padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.hero a { color: var(--hero-text); text-decoration: none; font-weight: 600; }
.hero a:hover { color: var(--hero-muted); }
.hero .home { flex-grow: 1; }

.logo { display: inline-flex; align-items: center; gap: var(--space-2); }
.wordmark { font-size: var(--text-xl); font-weight: 700; letter-spacing: -0.01em; }
.wordmark span { color: var(--wordmark-accent); }
.mark-cat { fill: var(--mark-cat); }
.mark-tail { fill: none; stroke: var(--mark-cat); stroke-width: 4; stroke-linecap: round; }
.mark-gpu { fill: var(--mark-gpu); }

.hero-pitch { max-width: 1120px; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-6);
  padding-block: var(--space-6) var(--space-10); padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.hero-copy { flex: 1 1 420px; min-width: 0; display: flex; flex-direction: column; gap: var(--space-4); }
.hero-cat { flex: 0 1 440px; max-width: 100%; height: auto; }

/* Home hero: gradient + animated line-art panorama along the bottom (Heroku-style). */
.hero { position: relative; overflow: hidden; }
.hero:has(.hero-art) { background: linear-gradient(color-mix(in srgb, var(--hero-bg) 70%, #000) 5%, var(--hero-bg) 95%); }
.hero nav, .hero-pitch { position: relative; z-index: 1; }
.hero:has(.hero-art) .hero-pitch { padding-bottom: 150px; }
.hero-art { position: absolute; inset: auto 0 0 0; width: 100%; height: 180px; }
.ha-lines { fill: none; stroke: color-mix(in srgb, var(--hero-text) 30%, transparent); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.ha-far { stroke: color-mix(in srgb, var(--hero-text) 14%, transparent); }
.ha-led { fill: var(--mark-gpu); stroke: none; animation: ha-blink 2s steps(2, jump-none) infinite; }
.ha-pulse { stroke: var(--mark-gpu); stroke-width: 2.5; stroke-dasharray: 8 400; animation: ha-flow 3s linear infinite; }
.ha-rgb { stroke: var(--mark-gpu); animation: ha-glow 3s ease-in-out infinite; }
.ha-spin { transform-box: view-box; animation: ha-rot 2s linear infinite; }
.ha-drift { animation: ha-drift 100s linear infinite; }
.ha-star { animation: ha-glow 4s ease-in-out infinite; }
.ha-steam { animation: ha-steam 4.4s ease-out infinite; transform-box: fill-box; }
.ha-tail, .hc-tail { transform-box: fill-box; transform-origin: 0 0; animation: ha-sway 5s ease-in-out infinite; }
.ha-breathe, .hc-breathe { transform-box: fill-box; transform-origin: 50% 100%; animation: ha-breathe 4s ease-in-out infinite; }
.ha-z { fill: color-mix(in srgb, var(--hero-text) 45%, transparent); stroke: none; font: 700 11px/1 var(--font-sans, sans-serif); animation: ha-z 3.6s ease-out infinite; }
.hc-fan { animation: ha-rot .9s linear infinite; transform-box: view-box; }
.hc-fan-2 { animation-duration: 1.05s; }
.hc-rgb { animation: ha-glow 3s ease-in-out infinite; }
.hc-z { animation: ha-z 3.6s ease-out infinite; }
.hc-z-2 { animation-delay: -1.2s; }
.hc-z-3 { animation-delay: -2.4s; }
@keyframes ha-rot { to { transform: rotate(360deg); } }
@keyframes ha-blink { 50% { opacity: .15; } }
@keyframes ha-glow { 50% { opacity: .35; } }
@keyframes ha-flow { from { stroke-dashoffset: 408; } to { stroke-dashoffset: 0; } }
@keyframes ha-drift { from { transform: translateX(-300px); } to { transform: translateX(1500px); } }
@keyframes ha-steam { from { transform: translate(0, 0) scale(.6); opacity: .9; } to { transform: translate(10px, -50px) scale(1.8); opacity: 0; } }
@keyframes ha-sway { 50% { transform: rotate(4deg); } }
@keyframes ha-breathe { 50% { transform: scaleY(1.03); } }
@keyframes ha-z { from { opacity: 0; transform: translate(0, 6px); } 30% { opacity: 1; } to { opacity: 0; transform: translate(10px, -14px); } }
@media (prefers-reduced-motion: reduce) { .hero-art *, .hero-cat * { animation: none !important; } }
.hero-pitch h1 { margin: 0; max-width: 640px; font-size: var(--text-3xl); }
.hero-pitch p { margin: 0; max-width: 600px; font-size: var(--text-lg); color: var(--hero-muted); }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.hero .btn-hero, .hero .btn-hero-outline { border-radius: var(--radius-md); padding: var(--space-3) var(--space-6); border: 1px solid var(--hero-text); }
.hero .btn-hero { background: var(--hero-text); color: var(--hero-bg); }
.hero .btn-hero:hover { color: var(--hero-bg); background: var(--hero-muted); }

.tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-4); overflow: visible; }
.tier { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-4); text-decoration: none; color: var(--color-text);
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
.tier:hover, .tier:focus-visible { border-color: var(--color-primary); }
.tier-name { font-size: var(--text-sm); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-accent); }
.tier-what { font-weight: 600; }
.tier-spec { font-size: var(--text-sm); color: var(--color-muted); }
.tier-price { font: 600 var(--text-xl) var(--font-mono); font-variant-numeric: tabular-nums; color: var(--color-primary); }

main { max-width: 1120px; margin: 0 auto; padding-block: var(--space-8);
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
h1 { font-size: var(--text-2xl); line-height: var(--leading-tight); text-wrap: balance; }
h2 { font-size: var(--text-lg); margin-top: var(--space-8); }
section { overflow-x: auto; }
table { border-collapse: collapse; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
th, td { padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--color-border); text-align: left; }
th { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-muted); }
td:nth-child(n+2) { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
dl { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-2) var(--space-6); background: var(--color-surface);
  border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-6); }
dt { color: var(--color-muted); }
dd { margin: 0; }
code { font-family: var(--font-mono); }