/* ========================================================================
 * 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;}

/* Hero badge — milled hiroi surface pill. */
.badge{display:inline-flex;align-items:center;gap:8px;padding:4px 14px;border-radius:var(--r-full);border:1px solid var(--border);background:var(--surface);box-shadow:var(--hi),var(--sh-1);font-size:12px;font-weight:500;color:var(--ink-2);margin-bottom:28px;letter-spacing:.01em;}

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

.sep{color:var(--border-strong);}

.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(--ink-2);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;}

/* ------------------------------------------------------------------ */
/* HIROI-UI PRIMARY/SECONDARY CTA LOOK (hero + closing CTA)            */
/* public-shared.css's UNLAYERED .btn-p/.btn-s outrank hiroi-ui's      */
/* @layer'd component rules, so we restate the shipped .hi-btn         */
/* appearance here in hiroi tokens — voltage-fill primary (top-lit     */
/* teal + milled lip) and milled-neutral secondary — exactly as        */
/* hub.css does for its hero/closing CTAs.                             */
/* ------------------------------------------------------------------ */
.hero-btns .btn-p:not(.hi-btn),
.cta-btns .btn-p:not(.hi-btn){
  background:var(--teal-fill);
  background:linear-gradient(180deg,
    color-mix(in srgb,var(--teal-fill) 88%,#fff),var(--teal-fill));
  color:var(--teal-on);
  box-shadow:var(--hi-fill,var(--hi)),var(--sh-1);
}
.hero-btns .btn-p:not(.hi-btn):hover,
.cta-btns .btn-p:not(.hi-btn):hover{
  background:var(--color-primary-active);
  transform:translateY(-1px);
  box-shadow:var(--hi-fill,var(--hi)),var(--sh-2),
    0 10px 28px color-mix(in srgb,var(--accent) 22%,transparent);
}
.hero-btns .btn-p:not(.hi-btn):active,
.cta-btns .btn-p:not(.hi-btn):active{transform:translateY(1px);box-shadow:var(--sh-1);}

.hero-btns .btn-s:not(.hi-btn),
.cta-btns .btn-s:not(.hi-btn){
  background:var(--surface);color:var(--ink);border:1px solid var(--border);
  box-shadow:var(--hi),var(--sh-1);
}
.hero-btns .btn-s:not(.hi-btn):hover,
.cta-btns .btn-s:not(.hi-btn):hover{
  background:var(--color-surface-hover);border-color:var(--border-strong);
  color:var(--ink);transform:translateY(-1px);box-shadow:var(--hi),var(--sh-2);
}
.hero-btns .btn-s:not(.hi-btn):active,
.cta-btns .btn-s:not(.hi-btn):active{transform:translateY(1px);box-shadow:var(--sh-1);}


/* 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(--voltage-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(--ink-2);line-height:1.65;}


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

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

/* Plan cards — hiroi-ui .hi-card recipe: borderless raised surface, milled
   top-lip (--hi) + tight key shadow (--sh-1), 12px radius; hover lifts to the
   next elevation step. Matches the hub's .fc treatment. */
.pc{padding:22px 20px;border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--hi),var(--sh-1);display:flex;flex-direction:column;transition:transform var(--base),box-shadow var(--base);}

.pc:hover{transform:translateY(-2px);box-shadow:var(--hi),var(--sh-3);}

/* "Most popular" plan — teal voltage ring drawn with an inset hairline so the
   borderless card recipe is preserved; warm-teal tinted surface. */
.pc.pop{background:linear-gradient(155deg,var(--surface) 0%,color-mix(in srgb,var(--teal) 4%,var(--surface)) 100%);box-shadow:inset 0 0 0 1px var(--accent),var(--hi),var(--sh-2);}

.pc.pop:hover{transform:translateY(-2px);box-shadow:inset 0 0 0 1px var(--accent),var(--hi),var(--sh-3);}

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

/* "Most popular" badge — hiroi-badge feel: teal-soft fill, teal-text, pill. */
.pop-badge{display:inline-block;font-size:10px;font-weight:700;padding:3px 10px;border-radius:var(--r-full);background:var(--teal-soft);color:var(--voltage-text);margin-bottom:10px;letter-spacing:.04em;text-transform:uppercase;font-family:var(--f-mono);}

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

.pc-sub{font-size:12px;color:var(--ink-3);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(--ink-3);letter-spacing:0;}

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

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

.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(--ink-2);line-height:1.5;}

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

