/* sec-pricing.css: the pricing page (plans, includes, compare table, limits, plan finder, security card).
   Owned by builder P2. Every colour, radius, shadow and easing comes from tokens.css. Measured numbers are the template's
   /pricing at 1440 and 390 (dna/DETAILS part A devices 6 and 7, part B devices 8 to 11). */

/* ---- the page head, centred as on the template's pricing page ------------------------------------------------ */
.page-head { text-align: center; padding-bottom: 48px; }
.page-head .crumbs ol { justify-content: center; }
.page-head .lead { margin-inline: auto; }

/* ---- shared small devices (a copy of what sec-products.css carries: each page loads only its own module) ----- */
.tl { display: inline-flex; align-items: center; gap: 8px; font: 600 16px/20.8px var(--body); color: var(--ink); text-decoration: none; min-height: 24px; }
.tl:hover span { text-decoration: underline; text-underline-offset: 4px; }
.tl__chev { width: 20px; height: 20px; flex: none; }
.band--anchor .tl, .band--dark .tl { color: var(--ground); }
.chk { width: 18px; height: 18px; flex: none; }
.stk { display: inline-block; min-width: 72px; padding: 5px 9.5px; border: 2px solid var(--ground); border-radius: var(--r-pill); box-shadow: var(--shadow-float);
  font: 600 18px/23.4px var(--body); text-align: center; color: var(--ink); transform: rotate(-7.7deg); white-space: nowrap; }
.stk--lilac { background: var(--lilac); } .stk--orange { background: var(--orange); } .stk--coral { background: var(--coral); } .stk--mint { background: var(--mint); }
.stk--sm { font-size: 12px; line-height: 15.6px; padding: 4.5px 9px; }
.btn--dark { background: var(--ink); color: var(--ground); }
.btn--block { width: 100%; }
.sec-head { max-width: 864px; margin: 0 auto; text-align: center; }
.sec-head .eyebrow { margin-bottom: 16px; }
.sec-head .lead { margin-inline: auto; }
.d2--big { letter-spacing: -.03em; }

/* ---- device 7: the Monthly / Annual toggle ----------------------------------------------------------------- */
.plans__head { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; margin: 0 auto 64px; }
.plans__lead { margin: 0; font-size: 20px; line-height: 26px; color: var(--ink-70); }
.plans__trial { margin: 0; font: 600 14px/18.2px var(--body); color: var(--ink-70); }
.bill { display: inline-flex; padding: 4px; background: var(--ground); border: 2px solid var(--card); border-radius: var(--r-14); }
.bill[hidden] { display: none; }
.bill__tab { display: flex; align-items: center; gap: 8px; min-height: 36.8px; padding: 8px 12px; border: 0; border-radius: var(--r-sm); background: transparent;
  font: 600 16px/20.8px var(--body); color: var(--ink); cursor: pointer; transition: color .3s; }
.bill__tab.is-on { background: var(--cta); }
.bill__save { font-size: 13px; line-height: 16.9px; font-weight: 500; }
.bill--sm .bill__tab { font-size: 15px; }
/* the page opens on Monthly, as their pricing page does (with or without JavaScript); Annual shows after the toggle */
#main .pr--ann { display: none; }
#main[data-billing="annual"] .pr--ann { display: inline; }
#main[data-billing="annual"] .pr--mo { display: none; }

/* ---- device 6: plan cards -------------------------------------------------------------------------------------- */
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.plan { position: relative; display: flex; flex-flow: column; justify-content: space-between; gap: 32px; height: 100%; padding: 32px 30.4px;
  background: var(--ground); border: 2px solid var(--card); border-radius: var(--r-xl); }
