/* ============================================================
   shared.css — Kontakt site-wide styles
   Variables, reset, base, nav, footer, common components.
   Theme switching via shell.js ([data-theme="dark"]).
   ============================================================ */

/* --- Fonts ------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,wght@0,300;0,700;0,900;1,300;1,700&family=DM+Sans:wght@300;400;500;600&display=swap');

/* --- Variables: Light (default) ---------------------------- */
:root {
  color-scheme: light dark;
  --bg:        #FAFAF7;
  --surface:   #F2EDE5;
  --surface2:  #E8E3DB;
  --text:      #1C1A17;
  --muted:     #6B6560;
  --muted2:    #6F6B66;
  --accent:      #E8601C;
  --accent-rgb:  232, 96, 28;
  --accent-dark: #c04010;
  --accent-light: #F07840;
  --border:    #E5E0D8;
  --radius:    12px;
  --white:     #fff;
  --nav-bg:    rgba(250,250,247,0.92);
  --shadow:    0 1px 3px rgba(0,0,0,0.08);

  /* Z-index scale */
  --z-raised:    1;
  --z-dropdown:  100;
  --z-nav:       200;
  --z-modal:     300;
  --z-toast:     400;
  --z-onboarding: 500;
  --z-skip: 9999;

  /* Color RGB components (for rgba() usage) */
  --white-rgb: 255, 255, 255;
  --neutral-rgb: 160, 155, 147;

  /* Overlay tokens */
  --overlay-light: rgba(0,0,0,0.4);
  --overlay-mid:   rgba(0,0,0,0.6);
  --overlay-heavy: rgba(0,0,0,0.7);
  --overlay-dark:  rgba(0,0,0,0.75);

  /* Border radius scale */
  --radius-xs:    4px;
  --radius-badge: 6px;
  --radius-sm:    8px;
  --radius-input: 10px;
  --radius-md:    12px;
  --radius-card:  16px;
  --radius-lg:    20px;
  --radius-pill:  40px;

  /* Spacing scale */
  --space-xs:  4px;
  --space-6:   6px;   /* micro-gap (typing dots, icon separators) */
  --space-sm:  8px;
  --space-9:   9px;   /* compact pill/button padding              */
  --space-10: 10px;
  --space-11: 11px;   /* tight button padding (between sm/md)     */
  --space-12: 12px;
  --space-13: 13px;   /* medium button padding (between 12/14)    */
  --space-md: 16px;
  --space-14: 14px;
  --space-18: 18px;
  --space-20: 20px;
  --space-22: 22px;   /* dense card padding                       */
  --space-lg: 24px;
  --space-28: 28px;
  --space-xl: 32px;
  --space-36: 36px;   /* card/component inner padding             */
  --space-40: 40px;   /* content section gap                      */
  --space-2xl: 48px;
  --space-3xl: 56px;  /* section/page bottom padding              */
  --space-60: 60px;   /* section bottom / nav-offset padding      */
  --space-4xl: 72px;  /* main content top (below fixed nav)       */
  --space-5xl: 80px;  /* page body bottom padding                 */
  --space-88: 88px;   /* hero/page top padding (nav-height + gap) */
  --space-120: 120px; /* hero section top padding                 */

  /* Transitions */
  --transition-fast: 0.12s ease;
  --transition-mid:  0.15s ease;
  --transition-base: 0.2s ease;
  --transition-slow: 0.3s ease;

  /* Animation durations */
  --anim-spin:   0.7s linear infinite;
  --anim-fade:   0.6s ease;
  --anim-modal:  0.22s ease;
  --anim-bubble: 0.4s ease;
  --anim-bounce: 1.2s infinite;
  --anim-enter:  0.3s ease;
  --anim-pulse:    2s infinite;
  --anim-skeleton: 1.5s ease-in-out infinite;
  --transition-fill: 1.8s linear;

  /* Shadows */
  --shadow-sm:    0 1px 3px rgba(0,0,0,0.08);
  --shadow-md:    0 4px 12px rgba(0,0,0,0.12);
  --shadow-focus: 0 0 0 3px rgba(var(--accent-rgb),0.15);

  /* Semantic colors */
  --color-error:               #e05252;
  --error-rgb:                 224, 82, 82;
  --color-error-bg:            rgba(var(--error-rgb), 0.08);
  --color-error-bg-md:         rgba(var(--error-rgb), 0.12);
  --color-error-border:        rgba(var(--error-rgb), 0.25);
  --color-error-border-strong: rgba(var(--error-rgb), 0.5);
  --color-error-hover:         rgba(var(--error-rgb), 0.18);
  --color-warning:    #F59E0B;
  --warning-rgb:      245, 158, 11;
  --text-light-rgb:   242, 237, 228;
  --color-success:    #34c759;
  --success-rgb:      52, 199, 89;
  --color-success-bg:     rgba(var(--success-rgb), 0.12);
  --color-success-border: rgba(var(--success-rgb), 0.25);

  /* Character colors — current 10 characters */
  --char-km-color:         #e07744;
  --char-lezen-color:      #2a9d8f;
  --char-luisteren-color:  #4361ee;
  --char-spreken-color:    #7b5ea7;
  --char-schrijven-color:  #3a7ebf;
  --char-okt-color:        #c96b3a;
  --char-dokter-color:     #2d7a5e;
  --char-winkelier-color:  #c0444a;
  --char-collega-color:    #7e57a2;
  --char-ambtenaar-color:  #4a7fa5;

  /* Green alias (light theme) */
  --green:        #2DA44E;
  --green-bg:     rgba(45,164,78,0.15);
  --green-border: rgba(45,164,78,0.25);

  /* Avatar palette (testimonials, reviews) */
  --avatar-purple: #4a3a8a;
  --avatar-green:  #2a6049;

  /* Typography scale — semantic font-size tokens */
  --text-2xs:  0.6875rem;  /* 11px — section labels, uppercase hints  */
  --text-xs:   0.75rem;    /* 12px — captions, badges, timestamps      */
  --text-sm:   0.8125rem;  /* 13px — UI labels, secondary text         */
  --text-base: 0.875rem;   /* 14px — body text, card content           */
  --text-md:   0.9375rem;  /* 15px — descriptive text, nav items       */
  --text-rg:   0.95rem;    /* 15.2px — body copy, list items           */
  --text-lg:   1rem;       /* 16px — default / base size               */
  --text-xl:   1.25rem;    /* 20px — card titles, logo, close icon     */
  --text-2xl:  1.375rem;   /* 22px — subheadings, modal titles         */
  --text-3xl:  1.75rem;    /* 28px — stat numbers, display values      */

  /* Extended font-size tokens — body in-between + display scale */
  --text-3xs:    0.625rem;  /* 10px — micro labels, badge text          */
  --text-xl-sm:  1.125rem;  /* 18px — between lg and xl                 */
  --text-disp-1: 1.5rem;    /* 24px — section subheadings               */
  --text-disp-2: 1.625rem;  /* 26px — section headings                  */
  --text-disp-3: 2rem;      /* 32px — page headings                     */
  --text-disp-4: 2.25rem;   /* 36px — large display                     */
  --text-disp-5: 2.5rem;    /* 40px — hero accent                       */
  --text-disp-6: 3rem;      /* 48px — stat / number display             */
  --text-disp-7: 4.5rem;   /* 72px — hero step / decorative number     */

  /* Font family tokens */
  --font-sans: 'DM Sans', sans-serif;
  --font-serif: 'Fraunces', serif;

  /* Layout tokens */
  --nav-height:      56px;
  --size-avatar:     40px;   /* nav/compact UI avatars     */
  --size-avatar-lg:  44px;   /* explore grid avatars       */
  --width-xs:     380px;   /* narrow forms / modals      */
  --width-sm:     420px;   /* default modal / buy form    */
  --width-prose:    520px;   /* prose / hero sub columns    */
  --width-md:       600px;   /* main content column         */
  --width-faq:      640px;   /* FAQ list / form containers  */
  --width-lg:       720px;   /* wide content / article      */
  --width-section:  760px;   /* general section layout      */
  --width-card:     440px;   /* card / auth modals          */
  --width-content:  480px;   /* medium narrow text columns  */
  --width-wrap:     800px;   /* content wrap (blog/admin)   */
  --width-main:     860px;   /* main page content column    */
  --width-xl:       900px;   /* section max-width           */
  --width-2xl:  1400px;   /* page wrapper                */
}

