/* Nabtech Workspace store styles: growth
 * Nabtech Workspace theme. Structure: palette tokens, then rules grouped by the component they style,
 * in cascade order (groups repeat when the cascade needs a later override). */

:root {
  --nwp-growth-c1: #fff;
}

/* ng-hero */
#nb-store .ng-hero-copy {
  position: relative;
  z-index: 2;
  min-width: 0;
}
#nb-store .ng-hero-copy h1 {
  font-size: clamp(42px,5.7vw,78px);
  line-height: 1.035;
  letter-spacing: -.055em;
  max-width: 780px;
  margin: 20px 0 24px;
  font-weight: 760;
  color: var(--nwp-growth-c1);
}
#nb-store .ng-hero-copy h1 em {
  font-style: normal;
  color: var(--ng-accent,#61afee);
}
#nb-store .ng-hero-copy p {
  max-width: 560px;
  color: #b9cedd;
  font-size: 17px;
  line-height: 1.85;
}

/* ng-eyebrow */
#nb-store .ng-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: #d3e5f2;
  font-size: 11px;
  line-height: 1.5;
  font-weight: 750;
  letter-spacing: .16em;
  text-transform: uppercase;
}
#nb-store .ng-eyebrow:before {
  content: "";
  width: 24px;
  height: 2px;
  background: var(--ng-accent,#61afee);
}

/* ng-hero */
#nb-store .ng-hero-tags {
  display: flex;
  gap: 9px;
  flex-wrap: wrap;
  margin-top: 30px;
}
#nb-store .ng-hero-tags span {
  display: block;
  border: 1px solid #ffffff25;
  border-radius: 30px;
  padding: 7px 12px;
  color: #bcd2e1;
  background: #ffffff05;
  font-size: 11px;
  letter-spacing: .015em;
}

/* ng-price */
#nb-store .ng-price-top {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 28px;
  margin-bottom: 30px;
}
#nb-store .ng-price-top h2 {
  margin: 8px 0 12px;
  font-size: clamp(28px,3.4vw,44px);
  line-height: 1.13;
  letter-spacing: -.045em;
  color: var(--nb-ink,#14273b);
}
#nb-store .ng-price-top p {
  color: var(--nb-muted,#667a8a);
  font-size: 15px;
  line-height: 1.8;
  max-width: 640px;
  margin: 0;
}

/* ng-currency */
#nb-store .ng-currency {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  max-width: 100%;
  margin: 0;
}
#nb-store .ng-currency label {
  font-size: 12px;
  font-weight: 700;
  color: var(--nb-muted,#667a8a);
  margin: 0;
}
#nb-store .ng-currency select {
  appearance: auto;
  width: auto;
  max-width: 100%;
  min-height: 44px;
  border: 1px solid #dce7ef;
  border-radius: 13px;
  padding: 9px 13px;
  background: var(--nwp-growth-c1);
  color: var(--nb-ink,#14273b);
  font: inherit;
  font-size: 12px;
  box-shadow: 0 6px 20px #18334f05;
  cursor: pointer;
}

/* ng-plans */
#nb-store .ng-plans {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,255px),1fr));
  gap: 20px;
  align-items: stretch;
}

/* ng-plan */
#nb-store .ng-plan {
  display: flex;
  flex-direction: column;
  position: relative;
  background: var(--nwp-growth-c1);
  border: 1px solid #dde8f0;
  border-radius: 25px;
  padding: 30px;
  box-shadow: 0 15px 40px #233e5910;
  min-width: 0;
  overflow: visible;
  color: var(--nb-ink,#14273b);
}

/* is-featured */
#nb-store .ng-plan.is-featured {
  border-color: var(--ng-accent-dark,#054c94);
  box-shadow: 0 20px 60px #233e591c;
}

/* ng-plan */
#nb-store .ng-plan-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: var(--ng-soft,#e7f3fb);
  color: var(--ng-accent-dark,#073f77);
  font-size: 18px;
  font-weight: 800;
  margin-bottom: 25px;
}
#nb-store .ng-plan-group {
  color: var(--nb-muted,#667a8a);
  font-size: 11px;
  line-height: 1.6;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin: 0 0 8px;
}
#nb-store .ng-plan .ng-plan-name {
  font-size: 24px;
  line-height: 1.25;
  letter-spacing: -.035em;
  margin: 0 0 10px;
  color: var(--nb-ink,#14273b);
  overflow-wrap: anywhere;
}
#nb-store .ng-plan-note {
  color: var(--nb-muted,#667a8a);
  font-size: 12px;
  line-height: 1.7;
  margin: 0 0 15px;
}

