/* ============================================================
   BuffSheets — iOS "Liquid Glass" visual layer (prototype)
   Overrides only the visual layer of styles.css. Copy/layout untouched.
   ============================================================ */
:root{
  --glass-tint: rgba(255,255,255,.66);      /* frosted text panels: 66% tint */
  --glass-tint-strong: rgba(255,255,255,.74);
  --glass-clear: rgba(255,255,255,.22);     /* decorative clear glass (no body text) */
  --glass-blur: 28px;
  --glass-sat: 180%;
  --glass-edge: rgba(255,255,255,.75);
  --glass-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 -1px 0 rgba(255,255,255,.18) inset,
                  0 20px 50px -18px rgba(30,27,75,.35), 0 2px 6px rgba(30,27,75,.08);
  --ink: #0b1020;
  --slate: #2f3a4f;        /* darker than live for contrast on tinted glass */
  --slate-light: #3f4a5e;
  --radius: 26px;
  --radius-sm: 16px;
}
html{ background:#eef0ff; }
body.lg{ background: transparent; color: var(--ink); }

/* ---------- Vivid animated background (sits BEHIND everything) ---------- */
.lg-bg{ position:fixed; inset:0; z-index:-1; overflow:hidden;
  background: radial-gradient(1200px 800px at 10% 0%, #c7d2fe 0%, transparent 60%),
              radial-gradient(1000px 700px at 100% 30%, #fbcfe8 0%, transparent 60%),
              linear-gradient(160deg,#e0e7ff 0%,#f5f3ff 45%,#ecfeff 100%); }
.lg-bg span{ position:absolute; border-radius:50%; filter: blur(70px); opacity:.85; mix-blend-mode:multiply;
  animation: lg-drift 26s ease-in-out infinite alternate; will-change: transform; }
.lg-bg .b1{ width:620px;height:620px; left:-120px; top:-80px; background: radial-gradient(circle at 30% 30%,#6366f1,#3b82f6 60%,transparent 70%); }
.lg-bg .b2{ width:560px;height:560px; right:-140px; top:10vh; background: radial-gradient(circle at 40% 40%,#ec4899,#f472b6 55%,transparent 70%); animation-duration:31s; animation-delay:-6s; }
.lg-bg .b3{ width:520px;height:520px; left:30vw; top:45vh; background: radial-gradient(circle at 50% 50%,#22d3ee,#06b6d4 55%,transparent 70%); animation-duration:34s; animation-delay:-12s; }
.lg-bg .b4{ width:460px;height:460px; left:-80px; bottom:-120px; background: radial-gradient(circle,#a855f7,#8b5cf6 55%,transparent 70%); animation-duration:29s; animation-delay:-3s; }
.lg-bg .b5{ width:420px;height:420px; right:8vw; bottom:-100px; background: radial-gradient(circle,#10b981,#34d399 55%,transparent 70%); animation-duration:37s; animation-delay:-18s; opacity:.6; }
.lg-grain{ position:absolute; inset:0; opacity:.06;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }
@keyframes lg-drift{
  0%{ transform: translate3d(0,0,0) scale(1); }
  50%{ transform: translate3d(8vw,6vh,0) scale(1.12); }
  100%{ transform: translate3d(-6vw,10vh,0) scale(.95); }
}

/* ---------- Glass primitive: frosted panel (text-bearing) ---------- */
.lg .hero-copy, .lg .section-head, .lg .skills-copy, .lg .install-note, .lg .section-foot-note,
.lg .feature-card, .lg .step, .lg .compare-card, .lg .audience-card, .lg .privacy-card,
.lg .price-card, .lg .faq-list details, .lg .final-cta-inner, .lg .footer-inner, .lg .demo-frame{
  position: relative;
  background: linear-gradient(155deg, rgba(255,255,255,.80) 0%, var(--glass-tint) 45%, rgba(255,255,255,.62) 100%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  border: 1px solid var(--glass-edge);
  border-radius: var(--radius);
  box-shadow: var(--glass-shadow);
  isolation: isolate;
}
/* specular sheen + refraction-like rim */
.lg .hero-copy::before, .lg .section-head::before, .lg .skills-copy::before,
.lg .feature-card::before, .lg .step::before, .lg .compare-card::before, .lg .audience-card::before,
.lg .privacy-card::before, .lg .price-card::before, .lg .faq-list details::before,
.lg .final-cta-inner::before, .lg .footer-inner::before{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:-1;
  background:
    radial-gradient(120% 60% at 15% -10%, rgba(255,255,255,.9), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.35), transparent 35%);
  opacity:.7;
}
.lg .hero-copy::after, .lg .section-head::after, .lg .skills-copy::after,
.lg .feature-card::after, .lg .step::after, .lg .compare-card::after, .lg .audience-card::after,
.lg .privacy-card::after, .lg .price-card::after, .lg .faq-list details::after,
.lg .final-cta-inner::after, .lg .footer-inner::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; padding:1.5px;
  background: linear-gradient(135deg, rgba(255,255,255,.95), rgba(255,255,255,.1) 30%, rgba(255,255,255,0) 55%, rgba(199,210,254,.7) 80%, rgba(255,255,255,.9));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}

/* ---------- Sections become transparent so the background shows between panels ---------- */
.lg .hero, .lg .compare, .lg .demo, .lg .features, .lg .how, .lg .install, .lg .prompts,
.lg .skills, .lg .privacy, .lg .pricing, .lg .faq, .lg .final-cta, .lg .footer{ background: transparent !important; border: 0; }
.lg .hero-bg, .lg .hero-glow{ display:none; }

/* Panel padding where live had none */
.lg .hero-copy{ padding: 40px 40px 34px; border-radius: 32px; }
.lg .section-head{ padding: 26px 34px; max-width: 780px; margin-inline:auto; margin-bottom: 40px; text-align:center; }
.lg .skills-copy{ padding: 36px; border-radius: 30px; }
.lg .install-note, .lg .section-foot-note{ padding: 14px 22px; border-radius: 999px; width: fit-content; margin-inline:auto !important; }
.lg .final-cta-inner{ padding: 56px 40px; border-radius: 36px; }
.lg .footer-inner{ padding: 28px 32px; border-radius: 28px; margin-bottom: 28px; }
.lg .final-cta h2, .lg .final-cta p{ color: var(--ink) !important; }

/* ---------- Glass sticky nav ---------- */
.lg .nav{
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,.62));
  -webkit-backdrop-filter: blur(30px) saturate(190%); backdrop-filter: blur(30px) saturate(190%);
  border: 1px solid rgba(255,255,255,.85);
  box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 -1px 0 rgba(255,255,255,.25) inset, 0 14px 40px -14px rgba(30,27,75,.35);
}
.lg .nav-inner{ padding-inline: 10px 8px; }
.lg .nav-links a{ border-radius: 999px; padding: 7px 13px; color: var(--ink); font-weight: 550; transition: background .2s; }
.lg .nav-links a:hover{ background: rgba(255,255,255,.7); box-shadow: 0 1px 0 #fff inset; }
.lg .nav-auth-link{ color: var(--ink); }

/* ---------- Pills ---------- */
.lg .btn{ border-radius: 999px; font-weight: 650; letter-spacing: -.005em; }
/* Primary = SOLID pill (never translucent) */
.lg .btn-primary{
  background: linear-gradient(180deg, #3b74f6 0%, #1d4ed8 100%);
  color:#fff; border: 1px solid #1e40af;
  box-shadow: 0 1px 0 rgba(255,255,255,.45) inset, 0 -2px 6px rgba(0,0,0,.18) inset, 0 10px 24px -8px rgba(29,78,216,.65);
}
.lg .btn-primary:hover{ background: linear-gradient(180deg,#4b80f7,#1e40af); box-shadow: 0 1px 0 rgba(255,255,255,.5) inset, 0 14px 30px -8px rgba(29,78,216,.75); }
.lg .btn-inverse{ background:#1d4ed8; color:#fff; border-radius:999px; }
/* Secondary = glass pill (dark label on frosted, >=4.5:1) */
.lg .btn-ghost{
  background: rgba(255,255,255,.72); color: var(--ink);
  -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255,255,255,.95);
  box-shadow: 0 1px 0 #fff inset, 0 8px 20px -10px rgba(30,27,75,.35);
}
.lg .btn-ghost:hover{ background: rgba(255,255,255,.88); }

/* ---------- Text accents ---------- */
.lg .hero h1 .accent{ background: linear-gradient(90deg,#1d4ed8,#7c3aed 55%,#be185d); -webkit-background-clip:text; background-clip:text; color: transparent; }
.lg .hero-trust li, .lg .lede, .lg .section-head p{ color: var(--slate); }

/* ---------- Chips (on frosted, dark text) ---------- */
.lg .prompt-chip{ background: rgba(255,255,255,.72); color: var(--ink); border:1px solid rgba(255,255,255,.95); border-radius:999px;
  -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%);
  box-shadow: 0 1px 0 #fff inset, 0 8px 22px -12px rgba(30,27,75,.4); }
.lg .feature-icon, .lg .step-num, .lg .privacy-icon{ border-radius: 14px; box-shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 6px 14px -6px rgba(37,99,235,.5); }
.lg .step-num{ border-radius: 999px; }

/* ---------- Product mockups float on glass ---------- */
.lg .app-window, .lg .code-window{ border-radius: 22px; overflow:hidden; border:1px solid rgba(255,255,255,.9);
  box-shadow: 0 0 0 8px rgba(255,255,255,.28), 0 30px 70px -20px rgba(30,27,75,.5); }
.lg .demo-frame{ padding: 10px; border-radius: 28px; }
.lg .demo-frame video{ border-radius: 20px; }
.lg .price-featured{ background: linear-gradient(155deg, rgba(255,255,255,.86), rgba(238,242,255,.74)); border-color: rgba(147,170,253,.9);
  box-shadow: var(--glass-shadow), 0 0 0 2px rgba(99,102,241,.35); }
.lg .faq-list details{ margin-bottom: 12px; }
.lg .faq-list details p{ color: var(--slate); }

/* ---------- Accessibility fallbacks ---------- */
@media (prefers-reduced-motion: reduce){
  .lg-bg span{ animation: none !important; }
  .lg *{ transition: none !important; }
  .lg .marquee-track{ animation: none !important; }
}
@media (prefers-reduced-transparency: reduce){
  .lg-bg span, .lg-grain{ display:none; }
  .lg-bg{ background:#eef1f8; }
  .lg .hero-copy, .lg .section-head, .lg .skills-copy, .lg .install-note, .lg .section-foot-note,
  .lg .feature-card, .lg .step, .lg .compare-card, .lg .audience-card, .lg .privacy-card,
  .lg .price-card, .lg .faq-list details, .lg .final-cta-inner, .lg .footer-inner, .lg .demo-frame,
  .lg .nav, .lg .btn-ghost, .lg .prompt-chip{
    background:#fff !important; -webkit-backdrop-filter:none !important; backdrop-filter:none !important; border-color:#d6dbe6 !important;
  }
  .lg .hero-copy::before,.lg .section-head::before,.lg .skills-copy::before,.lg .feature-card::before,.lg .step::before,.lg .compare-card::before,.lg .audience-card::before,.lg .privacy-card::before,.lg .price-card::before,.lg .faq-list details::before,.lg .final-cta-inner::before,.lg .footer-inner::before,
  .lg .hero-copy::after,.lg .section-head::after,.lg .skills-copy::after,.lg .feature-card::after,.lg .step::after,.lg .compare-card::after,.lg .audience-card::after,.lg .privacy-card::after,.lg .price-card::after,.lg .faq-list details::after,.lg .final-cta-inner::after,.lg .footer-inner::after{ display:none; }
}

/* ---------- Fixes after screenshot review ---------- */
/* Background spans the whole document so every section has color behind its glass */
body.lg{ position: relative; }
.lg-bg{ position: absolute; inset: 0; min-height: 100vh; }
.lg-bg::before, .lg-bg::after{ content:""; position:absolute; border-radius:50%; filter: blur(90px); opacity:.7; mix-blend-mode:multiply; }
.lg-bg::before{ width:700px; height:700px; left:-10%; top:42%; background: radial-gradient(circle,#f472b6,#a855f7 55%,transparent 70%); }
.lg-bg::after{ width:760px; height:760px; right:-12%; top:68%; background: radial-gradient(circle,#38bdf8,#6366f1 55%,transparent 72%); }
.lg-bg .b3{ top: 22%; } .lg-bg .b4{ top: 55%; bottom:auto; left: 55%; } .lg-bg .b5{ top: 85%; bottom:auto; left: 10%; }
/* Remaining free-standing text gets a frosted pill */
.lg .pricing-note, .lg .footer-meta{
  background: var(--glass-tint); -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%);
  border:1px solid var(--glass-edge); border-radius:999px; padding: 12px 22px; width: fit-content; max-width: calc(100% - 48px);
  margin-inline:auto; box-shadow: var(--glass-shadow); color: var(--slate); }
.lg .footer-meta{ margin-bottom: 28px; border-top: 1px solid var(--glass-edge); }
/* Inline <strong> inside flex list items was splitting into columns; render as inline text */
.lg .skills-points li, .lg .privacy-facts li{ display:block; padding-left: 1.4em; text-indent: -1.1em; }
.lg .skills-points li::before, .lg .privacy-facts li::before{ display:inline-block; width:1.1em; text-indent:0; }
.lg .privacy-facts li{ background: rgba(255,255,255,.6); border:1px solid rgba(255,255,255,.9); padding-left: 2em; }
@media (prefers-reduced-transparency: reduce){
  .lg-bg::before, .lg-bg::after{ display:none; }
  .lg .pricing-note, .lg .footer-meta{ background:#fff !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; }
}
.lg .nav-links a{ white-space: nowrap; padding: 7px 11px; }
.lg .hero-copy{ padding: 34px 32px 30px; }
.lg .hero h1{ font-size: clamp(2rem, 4vw, 3.1rem); }

/* ---------- Nav balance fix: equal inner padding, CTA never overflows ---------- */
.lg .nav-inner{ grid-template-columns: auto minmax(0,1fr) auto; gap: 16px; padding-inline: 12px !important; }
.lg .nav-links{ justify-content: center; min-width: 0; }
.lg .nav-cta{ gap: 8px; white-space: nowrap; }
.lg .nav-cta .btn{ white-space: nowrap; }
.lg .brand{ padding-left: 6px; }
@media (max-width: 1240px){
  .lg .nav-links{ gap: 0; }
  .lg .nav-links a{ padding: 7px 8px; font-size: .86rem; }
  .lg .nav-cta .btn-sm{ padding: 9px 14px; }
}

/* ---------- 1001–1200px: give the mockup room so sheet cells aren't clipped ---------- */
@media (min-width: 1001px) and (max-width: 1200px){
  .lg .hero-inner{ grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); gap: 28px; }
  .lg .hero-copy{ padding: 28px 26px 26px; }
  .lg .hero h1{ font-size: 2.35rem; }
  .lg .hero-actions .btn-lg{ padding: 13px 20px; font-size: .96rem; }
  .lg .app-window{ box-shadow: 0 0 0 5px rgba(255,255,255,.28), 0 30px 70px -20px rgba(30,27,75,.5); }
}

/* ---------- Brand lockup: B mark + "uffSheets" on one baseline, centred with nav items ---------- */
.lg .nav .brand{ align-items: center; align-self: center; height: auto; font-size: 1.25rem; line-height: 1; padding-left: 8px; }
.lg .nav .brand .brand-mark{ width: 24px; height: 24px; margin: 0 -3px 0 0; display: block; }
.lg .nav .brand span{ display: block; line-height: 1; }
.lg .nav .brand .brand-mark{ width: 22px; height: 22px; margin-right: -2px; } /* B glyph height ≈ cap height of the 20px wordmark */
.lg .nav .brand{ padding-left: 0; margin-left: -3px; } /* glyph's left ink edge mirrors the Download pill's right gap */

/* =================== CMO QC round =================== */
/* 1. Nav: concentric pill — 12px inset on top, bottom, right and left ink edge */
.lg .nav-inner{ height: 62px; padding-inline: 12px !important; }
.lg .nav-cta .btn-sm{ height: 38px; padding-block: 0; display: inline-flex; align-items: center; }
.lg .nav .btn-primary, .lg .footer .btn-primary{
  box-shadow: 0 1px 0 rgba(255,255,255,.45) inset, 0 -2px 6px rgba(0,0,0,.18) inset, 0 2px 4px rgba(29,78,216,.25); }
.lg .nav{ border-color: rgba(255,255,255,.95); box-shadow: 0 1px 0 #fff inset, 0 0 0 1px rgba(99,102,241,.12), 0 14px 40px -14px rgba(30,27,75,.35); }
/* Footer bar: same rule — CTA inset equal on right as brand ink on left */
.lg .footer-inner{ padding: 22px 22px 22px 22px; }
.lg .footer .btn-sm{ height: 38px; padding-block: 0; display: inline-flex; align-items: center; }

/* 3. Reveal: no opacity fade (a fading panel lets text sit on bare background); slide only */
.lg .reveal{ opacity: 1 !important; }
/* iOS scroll-edge effect: frosted band behind the floating nav so content never shows bare above it */
.lg-edge{ position: fixed; top: 0; left: 0; right: 0; height: 96px; z-index: 40; pointer-events: none;
  background: linear-gradient(180deg, rgba(238,240,255,.70) 0%, rgba(238,240,255,.62) 55%, rgba(238,240,255,0) 100%);
  -webkit-backdrop-filter: blur(22px) saturate(160%); backdrop-filter: blur(22px) saturate(160%);
  -webkit-mask-image: linear-gradient(180deg,#000 60%,transparent); mask-image: linear-gradient(180deg,#000 60%,transparent); }
@media (prefers-reduced-transparency: reduce){ .lg-edge{ background:#eef1f8; backdrop-filter:none; -webkit-backdrop-filter:none; } }
.lg .demo-video{ display:block; width:100%; background:#fff; }
.lg .footer-inner{ padding-right: 32px; padding-left: 32px; } /* brand ink 33px from left edge = CTA 33px from right */
.lg .footer .brand{ padding-left: 0; margin-left: -5px; } /* logo ink aligns with tagline and mirrors CTA right gap */

/* Desktop locks the bar at 62px on a 3-column grid. On a phone that clips the
   open menu and parks the menu button in a collapsed third column. */
@media (max-width: 760px) {
  .lg .nav-inner {
    height: auto;
    min-height: 62px;
    grid-template-columns: 1fr auto;
    gap: 12px;
  }
  .lg .nav.menu-open { border-radius: 28px; }
}