/* pricing.css: plan cards, estimator + FAQ. */

.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}
.plans.duo{grid-template-columns:repeat(2,1fr)}
.plan{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
      padding:clamp(1.5rem,1.1rem + 1.4vw,2.2rem);display:flex;flex-direction:column;
      box-shadow:var(--sh-sm);transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.plan:hover{transform:translateY(-3px);box-shadow:var(--sh-md)}
.plan.feature{background:var(--primary-deep);color:#DCE9E8;border-color:transparent;box-shadow:var(--sh-lg)}
.plan .pk{display:flex;justify-content:space-between;align-items:center;gap:.8rem;
          font-size:var(--t-xs);font-weight:600;color:var(--faint)}
.plan.feature .pk{color:#8FB6B4}
.plan.feature .pk .tagm{color:var(--ink);background:var(--accent);border-radius:var(--r-pill);padding:.28em .8em}
.plan h3{font-size:clamp(1.35rem,1.15rem + .8vw,1.75rem);margin-top:.8rem}
.plan.feature h3{color:#fff}
.plan .price{font-weight:700;font-size:clamp(2.2rem,1.6rem + 2.4vw,3.2rem);line-height:1;
             margin-top:1rem;letter-spacing:-.04em}
.plan .price small{font-weight:500;font-size:var(--t-sm);letter-spacing:0;color:var(--faint);
                   display:block;margin-top:.6rem}
.plan.feature .price small{color:#8FB6B4}
.plan ul{list-style:none;padding:0;margin:1.3rem 0 1.6rem;display:flex;flex-direction:column;gap:.7rem}
.plan li{font-size:var(--t-sm);display:flex;gap:.65rem;align-items:flex-start;color:var(--ink-soft);line-height:1.45}
.plan.feature li{color:#A8C4C2}
.plan li::before{content:"";flex:none;width:1.05em;height:1.05em;margin-top:.2em;border-radius:50%;
                 background:var(--primary-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.4 2.4 4.6-5' fill='none' stroke='%230C6E72' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/72% no-repeat}
.plan.feature li::before{background-color:rgba(20,168,160,.25)}
.plan li.off{color:var(--faint);text-decoration:line-through;text-decoration-color:var(--line)}
.plan li.off::before{background-image:none;opacity:.5}
.plan .btn{margin-top:auto}
.plan.feature .btn-fill{background:var(--accent);color:var(--ink)}
.plan.feature .btn-fill:hover{background:#fff}
@media(max-width:880px){.plans,.plans.duo{grid-template-columns:1fr}}

/* ---- yearly estimator ---- */
.est{display:grid;grid-template-columns:1.35fr 1fr;gap:var(--gap);align-items:stretch}
.est-controls{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
              padding:clamp(1.4rem,1.1rem + 1.2vw,2rem);display:flex;flex-direction:column;
              gap:1.3rem;box-shadow:var(--sh-sm)}
.est-field{display:flex;flex-direction:column;gap:.55rem;border:0;padding:0;margin:0}
.est-lab{font-size:var(--t-xs);font-weight:600;letter-spacing:.03em;text-transform:uppercase;color:var(--faint)}
.est-field input[type=number]{font-family:inherit;font-size:1.3rem;font-weight:600;color:var(--ink);
                              background:var(--surface-alt);border:1.5px solid transparent;
                              border-radius:var(--r-xs);padding:.65rem .8rem;width:100%;
                              -moz-appearance:textfield;transition:border-color .2s ease,background .2s ease}
.est-field input[type=number]:focus{outline:none;border-color:var(--primary-2);background:var(--surface)}
.est-field input::-webkit-outer-spin-button,.est-field input::-webkit-inner-spin-button{opacity:.4}

.seg{display:grid;grid-template-columns:repeat(3,1fr);gap:.3rem;background:var(--surface-alt);
     border-radius:var(--r-pill);padding:.3rem}
.seg label{position:relative;cursor:pointer}
.seg input{position:absolute;opacity:0;pointer-events:none}
.seg span{display:block;text-align:center;padding:.6rem .4rem;font-size:var(--t-sm);font-weight:500;
          color:var(--ink-soft);border-radius:var(--r-pill);
          transition:background .25s var(--ease),color .25s var(--ease),box-shadow .25s var(--ease)}
.seg label:hover span{color:var(--ink)}
.seg input:checked+span{background:var(--surface);color:var(--primary);font-weight:600;box-shadow:var(--sh-sm)}
.seg input:focus-visible+span{outline:2.5px solid var(--primary-2);outline-offset:1px}
.est-hint{font-size:var(--t-sm);color:var(--faint);margin:.2rem 0 0;min-height:2.6em;line-height:1.4}
/* "Full insight" needs more room than a third of a phone screen */
@media(max-width:430px){.seg{grid-template-columns:1fr;border-radius:var(--r-sm)}
                        .seg span{border-radius:var(--r-sm);text-align:left;padding-left:.9rem}}

.est-out{background:var(--primary-deep);color:#DCE9E8;border-radius:var(--r-lg);
         padding:clamp(1.4rem,1.1rem + 1.2vw,2rem);display:flex;flex-direction:column;box-shadow:var(--sh-lg)}
.est-out-lab{font-size:var(--t-xs);font-weight:600;letter-spacing:.03em;text-transform:uppercase;color:#8FB6B4}
.est-total{font-weight:700;font-size:clamp(2.4rem,1.8rem + 2.6vw,3.4rem);line-height:1;
           letter-spacing:-.04em;margin-top:.5rem;color:#fff}
.est-split{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;margin-top:1.4rem}
.est-split>div{background:rgba(255,255,255,.06);border-radius:var(--r-sm);padding:.85rem 1rem}
.est-split span{display:block;font-weight:600;font-size:1.25rem;letter-spacing:-.02em;color:#fff}
.est-split small{font-size:var(--t-xs);color:#8FB6B4;display:block;margin-top:.35rem}
.est-foot{font-size:var(--t-xs);color:#8FB6B4;line-height:1.5;margin:1.2rem 0 0;max-width:46ch}
.est-cta{margin-top:auto;background:var(--accent);color:var(--ink)}
.est-cta:hover{background:#fff}
@media(max-width:880px){.est{grid-template-columns:1fr}}

/* ---- FAQ ---- */
.faq{display:flex;flex-direction:column;gap:.6rem}
.faq details{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);
             padding:1.1rem 1.3rem;transition:box-shadow .3s var(--ease)}
.faq details[open]{box-shadow:var(--sh-sm)}
.faq summary{font-weight:600;letter-spacing:-.02em;font-size:clamp(1rem,.96rem + .3vw,1.15rem);
             cursor:pointer;list-style:none;display:flex;justify-content:space-between;
             align-items:center;gap:1rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:1.5em;height:1.5em;border-radius:50%;
                    background:var(--primary-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 2.5v7M2.5 6h7' stroke='%230C6E72' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center/62% no-repeat;
                    transition:transform .35s var(--ease)}
.faq details[open] summary::after{transform:rotate(135deg)}
.faq p{color:var(--ink-soft);margin:.9rem 0 0;font-size:var(--t-sm);max-width:74ch;line-height:1.55}
.faq p b{color:var(--ink);font-weight:600}