/* Pricing. Loaded after inner.css. Pricing holds a bright morning sky (site.js SCENES), so instead of the inner pages'
   night glass its surfaces are the site's dense day glass, with ink type, and white type only where it sits straight on
   the sky (with [data-dim] opening the clouds behind it).

   The page has one idea: a rate card you can read in one look. Three plan heads sit side by side, then what each tier
   adds is laid out as a staircase, every band under exactly the plans that include it, so reading down a column is
   everything in that plan. Pro, the recommended plan, is cut from the notch's own material and hangs from the top edge
   of the card the way the notch hangs from the top of the screen. Everything else stays quiet. What it costs today
   (the beta terms) is said first, before any planned price, in the same plain words as the terms. */

.inner .page { --rg: 12px; --rp: clamp(20px, 2.3vw, 32px); }
/* the homepage's section rhythm (site.css: main > section) is for full-screen chapters; here sections are blocks */
.inner main > section.now, .inner main > section.rate, .inner main > section.pq { padding: 0; }

/* day glass and ink for every pricing surface (inner.css sets night glass and light ink for inner pages) */
.inner .page .rate .slab, .inner .page .pq .faq {
  --ink: #0E0F12; --ink-2: rgba(14, 15, 18, .72); --ink-3: rgba(14, 15, 18, .58); --rule: rgba(14, 15, 18, .09); --accent: #3a60b5; --focus: #3a60b5;
  color: var(--ink); background: rgba(246, 248, 253, .9); border: 1px solid var(--glass-line); box-shadow: var(--glass-shadow); }
.inner .page .rate .slab :focus-visible, .inner .page .pq .faq :focus-visible { outline-color: var(--accent); }

/* ---------------------------------------------------------------- today: the beta terms, on the sky under the lede */
.inner .now { max-width: 1080px; margin: clamp(44px, 7vh, 76px) auto 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(28px, 5vw, 72px); color: #fff; }
.now-fact { padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .5); }
.now-k { font-size: 15px; font-weight: 500; letter-spacing: -.01em; line-height: 1.3; }
.now-big { margin-top: 12px; font-size: clamp(25px, 2.35vw, 34px); font-weight: 500; letter-spacing: -.035em; line-height: 1.12; text-wrap: balance; }
.now-sm { margin-top: 12px; max-width: 27em; font-size: 16.5px; line-height: 1.5; text-wrap: pretty; }
.now-act { grid-column: 1 / -1; margin-top: clamp(28px, 4vh, 40px); display: flex; align-items: center; flex-wrap: wrap; gap: 14px 20px; }
.now-act .pill { height: 48px; padding: 0 24px; font-size: 15px; text-shadow: none; }
.now-act span { font-size: 15.5px; }

/* ---------------------------------------------------------------- the rate card: one grid, three plan columns */
.inner .rate { max-width: 1180px; margin-top: clamp(96px, 15vh, 150px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--rg); }
.rate [data-rv] { filter: none; } /* large glass: rise and fade only, no blur on big text */

.rate-cap { grid-column: 1 / -1; display: flex; align-items: baseline; justify-content: space-between; gap: 10px 32px; flex-wrap: wrap; padding: 0 var(--rp) 16px; color: #fff; }
.rate-cap h2 { font-size: clamp(40px, 4vw, 60px); font-weight: 500; letter-spacing: -.05em; line-height: .98; }
.rate-cap p { font-size: 15.5px; max-width: 31em; text-wrap: balance; }

/* Coming: planned, not in the beta. One small outlined word, never wrapped into a lozenge. */
.soon-tag { display: inline-block; margin-left: 6px; padding: 4px 7px; border-radius: 99px; font: 500 11px/1 var(--mono); letter-spacing: 0; white-space: nowrap; vertical-align: 1px;
  color: var(--accent); box-shadow: inset 0 0 0 1px rgba(58, 96, 181, .3); }
.rate-cap .soon-tag { margin: 0 2px; color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .6); text-shadow: none; }

