/* =========================================================
   LangCert Practice — Static HTML Template
   Pixel-matched to https://langcertpractice.lovable.app/
   ========================================================= */

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body,h1,h2,h3,h4,p,ul,ol,figure,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
img{max-width:100%;height:auto;display:block}
svg{flex-shrink:0}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
input,textarea,select{font:inherit;color:inherit}
summary{list-style:none}
summary::-webkit-details-marker{display:none}

:root{
  --background:hsl(0 0% 100%);
  --foreground:hsl(220 30% 12%);
  --card:hsl(0 0% 100%);
  --card-foreground:hsl(220 30% 12%);
  --primary:hsl(14 100% 40%);
  --primary-fg:#fff;
  --primary-glow:hsl(22 100% 62%);
  --secondary:hsl(220 25% 96%);
  --muted:hsl(220 20% 96%);
  --muted-fg:hsl(220 12% 42%);
  --accent:hsl(14 100% 96%);
  --accent-fg:hsl(14 100% 40%);
  --success:hsl(142 70% 28%);
  --destructive:hsl(0 80% 55%);
  --border:hsl(220 16% 90%);
  --input:hsl(220 16% 90%);
  --ring:hsl(14 100% 56%);
  --radius:.5rem;
  --shadow-card:0 1px 2px hsl(220 30% 12% / .04),0 4px 16px hsl(220 30% 12% / .06);
  --shadow-elevated:0 8px 32px hsl(220 30% 12% / .10);
  --gradient-hero:linear-gradient(135deg,hsl(14 100% 56%) 0%,hsl(22 100% 62%) 100%);
  --gradient-soft:linear-gradient(180deg,hsl(14 100% 98%) 0%,hsl(0 0% 100%) 100%);
  --transition:all .2s cubic-bezier(.4,0,.2,1);
  --container:1400px;
}

body{
  font-family:'Inter',system-ui,-apple-system,Segoe UI,sans-serif;
  background:var(--gradient-soft);
  color:var(--foreground);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  min-height:100vh;
  display:flex;
  flex-direction:column;
}
main{flex:1}
h1,h2,h3,h4{
  font-family:'Plus Jakarta Sans','Inter',system-ui,sans-serif;
  letter-spacing:-.025em;
  line-height:1.15;
  color:var(--foreground);
}
@media (max-width:640px){
  input,select,textarea{font-size:16px!important}
}

.container{
  width:100%;
  max-width:var(--container);
  margin:0 auto;
  padding-left:1rem;
  padding-right:1rem;
}
@media (min-width:640px){.container{padding-left:1.25rem;padding-right:1.25rem}}
@media (min-width:768px){.container{padding-left:1.5rem;padding-right:1.5rem}}
@media (min-width:1024px){.container{padding-left:2rem;padding-right:2rem}}

/* Utilities */
.text-primary{color:var(--primary)}
.text-muted{color:var(--muted-fg)}
.text-success{color:var(--success)}
.text-center{text-align:center}
.font-bold{font-weight:700}
.font-extrabold{font-weight:800}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
.hidden{display:none!important}
@media (min-width:640px){.sm\:block{display:block}.sm\:hidden{display:none!important}}
@media (min-width:768px){.md\:flex{display:flex}.md\:hidden{display:none!important}}
@media (max-width:767px){.md\:hidden-up{display:none!important}}

/* Cards */
.lc-card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow-card);
}
.lc-card.hoverable:hover,
.mod-card:hover,
.feat-card:hover,
.blog-card:hover{box-shadow:var(--shadow-elevated)}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  height:2.5rem;padding:0 1rem;border-radius:var(--radius);
  font-size:.875rem;font-weight:500;white-space:nowrap;
  transition:var(--transition);border:1px solid transparent;
  line-height:1;
}
.btn svg{width:1rem;height:1rem;flex-shrink:0}
.btn:disabled{opacity:.5;pointer-events:none}
.btn-primary{background:var(--primary);color:var(--primary-fg)}
.btn-primary:hover{filter:brightness(.92)}
.btn-primary.shadow{box-shadow:0 10px 15px -3px hsl(14 100% 40% / .25)}
.btn-primary.shadow:hover{box-shadow:0 20px 25px -5px hsl(14 100% 40% / .3)}
.btn-secondary{background:var(--secondary);color:var(--foreground)}
.btn-secondary:hover{filter:brightness(.96)}
.btn-outline{background:var(--background);border-color:var(--input);color:var(--foreground)}
.btn-outline:hover{background:var(--accent);color:var(--accent-fg);border-color:var(--input)}
.btn-ghost{background:transparent;color:var(--foreground)}
.btn-ghost:hover{background:var(--accent);color:var(--accent-fg)}
.btn-sm{height:2.25rem;padding:0 .75rem;font-size:.875rem}
.btn-lg{height:2.75rem;padding:0 2rem;font-size:1rem}
.btn-icon{width:2.25rem;height:2.25rem;padding:0}
.btn-block{width:100%}

