/* === Premium Gold Tokens === */
:root{
  --c-bg:        #fff;  /* base page bg */
  --c-ink:       #111;  /* default ink */
  /* TOC focus tokens for consistent contrast */
  --toc-focus-ring:   #C6A33E; /* gold ring */
  --toc-focus-fg:     #0b0d10; /* dark ink for light focus bg */
  --toc-focus-bg-light: color-mix(in oklab, #d4af37 24%, white);
  --toc-focus-bg-dark:  color-mix(in oklab, #f5d77d 26%, black);

  --c-border:    #e5e7eb;
  --c-gold:        #C6A33E;  /* base */
  --c-gold-600:    #B28E2C;  /* hover */
  --c-gold-700:    #9A7A24;  /* pressed/icon */
  --c-gold-soft:   #F6EFDB;  /* subtle bg for icon discs */
  --c-gold-ring:   #E7D8A6;  /* subtle ring/border */
  --c-gold-ink:    #1a150a;  /* text on gold */
  --overlay-bg: rgba(0,0,0,.4);

  /* Layering scales */
  --z-header: 40;
  --z-overlay: 50;
  --z-menu: 60;
  --z-toast: 70;
}
html.dark{
  /* små justeringar i mörkt läge */
  --c-gold-soft: #3b331f;
  --c-gold-ring: #5a4b22;
  --c-gold-ink:  #0a0a0a;
}
html{ scrollbar-gutter: stable both-edges; }
html,body{ background:var(--c-bg); color:var(--c-ink); }
.site-header{ position:sticky; top:0; z-index: var(--z-header); backdrop-filter:blur(6px); background:rgba(255,255,255,.9); border-bottom:1px solid var(--c-border); }

.menu-trigger,.menu-close{ background:#fff; border:1px solid var(--c-border); }
[inert]{ pointer-events:none; user-select:none; }
#ssr-auth-header{ display:none!important; } /* defensivt */

/* existing content preserved below */
/*****************
 * Concillio Base *
 *****************/
:root{
  --cf_build: "2025-09-13T00:00:00Z"; /* cache-bust token */
  --concillio-gold: var(--c-gold);
  --gold: var(--c-gold);
  --navy:#0b0f1a;
  /* OKLAB-tuned tokens for consistent tints */
  --gold-12: color-mix(in oklab, var(--c-gold) 12%, white);
  --gold-24: color-mix(in oklab, var(--c-gold) 24%, white);
}
body{font-family:Inter,system-ui,-apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial; -webkit-tap-highlight-color: transparent; touch-action: manipulation; line-height: 1.6;}
.drop-shadow{filter: drop-shadow(0 2px 8px rgba(179,160,121,.25));}

/***************************
 * Light/Dark Theme Support *
 ***************************/
/* Default dark base is in markup via Tailwind classes; provide light overrides here */
[data-theme="light"] body{ background:#f8fafc !important; color:#0b0d10 !important; }
[data-theme="light"] .text-neutral-100{ color:#0b0d10 !important; }
[data-theme="light"] .text-neutral-200{ color:#1f2937 !important; }
[data-theme="light"] .text-neutral-300{ color:#374151 !important; }
[data-theme="light"] .text-neutral-400{ color:#5b6471 !important; }
[data-theme="light"] .border-neutral-800{ border-color:#e5e7eb !important; }
[data-theme="light"] .border-neutral-700{ border-color:#e5e7eb !important; }
[data-theme="light"] .bg-neutral-900\/60{ background:rgba(255,255,255,0.88) !important; }
[data-theme="light"] .bg-neutral-950\/40{ background:rgba(255,255,255,0.6) !important; }
[data-theme="light"] .bg-neutral-950\/50{ background:rgba(255,255,255,0.74) !important; }
[data-theme="light"] .bg-neutral-900\/40{ background:rgba(255,255,255,0.85) !important; }

/* Theme toggle labels: show next action */
html[data-theme="dark"] .t-label-dark{ display:none !important; }
html[data-theme="dark"] .t-label-light{ display:inline !important; }
html[data-theme="light"] .t-label-dark{ display:inline !important; }
html[data-theme="light"] .t-label-light{ display:none !important; }

/* Menu panel and overlay styling */
/* Keep dark by default, but make panel light in light mode */
.theme-btn.selected{ border-color: var(--concillio-gold) !important; background: rgba(179,160,121,0.08); }

/* Light-mode: make the side menu panel light */
[data-theme="light"] #site-menu{
  background: rgba(255,255,255,0.96) !important; /* slightly more opaque for contrast */
  -webkit-backdrop-filter: saturate(130%) blur(12px);
  backdrop-filter: saturate(130%) blur(12px);
  border-color: #e0e6ec !important; /* slightly stronger */
  color: #0b0d10 !important;
}
/* Ensure inner container flips to light too */
[data-theme="light"] #site-menu .bg-neutral-950{
  background: rgba(255,255,255,0.92) !important;
}
[data-theme="light"] #site-menu-overlay{ background: rgba(0,0,0,0.2) !important; }
/* Tweak common neutrals inside menu for light mode */
[data-theme="light"] #site-menu .border-neutral-800{ border-color:#d9dee4 !important; }
[data-theme="light"] #site-menu .text-neutral-200{ color:#111827 !important; }
[data-theme="light"] #site-menu .text-neutral-300{ color:#1f2937 !important; }
[data-theme="light"] #site-menu .text-neutral-400{ color:#374151 !important; }
[data-theme="light"] #site-menu .hover\:text-neutral-100:hover{ color:#0b0d10 !important; }

/* Explicit dark-mode styling for the menu when user selects dark */
[data-theme="dark"] #site-menu{
  background: rgba(11,13,16,0.92) !important; /* slightly more opaque for contrast */
  -webkit-backdrop-filter: saturate(120%) blur(10px);
  backdrop-filter: saturate(120%) blur(10px);
  border-color: #1f2937 !important;
  color: #e5e7eb !important;
}
[data-theme="dark"] #site-menu .bg-neutral-950{
  background: rgba(11,13,16,0.90) !important;
}

/* Light-mode hero contrast: ensure headings are dark on lightened panels */
[data-theme="light"] .bg-neutral-900\/60 .text-neutral-50{ color:#0b0d10 !important; }

/* Card UX (premium hover + focus) */
.card-premium{
  transition: transform .18s ease, box-shadow .18s ease, border-color .2s ease, background-color .2s ease;
  will-change: transform;
}
.card-premium:hover{
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(179,160,121,0.10);
  border-color: var(--concillio-gold);
}
.card-premium:focus-visible{
  outline: none;
  box-shadow: 0 0 0 2px rgba(179,160,121,0.5);
}

@media (hover:none){
  /* On touch devices, keep it steady on tap */
  .card-premium:hover{ transform: none; box-shadow: none; }
}

/* Orbit animation for hero seal */
.hero-orbit{ position: relative; width: 220px; height: 220px; }
.hero-orbit .ring{ position:absolute; inset:0; border:1px solid rgba(179,160,121,0.25); border-radius:9999px; }
.hero-orbit .ring.r1{ animation: orbit-rot 18s linear infinite; }
.hero-orbit .ring.r2{ transform: scale(.82); animation: orbit-rot 24s linear infinite reverse; opacity:.8 }
.hero-orbit .ring.r3{ transform: scale(.64); animation: orbit-rot 30s linear infinite; opacity:.6 }
.hero-orbit .seal{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
@keyframes orbit-rot{ from{ transform: rotate(0deg) } to{ transform: rotate(360deg) } }

/* Primary CTA buttons on Contact + Waitlist */
#contact-form button[type="submit"],
#contact-form .inline-flex,
#contact-form .rounded-md,
#waitlist-form button[type="submit"],
.btn-primary-gold{
  border-radius: 0.75rem !important; /* rounded-xl */
  min-height: 48px !important;
  padding: 0.75rem 1.25rem !important; /* px-5 py-3 approx */
  background: linear-gradient(180deg, color-mix(in oklab, var(--gold) 90%, #fff) 0%, var(--gold) 100%) !important;
  color: #fff !important;
  box-shadow: 0 6px 18px rgba(179,160,121,0.10) !important;
  transition: transform .18s ease, box-shadow .18s ease, border-color .2s ease, background-color .2s ease !important;
}
#contact-form button[type="submit"]:hover,
#waitlist-form button[type="submit"]:hover{
  transform: translateY(-1px) !important;
  box-shadow: 0 8px 22px rgba(179,160,121,0.14) !important;
}
#contact-form button[type="submit"]:focus-visible,
#waitlist-form button[type="submit"]:focus-visible{
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(179,160,121,0.5) !important;
}

/* Resources: whitepaper CTA button same styling */
#res-whitepaper button[type="submit"]{
  border-radius: 0.75rem !important; /* rounded-xl */
  min-height: 48px !important;
  padding: 0.75rem 1.25rem !important; /* px-5 py-3 */
  background: var(--gold) !important;
  color: #fff !important;
  box-shadow: 0 6px 18px rgba(179,160,121,0.10) !important;
  transition: transform .18s ease, box-shadow .18s ease, border-color .2s ease, background-color .2s ease !important;
}
#res-whitepaper button[type="submit"]:hover{
  transform: translateY(-1px) !important;
  box-shadow: 0 8px 22px rgba(179,160,121,0.14) !important;
}
#res-whitepaper button[type="submit"]:focus-visible{
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(179,160,121,0.5) !important;
}

/* Force readable text color on any button-like element with dark backgrounds */
html.dark a[class*="inline-flex"],
html.dark button,
[data-theme="dark"] a[class*="inline-flex"],
[data-theme="dark"] button{
  color: #e5e7eb !important;
}
/* But keep primary gold buttons white text explicitly */
html.dark a.bg-\[var\(--gold\)\],
html.dark button.bg-\[var\(--gold\)\],
[data-theme="dark"] a.bg-\[var\(--gold\)\],
[data-theme="dark"] button.bg-\[var\(--gold\)\]{
  color: #ffffff !important;
}


/* Dark theme: force any white-ish Tailwind backgrounds to dark neutrals */
[data-theme="dark"] .bg-white,
[data-theme="dark"] [class*="bg-white"],
html.dark .bg-white,
html.dark [class*="bg-white"]{
  background-color: #0f1216 !important;
}
/* Also fix sticky header that used bg-white variants */
[data-theme="dark"] #page-sticky-header,
html.dark #page-sticky-header{
  background: rgba(11,13,16,0.80) !important;
  -webkit-backdrop-filter: saturate(120%) blur(8px);
  backdrop-filter: saturate(120%) blur(8px);
  border-color: #1f2937 !important;
  color: #e5e7eb !important;
}

/* Pricing: Contact button polish */
 a[data-cta="secondary-contact-sales"]{
  border-color: var(--concillio-gold) !important;
  border-width: 1px !important;
  border-style: solid !important;
  border-radius: 0.75rem !important; /* rounded-xl */
  padding: 0.75rem 1.25rem !important; /* px-5 py-3 */
  min-height: 48px !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
}
 a[data-cta="secondary-contact-sales"]:hover{ background: var(--gold-12) !important; }
 a[data-cta="secondary-contact-sales"]:focus-visible{ outline: none !important; box-shadow: 0 0 0 2px rgba(179,160,121,0.5) !important; }
[data-theme="light"] a[data-cta="secondary-contact-sales"]{ color: var(--navy) !important; }
[data-theme="dark"] a[data-cta="secondary-contact-sales"],
html.dark a[data-cta="secondary-contact-sales"]{ color: #e5e7eb !important; }
/* Add spacing between primary and contact buttons in Enterprise card */
 a[data-cta="primary-waitlist"][data-cta-source="pricing:enterprise"] + div{
  margin-top: 1.25rem !important; /* mt-5 equivalent */
}

/* Explicit overrides for Contact + Waitlist forms */
/* Contact + Waitlist forms: theme-scoped */
[data-theme="dark"] #contact-form input,
[data-theme="dark"] #contact-form textarea,
[data-theme="dark"] #contact-form select,
[data-theme="dark"] #waitlist-form input,
[data-theme="dark"] #waitlist-form textarea,
[data-theme="dark"] #waitlist-form select,
html.dark #contact-form input,
html.dark #contact-form textarea,
html.dark #contact-form select,
html.dark #waitlist-form input,
html.dark #waitlist-form textarea,
html.dark #waitlist-form select{
  background: #0f1216 !important;
  color: #e5e7eb !important;
  border-color: #1f2937 !important;
  caret-color: #e5e7eb !important;
  background-clip: padding-box !important;
}
[data-theme="dark"] #contact-form input::placeholder,
[data-theme="dark"] #contact-form textarea::placeholder,
[data-theme="dark"] #waitlist-form input::placeholder,
[data-theme="dark"] #waitlist-form textarea::placeholder,
html.dark #contact-form input::placeholder,
html.dark #contact-form textarea::placeholder,
html.dark #waitlist-form input::placeholder,
html.dark #waitlist-form textarea::placeholder{
  color: #9ca3af !important;
  opacity: 1 !important;
}

/* Light theme for Contact + Waitlist */
[data-theme="light"] #contact-form input,
[data-theme="light"] #contact-form textarea,
[data-theme="light"] #contact-form select,
[data-theme="light"] #waitlist-form input,
[data-theme="light"] #waitlist-form textarea,
[data-theme="light"] #waitlist-form select{
  background: #ffffff !important;
  color: #0b0d10 !important;
  border-color: #e5e7eb ! important;
  caret-color: #0b0d10 !important;
  background-clip: padding-box !important;
}
[data-theme="light"] #contact-form input::placeholder,
[data-theme="light"] #contact-form textarea::placeholder,
[data-theme="light"] #waitlist-form input::placeholder,
[data-theme="light"] #waitlist-form textarea::placeholder{
  color: #6b7280 !important;
  opacity: 1 !important;
}

/* Autofill fixes (Safari/Chrome) */
html.dark input:-webkit-autofill,
html.dark textarea:-webkit-autofill,
[data-theme="dark"] input:-webkit-autofill,
[data-theme="dark"] textarea:-webkit-autofill{
  -webkit-box-shadow: 0 0 0 1000px #0f1216 inset !important;
  -webkit-text-fill-color: #e5e7eb !important;
}
[data-theme="light"] input:-webkit-autofill,
[data-theme="light"] textarea:-webkit-autofill{
  -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
  -webkit-text-fill-color: #0b0d10 !important;
}

/*************************
 * Ask Page CTA Refresh  *
 *************************/
/* Primary: submit button on /council/ask */
#ask-submit{
  border-radius: 0.75rem !important; /* rounded-xl */
  min-height: 48px !important;
  padding: 0.75rem 1.25rem !important; /* px-5 py-3 approx */
  background: var(--gold) !important;
  color: #fff !important;
  box-shadow: 0 6px 18px rgba(179,160,121,0.10) !important;
  transition: transform .18s ease, box-shadow .18s ease, border-color .2s ease, background-color .2s ease !important;
}
#ask-submit:hover{
  transform: translateY(-1px) !important;
  box-shadow: 0 8px 22px rgba(179,160,121,0.14) !important;
}
#ask-submit:focus-visible{
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(179,160,121,0.5) !important;
}

