.page-examples main{
  overflow-x:clip;
}

.showcase-hero{
  padding-block:var(--hero-pad) var(--space-7);
  background:#F0EAF7;
  color:#30283A;
}

.showcase-hero-copy{
  display:flex;
  flex-direction:column;
  align-items:center;
  min-width:0;
  text-align:center;
}

.showcase-hero-copy .c-kicker{
  align-self:center;
  margin-inline:auto;
  margin-bottom:var(--space-2);
}

.showcase-hero-copy h1{
  max-width:16ch;
  color:#30283A;
  line-height:1.18;
}

.showcase-hero-copy>p{
  max-width:48rem;
  margin-top:var(--space-2);
  color:#5D5267;
  font-size:var(--text-md);
  overflow-wrap:break-word;
}

.showcase-hero-actions{
  justify-content:flex-start;
  margin-top:var(--space-3);
  margin-bottom:var(--space-4);
}

.data-band{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--space-2);
  margin-bottom:var(--space-5);
  padding:var(--space-2)
}

.showcase-hero .data-item+.data-item{border:0}

.data-item{
  min-width:0;
  padding:var(--space-3);
  border-radius:var(--radius-md);
  background:#FFFFFF;
  color:#172126;
  text-align:center;
}

.data-item b,
.data-item span{
  display:block;
  overflow-wrap:break-word;
}

.data-item b{
  color:#172126;
  font-size:var(--text-lg);
  font-variant-numeric:tabular-nums;
}

.data-item span{
  margin-top:var(--space-1);
  color:#59666D;
  font-size:var(--text-sm);
}

.hero-art.handoff-stage{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr);
  grid-template-areas:none;
  grid-template-rows:auto;
  width:min(calc(100% - var(--gutter)*2),42rem);
  height:auto;
  margin-inline:auto;
  padding:var(--space-4);
  overflow:hidden;
  border-radius:var(--radius-lg);
  background:#172126;
  color:#FFFFFF;
  box-shadow:var(--shadow-float);
}

.handoff-passport{
  min-width:0;
  overflow:hidden;
  border-radius:var(--radius-md);
  background:#FFFFFF;
  color:#172126;
}

.handoff-passport-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:var(--space-2);
  padding:var(--space-3);
  background:#E7EEF5;
  color:#1D303D;
}

.handoff-passport-head div{
  min-width:0;
}

.handoff-passport-head span,
.handoff-passport-head strong{
  display:block;
  overflow-wrap:break-word;
}

.handoff-passport-head span{
  font-size:var(--text-xs);
  font-weight:800;
  letter-spacing:.08em;
}

.handoff-passport-head strong{
  margin-top:var(--space-1);
  font-family:var(--font-heading);
  font-size:var(--text-lg);
}

.handoff-passport-id{
  flex:0 0 auto;
  padding:.45rem .7rem;
  border-radius:var(--radius-pill);
  background:#172126;
  color:#FFFFFF;
  letter-spacing:0;
}

.handoff-route{
  padding:var(--space-2) var(--space-3) var(--space-3);
}

