/*
 * SiteWhizz theme: "Trusted Professional".
 * Loaded last in <head> on every page, so it is the single source of truth for
 * colour, surfaces and the shared components. Page <style> blocks still hold
 * layout; anything visual that should match across pages belongs here.
 *
 * One accent (blue), navy ink, white and near-white surfaces, hairline borders
 * instead of shadows, no gradients.
 *
 * Colour values live in tokens/*.json (DTCG). Rebuild tokens.css after editing them:
 *   node <ux-ui-agent-skills>/scripts/build_tokens.mjs --in tokens --out assets/tokens.css --check
 */

@import url("tokens.css");

:root {
  /* Brand roles, read from the generated semantic tokens */
  --sw-ink: var(--color-text-primary);            /* headings, wordmark */
  --sw-text: var(--color-text-body);              /* body copy */
  --sw-muted: var(--color-text-secondary);        /* secondary copy, 7.5:1 on white */
  --sw-accent: var(--color-action-primary);       /* the only accent */
  --sw-accent-hover: var(--color-action-primary-hover);
  --sw-accent-soft: var(--color-surface-accent-soft);
  --sw-surface: var(--color-surface-page);
  --sw-surface-alt: var(--color-surface-sunken);  /* alternating section bands */
  --sw-surface-inverse: var(--color-surface-inverse); /* navy bands and footer */
  --sw-border: var(--color-border-default);
  --sw-border-strong: var(--color-border-strong);
  --sw-success: var(--color-feedback-success-text);
  --sw-danger: var(--color-action-destructive);
  --sw-footer-text: var(--color-text-on-dark);
  --sw-radius-control: 0.5rem;
  --sw-radius-card: 0.75rem;
  --sw-shadow-float: 0 12px 32px -12px rgb(15 30 61 / 0.18);  /* chat demo window only */

  /* Legacy page variables, re-pointed so existing page CSS follows the theme */
  --primary-50: var(--sw-accent-soft);
  --primary-100: #dce6fd;
  --primary-200: #c3d3fb;
  --primary-300: #93b0f5;
  --primary-400: #5b82ec;
  --primary-500: var(--sw-accent);
  --primary-600: var(--sw-accent);
  --primary-700: var(--sw-accent);
  --primary-800: var(--sw-accent-hover);
  --primary-900: var(--sw-ink);
  --gray-50: var(--sw-surface-alt);
  --gray-100: #f1f3f6;
  --gray-200: var(--sw-border);
  --gray-300: var(--sw-border-strong);
  --gray-400: #9ca3af;
  --gray-500: #6b7280;
  --gray-600: var(--sw-muted);
  --gray-700: var(--sw-text);
  --gray-800: #1e293b;
  --gray-900: var(--sw-ink);
  --success: var(--sw-success);
  --danger: var(--sw-danger);
  --gradient-primary: var(--sw-accent);
  --gradient-cta: var(--sw-ink);
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: none;
  --shadow-xl: none;
  --shadow-2xl: var(--sw-shadow-float);
  --shadow-blue: none;
}

body {
  background: var(--sw-surface);
  color: var(--sw-text);
}

h1, h2, h3, h4 { color: var(--sw-ink); letter-spacing: -0.015em; }

/* ---------- No gradients, no decorative blobs ---------- */
.gradient-text {
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
  color: var(--sw-accent) !important;
}
.bg-decoration, .shimmer { display: none !important; }
.bg-gradient-to-b, .bg-gradient-to-r, .bg-gradient-to-br, .bg-gradient-to-t, .bg-gradient-to-l, .bg-gradient-to-tr {
  background-image: none !important;
}

/* ---------- Navigation ---------- */
.navbar {
  background: rgb(255 255 255 / 0.96) !important;
  border-bottom: 1px solid var(--sw-border);
  box-shadow: none !important;
}
.navbar-link { color: var(--sw-text); }
.navbar-link:hover, .navbar-link[aria-current="page"] { color: var(--sw-accent); }
.logo, .logo .logo-text { color: var(--sw-ink); }
.logo span { color: inherit !important; }
.logo-icon svg { display: block; }