/* Plan CTAs — hiroi-ui .hi-btn look (voltage-fill primary + milled-neutral
   secondary). The shipped @layer'd hiroi-ui component rules are outranked by
   public-shared's unlayered .btn, so the appearance is restated here in hiroi
   tokens, the same way the hub does for its hero/closing CTAs. */
.pc-cta:not(.hi-btn){display:flex;align-items:center;justify-content:center;text-align:center;min-height:38px;padding:9px 14px;border-radius:var(--r-md);font-size:13px;font-weight:600;letter-spacing:-.006em;margin-top:auto;transition:transform var(--fast),box-shadow var(--fast),background var(--fast),border-color var(--fast);}

/* Pin the CTA to the card's bottom edge at its natural height. The rule above
   is scoped :not(.hi-btn), so it never reaches the shipped .hi-btn CTAs — on a
   shorter card (e.g. Free) the button would otherwise absorb the flex slack and
   stretch tall. Applies regardless of variant. */
.pgrid .pc>.pc-cta{margin-top:auto;flex:0 0 auto;}

.pc-cta.prim:not(.hi-btn){background:var(--teal-fill);background:linear-gradient(180deg,color-mix(in srgb,var(--teal-fill) 88%,#fff),var(--teal-fill));color:var(--teal-on);box-shadow:var(--hi-fill,var(--hi)),var(--sh-1);}

.pc-cta.prim:not(.hi-btn):hover{background:var(--color-primary-active);transform:translateY(-1px);box-shadow:var(--hi-fill,var(--hi)),var(--sh-2),0 10px 28px color-mix(in srgb,var(--accent) 22%,transparent);}

.pc-cta.prim:not(.hi-btn):active{transform:translateY(1px);box-shadow:var(--sh-1);}

.pc-cta.sec:not(.hi-btn){background:var(--surface);color:var(--ink);border:1px solid var(--border);box-shadow:var(--hi),var(--sh-1);}

.pc-cta.sec:not(.hi-btn):hover{background:var(--color-surface-hover);border-color:var(--border-strong);transform:translateY(-1px);box-shadow:var(--hi),var(--sh-2);}

.pc-cta.sec:not(.hi-btn):active{transform:translateY(1px);box-shadow:var(--sh-1);}


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

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

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

/* auto-fit, not repeat(4): the phone/email cards are gated out of this
   deployment, so a fixed 4-track grid left the two surviving cards squeezed
   into the left half with two empty columns beside them. auto-fit collapses the
   empty tracks, so the row stays balanced at 2, 3 or 4 cards. */
.cgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;}

/* Credit cards — hiroi-card recipe (borderless raised, --hi + --sh-1). */
.cc{padding:22px 20px;border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--hi),var(--sh-1);transition:transform var(--base),box-shadow var(--base);}

.cc:hover{transform:translateY(-2px);box-shadow:var(--hi),var(--sh-3);}

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

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

/* h3, not h4: these sit directly under the section's h2 with nothing between,
   so h4 was a skipped heading level. Declarations are unchanged — the level
   moved, the type did not. */
.cc h3{font-size:14px;font-weight:600;margin-bottom:6px;letter-spacing:-.01em;}

.cc p{font-size:12.5px;color:var(--ink-2);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:var(--teal-soft);color:var(--voltage-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;}

/* Compare table shell — elevated hiroi surface instead of a hard border. */
.cmp-scroll{overflow-x:auto;border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--hi),var(--sh-1);}

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(--border);font-size:13px;}

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

table.cmp thead th:first-child{color:var(--ink-3);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(--voltage-text);}

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

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

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

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

table.cmp tbody td.yes{color:var(--voltage-text);font-weight:500;}

table.cmp tbody td svg{width:14px;height:14px;color:var(--accent);vertical-align:middle;}

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

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

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 accordion rows — hiroi-card surface (milled lip + soft key shadow). */
.faq-item{background:var(--surface);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--hi),var(--sh-1);transition:box-shadow var(--fast);}

.faq-item:hover{box-shadow:var(--hi),var(--sh-2);}

.faq-item.open{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 55%,transparent),var(--hi),var(--sh-2);}

.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(--f-ui);font-size:14.5px;font-weight:500;color:var(--ink);letter-spacing:-.008em;}

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

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

.faq-a{display:none;padding:0 20px 18px;font-size:14px;color:var(--ink-2);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(--ink-2);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;}}