:root{
  --ink:#1c1d21;
  --muted:#62656f;
  --brand:#c59463;
  --brand-strong:#a17549;
  --soft:#f3f4f6;
  --radius:18px;
}

/* Section */
.sample{
  padding: 72px 20px 80px;
  background: linear-gradient(180deg,#f7f7f9, #f0f0f3);
}
.sample-container{ max-width: 1100px; margin: 0 auto; }
.sample-title{
  font-weight: 800;
  font-size: clamp(1.8rem, 3.2vw, 2.6rem);
  letter-spacing:-.01em;
  color: #7e8494;
  margin: 0 0 18px;
}
.sample-accent{ color:#0f0f12; }

/* Device mock */
.device-wrap {
  transform: scale(0.8);   /* shrink to 50% */
  transform-origin: top center; /* anchor scaling point */
}
.device{
  position: relative;
  width: min(420px, 90vw);
  aspect-ratio: 9/19.5;
  border: 10px solid #0f0f12;
  border-bottom-width: 12px;
  border-top-width: 12px;
  border-radius: 40px;
  background: #000;
  box-shadow: 0 30px 60px rgba(0,0,0,.25);
  overflow: hidden;
}
.device-notch{
  position: absolute; top: 10px; left: 50%;
  transform: translateX(-50%);
  width: 40%; height: 22px;
  background: #0f0f12; border-radius: 12px;
  z-index: 3;
}
.screen{
  position: absolute; inset: 0;
  background: linear-gradient(180deg,#ffffff, #f9f6f3 55%, #111 90%, #000);
  padding: 58px 12px 18px;   /* leave space for notch & bottom fade */
  display: grid; gap: 10px;
}

/* Top band */
.bar{
  background: #f2e6d7;
  border-radius: 14px;
  padding: 10px 12px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6);
}
.pill{
  display:inline-block;
  background:#e6cfb2;
  color:#3d2c1b;
  font-weight:700;
  font-size:.9rem;
  padding:6px 12px;
  border-radius:999px;
}
.dots{
  display:flex; justify-content: space-between; align-items:end;
  margin-top: 8px; color:#8f806f; font-size:.8rem; text-align:center;
}
.dots span{
  width: 30px; height: 30px; border-radius: 10px;
  background:#f8efe4; display:grid; place-items:center; 
}
.dots .active{
  width: 40px; height: 56px; border-radius: 12px;
  background:#1d1d21; color:#fff; font-weight:800; line-height:1.1;
}

/* Chart */
.chart{
  background: #fff; border-radius: 16px; padding: 8px 8px 10px;
  box-shadow: 0 1px 0 rgba(0,0,0,.04), inset 0 0 0 1px #f0eee9;
}
.chart svg{ width: 100%; height: 120px; display:block; }
.estrogen{ fill: rgba(238, 189, 116, .5); }
.prog     { fill: rgba(196, 158, 116, .45); }
.lh       { fill: rgba(207, 164, 109, .5); }
.fsh      { fill: rgba(184, 169, 196, .45); }

.legend{
  display:flex; gap:14px; align-items:center; justify-content:center;
  color:#6a6a72; font-size:.8rem; margin-top:6px;
}
.dot{ --c:#ccc; width:10px; height:10px; border-radius:999px; display:inline-block; margin-right:6px; }
.est{ --c:#eab676; background: var(--c); }
.pro{ --c:#c49e74; background: var(--c); }
.lh { --c:#d5a865; background: var(--c); }
.fsh{ --c:#b2a1c7; background: var(--c); }

/* Chips */
.chips{
 gap:10px; flex-wrap:wrap; justify-content:center;
}
.chip{
  background:#fff; border:1px solid #eee5d9;
  padding: 8px 12px; border-radius: 999px; font-weight:700; color:#5a5145;
  box-shadow: 0 1px 0 rgba(0,0,0,.04);
}
.chip.active{ background:#ffe9c7; border-color:#f7d9a9; }

/* Recommendation card */
.rec-card{
  background: #fff; color: var(--ink);
  border-radius: 16px; padding: 12px 14px 14px;
  box-shadow: 0 1px 0 rgba(0,0,0,.05), inset 0 0 0 1px #efefef;
}
.rec-title{ font-weight:900; margin-bottom:6px; }
.rec-btn{
  margin-top: 10px; width:100%;
  border: none; border-radius: 12px; padding: 10px 14px;
  background: #ffd06e; color:#543600; font-weight:800; cursor:pointer;
  box-shadow: 0 6px 18px rgba(0,0,0,.15), inset 0 1px 0 rgba(255,255,255,.6);
  transition: background .2s ease, transform .08s ease;
}
.rec-btn:hover{ background:#ffd98c; }
.rec-btn:active{ transform: translateY(1px); }

.device-wrap {
  display: flex;
  justify-content: center;   /* center horizontally */
  align-items: center;       /* center vertically if parent has height */
  transform: scale(0.8);
  transform-origin: top center;
  margin: 0 auto;            /* helps with block-level centering */
}

.sample-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}