/* ng-price */
#nb-store .ng-price {
  font-size: clamp(24px,2.8vw,34px);
  font-weight: 750;
  line-height: 1.35;
  letter-spacing: -.045em;
  color: var(--nb-ink,#14273b);
  margin: 6px 0 25px;
  overflow-wrap: anywhere;
  min-height: 46px;
}
#nb-store .ng-price small,
#nb-store .ng-price .cycle {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
}

/* ng-specs */
#nb-store .ng-plan .ng-specs {
  list-style: none;
  padding: 0;
  margin: 0 0 28px;
  border-top: 1px solid #edf2f5;
  flex: 1;
}
#nb-store .ng-specs li {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 13px;
  padding: 12px 0;
  border-bottom: 1px solid #edf2f5;
  color: #4b6072;
  font-size: 12px;
  line-height: 1.65;
  margin: 0;
}
#nb-store .ng-specs li>span:first-child {
  flex: 1;
  min-width: 0;
}
#nb-store .ng-specs li>strong {
  font-weight: 650;
  text-align: right;
  color: #233950;
  max-width: 56%;
  overflow-wrap: anywhere;
}

/* ng-yes */
#nb-store .ng-yes {
  font-style: normal;
  font-weight: 800;
  color: #094683;
  font-size: 15px;
}

/* ng-no */
#nb-store .ng-no {
  font-style: normal;
  color: #8d9fae;
  font-size: 15px;
}

/* ng-plan */
#nb-store .ng-plan form {
  margin-top: auto;
}

/* nb-btn */
#nb-store .ng-plan form .nb-btn {
  width: 100%;
  min-height: 47px;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  background: #0d263f;
  color: var(--nwp-growth-c1);
  border: 0;
  font-size: 13px;
  padding: 12px 18px;
  border-radius: 13px;
  font-weight: 700;
  cursor: pointer;
  line-height: 1.4;
  text-decoration: none;
}
#nb-store .ng-plan.is-featured form .nb-btn {
  background: var(--ng-accent-dark,#043d77);
}

/* ng-guarantee */
#nb-store .ng-guarantee {
  text-align: center;
  color: var(--nb-muted,#667a8a);
  font-size: 13px;
  line-height: 1.65;
  margin-top: 26px;
}
#nb-store .ng-guarantee br {
  display: none;
}
#nb-store .ng-guarantee span {
  margin-left: 5px;
}

/* ng-feature */
#nb-store .ng-feature-intro h2 {
  font-size: clamp(31px,3.7vw,49px);
  line-height: 1.11;
  letter-spacing: -.045em;
  color: var(--nb-ink,#14273b);
  margin: 15px 0 22px;
}
#nb-store .ng-feature-intro p {
  font-size: 15px;
  line-height: 1.8;
  color: var(--nb-muted,#667a8a);
  max-width: 640px;
}

/* ng-tabbar */
#nb-store .ng-tabbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0;
  margin: 30px 0;
}
#nb-store .ng-tabbar button {
  appearance: none;
  background: var(--nwp-growth-c1);
  border: 1px solid #dce7ef;
  border-radius: 100px;
  padding: 11px 16px;
  font: inherit;
  font-size: 12px;
  font-weight: 650;
  color: #526a7e;
  cursor: pointer;
  line-height: 1.3;
  min-height: 40px;
}
#nb-store .ng-tabbar button[aria-selected="true"] {
  background: #0c243d;
  color: var(--nwp-growth-c1);
  border-color: #0c243d;
}
#nb-store .ng-tabbar button:focus-visible,
#nb-store .ng-gallery-filters button:focus-visible {
  outline: 3px solid #216ead;
  outline-offset: 4px;
}

/* ng-tab */
#nb-store .ng-tab-panel[hidden],
#nb-store .ng-gallery [hidden] {
  display: none !important;
}

