/*
 * deb.griffo.io — layout derived from TemplateMo 621 "Luminary"
 * https://templatemo.com/tm-621-luminary
 *
 * Luminary's shell is kept intact (atmosphere, grain, nav, reveal, typography,
 * silk dividers). What it has no equivalent for — a 41-row comparison table,
 * shell transcripts, sudo/root tabs, 42 package cards — is added below in the
 * same visual language rather than forced into its pricing/testimonial slots.
 *
 * Accent is Debian cerise with Ubuntu orange as the secondary distro colour,
 * replacing the template's neutral silver.
 */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

/* ── Self-hosted Montserrat (fonts-montserrat -> woff2), no CDN ── */
@font-face { font-family: 'Montserrat'; font-weight: 300; font-display: swap;
  src: url('/assets/fonts/Montserrat-Light.woff2') format('woff2'); }
@font-face { font-family: 'Montserrat'; font-weight: 400; font-display: swap;
  src: url('/assets/fonts/Montserrat-Regular.woff2') format('woff2'); }
@font-face { font-family: 'Montserrat'; font-weight: 500; font-display: swap;
  src: url('/assets/fonts/Montserrat-Medium.woff2') format('woff2'); }
@font-face { font-family: 'Montserrat'; font-weight: 600; font-display: swap;
  src: url('/assets/fonts/Montserrat-SemiBold.woff2') format('woff2'); }
@font-face { font-family: 'Montserrat'; font-weight: 700; font-display: swap;
  src: url('/assets/fonts/Montserrat-Bold.woff2') format('woff2'); }

:root {
  --base-deep: #0F1115;
  --base-mid: #161A20;
  --base-soft: #1C2128;
  --slate-warm: #6B7280;
  --slate-light: #9CA3AF;
  --graphite: #2A2E35;
  --graphite-soft: #3D424A;
  --ivory: #E5E7EB;
  --ivory-muted: #C9CDD4;
  --silver: #B0B8C4;
  --panel-bg: rgba(22, 26, 32, 0.55);
  --panel-border: rgba(156, 163, 175, 0.08);
  --silk-ease: cubic-bezier(0.16, 1, 0.3, 1);

  /* Debian cerise / Ubuntu orange */
  --debian: #D70A53;
  --debian-deep: #A80030;
  --debian-glow: rgba(215, 10, 83, 0.35);
  --ubuntu: #E95420;
  --win: #4ADE80;
  --lose: #F87171;
  --mono: 'DejaVu Sans Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

html { scroll-behavior: smooth; font-size: 16px; scroll-padding-top: 90px; }

body {
  font-family: 'Montserrat', system-ui, sans-serif;
  background: var(--base-deep);
  color: var(--ivory);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
}

::selection { background: var(--debian-glow); color: #fff; }

/* ── Atmosphere ── */
.grain {
  position: fixed; inset: 0; pointer-events: none; z-index: 9999;
  opacity: 0.028; mix-blend-mode: overlay;
}
.atmosphere {
  position: fixed; inset: 0; z-index: 0;
  background: linear-gradient(180deg, #0F1115 0%, #161A20 35%, #1C2128 70%, #0D0F13 100%);
}
.atmosphere::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse 80% 50% at 50% -10%, rgba(215,10,83,0.10), transparent 70%);
}

/* ── Nav ── */
.top-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 600;
  display: flex; justify-content: space-between; align-items: center;
  gap: 24px; padding: 20px 40px;
  transition: background 0.8s var(--silk-ease), padding 0.8s var(--silk-ease);
}
.top-nav.scrolled {
  background: rgba(15, 17, 21, 0.85);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  padding: 12px 40px;
  border-bottom: 1px solid var(--panel-border);
}
.nav-brand {
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ivory); text-decoration: none; white-space: nowrap;
}
.nav-brand img { width: 26px; height: auto; }
.nav-brand span { font-weight: 300; color: var(--slate-warm); letter-spacing: 0.12em; }
.nav-links { display: flex; gap: 28px; list-style: none; align-items: center; }
.nav-links a {
  font-size: 12px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--slate-light); text-decoration: none; position: relative; padding: 4px 0;
  transition: color 0.4s var(--silk-ease);
}
.nav-links a::after {
  content: ''; position: absolute; bottom: -2px; left: 0; right: 0; height: 1px;
  background: var(--debian); transform: scaleX(0); transform-origin: left;
  transition: transform 0.4s var(--silk-ease);
}
.nav-links a:hover { color: var(--ivory); }
.nav-links a:hover::after { transform: scaleX(1); }

