/* ==========================================================================
   CIANA — Welcome Page (v1.17.1)
   ========================================================================== */

:root {
  --radius-pill: 999px;
  --radius-lg: 28px;
  --radius-md: 20px;

  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 150ms;
  --dur-normal: 250ms;
  --dur-slow: 400ms;

  --nav-height-expanded: 96px;
  --nav-height-compact: 64px;
  --nav-top-gap: 16px;
}

/* ---------- Theme tokens: DARK (default) ---------- */
[data-theme-root].theme-dark,
body.theme-dark {
  --bg-primary: #14110E;
  --bg-scrim-start: rgba(10, 8, 6, 0.94);
  --bg-scrim-end: rgba(10, 8, 6, 0.12);
  --surface: rgba(255, 250, 242, 0.06);
  --surface-elevated: rgba(20, 17, 14, 0.86);
  --border-hairline: rgba(233, 214, 179, 0.14);

  --text-primary: #F6EFE4;
  --text-secondary: rgba(246, 239, 228, 0.68);
  --text-muted: rgba(246, 239, 228, 0.46);

  --accent: #C9A467;
  --accent-strong: #E4C285;

  --cta-bg: #F3ECDF;
  --cta-text: #171310;
}

/* ---------- Theme tokens: LIGHT ---------- */
body.theme-light {
  --bg-primary: #F6F1E8;
  --bg-scrim-start: rgba(246, 241, 232, 0.92);
  --bg-scrim-end: rgba(246, 241, 232, 0.08);
  --surface: rgba(23, 19, 16, 0.04);
  --surface-elevated: rgba(255, 253, 249, 0.92);
  --border-hairline: rgba(23, 19, 16, 0.1);

  --text-primary: #221C15;
  --text-secondary: rgba(34, 28, 21, 0.68);
  --text-muted: rgba(34, 28, 21, 0.46);

  --accent: #A87F3F;
  --accent-strong: #8C6A32;

  --cta-bg: #221C15;
  --cta-text: #F6F1E8;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg-primary);
  color: var(--text-primary);
  font-family: 'Quicksand', -apple-system, BlinkMacSystemFont, sans-serif;
  transition: background var(--dur-slow) var(--ease), color var(--dur-slow) var(--ease);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ==========================================================================
   HERO
   ========================================================================== */

.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding-top: var(--nav-height-expanded);
  transition: padding-top var(--dur-normal) var(--ease);
}

body[data-nav-mode="compact"] .hero {
  padding-top: var(--nav-height-compact);
}

.hero-media {
  position: absolute;
  inset: 0;
  background-image: url('assets/images/hero-background.jpg');
  background-size: cover;
  background-position: center 40%;
}

.hero-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, var(--bg-scrim-start) 0%, var(--bg-scrim-start) 32%, var(--bg-scrim-end) 68%);
  transition: background var(--dur-slow) var(--ease);
}

.hero-content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 80px;
}

.hero-logo {
  display: block;
  width: clamp(220px, 24vw, 340px);
  height: auto;
  margin-bottom: 28px;
  /* source file is a flat grey mark; brighten it against the dark hero so it
     reads with the same weight the type treatment had */
  filter: brightness(1.55) contrast(0.94);
}

body.theme-light .hero-logo {
  filter: none;
}

.hero-wordmark-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.hero-tagline {
  margin: 28px 0 0;
  font-family: 'Quicksand', sans-serif;
  font-weight: 600;
  font-size: clamp(22px, 2.6vw, 32px);
  color: var(--text-primary);
  line-height: 1.35;
}

.hero-subtitle {
  margin: 22px 0 0;
  max-width: 420px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--text-secondary);
  font-weight: 400;
}

.hero-cta {
  margin-top: 40px;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 18px 30px;
  border-radius: var(--radius-pill);
  background: var(--cta-bg);
  color: var(--cta-text);
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}

.hero-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.28);
}

.hero-cta:focus-visible {
  outline: 2px solid var(--accent-strong);
  outline-offset: 3px;
}

.hero-cta svg { flex-shrink: 0; }

