:root {

  --nexa-black: #000000;
  --nexa-void: #050505;
  --nexa-charcoal: #0b0b0b;
  --nexa-surface: #101010;
  --nexa-surface-2: #151515;

  --nexa-lime: #C4FF00;
  --nexa-green: #7CFF00;

  --nexa-cyan: #00E5FF;
  --nexa-magenta: #FF00C8;

  --nexa-white: #ffffff;
  --nexa-gray: #9a9a9a;
  --nexa-muted: #666666;

  --nexa-border:
    rgba(255,255,255,0.10);

  --nexa-gradient:
    linear-gradient(
      90deg,
      #C4FF00 0%,
      #7CFF00 100%
    );

  --ease:
    cubic-bezier(0.22, 1, 0.36, 1);
}


/* ---------------------------------------------------------
   RESET
--------------------------------------------------------- */

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


html {
  scroll-behavior: smooth;
}


body {

  font-family:
    "Space Grotesk",
    sans-serif;

  background:
    var(--nexa-black);

  color:
    var(--nexa-white);

  min-height:
    100vh;

  overflow-x:
    hidden;

  font-weight:
    500;

  letter-spacing:
    -0.02em;
}


/* ---------------------------------------------------------
   AMBIENT
--------------------------------------------------------- */

.ambient {

  position: fixed;

  width: 500px;
  height: 500px;

  border-radius: 50%;

  pointer-events: none;

  filter:
    blur(140px);

  opacity:
    0.055;

  z-index:
    -1;
}


.ambient-one {

  top:
    -250px;

  left:
    -200px;

  background:
    var(--nexa-lime);
}


.ambient-two {

  bottom:
    -300px;

  right:
    -200px;

  background:
    var(--nexa-green);
}


/* ---------------------------------------------------------
   HEADER
--------------------------------------------------------- */

.site-header {

  border-bottom:
    1px solid var(--nexa-border);

  background:
    rgba(0,0,0,0.82);

  backdrop-filter:
    blur(18px);

  position:
    sticky;

  top:
    0;

  z-index:
    100;
}


.nav-container {

  max-width:
    1380px;

  margin:
    auto;

  min-height:
    78px;

  padding:
    0 5%;

  display:
    grid;

  grid-template-columns:
    1fr auto 1fr;

  align-items:
    center;
}


.back-link {

  display:
    inline-flex;

  align-items:
    center;

  gap:
    10px;

  color:
    var(--nexa-gray);

  text-decoration:
    none;

  font-size:
    13px;

  transition:
    color .25s var(--ease);

  width:
    fit-content;
}


.back-link:hover {
  color:
    var(--nexa-lime);
}


.back-icon {

  font-size:
    18px;

  transition:
    transform .25s var(--ease);
}


.back-link:hover .back-icon {
  transform:
    translateX(-4px);
}


/* ---------------------------------------------------------
   BRAND
--------------------------------------------------------- */

.brand-lockup {

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;
}


.brand-logo {

  width:
    120px;

  max-height:
    44px;

  object-fit:
    contain;
}


.brand-fallback {

  display:
    none;

  flex-direction:
    column;

  align-items:
    center;

  line-height:
    1;
}


.brand-fallback strong {

  font-size:
    15px;

  letter-spacing:
    .12em;
}


.brand-fallback span {

  color:
    var(--nexa-lime);

  font-size:
    8px;

  letter-spacing:
    .16em;

  margin-top:
    6px;
}


/* ---------------------------------------------------------
   STATUS
--------------------------------------------------------- */

.nav-status {

  justify-self:
    end;

  display:
    flex;

  align-items:
    center;

  gap:
    8px;

  color:
    var(--nexa-muted);

  font-size:
    11px;

  text-transform:
    uppercase;

  letter-spacing:
    .12em;
}


.status-dot,
.live-indicator span {

  width:
    6px;

  height:
    6px;

  border-radius:
    50%;

  background:
    var(--nexa-lime);

  box-shadow:
    0 0 12px
    rgba(196,255,0,.7);
}


/* ---------------------------------------------------------
   MAIN
--------------------------------------------------------- */

.main-container {

  width:
    min(100%, 1050px);

  margin:
    auto;

  padding:
    80px 24px 60px;
}


