/*
  Progny marketing visual discipline layer.
  Loaded after page-local styles to normalize scale, rhythm, motion, borders,
  and mockup polish across the static public site.
*/
:root{
  --progny-bg:#050505;
  --progny-bg-soft:#080808;
  --progny-ink:rgba(255,255,255,.94);
  --progny-body:rgba(255,255,255,.7);
  --progny-muted:rgba(255,255,255,.54);
  --progny-faint:rgba(255,255,255,.36);
  --progny-border:rgba(255,255,255,.12);
  --progny-border-strong:rgba(255,255,255,.18);
  --progny-card:rgba(255,255,255,.045);
  --progny-paper:#f7f7f2;
  --progny-paper-ink:#0a0a0a;
  --progny-verified-bg:#ecfdf5;
  --progny-verified:#166534;
  --progny-ease:cubic-bezier(.16,1,.3,1);
  --progny-max:1220px;
  --bg:var(--progny-bg);
  --ink:var(--progny-ink);
  --dim:var(--progny-body);
  --soft:var(--progny-body);
  --muted:var(--progny-muted);
  --faint:var(--progny-faint);
  --hair:var(--progny-border);
  --hair-2:var(--progny-border-strong);
  --line:var(--progny-border);
  --line2:var(--progny-border-strong);
  --panel:var(--progny-card);
  --maxw:var(--progny-max);
  --ease:var(--progny-ease);
}

html{scroll-behavior:smooth}
body{
  background:var(--progny-bg);
  color:var(--progny-ink);
  line-height:1.65;
}
p{color:var(--progny-body)}

.wrap{
  max-width:var(--progny-max);
  padding-inline:clamp(22px,4vw,48px);
}

.grain{opacity:.018 !important}
.vignette{opacity:.72}
.bg-orbs{display:none !important}

.nav{
  min-height:60px;
  padding:10px clamp(22px,4vw,48px);
  background:rgba(5,5,5,.78);
  border-bottom:1px solid var(--progny-border);
}
.nav .mark{
  font-size:12px;
  letter-spacing:.22em;
  text-indent:.22em;
}
.nav .mark .dot{box-shadow:none}
.nav .links{gap:clamp(10px,1.3vw,18px)}
.nav .links a{
  font-size:11px;
  letter-spacing:.08em;
  color:var(--progny-muted);
  transition:color 140ms var(--progny-ease),opacity 140ms var(--progny-ease);
}
.nav .cta{
  border-radius:8px;
  padding:9px 14px;
  font-size:13px;
  letter-spacing:0;
  text-transform:none;
  font-family:var(--sans);
  font-variation-settings:"wght" 560,"wdth" 100;
  transition:color 140ms var(--progny-ease),background-color 140ms var(--progny-ease),border-color 140ms var(--progny-ease);
}
.nav .burger span{transition:transform 140ms var(--progny-ease),opacity 140ms var(--progny-ease)}

.section{
  padding:clamp(92px,10vw,156px) 0;
  border-top:0 !important;
  border-bottom:0 !important;
}
.section + .section{border-top:0 !important}
.hero{
  min-height:auto !important;
  padding:clamp(86px,9vw,138px) 0 clamp(76px,8vw,118px) !important;
  border-bottom:0 !important;
}
.hero-grid,.split,.split.rev,.agent-flow,.job-intro,.room-grid,.outcome-box{
  gap:clamp(44px,6vw,86px) !important;
}

.eyebrow{
  margin-bottom:18px;
  font-size:11px !important;
  line-height:1.5;
  letter-spacing:.11em !important;
  color:rgba(255,255,255,.45) !important;
}
.eyebrow .ln{background:var(--progny-border-strong)}

h1,
h1.page-title{
  max-width:760px !important;
  font-size:clamp(3rem,5vw,4.5rem) !important;
  line-height:1.01 !important;
  letter-spacing:-.035em !important;
  font-variation-settings:"wght" 690,"wdth" 106 !important;
  text-shadow:none !important;
}
.center h1,.center h1.page-title{margin-inline:auto}