/* --- Variables: Dark (only overrides; brand colors inherit from :root) --- */
[data-theme="dark"] {
  --bg:        #0C0B09;
  --surface:   #141310;
  --surface2:  #1C1A17;
  --text:      #F2EDE4;
  --muted:     #7A7570;
  --muted2:    #7F7871;
  --border:    rgba(242,237,228,0.10);
  --nav-bg:    rgba(12,11,9,0.90);
  --shadow:       0 1px 3px rgba(0,0,0,0.4);
  --shadow-sm:    0 1px 3px rgba(0,0,0,0.28);
  --shadow-md:    0 4px 12px rgba(0,0,0,0.4);
  --shadow-focus: 0 0 0 3px rgba(var(--accent-rgb),0.25);
  --green-bg:     rgba(45,164,78,0.12);
  --green-border: rgba(45,164,78,0.2);
  /* Semantic color overrides — higher opacity for dark bg visibility */
  --color-error-bg:            rgba(224, 82, 82, 0.10);
  --color-error-bg-md:         rgba(224, 82, 82, 0.15);
  --color-error-border:        rgba(224, 82, 82, 0.30);
  --color-error-border-strong: rgba(224, 82, 82, 0.55);
  --color-error-hover:         rgba(224, 82, 82, 0.20);
  --color-success-bg:          rgba(52, 199, 89, 0.12);
  --color-success-border:      rgba(52, 199, 89, 0.28);
  /* Warning — same value, amber is visible on dark bg */
  --color-warning:  #F59E0B;
  /* Character colors — slightly lightened for dark bg contrast */
  --char-km-color:         #e88855;
  --char-lezen-color:      #3ab5a5;
  --char-luisteren-color:  #6b84ff;
  --char-spreken-color:    #9b7ec7;
  --char-schrijven-color:  #5a9ed0;
  --char-okt-color:        #d97f50;
  --char-dokter-color:     #4d9a7e;
  --char-winkelier-color:  #d0646a;
  --char-collega-color:    #9e77c2;
  --char-ambtenaar-color:  #6a9fc5;
  /* Avatar palette — lightened for dark surface visibility */
  --avatar-purple: #7a6ab0;
  --avatar-green:  #4a8069;
}

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

