:root {
  --ns-hero-panel: #f8f5f3;
  --ns-hero-ink: #222222;
  --ns-hero-slot: #f8f8f8;
  --ns-hero-slot-active: #dae8d4;
  --ns-hero-accent: #8baf7b;
  --ns-hero-accent-strong: #678958;
  --ns-hero-accent-soft: rgba(139, 175, 123, 0.2);
  --ns-hero-line: rgba(0, 0, 0, 0.08);
  --ns-hero-card-shadow: 0 16px 24px -12px rgba(0, 0, 0, 0.1);

  --ns-feature-bg-1: #f7f4f2;
  --ns-feature-bg-2: #f2f5f8;
  --ns-feature-bg-3: #f2f5f0;
  --ns-feature-bg-4: #f5f5fa;
  --ns-feature-bg-5: #f7f6f3;
  --ns-feature-bg-6: #f7f3f4;
  --ns-feature-bg-7: #f0f5f2;

  --ns-brand-domain: #f2f5f8;
  --ns-brand-language: #f9f8f6;
  --ns-brand-tools: #f7f3f4;
  --ns-brand-identity: #f3f7f4;
  --ns-brand-row-h: 512px;

  --ns-mock-shadow-card: 8px 24px 48px -12px rgba(0, 0, 0, 0.08);
  --ns-mock-shadow-soft: 0 20px 40px 10px rgba(59, 45, 39, 0.08);
  --ns-mock-shadow-drop: 0 24px 48px -12px rgba(0, 0, 0, 0.08);
  --ns-mock-shadow-flat: 0 8px 20px -4px rgba(0, 0, 0, 0.08);
  --ns-mock-shadow-wide: 0 36px 36px -8px rgba(0, 0, 0, 0.06);
  --ns-mock-shadow-stamp: 0 4px 4px -4px rgba(0, 0, 0, 0.24);

  --ns-mock-slot-picked: #e2ebf3;
  --ns-mock-green-badge: #dbf0e4;
  --ns-mock-terracotta: #c35b1d;
  --ns-mock-blue: #83b0dc;
  --ns-mock-brown: #2f2c29;

  --ns-mock-positive-bg: rgba(1, 180, 9, 0.13);
  --ns-mock-positive-ink: #006425;
  --ns-mock-warning-bg: rgba(255, 158, 1, 0.18);
  --ns-mock-warning-ink: #946b00;
  --ns-mock-crimson-bg: rgba(255, 2, 26, 0.08);
  --ns-mock-violet-bg: rgba(30, 1, 255, 0.07);
  --ns-mock-blue-bg: rgba(2, 103, 255, 0.1);
  --ns-mock-teal-bg: rgba(0, 190, 144, 0.15);
  --ns-mock-teal-ink: #006358;

  --ns-mock-paypal: #ffd140;
  --ns-mock-stamp: #e5532e;
  --ns-mock-stamp-border: rgba(255, 54, 0, 0.31);
  --ns-mock-scrim: rgba(0, 0, 0, 0.6);
  --ns-mock-scrim-soft: rgba(0, 0, 0, 0.4);

  --ns-bmock-violet: #7755e7;
  --ns-bmock-violet-ink: #6641d3;
  --ns-bmock-violet-bg: rgba(154, 2, 255, 0.08);
  --ns-bmock-dot-go: #79c799;
  --ns-bmock-dot-stop: #cb3333;
  --ns-bmock-mailchimp: #fddd4c;
  --ns-bmock-page-bg: #f9f8f4;
  --ns-bmock-hairline: #efeff0;
  --ns-bmock-scrim: rgba(0, 0, 0, 0.64);

  --ns-bmock-radius-6: 6px;

  --ns-bmock-tile-shadow-56: 0 7px 9.333px rgba(0, 0, 0, 0.04);
  --ns-bmock-tile-shadow-64: 0 8px 10.667px rgba(0, 0, 0, 0.04);
  --ns-bmock-tile-shadow-76: 0 19px 31.667px -9.5px rgba(0, 0, 0, 0.08);
  --ns-bmock-tile-shadow-104: 0 26px 43.333px -13px rgba(0, 0, 0, 0.08);

  --ns-bmock-s1-1: #f9f8f4;
  --ns-bmock-s1-2: #e6e3db;
  --ns-bmock-s1-3: #a3968d;
  --ns-bmock-s1-4: #4d403a;
  --ns-bmock-s1-5: #262626;
  --ns-bmock-s2-2: #fbf8f1;
  --ns-bmock-s2-3: #e2dfd0;
  --ns-bmock-s2-4: #b26f83;
  --ns-bmock-s2-5: #824f5d;
  --ns-bmock-s3-2: #fefef2;
  --ns-bmock-s3-3: #e2dfc3;
  --ns-bmock-s3-4: #a44045;
  --ns-bmock-s3-5: #331e1e;
}

.ns-hero {
  padding-block: var(--spacing-xl);
  background: var(--white);
}

.ns-hero__inner {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xl);
}

.ns-hero__text {
  display: grid;
  grid-template-columns: repeat(24, minmax(0, 1fr));
  column-gap: var(--spacing-xs);
}

.ns-hero__headline {
  grid-column: 1 / span 14;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.ns-hero__aside {
  grid-column: 17 / span 8;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--spacing-s);
  padding-bottom: var(--spacing-2xs);
}

.ns-hero__actions {
  display: flex;
  align-items: center;
  gap: var(--spacing-2xs);
}

.ns-hero__banner {
  position: relative;
}

.ns-hero__panel {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 724px;
  border-radius: var(--corner-radius-l);
  background: var(--ns-hero-panel);
}

.ns-hero__scene {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
  max-width: 1056px;
  min-height: 832px;
  margin-inline: auto;
  padding-top: var(--spacing-l);
}

.ns-hero-card {
  flex-shrink: 0;
  border-radius: var(--corner-radius-s);
  background: var(--white);
  box-shadow: var(--ns-hero-card-shadow);
}

.ns-hero-sessions {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-s);
  width: 316px;
  margin-top: 232px;
  margin-right: -32px;
  padding: var(--spacing-s);
  overflow: hidden;
}

.ns-hero-sessions__head {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3xs);
}

.ns-hero-sessions__eyebrow {
  font-size: 10px;
  line-height: 10px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ns-color-content-base);
}

.ns-hero-sessions__title {
  font-size: var(--ns-font-size-20);
  line-height: 26px;
  letter-spacing: var(--ns-tracking-2);
  color: var(--ns-color-ink-soft);
}

.ns-hero-sessions__list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-20);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ns-hero-sessions__row {
  display: flex;
  gap: var(--spacing-3xs);
}

.ns-hero-sessions__time {
  flex-shrink: 0;
  width: 80px;
  font-size: var(--ns-font-size-14);
  line-height: 22px;
  letter-spacing: var(--ns-tracking-2);
  color: var(--ns-color-content-base);
}

.ns-hero-sessions__name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 15px;
  line-height: 22px;
  letter-spacing: var(--ns-tracking-2);
  color: var(--ns-hero-ink);
}

.ns-hero-product {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3xs);
  width: 360px;
  padding: var(--spacing-3xs);
  border-radius: var(--corner-radius-m);
}

.ns-hero-product__media {
  overflow: hidden;
  border-radius: var(--corner-radius-xs) var(--corner-radius-xs) 0 0;
}

.ns-hero-product__img {
  display: block;
  width: 100%;
  aspect-ratio: 400 / 500;
  object-fit: cover;
}

.ns-hero-product__info {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-m);
  padding: var(--spacing-2xs);
}

.ns-hero-product__text {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4xs);
  color: var(--ns-hero-ink);
}

.ns-hero-product__name {
  font-size: 26px;
  line-height: var(--ns-line-height-36);
  font-weight: var(--ns-font-weight-medium);
  letter-spacing: var(--ns-tracking-2);
}

.ns-hero-product__price {
  font-size: var(--ns-font-size-16);
  line-height: var(--ns-line-height-24);
  letter-spacing: var(--ns-tracking-2);
}

.ns-hero-slots {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.ns-hero-slots__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--spacing-3xs);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ns-hero-slots__item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px var(--spacing-xs);
  border-radius: var(--corner-radius-2xs);
  background: var(--ns-hero-slot);
  color: var(--ns-hero-ink);
  font-size: var(--ns-font-size-14);
  line-height: var(--ns-line-height-20);
  letter-spacing: var(--ns-tracking-2);
  text-align: center;
}

.ns-hero-slots__item.is-selected {
  background: var(--ns-hero-slot-active);
}

.ns-hero-slots__badge {
  position: absolute;
  top: -8px;
  right: -6px;
  display: flex;
  padding: var(--ns-spacing-2);
  border-radius: var(--ns-radius-full);
  background: var(--ns-hero-accent);
}

.ns-hero-slots__check {
  --ns-ico: var(--spacing-20);
}

.ns-hero-slots__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-xs);
  border-radius: var(--corner-radius-2xs);
  background: var(--black);
  color: var(--white);
  font-size: var(--ns-font-size-16);
  line-height: var(--ns-line-height-24);
  font-weight: var(--ns-font-weight-medium);
  letter-spacing: var(--ns-tracking-2);
  text-align: center;
}

.ns-hero-earnings {
  position: relative;
  width: 312px;
  height: 306px;
  margin-top: 324px;
  margin-left: -28px;
  overflow: hidden;
}

.ns-hero-earnings__summary {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: var(--spacing-s) var(--spacing-s) 0 var(--spacing-l);
}

.ns-hero-earnings__label {
  font-size: 12px;
  line-height: 12px;
  letter-spacing: var(--ns-tracking-2);
  color: var(--ns-color-content-base);
}

.ns-hero-earnings__stat {
  display: flex;
  align-items: center;
  gap: var(--spacing-3xs);
}

.ns-hero-earnings__value {
  font-size: var(--ns-font-size-32);
  line-height: var(--ns-line-height-32);
  letter-spacing: var(--ns-tracking-2);
  color: var(--ns-color-ink-soft);
}

