/* ==========================================================================
   ATN Membership page
   ==========================================================================

   EVERY rule is scoped under .atn-membership. That matters: this stylesheet
   loads site-wide via Slater, so an unscoped `* { margin: 0 }` reset or a
   bare `body {}` rule would restyle every other page on the site. The reset
   below is deliberately narrowed to this component's own subtree.

   Two knobs to set when this goes live:

   --nav-offset   How far from the top of the viewport the comparison table's
                  sticky header docks. If the site nav is fixed/sticky, set
                  this to its height so the header sits below it, not under it.
   --section-bg   The sticky header needs an opaque background of its own or
                  table rows show through as they scroll underneath. Set it to
                  match the Webflow page background.

   BACKGROUND: this component is transparent and sits on the Webflow page's
   own background. The design assumes a black page — set the Webflow page
   background to #000 (and --section-bg to match) or the light-on-dark text
   outside the white cards will be unreadable.

   FONTS: BDO Grotesk / JetBrains Mono are named but never fetched here. They
   resolve from wherever they're already available (a Webflow custom font
   upload, or a local install) and fall back cleanly if neither is present.
   No @import, no external request from this file.
   ========================================================================== */

.atn-membership {
  --nav-offset: 0px;
  --section-gap: 128px;
  --section-bg: #000;

  box-sizing: border-box;
  max-width: 1280px;
  margin: 0 auto;
  padding: 64px 32px 128px;
  color: #fff;
  font-family: "BDO Grotesk", "BDOGrotesk", "BD Grotesk", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}

/* Descendants only — including .atn-membership itself in this selector would
   zero out the root's own margin/padding set above, since the two rules have
   equal specificity and this one comes later. */

.atn-membership * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.atn-membership .page-header {
  text-align: center;
  margin-bottom: 64px;
}

.atn-membership .page-header h1 {
  font-size: clamp(32px, 4.5vw, 52px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.atn-membership .label {
  color: #999;
  margin-top: 12px;
  font-size: 14px;
}

/* Toggle switch — buyer type (individuals / firms) */

.atn-membership .toggle-switch {
  --toggle-count: 2;
  --toggle-padding: 0.25em;
  width: 100%;
  max-width: 26em;
  margin: 32px auto 0;
  padding: var(--toggle-padding);
  grid-auto-columns: 1fr;
  grid-template-columns: repeat(var(--toggle-count, 2), 1fr);
  background-color: #1a1a1a;
  border-radius: 0.875em;
  display: inline-grid;
  position: relative;
  font-size: 16px;
}

.atn-membership .toggle-switch__bg {
  position: absolute;
  top: var(--toggle-padding);
  bottom: var(--toggle-padding);
  left: var(--toggle-padding);
  width: calc((100% - 2 * var(--toggle-padding)) / var(--toggle-count, 2));
  transform: translateX(calc(var(--toggle-active, 0) * 100%));
  background-color: #fff;
  border-radius: 0.625em;
  transition: transform 0.5s cubic-bezier(.625, .05, 0, 1);
}

.atn-membership .toggle-switch__btn {
  z-index: 1;
  color: #999;
  background-color: transparent;
  border: none;
  justify-content: center;
  align-items: center;
  padding: 0.75em 1em;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: color .2s;
  display: flex;
  position: relative;
}

.atn-membership .toggle-switch__btn[data-toggle-active] {
  color: #000;
}

/* Billing toggle (CSS-only) — one per card, kept in sync by slater.js */

.atn-membership .btn-toggle {
  cursor: pointer;
  align-items: center;
  display: flex;
  position: relative;
  margin-top: 20px;
  width: fit-content;
  gap: .625em;
}

.atn-membership .btn-toggle__toggle {
  background-color: #333;
  border-radius: 2em;
  flex-shrink: 0;
  width: 2.25em;
  height: 1.25em;
  display: flex;
  font-size: 16px;
}

.atn-membership .btn-toggle__toggle-dot {
  background-color: #fff;
  border-radius: 50%;
  width: 1em;
  height: 1em;
  margin-top: .125em;
  margin-left: .125em;
  transition: transform 0.4s cubic-bezier(0.35, 1.5, 0.6, 1);
  transform: translateX(0em) rotate(0.001deg);
}

.atn-membership .btn-toggle__p {
  font-size: 14px;
  font-weight: 600;
  color: #666;
  line-height: 1;
  position: relative;
  transition: color 0.4s cubic-bezier(0.35, 1, 0.6, 1);
}

.atn-membership .btn-toggle__checkbox {
  opacity: 0;
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 100%;
  position: absolute;
  cursor: pointer;
}

.atn-membership .btn-toggle:has(input:checked) .btn-toggle__toggle-dot {
  transform: translateX(1em) rotate(0.001deg);
}

.atn-membership .btn-toggle:has(input:checked) .btn-toggle__p--right {
  color: #fff;
}

.atn-membership .btn-toggle:not(:has(input:checked)) .btn-toggle__p--left {
  color: #fff;
}

/* Tiers / cards
   --plan-count drives the comparison table's column count. It's declared on
   both the cards section AND that buyer type's comparison table, because the
   table sits outside the section in the DOM and can't inherit it. */

.atn-membership #individuals-section,
.atn-membership #individuals-comparison {
  --plan-count: 2;
}

.atn-membership #firms-section,
.atn-membership #firms-comparison {
  --plan-count: 3;
}

