/* Page-level grid and text roles. The product preview keeps its own inset frame. */
:root{
  --page-max:1760px;
  --page-gutter:48px;
  --page-inset:max(var(--page-gutter),calc((100% - var(--page-max))/2 + var(--page-gutter)));
  --section-space:112px;
  --heading-space:48px;
  --copy-space:24px;
  --grid-space:24px;
  --section-type:3.5rem;
  --section-line:3.75rem;
  --lead-type:1.125rem;
  --lead-line:1.75rem;
}
.header{
  padding-inline:var(--page-inset);
  background:#fff;
  box-shadow:inset 0 -1px 0 rgb(25 25 25 / 5%);
}
@supports ((backdrop-filter:blur(16px)) or (-webkit-backdrop-filter:blur(16px))){
  .header{
    background:rgb(255 255 255 / 82%);
    -webkit-backdrop-filter:blur(16px) saturate(115%);
    backdrop-filter:blur(16px) saturate(115%);
  }
}
.section-width,.product-story{max-width:var(--page-max);padding-inline:var(--page-gutter)}
.hero-copy{max-width:var(--page-max);margin-inline:auto;padding-inline:var(--page-gutter)}
.hero h1{max-width:1280px;margin-inline:auto;text-wrap:balance}
.hero-description{padding-inline:0;font-size:var(--lead-type);line-height:var(--lead-line);margin-top:24px;text-wrap:pretty}
.hero-benefit{font-size:.875rem;line-height:1.25rem;max-width:680px;margin:16px auto 0;padding-inline:0;gap:8px}
.hero-benefit .icon{width:16px;height:16px}
.story-heading h2,.journey-copy h2,.control-copy h2,.cases-heading h2{
  font-family:Arial,'Helvetica Neue',sans-serif;
  font-size:var(--section-type);line-height:var(--section-line);font-weight:700;
  letter-spacing:-.04em;text-wrap:balance;margin:0;
}
.story-heading p,.control-copy>p,.cases-heading p{font-size:var(--lead-type);line-height:var(--lead-line);font-weight:400;text-wrap:pretty;max-width:58ch}
.story-heading p{margin:0 0 var(--copy-space)}
.control-copy>p{margin:var(--copy-space) 0}
.cases-heading p{margin:var(--copy-space) 0 0}
.story-heading{margin-bottom:var(--heading-space)}
.story-card figcaption{font-size:1rem;line-height:1.5rem;margin-top:24px;padding-inline:0;text-wrap:pretty}
.story-card figcaption strong{font-weight:700}
.story-controls{margin-top:24px}
.product-story{margin-top:var(--section-space)}
.launch-journey{margin-top:var(--section-space);margin-bottom:var(--section-space)}
.journey-steps{margin-top:32px}
.journey-step{padding-block:20px}
.journey-tab{font-size:1.25rem;line-height:1.75rem;gap:16px}
.journey-number{width:16px;font-size:.75rem;line-height:1rem}
.journey-step p{font-size:1rem;line-height:1.5rem;margin:16px 32px 8px;max-width:56ch;text-wrap:pretty}
.journey-foot{font-size:.875rem;line-height:1.25rem;margin-top:24px}
.control-inner{padding-block:80px}
.control-seal strong{font-size:.875rem;line-height:1.25rem}
.control-seal>span{font-size:.75rem;line-height:1rem;margin-top:16px}
.tool-universe{padding-top:48px;padding-bottom:0}
.tool-universe>p{font-size:.875rem;line-height:1.25rem;margin-top:32px}
.business-cases{margin-top:var(--section-space);margin-bottom:0}
.cases-heading{margin-bottom:var(--heading-space)}
.case-content h3{font-size:1rem;line-height:1.5rem;font-weight:700;margin:0 0 4px}
.case-tag{font-size:.875rem;line-height:1.25rem}
.case-copy{margin-bottom:24px;text-wrap:pretty}
.founder-quote{padding-top:var(--section-space);padding-bottom:var(--section-space)}
.founder-quote figure{max-width:800px}
.founder-quote blockquote p{font-size:clamp(15px,1.6vw,24.5px);line-height:1.5;letter-spacing:-.015em}
.founder-quote figcaption{margin-top:48px}
.founder-portrait img{object-fit:contain;object-position:center;transform:none}
.founder-name{font-size:1.125rem;line-height:1.5rem;font-weight:700}
.founder-role{font-size:1rem;line-height:1.5rem;margin-top:4px}
.closing-heading,.closing-bottom{left:var(--page-inset);right:var(--page-inset)}
.site-footer{padding-top:80px;padding-bottom:32px}
.footer-grid{column-gap:24px}
.footer-column h2{font-size:.875rem;line-height:1.5rem;font-weight:700;margin:0 0 16px}
.footer-column li{margin:0}
.footer-column a,.footer-column button{font-size:.875rem;line-height:1.5rem;padding:8px 0}
.footer-principles{margin:48px 0 24px}
.footer-principles span{font-size:.75rem;line-height:1rem}
.footer-bottom{padding-top:24px;gap:32px}
.footer-signature>span:last-child{font-size:.875rem;line-height:1.5rem}
.footer-meta{font-size:.75rem;line-height:1.25rem;gap:24px}
/* Captions share the inner edge of the actual demo content, including its border. */
.product-showcase{--shell-space:96px;--shell-gutter:32px}
.product-caption{width:min(calc(1240px - 2px - 2 * var(--shell-gutter)),calc(100% - var(--shell-space) - 2px - 2 * var(--shell-gutter)));margin-top:24px}

