/* ================================================================ Build 10D: the Pricing page */
/*
 * Loaded on /pricing/ only, and in the block editor so the owner edits what visitors see.
 *
 * Everything here styles ordinary Gutenberg blocks through the namespaced classes the pattern gives
 * them, so the owner can rewrite any heading, price, feature or answer and the layout holds.
 *
 * Motion spends the product's existing tokens (Build 09B) and nothing else: 140ms for a hover or a
 * press, 200ms for a state change, 320ms for the one entrance. Only transform and opacity move.
 * Reduced motion collapses those tokens to a frame and site.css switches animation off entirely,
 * so every state below still lands - it just does not travel.
 */

/* The taka sign is not in the Latin font subsets. Naming the bundled Bengali face after them means
   "৳" is drawn by a real Bengali font, the same one the cards use, instead of whatever the
   operating system happens to substitute. It is only fetched when a character needs it. */
.vv-pricing{--vv-font-heading:Montserrat,"Noto Sans Bengali",sans-serif;font-family:Inter,"Noto Sans Bengali",sans-serif;overflow:clip;background:var(--vv-bg)}
.vv-pricing .vv-heading-accent{color:var(--vv-accent)}

/* ------------------------------------------------------------------------------------ hero */
.vv-pricing__hero{max-width:780px;padding-block:80px 48px;text-align:center}
.vv-pricing__hero .vv-eyebrow{margin-bottom:20px}
.vv-pricing__hero .vv-lead{max-width:620px;margin:24px auto 0;text-wrap:pretty}

/* ----------------------------------------------------------------------------- plan cards */
.vv-pricing__plans{padding-bottom:48px}
.vv-pricing__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;align-items:stretch}
.vv-pricing-card{position:relative;display:flex;flex-direction:column;min-width:0;padding:32px 28px 28px;
  border:1px solid var(--vv-border);border-radius:var(--vv-radius-panel);background:var(--vv-surface);
  box-shadow:0 5px 18px rgba(22,21,15,.04);
  transition:transform var(--vv-motion-duration-standard) var(--vv-motion-ease-standard),
    border-color var(--vv-motion-duration-standard) var(--vv-motion-ease-standard),
    box-shadow var(--vv-motion-duration-standard) var(--vv-motion-ease-standard);
  animation:vv-pricing-rise var(--vv-motion-duration-emphasis) var(--vv-motion-ease-enter) backwards}
.vv-pricing-card:nth-child(2){animation-delay:60ms}
.vv-pricing-card:nth-child(3){animation-delay:120ms}
/* backwards, never both: a held end frame would outrank the hover transform below forever. */
@keyframes vv-pricing-rise{from{opacity:0;transform:translateY(12px)}}

/* The annual card leads by a stronger edge and a little more depth - not by being louder. */
.vv-pricing-card--annual{border-color:rgba(255,77,0,.5);
  box-shadow:inset 0 3px 0 var(--vv-accent),0 18px 44px rgba(22,21,15,.08),0 8px 24px rgba(255,77,0,.09)}

.vv-pricing-card__tag{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;min-height:28px;padding:4px 12px;
  border:1px solid var(--vv-border);border-radius:var(--vv-radius-pill);background:var(--vv-bg);
  font-size:11.5px;font-weight:600;line-height:1.4;letter-spacing:.11em;text-transform:uppercase;color:var(--vv-secondary)}
/* "Best value" is words, not a colour. The mark before it is the brand's tilted bar. */
.vv-pricing-card__badge{border-color:rgba(255,77,0,.42);background:var(--vv-accent-wash);color:var(--vv-accent-text)}
.vv-pricing-card__badge::before{content:"";width:6px;height:13px;border-radius:3px;background:var(--vv-accent);transform:rotate(14deg);
  transition:transform var(--vv-motion-duration-standard) var(--vv-motion-ease-emphasis)}

.vv-pricing-card__title{margin-top:20px;font-size:22px;letter-spacing:-.025em}
.vv-pricing-card__price{margin-top:14px;color:var(--vv-secondary);font-size:15px;font-weight:500;line-height:1.3}
.vv-pricing-card__price strong{display:block;margin-bottom:4px;font-family:var(--vv-font-heading);font-size:clamp(36px,3.4vw,46px);
  font-weight:700;line-height:1.05;letter-spacing:-.04em;color:var(--vv-near-black);font-variant-numeric:lining-nums}