.atn-membership .hidden {
  display: none;
}

.atn-membership .tiers {
  display: grid;
  grid-template-columns: repeat(var(--plan-count), minmax(300px, 400px));
  justify-content: center;
  column-gap: 24px;
  row-gap: 24px;
  align-items: stretch;
}

.atn-membership .card {
  position: relative;
  background: #fff;
  color: #000;
  border-radius: 10px;
  padding: 44px 36px;
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* Recommended — pinned to the card's top-right corner so it never collides
   with .card-badge, which sits top-left. */

.atn-membership .card--recommended {
  box-shadow: 0 0 0 2px #000;
}

.atn-membership .recommended-badge {
  position: absolute;
  top: -1px;
  right: 24px;
  transform: translateY(-50%);
  background: #000;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 6px 12px;
  border-radius: 100px;
}

.atn-membership .card-badge {
  display: inline-block;
  align-self: flex-start;
  background: #f0f0f0;
  color: #555;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 6px 10px;
  border-radius: 6px;
}

.atn-membership .card-title {
  font-size: 40px;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-top: 20px;
  line-height: 1.1;
}

.atn-membership .card-desc {
  color: #666;
  font-size: 15px;
  line-height: 1.5;
  margin-top: 12px;
}

.atn-membership .price-row {
  margin-top: 28px;
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.atn-membership .price-amount {
  font-size: 40px;
  font-weight: 800;
  color: #000;
  letter-spacing: -0.01em;
}

.atn-membership .price-unit {
  font-size: 16px;
  font-weight: 500;
  color: #999;
}

/* A pill badge rather than quiet caption text — makes the billing cadence
   (a per-month figure, invoiced annually) unmistakable, not just present. */

.atn-membership .price-note {
  display: inline-flex;
  align-items: center;
  background: #f0f0f0;
  color: #555;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 5px 10px;
  border-radius: 100px;
  margin-top: 10px;
}

/* NOTE: no font-family here, deliberately. <button> doesn't inherit the page
   font by default, so these CTAs render in the browser's default UI font
   rather than BDO Grotesk. That's how the approved design currently looks and
   it's preserved as-is — adding `font-family: inherit` changes the metrics and
   makes the button 6px taller. Worth revisiting as a design decision, but it
   is not a packaging change. */

.atn-membership .cta {
  margin-top: 24px;
  background: #000;
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 16px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.15s;
}

.atn-membership .cta:hover {
  opacity: 0.8;
}

/* "Everything in [tier], plus:" — carries the border/spacing the list would
   otherwise own, so the border doesn't double up when both are present. */

.atn-membership .features-intro {
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid #eee;
  font-size: 14px;
  font-weight: 600;
  color: #333;
}

.atn-membership .features-intro + .features {
  margin-top: 12px;
  border-top: none;
}

.atn-membership .features {
  list-style: none;
  margin-top: 32px;
  border-top: 1px solid #eee;
}

.atn-membership .features li {
  font-size: 14px;
  color: #333;
  padding: 10px 0 10px 26px;
  border-bottom: 1px solid #eee;
  position: relative;
}

.atn-membership .features li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: #000;
  font-weight: 700;
}

/* Logo wall — placeholder boxes stand in for logos, no image assets */

.atn-membership .logo-wall {
  position: relative;
  margin-top: var(--section-gap);
  border-top: 1px solid #222;
  border-bottom: 1px solid #222;
}

.atn-membership .logo-wall__vlines {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 100%;
  pointer-events: none;
}

.atn-membership .logo-wall__vlines > div {
  border-left: 1px dashed #2a2a2a;
}

.atn-membership .logo-wall__vlines > div:first-child {
  border-left: none;
}

.atn-membership .logo-wall__heading {
  position: relative;
  text-align: center;
  padding: 56px 24px;
  /* 24px matches the comparison table's plan names — the two "second-level"
     headings on this page share one size. */
  font-size: 24px;
  font-weight: 500;
  color: #eee;
  border-bottom: 1px solid #222;
}

.atn-membership .logo-wall__logos {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.atn-membership .logo-wall__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
}

.atn-membership .logo-wall__logo:nth-child(n + 5) {
  border-top: 1px solid #222;
}

.atn-membership .logo-wall__logo-ph {
  display: block;
  width: 100px;
  height: 28px;
  background: #161616;
  border: 1px dashed #333;
}

@media screen and (max-width: 767px) {
  .atn-membership .logo-wall__vlines,
  .atn-membership .logo-wall__logos {
    grid-template-columns: repeat(2, 1fr);
  }

  .atn-membership .logo-wall__logo:nth-child(n + 3) {
    border-top: 1px solid #222;
  }
}

/* Comparison table

   Column minimums are kept low on purpose. With three plans (firms table) a
   row can't be narrower than name + plans + gaps, and the stacked mobile
   layout only takes over at 767px — generous minimums (180/260) made the
   table 1032px wide and forced the whole PAGE to scroll sideways at tablet
   widths. At 140/150 the worst case fits inside a 768px viewport.

   The table can't be wrapped in an overflow-x:auto container to solve this
   instead: that would make the wrapper a scroll container on both axes and
   break the sticky header. */

.atn-membership .comparison-wrap {
  width: 100%;
  position: relative;
  margin-top: var(--section-gap);
}

.atn-membership .comparison-header {
  z-index: 10;
  background-color: var(--section-bg);
  border-bottom: 1px solid #2a2a2a;
  display: grid;
  grid-template-columns: minmax(140px, 1fr) repeat(var(--plan-count), minmax(150px, 1fr));
  column-gap: 24px;
  position: sticky;
  top: var(--nav-offset);
}

.atn-membership .comparison-header__corner {
  grid-column: 1;
}

.atn-membership .comparison-header__inner,
.atn-membership .comparison-header__list {
  display: contents;
}

.atn-membership .comparison-header__col {
  text-align: center;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  gap: .4em;
  padding: 1.5em 1em;
  display: flex;
}

.atn-membership .comparison-header__name {
  letter-spacing: -0.02em;
  font-weight: 800;
  font-size: 24px;
  line-height: 1;
}

.atn-membership .comparison-header__meta {
  opacity: .6;
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
}

/* As with .cta above: no font-family, matching the current design. */

.atn-membership .comparison-header__cta {
  margin-top: 0.5em;
  background: #fff;
  color: #000;
  border: none;
  border-radius: 8px;
  padding: 0.6em 1em;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.15s;
}

.atn-membership .comparison-header__cta:hover {
  opacity: 0.8;
}

.atn-membership .comparison-body {
  display: flex;
  flex-direction: column;
}

.atn-membership .comparison-row {
  border-bottom: 1px solid #222;
  display: grid;
  grid-template-columns: minmax(140px, 1fr) repeat(var(--plan-count), minmax(150px, 1fr));
  column-gap: 24px;
}

.atn-membership .comparison-row:nth-of-type(even) {
  background: #0a0a0a;
}

.atn-membership .comparison-row__name {
  grid-column: 1;
  flex-flow: column;
  justify-content: center;
  align-items: flex-start;
  gap: 4px;
  padding: 1em 1.25em;
  display: flex;
}

.atn-membership .comparison-row__h {
  font-size: 16px;
  font-weight: 500;
  color: #ccc;
}

.atn-membership .comparison-row__desc {
  font-size: 13px;
  color: #888;
  line-height: 1.4;
}

.atn-membership .comparison-row__cells {
  display: contents;
}

.atn-membership .comparison-row__cell {
  text-align: center;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  padding: 1.25em 1em;
  display: flex;
}

.atn-membership .comparison-row__label {
  opacity: .75;
  font-size: 16px;
  line-height: 1;
}

.atn-membership .comparison-row__icon {
  aspect-ratio: 1;
  color: #fff;
  width: 1.25em;
}

.atn-membership .comparison-row__cell[aria-label="not included"] .comparison-row__icon {
  color: #4a4a4a;
}

.atn-membership .comparison-row__cell--list {
  padding-top: 1em;
  padding-bottom: 1em;
}

.atn-membership .comparison-row__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: left;
}