h2,
h2.h{
  max-width:680px !important;
  font-size:clamp(2rem,3.4vw,3rem) !important;
  line-height:1.12 !important;
  letter-spacing:-.025em !important;
  font-variation-settings:"wght" 650,"wdth" 104 !important;
}
h3,
h3.sh,
.card h3,
.compare-card h3,
.room-title h3{
  font-size:clamp(1.35rem,2vw,1.85rem) !important;
  line-height:1.2 !important;
  letter-spacing:-.01em !important;
  font-variation-settings:"wght" 620,"wdth" 102 !important;
}
.lede,
.intro p,
.story p,
.copy p,
.card p,
.compare-card p,
.benefit-card p,
.step p,
.use-hero-copy,
.job-copy{
  max-width:640px;
  color:var(--progny-body) !important;
  font-size:clamp(1.03rem,1.25vw,1.16rem) !important;
  line-height:1.7 !important;
}
.kicker,
.ui-label,
.room-label,
.small,
.meta,
.chip,
.rows .r,
.meter,
.footer nav a{
  color:var(--progny-muted) !important;
}

.quote{
  max-width:900px;
  font-size:clamp(2.7rem,5.2vw,5.25rem) !important;
  line-height:1 !important;
  letter-spacing:-.035em !important;
  font-variation-settings:"wght" 650,"wdth" 105 !important;
}

.card,
.benefit-card,
.step-card,
.type-card,
.proof-item,
.compare-card,
.claim-card,
.audience-card,
.case-card{
  border:1px solid var(--progny-border) !important;
  border-radius:10px !important;
  background:var(--progny-card) !important;
  padding:clamp(22px,2.4vw,30px) !important;
  box-shadow:none !important;
  transition:transform 140ms var(--progny-ease),background-color 140ms var(--progny-ease),border-color 140ms var(--progny-ease) !important;
}
.card:hover,
.benefit-card:hover,
.step-card:hover,
.type-card:hover,
.proof-item:hover,
.compare-card:hover,
.claim-card:hover,
.audience-card:hover,
.case-card:hover{
  transform:translateY(-2px) !important;
  border-color:var(--progny-border-strong) !important;
  background:rgba(255,255,255,.06) !important;
}
.compare-card.new{
  background:rgba(255,255,255,.92) !important;
  color:#0a0a0a !important;
  border-color:rgba(255,255,255,.92) !important;
}
.compare-card.new p,
.compare-card.new li{color:rgba(0,0,0,.64) !important}

.rows,
.clusters,
.evidence,
.comparison,
.meter,
.step,
.footer,
.footer .base,
.signature,
.outcome-box{
  border-color:var(--progny-border) !important;
}
.rows,
.clusters,
.evidence{
  background:transparent !important;
  gap:16px !important;
  border:0 !important;
}
.clusters,
.evidence{grid-template-columns:repeat(2,minmax(0,1fr))}
.clusters > *,
.evidence > *{
  border:1px solid var(--progny-border) !important;
  border-radius:10px !important;
  background:var(--progny-card) !important;
}

.btn{
  min-height:42px !important;
  border-radius:8px !important;
  padding:0 18px !important;
  font-size:13px !important;
  letter-spacing:0 !important;
  text-transform:none !important;
  font-family:var(--sans) !important;
  font-variation-settings:"wght" 570,"wdth" 100 !important;
  transition:transform 140ms var(--progny-ease),background-color 140ms var(--progny-ease),color 140ms var(--progny-ease),border-color 140ms var(--progny-ease),opacity 140ms var(--progny-ease) !important;
}
.btn:hover{transform:translateY(-1px) !important;box-shadow:none !important}

.reveal{
  opacity:0;
  transform:translateY(16px);
  transition:opacity 280ms var(--progny-ease),transform 280ms var(--progny-ease) !important;
}
.reveal.in{opacity:1;transform:none}

.room-preview{
  max-width:540px;
  padding:8px !important;
  border:1px solid var(--progny-border) !important;
  border-radius:16px !important;
  background:rgba(255,255,255,.08) !important;
  box-shadow:none !important;
}
.room-preview::before{display:none}
.room-shell{
  border-radius:12px !important;
  border:1px solid rgba(0,0,0,.1) !important;
  background:var(--progny-paper) !important;
  color:var(--progny-paper-ink) !important;
  box-shadow:0 20px 50px rgba(0,0,0,.28) !important;
}
.room-topbar,
.room-head{border-color:rgba(0,0,0,.09) !important}
.room-content{padding:18px !important}
.proof-card,
.qa-card,
.confidence-card,
.evidence-card{
  border:1px solid rgba(0,0,0,.1) !important;
  border-radius:10px !important;
  background:rgba(255,255,255,.72) !important;
  box-shadow:none !important;
}
.qa-card{
  background:#0a0a0a !important;
  color:#fff !important;
}
.status-pill,
.chip.g,
.flow .node.accent{
  background:var(--progny-verified-bg) !important;
  color:var(--progny-verified) !important;
  border-color:rgba(22,101,52,.22) !important;
  box-shadow:none !important;
}
.status-pill i,
.confidence-bar i,
.meter .track i.g{background:var(--progny-verified) !important}
.flow .node.accent .v{color:var(--progny-verified) !important}

