/* ========================================================================
 * pages/pricing.css
 *
 * Styles specific to the pricing page.
 * Shared tokens, nav, footer, buttons, and animation primitives come from
 * static/css/public-shared.css (loaded before this file).
 * ======================================================================== */


[x-cloak]{display:none!important;}


/* HERO */
.hero{padding:144px 24px 72px;text-align:center;position:relative;overflow:hidden;}

.hero-glow{position:absolute;top:-200px;left:50%;transform:translateX(-50%);width:900px;height:900px;border-radius:50%;background:radial-gradient(circle,rgba(13,148,136,.07) 0%,rgba(13,148,136,.02) 40%,transparent 70%);pointer-events:none;}

.hero::after{content:'';position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(to right,rgba(0,0,0,.014) 1px,transparent 1px),linear-gradient(to bottom,rgba(0,0,0,.014) 1px,transparent 1px);background-size:48px 48px;mask-image:radial-gradient(ellipse 90% 70% at 50% 0%,black 0%,transparent 100%);-webkit-mask-image:radial-gradient(ellipse 90% 70% at 50% 0%,black 0%,transparent 100%);}

[data-theme="dark"] .hero::after{background-image:linear-gradient(to right,rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(to bottom,rgba(255,255,255,.018) 1px,transparent 1px);}

.hero-inner{position:relative;}

.badge{display:inline-flex;align-items:center;gap:8px;padding:4px 14px;border-radius:var(--r-full);border:1px solid var(--bd);background:var(--surface);font-size:12px;font-weight:500;color:var(--t2);margin-bottom:28px;letter-spacing:.01em;}

.badge strong{color:var(--teal-text);}

.sep{color:var(--bd-h);}

.hero h1{font-size:clamp(2.5rem,5.5vw,4rem);font-weight:700;letter-spacing:-.042em;line-height:1.05;max-width:700px;margin:0 auto 22px;text-wrap:pretty;}

.grad{background:linear-gradient(135deg,#0f766e 0%,var(--teal) 42%,#2dd4bf 72%,#10b981 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}

.hero p{font-size:16px;color:var(--t2);max-width:520px;margin:0 auto 38px;line-height:1.65;letter-spacing:-.01em;}

.hero-btns{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;}

.hero-btns .btn{padding:12px 28px;font-size:15px;}


/* SEC */
.sec{padding:96px 24px;}

.sec-alt{background:var(--bg2);}

.sec-lbl{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.065em;color:var(--teal-text);margin-bottom:12px;}

.sec-hd{text-align:center;max-width:600px;margin:0 auto 60px;}

.sec-hd h2{font-size:clamp(1.75rem,3.5vw,2.25rem);font-weight:700;letter-spacing:-.027em;line-height:1.14;margin-bottom:13px;text-wrap:pretty;}

.sec-hd p{font-size:15px;color:var(--t2);line-height:1.65;}


/* PRICING GRID */
.pricing-sec{padding:56px 24px 80px;background:var(--bg);}

.pgrid{max-width:1160px;margin:0 auto;display:grid;grid-template-columns:repeat(5,1fr);gap:12px;align-items:stretch;}

.pc{background:var(--surface);border:1px solid var(--bd);border-radius:var(--r-lg);padding:22px 20px;display:flex;flex-direction:column;transition:border-color var(--base),box-shadow var(--base),transform var(--base);}

.pc:hover{border-color:var(--bd-h);box-shadow:var(--sh-lg);transform:translateY(-2px);}

.pc.pop{border-color:var(--teal-text);background:linear-gradient(155deg,var(--surface) 0%,color-mix(in srgb,var(--teal) 4%,var(--surface)) 100%);}

.pc.pop:hover{transform:translateY(-2px);}

.pc.ent{background:var(--bg2);}

.pop-badge{display:inline-block;font-size:10px;font-weight:700;padding:3px 9px;border-radius:var(--r-full);background:var(--teal-text);color:#fff;margin-bottom:10px;letter-spacing:.02em;}

.pc-tier{font-size:15px;font-weight:700;letter-spacing:-.015em;margin-bottom:2px;}

.pc-sub{font-size:12px;color:var(--t3);margin-bottom:12px;letter-spacing:-.005em;}

.pc-amt{font-size:30px;font-weight:700;letter-spacing:-.042em;margin-bottom:2px;}

.pc-amt .per{font-size:13px;font-weight:400;color:var(--t3);letter-spacing:0;}

.pc-amt-txt{font-size:22px;font-weight:700;letter-spacing:-.03em;margin-bottom:2px;color:var(--t1);}

.pc-credits{font-size:11.5px;color:var(--t3);margin-bottom:16px;padding-bottom:16px;border-bottom:1px solid var(--bd);}

.pc-feats{list-style:none;display:flex;flex-direction:column;gap:8px;flex:1;margin-bottom:18px;}

.pc-feats li{display:flex;align-items:flex-start;gap:7px;font-size:12.5px;color:var(--t2);line-height:1.5;}

.pc-feats li svg{width:13px;height:13px;color:var(--teal-text);flex-shrink:0;margin-top:2px;}

.pc-cta{display:flex;align-items:center;justify-content:center;text-align:center;min-height:38px;padding:9px 14px;border-radius:var(--r-sm);font-size:13px;font-weight:600;letter-spacing:-.006em;margin-top:auto;transition:background var(--fast),border-color var(--fast),transform var(--fast);}

.pc-cta.prim{background:var(--teal-text);color:#fff;border:1px solid var(--teal-text);}

.pc-cta.prim:hover{background:var(--color-primary-active);border-color:var(--color-primary-active);}

.pc-cta.sec{background:var(--surface);color:var(--t1);border:1px solid var(--bd);}

.pc-cta.sec:hover{background:var(--surface-h);border-color:var(--bd-h);}


/* CREDITS */
.credits-sec{padding:80px 24px;}

.credits-inner{max-width:900px;margin:0 auto;}

.credits-lead{font-size:16px;color:var(--t2);line-height:1.7;max-width:680px;margin:0 auto 48px;text-align:center;}

.cgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}

.cc{background:var(--surface);border:1px solid var(--bd);border-radius:var(--r-lg);padding:22px 20px;transition:border-color var(--base),box-shadow var(--base);}

.cc:hover{border-color:var(--bd-h);box-shadow:var(--sh-lg);}

.cc-rate{font-size:28px;font-weight:700;letter-spacing:-.04em;color:var(--teal-text);margin-bottom:6px;}

.cc-rate span{font-size:14px;font-weight:500;color:var(--t3);}

.cc h4{font-size:14px;font-weight:600;margin-bottom:6px;letter-spacing:-.01em;}

.cc p{font-size:12.5px;color:var(--t2);line-height:1.6;}

.cc-icon{width:36px;height:36px;border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;margin-bottom:12px;}

.cc-icon svg{width:17px;height:17px;}

.cc-icon.tl{background:rgba(13,148,136,.1);color:var(--teal-text);}

.cc-icon.re{background:rgba(239,68,68,.1);color:#ef4444;}

.cc-icon.bl{background:rgba(59,130,246,.1);color:#3b82f6;}

.cc-icon.am{background:rgba(245,158,11,.1);color:#f59e0b;}


/* COMPARE */
.cmp-sec{padding:80px 24px;background:var(--bg2);}

.cmp-inner{max-width:1100px;margin:0 auto;}

.cmp-scroll{overflow-x:auto;border-radius:var(--r-lg);border:1px solid var(--bd);}

table.cmp{width:100%;border-collapse:collapse;min-width:720px;background:var(--surface);}

table.cmp th,table.cmp td{padding:12px 16px;text-align:left;border-bottom:1px solid var(--bd);font-size:13px;}

table.cmp thead th{font-size:12px;font-weight:600;letter-spacing:-.01em;background:var(--bg2);color:var(--t2);border-bottom:2px solid var(--bd);}

table.cmp thead th:first-child{color:var(--t3);font-size:11px;text-transform:uppercase;letter-spacing:.06em;}

table.cmp thead th.hl{background:color-mix(in srgb,var(--teal) 6%,var(--bg2));color:var(--color-primary-800);}
html[data-theme="dark"] table.cmp thead th.hl{color:var(--teal-fg);}

table.cmp tbody tr:hover td{background:var(--surface-h);}

table.cmp tbody tr.sec-row th{background:var(--bg2);font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--t3);padding:8px 16px;border-bottom:1px solid var(--bd);}

table.cmp tbody td{color:var(--t2);}

table.cmp tbody td.hl{background:color-mix(in srgb,var(--teal) 3%,var(--surface));}

table.cmp tbody td.yes{color:var(--teal-text);font-weight:500;}
html[data-theme="dark"] table.cmp tbody td.yes{color:var(--teal-fg);}

table.cmp tbody td svg{width:14px;height:14px;color:var(--teal-text);vertical-align:middle;}
html[data-theme="dark"] table.cmp tbody td svg{color:var(--teal-fg);}

table.cmp tbody td .no{color:var(--t4);}

table.cmp tbody th{font-weight:500;color:var(--t1);}

table.cmp tbody tr:last-child td,table.cmp tbody tr:last-child th{border-bottom:none;}


/* FAQ */
.faq-sec{padding:80px 24px;}

.faq-inner{max-width:760px;margin:0 auto;}

.faq-list{display:flex;flex-direction:column;gap:7px;margin-top:48px;}

.faq-item{background:var(--surface);border:1px solid var(--bd);border-radius:var(--r-lg);overflow:hidden;transition:border-color var(--fast);}

.faq-item:hover{border-color:var(--bd-h);}

.faq-q{width:100%;padding:17px 20px;background:none;border:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;text-align:left;font-family:var(--font);font-size:14.5px;font-weight:500;color:var(--t1);letter-spacing:-.008em;}

.faq-q svg{width:15px;height:15px;color:var(--t3);transition:transform var(--base);flex-shrink:0;margin-left:16px;}

.faq-item.open .faq-q svg{transform:rotate(180deg);color:var(--teal-text);}

.faq-a{display:none;padding:0 20px 18px;font-size:14px;color:var(--t2);line-height:1.7;}

.faq-item.open .faq-a{display:block;}


/* CTA */
.cta{padding:112px 24px;text-align:center;position:relative;overflow:hidden;}

.cta::before{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:600px;height:600px;border-radius:50%;background:radial-gradient(circle,rgba(13,148,136,.05) 0%,transparent 70%);pointer-events:none;}

.cta-in{max-width:520px;margin:0 auto;position:relative;}

.cta h2{font-size:clamp(1.75rem,3.5vw,2.2rem);font-weight:700;letter-spacing:-.028em;line-height:1.14;margin-bottom:14px;}

.cta p{font-size:15px;color:var(--t2);line-height:1.65;margin-bottom:34px;}

.cta-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;}

.cta-btns .btn{padding:12px 28px;font-size:15px;}


/* RESP */
@media(max-width:1100px){.pgrid{grid-template-columns:repeat(3,1fr);}.cgrid{grid-template-columns:repeat(2,1fr);}}

@media(max-width:768px){
  .nav-link{display:none;}.nav-ham{display:inline-flex;}
  .hero{padding:122px 20px 56px;}.sec{padding:64px 16px;}
  .pricing-sec{padding:40px 16px 64px;}
  .pgrid{grid-template-columns:repeat(2,1fr);}.pc.pop{transform:none;}
  .cgrid{grid-template-columns:repeat(2,1fr);}
  .cmp-sec,.credits-sec,.faq-sec,.cta{padding-left:16px;padding-right:16px;}
  .footer-in{justify-content:center;text-align:center;flex-direction:column;}
}

@media(max-width:560px){.pgrid{grid-template-columns:1fr;}.cgrid{grid-template-columns:1fr;}}

@media(max-width:480px){.hero h1{font-size:2.2rem;}}