.atn-membership .comparison-row__list li {
  font-size: 15px;
  color: #ccc;
  padding-left: 18px;
  position: relative;
}

.atn-membership .comparison-row__list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: #fff;
  font-weight: 700;
  font-size: 11px;
}

/* Underline link — course names in the comparison table. Hover reveals the
   underline; the click follows the href to that course's page. */

.atn-membership .underline-link {
  color: inherit;
  font-size: 1em;
  line-height: 1.25;
}

.atn-membership [data-underline-link] {
  text-decoration: none;
  position: relative;
}

.atn-membership [data-underline-link]::before {
  content: "";
  position: absolute;
  bottom: -0.0625em;
  left: 0;
  width: 100%;
  height: 0.0625em;
  background-color: currentColor;
  transition: transform 0.735s cubic-bezier(0.625, 0.05, 0, 1);
  transform-origin: right;
  transform: scaleX(0) rotate(0.001deg);
}

@media (hover: hover) and (pointer: fine) {
  .atn-membership [data-underline-link]:hover::before {
    transform-origin: left;
    transform: scaleX(1) rotate(0.001deg);
  }
}

/* Tablet: three 300px-minimum card columns are too wide below ~1010px and
   forced the page to scroll sideways. Two-up matches the section bundles. */

@media screen and (max-width: 991px) {
  .atn-membership .tiers {
    grid-template-columns: repeat(2, minmax(280px, 400px));
  }
}