/* Secondary: cancel link on /council/ask */
#ask-form .cta-secondary,
#ask-form a[href][class*="border"][class*="rounded"]{
  border-color: var(--concillio-gold) !important;
  border-width: 1px !important;
  border-style: solid !important;
  border-radius: 0.75rem !important; /* rounded-xl */
  color: #e5e7eb !important; /* neutral-200 */
  background: transparent !important;
  min-height: 48px !important;
}
#ask-form .cta-secondary:hover,
#ask-form a[href][class*="border"][class*="rounded"]:hover{
  background: var(--gold-12) !important;
}

/* Sync dark-mode hover for secondary buttons (global) */
[data-theme="dark"] a[class*="border"][class*="rounded"],
[data-theme="dark"] button[class*="border"][class*="rounded"]{
  transition: background-color .18s ease, box-shadow .18s ease, color .18s ease, transform .18s ease !important;
}
[data-theme="dark"] a[class*="border"][class*="rounded"]:hover,
[data-theme="dark"] button[class*="border"][class*="rounded"]:hover{
  background: color-mix(in oklab, var(--concillio-gold) 8%, #0f1216) !important;
  box-shadow: 0 0 0 1px rgba(179,160,121,0.30) inset, 0 1px 0 rgba(179,160,121,0.12) !important;
  color: #f1f5f9 !important;
}

#ask-form .cta-secondary:focus-visible,
#ask-form a[href][class*="border"][class*="rounded"]:focus-visible{
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(179,160,121,0.5) !important;
}
/* Ask page: unify spacing between adjacent buttons */
#ask-form .flex.gap-3{ column-gap: 1rem !important; row-gap: 1rem !important; }
/* Ask page: align secondary button padding with primary */
#ask-form a[href][class*="border"][class*="rounded"]{
  padding: 0.75rem 1.25rem !important;
}