.plan--edge { border-color: var(--ink); }
.plan__tagwrap { position: absolute; inset: 0 0 auto; display: flex; justify-content: center; align-items: flex-start; transform: translateY(-50%); pointer-events: none; }
.plan__top { display: flex; flex-direction: column; gap: 12px; padding-top: 24px; margin-bottom: 0; min-height: 124px; }
.plan__name { margin: 0; }
.plan__price { margin: 0; font: 400 40px/38px var(--display); letter-spacing: -.03em; }
.plan__billed, .plan__blurb { margin: 0; font: 500 14px/18.2px var(--body); color: var(--ink-70); }
.plan__cta { display: flex; flex-direction: column; }
.plan__mid { padding-top: 0; }
.plan__incl { margin: 0 0 8px; font: italic 500 14px/18.2px var(--body); color: var(--ink-70); }
.plan__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.plan__list li { display: flex; gap: 8px; align-items: flex-start; padding: 6px 0; font: 500 14px/18.2px var(--body); color: var(--ink); }
.plan__list li > span { flex: 1 1 0%; }
.soon { display: inline-block; margin-left: 4px; padding: 1px 6px; border-radius: var(--r-xs); background: var(--card); font-size: 12px; font-weight: 600; line-height: 16px; white-space: nowrap; }
.plan__expand { display: flex; align-items: center; justify-content: space-between; gap: 5px; width: 100%; padding: 0; border: 0; background: transparent; color: var(--ink);
  font: 400 16px/20.8px var(--body); cursor: pointer; }
.plan__expand[hidden] { display: none; }
.plan__expand .tl__chev { width: 18px; height: 18px; transform: rotate(90deg); transition: transform .2s; }
.plan.is-open .plan__expand .tl__chev { transform: rotate(-90deg); }
.plan.is-collapsible .plan__mid { display: none; }
.plan.is-collapsible.is-open .plan__mid { display: block; }

@media (min-width: 992px) {   /* the three cards share their rows, so the three buttons and the three lists line up */
  .plans { row-gap: 0; }
  .plan { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 32px; align-content: start; }
}

/* fix wave 1 (critic 5): at 1440 x 900 the first screen shows the plan cards' stickers, names and prices, as the template's /pricing does
   (cards start by about 600 px). The head sits closer under the header, the lead runs on two lines, the empty band above the toggle is gone
   and "Current plans ..." shares one row with the toggle. Under 992 the layout is untouched. */
@media (min-width: 992px) {
  .page-head { padding-top: 108px; padding-bottom: 0; }
  .page-head .crumbs { margin-bottom: 20px; }
  .page-head .lead { max-width: 900px; }
  .band--plans { padding-top: 24px; }
  .plans__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 32px; text-align: left; margin: 0 0 40px; }
  .plans__lead { grid-column: 1; grid-row: 1; }
  .plans__trial { grid-column: 1; grid-row: 2; }
  .plans__head .bill { grid-column: 2; grid-row: 1 / span 2; }
}

