/* Structural spacing: a 32px unit with 16px subdivisions.
   Columns remain fluid; typography keeps its existing 24px heading-to-copy gap. */
:root{
  --grid-unit:32px;
  --grid-subunit:16px;
  --layout-gap:var(--grid-unit);
  --layout-inset:64px;
  --layout-section:96px;
  --max:1120px;
  /* Six 32px units per increment keeps two- and three-column layouts aligned. */
  --layout-width:calc(round(down, min(var(--max), 100% - var(--layout-inset) * 2) + var(--grid-unit), 192px) - var(--grid-unit));
}
.wrap{width:var(--layout-width)}
.header-inner{height:96px;gap:var(--layout-gap)}
.site-nav{gap:var(--grid-unit)}
.section,.conversation{padding-block:var(--layout-section)}
.hero.home-hero{padding-top:0}
.hero-stage{align-items:start}
.hero-layout{padding-block:64px}
.hero-stage .hero-copy{width:min(640px,round(down,58%,var(--grid-unit)));max-width:640px}
.hero-stage .hero-lead{max-width:608px}
.hero-image-focus{left:calc((100% - var(--layout-width))/2 + var(--layout-width) - 352px);right:calc((100% - var(--layout-width))/2)}
.benefits-section .outcome-strip{gap:var(--layout-gap);padding-block:var(--grid-unit)}
.benefits-section .outcome-strip>a{gap:var(--grid-subunit)}
.section-heading{gap:64px;margin-bottom:64px;align-items:flex-start}
/* Hairlines are visual dividers; they must not shift the content origin by 1px. */
.soft-section{border-block:0;box-shadow:inset 0 1px #e6e6e6,inset 0 -1px #e6e6e6}
.split,.bridge .wrap,.conversation .wrap,.solution-story,.pricing-layout,.faq-layout{gap:64px}
.wearable-grid,.employee-support-grid,.three-columns,.feature-grid,.product-pair,.solutions-grid,
.solutions-grid.four,.footer-grid,.spec-grid,.template-grid,.data-stack,.format-strip{gap:var(--layout-gap)}
.aspect,.shift-row,.column-labels,.product-use{gap:var(--layout-gap)}
.aspect{grid-template-columns:128px minmax(0,1fr) 352px}
.aspect,.shift-row,.product-use{padding-block:var(--grid-unit)}
.employee-support-card,.small-benefit,.feature-grid article,.template-grid article{padding-top:var(--grid-unit)}
.employee-support-card>.image-plan{margin-top:var(--grid-subunit);padding-top:0}
.employee-support-card h3{min-height:96px}
.wearable-card figcaption{padding-top:var(--grid-unit)}
.product-card,.solution-card,.solutions-grid.four .solution-card,.story-step,.report-flow article,
.disclosure-content,.price-panel,.solution-story .quote-panel,.image-frame{padding:var(--grid-unit)}
.employee-example,.aspect-example,.aspect-example.technical{padding:var(--grid-subunit)}
.image-plan-how{margin-bottom:64px}
.visual-section{padding-block:64px}
.visual-section+.visual-section{padding-top:0}
.solutions-grid.four .solution-invitation{gap:64px;padding:64px;margin-top:var(--grid-unit)}
.conversation-aside,.solution-invitation .conversation-aside{padding-left:var(--grid-unit)}
.full-footer{padding:64px 0 var(--grid-unit)}
.footer-bottom{margin-top:64px;padding-top:var(--grid-unit)}
.product-overview{padding-bottom:64px}
.product-overview .product-pair{margin-top:64px}
.bridge,.support-strip{padding-block:64px}
/* Round the intrinsic box, so changing copy or opening details still grows it.
   Typography itself is never stretched or clipped to force a baseline. */
@supports(height:calc-size(auto,round(up,size,32px))){
  .hero,.hero-stage,.benefits-section,.section,.visual-section,
  .conversation,.full-footer,.section-heading,.outcome-strip,.image-frame,
  .employee-support-card,.product-card,.solution-card,
  .product-toc,.support-strip,.other-solutions,.bridge,.wearable-card,.image-plan-how,.aspect{
    height:calc-size(auto,round(up,size,var(--grid-unit)));
  }
  .employee-support-grid{row-gap:0}
  .employee-support-card{display:grid;grid-template-rows:subgrid;grid-row:span 3;row-gap:0;height:auto;border-top:0;box-shadow:inset 0 1px #bbb}
  .employee-support-card h3{min-height:0;height:calc-size(auto,round(up,size + var(--space-heading-copy),var(--grid-unit)) - var(--space-heading-copy))}
  .employee-support-card>p{height:calc-size(auto,round(up,size,var(--grid-unit)));margin-block:0}
  .employee-support-card>.image-plan,.employee-support-card>.employee-example{height:calc-size(auto,round(up,size,var(--grid-unit)));margin-top:var(--grid-unit)}
  .section-heading .eyebrow{height:calc-size(auto,round(up,size + 16px,var(--grid-unit)) - 16px);margin-bottom:16px}
  .hero-category{height:calc-size(auto,round(up,size,var(--grid-unit)));margin-bottom:var(--grid-unit)}
  .hero-stage h1{height:calc-size(auto,round(up,size + var(--space-heading-copy),var(--grid-unit)) - var(--space-heading-copy))}
  .hero-stage .hero-lead{height:calc-size(auto,round(up,size,var(--grid-unit)));margin-bottom:var(--grid-unit)}
}
/* Keep the top-level content origin on the grid on every page. */
.hero:not(.home-hero){padding-top:64px}
.hero:not(.home-hero)>.wrap{padding-bottom:var(--grid-unit)}
.hero:not(.home-hero) .outcome-strip{margin-top:var(--grid-unit);padding-block:var(--grid-unit)}
@media(max-width:1247px){.solutions-grid.four{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:1100px){
  :root{--layout-inset:32px}
  .site-nav{gap:var(--grid-subunit)}
  .header-inner{gap:var(--grid-subunit)}
  .aspect{grid-template-columns:96px minmax(0,1fr) 288px}
  .split,.bridge .wrap,.conversation .wrap,.solution-story,.pricing-layout,.faq-layout{gap:var(--grid-unit)}
}
@media(max-width:960px){
  .hero-stage{padding-bottom:256px}
  .hero-layout{padding-block:64px}
  .hero-stage .hero-copy{width:100%;max-width:640px}
  .hero-backdrop{background:linear-gradient(180deg,var(--palette-gray) 0%,var(--palette-gray) 65%,#eef1f5 100%)}
  .hero-image-focus{top:auto;bottom:0;height:256px;left:calc((100% - var(--layout-width))/2);right:calc((100% - var(--layout-width))/2);justify-content:center;transform:none}
}
@media(max-width:900px){
  .employee-support-card h3{min-height:0}
  .employee-support-card{margin-bottom:var(--grid-unit)}
  .employee-support-card:last-child{margin-bottom:0}
}
@media(max-width:800px){
  :root{--layout-inset:16px;--layout-section:64px;--layout-width:round(down,100% - var(--layout-inset) * 2,var(--grid-unit))}
  .header-inner{height:auto;min-height:96px;padding-block:var(--grid-subunit)}
  .site-nav{gap:var(--grid-subunit);flex-wrap:wrap}
  .section-heading{gap:var(--grid-unit);margin-bottom:var(--grid-unit)}
  .benefits-section .outcome-strip{gap:var(--grid-subunit)}
  .visual-section,.bridge,.support-strip{padding-block:var(--grid-unit)}
  .visual-section+.visual-section{padding-top:0}
  .solutions-grid.four .solution-invitation{gap:var(--grid-unit);padding:var(--grid-unit)}
  .conversation-aside,.solution-invitation .conversation-aside{padding:var(--grid-unit) 0 0}
  .product-card,.solution-card,.solutions-grid.four .solution-card,.disclosure-content,
  .price-panel,.image-frame{padding:var(--grid-subunit)}
  .footer-grid{column-gap:var(--grid-subunit)}
  .aspect{grid-template-columns:96px minmax(0,1fr)}
  @supports(height:calc-size(auto,round(up,size,32px))){
    .header-inner{height:calc-size(auto,round(up,size,var(--grid-unit)))}
  }
}
@media(max-width:480px){.solutions-grid.four,.aspect{grid-template-columns:1fr}}