/* /pricing — the plans, the comparison table, the FAQ, and the last call to
   action. Each section is a .rw row of four columns: three plan columns and
   the --side column. The plan cards use subgrid so that their rows line up. */

.pg {
  grid-template-columns: repeat(3, minmax(0, 1fr)) var(--side);
}

/* ----- Section nav (the crumb row) ----- */
:root {
  --pn: 44px;
}
.pn {
  position: sticky;
  top: var(--hdr);
  z-index: 15;
  height: var(--pn);
  background: var(--apx-bone);
  box-shadow: 0 1px 0 var(--apx-ink);
}
.cr > .pn-l {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding: 0;
}
.pn-l a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--pn);
  padding: 0 16px;
  border-left: 1px solid var(--hair);
}
.pn-l a:first-child {
  border-left: 0;
}
.pn-l a:hover {
  background: var(--apx-mist);
}
/* The phone crumb link to the table, and the phone plan buttons. */
.pn-c,
.pt {
  display: none;
}
#plans,
#compare,
#faq,
#faq-vpc {
  scroll-margin-top: calc(var(--hdr) + var(--pn));
}

/* ----- Plans ----- */
.plans {
  grid-template-rows: auto auto auto 1fr auto;
}
.p-in {
  grid-row: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 32px var(--pad) 40px;
}
.p-in h1 {
  margin: 0;
  font: 500 clamp(40px, 3.8vw, 60px) / 0.95 var(--font-display);
  letter-spacing: -0.028em;
}
.p-in h1 .bl {
  color: var(--apx-blue);
}
.p-in > p {
  max-width: 34ch;
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-secondary);
  text-wrap: pretty;
}
.p-in .p-inv {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 36ch;
  padding: 12px 14px;
  border: 1px solid var(--apx-ink);
  font-size: 14px;
  line-height: 1.5;
  color: var(--apx-ink);
}
.plan {
  grid-row: 1 / -1;
  display: grid;
  grid-template-rows: subgrid;
  min-width: 0;
}
.plan:not(.sd) {
  border-left: 1px solid var(--hair);
}
.p-h {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  padding: 32px 24px 0;
}
.p-h h2 {
  margin: 0;
  font: 500 28px / 1 var(--font-display);
  letter-spacing: -0.01em;
}
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding: 3px 8px;
  border: 1px solid currentColor;
  font: 500 10px var(--font-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.pill::before {
  content: "";
  width: 6px;
  height: 6px;
  background: var(--apx-blue);
}
.p-t {
  margin: 0;
  padding: 14px 24px 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-secondary);
  text-wrap: pretty;
}
.p-pr {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 28px 24px 24px;
  border-bottom: 1px solid var(--hair);
}
.pr {
  font: 500 52px / 0.95 var(--font-display);
  letter-spacing: -0.025em;
  white-space: nowrap;
}
.p-cap {
  font-size: 13px;
  line-height: 1.45;
}
.pr small {
  margin-left: 6px;
  font: 400 15px var(--font-body);
  letter-spacing: 0;
  color: var(--text-muted);
}
.p-f {
  --ok: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M3 7l3 3 5-6'/%3E%3C/svg%3E");
  --no: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M4 4l6 6M10 4l-6 6'/%3E%3C/svg%3E");
  display: flex;
  flex-direction: column;
  gap: 11px;
  margin: 0;
  padding: 24px 24px 32px;
  list-style: none;
}
.p-f li {
  position: relative;
  padding-left: 24px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--text-secondary);
}
.p-f li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  width: 12px;
  height: 12px;
  background: var(--apx-ink);
  -webkit-mask: var(--ok) center / contain no-repeat;
  mask: var(--ok) center / contain no-repeat;
}
.p-f li.off {
  color: var(--text-muted);
}
.p-f li.off::before {
  background: var(--apx-slate);
  -webkit-mask-image: var(--no);
  mask-image: var(--no);
}
.p-f strong {
  font-weight: 500;
  color: var(--apx-ink);
}
.p-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60px;
  padding: 0 24px;
  border-top: 1px solid var(--hair);
  font-size: 14px;
  font-weight: 500;
  transition:
    background var(--d-fast),
    color var(--d-fast);
}
.p-cta:hover {
  background: var(--apx-ink);
  color: var(--apx-bone);
}
.p-cta:hover .ar {
  transform: translateX(4px);
}
.hot {
  background: var(--apx-ink);
  color: var(--apx-bone);
}
.hot .k {
  color: var(--apx-stone);
}
.hot .p-t,
.hot .p-f li,
.hot .pr small,
.hot .p-cap {
  color: var(--apx-fog);
}
.hot .p-pr {
  border-color: var(--ink-rule);
}
.hot .p-f li::before {
  background: var(--apx-bone);
}
.hot .p-f strong {
  color: var(--apx-bone);
}
.hot .p-f li.off {
  color: var(--apx-stone);
}
.hot .p-f li.off::before {
  background: var(--ink-dim);
}
.hot .p-cta {
  border-top: 0;
  background: var(--apx-bone);
  color: var(--apx-ink);
}
.hot .p-cta:hover {
  background: var(--bone-hover);
  color: var(--apx-ink);
}