/* ---- device 8: the olive card (r32, pad 64 48, three columns) and device 9: the badge stamps ---------------------- */
.olive { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 48px; padding: 64px 48px; background: var(--card); border-radius: var(--r-xl); }
.olive__head .d3 { text-wrap: balance; }
.olive__body { grid-column: 2 / -1; }
.olive--sec .olive__body { grid-column: auto; max-width: 349px; }
.olive__body > p { font: 600 16px/20.8px var(--body); color: var(--ink-70); max-width: 296px; margin: 0 0 32px; }
.olive--sec .olive__body > p { max-width: none; }
.plan__list--cols { display: grid; grid-template-columns: 1fr 1fr; column-gap: 32px; }
.extras { list-style: none; margin: 24px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.extra { padding: 8px 12px; border-radius: var(--r-sm); background: var(--ground); font: 600 14px/18.2px var(--body); }
.olive__stamps { display: flex; gap: 13.7px; min-width: 340px; }
.stamp { width: 106.2px; height: auto; flex: none; color: var(--ink); }
.stamp__o { fill: none; stroke: var(--anchor-deep); stroke-width: 1.03; }
.stamp__i { fill: none; stroke: var(--anchor); stroke-width: 1.03; stroke-dasharray: 100 44.5; stroke-dashoffset: -22.3; }
.stamp__ic { opacity: .07; }
.stamp text { font: 600 11px var(--body); letter-spacing: .04em; fill: currentColor; text-anchor: middle; }

/* ---- device 10: the compare table -------------------------------------------------------------------------------- */
.cmp-tools { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 48px; }
.cmp__status { margin: 0; font: 500 14px/18.2px var(--body); color: var(--ink-70); }
.cmp { position: relative; isolation: isolate; display: flex; flex-direction: column; gap: 48px; margin-top: 48px; }
.cmp__hg { position: sticky; top: 16px; z-index: 1000; background: var(--ground); border: 2px solid var(--card); border-radius: var(--r-12); padding: 16px 0; }
.cmp__row { position: relative; display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); border-bottom: 1px solid var(--card); transition: border-color .1s; }
.cmp__headrow { border-bottom: 0; }
.cmp__ph { display: flex; flex-direction: column; justify-content: space-between; align-items: center; gap: 16px; padding: 24px 24px 24px 0; text-align: center; }
.cmp__ph--first { align-items: flex-start; justify-content: center; padding: 52px 20px; text-align: left; }
.cmp__trial { font: 400 32px/30.4px var(--display); letter-spacing: -.03em; }
.cmp__trial em { font-style: italic; }
.cmp__price { display: inline-flex; align-items: baseline; font: 400 40px/38px var(--display); letter-spacing: -.03em; }
.cmp__price small { padding-left: 8px; font: 400 16px/15.2px var(--display); letter-spacing: -.03em; }
.tl--s { font-size: 16px; }
.cmp__label { display: flex; gap: 8px; padding: 16px 24px 16px 16px; font: 500 16px/20.8px var(--body); color: var(--ink-70); }
.cmp__gt { color: var(--ink); font-weight: 600; padding-bottom: 4px; }
.cmp__c { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 24px 24px 24px 12px; text-align: center; font: 500 16px/20.8px var(--body); }
.cmp__y { display: flex; width: 16px; height: 16px; align-items: center; justify-content: center; }
.cmp__tick { width: 15px; height: 12px; }
.cmp__n { display: block; width: 10px; height: 1.5px; background: var(--ink); opacity: .5; }
.cmp__soon { font-size: 14px; font-weight: 600; line-height: 18.2px; color: var(--ink-70); }
.cmp__row:not(.cmp__gh):not(.cmp__headrow)::before { content: ""; position: absolute; inset: 0; width: 105%; margin-left: -2.5%; z-index: -1; border-radius: var(--r-md); background: var(--card); opacity: 0; transition: opacity .15s; }
.cmp[data-view="differences"] [data-same] { display: none; }
.cmp[data-view="differences"] .cmp__grp:not([data-has-diff]) { display: none; }
@media (min-width: 992px) {
  .cmp__row:not(.cmp__gh):not(.cmp__headrow):hover::before { opacity: 1; }
  .cmp__row:hover, .cmp__row:has(+ .cmp__row:hover) { border-color: transparent; }
}

/* ---- how limits work ----------------------------------------------------------------------------------------------- */
.limits { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 48px; }
.limit { padding: 32px; border: 2px solid var(--card); border-radius: var(--r-lg); background: var(--ground); }
.limit .d4 { margin-bottom: 12px; }
.limit p { color: var(--ink-70); }