.nav-actions { display: flex; align-items: center; gap: 14px; }
.nav-cta {
  font-size: 12px; font-weight: 600; letter-spacing: 0.06em;
  padding: 10px 20px; border-radius: 40px; text-decoration: none; white-space: nowrap;
  color: #fff; background: linear-gradient(135deg, var(--debian) 0%, var(--debian-deep) 100%);
  transition: transform 0.4s var(--silk-ease), box-shadow 0.4s var(--silk-ease);
}
.nav-cta:hover { transform: scale(1.03); box-shadow: 0 6px 30px var(--debian-glow); }

.nav-toggle {
  display: none; position: relative; width: 32px; height: 32px;
  background: none; border: none; cursor: pointer;
}
.toggle-bar {
  position: absolute; left: 4px; width: 24px; height: 2px; background: var(--ivory);
  transition: all 0.4s var(--silk-ease);
}
.toggle-bar:nth-child(1) { top: 10px; }
.toggle-bar:nth-child(2) { top: 20px; }
.nav-toggle.active .toggle-bar:nth-child(1) { top: 15px; transform: rotate(45deg); }
.nav-toggle.active .toggle-bar:nth-child(2) { top: 15px; transform: rotate(-45deg); }

/* ── Language dropdown ── */
.lang-dropdown { position: relative; }
.lang-button {
  display: flex; align-items: center; gap: 7px; cursor: pointer;
  font-family: inherit; font-size: 12px; font-weight: 500; color: var(--ivory-muted);
  background: var(--panel-bg); border: 1px solid var(--panel-border);
  padding: 8px 14px; border-radius: 40px;
  transition: border-color 0.3s var(--silk-ease), color 0.3s var(--silk-ease);
}
.lang-button:hover { color: var(--ivory); border-color: rgba(215,10,83,0.4); }
.lang-menu {
  position: absolute; top: calc(100% + 10px); right: 0; min-width: 190px;
  background: rgba(22,26,32,0.97); backdrop-filter: blur(20px);
  border: 1px solid var(--panel-border); border-radius: 14px; padding: 8px;
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: all 0.35s var(--silk-ease); z-index: 700;
}
.lang-menu.active { opacity: 1; visibility: visible; transform: translateY(0); }
.lang-option {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 9px;
  font-size: 13px; color: var(--ivory-muted); text-decoration: none;
  transition: background 0.25s, color 0.25s;
}
.lang-option:hover { background: rgba(215,10,83,0.14); color: var(--ivory); }

/* ── Mobile menu ── */
.mobile-menu {
  position: fixed; inset: 0; z-index: 590; background: rgba(15,17,21,0.98);
  backdrop-filter: blur(24px); opacity: 0; visibility: hidden; pointer-events: none;
  transition: all 0.6s var(--silk-ease);
}
.mobile-menu.open { opacity: 1; visibility: visible; pointer-events: auto; }
.mobile-menu-inner {
  display: flex; flex-direction: column; height: 100%; padding: 100px 32px 40px;
}
.mobile-menu-links { display: flex; flex-direction: column; flex: 1; justify-content: center; gap: 4px; }
.mobile-menu-link {
  font-size: clamp(26px, 7vw, 40px); font-weight: 300; color: var(--ivory);
  text-decoration: none; padding: 10px 0; position: relative;
  opacity: 0; transform: translateY(20px);
  transition: opacity 0.6s var(--silk-ease), transform 0.6s var(--silk-ease), color 0.3s;
}
.mobile-menu.open .mobile-menu-link { opacity: 1; transform: translateY(0); }
.mobile-menu-link:hover { color: var(--debian); }
.mobile-menu-link::before {
  content: attr(data-index); font-size: 11px; color: var(--slate-warm);
  position: absolute; left: -22px; top: 22px; letter-spacing: 0.1em;
}
.mobile-menu.open .mobile-menu-link:nth-child(1) { transition-delay: 0.06s; }
.mobile-menu.open .mobile-menu-link:nth-child(2) { transition-delay: 0.12s; }
.mobile-menu.open .mobile-menu-link:nth-child(3) { transition-delay: 0.18s; }
.mobile-menu.open .mobile-menu-link:nth-child(4) { transition-delay: 0.24s; }
.mobile-menu.open .mobile-menu-link:nth-child(5) { transition-delay: 0.30s; }
.mobile-menu.open .mobile-menu-link:nth-child(6) { transition-delay: 0.36s; }
.mobile-menu.open .mobile-menu-link:nth-child(7) { transition-delay: 0.42s; }

