/* ============================================
   LYNKVA — sections.css
   Hero, statements, feature rows, dark panel,
   case rows
   ============================================ */

/* ---------- Hero (layout mirrors try.link-kit.com) ----------
   Visual top gap (below the 62px fixed nav) equals the bottom gap. */
.hero {
  --hero-pad: clamp(10rem, 18vw, 15rem);
  padding-top: var(--hero-pad);
  padding-bottom: calc(var(--hero-pad) - 3.875rem);
  text-align: center;
}

.hero-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.55rem 1.05rem;
  border-radius: var(--r-pill);
  background: var(--pill-gray);
  font-size: var(--t-small);
  color: var(--ink);
  margin-bottom: clamp(1.8rem, 3.5vw, 2.6rem);
}

.hero-pill b {
  font-weight: 600;
}

.hero-title {
  font-size: clamp(2.6rem, 6vw, 4.15rem);
  line-height: 1.1;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

/* rotating word */
.rotator {
  display: inline-block;
  min-height: 1.1em;
}

.rotator .word {
  display: inline-block;
  color: var(--head-gray);
  transition: opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.rotator .word.out {
  opacity: 0;
  transform: translateY(-0.3em);
  filter: blur(0.375rem);
}

.rotator .word.in {
  animation: word-in 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes word-in {
  from {
    opacity: 0;
    transform: translateY(0.3em);
    filter: blur(0.375rem);
  }
}

.hero-sub {
  margin: 1.4rem auto 2.2rem;
  font-size: var(--t-body);
  line-height: 1.6;
  color: var(--text-gray);
}

/* claim bar: input + CTA in one rounded field */
.claim {
  display: flex;
  align-items: center;
  gap: 0;
  width: min(27.5rem, 100%);
  margin-inline: auto;
  padding: 0.4rem 0.4rem 0.4rem 0.4rem;
  border-radius: var(--r-pill);
  background: #fff;
  box-shadow: inset 0 0 0 0.0625rem #e6e6e6, 0 0.375rem 1.125rem -0.75rem rgba(0, 0, 0, 0.18);
}

.claim input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  padding: 0.7rem 1rem;
  font: inherit;
  font-size: var(--t-body);
  color: var(--ink);
  background: transparent;
}

.claim input::placeholder {
  color: var(--text-gray);
}

/* fixed "lynkva.com/" prefix — muted like the placeholder so the user's
   typed slug (ink) stands out against it */
.claim-prefix {
  flex-shrink: 0;
  padding-left: 1rem;
  font-size: var(--t-body);
  color: var(--text-gray);
  white-space: nowrap;
}

.claim .claim-input {
  padding-left: 0.1rem;
}

.claim .btn {
  padding: 0.875rem 1.5rem;
  flex-shrink: 0;
  margin-left: 0.4rem;
}

/* hero on phones: keep only the bottom sentence, shrink the claim bar */
@media (max-width: 40rem) {
  .hero-sub-top,
  .hero-sub-br {
    display: none;
  }

  .claim-prefix,
  .claim input {
    font-size: var(--t-small);
  }

  .claim input {
    padding: 0.6rem 0.5rem;
  }

  .claim .btn {
    padding: 0.75rem 1.125rem;
  }
}

/* ---------- Statement (headline + optional CTAs) ---------- */
.statement {
  text-align: center;
  padding-block: clamp(6rem, 13vw, 11rem);
}

.statement .hero-actions {
  margin-top: clamp(2rem, 4vw, 3rem);
}

/* ---------- Product panel: Mac mockup in big gray card ---------- */
.product-panel {
  margin-inline: var(--edge);
  background: var(--card-gray);
  border-radius: var(--r-panel);
  padding: clamp(2.5rem, 5.5vw, 5rem) clamp(2rem, 6vw, 6rem) 0;
  overflow: hidden;
}

/* display frame locked to 16:10, like an iMac / Studio Display.
   overflow guards keep the ratio even when inner content is taller. */
.mac {
  position: relative;
  z-index: 1;
  aspect-ratio: 16 / 10;
  max-width: min(73.75rem, 100%);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #050505;
  border-radius: 1.375rem;
  padding: 0.625rem;
  box-shadow: 0 1.875rem 4.375rem -2.5rem rgba(0, 0, 0, 0.4);
}

.mac-menubar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.4375rem 0.875rem;
  font-size: 0.71875rem;
  color: rgba(255, 255, 255, 0.85);
  background: rgba(70, 55, 45, 0.9);
  border-radius: 0.75rem 0.75rem 0 0;
}

.mac-left,
.mac-right {
  display: flex;
  align-items: center;
  gap: 0.875rem;
}

.mac-left b:first-child::before {
  content: "";
  font-family: -apple-system, system-ui, sans-serif;
}

.mac-left b {
  font-weight: 700;
}

.mac-desktop {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  overflow: hidden;
  background:
    radial-gradient(90% 80% at 20% 20%, #8a6f56 0%, transparent 60%),
    radial-gradient(80% 90% at 85% 75%, #5d6b52 0%, transparent 65%),
    linear-gradient(160deg, #6d5a48 0%, #4a4238 55%, #3a3a30 100%);
  padding: clamp(1rem, 2.5vw, 1.8rem);
  border-radius: 0 0 0.75rem 0.75rem;
}

/* app window fills the 16:9 screen area */
.app-window {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  background: #fff;
  border-radius: 0.875rem;
  display: flex;
  flex-direction: column;
}

.app-topbar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
}

.app-hamb {
  color: var(--ink-2);
  font-size: 0.9375rem;
}

.app-pill-light {
  padding: 0.5rem 1rem;
  border-radius: var(--r-pill);
  background: var(--pill-gray);
  font-size: 0.8125rem;
}

.app-spacer {
  flex: 1;
}

.app-ava {
  width: 1.625rem;
  height: 1.625rem;
  border-radius: 50%;
  background: linear-gradient(135deg, #d98e63, #96692a);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 0.75rem;
}

.app-count {
  font-size: 0.8125rem;
  color: var(--ink-2);
}

.app-pill-dark {
  padding: 0.625rem 1.125rem;
  border-radius: var(--r-pill);
  background: var(--ink-2);
  color: #fff;
  font-size: 0.8125rem;
}

/* content sits vertically centered in the window, scales with viewport */
.app-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding-block: clamp(0.8rem, 2.5vw, 3.5rem);
}

.ghost-cards {
  display: flex;
  justify-content: center;
  margin-bottom: clamp(0.8rem, 1.6vw, 1.6rem);
}

.ghost {
  width: clamp(3.375rem, 6.4vw, 5.75rem);
  aspect-ratio: 92 / 112;
  border-radius: 0.875rem;
  background: #fafafa;
  box-shadow: inset 0 0 0 0.0625rem #ececec;
  display: grid;
  place-items: center;
  font-size: clamp(1.1875rem, 2.1vw, 1.875rem);
  color: #d9d9d9;
}

.ghost.g1 { transform: rotate(-9deg) translateX(0.875rem); }
.ghost.g2 { transform: translateY(-0.5rem); z-index: 1; }
.ghost.g3 { transform: rotate(9deg) translateX(-0.875rem); }

.app-lead {
  font-size: clamp(1.15rem, 1.9vw, 1.5rem);
  line-height: 1.35;
  color: var(--text-gray);
}

.app-hint {
  margin-top: clamp(0.4rem, 0.8vw, 0.8rem);
  font-size: clamp(0.72rem, 1vw, 0.875rem);
  color: #c4c4c4;
}

.app-upload {
  margin-top: clamp(0.8rem, 1.6vw, 1.6rem);
  padding: clamp(0.5rem, 1vw, 0.75rem) clamp(1rem, 2vw, 1.5rem);
  border-radius: var(--r-pill);
  background: #d9d9d9;
  color: #fff;
  font-size: clamp(0.72rem, 1vw, 0.875rem);
}

/* ---------- Mac carousel ----------
   gap matches the desktop padding so the next slide hides at rest
   and peeks in on arrow hover, exactly.ai style */
.mac-slides {
  flex: 1;
  min-height: 0;
  min-width: 0;
  display: flex;
  gap: clamp(1rem, 2.5vw, 1.8rem);
  transition: transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

.mac-slide {
  flex: 0 0 100%;
  min-width: 0;
  display: flex;
}

.mac-slide .app-window {
  flex: 1;
  min-width: 0;
}

/* real dashboard/schedule screenshots fill the screen area (2x webp) */
.mac-shot {
  flex: 1;
  min-width: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  border-radius: 1rem;
  background: #fff;
  display: block;
}

/* slide 2: services added */
.app-note {
  font-size: 0.78125rem;
  color: var(--ink-2);
}

.app-body2 {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: clamp(0.5rem, 1.2vw, 0.875rem);
  padding: 0 1.25rem 1.25rem;
}

.svc-add {
  border: 0.09375rem dashed #e0e0e0;
  border-radius: 0.75rem;
  padding: clamp(0.625rem, 1.6vw, 1.125rem);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
}

.svc-plus {
  font-size: 1.5rem;
  font-weight: 300;
  line-height: 1;
  color: var(--accent);
}

.svc-add b {
  display: block;
  font-size: 0.78125rem;
  font-weight: 500;
  color: var(--ink-2);
}

.svc-add small {
  font-size: 0.6875rem;
  color: var(--text-gray);
}

.svc-grid {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 1fr;
  gap: clamp(0.5rem, 1vw, 0.75rem);
}

.svc-tile {
  min-height: 0;
  border-radius: 0.625rem;
  padding: clamp(0.5rem, 1.1vw, 0.75rem);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0.0625rem;
  overflow: hidden;
}

.svc-tile i {
  font-style: normal;
  font-size: clamp(0.8125rem, 1.6vw, 1.25rem);
  margin-bottom: auto;
  opacity: 0.55;
}

.svc-tile b {
  font-size: clamp(0.59375rem, 1.1vw, 0.78125rem);
  font-weight: 500;
  color: var(--ink-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.svc-tile small {
  font-size: clamp(0.53125rem, 1vw, 0.6875rem);
  color: var(--text-gray-2);
  white-space: nowrap;
}

.t1 { background: linear-gradient(145deg, #f6ede4, #eddcc9); }
.t2 { background: linear-gradient(145deg, #e8eef3, #d5e2ec); }
.t3 { background: linear-gradient(145deg, #eef3e8, #dde9d3); }
.t4 { background: linear-gradient(145deg, #f3e8ee, #ecd5e2); }
.t5 { background: linear-gradient(145deg, #e9e6f5, #d9d3ec); }
.t6 { background: linear-gradient(145deg, #f5efe0, #ece1c7); }
.t7 { background: linear-gradient(145deg, #e4f0f0, #cfe4e4); }
.t8 { background: linear-gradient(145deg, #f0e4e4, #e6cfcf); }

/* ---------- Below the display: monitor stand + caption ---------- */
.panel-below {
  position: relative;
  min-height: clamp(15rem, 28vw, 25rem);
}

/* iMac-style neck rising behind the display; runs past the panel edge
   so the overflow clip crops it — deliberately "cut off".
   Horizontal shading rounds it like brushed aluminum. */
.mac-stand {
  position: absolute;
  top: 0;
  bottom: -0.0625rem;
  left: 50%;
  transform: translateX(-50%);
  width: min(28vw, 25rem);
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0) 18%, rgba(0, 0, 0, 0.05) 100%),
    linear-gradient(90deg, #c9c9c9 0%, #ededed 16%, #f3f3f3 50%, #e6e6e6 84%, #c4c4c4 100%);
  /* the foot dissolves instead of ending on a hard edge */
  mask-image: linear-gradient(180deg, #000 0%, #000 68%, rgba(0, 0, 0, 0.45) 88%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 68%, rgba(0, 0, 0, 0.45) 88%, transparent 100%);
}

/* hinge cutout at the top of the stand */
.mac-stand::before {
  content: "";
  position: absolute;
  top: 0.75rem;
  left: 50%;
  transform: translateX(-50%);
  width: 6.5rem;
  height: 3.25rem;
  border-radius: 0 0 62.4375rem 62.4375rem;
  background: #fdfdfd;
}

/* depth-of-field: the lower part of the neck softly blurs out,
   like a product shot losing focus toward the desk */
.mac-stand::after {
  content: "";
  position: absolute;
  left: -18%;
  right: -18%;
  bottom: -0.0625rem;
  height: 62%;
  backdrop-filter: blur(0.5625rem);
  -webkit-backdrop-filter: blur(0.5625rem);
  mask-image: linear-gradient(180deg, transparent 0%, #000 60%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 60%);
  pointer-events: none;
}

/* ---------- Desk accessories: Magic Keyboard + Mouse (top-down) ----------
   Temporarily hidden — flip `display` back to `flex` to restore. */
.desk-accessories {
  position: absolute;
  left: 50%;
  top: calc(clamp(9.375rem, 18vw, 16.25rem) + clamp(1.25rem, 3vw, 2.5rem));
  transform: translateX(-50%);
  display: none;
  align-items: flex-start;
  gap: clamp(1.75rem, 3.5vw, 3.25rem);
}

/* Magic Keyboard: 279×115mm ≈ 2.43:1, thin aluminum bezel */
.kbd {
  width: min(44vw, 33.75rem);
  aspect-ratio: 2.43 / 1;
  border-radius: 0.75rem;
  padding: 1.4%;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  background: linear-gradient(180deg, #eceded 0%, #dfe0e2 100%);
  box-shadow:
    inset 0 0.0625rem 0 rgba(255, 255, 255, 0.85),
    0 0.875rem 2.125rem -1.125rem rgba(0, 0, 0, 0.3);
}

.kbd i,
.kbd .k-ud {
  display: block;
}

/* key surfaces */
.kbd .krow i,
.kbd .ke,
.kbd .k-ud i {
  background: #fbfbfc;
  border-radius: 0.1875rem;
}

/* fn row: half height, esc + strip of 12 + round Touch ID */
.kr-fn {
  display: flex;
  gap: 0.125rem;
  height: 8.5%;
}

.k-esc {
  width: 6.5%;
}

.k-fnstrip {
  flex: 1;
  background-color: #fbfbfc;
  background-image: repeating-linear-gradient(
    90deg,
    transparent 0 calc(8.333% - 0.125rem),
    #d9dadc calc(8.333% - 0.125rem) 8.333%
  );
}

.k-tid {
  aspect-ratio: 1;
  height: 100%;
  border-radius: 50% !important;
  background: radial-gradient(circle at 40% 35%, #fdfdfd, #ececee) !important;
  box-shadow: inset 0 0 0 0.0625rem #d9dadc;
}

/* main grid: 4 rows of keys via gap-line gradients */
.kr-grid {
  position: relative;
  flex: 1;
  border-radius: 0.1875rem;
  background-color: #fbfbfc;
  background-image:
    repeating-linear-gradient(90deg, transparent 0 calc(7.7% - 0.125rem), #d9dadc calc(7.7% - 0.125rem) 7.7%),
    repeating-linear-gradient(180deg, transparent 0 calc(25% - 0.125rem), #d9dadc calc(25% - 0.125rem) 25%);
}

/* wider edge keys overlay (delete, tab, return, caps, shifts) */
.ke {
  position: absolute;
}

.ke-del { right: 0; top: 0; width: 7%; height: calc(25% - 0.125rem); }
.ke-tab { left: 0; top: 25%; width: 6.2%; height: calc(25% - 0.125rem); }
.ke-ret { right: 0; top: 25%; width: 8%; height: calc(25% - 0.125rem); }
.ke-caps { left: 0; top: 50%; width: 7.6%; height: calc(25% - 0.125rem); }
.ke-shl { left: 0; top: 75%; width: 9.8%; height: calc(25% - 0.125rem); }
.ke-shr { right: 0; top: 75%; width: 9.8%; height: calc(25% - 0.125rem); }

/* bottom row: modifiers + wide spacebar + inverted-T arrows */
.kr-bottom {
  display: flex;
  gap: 0.125rem;
  height: 16.5%;
}

.kr-bottom > i {
  width: 5.6%;
}

.kr-bottom .k-cmd {
  width: 7.2%;
}

.kr-bottom .k-space {
  flex: 1;
}

.k-arrows {
  display: flex;
  gap: 0.125rem;
  align-items: flex-end;
  width: 14.5%;
}

.k-arrows .k-ar {
  flex: 1;
  height: calc(50% - 0.0625rem);
}

.k-ud {
  flex: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.k-ud i {
  flex: 1;
}

/* Magic Mouse: 57×113mm stadium, seamless white top */
.mouse {
  width: clamp(3rem, 4.8vw, 4.125rem);
  aspect-ratio: 57 / 113;
  border-radius: 62.4375rem;
  background:
    radial-gradient(120% 70% at 35% 22%, #ffffff 0%, #f4f4f5 45%, #e4e5e7 100%);
  box-shadow:
    inset 0 0 0 0.0625rem #d9dadc,
    inset 0 -0.625rem 1rem -0.75rem rgba(0, 0, 0, 0.18),
    0 0.875rem 1.875rem -1rem rgba(0, 0, 0, 0.3);
}

.panel-caption {
  position: relative;
  z-index: 1;
  max-width: 35rem;
  padding: clamp(4rem, 8vw, 6.5rem) 0 clamp(2.5rem, 5vw, 4rem);
}

.cap-tabs {
  display: flex;
  gap: 2rem;
  font-size: var(--t-feature);
}

/* clickable tabs that switch the mockup + swap the description below.
   Active state = ink color only (no underline). */
.cap-tab {
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  font-size: var(--t-feature);
  color: var(--text-gray);
  cursor: pointer;
  transition: color 0.25s;
}

.cap-tab:hover,
.cap-tab.is-on {
  color: var(--ink);
}

.cap-desc {
  margin-top: 1.4rem;
  font-size: clamp(1.02rem, 1.55vw, 1.2rem);
  line-height: 1.5;
  color: var(--text-gray);
  text-wrap: pretty;
}

/* only the active slide's caption is shown (the others sit hidden in the DOM) */
.cap-desc.is-hidden {
  display: none;
}

/* floating next arrow, right side of the desktop — dark so it reads
   on top of the white app window */
.arrow-btn {
  position: absolute;
  right: clamp(1.4rem, 3vw, 2.6rem);
  top: 50%;
  transform: translateY(-50%);
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background: rgba(28, 28, 30, 0.78);
  backdrop-filter: blur(0.5rem);
  -webkit-backdrop-filter: blur(0.5rem);
  color: #fff;
  font-size: 1.25rem;
  box-shadow: 0 0.375rem 1.25rem -0.375rem rgba(0, 0, 0, 0.45);
  transition: background 0.25s, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.arrow-btn:hover {
  background: #000;
  transform: translateY(-50%) translateX(0.1875rem);
}

/* product panel on phones: drop the card container, monitor fits the screen */
@media (max-width: 40rem) {
  .product-panel {
    margin-inline: 0;
    background: none;
    border-radius: 0;
    padding: 1.25rem var(--gutter) 0;
  }

  /* height follows the menubar + desktop instead of a fixed ratio */
  .mac {
    aspect-ratio: auto;
    padding: 0.5rem;
    border-radius: 1rem;
  }

  /* desktop area matches the app screenshot ratio so nothing is clipped */
  .mac-desktop {
    aspect-ratio: 2000 / 1254;
    padding: 0.375rem;
  }

  /* smaller app-shot rounding on phones */
  .mac-shot {
    border-radius: 0.5rem;
  }

  .mac-menubar {
    padding: 0.25rem 0.5625rem;
    font-size: 0.5rem;
  }

  .mac-left,
  .mac-right {
    gap: 0.5rem;
  }

  /* the clock string doesn't fit a 330px menubar */
  .mac-right span:last-child {
    display: none;
  }

  .panel-below {
    padding-inline: 0.35rem;
    min-height: 0;
  }

  /* short, realistic neck: ends before the caption, blurring out at its foot */
  .mac-stand {
    height: 7.5rem;
    bottom: auto;
  }

  .mac-stand::before {
    top: 0.5rem;
    width: 3.75rem;
    height: 1.875rem;
  }

  .panel-caption {
    padding-top: 10rem;
  }

  /* slides are switched via the caption tabs on phones */
  .arrow-btn {
    display: none;
  }
}

/* CTA pair under a statement heading, like the reference */
.statement-actions {
  display: flex;
  justify-content: center;
  gap: 0.9rem;
  flex-wrap: wrap;
  margin-top: clamp(2rem, 4vw, 3rem);
}

.statement-actions .btn {
  padding: 1.3rem 2.1rem;
  font-size: 1.05rem;
}

/* ---------- Alternating feature rows (exactly.ai style) ----------
   Reference @2000px: panel 61vw r40 bleeding to the edge, ~90px gap,
   copy column ~565px; title & paragraph share the same size, gray body. */
.fx {
  display: grid;
  gap: clamp(6rem, 11vw, 10rem);
  padding-inline: var(--edge);
}

.fx-row {
  display: grid;
  grid-template-columns: 61vw minmax(0, 1fr);
  gap: clamp(2.5rem, 4.5vw, 5.625rem);
  align-items: center;
}

.fx-row--flip {
  grid-template-columns: minmax(0, 1fr) 61vw;
}

.fx-row--flip .fx-panel { order: 2; }
.fx-row--flip .fx-copy { order: 1; padding-left: clamp(1rem, 4vw, 5.125rem); }

.fx-panel {
  position: relative;
  border-radius: var(--r-panel);
  overflow: hidden;
  aspect-ratio: 1224 / 1130;
  display: flex;
  align-items: center;
  justify-content: center;
  isolation: isolate;
}

.fx-panel--cream {
  background:
    radial-gradient(90% 80% at 22% 18%, #f4ebdf 0%, transparent 60%),
    linear-gradient(165deg, #eee3d3 0%, #d9c3a8 100%);
}

.fx-panel--slate {
  background:
    radial-gradient(85% 80% at 75% 20%, #e6eaec 0%, transparent 60%),
    linear-gradient(165deg, #dde2e5 0%, #a9b2ba 100%);
}

.fx-shot {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
}

.fx-shot.is-on {
  opacity: 1;
}

.fx-copy {
  max-width: 35.3125rem;
}

.fx-title {
  font-size: var(--t-feature);
  font-weight: 500;
  letter-spacing: -0.01em;
}

.fx-desc {
  margin-top: 1.1rem;
  font-size: var(--t-feature);
  line-height: 1.5;
  font-weight: 400;
  color: var(--text-gray);
  text-wrap: pretty;
}

.fx-btn {
  margin-top: clamp(2rem, 3.4vw, 3rem);
}

.fx-dots {
  border: none;
  border-top: 0.125rem dotted #d9d9d9;
  margin: clamp(2.5rem, 4.5vw, 4rem) 0;
}

.fx-list {
  display: grid;
  gap: 1.35rem;
}

.fx-list li {
  display: flex;
  align-items: center;
  gap: 0.95rem;
  font-size: 1.05rem;
}

/* Phosphor duotone icons — one per benefit, matching the app icon family */
.fx-list .fx-ic {
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
}

/* segmented control pinned to the panel's bottom center */
.fx-seg {
  position: absolute;
  bottom: clamp(1.2rem, 2.4vw, 2rem);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  padding: 0.375rem;
  border-radius: var(--r-pill);
  background: rgba(22, 22, 24, 0.5);
  backdrop-filter: blur(0.625rem);
  -webkit-backdrop-filter: blur(0.625rem);
}

.fx-seg button {
  padding: 0.95rem 2rem;
  border-radius: var(--r-pill);
  font-size: 1rem;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.75);
  transition: color 0.2s;
}

.fx-seg button.is-on {
  background: #fff;
  color: var(--ink);
  font-weight: 500;
}

@media (max-width: 56.25rem) {
  .fx-row,
  .fx-row--flip {
    grid-template-columns: 1fr;
  }

  .fx-row--flip .fx-panel { order: 0; }
  .fx-row--flip .fx-copy { order: 1; padding-left: 0; }

  .fx-panel {
    aspect-ratio: auto;
    min-height: 32.5rem;
    padding-block: 3rem;
  }
}

@media (max-width: 40rem) {
  /* headings + button text a touch smaller on phones */
  .display {
    font-size: 1.7rem;
  }

  .btn,
  .statement-actions .btn {
    font-size: var(--t-small);
  }

  /* feature-row heading + body a touch smaller */
  .fx-title,
  .fx-desc {
    font-size: 1.05rem;
  }

  /* single-row pill like the reference (labels stay on one line) */
  .fx-seg {
    gap: 0.125rem;
    max-width: calc(100% - 0.75rem);
  }

  .fx-seg button {
    padding: 0.6rem 0.9rem;
    font-size: 0.8rem;
  }

  /* shorten the last tab: "Tunjukkan ke Resepsionis" -> "Tunjukkan" */
  .seg-more {
    display: none;
  }

  /* one side gutter for every section (nav -> footer): edge cards, wrapped
     text, nav and footer all line up at 16px */
  :root {
    --edge: 1rem;
    --gutter: 1rem;
  }

  /* bare section headings (pricing, testimonials) respect the gutter too */
  .section > .display {
    padding-inline: var(--gutter);
  }

  /* FAQ block spans full width on phones — inset a little more than the gutter */
  .faq {
    padding-inline: 1.5rem;
  }

  /* consistent vertical rhythm between sections */
  .statement,
  .section {
    padding-block: 3.25rem;
  }

  .fx {
    gap: 4rem;
  }

  /* testimonial quote a touch smaller */
  .tsm-quote {
    font-size: 1.0625rem;
    line-height: 1.625rem;
  }
}

/* ---------- Feature rows ---------- */
.feature-row {
  display: grid;
  grid-template-columns: minmax(17.5rem, 26.25rem) 1fr;
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: center;
  padding: clamp(3rem, 6vw, 5rem) clamp(1.5rem, 4vw, 4.2rem);
}

.feature-copy .feature-title {
  margin-bottom: 1rem;
}

.feature-copy .feature-desc {
  margin-bottom: 2rem;
}

.feature-visual {
  position: relative;
  display: grid;
  place-items: center;
  min-height: clamp(20rem, 38vw, 32.5rem);
  border-radius: var(--r-panel);
  overflow: hidden;
  isolation: isolate;
}

.feature-visual .segment {
  position: absolute;
  bottom: clamp(1.2rem, 2.6vw, 2rem);
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
}

@media (max-width: 55rem) {
  .feature-row {
    grid-template-columns: 1fr;
  }
}

/* ---------- Booking app mockup (screen recreation) ---------- */
.bkmock {
  width: min(20.625rem, 82vw);
  background: #fff;
  border-radius: 1.375rem;
  overflow: hidden;
  box-shadow: 0 1.5rem 3.75rem -1.5rem rgba(0, 0, 0, 0.45);
  font-size: 0.625rem;
  z-index: 2;
}

.bkmock-hero {
  position: relative;
  height: 6rem;
  background: linear-gradient(160deg, #4a4038 0%, #2b2622 60%, #1c1815 100%);
}

.bkmock-ava {
  position: absolute;
  left: 0.875rem;
  bottom: -1rem;
  width: 2.375rem;
  height: 2.375rem;
  border-radius: 0.75rem;
  background: #111;
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 0.75rem;
  font-weight: 600;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.35);
}

.bkmock-cek {
  position: absolute;
  right: 0.75rem;
  bottom: 0.625rem;
  padding: 0.3125rem 0.625rem;
  border-radius: var(--r-pill);
  background: rgba(15, 14, 13, 0.9);
  color: #fff;
  font-size: 0.5625rem;
}

.bkmock-body {
  padding: 1.5rem 0.875rem 0.875rem;
}

.bkmock-title {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.bkmock-sub {
  color: var(--text-gray);
  font-size: 0.59375rem;
  margin-bottom: 0.75rem;
}

.bkmock-label {
  font-size: 0.5rem;
  letter-spacing: 0.08em;
  color: var(--text-gray);
  margin-bottom: 0.4375rem;
}

.bkmock-dates {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.3125rem;
  margin-bottom: 0.75rem;
}

.bkmock-date {
  text-align: center;
  padding: 0.375rem 0 0.4375rem;
  border-radius: 0.5625rem;
  box-shadow: inset 0 0 0 0.0625rem #ececec;
}

.bkmock-date span {
  display: block;
  font-size: 0.46875rem;
  color: var(--text-gray);
}

.bkmock-date b {
  font-size: 0.6875rem;
  font-weight: 600;
}

.bkmock-date.is-sel {
  background: #111;
  box-shadow: none;
}

.bkmock-date.is-sel span,
.bkmock-date.is-sel b {
  color: #fff;
}

.bkmock-srv {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5625rem 0.25rem;
}

.bkmock-srv + .bkmock-srv {
  border-top: 0.09375rem dotted var(--line-dot);
}

.bkmock-srv i {
  width: 1.625rem;
  height: 1.625rem;
  border-radius: 0.5625rem;
  display: grid;
  place-items: center;
  font-style: normal;
  font-size: 0.75rem;
  flex-shrink: 0;
}

.i-hair { background: #e4ecf4; }
.i-face { background: #f6ecce; }

.bkmock-srv b {
  display: block;
  font-size: 0.65625rem;
  font-weight: 600;
}

.bkmock-srv small {
  font-size: 0.53125rem;
  color: var(--text-gray);
}

.bkmock-srv .n {
  margin-left: auto;
  font-size: 0.53125rem;
  color: var(--text-gray);
  white-space: nowrap;
}

.bkmock-cta {
  margin-top: 0.625rem;
  padding: 0.6875rem;
  border-radius: 0.75rem;
  background: #111;
  color: #fff;
  text-align: center;
  font-size: 0.65625rem;
}

/* ---------- Dark rights panel (full-bleed) ---------- */
.dark-panel {
  margin-inline: var(--edge);
  border-radius: var(--r-panel);
  min-height: clamp(23.75rem, 46vw, 38.75rem);
  background:
    radial-gradient(130% 110% at 50% 0%, #6e6e6e 0%, #3c3c3c 45%, #161616 100%);
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  padding: clamp(2rem, 5vw, 4rem);
}

.dark-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.5;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 220 220' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0.08'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.dark-panel-copy {
  position: relative;
  z-index: 2;
  max-width: 35rem;
}

.dark-panel-copy .feature-title {
  color: #fff;
  margin-bottom: 0.9rem;
}

.dark-panel-copy .feature-desc {
  color: rgba(255, 255, 255, 0.6);
}

.dark-panel .plus-btn {
  right: clamp(1.5rem, 3vw, 2.5rem);
  bottom: auto;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.12);
}