/* --- Base -------------------------------------------------- */
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-weight: 400;
  line-height: 1.6;
  font-size: var(--text-lg);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); }

/* --- Typography -------------------------------------------- */
h1 {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 900;
  line-height: 1.1;
  margin-bottom: var(--space-md);
}
h1 em { color: var(--accent); font-style: italic; }

h2 {
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
  margin-bottom: var(--space-md);
}
h2 em { font-style: italic; color: var(--accent); }

h3 {
  font-family: var(--font-serif);
  font-size: var(--text-xl-sm);
  font-weight: 600;
  margin-bottom: var(--space-sm);
}

/* --- Nav --------------------------------------------------- */
#site-nav {
  position: sticky;
  top: 0;
  z-index: var(--z-nav);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--space-lg);
  height: var(--nav-height);
  background: var(--nav-bg);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  gap: var(--space-md);
}
#site-nav .nav-logo {
  font-family: var(--font-serif);
  font-size: var(--text-xl-sm);
  font-weight: 900;
  color: var(--text);
  text-decoration: none;
  flex-shrink: 0;
}
#site-nav .nav-logo span { color: var(--accent); }
#site-nav .nav-links { display: flex; align-items: center; gap: var(--space-xs); flex: 1; }
#site-nav .nav-link {
  font-size: var(--text-sm);
  color: var(--muted);
  text-decoration: none;
  padding: 5px var(--space-10);
  border-radius: var(--radius-badge);
  transition: color var(--transition-fast), background var(--transition-fast);
}
#site-nav .nav-link:hover, #site-nav .nav-link:focus-visible { color: var(--text); background: var(--surface); }
#site-nav .nav-link.active { color: var(--text); font-weight: 500; }
#site-nav .nav-right { display: flex; align-items: center; gap: var(--space-sm); flex-shrink: 0; }

.btn-nav {
  font-size: var(--text-sm);
  padding: var(--space-10) var(--space-14);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  color: var(--muted);
  background: transparent;
  text-decoration: none;
  font-family: inherit;
  cursor: pointer;
  transition: color var(--transition-fast), border-color var(--transition-fast);
  white-space: nowrap;
}
.btn-nav:hover, .btn-nav:focus-visible { color: var(--text); border-color: var(--muted2); }