body.progny-about .hero-grid{
  grid-template-columns:minmax(0,1fr) minmax(320px,.86fr) !important;
}
body.progny-about .portrait{
  max-width:430px !important;
  border-radius:10px;
  border-color:var(--progny-border) !important;
}
body.progny-about .story{max-width:700px !important}
body.progny-about .section{padding-block:clamp(88px,9vw,142px)}

body.progny-shared-rooms .hero-grid{
  grid-template-columns:minmax(0,.96fr) minmax(380px,1.04fr) !important;
}
body.progny-shared-rooms .types-grid{
  display:none !important;
}

body.progny-use-cases .grid.g2,
body.progny-use-cases .grid.g3{
  align-items:stretch;
}
body.progny-use-cases .card{
  display:flex;
  flex-direction:column;
  min-height:260px;
}
body.progny-use-cases .card p{font-size:1rem !important}

body.progny-proof .flow .node{
  border-radius:10px;
  background:var(--progny-card);
}

#loader{
  transition:opacity 900ms var(--progny-ease),visibility 900ms var(--progny-ease) !important;
}
#loader.gone{transition-duration:900ms !important}
.intro-skip{
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;
  border-radius:8px !important;
  transition:color 140ms var(--progny-ease),background-color 140ms var(--progny-ease),border-color 140ms var(--progny-ease) !important;
}
#loader.see-through .intro-skip{opacity:1 !important}

@media(max-width:1024px){
  .section{padding-block:clamp(86px,11vw,124px)}
  .hero{padding-block:clamp(76px,10vw,112px) clamp(68px,9vw,104px) !important}
  h1,h1.page-title{font-size:clamp(2.85rem,5.6vw,3.75rem) !important}
  h2,h2.h{font-size:clamp(2rem,4vw,2.65rem) !important}
  .lede,.intro p,.story p,.copy p{font-size:clamp(1rem,1.6vw,1.1rem) !important}
}

@media(max-width:720px){
  .wrap{padding-inline:22px}
  .nav{min-height:58px}
  .nav .cta{display:none}
  .nav .burger{gap:6px}
  .section{padding-block:76px}
  .hero{padding:64px 0 76px !important}
  h1,h1.page-title{
    max-width:100% !important;
    font-size:clamp(2.5rem,11vw,3rem) !important;
    line-height:1.02 !important;
  }
  h2,h2.h{
    max-width:100% !important;
    font-size:clamp(1.9rem,8.4vw,2.25rem) !important;
    line-height:1.12 !important;
  }
  h3,h3.sh,.card h3,.compare-card h3,.room-title h3{
    font-size:clamp(1.28rem,5.7vw,1.65rem) !important;
  }
  .quote{font-size:clamp(2.5rem,11vw,3.25rem) !important}
  .lede,.intro p,.story p,.copy p,.card p,.job-copy{
    font-size:1rem !important;
    line-height:1.65 !important;
  }
  .hero-grid,
  .split,
  .split.rev,
  .agent-flow,
  .job-intro,
  .room-grid,
  .outcome-box,
  .clusters,
  .evidence{
    grid-template-columns:1fr !important;
    gap:32px !important;
  }
  .room-preview{max-width:100%}
  .btn{width:auto}
  .hero-actions .btn,.btns .btn{width:100%}
}

@media(max-width:768px){
  body.progny-home .hero{
    height:100svh !important;
    min-height:100svh !important;
    padding:0 !important;
    overflow:hidden;
  }
  body.progny-home .hero .inner{
    height:100svh;
    min-height:100svh;
    align-items:center !important;
    justify-content:center !important;
    text-align:center;
    padding:0 clamp(24px,7vw,42px) !important;
  }
  body.progny-home .hero .wrap{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding-inline:0;
    transform:translateY(-2svh);
  }
  body.progny-home h1.title{
    max-width:11ch !important;
    margin-inline:auto !important;
    font-size:clamp(3.55rem,13.8vw,5.1rem) !important;
    line-height:.98 !important;
    text-align:center;
  }
  body.progny-home .tagline{
    max-width:29ch;
    margin:18px auto 0;
    text-align:center;
  }
  body.progny-home .hint{
    bottom:calc(env(safe-area-inset-bottom,0px) + 106px);
  }
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,
  *::before,
  *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    scroll-behavior:auto !important;
    transition-duration:.01ms !important;
  }
  .reveal{opacity:1 !important;transform:none !important}
}
