/* ==========================================================================
   zejneba.com — Components
   --------------------------------------------------------------------------
   Every component from the Figma "Components — zejneba.com" frame.
   All values come from tokens.css. See components.html for live examples
   and copy-ready markup. The .is-hover classes only exist so the library
   page can show hover states side by side.

    1. Icon
    2. Button + Icon button
    3. Nav tab
    4. Navigation (<site-nav>)
    5. Segmented tabs
    6. Tag
    7. List item
    8. FAQ
    9. Testimonials
   10. Before / after demo
   11. Footer (<site-footer>)
   ========================================================================== */


/* 1. Icon
   --------------------------------------------------------------------------
   <z-icon name="arrow-right"></z-icon>   (20px, takes the text color)
   <z-icon name="plus" size="16"></z-icon>
   ========================================================================== */

z-icon {
  display: inline-flex;
  flex-shrink: 0;
  width: var(--icon-size, 20px);
  height: var(--icon-size, 20px);
}

z-icon svg {
  width: 100%;
  height: 100%;
}


/* 2. Button + Icon button
   --------------------------------------------------------------------------
   <a class="button button--moss" href="#">Book a call <z-icon name="arrow-right"></z-icon></a>

   Variant:  button--moss | button--black | button--orange | button--outline
   Size:     (default M, 48px) | button--s (40px)
   Icon only: add button--icon and put a single <z-icon> inside
   Disabled: disabled attribute on <button>, or aria-disabled="true" on <a>
   ========================================================================== */

.button {
  --button-from: transparent;
  --button-to: transparent;
  --button-hover-from: transparent;
  --button-hover-to: transparent;
  --button-border: transparent;
  --button-hover-border: transparent;
  --button-glow: rgba(255, 255, 255, 0.14);   /* soft light coming up from the bottom edge */
  --button-ring: rgba(255, 255, 255, 0.12);   /* thin lighter ring just inside the border */
  --button-shine: rgba(255, 255, 255, 0.26);  /* top edge highlight */
  --button-tint: rgba(20, 20, 20, 0.3);       /* colour of the drop shadow */
  --icon-size: 18px;

  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 48px;
  padding: 0 22px;
  border: 1px solid var(--button-border);
  border-radius: var(--radius-xl);
  background:
    radial-gradient(120% 90% at 50% 130%, var(--button-glow), transparent 70%),
    linear-gradient(to bottom, var(--button-from), var(--button-to));
  box-shadow:
    inset 0 1px 0 var(--button-shine),
    inset 0 0 0 1px var(--button-ring),
    0 1px 2px rgba(20, 20, 20, 0.12),
    0 8px 18px -6px var(--button-tint);
  color: var(--base-white);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: -0.005em;
  white-space: nowrap;
  cursor: pointer;
  transition:
    border-color 0.3s var(--ease-out),
    box-shadow 0.3s var(--ease-out),
    transform 0.3s var(--ease-out);
}

/* Hover gradient sits on a layer behind the label, so it can fade in */
.button::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background:
    radial-gradient(120% 90% at 50% 130%, var(--button-glow), transparent 70%),
    linear-gradient(to bottom, var(--button-hover-from), var(--button-hover-to));
  opacity: 0;
  transition: opacity 0.3s var(--ease-out);
}

.button z-icon {
  transition: transform 0.3s var(--ease-out);
}

.button:hover,
.button.is-hover {
  border-color: var(--button-hover-border);
  box-shadow:
    inset 0 1px 0 var(--button-shine),
    inset 0 0 0 1px var(--button-ring),
    0 1px 2px rgba(20, 20, 20, 0.12),
    0 12px 24px -8px var(--button-tint);
  transform: translateY(-1px);
}

.button:hover::before,
.button.is-hover::before {
  opacity: 1;
}

/* The arrow nudges forward on hover */
.button:hover z-icon[name^="arrow-right"],
.button.is-hover z-icon[name^="arrow-right"] {
  transform: translateX(3px);
}

.button:active {
  box-shadow:
    inset 0 1px 0 var(--button-shine),
    inset 0 0 0 1px var(--button-ring),
    0 1px 2px rgba(20, 20, 20, 0.14),
    0 3px 8px -4px var(--button-tint);
  transform: translateY(0) scale(0.98);
  transition-duration: 0.1s;
}