#nav-switcher {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  flex-shrink: 0;
}
#nav-switcher button {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: var(--space-10) var(--space-12);
  font-size: var(--text-xs);
  font-family: var(--font-sans);
  color: var(--muted);
  line-height: 1;
  transition: color var(--transition-fast), background var(--transition-fast);
}
#nav-switcher button:hover, #nav-switcher button:focus-visible { color: var(--text); background: var(--surface); }
#nav-switcher button.active { color: var(--text); font-weight: 600; }
#nav-switcher .sep { width: 1px; height: var(--space-14); background: var(--border); flex-shrink: 0; }
#nav-switcher #theme-btn svg { display: block; stroke: currentColor; }

@media (max-width: 600px) {
  #site-nav .nav-links { display: none; }
  #site-nav { padding: 0 var(--space-md); }
}

/* --- App/breadcrumb nav (data-app-nav) -------------------- */
/* Base: sticky for public character pages.                   */
/* app.css overrides to position:fixed for authenticated pages */
nav[data-app-nav] {
  position: sticky; top: 0; left: 0; right: 0; z-index: var(--z-dropdown);
  display: flex; align-items: center; justify-content: space-between;
  height: var(--nav-height); padding: 0 var(--space-40);
  background: var(--nav-bg); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
}
nav[data-app-nav] .logo {
  font-family: var(--font-serif);
  font-size: var(--text-xl-sm); font-weight: 900;
  color: var(--text); text-decoration: none;
  flex-shrink: 0; margin-bottom: 0;
}
nav[data-app-nav] .logo span { color: var(--accent); }
.nav-breadcrumb { display: flex; align-items: center; gap: 0; }
.nav-crumb {
  font-size: var(--text-sm); color: var(--muted); text-decoration: none;
  display: flex; align-items: center; transition: color var(--transition-base);
}
.nav-crumb::before { content: '/'; margin: 0 var(--space-sm); opacity: 0.35; color: var(--muted); }
.nav-crumb:hover, .nav-crumb:focus-visible { color: var(--text); }
.nav-crumb--current { color: var(--text); pointer-events: none; }
@media (max-width: 600px) {
  nav[data-app-nav] { padding: 0 var(--space-md); }
}

/* --- Footer ----------------------------------------------- */
#site-footer {
  border-top: 1px solid var(--border);
  padding: var(--space-28) var(--space-lg);
  text-align: center;
  font-size: var(--text-xs);
  color: var(--muted2);
}
#site-footer .footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-xs) var(--space-md);
  margin-bottom: var(--space-12);
}
#site-footer .footer-links a { color: var(--muted2); text-decoration: none; transition: color var(--transition-fast); }
#site-footer .footer-links a:hover, #site-footer .footer-links a:focus-visible { color: var(--accent); }
#site-footer .footer-copy { color: var(--muted2); }

/* --- Buttons ---------------------------------------------- */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  background: var(--accent);
  color: var(--white);
  border: none;
  border-radius: var(--radius-md);
  padding: var(--space-14) var(--space-28);
  font-size: var(--text-md);
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--transition-mid);
}
.btn-primary:hover, .btn-primary:focus-visible { background: var(--accent-light); color: var(--white); }

.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-12) var(--space-22);
  font-size: var(--text-base);
  font-family: inherit;
  cursor: pointer;
  text-decoration: none;
  transition: color var(--transition-mid);
}
.btn-ghost:hover, .btn-ghost:focus-visible { color: var(--text); }

/* --- Layout ----------------------------------------------- */
.section {
  padding: var(--space-60) var(--space-lg);
  max-width: var(--width-section);
  margin: 0 auto;
}
.section-label {
  font-size: var(--text-2xs);
  font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--accent);
  text-transform: uppercase;
  margin-bottom: var(--space-12);
}

.hero {
  padding: var(--space-120) var(--space-lg) var(--space-5xl);
  text-align: center;
  max-width: 680px;
  margin: 0 auto;
}
.hero-sub {
  font-size: var(--text-xl-sm);
  color: var(--muted);
  max-width: var(--width-content);
  margin: 0 auto var(--space-36);
  line-height: 1.6;
}
.hero-ctas { display: flex; gap: var(--space-12); justify-content: center; flex-wrap: wrap; }

