/* ============================================================
   PRICING PAGE
   The calculator that used to sit here went in v2.58 along with
   its markup and its script: .calc-grid, .cblock, .seg, .stepper
   and the whole .est panel. What is left styles the plan cards,
   the facts table and the page's own furniture.
   ============================================================ */
/* the progress rail: a finished step is a button back to itself */
.rail__go{display:flex;align-items:center;gap:inherit;background:transparent;border:0;
  padding:0;font:inherit;color:inherit;text-align:inherit;cursor:pointer}
.rail__go[disabled]{cursor:default}
.rail li:not(.done) .rail__go{pointer-events:none}
.rail .done .rail__go:hover .rail__t,
.rail .done .rail__go:focus-visible .rail__t{text-decoration:underline}
.rail__go:focus-visible{outline:2px solid var(--fg-navy-700);outline-offset:3px;border-radius:6px}

.extras{display:grid;gap:10px}
.extra{display:flex;align-items:center;gap:12px;border:1px solid var(--fg-hairline);border-radius:var(--r-sm);
  padding:14px 16px;cursor:pointer;transition:border-color .15s}
.extra:hover{border-color:var(--fg-steel-200)}
.extra input{position:absolute;opacity:0;width:0;height:0}
.extra > span:nth-of-type(2){flex:1}
.extra b{font-weight:400;font-size:15px}

.glance{margin-top:56px}
.glance .eyebrow{margin-bottom:16px}
.glance .price-facts{max-width:none}
/* Two columns, as a grid rather than CSS multi-column.
   `columns:2` flowed the rows into a gutter with nothing in it, so the two
   halves had no divider, and only the eighth row could lose its bottom border
   — the fourth kept one and hung a stray hairline in the middle of the table.
   A grid that fills column-first keeps the same reading order and lets each
   column be closed properly. */
/* Twelve rows now, six per column. It was fourteen; the three rows that
   repeated the plan cards above — monthly, yearly, and the yearly saving —
   came out, and one that the table never had went in, so the count stayed
   even. The four numbers below are the only thing that has to change if a row
   is ever added or removed: rows-per-column, the first row of the second
   column (rows-per-column + 1), and the two rows at the foot of a column.
   Keep the total even, or the second column comes up a row short and the
   table ends on a ragged edge. */
@media (min-width:900px){
  .glance .price-facts{display:grid;grid-auto-flow:column;
    grid-template-rows:repeat(6,auto);grid-template-columns:1fr 1fr;column-gap:0}
  .glance .price-facts > div:nth-child(n+7){border-inline-start:1px solid var(--fg-hairline)}
  .glance .price-facts > div:nth-child(6),
  .glance .price-facts > div:nth-child(12){border-bottom:0}
  /* The zebra is set on nth-child, which counts down the source, not across
     the rendered rows. With an odd number of rows per column the second
     column starts on the opposite parity and the table renders as a
     chequerboard. So in two columns the stripe is restated by position:
     rows 1, 3, 5 and 7 of BOTH columns. */
  .glance .price-facts > div{background:var(--fg-white)}
  .glance .price-facts > div:nth-child(1),
  .glance .price-facts > div:nth-child(3),
  .glance .price-facts > div:nth-child(5),
  .glance .price-facts > div:nth-child(7),
  .glance .price-facts > div:nth-child(9),
  .glance .price-facts > div:nth-child(11){background:var(--fg-mist-100)}
}

/* The three plan cards.
   They were one hairline-joined strip of three identical white panels, which
   said that the three things carry equal weight. They do not: one is the
   product, one is a surcharge, and one is a list of things that cost nothing.
   Separating them and giving each a role colour makes the page answer the
   dentist's actual question — what do I pay for, and what is already in? —
   before he reads a word.

   The colours are the site's own semantic tokens, not new ones: --fg-warning
   for the thing that costs extra, --fg-success for the things that do not,
   and the navy for the subscription itself. */
