.ms-wrap {
  --ms-radius: .5rem;
  --ms-canvas: #0e0d0d;
  --ms-canvas-soft: #1a1818;
  --ms-ink: #030202;
  --ms-ink-foreground: #f4f1ed;
  --ms-rule: #2f2d2e;
  --ms-mustard: #f0bb3b;
  --ms-mustard-foreground: #0a0909;
  --ms-background: var(--ms-canvas);
  --ms-foreground: #f0eeeb;
  --ms-card: #151314;
  --ms-muted-foreground: #a29e98;
  --ms-accent: var(--ms-mustard);
  --ms-accent-foreground: var(--ms-mustard-foreground);
  --ms-border: var(--ms-rule);

  box-sizing: border-box;
  max-width: 1200px;
  margin: 0 auto;
  background: var(--ms-background);
  color: var(--ms-foreground);
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  padding: 32px 20px;
  border-radius: 16px;
}
.ms-wrap *{ box-sizing:border-box; }
.ms-font-display{ font-family:'Fraunces',ui-serif,Georgia,serif; letter-spacing:-.015em; }

/* Rail */
.ms-rail-line{ position:absolute; left:0; right:0; top:13px; height:1px; background:var(--ms-border); }
.ms-rail-grid{ position:relative; display:grid; grid-template-columns:repeat(5,1fr); gap:12px; }
.ms-rail-col{ display:flex; flex-direction:column; align-items:stretch; }
.ms-rail-dot-wrap{ display:flex; justify-content:center; }
.ms-rail-dot{
  width:26px; height:26px; border-radius:50%;
  border:2px solid var(--ms-border);
  background:var(--ms-background);
  transition:border-color .2s, background-color .2s;
}
/* Active dot: two selectable styles, set per-instance via the
   "Active step indicator style" dropdown (rail_dot_style). Outline is
   the default — colored ring, no solid fill. */
.ms-wrap.ms-dot-outline .ms-rail-dot.active{
  border-color:var(--ms-accent);
  background:transparent;
}
.ms-wrap.ms-dot-filled .ms-rail-dot.active{
  border-color:var(--ms-accent);
  background:var(--ms-accent);
}
/* Fallback if the wrapper class is ever missing */
.ms-rail-dot.active{ border-color:var(--ms-accent); }

/* Connector line running from the dot down to its tab — always shown,
   colored when that step is active. */
.ms-rail-connector{
  margin:4px auto 0; width:1px; height:18px;
  background:var(--ms-border);
  transition:background-color .2s;
}
.ms-rail-connector.active{ background:var(--ms-accent); }
.ms-rail{ position:relative; display:none; margin-bottom:4px; }
@media (min-width:768px){ .ms-rail{ display:block; } }