/* ---------------------------------------------------------
   HERO
--------------------------------------------------------- */

.hero {

  text-align:
    center;

  margin-bottom:
    55px;
}


.eyebrow {

  display:
    inline-flex;

  align-items:
    center;

  gap:
    9px;

  font-size:
    10px;

  color:
    var(--nexa-gray);

  letter-spacing:
    .18em;

  text-transform:
    uppercase;

  margin-bottom:
    24px;
}


.eyebrow span {

  width:
    7px;

  height:
    7px;

  background:
    var(--nexa-lime);

  display:
    block;

  border-radius:
    50%;

  box-shadow:
    0 0 15px
    rgba(196,255,0,.5);
}


.hero h1 {

  font-size:
    clamp(52px, 8vw, 92px);

  line-height:
    .92;

  letter-spacing:
    -.075em;

  font-weight:
    700;
}


.hero h1 span {

  background:
    var(--nexa-gradient);

  -webkit-background-clip:
    text;

  background-clip:
    text;

  color:
    transparent;
}


.hero > p {

  max-width:
    590px;

  margin:
    28px auto 20px;

  color:
    var(--nexa-gray);

  font-size:
    16px;

  line-height:
    1.7;
}


.motto {

  color:
    #777;

  font-size:
    10px;

  font-weight:
    700;

  letter-spacing:
    .28em;

  margin-top:
    24px;
}


.motto span {
  color:
    var(--nexa-lime);
}


/* ---------------------------------------------------------
   GENERATOR CARD
--------------------------------------------------------- */

.generator-card {

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.055),
      rgba(255,255,255,.015)
    );

  border:
    1px solid var(--nexa-border);

  border-radius:
    28px;

  padding:
    clamp(20px, 4vw, 42px);

  box-shadow:
    0 30px 100px rgba(0,0,0,.55),
    inset 0 1px rgba(255,255,255,.04);
}


/* ---------------------------------------------------------
   GENERATOR TOP
--------------------------------------------------------- */

.generator-top {

  display:
    flex;

  justify-content:
    space-between;

  gap:
    25px;

  align-items:
    flex-start;

  margin-bottom:
    35px;
}


.tool-number,
.preview-label,
.control-label,
.result-kicker,
.paywall-kicker {

  font-size:
    9px;

  color:
    var(--nexa-lime);

  letter-spacing:
    .18em;

  font-weight:
    700;
}


.generator-top h2 {

  font-size:
    clamp(26px, 4vw, 38px);

  margin:
    8px 0;

  letter-spacing:
    -.05em;
}


.generator-top p {

  color:
    var(--nexa-gray);

  font-size:
    14px;

  line-height:
    1.6;

  max-width:
    570px;
}


.pro-badge {

  flex-shrink:
    0;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    flex-end;

  color:
    var(--nexa-gray);

  font-size:
    12px;
}


.pro-badge span {

  border:
    1px solid rgba(196,255,0,.3);

  color:
    var(--nexa-lime);

  padding:
    5px 9px;

  border-radius:
    6px;

  font-size:
    9px;

  letter-spacing:
    .12em;

  margin-bottom:
    7px;
}


/* ---------------------------------------------------------
   PREVIEW
--------------------------------------------------------- */

.preview-section {
  margin-bottom:
    30px;
}


.preview-header {

  display:
    flex;

  justify-content:
    space-between;

  align-items:
    center;

  margin-bottom:
    12px;
}


.preview-hint {

  margin-left:
    12px;

  color:
    var(--nexa-muted);

  font-size:
    11px;
}


.live-indicator {

  display:
    flex;

  align-items:
    center;

  gap:
    8px;

  color:
    var(--nexa-muted);

  font-size:
    9px;

  letter-spacing:
    .15em;
}


.gradient-preview {

  position:
    relative;

  width:
    100%;

  min-height:
    390px;

  border-radius:
    22px;

  overflow:
    hidden;

  border:
    1px solid rgba(255,255,255,.12);

  background:
    var(--nexa-gradient);

  transition:
    background .35s var(--ease),
    transform .45s var(--ease),
    box-shadow .45s var(--ease);

  box-shadow:
    0 20px 70px rgba(0,0,0,.4);
}