/* --- Badge ------------------------------------------------- */
.badge {
  display: inline-block;
  background: rgba(var(--accent-rgb),0.12);
  color: var(--accent);
  border: 1px solid rgba(var(--accent-rgb),0.3);
  border-radius: var(--radius-lg);
  font-size: var(--text-xs);
  font-weight: 500;
  padding: 5px var(--space-14);
  letter-spacing: 0.06em;
  margin-bottom: var(--space-lg);
}

/* --- Steps ------------------------------------------------- */
.steps { display: flex; flex-direction: column; gap: var(--space-20); margin-top: var(--space-xl); }
.step { display: flex; gap: var(--space-md); align-items: flex-start; }
.step-num {
  flex-shrink: 0;
  width: var(--space-xl);
  height: var(--space-xl);
  border-radius: 50%;
  background: rgba(var(--accent-rgb),0.12);
  color: var(--accent);
  font-size: var(--text-sm);
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}
.step-body h3 { font-size: var(--text-md); font-weight: 500; margin-bottom: var(--space-xs); }
.step-body p { font-size: var(--text-sm); color: var(--muted); }

/* --- Pricing card ------------------------------------------ */
.pricing-card {
  background: var(--surface);
  border: 1px solid rgba(var(--accent-rgb),0.35);
  border-radius: var(--radius);
  padding: var(--space-xl);
  text-align: center;
  max-width: var(--width-xs);
  margin: var(--space-28) auto 0;
  position: relative;
}
.pricing-badge, .pricing-badge-pill {
  position: absolute;
  top: calc(-1 * var(--space-12));
  left: 50%;
  transform: translateX(-50%);
  background: var(--accent);
  color: var(--white);
  font-size: var(--text-2xs);
  font-weight: 600;
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-lg);
  white-space: nowrap;
}
.price { font-family: var(--font-serif); font-size: 3.25rem; font-weight: 900; line-height: 1; }
.price sup { font-size: var(--text-2xl); vertical-align: top; margin-top: var(--space-sm); }
.price-period { font-size: var(--text-sm); color: var(--muted); margin: var(--space-6) 0 var(--space-20); }
.features, .feat-list {
  list-style: none;
  text-align: left;
  margin-bottom: var(--space-28);
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
}
.features li, .feat-list li { display: flex; gap: var(--space-sm); font-size: var(--text-base); }
.features .icon, .feat-list .icon { color: var(--accent); flex-shrink: 0; }

/* --- Modal ------------------------------------------------- */
.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  background: var(--overlay-heavy);
  align-items: center;
  justify-content: center;
  padding: var(--space-lg);
}
.modal-overlay.open { display: flex; }
.modal-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  max-width: var(--width-sm);
  width: 100%;
  position: relative;
}
.modal-close {
  position: absolute;
  top: var(--space-md);
  right: var(--space-md);
  background: none;
  border: none;
  color: var(--muted);
  font-size: var(--text-xl);
  cursor: pointer;
  line-height: 1;
  transition: color var(--transition-fast);
}
.modal-close:hover, .modal-close:focus-visible { color: var(--text); }
.modal-title { font-family: var(--font-serif); font-size: var(--text-2xl); font-weight: 700; margin-bottom: var(--space-sm); }
.modal-sub { font-size: var(--text-sm); color: var(--muted); margin-bottom: var(--space-20); }
.modal-input {
  width: 100%;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius-input);
  padding: var(--space-12) var(--space-14);
  font-size: var(--text-base);
  font-family: inherit;
  color: var(--text);
  outline: none;
  margin-bottom: var(--space-12);
  transition: border-color var(--transition-base);
}
.modal-input:focus-visible { border-color: var(--accent); }
.modal-btn {
  width: 100%;
  background: var(--accent);
  color: var(--white);
  border: none;
  border-radius: var(--radius-md);
  padding: var(--space-14);
  font-size: var(--text-lg);
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  transition: background var(--transition-mid);
}
.modal-btn:hover, .modal-btn:focus-visible { background: var(--accent-light); }
.modal-error { color: var(--color-error); font-size: var(--text-sm); margin-bottom: var(--space-10); display: none; }
.modal-error.show { display: block; }

/* ── Visibility utilities ──────────────────────────── */
.show      { display: block !important; }
.show-flex { display: flex !important; }
.btn-loading { opacity: 0.65; pointer-events: none; }
.text-error  { color: var(--color-error) !important; }
.text-muted  { color: var(--muted) !important; }
.modal-success { display: none; text-align: center; }

