/* Phone + tablet layout pass, plus shared contact buttons and CTA sizing */

/* Hero: keep "AI & Search" and the engine icons on one row */
.hero h1.pos .ai-row{white-space:nowrap}

/* Hero: single full-width column so nothing is squeezed into the left column */
@media (max-width:900px){
  .hero .wrap{grid-template-columns:1fr!important}
  .hero .svc,.hero .hero-copy,.hero .mark{grid-column:1}
  .hero .svc a{font-size:clamp(54px,15.2vw,66px)}
  .hero h1.pos{font-size:clamp(23px,6.9vw,27px)}
  .hero p.sub{font-size:16px;max-width:330px}
  .hero .mark{max-width:300px}
}

/* Contact buttons: equal size, centered, every width */
.contact-btns{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;width:100%;max-width:760px}
.contact-btns .btn{width:100%;justify-content:center;text-align:center}
.cal-reach .contact-btns{margin:0 auto}
.cal-reach h2{text-align:center}

/* Final CTA headline: smaller */
.cta h2{font-size:clamp(26px,3vw,44px);line-height:1.12;max-width:26ch;margin-left:auto;margin-right:auto}

/* Company prose */
.prose.sm{font-size:clamp(17px,1.35vw,19px)}
.prose.std{font-size:clamp(19px,1.6vw,22px)}

/* Client logo section: tighter */
.logos-swap>span{height:80px}
.logos-swap img{max-height:32px}