.handoff-route-item{
  display:grid;
  grid-template-columns:2.25rem minmax(0,1fr) auto;
  gap:var(--space-2);
  align-items:center;
  min-width:0;
  padding-block:var(--space-2);
  border-bottom:1px solid color-mix(in srgb,#172126 12%,transparent);
}

.handoff-route-item:last-child{
  border-bottom:0;
}

.handoff-route-mark{
  display:grid;
  place-items:center;
  width:2.25rem;
  height:2.25rem;
  border-radius:50%;
  background:#F0EAF7;
  color:#30283A;
  font-family:var(--font-mono);
  font-size:var(--text-xs);
  font-weight:800;
}

.handoff-route-item.is-done .handoff-route-mark{
  background:#E7F3EC;
  color:#18372D;
}

.handoff-route-item.is-active .handoff-route-mark{
  background:#00617D;
  color:#FFFFFF;
}

.handoff-route-item div{
  min-width:0;
}

.handoff-route-item strong,
.handoff-route-item small{
  display:block;
  overflow-wrap:break-word;
}

.handoff-route-item strong{
  font-size:var(--text-base);
}

.handoff-route-item small{
  margin-top:.35rem;
  color:#59666D;
}

.handoff-state{
  display:inline-flex;
  align-items:center;
  width:fit-content;
  padding:.4em .9em;
  border-radius:var(--radius-pill);
  background:#F5F0D8;
  color:#363018;
  font-size:var(--text-xs);
  font-weight:800;
  line-height:1;
}

.handoff-route-item.is-done .handoff-state{
  background:#E7F3EC;
  color:#18372D;
}

.handoff-route-item.is-active .handoff-state{
  background:#E7EEF5;
  color:#1D303D;
}

.handoff-batch,
.handoff-health{
  width:min(78%,26rem);
  padding:var(--space-2) var(--space-3);
  border-radius:var(--radius-md);
}

.handoff-batch{
  margin-top:var(--space-3);
  margin-right:auto;
  background:#F8E8DE;
  color:#422A22;
}

.handoff-health{
  margin-top:var(--space-2);
  margin-left:auto;
  background:#006F63;
  color:#FFFFFF;
}

.handoff-batch span,
.handoff-batch strong,
.handoff-batch small,
.handoff-health span,
.handoff-health strong,
.handoff-health small{
  display:block;
  overflow-wrap:break-word;
}

.handoff-batch span,
.handoff-health span{
  font-size:var(--text-xs);
  font-weight:800;
  letter-spacing:.05em;
}

.handoff-batch strong,
.handoff-health strong{
  margin-top:var(--space-1);
  font-size:var(--text-base);
}

.handoff-batch small{
  margin-top:.35rem;
  color:#695249;
}

.handoff-health small{
  margin-top:.35rem;
  color:#D7ECE8;
}

.example-principles .c-card{
  gap:var(--space-2);
  padding-inline:var(--space-4);
}

.example-principles .c-card h3{
  font-size:var(--text-xl);
}

.example-principles .c-card .c-badge{
  align-self:flex-start;
  margin-top:auto;
}

.workflow-sheet{
  overflow:hidden;
  border-radius:var(--radius-lg);
  background:#FFFFFF;
  color:#172126;
  box-shadow:var(--shadow-soft);
}

.workflow-row{
  display:grid;
  grid-template-columns:2.5rem minmax(7.5rem,11rem) minmax(0,1fr);
  gap:var(--space-3);
  align-items:start;
  padding:var(--space-3);
  border-bottom:1px solid color-mix(in srgb,#172126 12%,transparent);
}

.workflow-row:last-child{
  border-bottom:0;
}

.workflow-index{
  display:grid;
  place-items:center;
  width:2.5rem;
  height:2.5rem;
  border-radius:50%;
  background:#00617D;
  color:#FFFFFF;
  font-size:var(--text-xs);
  font-weight:800;
}

.workflow-label,
.workflow-copy{
  min-width:0;
}

.workflow-label strong,
.workflow-label small,
.workflow-copy span{
  display:block;
  overflow-wrap:break-word;
}

.workflow-label strong{
  font-family:var(--font-heading);
  font-size:var(--text-md);
}

.workflow-label small{
  margin-top:.4rem;
  color:#59666D;
}

.workflow-copy p{
  color:#344147;
  overflow-wrap:break-word;
}

.workflow-copy span{
  margin-top:var(--space-1);
  color:#00536B;
  font-size:var(--text-sm);
  font-weight:750;
}

.section-actions{
  justify-content:flex-start;
  margin-top:var(--space-3);
}
.section-head ~ .section-actions{justify-content:center}

.branch-grid{
  grid-template-columns:repeat(3,minmax(0,1fr));
}

.branch-card{
  gap:var(--space-2);
  padding-inline:var(--space-4);
}

.branch-card-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:var(--space-1);
}

.branch-code{
  font-size:var(--text-sm);
  font-weight:800;
}

.branch-card h3{
  font-size:var(--text-xl);
}

.branch-card dl{
  display:grid;
  margin:auto 0 0;
}

.branch-card dl div{
  display:grid;
  grid-template-columns:minmax(5.5rem,.8fr) minmax(0,1fr);
  gap:var(--space-2);
  min-width:0;
  padding-block:var(--space-1);
  border-bottom:1px solid color-mix(in srgb,currentColor 12%,transparent);
}

.branch-card dl div:last-child{
  border-bottom:0;
}

.branch-card dt,
.branch-card dd{
  min-width:0;
  overflow-wrap:break-word;
}

.queue-policy{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:var(--space-4);
  align-items:center;
  margin-top:var(--space-4);
  padding:var(--space-4);
  border-radius:var(--radius-lg);
  background:#172126;
  color:#FFFFFF;
}

.queue-policy p{
  margin-top:var(--space-1);
  color:#B9C4C8;
}

.queue-flow{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:var(--space-1);
}

.queue-flow span{
  min-width:0;
  padding:.75rem .55rem;
  border-radius:var(--radius-sm);
  background:#26343A;
  color:#FFFFFF;
  font-size:var(--text-xs);
  text-align:center;
  overflow-wrap:break-word;
}

.flutter-layout{
  display:grid;
  grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);
  gap:var(--space-3);
  align-items:stretch;
}