.button:focus-visible {
  outline: 2px solid var(--button-border);
  outline-offset: 3px;
}

/* Sizes */
.button--s {
  --icon-size: 16px;
  gap: 8px;
  height: 40px;
  padding: 0 18px;
  border-radius: var(--radius-l);
  font-size: 14px;
  line-height: 18px;
}

.button--icon {
  --icon-size: 20px;
  width: 48px;
  padding: 0;
}

.button--icon.button--s {
  --icon-size: 18px;
  width: 40px;
}

/* Variants */
.button--moss {
  --button-from: #4a6640;
  --button-to: #3b5431;
  --button-hover-from: #52703f;
  --button-hover-to: #415b36;
  --button-border: transparent;
  --button-hover-border: transparent;
  --button-ring: transparent;
  --button-shine: rgba(255, 255, 255, 0.1);
  --button-glow: rgba(255, 255, 255, 0.06);
  --button-tint: rgba(46, 67, 38, 0.45);
}

/* No visible border: let the hover fill run under the (transparent) border too */
.button--moss::before {
  inset: -1px;
}

.button--moss:focus-visible {
  outline-color: var(--brand-moss);
}

.button--black {
  --button-from: #1d1d1f;
  --button-to: #0a0a0b;
  --button-hover-from: #2a2a2c;
  --button-hover-to: #121213;
  --button-border: #3a3a3c;
  --button-hover-border: #4a4a4d;
  --button-ring: rgba(255, 255, 255, 0.08);
  --button-shine: rgba(255, 255, 255, 0.18);
  --button-glow: rgba(255, 255, 255, 0.16);
  --button-tint: rgba(0, 0, 0, 0.4);
}

.button--orange {
  --button-from: #ff7a40;
  --button-to: var(--accent-orange);
  --button-hover-from: #ff8a55;
  --button-hover-to: #f55f22;
  --button-border: #e04a12;
  --button-hover-border: #d24410;
  --button-glow: rgba(255, 255, 255, 0.18);
  --button-shine: rgba(255, 255, 255, 0.32);
  --button-tint: rgba(224, 74, 18, 0.4);
}

.button--outline {
  --button-from: var(--base-white);
  --button-to: #fafaf8;
  --button-hover-from: var(--base-white);
  --button-hover-to: var(--neutral-grey-100);
  --button-border: #e2e2dd;
  --button-hover-border: #d3d3cd;
  --button-glow: transparent;
  --button-ring: transparent;
  --button-shine: rgba(255, 255, 255, 1);
  --button-tint: rgba(20, 20, 20, 0.12);
  color: var(--base-black);
}

/* Disabled: flat fill, no border, no shadow */
.button:disabled,
.button[aria-disabled="true"] {
  border-color: transparent;
  background: var(--button-disabled-bg);
  box-shadow: none;
  color: var(--button-disabled-text);
  cursor: not-allowed;
  pointer-events: none;
}