.gradient-preview::before {

  content:
    "";

  position:
    absolute;

  inset:
    0;

  background:
    radial-gradient(
      circle at 25% 20%,
      rgba(255,255,255,.28),
      transparent 30%
    ),
    linear-gradient(
      120deg,
      rgba(255,255,255,.08),
      transparent 45%
    );

  pointer-events:
    none;
}


.gradient-preview.changing {

  box-shadow:
    0 25px 90px rgba(196,255,0,.14);
}


.gradient-preview:hover {

  transform:
    scale(1.006);
}


.preview-overlay {

  position:
    absolute;

  inset:
    0;

  display:
    flex;

  flex-direction:
    column;

  justify-content:
    center;

  align-items:
    center;

  pointer-events:
    none;

  mix-blend-mode:
    multiply;
}


.preview-overlay span {

  font-size:
    clamp(70px, 12vw, 150px);

  font-weight:
    700;

  letter-spacing:
    -.1em;
}


.preview-overlay small {

  font-size:
    9px;

  font-weight:
    700;

  letter-spacing:
    .35em;

  margin-top:
    5px;
}


/* ---------------------------------------------------------
   CONTROLS
--------------------------------------------------------- */

.controls-panel {

  background:
    var(--nexa-charcoal);

  border:
    1px solid var(--nexa-border);

  border-radius:
    18px;

  padding:
    24px;
}


.control-heading {

  display:
    flex;

  justify-content:
    space-between;

  align-items:
    center;
}


.control-heading > div {

  display:
    flex;

  align-items:
    center;

  gap:
    16px;
}


.control-heading strong {

  font-size:
    22px;

  letter-spacing:
    -.05em;
}


.mini-button {

  border:
    1px solid var(--nexa-border);

  background:
    transparent;

  color:
    var(--nexa-gray);

  padding:
    8px 13px;

  border-radius:
    8px;

  cursor:
    pointer;

  font-family:
    inherit;

  font-size:
    11px;

  transition:
    .25s var(--ease);
}


.mini-button:hover {

  border-color:
    var(--nexa-lime);

  color:
    var(--nexa-lime);
}


/* ---------------------------------------------------------
   RANGE
--------------------------------------------------------- */

.range-wrapper {
  margin-top:
    24px;
}


input[type="range"] {

  appearance:
    none;

  width:
    100%;

  height:
    4px;

  background:
    #252525;

  border-radius:
    20px;

  outline:
    none;

  cursor:
    pointer;
}


input[type="range"]::-webkit-slider-thumb {

  appearance:
    none;

  width:
    20px;

  height:
    20px;

  border-radius:
    50%;

  background:
    var(--nexa-lime);

  border:
    4px solid #101010;

  box-shadow:
    0 0 0 1px
    rgba(196,255,0,.4),
    0 0 20px
    rgba(196,255,0,.35);

  transition:
    transform .2s var(--ease);
}


input[type="range"]::-webkit-slider-thumb:hover {
  transform:
    scale(1.2);
}


input[type="range"]::-moz-range-thumb {

  width:
    15px;

  height:
    15px;

  border-radius:
    50%;

  background:
    var(--nexa-lime);

  border:
    3px solid #101010;
}


.range-labels {

  display:
    flex;

  justify-content:
    space-between;

  margin-top:
    9px;

  color:
    #555;

  font-size:
    9px;
}


/* ---------------------------------------------------------
   COLOUR CONTROLS
--------------------------------------------------------- */

.color-controls {

  display:
    flex;

  align-items:
    center;

  gap:
    20px;

  margin-top:
    32px;
}


.color-control {

  flex:
    1;
}


.color-control label {

  display:
    block;

  color:
    #666;

  font-size:
    9px;

  letter-spacing:
    .15em;

  font-weight:
    700;

  margin-bottom:
    10px;
}


.color-number {

  color:
    var(--nexa-lime);

  margin-right:
    7px;
}


.color-input-row {

  display:
    flex;

  align-items:
    center;

  gap:
    10px;
}


input[type="color"] {

  appearance:
    none;

  width:
    50px;

  height:
    50px;

  padding:
    3px;

  background:
    #080808;

  border:
    1px solid
    rgba(255,255,255,.12);

  border-radius:
    10px;

  cursor:
    pointer;
}


input[type="color"]::-webkit-color-swatch-wrapper {
  padding:
    0;
}