@media screen and (max-width: 767px) {
  .atn-membership .tiers {
    grid-template-columns: 1fr;
  }

  .atn-membership .card {
    padding: 32px 28px;
  }

  .atn-membership .card-title,
  .atn-membership .price-amount {
    font-size: 34px;
  }

  .atn-membership .comparison-header {
    grid-template-columns: 1fr;
  }

  .atn-membership .comparison-header__corner {
    display: none;
  }

  .atn-membership .comparison-header__list {
    display: flex;
  }

  .atn-membership .comparison-header__name {
    font-size: 18px;
  }

  .atn-membership .comparison-row {
    grid-template-columns: 1fr;
  }

  .atn-membership .comparison-row__name {
    padding: 1em 1.25em 0.5em;
  }

  .atn-membership .comparison-row__cells {
    display: flex;
    flex-wrap: wrap;
  }

  .atn-membership .comparison-row__cell {
    flex: 1 1 33%;
    padding: 0.75em 1.25em;
  }
}

/* ==========================================================================
   Testimonial (static)

   Sized entirely in em, so the one font-size below scales the whole block.
   The quote sits at 1.7em of that base — around 24-27px, in line with the
   page's other subheadings rather than competing with the 40px card titles.
   ========================================================================== */

.atn-membership .testimonials {
  margin-top: var(--section-gap);
}

