/* Pricing blocks shared by the home and pricing pages: the price card, the launch offer and the estimator promo.
   The pricing page shows them on its first screen, so it links this file in <head>; the home page links it after the hero */

/* Price card: the headline rate */
.pricecard{background:#fff;border:2px solid var(--ink);border-radius:28px;padding:32px 36px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px 40px;align-items:center;box-shadow:8px 8px 0 var(--ink)}
.pricecard .big{font-family:var(--display);font-weight:800;font-size:clamp(30px,4.4vw,52px);letter-spacing:-.02em;line-height:1.05;margin-top:12px}
.pricecard .big span{color:var(--cobalt);font-variant-numeric:tabular-nums}
.pricecard .sub{color:var(--muted);font-size:15px;margin-top:10px}
/* Launch offer: a cobalt band with the offer's title and button, and three perks */
.launch{margin-top:20px;background:var(--cobalt);color:#fff;border-radius:28px;padding:28px 36px;display:grid;grid-template-columns:minmax(0,1.2fr) repeat(3,minmax(0,1fr));grid-template-rows:1fr auto auto auto 1fr;gap:0 24px}
.launch .t{grid-row:1/-1;align-self:center;font-family:var(--display);font-weight:800;font-size:26px;line-height:1.1;text-wrap:balance}
.launch .t small{display:block;font-family:var(--mono);font-weight:500;font-size:12px;letter-spacing:2px;text-transform:uppercase;color:#DCE5FF;margin-bottom:6px}
/* The perks share the band's rows (subgrid): titles, prices and notes line up across the columns, and the 1fr rows above and below keep the lot centred.
   A perk without a price moves its note up into the price row */
.launch .it{grid-row:1/-1;display:grid;grid-template-rows:subgrid;font-size:15px;line-height:1.45;color:#DCE5FF;padding-left:20px;border-left:1px solid rgba(255,255,255,.35)}
.launch .it b{grid-row:2;display:block;font-family:var(--display);font-size:19px;color:#fff;margin-bottom:4px}
.launch .it .deal{grid-row:3}
.launch .it .d{grid-row:4}
.launch .it b + .d{grid-row:3/span 2}
/* Each perk shows its saving as a promo price: the regular rate struck through, then the offer price in sun */
.launch .deal{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px;margin:2px 0 8px;font-family:var(--display);font-weight:800;font-size:36px;line-height:1;letter-spacing:-.02em;color:var(--sun)}
.launch .deal s{font-size:20px;font-weight:700;color:#DCE5FF;text-decoration-thickness:2px}
.launch .deal small{font-family:var(--body);font-weight:600;font-size:14px;letter-spacing:0;color:#DCE5FF;margin-left:-4px}
/* On hover the offer price gives a small springy hop and the regular price fades back */
.launch .deal .new{display:inline-block;transform-origin:20% 90%;transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
.launch .deal s{transition:opacity .25s}
@media (hover:hover){
  .launch .it:hover .new{transform:translateY(-3px) scale(1.08)}
  .launch .it:hover s{opacity:.55}
}
/* The offer's own button, under its title: sun on the cobalt band */
.launch .t .btn{display:flex;width:max-content;margin-top:18px;box-shadow:0 8px 20px rgba(20,33,61,.22)}
.launch .t .btn:hover{background:#FFD566}
.price-btns{display:flex;flex-wrap:wrap;gap:12px}
@media (max-width:520px){.price-btns{width:100%}.price-btns .btn,.launch .t .btn{flex:1 1 100%;width:100%}}
@media (max-width:860px){
  .pricecard{grid-template-columns:minmax(0,1fr);padding:26px 22px;box-shadow:6px 6px 0 var(--ink)}
  .pricecard .btn{justify-self:start}
  .launch{grid-template-columns:minmax(0,1fr);grid-template-rows:none;padding:24px 22px;gap:16px}
  .launch .t,.launch .it{grid-row:auto}
  .launch .it{display:block}
  .launch .it{padding:16px 0 0;border-left:0;border-top:1px solid rgba(255,255,255,.35)}
}
/* Estimator promo: a nudge to try the estimator (the numbers live there, in the visitor's own volumes).
   Drawn as a strip of receipt paper, like the estimator's own receipt: torn bottom edge, a perforation before the button.
   The shadow sits on the wrapper, since the torn edge is a mask and would cut a shadow on the strip itself */
.est-teaser-wrap{margin-top:20px;filter:drop-shadow(0 18px 30px rgba(20,33,61,.1));transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.est-teaser-wrap:hover{transform:translateY(-4px)}
.est-teaser{background:#fff;border-radius:28px 28px 0 0;padding:30px 36px 42px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px 48px;align-items:center;
  -webkit-mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50%/20px 100%;mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50%/20px 100%}
.est-teaser h3{font-size:clamp(26px,3vw,34px);font-weight:700;line-height:1.1;margin-top:10px}
.est-teaser h3 em{font-style:normal;color:var(--cobalt)}
.est-teaser p{color:var(--muted);margin-top:10px;max-width:62ch}
.et-cta{align-self:stretch;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding-left:48px;border-left:2px dashed var(--line)}
.et-cta small{font-family:var(--mono);font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--muted)}
@media (max-width:860px){
  .est-teaser{grid-template-columns:minmax(0,1fr);padding:26px 22px 38px}
  .et-cta{align-items:flex-start;padding:22px 0 0;border-left:0;border-top:2px dashed var(--line)}
}
@media (max-width:520px){.et-cta{align-items:stretch;text-align:center}}

.btn-sun{background:var(--sun);color:var(--ink)}
/* Read out by screen readers only: "regular price … now …" around the struck prices, the integrations lists */
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}