.button--moss    { --button-disabled-bg: var(--brand-fog);          --button-disabled-text: #9aa58a; }
.button--black   { --button-disabled-bg: var(--neutral-grey-200);   --button-disabled-text: var(--neutral-subtle); }
.button--orange  { --button-disabled-bg: var(--accent-orange-tint); --button-disabled-text: #f2a887; }
.button--outline { --button-disabled-bg: var(--base-white);         --button-disabled-text: #c4c4be; }

.button--outline:disabled,
.button--outline[aria-disabled="true"] {
  border-color: var(--neutral-grey-200);
}


/* 3. Nav tab
   --------------------------------------------------------------------------
   <a class="nav-tab" href="#services">Services</a>
   Active: aria-current="page" (or "true") — bold text
   ========================================================================== */

.nav-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border-radius: var(--radius-m);
  color: #55554f;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 20px;
  white-space: nowrap;
  transition: background-color var(--duration-fast) ease, color var(--duration-fast) ease;
}

.nav-tab:hover,
.nav-tab.is-hover {
  background: var(--neutral-grey-100);
  color: var(--base-black);
}

/* Active: just bolder, darker text (no dot, no background) */
.nav-tab[aria-current] {
  color: var(--base-black);
  font-weight: 700;
}

.nav-tab[aria-current]:hover {
  background: transparent;
}


/* 4. Navigation
   --------------------------------------------------------------------------
   <site-nav></site-nav>                         compact, with shadow
   <site-nav width="expanded"></site-nav>        1152px, logo / tabs / button
   <site-nav shadow="none"></site-nav>           no shadow
   <site-nav active="work"></site-nav>           marks a tab as active
   <site-nav class="page-nav"></site-nav>        fixed at the top of a page

   The nav is the same on every page: links and button live in one place,
   NAV in js/components.js.
   ========================================================================== */

/* The floating navigation on top of every page */
.page-nav {
  position: fixed;
  top: 16px;
  left: 50%;
  z-index: 50;
  max-width: calc(100% - 32px);
  translate: -50% 0;
  transition: box-shadow 0.8s var(--ease-out);
}

/* Once the page is scrolled, the shadow fades to almost nothing */
.page-nav.is-scrolled {
  box-shadow: var(--shadow-nav-scrolled);
}


site-nav {
  position: relative;
  display: flex;
  align-items: center;
  gap: 40px;
  padding: 6px 16px;
  border: 1px solid var(--neutral-line);
  border-radius: var(--radius-xl);
  /* Almost solid, no backdrop blur: the nav is fixed, so a blur would have to be
     redrawn on every frame of scrolling, and at this opacity it barely showed */
  background: rgba(255, 255, 255, 0.96);
  box-shadow: var(--shadow-nav);
}

site-nav[width="expanded"] {
  justify-content: space-between;
  width: min(1152px + var(--content-extra), 100%);
}

site-nav[shadow="none"] {
  box-shadow: none;
}

.site-nav__logo {
  display: block;
  flex-shrink: 0;
  color: var(--base-black);
}

/* zejneba wordmark (paths in js/components.js) */
.site-nav__wordmark {
  display: block;
  width: 92px; /* 25px tall at the logo's 217:59 ratio */
  max-width: none;
  height: 25px;
}

.wordmark__dot {
  fill: var(--accent-orange);
}

.site-nav__links {
  display: flex;
  align-items: center;
  gap: 4px;
}

.site-nav__menu-toggle {
  display: none;
}

.site-nav__cta-short {
  display: none;
}

/* Mobile menu panel */
.site-nav__panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  display: grid;
  gap: 2px;
  padding: 8px;
  border: 1px solid var(--neutral-line);
  border-radius: var(--radius-xl);
  background: var(--base-white);
  box-shadow: var(--shadow-nav);
  opacity: 0;
  translate: 0 -6px;
  visibility: hidden;
  transition: opacity var(--duration-fast) ease, translate var(--duration-base) var(--ease-out), visibility 0s linear var(--duration-base);
}

site-nav.is-open .site-nav__panel {
  opacity: 1;
  translate: 0 0;
  visibility: visible;
  transition-delay: 0s;
}

.site-nav__panel .nav-tab {
  padding: 12px 14px;
}

@media (min-width: 861px) {
  .site-nav__panel {
    display: none;
  }
}

@media (max-width: 860px) {
  site-nav {
    gap: 12px;
  }

  site-nav[width="expanded"] {
    width: 100%;
  }

  .site-nav__links {
    display: none;
  }

  .site-nav__logo {
    margin-right: auto;
  }

  .site-nav__menu-toggle {
    display: inline-flex;
  }
}

/* Phones: the floating nav becomes a full-width bar on the grid edge (tokens.css),
   with the logo on the 24px text line and a lighter, tighter build */
@media (max-width: 600px) {
  .page-nav {
    top: var(--grid-edge);
    width: calc(100% - 2 * var(--grid-edge));
    max-width: none;
    gap: 8px;
    padding: 6px 6px 6px calc(var(--grid-inset) - 1px); /* minus the 1px border */
    border-radius: var(--radius-xl);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
  }

  .page-nav .site-nav__wordmark {
    width: 85px;
    height: 23px;
  }

  .page-nav .site-nav__cta {
    padding: 0 14px;
  }

  .page-nav .site-nav__panel {
    top: calc(100% + 6px);
  }
}

@media (max-width: 480px) {
  .site-nav__cta-full {
    display: none;
  }

  .site-nav__cta-short {
    display: inline;
  }
}


/* 5. Segmented tabs
   --------------------------------------------------------------------------
   <div class="segmented" role="tablist" data-tabs>
     <button class="segmented__tab" role="tab" aria-selected="true" aria-controls="panel-a">Product Audit</button>
     <button class="segmented__tab" role="tab" aria-selected="false" aria-controls="panel-b">Feature Definition</button>
   </div>
   <div id="panel-a" role="tabpanel">…</div>
   <div id="panel-b" role="tabpanel" hidden>…</div>
   ========================================================================== */

.segmented {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  max-width: 100%;
  padding: 4px;
  border-radius: var(--radius-l);
  background: var(--neutral-grey-50);
}

.segmented__tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 18px;
  border: 0;
  border-radius: var(--radius-s);
  background: transparent;
  color: var(--neutral-muted);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  line-height: 18px;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color var(--duration-fast) ease,
    color var(--duration-fast) ease,
    box-shadow var(--duration-fast) ease;
}