@media (max-width:900px){
  /* Hero centered */
  .hero .wrap{justify-items:center;text-align:center}
  .hero .svc{align-items:center}
  .hero .svc a{width:auto;justify-content:center}
  .hero .hero-copy{display:flex;flex-direction:column;align-items:center;text-align:center}
  .hero h1.pos,.hero p.sub,.hero p{margin-left:auto;margin-right:auto}
  .hero .hero-copy .btn{align-self:center}

  /* Section headings centered for balance */
  .sh-head,.cta{text-align:center}

  /* Client logos smaller */
  .logos-swap{gap:8px}
  .logos-swap>span{height:60px}
  .logos-swap img{max-height:24px}

  /* Zero-risk pilot: stack cleanly */
  .zr.light{padding:64px 0}
  .zr.light .zr-band{grid-template-columns:1fr!important;gap:24px;text-align:center;justify-items:center}
  .zr.light .zr-band h2{font-size:clamp(36px,9vw,56px)}
  .zr.light .zr-band p,.zr.light .zr-band p.zr-get{font-size:17px;max-width:34ch;margin-left:auto;margin-right:auto}
  .zr-band .btn{justify-self:center!important}
  .zr-band{grid-template-columns:1fr!important}

  /* CTA */
  .cta{padding:80px 0}
  .cta h2{font-size:clamp(22px,5.6vw,32px);margin-bottom:28px}

  /* Two arms side by side even on phones */
  .arms{grid-template-columns:1fr 1fr!important;gap:0!important}
  .arm{padding:24px 14px 28px 0!important;gap:12px;min-height:0!important}
  .arm+.arm{padding-left:14px!important;border-left:1px solid var(--line)!important;border-top:0!important}
  .arm h3{font-size:clamp(19px,4.6vw,30px)}
  .arm p{font-size:14px}
  .arm .btn{padding-left:12px;padding-right:12px;font-size:11px}
  /* Three arms: first two side by side, the third full width below */
  .arms.three .arm:nth-child(3){grid-column:1/-1;border-left:0!important;border-top:1px solid var(--line)!important;padding-left:0!important}

  /* Company prose sizes */
  .prose.sm{font-size:16px}
  .prose.std{font-size:18px}

  /* Contact buttons: 2x2, equal */
  .contact-btns{grid-template-columns:1fr 1fr;max-width:none}

  /* Footer: accordion like Legora. The accordion's own top line doubles as the
     section divider, so the section above must not draw a second one. */
  section:has(+ footer.foot){border-bottom:0}
  footer.foot{padding:44px 0 32px}
  footer.foot .cols{display:block!important}
  footer.foot .cols>div{border-top:1px solid #232427}
  footer.foot .cols>div:last-child{border-bottom:1px solid #232427}
  footer.foot .cols h4{margin:0;padding:20px 0;cursor:pointer;display:flex;justify-content:space-between;align-items:center;font-size:16px}
  footer.foot .cols h4::after{content:"+";font-weight:300;font-size:22px;line-height:1;color:#8E9198;transition:transform .25s}
  footer.foot .cols>div.open h4::after{transform:rotate(45deg)}
  footer.foot .cols ul{display:none!important;padding:0 0 22px!important;gap:14px!important}
  footer.foot .cols>div.open ul{display:flex!important}
  footer.foot .big{width:min(320px,70vw);margin:56px auto 40px}
  footer.foot .base{display:flex!important;flex-direction:column;align-items:center;gap:18px;text-align:center}
  footer.foot .base span{justify-self:center!important;justify-content:center}
  footer.foot .base span:first-child{gap:24px}
  footer.foot .base .soc{display:flex;gap:22px;align-items:center;order:-1}
  footer.foot .base .soc svg{width:20px;height:20px}
}

@media (max-width:420px){
  .arm h3{font-size:18px}
}

/* Homepage: centered composition on phone + tablet */
@media (max-width:900px){
  body.home section h2,body.home .svc-h{text-align:center;margin-left:auto;margin-right:auto}
  body.home .sh-head{display:flex;flex-direction:column;align-items:center;gap:20px;text-align:center}
  body.home .sh-feat-l{text-align:center;align-items:center}
  body.home .sh-feat-l>*{margin-left:auto;margin-right:auto}
  body.home .tile{text-align:center}
  body.home .tile>*{justify-content:center;margin-left:auto;margin-right:auto}
  body.home .sv-row{display:block!important}
  body.home .sv-rail{display:none!important}
  body.home .sv-t{text-align:center;display:flex;flex-direction:column;align-items:center}
  body.home .sv-t p{max-width:32ch;margin-left:auto;margin-right:auto}
  body.home .sv-t .chips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 18px;padding:0}
  body.home .sv-t .sv-ctas{justify-content:center;display:flex}
  body.home .sv-m{margin-top:24px}
  body.home .hfaq .side{text-align:center}
  body.home .hfaq .ask{display:flex;flex-direction:column;align-items:center}
  body.home .hfaq .ask div{justify-content:center}
}

/* Phone hero: bigger logo, everything nudged up */
@media (max-width:900px){
  .hero .mark{max-width:330px;margin-top:-56px!important;margin-bottom:-16px!important}
  .hero .svc{margin-top:-14px!important}
  .hero .hero-copy{margin-top:-10px!important}
}

/* Phone menu: matches site, animated open, no double lines */
@media (max-width:900px){
  nav.top .menu summary{gap:8px}
  nav.top .menu summary::after{content:"";width:16px;height:9px;border-top:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transition:transform .35s ease}
  nav.top .menu[open] summary::after{transform:scaleX(.6);opacity:.7}
  nav.top .menu .panel{border-top:0;border-bottom:1px solid #232427;padding-top:0;box-shadow:0 30px 60px rgba(0,0,0,.55);animation:menuIn .38s cubic-bezier(.2,.8,.2,1) both}
  nav.top .menu .panel a{opacity:0;animation:menuItem .45s cubic-bezier(.2,.8,.2,1) forwards;display:flex;justify-content:space-between;align-items:center}
  nav.top .menu .panel a::after{content:"→";font-size:18px;color:#ff5a1f;opacity:.8}
  nav.top .menu .panel a:last-child{border-bottom:0}
  nav.top .menu .panel a:nth-child(1){animation-delay:.05s}
  nav.top .menu .panel a:nth-child(2){animation-delay:.1s}
  nav.top .menu .panel a:nth-child(3){animation-delay:.15s}
  nav.top .menu .panel a:nth-child(4){animation-delay:.2s}
  nav.top .menu .panel a:nth-child(5){animation-delay:.25s}
}
@keyframes menuIn{from{opacity:0;transform:translateY(-12px);clip-path:inset(0 0 100% 0)}to{opacity:1;transform:none;clip-path:inset(0 0 0 0)}}
@keyframes menuItem{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* Desktop: spinning T fills exactly from the cap top of SURFACE to the bottom
   of the "Taavos owns the full path" line. hero-align.js measures the real
   layout and supplies --tw-s (scale), --tw-x / --tw-y (shift in F / px); the
   literals below are the 1280px fallback for when the script hasn't run.
   The transparent part of the canvas must never let the page be dragged. */
@media(min-width:901px){
  .hero{overflow-x:clip}
  .hero .mark .twire{scale:var(--tw-s,1.507);transform-origin:50% 21%;translate:calc(var(--F)*var(--tw-x,-0.78)) var(--tw-y,1.5px)}
}