/* HerClarity depth pass 3 — sizing, spacing, photo restoration, Guide refinement. */

/* ---------- Member-wide spacing correction ---------- */
.screen.with-nav{
  padding-top:calc(env(safe-area-inset-top,0px) + 18px)!important;
}
.member-head{
  min-height:52px!important;
  margin-bottom:20px!important;
  padding:0 72px 13px 0!important;
}
.member-head:after{
  font-size:7px!important;
  letter-spacing:.17em!important;
}
.member-brand{
  font-size:37px!important;
}
.profile-dot{
  width:40px!important;
  height:40px!important;
}
.quick-exit{
  top:calc(env(safe-area-inset-top,0px) + 7px)!important;
  min-height:39px!important;
  padding:0 13px!important;
  font-size:10px!important;
}

/* ---------- Restore the signature photograph inside member home ---------- */
.home-editorial-head{
  display:grid;
  gap:15px;
  margin:0 0 4px;
}
.home-copy-block .body{
  margin:0;
  max-width:330px;
  font-size:14px!important;
  line-height:1.58!important;
}
.member-photo{
  position:relative;
  min-height:174px;
  overflow:hidden;
  border:1px solid rgba(103,34,60,.14);
  border-radius:27px 8px 27px 27px;
  box-shadow:0 15px 34px rgba(71,21,42,.11);
  background-image:
    linear-gradient(180deg,rgba(255,255,255,.02),rgba(44,22,30,.13)),
    url("https://etqiqmzrfzfkxmbfdizn.supabase.co/storage/v1/object/public/herclarity-public/herclarity_hero_original_photo.jpg");
  background-size:cover;
  background-position:center 39%;
}
.member-photo:before{
  content:"";
  position:absolute;
  inset:8px;
  border:1px solid rgba(255,250,246,.68);
  border-radius:20px 5px 20px 20px;
  pointer-events:none;
}
.member-photo:after{
  content:"HERCLARITY";
  position:absolute;
  left:15px;
  bottom:14px;
  padding:5px 9px 4px;
  border-radius:999px;
  background:rgba(252,248,243,.86);
  border:1px solid rgba(103,34,60,.10);
  color:#64233c;
  font-size:7px;
  font-weight:800;
  letter-spacing:.18em;
}
.welcome-name{
  font-size:clamp(43px,11.2vw,52px)!important;
  line-height:.90!important;
  max-width:300px!important;
  margin:0 0 10px!important;
}
.home-guide{
  margin:19px 0 14px!important;
  min-height:auto!important;
  padding:23px 20px 21px!important;
  border-radius:27px 8px 27px 27px!important;
}
.home-guide h2{
  font-size:35px!important;
  line-height:.93!important;
  max-width:260px!important;
  margin:16px 0 11px!important;
}
.home-guide p{
  max-width:285px!important;
  margin:0 0 17px!important;
  font-size:12.5px!important;
  line-height:1.52!important;
}
.home-guide button{
  min-height:42px!important;
  padding:0 15px!important;
  border-radius:14px!important;
}
.home-grid{gap:11px!important}
.home-card{
  min-height:148px!important;
  padding:17px!important;
}
.home-card h3{
  margin-top:20px!important;
  font-size:26px!important;
}
.home-card p{
  font-size:10.5px!important;
}
.support-strip{
  margin-top:12px!important;
  padding:14px!important;
}