.flutter-summary{
  min-width:0;
  padding:var(--space-4);
  border-radius:var(--radius-lg);
  background:#172126;
  color:#FFFFFF;
}

.flutter-summary h3{
  font-size:var(--text-xl);
}

.flutter-summary p{
  margin-top:var(--space-2);
  color:#B9C4C8;
}

.flutter-summary ul{
  display:grid;
  gap:var(--space-1);
  margin:var(--space-3) 0 0;
  padding-left:1.2rem;
  color:#D7DFE1;
}

.flutter-canvas{
  display:flex;
  flex-direction:column;
  min-width:0;
  overflow:hidden;
  border-radius:var(--radius-lg);
  background:#FFFFFF;
  color:#172126;
}

.flutter-stage{
  display:grid;
  grid-template-columns:2.5rem minmax(0,1fr) minmax(8rem,.55fr);
  gap:var(--space-2);
  align-items:start;
  flex:1;
  min-width:0;
  padding:var(--space-3);
  border-bottom:1px solid color-mix(in srgb,#172126 12%,transparent);
}

.flutter-stage:last-child{
  border-bottom:0;
}

.flutter-stage>span{
  display:grid;
  place-items:center;
  width:2.5rem;
  height:2.5rem;
  border-radius:50%;
  background:#E7EEF5;
  color:#1D303D;
  font-size:var(--text-xs);
  font-weight:800;
}

.flutter-stage div,
.flutter-stage small{
  min-width:0;
  overflow-wrap:break-word;
}

.flutter-stage strong{
  font-size:var(--text-md);
}

.flutter-stage p{
  margin-top:.35rem;
  color:#59666D;
  font-size:var(--text-sm);
}

.flutter-stage small{
  color:#00536B;
  font-weight:750;
}

.flutter-note{
  margin-top:var(--space-3);
}

.delivery-steps{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:var(--space-2);
  margin:0;
  padding:0;
  list-style:none;
}

.delivery-step{
  position:relative;
  min-width:0;
  padding:var(--space-4);
  border-radius:var(--radius-lg);
  background:#E7EEF5;
  color:#1D303D;
}

.delivery-number{
  position:relative;
  z-index:1;
  display:grid;
  place-items:center;
  width:2.75rem;
  height:2.75rem;
  margin-bottom:var(--space-2);
  border-radius:50%;
  background:#00617D;
  color:#FFFFFF;
  font-size:var(--text-xs);
  font-weight:800;
}

.delivery-step h3{
  font-size:var(--text-xl);
}

.delivery-step p{
  margin-top:var(--space-1);
  color:#526875;
}

.delivery-boundaries{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--space-2);
  margin-top:var(--space-4);
}