/* --- Trial chat -------------------------------------------- */
.trial-chat {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  max-width: 560px;
  margin: var(--space-28) auto 0;
}
.trial-msgs, .trial-chat-msgs {
  padding: var(--space-20);
  min-height: 180px;
  max-height: 320px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}
.trial-msg { display: flex; gap: var(--space-sm); align-items: flex-start; }
.trial-msg.user { flex-direction: row-reverse; }
.trial-msg-av, .trial-msg-avatar {
  width: var(--space-28);
  height: var(--space-28);
  border-radius: 50%;
  background: var(--surface2);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-base);
}
.trial-bubble, .trial-msg-bubble {
  background: var(--surface2);
  border-radius: var(--radius-md);
  padding: var(--space-10) var(--space-14);
  font-size: var(--text-sm);
  line-height: 1.5;
  max-width: 80%;
}
.trial-msg.user .trial-bubble,
.trial-msg.user .trial-msg-bubble { background: rgba(var(--accent-rgb),0.15); }

.trial-footer, .trial-chat-footer {
  border-top: 1px solid var(--border);
  padding: var(--space-12) var(--space-md);
  display: flex;
  gap: var(--space-sm);
  align-items: center;
}
.trial-input, .trial-chat-input {
  flex: 1;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius-input);
  padding: var(--space-10) var(--space-14);
  font-size: var(--text-base);
  font-family: inherit;
  color: var(--text);
  outline: none;
  resize: none;
  transition: border-color var(--transition-base);
}
.trial-input:focus-visible, .trial-chat-input:focus-visible { border-color: var(--accent); }
.trial-send, .trial-send-btn {
  background: var(--accent);
  border: none;
  color: var(--white);
  border-radius: var(--radius-input);
  width: var(--space-40);
  height: var(--space-40);
  font-size: var(--text-lg);
  cursor: pointer;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition-mid);
}
.trial-send:hover, .trial-send-btn:hover,
.trial-send:focus-visible, .trial-send-btn:focus-visible { background: var(--accent-light); }
.trial-send:disabled, .trial-send-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.trial-counter {
  font-size: var(--text-2xs);
  color: var(--muted);
  text-align: center;
  padding: var(--space-sm) var(--space-md);
  border-top: 1px solid var(--border);
}
.trial-options {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  margin-top: var(--space-sm);
  margin-left: var(--space-36);
}
.trial-option-btn {
  background: var(--surface);
  border: 1px solid rgba(var(--accent-rgb), 0.3);
  border-radius: var(--radius-sm);
  padding: var(--space-sm) var(--space-14);
  font-size: var(--text-sm);
  font-family: inherit;
  color: var(--accent);
  cursor: pointer;
  text-align: left;
  line-height: 1.4;
  transition: background var(--transition-base), border-color var(--transition-base);
}
.trial-option-btn:hover, .trial-option-btn:focus-visible {
  background: rgba(var(--accent-rgb), 0.08);
  border-color: var(--accent);
}
.trial-option-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.trial-cta-box {
  background: rgba(var(--accent-rgb),0.08);
  border: 1px solid rgba(var(--accent-rgb),0.25);
  border-radius: var(--radius);
  padding: var(--space-20) var(--space-lg);
  text-align: center;
  margin-top: var(--space-md);
  display: none;
}
.trial-cta-box p { font-size: var(--text-sm); color: var(--muted); margin-bottom: var(--space-12); }
.trial-email-row { display: flex; gap: var(--space-sm); margin: 0 auto var(--space-12); max-width: 360px; }
.trial-email-input {
  flex: 1;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius-input);
  padding: var(--space-10) var(--space-14);
  font-size: var(--text-sm);
  color: var(--text);
  outline: none;
  transition: border-color var(--transition-base);
}
.trial-email-input:focus-visible { border-color: var(--accent); }
.trial-email-input.input-error,
.trial-email-input.input-error:focus-visible { border-color: var(--color-error-border-strong); }
.trial-email-btn {
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: var(--radius-input);
  padding: var(--space-10) var(--space-14);
  font-size: var(--text-sm);
  cursor: pointer;
  white-space: nowrap;
  transition: border-color var(--transition-base), color var(--transition-base);
}
.trial-email-btn:hover, .trial-email-btn:focus-visible { border-color: var(--accent); }
.trial-email-note { font-size: var(--text-2xs); color: var(--muted); margin-bottom: var(--space-12); }