/* ---------- Guide entry: one composed AI feature instead of stacked boxes ---------- */
.guide-shell{padding-bottom:4px}
.guide-topline{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin:0 0 11px;
}
.guide-badge{
  flex:0 0 auto;
  padding:6px 9px 5px;
  border:1px solid rgba(103,34,60,.11);
  border-radius:999px;
  background:linear-gradient(135deg,#f1dde2,#f7eee7);
  color:#7b3149;
  font-size:8px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.guide-hero-card{
  position:relative;
  overflow:hidden;
  padding:19px 17px 16px;
  border:1px solid rgba(103,34,60,.13);
  border-radius:27px 8px 27px 27px;
  background:
    radial-gradient(circle at 95% 4%,rgba(241,221,226,.48),transparent 31%),
    repeating-linear-gradient(0deg,rgba(71,21,42,.011) 0,rgba(71,21,42,.011) 1px,transparent 1px,transparent 5px),
    linear-gradient(145deg,rgba(255,253,249,.96),rgba(248,239,232,.88));
  box-shadow:0 12px 30px rgba(71,21,42,.065);
}
.guide-hero-card:before{
  content:"";
  position:absolute;
  right:-46px;
  top:-55px;
  width:142px;
  height:142px;
  border:1px solid rgba(216,190,160,.22);
  border-radius:50%;
  box-shadow:0 0 0 20px rgba(216,190,160,.035);
  pointer-events:none;
}
.guide-hero-copy{position:relative;z-index:1}
.guide-hero-card .page-title{
  margin:0 0 11px!important;
  max-width:275px!important;
  font-size:clamp(37px,9.8vw,45px)!important;
  line-height:.91!important;
  letter-spacing:-.04em!important;
}
.guide-hero-card .body{
  margin:0!important;
  max-width:100%!important;
  font-size:13.5px!important;
  line-height:1.55!important;
}
.guide-inline-note{
  position:relative;
  z-index:1;
  display:flex;
  align-items:flex-start;
  gap:11px;
  margin-top:15px;
  padding:13px 13px 13px 14px;
  border:1px solid rgba(103,34,60,.09);
  border-radius:17px 6px 17px 17px;
  background:linear-gradient(145deg,rgba(244,226,229,.62),rgba(250,243,237,.78));
}
.guide-inline-note svg{
  width:20px!important;
  height:20px!important;
  flex:0 0 20px!important;
  fill:none;
  stroke:#6d2941;
  stroke-width:1.7;
}
.guide-inline-note p{
  margin:0;
  color:#6b5c61;
  font-size:10.5px;
  line-height:1.5;
}
.guide-grid-head{
  margin:17px 0 10px;
}
.guide-grid-head h2{
  margin:0 0 5px;
  font:500 29px/.98 var(--serif);
  letter-spacing:-.025em;
  color:#4c2835;
}
.guide-grid-head p{margin:0;font-size:10.5px!important}
.guide-mode-grid{gap:10px!important}
.guide-mode-card{
  position:relative;
  min-height:91px!important;
  padding:16px 44px 15px 17px!important;
  border-radius:22px 7px 22px 22px!important;
  text-align:left!important;
  overflow:hidden;
}
.guide-mode-card:nth-child(odd){
  background:linear-gradient(145deg,rgba(255,253,249,.95),rgba(236,220,202,.33))!important;
}
.guide-mode-card:nth-child(even){
  background:linear-gradient(145deg,rgba(255,253,249,.95),rgba(241,221,226,.43))!important;
}
.guide-mode-card:after{display:none!important}
.guide-mode-number{
  display:block;
  margin-bottom:6px;
  color:#a07986;
  font-size:7px;
  font-weight:800;
  letter-spacing:.14em;
}
.guide-mode-card strong{
  display:block!important;
  margin:0 0 5px!important;
  font-size:24px!important;
  line-height:.98!important;
}
.guide-mode-copy{
  display:block!important;
  max-width:260px;
  color:#74656a!important;
  font-size:10.5px!important;
  line-height:1.42!important;
}
.guide-mode-arrow{
  position:absolute;
  right:15px;
  top:50%;
  transform:translateY(-50%);
  display:grid!important;
  place-items:center;
  width:26px;
  height:26px;
  border:1px solid rgba(103,34,60,.10);
  border-radius:50%;
  background:rgba(252,248,243,.64);
  color:#6b2941!important;
  font-size:15px!important;
  line-height:1!important;
}

/* Conversation stages: correct inherited oversizing without changing behavior. */
.chat .page-title,
.screen.with-nav > .page-title.mt-12{
  font-size:clamp(36px,9.5vw,44px)!important;
  line-height:.93!important;
}
.bubble{padding:15px!important}
.guide-question{font-size:21px!important;line-height:1.15!important}
.move{padding:16px!important}
.move b{font-size:21px!important}

/* ---------- Public photo: explicitly preserve it ---------- */
.hero-photo{
  background-image:url("https://etqiqmzrfzfkxmbfdizn.supabase.co/storage/v1/object/public/herclarity-public/herclarity_hero_original_photo.jpg")!important;
  background-size:cover!important;
  background-position:center 40%!important;
}

/* ---------- Phone-specific rhythm ---------- */
@media (max-width:390px){
  .screen.with-nav{
    padding-left:18px!important;
    padding-right:18px!important;
  }
  .member-brand{font-size:35px!important}
  .welcome-name{font-size:46px!important;max-width:275px!important}
  .member-photo{min-height:164px}
  .home-guide{padding:21px 18px 19px!important}
  .home-guide h2{font-size:33px!important;max-width:240px!important}
  .home-card{min-height:143px!important;padding:16px!important}
  .home-card h3{font-size:25px!important}
  .guide-hero-card{padding:17px 15px 15px}
  .guide-hero-card .page-title{font-size:40px!important;max-width:245px!important}
  .guide-hero-card .body{font-size:13px!important}
  .guide-inline-note{padding:12px}
  .guide-grid-head h2{font-size:27px}
  .guide-mode-card{min-height:88px!important;padding:15px 42px 14px 15px!important}
  .guide-mode-card strong{font-size:23px!important}
  .guide-mode-copy{font-size:10px!important}
}