/* assets/pricing.css — the Pricing page (pricing.php). Building blocks are in assets/ui.css. */
.p-hero{padding:4rem 0 2.4rem}
.p-sec{scroll-margin-top:118px}
.p-link{color:var(--cyan)!important;text-decoration:underline!important;text-underline-offset:3px}
.p-always{display:flex;flex-wrap:wrap;gap:.5rem}
.p-always span{font-size:.76rem;color:var(--muted2);padding:.38rem .8rem;border-radius:99px;background:rgba(255,255,255,.03);border:1px solid var(--border)}
.p-small{color:var(--muted);font-size:.74rem;line-height:1.6;margin-top:.9rem}
.p-desc{color:var(--muted2);font-size:.84rem;line-height:1.65;margin-bottom:1rem}

/* ── Estimate calculator ── */
.p-calc{display:grid;grid-template-columns:1.25fr .75fr;gap:1.5rem;margin-top:2.2rem;align-items:start}
.p-inputs{display:flex;flex-direction:column;gap:1rem}
.p-group{border:1px solid var(--border);border-radius:16px;background:var(--card-solid);padding:1.3rem 1.4rem;margin:0;min-width:0}
.p-group legend{display:flex;align-items:center;gap:.7rem;font-family:"Syne",sans-serif;font-weight:700;font-size:1rem;padding:0;float:left;width:100%;margin-bottom:1rem}
.p-group legend .h-ci{width:34px;height:34px;font-size:.95rem;margin:0}
.p-group legend+*{clear:both}
.p-sub{font-size:.76rem;color:var(--muted2);margin:1rem 0 .5rem}
/* Segmented choices */
.p-seg{display:flex;flex-wrap:wrap;gap:.4rem}
.p-seg label{cursor:pointer}
.p-seg input{position:absolute;opacity:0;pointer-events:none}
.p-seg span{display:inline-block;padding:.5rem .85rem;border-radius:10px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.02);font-size:.8rem;color:var(--muted2);transition:all .2s}
.p-seg label:hover span{border-color:rgba(0,194,255,.35);color:#fff}
.p-seg input:checked+span{color:#fff;border-color:rgba(0,194,255,.6);background:linear-gradient(135deg,rgba(0,194,255,.18),rgba(123,47,190,.2));box-shadow:0 0 18px rgba(0,194,255,.15)}
.p-seg input:focus-visible+span{outline:2px solid var(--cyan);outline-offset:2px}
/* Rows with steppers */
.p-row{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.55rem 0;border-bottom:1px solid var(--border)}
.p-group .p-seg+.p-row{margin-top:.8rem}
.p-row label{font-size:.86rem}
.p-row label small{display:block;color:var(--muted);font-size:.72rem}
.p-step{display:flex;align-items:center;border:1px solid rgba(255,255,255,.12);border-radius:10px;overflow:hidden;flex-shrink:0}
.p-step button{width:36px;height:36px;background:rgba(255,255,255,.03);border:none;color:#fff;font-size:1.1rem;cursor:pointer;transition:background .15s}
.p-step button:hover{background:rgba(0,194,255,.15)}
.p-step input{width:52px;height:36px;border:none;background:transparent;color:#fff;text-align:center;font:600 .95rem "DM Sans",sans-serif;-moz-appearance:textfield}
.p-step input::-webkit-outer-spin-button,.p-step input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.p-range{width:100%;margin-top:.9rem;accent-color:var(--cyan);cursor:pointer}
.p-off{opacity:.35;pointer-events:none}
/* The total */
.p-sum{position:sticky;top:150px}
.p-sum-in{border-radius:18px;padding:1.5rem;background:linear-gradient(160deg,rgba(0,194,255,.12),rgba(123,47,190,.16)),#14223a;border:1px solid rgba(0,194,255,.28);box-shadow:0 24px 60px rgba(0,0,0,.35)}
.p-total{display:flex;align-items:baseline;gap:.5rem;flex-wrap:wrap}
.p-total span{font-family:"Syne",sans-serif;font-size:2.8rem;font-weight:800;line-height:1}
.p-total small{color:var(--muted2);font-size:.8rem}
.p-total span.bump{animation:pBump .45s ease}
@keyframes pBump{40%{color:var(--cyan);transform:scale(1.04)}}
.p-vat{color:var(--muted2);font-size:.8rem;margin:.4rem 0 1rem}
.p-lines{list-style:none;margin:0 0 1rem;padding:.8rem 0 0;border-top:1px solid rgba(255,255,255,.1);display:flex;flex-direction:column;gap:.45rem}
.p-lines li{display:flex;justify-content:space-between;gap:1rem;font-size:.8rem;color:var(--muted2)}
.p-lines li b{color:#fff;font-weight:600;white-space:nowrap}
.p-lines li.p-empty{color:var(--muted);font-style:italic}
.p-oneoff{font-size:.8rem;color:var(--amber);margin-bottom:.8rem}
.p-volume{font-size:.78rem;line-height:1.5;color:var(--green);background:rgba(74,222,128,.08);border:1px solid rgba(74,222,128,.2);border-radius:10px;padding:.6rem .75rem;margin-bottom:1rem}
.p-go{display:block;text-align:center}

/* ── Plan cards ── */
.p-plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin-top:2.4rem;align-items:stretch}
.p-plan{position:relative;display:flex;flex-direction:column;border-radius:16px;padding:1.6rem;border:1px solid var(--border);background:var(--card-solid);transition:border-color .25s}
.p-plan:hover{border-color:rgba(0,194,255,.3)}
.p-plan h3{font-family:"Syne",sans-serif;font-size:1.05rem;margin-bottom:.3rem}
.p-plan .h-amt{margin:.3rem 0 .8rem}
.p-plan .p-desc{min-height:4.2em}
.h-amt.p-custom{font-size:1.7rem}
.p-feat{border-color:rgba(0,194,255,.4);background:linear-gradient(160deg,rgba(0,194,255,.12),rgba(0,194,255,0) 55%),var(--card-solid)}
/* A tab hanging from the card's top edge, clear of the title */
.p-badge{position:absolute;top:0;right:1.2rem;font-size:.62rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:.25rem .6rem .3rem;border-radius:0 0 8px 8px;color:var(--navy);background:linear-gradient(135deg,var(--cyan),#a078ff)}
.p-feat h3{margin-top:.35rem}
.p-list{list-style:none;margin:0 0 1.4rem;padding:0;display:flex;flex-direction:column;gap:.5rem;flex:1}
.p-list li{font-size:.82rem;color:var(--muted2);padding-left:1.4rem;position:relative}
.p-list li::before{content:"✓";position:absolute;left:0;color:var(--green);font-weight:700}
.p-btn{display:block;text-align:center}
.p-every{margin-top:1.8rem;padding:1.1rem 1.3rem;border-radius:14px;background:rgba(0,229,160,.06);border:1px solid rgba(0,229,160,.22)}
.p-every b{display:block;font-family:"Syne",sans-serif;font-size:.9rem;margin-bottom:.6rem}
.p-every .p-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:.4rem 1.4rem;margin:0}
.p-vhead{display:flex;align-items:baseline;flex-wrap:wrap;gap:.6rem;font-family:"Syne",sans-serif;font-size:1.15rem;margin:2.6rem 0 -1.2rem}
.p-vhead span{font-size:1.2rem}
.p-vhead small{font-family:"DM Sans",sans-serif;font-size:.84rem;font-weight:400;color:var(--muted2)}
.p-note{margin-top:1.2rem;font-size:.84rem;color:var(--muted2);padding:1rem 1.2rem;border-radius:12px;background:rgba(0,194,255,.06);border:1px solid rgba(0,194,255,.18)}
.p-note b{color:#fff}

/* ── Phones ── */
.p-phones{display:grid;grid-template-columns:1.2fr .8fr;gap:1rem;margin-top:2.4rem}
.p-ext{border-radius:16px;padding:1.6rem;border:1px solid rgba(0,194,255,.28);background:linear-gradient(160deg,rgba(0,194,255,.1),rgba(123,47,190,.08)),var(--card-solid)}
.p-ext-top{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;margin-bottom:.8rem}
.p-ext h3,.p-nums h3,.p-rec h3{font-family:"Syne",sans-serif;font-size:1.05rem}
.p-ext small,.p-rec small{color:var(--muted);font-size:.76rem}
.p-big{font-family:"Syne",sans-serif;font-size:2.4rem;font-weight:800;line-height:1;text-align:right}
.p-big span{display:block;font-family:"DM Sans",sans-serif;font-size:.78rem;color:var(--muted);font-weight:500;margin-top:.2rem}
.p-ext .p-desc b{color:#fff}
.p-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.45rem 1rem}
.p-two span{font-size:.8rem;color:var(--muted2)}
.p-nums{border-radius:16px;padding:1.4rem;border:1px solid var(--border);background:var(--card-solid)}
.p-nums h3{margin-bottom:.9rem}
.p-num{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.75rem .9rem;border-radius:11px;background:rgba(255,255,255,.025);border:1px solid var(--border);margin-bottom:.5rem}
.p-num b{display:block;font-size:.86rem;font-weight:600}
.p-num small{color:var(--muted);font-size:.72rem}
.p-num>span{font-family:"Syne",sans-serif;font-size:1.3rem;font-weight:800;white-space:nowrap;text-align:right}
.p-num>span i{display:block;font-family:"DM Sans",sans-serif;font-style:normal;font-size:.68rem;color:var(--muted);font-weight:500}
.p-c1{color:var(--cyan)}.p-c2{color:var(--purple)}.p-c3{color:var(--green)}.p-c4{color:var(--muted2)}
.p-rec{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;margin-top:1rem;border-radius:16px;padding:1.3rem 1.5rem;border:1px solid var(--border);background:var(--card-solid)}
.p-tiers{display:flex;gap:.6rem;flex-wrap:wrap}
.p-tier{min-width:130px;text-align:center;padding:.75rem 1rem;border-radius:12px;border:1px solid var(--border);background:rgba(255,255,255,.025)}
.p-tier small{display:block;color:var(--muted);font-size:.72rem}
.p-tier b{font-family:"Syne",sans-serif;font-size:1.25rem}
.p-tier i{font-style:normal;color:var(--muted);font-size:.72rem;margin-left:.2rem}

/* ── Comparison table ── */
.p-table{margin-top:1.2rem;border-radius:16px;border:1px solid var(--border);background:var(--card-solid);overflow:hidden}
.p-thead{padding:1rem 1.3rem;border-bottom:1px solid var(--border);font-family:"Syne",sans-serif;font-size:.8rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted2)}
.p-scroll{overflow-x:auto}
.p-table table{width:100%;border-collapse:collapse;font-size:.84rem;min-width:520px}
.p-table th,.p-table td{padding:.75rem 1rem;text-align:center;border-bottom:1px solid rgba(255,255,255,.04)}
.p-table th{color:var(--muted);font-weight:600}
.p-table td:first-child,.p-table th:first-child{text-align:left;padding-left:1.3rem;color:var(--muted2)}
.p-table tbody tr:nth-child(even){background:rgba(255,255,255,.015)}
.p-table tbody tr:hover{background:rgba(0,194,255,.05)}
.p-table .p-hl{color:var(--cyan);font-weight:600;background:rgba(0,194,255,.04)}
.p-table tr:last-child td{border-bottom:none;font-weight:700;color:#fff}

/* ── Day rate ── */
.p-day{display:grid;grid-template-columns:1fr minmax(0,420px);gap:3rem;align-items:center}

/* The running total bar (phones and tablets only) */
.p-mini{display:none}
@media(max-width:980px){
  .p-calc{grid-template-columns:1fr}
  .p-sum{position:static}
  .p-sum{scroll-margin-top:130px}
  .p-mini{display:flex;align-items:baseline;gap:.5rem;position:fixed;left:.8rem;right:.8rem;bottom:.8rem;z-index:120;padding:.8rem 1.1rem;border-radius:14px;color:#fff;text-decoration:none;background:linear-gradient(135deg,rgba(0,194,255,.22),rgba(123,47,190,.3)),#14223a;border:1px solid rgba(0,194,255,.4);box-shadow:0 14px 40px rgba(0,0,0,.5);transform:translateY(140%);transition:transform .3s cubic-bezier(.2,.7,.2,1)}
  .p-mini.show{transform:none}
  .p-mini span{font-size:.74rem;color:var(--muted2)}
  .p-mini b{font-family:"Syne",sans-serif;font-size:1.3rem;font-weight:800}
  .p-mini small{font-size:.7rem;color:var(--muted2)}
  .p-mini em{margin-left:auto;font-style:normal;font-size:.76rem;color:var(--cyan);font-weight:600}
  .p-phones,.p-day{grid-template-columns:1fr}
  .h-amt.p-custom{font-size:1.2rem}
}
@media(max-width:700px){
  .p-plans{grid-template-columns:1fr}
  .p-plan .p-desc{min-height:0}
}
@media(max-width:560px){
  .p-hero{padding:2.5rem 0 1.8rem}
  .p-group{padding:1.1rem}
  .p-two{grid-template-columns:1fr}
  .p-rec{flex-direction:column;align-items:stretch}
  .p-tier{min-width:0;flex:1}
  .p-total span{font-size:2.3rem}
  .p-seg span{padding:.45rem .7rem;font-size:.76rem}
}
@media(prefers-reduced-motion:reduce){.p-total span.bump{animation:none}}