/* ==========================================================================
   STICKY BOTTOM NAV
   ========================================================================== */

.tier-nav {
  position: fixed;
  left: 20px;
  right: 20px;
  top: var(--nav-top-gap);
  z-index: 30;
  display: flex;
  align-items: stretch;
  height: calc(var(--nav-height-expanded) - var(--nav-top-gap));
  background: #F8F1E4;
  border-radius: 26px;
  box-shadow: 0 16px 36px rgba(20, 14, 6, 0.28);
  overflow: hidden;
  transition: height var(--dur-normal) var(--ease);
}

body[data-nav-mode="compact"] .tier-nav {
  height: calc(var(--nav-height-compact) - var(--nav-top-gap));
}

@media (max-width: 860px) {
  .tier-nav { left: 12px; right: 12px; border-radius: 22px; }
}

.tier-brand {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 24px;
  border-right: 1px solid rgba(60, 45, 24, 0.12);
  text-decoration: none;
  color: #B0813D;
}

.tier-brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.tier-brand-name {
  font-family: 'Quicksand', sans-serif;
  font-weight: 700;
  font-size: 17px;
  letter-spacing: 0.08em;
  color: #3B2E1C;
}

.tier-brand-sub {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #B0813D;
}

@media (max-width: 860px) {
  .tier-brand { display: none; }
}

.tier-list {
  list-style: none;
  margin: 0;
  padding: 0 8px;
  display: flex;
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.tier-list::-webkit-scrollbar { display: none; }

.tier-item {
  flex: 1;
  min-width: 98px;
  display: flex;
  padding: 8px 3px;
}

.tier-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: transparent;
  border: none;
  border-radius: 16px;
  cursor: pointer;
  color: #B0813D;
  padding: 8px 6px;
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

.tier-btn:hover { background: rgba(176, 129, 61, 0.1); }

.tier-btn:focus-visible {
  outline: 2px solid #B0813D;
  outline-offset: -2px;
}

.tier-item--active .tier-btn {
  background: linear-gradient(135deg, #CDA45C, #B98A42);
  color: #FFFFFF;
  box-shadow: 0 8px 18px rgba(150, 108, 40, 0.35);
}

.tier-item--active .tier-btn:hover { background: linear-gradient(135deg, #CDA45C, #B98A42); }

.tier-icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  transition: width var(--dur-normal) var(--ease), height var(--dur-normal) var(--ease);
}

body[data-nav-mode="compact"] .tier-icon {
  width: 24px;
  height: 24px;
}

.tier-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  max-height: 40px;
  opacity: 1;
  overflow: hidden;
  transition: max-height var(--dur-normal) var(--ease), opacity var(--dur-fast) var(--ease), margin var(--dur-normal) var(--ease);
}

.tier-name {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #3B2E1C;
  white-space: nowrap;
}

.tier-item--active .tier-name { color: #FFFFFF; }

.tier-price {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: #8A6A3E;
  white-space: nowrap;
}

.tier-item--active .tier-price { color: rgba(255, 255, 255, 0.85); }

body[data-nav-mode="compact"] .tier-text {
  max-height: 0;
  opacity: 0;
  margin: 0;
}

/* ---------- nav controls (theme + density toggles) ---------- */

.nav-controls {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px;
  border-left: 1px solid rgba(60, 45, 24, 0.12);
}

.nav-control-btn {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  background: rgba(176, 129, 61, 0.1);
  border: 1px solid rgba(60, 45, 24, 0.1);
  color: #3B2E1C;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}

.nav-control-btn:hover { background: rgba(176, 129, 61, 0.2); }
.nav-control-btn:active { transform: scale(0.96); }

.nav-control-btn:focus-visible {
  outline: 2px solid #B0813D;
  outline-offset: 2px;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 860px) {
  .hero-content { padding: 0 28px; }
  .hero-subtitle { max-width: 340px; }

  :root {
    --nav-height-expanded: 84px;
    --nav-height-compact: 60px;
    --nav-top-gap: 12px;
  }

  .tier-item { min-width: 80px; }
  .tier-name { font-size: 10.5px; font-weight: 700; }
  .tier-price { font-size: 9.5px; font-weight: 600; }
  .nav-controls { padding: 0 8px; gap: 4px; }
  .nav-control-btn { width: 34px; height: 34px; }
}

/* ==========================================================================
   PEDICURE COLLECTIONS (list page)
   ========================================================================== */

.collections-page {
  min-height: auto;
  padding: calc(var(--nav-height-expanded) + 64px) 0 40px;
  transition: padding-top var(--dur-normal) var(--ease);
}

body[data-nav-mode="compact"] .collections-page {
  padding-top: calc(var(--nav-height-compact) + 64px);
}

.collections-header {
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 80px;
  text-align: center;
  margin-bottom: 36px;
}

.collections-eyebrow {
  display: block;
  font-family: 'Quicksand', sans-serif;
  font-weight: 700;
  font-size: clamp(22px, 2.8vw, 32px);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-primary);
}

.collections-sub {
  margin: 14px 0 0;
  font-size: 15px;
  color: var(--text-secondary);
}

.collections-list {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.collection-row-link {
  position: relative;
  display: flex;
  align-items: center;
  height: 178px;
  padding: 0 48px;
  overflow: hidden;
  text-decoration: none;
  transition: transform var(--dur-fast) var(--ease);
}

.collection-row-link:hover { transform: translateX(4px); }

.collection-row-link:focus-visible {
  outline: 2px solid var(--accent-strong);
  outline-offset: -2px;
}

.collection-row-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center center;
}

.collection-row-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--bg-scrim-start) 0%, var(--bg-scrim-start) 38%, rgba(10, 8, 6, 0.15) 78%, rgba(10, 8, 6, 0) 100%);
}

