/* The final control layer: shared proportions and one restrained glass material. */
body.refined.evolved {
  --control-height: 44px;
  --control-display-height: 36px;
  --control-padding: 20px;
  --control-font: 14px;
  --control-radius: 999px;
  --control-accent: 194, 219, 236;
  --control-stroke: rgba(222, 237, 246, .22);
  --control-surface: linear-gradient(160deg, rgba(45, 59, 67, .78), rgba(15, 25, 31, .74));
  --control-highlight: inset 0 1px 0 rgba(255, 255, 255, .08);
  --control-blur: blur(18px) saturate(1.2);
  --control-ease: cubic-bezier(.2, .65, .3, 1);
}

body.refined.evolved .btn {
  min-height: var(--control-height);
  padding: 0 var(--control-padding);
  gap: 8px;
  border-radius: var(--control-radius);
  font-size: var(--control-font);
  font-weight: 700;
  line-height: 20px;
  letter-spacing: -.01em;
  box-shadow: none;
  transition: color .2s ease, background-color .2s ease, border-color .2s ease;
}

body.refined.evolved :is(.hero, .visit) .btn-lg {
  min-height: 48px;
  padding-inline: 24px;
  font-size: var(--control-font);
}

body.refined.evolved .btn-primary {
  background: #f5f5f7;
  color: #0b0c0d;
  border: 1px solid rgba(255, 255, 255, .35);
  box-shadow: var(--control-highlight);
}

/* Glass belongs to controls, independent of the photographic section surfaces. */
body.refined.evolved :is(.pill-nav, .tabs, .btn-glass, .top-actions .circle, .detail-close, .detail-switcher button) {
  border: 1px solid var(--control-stroke);
  border-radius: var(--control-radius);
  background: var(--control-surface);
  box-shadow: var(--control-highlight);
  -webkit-backdrop-filter: var(--control-blur);
  backdrop-filter: var(--control-blur);
}

body.refined.evolved :is(.pill-nav, .tabs, .btn-glass, .top-actions .circle, .tab-tour).glass::after {
  content: none;
}

body.refined.evolved :is(.btn, .circle):is(:hover, :active) {
  transform: none;
}

body.refined.evolved .circle {
  transition: color .2s ease, background-color .2s ease, border-color .2s ease;
}

body.refined.evolved .top-actions .circle {
  width: var(--control-height);
  height: var(--control-height);
  font-size: 12px;
  letter-spacing: 0;
}

body.refined.evolved .pill-nav {
  padding: 4px;
  gap: 2px;
}

body.refined.evolved .pill-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 16px;
  font-size: var(--control-font);
  line-height: 20px;
}

body.refined.evolved :is(.nav-blob, .tab-blob) {
  top: 4px;
  bottom: 4px;
  background: rgba(222, 237, 246, .12);
  box-shadow: var(--control-highlight);
  transition: transform .24s var(--control-ease), width .24s var(--control-ease), opacity .18s ease;
}

body.refined.evolved :is(.detail-close, .detail-switcher button) {
  min-height: var(--control-height);
  font-size: var(--control-font);
  line-height: 20px;
  font-weight: 400;
  transition: color .2s ease, background-color .2s ease, border-color .2s ease;
}

body.refined.evolved .detail-switcher button {
  padding-inline: 16px;
}

body.refined.evolved .detail-switcher button[aria-pressed="true"] {
  border-color: rgba(var(--control-accent), .54);
  background: rgba(43, 72, 87, .82);
  box-shadow: var(--control-highlight);
  font-weight: 700;
}

body.refined.evolved .membership-detail[data-plan="3"] .detail-switcher button[aria-pressed="true"] {
  border-color: rgba(233, 201, 146, .54);
  background: rgba(71, 57, 35, .82);
}

body.refined.evolved .ways-footer [data-membership-tour] {
  min-height: var(--control-height);
  padding-inline: var(--control-padding);
  border-color: var(--control-stroke);
  background: var(--control-surface);
  box-shadow: var(--control-highlight);
  -webkit-backdrop-filter: var(--control-blur);
  backdrop-filter: var(--control-blur);
  color: #e3f0f7;
  font-size: var(--control-font);
  font-weight: 700;
}

@media (hover: hover) and (pointer: fine) {
  body.refined.evolved .btn-primary:hover {
    background: #fff;
    color: #0b0c0d;
    box-shadow: var(--control-highlight);
  }
  body.refined.evolved :is(.btn-glass, .detail-close, .detail-switcher button, .ways-footer [data-membership-tour]):hover {
    background-color: rgba(194, 219, 236, .1);
    border-color: rgba(222, 237, 246, .4);
  }
}

