/* ========================================================================
   biz.css — Start Here / Business Setup (mobile-first, resilient, elegant)
   Scope: #biz and page-level layout primitives.
   Notes:
   • Mobile-first with progressive enhancement
   • Fluid type/space, safe-area insets, prefers-reduced-motion, forced-colors
   • Logical properties for better RTL support
   • Scrollable breadcrumb with fade masks on mobile
   • Upgraded Back-to-Top button (safe-area aware)
   ========================================================================= */

   :root {
    /* Palette */
    --bg: #0b1220;
    --surface: #ffffff;
    --ink: #0f172a;
    --muted: #475569;
    --border: #e6e9ef;
    --primary: #2563eb;
    --accent: #22c55e;
    --warn: #f59e0b;
  
    /* Radii */
    --radius-sm: 10px;
    --radius-md: 14px;
    --radius-lg: 18px;
  
    /* Shadows */
    --shadow-xs: 0 1px 3px rgba(2,6,23,.06);
    --shadow-sm: 0 4px 14px rgba(2,6,23,.08);
    --shadow-md: 0 12px 30px rgba(2,6,23,.12);
  
    /* Fluid type & spacing scales */
    --step--1: clamp(.85rem, .82rem + .3vw, .95rem);
    --step-0: clamp(.98rem, .96rem + .35vw, 1.05rem);
    --step-1: clamp(1.1rem, 1.02rem + .8vw, 1.35rem);
    --step-2: clamp(1.35rem, 1.12rem + 1.6vw, 1.8rem);
    --step-3: clamp(1.6rem, 1.2rem + 2.2vw, 2.3rem);
    --space-1: clamp(.4rem, .38rem + .4vw, .6rem);
    --space-2: clamp(.6rem, .55rem + .6vw, .9rem);
    --space-3: clamp(.9rem, .8rem + 1vw, 1.2rem);
    --space-4: clamp(1.2rem, 1rem + 1.6vw, 1.8rem);
  
    /* Motion */
    --easing: cubic-bezier(.2,.7,.2,1);
    --duration-1: 150ms;
    --duration-2: 240ms;
  }
  
  /* Base reset */
  *, *::before, *::after { box-sizing: border-box; }
  html { block-size: 100%; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  html:focus-within { scroll-behavior: smooth; }
  body {
    margin: 0;
    min-block-size: 100%;
    color: var(--ink);
    background: linear-gradient(180deg, #f7f9fc 0%, #ffffff 40%);
    font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
    font-feature-settings: "liga" 1, "calt" 1;
    line-height: 1.55;
    font-size: var(--step-0);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    padding-inline: env(safe-area-inset-left); /* iOS viewport fit */
    padding-block: calc(env(safe-area-inset-top) / 2) calc(env(safe-area-inset-bottom) / 2);
    color-scheme: light dark;
  }
  :where(img, svg, video, canvas) { max-inline-size: 100%; block-size: auto; }
  :where(input, button, select, textarea) { font: inherit; }
  :where(a) { color: inherit; }
  :where(p) { text-wrap: pretty; }
  :where(h1, h2, h3) { line-height: 1.15; text-wrap: balance; }
  :where(ul,ol) { padding-inline-start: 1.1rem; }
  
  /* Containers */
  .container {
    inline-size: min(1120px, 92vw);
    margin-inline: auto;
    padding-inline: max(1rem, env(safe-area-inset-left));
  }
  .container:is(.tight) { inline-size: min(880px, 92vw); }
  
  /* Topbar / breadcrumb — mobile upgrades */
  .site-topbar {
    position: sticky;
    inset-block-start: 0;
    z-index: 50;
    border-block-end: 1px solid var(--border);
    background: color-mix(in oklab, #ffffff 86%, transparent);
    backdrop-filter: saturate(1.1) blur(6px);
    -webkit-backdrop-filter: saturate(1.1) blur(6px);
  }
  .site-topbar nav {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: .5rem .75rem;
    padding-block: .55rem;
  }
  @media (max-width: 420px) {
    .site-topbar nav { grid-template-columns: 1fr; }
  }
  
  /* Scrollable breadcrumb with fade edges */
  .breadcrumb {
    --fade: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 12%, rgba(255,255,255,0) 88%, rgba(255,255,255,1) 100%);
    list-style: none;
    margin: 0;
    padding: 0;
    display: inline-flex;
    gap: .5rem;
    align-items: center;
    color: var(--muted);
    font-size: var(--step--1);
    overflow-x: auto;
    white-space: nowrap;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
    mask-image: var(--fade);
    -webkit-mask-image: var(--fade);
    mask-size: 100% 100%;
    -webkit-mask-size: 100% 100%;
    overscroll-behavior-inline: contain;
  }
  .breadcrumb::-webkit-scrollbar { display: none; }
  .breadcrumb li a { color: inherit; text-decoration: none; }
  .breadcrumb li+li::before {
    content: "›";
    opacity: .6;
    margin-inline: .35rem;
  }
  
  /* Topbar action button area tightens on mobile */
  .site-topbar .btn.small { padding: .45rem .7rem; min-block-size: 38px; }
  
  /* Buttons */
  .btn {
    --btn-bg: var(--primary); --btn-ink: #fff;
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    padding: .65rem .95rem; border-radius: 999px;
    border: 1px solid color-mix(in oklab, var(--btn-bg) 30%, transparent);
    background: var(--btn-bg); color: var(--btn-ink);
    text-decoration: none; font-weight: 650; box-shadow: var(--shadow-xs);
    min-block-size: 44px; /* mobile tap target */
    touch-action: manipulation;
    transition: transform var(--duration-1) var(--easing), box-shadow var(--duration-1) var(--easing), background var(--duration-2) var(--easing), opacity var(--duration-1) var(--easing);
  }
  .btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }
  .btn:active { transform: translateY(0); box-shadow: var(--shadow-xs); }
  .btn:focus-visible { outline: 3px solid color-mix(in oklab, var(--btn-bg) 50%, transparent); outline-offset: 2px; }
  .btn--secondary { --btn-bg: #fff; --btn-ink: var(--ink); border-color: var(--border); }
  .btn--ghost { --btn-bg: #fff; --btn-ink: var(--ink); background: linear-gradient(180deg,#fff, #f7f9fc); border-color: var(--border); }
  .btn.small { padding: .5rem .75rem; font-weight: 600; min-block-size: 40px; }
  @media (max-width: 520px) { .btn { inline-size: 100%; } }
  
  /* Hero */
  #biz .hero {
    display: grid; grid-template-columns: 1fr;
    align-items: center; gap: var(--space-3);
    padding-block: clamp(1rem, 2.5vw, 2rem) 1rem;
  }
  #biz .hero__content .eyebrow {
    display: inline-flex; align-items: center; gap: .45rem;
    margin: 0 0 .35rem 0; color: color-mix(in oklab, var(--primary) 60%, var(--muted));
    font-weight: 700; letter-spacing: .02em; font-size: var(--step--1);
  }
  #biz .hero__content h1 { margin: 0; font-size: var(--step-3); }
  #biz .lead { margin: .6rem 0 1rem; color: var(--muted); max-inline-size: 75ch; font-size: var(--step-0); }
  #biz .hero__cta { display: flex; flex-wrap: wrap; gap: .6rem; }
  #biz .micro-note { color: #64748b; font-size: var(--step--1); margin-top: .6rem; }
  #biz .hero__art { position: relative; min-block-size: 220px; border-radius: var(--radius-lg); overflow: clip; }
  #biz .hero__art .rings {
    position: absolute; inset: 0;
    background:
      radial-gradient(1200px 300px at 10% -10%, color-mix(in oklab, var(--primary) 8%, transparent), transparent 55%),
      radial-gradient(900px 240px at 110% 10%, color-mix(in oklab, var(--accent) 8%, transparent), transparent 50%);
    border-radius: inherit;
  }
  
  /* Scopebar */
  .scopebar { margin: .25rem 0 .5rem; }
  .scopebar__row { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; justify-content: space-between; }
  .chip {
    display: inline-flex; align-items: center; gap: .4rem; padding: .5rem .8rem;
    border-radius: 999px; border: 1px solid var(--border); background: #fff; font-weight: 600; cursor: pointer;
  }
  .chip.is-active { background: color-mix(in oklab, var(--primary) 10%, #fff); border-color: color-mix(in oklab, var(--primary) 25%, var(--border)); }
  .select { padding: .55rem .8rem; border-radius: 999px; border: 1px solid var(--border); background: #fff; }
  
  /* TOC */
  .toc {
    position: sticky; inset-block-start: .75rem; z-index: 2;
    margin: .6rem 0 1.2rem; padding: .5rem .75rem;
    border: 1px solid var(--border); border-radius: var(--radius-lg);
    background: #fff; box-shadow: var(--shadow-xs);
  }
  .toc ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem .75rem; }
  .toc a { text-decoration: none; color: var(--ink); font-weight: 600; }
  .toc a i { opacity: .9; margin-inline-end: .35rem; }
  
  /* Sections */
  .section { padding-block: 1.2rem; }
  .section__head h2 { margin: 0; font-size: var(--step-2); }
  .section__sub { margin: .3rem 0 0; color: var(--muted); max-inline-size: 80ch; font-size: var(--step-0); }
  
  /* QA Grid pattern */
  .qa-grid { display: grid; gap: .9rem; margin-top: .8rem; grid-template-columns: 1fr; }
  .qa {
    background: #fff; border: 1px solid var(--border);
    border-radius: var(--radius-lg); padding: .9rem; box-shadow: var(--shadow-xs);
  }
  .qa h3 { margin: 0 0 .4rem 0; font-size: 1.05rem; display: flex; align-items: center; gap: .5rem; }
  .qa p { margin: 0; color: var(--muted); }
  .qa ul { margin: .4rem 0 0; padding-inline-start: 1.1rem; }
  
  /* Stepper (Quick Start) */
  .stepper { counter-reset: steps; list-style: none; padding: 0; margin: .9rem 0 0; display: grid; gap: .9rem; }
  .step {
    display: grid; grid-template-columns: auto 1fr; gap: .8rem; align-items: start;
    border: 1px solid var(--border); border-radius: var(--radius-md); padding: .7rem .8rem; background: #fff; box-shadow: var(--shadow-xs);
  }
  .step__icon {
    display: grid; place-items: center; inline-size: 2.4rem; block-size: 2.4rem; border-radius: 999px;
    background: color-mix(in oklab, var(--primary) 12%, transparent);
    color: var(--primary);
  }
  .step h3 { margin: 0 0 .15rem 0; font-size: 1.02rem; }
  .step p { margin: 0; color: var(--muted); }
  
  /* Cards & grids (Refs) */
  .cards { display: grid; gap: .9rem; margin-top: .8rem; grid-template-columns: 1fr; }
  .cards--2col { grid-template-columns: 1fr; }
  .card {
    background: #fff; border: 1px solid var(--border);
    border-radius: var(--radius-lg); padding: .9rem; box-shadow: var(--shadow-xs);
  }
  .card h3 { margin: 0 0 .4rem 0; font-size: 1.05rem; display: flex; align-items: center; gap: .5rem; }
  .card--muted { background: linear-gradient(180deg,#fff, #f8fafc); }
  .note { margin: .5rem 0 0; font-size: .95rem; color: #64748b; }
  
  /* Lists (robust markers that don't overlap) */
  .list-checks, .list-dots { margin: .4rem 0 0; padding: 0; display: grid; gap: .5rem; }
  
  /* Use ::marker so long lines wrap without colliding with the icon */
  .list-checks { list-style: outside; padding-inline-start: 1.25em; }
  .list-checks li { line-height: 1.55; }
  .list-checks li::marker { content: "✓  "; color: var(--primary); font-weight: 800; }
  
  .list-dots { list-style: outside; padding-inline-start: 1.1em; }
  .list-dots li { line-height: 1.55; }
  .list-dots li::marker { content: "•  "; color: var(--muted); }
  
  /* Helper CTA */
  .helper-cta {
    margin: 1.2rem 0 2rem; padding: .9rem 1rem;
    border: 1px dashed color-mix(in oklab, var(--primary) 28%, var(--border));
    background: linear-gradient(180deg, color-mix(in oklab, var(--primary) 7%, #fff), #fff 65%);
    border-radius: var(--radius-lg); display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; justify-content: space-between;
  }
  .helper-cta p { margin: 0; font-weight: 600; display: inline-flex; align-items: center; gap: .5rem; }
  
  /* Footer */
  .site-footer { border-block-start: 1px solid var(--border); background: #fff; }
  .site-footer .container { padding-block: 1rem; }
  .micro-note { color: #64748b; font-size: var(--step--1); }
  
  /* Visibility helpers */
  .visually-hidden {
    position: absolute !important; block-size: 1px; inline-size: 1px; overflow: hidden;
    clip: rect(1px,1px,1px,1px); white-space: nowrap; clip-path: inset(50%);
  }
  
  /* --- Callout (advisory) --------------------------- */
  .callout {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: start;
    gap: .8rem;
    padding: .9rem 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: linear-gradient(180deg, #fff, #f8fafc);
    box-shadow: var(--shadow-xs);
    margin-block: .8rem 1rem;
  }
  .callout__icon {
    inline-size: 2.4rem; block-size: 2.4rem;
    display: grid; place-items: center;
    border-radius: 999px;
    background: color-mix(in oklab, var(--primary) 12%, transparent);
    color: var(--primary);
    flex: 0 0 auto;
  }
  .callout h2 {
    margin: 0 0 .25rem 0;
    font-size: 1.05rem;
  }
  .callout p {
    margin: 0;
    color: var(--muted);
  }
  .callout__link {
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px dashed color-mix(in oklab, var(--primary) 35%, transparent);
  }
  .callout__link:hover { border-bottom-style: solid; }
  
  /* Variant hook (kept for future) */
  .callout--info {}
  
  /* ----------------------------
     Back to Top — upgraded mobile
     ---------------------------- */
  .to-top {
    position: fixed;
    inset-inline-end: max(1rem, calc(env(safe-area-inset-right) + .75rem));
    inset-block-end: max(1rem, calc(env(safe-area-inset-bottom) + 1rem));
    z-index: 60;
    display: inline-grid;
    place-items: center;
    inline-size: 3rem;
    block-size: 3rem;
    border-radius: 999px;
    background: var(--primary);
    color: #fff;
    border: 1px solid color-mix(in oklab, var(--primary) 30%, transparent);
    box-shadow: 0 6px 24px rgba(37,99,235,.28);
    opacity: 0;
    pointer-events: none;
    transform: translateY(6px) scale(.98);
    transition: opacity var(--duration-2) var(--easing), transform var(--duration-2) var(--easing), box-shadow var(--duration-2) var(--easing);
  }
  .to-top i { font-size: 1rem; }
  .to-top.show {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0) scale(1);
  }
  .to-top:hover { box-shadow: 0 10px 28px rgba(37,99,235,.34); transform: translateY(-1px); }
  .to-top:focus-visible { outline: 3px solid color-mix(in oklab, var(--primary) 50%, transparent); outline-offset: 2px; }
  
  /* ----------------------------
     Progressive enhancements
     ---------------------------- */
  /* Container queries (enhance cards/qa grids within their container) */
  .container { container-type: inline-size; }
  @container (min-width: 700px) {
    .cards--2col { grid-template-columns: repeat(2, minmax(0,1fr)); }
  }
  
  /* Responsive breakpoints (mobile-first) */
  @media (min-width: 600px) {
    .qa-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  }
  @media (min-width: 820px) {
    #biz .hero { grid-template-columns: 1fr 1fr; gap: var(--space-4); }
  }
  @media (min-width: 1120px) {
    .qa-grid { grid-template-columns: repeat(4, minmax(0,1fr)); }
  }
  
  /* Reduce stickiness / stacking on very small screens */
  @media (max-width: 700px) {
    .toc { position: static; }
  }
  
  /* Print */
  @media print {
    .site-topbar,
    .toc,
    .helper-cta,
    .hero__art,
    .hero__cta .btn--secondary { display: none !important; }
    .btn { display: none !important; }
    body { background: #fff; }
    .card, .step, .qa, .faq details { box-shadow: none !important; }
    .to-top { display: none !important; }
    .breadcrumb { mask-image: none; -webkit-mask-image: none; }
  }
  
  /* Reduced motion */
  @media (prefers-reduced-motion: reduce) {
    html:focus-within { scroll-behavior: auto; }
    * { animation: none !important; transition: none !important; }
    .btn:hover, .btn:active { transform: none; }
  }
  
  /* High-contrast / forced colors */
  @media (forced-colors: active) {
    :root { --border: CanvasText; }
    .site-topbar, .toc, .card, .qa, .step, .helper-cta, .callout { border: 1px solid; }
    .btn, .to-top { border: 1px solid; box-shadow: none; }
    .breadcrumb { mask-image: none; -webkit-mask-image: none; }
  }
  
  /* Dark theme (supports [data-theme="dark"] and prefers-color-scheme) */
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme]) .site-topbar,
    :root:not([data-theme]) .toc,
    :root:not([data-theme]) .card,
    :root:not([data-theme]) .qa,
    :root:not([data-theme]) .helper-cta,
    :root:not([data-theme]) .site-footer,
    :root:not([data-theme]) .callout { background: #0f172a; border-color: #1e293b; }
    :root:not([data-theme]) body { background: linear-gradient(180deg, #0b1220 0%, #0b1220 40%); color: #e5e7eb; }
    :root:not([data-theme]) .toc a { color: #e5e7eb; }
    :root:not([data-theme]) .card,
    :root:not([data-theme]) .step,
    :root:not([data-theme]) .qa,
    :root:not([data-theme]) .callout { border-color: #1e293b; }
    :root:not([data-theme]) .note, :root:not([data-theme]) .micro-note, :root:not([data-theme]) .section__sub { color: #9aa7bb; }
    :root:not([data-theme]) .btn--secondary, :root:not([data-theme]) .btn--ghost { --btn-bg: #182230; --btn-ink: #e5e7eb; border-color: #1e293b; }
  }
  [data-theme="dark"] body { background: linear-gradient(180deg, #0b1220 0%, #0b1220 40%); color: #e5e7eb; }
  [data-theme="dark"] .site-topbar,
  [data-theme="dark"] .toc,
  [data-theme="dark"] .card,
  [data-theme="dark"] .qa,
  [data-theme="dark"] .helper-cta,
  [data-theme="dark"] .site-footer,
  [data-theme="dark"] .callout { background: #0f172a; border-color: #1e293b; }
  [data-theme="dark"] .toc a { color: #e5e7eb; }
  [data-theme="dark"] .card,
  [data-theme="dark"] .step,
  [data-theme="dark"] .qa,
  [data-theme="dark"] .callout { border-color: #1e293b; }
  [data-theme="dark"] .note, [data-theme="dark"] .micro-note, [data-theme="dark"] .section__sub { color: #9aa7bb; }
  [data-theme="dark"] .btn--secondary, [data-theme="dark"] .btn--ghost { --btn-bg: #182230; --btn-ink: #e5e7eb; border-color: #1e293b; }
  
  /* Optional: Slightly dim the topbar background in dark for better contrast */
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme]) .site-topbar { background: color-mix(in oklab, #0f172a 92%, transparent); backdrop-filter: blur(8px); }
  }
  [data-theme="dark"] .site-topbar { background: color-mix(in oklab, #0f172a 92%, transparent); backdrop-filter: blur(8px); }
  
  /* End of file */
  
  /* ---- Industry Reality small enhancements ---- */
.stat-badge {
  display: inline-grid;
  justify-items: center;
  row-gap: .15rem;
  padding: .5rem .9rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: linear-gradient(180deg, #fff, #f7f9fc);
  box-shadow: var(--shadow-xs);
  margin-block: .5rem 0;
}
.stat-badge__num {
  font-weight: 800;
  font-size: clamp(1.1rem, .9rem + 1.5vw, 1.6rem);
  line-height: 1;
}
.stat-badge__label {
  font-size: var(--step--1);
  color: var(--muted);
  font-weight: 650;
  letter-spacing: .02em;
  text-transform: uppercase;
}

/* Dark theme adjustment */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .stat-badge { background: #0f172a; border-color: #1e293b; }
}
[data-theme="dark"] .stat-badge { background: #0f172a; border-color: #1e293b; }
/* --- Breadcrumb (site-topbar) sits cleanly BELOW the sticky global nav --- */
:root { --nav-height: 64px; } /* JS will measure and update this */

.site-topbar{
  position: sticky;
  top: var(--nav-height);
  inset-block-start: var(--nav-height); /* logical prop for compatibility */
  z-index: 998;                         /* below header.nav (999) */
  border-block-end: 1px solid var(--border);

  /* Remove the blur that was making text look soft */
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;

  /* Solid backgrounds for clarity */
  background: #fff;
}

/* Dark theme background so it’s still crisp */
[data-theme="dark"] .site-topbar { background: #0f172a; }

/* The breadcrumb’s edge fade can look like blur on some setups — disable it here */
.site-topbar .breadcrumb{
  mask-image: none !important;
  -webkit-mask-image: none !important;
}