.ns-hero-earnings__delta {
  display: flex;
  align-items: center;
  padding: 2px 6px;
  border-radius: var(--ns-radius-full);
  background: var(--ns-hero-accent-soft);
  color: var(--ns-hero-accent-strong);
  font-size: var(--ns-font-size-14);
  line-height: 22px;
  letter-spacing: var(--ns-tracking-2);
}

.ns-hero-earnings__delta span {
  padding-inline: var(--spacing-4xs);
}

.ns-hero-earnings__delta img {
  display: block;
  margin-inline: 1.5px;
}

.ns-hero-earnings__pic {
  display: contents;
}

.ns-hero-earnings__chart {
  position: absolute;
  right: 0;
  bottom: 0;
  display: block;
  max-width: none;
}

.ns-features {
  --ns-feature-bleed: max(0px, (100vw - 1280px) / 2);
  padding-block: var(--spacing-112);
  overflow: hidden;
}

.ns-features__inner {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3xl);
}

.ns-features__list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4xl);
}

.ns-feature {
  display: grid;
  grid-template-columns: repeat(24, minmax(0, 1fr));
  column-gap: var(--spacing-xs);
  align-items: center;
  min-height: 720px;
}

.ns-feature__card {
  grid-column: 17 / span 8;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-40);
}

.ns-feature__media {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  grid-column: 1 / span 14;
  grid-row: 1;
  margin-left: calc(-1 * var(--ns-feature-bleed));
  border-radius: 0 var(--corner-radius-l) var(--corner-radius-l) 0;
}

.ns-feature__media::before {
  /* content: "";
  position: absolute;
  top: 0;
  right: 100%;
  bottom: 0;
  width: 100vw;
  background: inherit; */
}

.ns-feature--reverse .ns-feature__card {
  grid-column: 1 / span 8;
}

.ns-feature--reverse .ns-feature__media {
  grid-column: 11 / span 14;
  margin-left: 0;
  margin-right: calc(-1 * var(--ns-feature-bleed));
  border-radius: var(--corner-radius-l) 0 0 var(--corner-radius-l);
}

.ns-feature--reverse .ns-feature__media::before {
  right: auto;
  left: 100%;
}

.ns-features__list > .ns-feature:nth-child(1) .ns-feature__media {
  background: var(--ns-feature-bg-1);
}
.ns-features__list > .ns-feature:nth-child(2) .ns-feature__media {
  background: var(--ns-feature-bg-2);
}
.ns-features__list > .ns-feature:nth-child(3) .ns-feature__media {
  background: var(--ns-feature-bg-3);
}
.ns-features__list > .ns-feature:nth-child(4) .ns-feature__media {
  background: var(--ns-feature-bg-4);
}
.ns-features__list > .ns-feature:nth-child(5) .ns-feature__media {
  background: var(--ns-feature-bg-5);
}
.ns-features__list > .ns-feature:nth-child(6) .ns-feature__media {
  background: var(--ns-feature-bg-6);
}
.ns-features__list > .ns-feature:nth-child(7) .ns-feature__media {
  background: var(--ns-feature-bg-7);
}

.ns-feature__stage {
  position: relative;
  flex-shrink: 0;
  width: 720px;
  height: 720px;
  margin-inline: auto;
}

.ns-feature__body {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-m);
}

.ns-feature__lead-group {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.ns-feature__lead {
  font-size: var(--ns-font-size-20);
  line-height: var(--ns-line-height-32);
  letter-spacing: var(--ns-tracking-2);
}

.ns-feature__points {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3xs);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ns-feature__point {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-3xs);
  font-size: var(--ns-font-size-20);
  line-height: var(--ns-line-height-32);
  letter-spacing: var(--ns-tracking-2);
}

.ns-feature__check {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  padding-block: var(--spacing-4xs);
}

.ns-ico {
  position: relative;
  display: block;
  flex: none;
  width: var(--ns-ico, 24px);
  height: var(--ns-ico-h, var(--ns-ico, 24px));
  overflow: hidden;
}

.ns-ico > img,
.ns-ico > svg {
  position: absolute;
  inset: 0;
  display: block;
  margin: auto;
}

.ns-ico--check > img,
.ns-ico--check > svg {
  width: 75%;
  height: 50.021%;
}
.ns-ico--file > img,
.ns-ico--receipt > img,
.ns-ico--hourglass > img {
  width: 75%;
  height: 91.667%;
}
.ns-ico--mail-solid > img,
.ns-ico--card-check > img,
.ns-ico--credit-card > img {
  width: 91.667%;
  height: 75%;
}
.ns-ico--mail-line > img {
  width: 91.667%;
  height: 91.34%;
}
.ns-ico--calendar > img {
  width: 83.333%;
  height: 87.5%;
}
.ns-ico--lock > img {
  width: 83.333%;
  height: 91.667%;
}
.ns-ico--download > img {
  width: 83.333%;
  height: 75%;
}
.ns-ico--share > img {
  width: 83.333%;
  height: 91.667%;
}
.ns-ico--arrow > img {
  width: 83.333%;
  height: 83.333%;
}
.ns-ico--bag > img {
  width: 84.688%;
  height: 91.667%;
}
.ns-ico--plus > img {
  width: 66.667%;
  height: 66.667%;
}
.ns-ico--firework > img {
  width: 88.052%;
  height: 88.052%;
}
.ns-ico--image-plus > img {
  width: 87.5%;
  height: 87.5%;
}
.ns-ico--question > img {
  width: 91.667%;
  height: 87.985%;
}
.ns-ico--heart > img {
  width: 91.665%;
  height: 84.738%;
}

.ns-ico--paypal > img {
  width: 88.333%;
  height: 58.77%;
}
.ns-ico--applepay > img {
  width: 80.952%;
  height: 58.161%;
}

.ns-ico--image-plus > img {
  inset: 4.17% auto auto 8.33%;
  margin: 0;
}
.ns-ico--question > img {
  inset: 6.25% auto auto 4.17%;
  margin: 0;
}
.ns-ico--heart > img {
  inset: 8.33% auto auto 4.17%;
  margin: 0;
}
.ns-ico--paypal > img {
  inset: 22.854% auto auto 5.742%;
  margin: 0;
}
.ns-ico--applepay > img {
  inset: 22.111% auto auto 9.524%;
  margin: 0;
}

.ns-mock {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  width: 720px;
  height: 720px;
  font-size: var(--ns-font-size-12);
  line-height: var(--ns-line-height-16);
  letter-spacing: var(--ns-tracking-2);
  color: var(--neutral-1);
  transform-origin: top left;
}

.ns-mock p {
  margin: 0;
}

.ns-mock img {
  display: block;
  max-width: none;
}

.ns-mock__card {
  position: absolute;
  background: var(--white);
  transform-origin: top left;
}

.ns-m1__setup {
  left: 88px;
  top: 133px;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  overflow: hidden;
  width: 376px;
  padding: var(--spacing-xs);
  border-radius: var(--corner-radius-xs);
  box-shadow: var(--ns-mock-shadow-card);
}

.ns-m1__setup-title {
  font-size: var(--ns-font-size-16);
  line-height: var(--ns-line-height-24);
}

.ns-m1__strip {
  display: flex;
  gap: 2px;
}

.ns-m1__strip-img {
  flex: 1;
  min-width: 0;
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 3;
  object-fit: cover;
}

.ns-m1__cols {
  display: grid;
  grid-template-columns: 254px 74px;
  gap: var(--spacing-xs);
  align-items: start;
}

.ns-m1__main,
.ns-m1__aside {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2xs);
  align-items: flex-start;
}

.ns-m1__intro {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4xs);
}

.ns-m1__intro-title {
  line-height: var(--ns-line-height-16);
}

.ns-m1__aside-title {
  line-height: var(--ns-line-height-20);
}

.ns-m1__intro-desc {
  font-size: 8px;
  line-height: 12px;
  color: var(--ns-color-content-base);
}

.ns-m1__aside .ns-m1__intro-desc {
  line-height: 14px;
}

.ns-m1__dates {
  width: 100%;
  margin: 0;
  padding: 0;
  border-bottom: 1px solid var(--ns-hero-line);
  list-style: none;
}

.ns-m1__date {
  display: flex;
  gap: var(--spacing-4xs);
  align-items: center;
  padding-block: 6px;
  border-top: 1px solid var(--ns-hero-line);
  font-size: 8px;
  line-height: var(--ns-line-height-16);
  white-space: nowrap;
}

.ns-m1__date-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--spacing-s);
  padding-inline: var(--spacing-4xs);
  border-radius: var(--ns-radius-2);
  background: var(--ns-mock-green-badge);
  line-height: 14px;
}

.ns-m1__date-time {
  display: inline-flex;
  gap: 2px;
  align-items: center;
  margin-left: var(--spacing-4xs);
  line-height: 14px;
}

.ns-m1__date-arrow {
  --ns-ico: 10px;
}

.ns-m1__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-4xs) var(--spacing-2xs);
  border-radius: var(--ns-radius-2);
}

.ns-m1__btn-label {
  font-size: 8px;
  line-height: var(--ns-line-height-16);
  letter-spacing: var(--ns-tracking-2);
  color: var(--white);
  white-space: nowrap;
}

.ns-m1__btn--ink {
  background: var(--neutral-1);
}

.ns-m1__btn--ink .ns-m1__btn-label {
  font-weight: var(--ns-font-weight-medium);
}

.ns-m1__btn--brown {
  background: var(--ns-mock-brown);
}

.ns-m1__book {
  left: 367px;
  top: 69px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  width: 264px;
  border-radius: var(--corner-radius-s);
  box-shadow: var(--ns-mock-shadow-soft);
}

.ns-m1__book-cover {
  padding: 6px 6px 0;
}