/* Ask form inputs/textarea contrast fixes */
#ask-form input,
#ask-form textarea{
  color: #e5e7eb !important; /* ensure visible on dark bg */
}
#ask-form input::placeholder,
#ask-form textarea::placeholder{
  color: #a3a3a3 !important; /* slightly brighter placeholder on dark */
  opacity: 1 !important;
}
[data-theme="light"] #ask-form input,
[data-theme="light"] #contact-form input,
[data-theme="light"] #ask-form textarea,
[data-theme="light"] #contact-form textarea{
  background: #ffffff !important;
  color: #0b0d10 !important; /* dark text on light bg */
  border-color: #e5e7eb !important;
}
[data-theme="light"] #ask-form input::placeholder,
[data-theme="light"] #ask-form textarea::placeholder{
  color: #6b7280 !important; /* neutral-500-ish */
  opacity: 1 !important;
}

/* Dark theme explicit backgrounds for inputs/textarea */
[data-theme="dark"] #ask-form input,
[data-theme="dark"] #ask-form textarea,
html.dark #ask-form input,
html.dark #ask-form textarea{
  background: #0f1216 !important; /* deep neutral to match page */
  color: #e5e7eb !important;      /* light text */
  border-color: #1f2937 !important;/* neutral-800-ish */
  caret-color: #e5e7eb !important;
}
[data-theme="dark"] #ask-form input::placeholder,
[data-theme="dark"] #ask-form textarea::placeholder,
html.dark #ask-form input::placeholder,
html.dark #ask-form textarea::placeholder{
  color: #9ca3af !important; /* neutral-400/500 */
  opacity: 1 !important;
}

