/* =========================================================================
   Product Stage — simple, two-block interactive
   ========================================================================= */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--si-chalk); }

body {
  font-family: var(--si-font-sans);
  color: var(--si-text-primary);
  -webkit-font-smoothing: antialiased;
}

.ps-wrap {
  --plum: var(--si-dark-grape);
  --paper: #FFFFFF;

  /* mode accent — flips with [data-stage] */
  --accent: #8551F5;          /* grape, new launches */
  --accent-soft: #EADFFE;
  --accent-ink: #FFFFFF;

  max-width: 880px;
  margin: 56px auto;
  padding: 56px 64px 48px;
  background: var(--paper);
  border: 1px solid var(--si-border);
  border-radius: 18px;
  position: relative;
  overflow: hidden;
  transition: background 400ms var(--si-ease-out);
}

.ps-wrap[data-stage="existing"] {
  --accent: #4FAA8B;          /* mint, existing listings */
  --accent-soft: #DDEEE6;
}

/* Embedded mode — drops outer chrome so it sits cleanly inside a page column */
.ps-wrap--embed {
  margin: 8px 0 24px;
  padding: 28px 28px 32px;
  border-radius: 12px;
  max-width: none;
}
.ps-wrap--embed .ps-title,
.ps-wrap--embed .ps-eyebrow { display: none; }
.ps-wrap--embed .ps-head { margin-bottom: 24px; }

/* corner wash that follows the active mode */
.ps-wrap::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 50% at 100% 0%, var(--accent-soft), transparent 60%);
  opacity: 0.55;
  pointer-events: none;
  transition: opacity 400ms var(--si-ease-out);
}

/* ---- Header ------------------------------------------------------------ */
.ps-head { position: relative; margin-bottom: 40px; }
.ps-eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--plum);
  background: var(--si-lighter-grape);
  padding: 6px 12px;
  border-radius: 99px;
  margin-bottom: 18px;
}
.ps-title {
  font: 500 40px/1.05 var(--si-font-sans);
  letter-spacing: -0.022em;
  color: var(--plum);
  margin: 0 0 24px;
}
.ps-title em {
  font-family: var(--si-font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 1.05em;
  letter-spacing: 0;
}

/* ---- Pill picker ------------------------------------------------------- */
.ps-pill {
  position: relative;
  display: inline-flex;
  background: var(--si-chalk);
  border: 1px solid var(--si-border);
  border-radius: 999px;
  padding: 5px;
  isolation: isolate;
}
.ps-pill__thumb {
  position: absolute;
  top: 5px; bottom: 5px;
  left: 5px;
  width: calc(50% - 5px);
  background: var(--plum);
  border-radius: 999px;
  transition: transform 360ms var(--si-ease-out), background 320ms var(--si-ease-out);
  z-index: 0;
  box-shadow: 0 4px 14px -4px rgba(52, 28, 104, 0.45);
}
.ps-wrap[data-stage="existing"] .ps-pill__thumb {
  transform: translateX(100%);
}
.ps-pill__btn {
  position: relative;
  z-index: 1;
  border: 0;
  background: transparent;
  font: 500 14.5px/1 var(--si-font-sans);
  letter-spacing: -0.005em;
  color: var(--si-text-secondary);
  padding: 12px 22px;
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: color 240ms var(--si-ease-out);
}
.ps-pill__btn .si-icon { font-size: 18px; }
.ps-pill__btn.is-active { color: #fff; }

/* ---- Section eyebrow --------------------------------------------------- */
.ps-section-eye {
  display: block;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--si-text-secondary);
  margin-bottom: 16px;
}

/* ---- Recommended scale -------------------------------------------------- */
.ps-scale {
  position: relative;
  margin-bottom: 40px;
}
/* Material Symbols ligature fix — force icon names to render as glyphs */
.ps-wrap .si-icon {
  font-family: 'Material Symbols Outlined' !important;
  font-weight: 400 !important;
  font-style: normal !important;
  font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 24;
  font-feature-settings: 'liga';
  -webkit-font-feature-settings: 'liga';
  font-variant-ligatures: common-ligatures;
  text-rendering: optimizeLegibility;
  text-transform: none;
  letter-spacing: normal;
  white-space: nowrap;
}

/* ASIN sales input — only shown in 'existing' mode */
.ps-asin {
  display: none;
  margin-bottom: 22px;
  background: linear-gradient(180deg, var(--paper) 0%, var(--accent-soft) 220%);
  border: 1px solid var(--si-border);
  border-radius: 14px;
  padding: 20px 24px 22px;
  position: relative;
  overflow: hidden;
  transition: background 400ms var(--si-ease-out);
}
.ps-wrap[data-stage="existing"] .ps-asin {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "eye    field"
    "label  field"
    "presets presets"
    "hint    hint";
  gap: 4px 24px;
  align-items: end;
}
.ps-asin__eye {
  grid-area: eye;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  transition: color 400ms var(--si-ease-out);
}
.ps-asin__label {
  grid-area: label;
  font: 500 17px/1.25 var(--si-font-sans);
  letter-spacing: -0.012em;
  color: var(--plum);
  margin: 0;
}
.ps-asin__field {
  grid-area: field;
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  background: var(--paper);
  border: 1px solid var(--si-border);
  border-radius: 12px;
  padding: 10px 16px 8px;
  transition: border-color 200ms var(--si-ease-out), box-shadow 200ms var(--si-ease-out);
  min-width: 180px;
  justify-content: flex-end;
}
.ps-asin__field:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft);
}
.ps-asin__field input {
  border: 0;
  background: transparent;
  font: 500 32px/1 var(--si-font-sans);
  letter-spacing: -0.025em;
  color: var(--plum);
  padding: 0;
  width: 130px;
  text-align: right;
  outline: none;
  -moz-appearance: textfield;
}
.ps-asin__field input::-webkit-outer-spin-button,
.ps-asin__field input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ps-asin__suffix {
  font-size: 13px;
  font-weight: 500;
  color: var(--si-text-secondary);
  letter-spacing: -0.005em;
}
.ps-asin__presets {
  grid-area: presets;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 14px;
}
.ps-asin__presets button {
  font: 500 12.5px/1 var(--si-font-sans);
  letter-spacing: -0.005em;
  color: var(--si-text-secondary);
  background: var(--paper);
  border: 1px solid var(--si-border);
  border-radius: 999px;
  padding: 7px 12px;
  cursor: pointer;
  transition: all 180ms var(--si-ease-out);
}
.ps-asin__presets button:hover {
  border-color: var(--accent);
  color: var(--plum);
}
.ps-asin__presets button.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.ps-asin__hint {
  grid-area: hint;
  font-size: 12.5px;
  color: var(--si-text-secondary);
  margin: 14px 0 0;
  padding-top: 14px;
  border-top: 1px dashed var(--si-border);
  max-width: none;
}
.ps-asin__hint strong { color: var(--plum); font-weight: 600; }

