/* HerClarity Guide launch polish — conversation, results, and saved-plan experience. */

/* Three-step Guide rhythm */
.guide-stagebar{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:7px;
  margin:3px 0 20px;
}
.guide-stage{
  min-width:0;
  padding:9px 7px 8px;
  border:1px solid rgba(103,34,60,.10);
  border-radius:15px 5px 15px 15px;
  background:rgba(255,253,249,.48);
  color:#9b7c86;
  text-align:center;
  font-size:7.5px;
  font-weight:800;
  letter-spacing:.09em;
  text-transform:uppercase;
}
.guide-stage:before{
  content:"";
  display:block;
  width:24px;
  height:3px;
  margin:0 auto 6px;
  border-radius:999px;
  background:#e6d8d4;
}
.guide-stage.complete,
.guide-stage.active{color:#6b2941}
.guide-stage.complete:before{background:#d8bea0}
.guide-stage.active{
  border-color:rgba(103,34,60,.16);
  background:linear-gradient(145deg,#f1dde2,#f7eee7);
  box-shadow:0 7px 17px rgba(71,21,42,.055);
}
.guide-stage.active:before{background:#6b2941}

.guide-conversation-head{margin:0 0 14px}
.guide-conversation-head .eyebrow{margin-bottom:12px}
.guide-conversation-head .page-title{
  margin:0 0 9px!important;
  max-width:310px;
  font-size:clamp(38px,10vw,46px)!important;
  line-height:.91!important;
}
.guide-conversation-head .small{
  max-width:315px;
  margin:0;
  font-size:11px!important;
}

/* Guide speaks first */
.guide-prompt-card,
.guide-response-card{
  position:relative;
  overflow:hidden;
  margin:0 0 17px;
  padding:19px 18px 18px;
  border:1px solid rgba(103,34,60,.12);
  border-radius:25px 8px 25px 25px;
  background:
    radial-gradient(circle at 94% 6%,rgba(241,221,226,.42),transparent 30%),
    linear-gradient(145deg,#f2e0e4,#fbf5ef);
  box-shadow:0 10px 26px rgba(71,21,42,.06);
}
.guide-prompt-card:before,
.guide-response-card:before{
  content:"";
  position:absolute;
  left:0;
  top:15px;
  bottom:15px;
  width:3px;
  border-radius:999px;
  background:linear-gradient(#d8bea0,#6b2941,#d8bea0);
}
.guide-card-label{
  display:flex;
  align-items:center;
  gap:8px;
  margin:0 0 12px;
  color:#752d46;
  font-size:8px;
  font-weight:850;
  letter-spacing:.18em;
  text-transform:uppercase;
}
.guide-card-label:before{
  content:"";
  width:22px;
  height:6px;
  border-radius:999px;
  background:linear-gradient(90deg,#5d1d35 0 35%,#d8bea0 35% 58%,#d9a9b3 58% 78%,#6b2941 78%);
}
.guide-prompt-card p,
.guide-response-card p{
  margin:0;
  color:#4b3a40;
  font-size:15px;
  line-height:1.58;
}
.guide-response-card p + p{margin-top:10px}

/* Member input should feel like stationery, not a giant empty form */
.guide-input-card{
  margin:0;
  padding:0;
}
.guide-input-card .form-group{margin-bottom:11px}
.guide-input-card .form-group label{
  margin-bottom:8px;
  color:#513c44;
  font-size:12px!important;
  font-weight:780;
}
.guide-input-card textarea{
  min-height:148px!important;
  max-height:280px;
  padding:16px!important;
  border-radius:20px 7px 20px 20px!important;
  background:rgba(255,253,249,.89)!important;
  font-size:15px!important;
  line-height:1.55!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 7px 18px rgba(71,21,42,.035)!important;
}
.guide-input-card textarea:focus{box-shadow:0 0 0 3px rgba(103,34,60,.08),inset 0 1px 0 rgba(255,255,255,.8)!important}
.guide-input-meta{
  display:flex;
  align-items:flex-start;
  gap:8px;
  margin:8px 2px 14px;
  color:#8a747c;
  font-size:9.5px;
  line-height:1.45;
}
.guide-input-meta svg{
  width:14px;
  height:14px;
  flex:0 0 14px;
  fill:none;
  stroke:#7a3048;
  stroke-width:1.7;
}
.guide-action-stack{padding-bottom:16px}
.guide-action-stack .btn-primary{margin-top:0}
.guide-action-stack .btn-link{
  margin-top:7px;
  min-height:42px;
}

/* Follow-up screen */
.guide-you-summary{
  margin:0 0 13px;
  padding:14px 15px;
  border:1px solid rgba(103,34,60,.10);
  border-radius:20px 7px 20px 20px;
  background:rgba(255,253,249,.62);
}
.guide-you-summary .guide-card-label{margin-bottom:7px;color:#94727d}
.guide-you-summary .guide-card-label:before{background:#d8bea0}
.guide-you-summary p{
  margin:0;
  color:#6e5c63;
  font-size:11px;
  line-height:1.5;
}
.guide-follow-question{
  position:relative;
  margin:16px 0 0;
  padding:17px 17px 17px 19px;
  border:1px solid rgba(103,34,60,.11);
  border-radius:21px 7px 21px 21px;
  background:rgba(255,253,249,.64);
}
.guide-follow-question span{
  display:block;
  margin-bottom:7px;
  color:#9a7380;
  font-size:7.5px;
  font-weight:850;
  letter-spacing:.17em;
  text-transform:uppercase;
}
.guide-follow-question p{
  margin:0;
  font:500 24px/1.12 var(--serif);
  color:#4d2835;
  letter-spacing:-.015em;
}

/* Final next-moves experience */
.guide-result-intro{margin-bottom:13px}
.guide-result-title{
  margin:0 0 9px!important;
  max-width:310px;
  font-size:clamp(39px,10.5vw,48px)!important;
  line-height:.90!important;
}
.guide-moves-title{
  margin:20px 0 11px;
  font:500 31px/.96 var(--serif);
  letter-spacing:-.025em;
  color:#4d2835;
}
.guide-moves{
  display:grid;
  gap:10px;
}
.guide-move{
  position:relative;
  display:grid;
  grid-template-columns:39px 1fr;
  gap:12px;
  align-items:start;
  padding:16px 15px;
  border:1px solid rgba(103,34,60,.11);
  border-radius:22px 7px 22px 22px;
  background:linear-gradient(145deg,rgba(255,253,249,.94),rgba(246,236,228,.78));
  box-shadow:0 7px 19px rgba(71,21,42,.045);
}
.guide-move:nth-child(2){background:linear-gradient(145deg,rgba(255,253,249,.94),rgba(242,224,229,.58))}
.guide-move-number{
  display:grid;
  place-items:center;
  width:38px;
  height:38px;
  border:1px solid rgba(103,34,60,.12);
  border-radius:50%;
  background:linear-gradient(145deg,#f1dde2,#eee1d1);
  color:#68263e;
  font:600 16px/1 var(--serif);
}
.guide-move p{
  margin:1px 0 0;
  color:#4f4045;
  font-size:12px;
  line-height:1.55;
}
.guide-choice-note{
  margin:14px 0;
  padding:13px 14px;
  border-left:3px solid #d8bea0;
  border-radius:4px 16px 16px 4px;
  background:rgba(248,239,233,.64);
  color:#79666d;
  font-size:10px;
  line-height:1.5;
}

.guide-save-area{margin-top:15px;padding-bottom:13px}
.guide-save-area .btn + .btn{margin-top:8px}
.guide-saved-card{
  display:grid;
  grid-template-columns:38px 1fr;
  gap:12px;
  align-items:start;
  padding:16px;
  border:1px solid rgba(70,112,82,.15);
  border-radius:22px 7px 22px 22px;
  background:linear-gradient(145deg,#edf4ef,#fbf7f2);
  box-shadow:0 8px 21px rgba(71,21,42,.045);
}
.guide-saved-icon{
  display:grid;
  place-items:center;
  width:38px;
  height:38px;
  border-radius:50%;
  background:#e1eee5;
  color:#31624b;
}
.guide-saved-icon svg{
  width:20px;
  height:20px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
}
.guide-saved-card strong{display:block;color:#355b47;font-size:12px;margin:2px 0 4px}
.guide-saved-card p{margin:0;color:#66756c;font-size:10px;line-height:1.5}
.guide-after-save-actions{display:grid;gap:8px;margin-top:10px}

/* Saved Clarity Plans should match Guide results */
.plan-entry{
  margin-top:12px;
  padding:17px!important;
  border:1px solid rgba(103,34,60,.11);
  border-radius:23px 7px 23px 23px;
  background:linear-gradient(145deg,rgba(255,253,249,.92),rgba(246,236,228,.70));
  box-shadow:0 8px 20px rgba(71,21,42,.04);
}
.plan-entry h4{
  margin:0 0 8px;
  font:500 25px/1 var(--serif);
  color:#4d2835;
}
.plan-entry>p{font-size:11px;line-height:1.52;color:#716067}
.plan-entry .moves{gap:8px!important}
.plan-entry .move{padding:13px!important}
.plan-entry .move b{font-size:18px!important}
.plan-entry .move p{font-size:10.5px!important;line-height:1.5!important}

/* Error blocks should not dominate the experience. */
.guide-input-card .alert,
.guide-save-area .alert{
  margin:10px 0!important;
  padding:12px 13px!important;
  border-radius:16px 6px 16px 16px!important;
  font-size:10.5px!important;
}

@media (max-width:390px){
  .guide-stagebar{gap:5px;margin-bottom:17px}
  .guide-stage{padding:8px 4px 7px;font-size:7px;letter-spacing:.065em}
  .guide-conversation-head .page-title{font-size:40px!important;max-width:285px}
  .guide-prompt-card,.guide-response-card{padding:17px 16px 16px}
  .guide-prompt-card p,.guide-response-card p{font-size:14px}
  .guide-input-card textarea{min-height:135px!important;font-size:14px!important}
  .guide-follow-question p{font-size:22px}
  .guide-result-title{font-size:42px!important}
  .guide-moves-title{font-size:28px}
  .guide-move{grid-template-columns:35px 1fr;padding:14px 13px;gap:10px}
  .guide-move-number{width:34px;height:34px;font-size:15px}
  .guide-move p{font-size:11.5px}
}