/* ── Side panels ── */
.side-panel {
  position: fixed; top: 50%; transform: translateY(-50%); z-index: 500;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.side-panel.left { left: 18px; }
.side-panel.right { right: 18px; }
.side-label {
  font-size: 9px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--slate-warm);
  writing-mode: vertical-rl;
}
.side-track { width: 1px; height: 90px; background: var(--graphite); position: relative; }
.side-track-fill {
  position: absolute; top: 0; left: 0; width: 100%; height: 0%;
  background: linear-gradient(180deg, var(--debian), transparent);
}
.side-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--graphite-soft); transition: all 0.4s; }
.side-dot.active { background: var(--debian); box-shadow: 0 0 8px var(--debian-glow); }
.side-readout { font-size: 9px; letter-spacing: 0.14em; color: var(--slate-warm); font-variant-numeric: tabular-nums; }

/* ── Announcement banner ── */
.announce {
  position: relative; z-index: 10;
  border-bottom: 1px solid rgba(215,10,83,0.22);
  background: linear-gradient(135deg, rgba(215,10,83,0.13) 0%, rgba(168,0,48,0.08) 100%);
  padding: 82px 24px 14px;
  text-align: center;
}
.announce-inner { max-width: 940px; margin: 0 auto; }
.announce p { font-size: 13.5px; color: var(--ivory-muted); line-height: 1.7; }
.announce strong { color: var(--ivory); }
.announce code {
  font-family: var(--mono); font-size: 0.9em;
  background: rgba(0,0,0,0.32); padding: 1px 6px; border-radius: 4px; color: var(--ivory);
}
.announce a { color: #FF7BA8; font-weight: 600; text-decoration: none; }
.announce a:hover { text-decoration: underline; }
/* the cutover notice is the reason the banner exists — give it separation */
.announce-notice {
  margin-top: 8px; padding-top: 8px;
  border-top: 1px solid rgba(215,10,83,0.18);
}
.announce-notice time { white-space: nowrap; }

/* ── Layout ── */
.main { position: relative; z-index: 10; max-width: 1120px; margin: 0 auto; padding: 0 40px; }
.section { padding: 96px 0; position: relative; }
.section-tag {
  font-size: 11px; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--debian); margin-bottom: 16px;
}
/* The eyebrow lives inside its <h2> so the keyword counts toward the heading.
   Restore the block layout and normal line-height the <p> used to provide —
   the h2's 1.18 line-height and 200 weight must not leak into it. */