/* ---------- Buttons ---------- */
.btn { border-radius: var(--sw-radius-control) !important; box-shadow: none !important; }
.btn-primary, .navbar-cta {
  background: var(--sw-accent) !important;
  color: #fff !important;
  box-shadow: none !important;
}
.btn-primary:hover, .navbar-cta:hover {
  background: var(--sw-accent-hover) !important;
  transform: none !important;
  box-shadow: none !important;
}
.btn-secondary {
  background: var(--sw-surface) !important;
  color: var(--sw-ink) !important;
  border: 1px solid var(--sw-border-strong) !important;
}
.btn-secondary:hover { border-color: var(--sw-ink) !important; transform: none !important; }
a:focus-visible, button:focus-visible, .btn:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--sw-accent);
  outline-offset: 2px;
}

/* ---------- Small labels ---------- */
.badge {
  background: var(--sw-accent-soft) !important;
  border: 1px solid #dce6fd !important;
  color: var(--sw-accent) !important;
  box-shadow: none !important;
}
.eyebrow { color: var(--sw-accent); }

/* ---------- Cards: hairline, flat ---------- */
.card, .feature-card, .use-case-card, .contact-card, .doc-card, .industry-card, .price-card, .pricing-card, .value-card {
  box-shadow: none !important;
  border: 1px solid var(--sw-border) !important;
  border-radius: var(--sw-radius-card) !important;
}
.card:hover, .feature-card:hover, .use-case-card:hover, .contact-card:hover, .doc-card:hover, .industry-card:hover, .value-card:hover {
  transform: none !important;
  box-shadow: none !important;
  border-color: var(--sw-border-strong) !important;
}
.price-card-featured, .pricing-card.popular { border: 2px solid var(--sw-accent) !important; }
.shadow-sm, .shadow, .shadow-md, .shadow-lg, .shadow-xl { box-shadow: none !important; }
.shadow-2xl { box-shadow: var(--sw-shadow-float) !important; }

/* ---------- Chat demo window: the one floating element ---------- */
.chat-window, .chat-mockup { box-shadow: var(--sw-shadow-float) !important; border: 1px solid var(--sw-border) !important; }
.chat-header, .chat-mockup-header { background: var(--sw-surface-inverse) !important; }
.chat-bubble-user { background: var(--sw-accent) !important; }
.step-number { background: var(--sw-accent) !important; }

