/* ============================================================
   public/css/pricing.css: the pricing page, on top of glass.css.
   Everything floats on clear glass over ring art, the feature lists and tables included. Solo stays
   the lead through the amber rings centred behind it, its size and its dark button, not a dark card.
   ============================================================ */
/* ---------- first screen: the hero and the plans share one stage, with Solo at the centre of the rings ---------- */
.pr-top{--r:1300px; --r2:920px; --y:clamp(520px,44vw,590px);
  background-image:var(--rings-amber),var(--rings-sky),var(--rings-sky),var(--rings-white),var(--rings-white),linear-gradient(180deg,#F0F6FC,#FAF3E4);
  background-size:var(--r) var(--r),var(--r2) var(--r2),var(--r2) var(--r2),var(--r2) var(--r2),var(--r2) var(--r2),100% 100%;
  background-position:50% calc(var(--y) - var(--r)/2),left calc(var(--r2)/-2) bottom calc(var(--r2)/-2),right calc(var(--r2)/-2) bottom calc(var(--r2)/-2),left calc(var(--r2)/-2) top calc(var(--r2)/-2),right calc(var(--r2)/-2) top calc(var(--r2)/-2),0 0}
.pr-facts{display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin-top:24px}
.pr-facts li{display:inline-flex; align-items:center; gap:7px; min-height:42px; padding:0 16px 0 12px; border-radius:999px; font-size:.9375rem; font-weight:500}

/* ---------- plans ---------- */
.pr-plans{margin-top:clamp(20px,3vw,36px)}
.pr-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.14fr) minmax(0,1fr); gap:clamp(10px,1.2vw,16px); padding-block:22px 0}
.pr-plan,.plan-main.pr-plan{display:flex; flex-direction:column; gap:8px; padding:0; color:var(--ink); background:none; box-shadow:none}
.pr-head,.pr-body{--t:.14; padding:clamp(20px,2.2vw,28px); border-radius:28px}
.pr-head{display:flex; flex-direction:column; --t:.18}
.pr-body{flex:1; padding-top:clamp(6px,1vw,12px); padding-bottom:clamp(22px,2.4vw,30px)}
.pr-body .plan-plus{margin-top:14px}
.pr-body > .plan-group:first-child{margin-top:14px}
.pr-plan .plan-gi{background:rgba(255,255,255,.46)}
.pr-plan .plan-list li::before{background-image:var(--tick)}
.plan-main.pr-plan h3,.plan-main.pr-plan .plan-gh,.plan-main.pr-plan .plan-plus{color:var(--ink)}
.plan-main.pr-plan .plan-for,.plan-main.pr-plan .plan-bill,.plan-main.pr-plan .price-n small{color:var(--ink-2)}
.plan-main.pr-plan .plan-gi{color:var(--ink)}
.plan-main.pr-plan .plan-list li{color:var(--ink)}
.plan-main.pr-plan .plan-cta{background:var(--ink); color:#fff; box-shadow:inset 0 1px 0 rgba(255,255,255,.16), 0 1px 2px rgba(13,27,42,.28), 0 12px 26px -12px rgba(13,27,42,.6)}
.plan-main.pr-plan .plan-cta::before{background:linear-gradient(112deg,transparent 38%,rgba(255,255,255,.2) 50%,transparent 62%)}
.plan-main.pr-plan .plan-tag{background:var(--ink); color:#fff}
.plan-main .pr-head{--t:.22; --lift:0 0 0 1.5px rgba(13,27,42,.82), 0 20px 40px -20px rgba(13,27,42,.42); padding:clamp(24px,2.8vw,36px)}
.plan-main .pr-body{padding-inline:clamp(24px,2.8vw,36px)}
.pr-notes{display:grid; gap:4px; margin-top:clamp(24px,3vw,36px)}
.pr-notes .price-note{margin-top:0}
@media (max-width:919px){
  /* Solo comes first and the stage runs very long, so the rings repeat down it */
  .pr-top{--r:800px; background-image:var(--rings-amber),var(--rings-sky),linear-gradient(180deg,#F0F6FC,#FAF3E4); background-repeat:repeat-y,repeat-y,no-repeat; background-size:var(--r) 1400px,var(--r) 1400px,100% 100%; background-position:right calc(var(--r)/-2) top 0,left calc(var(--r)/-2) top 700px,0 0}
  .pr-grid{grid-template-columns:1fr; max-width:560px; gap:14px}
}

/* ---------- compare with others ---------- */
.cps{display:grid}
.cp-t{--t:.16; grid-area:1/1; min-width:0; border-radius:28px}
.js .cp-t{opacity:0; visibility:hidden; transition:opacity .2s ease, visibility 0s linear .2s}
.js .cp-t.is-on{opacity:1; visibility:visible; transition:opacity .28s ease}
html:not(.js) .cp-t{grid-area:auto; margin-bottom:14px}
.vs-table{width:100%; border-collapse:collapse; font-size:.9375rem; line-height:1.35}
.vs-table th,.vs-table td{padding:15px 14px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top}
.vs-table thead th{padding-block:14px; font-size:.875rem; font-weight:600; color:var(--ink-2); vertical-align:bottom}
.vs-table tbody tr:last-child > *{border-bottom:0}
.vs-table tbody th{font:600 1rem/1.3 var(--display); min-width:150px}
.vs-table tbody th a{text-underline-offset:3px; text-decoration-color:rgba(13,27,42,.45)}
.vs-table .num{font:650 1.125rem/1.25 var(--display); letter-spacing:-.012em; font-variant-numeric:tabular-nums; white-space:nowrap}
.vs-table small{display:block; font-size:.8125rem; font-weight:400; letter-spacing:0; color:var(--ink-2); white-space:normal}
.vs-table .me > *{background:rgba(245,166,35,.24)}
.vs-table .me th{box-shadow:inset 3px 0 0 var(--ink)}
.vs-table .no{color:var(--ink-2)}
@media (max-width:767px){
  /* each row becomes its own block, with the column name beside each value */
  .vs-table thead{position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%)}
  .vs-table,.vs-table tbody,.vs-table tr,.vs-table th,.vs-table td{display:block; width:100%}
  .vs-table tr{padding:14px 16px; border-bottom:1px solid var(--line)}
  .vs-table tbody tr:last-child{border-bottom:0}
  .vs-table tbody th,.vs-table td{padding:0; border:0}
  .vs-table tbody th{margin-bottom:8px; font-size:1.0625rem}
  .vs-table td{display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:10px; padding-block:5px}
  .vs-table td small{grid-column:2; margin-top:-8px}
  .vs-table td::before{content:attr(data-l); font-size:.875rem; font-weight:500; color:var(--ink-2)}
  .vs-table .me{background:rgba(245,166,35,.24); box-shadow:inset 3px 0 0 var(--ink)}
  .vs-table .me > *{background:none}
  .vs-table .me th{box-shadow:none}
  .vs-table .num{white-space:normal}
}

.stack{margin-top:clamp(14px,2vw,22px)}
.stack-in{--t:.14; display:grid; gap:18px; padding:clamp(20px,3vw,36px); border-radius:28px}
.stack-in h3{font-size:clamp(1.5rem,1.25rem + 1vw,2rem)}
.bars{display:grid; gap:16px}
.bar-t{display:flex; align-items:baseline; justify-content:space-between; gap:12px}
.bar-t b{font:600 1.0625rem/1.25 var(--display)}
.bar-t span{flex:none; font:650 1.375rem/1.1 var(--display); letter-spacing:-.018em; font-variant-numeric:tabular-nums}
.bar-track{height:12px; margin-top:7px; border-radius:7px; background:rgba(13,27,42,.12); overflow:hidden}
.bar-track i{display:block; height:100%; border-radius:7px; background:var(--ink); transform-origin:0 50%; transform:scaleX(var(--w))}
.bar-me .bar-track i{background:var(--amber); box-shadow:inset 0 0 0 1.5px var(--ink); border-radius:7px}
.js .bars:not(.play) .bar-track i{transform:scaleX(0)}
@media (prefers-reduced-motion:no-preference){ .play .bar-track i{transition:transform var(--t-slow) var(--spring-slow)} .play .bar:nth-child(2) i{transition-delay:90ms} .play .bar:nth-child(3) i{transition-delay:180ms} }
.bar-s{margin-top:5px; font-size:.9375rem; color:var(--ink)}
.src{margin-top:16px; font-size:.875rem; line-height:1.5; color:var(--ink-2); text-wrap:pretty}
.src a{text-underline-offset:2px}

/* ---------- top-ups ---------- */
.tops{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(12px,1.6vw,20px); max-width:1000px; margin-inline:auto}
.top{--t:.14; display:grid; align-content:start; gap:6px; padding:clamp(22px,2.8vw,34px); border-radius:28px}
.top-k{display:flex; align-items:center; gap:10px; font:600 1.0625rem/1.25 var(--display)}
.top-k .plan-gi{background:rgba(255,255,255,.46)}
.top-n{margin-top:8px; font:650 clamp(2.5rem,2rem + 1.8vw,3.5rem)/1.04 var(--display); letter-spacing:-.032em; font-variant-numeric:tabular-nums}
.top-n small{margin-left:6px; font-size:1.125rem; font-weight:500; letter-spacing:0; color:var(--ink-2)}
.top p:last-child{color:var(--ink); font-weight:450}
@media (max-width:767px){ .tops{grid-template-columns:1fr} }

/* ---------- website packages ---------- */
.webs{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(12px,1.6vw,20px); align-items:stretch}
.web{--t:.14; display:flex; flex-direction:column; gap:6px; padding:clamp(24px,3vw,36px); border-radius:28px}
.web-best{--t:.18; --lift:0 0 0 1.5px rgba(13,27,42,.82), 0 20px 40px -20px rgba(13,27,42,.42)}
.web-tag{font-size:.9375rem; font-weight:500; color:var(--ink-2)}
.web h3{font-size:1.5rem}
.web-sub{color:var(--ink); font-weight:450}
.web .price-n{margin-top:12px; font-family:var(--display)}
.web-once{font-size:.9375rem; color:var(--ink-2)}
.web .btn{margin-top:14px; width:100%}
.web .tick-list{margin-top:16px}
.web .tick-list b{font-weight:600}
.web-badge{position:absolute; right:22px; top:24px; display:inline-flex; align-items:center; min-height:28px; padding:0 11px; border-radius:999px; background:var(--ink); color:#fff; font-size:.8125rem; font-weight:600}
.web-extra{display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin-top:18px; font-size:.9375rem; font-weight:500}
.web-extra li{display:inline-flex; align-items:center; gap:7px; min-height:42px; padding:0 16px 0 12px; border-radius:999px}
@media (max-width:767px){ .webs{grid-template-columns:1fr} .web-extra li{min-height:44px; padding-block:8px; border-radius:22px} }

/* ---------- every feature: one sheet of glass for each group, side by side ---------- */
.cmp-cols{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(12px,1.6vw,20px); align-items:start}
.cmp-col{display:grid; gap:clamp(12px,1.6vw,20px); min-width:0}
.cmp-card{--t:.14; padding:clamp(2px,.6vw,8px) clamp(12px,1.8vw,24px) clamp(8px,1.2vw,14px); border-radius:28px}
.cmp-card .cmp-table td:nth-child(3){background:rgba(245,166,35,.16)}
.cmp-card .cmp-g td{color:var(--ink)}
.cmp-card .plan-gi{background:rgba(255,255,255,.46)}
.cmp-card .cmp-y{color:#14592F}
.cmp-card .cmp-n{color:rgba(13,27,42,.74)}
@media (max-width:1099px){ .cmp-cols{grid-template-columns:1fr} }

/* ---------- no lock-in ---------- */
.easy{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(12px,1.6vw,20px); margin-top:clamp(12px,1.6vw,20px)}
.easy > div{--t:.16; display:grid; gap:4px; padding:clamp(20px,2.6vw,30px); border-radius:24px}
.easy b{font:600 1.1875rem/1.3 var(--display); letter-spacing:-.01em}
.easy span{color:var(--ink); font-weight:450}
@media (max-width:767px){ .easy{grid-template-columns:1fr} }

/* ---------- FAQ ---------- */
.faq-wrap.gl-stage{align-items:start}
.faq-wrap h2{position:sticky; top:104px}
.faq-glass .faq-item:has(.faq-q[aria-expanded="true"]){--t:.24}
@media (max-width:919px){ .faq-wrap h2{position:static} }