.segmented__tab:hover,
.segmented__tab.is-hover {
  background: rgba(255, 255, 255, 0.7);
  color: var(--base-black);
}

.segmented__tab[aria-selected="true"] {
  background: var(--base-white);
  box-shadow: var(--shadow-raised);
  color: var(--base-black);
}

/* With JS, the white pill is one element that glides between tabs */
.segmented.has-indicator {
  position: relative;
  isolation: isolate;
}

.segmented__indicator {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 0;
  z-index: -1;
  border-radius: var(--radius-s);
  background: var(--base-white);
  box-shadow: var(--shadow-raised);
  pointer-events: none;
}

.segmented__indicator.is-ready {
  transition:
    transform 0.55s var(--ease-out-expo),
    width 0.55s var(--ease-out-expo);
}

.segmented.has-indicator .segmented__tab[aria-selected="true"] {
  background: transparent;
  box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
  .segmented__indicator.is-ready {
    transition: none;
  }
}

/* On narrow screens the tabs scroll sideways instead of overflowing */
@media (max-width: 640px) {
  .segmented {
    overflow-x: auto;
    scrollbar-width: none;
  }
}

/* Smaller, darker track used inside the Before / after demo */
.segmented--compact {
  border-radius: var(--radius-m);
  background: var(--neutral-grey-100);
}


/* 6. Tag
   --------------------------------------------------------------------------
   <span class="tag">Services</span>              outline, for eyebrows on white
   <span class="tag tag--glass">Services</span>   for labels on coloured visuals
   ========================================================================== */

.tag {
  display: inline-flex;
  align-items: center;
  padding: 5px 11px;
  border: 1px solid var(--neutral-line);
  border-radius: var(--radius-pill);
  corner-shape: round;
  color: var(--neutral-muted);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  white-space: nowrap;
}

.tag--glass {
  border-color: transparent;
  background: var(--base-white);
  color: var(--neutral-body);
}


/* 7. List item
   --------------------------------------------------------------------------
   <ul class="list">
     <li class="list-item">Go through your data and the current flow</li>
   </ul>
   ========================================================================== */

.list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.list-item {
  position: relative;
  padding-left: 16px;
  color: var(--neutral-body);
  font-size: 14px;
  line-height: 22px;
}

.list-item::before {
  content: "";
  position: absolute;
  top: 9px;
  left: 1px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  corner-shape: round;
  background: var(--neutral-subtle);
}


/* 8. FAQ
   --------------------------------------------------------------------------
   <div class="faq-list" data-accordion>
     <details class="faq-item">
       <summary class="faq-item__question">Question?<span class="faq-item__toggle" aria-hidden="true"></span></summary>
       <div class="faq-item__answer"><p>Answer.</p></div>
     </details>
   </div>
   Add the open attribute to a <details> to start it expanded.
   ========================================================================== */

.faq-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: min(666px, 100%);
  padding: 6px;
  border-radius: var(--radius-xl);
  background: var(--neutral-grey-100); /* same grey as the closed service rows */
}

/* Matches the height animation in components.js */
.faq-item {
  --faq-ease: cubic-bezier(0.32, 0.72, 0, 1);
  --faq-duration: 0.45s;
  border-radius: var(--radius-l);
  transition: background-color var(--duration-base) var(--faq-ease), box-shadow var(--faq-duration) var(--faq-ease);
}

/* .is-closing: drop the open look as soon as the close animation starts */
.faq-item:hover,
.faq-item.is-hover,
.faq-item[open]:not(.is-closing) {
  background: var(--base-white);
}