/* Header */
.site-header{
  position:sticky;top:0;z-index:40;width:100%;
  background:hsla(0,0%,100%,.85);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
}
.site-header .inner{
  display:flex;align-items:center;justify-content:space-between;
  height:3.5rem;gap:.5rem;
}
@media (min-width:640px){.site-header .inner{height:4rem}}

.brand{display:flex;align-items:center;gap:.5rem;min-width:0}
.brand-mark{
  width:2rem;height:2rem;border-radius:.375rem;
  display:grid;place-items:center;color:#fff;flex-shrink:0;
  background:var(--gradient-hero);
}
@media (min-width:640px){.brand-mark{width:2.25rem;height:2.25rem}}
.brand-mark svg{width:1rem;height:1rem}
@media (min-width:640px){.brand-mark svg{width:1.25rem;height:1.25rem}}
.brand-title{font-weight:800;font-size:1rem;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (min-width:640px){.brand-title{font-size:1.125rem}}
.brand-sub{display:none;font-size:11px;color:var(--muted-fg);margin-top:-2px}
@media (min-width:640px){.brand-sub{display:block}}

.nav-desktop{display:none;align-items:center;gap:.5rem}
@media (min-width:768px){.nav-desktop{display:flex}}
.nav-mobile-wrap{display:flex;align-items:center;gap:.25rem}
@media (min-width:768px){.nav-mobile-wrap{display:none}}

/* Mobile sheet */
.sheet-backdrop{
  position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:50;
  opacity:0;pointer-events:none;transition:opacity .2s;
}
.sheet-backdrop.open{opacity:1;pointer-events:auto}
.sheet{
  position:fixed;top:0;right:0;bottom:0;z-index:51;
  width:80vw;max-width:20rem;background:var(--card);
  border-left:1px solid var(--border);
  transform:translateX(100%);transition:transform .25s ease;
  display:flex;flex-direction:column;
}
.sheet.open{transform:translateX(0)}
.sheet-header{padding:1rem 1.25rem;border-bottom:1px solid var(--border);font-weight:700}
.sheet-nav{display:flex;flex-direction:column;padding:.75rem;gap:.25rem}
.sheet-nav .btn{width:100%;justify-content:flex-start}

/* Hero */
.hero{padding:3.5rem 0}
@media (min-width:768px){.hero{padding:5rem 0}}
.hero-grid{
  display:grid;gap:3rem;align-items:center;
}
@media (min-width:1024px){.hero-grid{grid-template-columns:1fr 1fr}}

.live-badge{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.25rem .75rem;border-radius:9999px;
  background:hsl(142 70% 28% / .1);color:var(--success);
  font-size:.75rem;font-weight:600;margin-bottom:1rem;
}
.ping{position:relative;display:flex;width:.5rem;height:.5rem}
.ping-dot{position:relative;display:inline-flex;width:.5rem;height:.5rem;border-radius:9999px;background:var(--success)}
.ping-ring{
  position:absolute;inset:0;border-radius:9999px;background:var(--success);
  opacity:.75;animation:ping 1.5s cubic-bezier(0,0,.2,1) infinite;
}
@keyframes ping{75%,100%{transform:scale(2);opacity:0}}

.hero h1{font-size:2.25rem;font-weight:800;line-height:1.05;margin-bottom:1.25rem}
@media (min-width:768px){.hero h1{font-size:3.75rem}}
.hero .lead{font-size:1.125rem;color:var(--muted-fg);margin-bottom:1.5rem;max-width:36rem}
.hero-cta{display:flex;flex-wrap:wrap;gap:.75rem;margin-bottom:1.25rem}
.trust-row{
  display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1.25rem;
  font-size:.875rem;color:var(--muted-fg);margin-bottom:1.5rem;
}
.trust-row span{display:inline-flex;align-items:center;gap:.375rem}
.trust-row svg{width:1rem;height:1rem;color:var(--success);flex-shrink:0}
.stars{display:flex;align-items:center;gap:.5rem;font-size:.875rem}
.stars .row{display:flex}
.stars svg{width:1rem;height:1rem;fill:var(--primary);color:var(--primary)}

/* Readiness card */
.readiness{padding:1.5rem;position:relative;overflow:hidden}
@media (min-width:768px){.readiness{padding:2rem}}
.readiness-glow{
  position:absolute;top:-5rem;right:-5rem;width:16rem;height:16rem;
  border-radius:9999px;opacity:.2;background:var(--gradient-hero);pointer-events:none;
}
.readiness-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem}
.readiness-top .label{font-size:.875rem;font-weight:600;color:var(--muted-fg)}
.badge-success{
  font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  color:var(--success);background:hsl(142 70% 28% / .1);
  padding:.125rem .5rem;border-radius:.25rem;
}
.readiness-score{font-size:3rem;font-weight:800;margin-bottom:.25rem;line-height:1}
.readiness-score span{font-size:1.5rem;color:var(--muted-fg);font-weight:800}
.bar{height:.5rem;background:var(--muted);border-radius:9999px;overflow:hidden;margin-bottom:1.5rem}
.bar > i{display:block;height:100%;border-radius:9999px;background:var(--gradient-hero)}
.skill{margin-bottom:.75rem}
.skill-top{display:flex;justify-content:space-between;font-size:.875rem;margin-bottom:.25rem}
.skill-bar{height:.375rem;background:var(--muted);border-radius:9999px;overflow:hidden}
.skill-bar > i{display:block;height:100%;border-radius:9999px}
.skill-bar .ok{background:var(--success)}
.skill-bar .mid{background:var(--primary)}
.skill-bar .low{background:var(--destructive)}
.coach-tip{
  margin-top:1.5rem;padding:.75rem;border-radius:.375rem;
  background:var(--accent);color:var(--accent-fg);font-size:.75rem;
  display:flex;align-items:flex-start;gap:.35rem;
}
.coach-tip svg{width:1rem;height:1rem;flex-shrink:0;margin-top:1px}

