/* ===========================
   Core / Variables / Reset
   =========================== */
:root{
  --max-width:1100px;
  --gap:16px;

  --brand:#0a6cff;
  --brand-ink:#0a3ea6;

  --ink:#111;
  --muted:#667085;

  --surface:#f7f9fb;
  --card-bg:#fff;

  --border:#e6e9ef;

  --radius:12px;

  --shadow:0 1px 2px rgba(10,10,10,0.06), 0 6px 20px rgba(10,10,10,0.06);
  --shadow-hover:0 2px 6px rgba(10,10,10,0.08), 0 10px 30px rgba(10,10,10,0.10);

  /* Optional brand accents used by licensing components */
  --brand-accent:#7aa2ff;
  --brand-accent-2:#2dd4bf;
  --card-border:#e6e9ef;
  --muted-text:#7a8aa0;

  /* LOGO: 1/4 size (desktop 9px, tablet 8px, mobile 7px) */
  --logo-size-desktop: 9px;
  --logo-size-tablet: 8px;
  --logo-size-mobile: 7px;

  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--surface);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img{max-width:100%;display:block}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}

/* Containers */
.container{
  max-width:var(--max-width);
  margin:0 auto;
  padding:24px;
}
.wrap{
  max-width:var(--max-width);
  margin:0 auto;
  padding:24px;
}

/* Simple grid helper used on licensing page */
.grid{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap:var(--gap);
}
@media (max-width:900px){
  .grid{ grid-template-columns: 1fr; }
}

/* ===========================
   Accessibility
   =========================== */
.skip-link{
  position:absolute;
  left:-999px; top:auto;
  width:1px; height:1px; overflow:hidden;
}
.skip-link:focus{
  left:1rem; top:1rem; width:auto; height:auto;
  background:#fff; padding:8px 12px; z-index:1000;
  border:1px solid var(--border); border-radius:6px;
  text-decoration:none; color:inherit;
}
.sr-only{position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0}

/* ===========================
   Header / Nav
   =========================== */
.site-header{
  position:sticky; top:0; z-index:50;
  background:#ffffffcc; backdrop-filter:saturate(180%) blur(8px);
  border-bottom:1px solid var(--border);
}
.site-header .container{ padding-top:16px; padding-bottom:12px; }