/*******************************
 * Global form control theming *
 *******************************/
/* Apply to contact/apply and any other forms */
/* Dark theme */
html.dark input[type="text"],
html.dark input[type="email"],
html.dark input[type="tel"],
html.dark input[type="url"],
html.dark input[type="search"],
html.dark input[type="password"],
html.dark textarea,
html.dark select,
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="tel"],
[data-theme="dark"] input[type="url"],
[data-theme="dark"] input[type="search"],
[data-theme="dark"] input[type="password"],
[data-theme="dark"] textarea,
[data-theme="dark"] select{
  background: #0f1216 !important;
  color: #e5e7eb !important;
  border-color: #1f2937 !important;
  caret-color: #e5e7eb !important;
}
/* Ensure inputs with missing type attribute also get dark styling */
html.dark input:not([type]),
html.dark input[type=""],
[data-theme="dark"] input:not([type]),
[data-theme="dark"] input[type=""]{
  background: #0f1216 !important;
  color: #e5e7eb !important;
  border-color: #1f2937 !important;
  caret-color: #e5e7eb !important;
}
/* Global dark styling for most input types except controls */
html.dark input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="button"]):not([type="submit"]):not([type="reset"]),
[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="button"]):not([type="submit"]):not([type="reset"]){
  background: #0f1216 !important;
  color: #e5e7eb !important;
  border-color: #1f2937 !important;
}
html.dark input::placeholder,
html.dark textarea::placeholder,
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder{
  color: #9ca3af !important;
  opacity: 1 !important;
}
html.dark input:focus,
html.dark textarea:focus,
[data-theme="dark"] input:focus,
[data-theme="dark"] textarea:focus{
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(179,160,121,0.35) !important;
  border-color: var(--concillio-gold) !important;
}

/* Light theme */
[data-theme="light"] input[type="text"],
[data-theme="light"] input[type="email"],
[data-theme="light"] input[type="tel"],
[data-theme="light"] input[type="url"],
[data-theme="light"] input[type="search"],
[data-theme="light"] input[type="password"],
[data-theme="light"] textarea,
[data-theme="light"] select{
  background: #ffffff !important;
  color: #0b0d10 !important;
  border-color: #e5e7eb !important;
}
[data-theme="light"] input::placeholder,
[data-theme="light"] textarea::placeholder{
  color: #6b7280 !important;
  opacity: 1 !important;
}
[data-theme="light"] input:focus,
[data-theme="light"] textarea:focus{
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(179,160,121,0.30) !important;
  border-color: var(--concillio-gold) !important;
}

/* Dark mode: readable text on dark buttons/links and navy tokens */
html.dark .text-\[var\(--navy\)\],
[data-theme="dark"] .text-\[var\(--navy\)\]{
  color: #e5e7eb !important;
}
/* Generic safety net for very dark backgrounds */
html.dark [class*="bg-neutral-95"],
[data-theme="dark"] [class*="bg-neutral-95"],
html.dark [class*="bg-neutral-90"],
[data-theme="dark"] [class*="bg-neutral-90"],
html.dark .bg-black,
[data-theme="dark"] .bg-black{
  color: #e5e7eb !important;
}

/*****************************************
 * Global CTA row spacing normalization   *
 *****************************************/
/* Unify spacing between adjacent buttons/links across pages */
.flex:has(> a[class*="inline-flex"]),
.flex:has(> .inline-flex),
.flex:has(> a[class*="rounded"]),
.flex:has(> button),
.flex:has(> form > button){
  column-gap: 1rem !important;
  row-gap: 1rem !important;
}

/*****************************************
 * Light-mode safety overrides for inputs *
 *****************************************/
/* Ensure light-mode wins over any dark/global rules */
[data-theme="light"] html:not(.dark) input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="button"]):not([type="submit"]):not([type="reset"]),
[data-theme="light"] html:not(.dark) textarea,
[data-theme="light"] html:not(.dark) select{
  background: #ffffff !important;
  color: #0b0d10 !important;
  border-color: #e5e7eb !important;
  caret-color: #0b0d10 !important;
}

/***************************************************
 * Luxe minimalist polish: typography & interactions *
 ***************************************************/
