@media only screen and (min-width: 0rem) {
  .db-cards {
    display: grid;
    gap: var(--space3);
    list-style: none;
  }
  .db-card {
    position: relative;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--space3);
    background-color: var(--raised);
    box-shadow: var(--shadow);
  }
  .db-card h3 {
    margin: var(--space2) 0 var(--space1);
  }
  .db-card h3 a {
    color: inherit;
    text-decoration: none;
  }
  .db-card h3 a:after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: var(--radius);
  }
  .db-card:hover h3 a {
    text-decoration: underline;
    -webkit-text-decoration-color: var(--cta);
            text-decoration-color: var(--cta);
    text-decoration-thickness: 2px;
  }
  .db-card .db-more {
    margin-top: var(--space2);
    color: var(--primaryLight);
  }
  .db-badge {
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    border-radius: var(--radiusSmall);
    background-color: var(--band);
    color: var(--primaryLight);
  }
  .db-band .db-badge {
    background-color: var(--page);
  }
}
@media only screen and (min-width: 0rem) and (prefers-reduced-motion: no-preference) {
  .db-card {
    transition: transform 0.2s ease-out;
  }
  .db-card:has(a):hover {
    transform: translateY(-2px);
  }
}
@media only screen and (min-width: 48rem) {
  .db-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media only screen and (min-width: 64rem) {
  .db-cards-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .db-cards-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media only screen and (min-width: 0rem) {
  .db-plans {
    display: grid;
    gap: var(--space3);
    align-items: start;
  }
  .db-plan {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--space4) var(--space3);
    background-color: var(--raised);
    box-shadow: var(--shadow);
  }
  .db-plan h2,
  .db-plan h3 {
    margin-bottom: var(--space1);
    font-size: var(--subheadFontSize);
  }
  .db-plan .db-button {
    width: 100%;
    margin-top: var(--space3);
  }
  .db-price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: var(--space2);
    font-family: var(--headerFont);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--headerColor);
  }
  .db-price .db-figure {
    font-size: var(--displayFontSize);
    line-height: 1em;
  }
  .db-price .db-unit {
    font-size: var(--smallFontSize);
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
  .db-plan-note {
    margin-top: var(--space1);
    font-size: var(--smallFontSize);
  }
  .db-ticks {
    margin-top: var(--space3);
    border-top: 1px solid var(--border);
    padding-top: var(--space3);
    list-style: none;
  }
  .db-ticks li {
    position: relative;
    padding-left: 2rem;
  }
  .db-ticks li + li {
    margin-top: var(--space1);
  }
  .db-ticks li:before {
    content: '';
    position: absolute;
    top: 0.2em;
    left: 0;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    background-color: var(--field);
  }
  .db-ticks li:after {
    content: '';
    position: absolute;
    top: 0.45em;
    left: 0.45rem;
    width: 0.3rem;
    height: 0.55rem;
    border: solid var(--cta);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
  }
  html.dark-mode .db-plan-raised {
    border: 2px solid var(--cta);
  }
  .db-plan-raised {
    border-color: var(--field);
    background-color: var(--field);
    color: var(--fieldMuted);
  }
  .db-plan-raised h2,
  .db-plan-raised h3,
  .db-plan-raised .db-price,
  .db-plan-raised strong {
    color: var(--fieldText);
  }
  .db-plan-raised .db-eyebrow {
    color: var(--cta);
  }
  .db-plan-raised .db-ticks {
    border-color: rgba(247, 248, 251, 0.18);
  }
  .db-plan-raised .db-ticks li:before {
    background-color: rgba(247, 248, 251, 0.12);
  }
}
@media only screen and (min-width: 64rem) {
  .db-plans {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .db-plan-raised {
    margin-top: calc(var(--space3) * -1);
    padding-top: calc(var(--space4) + var(--space3));
  }
}
@media only screen and (min-width: 0rem) {
  .db-split {
    display: grid;
    gap: var(--space4);
    align-items: start;
  }
  .db-split h2 + .db-prose,
  .db-split h2 + p {
    margin-top: var(--space3);
  }
  .db-photo {
    width: 100%;
    max-width: var(--photoMax);
  }
  .db-photo picture,
  .db-photo img {
    display: block;
    width: 100%;
  }
  .db-photo img {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
  }
  .db-photo figcaption {
    margin-top: var(--space1);
    font-size: var(--smallFontSize);
  }
  .db-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space2);
    margin-top: var(--space4);
    border-top: 1px solid var(--border);
    padding-top: var(--space3);
    list-style: none;
  }
  .db-stats .db-figure {
    display: block;
    font-family: var(--headerFont);
    font-size: var(--headerFontSize);
    font-weight: 700;
    line-height: 1em;
    color: var(--headerColor);
  }
  .db-stats span:last-child {
    display: block;
    margin-top: var(--space1);
    font-size: var(--smallFontSize);
    line-height: 1.4em;
  }
}
@media only screen and (min-width: 64rem) {
  .db-split {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .db-split-flip .db-photo {
    order: 2;
    justify-self: end;
  }
}
@media only screen and (min-width: 0rem) {
  .db-faq-list {
    max-width: 52rem;
    border-top: 1px solid var(--border);
  }
  .db-faq {
    border-bottom: 1px solid var(--border);
  }
  .db-faq summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space2);
    padding: var(--space3) 0;
    list-style: none;
    cursor: pointer;
  }
  .db-faq summary::-webkit-details-marker {
    display: none;
  }
  .db-faq summary:after {
    content: '';
    flex: none;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: linear-gradient(var(--primaryLight), var(--primaryLight)) center / 0.75rem 2px no-repeat, linear-gradient(var(--primaryLight), var(--primaryLight)) center / 2px 0.75rem no-repeat, var(--band);
  }
  .db-faq summary:hover h3 {
    color: var(--primaryLight);
  }
  .db-faq h3 {
    max-width: none;
    font-size: var(--bodyFontSize);
    letter-spacing: 0.04em;
  }
  .db-faq[open] summary:after {
    transform: rotate(45deg);
  }
  .db-faq .db-faq-answer {
    max-width: 44rem;
    padding-bottom: var(--space3);
  }
  .db-band .db-faq summary:after {
    background-color: var(--page);
  }
}
@media only screen and (min-width: 0rem) and (prefers-reduced-motion: no-preference) {
  .db-faq summary:after {
    transition: transform 0.2s;
  }
}
@media only screen and (min-width: 0rem) {
  .db-lists {
    display: grid;
    gap: var(--space4);
  }
  .db-lists h3 {
    margin-bottom: var(--space2);
  }
  .db-lists ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space1) var(--space3);
    list-style: none;
  }
  .db-lists a {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 700;
    text-decoration: none;
  }
  .db-lists a:hover {
    text-decoration: underline;
  }
  .db-lists a:before {
    content: '';
    flex: none;
    width: 0.45em;
    height: 0.45em;
    border: solid var(--cta);
    border-width: 2px 2px 0 0;
    transform: rotate(45deg);
  }
  .db-list-panel {
    border-radius: var(--radius);
    padding: var(--space3);
    background-color: var(--raised);
    box-shadow: var(--shadow);
  }
  .db-list-panel p {
    margin-bottom: var(--space2);
  }
  .db-section-foot {
    margin-top: var(--space4);
  }
}
@media only screen and (min-width: 64rem) {
  .db-lists {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}