.ns-m1__book-cover img {
  width: 100%;
  height: auto;
  aspect-ratio: 248 / 310;
  border-radius: 6px 6px 0 0;
  object-fit: cover;
}

.ns-m1__book-body {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-s);
  padding: var(--spacing-xs);
}

.ns-m1__book-head {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ns-m1__book-title {
  font-size: var(--ns-font-size-20);
  line-height: 26px;
  font-weight: var(--ns-font-weight-medium);
}

.ns-m1__book-meta,
.ns-m2__meta {
  display: flex;
  gap: var(--spacing-4xs);
  align-items: center;
  line-height: var(--ns-line-height-20);
  white-space: nowrap;
}

.ns-m1__dot,
.ns-m2__dot {
  flex-shrink: 0;
  width: var(--spacing-4xs);
  height: var(--spacing-4xs);
}

.ns-m1__picker,
.ns-m2__picker {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2xs);
}

.ns-m1__picker-date,
.ns-m2__picker-date {
  line-height: var(--ns-line-height-20);
}

.ns-m1__slots,
.ns-m2__slots {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--spacing-4xs);
}

.ns-m1__slot,
.ns-m2__slot {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-block: var(--spacing-3xs);
  border-radius: var(--ns-radius-2);
  background: var(--ns-hero-slot);
  font-size: var(--ns-font-size-10);
  line-height: 14px;
  text-align: center;
}

.ns-m1__cta,
.ns-m2__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding-inline: var(--spacing-xs);
  border-radius: var(--ns-radius-2);
}

.ns-m1__cta-label,
.ns-m2__cta-label {
  font-size: var(--ns-font-size-14);
  line-height: var(--ns-line-height-20);
  font-weight: var(--ns-font-weight-medium);
  letter-spacing: var(--ns-tracking-2);
  color: var(--white);
  white-space: nowrap;
}

.ns-m1__cta {
  background: var(--ns-mock-terracotta);
}

.ns-m2__book {
  left: 220px;
  top: 59px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  width: 280px;
  border-radius: var(--corner-radius-s);
  box-shadow: var(--ns-mock-shadow-card);
}

.ns-m2__cover {
  padding: 6px 6px 0;
}

.ns-m2__cover img {
  width: 100%;
  height: auto;
  aspect-ratio: 288 / 360;
  border-radius: 6px 6px 0 0;
  object-fit: cover;
  object-position: center top;
}

.ns-m2__body {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-s);
  padding: var(--spacing-xs);
}

.ns-m2__head {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ns-m2__title {
  font-size: var(--ns-font-size-20);
  line-height: 26px;
  font-weight: var(--ns-font-weight-medium);
}

.ns-m2__slots {
  position: relative;
}

.ns-m2__slot--picked {
  align-self: stretch;
  border-radius: var(--corner-radius-2xs);
  background: var(--ns-mock-slot-picked);
}

.ns-m2__cursor {
  --ns-ico: 12px;
  position: absolute;
  left: 70px;
  top: -5.5px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--spacing-xs);
  height: var(--spacing-xs);
  border-radius: var(--ns-radius-full);
  background: var(--ns-mock-blue);
}

.ns-m2__cta {
  background: var(--ns-mock-blue);
}

.ns-m2__pill {
  display: flex;
  gap: 2px;
  align-items: center;
  background: var(--white);
  box-shadow: var(--ns-shadow-2);
  white-space: nowrap;
}

.ns-m2__pill span {
  padding-inline: var(--spacing-4xs);
}

.ns-m2__pill--questionnaire {
  left: 76px;
  top: 94px;
  padding: var(--spacing-2xs) 14px;
  border-radius: 20px 20px var(--corner-radius-2xs) 20px;
}

.ns-m2__pill--questionnaire .ns-ico {
  --ns-ico: var(--spacing-xs);
}

.ns-m2__pill--questionnaire span {
  padding-inline: 2px;
}

.ns-m2__pill--retainer {
  left: 101px;
  top: 271px;
  padding: var(--spacing-xs);
  border-radius: 26px 26px var(--corner-radius-2xs) 26px;
  font-size: var(--ns-font-size-14);
  line-height: var(--ns-line-height-20);
}

.ns-m2__pill--retainer .ns-ico,
.ns-m2__pill--contract .ns-ico {
  --ns-ico: var(--spacing-20);
}

.ns-m2__pill--contract {
  left: 462px;
  top: 137px;
  padding: 14px var(--spacing-xs);
  border-radius: var(--corner-radius-l) var(--corner-radius-l)
    var(--corner-radius-l) var(--corner-radius-2xs);
  font-size: var(--ns-font-size-14);
  line-height: var(--ns-line-height-20);
}

.ns-m2__pill--success {
  left: 442px;
  top: 380.5px;
  padding: var(--spacing-xs) var(--spacing-20);
  border-radius: 28px 28px 28px var(--corner-radius-2xs);
  box-shadow:
    inset 0 0 0 1px var(--ns-color-subtle),
    var(--ns-shadow-2);
  font-size: var(--ns-font-size-18);
  line-height: var(--ns-line-height-28);
  font-weight: var(--ns-font-weight-medium);
  color: var(--ns-color-positive-light);
}

.ns-m2__pill--success .ns-ico {
  --ns-ico: var(--spacing-28);
}

.ns-m2__pill--success span {
  padding-inline: 6px;
}

.ns-m3__card {
  left: 152px;
  top: 140px;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-40);
  width: 416px;
  padding: var(--spacing-40);
  border-radius: var(--corner-radius-s);
  box-shadow: var(--ns-shadow-2);
}

.ns-m3__row {
  display: flex;
  gap: var(--spacing-xs);
  align-items: center;
}

.ns-m3__icon {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  padding: var(--spacing-3xs);
  border-radius: var(--corner-radius-2xs);
}

.ns-m3__icon--crimson {
  background: var(--ns-mock-crimson-bg);
}
.ns-m3__icon--violet {
  background: var(--ns-mock-violet-bg);
}
.ns-m3__icon--yellow {
  background: var(--ns-mock-warning-bg);
}
.ns-m3__icon--green {
  background: var(--ns-mock-positive-bg);
}
.ns-m3__icon--blue {
  background: var(--ns-mock-blue-bg);
}

.ns-m3__label {
  flex: 1;
  min-width: 0;
  font-size: var(--ns-font-size-22);
  line-height: var(--ns-line-height-32);
}

.ns-m4__schedule {
  left: 366px;
  top: 318px;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-s);
  width: 296px;
  padding: var(--spacing-s);
  border-radius: var(--corner-radius-xs);
}

.ns-m4__schedule-title {
  font-size: var(--ns-font-size-14);
  line-height: var(--ns-line-height-20);
  text-align: right;
}

.ns-m4__rule,
.ns-m6__rule {
  display: block;
  height: 1px;
  background: var(--ns-hero-line);
}

.ns-m4__items {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.ns-m4__item {
  display: flex;
  gap: var(--spacing-2xs);
  align-items: flex-start;
}

.ns-m4__item-icon {
  --ns-ico: var(--spacing-20);
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: var(--spacing-40);
  height: var(--spacing-40);
  border-radius: var(--corner-radius-2xs);
  background: var(--ns-color-flat-hover);
}

.ns-m4__item-info {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--spacing-4xs);
  justify-content: center;
  min-width: 0;
}

.ns-m4__item-name {
  display: flex;
  gap: var(--spacing-4xs);
  align-items: center;
  font-size: var(--ns-font-size-14);
  line-height: var(--ns-line-height-20);
}

.ns-m4__paid,
.ns-m5__badge {
  --ns-ico: 12px;
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  padding: 2px var(--spacing-4xs);
  border-radius: var(--ns-radius-full);
  background: var(--ns-mock-positive-bg);
}

.ns-m4__paid span,
.ns-m5__badge span {
  padding-inline: var(--spacing-4xs);
  font-size: var(--ns-font-size-10);
  line-height: 14px;
  color: var(--ns-mock-positive-ink);
  white-space: nowrap;
}

.ns-m4__item-when {
  line-height: var(--ns-line-height-16);
  color: var(--ns-color-content-light);
}

.ns-m4__item-amount {
  flex-shrink: 0;
  font-size: var(--ns-font-size-14);
  line-height: var(--ns-line-height-20);
  white-space: nowrap;
}

.ns-m4__payment {
  left: 57px;
  top: 76px;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-s);
  width: 376px;
  padding: var(--spacing-s);
  border-radius: var(--corner-radius-s);
  box-shadow: var(--ns-mock-shadow-wide);
}

.ns-m4__payment-title {
  font-size: var(--ns-font-size-24);
  line-height: var(--ns-line-height-32);
  font-weight: var(--ns-font-weight-medium);
}

.ns-m4__payment-body {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-20);
}

.ns-m4__due {
  display: flex;
  gap: var(--spacing-xs);
  align-items: center;
  font-size: var(--ns-font-size-16);
  line-height: var(--ns-line-height-24);
}

.ns-m4__due span {
  flex: 1;
  min-width: 0;
}

.ns-m4__due-amount {
  font-weight: var(--ns-font-weight-medium);
  text-align: right;
}

.ns-m4__wallets {
  display: flex;
  gap: var(--spacing-2xs);
}

.ns-m4__wallet {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  min-width: 0;
  height: 56px;
  border-radius: var(--ns-radius-2);
}

.ns-m4__wallet--paypal {
  background: var(--ns-mock-paypal);
}
.ns-m4__wallet--apple {
  background: var(--black);
}

.ns-m4__wallet--paypal .ns-ico {
  --ns-ico: 90px;
  --ns-ico-h: 36px;
}
.ns-m4__wallet--apple .ns-ico {
  --ns-ico: 63px;
  --ns-ico-h: 36px;
}

.ns-m4__or {
  display: flex;
  gap: var(--spacing-xs);
  align-items: center;
  justify-content: center;
  font-size: var(--ns-font-size-14);
  line-height: 22px;
  color: var(--neutral-4);
}