:root{ --gold-08: color-mix(in oklab, var(--concillio-gold) 8%, white); }
body{ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; letter-spacing: 0.01em; }
::selection{ background: var(--gold-24); color: #0b0d10; }

/* Readability: measure width utility */
.measure{ max-width: 68ch; }
@media (min-width: 1024px){ .measure{ max-width: 72ch; } }

/* Subtle emphasis for headings without shouting */
 h1, h2, h3{ letter-spacing: 0.01em; line-height: 1.25; }

/* Global link/button micro-interactions */
 a, button{ transition: color .18s ease, background-color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease; }

/* Reduce watermark prominence to keep it minimalist */
 .bg-neutral-900\/60 .opacity-\[0\.04\]{ opacity: .02 !important; }

/* Side menu: consistent luxe hover for items and toggles (data-menu only now) */

/* Header overlay menu links (data-menu & #site-menu handled below) */

/* Data-menu and #site-menu menu links (mobile panel) */
[data-menu] .menu-link,
#site-menu .menu-link{
  display:block;
  padding:.75rem .875rem;
  border-radius:.6rem;
  font-weight:500;
  transition: background-color .12s ease, color .12s ease, border-color .12s ease;
}

/* Drawer padding + lätt spring */
#site-menu[data-menu] { padding: 20px 16px 28px; }
#site-menu[data-menu] .menu-link { display:block; padding:10px 12px; border-radius:10px; }

/* Liten hover för meny-länkar (samma premium-känsla som chips/TOC) */
#site-menu[data-menu] .menu-link:hover,
#site-menu[data-menu] .menu-link:focus-visible{
  background: color-mix(in oklab, currentColor 10%, transparent);
  text-decoration: none;
  outline: 2px solid color-mix(in oklab, currentColor 35%, transparent);
  outline-offset: 2px;
}
#site-menu[data-menu] .menu-link:active { transform: translateY(1px); }

[data-menu] .menu-link:hover,
#site-menu .menu-link:hover{ background: var(--gold-12) !important; }
[data-theme="dark"] [data-menu] .menu-link,
[data-theme="dark"] #site-menu .menu-link{ color:#e5e7eb !important; }
[data-theme="light"] [data-menu] .menu-link,
[data-theme="light"] #site-menu .menu-link{ color:#0b0d10 !important; }
[data-theme="dark"] [data-menu] .menu-link:hover,
[data-theme="dark"] #site-menu .menu-link:hover{ color:#f1f5f9 !important; }

/* Footer theme sync */
 .site-footer{
  background: linear-gradient(180deg, #0b0f1a 0%, #0b0d10 100%);
  border-top: 1px solid #1f2937;
 }
 [data-theme="light"] .site-footer{
  background: linear-gradient(180deg, #f9fafb 0%, #f7f7fb 100%);
  border-top: 1px solid #e5e7eb;
  color: #0b0d10;
 }

 #menu-council-toggle, #menu-more-toggle{
  border-radius: 0.5rem;
  transition: border-color .18s ease, background-color .18s ease, color .18s ease;
 }
 #menu-council-toggle:hover, #menu-more-toggle:hover{ background: var(--gold-12); }
/* Dark-mode menu hover refinement: add soft gold ring + slight text brighten */
 [data-theme="dark"] #site-menu #menu-council-toggle:hover,
 [data-theme="dark"] #site-menu #menu-more-toggle:hover,
 [data-theme="dark"] #site-menu a.block:hover{
  box-shadow: 0 0 0 1px rgba(179,160,121,0.35) inset, 0 1px 0 rgba(179,160,121,0.15);
  color: #f1f5f9 !important; /* slightly brighter text */
 }
/* Reduce hover background in dark to keep it subtle */
 [data-theme="dark"] #site-menu a.block:hover,
 [data-theme="dark"] #site-menu #menu-council-toggle:hover,
 [data-theme="dark"] #site-menu #menu-more-toggle:hover{
  background: color-mix(in oklab, var(--concillio-gold) 10%, #0f1216) !important;
 }
 #menu-council-toggle[aria-expanded="true"] .chev, #menu-more-toggle[aria-expanded="true"] .chev{ transform: rotate(180deg); }
 #menu-council-toggle:focus-visible, #menu-more-toggle:focus-visible, #site-menu a.block:focus-visible{
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(179,160,121,0.45) !important;
 }

/* Roles page target highlight and anchor-link behavior */
.docs-roles .section:target {
  outline: 2px solid currentColor;
  outline-offset: 4px;
  box-shadow: 0 0 0 4px color-mix(in oklab, currentColor 18%, transparent);
  border-radius: 12px;
}
.docs-roles .section:target h2,
.docs-roles .section:target h3 {
  animation: target-pop 280ms ease-out;
}
@keyframes target-pop {
  from { transform: translateY(2px); opacity: 0.6; }
  to   { transform: translateY(0);   opacity: 1;   }
}
/* Samma look som :target, men triggad via JS-klass */
.docs-roles .section.is-highlight {
  outline: 2px solid currentColor;
  outline-offset: 4px;
  box-shadow: 0 0 0 4px color-mix(in oklab, currentColor 18%, transparent);
  border-radius: 12px;
  animation: target-pop 280ms ease-out;
}

.anchor-link { opacity: 0; margin-left: .5rem; text-decoration: none; }
h2:hover .anchor-link,
h2:focus-within .anchor-link,
.section:target .anchor-link { opacity: 1; }

