/**
 * Landing page — light theme overrides.
 * Merged from: hero, features, telegram, security, about, pricing, footer.
 * Tokens: css/brand-theme.css. Dark mode untouched.
 */

/* ========== hero ========== */
/**
 * Hero section — light theme only.
 * Scoped to #main-site-content > main. Dark mode untouched.
 */

/* —— Page canvas —— */
html:not(.dark) #main-site-content > main {
  background-color: #F5F2E9;
}

html:not(.dark) #main-site-content > main > .bg-pattern {
  background-image:
    linear-gradient(to right, rgba(13, 92, 79, 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(13, 92, 79, 0.05) 1px, transparent 1px);
}

/* —— Typography —— */
html:not(.dark) #main-site-content > main h1.text-slate-900 {
  color: #1D1D1D;
}

html:not(.dark) #main-site-content > main h1 .text-slate-400 {
  color: rgba(29, 29, 29, 0.35);
}

html:not(.dark) #main-site-content > main .text-lg.text-slate-500,
html:not(.dark) #main-site-content > main .text-\[10px\].text-slate-500 {
  color: rgba(29, 29, 29, 0.65);
}

html:not(.dark) #main-site-content > main .text-emerald-600 {
  color: #18B98F;
}

/* —— Floating cards —— */
html:not(.dark) #main-site-content > main .z-30 .shadow-xl.bg-white\/80 {
  background-color: #FFFFFF !important;
  border-color: #D7D1C3 !important;
}

/* —— Dashboard frame —— */
html:not(.dark) #main-site-content > main .glass.rounded-xl.p-1 {
  background-color: #FFFFFF !important;
  border: 1px solid #D7D1C3 !important;
  box-shadow: 0 30px 80px -20px rgba(13, 92, 79, 0.15) !important;
  --tw-ring-shadow: 0 0 #0000 !important;
}

html:not(.dark) #main-site-content > main .glass.rounded-xl > .bg-white.dark\:bg-dark {
  background-color: #FFFFFF !important;
  border-color: #D7D1C3 !important;
}

/* —— Sidebar —— */
html:not(.dark) #main-site-content > main .w-48.border-r {
  background-color: #FFFFFF !important;
  border-color: #D7D1C3 !important;
}

html:not(.dark) #main-site-content > main .w-48 .bg-slate-100 {
  background-color: #F5F2E9 !important;
}

html:not(.dark) #main-site-content > main .w-48 .h-8.hover\:bg-slate-50:hover {
  background-color: transparent !important;
}

/* —— Dashboard main pane (white under cream stat cards) —— */
html:not(.dark) #main-site-content > main .flex-1.bg-slate-50\/30 {
  background-color: #FFFFFF !important;
}

/* —— Stat cards —— */
html:not(.dark) #main-site-content > main .grid.grid-cols-2 > .rounded-lg.bg-white {
  background-color: #F5F2E9 !important;
  border-color: #D7D1C3 !important;
}

/* —— Recent Transactions container —— */
html:not(.dark) #main-site-content > main .flex-1 > .rounded-lg.bg-white {
  background-color: #F5F2E9 !important;
  border-color: #D7D1C3 !important;
}

html:not(.dark) #main-site-content > main .flex-1 > .rounded-lg.bg-white .border-b {
  border-color: #D7D1C3 !important;
}

/* —— Transaction rows —— */
html:not(.dark) #main-site-content > main .p-2.space-y-2 > .flex.items-center {
  background-color: #FFFFFF !important;
  border: 1px solid #D7D1C3 !important;
  border-radius: 0.5rem;
}

html:not(.dark) #main-site-content > main .p-2.space-y-2 > .flex.items-center:hover {
  background-color: #FFFFFF !important;
}

/* —— Voice bars (accent) —— */
html:not(.dark) #main-site-content > main .voice-bar {
  background-color: #18B98F !important;
}

/* ========== features ========== */
/**
 * Features ("Hands-free bookkeeping") — light theme only.
 * Scoped to #features. Dark mode untouched.
 */

/* —— Section canvas —— */
html:not(.dark) #features {
  background-color: #F5F2E9 !important;
  border-color: #D7D1C3 !important;
}

