/* Add-ons page */

/* Catalog: two plan groups, then the importer and the plans */
.catalog { padding-top: 104px; }
.group + .group { margin-top: 96px; }

/* The essentials tray. The list is a subgrid of it, and each card takes three of its rows (name, line, capabilities), so every row lines up across the tray. The template sets --rows-3, --rows-2 and --rows-1 (and --note-* for the tray with the note) from the card count. */
.catalog .tray { --rows: var(--rows-3); --note: var(--note-3); margin-top: 32px; }
.addon-list {
  display: grid;
  grid-column: 1 / -1;
  grid-row: 1 / span var(--rows);
  grid-template-columns: subgrid;
  grid-template-rows: subgrid;
}
.addon {
  grid-row: span 3;
  grid-template-rows: subgrid;
  row-gap: 0;
}
.addon .caps { grid-column: 1 / -1; margin-top: 20px; }
.addon .caps li:last-child { padding-bottom: 0; }

/* A card that links to its page lifts, carries an arrow and is one target; the others only change their ring */
.addon.is-link { position: relative; cursor: pointer; }
.addon-link::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: calc(var(--tray-r) - var(--tray-pad));
}
.addon-link .ico {
  display: inline-block;
  margin-left: 6px;
  font-size: 16px;
  vertical-align: -2px;
  color: var(--ink-2);
  stroke-width: 2;
  transition: transform .2s var(--ease), color .2s;
}
@media (hover: hover) and (pointer: fine) {
  .addon:not(.is-link):hover,
  .addon:not(.is-link):hover .feat-tile { transform: none; }
  .addon.is-link:hover .addon-link .ico { color: var(--ink); transform: translateX(3px); }
}

/* The sixth cell of the second tray: a note, not an add-on, so it has no card or tile */
.addon-note {
  grid-column: -2 / -1;
  grid-row: var(--note) / span 3;
  display: grid;
  align-content: center;
  padding: 32px;
  border-radius: calc(var(--tray-r) - var(--tray-pad));
  box-shadow: inset 0 0 0 1px var(--line-2);
  text-align: center;
  color: var(--ink-2);
}
.addon-note p { max-width: 20em; margin-inline: auto; text-wrap: balance; }
.addon-note strong {
  display: block;
  margin-bottom: 6px;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--ink);
}

/* Importer: the one free add-on, as a wide card with the same tile */
.importer {
  --tile: 32px;
  --hang: 0px;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  column-gap: 64px;
  margin-top: 112px;
  padding: 48px;
  border-radius: var(--r-xl);
  background: linear-gradient(180deg, #fff, #fbfaf8);
  box-shadow: var(--shadow-frame);
}
/* The chip follows the heading in the source and sits beside the tile on screen */
.importer-main {
  display: grid;
  grid-template-columns: var(--tile) minmax(0, 1fr);
  align-content: start;
  align-items: center;
  column-gap: 12px;
}
.importer .feat-tile { grid-area: 1 / 1; }
.chip-free {
  grid-area: 1 / 2;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--accent-tint);
  box-shadow: inset 0 0 0 1px rgba(59, 48, 168, .16);
  font-size: var(--fs-1);
  font-weight: 600;
  line-height: 1;
  color: var(--accent);
  white-space: nowrap;
}
.importer h2 {
  grid-area: 2 / 1 / 3 / -1;
  max-width: 11em;
  margin-top: 24px;
  font-size: var(--fs-4);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -.025em;
}
.importer-text { grid-area: 3 / 1 / 4 / -1; max-width: 30em; margin-top: 12px; font-size: 16px; line-height: 1.65; color: var(--ink-2); }
.importer-cta { grid-area: 4 / 1 / 5 / -1; justify-self: start; margin-top: 24px; }
.importer-side { display: grid; align-content: end; justify-items: start; }
.importer .caps { width: 100%; }
.importer .caps li:last-child { border-bottom: 1px solid var(--line-2); }
.importer-note { margin-top: 14px; font-size: var(--fs-1); color: var(--ink-2); }

/* Plans: which plan carries which add-on. Each tier spans four strip rows (name, price, Free's line, list), so the lists in a row start on one line. */
.plans { margin-top: 112px; }
.plan-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 32px;
  border-radius: var(--r-xl);
  background: linear-gradient(180deg, #fff, #fcfcfb);
  box-shadow: var(--shadow-frame);
}
/* The switch carries its margin, so no gap is left where script is off and the switch is hidden */
.plans-switch .currency-switch { margin-top: 28px; }
html[data-currency] .plans-switch + .plan-strip { margin-top: 20px; }
.tier { display: grid; grid-row: span 4; grid-template-rows: subgrid; padding: 28px 28px 32px; }
.tier + .tier { border-left: 1px solid var(--line); }
.tier h3 { font-size: var(--fs-2); font-weight: 600; letter-spacing: -.01em; }
.tier-note { margin-top: 8px; color: var(--ink-2); }
.tier .caps { grid-row: 4; margin-top: 20px; }