/* --- FAQ --------------------------------------------------- */
.faq {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  margin-top: var(--space-xl);
}
.faq-item { border-bottom: 1px solid var(--border); }
.faq-item:last-child { border-bottom: none; }
.faq-q {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-md) var(--space-20);
  background: none;
  border: none;
  color: var(--text);
  font-family: inherit;
  font-size: var(--text-base);
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  gap: var(--space-12);
  transition: background var(--transition-base);
}
.faq-q:hover, .faq-q:focus-visible { background: rgba(var(--white-rgb),0.02); }
.faq-a { padding: 0 var(--space-20); max-height: 0; overflow: hidden; transition: max-height var(--transition-slow), padding var(--transition-slow); }
.faq-a.open { max-height: 300px; padding: 0 var(--space-20) var(--space-md); }
.faq-a p { font-size: var(--text-sm); color: var(--muted); line-height: 1.6; }

/* --- Typing indicator + animations ------------------------- */
.typing-dot {
  width: var(--space-6);
  height: var(--space-6);
  border-radius: 50%;
  background: var(--muted);
  animation: tBounce var(--anim-bounce);
  display: inline-block;
  margin: 0 2px;
}
.typing-dot:nth-child(2) { animation: tBounce var(--anim-bounce) 0.2s; }
.typing-dot:nth-child(3) { animation: tBounce var(--anim-bounce) 0.4s; }
@keyframes tBounce { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-6px); } }

/* --- CTA sections ----------------------------------------- */
.cta-bottom {
  padding: var(--space-4xl) var(--space-lg);
  text-align: center;
  background: var(--surface);
  border-top: 1px solid var(--border);
}
.cta-bottom h2 { margin-bottom: var(--space-sm); }
.cta-bottom p { color: var(--muted); font-size: var(--text-md); margin-bottom: var(--space-xl); }

/* --- CTA box -------------------------------------------- */
.cta-box {
  background: var(--surface2);
  color: var(--text);
  border-radius: var(--radius);
  padding: var(--space-xl) var(--space-lg);
  text-align: center;
}
.cta-box h2 { font-family: var(--font-serif); font-size: var(--text-disp-1); font-weight: 700; margin-bottom: var(--space-sm); color: var(--text); }
.cta-box p  { color: var(--muted); font-size: var(--text-base); margin-bottom: var(--space-20); }
.cta-box a, .cta-box button {
  display: inline-block;
  background: var(--accent);
  color: var(--white);
  padding: var(--space-12) 26px;
  border-radius: var(--radius-input);
  font-size: var(--text-md);
  font-weight: 500;
  text-decoration: none;
  border: none;
  font-family: inherit;
  cursor: pointer;
  transition: background var(--transition-mid);
}
.cta-box a:hover, .cta-box a:focus-visible,
.cta-box button:hover, .cta-box button:focus-visible { background: var(--accent-light); }

/* --- Info/tip box ----------------------------------------- */
.infobox {
  background: var(--surface);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: var(--space-14) var(--space-18);
  margin: var(--space-lg) 0;
  font-size: var(--text-base);
  color: var(--muted);
}
.infobox strong { display: block; color: var(--text); margin-bottom: var(--space-xs); font-size: var(--text-sm); }

/* --- Utility classes -------------------------------------- */
.hidden          { display: none !important; }
.text-center     { text-align: center; }
.text-muted-sm   { font-size: var(--text-sm); color: var(--muted); }
.text-accent     { color: var(--accent); }
.td-muted        { color: var(--muted); }