input[type="color"]::-webkit-color-swatch {

  border:
    none;

  border-radius:
    7px;
}


.color-input-row input[type="text"] {

  min-width:
    0;

  width:
    100%;

  height:
    50px;

  background:
    #050505;

  border:
    1px solid
    rgba(255,255,255,.10);

  border-radius:
    10px;

  color:
    #fff;

  padding:
    0 14px;

  font-family:
    "Courier New",
    monospace;

  font-size:
    12px;

  font-weight:
    700;

  outline:
    none;

  transition:
    border-color .25s var(--ease);
}


.color-input-row input[type="text"]:focus {

  border-color:
    rgba(196,255,0,.5);
}


.gradient-arrow {

  color:
    var(--nexa-lime);

  font-size:
    18px;

  padding-top:
    22px;
}


/* ---------------------------------------------------------
   PRESETS
--------------------------------------------------------- */

.preset-section {

  margin-top:
    30px;

  padding-top:
    22px;

  border-top:
    1px solid
    var(--nexa-border);
}


.preset-heading {

  display:
    flex;

  justify-content:
    space-between;

  align-items:
    center;

  margin-bottom:
    12px;
}


.preset-heading span {

  color:
    #666;

  font-size:
    9px;

  letter-spacing:
    .16em;

  font-weight:
    700;
}


.preset-heading small {

  color:
    #444;

  font-size:
    9px;
}


.preset-grid {

  display:
    grid;

  grid-template-columns:
    repeat(8, 1fr);

  gap:
    8px;
}


.preset {

  height:
    42px;

  border:
    1px solid
    rgba(255,255,255,.10);

  border-radius:
    9px;

  cursor:
    pointer;

  transition:
    transform .25s var(--ease),
    border-color .25s var(--ease),
    box-shadow .25s var(--ease);
}


.preset:hover {

  transform:
    translateY(-3px);

  border-color:
    rgba(196,255,0,.45);

  box-shadow:
    0 8px 20px
    rgba(0,0,0,.35);
}


.preset.active {

  border-color:
    var(--nexa-lime);

  box-shadow:
    0 0 0 2px
    rgba(196,255,0,.15);
}


/* ---------------------------------------------------------
   ACTION
--------------------------------------------------------- */

.action-area {

  margin-top:
    22px;
}


.generate-button {

  position:
    relative;

  overflow:
    hidden;

  width:
    100%;

  min-height:
    66px;

  border:
    none;

  border-radius:
    15px;

  background:
    var(--nexa-gradient);

  color:
    #000;

  font-family:
    inherit;

  font-size:
    15px;

  font-weight:
    700;

  cursor:
    pointer;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  transition:
    transform .3s var(--ease),
    box-shadow .3s var(--ease);
}


.generate-button::before {

  content:
    "";

  position:
    absolute;

  inset:
    0;

  background:
    linear-gradient(
      110deg,
      transparent 25%,
      rgba(255,255,255,.5) 50%,
      transparent 75%
    );

  transform:
    translateX(-120%);

  transition:
    transform .7s var(--ease);
}


.generate-button:hover::before {
  transform:
    translateX(120%);
}


.generate-button:hover {

  transform:
    translateY(-3px);

  box-shadow:
    0 16px 45px
    rgba(124,255,0,.16);
}


.generate-button:active {
  transform:
    translateY(0);
}


.button-text {

  position:
    relative;

  z-index:
    1;
}


.button-arrow {

  position:
    absolute;

  right:
    22px;

  font-size:
    20px;
}


.action-note {

  text-align:
    center;

  color:
    #555;

  font-size:
    10px;

  margin-top:
    11px;
}


/* ---------------------------------------------------------
   PAYWALL
--------------------------------------------------------- */

.paywall {

  display:
    none;

  margin-top:
    25px;

  border:
    1px solid
    rgba(196,255,0,.25);

  border-radius:
    20px;

  padding:
    30px;

  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(196,255,0,.08),
      transparent 40%
    ),
    #080808;

  animation:
    reveal .5s var(--ease);
}


.paywall.visible {

  display:
    flex;

  align-items:
    center;

  gap:
    25px;
}


