/* =====================================================================
   feature-trio.css — index sections #promise (tagline), #company (teaser),
   #themes, #backup. Reuses styles.css tokens; nothing leaks elsewhere.
   ================================================================== */

/* ---------------- Tagline reveal (#promise) ---------------- */
.tagline-reveal { padding: var(--s-9) 0; }
.tagline-reveal p { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.7rem, 4.2vw, 2.6rem); line-height: 1.25; max-width: 680px; margin: 0 auto; text-align: center; text-wrap: balance; }
.tagline-reveal .tw { color: var(--text-1); opacity: .28; transition: opacity .7s cubic-bezier(.32,.72,0,1); }
.tagline-reveal .tw.on { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .tagline-reveal .tw { opacity: 1; transition: none; } }

/* ---------------- Company teaser (#company) ---------------- */
.co-teaser-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-5); margin-top: var(--s-6); }
@media (max-width: 860px) { .co-teaser-grid { grid-template-columns: 1fr; } }
.co-code-chip { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-weight: 700; font-size: 1.05rem; letter-spacing: .12em; background: var(--surface-2); border: 1px dashed var(--border-strong); border-radius: var(--r-2); padding: 6px 12px; color: var(--primary-deep); }
html[data-theme="dark"] .co-code-chip { color: var(--primary); }

/* ---------------- Themes (#themes) ---------------- */
.th-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-4); margin-top: var(--s-6); }
@media (max-width: 1020px) { .th-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .th-grid { grid-template-columns: 1fr; } }
.th-card { border: 1px solid var(--border); border-radius: var(--r-3); overflow: hidden; background: var(--surface); box-shadow: var(--shadow-sm); transition: transform .25s cubic-bezier(.32,.72,0,1), box-shadow .25s; }
.th-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
/* Each card carries its scheme's real palette as custom props; the site's own
   light/dark toggle flips which set paints the preview — mirroring the app's
   "swatches preview in the mode you're in". */
.th-prev { height: 84px; padding: 12px; background: var(--th-bg); position: relative; }
.th-prev .th-bar { height: 12px; width: 70%; border-radius: 6px; background: var(--th-surface); border: 1px solid rgba(0,0,0,.06); margin-bottom: 8px; }
.th-prev .th-bar.b2 { width: 46%; }
.th-prev .th-dots { display: flex; gap: 6px; margin-top: 10px; }
.th-prev .th-dots i { display: block; width: 14px; height: 14px; border-radius: 50%; }
.th-prev .th-dots .d1 { background: var(--th-accent); }
.th-prev .th-dots .d2 { background: var(--th-ink); opacity: .55; }
.th-prev .th-dots .d3 { background: var(--th-surface); border: 1px solid var(--th-ink); }
.th-body { padding: var(--s-3) var(--s-4) var(--s-4); }
.th-body h3 { margin: 0 0 4px; font-size: 1rem; display: flex; align-items: center; gap: 8px; }
.th-body h3 .th-swatch { width: 12px; height: 12px; border-radius: 4px; background: var(--th-accent); flex: none; }
.th-body p { margin: 0; font-size: .86rem; color: var(--text-2); }
/* Light values (default) */
.th-card[data-scheme="basic"]      { --th-bg:#F8FAFC; --th-surface:#FFFFFF; --th-ink:#0F172A; --th-accent:#0891B2; }
.th-card[data-scheme="pro"]        { --th-bg:#FFFFFF; --th-surface:#F6F7F9; --th-ink:#111827; --th-accent:#2563EB; }
.th-card[data-scheme="cappuccino"] { --th-bg:#F4EDE2; --th-surface:#FBF6EE; --th-ink:#3A2F26; --th-accent:#A9714B; }
.th-card[data-scheme="homebrew"]   { --th-bg:#F2F7F2; --th-surface:#FFFFFF; --th-ink:#08240F; --th-accent:#0F7A22; }
.th-card[data-scheme="solarized"]  { --th-bg:#FDF6E3; --th-surface:#F6EFDC; --th-ink:#073642; --th-accent:#268BD2; }
.th-card[data-scheme="nord"]       { --th-bg:#ECEFF4; --th-surface:#F7F9FC; --th-ink:#2E3440; --th-accent:#4A6D96; }
.th-card[data-scheme="gruvbox"]    { --th-bg:#FBF1C7; --th-surface:#F2E5BC; --th-ink:#3C3836; --th-accent:#427B58; }
.th-card[data-scheme="rosePine"]   { --th-bg:#FAF4ED; --th-surface:#FFFAF3; --th-ink:#575279; --th-accent:#286983; }
/* Dark values — the app's real dark variants, shown when the SITE is dark */
html[data-theme="dark"] .th-card[data-scheme="basic"]      { --th-bg:#0F172A; --th-surface:#1E293B; --th-ink:#F1F5F9; --th-accent:#22D3EE; }
html[data-theme="dark"] .th-card[data-scheme="pro"]        { --th-bg:#0B0E14; --th-surface:#161B24; --th-ink:#F3F5F7; --th-accent:#6BA1FF; }
html[data-theme="dark"] .th-card[data-scheme="cappuccino"] { --th-bg:#1E1712; --th-surface:#2B221B; --th-ink:#F1E5D6; --th-accent:#D9A273; }
html[data-theme="dark"] .th-card[data-scheme="homebrew"]   { --th-bg:#04140A; --th-surface:#0A2412; --th-ink:#2BE314; --th-accent:#2BE314; }
html[data-theme="dark"] .th-card[data-scheme="solarized"]  { --th-bg:#002B36; --th-surface:#073642; --th-ink:#EEE8D5; --th-accent:#41A3E0; }
html[data-theme="dark"] .th-card[data-scheme="nord"]       { --th-bg:#2E3440; --th-surface:#3B4252; --th-ink:#ECEFF4; --th-accent:#88C0D0; }
html[data-theme="dark"] .th-card[data-scheme="gruvbox"]    { --th-bg:#282828; --th-surface:#3C3836; --th-ink:#EBDBB2; --th-accent:#8EC07C; }
html[data-theme="dark"] .th-card[data-scheme="rosePine"]   { --th-bg:#191724; --th-surface:#1F1D2E; --th-ink:#E0DEF4; --th-accent:#9CCFD8; }
.th-foot { display: flex; flex-wrap: wrap; gap: var(--s-3); justify-content: center; margin-top: var(--s-6); }
.th-pill { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: var(--r-pill); background: var(--surface); border: 1px solid var(--border); font-size: .9rem; color: var(--text-2); }
.th-pill :is(.ph, .ph-duotone) { color: var(--primary); font-size: 1.15rem; }

/* ---------------- Backup (#backup) ---------------- */
.bk-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-5); margin-top: var(--s-6); }
@media (max-width: 860px) { .bk-grid { grid-template-columns: 1fr; } }
.bk-quote { max-width: 720px; margin: var(--s-6) auto 0; background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--primary); border-radius: var(--r-2); padding: var(--s-4) var(--s-5); }
.bk-quote strong { display: block; font-family: var(--font-display); font-size: 1.05rem; margin-bottom: 4px; color: var(--text-1); }
.bk-quote p { margin: 0; font-size: .93rem; color: var(--text-2); }