/* --- Blog listing (blog/index.html) ----------------------- */
.wrap { max-width: var(--width-wrap); margin: 0 auto; padding: var(--space-40) var(--space-lg) var(--space-5xl); }
.page-header { margin-bottom: var(--space-40); padding-bottom: var(--space-28); border-bottom: 1px solid var(--border); }
.page-label { font-size: var(--text-2xs); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); margin-bottom: var(--space-10); }
.page-sub { font-size: var(--text-lg); color: var(--muted); }
.cat-label { font-size: var(--text-2xs); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted2); margin: var(--space-36) 0 var(--space-14); }
.articles {
  display: grid;
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.article-card {
  background: var(--bg);
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-20);
  text-decoration: none;
  color: inherit;
  transition: background var(--transition-fast);
}
.article-card:hover, .article-card:focus-visible { background: var(--surface); }
.card-icon { font-size: var(--text-xl); flex-shrink: 0; width: var(--space-36); text-align: center; }
.card-body { flex: 1; min-width: 0; }
.card-title { font-size: var(--text-base); font-weight: 500; color: var(--text); margin-bottom: 2px; }
.card-desc { font-size: var(--text-sm); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-arrow { color: var(--muted2); font-size: var(--text-base); flex-shrink: 0; }

/* Footer */
.footer-brand { margin-bottom: var(--space-sm); }
.footer-brand strong { font-family: var(--font-serif); }
.footer-links {
  margin-top: var(--space-12);
  font-size: var(--text-2xs);
  color: var(--muted);
}
.footer-link {
  color: var(--muted);
  text-decoration: none;
  transition: color var(--transition-base);
}
.footer-link:hover, .footer-link:focus-visible { color: var(--text); }
.link-accent {
  color: var(--accent);
  text-decoration: none;
  transition: opacity var(--transition-base);
}
.link-accent:hover, .link-accent:focus-visible { opacity: 0.8; }

/* --- Legal back link -------------------------------------- */
.back-link {
  font-size: var(--text-sm);
  color: var(--muted);
  text-decoration: none;
  transition: color var(--transition-base);
}
.back-link:hover, .back-link:focus-visible { color: var(--text); }

/* --- Buy spinner (used by buy.js) ------------------------- */
@keyframes __buy-spin { to { transform: rotate(360deg); } }
.btn-spinner {
  display: inline-block;
  width: var(--space-md);
  height: var(--space-md);
  border: 2px solid rgba(var(--white-rgb),0.3);
  border-top-color: var(--white);
  border-radius: 50%;
  animation: __buy-spin var(--anim-spin);
  vertical-align: middle;
}

/* --- Focus accessibility (WCAG 2.4.7) --------------------- */
/* Remove default outline, provide custom focus-visible for keyboard nav */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}
/* Buttons: slightly larger offset */
button:focus-visible,
[role="button"]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
/* Links */
a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}
/* Input fields keep border-color style */
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--shadow-focus);
}

/* --- Accessibility: Reduced Motion ----------------------- */
@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;
  }
}

/* --- Lucide icon defaults --------------------------------- */
[data-lucide] {
  display: inline-block;
  vertical-align: -0.15em;
  flex-shrink: 0;
  width: 1em;
  height: 1em;
}
.icon-sm  { width: 0.875em; height: 0.875em; }
.icon-md  { width: 1.125em; height: 1.125em; }
.icon-lg  { width: 1.5em;   height: 1.5em;   }
.icon-xl  { width: 2em;     height: 2em;     }
.icon-2xl { width: 2.5em;   height: 2.5em;   }
.icon-muted   { color: var(--muted); }
.icon-accent  { color: var(--accent); }
.icon-success { color: var(--color-success); }
.icon-error   { color: var(--color-error); }
.icon-warning { color: var(--color-warning); }
/* Filled variant — for star ratings etc. */
.icon-filled [data-lucide] { fill: currentColor; }
.stars { display: inline-flex; gap: 2px; color: var(--accent); }
.stars [data-lucide] { fill: currentColor; width: 0.9em; height: 0.9em; vertical-align: -0.1em; }

/* --- Accessibility utilities ------------------------------ */
.sr-only,
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border-width: 0;
}

/* --- Accessibility: Skip to main content ------------------ */
.skip-link {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  z-index: var(--z-skip);
}
.skip-link:focus {
  position: fixed;
  top: 0;
  left: 0;
  width: auto;
  height: auto;
  padding: var(--space-10) var(--space-20);
  background: var(--accent);
  color: var(--white);
  font-weight: 500;
  font-size: var(--text-base);
  text-decoration: none;
  border-radius: 0 0 var(--radius-sm) 0;
  outline: none;
}

/* --- Print styles ------------------------------------------ */
@media print {
  nav, footer, .skip-link, .nav-dropdown,
  button, [class*="cta"], [class*="modal"],
  [class*="toast"], [class*="badge"] { display: none !important; }
  body { background: #fff; color: #000; font-size: 12pt; }
  a { color: #000; text-decoration: underline; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
  h1, h2, h3 { page-break-after: avoid; }
  p, li { orphans: 3; widows: 3; }
  main { max-width: 100%; padding: 0; }
}