/*
 * Built on the site's own tokens — --an-bg, --an-text, --an-accent, the spacing
 * scale — because a second visual identity inside one site is a bug. Where this
 * departs from the rest of the site it is for density: these pages are read by
 * somebody scanning for a figure, and the line height that flatters an essay
 * makes a table of evidence slower to read.
 *
 * The accent runs cool where an-mushroom's runs warm. That is the only
 * deliberate difference between the two modules' surfaces, and it exists so a
 * grower who runs both can tell at a glance which one they are looking at.
 */

.an-hy { max-width: 1140px; margin: 0 auto; padding: var(--an-space-7, 48px) var(--an-gutter, 24px) var(--an-space-10, 128px); }

.an-hy-hero { margin-bottom: var(--an-space-6, 32px); }
.an-hy-eyebrow { font: 600 .72rem/1 var(--an-font-mono, monospace); letter-spacing: .14em; text-transform: uppercase; color: #2EA4D1; }
.an-hy h1 { font: 600 var(--an-t-h1, 2.75rem)/1.06 var(--an-font-editorial, Georgia, serif); letter-spacing: -.02em; margin: .25em 0 .45em; }
.an-hy-hero p { color: var(--an-text-2, #A2A9A6); max-width: 74ch; font-size: var(--an-t-small, .9375rem); line-height: 1.7; }

/* ── the rail between screens ─────────────────────────────────────── */

.an-hy-nav { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 var(--an-space-6, 32px); border-bottom: 1px solid var(--an-line, #262B2E); padding-bottom: 10px; }
.an-hy-navlink { text-decoration: none; color: var(--an-text-2, #A2A9A6); font-size: .875rem; padding: 6px 12px; border-radius: 999px; }
.an-hy-navlink:hover { background: var(--an-surface, #15181A); color: var(--an-text, #E8EDEA); }
.an-hy-navlink.is-here { background: rgba(46,164,209,.14); color: #2EA4D1; font-weight: 600; }

/* ── cards ────────────────────────────────────────────────────────── */

.an-hy-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); gap: var(--an-space-5, 24px); margin-bottom: var(--an-space-7, 48px); }
.an-hy-card { border: 1px solid var(--an-line, #262B2E); border-radius: var(--an-radius-lg, 16px); background: var(--an-surface, #15181A); padding: var(--an-space-5, 24px); }
.an-hy-card h3 { font: 600 1.02rem/1.3 var(--an-font-ui, system-ui); margin: .5em 0 .4em; }
.an-hy-card p { font-size: .875rem; line-height: 1.65; color: var(--an-text-2, #A2A9A6); margin: 0 0 1em; }
.an-hy-glyph { font-size: 1.4rem; color: #2EA4D1; }

/* ── buttons and pills ────────────────────────────────────────────── */

.an-hy-btn {
	display: inline-block; text-decoration: none; font: 600 .875rem/1 var(--an-font-ui, system-ui);
	padding: 10px 16px; border-radius: 999px; border: 1px solid transparent;
	background: linear-gradient(92deg,#2EA4D1,#5FC07F); color: #04191f;
}
.an-hy-btn:hover { filter: brightness(1.08); }
.an-hy-btn.is-quiet { background: transparent; border-color: var(--an-line, #262B2E); color: var(--an-text, #E8EDEA); }
.an-hy-btn.is-quiet:hover { border-color: #2EA4D1; color: #2EA4D1; }
.an-hy-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: var(--an-space-5, 24px) 0 8px; }
.an-hy-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: var(--an-space-4, 16px) 0; }

.an-hy-pill { display: inline-block; font: 600 .72rem/1 var(--an-font-mono, monospace); letter-spacing: .06em; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--an-line, #262B2E); color: var(--an-text-2, #A2A9A6); }
.an-hy-pill.is-free { border-color: rgba(95,192,127,.5); color: #5FC07F; }
.an-hy-pill.is-held { border-color: rgba(46,164,209,.55); color: #2EA4D1; }

/* ── forms ────────────────────────────────────────────────────────── */

.an-hy-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--an-space-4, 16px); margin-bottom: var(--an-space-5, 24px); }
.an-hy-form label { display: flex; flex-direction: column; gap: 6px; font-size: .8125rem; color: var(--an-text-2, #A2A9A6); }
.an-hy-form select, .an-hy-form input[type="number"] {
	background: var(--an-surface, #15181A); color: var(--an-text, #E8EDEA);
	border: 1px solid var(--an-line, #262B2E); border-radius: 8px; padding: 8px 10px; font-size: .875rem; min-width: 8rem;
}
.an-hy-form .an-hy-check { flex-direction: row; align-items: center; gap: 8px; padding-bottom: 10px; }
.an-hy-slider { min-width: 260px; }
.an-hy-slider input[type="range"] { width: 100%; accent-color: #2EA4D1; }
.an-hy-slider output { font: 600 .875rem/1 var(--an-font-mono, monospace); color: #2EA4D1; }
.an-hy-intent { font: 600 1.05rem/1.3 var(--an-font-ui, system-ui); color: #2EA4D1; margin: 0 0 var(--an-space-4, 16px); }

/* ── tables ───────────────────────────────────────────────────────── */

.an-hy-table { width: 100%; border-collapse: collapse; margin: var(--an-space-4, 16px) 0 var(--an-space-6, 32px); font-size: .875rem; display: block; overflow-x: auto; }
.an-hy-table thead th { text-align: left; font: 600 .72rem/1.2 var(--an-font-mono, monospace); letter-spacing: .08em; text-transform: uppercase; color: var(--an-text-2, #A2A9A6); padding: 10px 12px; border-bottom: 1px solid var(--an-line, #262B2E); white-space: nowrap; }
.an-hy-table td, .an-hy-table tfoot th { padding: 10px 12px; border-bottom: 1px solid var(--an-line, #262B2E); vertical-align: top; }
.an-hy-table tfoot th { text-align: left; font-weight: 700; }
.an-hy-table td.is-good { color: #5FC07F; font-weight: 600; }
.an-hy-table td.is-bad { color: #E8763F; font-weight: 600; }
.an-hy-table td.is-derived { color: #2EA4D1; }
.an-hy-rownote td { color: var(--an-text-2, #A2A9A6); font-size: .8125rem; line-height: 1.6; padding-top: 0; }
.an-hy-why { max-width: 46ch; color: var(--an-text-2, #A2A9A6); line-height: 1.55; }
.an-hy-dim { color: var(--an-text-2, #A2A9A6); font-size: .8125rem; line-height: 1.6; display: block; }

/* ── figures ──────────────────────────────────────────────────────── */

.an-hy-figs { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--an-space-4, 16px); margin: var(--an-space-4, 16px) 0 0; }
.an-hy-figs.is-wide { margin-bottom: var(--an-space-5, 24px); }
.an-hy-figs dt { font: 600 .72rem/1 var(--an-font-mono, monospace); letter-spacing: .08em; text-transform: uppercase; color: var(--an-text-2, #A2A9A6); margin-bottom: 6px; }
.an-hy-figs dd { margin: 0; font: 600 1.3rem/1.1 var(--an-font-ui, system-ui); }

.an-hy-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--an-space-4, 16px); margin: 0 0 var(--an-space-5, 24px); }
.an-hy-meta dt { font: 600 .72rem/1 var(--an-font-mono, monospace); letter-spacing: .08em; text-transform: uppercase; color: var(--an-text-2, #A2A9A6); margin-bottom: 6px; }
.an-hy-meta dd { margin: 0; font-size: .875rem; line-height: 1.55; }

/* ── panels ───────────────────────────────────────────────────────── */

.an-hy-note, .an-hy-verdict, .an-hy-alerts, .an-hy-assist, .an-hy-locked {
	border: 1px solid var(--an-line, #262B2E); border-left: 3px solid #2EA4D1;
	border-radius: var(--an-radius-lg, 16px); background: var(--an-surface, #15181A);
	padding: var(--an-space-5, 24px); margin-bottom: var(--an-space-6, 32px);
}
.an-hy-note h2, .an-hy-verdict h2, .an-hy-alerts h2, .an-hy-assist h2 { font: 600 1.1rem/1.3 var(--an-font-ui, system-ui); margin: 0 0 var(--an-space-4, 16px); }
.an-hy-note p { font-size: .875rem; line-height: 1.7; color: var(--an-text-2, #A2A9A6); max-width: 78ch; }
.an-hy-verdict.is-ok { border-left-color: #5FC07F; }
.an-hy-verdict.is-bad { border-left-color: #E8763F; }
.an-hy-verdict ul, .an-hy-alerts ul { margin: 0 0 var(--an-space-4, 16px); padding-left: 1.2em; }
.an-hy-verdict li, .an-hy-alerts li { font-size: .875rem; line-height: 1.65; margin-bottom: .5em; }
.an-hy-danger { border-left-color: #E8763F; }

.an-hy-lvl { font: 600 .68rem/1 var(--an-font-mono, monospace); letter-spacing: .1em; text-transform: uppercase; padding: 3px 7px; border-radius: 999px; margin-right: 8px; }
.an-hy-alerts li.is-critical .an-hy-lvl { background: rgba(232,118,63,.18); color: #E8763F; }
.an-hy-alerts li.is-warn .an-hy-lvl { background: rgba(240,180,41,.16); color: #F0B429; }

.an-hy-caveat { font-size: .8125rem; line-height: 1.7; color: var(--an-text-2, #A2A9A6); border-top: 1px solid var(--an-line, #262B2E); padding-top: var(--an-space-4, 16px); max-width: 78ch; }
.an-hy-watchdog { font-size: .875rem; line-height: 1.65; color: var(--an-text, #E8EDEA); background: rgba(240,180,41,.08); border-left: 3px solid #F0B429; padding: 12px 16px; border-radius: 8px; margin: var(--an-space-4, 16px) 0; max-width: 82ch; }

.an-hy-code { background: var(--an-surface, #15181A); border: 1px solid var(--an-line, #262B2E); border-radius: 12px; padding: var(--an-space-4, 16px); overflow-x: auto; font: .8125rem/1.6 var(--an-font-mono, monospace); }

.an-hy-assist-body { font-size: .9375rem; line-height: 1.7; white-space: pre-wrap; }

/* ── the store, which is the one page here that is selling ────────── */

.an-hy-tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--an-space-5, 24px); margin-bottom: var(--an-space-7, 48px); }
.an-hy-tier { border: 1px solid var(--an-line, #262B2E); border-radius: var(--an-radius-lg, 16px); background: var(--an-surface, #15181A); padding: var(--an-space-5, 24px); }
.an-hy-tier.is-feature { border-color: rgba(46,164,209,.5); box-shadow: 0 8px 40px -20px rgba(46,164,209,.6); }
.an-hy-tier h2 { font: 600 1.05rem/1 var(--an-font-ui, system-ui); margin: 0 0 8px; }
.an-hy-price { font: 700 2rem/1 var(--an-font-editorial, Georgia, serif); margin: 0 0 4px; background: linear-gradient(92deg,#2EA4D1,#5FC07F); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: #2EA4D1; }
.an-hy-price.is-small { font-size: 1.3rem; }
.an-hy-tier ul { margin: var(--an-space-4, 16px) 0; padding-left: 1.1em; }
.an-hy-tier li { font-size: .875rem; line-height: 1.6; margin-bottom: .45em; color: var(--an-text-2, #A2A9A6); }

@media (max-width: 640px) {
	.an-hy h1 { font-size: 2rem; }
	.an-hy-form { flex-direction: column; align-items: stretch; }
}