.faq-item[open]:not(.is-closing) {
  box-shadow: var(--shadow-card);
}

.faq-item__question {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 22px 24px;
  color: var(--neutral-muted);
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: -0.0025em;
  list-style: none;
  cursor: pointer;
  transition: color var(--duration-fast) ease;
}

.faq-item__question::-webkit-details-marker {
  display: none;
}

.faq-item:hover .faq-item__question,
.faq-item.is-hover .faq-item__question,
.faq-item[open]:not(.is-closing) .faq-item__question {
  color: var(--base-black);
}

/* Plus/minus in a 28px circle on the right: two 12px bars; the vertical one
   folds away when the item opens, leaving a minus */
.faq-item__toggle {
  position: relative;
  flex: none;
  width: 28px;
  height: 28px;
  margin-left: auto;
  border-radius: var(--radius-pill);
  corner-shape: round;
  transition: background-color var(--duration-base) var(--faq-ease);
}

.faq-item__toggle::before,
.faq-item__toggle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 1.5px;
  margin: -0.75px 0 0 -6px;
  border-radius: 1px;
  background: currentColor;
  transition: rotate var(--faq-duration) var(--faq-ease), opacity var(--faq-duration) var(--faq-ease);
}

.faq-item__toggle::after {
  rotate: 90deg;
}

.faq-item[open]:not(.is-closing) .faq-item__toggle {
  color: var(--brand-moss);
  background: var(--brand-fog);
}

.faq-item[open]:not(.is-closing) .faq-item__toggle::after {
  rotate: 0deg;
  opacity: 0;
}

.faq-item__answer {
  margin-top: -12px; /* 10px gap under the question, as in Figma */
  padding: 0 24px 24px;
  color: var(--neutral-muted);
  font-size: 15px;
  line-height: 24px;
}

.faq-item__answer p + p {
  margin-top: 12px;
}


/* 9. Testimonials
   --------------------------------------------------------------------------
   <div class="testimonials" data-testimonials>
     <figure class="testimonial">…</figure>   one per person
     <div class="progress">                   one line per testimonial
       <button class="progress__line" aria-label="Testimonial 1"></button>
     </div>
   </div>
   Moves to the next one every 7 seconds; pauses while hovered.
   ========================================================================== */

.testimonials {
  --testimonial-duration: 10s;
  display: grid;
  justify-items: center;
  gap: 36px;
  width: min(720px, 100%);
  margin-inline: auto;
}

.testimonials__slides {
  display: grid;
  width: 100%;
}

/* All slides share one grid cell, so the tallest one sets the height */
.testimonial {
  grid-area: 1 / 1;
  display: grid;
  justify-items: center;
  gap: 36px;
  margin: 0;
  text-align: center;
  transition: opacity 0.6s ease, translate 0.6s var(--ease-out), visibility 0s linear 0.6s;
}

.testimonial:not(.is-active) {
  opacity: 0;
  translate: 0 10px;
  visibility: hidden;
}

.testimonial.is-active {
  transition-delay: 0.15s, 0.15s, 0s;
}

.testimonial__quote {
  margin: 0;
  color: var(--base-black);
  font-family: var(--font-heading);
  font-size: 28px;
  font-weight: 500;
  line-height: 40px;
  letter-spacing: -0.035em;
}

.testimonial__quote::before {
  content: "“";
  display: block;
  margin-bottom: 4px;
  color: var(--brand-sage);
  font-size: 64px;
  font-weight: 700;
  line-height: 68px;
  letter-spacing: -0.035em;
}

.testimonial__author {
  display: grid;
  justify-items: center;
  gap: 14px;
}

.testimonial__photo {
  position: relative;
  width: 64px;
  height: 64px;
  overflow: hidden;
  border: 3px solid var(--base-white);
  border-radius: 50%;
  corner-shape: round;
  background: var(--neutral-grey-200);
  box-shadow: 0 0 0 1px var(--neutral-line), 0 6px 14px rgba(20, 20, 20, 0.12);
}

/* Initials show until (or instead of) a photo */
.testimonial__photo::before {
  content: attr(data-initials);
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--neutral-muted);
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 600;
}