.vv-pricing-card__sub{margin-top:6px;color:var(--vv-muted);font-size:14px}
.vv-pricing-card__saving{align-self:flex-start;margin-top:14px;padding:7px 12px;border-radius:var(--vv-radius-control);
  background:var(--vv-accent-wash);color:var(--vv-accent-text);font-size:13px;font-weight:600;line-height:1.45}

.vv-pricing-card__features{display:grid;gap:12px;margin:24px 0 28px;padding:24px 0 0;border-top:1px solid var(--vv-border);
  list-style:none;font-size:14.5px;line-height:1.5}
/* The ticks themselves are the shared .vv-ticks component (marketing.css): one box, one glyph,
   one alignment rule on every card and every page. Build 10E replaced the earlier drawn tick and its
   staggered hover fill, which could be caught mid-cascade as uneven solid circles. */

/* The action always sits on the card's floor, so the three line up whatever the copy above says. */
.vv-pricing-card>.vv-plan-action{margin-top:auto}
@media(hover:hover) and (pointer:fine){
  .vv-pricing-card:hover{transform:translateY(-4px);border-color:rgba(255,77,0,.34);
    box-shadow:0 18px 40px rgba(22,21,15,.075),0 8px 24px rgba(255,77,0,.10)}
  .vv-pricing-card--annual:hover{border-color:rgba(255,77,0,.7);
    box-shadow:inset 0 3px 0 var(--vv-accent),0 24px 52px rgba(22,21,15,.10),0 12px 30px rgba(255,77,0,.14)}
  .vv-pricing-card:hover .vv-pricing-card__badge::before{transform:rotate(0deg) scaleY(1.1)}
}

.vv-pricing__note{max-width:620px;margin:28px auto 0;text-align:center;color:var(--vv-muted);font-size:13.5px}
/* Inline, but the one live action on the page, so it gets a touch-sized target without moving the line. */
.vv-pricing__note a{display:inline-block;padding:7px 3px;margin:-7px -3px;color:var(--vv-ink);font-weight:600;text-decoration-color:rgba(255,77,0,.55);text-decoration-thickness:1.5px;text-underline-offset:4px;
  transition:color var(--vv-motion-duration-fast) var(--vv-motion-ease-standard),text-decoration-color var(--vv-motion-duration-fast) var(--vv-motion-ease-standard)}
.vv-pricing__note a:hover{color:var(--vv-accent-text);text-decoration-color:var(--vv-accent)}

/* ------------------------------------------------------------------------------ plan action */
/*
 * Until payments open, an action is inert and looks it: a dashed outline in the CTA's own geometry,
 * a clock in the chip, and "Opening soon" printed beneath. It is a span, so there is nothing to
 * press, nothing to focus and nothing a visitor could mistake for a purchase.
 */
.vv-plan-action{display:grid;gap:10px;justify-items:stretch}
.vv-plan-action__control{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:50px;padding:6px 7px 6px 20px;
  border:1.5px dashed var(--vv-border-strong);border-radius:var(--vv-radius-pill);background:var(--vv-bg);
  color:var(--vv-secondary);font-family:var(--vv-font-heading);font-size:16px;font-weight:700;line-height:1.25;letter-spacing:-.01em;
  cursor:default;user-select:none}
.vv-plan-action__label{min-width:0}
.vv-plan-action__chip{display:grid;place-items:center;flex:0 0 34px;width:34px;height:34px;border:1px solid var(--vv-border);border-radius:10px;
  background:var(--vv-surface);color:var(--vv-muted)}
.vv-plan-action__chip svg{display:block;width:18px;height:18px}
.vv-plan-action__status{display:inline-flex;align-items:center;justify-content:center;gap:8px;color:var(--vv-muted);font-size:12.5px;font-weight:600;letter-spacing:.02em}
.vv-plan-action__status::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--vv-warning)}
.vv-plan-action--primary .vv-plan-action__control{border-color:rgba(255,77,0,.5);background:var(--vv-accent-wash);color:var(--vv-accent-text)}
.vv-plan-action--primary .vv-plan-action__chip{border-color:rgba(255,77,0,.3);color:var(--vv-accent-text)}
/* When a checkout answers for a plan, the same slot carries the real CTA, full width. */
.vv-plan-action.is-open .vv-button{width:100%;justify-content:space-between}
/* Build 10E: the same footprint as a pending action's status line, so a live action and inert ones align. */
.vv-plan-action.is-open::after{content:"";display:block;height:19px}