/* Stats strip */
.stats{
  margin-top:3.5rem;padding-top:2rem;border-top:1px solid var(--border);
  display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;text-align:center;
}
@media (min-width:768px){.stats{grid-template-columns:repeat(4,1fr)}}
.stats svg{width:1.25rem;height:1.25rem;margin:0 auto .5rem;color:var(--primary)}
.stats .n{font-size:1.5rem;font-weight:800}
.stats .l{font-size:.75rem;color:var(--muted-fg)}

/* Social proof banner */
.proof-banner{
  background:hsl(14 100% 96% / .5);padding:1.5rem 0;
  border-top:1px solid var(--border);border-bottom:1px solid var(--border);
}
.proof-banner .row{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:.75rem 2rem;font-size:.875rem;color:var(--muted-fg);
}
.proof-banner .item{display:flex;align-items:center;gap:.5rem}
.proof-banner svg{width:1.25rem;height:1.25rem;color:var(--primary);flex-shrink:0}
.proof-banner strong{color:var(--foreground);font-weight:700}

/* Sections */
.section{padding:4rem 0}
.section-head{text-align:center;max-width:42rem;margin:0 auto 2.5rem}
.section-head h2{font-size:1.875rem;font-weight:800;margin-bottom:.75rem}
@media (min-width:768px){.section-head h2{font-size:2.25rem}}
.section-head p{color:var(--muted-fg)}

/* Before/After */
.ba-list{max-width:42rem;margin:0 auto;display:flex;flex-direction:column;gap:.75rem}
.ba-row{
  display:grid;grid-template-columns:1fr auto 1fr;gap:1rem;align-items:center;
}
.ba-row .lc-card{padding:1rem;text-align:center;font-size:.875rem}
.ba-before{color:var(--muted-fg);text-decoration:line-through}
.ba-after{font-weight:600;border-color:hsl(14 100% 40% / .3)!important;background:hsl(14 100% 96% / .5)}
.ba-arrow{color:var(--primary);width:1.25rem;height:1.25rem}