.ns-m4__or::before,
.ns-m4__or::after {
  content: "";
  flex: 1;
  min-width: 0;
  border-top: 1px solid var(--border-3);
}

.ns-m4__card-block {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3xs);
}

.ns-m4__card-head {
  display: flex;
  gap: var(--spacing-xs);
  align-items: center;
  font-size: var(--ns-font-size-16);
  line-height: var(--ns-line-height-24);
}

.ns-m4__card-head > span:first-child {
  flex: 1;
  min-width: 0;
}

.ns-m4__brands {
  display: flex;
  flex-shrink: 0;
  align-items: center;
}

.ns-m4__brands-more {
  font-size: var(--ns-font-size-14);
  line-height: var(--ns-line-height-20);
  color: var(--ns-color-content-base);
}

.ns-m4__fields {
  border-radius: var(--ns-radius-2);
  box-shadow: inset 0 0 0 1px var(--border-3);
}

.ns-m4__field {
  --ns-ico: var(--spacing-20);
  display: flex;
  gap: var(--spacing-3xs);
  align-items: center;
  height: 52px;
  padding-inline: 14px;
  font-size: var(--ns-font-size-16);
  line-height: var(--ns-line-height-24);
}

.ns-m4__field > span:not(.ns-ico) {
  flex: 1;
  overflow: hidden;
  min-width: 0;
  opacity: 0.5;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ns-m4__fields > .ns-m4__field {
  border-bottom: 1px solid var(--border-3);
}

.ns-m4__field-row {
  display: flex;
}

.ns-m4__field-row .ns-m4__field {
  flex: 1;
  min-width: 0;
}

.ns-m4__field-row .ns-m4__field:first-child {
  border-right: 1px solid var(--border-3);
}

.ns-m4__pay {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-block: var(--spacing-xs);
  border-radius: var(--ns-radius-2);
  background: var(--ns-color-subtle);
}

.ns-m4__pay-label {
  font-size: var(--ns-font-size-16);
  line-height: var(--ns-line-height-24);
  font-weight: var(--ns-font-weight-medium);
  letter-spacing: var(--ns-tracking-2);
  white-space: nowrap;
}

.ns-m5__stack {
  position: absolute;
  left: 120px;
  top: 108px;
  width: 480px;
  height: 408px;
  transform-origin: top left;
}

.ns-m5__row {
  display: flex;
  gap: var(--spacing-xs);
  align-items: center;
  overflow: hidden;
  padding: var(--spacing-20);
  border-radius: var(--corner-radius-s);
}

.ns-m5__row--confirmation {
  left: var(--spacing-40);
  top: 0;
  width: 400px;
  box-shadow: var(--ns-mock-shadow-flat);
}

.ns-m5__row--payment {
  left: 0;
  top: 106px;
  width: 480px;
  box-shadow: var(--ns-mock-shadow-drop);
}

.ns-m5__row--shoot {
  left: 30px;
  top: 218px;
  width: 420px;
  box-shadow: var(--ns-mock-shadow-drop);
}

.ns-m5__row--follow-up {
  left: 50px;
  top: 324px;
  width: 380px;
  padding: var(--spacing-xs);
  box-shadow: var(--ns-mock-shadow-flat);
}

.ns-m5__icon {
  --ns-ico: var(--spacing-20);
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: var(--corner-radius-xs);
  background: var(--ns-color-subtle);
}

.ns-m5__icon--lg {
  width: 56px;
  height: 56px;
}

.ns-m5__icon--warning {
  background: var(--ns-mock-warning-bg);
}

.ns-m5__text {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}

.ns-m5__row--payment .ns-m5__text {
  gap: 2px;
}

.ns-m5__title {
  font-size: var(--ns-font-size-16);
  line-height: var(--ns-line-height-24);
}

.ns-m5__title--lg {
  font-size: var(--ns-font-size-18);
  line-height: var(--ns-line-height-28);
  font-weight: var(--ns-font-weight-medium);
}

.ns-m5__when {
  line-height: var(--ns-line-height-20);
  color: var(--ns-color-content-base);
}

.ns-m5__badge--pending {
  background: var(--ns-mock-warning-bg);
}

.ns-m5__badge--pending span {
  color: var(--ns-mock-warning-ink);
}

.ns-m5__add {
  --ns-ico: 24px;
  position: absolute;
  left: 328px;
  top: 548px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--spacing-xl);
  height: var(--spacing-xl);
  border: 1px solid var(--ns-color-subtle);
  border-radius: var(--corner-radius-xl);
  background: var(--white);
  box-shadow: var(--ns-mock-shadow-drop);
  transform-origin: top left;
}

.ns-m6__waitlist {
  left: 400px;
  top: 304px;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-s);
  width: 280px;
  padding: var(--spacing-s);
  border-radius: var(--corner-radius-xs);
}

.ns-m6__waitlist-head,
.ns-m6__people {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-20);
}

.ns-m6__waitlist-title {
  font-size: var(--ns-font-size-14);
  line-height: var(--ns-line-height-20);
  text-align: right;
}

.ns-m6__person {
  display: flex;
  gap: var(--spacing-3xs);
  align-items: center;
}

.ns-m6__avatar {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--ns-radius-full);
  background: var(--ns-mock-teal-bg);
  font-size: var(--ns-font-size-10);
  line-height: var(--ns-line-height-16);
  font-weight: var(--ns-font-weight-medium);
  color: var(--ns-mock-teal-ink);
}

.ns-m6__person-text {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.ns-m6__person-name {
  line-height: var(--ns-line-height-16);
}

.ns-m6__person-mail {
  font-size: var(--ns-font-size-10);
  line-height: 14px;
  color: var(--ns-color-content-light);
}

.ns-m6__gallery {
  left: var(--spacing-40);
  top: 82px;
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3xs);
  width: 440px;
  padding: var(--spacing-3xs);
  border-radius: var(--corner-radius-s);
  box-shadow: var(--ns-shadow-2);
}

.ns-m6__grid {
  display: flex;
  gap: var(--spacing-4xs);
  align-items: center;
}

.ns-m6__grid-hero,
.ns-m6__grid-rest img {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  border-radius: var(--corner-radius-2xs);
  object-fit: cover;
}

.ns-m6__grid-rest img {
  aspect-ratio: 103 / 104;
}

.ns-m6__grid-hero {
  flex: 1;
  min-width: 0;
}

.ns-m6__grid-rest {
  display: grid;
  flex: 1;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--spacing-4xs);
  min-width: 0;
}

.ns-m6__body {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  align-items: center;
  padding: var(--spacing-3xs);
}

.ns-m6__title {
  overflow: hidden;
  width: 100%;
  font-size: var(--ns-font-size-22);
  line-height: var(--ns-line-height-32);
  font-weight: var(--ns-font-weight-medium);
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ns-m6__join {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2xs);
  align-items: center;
  width: 100%;
}

.ns-m6__desc {
  font-size: var(--ns-font-size-14);
  line-height: var(--ns-line-height-24);
  text-align: center;
}

.ns-m6__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: var(--spacing-2xs) var(--spacing-xs);
  border-radius: var(--ns-radius-2);
  background: var(--black);
}

.ns-m6__cta-label {
  font-size: var(--ns-font-size-14);
  line-height: var(--ns-line-height-20);
  font-weight: var(--ns-font-weight-medium);
  letter-spacing: var(--ns-tracking-2);
  color: var(--white);
  white-space: nowrap;
}

.ns-m6__count {
  --ns-ico: 12px;
  display: flex;
  gap: var(--spacing-4xs);
  align-items: center;
  line-height: var(--ns-line-height-16);
  color: var(--ns-color-content-base);
}

.ns-m6__stamp {
  position: absolute;
  left: 298px;
  top: 190px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 65px;
  height: 44px;
  padding: var(--spacing-3xs);
  border: 1px solid var(--ns-mock-stamp-border);
  border-radius: var(--ns-radius-2);
  background: var(--ns-mock-stamp);
  box-shadow: var(--ns-mock-shadow-stamp);
  transform: rotate(-10deg);
}

/* Kích thước hai nét gạch lấy đúng Frame 14 / Frame 15 của Figma (33×14 và 49×14,
   `strokeAlign: INSIDE` nên border-box là khớp), không còn suy ra từ chữ nữa. */
.ns-m6__stamp span {
  display: block;
  flex: none;
  height: 14px;
}

.ns-m6__stamp span:first-child {
  width: 33px;
  padding-top: 2px;
  border-top: 1.5px solid var(--white);
}

.ns-m6__stamp span:last-child {
  width: 49px;
  padding-bottom: 2px;
  border-bottom: 1.5px solid var(--white);
}

/* Toạ độ = ink box trong bản xuất Figma (hệ 720×720 của illustration) trừ đi gốc
   của .ns-m6__gallery (40, 82), vì ảnh neo vào gallery chứ không vào illustration. */
.ns-m6__stamp-word {
  position: absolute;
}

.ns-m6__stamp-word--fully {
  left: 313.55px;
  top: 198.99px;
}

.ns-m6__stamp-word--booked {
  left: 307.79px;
  top: 209.36px;
}

.ns-m7__gallery {
  left: 100px;
  top: 120px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  width: 520px;
  border-radius: var(--corner-radius-m);
  box-shadow: var(--ns-shadow-2);
}

.ns-m7__cover {
  position: relative;
  padding: var(--spacing-3xs) var(--spacing-3xs) 0;
}

.ns-m7__cover-media {
  position: relative;
  overflow: hidden;
  width: 504px;
  height: 336px;
  border-radius: var(--corner-radius-xs) var(--corner-radius-xs) 0 0;
}

.ns-m7__cover-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 44.35%;
}

.ns-m7__cover-glow {
  position: absolute;
  left: -134px;
  top: -129px;
  width: 751px;
  height: 332px;
}