@media (max-width: 560px) {
  .ps-wrap[data-stage="existing"] .ps-asin {
    grid-template-columns: 1fr;
    grid-template-areas: "eye" "label" "field" "presets" "hint";
  }
  .ps-asin__field { min-width: 0; justify-content: flex-start; }
  .ps-asin__field input { width: 100%; text-align: left; }
}

.ps-scale__grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
  background: var(--accent-soft);
  border-radius: 14px;
  padding: 28px 24px;
  transition: background 400ms var(--si-ease-out);
}
.ps-stat {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 8px;
  text-align: center;
  padding: 4px 8px;
}
.ps-stat__icon {
  width: 40px; height: 40px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255,255,255,0.6);
  color: var(--accent);
  transition: color 400ms var(--si-ease-out);
}
.ps-stat__icon .si-icon { font-size: 22px; }
.ps-stat__num {
  font: 500 56px/1 var(--si-font-sans);
  letter-spacing: -0.03em;
  color: var(--plum);
  display: inline-flex;
  align-items: baseline;
  gap: 14px;
  white-space: nowrap;
}
.ps-stat__sep {
  font-size: 18px;
  font-weight: 500;
  color: var(--si-text-secondary);
  letter-spacing: 0;
}
.ps-stat__label {
  font-size: 14.5px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--si-text-secondary);
}
.ps-stat__divider {
  width: 1px;
  background: rgba(20,26,33,0.08);
  margin: 8px 0;
}

/* swap fade for text swap */
[data-swap] { transition: opacity 220ms var(--si-ease-out); }
.ps-wrap.is-swapping [data-swap] { opacity: 0; }

/* ---- Education / timeline --------------------------------------------- */
.ps-edu__lede {
  font-size: 17px;
  line-height: 1.55;
  color: var(--plum);
  letter-spacing: -0.01em;
  max-width: 56ch;
  margin: 0 0 24px;
}

.ps-timeline {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  position: relative;
}
/* horizontal connector under the dots */
.ps-timeline::before {
  content: '';
  position: absolute;
  left: 8%; right: 8%;
  top: 11px;
  height: 2px;
  border-top: 2px dashed rgba(20,26,33,0.18);
  z-index: 0;
}
.ps-tl {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 0 12px;
  text-align: center;
  z-index: 1;
}
.ps-tl__dot {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--paper);
  border: 2px solid var(--accent);
  box-shadow: 0 0 0 4px var(--paper);
  position: relative;
  transition: border-color 400ms var(--si-ease-out), transform 320ms var(--si-ease-out);
}
.ps-tl__dot::after {
  content: '';
  position: absolute;
  inset: 4px;
  background: var(--accent);
  border-radius: 50%;
  transform: scale(0);
  transition: transform 320ms var(--si-ease-out), background 400ms var(--si-ease-out);
}
.ps-tl:hover .ps-tl__dot { transform: scale(1.08); }
.ps-tl:hover .ps-tl__dot::after { transform: scale(1); }

.ps-tl__when {
  font: 600 12.5px/1 var(--si-font-sans);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-top: 6px;
  transition: color 400ms var(--si-ease-out);
}
.ps-tl__what {
  font-size: 15px;
  color: var(--plum);
  letter-spacing: -0.01em;
}

/* ---- responsive ------------------------------------------------------- */
@media (max-width: 720px) {
  .ps-wrap { margin: 24px 16px; padding: 32px 24px; }
  .ps-title { font-size: 30px; }
  .ps-scale__grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .ps-stat__divider {
    width: 100%; height: 1px;
    margin: 0;
  }
  .ps-stat__num { font-size: 44px; }
  /* Timeline keeps the 3-column centered layout on mobile:
     circle on row 1, DAY label on row 2, description on row 3,
     with the dashed connector running across all three items.
     Shrink the subtext so longer phrases ("Material lift in") fit
     on one line at narrow mobile widths. */
  .ps-tl__what { font-size: 12px; }
}

@media (max-width: 420px) {
  .ps-stat__num { font-size: 34px; }
}