/* ---------- Closing call-to-action band ---------- */
.cta-section {
  background: var(--sw-surface-inverse) !important;
  color: #fff;
}
.cta-section h2 { color: #fff; }
.cta-section .text-blue-100, .cta-section .opacity-90 { color: var(--sw-footer-text) !important; opacity: 1 !important; }

/* ---------- One footer for every page: dark navy ---------- */
footer {
  background: var(--sw-surface-inverse) !important;
  background-image: none !important;
  color: var(--sw-footer-text) !important;
  border-top: 0 !important;
}
footer p, footer li, footer a, footer span { color: var(--sw-footer-text) !important; }
footer h4, footer .logo, footer .logo span { color: #fff !important; }
footer a:hover { color: #fff !important; text-decoration: underline; }
footer .border-t, footer [class*="border-gray"] { border-color: rgb(255 255 255 / 0.12) !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- Logo ---------- */
.logo-icon { width: 36px !important; height: 36px !important; }
.logo:hover .logo-icon { transform: none !important; }
.logo-text, .logo > span:last-child { font-weight: 700; letter-spacing: -0.02em; }

/* ---------- Leftover decorative effects ---------- */
.gradient-border-card::before, .gradient-border-card:hover::before { display: none !important; }

/* ---------- Headings on dark surfaces stay light ---------- */
:is([style*="--sw-ink"], .text-white, .cta-section) :is(h1, h2, h3, h4) { color: #fff; }
:is([style*="--sw-ink"], .text-white, .cta-section) :is(.bg-white, [class*="bg-white/"]) :is(h1, h2, h3, h4) { color: var(--sw-ink); }

/* Former gradient bands with light text become the navy band */
[class*="bg-gradient-to"].text-white { background-color: var(--sw-surface-inverse) !important; }

/* Struck-through monthly price next to the yearly price: still readable (4.8:1) */
.plan-price-old { color: var(--gray-500) !important; }

/* ---------- Homepage layout clean-up ---------- */
.wave-divider { display: none !important; }
.glass-card { background: var(--sw-surface) !important; border: 1px solid var(--sw-border) !important; backdrop-filter: none !important; box-shadow: none !important; }
@media (max-width: 480px) {
  .stat-value { font-size: 1.375rem !important; line-height: 1.2; }
  .stat-label { font-size: 0.75rem !important; }
}

/* ---------- One type scale for every page (Inter throughout) ----------
 * H1 page title  36 -> 56px, 800
 * H2 section     28 -> 40px, 700
 * H3 card/item   18px, 700
 * Body           16px, 400; lead paragraphs 18px
 * Legal documents use a smaller H2 (24px) because they are read, not scanned.
 */
html, body, button, input, textarea, select { font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; }
body { font-size: 1rem; line-height: 1.6; }
main h1, section h1, .hero h1, .hero-title {
  font-size: clamp(2.25rem, 1.6rem + 2.6vw, 3.5rem) !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
  letter-spacing: -0.025em;
}
section h2, .heading-xl {
  font-size: clamp(1.75rem, 1.45rem + 1.2vw, 2.5rem) !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
}
section h3, .feature-card-title {
  font-size: 1.125rem !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
}
.content-section h2 { font-size: 1.5rem !important; line-height: 1.3 !important; }
.content-section h3 { font-size: 1.125rem !important; }
section p { line-height: 1.6; }

/* Outline buttons on navy bands: solid hover so contrast holds on any backdrop */
:is(.cta-section, [class*="bg-gradient-to"].text-white, [style*="--sw-ink"]) a.btn:not(.btn-primary):hover,
:is(.cta-section, [class*="bg-gradient-to"].text-white, [style*="--sw-ink"]) a[class*="hover:bg-white/10"]:hover {
  background: #1e2f55 !important;
  border-color: #ffffff !important;
  color: #ffffff !important;
}

/* Footer links: page-level hover colours must not win on the navy footer */
footer a:hover, footer .hover-primary-link:hover, footer a[class]:hover { color: #ffffff !important; }

/* Demo chat header controls: solid surface so text contrast holds */
.chat-header button { background: #24365e !important; color: #ffffff !important; }
.chat-header button:hover { background: #2f4472 !important; }

/* ---------- Accessibility ---------- */
/* 2.4.1 Skip link: hidden until focused */
.skip-link {
  position: absolute; left: 1rem; top: -100px; z-index: 1000;
  background: var(--sw-ink); color: #fff; padding: 0.75rem 1rem;
  border-radius: var(--sw-radius-control); font-weight: 600; text-decoration: none;
}
.skip-link:focus { top: 1rem; }
main:focus { outline: none; }
/* 2.4.11 Focused items and anchor targets never sit under the fixed header */
html { scroll-padding-top: 96px; }
/* Footer column headings are h2 for a clean outline, styled as small labels */
footer .footer-heading { font-size: 0.875rem !important; font-weight: 600 !important; letter-spacing: 0.02em; color: #fff !important; margin-bottom: 1rem; }
/* 2.2.2 Nothing animates forever */
.orb, .bg-decoration { display: none !important; }
.animate-pulse, [class*="animate-float"], .animate-bounce, .animate-spin { animation: none !important; }
/* 1.4.3 Demo chat placeholder text */
.chat-input-field, .chat-mockup-input-field { color: var(--sw-muted) !important; }

.animate-shield-pulse { animation: none !important; }

/* =====================================================================
 * One design language on every page (follows the tax landing pages)
 * ===================================================================== */

/* Section labels: plain uppercase text, never a pill */
.eyebrow, .badge {
  display: inline-block !important;
  background: none !important;
  border: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sw-accent) !important;
}
.badge svg, .badge > span.rounded-full { display: none !important; }
:is([style*="--sw-ink"], .text-white) .eyebrow { color: #93b0f5 !important; }

/* Headings carry no accent words; only the tax pages' headline quote is blue */
:is(h1, h2) :is(.gradient-text, span[style*="color"]) { color: inherit !important; }
h1 .gradient-text.accent-quote { color: var(--sw-accent) !important; }

/* Section headers sit on the left edge of the content column */
main section div.text-center:not([class*="px-"]):has(> h2) {
  text-align: left !important;
  margin-left: 0 !important;
  margin-right: auto !important;
  max-width: 40rem !important;
}
main section div.text-center:not([class*="px-"]):has(> h2) > * { margin-left: 0 !important; margin-right: 0 !important; }
main :is(.cta-section, section.cta-section) div.text-center:has(> h2) { text-align: center !important; margin-left: auto !important; margin-right: auto !important; max-width: none !important; }

/* Card content reads left to right */
:is(.feature-card, .card, .use-case-card, .industry-card, .contact-card, .value-card, .doc-card, .step-card),
main section .grid > div.text-center { text-align: left !important; }
:is(.feature-card, .card, .use-case-card, .industry-card, .contact-card, .value-card, .doc-card, .step-card) .mx-auto,
main section .grid > div.text-center .mx-auto { margin-left: 0 !important; }

/* One step marker everywhere: 32px accent circle */
.step-number, .trial-step-num {
  width: 32px !important; height: 32px !important; min-width: 32px;
  border-radius: 9999px !important;
  background: var(--sw-accent) !important; color: #fff !important;
  font-size: 0.875rem !important; font-weight: 700 !important;
  display: inline-flex !important; align-items: center; justify-content: center;
  box-shadow: none !important;
}

/* One content width: nav, hero, sections and footer share the same edges */
.navbar-container, .hero-container, .section-container, .max-w-7xl { max-width: 72rem !important; }

/* No 3D tilt on the homepage chat preview */
.chat-mockup, .chat-mockup:hover { transform: none !important; }

/* Closing band and footer: a visible seam, and the same white button everywhere */
footer { border-top: 1px solid rgb(255 255 255 / 0.12) !important; }
:is(.cta-section, [class*="bg-gradient-to"].text-white) .btn-primary {
  background: #ffffff !important; color: var(--sw-ink) !important;
}
:is(.cta-section, [class*="bg-gradient-to"].text-white) .btn-primary:hover { background: #e5e7eb !important; }

/* Install snippets wrap instead of clipping */
.font-mono.whitespace-nowrap { white-space: normal !important; overflow-wrap: anywhere; }

/* One icon-tile colour */
.use-case-icon, .feature-card-icon, .card-icon { background: var(--sw-accent-soft) !important; color: var(--sw-accent) !important; }

/* Homepage hero: left-aligned beside the chat preview on wide screens */
@media (min-width: 1024px) {
  .hero-container .lg\:text-left > * { margin-left: 0 !important; }
  .hero-container .hero-actions { justify-content: flex-start !important; }
}
.hero-container .hero-actions { justify-content: center; }
.price-points li { padding-left: 1.5rem; position: relative; }
.price-points li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 0.6rem; height: 0.35rem; border-left: 2px solid var(--sw-accent); border-bottom: 2px solid var(--sw-accent); transform: rotate(-45deg); }

/* Homepage chat preview: messages arrive quickly instead of after two seconds */
.chat-mockup .chat-bubble:nth-child(1) { animation-delay: 0.1s !important; }
.chat-mockup .chat-bubble:nth-child(2) { animation-delay: 0.35s !important; }
.chat-mockup .chat-bubble:nth-child(3) { animation-delay: 0.6s !important; }

/* Reduced motion: anything that animates in must still be visible */
@media (prefers-reduced-motion: reduce) {
  [class*="animate-"], .chat-bubble, .reveal, .reveal-delay-1, .reveal-delay-2, .reveal-delay-3 {
    opacity: 1 !important; transform: none !important;
  }
}

/* Tax pages: "What it answers" as a two-column table */
.answers-table { border-top: 1px solid var(--sw-border); }
.answers-row { display: grid; gap: 0.25rem 2rem; padding: 1.25rem 0; border-bottom: 1px solid var(--sw-border); }
@media (min-width: 768px) { .answers-row { grid-template-columns: 1.4fr 1fr; align-items: baseline; } }
.answers-row h3 { margin: 0; }
.answers-row .question-quote { border: 0 !important; background: none !important; padding: 0 !important; margin: 0.25rem 0 0 !important; font-weight: 500; color: var(--sw-text); }
.answers-row .trained-on { margin: 0; color: var(--sw-muted); font-size: 0.9375rem; background: none !important; padding: 0 !important; }

/* Tax pages: features as a plain two-column list */
.feature-list { display: grid; gap: 0 3rem; }
@media (min-width: 768px) { .feature-list { grid-template-columns: 1fr 1fr; } }
.feature-item { padding: 1.25rem 0; border-top: 1px solid var(--sw-border); }
.feature-item h3 { margin: 0 0 0.375rem; }
.feature-item p { margin: 0; color: var(--sw-muted); }

/* Pricing: a single plan needs no "featured" treatment */
.pricing-card::before { display: none !important; }
.pricing-card.popular, .pricing-card.popular:hover { border: 1px solid var(--sw-border-strong) !important; transform: none !important; }

/* Tax pages: pricing card and FAQ line up with their left-aligned headings */
/* Pricing sections: one centred offer, heading centred above it */
#pricing .max-w-lg.mx-auto { margin-left: auto !important; margin-right: auto !important; }
main section#pricing div.text-center:not([class*="px-"]):has(> h2) { text-align: center !important; margin-left: auto !important; margin-right: auto !important; }
main section#pricing div.text-center:not([class*="px-"]):has(> h2) > * { margin-left: auto !important; margin-right: auto !important; }
#faq > .max-w-3xl { max-width: 72rem !important; }
#faq .space-y-3 { max-width: 48rem; }
.hero .chat-window { width: 100%; max-width: 26rem; }

/* Former pill labels: drop their dot and icon */
.eyebrow > span.rounded-full, .eyebrow > svg { display: none !important; }
.eyebrow { gap: 0 !important; }

/* Text-only heroes: left-aligned on the shared content edge */
section.hero > div[class*="max-w-4xl"].text-center {
  max-width: 72rem !important;
  text-align: left !important;
}
section.hero > div[class*="max-w-4xl"].text-center > * { margin-left: 0 !important; margin-right: 0 !important; max-width: 46rem; }
section.hero > div[class*="max-w-4xl"].text-center .justify-center { justify-content: flex-start !important; }

/* Centered section blocks (outside heroes and closing bands) align left too */
main section:not(.hero):not(.cta-section):not([class*="bg-gradient-to"]) > div[class*="max-w-"][class*="mx-auto"].text-center {
  max-width: 72rem !important;
  text-align: left !important;
}
main section:not(.hero):not(.cta-section):not([class*="bg-gradient-to"]) > div[class*="max-w-"][class*="mx-auto"].text-center > :is(h2, p) { margin-left: 0 !important; max-width: 46rem; }
main section:not(.hero):not(.cta-section):not([class*="bg-gradient-to"]) > div[class*="max-w-"][class*="mx-auto"].text-center .justify-center { justify-content: flex-start !important; }

/* Live demo in the tax heroes keeps a fixed width */
.hero .chat-window { flex: 0 0 auto; width: 26rem !important; max-width: 100% !important; }

/* Text-only heroes built on .hero-container (agencies, pricing, ...): left-aligned */
section.hero > .hero-container:not(:has(.chat-mockup, .chat-window)) { text-align: left !important; }
section.hero > .hero-container:not(:has(.chat-mockup, .chat-window)) > * { margin-left: 0 !important; margin-right: 0 !important; max-width: 46rem; }
section.hero > .hero-container:not(:has(.chat-mockup, .chat-window)) :is(.justify-center, .hero-actions) { justify-content: flex-start !important; }

section.hero > .hero-container { width: 100% !important; }

/* Hero copy shares the title's left edge */
section.hero > :is(.hero-container, div[class*="max-w-4xl"]):not(:has(.chat-mockup, .chat-window)) p { padding-left: 0 !important; padding-right: 0 !important; }
/* Stray centred section headings */
main section:not(.cta-section):not([class*="bg-gradient-to"]) h2.text-center { text-align: left !important; }

section.hero > :is(.hero-container, div[class*="max-w-4xl"]):not(:has(.chat-mockup, .chat-window)) .mx-auto { margin-left: 0 !important; }

/* Pricing page: Monthly / Yearly switch */
.billing-switch { display: inline-flex; gap: 0.25rem; padding: 0.25rem; border: 1px solid var(--sw-border-strong); border-radius: 9999px; background: var(--sw-surface); }
.billing-switch button { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 40px; padding: 0.5rem 1.25rem; border-radius: 9999px; font-weight: 600; font-size: 0.9375rem; color: var(--sw-ink); background: transparent; cursor: pointer; }
.billing-switch button:hover { background: var(--sw-surface-alt); }
.billing-switch button[aria-pressed="true"] { background: var(--sw-accent); color: #fff; }
.billing-save { font-size: 0.75rem; font-weight: 700; padding: 0.125rem 0.5rem; border-radius: 9999px; background: #dcfce7; color: #166534; }