/* TOC active state for /docs/roller */
.docs-roles .toc a.active { text-decoration: underline; font-weight: 600; }
.docs-roles .toc a[aria-current="true"] { text-decoration-thickness: 2px; }
/* Ensure active link has clear contrast badge as well (optional) */
html.dark .docs-roles .toc a.active{ background: color-mix(in oklab, #f5d77d 18%, transparent); color: var(--toc-focus-fg); }
html:not(.dark) .docs-roles .toc a.active{ background: color-mix(in oklab, #d4af37 14%, transparent); color: var(--toc-focus-fg); }

/* Make TOC scrollable & comfortable for 'nearest' behavior */
.docs-roles .toc { max-height: min(70vh, 640px); overflow: auto; scroll-behavior: smooth; }

/* Premium hover för TOC-länkar */
.docs-roles .toc a {
  transition: color 0.2s ease, background-color 0.2s ease;
  border-radius: 6px;
  padding: 2px 4px;
}

.docs-roles .toc a:hover {
  background-color: color-mix(in oklab, gold 15%, transparent);
  color: var(--text-strong, currentColor);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

/* Light/Dark-specific TOC hover backgrounds */
html:not(.dark) .docs-roles .toc a:hover { background: color-mix(in oklab, #d4af37 12%, transparent); }
html.dark .docs-roles .toc a:hover { background: color-mix(in oklab, #f5d77d 18%, transparent); }
/* Strong, consistent focus styles with adequate contrast */
.docs-roles .toc a:focus-visible{
  outline: 2px solid var(--toc-focus-ring);
  outline-offset: 3px;
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--toc-focus-ring) 35%, transparent);
}
html:not(.dark) .docs-roles .toc a:focus-visible{
  background: var(--toc-focus-bg-light);
  color: var(--toc-focus-fg);
}
html.dark .docs-roles .toc a:focus-visible{
  background: var(--toc-focus-bg-dark);
  color: var(--toc-focus-fg);
}

/* Panels: unify rounding for modern look */
 [class*="bg-neutral-950/40"], [class*="bg-neutral-950/50"], [class*="bg-neutral-900/60"]{
  border-radius: 0.75rem;
 }

/* Cards: even softer hover to feel more premium */
 .card-premium:hover{ box-shadow: 0 10px 26px rgba(179,160,121,0.12); transform: translateY(-3px); }

/* Sticky header: slightly stronger glass for luxury feel */
 #page-sticky-header{ -webkit-backdrop-filter: saturate(140%) blur(10px); backdrop-filter: saturate(140%) blur(10px); }

/* Global header wrapper and menu button styles */
 .site-header{
  position: sticky; top: 0; z-index: var(--z-header);
  background: rgba(11,13,16,0.80);
  -webkit-backdrop-filter: saturate(120%) blur(8px);
  backdrop-filter: saturate(120%) blur(8px);
  border-bottom: 1px solid #1f2937; /* neutral-800 */
 }
 [data-theme="light"] .site-header{
  background: rgba(255,255,255,0.86);
  border-bottom-color: #e5e7eb;
  color: #0b0d10;
 }
/* Container */
 .wrap{ max-width: 1200px; margin: 0 auto; padding-left: 1.5rem; padding-right: 1.5rem; }
/* Brand mark placeholder style */
 .brand-mark{ display:inline-block; width:28px; height:28px; border-radius:9999px; border:1px solid var(--concillio-gold); background: #0f1216; }
 .brand-name{ letter-spacing: 0.06em; text-transform: uppercase; }
/* Modern menu trigger */
 .menu-trigger{ display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:9999px; border:1px solid #1f2937; background: rgba(11,13,16,0.80); color:#e5e7eb; transition: border-color .18s ease, background-color .18s ease; }
 .menu-trigger:hover{ background:#111418; border-color: var(--concillio-gold); }
 [data-theme="light"] .menu-trigger{ background: rgba(255,255,255,0.92); color:#0b0d10; border-color:#e5e7eb; }
 [data-theme="light"] .menu-trigger:hover{ border-color: var(--concillio-gold); }
/* Modern menu close */
 .menu-close{ display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:9999px; border:1px solid #1f2937; color:#e5e7eb; background: transparent; }
 .menu-close:hover{ border-color: var(--concillio-gold); }
 [data-theme="light"] .menu-close{ border-color:#e5e7eb; color:#0b0d10; }

/* Ensure links inside header have nice hover */
 .site-header a.brand{ color: inherit; }
 .site-header a.brand:hover .brand-name{ color: var(--concillio-gold); }
 
 /* Header scroll shadow (deprecated in favor of .siteHeader.is-scrolled) */
 .site-header { transition: box-shadow 160ms ease; }
 .site-header.scrolled { box-shadow: 0 6px 16px rgba(16,24,40,.06); }

/* Generic header z-index for plain <header> tags */
header { z-index: var(--z-header); }

/* === Mobile menu overlay */
@media (min-width: 768px){
  #site-menu-overlay{ display:none !important; }
}

/* Global smooth scrolling (fallback), but respect reduced motion */
@media (prefers-reduced-motion: no-preference){
  html{ scroll-behavior: smooth; }
}

/* Anchor landing offset */
.section { scroll-margin-top: var(--header-offset, 72px); }
section[id] { scroll-margin-top: var(--header-offset, 72px); }

@media (prefers-reduced-motion: reduce){
  #site-menu-overlay{ transition: none !important; }
}

/* inert fallback */
[inert]{ pointer-events: none; user-select: none; }
#site-menu *{ pointer-events: auto; }
/* Ensure desktop nav stays clickable regardless of overlay state */
.siteHeader .nav { position: relative; z-index: calc(var(--z-overlay) + 1); }

/* Hide auth header */
#ssr-auth-header { display: none !important; }

/* Desktop nav & CTA polish */
/* Premium-hover i toppnav */
.siteHeader .nav a.nav-link{
  position:relative; text-underline-offset: 3px; text-decoration-thickness: 1px;
}
.siteHeader .nav a.nav-link::after{
  content:""; position:absolute; left:0; bottom:-3px; height:2px; width:0;
  background: currentColor; border-radius:2px; transition: width .18s ease;
}
.siteHeader .nav a.nav-link:hover::after,
.siteHeader .nav a.nav-link:focus-visible::after{ width:100%; }
.siteHeader .nav a.nav-link:active{ transform: translateY(1px); }

/* Keep active state styling visible */
.nav-link{ position:relative; opacity:.9; }
.nav-link.active{ opacity:1; font-weight:600; }
.menu-link.active{ font-weight:600; }

/* Apply the same link underline/press effect to line-up shortcut chips */
.role-chip{
  position: relative;
  transition: color .18s ease, background-color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .12s ease;
}
.role-chip::after{
  content: "";
  position: absolute;
  left: 0; bottom: -6px;
  height: 2px; width: 0;
  background: #0f766e; /* same as nav-link */
  transition: width .18s ease;
}
.role-chip:hover::after,
.role-chip:focus-visible::after,
.role-chip:active::after{ width: 100%; }
.role-chip:active{ transform: translateY(1px); }
.role-chip--active{ border-color:#0f766e !important; box-shadow:0 0 0 1px #0f766e inset !important; outline: 2px solid currentColor; outline-offset: 2px; }
/* Ensure decorative inner elements don’t intercept clicks */
.role-chip > .chip-ink, .role-chip > .chip-underline { pointer-events: none; }

.nav-toggle-link{ font-weight:500; padding: .25rem .35rem; border-radius:.375rem; }
.nav-toggle-link:hover{ text-decoration: underline; }

.menu-toggle-mobile{ display:block; width:100%; text-align:left; padding:.75rem .875rem; border-radius:.6rem; border:1px solid var(--c-border); }
.menu-toggle-mobile:hover{ background:color-mix(in oklab, var(--c-bg) 88%, black); }

/* Overlay */
html.menu-open, html.menu-open body { overflow: hidden; }
#site-menu-overlay,
.menu-overlay { position: fixed; inset: 0; opacity: 0; pointer-events: none; transition: opacity .2s; background: var(--overlay-bg); z-index: var(--z-overlay); }
html.menu-open #site-menu-overlay,
html.menu-open .menu-overlay { opacity: 1; pointer-events: auto; }
/* Safety: if aria-hidden=true, never intercept clicks even if a class was left on */
#site-menu-overlay[aria-hidden="true"] { pointer-events: none !important; }

/* Premium A11y focus ring (menu) */
#site-menu a:focus-visible,
[data-menu] a:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

/* Reduced motion: disable transitions on overlay/panel */
@media (prefers-reduced-motion: reduce){
  #site-menu-overlay, .menu-overlay,
  [data-menu], #site-menu{ transition: none !important; }
}

/* Desktop: hide mobile overlay & trigger */
@media (min-width: 1024px){
  #menu-trigger{ display:none !important; }
  #site-menu-overlay{ display:none !important; }
}

/* Data-menu: slide-in right drawer (fix mobile open) */
[data-menu],
#site-menu{
  position: fixed;
  top: 0;
  right: 0;
  height: 100dvh;
  width: min(92vw, 420px);
  max-width: 100%;
  background: #fff;
  color: #0f172a;
  box-shadow: -24px 0 48px rgba(2,6,23,.18), -6px 0 16px rgba(2,6,23,.10);
  transform: translateX(100%);
  transition: transform .22s ease;
  z-index: var(--z-menu);
}
html.dark [data-menu],
html.dark #site-menu{ background:#0b0f1a; color:#e5e7eb; }
html.menu-open [data-menu],
html.menu-open #site-menu{ transform: translateX(0); }
html:not(.menu-open) [data-menu][aria-hidden="true"],
html:not(.menu-open) #site-menu[aria-hidden="true"]{ transform: translateX(100%); pointer-events: none; opacity: 1; }



/* Z-index stack */
header { z-index: var(--z-header); }
#site-menu-overlay, .menu-overlay { z-index: var(--z-overlay); }
[data-menu], #site-menu { z-index: var(--z-menu); }

:root {
  --z-toast: 70;               /* du har redan denna i z-index-skalan */
  --overlay-bg: rgba(0,0,0,.4);/* redan definierad – lämna som är */
  /* Toast design tokens */
  --toast-gap: 12px;
  --toast-pad: 12px 14px;
  --toast-radius: 12px;
  --toast-bg: rgba(0,0,0,.85);
  --toast-fg: #fff;
  --toast-shadow: 0 8px 24px rgba(0,0,0,.24);
  --toast-duration: 4200ms; /* auto-dismiss tid */
}

/* Container: sticky nederkant som default */
.toast-container {
  position: fixed;
  z-index: var(--z-toast);
  inset: auto 0 env(safe-area-inset-bottom) 0;
  display: grid;
  justify-items: center;
  gap: var(--toast-gap);
  padding: 0 12px env(safe-area-inset-bottom) 12px;
  pointer-events: none; /* klick går igenom mellan toasts */
}
.toast-container--bottom { bottom: 0; }
.toast-container--top { top: 0; padding-top: env(safe-area-inset-top); }

/* Toast */
.toast {
  pointer-events: auto; /* klickbar */
  background: var(--toast-bg);
  color: var(--toast-fg);
  border-radius: var(--toast-radius);
  padding: var(--toast-pad);
  box-shadow: var(--toast-shadow);
  max-width: min(520px, 92vw);
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: 10px 14px;
  opacity: 0;
  transform: translateY(8px) scale(.98);
  animation: toast-in 220ms ease, toast-auto-hide var(--toast-duration) linear forwards;
}

/* Varianter */
.toast--success { --toast-bg: rgba(8, 122, 66, .92); }
.toast--warning { --toast-bg: rgba(196, 136, 3, .95); }
.toast--error   { --toast-bg: rgba(168, 38, 38, .95); }

/* Innehåll */
.toast__title { font-weight: 600; line-height: 1.2; }
.toast__msg   { opacity: .95; }
.toast__close {
  background: transparent; border: 0; color: currentColor;
  cursor: pointer; padding: 4px; margin: -4px; border-radius: 10px;
}
.toast__close:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

/* Animationer */
@keyframes toast-in {
  from { opacity: 0; transform: translateY(8px) scale(.98); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}
@keyframes toast-out {
  to { opacity: 0; transform: translateY(6px) scale(.98); }
}
/* Auto-hide (lägger på toast-out i slutet) */
@keyframes toast-auto-hide {
  0%   { }
  90%  { }
  100% { opacity: 0; transform: translateY(6px) scale(.98); }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .toast { animation: none; }
}

/* Tema-specifika overlay-nyanser (om inte redan inlagda) */
html[data-theme="light"] { /* ljus: lite svagare grundfärg för bakgrund */
  /* du kan även sätta en ljusare toast här om du vill */
}
html[data-theme="dark"], html.dark {
  /* valfritt: inga extra ändringar behövs för toasts */
}

/* Sticky header */
.siteHeader{
  position: sticky;
  top: 0;
  z-index: var(--z-header, 40);
  background: var(--header-bg, var(--bg, #fff));
  backdrop-filter: none; /* vi kör utan blur */
  will-change: transform; /* micro-opt */
}

/* Skugga när sidan har scrollat */
.siteHeader.is-scrolled{
  box-shadow:
    0 1px 0 rgba(0,0,0,.06),
    0 8px 20px rgba(0,0,0,.06);
}

/* Dark-mode justering (valfritt) */
html.dark .siteHeader{
  background: var(--header-bg, #0b0e11);
}

/* TOC focus support (keyboard) — unified with tokens above */
.docs-roles .toc a:focus-visible{
  outline: 2px solid var(--toc-focus-ring);
  outline-offset: 3px;
  border-radius: 8px;
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--toc-focus-ring) 35%, transparent);
}

/* Roller: landa snyggt under sticky headern */
.docs-roles .section,
.docs-roles h2[id] {
  scroll-margin-top: calc(var(--header-offset, 72px) + 8px);
}

/* ===== Pricing (premium) ===== */
.pricing-page { padding: 48px 0 72px; }
.pricing-page .container { max-width: 1100px; margin: 0 auto; padding: 0 16px; }

.pricing-hero { text-align: center; margin-bottom: 28px; }
.pricing-hero .eyebrow { letter-spacing: .12em; text-transform: uppercase; opacity: .7; font-size: .8rem; }
.pricing-hero h1 { font-size: clamp(28px, 4.5vw, 40px); margin: 6px 0 8px; }
.pricing-hero .sub { font-size: 1.05rem; opacity: .85; }

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 16px;
}
@media (min-width: 700px) {
  .pricing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .pricing-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.pricing-card {
  position: relative;
  border-radius: 18px;
  padding: 22px 18px;
  background: color-mix(in oklab, var(--bg, #fff) 92%, transparent);
  outline: 1px solid color-mix(in oklab, currentColor 10%, transparent);
  transition: transform .18s ease, box-shadow .18s ease, outline-color .18s ease, background .18s ease;
}
html.dark .pricing-card {
  background: color-mix(in oklab, #111 92%, transparent);
  outline-color: color-mix(in oklab, currentColor 18%, transparent);
}
.pricing-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 28px rgba(0,0,0,.12);
}
.pricing-card.is-highlighted {
  outline-color: color-mix(in oklab, #d4af37 55%, currentColor 25%);
  box-shadow: 0 16px 36px rgba(0,0,0,.18);
}
.pricing-card .plan-badge {
  position: absolute; top: -10px; left: 16px;
  background: color-mix(in oklab, #d4af37 85%, transparent);
  color: #0b0b0b; font-weight: 700; font-size: .72rem;
  padding: 6px 10px; border-radius: 999px; letter-spacing: .02em;
}
html.dark .pricing-card .plan-badge {
  background: color-mix(in oklab, #f5d77d 85%, transparent); color: #111;
}

.plan-head { margin-bottom: 12px; }
.plan-title { font-size: 1.1rem; font-weight: 700; margin: 0 0 6px; }
.plan-price { display:flex; align-items: baseline; gap: 6px; margin: 4px 0 6px; }
.plan-price .price { font-size: 1.65rem; font-weight: 800; letter-spacing: -.01em; }
.plan-price .period { opacity: .7; font-size: .9rem; }
.plan-desc { opacity: .85; font-size: .95rem; margin: 6px 0 10px; min-height: 40px; }

.plan-features { display: grid; gap: 8px; margin: 10px 0 14px; padding: 0; list-style: none; }
.plan-features .feature { display:flex; gap: 10px; align-items: flex-start; }
.plan-features .icon { margin-top: 2px; opacity: .9; color: color-mix(in oklab, #0f766e 58%, currentColor 30%); }
html.dark .plan-features .icon { color: color-mix(in oklab, #50e3c2 58%, currentColor 30%); }
.plan-features .label { line-height: 1.35; }

.plan-cta { margin-top: 14px; }
.btn.btn-primary {
  display:inline-block; padding: 10px 14px; border-radius: 12px; font-weight: 700;
  text-decoration: none;
  background: color-mix(in oklab, #0f766e 70%, #d4af37 30%);
  color: #fff;
  transition: transform .12s ease, box-shadow .12s ease, background .2s ease;
}
.btn.btn-primary:hover { transform: translateY(1px); box-shadow: 0 6px 14px rgba(0,0,0,.18); }
html.dark .btn.btn-primary { background: color-mix(in oklab, #0891b2 65%, #f5d77d 35%); color: #0b0b0b; }

/* ===== Thank You (minimal) ===== */
.thankyou-page{max-width:720px;margin:0 auto;padding:4rem 1.5rem;text-align:center}
.thankyou-hero h1{font-size:clamp(2rem,3vw,2.5rem);margin-bottom:.5rem}
.thankyou-hero p{opacity:.85;margin:.25rem 0}
.thankyou-page .actions{display:flex;gap:.75rem;justify-content:center;margin-top:1.25rem}
.thankyou-page .actions .btn{padding:.75rem 1rem;border-radius:.75rem;border:1px solid color-mix(in oklab, currentColor 20%, transparent)}
.thankyou-page .actions .btn-primary{border:none}
@media (max-width:640px){.thankyou-page .actions{flex-direction:column}}
html.dark .thankyou-page .actions .btn{border-color:color-mix(in oklab, #fff 20%, transparent)}

.pricing-notes .small { opacity: .75; text-align: center; margin-top: 18px; font-size: .9rem; }