.ns-m7__cover-info {
  position: absolute;
  right: var(--spacing-3xs);
  bottom: 0;
  left: var(--spacing-3xs);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--spacing-l) var(--spacing-xs) var(--spacing-xs);
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0),
    var(--ns-mock-scrim)
  );
  color: var(--white);
  text-align: center;
  white-space: nowrap;
}

/* Butler không có trong theme: chữ là SVG outline, <span> giữ nguyên khung text 261×32
   của Figma để bố cục quanh nó không đổi, ảnh đặt ở offset của ink box. */
.ns-m7__cover-title,
.ns-m7__cover-title > span {
  flex: none;
  display: block;
  width: 261px;
  height: 32px;
}

.ns-m7__cover-title > span {
  position: relative;
}

.ns-m7__cover-title img {
  position: absolute;
  top: 0.13px;
  left: 0.31px;
}

.ns-m7__cover-date {
  font-size: var(--ns-font-size-10);
  line-height: 14px;
}

.ns-m7__menu {
  display: flex;
  gap: var(--spacing-xs);
  align-items: center;
  padding-inline: var(--spacing-3xs);
}

.ns-m7__tabs {
  display: flex;
  gap: var(--spacing-3xs);
  flex: 1;
  align-items: center;
  min-width: 0;
}

/* "process folders" của Figma: hai tab phụ dính nhau, chỉ tách khỏi tab hiện tại
   bằng gap của .ns-m7__tabs. Khoảng cách này không đặt bằng margin được —
   `.ns-mock p` (0,1,1) thắng `.ns-m7__tab--current` (0,1,0) và xoá mất. */
.ns-m7__tab-group {
  display: flex;
  align-items: center;
}

.ns-m7__tab {
  position: relative;
  display: flex;
  gap: var(--spacing-3xs);
  align-items: center;
  padding: var(--spacing-xs) var(--spacing-3xs);
  font-size: var(--ns-font-size-10);
  line-height: 14px;
  color: var(--ns-color-content-base);
  white-space: nowrap;
}

.ns-m7__tab img {
  position: absolute;
  top: 15px;
  left: 46px;
}

.ns-m7__tab--current {
  padding-inline: 0;
  font-size: var(--ns-font-size-12);
  line-height: var(--ns-line-height-16);
  font-weight: var(--ns-font-weight-medium);
  color: var(--neutral-1);
}

.ns-m7__actions {
  --ns-ico: 12px;
  display: flex;
  gap: var(--spacing-3xs);
  align-items: center;
  padding-inline: var(--spacing-4xs);
}

.ns-m7__grid {
  display: flex;
  gap: 2px;
  padding: 0 var(--spacing-3xs) var(--spacing-s);
}

.ns-m7__column {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.ns-m7__cell {
  position: relative;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 300 / 400;
}

.ns-m7__cell > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ns-m7__cell-tools {
  --ns-ico: 12px;
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  gap: var(--spacing-4xs);
  align-items: center;
  padding: var(--spacing-4xs) var(--spacing-4xs) var(--spacing-3xs);
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0),
    var(--ns-mock-scrim-soft)
  );
}

.ns-brand {
  padding-block: var(--spacing-112);
}

.ns-brand__inner {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3xl);
}

.ns-brand__grid {
  display: grid;
  grid-template-columns: repeat(24, minmax(0, 1fr));
  grid-auto-rows: minmax(var(--ns-brand-row-h), auto);
  gap: var(--spacing-xs);
}

.ns-brand__card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--corner-radius-l);
}
.ns-brand__card--domain {
  --ns-brand-media-h: 360px;
  grid-column: 1 / span 12;
  background: var(--ns-brand-domain);
}
.ns-brand__card--language {
  --ns-brand-media-h: 360px;
  grid-column: 13 / span 12;
  background: var(--ns-brand-language);
}
.ns-brand__card--tools {
  --ns-brand-media-h: 316px;
  grid-column: 1 / span 8;
  background: var(--ns-brand-tools);
}
.ns-brand__card--identity {
  grid-column: 9 / span 16;
  background: var(--ns-brand-identity);
}

.ns-brand__text {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2xs);
  padding: var(--spacing-40) var(--spacing-40) 0;
}

.ns-brand__desc {
  font-size: var(--ns-font-size-18);
  line-height: var(--ns-line-height-28);
  letter-spacing: var(--ns-tracking-2);
}

.ns-brand__media {
  position: relative;
  flex: 1;
  overflow: hidden;
  width: 100%;
  min-height: var(--ns-brand-media-h, 0px);
}

.ns-brand__stage {
  position: absolute;
  bottom: 0;
  left: 0;
  transform-origin: bottom left;
}

.ns-brand__card--domain .ns-brand__stage,
.ns-brand__card--language .ns-brand__stage {
  bottom: -136px;
  width: 632px;
  height: 632px;
}

.ns-brand__card--tools .ns-brand__stage {
  bottom: -50px;
  width: 416px;
  height: 416px;
}

.ns-brand__card--identity .ns-brand__stage {
  bottom: -24px;
  width: 560px;
  height: 560px;
}

.ns-brand__card--identity {
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-between;
}

.ns-brand__card--identity .ns-brand__text {
  flex-shrink: 0;
  align-self: stretch;
  width: 288px;
  padding: var(--spacing-40) 0 var(--spacing-40) var(--spacing-40);
}

.ns-brand__card--identity .ns-brand__media {
  align-self: stretch;
  min-width: 0;
  height: auto;
}

.ns-bmock {
  position: absolute;
  inset: 0;
  font-size: var(--ns-font-size-12);
  line-height: var(--ns-line-height-16);
  letter-spacing: var(--ns-tracking-2);
  color: var(--neutral-1);
}

.ns-bmock p {
  margin: 0;
}

.ns-bmock img {
  display: block;
  max-width: none;
}

.ns-bmock__card {
  position: absolute;
  overflow: hidden;
  background: var(--white);
}

.ns-bmock__applied {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-inline: var(--spacing-3xs);
  border-radius: var(--corner-radius-xl);
  background: var(--ns-bmock-violet);
  color: var(--white);
  font-size: 8px;
  line-height: var(--ns-line-height-16);
  white-space: nowrap;
}

.ns-b1__domain {
  top: calc(50% + 33px);
  left: calc(50% - 28px);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2xs);
  width: 448px;
  padding: var(--spacing-xs);
  border-radius: var(--corner-radius-s);
  box-shadow: var(--ns-shadow-2);
  transform: translate(-50%, -50%);
}

.ns-b1__label {
  font-size: var(--ns-font-size-16);
  line-height: var(--ns-line-height-28);
}

.ns-b1__row {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-3xs);
}

.ns-b1__field {
  display: flex;
  flex: 1;
  align-items: center;
  min-width: 0;
  padding: var(--spacing-2xs) var(--spacing-xs);
  box-shadow: inset 0 0 0 1px var(--border-3);
  border-radius: var(--ns-bmock-radius-6);
  font-size: var(--ns-font-size-20);
  line-height: var(--ns-line-height-32);
  white-space: nowrap;
}

.ns-b1__caret {
  flex-shrink: 0;
  width: 1px;
  height: 32px;
  background: var(--neutral-2);
}

.ns-b1__save {
  flex-shrink: 0;
  padding: var(--spacing-2xs) var(--spacing-s);
  border-radius: var(--corner-radius-2xs);
  background: var(--black);
  color: var(--white);
  font-size: var(--ns-font-size-20);
  line-height: var(--ns-line-height-32);
}

.ns-b1__browser {
  top: calc(50% - 43px);
  left: calc(50% + 108.5px);
  border-radius: var(--corner-radius-xs);
  box-shadow: var(--ns-shadow-2);
  transform: translate(-50%, -50%);
}

.ns-b1__dots {
  display: flex;
  gap: 10px;
  padding: 10px var(--spacing-xs);
  box-shadow: inset 0 -1px 0 var(--ns-color-subtle);
}

.ns-b1__dot {
  width: 10px;
  height: 10px;
  border-radius: var(--ns-radius-full);
  background: var(--border-3);
}

.ns-b1__dot--go {
  background: var(--ns-bmock-dot-go);
}

.ns-b1__dot--stop {
  background: var(--ns-bmock-dot-stop);
}

.ns-b1__url {
  display: flex;
  align-items: center;
  gap: var(--spacing-2xs);
  padding: var(--spacing-xs);
  font-size: var(--ns-font-size-16);
  line-height: var(--ns-line-height-24);
  white-space: nowrap;
}

.ns-b1__ok {
  --ns-ico: var(--spacing-xs);
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: var(--corner-radius-xl);
  background: var(--ns-mock-positive-bg);
}

.ns-b2__panel {
  top: calc(50% + 89px);
  left: 50%;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  width: 300px;
  padding: var(--spacing-xs);
  border-radius: var(--corner-radius-xs);
  box-shadow: var(--ns-mock-shadow-drop);
  transform: translate(-50%, -50%);
}

.ns-b2__title {
  overflow: hidden;
  font-size: var(--ns-font-size-16);
  line-height: var(--ns-line-height-24);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ns-b2__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ns-b2__item {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--spacing-3xs);
  padding: var(--spacing-xs);
  box-shadow: inset 0 0 0 1px var(--ns-color-subtle);
  border-radius: var(--corner-radius-xs);
}

.ns-b2__item--on {
  box-shadow: inset 0 0 0 1.5px var(--ns-bmock-violet);
}

.ns-b2__code {
  flex-shrink: 0;
  width: 24px;
  padding-block: var(--spacing-4xs);
  border-radius: var(--ns-radius-full);
  background: var(--ns-color-flat-hover);
  color: var(--ns-color-content-base);
  font-size: var(--ns-font-size-10);
  line-height: var(--ns-line-height-16);
  font-weight: var(--ns-font-weight-medium);
  text-align: center;
}

.ns-b2__item--on .ns-b2__code {
  background: var(--ns-bmock-violet-bg);
  color: var(--ns-bmock-violet-ink);
}