/* --------------------------------------------------------------------------- early bird */
/* A ticket, not a banner: one panel, a perforated edge, and the saving stamped on the stub. */
.vv-pricing-promo-section{padding-bottom:var(--vv-section)}
.vv-pricing-promo{position:relative;display:grid;grid-template-columns:minmax(0,1.5fr) minmax(280px,.8fr);overflow:hidden;
  border:1px solid rgba(255,77,0,.3);border-radius:28px;background:var(--vv-surface);
  box-shadow:0 14px 38px rgba(22,21,15,.06),0 6px 20px rgba(255,77,0,.07)}
.vv-pricing-promo__copy{min-width:0;padding:44px 48px}
.vv-pricing-promo__eyebrow{color:var(--vv-accent-text)}
.vv-pricing-promo__title{margin-top:14px}
.vv-pricing-promo__was{margin-top:12px;color:var(--vv-secondary);font-size:17px;font-weight:500}
.vv-pricing-promo__was s{color:var(--vv-muted);text-decoration-thickness:2px;text-decoration-color:rgba(22,21,15,.45)}
.vv-pricing-promo__body{max-width:520px;margin-top:16px;color:var(--vv-secondary)}
.vv-pricing-promo__side{position:relative;display:grid;align-content:center;justify-items:center;gap:14px;padding:40px 36px;
  border-left:2px dashed rgba(255,77,0,.35);background:var(--vv-accent-wash);text-align:center}
/* The two notches of the perforation: page-coloured circles cut into the panel's edge. */
.vv-pricing-promo__side::before,.vv-pricing-promo__side::after{content:"";position:absolute;left:-16px;width:30px;height:30px;
  border:1px solid rgba(255,77,0,.3);border-radius:50%;background:var(--vv-bg)}
.vv-pricing-promo__side::before{top:-16px}
.vv-pricing-promo__side::after{bottom:-16px}
.vv-pricing-promo__saving strong{display:inline-block;padding:10px 18px;border:2px solid var(--vv-accent);border-radius:14px;
  background:var(--vv-surface);color:var(--vv-accent-text);font-family:var(--vv-font-heading);font-size:26px;font-weight:700;
  line-height:1.15;letter-spacing:-.03em;transform:rotate(-3deg)}
.vv-pricing-promo__limited{color:var(--vv-accent-text);font-size:11.5px;font-weight:600;letter-spacing:.11em;text-transform:uppercase}
.vv-pricing-promo__side>.vv-plan-action{width:100%;max-width:320px;margin-top:6px}
/* Build 10E: the offer answers the pointer. A small lift and a warmer edge on the ticket, and the
   stamp presses in a little further - once per hover, nothing loops. Keyboard focus inside the
   ticket gets the same treatment. */
.vv-pricing-promo{transition:transform var(--vv-motion-duration-standard) var(--vv-motion-ease-standard),
  box-shadow var(--vv-motion-duration-standard) var(--vv-motion-ease-standard),border-color var(--vv-motion-duration-standard) var(--vv-motion-ease-standard)}
.vv-pricing-promo__saving strong{transition:transform var(--vv-motion-duration-emphasis) var(--vv-motion-ease-emphasis),box-shadow var(--vv-motion-duration-standard) var(--vv-motion-ease-standard)}
.vv-pricing-promo__eyebrow{display:inline-flex;align-items:center;gap:8px}
.vv-pricing-promo__eyebrow::before{content:"";width:6px;height:13px;border-radius:3px;background:var(--vv-accent);transform:rotate(14deg)}
@media(hover:hover) and (pointer:fine){
  .vv-pricing-promo:hover{transform:translateY(-3px);border-color:rgba(255,77,0,.5);
    box-shadow:0 22px 48px rgba(22,21,15,.08),0 10px 28px rgba(255,77,0,.14)}
  .vv-pricing-promo:hover .vv-pricing-promo__saving strong{transform:rotate(-6deg) scale(1.05);box-shadow:0 6px 16px rgba(255,77,0,.18)}
}
.vv-pricing-promo:focus-within{border-color:rgba(255,77,0,.5)}

/* The one scroll-linked moment on the page: the offer settles in and the saving is stamped once as
   it arrives. pricing.js arms this only when it can also disarm it (IntersectionObserver present,
   motion allowed); without the script, or when printing, the offer is simply there. */