@media(min-width:1101px){
  .story-heading,.launch-journey,.control-inner{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--grid-space)}
  .story-heading>h2,.journey-copy,.control-copy{grid-column:1/span 5;max-width:none}
  .story-heading>div,.journey-visual,.control-seals{grid-column:7/span 6;min-width:0}
  .launch-journey{align-items:start}
  .journey-copy{padding-top:0}
}
@media(min-width:1700px){
  :root{--section-type:4rem;--section-line:4.25rem;--section-space:128px;--lead-type:1.25rem;--lead-line:2rem}
  .control-inner{padding-block:96px}
  .control-seal strong{font-size:1rem;line-height:1.5rem}
}
@media(max-width:1100px){
  :root{--page-gutter:32px;--section-type:3rem;--section-line:3.25rem;--section-space:96px;--heading-space:40px}
  .product-showcase{--shell-space:50px}
  .story-heading{gap:32px}
  .launch-journey{grid-template-columns:1fr 1fr;gap:32px;align-items:start}
  .control-copy{column-gap:32px}
  .control-copy>p{margin:0 0 24px}
}
@media(max-width:999px){.product-showcase{--shell-space:40px;--shell-gutter:24px}}
@media(max-width:800px){
  :root{--page-gutter:24px;--section-type:2.75rem;--section-line:3rem;--section-space:80px;--heading-space:32px}
  .launch-journey{grid-template-columns:1fr;gap:32px}
  .control-inner{padding-block:64px}
  .site-footer{padding-top:64px}
  .founder-quote blockquote p{font-size:17px}
}
@media(max-width:760px){
  .hero h1{font-size:clamp(2.25rem,10.5vw,3.5rem);line-height:1.06;letter-spacing:-.045em}
  .hero h1>span{white-space:normal}
  .hero-benefit{max-width:360px;align-items:flex-start}
  .hero-benefit .icon{margin-top:2px}
  .product-showcase{--shell-space:24px;--shell-gutter:16px}
  .product-caption{margin-top:16px}
}
@media(max-width:600px){
  :root{--page-gutter:20px;--section-type:2.25rem;--section-line:2.5rem;--section-space:64px;--heading-space:32px;--copy-space:16px;--lead-type:1rem;--lead-line:1.5rem}
  .story-heading{display:block}
  .story-heading h2{max-width:none}
  .story-heading p{margin-top:24px;margin-bottom:24px}
  .story-card figcaption{margin-top:16px}
  .journey-step{padding-block:16px}
  .journey-tab{font-size:1.125rem;line-height:1.5rem;gap:12px}
  .journey-step p{margin:12px 0 8px 28px}
  .journey-foot{font-size:.75rem;line-height:1.25rem;margin-top:24px}
  .control-inner{padding-block:56px}
  .control-copy>p{margin:24px 0}
  .tool-universe{padding-top:40px}
  .tool-universe>p{font-size:.75rem;line-height:1.25rem;margin-top:24px}
  .cases-heading{gap:24px}
  .case-controls{margin-top:0}
  .case-content h3{font-size:.875rem;line-height:1.25rem}
  .case-tag{font-size:.75rem;line-height:1.125rem}
  .founder-quote figcaption{margin-top:32px}
  .founder-quote blockquote p{font-size:14px}
  .founder-name{font-size:1rem;line-height:1.5rem}
  .founder-role{font-size:.875rem;line-height:1.25rem}
  .site-footer{padding-top:48px;padding-bottom:32px}
  .footer-grid{gap:32px 24px}
  .footer-column h2{margin-bottom:8px}
  .footer-principles{margin-top:32px}
  .footer-signature>span:last-child{font-size:.75rem;line-height:1.25rem}
  .footer-meta{gap:16px;margin-top:24px}
}
@media(max-width:360px){
  :root{--section-type:2rem;--section-line:2.25rem}
  .hero h1{font-size:2.1875rem}
}