/* Modules / Features grids */
.grid-4{display:grid;gap:1rem}
@media (min-width:768px){.grid-4{grid-template-columns:1fr 1fr}}
@media (min-width:1024px){.grid-4{grid-template-columns:repeat(4,1fr)}}
.grid-3{display:grid;gap:1.25rem}
@media (min-width:768px){.grid-3{grid-template-columns:1fr 1fr}}
@media (min-width:1024px){.grid-3{grid-template-columns:repeat(3,1fr)}}
.grid-2{display:grid;gap:1.25rem}
@media (min-width:640px){.grid-2{grid-template-columns:1fr 1fr}}
@media (min-width:1024px){.grid-2{grid-template-columns:repeat(4,1fr)}}

.mod-card{padding:1.25rem;transition:box-shadow .2s}
.mod-card:hover{box-shadow:var(--shadow-elevated)}
.mod-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:.75rem}
.icon-box{
  width:2.5rem;height:2.5rem;border-radius:.375rem;
  background:var(--accent);color:var(--primary);
  display:grid;place-items:center;
}
.icon-box svg{width:1.25rem;height:1.25rem}
.mod-card h3{font-weight:700;margin-bottom:.25rem}
.mod-card .desc{font-size:.75rem;color:var(--muted-fg);margin-bottom:.75rem}
.mod-foot{display:flex;align-items:center;justify-content:space-between;font-size:.75rem}
.mod-foot .muted{color:var(--muted-fg)}
.mod-foot a{color:var(--primary);font-weight:600;display:inline-flex;align-items:center;gap:.25rem}
.mod-foot a:hover{text-decoration:underline}

.feat-card{padding:1.5rem;transition:box-shadow .2s}
.feat-card:hover{box-shadow:var(--shadow-elevated)}
.feat-card .icon-box{margin-bottom:.75rem}
.feat-card h3{font-weight:700;font-size:1.125rem;margin-bottom:.25rem}
.feat-card p{font-size:.875rem;color:var(--muted-fg)}

.step-card{padding:1.5rem;text-align:center;position:relative}
.step-icon{
  width:3rem;height:3rem;border-radius:9999px;
  background:var(--accent);color:var(--primary);
  display:grid;place-items:center;margin:0 auto .75rem;
}
.step-icon svg{width:1.25rem;height:1.25rem}
.step-n{font-size:.75rem;font-weight:700;color:var(--primary);margin-bottom:.25rem}
.step-card h3{font-weight:700;margin-bottom:.25rem}
.step-card p{font-size:.875rem;color:var(--muted-fg)}

/* Testimonials */
.rating-row{
  display:flex;align-items:center;justify-content:center;gap:.25rem;margin-bottom:2rem;
}
.rating-row svg{width:1.5rem;height:1.5rem;fill:var(--primary);color:var(--primary)}
.rating-row .score{margin-left:.5rem;font-weight:700;font-size:1.125rem}
.rating-row .count{margin-left:.25rem;font-size:.875rem;color:var(--muted-fg)}
.t-card{padding:1.5rem}
.t-stars{display:flex;margin-bottom:.75rem}
.t-stars svg{width:.875rem;height:.875rem;fill:var(--primary);color:var(--primary)}
.t-quote{font-size:.875rem;margin-bottom:1rem;line-height:1.625}
.t-author{display:flex;align-items:center;gap:.75rem}
.t-avatar{
  width:2.25rem;height:2.25rem;border-radius:9999px;
  background:hsl(14 100% 40% / .1);color:var(--primary);
  display:grid;place-items:center;font-size:.75rem;font-weight:700;
}
.t-name{font-weight:700;font-size:.875rem}
.t-meta{font-size:.75rem;color:var(--muted-fg)}

/* Mid CTA */
.mid-cta{padding:2rem 0}
.mid-cta .box{
  padding:2rem;text-align:center;
  border-color:hsl(14 100% 40% / .2)!important;
  background:hsl(14 100% 96% / .3);
}
@media (min-width:768px){.mid-cta .box{padding:3rem}}
.mid-cta svg{width:2rem;height:2rem;margin:0 auto .75rem;color:var(--primary)}
.mid-cta h2{font-size:1.5rem;font-weight:800;margin-bottom:.5rem}
@media (min-width:768px){.mid-cta h2{font-size:1.875rem}}
.mid-cta p{color:var(--muted-fg);margin-bottom:1.5rem;max-width:28rem;margin-left:auto;margin-right:auto}
.mid-cta .note{font-size:.75rem;color:var(--muted-fg);margin-top:.75rem}