.section-title .section-tag {
  /* 1.6 is what the <p> inherited from body; 1.5 shifts everything below by 1px */
  display: block; line-height: 1.6; font-weight: 600;
}
.section-title {
  font-size: clamp(28px, 4.4vw, 46px); font-weight: 200; line-height: 1.18;
  letter-spacing: -0.02em; margin-bottom: 20px;
}
.section-title strong { font-weight: 600; }
.section-body { font-size: 15px; color: var(--ivory-muted); max-width: 620px; line-height: 1.8; }
.section-body a, .pricing-note a, .pricing-desc a {
  color: #FF7BA8; text-decoration: none; border-bottom: 1px solid rgba(255,123,168,0.3);
}
.section-body a:hover, .pricing-note a:hover, .pricing-desc a:hover { border-bottom-color: #FF7BA8; }
.section-center { text-align: center; }
.section-center .section-body { margin: 0 auto; }
.silk-divider {
  width: 100px; height: 1px; margin: 0 auto;
  background: linear-gradient(90deg, transparent, rgba(215,10,83,0.5), transparent);
}
h3.block-title {
  font-size: 17px; font-weight: 600; margin: 34px 0 14px; color: var(--ivory);
  letter-spacing: -0.01em;
}
h4.block-subtitle {
  font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  margin: 22px 0 12px; color: var(--slate-light);
}
.prose { font-size: 15px; color: var(--ivory-muted); line-height: 1.85; }
.prose + .prose { margin-top: 14px; }
.prose a, .link { color: #FF7BA8; text-decoration: none; border-bottom: 1px solid rgba(255,123,168,0.3); }
.prose a:hover, .link:hover { border-bottom-color: #FF7BA8; }
.prose code, .inline-code {
  font-family: var(--mono); font-size: 0.88em;
  background: rgba(0,0,0,0.35); padding: 2px 6px; border-radius: 4px;
  color: var(--ivory); border: 1px solid var(--panel-border);
}
.prose ul { list-style: none; margin: 16px 0; }
.prose ul li { padding: 6px 0 6px 26px; position: relative; }
.prose ul li::before {
  content: '›'; position: absolute; left: 8px; color: var(--debian); font-weight: 700;
}
.prose ul.check li::before { content: '✓'; font-size: 12px; top: 7px; }

/* ── Buttons ── */
.btn-primary, .btn-secondary {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 600; letter-spacing: 0.04em;
  padding: 14px 30px; border-radius: 40px; text-decoration: none; cursor: pointer;
  transition: transform 0.4s var(--silk-ease), box-shadow 0.4s var(--silk-ease),
              background 0.4s var(--silk-ease), border-color 0.4s var(--silk-ease);
}
.btn-primary {
  color: #fff; border: 1px solid transparent;
  background: linear-gradient(135deg, var(--debian) 0%, var(--debian-deep) 100%);
}
.btn-primary:hover { transform: scale(1.02); box-shadow: 0 8px 40px var(--debian-glow); }
.btn-secondary {
  color: var(--ivory); background: transparent; border: 1px solid var(--graphite-soft);
}
.btn-secondary:hover { border-color: var(--debian); color: #fff; transform: scale(1.02); }

/* ── Hero ── */
.hero {
  position: relative; min-height: 88vh;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  text-align: center; padding: 60px 0 80px;
}
.hero-grid {
  position: absolute; inset: 0; opacity: 0.5; pointer-events: none;
  background-image: linear-gradient(rgba(156,163,175,0.045) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(156,163,175,0.045) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 60% 50% at 50% 40%, #000 20%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 60% 50% at 50% 40%, #000 20%, transparent 75%);
}
.hero-logos { display: flex; align-items: center; justify-content: center; gap: 26px; margin-bottom: 26px; }
.hero-logos img { height: 52px; width: auto; opacity: 0.92; transition: opacity 0.3s, transform 0.3s; }
.hero-logos a:hover img { opacity: 1; transform: translateY(-2px); }
.hero-badge {
  display: inline-flex; align-items: center; gap: 10px; margin-bottom: 24px;
  padding: 7px 14px; border-radius: 40px; text-decoration: none;
  background: var(--panel-bg); border: 1px solid rgba(215,10,83,0.3);
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ivory-muted);
  transition: border-color 0.3s var(--silk-ease), transform 0.3s var(--silk-ease);
}
.hero-badge:hover { border-color: var(--debian); transform: translateY(-1px); }
.hero-badge img { display: block; height: 20px; width: auto; }
.hero-badge-dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--win);
  box-shadow: 0 0 10px rgba(74,222,128,0.7); animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }
.hero h1 {
  font-size: clamp(38px, 7.5vw, 82px); font-weight: 200; line-height: 1.04;
  letter-spacing: -0.035em; margin-bottom: 22px;
}
.hero h1 em {
  font-style: normal; font-weight: 600;
  background: linear-gradient(120deg, var(--debian) 0%, var(--ubuntu) 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.hero-sub { font-size: clamp(14px, 1.7vw, 17px); color: var(--ivory-muted); max-width: 640px; line-height: 1.8; }
.hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; margin-top: 34px; }
.hero-uptime { margin-top: 26px; }
.hero-metrics {
  display: flex; gap: clamp(28px, 6vw, 72px); flex-wrap: wrap; justify-content: center; margin-top: 62px;
}
.metric-value {
  font-size: clamp(28px, 4vw, 42px); font-weight: 200; letter-spacing: -0.02em;
  color: var(--ivory); font-variant-numeric: tabular-nums;
}
.metric-value span:last-child { color: var(--debian); }
.metric-label {
  font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--slate-warm); margin-top: 6px;
}

/* ── Ticker ── */
.logo-ticker { padding: 30px 0 10px; overflow: hidden; position: relative; }
.logo-ticker-label {
  text-align: center; font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--slate-warm); margin-bottom: 22px;
}
.ticker-viewport {
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.ticker-track { display: flex; align-items: center; gap: 22px; width: max-content; animation: ticker 48s linear infinite; }
.logo-ticker:hover .ticker-track { animation-play-state: paused; }
@keyframes ticker { to { transform: translateX(-50%); } }
.ticker-item { font-size: 13px; font-weight: 500; color: var(--slate-light); white-space: nowrap; }
.ticker-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--debian); opacity: 0.6; }

