/* stringify ai — layout fixes, one button style, and motion.
   Loaded after the inline styles, so these rules win on equal specificity. */

:root{
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --ease-out-soft:cubic-bezier(.22,1,.36,1);
}

/* ---- no sideways scroll ------------------------------------------------- */
html,body{max-width:100%;overflow-x:clip}
.cols3>*,.prods>*,.who>*,.steps>*,.team>*,.pgrid>*{min-width:0}
h1,h2,h3,p{overflow-wrap:break-word}

/* ---- one button style --------------------------------------------------- */
.btn,.contact-btn,.engage,.pcard__go{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:44px;padding:11px 20px;border-radius:var(--radius-pill);
  border:1px solid var(--line-2);background:var(--surface-1);color:var(--text-1);
  font-family:var(--font-sans);font-size:var(--fs-ui);font-weight:500;line-height:1.2;
  text-decoration:none;box-shadow:var(--shadow-sm);
  transition:transform 380ms var(--ease-spring),box-shadow var(--dur-ui) var(--ease-settle),
    border-color var(--dur-ui) var(--ease-settle),background-color var(--dur-ui) var(--ease-settle),
    color var(--dur-ui) var(--ease-settle);
  will-change:transform}
.btn:hover,.contact-btn:hover,.engage:hover,.pcard:hover .pcard__go,.pcard__go:hover{
  transform:translateY(-2px);border-color:var(--accent);color:var(--text-1);
  box-shadow:0 8px 24px -10px var(--accent-ring)}
.btn:active,.contact-btn:active,.engage:active,.pcard__go:active{
  transform:translateY(0) scale(.96);transition-duration:var(--dur-tap)}
.btn .arw,.engage>span[aria-hidden],.pcard__go .arw{
  color:var(--accent);transition:transform 380ms var(--ease-spring)}
.btn:hover .arw,.engage:hover>span[aria-hidden],.pcard:hover .pcard__go .arw{transform:translateX(4px)}
.engage{margin-top:var(--space-6)}
.pcard__go{margin-top:var(--space-5)}
.btn::after,.contact-btn::after,.engage::after,.pcard__go::after{display:none}

/* ---- cards lift on a spring --------------------------------------------- */
.pcard,.post,.step,.who__item{
  transition:transform 450ms var(--ease-spring),box-shadow var(--dur-ui) var(--ease-settle),
    border-color var(--dur-ui) var(--ease-settle)}
.pcard:hover,.post:hover,.step:hover{transform:translateY(-4px);border-color:var(--line-2);box-shadow:var(--shadow-lg)}

/* ---- staggered reveal --------------------------------------------------- */
html.js .io.in>*{animation:sfRise 700ms var(--ease-out-soft) both;animation-delay:calc(var(--i,0) * 70ms)}
html.js .io.in .steps>*,html.js .io.in .prods>*,html.js .io.in .who>*,
html.js .io.in .cols3>*,html.js .io.in .faq>*{
  animation:sfRise 700ms var(--ease-out-soft) both;animation-delay:calc(120ms + var(--j,0) * 90ms)}
@keyframes sfRise{from{opacity:0;transform:translateY(18px) scale(.98)}to{opacity:1;transform:none}}

/* ---- FAQ marker follows open state -------------------------------------- */
.faq summary .mk{font-size:0;width:22px;height:22px;flex-shrink:0;position:relative;
  border:1px solid var(--line-2);border-radius:50%;
  transition:transform 420ms var(--ease-spring),border-color var(--dur-ui),background-color var(--dur-ui)}
.faq summary .mk::before,.faq summary .mk::after{content:"";position:absolute;left:50%;top:50%;
  width:10px;height:1.5px;background:var(--text-2);border-radius:2px;transform:translate(-50%,-50%);
  transition:transform 420ms var(--ease-spring),background-color var(--dur-ui)}
.faq summary .mk::after{transform:translate(-50%,-50%) rotate(90deg)}
.faq details[open] summary .mk{transform:rotate(180deg);border-color:var(--accent)}
.faq details[open] summary .mk::before{background:var(--accent)}
.faq details[open] summary .mk::after{transform:translate(-50%,-50%) rotate(0deg);background:var(--accent)}
.faq summary:hover .mk{border-color:var(--accent)}
.faq details{overflow:hidden}

/* ---- hero: centred, with room under the nav ----------------------------- */
section.hero{padding:var(--space-10,96px) 0 var(--space-9,72px)}
.hero__inner{margin:0 auto;text-align:center}
.hero__sub{margin-left:auto;margin-right:auto}
.hero .btns,.hero .inherit,.hero .inherit__pair{justify-content:center}

/* ---- centred section heads ---------------------------------------------- */
.section .wrap>.sec__eyebrow,.section .wrap>h2{text-align:center;margin-left:auto;margin-right:auto}
.section .wrap>.gold-rule{margin-left:auto;margin-right:auto}
.cols3>*,.who>*,.step{text-align:center}
.faq{margin-left:auto;margin-right:auto}
.pagehead .wrap{text-align:center}
.pagehead .sub,.pagehead h1{margin-left:auto;margin-right:auto}
.crumb{justify-content:center;text-align:center}
/* long-form text (privacy) reads best as one centred column, left-aligned */
.section .wrap:has(>.lead-p){max-width:760px}
.section .wrap:has(>.lead-p)>h2{text-align:left;margin-top:var(--space-7)}

/* ---- tighter vertical rhythm -------------------------------------------- */
/* Sections had 128–176px above and below, so neighbours left ~300px of blank page. */
main .section{padding:88px 0}
main .section.tight{padding:64px 0}
main .section.open{padding:104px 0}
.cols3,.prods,.who,.steps{margin-top:var(--space-7)}
.pcard{padding:40px}

/* ---- contact block ------------------------------------------------------ */
/* The logo watermark sits behind the text and reads as grey loading bars. */
.seal{display:none}
.contact .sub{margin:var(--space-6) auto 0}

/* ---- responsive --------------------------------------------------------- */
@media (max-width:900px){
  .cols3{grid-template-columns:1fr;gap:var(--space-6)}
  .prods{grid-template-columns:1fr}
  .who{grid-template-columns:repeat(2,1fr)}
  .steps{flex-direction:column}
  .step__arrow{transform:rotate(90deg)}
}
@media (max-width:560px){
  .who{grid-template-columns:1fr}
  main .section{padding:56px 0}
  main .section.tight{padding:44px 0}
  main .section.open{padding:64px 0}
  .pcard{padding:var(--space-6)}
  .step{padding:var(--space-5)}
  section.hero{padding:var(--space-8,48px) 0 var(--space-7,40px)}
  .btns{flex-direction:column;align-items:stretch}
  .btns .btn{width:100%}
  .inherit{gap:var(--space-3)}
  .inherit__k{white-space:normal}
  .faq summary{font-size:var(--fs-body)}
}

@media (prefers-reduced-motion:reduce){
  html.js .io.in>*,html.js .io.in .steps>*,html.js .io.in .prods>*,html.js .io.in .who>*,
  html.js .io.in .cols3>*,html.js .io.in .faq>*{animation:none}
}