.testimonial__photo img {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.testimonial__name {
  display: block;
  color: var(--base-black);
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 600;
  line-height: 26px;
  letter-spacing: -0.005em;
}

.testimonial__role {
  display: block;
  margin-top: 2px;
  color: var(--neutral-muted);
  font-size: 14px;
  line-height: 22px;
}

/* Progress lines */
.progress {
  display: flex;
  gap: 6px;
  padding: 10px 0;
}

.progress__line {
  position: relative;
  width: 56px;
  height: 3px;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 3px;
  background: var(--neutral-grey-200);
  cursor: pointer;
}

/* Bigger hit area than the 3px line */
.progress__line::after {
  content: "";
  position: absolute;
  inset: -10px 0;
}

.progress__line::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--brand-moss);
  transform: scaleX(0);
  transform-origin: left;
}

.progress__line.is-done::before {
  background: var(--brand-sage);
  transform: scaleX(1);
}

.progress__line.is-active::before {
  animation: progress-fill var(--testimonial-duration) linear forwards;
}

/* The timer waits while the slider is off screen (js/components.js) */
[data-testimonials]:not(.is-in-view) .progress__line.is-active::before {
  animation-play-state: paused;
}

@keyframes progress-fill {
  to { transform: scaleX(1); }
}

@media (max-width: 640px) {
  .testimonial__quote {
    font-size: 22px;
    line-height: 32px;
  }
}


/* 10. Before / after demo
   --------------------------------------------------------------------------
   Proof visual: a cluttered fintech form vs. the redesigned single step.
   Switches every 3.5 seconds; the toggle also switches it by hand.
   ========================================================================== */

.before-after {
  display: grid;
  gap: 20px;
  justify-items: start;
  width: min(480px, 100%);
  padding: 24px;
  border-radius: var(--radius-2xl);
  background: var(--neutral-grey-50);
}

/* On a dark background: <div class="before-after before-after--dark" …> */
.before-after--dark {
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.05);
}

.before-after--dark .segmented--compact {
  background: rgba(255, 255, 255, 0.08);
}

.before-after--dark .segmented__tab[aria-selected="false"] {
  color: var(--neutral-line);
}

.before-after__screens {
  display: grid;
  width: 100%;
}

.before-after__screen {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  height: 360px;
  padding: 20px;
  overflow: hidden;
  border-radius: 16px;
  background: var(--base-white);
  box-shadow: var(--shadow-screen);
  color: var(--base-black);
  transition: opacity 0.45s ease, scale 0.45s var(--ease-out);
}

.before-after__screen[hidden] {
  display: flex;
  opacity: 0;
  scale: 0.98;
  pointer-events: none;
}

/* Before: a crowded form */
.ba-title {
  margin-bottom: 8px;
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: -0.0025em;
}

.ba-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-bottom: 8px;
}

.ba-field,
.ba-chip,
.ba-warning {
  padding: 6px 8px;
  border-radius: 5px;
  font-size: 11px;
  font-weight: 500;
  line-height: 14px;
}

.ba-field {
  border: 1px solid var(--neutral-line);
  color: var(--neutral-subtle);
}

.ba-field--error {
  border-color: var(--accent-orange);
  color: var(--accent-orange-text);
}

.ba-warning {
  margin-bottom: 8px;
  border-radius: var(--radius-xs);
  background: var(--accent-orange-tint);
  color: var(--accent-orange-text);
}

.ba-legal {
  margin-bottom: 8px;
  color: var(--neutral-subtle);
  font-size: 10px;
  font-weight: 500;
  line-height: 14px;
}

.ba-actions {
  display: flex;
  gap: 6px;
}

.ba-chip {
  padding-inline: 9px;
  background: var(--neutral-grey-100);
  color: var(--neutral-muted);
}

.ba-chip--primary {
  background: var(--neutral-subtle);
  color: var(--base-white);
}

/* After: one clear step */
.ba-step-label {
  color: var(--neutral-subtle);
  font-size: 12px;
  line-height: 16px;
}

.ba-steps {
  display: flex;
  gap: 4px;
  padding: 10px 0 14px;
}

.ba-steps span {
  flex: 1;
  height: 3px;
  border-radius: 3px;
  background: var(--neutral-grey-200);
}

.ba-steps span.is-done {
  background: var(--brand-moss);
}

.ba-question {
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 600;
  line-height: 30px;
  letter-spacing: -0.01em;
}