/* Below 1100px four tiers wrap their items, so the strip goes two by two */
@media (max-width: 1100px) {
  .importer { column-gap: 48px; padding: 40px; }
  .plan-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tier:nth-child(3) { border-left: 0; }
  .tier:nth-child(n + 3) { border-top: 1px solid var(--line); }
}

/* Two columns up to 1179px: a third column here wraps nearly every capability. Below three columns the note becomes a one-paragraph row under the cards. */
@media (max-width: 1179px) {
  .catalog .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .catalog .tray { --rows: var(--rows-2); --note: var(--note-2); }
  .addon-note { grid-column: 1 / -1; grid-row: var(--note); padding: 16px 24px; }
  .addon-note p { max-width: none; }
  .addon-note strong { display: inline; margin: 0; }
}

/* An odd last card spans both columns, as in the homepage essentials, with its capabilities on the second column's line */
@media (min-width: 881px) and (max-width: 1179px) {
  .addon:last-child:nth-child(odd) { grid-column: 1 / -1; grid-template-columns: var(--tile) minmax(0, 1fr) calc(50% - var(--tray-pad) / 2 - var(--pad)); }
  .addon:last-child:nth-child(odd) h3 { grid-column: 2; }
  .addon:last-child:nth-child(odd) p { grid-column: 1 / 3; }
  .addon:last-child:nth-child(odd) .caps { grid-column: 3; grid-row: 1 / -1; margin: 0; }
  .addon:last-child:nth-child(odd) .caps li:first-child { border-top: 0; padding-top: 0; }
}

@media (max-width: 880px) {
  .catalog { padding-top: 88px; }
  .group + .group { margin-top: 80px; }
  .importer { grid-template-columns: minmax(0, 1fr); margin-top: 96px; }
  .importer-side { margin-top: 32px; }
  .plans { margin-top: 96px; }

  /* One column, every card wide */
  .catalog .feature-grid { grid-template-columns: minmax(0, 1fr); }
  .catalog .tray { --rows: var(--rows-1); --note: var(--note-1); }
  .addon { grid-template-columns: var(--tile) minmax(0, 1fr) minmax(0, 1.3fr); }
  .addon h3 { grid-column: 2; }
  .addon p { grid-column: 1 / 3; }
  .addon .caps { grid-column: 3; grid-row: 1 / -1; margin: 0 0 0 24px; }
  .addon .caps li:first-child { border-top: 0; padding-top: 0; }
}

/* Below 768px two columns of text get too narrow, so the capabilities go back under the copy */
@media (max-width: 767px) {
  .tray .addon { grid-template-columns: var(--tile) minmax(0, 1fr); }
  .tray .addon p { grid-column: 1 / -1; }
  .tray .addon .caps { grid-column: 1 / -1; grid-row: auto; margin: 20px 0 0; }
  .tray .addon .caps li:first-child { border-top: 1px solid var(--line-2); padding-top: 10px; }
}

/* Phone: the essentials' phone tray and card padding come from stone.css */
@media (max-width: 560px) {
  .addon-note { padding: 16px 20px; }

  .catalog { padding-top: 72px; }
  .group + .group { margin-top: 64px; }
  .catalog .group-head { padding-top: 16px; }
  .catalog .tray { margin-top: 24px; }
  .tray .addon .caps { margin-top: 16px; }

  .importer { margin-top: 72px; padding: 28px 20px 24px; border-radius: 20px; }
  .importer h2 { margin-top: 24px; }
  .plans { margin-top: 72px; }
  .plan-strip { grid-template-columns: minmax(0, 1fr); border-radius: 20px; }
  .tier {
    grid-template-columns: 104px minmax(0, 1fr);
    grid-template-rows: auto auto 1fr;
    column-gap: 16px;
    padding: 20px;
  }
  .tier:nth-child(n) { border-left: 0; }
  .tier + .tier { border-top: 1px solid var(--line); }
  .tier h3, .tier-note { grid-column: 1; }
  .tier .price { grid-column: 1; align-self: start; flex-direction: column; align-items: start; font-size: 26px; }
  .tier .caps { grid-column: 2; grid-row: 1 / -1; margin-top: 0; }
  .tier .caps li:first-child { border-top: 0; padding-top: 0; }
  .plans .plans-foot { padding-inline: 0; }
}

/* Below 390px the list column is too narrow for the longer items, so each plan stacks its list under its name and price */
@media (max-width: 389px) {
  .tier { display: block; }
  .tier .price { flex-direction: row; align-items: baseline; }
  .tier .caps { margin-top: 20px; }
  .tier .caps li:first-child { border-top: 1px solid var(--line-2); padding-top: 10px; }
}