.subplan{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:30px;
  background:none;border:0;border-radius:0;overflow:visible;align-items:stretch}
.subplan__i{
  position:relative;overflow:hidden;display:flex;flex-direction:column;
  background:#fff;border:1px solid var(--fg-hairline);border-radius:var(--r-md);
  padding:26px 26px 24px;
  box-shadow:0 1px 2px rgba(11,18,32,.04),0 18px 34px -30px rgba(11,18,32,.45);
}
/* the role rule: 3px along the top edge, the one place a card declares itself */
.subplan__i::before{content:"";position:absolute;inset-inline:0;top:0;height:3px;background:transparent}
.subplan__i--rush::before{background:var(--fg-warning)}
.subplan__i--free::before{background:var(--fg-success)}
.subplan__i--month::before{background:var(--fg-navy-600)}

/* The subscription card is the product, so it is the one that is navy. Same
   gradient as the software panel on How It Works — the site should look like
   one hand made it. */
.subplan__i--main{
  background:linear-gradient(150deg,#0E1B33 0%,#16305A 62%,#1B3A6B 100%);
  border-color:rgba(150,180,225,.22);color:#fff;
  box-shadow:0 1px 2px rgba(4,10,24,.35),0 26px 50px -38px rgba(4,10,24,.75);
}
.subplan__i--main .subplan__k{color:var(--fg-steel-400)}
.subplan__i--main .subplan__d{color:var(--fg-steel-400)}
.subplan__i--main b{color:#fff}

.subplan__k{display:inline-flex;align-items:center;gap:7px;
  font-size:12px;text-transform:uppercase;letter-spacing:.11em;color:var(--fg-steel-500)}
html[dir="rtl"] .subplan__k{letter-spacing:.02em}
/* a 6px dot in the role colour, so the label reads as a category and the
   colour is repeated where the eye lands first */
.subplan__k::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.subplan__i--rush .subplan__k{color:var(--fg-warning)}
.subplan__i--free .subplan__k{color:var(--fg-success)}
.subplan__i--month .subplan__k{color:var(--fg-navy-600)}
.subplan__i--main .subplan__k::before{background:#7FA5DF}

.subplan__i b{display:block;margin-top:14px;font-size:23px;font-weight:600;letter-spacing:-.02em;line-height:1.25}
html[dir="rtl"] .subplan__i b{letter-spacing:0;line-height:1.4}
.subplan__i--free b{color:var(--fg-success)}
/* An amount nobody has set yet is not a headline. Rendered at display size it
   read as the answer to "how much?", when it is the absence of one. */
.subfig--pending{font-size:15.5px !important;font-weight:500 !important;line-height:1.5 !important;
  letter-spacing:0 !important;color:var(--fg-ink-muted);display:inline-flex !important;
  align-items:baseline;gap:8px}
.subplan__i--main .subfig--pending{color:var(--fg-steel-400)}
.subfig--pending::before{content:"";width:6px;height:6px;border-radius:50%;
  background:var(--fg-swiss-red);flex:none;transform:translateY(-2px)}

.subplan__d{margin-top:12px;font-size:14.5px;line-height:1.6;color:var(--fg-ink-muted)}
.subnote{font-size:14px;color:var(--fg-ink-muted);line-height:1.6}
/* Four cards need one more step down than three did: four across is only
   readable while each column can still hold a line of body text. */
@media (max-width:1180px){ .subplan{grid-template-columns:repeat(2,1fr)} }
@media (max-width:640px){ .subplan{grid-template-columns:1fr;gap:12px} }
/* The saving inside a sentence is a figure, not a headline: the display-size
   rule above is scoped to the card's own <b>, and this one keeps a .subfig
   that happens to sit in running text at the size of the text around it. */
.subplan__d .subfig{font-weight:600;color:var(--fg-ink)}
.subplan__i--main .subplan__d .subfig{color:#fff}

.est-cta{width:100%;justify-content:center;margin-top:22px}
.est-ask{margin-top:16px;display:inline-flex}