.vv-pricing.is-reveal-armed .vv-pricing-promo:not(.is-revealed){opacity:0;transform:translateY(16px)}
.vv-pricing.is-reveal-armed .vv-pricing-promo{transition:opacity var(--vv-motion-duration-emphasis) var(--vv-motion-ease-enter),
  transform var(--vv-motion-duration-emphasis) var(--vv-motion-ease-enter),
  box-shadow var(--vv-motion-duration-standard) var(--vv-motion-ease-standard),border-color var(--vv-motion-duration-standard) var(--vv-motion-ease-standard)}
.vv-pricing.is-reveal-armed .vv-pricing-promo.is-revealed .vv-pricing-promo__saving strong{
  animation:vv-pricing-stamp var(--vv-motion-duration-emphasis) var(--vv-motion-ease-emphasis) 120ms backwards}
@media print{.vv-pricing .vv-pricing-promo{opacity:1!important;transform:none!important}}
@keyframes vv-pricing-stamp{from{opacity:0;transform:rotate(-9deg) scale(1.18)}}

/* ------------------------------------------------------------------------- access explainer */
.vv-pricing-access-section{background:var(--vv-surface);border-block:1px solid var(--vv-border)}
.vv-pricing-access{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.vv-pricing-access__item{min-width:0;padding:32px;border:1px solid var(--vv-border);border-radius:var(--vv-radius-card);background:var(--vv-bg)}
.vv-pricing-access__item--paid{border-color:rgba(255,77,0,.26);background:var(--vv-accent-wash)}
.vv-pricing-access__item--paid .vv-label{color:var(--vv-accent-text)}
.vv-pricing-access__item h3{margin-top:12px;font-size:21px}
.vv-pricing-access__item>p:last-child{margin-top:10px;color:var(--vv-secondary);font-size:15px}
.vv-pricing-access__recall{margin-top:20px;padding:20px 24px;border:1px dashed var(--vv-border-strong);border-radius:var(--vv-radius-card);
  color:var(--vv-secondary);font-size:15px}
.vv-pricing-access__recall strong{color:var(--vv-ink)}

/* ------------------------------------------------------------------------------ responsive */
@media(max-width:1100px){
  .vv-pricing__grid{gap:16px}
  .vv-pricing-card{padding:28px 22px 24px}
  .vv-pricing-promo__copy{padding:40px}
}
/* Three columns stop being comparable before they stop fitting. Below this they stack as one
   readable column, in the order Try, then 3 months, then 12 months. */
@media(max-width:900px){
  .vv-pricing__hero{padding-block:64px 40px}
  .vv-pricing__grid{grid-template-columns:1fr;gap:20px;max-width:560px;margin-inline:auto}
  .vv-pricing-card{padding:28px 28px 26px}
  .vv-pricing-promo{grid-template-columns:1fr;max-width:560px;margin-inline:auto}
  .vv-pricing-promo__side{border-left:0;border-top:2px dashed rgba(255,77,0,.35)}
  .vv-pricing-promo__side::before,.vv-pricing-promo__side::after{top:-16px;bottom:auto}
  .vv-pricing-promo__side::before{left:-16px}
  .vv-pricing-promo__side::after{left:auto;right:-16px}
  .vv-pricing-access{grid-template-columns:1fr}
}
@media(max-width:600px){
  .vv-pricing__hero{padding-block:48px 32px}
  .vv-pricing__plans{padding-bottom:40px}
  .vv-pricing-card{padding:24px 20px 22px;border-radius:var(--vv-radius-card)}
  .vv-pricing-card__title{margin-top:16px;font-size:20px}
  .vv-pricing-card__price strong{font-size:38px}
  .vv-pricing-card__features{margin:20px 0 24px;padding-top:20px;font-size:14px}
  .vv-pricing-promo{border-radius:var(--vv-radius-panel)}
  .vv-pricing-promo__copy{padding:28px 22px}
  .vv-pricing-promo__side{padding:32px 22px 28px}
  .vv-pricing-promo__saving strong{font-size:22px}
  .vv-pricing-access__item{padding:24px}
  .vv-pricing-access__recall{padding:18px 20px}
}
@media(max-width:359px){
  .vv-plan-action__control{padding-left:16px;font-size:15px}
}