.ba-hint {
  margin-bottom: 20px;
  color: var(--neutral-muted);
  font-size: 14px;
  line-height: 22px;
}

.ba-amount {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  padding: 14px 16px;
  border: 1px solid var(--neutral-line);
  border-radius: var(--radius-m);
  font-family: var(--font-heading);
  font-size: 28px;
  font-weight: 500;
  line-height: 32px;
  letter-spacing: -0.02em;
}

.ba-currency {
  padding: 6px 10px;
  border-radius: 8px;
  background: var(--neutral-grey-50);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: 0;
}

.ba-note {
  color: var(--neutral-muted);
  font-size: 12px;
  line-height: 16px;
}

.before-after__screen .button {
  width: 100%;
  margin-top: auto;
}


/* 11. Footer
   --------------------------------------------------------------------------
   <site-footer></site-footer>
   <site-footer tagline="…" email="designbyduvnjak@gmail.com"></site-footer>
   Links and socials live in FOOTER in js/components.js.
   ========================================================================== */

site-footer {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 64px;
  width: calc(100% - 32px);
  margin: 0 auto 16px;
  /* Same width as the "Give Your Product a Better Experience" CTA card; content lines up with the 1106px column */
  padding: 100px max(56px, (100% - 1106px) / 2 - 16px) 8px;
  overflow: hidden;
  border-radius: 32px;
  background: var(--base-black);
  color: var(--base-white);
}

/* Soft moss glow top right — same as the other dark cards */
site-footer::before {
  content: "";
  position: absolute;
  top: -480px;
  right: 40px;
  width: 960px;
  height: 960px;
  border-radius: 50%;
  corner-shape: round;
  background: radial-gradient(closest-side, rgba(92, 120, 77, 0.16), rgba(92, 120, 77, 0.06) 55%, rgba(92, 120, 77, 0));
  pointer-events: none;
}

site-footer > * {
  position: relative;
}

.site-footer__brand {
  display: grid;
  justify-items: start;
  gap: 24px;
}

.site-footer__tagline {
  max-width: 980px;
  font-family: var(--font-heading);
  font-size: clamp(28px, 3.2vw, 42px);
  font-weight: 600;
  line-height: 1.143;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 48px 32px;
}

.site-footer__reach {
  display: grid;
  align-content: start;
  gap: 40px;
}

.site-footer__contact {
  display: grid;
  gap: 4px;
}

.site-footer__label {
  color: var(--neutral-muted);
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.site-footer__email-row {
  display: flex;
  align-items: center;
  gap: 14px;
}

.site-footer__email {
  font-family: var(--font-heading);
  font-size: clamp(24px, 2.4vw, 32px);
  font-weight: 500;
  line-height: 1.125;
  letter-spacing: -0.03em;
  overflow-wrap: anywhere;
  transition: color var(--duration-fast) ease;
}

.site-footer__email:hover {
  color: var(--brand-sage);
}

.site-footer__square {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: var(--radius-m);
  background: var(--base-black-card);
  color: #d6d6d0;
  cursor: pointer;
  transition: background-color var(--duration-fast) ease, color var(--duration-fast) ease;
  --icon-size: 24px;
}

.site-footer__square:hover {
  background: var(--neutral-muted);
  color: var(--brand-fog);
}

.site-footer__copy {
  position: relative;
}

/* "Copied" bubble after copying the email */
.site-footer__copy::after {
  content: "Copied";
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  padding: 4px 8px;
  border-radius: var(--radius-xs);
  background: var(--base-white);
  color: var(--base-black);
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  opacity: 0;
  translate: -50% 4px;
  transition: opacity var(--duration-fast) ease, translate var(--duration-fast) ease;
  pointer-events: none;
}

.site-footer__copy.is-copied::after {
  opacity: 1;
  translate: -50% 0;
}

.site-footer__socials {
  display: flex;
  gap: 12px;
}

.site-footer__socials .site-footer__square {
  width: 56px;
  height: 56px;
}

/* Link columns */
.site-footer__nav {
  display: grid;
  align-content: start;
  gap: 24px;
}

.site-footer__columns {
  display: flex;
  flex-wrap: wrap;
  gap: 32px clamp(48px, 6.6vw, 100px);
}

.site-footer__column {
  display: grid;
  align-content: start;
  gap: 4px;
}

.site-footer__socials {
  margin-top: 12px;
}

.site-footer__column ul {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 16px;
  font-weight: 500;
  line-height: 26px;
}

.site-footer__column a:not(.site-footer__square) {
  transition: color var(--duration-fast) ease;
}

.site-footer__column a:not(.site-footer__square):hover {
  color: var(--brand-sage);
}

/* Big zejneba wordmark at the bottom (paths in js/components.js) */
.site-footer__wordmark {
  display: block;
  width: 100%;
  height: auto;
  color: var(--base-black-card);
  opacity: 0.6; /* a quiet mark, barely lifted off the background */
}

.site-footer__wordmark .wordmark__dot {
  fill: var(--neutral-body);
}

/* Bottom line under the wordmark: copyright left, credit right */
.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 24px;
  margin-top: -48px; /* sits close under the wordmark instead of a full footer gap */
  padding-bottom: 20px;
  color: var(--neutral-body);
  font-size: 13px;
  line-height: 20px;
}

