.nabry-plus-copy {
  inline-size: min(100%, 48rem);
}

.nabry-plus-intro .legal-lede {
  max-inline-size: 38rem;
  margin-block-end: 1.25rem;
}

.nabry-plus-jump {
  display: inline-block;
  padding-block: .5rem;
  font-weight: 700;
}

.nabry-plus-benefits {
  margin-block-start: 3.5rem;
  scroll-margin-block-start: 2rem;
}

.nabry-plus-benefits ul {
  display: grid;
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
}

.nabry-plus-benefits li {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding-block: 1.5rem;
  border-block-start: 1px solid rgb(16 38 83 / 15%);
}

.nabry-plus-benefits .nabry-icon {
  flex: 0 0 auto;
  inline-size: 1.3rem;
  block-size: 1.3rem;
  margin-block-start: .2rem;
  color: var(--color-orange-dark);
}

.nabry-plus-benefits h3 {
  margin: 0 0 .5rem;
  font-size: 1.05rem;
}

.nabry-plus-benefits p,
.nabry-plus-details p,
.nabry-plus-action p {
  margin: 0;
  color: var(--color-navy-soft);
  line-height: 1.65;
}

.nabry-plus-comparison table {
  inline-size: 100%;
  margin-block-start: 1.5rem;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: .86rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.nabry-plus-comparison th,
.nabry-plus-comparison td {
  padding: 1rem .65rem;
  border-block-end: 1px solid rgb(16 38 83 / 15%);
  text-align: start;
  vertical-align: top;
}

.nabry-plus-comparison th:first-child {
  inline-size: 40%;
  padding-inline-start: 0;
}

.nabry-plus-comparison th:last-child,
.nabry-plus-comparison td:last-child {
  background: rgb(252 121 83 / 9%);
}

.nabry-plus-comparison td {
  color: var(--color-navy-soft);
}

.nabry-plus-note {
  color: var(--color-navy-soft);
  font-size: .8rem;
  line-height: 1.6;
}

.nabry-plus-pricing {
  margin-block-start: 3rem;
}

.nabry-plus-pricing dl {
  margin-block: 1.25rem;
}

.nabry-plus-pricing dl > div {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .25rem 1rem;
  padding-block: 1rem;
  border-block-start: 1px solid rgb(16 38 83 / 15%);
}

.nabry-plus-pricing dt,
.nabry-plus-pricing dd {
  margin: 0;
}

.nabry-plus-pricing dt,
.nabry-plus-pricing strong {
  color: var(--color-navy);
  font-weight: 780;
}

.nabry-plus-pricing .nabry-plus-pricing-note {
  color: var(--color-navy-soft);
  font-size: .8rem;
}

.nabry-plus-details p + p {
  margin-block-start: 1rem;
}

.nabry-plus-action {
  margin-block-start: 3rem;
  padding-block-start: 1rem;
  border-block-start: 1px solid rgb(16 38 83 / 15%);
}

.legal-copy .nabry-plus-action .primary-button {
  display: inline-flex;
  background: var(--color-orange);
  color: var(--color-white);
  text-decoration: none;
}

.nabry-plus-action > .primary-button,
.nabry-plus-action > form {
  margin-block-start: 1.25rem;
}

.nabry-plus-plan-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem;
  margin-block-start: 1.25rem;
}

/* Nabry+ and Nabry+ Family plans side by side, and the switch between them. */
.nabry-plus-pricing h3,
.nabry-plus-plan-heading,
.nabry-plus-switch h3 {
  margin-block: 1.75rem .35rem;
  color: var(--color-navy);
  font-size: 1rem;
}

.nabry-plus-pricing h3 + p {
  margin: 0;
  color: var(--color-navy-soft);
  line-height: 1.7;
}

.nabry-plus-switch {
  margin-block-start: 2rem;
  padding-block-start: 1rem;
  border-block-start: 1px solid rgb(16 38 83 / 15%);
}

.nabry-plus-switch p + p {
  margin-block-start: .75rem;
}