.delivery-boundaries div{
  min-width:0;
  padding:var(--space-3);
  border-radius:var(--radius-md);
  background:#F0EAF7;
  color:#30283A;
}

.delivery-boundaries div:nth-child(2){
  background:#F5F0D8;
  color:#363018;
}

.delivery-boundaries strong,
.delivery-boundaries span{
  display:block;
  overflow-wrap:break-word;
}

.delivery-boundaries span{
  margin-top:var(--space-1);
  font-size:var(--text-sm);
}

.ai-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--space-3);
  align-items:stretch;
}

.ai-card{
  display:flex;
  flex-direction:column;
  min-width:0;
  height:100%;
  padding:var(--space-4);
  border-radius:var(--radius-lg);
  background:#FFFFFF;
  color:#172126;
}

.ai-index{
  display:grid;
  place-items:center;
  width:2.75rem;
  height:2.75rem;
  margin-bottom:var(--space-2);
  border-radius:var(--radius-sm);
  background:#E7F3EC;
  color:#18372D;
  font-weight:800;
}

.ai-card h3{
  font-size:var(--text-xl);
}

.ai-card>p{
  margin-top:var(--space-1);
  color:#59666D;
}

.ai-card dl{
  display:grid;
  margin:auto 0 0;
  padding-top:var(--space-3);
}

.ai-card dl div{
  display:grid;
  grid-template-columns:5rem minmax(0,1fr);
  gap:var(--space-2);
  min-width:0;
  padding-block:var(--space-1);
  border-bottom:1px solid color-mix(in srgb,#172126 12%,transparent);
}

.ai-card dl div:last-child{
  border-bottom:0;
}

.ai-card dt,
.ai-card dd{
  min-width:0;
  overflow-wrap:break-word;
}

.ai-decision{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  gap:var(--space-3);
  align-items:center;
  margin-top:var(--space-4);
  padding:var(--space-4);
  border-radius:var(--radius-lg);
  background:#172126;
  color:#FFFFFF;
}

.ai-decision p{
  color:#B9C4C8;
}

.quote-section{
  background:#FAF9F6;
  color:#172126;
}

.quote-strip{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--space-3);
  align-items:stretch;
}

.quote-card{
  display:flex;
  flex-direction:column;
  min-width:0;
  height:100%;
  padding:var(--space-4);
  border-radius:var(--radius-lg);
  background:#F0EAF7;
  color:#30283A;
}

.quote-card:nth-child(2){
  background:#E7F3EC;
  color:#18372D;
}

.quote-card:nth-child(3){
  background:#F8E8DE;
  color:#422A22;
}

.quote-card p{
  color:inherit;
  font-size:var(--text-md);
}

.quote-card cite{
  margin-top:auto;
  padding-top:var(--space-3);
  font-style:normal;
  font-size:var(--text-sm);
  font-weight:800;
}

.workflow-table-scroll{
  border-radius:var(--radius-lg);
}

.workflow-table{
  min-width:64rem;
}

.workflow-table caption{
  padding:var(--space-2);
  background:#FFFFFF;
  color:#172126;
  font-family:var(--font-heading);
  font-size:var(--text-md);
  font-weight:700;
  text-align:left;
}

.workflow-table th,
.workflow-table td{
  text-align:left;
}

.workflow-table th:first-child,
.workflow-table td:first-child{
  width:16%;
  min-width:10rem;
}

.workflow-table th:nth-child(2),
.workflow-table td:nth-child(2){
  width:28%;
}

.workflow-table th:nth-child(3),
.workflow-table td:nth-child(3){
  width:22%;
}

.workflow-table th:nth-child(4),
.workflow-table td:nth-child(4){
  width:34%;
}