/* Pricing cards */
.price-grid{display:grid;gap:1.25rem;max-width:72rem;margin:0 auto}
@media (min-width:640px){.price-grid{grid-template-columns:1fr 1fr}}
@media (min-width:1024px){.price-grid{grid-template-columns:repeat(4,1fr)}}
.price-card{padding:1.5rem;position:relative;display:flex;flex-direction:column}
.price-card.featured{box-shadow:var(--shadow-elevated);outline:2px solid var(--primary);outline-offset:0}
.price-pill{
  position:absolute;top:-.75rem;left:50%;transform:translateX(-50%);
  padding:.125rem .75rem;font-size:10px;font-weight:700;border-radius:9999px;
  color:#fff;background:var(--gradient-hero);white-space:nowrap;
}
.price-pill.green{background:var(--success)}
.price-card h3{font-weight:700;font-size:1.125rem;margin-bottom:.25rem}
.price-amt{margin-bottom:1rem}
.price-amt .big{font-size:1.875rem;font-weight:800}
.price-amt .old{font-size:.875rem;color:var(--muted-fg);text-decoration:line-through;margin-left:.5rem}
.price-amt .period{font-size:.875rem;color:var(--muted-fg)}
.price-list{display:flex;flex-direction:column;gap:.5rem;margin-bottom:1.5rem;flex:1}
.price-list li{display:flex;align-items:flex-start;gap:.5rem;font-size:.875rem}
.price-list svg{width:1rem;height:1rem;color:var(--success);flex-shrink:0;margin-top:.125rem}
.price-trust{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:1.5rem;margin-top:2rem;font-size:.75rem;color:var(--muted-fg);
}
.price-trust span{display:inline-flex;align-items:center;gap:.375rem}
.price-trust svg{width:.875rem;height:.875rem}

/* FAQ */
.faq-list{max-width:48rem;margin:0 auto;display:flex;flex-direction:column;gap:.75rem}
.faq-item{padding:1.25rem}
.faq-item summary{
  font-weight:700;cursor:pointer;display:flex;justify-content:space-between;
  align-items:center;gap:1rem;
}
.faq-item summary .plus{
  color:var(--primary);font-size:1.25rem;line-height:1;
  transition:transform .2s;flex-shrink:0;
}
.faq-item[open] summary .plus{transform:rotate(45deg)}
.faq-item p{font-size:.875rem;color:var(--muted-fg);margin-top:.75rem}