/* —— Section header —— */
html:not(.dark) #features h2.text-slate-900 {
  color: #1D1D1D;
  font-weight: 600 !important;
}

html:not(.dark) #features > .max-w-7xl > .mb-16 p {
  color: rgba(29, 29, 29, 0.65);
}

/* —— Feature cards (all white) —— */
html:not(.dark) #features .grid > .rounded-2xl {
  background-color: #FFFFFF !important;
  border: 1px solid #D7D1C3 !important;
  box-shadow: none !important;
}

html:not(.dark) #features .glow-card::before {
  opacity: 0 !important;
}

html:not(.dark) #features .grid > .rounded-2xl:hover {
  border-color: #D7D1C3 !important;
}

/* —— Card titles & descriptions —— */
html:not(.dark) #features .grid h3 {
  color: #1D1D1D;
  font-weight: 600 !important;
}

html:not(.dark) #features .grid p.text-sm,
html:not(.dark) #features .grid p.text-xs {
  color: rgba(29, 29, 29, 0.65);
}

/* —— Icon containers (Recommended badge tint) —— */
html:not(.dark) #features .rounded-lg.bg-emerald-600 {
  background-color: rgba(24, 185, 143, 0.1) !important;
  border: 1px solid rgba(24, 185, 143, 0.2) !important;
  color: #18B98F !important;
}

html:not(.dark) #features .rounded-full.bg-slate-200 {
  background-color: rgba(24, 185, 143, 0.1) !important;
  border: 1px solid rgba(24, 185, 143, 0.2) !important;
}

html:not(.dark) #features .rounded-full.bg-slate-200 iconify-icon {
  color: #18B98F !important;
}

html:not(.dark) #features iconify-icon.text-2xl.text-slate-900 {
  color: #18B98F !important;
}

/* —— Voice bubble —— */
html:not(.dark) #features .self-end.bg-emerald-600 {
  background-color: #18B98F !important;
  color: #FFFFFF !important;
  box-shadow: none !important;
}

html:not(.dark) #features .self-end.bg-emerald-600 p,
html:not(.dark) #features .self-end.bg-emerald-600 iconify-icon {
  color: #FFFFFF !important;
}

/* —— Layer 3: cream mini widgets inside white cards —— */

/* Recorded ₹500 container */
html:not(.dark) #features .self-start.bg-white {
  background-color: #F5F2E9 !important;
  border: 1px solid #D7D1C3 !important;
  box-shadow: none !important;
}

html:not(.dark) #features .self-start .text-slate-600 {
  color: rgba(29, 29, 29, 0.65);
}

/* Smart Financial Control — outer panel (cream) */
html:not(.dark) #features .md\:w-1\/2.bg-white {
  background-color: #F5F2E9 !important;
  border: 1px solid #D7D1C3 !important;
  box-shadow: none !important;
}

/* Budget / Goal / Loan rows (white inside cream panel) */
html:not(.dark) #features .space-y-2 > .flex.bg-slate-50 {
  background-color: #FFFFFF !important;
  border: 1px solid #D7D1C3 !important;
}

html:not(.dark) #features .space-y-2 .text-slate-600 {
  color: rgba(29, 29, 29, 0.65);
}

/* —— Layer 4: white pills / labels inside cream widgets —— */

/* Category tags (Food & Dining, Lunch) */
html:not(.dark) #features .self-start .bg-slate-100 {
  background-color: #FFFFFF !important;
  border: 1px solid #D7D1C3 !important;
  color: rgba(29, 29, 29, 0.65);
}

/* Goal / Reset / EMI pills (cream on white rows) */
html:not(.dark) #features .space-y-2 > .flex span.rounded.font-medium {
  background-color: #F5F2E9 !important;
  border: 1px solid #D7D1C3 !important;
}

html:not(.dark) #features .text-teal-500,
html:not(.dark) #features .text-emerald-600 {
  color: #18B98F !important;
}

html:not(.dark) #features .text-amber-500 {
  color: #F59E0B !important;
}

/* ========== telegram ========== */
/**
 * Telegram section — light theme only.
 * Scoped to #telegram. Dark mode untouched.
 *
 * Layer 1: cream section
 * Layer 2: white main visual card + white icon circles
 * Layer 3: cream floating widgets
 * Layer 4: white inner elements inside floats
 */

