/* Pricing page. One plan, seven services, and the practical billing facts. */
.pricing-hero{padding:68px 0 74px}
.pricing-hero-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(320px,.9fr);gap:clamp(48px,8vw,96px);align-items:center}
.pricing-hero-copy{max-width:650px}
.pricing-hero h1{max-width:9em;margin-bottom:20px}
.pricing-hero .lede{max-width:30em;text-wrap:pretty}

.pricing-ticket{position:relative;width:100%;max-width:460px;justify-self:end;padding:42px 38px 34px;
  color:var(--c-text);background:var(--c-card);border:1px solid var(--c-line);transform:rotate(-1deg)}
.pricing-ticket::before{content:"";position:absolute;top:-13px;left:50%;width:112px;height:26px;
  background:var(--c-bg-alt);border:1px solid var(--c-line);transform:translateX(-50%) rotate(1deg)}
/* How do you want to pay? Two real radios in one fieldset (Armen 2026-10-02: monthly first and
   pre-selected, then 3 months). CSS only: each input sits over its whole row, so the row is the
   target; the checked input shows its note through `:checked ~ .pay-notes`. The notes share one
   grid cell, so the ticket keeps its height when the choice changes. The selected row gets a full
   border colour change and a light tint, never a side bar. */
.pay-choice{min-width:0;margin:0;padding:0;border:0}
.pay-choice legend{float:left;width:100%;margin:0 0 16px;padding:0;font-family:var(--f-display);font-size:26px;font-weight:700;line-height:1.2}
.pay-grid{clear:both;display:grid;grid-template-columns:minmax(0,1fr);row-gap:10px}
.pay-in-1,.pay-opt-1{grid-area:1/1}
.pay-in-3,.pay-opt-3{grid-area:2/1}
.pay-in{z-index:1;align-self:stretch;justify-self:stretch;width:100%;height:100%;margin:0;opacity:0;cursor:pointer;
  -webkit-appearance:none;appearance:none}
.pay-opt{position:relative;display:flex;align-items:center;min-height:60px;padding:12px 18px 12px 60px;
  font-size:22px;font-weight:700;line-height:1.25;background:var(--c-card);border:2px solid var(--c-line);border-radius:var(--radius);
  transition:border-color .4s ease,background-color .4s ease}
.pay-opt::before{content:"";position:absolute;left:18px;top:50%;width:26px;height:26px;margin-top:-13px;box-sizing:border-box;
  padding:4px;border:2px solid var(--c-text);border-radius:50%;background-clip:content-box;
  transition:border-color .4s ease,background-color .4s ease}
.pay-in:hover+.pay-opt{border-color:var(--c-text)}
.pay-in:checked+.pay-opt{border-color:var(--c-accent);background-color:var(--c-accent-tint)}
.pay-in:checked+.pay-opt::before{border-color:var(--c-accent);background-color:var(--c-accent)}
.pay-in:focus-visible+.pay-opt{outline:3px solid var(--c-focus);outline-offset:3px}
.pay-notes{grid-area:3/1;margin-top:18px;padding-bottom:20px;border-bottom:1px solid var(--c-text)}
/* Only the chosen note takes room, so the shorter monthly note leaves no gap under it (Armen 2026-10-02: "theres a gap here?").
   The radios sit above the notes, so they never move when the choice changes. */
.pay-note{display:none}
.pay-in-3:checked~.pay-notes .pay-note-3,.pay-in-1:checked~.pay-notes .pay-note-1{display:block;animation:pay-note-in .6s cubic-bezier(.22,1,.36,1) both}
@keyframes pay-note-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.pay-note p{margin:0;font-size:19px;line-height:1.45;text-wrap:pretty}
.pay-note p+p{margin-top:6px}
.pricing-ticket-price{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:12px;row-gap:6px}
.pay-note .pricing-ticket-price{margin-bottom:12px}
.pay-note .pricing-ticket-was{margin:0 0 4px;font-family:var(--f-display);font-size:40px;font-weight:700;line-height:1.1;color:var(--c-muted)}
.pay-note .pricing-ticket-was s{text-decoration:line-through;text-decoration-thickness:4px;text-decoration-color:var(--c-ink-accent)}
.pay-note .pricing-ticket-was span{margin-left:6px;font-family:var(--f-body);font-size:19px;font-weight:400}
.pricing-ticket-price strong{font-family:var(--f-display);font-size:clamp(64px,7vw,88px);line-height:.9}
.pricing-ticket-price span{font-size:21px;font-weight:700}
.pricing-ticket ul{list-style:none;display:grid;gap:9px;margin-top:22px;font-size:20px}
.pricing-ticket li{display:grid;grid-template-columns:18px minmax(0,1fr);gap:10px;align-items:start}
.pricing-ticket li::before{content:"\2713";color:var(--c-accent);font-weight:700}

