/* ArchVision-aligned typography scale for the AI Reply Lab case study. */
:root{
  --type-accent:#63e5c5;
  --type-muted:#9aa9a4;
  --type-body:18px;
  --type-card-title:25px;
  --section-space:140px;
}

body{
  color:#e8efed;
  font-size:var(--type-body);
  line-height:1.8;
}

/* Shared micro-label system: navigation keeps its compact utility scale. */
.eyebrow,
.label,
.hero-meta,
.header-status,
.device-copy .label{
  color:var(--type-accent);
  font-size:11px;
  font-weight:700;
  line-height:1.3;
  letter-spacing:.13em;
}

.site-header{
  height:72px;
}

.wordmark{
  font-size:17px;
  font-weight:800;
}

.site-header nav{
  gap:24px;
  font-size:12px;
  line-height:1;
}

.hero{
  min-height:780px;
  padding-top:76px;
  padding-bottom:56px;
}

.hero-grid{
  margin-top:98px;
  margin-bottom:78px;
}

.hero h1{
  margin:18px 0 28px;
  font-size:clamp(80px,7vw,96px);
  font-weight:800;
  line-height:1.05;
}

.hero-copy{
  max-width:610px;
  color:var(--type-muted);
  font-size:18px;
  line-height:1.8;
}

.hero-note{
  max-width:650px;
  margin-top:40px;
  padding:20px 0;
  font-size:16px;
  line-height:1.75;
}

.hero-note b,
.hero-scope>b{
  font-weight:700;
}

.hero-scope{
  gap:24px;
  padding:28px;
}

.hero-scope>b{
  font-size:22px;
  line-height:1.45;
}

.hero-scope dl div{
  grid-template-columns:68px 1fr;
  padding-top:14px;
}

.hero-scope dt{font-size:11px}
.hero-scope dd{font-size:14px;line-height:1.7}
.hero-rail{font-size:12px;line-height:1.4;letter-spacing:.09em}

.case-section{
  padding-top:var(--section-space);
  padding-bottom:var(--section-space);
}

.case-section .section-heading{
  min-height:204px;
  max-width:800px;
}

.section-heading h2{
  margin-top:16px;
  font-size:clamp(48px,4.4vw,56px);
  font-weight:700;
  line-height:1.15;
}

.section-heading>p:last-child{
  max-width:720px;
  margin-top:22px;
  color:var(--type-muted);
  font-size:18px;
  line-height:1.8;
}

/* Content cards retain a dense product-case-study rhythm with stronger titles. */
.positioning-card,
.pain-grid article,
.target-row>div,
.requirement-positioning>div:first-child,
.requirement-compare article,
.requirement-users article,
.requirement-goal,
.requirement-scope,
.ui-module,
.version-card,
.feedback-card,
.validation-panel,
.role-grid article{
  padding:24px;
}

.positioning-card h3,
.pain-grid h3,
.requirement-positioning h3,
.requirement-compare h3,
.requirement-users h3,
.version-card h3,
.feedback-card h3,
.validation-panel h3,
.device-copy h3{
  font-size:var(--type-card-title);
  font-weight:700;
  line-height:1.35;
}

.positioning-card>p:not(.label),
.pain-grid p,
.target-row span,
.requirement-positioning>div:first-child>p:not(.label),
.requirement-compare li,
.requirement-users li,
.iteration-list li,
.feedback-card li p,
.device-copy dd,
.role-summary{
  font-size:16px;
  line-height:1.75;
}

.target-row b,
.requirement-goal h3,
.role-grid b{
  font-size:22px;
  font-weight:700;
  line-height:1.45;
}

.requirement-values b,
.agent-core article b,
.step-flow li b,
.ui-module header b{
  font-size:20px;
  font-weight:700;
  line-height:1.45;
}

.agent-core article small,
.step-flow li small,
.ui-module p,
.human-note,
.feedback-loop,
.validation-note{
  font-size:15px;
  line-height:1.75;
}

.ui-module{
  min-height:430px;
}

.ui-module header b{
  font-size:24px;
}

.human-note,
.validation-note,
.role-summary{
  padding:22px;
}

.role-grid article{
  min-height:158px;
}

footer{
  padding-top:34px;
  padding-bottom:34px;
  font-size:12px;
  line-height:1.5;
}

@media (max-width:900px){
  :root{--section-space:108px;--type-card-title:23px}
  .hero{min-height:auto;padding-top:60px}
  .hero-grid{margin-top:70px;margin-bottom:60px}
  .hero h1{font-size:clamp(58px,10vw,80px)}
  .case-section .section-heading{min-height:auto}
  .section-heading h2{font-size:clamp(42px,6vw,52px)}
}

@media (max-width:620px){
  :root{--section-space:76px;--type-card-title:22px}
  body{font-size:16px}
  .site-header{height:60px}
  .hero{padding-top:48px;padding-bottom:42px}
  .hero h1{font-size:48px;line-height:1.08}
  .hero-copy,.section-heading>p:last-child{font-size:16px;line-height:1.75}
  .hero-scope{padding:22px}
  .hero-scope>b{font-size:19px}
  .case-section{padding-top:var(--section-space);padding-bottom:var(--section-space)}
  .section-heading h2{font-size:36px;line-height:1.2}
  .positioning-card,.pain-grid article,.target-row>div,.requirement-positioning>div:first-child,.requirement-compare article,.requirement-users article,.requirement-goal,.requirement-scope,.ui-module,.version-card,.feedback-card,.validation-panel,.role-grid article{padding:20px}
  .positioning-card h3,.pain-grid h3,.requirement-positioning h3,.requirement-compare h3,.requirement-users h3,.version-card h3,.feedback-card h3,.validation-panel h3,.device-copy h3{font-size:var(--type-card-title)}
  .ui-module header b{font-size:22px}
  .positioning-card>p:not(.label),.pain-grid p,.target-row span,.requirement-positioning>div:first-child>p:not(.label),.requirement-compare li,.requirement-users li,.iteration-list li,.feedback-card li p,.device-copy dd,.role-summary,.agent-core article small,.step-flow li small,.ui-module p,.human-note,.feedback-loop,.validation-note{font-size:15px}
}