/* ----- Comparison table ----- */
/* A <table> with fixed columns: the feature, Free and Standard share the
   width, and Premium is the --side column of the frame. The cells use
   separate borders, so the borders of the sticky header move with it. */
.cmp > .c-hd {
  grid-column: 1 / span 3;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 40px var(--pad) 24px;
}
.c-hd h2 {
  margin: 0;
  font: 500 clamp(32px, 3vw, 44px) / 1 var(--font-display);
  letter-spacing: -0.018em;
  color: var(--apx-ink);
}
.cmp > .c-note {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 8px;
  margin: 0;
  padding: 24px 22px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-secondary);
}
.c-note a {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  min-height: 44px;
  margin: -8px 0;
  color: var(--apx-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.c-t {
  grid-column: 1 / -1;
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
}
.c-cs {
  width: var(--side);
}
.c-t th,
.c-t td {
  min-width: 0;
  padding: 14px 24px;
  border-top: 1px solid var(--hair);
  border-left: 1px solid var(--hair);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
  text-align: left;
  vertical-align: middle;
  color: var(--text-secondary);
  overflow-wrap: break-word;
}
.c-t tr > :first-child {
  border-left: 0;
  padding-left: var(--pad);
}
.c-t .sd {
  border-left-color: var(--apx-ink);
  padding-left: 22px;
}
/* The plan names stay under the top bar and the section nav while the rows
   scroll. */
.c-t thead th {
  position: sticky;
  top: calc(var(--hdr) + var(--pn));
  z-index: 3;
  padding-top: 12px;
  padding-bottom: 12px;
  background: var(--apx-bone);
  border-top: 1px solid var(--apx-ink);
  border-bottom: 1px solid var(--apx-ink);
}
.c-t .c-pl {
  font: 500 17px var(--font-display);
  color: var(--apx-ink);
}
.c-pl span {
  display: block;
  margin-top: 4px;
  font: 11px var(--font-mono);
  letter-spacing: 0.08em;
  color: var(--text-muted);
}
.c-t thead + tbody tr:first-child > * {
  border-top: 0;
}
.c-t .c-g th {
  padding-top: 10px;
  padding-bottom: 10px;
  border-top-color: var(--border-default);
  background: var(--apx-mist);
  font: 500 10px var(--font-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.c-t .c-f {
  font-weight: 500;
  color: var(--apx-ink);
}
.c-f small {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  font-weight: 400;
  color: var(--text-muted);
}
.c-t .y {
  color: var(--apx-leaf);
}
.c-t .no {
  color: var(--apx-slate);
}
.c-t .v {
  font: 13px var(--font-mono);
  color: var(--apx-ink);
}

/* ----- FAQ ----- */
.q-in {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 40px var(--pad);
}
.q-in h2 {
  margin: 0;
  font: 500 clamp(32px, 3vw, 44px) / 1 var(--font-display);
  letter-spacing: -0.018em;
}
.q-in p {
  max-width: 34ch;
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-secondary);
}
.q-l {
  grid-column: 2 / span 2;
  border-left: 1px solid var(--hair);
}
.q-l details {
  border-bottom: 1px solid var(--hair);
}
.q-l details:last-child {
  border-bottom: 0;
}
.q-l summary {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 24px;
  padding: 22px 24px;
  list-style: none;
  cursor: pointer;
  transition: background var(--d-fast);
}
.q-l summary::-webkit-details-marker {
  display: none;
}
.q-l summary:hover {
  background: var(--apx-mist);
}
.q-l h3 {
  margin: 0;
  font: 500 19px / 1.3 var(--font-display);
  letter-spacing: -0.005em;
}
.q-l .tg {
  font: 18px / 1 var(--font-mono);
  color: var(--text-muted);
  transition: transform var(--d-fast) var(--ease-out);
}
.q-l details[open] .tg {
  transform: rotate(45deg);
}
.q-l .ans {
  max-width: 62ch;
  margin: 0;
  padding: 0 24px 24px;
  font-size: 15px;
  line-height: 1.65;
  color: var(--text-secondary);
}
.q-l .ans a {
  color: var(--apx-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.q-s {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.q-s .cell {
  min-height: 96px;
  border-top: 1px solid var(--hair);
}

/* ----- Last call to action ----- */
.x-h {
  grid-column: 1 / span 2;
  padding: 44px var(--pad) 40px;
}
.x-h h2 {
  margin: 0 0 18px;
  font: 500 clamp(40px, 4vw, 60px) / 0.95 var(--font-display);
  letter-spacing: -0.022em;
}
.x-h p {
  max-width: 44ch;
  margin: 0;
  font-size: 16px;
  line-height: 1.55;
  color: var(--text-secondary);
}
.x-h code {
  font: 14px var(--font-mono);
  color: var(--apx-ink);
}
.x-l {
  display: grid;
  grid-template-rows: 1fr 1fr;
  border-left: 1px solid var(--hair);
}
.x-l .cell + .cell {
  border-top: 1px solid var(--hair);
}
.cell .c-top {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.c-top small {
  max-width: 40ch;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--text-muted);
}

/* The frame stacks .rw rows at 1080px. The plans and the table keep their own
   grids, so these rules use .rw.plans and .rw.cmp to come after the frame. */
@media (max-width: 1080px) {
  .rw.plans {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto auto 1fr auto auto auto auto 1fr auto;
  }
  .p-in {
    grid-column: 1 / -1;
    grid-row: 1;
  }
  .plan {
    grid-row: 2 / span 5;
  }
  .rw > .plan.sd {
    grid-column: 1 / -1;
    grid-row: 7 / span 5;
  }
  .rw.cmp {
    grid-template-columns: minmax(0, 1fr);
  }
  .cmp > .c-hd {
    grid-column: 1;
    padding-bottom: 8px;
  }
  .rw.cmp > .c-note {
    padding: 0 var(--pad) 24px;
    border: 0;
  }
  .c-c0 {
    width: 32%;
  }
  .c-cs {
    width: auto;
  }
  .c-t th,
  .c-t td {
    padding-left: 14px;
    padding-right: 14px;
  }
  .c-t .sd {
    padding-left: 14px;
  }
  .q-l,
  .x-h {
    grid-column: auto;
  }
  .q-l,
  .x-l {
    border-left: 0;
    border-top: 1px solid var(--hair);
  }
}
@media (max-width: 720px) {
  .p-h,
  .p-t,
  .p-pr,
  .p-f,
  .p-cta,
  .q-l summary,
  .q-l .ans {
    padding-left: var(--pad);
    padding-right: var(--pad);
  }
  /* The crumb hides on phones. The section nav takes the full row. */
  .rw.pn {
    grid-template-columns: minmax(0, 1fr);
  }
  .pn > div:first-child {
    display: none;
  }
  .cr > .pn-l {
    display: grid;
    border-left: 0;
  }
}
@media (max-width: 640px) {
  .rw.plans {
    grid-template-columns: 1fr;
    grid-template-rows: none;
  }
  .p-in,
  .plan,
  .rw > .plan.sd {
    grid-row: auto;
  }
  .plan {
    grid-template-rows: auto auto auto 1fr auto;
  }
  .plan:not(.sd) {
    border-left: 0;
    border-top: 1px solid var(--hair);
  }
  /* Phones: each feature takes a full row, with its three values in a row
     under it. The sticky header has the three plan names in the same three
     columns. The ARIA roles in the HTML keep the table semantics. */
  .c-t,
  .c-t thead,
  .c-t tbody,
  .c-t tr,
  .c-t th,
  .c-t td {
    display: block;
  }
  .c-t colgroup {
    display: none;
  }
  .c-t thead {
    position: sticky;
    top: calc(var(--hdr) + var(--pn));
    z-index: 3;
    background: var(--apx-bone);
  }
  .c-t thead th {
    position: static;
  }
  .c-t thead tr,
  .c-t tbody tr:not(.c-g) {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .c-t thead th:first-child {
    display: none;
  }
  .c-t th,
  .c-t td {
    padding: 10px 8px;
    font-size: 13px;
  }
  .c-t thead .c-pl {
    font-size: 15px;
  }
  .c-t tr > :first-child,
  .c-t thead th:nth-child(2),
  .c-t tbody td:nth-child(2) {
    border-left: 0;
    padding-left: var(--pad);
  }
  .c-t .sd {
    padding-left: 8px;
  }
  .c-t tbody .c-f {
    grid-column: 1 / -1;
    padding-bottom: 2px;
  }
  .c-t tbody td {
    border-top: 0;
    padding-top: 4px;
    padding-bottom: 12px;
  }
  .c-t .v {
    font-size: 12px;
  }
  .rw.cmp > .c-hd {
    padding: 32px var(--pad) 8px;
  }
  .c-hd h2 {
    font-size: 24px;
  }
}

/* Phones with pricing.js: the crumb row scrolls away and links to the table.
   Plan buttons show one plan, and the table shows the value of one plan for
   each feature. The plan buttons of the table stay under the top bar. */
@media (max-width: 640px) {
  .rw.pn {
    position: relative;
    top: auto;
    grid-template-columns: minmax(0, 1fr) auto;
    box-shadow: none;
  }
  .pn > div:first-child,
  .pn > .pn-c {
    display: flex;
  }
  .cr > .pn-l {
    display: none;
  }
  .pn-c {
    color: var(--apx-ink);
  }
  #plans,
  #compare,
  #faq,
  #faq-vpc {
    scroll-margin-top: var(--hdr);
  }
  .p-in {
    gap: 16px;
    padding: 28px var(--pad) 24px;
  }
  .p-in h1 {
    font-size: 40px;
    line-height: 0.98;
    letter-spacing: -0.03em;
    text-wrap: balance;
  }
  .p-in > p:not(.p-inv) {
    max-width: none;
  }

  .pt:not([hidden]) {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-top: 1px solid var(--apx-ink);
    border-bottom: 1px solid var(--apx-ink);
    background: var(--apx-bone);
  }
  .pt button {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    min-height: 56px;
    padding: 10px 14px;
    border: 0;
    border-right: 1px solid var(--hair);
    background: none;
    font: 500 15px var(--font-display);
    text-align: left;
    color: var(--text-muted);
    cursor: pointer;
    transition:
      background var(--d-fast),
      color var(--d-fast);
  }
  .pt button:last-child {
    border-right: 0;
  }
  .pt small {
    font: 10px var(--font-mono);
    letter-spacing: 0.08em;
  }
  .pt [aria-pressed="true"] {
    background: var(--apx-ink);
    color: var(--apx-bone);
  }
  .pt [aria-pressed="true"] small {
    color: var(--apx-stone);
  }

  /* One plan. The Standard card is bone like the others, because the pressed
     button is the ink mark here. */
  .plans[data-p] .plan {
    display: none;
    border-top: 0;
  }
  .plans[data-p="0"] .plan:nth-of-type(1),
  .plans[data-p="1"] .plan:nth-of-type(2),
  .plans[data-p="2"] .plan:nth-of-type(3) {
    display: grid;
  }
  .plans[data-p] .hot {
    background: none;
    color: inherit;
  }
  .plans[data-p] .hot .k,
  .plans[data-p] .hot .pr small,
  .plans[data-p] .hot .p-f li.off {
    color: var(--text-muted);
  }
  .plans[data-p] .hot :is(.p-t, .p-f li:not(.off), .p-cap) {
    color: var(--text-secondary);
  }
  .plans[data-p] .hot .p-pr {
    border-color: var(--hair);
  }
  .plans[data-p] .hot .p-f li::before {
    background: var(--apx-ink);
  }
  .plans[data-p] .hot .p-f li.off::before {
    background: var(--apx-slate);
  }
  .plans[data-p] .hot .p-f strong {
    color: var(--apx-ink);
  }
  .plans[data-p] .hot .p-cta {
    border-top: 1px solid var(--hair);
    background: none;
    color: inherit;
  }
  .plans[data-p] .hot .p-cta:hover {
    background: var(--apx-ink);
    color: var(--apx-bone);
  }
  .p-h {
    padding-top: 22px;
  }
  .p-h h2 {
    font-size: 26px;
  }
  .p-t {
    padding-top: 10px;
    font-size: 14px;
    line-height: 1.5;
  }
  .p-pr {
    gap: 8px;
    padding-top: 20px;
    padding-bottom: 20px;
  }
  .pr {
    font-size: 46px;
  }
  .pr small {
    font-size: 14px;
  }
  .p-f {
    gap: 10px;
    padding-top: 18px;
    padding-bottom: 22px;
  }
  .p-f li {
    padding-left: 22px;
    font-size: 13.5px;
  }
  .p-f li::before {
    top: 3px;
  }
  .p-cta {
    height: 56px;
  }

  /* The table: a row is the feature and the value of the selected plan. */
  .cmp[data-p] > .pt {
    position: sticky;
    top: var(--hdr);
    z-index: 5;
  }
  .cmp[data-p] .c-t thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }
  .cmp[data-p] .c-t tbody tr:not(.c-g) {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 16px;
    align-items: center;
    padding: 13px var(--pad);
    border-top: 1px solid var(--hair);
  }
  .cmp[data-p] .c-t tbody tr:not(.c-g) > * {
    padding: 0;
    border: 0;
  }
  .cmp[data-p] .c-t tbody td {
    display: none;
    font-size: 13px;
    text-align: right;
  }
  .cmp[data-p="0"] .c-t td:nth-child(2),
  .cmp[data-p="1"] .c-t td:nth-child(3),
  .cmp[data-p="2"] .c-t td:nth-child(4) {
    display: block;
  }
  .cmp[data-p] .c-t tbody .c-f {
    grid-column: auto;
    font-size: 14px;
    line-height: 1.35;
  }
  .cmp[data-p] .c-t .c-g th {
    padding: 10px var(--pad);
  }
  .cmp[data-p] .c-t :is(.v, .y, .no) {
    font: 12.5px var(--font-mono);
  }
  .cmp[data-p] .c-t .y {
    color: var(--apx-ink);
  }
  .cmp[data-p] .c-t .y > [aria-hidden] {
    display: inline-block;
    margin-right: 7px;
    font-size: 9px;
    vertical-align: 1px;
    color: var(--apx-leaf);
  }
  .cmp[data-p] .c-t .y > .vh {
    position: static !important;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
  }
  .cmp[data-p="0"] tr:has(> td:nth-child(2).no) > .c-f,
  .cmp[data-p="1"] tr:has(> td:nth-child(3).no) > .c-f,
  .cmp[data-p="2"] tr:has(> td:nth-child(4).no) > .c-f {
    color: var(--text-muted);
  }

  .q-in {
    gap: 12px;
    padding: 32px var(--pad) 20px;
  }
  .q-in h2,
  .rw.cmp .c-hd h2 {
    font-size: 32px;
  }
  .q-l summary {
    padding-top: 18px;
    padding-bottom: 18px;
  }
  .q-l h3 {
    font-size: 17px;
  }
  .q-l .ans {
    font-size: 14px;
    line-height: 1.6;
  }
  .q-s .cell {
    min-height: 0;
    padding: 18px var(--pad);
  }
  .q-s .cell > .k {
    display: none;
  }

  .x-h {
    padding: 36px var(--pad) 28px;
  }
  .x-h h2 {
    margin-bottom: 14px;
    font-size: 40px;
  }
  .x-h p {
    font-size: 15px;
  }
  .x-l {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: none;
  }
  .x-l .cell {
    gap: 14px;
    padding: 16px var(--pad);
  }
  .x-l .cell + .cell {
    border-top: 0;
    border-left: 1px solid var(--hair);
  }
  .x-l .cell .row {
    font-size: 14px;
  }
  .c-top small {
    display: none;
  }
  .cta .a-go {
    min-height: 112px;
    padding: 16px var(--pad);
  }
  .cta .a-go .v {
    font-size: 32px;
  }
  .cta .a-go .ar {
    font-size: 28px;
  }
}
@media (max-width: 360px) {
  .p-in h1 {
    font-size: 34px;
  }
  .pt button {
    padding: 10px;
  }
}