/* plan heads: one sheet of glass, the three plans aligned on shared rows (name, price, unit, line) */
.rate-heads { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; grid-template-rows: repeat(4, auto); }
.rate-plan { position: relative; isolation: isolate; grid-row: span 4; display: grid; grid-template-rows: subgrid; padding: 30px var(--rp) 40px; }
.rate-plan h3 { display: flex; align-items: center; gap: 10px; min-height: 26px; font-size: 17px; font-weight: 500; letter-spacing: -.015em; }
.rate-amt { margin-top: 26px; font-size: clamp(60px, 5.8vw, 92px); font-weight: 500; letter-spacing: -.06em; line-height: .86; }
.rate-amt .cur { display: inline-block; margin-right: .04em; font-size: .4em; letter-spacing: -.02em; vertical-align: top; transform: translateY(.18em); color: var(--ink-3); }
.rate-unit { margin-top: 16px; font-size: 14.5px; line-height: 1.4; color: var(--ink-2); }
.rate-alt { display: block; margin-top: 4px; color: var(--ink-3); }
.rate-for { margin-top: 22px; max-width: 18em; font-size: 16px; line-height: 1.45; color: var(--ink-2); text-wrap: pretty; }
.rate-tag { padding: 5px 9px; border-radius: 99px; font-size: 12px; font-weight: 500; letter-spacing: 0; line-height: 1; background: rgba(143, 178, 245, .2); color: var(--glacier-300); }

/* Pro is the notch: pure black, hanging from the top edge of the card with the notch's concave shoulders */
.rate-pro { color: #F4F6FB; --ink-2: rgba(244, 246, 251, .74); --ink-3: rgba(244, 246, 251, .52); }
.rate-pro::before { content: ""; position: absolute; inset: -1px 0 14px; z-index: -1; border-radius: 0 0 30px 30px; background: #000;
  box-shadow: 0 34px 70px -28px rgba(14, 34, 96, .55); }
.rate-pro::after { content: ""; position: absolute; left: -16px; right: -16px; top: -1px; height: 16px; z-index: -1; pointer-events: none;
  background: radial-gradient(circle at 0 100%, transparent 15.5px, #000 16px) 0 0 / 16px 16px no-repeat,
              radial-gradient(circle at 100% 100%, transparent 15.5px, #000 16px) 100% 0 / 16px 16px no-repeat; }
/* the one moment on the page: when the card arrives, Pro opens downward like the notch, then its words settle in */
.js .rate-heads[data-rv] .rate-pro::before { clip-path: inset(0 -120px 100% -120px); transition: clip-path 1100ms var(--enter) 260ms; }
.js .rate-heads[data-rv] .rate-pro::after { opacity: 0; transition: opacity 400ms var(--enter) 200ms; }
.js .rate-heads[data-rv] .rate-pro > * { opacity: 0; transition: opacity 700ms var(--enter) 760ms; }
.js .rate-heads[data-rv].in .rate-pro::before { clip-path: inset(0 -120px -120px -120px); }
.js .rate-heads[data-rv].in .rate-pro::after, .js .rate-heads[data-rv].in .rate-pro > * { opacity: 1; }

/* the staircase: in every plan (all three columns), Pro adds (Pro and Max), Max adds (Max) */
.rate-step { display: grid; grid-template-columns: subgrid; align-content: start; padding-bottom: 10px; border-radius: var(--r-card, 28px); }
.rate-s1 { grid-column: 1 / -1; }
.rate-s2 { grid-column: 2 / -1; }
.rate-s3 { grid-column: 3 / -1; }
.rate-sh { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 24px var(--rp) 12px; }
.rate-sh h3 { font-size: 17px; font-weight: 500; letter-spacing: -.015em; }
.rate-step ul { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; }
.rate-step li { position: relative; padding: 14px var(--rp) 15px; font-size: 15px; line-height: 1.45; color: var(--ink-2); text-wrap: pretty; }
/* each row's rule runs on through the gutter, so a band reads as one sheet, not three columns */
.rate-step li::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--rule); }
.rate-s1 li:not(:nth-child(3n + 1))::before, .rate-s2 li:nth-child(2n)::before { left: calc(var(--rg) * -1); }
.rate-step li.soon { color: var(--ink-3); }
/* which plans a band belongs to; the staircase already says so on wide screens, so the chips are for phones */
.rate-in { display: flex; gap: 4px; }
.rate-in i { display: none; padding: 5px 9px; border-radius: 99px; font-size: 12px; font-style: normal; font-weight: 500; line-height: 1; color: rgba(14, 15, 18, .32); box-shadow: inset 0 0 0 1px rgba(14, 15, 18, .1); }
.rate-in i.on { color: var(--accent); background: rgba(58, 96, 181, .1); box-shadow: none; }

/* Teams: priced per seat, so it sits apart from the per-person plans, on the same three columns */
.rate-teams { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: start; margin-top: calc(40px - var(--rg)); border-radius: var(--r-card, 28px); }
.rate-teams > * { padding: 30px var(--rp) 32px; }
.rate-tm h3 { font-size: 17px; font-weight: 500; letter-spacing: -.015em; }
.rate-tm .rate-for { margin-top: 12px; }
.rate-teams .rate-amt { margin-top: 0; font-size: clamp(48px, 4.4vw, 68px); }
.rate-teams .rate-unit { margin-top: 12px; }
.rate-terms li { padding: 12px 0; border-top: 1px solid var(--rule); font-size: 15px; line-height: 1.45; color: var(--ink-2); }
.rate-terms li:first-child { padding-top: 0; border-top: 0; }

/* the terms that apply to every plan, in full, as four plain statements */
.rate-notes { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--rg); padding: 6px 0 4px; border-radius: var(--r-card, 28px); }
.rate-notes li { padding: 20px var(--rp) 22px; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); text-wrap: pretty; }
.rate-notes li + li { box-shadow: -1px 0 0 0 var(--rule); }

