/* NavoFlo V8.68.0 — HOME DECK: a horizontal tab banner, one idea per tab, each tab fits the screen (no scroll on a
   desktop viewport ≥ 720 px tall; small screens scroll inside the panel). Builds on styles.css tokens. */
/* no overflow rule on <body>: it would turn it into the scroll container and break the sticky header / tab bar hit-testing */
.landing-deck .site-header { position: sticky; top: 0; }
.deck { --deck-top: 77px; display: flex; flex-direction: column; min-height: calc(100dvh - var(--deck-top)); }

/* ── tab banner ───────────────────────────────────────────────────────────────────────────── */
.deck-bar { position: sticky; top: var(--deck-top); z-index: 90; border-bottom: 1px solid rgba(255,255,255,.08); background: rgba(8,13,18,.86); backdrop-filter: blur(10px); }
.deck-tabs { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; padding: 8px 0; }
.deck-tabs::-webkit-scrollbar { display: none; }
.deck-tab { appearance: none; flex: 1 1 auto; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; padding: 9px 14px; border: 1px solid transparent; border-radius: 10px; background: transparent; color: var(--muted); font: 700 13px/1 inherit; letter-spacing: .01em; cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.deck-tab-n { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; border: 1px solid rgba(255,255,255,.14); font-size: 11px; color: var(--muted); }
.deck-tab:hover { color: var(--text); background: rgba(255,255,255,.04); }
.deck-tab[aria-selected="true"] { color: var(--text); background: rgba(53,211,154,.1); border-color: rgba(53,211,154,.35); }
.deck-tab[aria-selected="true"] .deck-tab-n { background: var(--accent); color: #06120d; border-color: var(--accent); }
.deck-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ── panels ─────────────────────────────────────────────────────────────────── */
.deck-panel { position: relative; flex: 1; display: none; align-items: center; padding: clamp(18px, 3.2vh, 44px) 0 clamp(54px, 7vh, 72px); overflow: auto; }
.deck-panel.is-active { display: flex; animation: deck-in .28s ease; }
@keyframes deck-in { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
.deck-panel > .container { width: 100%; }
.panel-grid.two { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(22px, 4vw, 56px); align-items: center; }
.panel-stack { display: flex; flex-direction: column; gap: clamp(14px, 2.6vh, 28px); }
.panel-head { text-align: center; max-width: 820px; margin: 0 auto; }
.panel-head p { color: var(--muted); margin: 8px 0 0; font-size: clamp(15px, 1.25vw, 18px); }
.deck h1 { font-size: clamp(32px, 4.4vw, 58px); line-height: 1.04; letter-spacing: -.02em; margin: 14px 0 16px; }
.deck h2 { font-size: clamp(26px, 3.2vw, 42px); line-height: 1.08; letter-spacing: -.02em; margin: 0 0 10px; }
.deck h1 span, .deck h2 span { color: var(--accent-2, var(--accent)); }
.deck .lead { font-size: clamp(16px, 1.35vw, 20px); line-height: 1.45; color: var(--text); margin: 0 0 10px; }
.panel-copy p { color: var(--muted); font-size: clamp(14.5px, 1.1vw, 16.5px); line-height: 1.55; margin: 0 0 10px; }
.panel-copy p strong { color: var(--text); }
.deck-quote { margin: 14px 0 18px; padding: 12px 16px; border-left: 3px solid var(--accent); background: rgba(53,211,154,.06); border-radius: 0 10px 10px 0; color: var(--text); font-size: clamp(15px, 1.2vw, 18px); line-height: 1.45; }
.deck-quote.big { font-size: clamp(18px, 1.7vw, 25px); }
.deck-quote strong { color: var(--text); }
.deck-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.panel-foot { text-align: center; color: var(--muted); font-size: 13.5px; margin: 0; }

/* next button */
.deck-next { position: absolute; right: max(16px, calc((100% - 1180px) / 2)); bottom: 14px; appearance: none; display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.04); color: var(--text); font: 700 13px/1 inherit; cursor: pointer; }
.deck-next:hover { border-color: var(--accent); color: var(--accent-2, var(--accent)); }

/* ── tab 1 : before / after ─────────────────────────────────────────────────── */
.before-after { display: grid; grid-template-columns: minmax(0, .8fr) auto minmax(0, 1.2fr); gap: 12px; align-items: stretch; }
.ba-col { padding: 16px; border-radius: 14px; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.03); display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ba-after { border-color: rgba(53,211,154,.35); background: rgba(53,211,154,.06); box-shadow: 0 16px 48px rgba(0,0,0,.28); }
.ba-label { font-size: 11px; letter-spacing: .14em; color: var(--muted); font-weight: 800; }
.ba-after .ba-label { color: var(--accent); }
.ba-col > strong { font-size: clamp(15px, 1.2vw, 18px); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips span { padding: 5px 9px; border-radius: 8px; border: 1px dashed rgba(255,255,255,.18); color: var(--muted); font-size: 12.5px; font-weight: 700; }
.ba-arrow { align-self: center; color: var(--accent); font-size: 26px; }
.ba-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.ba-list li { position: relative; padding-left: 20px; color: var(--muted); font-size: clamp(13.5px, 1vw, 15px); line-height: 1.4; }
.ba-list li::before { content: "✓"; position: absolute; left: 0; color: var(--accent); font-weight: 800; }
.ba-list b { color: var(--text); }

/* ── tab 2 : steps rail ─────────────────────────────────────────────────────── */
.steps-rail { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; counter-reset: none; }
.steps-rail li { position: relative; padding: 18px 16px 16px; border-radius: 14px; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.03); min-height: 100%; }
.steps-rail li:nth-child(2), .steps-rail li:nth-child(3) { border-color: rgba(53,211,154,.35); background: rgba(53,211,154,.06); }
.steps-rail li::after { content: "→"; position: absolute; right: -14px; top: 22px; color: var(--accent); font-weight: 800; }
.steps-rail li:last-child::after { content: none; }
.step-n { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--accent); color: #06120d; font-weight: 900; font-size: 14px; margin-bottom: 10px; }
.steps-rail h3 { margin: 0 0 6px; font-size: clamp(15px, 1.15vw, 18px); line-height: 1.25; }
.steps-rail p { margin: 0; color: var(--muted); font-size: clamp(13px, .95vw, 14.5px); line-height: 1.45; }

/* ── tab 3 : facts grid ─────────────────────────────────────────────────────── */
.facts-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.facts-grid li { display: grid; grid-template-columns: 34px 1fr; grid-template-rows: auto auto; column-gap: 10px; padding: 13px 14px; border-radius: 12px; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.03); }
.fact-ic { grid-row: 1 / span 2; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: rgba(53,211,154,.12); color: var(--accent); font-size: 17px; font-weight: 800; }
.facts-grid b { font-size: clamp(14px, 1.05vw, 16px); }
.facts-grid small { color: var(--muted); font-size: 12.5px; line-height: 1.35; }

/* ── tab 4 : org chart ──────────────────────────────────────────────────────── */
.orgchart { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.25fr) auto minmax(0, 1.1fr) auto minmax(0, 1.1fr); gap: 10px; align-items: center; }
.org-node { position: relative; padding: 14px 15px; border-radius: 14px; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.03); display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.org-k { font-size: 10.5px; letter-spacing: .14em; color: var(--muted); font-weight: 800; }
.org-node > strong { font-size: clamp(15px, 1.2vw, 19px); }
.org-node > small { color: var(--muted); font-size: 12.5px; line-height: 1.4; }
.org-core { border-color: rgba(53,211,154,.45); background: rgba(53,211,154,.08); box-shadow: 0 16px 48px rgba(0,0,0,.28); }
.org-core .org-k { color: var(--accent); }
.org-feed { margin-top: 8px; padding: 8px 10px; border-radius: 9px; border: 1px dashed rgba(53,211,154,.45); display: flex; flex-direction: column; gap: 2px; }
.org-feed span { font-size: 12.5px; font-weight: 800; color: var(--accent-2, var(--accent)); }
.org-feed small { color: var(--muted); font-size: 11.5px; line-height: 1.35; }
.org-split { display: flex; flex-direction: column; gap: 10px; }
.org-app .org-k { color: #73c8ff; }
.org-out { border-color: rgba(115,200,255,.35); background: rgba(115,200,255,.06); }
.org-out .org-k { color: #73c8ff; }
.org-dest { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.org-dest span { padding: 4px 8px; border-radius: 7px; background: rgba(255,255,255,.06); font-size: 12px; font-weight: 700; color: var(--text); }
.org-arrow { color: var(--accent); font-size: 24px; font-weight: 800; }

/* ── tab 5 : why facts ──────────────────────────────────────────────────────── */
.why-facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.why-facts li { display: flex; flex-direction: column; gap: 3px; padding: 14px 16px; border-radius: 12px; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.03); }
.why-facts b { font-size: clamp(14.5px, 1.1vw, 17px); }
.why-facts span { color: var(--muted); font-size: 13.5px; }

/* ── tab 6 : contact (reuses cta-card) ──────────────────────────────────────── */
.deck-cta { margin: 0 auto; }
.deck-cta .cta-actions { align-items: center; }

/* ── responsive ─────────────────────────────────────────────────────────────── */
@media (max-height: 760px) {
  .deck h1 { font-size: clamp(28px, 3.6vw, 44px); margin: 10px 0 10px; }
  .deck-quote { margin: 10px 0 12px; padding: 9px 13px; }
  .deck-panel { padding-bottom: 56px; }
}
@media (max-width: 1100px) {
  .orgchart { grid-template-columns: 1fr 1fr; }
  .org-arrow { display: none; }
  .steps-rail { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .steps-rail li::after { content: none; }
}
@media (max-width: 860px) {
  .deck { --deck-top: 64px; }
  .deck-tab { flex: 0 0 auto; font-size: 12.5px; padding: 8px 11px; }
  .panel-grid.two { grid-template-columns: 1fr; }
  .before-after { grid-template-columns: 1fr; }
  .ba-arrow { transform: rotate(90deg); justify-self: center; }
  .facts-grid { grid-template-columns: 1fr; }
  .steps-rail { grid-template-columns: 1fr 1fr; }
  .orgchart { grid-template-columns: 1fr; }
  .deck-panel { align-items: flex-start; padding-bottom: 64px; }
  .deck-next { right: 12px; bottom: 10px; }
}
@media (max-width: 560px) { .steps-rail { grid-template-columns: 1fr; } }