.atn-membership .testimonial-lines {
  font-size: clamp(14px, 1.05vw, 16px);
  max-width: 40em;
  margin: 0 auto;
}

.atn-membership .testimonial-lines__main,
.atn-membership .testimonial-lines__item {
  display: flex;
  flex-direction: column;
  gap: 2em;
}

.atn-membership .testimonial-lines__p {
  font-size: 1.2em;
  line-height: 1.2;
}

.atn-membership .testimonial-lines__p.is--faded {
  opacity: .5;
}

.atn-membership .testimonial-lines__h {
  letter-spacing: -.02em;
  width: 100%;
  font-size: 1.7em;
  font-weight: 500;
  line-height: 1.3;
}

.atn-membership .testimonial-lines__item-details {
  display: flex;
  flex-flow: row;
  gap: 1.25em;
  align-items: center;
}

.atn-membership .testimonial-lines__item-visual {
  aspect-ratio: 1;
  border-radius: 100em;
  width: 4.5em;
  overflow: hidden;
  flex-shrink: 0;
}

.atn-membership .testimonial-lines__item-img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

@media screen and (max-width: 767px) {
  .atn-membership .testimonial-lines__main,
  .atn-membership .testimonial-lines__item {
    gap: 1.5em;
  }

  .atn-membership .testimonial-lines__p {
    font-size: 1em;
  }

  .atn-membership .testimonial-lines__h {
    font-size: 1.4em;
  }

  .atn-membership .testimonial-lines__item-visual {
    width: 3.5em;
  }
}

/* ==========================================================================
   Courses preview

   Card art is a CSS gradient placeholder, not a photo — same "no asset yet"
   convention as .logo-wall__logo-ph. Swap .course-card__media for a real
   <img> per course once photography exists.
   ========================================================================== */

.atn-membership .courses-preview {
  margin-top: var(--section-gap);
}

.atn-membership .courses-preview__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 32px;
}

.atn-membership .courses-preview__title {
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.atn-membership .courses-preview__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #999;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: color 0.2s;
}

.atn-membership .courses-preview__cta-icon {
  width: 14px;
  height: 14px;
  transition: transform 0.35s cubic-bezier(0.625, 0.05, 0, 1);
}

@media (hover: hover) and (pointer: fine) {
  .atn-membership .courses-preview__cta:hover {
    color: #fff;
  }

  .atn-membership .courses-preview__cta:hover .courses-preview__cta-icon {
    transform: translateX(3px);
  }
}

/* Native horizontal scroll with snap — "swipe" works on touch with no JS. */

.atn-membership .courses-preview__track {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 6px;
  scrollbar-width: thin;
  scrollbar-color: #333 transparent;
}