.nabry-plus-secondary-button {
  min-block-size: 3rem;
  padding-inline: 1.15rem;
  border: 1px solid var(--color-orange-dark);
  border-radius: .65rem;
  background: transparent;
  color: var(--color-navy);
  font: inherit;
  font-size: .8rem;
  font-weight: 780;
  cursor: pointer;
}

.nabry-plus-manage-button {
  min-block-size: 3.15rem;
  margin-block-start: 1.25rem;
  padding-inline: 1.15rem;
  border: 1px solid var(--color-navy);
  border-radius: .65rem;
  background: transparent;
  color: var(--color-navy);
  font: inherit;
  font-size: .78rem;
  font-weight: 780;
  cursor: pointer;
}

/* In the iPhone app, an App Store plan's Change plan and Manage subscription
   are links the app opens as Apple's screens, outlined like the button. */
a.nabry-plus-manage-button {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.nabry-plus-plan-actions .nabry-plus-manage-button {
  margin-block-start: 0;
}

/* Where a plan's billing is managed, under the action above it. */
.nabry-plus-action .nabry-plus-billing-note {
  margin-block-start: 1.25rem;
}

.nabry-plus-copy :is(a, button):focus-visible {
  outline: 2px solid var(--color-navy);
  outline-offset: 4px;
}

/* Tells a visitor who finished paying on a second, signed-out device where to
   continue, without saying anything about any checkout or account. */
.nabry-plus-return-note {
  margin: 0 0 2.5rem;
  padding: 1rem 1.1rem;
  border-inline-start: .2rem solid var(--color-orange);
  border-radius: .35rem;
  background: var(--color-panel-soft);
  color: var(--color-navy);
  line-height: 1.55;
}

/* Stripe's embedded Checkout is about 1,240px tall with the card form open,
   so the dialog keeps its close button in a header row and scrolls the
   Checkout inside it. */
.account-modal.nabry-plus-checkout-modal {
  background: var(--color-white);
}

.account-modal.nabry-plus-checkout-modal[open] {
  display: flex;
  flex-direction: column;
}

.nabry-plus-checkout-modal .account-modal-close-form {
  position: static;
  align-self: flex-end;
  margin: .75rem .75rem 0;
}

.nabry-plus-checkout-body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-block-size: 0;
}