/* ng-tool */
#nb-store .ng-tool-copy h3 {
  font-size: 24px;
  color: var(--nb-ink,#14273b);
  letter-spacing: -.025em;
  line-height: 1.2;
  margin: 0 0 16px;
}
#nb-store .ng-tool-copy p,
#nb-store .ng-tool-copy li {
  font-size: 13px;
  line-height: 1.8;
  color: #60778a;
}
#nb-store .ng-tool-copy ul {
  padding-left: 20px;
  margin: 15px 0;
}
#nb-store .ng-tool-copy li {
  padding: 3px 0;
}
#nb-store .ng-tool-copy li::marker {
  color: var(--ng-accent-dark,#04478b);
}
#nb-store .ng-tool-image {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
}
#nb-store .ng-tool-image img {
  display: block;
  width: 100%;
  max-width: 440px;
  max-height: 340px;
  object-fit: contain;
}

/* ng-resource */
#nb-store .ng-resource {
  background: var(--nwp-growth-c1);
  border: 1px solid #e0e9f0;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 15px 40px #142a400b;
}
#nb-store .ng-resource img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
}
#nb-store .ng-resource figcaption {
  padding: 16px 20px;
  font-size: 12px;
  color: #536d82;
  line-height: 1.6;
}

/* ng-detail */
#nb-store .ng-detail-toggle {
  margin: 20px 0 0;
  border: 1px solid #dce7ef;
  border-radius: 16px;
  background: var(--nwp-growth-c1);
}
#nb-store .ng-detail-toggle>summary {
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  padding: 16px 20px;
  color: #14273b;
}
#nb-store .ng-detail-toggle>div {
  padding: 0 20px 20px;
}

/* ng-preview */
#nb-store .ng-preview-note {
  border: 1px dashed #c6d8e4;
  border-radius: 18px;
  padding: 26px;
  text-align: center;
  font-size: 15px;
  color: #61788a;
  background: var(--nwp-growth-c1);
}

/* ng-mini */
#nb-store .ng-mini-label {
  font-size: 10px;
  line-height: 1.5;
  letter-spacing: .15em;
  text-transform: uppercase;
  font-weight: 700;
}

/* ng-cta */
#nb-store .ng-cta-copy h2 {
  font-size: clamp(36px,4.7vw,65px);
  line-height: 1.08;
  letter-spacing: -.045em;
  color: var(--nwp-growth-c1);
  margin: 15px 0 20px;
}
#nb-store .ng-cta-copy h2 em {
  font-style: normal;
  color: var(--ng-accent,#58abef);
}
#nb-store .ng-cta-copy p {
  color: #b9d0e0;
  font-size: 15px;
  line-height: 1.85;
  max-width: 540px;
}

/* nb-actions */
#nb-store .ng-cta-copy .nb-actions {
  margin-top: 27px;
}

/* nb-btn */
#nb-store .ng-cta-copy .nb-btn {
  background: var(--ng-accent,#58abef);
  color: #08213b;
}
#nb-store .ng-cta-copy .nb-btn--ghost {
  background: transparent;
  color: var(--nwp-growth-c1);
  border-color: #ffffff35;
}

/* nb-store */
#nb-store [data-growth-scene] {
  pointer-events: none;
  user-select: none;
}
#nb-store [data-growth-scene] * {
  box-sizing: border-box;
}

/* ng-plan */
#nb-store .ng-plan a,
#nb-store .ng-plan button {
  transition: background .2s,box-shadow .2s;
}
#nb-store .ng-plan button:disabled {
  cursor: not-allowed;
  opacity: .45;
}
#nb-store .ng-plan button:focus-visible {
  outline: 3px solid #0b66b1;
  outline-offset: 4px;
}
@media(max-width:760px) {
  #nb-store .ng-price-top {
    align-items: start;
    flex-direction: column;
    gap: 20px;
  }
  #nb-store .ng-currency {
    width: 100%;
  }
  #nb-store .ng-currency select {
    width: 100%;
  }
  #nb-store .ng-plan {
    padding: 25px;
  }
  #nb-store .ng-hero-copy h1 {
    font-size: clamp(39px,8.6vw,60px);
  }
  #nb-store .ng-hero-copy p {
    font-size: 15px;
  }
  #nb-store .ng-tabbar {
    gap: 6px;
  }
  #nb-store .ng-tabbar button {
    font-size: 11px;
    padding: 10px 12px;
  }
}
@media(prefers-reduced-motion:reduce) {
  #nb-store [data-growth-scene],
  #nb-store [data-growth-scene] * {
    animation: none !important;
    transition: none !important;
  }
}