.collection-row-scrim--volcano {
  background: linear-gradient(90deg, var(--bg-scrim-start) 0%, var(--bg-scrim-start) 38%, rgba(20, 8, 4, 0.25) 78%, rgba(20, 8, 4, 0) 100%);
}

.collection-name {
  position: relative;
  z-index: 1;
  font-family: 'Quicksand', sans-serif;
  font-weight: 600;
  font-size: clamp(18px, 2vw, 24px);
  color: var(--text-primary);
}

.collection-name-group {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.collection-name-group .collection-name { font-size: clamp(20px, 2.2vw, 26px); }

.collection-months {
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
}

.collection-chevron {
  position: relative;
  z-index: 1;
  margin-left: auto;
  color: var(--text-secondary);
  flex-shrink: 0;
}

/* ==========================================================================
   EXPERIENCE CARDS (Spring sub-experiences, etc.)
   ========================================================================== */

.experience-list {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.experience-card {
  display: flex;
  align-items: stretch;
  min-height: 220px;
  background: var(--surface-elevated);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-decoration: none;
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}

.experience-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.22);
}

.experience-card:focus-visible {
  outline: 2px solid var(--accent-strong);
  outline-offset: -2px;
}

.experience-card-image {
  width: 42%;
  flex-shrink: 0;
  background-size: cover;
  background-position: center;
}

.experience-card-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 12px;
  padding: 36px 42px;
}

.experience-card-title {
  font-family: 'Quicksand', sans-serif;
  font-weight: 700;
  font-size: clamp(22px, 2.4vw, 30px);
  letter-spacing: 0.02em;
  color: var(--text-primary);
}

.experience-card-tags {
  font-size: 14px;
  color: var(--text-secondary);
}

.experience-card-cta {
  margin-top: 12px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 22px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-hairline);
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: background var(--dur-fast) var(--ease);
}

.experience-card:hover .experience-card-cta {
  background: var(--surface);
}

@media (max-width: 680px) {
  .experience-card { flex-direction: column; min-height: 0; }
  .experience-card-image { width: 100%; height: 200px; }
  .experience-card-content { padding: 28px 26px; }
}

@media (max-width: 860px) {
  .collections-page { padding-top: calc(var(--nav-height-expanded) + 52px); }
  .collections-header { padding: 0 28px; margin-bottom: 24px; }
  .collection-row-link { height: 150px; padding: 0 24px; }
}