/* Legacy .nav/.nav-links (kept for compatibility) */
.nav{
  max-width:var(--max-width);
  margin:0 auto;
  padding:14px 24px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.logo{font-weight:800; color:#111; text-decoration:none}
.nav-links{
  display:flex; gap:20px; list-style:none; margin:0; padding:0;
}
.nav-links a{
  display:inline-block; padding:10px 4px; font-weight:600; color:#111;
  text-decoration:none;
}
.nav-links a:hover{color:var(--brand)}
.nav-links a.active{color:var(--brand)}

/* Index/Advisor header classes */
.header__inner{
  display:flex; align-items:center; justify-content:space-between; gap:16px; position:relative;
}
.brand{
  display:flex; align-items:center; gap:10px; font-weight:700; color:inherit; text-decoration:none;
}
.brand img{
  /* Hard override to ensure tiny logo regardless of HTML width/height */
  height: var(--logo-size-desktop) !important;
  width: auto !important;           /* preserve aspect ratio */
  max-height: var(--logo-size-desktop) !important;
  object-fit: contain;
  border-radius:4px;
  display:block;
  flex:0 0 auto;
}
.site-header .brand strong{ font-size:1rem; line-height:1; }
.nav__list{
  display:flex; gap:20px; list-style:none; margin:0; padding:0;
}
.nav__list a{
  display:inline-block; padding:10px 4px; font-weight:600; color:#111; text-decoration:none;
}
.nav__list a:hover{color:var(--brand)}
.nav__cta{display:flex; align-items:center; gap:10px}

/* Responsive logo steps */
@media (max-width:900px){
  .brand img{
    height: var(--logo-size-tablet) !important;
    max-height: var(--logo-size-tablet) !important;
  }
}
@media (max-width:640px){
  .brand img{
    height: var(--logo-size-mobile) !important;
    max-height: var(--logo-size-mobile) !important;
  }
}

/* ===========================
   Buttons
   =========================== */
button, .btn{
  display:inline-block; font-weight:700;
  padding:12px 16px; border-radius:10px; border:1px solid transparent;
  background:#444; color:#fff; text-decoration:none;
  transition:transform .06s ease, box-shadow .2s ease, background .2s ease;
  cursor:pointer;
}
button:hover, .btn:hover{transform:translateY(-1px)}
button:active, .btn:active{transform:translateY(0)}

.btn-primary, button.primary{background:var(--brand)}
.btn-primary:hover, button.primary:hover{box-shadow:var(--shadow-hover); background:#0b61ff}

.btn-secondary, button.secondary{
  background:#fff; color:#111; border-color:var(--border); box-shadow:var(--shadow);
}
.btn-secondary:hover, button.secondary:hover{box-shadow:var(--shadow-hover)}

.btn-ghost, button.ghost{
  background:transparent; color:#111; border:1px solid var(--border);
}

.btn-lg{padding:14px 18px; border-radius:12px}

/* Generic action row */
.actions{display:flex; gap:10px; justify-content:flex-start; margin-top:12px}
.actions-center{justify-content:center}

/* ===========================
   Hero
   =========================== */
.hero{padding:36px 0 8px}
.hero--with-bg{
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(10,108,255,.10), transparent 50%),
    linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  border-bottom:1px solid var(--border);
}
.hero h1{margin:0 0 12px; font-size: clamp(2rem, 3.6vw, 3rem); line-height:1.1}
.lead, .sub, .subhead{font-size:1.05rem; color:var(--muted); margin:0 0 18px}

/* ===========================
   Sections
   =========================== */
.section{padding:36px 0}
.section--alt{background:#fff;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.section__header{margin-bottom:18px}
.section__header h2{margin:0 0 6px; font-size:clamp(1.5rem, 2.4vw, 2rem)}

/* ===========================
   Cards / Tiles
   =========================== */
.card{
  background:var(--card-bg); padding:18px; border-radius:var(--radius);
  box-shadow:var(--shadow); border:1px solid var(--border);
}
.card--hover{transition:transform .12s ease, box-shadow .2s ease}
.card--hover:hover{transform:translateY(-2px); box-shadow:var(--shadow-hover)}
.card--border{box-shadow:none; border:1px solid var(--border); background:#fff}

.card h2, .card h3{margin:0 0 8px}
.card p{margin:0 0 10px; color:#1f2937}

/* ===========================
   Lists (features/tiles/faq)
   =========================== */
.feature-list{margin:0 0 4px 0; padding-left:18px; color:var(--muted)}
.feature-list li{margin:4px 0}

.tiles{display:grid; gap:12px}
.tiles--fit{grid-template-columns:repeat(3,1fr)}
.tile{
  background:#fff; border:1px solid var(--border); border-radius:10px; padding:12px;
  box-shadow:0 1px 2px rgba(16,24,40,.04);
}
.tile h4{margin:0 0 6px; font-size:1rem}
.tile p{margin:0; color:var(--muted)}  /* FIXED: removed invalid #var(--muted) */

/* ===========================
   FAQs
   =========================== */
.faqs{display:grid; gap:12px}
details{
  background:#fff; border:1px solid var(--border); border-radius:10px; padding:12px;
  box-shadow:0 1px 2px rgba(16,24,40,.04)
}
details > summary{cursor:pointer; font-weight:600; outline:none}
details[open]{box-shadow:var(--shadow)}
details p{margin:8px 0 0; color:var(--muted)}

/* ===========================
   About / Contact Grid
   =========================== */
.about__grid{display:grid; grid-template-columns: 1.2fr .8fr; gap:var(--gap)}
.contact-card .btn, .contact-card button{width:100%}

/* ===========================
   Back to top
   =========================== */
.backtotop{
  position:sticky; bottom:12px; display:flex; justify-content:center; margin-top:8px;
}
.backtotop .btn{border-radius:999px; padding:10px 14px}

/* ===========================
   Footer
   =========================== */
.site-footer{
  border-top:1px solid var(--border); background:#fff;
  padding:20px 24px; text-align:center;
}
.footer__grid{
  display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:var(--gap); align-items:start;
}
.footer__brand .brand{font-size:1rem}
.footer__nav ul{list-style:none; padding:0; margin:0}
.footer__nav li{margin:6px 0}
.footer__contact p{margin:6px 0}
.small{font-size:.9rem; color:var(--muted)}

/* ===========================
   Mobile Menu (CSS-only)
   =========================== */
.nav-toggle{position:absolute; opacity:0; pointer-events:none}
.hamburger{
  display:none;
  width:40px; height:32px; margin-left:8px; cursor:pointer;
  align-items:center; justify-content:center;
  border:1px solid var(--border); border-radius:10px; background:#fff;
  box-shadow:var(--shadow); z-index:103;
}
.hamburger__bar{
  display:block; width:22px; height:2px; background:#111; border-radius:2px;
  position:relative;
}
.hamburger__bar::before,
.hamburger__bar::after{
  content:""; position:absolute; left:0; width:22px; height:2px; background:#111; border-radius:2px;
}
.hamburger__bar::before{top:-7px}
.hamburger__bar::after{top:7px}

.mobile-drawer{
  position:fixed; inset:0 auto 0 0; width:78%; max-width:320px; background:#fff;
  box-shadow: 0 0 0 1px var(--border), 0 24px 48px rgba(0,0,0,.18);
  transform:translateX(-105%); transition:transform .25s ease;
  z-index:102; padding:20px;
  display:flex; flex-direction:column; gap:18px;
}
.mobile-nav__list{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:12px}
.mobile-nav__list a{display:block; padding:12px 6px; font-weight:600; color:#111; text-decoration:none}
.mobile-nav__list a:hover{color:var(--brand)}
.mobile-nav__cta{width:100%}

.backdrop{
  position:fixed; inset:0; background:rgba(0,0,0,.4);
  opacity:0; pointer-events:none; transition:opacity .2s ease; z-index:101;
}

/* Toggle states */
#nav-toggle:checked ~ .mobile-drawer{transform:translateX(0)}
#nav-toggle:checked ~ .backdrop{opacity:1; pointer-events:auto}

/* Turn hamburger into "X" when open */
#nav-toggle:checked + .hamburger .hamburger__bar{background:transparent}
#nav-toggle:checked + .hamburger .hamburger__bar::before{top:0; transform:rotate(45deg)}
#nav-toggle:checked + .hamburger .hamburger__bar::after{top:0; transform:rotate(-45deg)}

/* ===========================
   Tables (used by mapping)
   =========================== */
.table-wrap{overflow:auto}
table{width:100%; border-collapse:separate; border-spacing:0 8px}
th,td{text-align:left; padding:10px 12px}
thead th{font-size:12px; color:var(--muted); border-bottom:1px solid var(--border)}
tbody tr{background:#fff; border:1px solid var(--border)}
tbody tr td:first-child{font-weight:700}

/* ===========================
   Licensing page scoped styles
   =========================== */
.lic .pill{
  display:inline-flex; gap:8px; align-items:center;
  border:1px solid var(--border); padding:6px 10px; border-radius:999px;
  font-size:12px; color:var(--muted);
  background:#fff;
}

/* Form blocks */
.lic form .q{margin:10px 0 14px}
.lic .q legend{font-weight:600; margin-bottom:8px}
.lic .opt{display:flex; gap:10px; flex-wrap:wrap}
.lic .opt label{
  display:flex; align-items:center; gap:8px;
  border:1px solid var(--border);
  padding:8px 12px; border-radius:12px; cursor:pointer; background:#fff;
  box-shadow:0 1px 1px rgba(16,24,40,.02);
}
.lic .opt input{accent-color:var(--brand)}

/* Recommendation output */
.lic .result{
  border:1px dashed var(--brand-accent);
  border-radius:14px; padding:14px; margin-top:10px; background:#fff;
}
.lic .rec{display:flex; align-items:center; gap:10px; font-size:18px; font-weight:800}
.lic .rec .badge{
  background:var(--brand-accent-2); color:#012a25; border-radius:8px;
  padding:4px 8px; font-size:12px; margin-left:auto
}
.lic .rec-title{font-size:22px; font-weight:900; margin-top:4px}
.lic .alts{margin-top:6px}
.lic .alt{
  border:1px solid var(--card-border); border-radius:10px; padding:8px 10px; margin-top:8px; background:#fff
}
.lic .why{color:var(--muted-text); font-size:13px}
.lic .tag{
  padding:2px 6px; border-radius:6px; border:1px solid var(--card-border);
  font-size:11px; color:var(--muted-text); background:#fff
}
.lic .note{font-size:12px; color:var(--muted-text)}

/* Admin tools (debug mode) */
.lic .admin-tools .actions{display:flex; gap:10px; flex-wrap:wrap}

/* Card layout spans for the advisor/mapping */
@media (min-width:901px){
  .lic .grid > .card[style*="grid-column:span 6"]{
    grid-column: span 6;
  }
}

/* ===========================
   Responsive
   =========================== */
@media (max-width:1100px){
  .hero--with-bg{background:#fff}
  .about__grid{grid-template-columns:1fr}
}

@media (max-width:900px){
  .tiles--fit{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:1fr 1fr}
  .footer__grid{grid-template-columns:1fr 1fr}
  .container, .wrap{padding:20px}
  .nav-links{gap:14px}
}

@media (max-width:640px){
  .tiles--fit{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .footer__grid{grid-template-columns:1fr}
  .container, .wrap{padding:18px}

  .nav-links{display:none}   /* hide desktop nav if using .nav-links */
  .nav__list{display:none}   /* hide desktop nav if using .nav__list */
  /* .hamburger{display:inline-flex; margin-left:auto}
     .mobile-drawer, .backdrop{display:block} */
}

/* ===========================
   Motion preferences
   =========================== */
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important}
}
/* Remove any center/footer logos (leave header alone) */
main img[src$="logo.png"],
.site-footer .footer__brand .brand > img {
  display: none !important;
}
/* Hero without image: lighter spacing and full-width copy */
.hero{ padding: 28px 0 8px; }
.hero--with-bg{ border-bottom: 1px solid var(--border); }
.hero__copy{ max-width: 780px; }            /* keeps lines readable */