.paywall-icon {

  width:
    58px;

  height:
    58px;

  flex-shrink:
    0;

  display:
    grid;

  place-items:
    center;

  border-radius:
    15px;

  background:
    rgba(196,255,0,.08);

  border:
    1px solid
    rgba(196,255,0,.2);

  color:
    var(--nexa-lime);

  font-size:
    24px;
}


.paywall-content {
  flex:
    1;
}


.paywall-content h3 {

  font-size:
    30px;

  line-height:
    1;

  letter-spacing:
    -.06em;

  margin:
    9px 0 12px;
}


.paywall-content h3 span {
  color:
    var(--nexa-lime);
}


.paywall-content > p {

  color:
    var(--nexa-gray);

  font-size:
    13px;

  line-height:
    1.6;

  max-width:
    560px;
}


.paywall-price {

  margin:
    18px 0;

  display:
    flex;

  align-items:
    baseline;

  gap:
    10px;
}


.paywall-price strong {

  font-size:
    24px;
}


.paywall-price span {

  color:
    #555;

  font-size:
    10px;
}


.unlock-button {

  border:
    none;

  border-radius:
    10px;

  background:
    var(--nexa-gradient);

  color:
    #000;

  font-family:
    inherit;

  font-weight:
    700;

  padding:
    14px 18px;

  cursor:
    pointer;

  display:
    inline-flex;

  align-items:
    center;

  gap:
    20px;

  transition:
    .25s var(--ease);
}


.unlock-button:hover {

  transform:
    translateY(-2px);

  box-shadow:
    0 10px 30px
    rgba(196,255,0,.15);
}


.paywall-content > small {

  display:
    block;

  color:
    #444;

  font-size:
    9px;

  margin-top:
    10px;
}


/* ---------------------------------------------------------
   RESULT
--------------------------------------------------------- */

.result-box {

  display:
    none;

  margin-top:
    25px;

  padding:
    25px;

  border-radius:
    20px;

  background:
    #080808;

  border:
    1px solid
    var(--nexa-border);

  animation:
    reveal .5s var(--ease);
}


.result-box.visible {
  display:
    block;
}


.result-heading {

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  margin-bottom:
    18px;
}


.result-heading h3 {

  margin-top:
    6px;

  font-size:
    22px;

  letter-spacing:
    -.04em;
}


.ready-badge {

  font-size:
    8px;

  color:
    var(--nexa-lime);

  border:
    1px solid
    rgba(196,255,0,.25);

  padding:
    6px 9px;

  border-radius:
    6px;

  letter-spacing:
    .14em;
}


/* ---------------------------------------------------------
   CODE
--------------------------------------------------------- */

.code-window {

  background:
    #000;

  border:
    1px solid #1b1b1b;

  border-radius:
    12px;

  overflow:
    hidden;
}


.code-toolbar {

  height:
    38px;

  display:
    flex;

  align-items:
    center;

  gap:
    10px;

  padding:
    0 13px;

  border-bottom:
    1px solid #171717;

  color:
    #555;

  font-size:
    9px;
}


.window-dots {

  display:
    flex;

  gap:
    5px;
}


.window-dots span {

  width:
    6px;

  height:
    6px;

  background:
    #333;

  border-radius:
    50%;
}


.code-window pre {

  padding:
    18px;

  overflow-x:
    auto;

  white-space:
    pre-wrap;

  word-break:
    break-word;
}


.code-window code {

  color:
    var(--nexa-lime);

  font-family:
    "Courier New",
    monospace;

  font-size:
    12px;

  line-height:
    1.7;
}


/* ---------------------------------------------------------
   COPY
--------------------------------------------------------- */

.copy-button {

  margin-top:
    13px;

  width:
    100%;

  height:
    50px;

  border:
    1px solid
    rgba(196,255,0,.22);

  border-radius:
    10px;

  background:
    rgba(196,255,0,.04);

  color:
    var(--nexa-lime);

  font-family:
    inherit;

  font-weight:
    700;

  cursor:
    pointer;

  transition:
    .25s var(--ease);
}


.copy-button:hover,
.copy-button.copied {

  background:
    var(--nexa-lime);

  color:
    #000;
}


.copy-icon {
  margin-right:
    8px;
}


/* ---------------------------------------------------------
   FEATURE STRIP
--------------------------------------------------------- */