.copy-checklist{
  display:grid;
  gap:0;
  margin-top:var(--space-4);
  overflow:hidden;
  border-radius:var(--radius-lg);
  background:#FFFFFF;
  color:#172126;
}

.copy-check-row{
  display:grid;
  grid-template-columns:2.5rem minmax(7.5rem,11rem) minmax(0,1fr);
  gap:var(--space-3);
  align-items:start;
  padding:var(--space-3);
  border-bottom:1px solid color-mix(in srgb,#172126 12%,transparent);
}

.copy-check-row:last-child{
  border-bottom:0;
}

.copy-check-number{
  display:grid;
  place-items:center;
  width:2.5rem;
  height:2.5rem;
  border-radius:50%;
  background:#00617D;
  color:#FFFFFF;
  font-size:var(--text-xs);
  font-weight:800;
}

.copy-check-row strong,
.copy-check-row p{
  min-width:0;
  overflow-wrap:break-word;
}

.copy-check-row p{
  color:#59666D;
}

.showcase-closing{
  padding-inline:var(--space-4);
}

.showcase-closing>div:first-child{
  min-width:0;
}

.showcase-closing h2{
  color:#FFFFFF;
  font-size:clamp(1.8rem,3vw,2.5rem);
}

.showcase-closing .actions{
  flex:0 0 auto;
  flex-direction:column;
  align-items:stretch;
  justify-content:center;
  margin-top:0;
}

.showcase-closing .c-btn-ghost{
  color:#FFFFFF;
  border-color:color-mix(in srgb,#FFFFFF 45%,transparent);
}

@media(max-width:64rem){
  .branch-grid,
  .ai-grid,
  .quote-strip{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .delivery-steps{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .flutter-layout{
    grid-template-columns:minmax(0,1fr);
  }

  .ai-decision{
    grid-template-columns:minmax(0,1fr);
    align-items:start;
  }

  .ai-decision .c-btn{
    justify-self:start;
  }
}

@media(max-width:42rem){
  .showcase-hero{
    padding-block:var(--hero-pad) var(--space-6);
  }

  .showcase-hero-copy h1{
    max-width:none;
  }

  .data-band{
    grid-template-columns:minmax(0,1fr);
    margin-bottom:var(--space-4);
  }

  .hero-art.handoff-stage{
    grid-template-columns:minmax(0,1fr);
    width:min(calc(100% - var(--gutter)*2),100%);
    height:auto;
    margin-inline:auto;
    padding:var(--space-2);
    overflow:hidden;
    transform:none;
  }

  .handoff-passport-head{
    flex-direction:column;
  }

  .handoff-passport-id{
    align-self:flex-start;
  }

  .handoff-route-item{
    grid-template-columns:2.25rem minmax(0,1fr);
    align-items:start;
  }

  .handoff-route-item .handoff-state{
    grid-column:2;
  }

  .handoff-batch,
  .handoff-health{
    width:100%;
  }

  .workflow-row,
  .copy-check-row{
    grid-template-columns:2.25rem minmax(0,1fr);
    gap:var(--space-2);
  }

  .workflow-row>:nth-child(3),
  .copy-check-row>:nth-child(3){
    grid-column:2;
  }

  .branch-grid,
  .ai-grid,
  .quote-strip,
  .delivery-steps,
  .delivery-boundaries{
    grid-template-columns:minmax(0,1fr);
  }

  .queue-policy{
    grid-template-columns:minmax(0,1fr);
    padding:var(--space-3);
  }

  .queue-flow{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .flutter-stage{
    grid-template-columns:2.5rem minmax(0,1fr);
  }

  .flutter-stage>small{
    grid-column:2;
  }

  .ai-decision .c-btn{
    width:100%;
  }

  .showcase-closing{
    padding-inline:var(--space-3);
  }

  .showcase-closing .actions{
    width:100%;
    margin-top:var(--space-3);
  }
}