/* =========================================================
   /css/app.css — Pure CSS (Tailwind-like utilities recreated)
   Goal: match legacy screenshots 1:1. No HTML edits required.
========================================================= */

/* ---------- Design Tokens ---------- */
:root{
  --bg: #ffffff;

  --gray-50:#f9fafb;
  --gray-100:#f3f4f6;
  --gray-200:#e5e7eb;
  --gray-300:#d1d5db;
  --gray-400:#9ca3af;
  --gray-500:#6b7280;
  --gray-600:#4b5563;
  --gray-700:#374151;
  --gray-800:#1f2937;
  --gray-900:#111827;

  /* Warm gold (legacy feel) */
  --yellow-200:#fde68a;
  --yellow-300:#fcd34d;
  --yellow-400:#fbbf24;
  --yellow-500:#f59e0b;
  --gold:#e6b93c;

  --radius-lg: 0.5rem;
  --radius-xl: 0.75rem;
  --radius-2xl: 1rem;
  --radius-3xl: 1.5rem;

  --shadow-sm: 0 1px 2px rgba(0,0,0,.06);
  --shadow-md: 0 6px 18px rgba(0,0,0,.08);
  --shadow-lg: 0 14px 34px rgba(0,0,0,.10);
  --shadow-2xl: 0 24px 64px rgba(0,0,0,.12);

  --ring: 0 0 0 4px rgba(252, 211, 77, 0.45);
}