/* Privacy Policy + Cookie settings, between copyright and credit */
.site-footer__legal {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px 20px;
}

/* Quiet, like the copyright: plain text, underline only on hover */
.site-footer__legal a,
.site-footer__legal button {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 3px;
  cursor: pointer;
  opacity: 0.7;
  transition:
    opacity var(--duration-fast) var(--ease-out),
    text-decoration-color var(--duration-fast) var(--ease-out);
}

.site-footer__legal a:hover,
.site-footer__legal button:hover {
  opacity: 1;
  text-decoration-color: currentColor;
}

.site-footer__credit {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.site-footer__credit z-icon {
  --icon-size: 14px;
}

@media (max-width: 860px) {
  site-footer {
    gap: 48px;
    padding: 56px 24px 6px;
    border-radius: var(--radius-3xl);
  }

  .site-footer__links {
    flex-direction: column;
  }

  .site-footer__bottom {
    flex-direction: column;
    margin-top: -36px;
  }
}

/* Phones: on the grid edge, text on the 24px line (tokens.css).
   The email always fits on one line: its size follows the width of the row
   (cqw), minus the copy button and the gap next to it. */
@media (max-width: 600px) {
  site-footer {
    width: calc(100% - 2 * var(--grid-edge));
    margin-bottom: var(--grid-edge);
    padding: 48px var(--grid-inset) 6px;
    border-radius: var(--radius-2xl);
  }

  .site-footer__tagline {
    font-size: 23px;
    line-height: 1.22;
  }

  .site-footer__contact {
    container-type: inline-size;
  }

  .site-footer__email-row {
    gap: 12px;
  }

  .site-footer__email {
    font-size: clamp(13px, (100cqw - 60px) / 13.6, 24px);
    white-space: nowrap;
    overflow-wrap: normal;
  }

  .site-footer__email-row .site-footer__square {
    width: 48px;
    height: 48px;
  }
}


/* Cookie banner (js/components.js, section 6)
   --------------------------------------------------------------------------
   Card in the bottom-left corner; full width with a 16px gutter on phones.
   Slides up when it appears, slides back down once a choice is made.
   ========================================================================== */

.cookie-banner {
  position: fixed;
  left: 24px;
  bottom: 24px;
  z-index: 300;
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: min(440px, 100% - 32px);
  padding: 28px;
  border: 1px solid var(--neutral-line);
  border-radius: var(--radius-2xl);
  corner-shape: var(--corner-shape);
  background: var(--neutral-grey-100);
  box-shadow: 0 24px 60px rgba(20, 20, 20, 0.14), 0 2px 6px rgba(20, 20, 20, 0.06);
  color: var(--base-black);
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.4s var(--ease-out), transform 0.5s var(--ease-out-expo);
}

.cookie-banner.is-visible {
  opacity: 1;
  transform: none;
}

.cookie-banner__text {
  color: var(--neutral-body);
}

.cookie-banner__text a {
  color: var(--base-black);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--neutral-subtle);
  text-underline-offset: 3px;
}

.cookie-banner__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 12px;
}

@media (max-width: 640px) {
  .cookie-banner {
    left: 16px;
    bottom: 16px;
    padding: 22px;
  }

  .cookie-banner__actions .button {
    padding: 0 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cookie-banner {
    transform: none;
    transition: opacity 0.2s linear;
  }
}