.ns-b2__name {
  flex: 1;
  min-width: 0;
  font-size: var(--ns-font-size-14);
  line-height: 22px;
}

.ns-b2__item .ns-bmock__applied {
  top: 6.5px;
  right: 6.5px;
}

.ns-b3__tile {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--white);
  transform: translate(-50%, -50%);
}

.ns-b3__tile--mailchimp {
  top: calc(50% - 64px);
  left: calc(50% - 136px);
  width: 48px;
  height: 48px;
  border-radius: 10px;
  background: var(--ns-bmock-mailchimp);
}

.ns-b3__tile--mailchimp img {
  width: 48px;
  height: 48px;
}

.ns-b3__tile--flodesk {
  top: calc(50% - 82px);
  left: calc(50% + 85px);
  width: 60px;
  height: 60px;
  border-radius: 12.5px;
}

.ns-b3__tile--flodesk img {
  width: 39.28px;
  height: 8.3px;
}

.ns-b3__tile--meta {
  top: calc(50% + 65px);
  left: calc(50% - 115px);
  width: 56px;
  height: 56px;
  border-radius: 12px;
  box-shadow: var(--ns-bmock-tile-shadow-56);
}

.ns-b3__tile--meta img {
  width: 35.84px;
  height: 23.89px;
}

.ns-b3__tile--analytics {
  top: calc(50% + 77px);
  left: calc(50% + 65px);
  width: 64px;
  height: 64px;
  border-radius: 12px;
  box-shadow: var(--ns-bmock-tile-shadow-64);
}

.ns-b3__tile--analytics img {
  width: 33.65px;
  height: 37.25px;
}

.ns-b3__tile--gcal {
  top: calc(50% - 28px);
  left: calc(50% - 20px);
  width: 104px;
  height: 104px;
  border-radius: 21.667px;
  box-shadow: var(--ns-bmock-tile-shadow-104);
}

.ns-b3__tile--gcal img {
  width: 56.33px;
  height: 56.33px;
}

.ns-b3__tile--apple {
  top: calc(50% + 31px);
  left: calc(50% + 122px);
  width: 76px;
  height: 76px;
  border-radius: 15.833px;
  box-shadow: var(--ns-bmock-tile-shadow-76);
}

.ns-b3__tile--apple img {
  position: absolute;
  top: 9.22px;
  left: 12.81px;
  width: 50.38px;
  height: 52.96px;
}

.ns-b4__brand > span,
.ns-b4__quote > span,
.ns-b4__intro-text > span,
.ns-b4__font-name > span {
  position: relative;
  display: block;
  flex: none;
}

.ns-b4__brand img,
.ns-b4__quote img,
.ns-b4__intro-text img,
.ns-b4__font-name img {
  position: absolute;
  display: block;
}

.ns-b4__page {
  top: 74px;
  left: calc(50% + 52px);
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 360px;
  padding: 6px;
  border-radius: var(--corner-radius-xs);
  box-shadow: var(--ns-shadow-2);
  transform: translateX(-50%);
}

.ns-b4__brand {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding-block: 6px;
  box-shadow: inset 0 0 0 1px var(--ns-bmock-violet);
  background: var(--ns-bmock-page-bg);
}

.ns-b4__brand > span {
  width: 113px;
  height: 16px;
}

.ns-b4__brand img {
  top: 3.91px;
  left: 0.97px;
}

.ns-b4__hero {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 232px;
}

.ns-b4__hero > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ns-b4__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    transparent 60%,
    var(--ns-bmock-scrim)
  );
}

.ns-b4__quote {
  position: absolute;
  top: 164px;
  left: 74.4px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 200px;
  padding: var(--spacing-4xs);
  box-shadow: inset 0 0 0 1px var(--ns-bmock-violet);
}

.ns-b4__quote > span {
  width: 210px;
  height: 48px;
}

.ns-b4__quote img {
  top: 0.29px;
  left: 22.11px;
}

/* Hai nhãn này là chữ thật. Figma cho khung text cao 12px ở cỡ chữ 6px, nên phải ghi
   `line-height` — bỏ trống là dính 16px thừa kế của body: hộp cao 16px thay vì 12px,
   chữ tụt xuống 2px và nền tím ăn lấn 4px vào khung quote. Ghi bằng `em` để ≤1023 tự
   đúng khi mốc đó đổi cỡ chữ 6px → 10px. */
.ns-b4__tag,
.ns-b4__light {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-inline: var(--spacing-4xs);
  background: var(--ns-bmock-violet);
  color: var(--white);
  font-size: 6px;
  line-height: 2em;
}

/* top 186 + cao 12 = 198px — đúng mép trên khung quote, như Figma. */
.ns-b4__tag {
  position: absolute;
  top: 186px;
  left: 244.4px;
}

.ns-b4__light {
  position: absolute;
  bottom: 480px;
  left: calc(50% + 213px);
  transform: translateX(-50%);
}

.ns-b4__intro {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--spacing-20);
  overflow: hidden;
  width: 100%;
  padding: var(--spacing-m) var(--spacing-xs);
  background: var(--ns-bmock-page-bg);
}

.ns-b4__intro-text {
  display: flex;
  justify-content: flex-end;
  width: 100%;
  padding-right: var(--spacing-s);
}

.ns-b4__intro-text > span {
  width: 204px;
  height: 48px;
}

.ns-b4__intro-text img {
  top: 2.53px;
  left: 0.5px;
}

.ns-b4__gallery {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-s);
  width: 100%;
}

.ns-b4__shot {
  display: block;
  overflow: hidden;
}

.ns-b4__shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ns-b4__shot--tall {
  flex: 1;
  min-width: 0;
  height: 195px;
}

.ns-b4__col {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--spacing-xs);
  min-width: 0;
  padding-top: var(--spacing-xs);
}

.ns-b4__shot--square {
  width: 100%;
  height: 97px;
}

.ns-b4__caption {
  font-size: 8px;
  line-height: 14px;
  letter-spacing: normal;
  color: var(--neutral-2);
}

.ns-b4__panel {
  bottom: -6px;
  left: calc(50% - 120px);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  width: 224px;
  padding: var(--spacing-xs);
  border-radius: var(--corner-radius-xs);
  box-shadow: var(--ns-shadow-2);
  transform: translateX(-50%);
}

.ns-b4__group {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2xs);
}

.ns-b4__group--schemes {
  overflow: hidden;
  box-shadow: inset 0 -1px 0 var(--ns-bmock-hairline);
}

.ns-b4__group-title {
  font-size: var(--ns-font-size-12);
  line-height: var(--ns-line-height-20);
  font-weight: var(--ns-font-weight-medium);
}

.ns-b4__fonts,
.ns-b4__schemes {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3xs);
}

.ns-b4__font {
  position: relative;
  padding: var(--spacing-3xs) var(--spacing-2xs);
  box-shadow: inset 0 0 0 1px var(--border-5);
  border-radius: var(--corner-radius-xs);
}

.ns-b4__font--on {
  box-shadow: inset 0 0 0 1.5px var(--ns-bmock-violet);
}

.ns-b4__font-name > span {
  width: 168px;
  height: 20px;
}

.ns-b4__font-name--merchant img {
  top: 3.92px;
  left: 0.29px;
}

.ns-b4__font-name--gilda img {
  top: 3.7px;
  left: 0.7px;
}

.ns-b4__font-body {
  font-size: var(--ns-font-size-10);
  line-height: 14px;
}

.ns-b4__font .ns-bmock__applied {
  top: 4.5px;
  right: 4.5px;
}

.ns-b4__scheme {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  padding: var(--spacing-3xs);
  box-shadow: inset 0 0 0 1px var(--border-3);
  border-radius: var(--corner-radius-xs);
}

.ns-b4__scheme--on {
  box-shadow: inset 0 0 0 1.5px var(--ns-bmock-violet);
}

.ns-b4__scheme .ns-bmock__applied {
  top: 3.5px;
  right: 3.5px;
}

.ns-b4__swatch {
  height: 40px;
  background: var(--white);
}

.ns-b4__scheme:nth-child(1) .ns-b4__swatch:nth-child(1) {
  background: var(--ns-bmock-s1-1);
}
.ns-b4__scheme:nth-child(1) .ns-b4__swatch:nth-child(2) {
  background: var(--ns-bmock-s1-2);
}
.ns-b4__scheme:nth-child(1) .ns-b4__swatch:nth-child(3) {
  background: var(--ns-bmock-s1-3);
}
.ns-b4__scheme:nth-child(1) .ns-b4__swatch:nth-child(4) {
  background: var(--ns-bmock-s1-4);
}
.ns-b4__scheme:nth-child(1) .ns-b4__swatch:nth-child(5) {
  background: var(--ns-bmock-s1-5);
}

.ns-b4__scheme:nth-child(2) .ns-b4__swatch:nth-child(2) {
  background: var(--ns-bmock-s2-2);
}
.ns-b4__scheme:nth-child(2) .ns-b4__swatch:nth-child(3) {
  background: var(--ns-bmock-s2-3);
}
.ns-b4__scheme:nth-child(2) .ns-b4__swatch:nth-child(4) {
  background: var(--ns-bmock-s2-4);
}
.ns-b4__scheme:nth-child(2) .ns-b4__swatch:nth-child(5) {
  background: var(--ns-bmock-s2-5);
}