/* Final CTA */
.final-cta{padding:4rem 0}
.final-cta .box{
  padding:2.5rem;text-align:center;position:relative;overflow:hidden;
  background:var(--gradient-hero);border:none;
}
@media (min-width:768px){.final-cta .box{padding:4rem}}
.final-cta svg.shield{width:2.5rem;height:2.5rem;margin:0 auto 1rem;color:#fff}
.final-cta h2{font-size:1.875rem;font-weight:800;color:#fff;margin-bottom:1rem}
@media (min-width:768px){.final-cta h2{font-size:3rem}}
.final-cta .sub{color:rgba(255,255,255,.9);max-width:36rem;margin:0 auto 1rem}
.final-cta .stars-white{display:flex;align-items:center;justify-content:center;gap:.25rem;margin-bottom:1.5rem}
.final-cta .stars-white svg{width:1.25rem;height:1.25rem;fill:#fff;color:#fff}
.final-cta .stars-white span{color:#fff;font-weight:600;margin-left:.5rem;font-size:.875rem}
.final-cta .note{color:rgba(255,255,255,.7);font-size:.75rem;margin-top:.75rem}

/* Footer */
.site-footer{
  border-top:1px solid var(--border);background:var(--card);
  margin-top:4rem;
}
@media (min-width:640px){.site-footer{margin-top:5rem}}
.footer-grid{
  padding-top:2rem;padding-bottom:2rem;display:grid;gap:2rem;
}
@media (min-width:640px){.footer-grid{grid-template-columns:1fr 1fr;padding-top:3rem;padding-bottom:3rem}}
@media (min-width:768px){.footer-grid{grid-template-columns:2fr 1fr 1fr 1fr}}
.footer-brand{display:flex;align-items:center;gap:.5rem;margin-bottom:.75rem}
.footer-brand .brand-mark{width:2.25rem;height:2.25rem}
.footer-brand .brand-mark svg{width:1.25rem;height:1.25rem}
.footer-brand .name{font-weight:800}
.footer-desc{font-size:.875rem;color:var(--muted-fg);max-width:20rem}
.footer-social{display:flex;gap:.75rem;margin-top:1rem;color:var(--muted-fg)}
.footer-social a:hover{color:var(--primary)}
.footer-social svg{width:1rem;height:1rem}
.footer-col h3{font-weight:700;margin-bottom:.75rem;font-size:.875rem}
.footer-col ul{display:flex;flex-direction:column;gap:.5rem}
.footer-col a{font-size:.875rem;color:var(--muted-fg)}
.footer-col a:hover{color:var(--primary)}
.footer-bottom{
  border-top:1px solid var(--border);padding:1.25rem 1rem;
  text-align:center;font-size:.75rem;color:var(--muted-fg);
}
@media (min-width:640px){.footer-bottom{padding-left:1.25rem;padding-right:1.25rem}}
@media (min-width:768px){.footer-bottom{padding-left:1.5rem;padding-right:1.5rem}}
@media (min-width:1024px){.footer-bottom{padding-left:2rem;padding-right:2rem}}

/* Sales popup */
.sales-popup{
  position:fixed;bottom:1rem;left:1rem;z-index:50;max-width:20rem;
  transition:all .5s;transform:translateY(1rem);opacity:0;pointer-events:none;
}
.sales-popup.show{transform:translateY(0);opacity:1;pointer-events:auto}
.sales-popup .inner{
  padding:.75rem;padding-right:2rem;display:flex;align-items:flex-start;gap:.75rem;
  box-shadow:var(--shadow-elevated);position:relative;
}
.sales-popup .close{
  position:absolute;top:.375rem;right:.375rem;color:var(--muted-fg);
  line-height:1;padding:.25rem;
}
.sales-popup .close:hover{color:var(--foreground)}
.sales-popup .icon{
  width:2rem;height:2rem;border-radius:9999px;
  background:hsl(142 70% 28% / .1);display:grid;place-items:center;flex-shrink:0;margin-top:.125rem;
}
.sales-popup .icon svg{width:1rem;height:1rem;color:var(--success)}
.sales-popup .name{font-size:.875rem;font-weight:600;line-height:1.25}
.sales-popup .name span{color:var(--muted-fg);font-weight:400}
.sales-popup .action{font-size:.75rem;color:var(--muted-fg);margin-top:.125rem}
.sales-popup .time{font-size:10px;color:var(--muted-fg);margin-top:.25rem}

/* Page heroes (inner pages) */
.page-hero{padding:4rem 0;text-align:center}
@media (min-width:768px){.page-hero{padding:5rem 0}}
.page-hero h1{font-size:2.25rem;font-weight:800;margin-bottom:.75rem;max-width:48rem;margin-left:auto;margin-right:auto}
@media (min-width:768px){.page-hero h1{font-size:3rem}}
.page-hero p{color:var(--muted-fg);max-width:36rem;margin:0 auto}
.eyebrow{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.25rem .75rem;border-radius:9999px;
  background:var(--accent);color:var(--accent-fg);
  font-size:.75rem;font-weight:600;margin-bottom:1rem;
}
.eyebrow svg{width:.875rem;height:.875rem}

/* Forms */
.form-group{margin-bottom:1rem}
.form-group label{display:block;font-size:.875rem;font-weight:500;margin-bottom:.375rem}
.form-control{
  width:100%;height:2.5rem;padding:.5rem .75rem;
  border:1px solid var(--input);border-radius:var(--radius);
  background:var(--background);transition:var(--transition);
}
.form-control:focus{outline:2px solid var(--ring);outline-offset:2px;border-color:transparent}
textarea.form-control{height:auto;min-height:8rem;resize:vertical}
.form-hint{font-size:.75rem;color:var(--muted-fg);margin-top:.25rem}
.form-error{font-size:.75rem;color:var(--destructive);margin-top:.25rem;display:none}
.form-group.has-error .form-control{border-color:var(--destructive)}
.form-group.has-error .form-error{display:block}
.form-row{display:grid;gap:1rem}
@media (min-width:768px){.form-row{grid-template-columns:1fr 1fr}}

/* Auth tabs */
.tabs{display:grid;grid-template-columns:1fr 1fr;gap:.25rem;background:var(--muted);padding:.25rem;border-radius:var(--radius);margin-bottom:1rem}
.tab-btn{height:2.25rem;border-radius:calc(var(--radius) - 2px);font-size:.875rem;font-weight:500;color:var(--muted-fg)}
.tab-btn.active{background:var(--card);color:var(--foreground);box-shadow:var(--shadow-card)}
.tab-panel{display:none}
.tab-panel.active{display:block}

/* Policy prose */
.prose{max-width:48rem}
.prose h2{font-size:1.5rem;font-weight:800;margin:2rem 0 .75rem}
.prose p{color:var(--muted-fg);margin-bottom:1rem}
.prose ul{list-style:disc;padding-left:1.5rem;margin-bottom:1rem;display:flex;flex-direction:column;gap:.25rem}
.prose li{color:var(--muted-fg)}
.prose a{color:var(--primary)}
.prose strong{color:var(--foreground)}
.policy-meta{font-size:.875rem;color:var(--muted-fg);margin-bottom:2rem}

/* Blog */
.blog-grid{display:grid;gap:1.5rem;max-width:72rem;margin:0 auto}
@media (min-width:768px){.blog-grid{grid-template-columns:1fr 1fr}}
@media (min-width:1024px){.blog-grid{grid-template-columns:repeat(3,1fr)}}
.blog-card{padding:1.5rem;display:flex;flex-direction:column;transition:all .2s}
.blog-card:hover{box-shadow:var(--shadow-elevated);border-color:hsl(14 100% 40% / .4)}
.blog-card.featured{@media (min-width:768px){grid-column:span 2}}
@media (min-width:1024px){.blog-card.featured{grid-column:span 2}}
.blog-meta{display:flex;align-items:center;gap:.5rem;margin-bottom:.75rem}
.blog-emoji{font-size:1.875rem;line-height:1}
.blog-cat{
  font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  color:var(--primary);background:hsl(14 100% 40% / .1);
  padding:.125rem .5rem;border-radius:9999px;
}
.blog-card h2{font-weight:800;margin-bottom:.5rem;transition:color .2s}
.blog-card:hover h2{color:var(--primary)}
.blog-card.featured h2{font-size:1.25rem}
@media (min-width:768px){.blog-card.featured h2{font-size:1.5rem}}
.blog-card:not(.featured) h2{font-size:1.125rem}
.blog-excerpt{font-size:.875rem;color:var(--muted-fg);margin-bottom:1rem;flex:1;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.blog-foot{display:flex;align-items:center;justify-content:space-between;font-size:.75rem;color:var(--muted-fg)}
.blog-foot .left{display:flex;align-items:center;gap:.75rem}
.blog-foot .read{color:var(--primary);font-weight:600;display:inline-flex;align-items:center;gap:.25rem}

/* Contact layout */
.contact-grid{display:grid;gap:2rem;max-width:72rem;margin:0 auto}
@media (min-width:1024px){.contact-grid{grid-template-columns:2fr 1fr}}
.contact-side{display:flex;flex-direction:column;gap:1rem}
.contact-side .lc-card{padding:1.25rem}
.contact-side svg{width:1.25rem;height:1.25rem;color:var(--primary);margin-bottom:.5rem}
.contact-side .title{font-weight:700;font-size:.875rem}
.contact-side a{font-size:.875rem;color:var(--primary)}
.contact-side p{font-size:.875rem;color:var(--muted-fg)}

/* Save badge */
.save-badge{display:flex;align-items:center;gap:.375rem;margin-bottom:1rem}
.save-badge svg{width:.875rem;height:.875rem;color:var(--success)}
.save-badge span{font-size:.75rem;font-weight:600;color:var(--success)}

/* Free plan center */
.free-plan{max-width:24rem;margin:0 auto 2.5rem}
.free-plan .lc-card{padding:1.5rem;text-align:center}
.free-plan ul{text-align:left;margin-top:1.5rem}

/* Reveal animation */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .5s ease,transform .5s ease}
.reveal.in{opacity:1;transform:none}

/* Cookie banner */
.cookie-banner{
  position:fixed;bottom:0;left:0;right:0;z-index:60;
  background:var(--card);border-top:1px solid var(--border);
  padding:1rem;box-shadow:var(--shadow-elevated);
  transform:translateY(100%);transition:transform .3s;
}
.cookie-banner.show{transform:translateY(0)}
.cookie-banner .inner{
  max-width:var(--container);margin:0 auto;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem;
}
.cookie-banner p{font-size:.875rem;color:var(--muted-fg);flex:1;min-width:200px}
.cookie-banner p a{color:var(--primary);text-decoration:underline}
.cookie-actions{display:flex;gap:.5rem}