/* Tabs */
.ms-tabs{ display:grid; gap:12px; grid-template-columns:1fr; margin-top:16px; }
@media (min-width:768px){ .ms-tabs{ grid-template-columns:repeat(5,1fr); margin-top:0; } }
.ms-tab-col{ display:flex; flex-direction:column; }
.ms-tab-btn{ all:unset; cursor:pointer; display:block; width:100%; }
.ms-chevron{
  display:flex; align-items:center; gap:8px;
  padding:12px 20px;
  background:var(--ms-ink); color:var(--ms-ink-foreground);
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%, 14px 50%);
  transition:background-color .2s, color .2s;
}
.ms-tab-btn:hover .ms-chevron:not(.active){ background:#0a0909; }
.ms-chevron.active{ background:var(--ms-accent); color:var(--ms-accent-foreground); }
.ms-icon{ width:16px; height:16px; flex-shrink:0; object-fit:contain; }
/* Wrapper that holds a step's icon (preset SVG, uploaded image, or pasted
   SVG code) — width/height are set inline per-instance via JS to match
   the configured icon width, this just ensures whatever's inside fills it. */
.ms-icon > svg,
.ms-icon > img,
.ms-icon .ms-icon-svg-inner{ width:100%; height:100%; display:block; }
.ms-icon .ms-icon-svg-inner svg{ width:100%; height:100%; display:block; }
.ms-chevron .ms-label{ font-family:'Fraunces',serif; font-size:14px; font-weight:500; letter-spacing:.02em; }
.ms-chev{ margin-left:auto; width:16px; height:16px; flex-shrink:0; transition:transform .2s; }
.ms-chev.ms-rot{ transform:rotate(180deg); }

.ms-preview-card{
  margin-top:12px; border-radius:calc(var(--ms-radius) + 4px);
  border:1px solid var(--ms-border);
  background:var(--ms-card);
  padding:16px;
  transition:border-color .2s;
}
.ms-preview-card.active{ border-color:rgba(240,187,59,.5); }
.ms-tab-btn:hover .ms-preview-card:not(.active){ border-color:rgba(240,187,59,.3); }
.ms-preview-title{ font-size:14px; font-weight:500; line-height:1.375; color:var(--ms-foreground); margin:0; }
.ms-preview-outcome{ margin:8px 0 0; font-size:12px; line-height:1.625; color:var(--ms-muted-foreground); }
.ms-preview-outcome b{ font-weight:600; color:rgba(240,238,235,.7); }

/* Detail panel */
.ms-desktop-only{ display:none; }
@media (min-width:768px){ .ms-desktop-only{ display:block; } }
.ms-mobile-only{ display:block; }
@media (min-width:768px){ .ms-mobile-only{ display:none; } }

.ms-detail-outer{ overflow:hidden; transition:max-height .35s cubic-bezier(.22,1,.36,1), opacity .3s; max-height:0; opacity:0; }
.ms-mobile-detail-outer{ overflow:hidden; transition:max-height .3s cubic-bezier(.22,1,.36,1), opacity .3s; max-height:0; opacity:0; }
.ms-detail{
  margin-top:20px; border-radius:calc(var(--ms-radius) + 8px);
  border:1px solid var(--ms-border); background:var(--ms-background);
  padding:24px;
}
@media (min-width:768px){ .ms-detail{ padding:32px; } }
.ms-detail-head{ display:flex; align-items:center; gap:12px; }
.ms-detail-icon{
  display:flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:calc(var(--ms-radius) + 4px);
  background:rgba(240,187,59,.1); color:var(--ms-accent);
  box-shadow:0 0 0 1px rgba(240,187,59,.3) inset;
}
.ms-detail-phase{ margin:0; font-family:var(--ms-phase-font-family, 'Inter', ui-sans-serif, sans-serif); font-size:var(--ms-phase-font-size, 12px); line-height:var(--ms-phase-line-height, 1.5); text-transform:uppercase; letter-spacing:.18em; color:var(--ms-phase-color, var(--ms-muted-foreground)); }
.ms-detail-title{ margin:2px 0 0; font-family:var(--ms-title-font-family, Georgia, 'Times New Roman', serif); font-size:var(--ms-title-font-size, 24px); line-height:var(--ms-title-line-height, 1.25); color:var(--ms-title-color, var(--ms-foreground)); }

.ms-detail-body{ margin-top:20px; display:grid; gap:24px; grid-template-columns:1fr; align-items:start; }
@media (min-width:1024px){ .ms-detail-body{ grid-template-columns:1.6fr 1fr; } }
.ms-body-text{ display:flex; flex-direction:column; gap:16px; font-size:14px; line-height:1.625; color:var(--ms-muted-foreground); }
.ms-body-text p{ margin:0; }
.ms-body-list{ display:grid; gap:8px; grid-template-columns:1fr; margin:0; padding:0; list-style:none; }
@media (min-width:640px){ .ms-body-list{ grid-template-columns:1fr 1fr; } }
.ms-body-list li{ display:flex; align-items:flex-start; gap:8px; font-size:14px; color:rgba(240,238,235,.9); }
.ms-body-list li::before{ content:""; margin-top:7px; width:6px; height:6px; flex-shrink:0; border-radius:50%; background:var(--ms-accent); }

.ms-outcome-card{
  border-radius:calc(var(--ms-radius) + 4px);
  border:1px solid rgba(240,187,59,.4);
  background:var(--ms-canvas-soft);
  padding:20px;
}
.ms-outcome-eyebrow{
  margin:0; font-weight:600; text-transform:uppercase; letter-spacing:.14em;
  font-family:'Inter', sans-serif; font-size:12px; line-height:1.4;
  color:var(--ms-accent);
}
.ms-outcome-text{
  margin:12px 0 0; font-family:'Inter', sans-serif;
  font-size:14px; line-height:1.625;
  color:rgba(240,238,235,.9);
}