/* /pricing v3 (2026-10-03, user: "take these learnings and taste we developed designing the compare page to pricing page"). Shared parts
   come from calm.css and type-calm.css (loaded before this); this file holds what is only pricing's: its own dark, the glass nav, the
   product switcher, the plan cards and the quote asset's calmer panel.
   Plan cards take ElevenLabs' pricing-card anatomy (a plan surface, a black pill, one line, a dotted list). The featured plan (Enterprise)
   is on our Hawcx painting: a smooth field with the crisp 1:1 grain tile over it (calm.css .cl-paint). Team is on stone. */

/* this page's dark = hsl(0 0% 7%) (#121212): the user found 4% too dark; overrides --dk for nav, hero, the quote band and the close */
body.pg-prc{--dk:hsl(0 0% 7%)}

/* glass: the nav and its menus only. At the top the nav is solid (seamless with the hero); it turns to glass once scrolled */
.pg-prc .nav,.pg-prc .nav.scrolled{background:transparent;border-bottom-color:transparent}
.pg-prc .nav::before{content:"";position:absolute;inset:0 0 -1px 0;z-index:-1;pointer-events:none;background:var(--dk);
  transition:background-color var(--t2) var(--ease),box-shadow var(--t2) var(--ease)}
.pg-prc .nav.scrolled::before{background:hsla(0,0%,7%,.72);box-shadow:inset 0 -1px 0 rgba(255,255,255,.08);
  -webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px)}
.pg-prc .menu{background:hsla(0,0%,7%,.8);-webkit-backdrop-filter:saturate(180%) blur(24px);backdrop-filter:saturate(180%) blur(24px)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ .pg-prc .nav.scrolled::before,.pg-prc .menu{background:var(--dk)} }

/* the hero stands alone in the dark; "how pricing works" sits in the white middle, after the plans */
body.elv .prc-hero{padding-bottom:112px}
body.elv .prc-plans{padding-bottom:40px}

/* the product switcher */
body.elv .prc-bar{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:56px}
body.elv .prc-ask{font-size:14px;line-height:20px;color:var(--ink-60)}
body.elv .prc-tabs{position:relative;display:inline-flex;padding:4px;border-radius:999px;background:var(--stone)}
body.elv .prc-thumb{position:absolute;top:4px;left:4px;height:calc(100% - 8px);width:0;border-radius:999px;background:#fff;
  box-shadow:0 0 0 .5px rgba(0,0,0,.1),0 1px 2px rgba(0,0,0,.06);transition:transform var(--t4) var(--ease-io),width var(--t4) var(--ease-io)}
body.elv .prc-tab{position:relative;z-index:1;display:inline-flex;align-items:center;height:38px;padding:0 18px;border:0;background:none;border-radius:999px;
  font-size:15px;line-height:22px;color:var(--ink-60);cursor:pointer;transition:color var(--t2) var(--ease)}
body.elv .prc-tab[aria-selected="true"]{color:var(--ink)}
body.elv .prc-tab:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.no-js .prc-thumb,.prc-tabs:not(.is-ready) .prc-thumb{opacity:0}

/* the plans row: the heading takes the first cell, the two plans the rest */
body.elv .prc-set{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:start}
body.elv .prc-intro{grid-column:1 / span 4;padding-top:4px}
body.elv .prc-set .prc-row{grid-column:5 / span 8}
body.elv .prc-h2{font-size:32px;line-height:38px}
body.elv .prc-h2 .dim{margin-top:4px;font-size:32px;line-height:38px}
.js .prc-panel:not(.is-on){display:none}
.prc-panel:focus{outline:none}
.prc-panel+.prc-panel{margin-top:96px}
.js .prc-panel+.prc-panel{margin-top:0}

/* plan cards: ElevenLabs' anatomy */
body.elv .prc-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
body.elv .prc-plan{display:flex;flex-direction:column;min-width:0}
body.elv .prc-top{display:flex;flex-direction:column;justify-content:space-between;min-height:200px;padding:22px 24px 24px;border-radius:16px;color:var(--ink)}
body.elv .prc-top:not(.cl-paint){background:var(--stone)}
body.elv .prc-top.cl-paint{color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
body.elv .prc-name{font-size:20px;line-height:26px;font-weight:400;letter-spacing:-.01em}
body.elv .prc-price{font-size:30px;line-height:36px;font-weight:300;letter-spacing:-.025em}
body.elv .prc-cta{display:flex;width:100%;margin-top:10px}
body.elv .prc-line{margin-top:20px;min-height:44px;font-size:15px;line-height:22px;color:var(--ink-60)}
body.elv .prc-inc{margin-top:22px;font-size:13px;line-height:18px;color:var(--ink-60)}
body.elv .prc-list{margin:8px 0 0;padding:0;list-style:none}
body.elv .prc-list li{display:flex;align-items:flex-start;gap:10px;padding:11px 0;border-bottom:1px dotted #d8d3cc;font-size:15px;line-height:22px;color:var(--ink)}
body.elv .prc-list svg{flex:none;width:15px;height:15px;margin-top:4px;fill:none;stroke:var(--ink-60);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
body.elv .prc-plan.is-feat .prc-list svg{stroke:#2f6cf6}

/* tab switch: plans rise in once, staggered */
.js .prc-panel.is-in .prc-plan{animation:prcIn var(--t4) var(--ease) both}
.js .prc-panel.is-in .prc-plan:nth-child(2){animation-delay:80ms}
@keyframes prcIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

@media (max-width:1100px){
  body.elv .prc-intro{grid-column:1 / -1;padding:0 0 32px}
  body.elv .prc-set .prc-row{grid-column:1 / -1}
}
@media (max-width:760px){
  body.elv .prc-hero{padding-bottom:72px}
  body.elv .prc-bar{margin-bottom:36px}
  body.elv .prc-row{grid-template-columns:minmax(0,1fr);gap:40px}
  body.elv .prc-h2,body.elv .prc-h2 .dim{font-size:26px;line-height:32px}
  body.elv .prc-top{min-height:160px}
}
@media (prefers-reduced-motion:reduce){ .js .prc-panel.is-in .prc-plan{animation:none} }