/* —— Layer 1: section canvas —— */
html:not(.dark) #telegram {
  background-color: #F5F2E9 !important;
  border-color: #D7D1C3 !important;
}

html:not(.dark) #telegram > .bg-grid-pattern {
  background-image:
    linear-gradient(to right, rgba(13, 92, 79, 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(13, 92, 79, 0.05) 1px, transparent 1px);
}

/* —— Typography —— */
html:not(.dark) #telegram h2.text-slate-900 {
  color: #1D1D1D;
  font-weight: 600 !important;
}

html:not(.dark) #telegram > .max-w-7xl > .grid > div:first-child > p.text-lg {
  color: rgba(29, 29, 29, 0.65);
}

html:not(.dark) #telegram h4.text-slate-900 {
  color: #1D1D1D;
  font-weight: 600 !important;
}

html:not(.dark) #telegram .space-y-6 p.text-sm {
  color: rgba(29, 29, 29, 0.65);
}

/* —— Badge —— */
html:not(.dark) #telegram .inline-flex.rounded-full.border-emerald-200 {
  background-color: #FFFFFF !important;
  border: 1px solid #D7D1C3 !important;
}

html:not(.dark) #telegram .inline-flex .text-emerald-700 {
  color: #18B98F !important;
}

html:not(.dark) #telegram .inline-flex .text-teal-500 {
  color: #18B98F !important;
}

html:not(.dark) #telegram .bg-emerald-50 {
  background-color: #FFFFFF !important;
}

/* —— Layer 2: left feature icon circles —— */
html:not(.dark) #telegram .space-y-6 .rounded-full.bg-white {
  background-color: #FFFFFF !important;
  border: 1px solid #D7D1C3 !important;
  box-shadow: none !important;
}

html:not(.dark) #telegram .space-y-6 .text-emerald-600,
html:not(.dark) #telegram .space-y-6 .text-teal-600,
html:not(.dark) #telegram .space-y-6 .text-cyan-500 {
  color: #18B98F !important;
}

/* —— Layer 2: main visual card (right) —— */
html:not(.dark) #telegram .h-\[500px\].bg-slate-100 {
  background-color: #FFFFFF !important;
  border: 1px solid #D7D1C3 !important;
  box-shadow: none !important;
}

html:not(.dark) #telegram .h-\[500px\] > .bg-grid-pattern {
  background-image:
    linear-gradient(to right, rgba(13, 92, 79, 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(13, 92, 79, 0.05) 1px, transparent 1px);
}

html:not(.dark) #telegram .border-dashed.border-slate-300,
html:not(.dark) #telegram .h-\[500px\] .border-slate-200 {
  border-color: #D7D1C3 !important;
}

/* —— Central hub (accent) —— */
html:not(.dark) #telegram [class*="from-emerald-600"].rounded-2xl {
  background-color: #18B98F !important;
  background-image: none !important;
  box-shadow: none !important;
  --tw-ring-color: #FFFFFF !important;
}

/* —— Floating widgets outer (Recommended badge tint) —— */
html:not(.dark) #telegram .animate-float.bg-white {
  background-color: rgba(24, 185, 143, 0.1) !important;
  border: 1px solid rgba(24, 185, 143, 0.2) !important;
  box-shadow: none !important;
}

html:not(.dark) #telegram .animate-float .text-emerald-500,
html:not(.dark) #telegram .animate-float .text-teal-500 {
  color: #18B98F !important;
}

html:not(.dark) #telegram .animate-float .bg-emerald-600 {
  background-color: #18B98F !important;
}

html:not(.dark) #telegram .animate-float .font-mono {
  color: rgba(29, 29, 29, 0.65);
}

/* —— Layer 4: white inner elements inside floats —— */
html:not(.dark) #telegram .animate-float > .flex.items-center {
  background-color: #FFFFFF !important;
  border: 1px solid #D7D1C3 !important;
  border-radius: 0.5rem;
  padding: 0.25rem 0.5rem;
}

html:not(.dark) #telegram .animate-float:not(:has(.flex)) iconify-icon {
  background-color: #FFFFFF !important;
  border: 1px solid #D7D1C3 !important;
  border-radius: 0.5rem;
  padding: 0.375rem;
}