/* ---------------------------------------------------------------- questions: the heading beside the answers */
.inner .pq { max-width: 1180px; margin-top: clamp(120px, 18vh, 190px); display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--rg); align-items: start; }
.inner .pq .sub-h { margin: 0; padding: 18px var(--rp) 0; }
.inner .pq .sub-h h2 { margin: 0; font-size: clamp(40px, 4vw, 60px); line-height: .98; max-width: 6em; }
.inner .pq .faq { margin: 0; max-width: none; }
.inner .pq .faq summary::after { filter: none; }

/* ---------------------------------------------------------------- tablets: three columns get narrow */
@media (max-width: 1100px) {
  .rate-notes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rate-notes li:nth-child(3) { box-shadow: none; }
  .rate-notes li:nth-child(n + 3) { border-top: 1px solid var(--rule); }
  .rate-amt { font-size: clamp(52px, 6.4vw, 80px); }
}
@media (max-width: 960px) {
  .inner .pq { grid-template-columns: minmax(0, 1fr); }
  .inner .pq .sub-h { padding-top: 0; }
  .inner .pq .sub-h h2 { max-width: none; }
}

/* ---------------------------------------------------------------- phones: the staircase becomes a stack */
@media (max-width: 760px) {
  .inner .page { --rg: 10px; --rp: 20px; }
  .inner .now { grid-template-columns: minmax(0, 1fr); row-gap: 28px; }
  .now-act { margin-top: 4px; }
  .now-act .pill { width: 100%; }

  .inner .rate { grid-template-columns: minmax(0, 1fr); }
  .rate-cap { padding: 0 4px 10px; }
  .rate-heads, .rate-step, .rate-step ul, .rate-teams { grid-template-columns: minmax(0, 1fr); }
  .rate-heads { grid-template-rows: none; padding: 6px; }
  .rate-plan { grid-row: auto; grid-template-rows: none; padding: 22px 16px 24px; }
  .rate-amt { margin-top: 18px; font-size: 56px; }
  .rate-for { margin-top: 14px; max-width: none; }
  .rate-unit { margin-top: 12px; }
  .rate-unit:empty { display: none; }
  /* no top edge to hang from in a stack: Pro is a black panel set into the card */
  .rate-pro::before { inset: 0; border-radius: 24px; }
  .rate-pro::after { display: none; }
  .rate-s1, .rate-s2, .rate-s3, .rate-teams { grid-column: 1; }
  .rate-sh { padding: 20px var(--rp) 12px; }
  .rate-s1 li:not(:nth-child(3n + 1))::before, .rate-s2 li:nth-child(2n)::before { left: 0; }
  .rate-in i { display: inline-block; }
  .rate-teams { margin-top: 22px; }
  .rate-teams > * { padding: 22px var(--rp) 0; }
  .rate-teams > :last-child { padding-bottom: 24px; }
  .rate-notes { grid-template-columns: minmax(0, 1fr); padding: 4px 0; }
  .rate-notes li { padding: 16px var(--rp); }
  .rate-notes li + li { box-shadow: none; border-top: 1px solid var(--rule); }
}
@media (max-width: 380px) {
  .rate-sh { flex-wrap: wrap; }
}