/* ── Version comparison table ── */
.table-wrap {
  overflow-x: auto; border: 1px solid var(--panel-border); border-radius: 16px;
  background: var(--panel-bg); margin-top: 26px;
}
.vc-table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 620px; }
.vc-table thead th {
  text-align: left; padding: 15px 18px; font-size: 10px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--slate-light);
  border-bottom: 1px solid var(--panel-border); white-space: nowrap;
  background: rgba(15,17,21,0.6); position: sticky; top: 0;
}
.vc-table tbody tr { border-bottom: 1px solid rgba(156,163,175,0.05); transition: background 0.25s; }
.vc-table tbody tr:last-child { border-bottom: none; }
.vc-table tbody tr:hover { background: rgba(215,10,83,0.05); }
.vc-table td { padding: 12px 18px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.vc-table td a { color: var(--ivory); text-decoration: none; font-weight: 600; }
.vc-table td a:hover { color: var(--debian); }
.vc-win { color: var(--win); }
.vc-lose { color: var(--slate-warm); }
.vc-lose .vc-version { color: var(--lose); }
.vc-flag { margin-left: 5px; font-size: 11px; }

/* ── Code blocks ── */
.code-block {
  position: relative; margin: 14px 0;
  background: #0B0D10; border: 1px solid var(--panel-border); border-radius: 12px;
}
.code-block pre {
  margin: 0; padding: 18px 20px; overflow-x: auto;
  font-family: var(--mono); font-size: 12.5px; line-height: 1.75; color: #CBD5E1;
}
.code-block .comment { color: var(--slate-warm); }
.copy-btn {
  position: absolute; top: 10px; right: 10px;
  font-family: inherit; font-size: 10px; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--slate-light); cursor: pointer;
  background: rgba(22,26,32,0.9); border: 1px solid var(--panel-border);
  padding: 6px 11px; border-radius: 7px; opacity: 0;
  transition: opacity 0.3s, color 0.3s, border-color 0.3s;
}
.code-block:hover .copy-btn, .copy-btn:focus { opacity: 1; }
.copy-btn:hover { color: var(--ivory); border-color: var(--debian); }
.copy-btn.copied { color: var(--win); border-color: var(--win); }

/* ── sudo / root toggle ──
   One switch for the whole page: the state lives in data-install-variant on
   <html>, so every transcript flips together with no per-block JS. Default is
   set server-side, so there is no flash of the wrong variant on load. */
.install-block { margin: 26px 0; }
/* Hidden until the boot snippet marks the document as scripted: a toggle that
   cannot toggle is worse than no toggle. */
.variant-toggle { display: none; }
:root.js .variant-toggle {
  display: inline-flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 4px 0 22px;
}
.variant-toggle-label {
  font-size: 10px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--slate-warm);
}
.variant-switch {
  display: inline-flex; padding: 3px; border-radius: 40px;
  background: rgba(0,0,0,0.28); border: 1px solid var(--panel-border);
}
.variant-btn {
  font-family: inherit; font-size: 11px; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; cursor: pointer; color: var(--slate-light);
  background: transparent; border: none; padding: 8px 18px; border-radius: 40px;
  transition: color 0.3s var(--silk-ease), background 0.3s var(--silk-ease);
}
.variant-btn:hover { color: var(--ivory); }
.variant-btn[aria-pressed="true"] {
  color: #fff; background: linear-gradient(135deg, var(--debian) 0%, var(--debian-deep) 100%);
}

/* the switch itself: one attribute decides which form every block shows */
.variant { display: none; }
:root[data-install-variant="root"] .variant-root { display: block; }
:root:not([data-install-variant="root"]) .variant-sudo { display: block; }

/* ── Notices ── */
.notice-box, .highlight-box {
  border-radius: 14px; padding: 20px 24px; font-size: 14px; line-height: 1.8;
  color: var(--ivory-muted); margin: 22px 0;
  border: 1px solid var(--panel-border); background: var(--panel-bg);
}
.highlight-box { border-left: 2px solid var(--debian); }
.notice-box { border-left: 2px solid var(--ubuntu); }
.notice-box strong, .highlight-box strong { color: var(--ivory); }