.ns-b4__scheme:nth-child(3) .ns-b4__swatch:nth-child(2) {
  background: var(--ns-bmock-s3-2);
}
.ns-b4__scheme:nth-child(3) .ns-b4__swatch:nth-child(3) {
  background: var(--ns-bmock-s3-3);
}
.ns-b4__scheme:nth-child(3) .ns-b4__swatch:nth-child(4) {
  background: var(--ns-bmock-s3-4);
}
.ns-b4__scheme:nth-child(3) .ns-b4__swatch:nth-child(5) {
  background: var(--ns-bmock-s3-5);
}
@media screen and (max-width: 1439px) {
  .ns-hero__aside {
    grid-column: 15 / span 10;
  }

  .ns-hero__banner {
    height: 725px;
  }

  .ns-hero__panel {
    height: 616px;
  }

  .ns-hero__scene {
    position: absolute;
    top: 0;
    left: 50%;
    width: 1056px;
    min-height: 832px;
    margin: 0;
    transform: translateX(-50%) scale(0.8712);
    transform-origin: top center;
  }

  .ns-features {
    --ns-feature-bleed: calc(
      max(0px, (100vw - 1280px) / 2) + var(--spacing-28)
    );
  }

  .ns-feature {
    min-height: 640px;
  }

  .ns-feature__stage {
    width: 586px;
    height: 586px;
  }

  .ns-mock {
    transform: scale(0.813889);
  }

  .ns-feature__body {
    gap: var(--spacing-s);
  }

  .ns-feature__lead,
  .ns-feature__point {
    font-size: var(--ns-font-size-18);
    line-height: var(--ns-line-height-28);
  }

  .ns-feature__check {
    padding-block: 0;
    height: 28px;
  }

  .ns-brand__grid {
    --ns-brand-row-h: 448px;
  }

  .ns-brand__card--domain {
    --ns-brand-media-h: 308px;
  }
  .ns-brand__card--language {
    --ns-brand-media-h: 268px;
  }
  .ns-brand__card--tools {
    --ns-brand-media-h: 240px;
  }

  .ns-brand__text {
    padding: var(--spacing-m) var(--spacing-m) 0;
  }

  .ns-brand__card--identity .ns-brand__text {
    width: 232px;
    padding: var(--spacing-m) 0 var(--spacing-m) var(--spacing-m);
  }

  .ns-brand__card--domain .ns-brand__stage {
    bottom: -84px;
    transform: scale(0.753165);
  }

  .ns-brand__card--language .ns-brand__stage {
    bottom: -104px;
    transform: scale(0.753165);
  }

  .ns-brand__card--tools .ns-brand__stage {
    bottom: -36px;
    transform: scale(0.75);
  }

  .ns-brand__card--identity .ns-brand__stage {
    bottom: 0;
    left: -20px;
    transform: scale(0.8);
  }
}
@media screen and (max-width: 1023px) {
  .ns-hero {
    padding-block: var(--spacing-l);
  }

  .ns-hero__inner {
    gap: var(--spacing-l);
  }

  .ns-hero__headline {
    grid-column: 1 / span 12;
    gap: var(--spacing-3xs);
  }

  .ns-hero__aside {
    grid-column: 14 / span 11;
  }

  .ns-hero__banner {
    height: 480px;
  }

  .ns-hero__panel {
    height: 360px;
  }

  .ns-hero__scene {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: var(--spacing-2xs);
    width: 336px;
    height: 480px;
    min-height: 0;

    padding: var(--spacing-l) 0 0 var(--spacing-2xs);
    overflow: hidden;
    transform: translateX(-50%);
  }

  .ns-hero-sessions,
  .ns-hero-earnings {
    width: 144px;
    margin: 0;
    padding: var(--spacing-2xs);
    border-radius: var(--corner-radius-xs);
  }

  .ns-hero-sessions {
    gap: var(--spacing-2xs);
  }

  .ns-hero-sessions__head {
    gap: var(--spacing-4xs);
  }

  .ns-hero-sessions__eyebrow {
    font-size: 6px;
    line-height: 12px;
  }

  .ns-hero-sessions__title {
    font-size: 12px;
    line-height: 16px;
  }

  .ns-hero-sessions__list {
    gap: 6px;
  }

  .ns-hero-sessions__row:nth-child(4) {
    display: none;
  }

  .ns-hero-sessions__row {
    flex-direction: column;
    gap: 2px;
    padding-top: 6px;
    border-top: 1px solid var(--ns-hero-line);
  }

  .ns-hero-sessions__time {
    width: auto;
    font-size: 8px;
    line-height: 12px;
  }

  .ns-hero-sessions__name {
    font-size: 10px;
    line-height: 14px;
  }

  .ns-hero-earnings {
    height: 120px;
  }

  .ns-hero-earnings__summary {
    gap: var(--spacing-4xs);
    padding: 0;
  }

  .ns-hero-earnings__label {
    font-size: 8px;
    line-height: 12px;
  }

  .ns-hero-earnings__label:last-child {
    display: none;
  }

  .ns-hero-earnings__stat {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-4xs);
  }

  .ns-hero-earnings__value {
    font-size: var(--ns-font-size-16);
    line-height: var(--ns-line-height-24);
  }

  .ns-hero-earnings__delta {
    font-size: 8px;
    line-height: 12px;
  }

  .ns-hero-earnings__delta span {
    padding-inline: 2px;
  }

  .ns-hero-earnings__delta img {
    width: 12px;
    height: auto;
    margin-inline: 0;
  }

  .ns-hero-earnings__chart {
    top: var(--spacing-l);
    bottom: auto;
    left: 0;
    width: 100%;
    height: calc(100% - var(--spacing-l));
  }

  .ns-hero-product {
    position: absolute;
    top: var(--spacing-s);
    left: 124px;
    gap: var(--spacing-4xs);
    width: 200px;
    margin: 0;
    padding: var(--spacing-4xs);
    border-radius: var(--corner-radius-xs);
  }

  .ns-hero-product__media {
    border-radius: var(--corner-radius-2xs) var(--corner-radius-2xs) 0 0;
  }

  .ns-hero-product__info {
    gap: var(--spacing-xs);
    padding: var(--spacing-3xs);
  }

  .ns-hero-product__text {
    gap: var(--spacing-4xs);
  }

  .ns-hero-product__name {
    font-size: var(--ns-font-size-14);
    line-height: var(--ns-line-height-20);
  }

  .ns-hero-product__price {
    font-size: 10px;
    line-height: 14px;
  }

  .ns-hero-slots {
    gap: var(--spacing-3xs);
  }

  .ns-hero-slots__grid {
    gap: var(--spacing-4xs);
  }

  .ns-hero-slots__item {
    padding: 6px var(--spacing-4xs);
    border-radius: var(--ns-radius-2);
    font-size: 8px;
    line-height: 12px;
    white-space: nowrap;
  }

  .ns-hero-slots__badge {
    top: -4px;
    right: -3px;
    padding: 2px;
  }

  .ns-hero-slots__check {
    width: 8px;
    height: 8px;
  }

  .ns-hero-slots__check img {
    width: 100%;
    height: auto;
  }

  .ns-hero-slots__cta {
    padding: 10px var(--spacing-xs);
    border-radius: var(--ns-radius-2);
    font-size: 10px;
    line-height: 14px;
    white-space: nowrap;
  }

  .ns-features,
  .ns-brand {
    padding-block: var(--spacing-xl);
  }

  .ns-features__inner,
  .ns-brand__inner {
    gap: var(--spacing-l);
  }

  .ns-features__list {
    gap: var(--spacing-xl);
  }

  .ns-feature {
    min-height: 440px;
  }

  .ns-feature__stage {
    width: 360px;
    height: 440px;
  }

  .ns-mock {
    width: 360px;
    height: 440px;
    transform: none;
  }

  .ns-m1__setup {
    left: 36px;
    top: 50%;
    gap: 10px;
    width: 160px;
    padding: 10px;
    border-radius: 6px;
    transform: translateY(-50%);
  }

  .ns-m1__setup-title {
    font-size: 10px;
    line-height: 14px;
  }

  .ns-m1__strip {
    margin-bottom: 6px;
  }

  .ns-m1__cols {
    grid-template-columns: minmax(0, 1fr);
  }

  .ns-m1__aside {
    display: none;
  }

  .ns-m1__intro {
    gap: 2px;
  }

  .ns-m1__intro-title {
    font-size: 8px;
    line-height: 12px;
  }

  .ns-m1__intro-desc {
    font-size: 6px;
    line-height: 8px;
  }

  .ns-m1__date {
    flex-wrap: wrap;
    padding-block: 5px;
    font-size: 7px;
    line-height: 10px;
  }

  .ns-m1__date:nth-child(n + 4) {
    display: none;
  }

  .ns-m1__date-badge {
    min-width: 24px;
    padding: 1px;
    font-size: 6px;
    line-height: 8px;
  }

  .ns-m1__date-time {
    flex-basis: 100%;
    margin-left: 0;
    line-height: 10px;
  }

  .ns-m1__date-arrow {
    width: 6px;
    height: 6px;
  }

  .ns-m1__btn {
    padding: 6px 8px;
  }

  .ns-m1__btn-label {
    font-size: 7px;
    line-height: 10px;
  }

  .ns-m1__book {
    left: 148px;
    top: 50%;
    width: 176px;
    border-radius: var(--corner-radius-xs);
    transform: translateY(-50%);
  }

  .ns-m1__book-cover {
    padding: var(--spacing-4xs) var(--spacing-4xs) 0;
  }

  .ns-m1__book-cover img {
    border-radius: 5px 5px 0 0;
  }

  .ns-m1__book-body {
    gap: var(--spacing-xs);
    padding: var(--spacing-2xs);
  }

  .ns-m1__book-head {
    gap: var(--spacing-4xs);
  }

  .ns-m1__book-title {
    font-size: 11px;
    line-height: var(--ns-line-height-16);
  }

  .ns-m1__book-meta {
    gap: 3px;
    font-size: 8px;
    line-height: 11px;
  }

  .ns-m1__dot {
    width: 2px;
    height: 2px;
  }

  .ns-m1__picker {
    gap: var(--spacing-3xs);
  }

  .ns-m1__picker-date {
    font-size: 8px;
    line-height: 11px;
  }

  .ns-m1__slot {
    padding-block: 5px;
    font-size: 7px;
    line-height: 10px;
  }

  .ns-m1__cta {
    height: auto;
    padding: var(--spacing-3xs) var(--spacing-xs);
  }

  .ns-m1__cta-label {
    font-size: 8px;
    line-height: 11px;
  }

  .ns-m2__book {
    left: 50%;
    top: 50%;
    width: 184px;
    border-radius: 7px;
    transform: translate(-50%, -50%);
  }

  .ns-m2__cover {
    padding: var(--spacing-4xs) var(--spacing-4xs) 0;
  }

  .ns-m2__cover img {
    border-radius: 5px 5px 0 0;
  }

  .ns-m2__body {
    gap: 14px;
    padding: 11px;
  }

  .ns-m2__head {
    gap: var(--spacing-4xs);
  }

  .ns-m2__title {
    font-size: 11px;
    line-height: 14px;
  }

  .ns-m2__meta {
    gap: 3px;
    font-size: 7px;
    line-height: 11px;
  }

  .ns-m2__dot {
    width: 2px;
    height: 2px;
  }

  .ns-m2__picker {
    gap: 7px;
  }

  .ns-m2__picker-date {
    font-size: 7px;
    line-height: 11px;
  }

  .ns-m2__slot {
    padding-block: 5px;
    font-size: 6px;
    line-height: 9px;
  }

  .ns-m2__cursor {
    --ns-ico: 7px;
    left: 46px;
    top: -3.22px;
    width: 9px;
    height: 9px;
  }

  .ns-m2__cta {
    height: auto;
    padding: 7px 14px;
  }

  .ns-m2__cta-label {
    font-size: 7px;
    line-height: 11px;
  }

  .ns-m2__pill {
    gap: 0;
  }

  .ns-m2__pill span {
    padding-inline: 2px;
  }

  .ns-m2__pill--questionnaire {
    left: 80px;
    top: 60px;
    padding: var(--spacing-3xs) 9px;
    border-radius: 14px 14px var(--ns-radius-2) 14px;
    font-size: 8px;
    line-height: 12px;
    transform: translate(-50%, -50%);
  }

  .ns-m2__pill--retainer {
    left: 61.5px;
    top: 185px;
    padding: 9px 10px;
    border-radius: 15px 15px var(--ns-radius-2) 15px;
    font-size: 9px;
    line-height: 12px;
    transform: translate(-50%, -50%);
  }

  .ns-m2__pill--contract {
    left: 285.5px;
    top: 87px;
    padding: var(--spacing-3xs) 10px;
    border-radius: 14px 14px 14px var(--ns-radius-2);
    font-size: 9px;
    line-height: 12px;
    transform: translate(-50%, -50%);
  }

  .ns-m2__pill--questionnaire .ns-ico,
  .ns-m2__pill--retainer .ns-ico,
  .ns-m2__pill--contract .ns-ico {
    --ns-ico: var(--spacing-2xs);
  }

  .ns-m2__pill--success {
    left: 277.5px;
    top: 254px;
    gap: var(--ns-spacing-2);
    padding: 10px 14px;
    border-radius: 18px 18px 18px var(--ns-radius-2);
    font-size: var(--ns-font-size-10);
    line-height: 14px;
    transform: translate(-50%, -50%);
  }

  .ns-m2__pill--success .ns-ico {
    --ns-ico: var(--spacing-xs);
  }

  .ns-m3__card {
    left: 48px;
    top: 77px;
    transform: scale(0.635);
  }

  .ns-m4__schedule {
    left: 184px;
    top: 190px;
    transform: scale(0.54);
  }

  .ns-m4__payment {
    left: 16px;
    top: 58px;
    transform: scale(0.553);
  }

  .ns-m5__stack {
    left: var(--spacing-20);
    top: 51px;
    transform: scale(0.667);
  }

  .ns-m5__add {
    left: 158px;
    top: 345px;
    transform: scale(0.688);
  }

  .ns-m6__waitlist {
    left: 176px;
    top: 203px;
    transform: scale(0.586);
  }

  .ns-m6__gallery {
    left: var(--spacing-20);
    top: var(--spacing-40);
    transform: scale(0.586);
  }

  .ns-m7__gallery {
    left: var(--spacing-m);
    top: 104px;
    transform: scale(0.569);
  }

  .ns-feature__media {
    grid-column: 1 / span 12;
    border-radius: 0 var(--corner-radius-s) var(--corner-radius-s) 0;
  }

  .ns-feature--reverse .ns-feature__media {
    grid-column: 13 / span 12;
    border-radius: var(--corner-radius-s) 0 0 var(--corner-radius-s);
  }

  .ns-feature__card {
    grid-column: 15 / span 10;
    gap: var(--spacing-s);
  }

  .ns-feature--reverse .ns-feature__card {
    grid-column: 1 / span 10;
  }

  .ns-feature__body,
  .ns-feature__lead-group {
    gap: var(--spacing-2xs);
  }

  .ns-feature__lead,
  .ns-feature__point {
    font-size: var(--ns-font-size-16);
    line-height: var(--ns-line-height-24);
    letter-spacing: var(--ns-tracking-1);
  }

  .ns-feature__check {
    height: 24px;
  }

  .ns-brand__card--tools {
    grid-column: 1 / span 12;
  }

  .ns-brand__card--identity {
    grid-column: 13 / span 12;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
  }

  .ns-brand__grid {
    --ns-brand-row-h: 400px;
  }

  .ns-brand__card--domain {
    --ns-brand-media-h: 264px;
  }
  .ns-brand__card--language {
    --ns-brand-media-h: 288px;
  }
  .ns-brand__card--tools {
    --ns-brand-media-h: 288px;
  }
  .ns-brand__card--identity {
    --ns-brand-media-h: 264px;
  }

  .ns-brand__text,
  .ns-brand__card--identity .ns-brand__text {
    width: auto;
    gap: var(--spacing-3xs);
    padding: var(--spacing-s) var(--spacing-s) 0;
  }

  .ns-brand__desc {
    font-size: var(--ns-font-size-16);
    line-height: var(--ns-line-height-24);
    letter-spacing: var(--ns-tracking-1);
  }

  .ns-brand__card--identity .ns-brand__media {
    align-self: auto;
    min-width: 0;
  }

  .ns-brand__card--domain .ns-brand__stage {
    bottom: -40.41px;
    left: -2px;
    transform: scale(0.555556);
  }

  .ns-brand__card--language .ns-brand__stage {
    bottom: -114px;
    left: -63px;
    transform: scale(0.75);
  }

  .ns-brand__card--language .ns-b2__panel {
    width: 320px;
  }

  .ns-brand__card--tools .ns-brand__stage {
    bottom: -12px;
    left: 18px;
    transform: scale(0.75);
  }

  .ns-brand__card--identity .ns-brand__stage {
    bottom: -72px;
    left: 14px;
    transform: scale(0.6);
  }

  .ns-b4__page {
    top: 48.33px;
    left: calc(50% + 36.67px);
  }

  .ns-b4__panel {
    top: 159.23px;
    bottom: auto;
    left: calc(50% - 134.67px);
  }

  .ns-b4__light {
    top: 35px;
    bottom: auto;
    left: 450px;
    transform: none;
  }

  .ns-b4__tag,
  .ns-b4__light {
    padding-inline: 6.67px;
    font-size: var(--ns-font-size-10);
  }

  .ns-b4__tag {
    top: 178px;
    left: 225px;
  }

  .ns-b4__caption {
    font-size: var(--ns-font-size-10);
    line-height: 15px;
  }

  .ns-b4__font .ns-bmock__applied,
  .ns-b4__scheme .ns-bmock__applied {
    font-size: var(--ns-font-size-10);
    line-height: 16.67px;
  }

  .ns-b3__tile--meta,
  .ns-b3__tile--flodesk {
    border-radius: 9px;
  }
}
@media screen and (max-width: 767px) {
  .ns-hero__text {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2xs);
  }

  .ns-feature {
    align-items: flex-start;
  }
  .ns-hero__aside {
    gap: var(--spacing-m);
    padding-bottom: 0;
  }

  .ns-hero__actions {
    flex-wrap: wrap;
  }

  .ns-features {
    --ns-feature-bleed: var(--spacing-xs);
  }

  .ns-features,
  .ns-brand {
    padding-block: var(--spacing-l);
  }

  .ns-features__list {
    gap: var(--spacing-xl);
  }

  .ns-feature,
  .ns-feature--reverse {
    display: flex;
    flex-direction: column-reverse;
    gap: var(--spacing-s);
    min-height: 0;
  }

  .ns-feature__card,
  .ns-feature--reverse .ns-feature__card {
    width: 284px;
  }

  .ns-feature__media {
    height: 440px;
  }

  .ns-brand__grid {
    display: flex;
    flex-direction: column;
  }

  /* Chi hai the giua canh giua; the dau (domain) va the cuoi (identity) giu canh trai. */
  .ns-brand__card--language .ns-brand__text,
  .ns-brand__card--tools .ns-brand__text {
    text-align: center;
  }

  .ns-brand__desc {
    text-align: start;
  }

  .ns-brand__card--domain {
    min-height: 320px;
    --ns-brand-media-h: 184px;
  }
  .ns-brand__card--language {
    min-height: 352px;
    --ns-brand-media-h: 240px;
  }
  .ns-brand__card--tools {
    min-height: 352px;
    --ns-brand-media-h: 240px;
  }
  .ns-brand__card--identity {
    min-height: 456px;
    --ns-brand-media-h: 320px;
  }

  .ns-brand__card--domain .ns-brand__stage {
    bottom: -80.41px;
    left: calc(50% - 175.56px);
  }
  .ns-brand__card--language .ns-brand__stage {
    bottom: -138px;
    left: calc(50% - 237px);
  }
  .ns-brand__card--tools .ns-brand__stage {
    bottom: -36px;
    left: calc(50% - 156px);
  }
  .ns-brand__card--identity .ns-brand__stage {
    bottom: -16px;
    left: calc(50% - 160px);
  }
}