.atn-membership .course-card {
  scroll-snap-align: start;
  flex: 0 0 300px;
  background: #141414;
  border: 1px solid #242424;
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.atn-membership .course-card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 24px 20px;
  background: linear-gradient(135deg, #2c2c2c, #0c0c0c);
}

.atn-membership .course-card__media--2 {
  background: linear-gradient(135deg, #262a2c, #0a0c0d);
}

.atn-membership .course-card__media--3 {
  background: linear-gradient(135deg, #2a2626, #0d0a0a);
}

.atn-membership .course-card__media--4 {
  background: linear-gradient(135deg, #26282c, #0a0b0d);
}

.atn-membership .course-card__badge {
  position: absolute;
  top: 12px;
  right: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #fff;
  font-family: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 5px 8px;
  border-radius: 6px;
}

.atn-membership .course-card__badge svg {
  width: 11px;
  height: 11px;
}

.atn-membership .course-card__media-title {
  color: #fff;
  text-align: center;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  line-height: 1.25;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.7);
}

.atn-membership .course-card__body {
  padding: 20px 20px 22px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.atn-membership .course-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.atn-membership .course-card__tag {
  font-family: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 4px;
  border: 1px solid currentColor;
}

.atn-membership .course-card__tag--blue {
  color: #5b9dff;
}

.atn-membership .course-card__tag--pink {
  color: #e8579c;
}

.atn-membership .course-card__title {
  color: #fff;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: 10px;
}

.atn-membership .course-card__desc {
  color: #999;
  font-size: 13.5px;
  line-height: 1.5;
  margin-bottom: 20px;
}

.atn-membership .course-card__footer {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid #242424;
  display: flex;
  gap: 10px;
}

.atn-membership .course-card__details {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  color: #000;
  font-family: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: 8px;
  padding: 12px 14px;
  text-decoration: none;
  transition: opacity 0.15s;
}

.atn-membership .course-card__details:hover {
  opacity: 0.8;
}

.atn-membership .course-card__price {
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  background: #f0f0f0;
  color: #000;
  font-family: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 13px;
  font-weight: 700;
  border-radius: 8px;
  padding: 12px 16px;
}

@media screen and (max-width: 767px) {
  .atn-membership .courses-preview__title {
    font-size: 26px;
  }

  .atn-membership .course-card {
    flex-basis: 260px;
  }
}

/* ==========================================================================
   FAQ

   The expand/collapse is a grid-template-rows 0fr -> 1fr transition, which
   animates from zero to content height with no JS measuring scrollHeight.
   slater.js only flips a class and the trigger's aria-expanded.
   ========================================================================== */

.atn-membership .faq {
  margin-top: var(--section-gap);
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.atn-membership .faq__title {
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-align: center;
  margin-bottom: 40px;
}

.atn-membership .faq__list {
  border-top: 1px solid #222;
}

.atn-membership .faq-item {
  border-bottom: 1px solid #222;
}

.atn-membership .faq-item__q {
  font-size: inherit;
  font-weight: inherit;
}

.atn-membership .faq-item__trigger {
  width: 100%;
  background: none;
  border: none;
  color: #fff;
  font-family: inherit;
  font-size: 17px;
  font-weight: 500;
  text-align: left;
  padding: 24px 4px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  cursor: pointer;
}

.atn-membership .faq-item__icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: #999;
  transition: transform 0.3s cubic-bezier(0.625, 0.05, 0, 1);
}

.atn-membership .faq-item.is--open .faq-item__icon {
  transform: rotate(45deg);
}

.atn-membership .faq-item__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s cubic-bezier(0.625, 0.05, 0, 1);
}

.atn-membership .faq-item.is--open .faq-item__panel {
  grid-template-rows: 1fr;
}

.atn-membership .faq-item__panel > .faq-item__a {
  overflow: hidden;
}

.atn-membership .faq-item__a {
  color: #999;
  font-size: 15px;
  line-height: 1.55;
  max-width: 65ch;
  padding-bottom: 24px;
  padding-right: 4px;
}

@media screen and (max-width: 767px) {
  .atn-membership {
    --section-gap: 80px;
  }

  .atn-membership .faq__title {
    font-size: 26px;
  }
}