.pricing-coverage{position:relative;z-index:1}
.pricing-coverage .sh{max-width:800px}
.pricing-service-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px}
.pricing-service{grid-column:span 3;display:grid;grid-template-rows:auto auto 1fr auto;align-content:start;min-width:0;
  padding:24px 24px 26px;background:var(--c-card);border:1px solid var(--c-line)}
.pricing-service:nth-child(n+3):nth-child(-n+5){grid-column:span 2}
.pricing-service .service-scene{width:112px;height:75px;margin:0 0 15px;color:var(--c-text)}
.pricing-service h3{margin:0 0 8px;font-size:24px}
.pricing-service p{margin:0 0 22px;font-size:19px;line-height:1.5}
.pricing-service .btn{justify-self:start;margin-top:auto}

.pricing-setup-layout{display:grid;grid-template-columns:minmax(250px,.72fr) minmax(0,1.28fr);gap:clamp(44px,8vw,96px);align-items:start}
.pricing-setup-intro{position:sticky;top:118px}
.pricing-setup-intro .sh{margin-bottom:28px}
.pricing-setup-list{list-style:none;counter-reset:pricing-step;background:var(--c-card);border:1px solid var(--c-text)}
.pricing-setup-list li{counter-increment:pricing-step;display:grid;grid-template-columns:54px minmax(0,1fr);gap:18px;padding:24px 26px 25px}
.pricing-setup-list li+li{border-top:1px solid var(--c-line)}
.pricing-setup-list li::before{content:counter(pricing-step) ".";font-family:var(--f-display);font-size:28px;font-weight:700;line-height:1.15;color:var(--c-accent)}
.pricing-setup-list b{display:block;font-family:var(--f-display);font-size:23px;line-height:1.25;margin-bottom:5px}
.pricing-setup-list span{display:block;font-size:19px;line-height:1.5}

.pricing-billing{padding:84px 0;color:var(--white)}
.pricing-billing-grid{display:grid;grid-template-columns:minmax(250px,.72fr) minmax(0,1.28fr);gap:clamp(44px,8vw,96px);align-items:start}
.pricing-billing .btn.ghost{color:var(--white);border-color:var(--white)}
.pricing-billing .btn.ghost:hover{color:var(--white);background:transparent;border-color:var(--white)}
.billing-sheet{margin:0;background:var(--c-card);color:var(--c-text);border:1px solid var(--c-line)}
.billing-sheet>div{display:grid;grid-template-columns:minmax(180px,.7fr) minmax(0,1.3fr);gap:28px;padding:23px 26px}
.billing-sheet>div+div{border-top:1px solid var(--c-line)}
.billing-sheet dt{font-family:var(--f-display);font-size:22px;font-weight:700;line-height:1.3}
.billing-sheet dd{margin:0;font-size:19px;line-height:1.5;text-wrap:pretty}

.pricing-faq .faq{max-width:900px}
.pricing-faq .faq details>p{text-wrap:pretty}

@media (max-width:900px){
  .pricing-hero-grid,.pricing-setup-layout,.pricing-billing-grid{grid-template-columns:minmax(0,1fr)}
  .pricing-ticket{justify-self:start;max-width:520px}
  .pricing-service-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pricing-service,.pricing-service:nth-child(n+3):nth-child(-n+5){grid-column:span 1}
  .pricing-service:last-child{grid-column:1/-1;width:calc(50% - 8px);justify-self:center}
  .pricing-setup-intro{position:static}
}

@media (max-width:560px){
  .pricing-hero{padding:48px 0 54px}
  .pricing-hero h1{font-size:clamp(42px,12vw,56px)}
  .pricing-ticket{padding:36px 20px 28px;transform:none}
  .pay-choice legend{font-size:24px}
  .pay-opt{padding-left:56px;font-size:21px}
  .pay-opt::before{left:16px}
  .pricing-service-grid{grid-template-columns:minmax(0,1fr)}
  .pricing-service,.pricing-service:last-child{grid-column:auto;width:auto;justify-self:stretch;padding:22px 20px 24px}
  .pricing-service .service-scene{width:100px;height:66px}
  .pricing-service h3{font-size:23px}
  .pricing-setup-list li{grid-template-columns:40px minmax(0,1fr);gap:12px;padding:20px 18px 21px}
  .pricing-setup-list li::before{font-size:24px}
  .pricing-billing{padding:64px 0}
  .billing-sheet>div{grid-template-columns:minmax(0,1fr);gap:5px;padding:20px 18px}
}

/* The note change is one calm fade. Reduced motion swaps it at once. */
@media (prefers-reduced-motion:reduce){
  .pay-in-3:checked~.pay-notes .pay-note-3,.pay-in-1:checked~.pay-notes .pay-note-1{animation:none}
  .pay-opt,.pay-opt::before{transition:none}
}

/* Windows high contrast drops background colours, which would hide the checked dot. */
@media (forced-colors:active){
  .pay-opt::before{forced-color-adjust:none;border-color:CanvasText;background-color:Canvas}
  .pay-in:checked+.pay-opt{border-color:Highlight}
  .pay-in:checked+.pay-opt::before{border-color:Highlight;background-color:Highlight}
}