.feature-strip {

  display:
    grid;

  grid-template-columns:
    repeat(3, 1fr);

  border-top:
    1px solid
    var(--nexa-border);

  margin-top:
    35px;

  padding-top:
    22px;
}


.feature {

  display:
    grid;

  grid-template-columns:
    auto 1fr;

  grid-template-rows:
    1fr 1fr;

  column-gap:
    10px;

  padding:
    0 18px;

  border-right:
    1px solid
    var(--nexa-border);
}


.feature:last-child {
  border-right:
    none;
}


.feature > span {

  grid-row:
    span 2;

  color:
    #444;

  font-size:
    9px;
}


.feature strong {

  font-size:
    10px;

  letter-spacing:
    .12em;
}


.feature small {

  color:
    #555;

  font-size:
    9px;
}


/* ---------------------------------------------------------
   FOOTER
--------------------------------------------------------- */

.brand-footer {

  margin-top:
    70px;
}


.footer-line {

  height:
    1px;

  background:
    var(--nexa-border);
}


.footer-content {

  padding-top:
    20px;

  display:
    grid;

  grid-template-columns:
    1fr auto 1fr;

  align-items:
    center;
}


.footer-brand {

  display:
    flex;

  flex-direction:
    column;
}


.footer-brand strong {

  font-size:
    11px;

  letter-spacing:
    .15em;
}


.footer-brand span {

  color:
    var(--nexa-lime);

  font-size:
    8px;

  letter-spacing:
    .15em;

  margin-top:
    5px;
}


.footer-tool,
.footer-year {

  color:
    #555;

  font-size:
    8px;

  letter-spacing:
    .14em;
}


.footer-year {
  justify-self:
    end;
}


/* ---------------------------------------------------------
   ANIMATION
--------------------------------------------------------- */

@keyframes reveal {

  from {

    opacity:
      0;

    transform:
      translateY(12px);

  }

  to {

    opacity:
      1;

    transform:
      translateY(0);

  }

}


/* ---------------------------------------------------------
   RESPONSIVE
--------------------------------------------------------- */

@media (max-width: 800px) {

  .preset-grid {

    grid-template-columns:
      repeat(4, 1fr);

  }

}


@media (max-width: 700px) {

  .nav-container {

    grid-template-columns:
      auto 1fr auto;

    min-height:
      68px;

  }


  .brand-lockup {
    justify-self:
      center;
  }


  .nav-status {
    font-size:
      0;
  }


  .nav-status .status-dot {

    width:
      7px;

    height:
      7px;

  }


  .main-container {

    padding-top:
      55px;

  }


  .hero {

    margin-bottom:
      40px;

  }


  .hero h1 {

    font-size:
      clamp(48px, 14vw, 72px);

  }


  .gradient-preview {

    min-height:
      280px;

  }


  .generator-top {

    flex-direction:
      column;

  }


  .pro-badge {

    align-items:
      flex-start;

  }


  .color-controls {

    flex-direction:
      column;

    align-items:
      stretch;

  }


  .gradient-arrow {

    display:
      none;

  }


  .paywall.visible {

    flex-direction:
      column;

    align-items:
      flex-start;

  }


  .paywall-content h3 {

    font-size:
      26px;

  }


  .feature {

    padding:
      0 10px;

  }


  .footer-content {

    grid-template-columns:
      1fr;

    gap:
      12px;

  }


  .footer-tool,
  .footer-year {

    justify-self:
      start;

  }

}


@media (max-width: 450px) {

  .generator-card {

    padding:
      18px;

    border-radius:
      22px;

  }


  .controls-panel {

    padding:
      18px;

  }


  .gradient-preview {

    min-height:
      230px;

  }


  .preview-hint {

    display:
      none;

  }


  .color-input-row {

    gap:
      8px;

  }


  input[type="color"] {

    width:
      45px;

    height:
      45px;

  }


  .color-input-row input[type="text"] {

    height:
      45px;

  }


  .preset-grid {

    grid-template-columns:
      repeat(4, 1fr);

  }


  .preset {

    height:
      36px;

  }


  .feature-strip {

    gap:
      0;

  }


  .feature {

    display:
      block;

  }


  .feature > span {

    display:
      block;

    margin-bottom:
      7px;

  }


  .feature small {

    display:
      block;

    margin-top:
      4px;

  }

}