@media (max-width: 560px) {
  .hero-tagline br { display: none; }
  .hero-subtitle br { display: none; }
}

/* ==========================================================================
   PAGE TOOLBAR (back / home)
   ========================================================================== */

.page-toolbar {
  position: fixed;
  top: var(--nav-height-expanded);
  left: 0;
  right: 0;
  z-index: 20;
  display: flex;
  justify-content: space-between;
  padding: 40px 28px;
  pointer-events: none;
  transition: top var(--dur-normal) var(--ease);
}

body[data-nav-mode="compact"] .page-toolbar {
  top: var(--nav-height-compact);
}

.toolbar-btn {
  pointer-events: auto;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  background: var(--surface-elevated);
  border: 1px solid var(--border-hairline);
  color: var(--text-primary);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  cursor: pointer;
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}

.toolbar-btn:hover { background: var(--border-hairline); }
.toolbar-btn:active { transform: scale(0.96); }

.toolbar-btn:focus-visible {
  outline: 2px solid var(--accent-strong);
  outline-offset: 2px;
}

@media (max-width: 560px) {
  .page-toolbar { padding: 18px 18px; }
  .toolbar-btn { width: 40px; height: 40px; }
}

.page-toolbar--header-aligned {
  padding-top: 108px;
}

@media (max-width: 860px) {
  .page-toolbar--header-aligned { padding-top: 84px; }
}

@media (max-width: 560px) {
  .page-toolbar--header-aligned { padding-top: 60px; }
}

/* ==========================================================================
   SCREENSAVER (auto-shows after 2 minutes of inactivity)
   ========================================================================== */

.screensaver {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  background: #0a0806;
  opacity: 0;
  pointer-events: none;
  transition: opacity 900ms var(--ease);
}

.screensaver::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('assets/images/hero-background.jpg');
  background-size: cover;
  background-position: center;
  opacity: 0.32;
  animation: ss-pan 40s ease-in-out infinite alternate;
}

.screensaver::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(10, 8, 6, 0.2) 0%, rgba(10, 8, 6, 0.88) 78%);
}

body.screensaver-active .screensaver {
  opacity: 1;
  pointer-events: auto;
}

.screensaver-logo {
  position: relative;
  z-index: 1;
  width: 130px;
  height: auto;
  filter: brightness(1.6);
  animation: ss-breathe 6s ease-in-out infinite;
}

.screensaver-tag {
  position: relative;
  z-index: 1;
  margin: 0;
  color: rgba(246, 239, 228, 0.75);
  font-family: 'Quicksand', sans-serif;
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  animation: ss-fade 3s ease-in-out infinite;
}

@keyframes ss-breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}

@keyframes ss-fade {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 0.9; }
}

@keyframes ss-pan {
  from { transform: scale(1) translate(0, 0); }
  to { transform: scale(1.12) translate(-2%, -2%); }
}

/* ==========================================================================
   PEDICURE DETAIL PAGE (Classic, etc.)
   ========================================================================== */

.pd-page {
  min-height: auto;
  padding-bottom: 24px;
}

.pd-hero {
  position: relative;
  min-height: 620px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  padding: 32px 60px 64px;
}

.pd-hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}

.pd-hero-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(38, 26, 15, 0.94) 0%, rgba(38, 26, 15, 0.88) 34%, rgba(38, 26, 15, 0.25) 72%, rgba(38, 26, 15, 0.05) 100%);
}

.pd-topbar {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 48px;
}

.pd-topbar--fixed {
  position: fixed;
  top: var(--nav-height-expanded);
  left: 0;
  right: 0;
  z-index: 20;
  margin-bottom: 0;
  padding: 22px 40px;
  background: linear-gradient(to bottom, rgba(20, 15, 10, 0.65) 0%, rgba(20, 15, 10, 0) 100%);
  transition: top var(--dur-normal) var(--ease);
}

body[data-nav-mode="compact"] .pd-topbar--fixed {
  top: var(--nav-height-compact);
}

.pd-hero { padding-top: calc(var(--nav-height-expanded) + 96px); }

.pd-back {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #F3ECDF;
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
}