/* ---------- Base Reset / Typography ---------- */
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  background: var(--bg);
  color: var(--gray-900);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img,svg,video{ max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
button, input, select, textarea{
  font: inherit;
  color: inherit;
}
button{ cursor:pointer; }
strong{ font-weight: 700; }

/* ---------- Smooth scroll + offset (legacy) ---------- */
html{
  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
  scroll-padding-top:100px;
}

/* ---------- Animations (legacy) ---------- */
.fade-up{
  animation: fadeUp 1.2s ease forwards;
  opacity: 0;
  transform: translateY(18px);
}
@keyframes fadeUp{ to{ opacity:1; transform: translateY(0);} }

.fade-scale{
  opacity:0;
  transform: scale(0.96);
  animation: fadeScale 1s ease forwards;
}
@keyframes fadeScale{ to{ opacity:1; transform: scale(1);} }

@keyframes slideInUp{
  from{ transform: translate(-50%, 40px); opacity: 0; }
  to{ transform: translate(-50%, 0); opacity: 1; }
}
.slide-in{ animation: slideInUp .9s ease-out 3s forwards; opacity:0; }

/* ---------- Grace legacy motion ---------- */
.grace-glow{ animation: graceGlow 4s ease-in-out infinite; }
@keyframes graceGlow{
  0%{ text-shadow:0 0 10px rgba(255,215,0,.45); }
  50%{ text-shadow:0 0 22px rgba(255,215,0,.85); }
  100%{ text-shadow:0 0 10px rgba(255,215,0,.45); }
}

.grace-avatar-anim{ animation: avatarFloat 5s ease-in-out infinite; }
@keyframes avatarFloat{
  0%{ transform: translateY(0); }
  50%{ transform: translateY(-6px); }
  100%{ transform: translateY(0); }
}

.grace-box-pulse{ animation: boxPulse 5s ease-in-out infinite; }
@keyframes boxPulse{
  0%{ box-shadow: 0 0 4px rgba(255,215,0,.15); }
  50%{ box-shadow: 0 0 18px rgba(255,215,0,.35); }
  100%{ box-shadow: 0 0 4px rgba(255,215,0,.15); }
}

.grace-l3-bg{ position:relative; }
.grace-l3-bg::before{
  content:"";
  position:absolute;
  inset:0;
  background: radial-gradient(circle at 50% 30%, rgba(255,215,0,.22), transparent 60%);
  filter: blur(22px);
  animation: gracePulse 6s ease-in-out infinite;
  pointer-events:none;
  border-radius: inherit;
}
@keyframes gracePulse{
  0%{ opacity:.4; }
  50%{ opacity:1; }
  100%{ opacity:.4; }
}

.grace-lightline{
  width:100%;
  height:2px;
  background: linear-gradient(90deg, transparent, rgba(255,215,0,.9), transparent);
  animation: lightSweep 4s ease-in-out infinite;
}
@keyframes lightSweep{
  0%{ transform: translateX(-100%); }
  50%{ transform: translateX(0); }
  100%{ transform: translateX(100%); }
}

#graceline{ cursor:pointer; }

/* ---------- Legacy glow hooks used as classes ---------- */
.demo-form-shell{ box-shadow: 0 0 22px rgba(255,215,0,.28); }
.contact-form-shell{ box-shadow: 0 0 22px rgba(255,215,0,.28); }
.alwayson-glow{ text-shadow: 0 0 12px rgba(255,215,0,.85); }
.grace-box-shadow{ box-shadow: var(--shadow-2xl); }
.grace-glow-shadow{ text-shadow: 0 0 28px rgba(230,185,60,.75); }

/* ---------- Small polish: section microline under hero ---------- */
section + p.text-center.text-gray-700.text-sm.mt-6{ margin-top: 1.5rem; }

/* =========================================================
   Utility Classes (Tailwind-like)
========================================================= */

/* Layout */
.w-full{ width:100%; }
.w-auto{ width:auto; }
.h-12{ height:3rem; }
.h-20{ height:5rem; }
.h-32{ height:8rem; }

.max-w-sm{ max-width:24rem; }
.max-w-xl{ max-width:36rem; }
.max-w-2xl{ max-width:42rem; }
.max-w-3xl{ max-width:48rem; }
.max-w-4xl{ max-width:56rem; }
.max-w-5xl{ max-width:64rem; }
.max-w-6xl{ max-width:72rem; }
.max-w-7xl{ max-width:80rem; }

.mx-auto{ margin-left:auto; margin-right:auto; }

.block{ display:block; }
.inline-block{ display:inline-block; }

.flex{ display:flex; }
.inline-flex{ display:inline-flex; }
.items-center{ align-items:center; }
.items-start{ align-items:flex-start; }
.justify-center{ justify-content:center; }
.justify-between{ justify-content:space-between; }
.flex-col{ flex-direction:column; }

.grid{ display:grid; }
.border-collapse{ border-collapse:collapse; }
.overflow-x-auto{ overflow-x:auto; }

.relative{ position:relative; }
.fixed{ position:fixed; }
.top-0{ top:0; }
.left-0{ left:0; }
.z-10{ z-index:10; }
.z-50{ z-index:50; }

.text-center{ text-align:center; }
.text-left{ text-align:left; }

.select-none{ user-select:none; -webkit-user-select:none; }
.overflow-x-hidden{ overflow-x:hidden; }

.hidden{ display:none; }

/* Spacing (rem-based, Tailwind-ish) */
.p-6{ padding:1.5rem; }
.p-8{ padding:2rem; }
.p-10{ padding:2.5rem; }
.p-12{ padding:3rem; }
.p-16{ padding:4rem; }

.px-4{ padding-left:1rem; padding-right:1rem; }
.px-6{ padding-left:1.5rem; padding-right:1.5rem; }
.px-10{ padding-left:2.5rem; padding-right:2.5rem; }

.py-3{ padding-top:.75rem; padding-bottom:.75rem; }
.py-4{ padding-top:1rem; padding-bottom:1rem; }
.py-10{ padding-top:2.5rem; padding-bottom:2.5rem; }
.py-16{ padding-top:4rem; padding-bottom:4rem; }
.py-20{ padding-top:5rem; padding-bottom:5rem; }
.py-24{ padding-top:6rem; padding-bottom:6rem; }
.py-28{ padding-top:7rem; padding-bottom:7rem; }
.py-32{ padding-top:8rem; padding-bottom:8rem; }

.pt-6{ padding-top:1.5rem; }
.pt-24{ padding-top:6rem; }
.pt-40{ padding-top:10rem; }
.pb-32{ padding-bottom:8rem; }

.mb-1{ margin-bottom:.25rem; }
.mb-3{ margin-bottom:.75rem; }
.mb-4{ margin-bottom:1rem; }
.mb-6{ margin-bottom:1.5rem; }
.mb-8{ margin-bottom:2rem; }
.mb-10{ margin-bottom:2.5rem; }
.mb-12{ margin-bottom:3rem; }
.mb-14{ margin-bottom:3.5rem; }
.mb-16{ margin-bottom:4rem; }
.mb-20{ margin-bottom:5rem; }

.mt-1{ margin-top:.25rem; }
.mt-2{ margin-top:.5rem; }
.mt-3{ margin-top:.75rem; }
.mt-4{ margin-top:1rem; }
.mt-6{ margin-top:1.5rem; }
.mt-10{ margin-top:2.5rem; }

.gap-4{ gap:1rem; }
.gap-6{ gap:1.5rem; }
.gap-8{ gap:2rem; }
.gap-10{ gap:2.5rem; }
.gap-12{ gap:3rem; }

/* space-x / space-y */
.space-x-2 > * + *{ margin-left:.5rem; }
.space-x-4 > * + *{ margin-left:1rem; }
.space-x-7 > * + *{ margin-left:1.75rem; }
.space-y-3 > * + *{ margin-top:.75rem; }
.space-y-4 > * + *{ margin-top:1rem; }
.space-y-6 > * + *{ margin-top:1.5rem; }

/* Typography */
.font-normal{ font-weight:400; }
.font-medium{ font-weight:500; }
.font-semibold{ font-weight:600; }
.font-bold{ font-weight:700; }
.font-extrabold{ font-weight:800; }
.italic{ font-style:italic; }
.uppercase{ text-transform:uppercase; }

.text-xs{ font-size:.75rem; line-height:1rem; }
.text-sm{ font-size:.875rem; line-height:1.25rem; }
.text-base{ font-size:1rem; line-height:1.5rem; }
.text-lg{ font-size:1.125rem; line-height:1.75rem; }
.text-xl{ font-size:1.25rem; line-height:1.75rem; }
.text-2xl{ font-size:1.5rem; line-height:2rem; }
.text-3xl{ font-size:1.875rem; line-height:2.25rem; }
.text-4xl{ font-size:2.25rem; line-height:2.5rem; }
.text-5xl{ font-size:3rem; line-height:1.05; }
.text-6xl{ font-size:3.75rem; line-height:1.02; }

.leading-tight{ line-height:1.1; }
.leading-relaxed{ line-height:1.75; }

.tracking-tight{ letter-spacing:-0.02em; }
.tracking-wide{ letter-spacing:0.06em; }

.opacity-95{ opacity:.95; }

/* Colors */
.bg-white{ background:#fff; }
.bg-transparent{ background:transparent; }
.bg-gray-50{ background:var(--gray-50); }
.bg-gray-100{ background:var(--gray-100); }

.text-gray-500{ color:var(--gray-500); }
.text-gray-600{ color:var(--gray-600); }
.text-gray-700{ color:var(--gray-700); }
.text-gray-800{ color:var(--gray-800); }
.text-gray-900{ color:var(--gray-900); }

.text-yellow-500{ color:var(--yellow-500); }

/* Borders */
.border{ border:1px solid var(--gray-300); }
.border-b{ border-bottom:1px solid var(--gray-200); }

.border-gray-100{ border-color:var(--gray-200); }
.border-gray-200{ border-color:var(--gray-200); }
.border-gray-300{ border-color:var(--gray-300); }
.border-gray-400{ border-color:var(--gray-400); }

.border-yellow-200{ border-color:rgba(230,185,60,.35); }
.border-yellow-300{ border-color:rgba(230,185,60,.55); }

/* Radius */
.rounded-lg{ border-radius: var(--radius-lg); }
.rounded-xl{ border-radius: var(--radius-xl); }
.rounded-2xl{ border-radius: var(--radius-2xl); }
.rounded-3xl{ border-radius: var(--radius-3xl); }

/* Shadows */
.shadow-sm{ box-shadow: var(--shadow-sm); }
.shadow-md{ box-shadow: var(--shadow-md); }
.shadow-lg{ box-shadow: var(--shadow-lg); }
.shadow-2xl{ box-shadow: var(--shadow-2xl); }

/* Backdrop blur (nav) */
.backdrop-blur-sm{
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Transitions */
.transition{ transition: color .25s ease, background-color .25s ease, border-color .25s ease, opacity .25s ease, box-shadow .25s ease, transform .25s ease; }
.transition-all{ transition: all .3s ease; }
.transition-transform{ transition: transform .25s ease; }
.duration-300{ transition-duration: .3s; }

/* Hover variants */
.hover\:text-gray-600:hover{ color: var(--gray-600); }
.hover\:bg-gray-50:hover{ background: var(--gray-50); }
.hover\:scale-105:hover{ transform: scale(1.05); }

/* Focus ring (inputs) */
.focus\:ring:focus{ box-shadow: var(--ring); outline: none; }
.focus\:ring-yellow-300:focus{ box-shadow: var(--ring); outline: none; }

/* Animate pulse */
@keyframes pulse {
  0%, 100%{ opacity: 1; }
  50%{ opacity: .72; }
}
.animate-pulse{ animation: pulse 2.2s ease-in-out infinite; }

/* =========================================================
   Gradient + arbitrary shadow utilities used in HTML
========================================================= */

/* Tailwind-like gradient: bg-gradient-to-r + from/to classes */
.bg-gradient-to-r{
  background-image: linear-gradient(90deg, var(--tw-from, var(--yellow-400)), var(--tw-to, var(--yellow-500)));
}
.from-yellow-400{ --tw-from: var(--yellow-400); }
.to-yellow-500{ --tw-to: var(--yellow-500); }

/* Arbitrary shadow classes present in HTML (escaped) */
.shadow-\[0_0_22px_rgba\(255\,215\,0\,0\.55\)\]{ box-shadow: 0 0 22px rgba(255,215,0,.55); }
.shadow-\[0_0_28px_rgba\(255\,215\,0\,0\.55\)\]{ box-shadow: 0 0 28px rgba(255,215,0,.55); }
.shadow-\[0_0_32px_rgba\(255\,215\,0\,0\.65\)\]{ box-shadow: 0 0 32px rgba(255,215,0,.65); }
.shadow-\[0_8px_32px_rgba\(230\,185\,60\,0\.25\)\]{ box-shadow: 0 8px 32px rgba(230,185,60,.25); }
.hover\:shadow-\[0_12px_48px_rgba\(230\,185\,60\,0\.45\)\]:hover{ box-shadow: 0 12px 48px rgba(230,185,60,.45); }

/* =========================================================
   Responsive (md:)
========================================================= */
@media (min-width: 768px){
  .md\:inline{ display:inline; }
  .md\:grid-cols-2{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .md\:grid-cols-3{ grid-template-columns: repeat(3, minmax(0,1fr)); }
  .md\:grid-cols-4{ grid-template-columns: repeat(4, minmax(0,1fr)); }
  .md\:py-16{ padding-top:4rem; padding-bottom:4rem; }
  .md\:py-20{ padding-top:5rem; padding-bottom:5rem; }
  .md\:py-24{ padding-top:6rem; padding-bottom:6rem; }

  .md\:text-base{ font-size:1rem; line-height:1.5rem; }
  .md\:text-xl{ font-size:1.25rem; line-height:1.75rem; }
  .md\:text-4xl{ font-size:2.25rem; line-height:2.5rem; }
  .md\:text-6xl{ font-size:3.75rem; line-height:1.02; }

  .md\:w-auto{ width:auto; }
  .md\:w-56{ width:14rem; }
  .md\:h-16{ height:4rem; }
  .md\:w-16{ width:4rem; }
  .md\:h-16{ height:4rem; }

  .md\:inline{ display:inline; }
  .md\:inline-block{ display:inline-block; }
}

/* Specific hidden md:inline behavior */
@media (min-width: 768px){
  .md\:inline{ display:inline; }
  .md\:inline-block{ display:inline-block; }
  .md\:inline-flex{ display:inline-flex; }
}
@media (max-width: 767.98px){
  .md\:inline{ display:none; }
  .md\:inline-block{ display:none; }
  .md\:inline-flex{ display:none; }
}

/* =========================================================
   Component-level refinements for exact premium feel
========================================================= */

/* Navbar: ensure calm glass + proper text contrast */
#topnav{
  border-bottom: 1px solid transparent;
}
#topnav.bg-white{
  background: rgba(255,255,255,.92);
  border-bottom: 1px solid rgba(229,231,235,.75);
}

/* Hero spacing breathing room on small screens */
section.relative.w-full.bg-white.text-center.pt-40.pb-32{
  padding-top: 10rem;
  padding-bottom: 8rem;
}

/* Buttons (primary + secondary) */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  border-radius: var(--radius-xl);
  text-decoration:none;
  will-change: transform;
}
.btn-primary{
  border: 1px solid rgba(0,0,0,0.02);
}
.btn-secondary{
  border: 1px solid rgba(156,163,175,.9);
  background: transparent;
}
.btn-secondary:hover{
  background: var(--gray-50);
}

/* Cards: consistent soft look */
.card{
  border-radius: var(--radius-2xl);
}
.bg-gray-50.card,
.bg-gray-50.rounded-2xl,
.bg-gray-50.rounded-3xl{
  background: var(--gray-50);
}

/* Pricing hover glow (legacy) */
.pricing-card{
  border-radius: var(--radius-2xl);
  transition: box-shadow .28s ease, transform .28s ease;
}
.pricing-card:hover{
  box-shadow: 0 14px 48px rgba(250, 204, 21, 0.62) !important;
  transform: translateY(-4px);
}

/* Forms: gold container + calm inputs */
.demo-form-shell,
.contact-form-shell{
  border-radius: var(--radius-3xl);
  border: 1px solid rgba(230,185,60,.35);
}

input[type="text"],
input[type="email"],
input[type="tel"],
select,
textarea{
  width:100%;
  border: 1px solid rgba(209,213,219,.95);
  border-radius: var(--radius-xl);
  padding: .85rem 1rem;
  background:#fff;
  color: var(--gray-900);
}
select{ background:#fff; }
textarea{ resize: vertical; min-height: 8rem; }

input:focus, select:focus, textarea:focus{
  outline:none;
  box-shadow: var(--ring);
  border-color: rgba(230,185,60,.55);
}

/* Audio: keep premium */
audio{
  border-radius: var(--radius-xl);
}

/* Details / FAQ */
details{
  border-radius: var(--radius-2xl);
}
details > summary{
  list-style:none;
}
details > summary::-webkit-details-marker{ display:none; }
details summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
}
details summary::after{
  content:"+";
  font-weight:800;
  color: rgba(230,185,60,.9);
  font-size: 1.25rem;
  line-height: 1;
}
details[open] summary::after{ content:"–"; }
details p{
  margin: 1rem 0 0;
}

/* Table: clean compare */
table{ width:100%; }
thead th{ border-bottom: 1px solid rgba(229,231,235,.9); }
tbody td{ border-bottom: 1px solid rgba(229,231,235,.8); }
th,td{ padding: 1rem 0; }
th.text-center, td.text-center{ text-align:center; }

/* Plan difference paragraph */
.plan-difference{
  margin-top: 1.5rem;
  color: var(--gray-700);
  line-height: 1.7;
}

/* Icons: ensure consistent outline gold */
svg{
  stroke: var(--gold);
}

/* Microline under hero (breathing room) */
p.text-center.text-gray-700.text-sm.mt-6{
  margin-top: 1.5rem;
  margin-bottom: 0;
}

/* Section background exact hex used in HTML */
.bg-\[\#F8F8F8\]{ background:#F8F8F8; }

/* Ensure the “Meet Grace” box keeps depth even if inline shadow differs */
.grace-box-shadow{ box-shadow: var(--shadow-2xl); }

/* Glassmorphism utility kept available (legacy) */
.glass-paypal{
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  background: rgba(255,255,255,0.55);
  border: 1px solid rgba(255,255,255,0.35);
  box-shadow: 0 8px 30px rgba(0,0,0,0.08);
}

/* Pricing hero utility kept available (legacy) */
.pricing-hero{
  background: radial-gradient(circle at center, rgba(255,225,120,0.6), transparent 70%);
  animation: floatHero 6s ease-in-out infinite;
}
@keyframes floatHero{
  0%{ transform: translateY(0); }
  50%{ transform: translateY(-8px); }
  100%{ transform: translateY(0); }
}