/* ========== security ========== */
/**
 * Security section — light theme only.
 * Scoped to #security. Dark mode untouched.
 */

/* —— Layer 1: section canvas —— */
html:not(.dark) #security {
  background-color: #F5F2E9 !important;
  border-color: #D7D1C3 !important;
}

/* —— Typography —— */
html:not(.dark) #security h2.text-slate-900 {
  color: #1D1D1D;
  font-weight: 600 !important;
}

html:not(.dark) #security .md\:w-1\/2 p {
  color: rgba(29, 29, 29, 0.65);
}

html:not(.dark) #security h3 {
  color: #1D1D1D;
  font-weight: 600 !important;
}

html:not(.dark) #security .grid p.text-sm {
  color: rgba(29, 29, 29, 0.65);
}

/* —— Layer 2: white feature cards —— */
html:not(.dark) #security .grid > .rounded-2xl {
  background-color: #FFFFFF !important;
  border: 1px solid #D7D1C3 !important;
  box-shadow: none !important;
}

html:not(.dark) #security .grid > .rounded-2xl:hover {
  border-color: #D7D1C3 !important;
}

/* —— Icon containers (Recommended badge tint) —— */
html:not(.dark) #security .rounded-lg.bg-emerald-100,
html:not(.dark) #security .rounded-lg.bg-teal-100,
html:not(.dark) #security .rounded-lg.bg-cyan-100 {
  background-color: rgba(24, 185, 143, 0.1) !important;
  border: 1px solid rgba(24, 185, 143, 0.2) !important;
}

html:not(.dark) #security .text-emerald-600,
html:not(.dark) #security .text-teal-600,
html:not(.dark) #security .text-cyan-600 {
  color: #18B98F !important;
}

/* ========== about ========== */
/**
 * About ("The Story Behind Ginloo") — light theme only.
 * Scoped to #about. Dark mode untouched.
 */

/* —— Layer 1: section canvas —— */
html:not(.dark) #about {
  background-color: #F5F2E9 !important;
  border-color: #D7D1C3 !important;
}

/* —— Typography —— */
html:not(.dark) #about h2.text-slate-900 {
  color: #1D1D1D;
  font-weight: 600 !important;
}

html:not(.dark) #about h2 .text-emerald-600 {
  color: #18B98F !important;
}

html:not(.dark) #about .max-w-xl > p.text-lg {
  color: rgba(29, 29, 29, 0.65);
}

html:not(.dark) #about h3,
html:not(.dark) #about h4 {
  color: #1D1D1D;
  font-weight: 600 !important;
}

html:not(.dark) #about .glass p.text-sm,
html:not(.dark) #about .glass p.text-\[11px\] {
  color: rgba(29, 29, 29, 0.65);
}

html:not(.dark) #about .mt-20 p {
  color: rgba(29, 29, 29, 0.65);
}

html:not(.dark) #about .mt-20 {
  border-color: #D7D1C3 !important;
}

/* —— Layer 2: white cards —— */
html:not(.dark) #about .glass {
  background-color: #FFFFFF !important;
  border: 1px solid #D7D1C3 !important;
  box-shadow: none !important;
}

html:not(.dark) #about .glass:hover {
  border-color: #D7D1C3 !important;
}

/* —— Icon containers (Recommended badge tint) —— */
html:not(.dark) #about .rounded-xl.bg-emerald-600\/10,
html:not(.dark) #about .rounded-lg.bg-emerald-500\/10,
html:not(.dark) #about .rounded-lg.bg-teal-500\/10 {
  background-color: rgba(24, 185, 143, 0.1) !important;
  border: 1px solid rgba(24, 185, 143, 0.2) !important;
}

html:not(.dark) #about .text-emerald-600,
html:not(.dark) #about .text-emerald-500,
html:not(.dark) #about .text-teal-500 {
  color: #18B98F !important;
}

/* ========== pricing ========== */
/**
 * Pricing section — light theme only.
 * Scoped to #pricing. Dark mode untouched.
 * Does NOT modify Upgrade to Pro button or Recommended badge.
 */

/* —— Layer 1: section canvas —— */
html:not(.dark) #pricing {
  background-color: #F5F2E9 !important;
}

