.benefit-strip {
  overflow: visible;
}

.benefit-marquee {
  width: min(var(--container-width), calc(100% - 32px));
  margin: 0 auto;
  flex-wrap: wrap;
  justify-content: center;
  animation: none;
}

.benefit-marquee span {
  white-space: nowrap;
}

.whatsapp-float {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.whatsapp-float svg {
  width: 22px;
  height: 22px;
  flex: none;
  fill: currentColor;
}

.final-cta .cta-actions .btn {
  min-width: 230px;
}

.site-footer {
  display: grid;
  grid-template-columns: 1.2fr 1fr auto;
  align-items: start;
  gap: 26px;
  border-top: 1px solid var(--border-subtle);
  padding: 34px 0 104px;
}

.footer-brand img {
  width: 136px;
  margin-bottom: 14px;
}

.footer-brand p,
.footer-copy {
  max-width: 430px;
  margin: 0;
  color: var(--text-muted);
  font-size: 0.9rem;
  line-height: 1.6;
}

.footer-info {
  display: grid;
  gap: 12px;
}

.footer-info div {
  display: grid;
  gap: 4px;
}

.footer-info strong {
  color: #fff;
  font-size: 0.88rem;
}

.footer-info span,
.footer-info a {
  color: var(--text-muted);
  font-size: 0.9rem;
}

.footer-info a:hover,
.footer-links a:hover {
  color: #fff;
}

.footer-links {
  display: grid;
  gap: 10px;
  justify-items: end;
}

.footer-links a {
  color: var(--text-secondary);
  font-size: 0.9rem;
  font-weight: 720;
}

.footer-copy {
  grid-column: 1 / -1;
  border-top: 1px solid var(--border-subtle);
  padding-top: 18px;
}

.legal-page {
  min-height: 100vh;
  padding: 52px 0 90px;
}

.legal-logo {
  display: inline-flex;
  margin-bottom: 34px;
}

.legal-logo img {
  width: 154px;
}

.legal-panel {
  max-width: 880px;
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-lg);
  background: radial-gradient(circle at 88% 0, #ffffff24, #0000 32%), #111;
  padding: 44px;
}

.legal-panel h1 {
  max-width: 720px;
  font-size: 3rem;
}

.legal-panel h2 {
  margin-top: 34px;
  font-size: 1.32rem;
}

.legal-panel p {
  max-width: 760px;
}

.legal-panel ul {
  display: grid;
  max-width: 760px;
  gap: 12px;
  margin: 16px 0 22px;
  padding-left: 20px;
  list-style: disc;
}

.legal-panel li {
  color: var(--text-secondary);
  line-height: 1.68;
}

.legal-panel li::marker {
  color: #fff;
}

.legal-panel .btn {
  margin-top: 28px;
}

.tab-shell {
  overflow: hidden;
}

.tab-list {
  flex-wrap: wrap;
  overflow-x: visible;
}

.tab-button {
  white-space: nowrap;
}

.finance-window img,
.schedule-window img {
  aspect-ratio: auto;
  object-fit: contain;
  object-position: top center;
}

.system-window {
  display: flex;
  min-height: 0;
  flex-direction: column;
}

.system-window img {
  background: #080808;
  aspect-ratio: auto;
  object-fit: contain;
}

/* The screenshot's own aspect ratio drives the window's height (no
   forced stretch), so the print always fills its frame edge to edge —
   never letterboxed with a black bar. The text panel is sized to its
   own (tightened, see below) content instead of being stretched to
   match, which keeps both panels close in height without ever padding
   the image out with empty space. */
.system-panel {
  align-items: start;
}

.features-redesign {
  display: grid;
  grid-template-columns: 0.42fr 0.58fr;
  align-items: stretch;
  gap: 18px;
}

.feature-summary {
  position: relative;
  display: flex;
  min-height: 430px;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-md);
  background:
    radial-gradient(circle at 82% 0, #ffffff24, #0000 34%),
    linear-gradient(145deg, #1a1a1a, #0b0b0b);
  padding: 34px;
}

.feature-summary::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(#ffffff08 1px, #0000 1px),
    linear-gradient(90deg, #ffffff08 1px, #0000 1px);
  background-size: 42px 42px;
  opacity: 0.42;
}

.feature-summary > * {
  position: relative;
}

.feature-kicker {
  width: max-content;
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  background: #ffffff0a;
  color: var(--text-muted);
  padding: 8px 12px;
  font-size: 0.8rem;
  font-weight: 760;
  text-transform: uppercase;
}

.feature-summary h3 {
  max-width: 440px;
  margin: 42px 0 16px;
  font-size: 2.05rem;
  line-height: 1.08;
}

.feature-summary p {
  max-width: 430px;
  margin-bottom: auto;
}

.feature-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 42px;
}

.feature-stats div {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: #ffffff0a;
  padding: 16px;
}

.feature-stats strong {
  display: block;
  color: #fff;
  font-size: 1.36rem;
  line-height: 1.1;
}

.feature-stats span {
  display: block;
  margin-top: 7px;
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 720;
}

.feature-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.feature-card {
  display: grid;
  min-height: 136px;
  grid-template-columns: 44px 1fr;
  align-items: start;
  gap: 16px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background:
    radial-gradient(circle at var(--mouse-x, 50%) var(--mouse-y, 0%), #ffffff20, transparent 30%),
    #ffffff08;
  padding: 20px;
  transition:
    transform 0.24s,
    border-color 0.24s,
    background 0.24s,
    box-shadow 0.24s;
}

.feature-card:hover {
  border-color: var(--border-medium);
  background:
    radial-gradient(circle at var(--mouse-x, 50%) var(--mouse-y, 0%), #ffffff2b, transparent 30%),
    #ffffff0c;
  box-shadow: 0 18px 46px #00000052;
  transform: translateY(-3px);
}

.feature-index {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--border-medium);
  border-radius: 999px;
  background: #fff;
  color: #080808;
  font-size: 0.78rem;
  font-weight: 820;
}

.feature-card h3 {
  margin: 1px 0 8px;
  font-size: 1.06rem;
}

.feature-card p {
  margin: 0;
  color: #d7d7d7;
  font-size: 0.94rem;
  line-height: 1.58;
}

.plans .section-heading {
  margin-bottom: 34px;
}

.plans .section-heading h2 {
  max-width: 820px;
  margin-inline: auto;
}

.plan-offer {
  display: grid;
  grid-template-columns: 0.48fr 0.52fr;
  gap: 28px;
  max-width: 980px;
  margin: 0 auto;
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at 82% 0, #ffffff2b, #0000 32%),
    linear-gradient(135deg, #202020, #0b0b0b 58%, #151515);
  padding: 34px;
  box-shadow: 0 28px 90px #00000078;
}

.plan-offer-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.plan-offer-copy h3 {
  margin: 34px 0 14px;
  font-size: 2.12rem;
  line-height: 1.08;
}

.plan-offer-copy p {
  max-width: 470px;
  margin-bottom: 26px;
}

.offer-price {
  width: 100%;
  margin: auto 0 24px;
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
  padding: 22px 0;
}

.offer-price span,
.offer-price small,
.offer-price em {
  display: block;
  color: var(--text-muted);
  font-weight: 720;
}

.offer-price span {
  width: max-content;
  border: 1px solid #ffffff3d;
  border-radius: 999px;
  background: #ffffff12;
  color: #fff;
  padding: 7px 12px;
  font-size: 0.88rem;
  font-weight: 860;
  text-transform: uppercase;
}

.offer-price strong {
  display: block;
  margin-top: 12px;
  color: #fff;
  font-size: 4rem;
  line-height: 0.95;
}

.offer-price em {
  margin-top: 4px;
  color: #fff;
  font-style: normal;
  font-size: 1.12rem;
}

.offer-features {
  display: grid;
  align-content: center;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.offer-features span {
  position: relative;
  min-height: 48px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: #ffffff0a;
  color: #f2f2f2;
  padding: 13px 14px 13px 34px;
  font-size: 0.92rem;
  font-weight: 720;
  line-height: 1.25;
}

.offer-features span::before {
  content: "";
  position: absolute;
  top: 18px;
  left: 15px;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--success);
  box-shadow: 0 0 0 4px #00c8531f;
}

@media (width <= 1180px) {
  .features-redesign {
    grid-template-columns: 1fr;
  }

  .feature-summary {
    min-height: auto;
  }

  .feature-summary h3 {
    margin-top: 34px;
  }

  .feature-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .plan-offer {
    grid-template-columns: 1fr;
  }
}

@media (width <= 700px) {
  .tab-list {
    flex-wrap: nowrap;
    overflow-x: auto;
  }

  .features .section-heading.centered {
    text-align: left;
  }

  .features-redesign,
  .feature-list,
  .feature-stats {
    grid-template-columns: 1fr;
  }

  .feature-summary {
    padding: 26px;
  }

  .feature-summary h3 {
    font-size: 1.72rem;
  }

  .feature-card {
    min-height: auto;
    grid-template-columns: 38px 1fr;
    padding: 18px;
  }

  .feature-index {
    width: 34px;
    height: 34px;
  }

  .plans .section-heading.centered {
    text-align: left;
  }

  .plan-offer {
    padding: 24px;
  }

  .plan-offer-copy h3 {
    font-size: 1.72rem;
  }

  .offer-price strong {
    font-size: 3.1rem;
  }

  .offer-features {
    grid-template-columns: 1fr;
  }

  .site-footer {
    grid-template-columns: 1fr;
    padding-bottom: 118px;
  }

  .footer-links {
    justify-items: start;
  }

  .legal-panel {
    padding: 28px 22px;
  }

  .legal-panel h1 {
    font-size: 2.25rem;
  }
}

/* Product tour: keep the text panel flowing from the top instead of the
   base space-between spreading gaps across every child (mini chips,
   title, description, bullets) unevenly depending on copy length. The
   window frame now sizes itself from the screenshot (see .system-panel
   above), so this panel is tightened to stay close to that height
   instead of forcing the frame to stretch and letterbox the print. */
.system-text {
  justify-content: flex-start;
  min-height: 0;
  padding: 22px 24px;
}

.system-mini {
  margin-bottom: 16px;
}

.system-copy h3 {
  margin-bottom: 8px;
  font-size: 1.1rem;
}

.system-copy p {
  font-size: 0.92rem;
  line-height: 1.5;
}

/* Product tour: bullets + secondary (contextual) tabs */
.system-bullets {
  display: grid;
  gap: 8px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}

.system-bullets li {
  position: relative;
  padding-left: 20px;
  color: var(--text-secondary);
  font-size: 0.88rem;
  line-height: 1.4;
}

.system-bullets li::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 0;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: #ffffffa3;
}

.tab-list-secondary {
  margin: -4px 0 16px;
  padding-bottom: 0;
  border-top: 1px solid var(--border-subtle);
  padding-top: 14px;
}

.tab-list-secondary[hidden] {
  display: none;
}

.tab-button-secondary {
  padding: 9px 14px;
  font-size: 0.84rem;
  background: #ffffff05;
}

.tab-button-secondary.active {
  background: #fff;
  color: #000;
}

/* Finance metrics: flexible grid + real-data disclaimer */
.finance-visual .metric-grid {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.metric-note {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.8rem;
  text-align: right;
}

/* Hero floating callouts: room for descriptive (non-numeric) copy */
.floating-card {
  min-width: 204px;
  max-width: 226px;
}

.floating-card strong {
  line-height: 1.3;
}

/* Benefits grid */
.benefit-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  width: min(1080px, 100%);
  margin: 38px auto 0;
  text-align: left;
}

.benefit-card {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: #ffffff09;
  padding: 24px;
}

.benefit-card h3 {
  margin-bottom: 8px;
  font-size: 1.04rem;
}

.benefit-card p {
  margin: 0;
  font-size: 0.92rem;
}

/* Pricing grid (4 contract lengths, same product) */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.pricing-grid .plan-card {
  display: flex;
  min-height: auto;
  flex-direction: column;
  gap: 6px;
  padding: 28px;
}

.pricing-grid .plan-card > span {
  margin-bottom: 6px;
}

.pricing-grid .plan-card h3 {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: 0;
  font-size: 2.15rem;
}

.pricing-grid .plan-card h3 small {
  color: var(--text-muted);
  font-size: 0.98rem;
  font-weight: 600;
}

.plan-billing {
  min-height: 38px;
  margin: 0 0 6px;
  color: var(--text-muted);
  font-size: 0.86rem;
  line-height: 1.4;
}

.pricing-grid .btn {
  margin-top: auto;
  width: 100%;
}

.offer-features-panel {
  width: min(980px, 100%);
  margin: 30px auto 0;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: #ffffff05;
  padding: 28px;
}

.offer-features-panel h3 {
  margin-bottom: 16px;
  font-size: 1.06rem;
}

.offer-features-panel .offer-features {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (width <= 1180px) {
  .benefit-grid,
  .pricing-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .offer-features-panel .offer-features {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (width <= 700px) {
  .benefit-grid,
  .pricing-grid {
    grid-template-columns: 1fr;
  }

  .offer-features-panel {
    padding: 22px;
  }

  .offer-features-panel .offer-features {
    grid-template-columns: 1fr;
  }

  .floating-card {
    max-width: none;
  }
}

/* Buttons: silver-metal primary (echoes the chrome logo) instead of flat
   white, icon arrow instead of a typed "->", clearer dark secondary. */
.btn {
  border-radius: 10px;
  letter-spacing: 0.005em;
}

.btn.btn-primary {
  border-color: #ffffff8c;
  background: linear-gradient(180deg, #fbfbfb 0%, #e4e4e4 52%, #c9c9c9 100%);
  color: #0a0a0a;
  box-shadow:
    inset 0 1px 0 #ffffffe6,
    inset 0 -1px 0 #0000001f,
    0 8px 24px #ffffff14,
    0 2px 6px #00000066;
}

.btn.btn-primary:hover {
  border-color: #fff;
  background: linear-gradient(180deg, #ffffff 0%, #efefef 52%, #d6d6d6 100%);
  color: #000;
  box-shadow:
    inset 0 1px 0 #fff,
    inset 0 -1px 0 #0000001f,
    0 12px 34px #ffffff26,
    0 3px 8px #00000066;
}

.btn.btn-dark {
  border-color: #ffffff30;
  background: linear-gradient(180deg, #181818 0%, #0d0d0d 100%);
  box-shadow: inset 0 1px 0 #ffffff12;
}

.btn.btn-dark:hover {
  border-color: #ffffff66;
  background: linear-gradient(180deg, #1f1f1f 0%, #111 100%);
}

.btn-arrow {
  width: 16px;
  height: 16px;
  flex: none;
  background: currentColor;
  transition: transform 0.24s;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
}

.btn:hover .btn-arrow {
  transform: translateX(3px);
}

/* Mobile menu links were overriding the primary button's text color. */
.mobile-panel a.btn-primary,
.mobile-panel a.btn-primary:hover {
  color: #0a0a0a;
  background: linear-gradient(180deg, #fbfbfb 0%, #e4e4e4 52%, #c9c9c9 100%);
}

@media (prefers-reduced-motion: reduce) {
  .btn:hover .btn-arrow {
    transform: none;
  }
}

/* Support page */
.support-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}

.support-panel .support-actions .btn {
  margin-top: 0;
}

@media (width <= 560px) {
  .support-actions {
    display: grid;
  }
}

/* Pricing: full feature list inside each plan, unlimited-barbers callout,
   and clear "offer" treatment for the longer contracts. */
.plans-unlimited {
  width: max-content;
  max-width: 100%;
  margin: 0 auto 26px;
  border: 1px solid #00c85359;
  border-radius: 999px;
  background: #00c8530f;
  color: var(--text-secondary);
  padding: 12px 22px;
  font-size: 0.96rem;
  text-align: center;
}

.plans-unlimited strong {
  color: #fff;
}

.plans-note {
  margin: 22px auto 0;
  max-width: 720px;
  color: var(--text-muted);
  font-size: 0.86rem;
  text-align: center;
}

.pricing-grid {
  align-items: stretch;
}

.plan-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 14px;
}

.pricing-grid .plan-name {
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  color: var(--text-secondary);
  padding: 7px 14px;
  font-size: 0.86rem;
  font-weight: 760;
}

.plan-tag {
  border-radius: 999px;
  background: var(--success);
  color: #04210f;
  padding: 5px 10px;
  font-size: 0.7rem;
  font-style: normal;
  font-weight: 860;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.plan-old {
  min-height: 22px;
  margin: 0;
  color: var(--text-muted);
  font-size: 0.86rem;
}

.plan-old s {
  text-decoration-color: var(--danger);
}

.pricing-grid .plan-card h3 {
  margin-top: 0;
}

.plan-save {
  min-height: 34px;
  margin: 0 0 4px;
  color: #37e07d;
  font-size: 0.84rem;
  font-weight: 760;
  line-height: 1.35;
}

.plan-card.is-offer {
  border-color: #00c85345;
}

.plan-card.featured {
  border-color: #00c85399;
}

.plan-features {
  display: grid;
  gap: 11px;
  margin: 22px 0 0;
  padding: 22px 0 0;
  border-top: 1px solid var(--border-subtle);
  list-style: none;
}

.plan-features li {
  position: relative;
  padding-left: 26px;
  color: var(--text-secondary);
  font-size: 0.88rem;
  line-height: 1.4;
}

.plan-features li::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 0;
  width: 16px;
  height: 16px;
  background: var(--success);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
}

.plan-features li.highlight {
  color: #fff;
}

.pricing-grid .btn {
  margin-top: 6px;
}

@media (width <= 700px) {
  .plans-unlimited {
    width: auto;
    border-radius: var(--radius-md);
  }
}

/* Timeline: the connector runs through the centers of the numbered
   circles (first to last) instead of across the card tops. */
@media (width > 820px) {
  .timeline {
    --step-w: calc((100% - 54px) / 4);
    --track: calc(100% - var(--step-w));
  }

  .timeline:before,
  .timeline:after {
    top: 78px;
    left: 41px;
  }

  .timeline:before {
    right: auto;
    width: var(--track);
  }

  .timeline:after {
    width: calc(var(--track) * var(--timeline-p, 0));
    max-width: none;
  }
}

.mobile-panel a.btn-dark {
  color: #fff;
  border-color: #ffffff30;
  background: linear-gradient(180deg, #181818 0%, #0d0d0d 100%);
}