@media (max-width: 760px) {
  /* Place the navigation inside the photograph, clear of its rounded edge. */
  body.refined.evolved .topbar {
    top: calc(24px + env(safe-area-inset-top, 0px));
    left: calc(var(--story-gutter) + 20px + env(safe-area-inset-left, 0px));
    right: calc(var(--story-gutter) + 20px + env(safe-area-inset-right, 0px));
  }

  body.refined.evolved :is(.hero, .visit) .btn-lg {
    min-height: 46px;
    padding-inline: var(--control-padding);
  }

  /* Compact visual pills retain a generous, independent 44 px touch target. */
  body.refined.evolved .choice-plans {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
  }

  body.refined.evolved .choice-plans a {
    position: relative;
    isolation: isolate;
    flex: 0 0 auto;
    justify-content: center;
    min-width: 76px;
    min-height: var(--control-height);
    padding: 0 16px;
    border: 0;
    border-radius: var(--control-radius);
    background: none;
    box-shadow: none;
    color: rgb(var(--control-accent));
    font-size: 13px;
    font-weight: 700;
    line-height: 20px;
    text-decoration: none;
    transition: color .2s ease;
  }

  body.refined.evolved .choice-plans a::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: calc((var(--control-height) - var(--control-display-height)) / 2) 0;
    border: 1px solid rgba(var(--control-accent), .22);
    border-radius: inherit;
    background: linear-gradient(160deg, rgba(var(--control-accent), .11), rgba(var(--control-accent), .035));
    box-shadow: var(--control-highlight);
    -webkit-backdrop-filter: var(--control-blur);
    backdrop-filter: var(--control-blur);
    pointer-events: none;
    transition: border-color .2s ease, background-color .2s ease;
  }

  body.refined.evolved .choice-plans a[href="#membership-gold"] {
    --control-accent: 233, 201, 146;
  }

  body.refined.evolved .choice-plans a:active::before {
    background-color: rgba(var(--control-accent), .1);
    border-color: rgba(var(--control-accent), .5);
  }

  body.refined.evolved .choice-plans a:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
  }

  /* 54 px navigation surface; no floating halo or oversized active bubble. */
  body.refined.evolved .tabbar {
    left: 16px;
    right: 16px;
    bottom: calc(12px + env(safe-area-inset-bottom));
    max-width: 420px;
    margin-inline: auto;
    align-items: center;
    gap: 8px;
  }

  body.refined.evolved .tabbar .tabs {
    flex: 1 1 0;
    min-width: 0;
    height: 54px;
    padding: 4px;
    gap: 0;
    border: 1px solid var(--control-stroke);
    background: var(--control-surface);
    box-shadow: var(--control-highlight), 0 4px 16px rgba(0, 0, 0, .12);
  }

  body.refined.evolved .tabs a {
    flex: 1 1 0;
    min-width: 0;
    min-height: var(--control-height);
    justify-content: center;
    gap: 2px;
    padding: 4px 2px;
    font-size: 10px;
    font-weight: 400;
    line-height: 12px;
    white-space: nowrap;
    letter-spacing: 0;
    color: #bac5cd;
  }

  body.refined.evolved .tabs a.active { color: #f5f5f7; }
  body.refined.evolved .tabs .ic { width: 18px; height: 18px; }

  body.refined.evolved .tabbar .tab-tour {
    width: 48px;
    height: 48px;
    border: 1px solid rgba(255, 255, 255, .26);
    background: #c2dbec;
    box-shadow: var(--control-highlight), 0 4px 12px rgba(0, 0, 0, .1);
    color: #173b4d;
  }
  body.refined.evolved .tab-tour .ic { width: 21px; height: 21px; }
}

@media (max-width: 760px) and (hover: hover) and (pointer: fine) {
  body.refined.evolved .choice-plans a:hover::before {
    border-color: rgba(var(--control-accent), .45);
    background-color: rgba(var(--control-accent), .07);
  }
}

@media (prefers-reduced-motion: reduce) {
  body.refined.evolved :is(.btn, .circle, .nav-blob, .tab-blob, .detail-close, .detail-switcher button, .choice-plans a, .choice-plans a::before) {
    transition: none;
  }
}

@media (prefers-reduced-transparency: reduce) {
  body.refined.evolved :is(.pill-nav, .tabbar .tabs, .btn-glass, .top-actions .circle, .detail-close, .detail-switcher button, .ways-footer [data-membership-tour], .choice-plans a::before) {
    background: #192830;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  body.refined.evolved .detail-switcher button[aria-pressed="true"] { background: #2b4857; }
  body.refined.evolved .membership-detail[data-plan="3"] .detail-switcher button[aria-pressed="true"] { background: #473923; }
}