/* ── "Request a package" prompt above the grid ── */
.request-note {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 18px;
  padding: 11px 18px; border-radius: 40px; font-size: 13.5px; color: var(--ivory-muted);
  background: var(--panel-bg); border: 1px dashed rgba(215,10,83,0.35);
}
.request-note a { color: #FF7BA8; font-weight: 600; text-decoration: none; }
.request-note a:hover { text-decoration: underline; }
.request-sep { color: var(--slate-warm); }
@media (max-width: 560px) { .request-note { display: flex; flex-wrap: wrap; } }

/* ── Package cards ── */
.package-grid {
  display: grid; gap: 16px; margin-top: 30px;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
}
.package-card {
  display: flex; flex-direction: column; padding: 22px;
  background: var(--panel-bg); border: 1px solid var(--panel-border); border-radius: 16px;
  transition: transform 0.5s var(--silk-ease), border-color 0.5s var(--silk-ease),
              box-shadow 0.5s var(--silk-ease);
}
.package-card:hover {
  transform: translateY(-3px); border-color: rgba(215,10,83,0.35);
  box-shadow: 0 12px 40px rgba(0,0,0,0.35);
}
.package-name {
  display: flex; align-items: center; gap: 10px;
  font-size: 15px; font-weight: 600; color: var(--ivory); margin-bottom: 10px;
}
.package-emoji { font-size: 19px; line-height: 1; }
.package-description { font-size: 13px; color: var(--slate-light); line-height: 1.7; flex: 1; }
.package-links { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
.package-link {
  font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-decoration: none;
  padding: 7px 14px; border-radius: 40px; color: var(--ivory-muted);
  border: 1px solid var(--panel-border); background: rgba(0,0,0,0.2);
  transition: all 0.3s var(--silk-ease);
}
.package-link:hover { color: #fff; border-color: var(--debian); background: rgba(215,10,83,0.16); }
.package-link-ubuntu:hover { border-color: var(--ubuntu); background: rgba(233,84,32,0.16); }

/* ── Chips: categories, pipelines, distro badges ── */
.chip-row { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 18px; }
.chip {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12px; font-weight: 500; text-decoration: none; color: var(--ivory-muted);
  padding: 8px 15px; border-radius: 40px;
  background: var(--panel-bg); border: 1px solid var(--panel-border);
  transition: all 0.3s var(--silk-ease);
}
.chip:hover { color: #fff; border-color: rgba(215,10,83,0.45); transform: translateY(-1px); }
.chip-debian { border-color: rgba(215,10,83,0.28); }
.chip-ubuntu { border-color: rgba(233,84,32,0.28); }
.chip-static { cursor: default; }
.chip-static:hover { transform: none; color: var(--ivory-muted); }


/* ── Pricing ── */
.pricing-grid {
  display: grid; gap: 20px; margin: 42px auto 0; text-align: left;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  /* two cards would otherwise stretch the full 1120px and read as slabs */
  max-width: 760px;
}
.pricing-card {
  position: relative; display: flex; flex-direction: column; padding: 32px 28px;
  background: var(--panel-bg); border: 1px solid var(--panel-border); border-radius: 20px;
  transition: transform 0.5s var(--silk-ease), border-color 0.5s var(--silk-ease),
              box-shadow 0.5s var(--silk-ease);
}
.pricing-card:hover { transform: translateY(-4px); box-shadow: 0 16px 50px rgba(0,0,0,0.4); }
.pricing-card.featured {
  border-color: rgba(215,10,83,0.5);
  background: linear-gradient(180deg, rgba(215,10,83,0.10) 0%, var(--panel-bg) 55%);
  box-shadow: 0 10px 44px rgba(215,10,83,0.14);
}
.pricing-badge {
  position: absolute; top: -11px; left: 28px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: #fff; padding: 5px 13px; border-radius: 40px;
  background: linear-gradient(135deg, var(--debian) 0%, var(--debian-deep) 100%);
}
.pricing-tier {
  font-size: 11px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--slate-light); margin-bottom: 16px;
}
.pricing-price { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.price-value {
  font-size: clamp(34px, 4.4vw, 46px); font-weight: 200; letter-spacing: -0.03em;
  color: var(--ivory); font-variant-numeric: tabular-nums;
}
.price-period { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--slate-warm); }
.pricing-note { font-size: 12px; color: var(--slate-warm); margin-top: 8px; }
.pricing-desc {
  font-size: 13.5px; color: var(--ivory-muted); line-height: 1.7;
  margin: 18px 0 0; padding-top: 18px; border-top: 1px solid var(--panel-border);
}
.pricing-features { list-style: none; margin: 18px 0 26px; flex: 1; }
.pricing-features li {
  position: relative; padding: 7px 0 7px 24px; font-size: 13px; color: var(--ivory-muted);
}
.pricing-features li::before {
  content: '✓'; position: absolute; left: 2px; color: var(--win); font-size: 11px; top: 8px;
}
.pricing-card .btn-primary, .pricing-card .btn-secondary { justify-content: center; }
.pricing-foot {
  font-size: 12.5px; color: var(--slate-warm); line-height: 1.8;
  max-width: 620px; margin: 30px auto 0;
}
.pricing-foot a { color: #FF7BA8; text-decoration: none; }
.pricing-foot a:hover { text-decoration: underline; }
/* Footnote marker: quiet enough to sit on a CTA without competing with it. */
.pricing-star { font-size: 0.75em; opacity: 0.7; margin-left: 2px; }
.pricing-terms {
  font-size: 12px; color: var(--slate-warm); line-height: 1.7;
  max-width: 620px; margin: 26px auto 0;
}
.pricing-terms .pricing-star { margin: 0 3px 0 0; }
.pricing-terms a { color: var(--slate-light); text-decoration: underline; text-underline-offset: 2px; }
.pricing-terms a:hover { color: #FF7BA8; }

/* ── FAQ ── */
.faq-list { max-width: 780px; margin: 34px auto 0; text-align: left; }
.faq-item { border-bottom: 1px solid var(--panel-border); }
.faq-question {
  width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 20px;
  font-family: inherit; font-size: 15px; font-weight: 500; text-align: left; color: var(--ivory);
  background: none; border: none; cursor: pointer; padding: 22px 0;
  transition: color 0.3s;
}
.faq-question:hover { color: var(--debian); }
.faq-icon { position: relative; width: 13px; height: 13px; flex-shrink: 0; }
.faq-icon::before, .faq-icon::after {
  content: ''; position: absolute; background: var(--debian); transition: transform 0.4s var(--silk-ease);
}
.faq-icon::before { top: 6px; left: 0; width: 13px; height: 1px; }
.faq-icon::after { top: 0; left: 6px; width: 1px; height: 13px; }
.faq-item.open .faq-icon::after { transform: rotate(90deg); opacity: 0; }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.5s var(--silk-ease); }
.faq-answer-inner { padding: 0 0 22px; font-size: 14px; color: var(--ivory-muted); line-height: 1.85; }

/* ── Support / footer CTA ── */
.footer-cta { text-align: center; padding: 96px 0 60px; }
.footer-ctas { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 32px; }
.site-footer {
  position: relative; z-index: 10; border-top: 1px solid var(--panel-border);
  padding: 40px; text-align: center;
}
.site-footer p { font-size: 12.5px; color: var(--slate-warm); line-height: 1.9; }
.site-footer p + p { font-size: 11px; }
.site-footer a { color: var(--slate-light); text-decoration: none; }
.site-footer a:hover { color: var(--debian); }
.footer-credit { color: var(--slate-warm); }

/* ── Reveal ── */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.9s var(--silk-ease), transform 0.9s var(--silk-ease); }
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-d1 { transition-delay: 0.08s; }
.reveal-d2 { transition-delay: 0.16s; }
.reveal-d3 { transition-delay: 0.24s; }
.reveal-d4 { transition-delay: 0.32s; }

/* ── Responsive ── */
@media (max-width: 1180px) { .side-panel { display: none; } }
@media (max-width: 900px) {
  .nav-links { display: none; }
  .nav-toggle { display: block; }
  .nav-cta { display: none; }
  .main { padding: 0 24px; }
  .section { padding: 70px 0; }
  .announce { padding-top: 90px; }
}
@media (max-width: 560px) {
  .top-nav { padding: 16px 20px; }
  .hero-logos img { height: 40px; }
  .hero-metrics { gap: 26px; }
  .package-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
                           transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Compatibility layer for migrated page bodies.

   The 567 tool pages keep the markup they were written with — .container,
   .header, .content, a family of callout boxes, feature grids. Restyling them
   here rather than rewriting 567 fragment bodies means every page inherits the
   new chrome immediately, and the bodies stay diffable against their history.
   ═══════════════════════════════════════════════════════════════════════════ */

.container {
  position: relative; z-index: 10;
  max-width: 900px; margin: 0 auto; padding: 0 40px;
}
.container > .header {
  padding: 40px 0 24px; text-align: center;
}
.container > .header h1 {
  font-size: clamp(28px, 4.6vw, 46px); font-weight: 200; line-height: 1.15;
  letter-spacing: -0.025em; margin-bottom: 14px;
}
.container .subtitle {
  font-size: 15px; color: var(--ivory-muted); line-height: 1.7;
  max-width: 640px; margin: 0 auto;
}
.container > .content { padding-bottom: 40px; }
.container > .content > h2 {
  font-size: clamp(21px, 2.6vw, 27px); font-weight: 300; letter-spacing: -0.015em;
  margin: 44px 0 16px; color: var(--ivory);
}
.container > .content > h3, .container .install-block > h3 {
  font-size: 16px; font-weight: 600; margin: 30px 0 12px; color: var(--ivory);
}
.container > .content h4 {
  font-size: 14px; font-weight: 600; margin: 0 0 10px; color: var(--ivory);
}
.container > .content p { font-size: 15px; color: var(--ivory-muted); line-height: 1.85; margin: 12px 0; }
.container > .content a { color: #FF7BA8; text-decoration: none; border-bottom: 1px solid rgba(255,123,168,0.3); }
.container > .content a:hover { border-bottom-color: #FF7BA8; }
.container > .content code {
  font-family: var(--mono); font-size: 0.88em; background: rgba(0,0,0,0.35);
  padding: 2px 6px; border-radius: 4px; color: var(--ivory); border: 1px solid var(--panel-border);
}
.container ul { list-style: none; margin: 14px 0; }
.container ul li { position: relative; padding: 6px 0 6px 24px; font-size: 14.5px;
                   color: var(--ivory-muted); line-height: 1.75; }
.container ul li::before { content: '›'; position: absolute; left: 7px; color: var(--debian); font-weight: 700; }
.container ul li strong { color: var(--ivory); }

.back-link {
  display: inline-block; margin-bottom: 8px; font-size: 12px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--slate-light);
  text-decoration: none; border: none !important;
}
.back-link:hover { color: var(--debian); }

.version-badge {
  display: inline-block; margin-top: 16px; padding: 7px 16px; border-radius: 40px;
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ivory-muted); background: var(--panel-bg);
  border: 1px solid rgba(215,10,83,0.3);
}

/* the two-row "us vs the archive" table the generator injects */
.version-compare, .version-compare-index { margin: 22px 0; }
.version-compare table, .version-compare-index table {
  width: 100%; border-collapse: collapse; font-size: 13.5px;
  background: var(--panel-bg); border: 1px solid var(--panel-border); border-radius: 14px;
  overflow: hidden;
}
.version-compare th, .version-compare-index th {
  text-align: left; padding: 12px 16px; font-size: 10px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--slate-light);
  border-bottom: 1px solid var(--panel-border); background: rgba(15,17,21,0.6);
}
.version-compare td, .version-compare-index td {
  padding: 11px 16px; font-variant-numeric: tabular-nums;
  border-bottom: 1px solid rgba(156,163,175,0.05);
}
.version-compare tr:last-child td, .version-compare-index tr:last-child td { border-bottom: none; }

/* related links / release links the generator appends */
.tool-extras { margin-top: 44px; padding-top: 8px; border-top: 1px solid var(--panel-border); }
.tool-extras h2 { font-size: 17px !important; font-weight: 600 !important; margin: 26px 0 12px !important; }
.tool-extras ul { margin: 10px 0; }
.tool-extras a { color: #FF7BA8; text-decoration: none; }
.tool-extras a:hover { text-decoration: underline; }

/* feature grids */
.feature-grid {
  display: grid; gap: 14px; margin: 22px 0;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.feature-card {
  padding: 18px 20px; border-radius: 14px;
  background: var(--panel-bg); border: 1px solid var(--panel-border);
  transition: border-color 0.4s var(--silk-ease), transform 0.4s var(--silk-ease);
}
.feature-card:hover { border-color: rgba(215,10,83,0.3); transform: translateY(-2px); }
.feature-card h4 { margin-bottom: 8px; }
.feature-card p { font-size: 13.5px !important; margin: 0 !important; }

/* callout boxes — one shared treatment, accent varies by intent */
.comparison-box, .performance-box, .productivity-box, .integration-box,
.philosophy-box, .benchmark-box, .pain-point-box, .freedom-box, .warning-box,
.alternatives-box, .ide-box, .solution-box, .problem-box, .package-variants {
  margin: 22px 0; padding: 20px 24px; border-radius: 14px;
  background: var(--panel-bg); border: 1px solid var(--panel-border);
  border-left: 2px solid var(--debian);
}
.warning-box, .pain-point-box, .problem-box { border-left-color: var(--ubuntu); }
.benchmark-box, .performance-box { border-left-color: var(--win); }
.comparison-box h4, .performance-box h4, .productivity-box h4, .integration-box h4,
.philosophy-box h4, .benchmark-box h4, .pain-point-box h4, .freedom-box h4,
.warning-box h4, .alternatives-box h4, .ide-box h4, .solution-box h4, .problem-box h4 {
  font-size: 14px; letter-spacing: -0.01em;
}

.variant-card {
  margin: 12px 0; padding: 14px 18px; border-radius: 12px;
  background: rgba(0,0,0,0.22); border: 1px solid var(--panel-border);
}
.variant-title { font-weight: 600; color: var(--ivory); margin-bottom: 6px; font-size: 14px; }

.controls-table { width: 100%; border-collapse: collapse; font-size: 13.5px; margin: 18px 0; }
.controls-table th, .controls-table td {
  text-align: left; padding: 10px 14px; border-bottom: 1px solid rgba(156,163,175,0.07);
  color: var(--ivory-muted);
}
.controls-table th { color: var(--slate-light); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; }
.controls-table code { white-space: nowrap; }

.install-block > h3 { margin-top: 0; }

@media (max-width: 700px) {
  .container { padding: 0 20px; }
  .feature-grid { grid-template-columns: 1fr; }
}

/* Step wrappers that never had tabs (just a heading + one transcript) get the
   same treatment as the collapsed ones. Both spellings occur in the corpus. */
.install-steps, .installer-steps { margin: 26px 0; }
.install-steps > h3, .installer-steps > h3 { margin-top: 0; }
.counter { font-variant-numeric: tabular-nums; }