.pd-back:hover { opacity: 0.85; }

.pd-back:focus-visible {
  outline: 2px solid var(--accent-strong);
  outline-offset: 3px;
}

.pd-favorite {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  background: transparent;
  border: none;
  color: #F3ECDF;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease);
}

.pd-favorite:hover { transform: scale(1.08); }
.pd-favorite:active { transform: scale(0.95); }

.pd-favorite:focus-visible {
  outline: 2px solid var(--accent-strong);
  outline-offset: 3px;
}

.pd-hero-content {
  position: relative;
  z-index: 2;
  max-width: 560px;
}

.pd-eyebrow {
  margin: 0;
  font-family: 'Quicksand', sans-serif;
  font-weight: 700;
  font-size: clamp(48px, 6vw, 76px);
  letter-spacing: 0.01em;
  color: #FFFFFF;
  line-height: 1;
}

.pd-title {
  margin: 2px 0 0;
  font-family: 'Quicksand', sans-serif;
  font-weight: 500;
  font-size: clamp(26px, 3vw, 36px);
  letter-spacing: 0.1em;
  color: #FFFFFF;
}

.pd-description {
  margin: 22px 0 0;
  max-width: 420px;
  font-size: 15px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.8);
}

.pd-price-row {
  margin-top: 26px;
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.pd-price {
  font-family: 'Quicksand', sans-serif;
  font-weight: 700;
  font-size: clamp(30px, 3.4vw, 40px);
  color: #FFFFFF;
}

.pd-duration {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.68);
}

.pd-details {
  max-width: 1200px;
  margin: -56px auto 0;
  position: relative;
  z-index: 3;
  padding: 0 60px;
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 24px;
  align-items: start;
}

.pd-card {
  background: var(--surface-elevated);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-lg);
  padding: 32px;
}

.pd-card-title {
  margin: 0 0 20px;
  font-family: 'Quicksand', sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-primary);
}

.pd-card-title--center { text-align: center; }

.pd-included-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.pd-included-list li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.pd-included-list strong {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 2px;
}

.pd-included-list span {
  display: block;
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.5;
}

.pd-item-icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  color: var(--accent);
  margin-top: 1px;
}

.pd-standard-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.pd-standard-grid--six {
  grid-template-columns: repeat(3, 1fr);
  row-gap: 28px;
}

@media (max-width: 620px) {
  .pd-standard-grid--six { grid-template-columns: repeat(2, 1fr); }
}

.pd-standard-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
}

.pd-standard-item .pd-item-icon {
  width: 30px;
  height: 30px;
  margin: 0 0 4px;
}

.pd-standard-item strong {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}

.pd-standard-item span {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.4;
}

@media (max-width: 1024px) {
  .pd-details { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  .pd-hero { padding: calc(var(--nav-height-expanded) + 88px) 28px 48px; min-height: 560px; }
  .pd-topbar--fixed { padding: 16px 20px; }
  .pd-details { padding: 0 20px; margin-top: -40px; gap: 16px; }
  .pd-card { padding: 24px; }
  .pd-standard-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
}

@media (max-width: 560px) {
  .pd-back span { display: none; }
}

/* ==========================================================================
   PD DETAILS — plus connector between included / added cards
   ========================================================================== */

.pd-includes-heading {
  max-width: 1200px;
  margin: 0 auto 20px;
  padding: 0 60px;
  font-family: 'Quicksand', sans-serif;
  font-weight: 700;
  font-size: clamp(20px, 2.4vw, 28px);
  color: var(--text-primary);
}

.pd-details--connector {
  grid-template-columns: 1fr auto 1.15fr;
  align-items: center;
}

.pd-connector {
  justify-self: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: #1a140c;
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
}

.pd-card-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.pd-card-eyebrow--center { justify-content: center; width: 100%; }

@media (max-width: 1024px) {
  .pd-details--connector { grid-template-columns: 1fr; }
  .pd-connector { margin: 4px auto; }
}

@media (max-width: 860px) {
  .pd-includes-heading { padding: 0 20px; margin-bottom: 16px; }
}