/* ---- device 11: the plan finder in the deep anchor panel (r80 with data-corners, inner r32, stats r16) ----------------- */
.band--finder .sec-head .eyebrow { color: var(--ink-soft); }
.fnd { max-width: 816px; margin: 48px auto 0; padding: 32px; display: flex; flex-direction: column; gap: 32px; background: var(--anchor-deep); border-radius: var(--r-xl); }
.fnd__in { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.fnd__field { display: flex; flex-direction: column; gap: 8px; }
.fnd__field label { font: 500 14px/18.2px var(--body); color: var(--ink-soft); }
.fnd__field input { width: 100%; min-height: 42px; padding: 12px 16px; border: 2px solid transparent; border-radius: var(--r-sm); background: var(--ground); color: var(--ink); font: 500 16px/1.3 var(--body); }
.fnd__field input[aria-invalid="true"] { border-color: var(--coral); }
.fnd__err { margin: 0; font-weight: 600; color: var(--ground); }
.fnd__out { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; padding: 24px; border-radius: var(--r-md); background: color-mix(in srgb, var(--ground) 9%, var(--anchor-deep)); }
.fnd__k { margin: 0 0 8px; font: 500 14px/18.2px var(--body); color: var(--ink-soft); }
.fnd__v { margin: 0; font: 400 40px/1 var(--display); letter-spacing: -.03em; }
.fnd__v--plan { font-size: 48px; }
.fnd__s { margin: 8px 0 0; font: 500 14px/18.2px var(--body); color: var(--ink-soft); }
.fnd__over { padding: 24px; border-radius: var(--r-md); background: color-mix(in srgb, var(--ground) 9%, var(--anchor-deep)); font-size: 20px; line-height: 26px; }
.fnd__over[hidden], .fnd__out[hidden], .fnd__err[hidden] { display: none; }
.fnd__cta { display: flex; justify-content: center; }

/* ---- breakpoints (the template's 991 / 767 / 479) -------------------------------------------------------------------- */
@media (max-width: 991px) {
  .plans { grid-template-columns: 1fr; max-width: 480px; margin-inline: auto; gap: 48px; }
  .plans__head { margin-bottom: 48px; }
  .olive { grid-template-columns: 1fr 1fr; gap: 64px 32px; }
  .olive__body, .olive--sec .olive__body { grid-column: auto; max-width: none; }
  .olive__stamps { grid-column: 1 / -1; justify-content: center; }
  .cmp__hg { top: 8px; }
  .cmp__price { font-size: 32px; line-height: 32px; }
  .cmp__ph { padding-inline: 16px; }
  .limits { grid-template-columns: 1fr; }
  .tl--s { font-size: 14px; }
}
@media (max-width: 767px) {
  .plans__head { margin-bottom: 40px; }
  .plan { border-radius: var(--r-lg); }
  .plan__top { align-items: center; text-align: center; min-height: 0; }
  .plan__price { font-size: 48px; line-height: 45.6px; }
  .olive { grid-template-columns: 1fr; gap: 32px; padding: 32px; border-radius: var(--r-lg); }
  .olive__stamps { min-width: 0; grid-column: auto; }
  .stamp { width: 86.9px; }
  .plan__list--cols { grid-template-columns: 1fr; }
  .cmp__hg { padding: 0; }
  .cmp__ph--first { display: none; }
  .cmp__headrow, .cmp__row { grid-template-columns: repeat(3, 1fr); }
  .cmp__ph { padding: 16px 8px; }
  .cmp__label { grid-column: 1 / -1; padding: 16px; font-weight: 600; color: var(--ink); border-bottom: 1px solid var(--card); }
  .cmp__gt { border-bottom: 0; }
  .cmp__gh > [role="cell"] { display: none; }
  .cmp__c { padding: 16px; }
  .tl--s { font-size: 13px; gap: 2px; white-space: nowrap; }
  .tl--s .tl__chev { width: 14px; height: 14px; }
  .cmp__row:not(.cmp__gh):not(.cmp__headrow)::before { display: none; }
  .fnd { padding: 24px; border-radius: var(--r-lg); }
  .fnd__in, .fnd__out { grid-template-columns: 1fr; }
}
@media (max-width: 479px) {
  .stk { font-size: 16px; line-height: 20.8px; }
  .stk--sm { font-size: 12px; line-height: 15.6px; }
  .cmp__c { justify-content: flex-start; text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
  .bill__tab, .plan__expand .tl__chev, .cmp__row, .cmp__row::before { transition: none; }
}

/* Planner, round 3 prep: the compare table widened the page at 360 to 380 (three "Coming soon" cells with 16px padding need about 380px). */
@media (max-width: 479px) {
  .cmp__headrow, .cmp__row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cmp__ph, .cmp__c { min-width: 0; }
  .cmp__c { padding: 12px 4px; font-size: 14px; line-height: 18.2px; overflow-wrap: anywhere; }
  .cmp__ph { padding: 12px 4px; }
  .tl--s { white-space: normal; text-align: center; }
}