html:not(.dark) #pricing > .bg-pattern {
  background-image:
    linear-gradient(to right, rgba(13, 92, 79, 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(13, 92, 79, 0.05) 1px, transparent 1px);
}

/* —— Typography —— */
html:not(.dark) #pricing h2.text-slate-900 {
  color: #1D1D1D;
  font-weight: 600 !important;
}

html:not(.dark) #pricing .text-center > p {
  color: rgba(29, 29, 29, 0.65);
}

html:not(.dark) #pricing .grid h3 {
  color: #1D1D1D;
}

html:not(.dark) #pricing .text-slate-500,
html:not(.dark) #pricing .text-slate-600 {
  color: rgba(29, 29, 29, 0.65);
}

html:not(.dark) #pricing .text-slate-900 {
  color: #1D1D1D;
}

html:not(.dark) #pricing thead th.text-emerald-600,
html:not(.dark) #pricing tbody iconify-icon.text-emerald-600 {
  color: #18B98F !important;
}

/* —— Layer 2: white pricing cards —— */
html:not(.dark) #pricing .grid.md\:grid-cols-2 > .rounded-2xl {
  background-color: #FFFFFF !important;
  border: 1px solid #D7D1C3 !important;
  box-shadow: none !important;
  --tw-ring-shadow: 0 0 #0000 !important;
}

html:not(.dark) #pricing .blur-\[80px\] {
  opacity: 0.2 !important;
}

/* Free plan button (not Upgrade to Pro) */
html:not(.dark) #pricing .grid button.bg-slate-200 {
  background-color: #F5F2E9 !important;
  border: 1px solid #D7D1C3 !important;
  color: rgba(29, 29, 29, 0.65) !important;
}

html:not(.dark) #pricing .grid button.bg-slate-200:hover {
  background-color: #EDE9DF !important;
}

/* —— Comparison table: solid white box —— */
html:not(.dark) #pricing .max-w-5xl > .rounded-2xl.overflow-hidden {
  background-color: #FFFFFF !important;
  border: 1px solid #D7D1C3 !important;
}

html:not(.dark) #pricing table {
  border-collapse: collapse;
  border-spacing: 0;
}

html:not(.dark) #pricing thead th,
html:not(.dark) #pricing tbody td {
  background-color: #FFFFFF !important;
  border-color: #D7D1C3 !important;
}

html:not(.dark) #pricing thead tr {
  border-bottom: 1px solid #D7D1C3;
}

html:not(.dark) #pricing thead th {
  border: none;
  border-bottom: 1px solid #D7D1C3;
}

html:not(.dark) #pricing tbody tr {
  background-color: #FFFFFF !important;
  border-bottom: 1px solid #D7D1C3;
}

html:not(.dark) #pricing tbody tr:last-child {
  border-bottom: none;
}

html:not(.dark) #pricing tbody td {
  border: none;
}

html:not(.dark) #pricing tbody tr:hover,
html:not(.dark) #pricing tbody tr:hover td {
  background-color: #FFFFFF !important;
}

html:not(.dark) #pricing .divide-slate-100 > :not([hidden]) ~ :not([hidden]) {
  border-color: #D7D1C3 !important;
}

/* ========== footer ========== */
/**
 * Footer + page canvas — light theme only.
 * Dark mode untouched.
 */

html:not(.dark) body,
html:not(.dark) #main-site-content {
  background-color: #F5F2E9 !important;
}

html:not(.dark) #footer {
  background-color: #F5F2E9 !important;
}

html:not(.dark) #footer .border-t {
  border-color: #D7D1C3 !important;
}

html:not(.dark) #footer .text-slate-900,
html:not(.dark) #footer .font-semibold.text-slate-900,
html:not(.dark) #footer h4 {
  color: #1D1D1D;
}

html:not(.dark) #footer .text-slate-500,
html:not(.dark) #footer .text-slate-400,
html:not(.dark) #footer ul a {
  color: rgba(29, 29, 29, 0.65);
}

html:not(.dark) #footer a:hover {
  color: #1D1D1D;
}

html:not(.dark) #footer .bg-emerald-600 {
  background-color: #18B98F !important;
}

html:not(.dark) #footer [class*="from-emerald-600"] {
  background-color: #18B98F !important;
  background-image: none !important;
}