.nabry-plus-checkout-body > :is(.nabry-plus-checkout-frame, .nabry-plus-checkout-mount) {
  display: block;
  flex: 1 1 auto;
  min-block-size: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.nabry-plus-checkout-body > [hidden] {
  display: none;
}

.nabry-plus-checkout-mount {
  padding: 0 .5rem .5rem;
}

.nabry-plus-checkout-mount:focus,
.nabry-plus-checkout-status:focus {
  outline: none;
}

/* "Loading secure checkout…" and the other checkout messages share the close
   button's row, so the space above them matches the space below, with room
   on the right for the button. */
.nabry-plus-checkout-status {
  margin-block-start: -3.75rem;
  padding: 2rem 4.75rem 2rem clamp(1.75rem, 5vw, 2.5rem);
  color: var(--color-navy);
  font-weight: 700;
  line-height: 1.5;
}

.nabry-plus-checkout-status p {
  margin: 0;
}

.nabry-plus-checkout-status .nabry-plus-checkout-error {
  padding: .75rem .9rem;
  border-inline-start: .2rem solid var(--color-orange-dark);
  border-radius: .35rem;
  background: var(--color-orange-soft);
  font-size: .84rem;
}

.nabry-plus-checkout-step {
  display: grid;
  gap: .9rem;
  padding: 0 clamp(1.35rem, 4vw, 2rem) clamp(1.35rem, 4vw, 2rem);
}

.nabry-plus-checkout-step h2 {
  margin: 0;
  font-size: 1.35rem;
  line-height: 1.2;
}

.nabry-plus-checkout-step p {
  margin: 0;
  color: var(--color-navy-soft);
  line-height: 1.6;
}

.nabry-plus-checkout-step .section-kicker {
  color: var(--color-orange-dark);
}

.nabry-plus-checkout-step .nabry-plus-plan-actions {
  margin-block-start: .35rem;
}

.nabry-plus-checkout-step :is(.primary-button, form) {
  justify-self: start;
}

.nabry-plus-checkout-step a:not(.primary-button),
.nabry-plus-checkout-status a {
  color: var(--color-navy);
  text-underline-offset: .18rem;
}

.nabry-plus-checkout-benefits a {
  font-weight: 700;
  white-space: nowrap;
}

/* Choosing a plan: each billing option is a selectable row, grouped by
   plan, and one Continue button starts checkout. The chosen row takes the
   Nabry orange edge and soft fill. */
.nabry-plus-picker {
  display: grid;
  gap: 1rem;
  inline-size: 100%;
  max-inline-size: 30rem;
  margin-block-start: .5rem;
}

.nabry-plus-checkout-step .nabry-plus-picker {
  justify-self: stretch;
  max-inline-size: none;
}

.nabry-plus-picker-group {
  display: grid;
  gap: .5rem;
  min-inline-size: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.nabry-plus-picker-group legend {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .15rem .5rem;
  margin-block-end: .5rem;
  padding: 0;
}

.nabry-plus-picker-name {
  color: var(--color-navy);
  font-size: .95rem;
  font-weight: 780;
}

.nabry-plus-picker-note {
  color: var(--color-navy-soft);
  font-size: .82rem;
}

.nabry-plus-option {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: .8rem;
  min-block-size: 3.4rem;
  padding: .7rem 1rem;
  border: .0625rem solid var(--color-line);
  border-radius: .75rem;
  background: var(--color-white);
  color: var(--color-navy);
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}

.nabry-plus-option:hover {
  border-color: var(--color-orange);
}

.nabry-plus-option:has(input:checked) {
  border-color: var(--color-orange);
  background: var(--color-orange-soft);
  box-shadow: inset 0 0 0 .0625rem var(--color-orange);
}

.nabry-plus-option:has(input:focus-visible) {
  outline: .125rem solid var(--color-orange-dark);
  outline-offset: .125rem;
}

.nabry-plus-option input {
  inline-size: 1.15rem;
  block-size: 1.15rem;
  margin: 0;
  accent-color: var(--color-orange-dark);
}

.nabry-plus-option-interval {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  font-weight: 700;
}

.nabry-plus-option-savings {
  padding: .2rem .5rem;
  border-radius: 999px;
  background: var(--color-logo-purple);
  color: var(--color-white);
  font-size: .7rem;
  font-weight: 780;
  letter-spacing: .01em;
  white-space: nowrap;
}

.nabry-plus-option-price {
  color: var(--color-navy);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.nabry-plus-option-price strong {
  font-size: 1.1rem;
  font-weight: 800;
}

.nabry-plus-option-price span {
  color: var(--color-navy-soft);
  font-size: .82rem;
}

.nabry-plus-option-price small {
  display: block;
  color: var(--color-navy-soft);
  font-size: .74rem;
  text-align: end;
}

.nabry-plus-picker-test {
  color: var(--color-navy-soft);
  font-size: .8rem;
}

.nabry-plus-picker .nabry-plus-continue {
  inline-size: 100%;
  font-size: .9rem;
}

/* The renewal terms sit right above the button that agrees to them, in
   full-contrast text so they read as part of the offer, not small print. */
.nabry-plus-checkout-step .nabry-plus-renewal,
.nabry-plus-renewal {
  color: var(--color-navy);
  font-size: .875rem;
  line-height: 1.55;
}

@media (prefers-reduced-motion: reduce) {
  .nabry-plus-option {
    transition: none;
  }
}

/* Below 38rem the checkout becomes a full-height sheet. */
@media (max-width: 37.999rem) {
  .account-modal.nabry-plus-checkout-modal {
    inline-size: 100vw;
    max-inline-size: none;
    block-size: 100dvh;
    max-block-size: none;
    margin: 0;
    border: 0;
    border-radius: 0;
  }
}