/* Shared premium visual language for all detail pages in /tools/. */

.tool-ai{
  --ai-surface:linear-gradient(145deg,color-mix(in srgb,var(--white) 94%,var(--accent) 6%),var(--paper-2));
  --ai-border:color-mix(in srgb,var(--line-strong) 78%,var(--accent) 22%);
  --ai-border-hover:color-mix(in srgb,var(--accent) 68%,var(--line-strong));
  --ai-glow:0 24px 56px -30px color-mix(in srgb,var(--accent) 58%,transparent);
}

/* Hero follows the /tools/ showcase language: copy, checklist, metrics and rich AI artwork. */
.tool-ai .hero{
  padding:clamp(58px,6.5vw,86px) 0 clamp(54px,5.5vw,74px);
}
.tool-ai .hero-grid{
  align-items:center;
  gap:clamp(42px,5vw,68px);
}
.tool-ai .hero .display{
  max-width:14ch;
  font-size:clamp(44px,5vw,68px)!important;
  line-height:.96;
}
.tool-ai .hero-sub{max-width:46ch;margin-top:24px}
.tool-ai .tool-hero__can{margin-top:22px}
.tool-ai .tool-hero__mets{margin-top:24px;max-width:620px}
.tool-ai .hero-actions{margin-top:28px}
.tool-ai .tool-hero__decor{
  min-height:330px;
  padding:0;
  /* Animated SVG filters must not widen the document or enter the text column.
     A small clip margin keeps the premium glow without creating a hard frame. */
  overflow:clip;
  overflow-clip-margin:12px;
  border:0;
  background:transparent;
  filter:drop-shadow(0 30px 44px color-mix(in srgb,var(--accent) 20%,transparent));
}
.tool-ai .tool-hero__decor svg{width:100%;max-width:540px;overflow:visible}
.tool-ai .ledger{
  border-radius:18px;
  border-color:var(--ai-border);
  background:var(--ai-surface);
  box-shadow:0 18px 46px -34px rgba(0,0,0,.85);
  transition:transform .34s var(--ease),border-color .34s var(--ease),box-shadow .34s var(--ease);
}
@media(min-width:881px){
  .tool-ai .hero-grid{grid-template-columns:minmax(0,1.08fr) minmax(420px,.92fr)}
}

/* One vertical rhythm across the page. The first comparison section used to touch the hero seam. */
.tool-ai .tool-detail>.sec{padding:clamp(70px,7vw,96px) 0}
.tool-ai .hero+.sec{
  padding-top:clamp(56px,6vw,78px)!important;
  padding-bottom:clamp(70px,7vw,96px);
}
.tool-ai .sec-head{margin-bottom:clamp(38px,4.2vw,52px)}

/* Section headers: remove inherited 62ch cap and give the artwork a real half of the composition. */
.tool-ai .lp-head{
  width:100%;
  max-width:none;
  grid-template-columns:minmax(0,1fr) minmax(400px,500px);
  gap:clamp(38px,5vw,68px);
  align-items:center;
}
.tool-ai .lp-head__txt{max-width:620px}
.tool-ai .lp-head__txt h2{
  max-width:18ch;
  font-size:clamp(38px,4.1vw,54px);
}
.tool-ai .lp-head__txt p{
  max-width:56ch;
  margin-top:18px;
  font-size:16px;
  line-height:1.62;
}
.tool-ai .lp-head__dec{
  position:relative;
  isolation:isolate;
  display:grid;
  grid-template-columns:minmax(0,1fr);
  place-items:center;
  width:100%;
  min-height:238px;
  padding:0;
  /* Keep animated filter glow inside the section's visual column. */
  overflow:clip;
  overflow-clip-margin:12px;
  border:0;
  border-radius:0;
  background:transparent;
}
.tool-ai .lp-head--rich .lp-head__dec{min-height:320px}
.tool-ai .lp-head__dec::before{
  content:"";
  position:absolute;
  inset:-12%;
  z-index:-1;
  opacity:.34;
  background:
    radial-gradient(circle at center,color-mix(in srgb,var(--accent) 16%,transparent),transparent 62%),
    radial-gradient(circle,color-mix(in srgb,var(--accent) 38%,transparent) 1px,transparent 1.2px);
  background-size:20px 20px;
  -webkit-mask-image:radial-gradient(circle at center,#000 10%,transparent 70%);
  mask-image:radial-gradient(circle at center,#000 10%,transparent 70%);
}
.tool-ai .lp-head__dec::after{
  content:"";
  position:absolute;
  width:150px;
  height:150px;
  border:1px solid color-mix(in srgb,var(--accent) 24%,transparent);
  border-radius:50%;
  opacity:.42;
  animation:aiDetailRing 8s ease-in-out infinite;
}
.tool-ai .lp-head__dec.aidec::after{display:none}
.tool-ai .lp-head__dec>svg{
  position:relative;
  z-index:1;
  display:block;
  width:100%;
  max-width:500px;
  height:auto;
  overflow:visible;
  filter:drop-shadow(0 24px 34px color-mix(in srgb,var(--accent) 22%,transparent));
  animation:aiDetailFloat 6.5s ease-in-out infinite;
}
.tool-ai .lp-head--catalog .lp-head__dec{min-height:320px}
.tool-ai .lp-head--catalog .lp-head__dec>svg{max-width:480px}

@keyframes aiDetailFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-7px)}
}
@keyframes aiDetailRing{
  0%,100%{transform:scale(.88);opacity:.24}
  50%{transform:scale(1.08);opacity:.5}
}

/* Symmetric grids: card size follows the /tools/ catalogue reference. */
.tool-ai .ps{gap:20px;align-items:stretch}
.tool-ai .tool-grid{
  grid-template-columns:repeat(3,minmax(0,1fr));
  grid-auto-rows:1fr;
  gap:20px;
}
.tool-ai .tool-grid .tg-wide{grid-column:auto}
.tool-ai .tool-grid>.card{height:100%;min-height:300px}
.tool-ai .ai-feature-link{
  color:inherit;
  text-decoration:none;
}
.tool-ai .ai-feature-link span{
  display:inline-block;
  margin-left:.38em;
  color:var(--accent);
  font-size:.72em;
  transition:transform .3s var(--ease),color .3s var(--ease);
}

.tool-ai .steps{gap:20px;align-items:stretch}
.tool-ai .step{height:100%;min-height:240px}

.tool-ai .why-grid{
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:20px;
}
.tool-ai .why{height:100%;min-height:230px}

.tool-ai .fmt-grid{gap:20px;align-items:stretch}
.tool-ai .fmt{height:100%}

/* Integration grids stay visually balanced for every real count from 2 to 6. */
.tool-ai .integ-grid{
  grid-template-columns:repeat(3,minmax(0,1fr));
  grid-auto-rows:1fr;
  gap:20px;
}
.tool-ai .integ{grid-column:auto;height:100%}
.tool-ai .integ-grid--n2,
.tool-ai .integ-grid--n4{grid-template-columns:repeat(2,minmax(0,1fr))}
.tool-ai .integ-grid--n3,
.tool-ai .integ-grid--n6{grid-template-columns:repeat(3,minmax(0,1fr))}
.tool-ai .integ-grid--n5{grid-template-columns:repeat(6,minmax(0,1fr))}
.tool-ai .integ-grid--n5 .integ{grid-column:span 2}
.tool-ai .integ-grid--n5 .integ:nth-child(4){grid-column:2/span 2}
.tool-ai .integ-grid--n5 .integ:nth-child(5){grid-column:4/span 2}

/* One surface, one hover language, one transition timing. */
.tool-ai :is(
  .ps__card,
  .tool-grid>.card,
  .step,
  .integ,
  .why,
  .fmt,
  .qa,
  .plan-line,
  .th-grid>.card
){
  position:relative;
  overflow:hidden;
  border-color:var(--ai-border);
  border-radius:18px;
  background:var(--ai-surface);
  transition:
    opacity .45s var(--ease),
    transform .34s var(--ease),
    border-color .34s var(--ease),
    box-shadow .34s var(--ease),
    background-color .34s var(--ease);
  transition-delay:0s;
}
.tool-ai :is(
  .ps__card,
  .tool-grid>.card,
  .step,
  .integ,
  .why,
  .fmt,
  .qa,
  .plan-line,
  .th-grid>.card
)::before{
  content:"";
  position:absolute;
  top:0;
  left:20%;
  right:20%;
  height:1px;
  z-index:3;
  pointer-events:none;
  opacity:0;
  transform:scaleX(.45);
  background:linear-gradient(90deg,transparent,var(--accent),transparent);
  transition:opacity .34s var(--ease),transform .34s var(--ease);
}
.tool-ai .ps__card{padding:clamp(28px,3vw,38px)}
.tool-ai .ps__card--s{border-color:color-mix(in srgb,var(--accent) 48%,var(--line-strong))}
.tool-ai .ps__card .lbl{transition:color .3s var(--ease),transform .3s var(--ease)}
.tool-ai :is(.tool-grid>.card,.step,.integ,.why,.fmt,.th-grid>.card){padding:28px 26px}
.tool-ai .integ .chip{transition:color .3s var(--ease),border-color .3s var(--ease),background .3s var(--ease)}
.tool-ai .qa__q{transition:background .3s var(--ease),color .3s var(--ease)}

@media(hover:hover){
  .tool-ai .ledger:hover{
    transform:translateY(-4px);
    border-color:var(--ai-border-hover);
    box-shadow:var(--ai-glow);
  }
  .tool-ai :is(
    .ps__card.rv.in,
    .tool-grid>.card.rv.in,
    .step.rv.in,
    .integ.rv.in,
    .why.rv.in,
    .fmt.rv.in,
    .plan-line.rv.in,
    .th-grid>.card.rv.in,
    .qa
  ):hover{
    transform:translateY(-5px);
    border-color:var(--ai-border-hover);
    box-shadow:var(--ai-glow);
    transition-delay:0s;
  }
  .tool-ai :is(
    .ps__card,
    .tool-grid>.card,
    .step,
    .integ,
    .why,
    .fmt,
    .qa,
    .plan-line,
    .th-grid>.card
  ):hover::before{opacity:1;transform:scaleX(1)}
  .tool-ai .ps__card:hover .lbl{color:var(--accent-deep);transform:translateX(4px)}
  .tool-ai .tool-grid>.card:hover .ai-feature-link span{color:#c9a6ff;transform:translate(3px,-3px)}
  .tool-ai .integ:hover .chip{
    color:var(--ink);
    border-color:color-mix(in srgb,var(--accent) 54%,var(--line-strong));
    background:color-mix(in srgb,var(--accent) 14%,var(--white));
  }
  .tool-ai .qa:hover .qa__q{background:color-mix(in srgb,var(--accent) 7%,transparent)}
}

/* Tablet: keep the visual language, stack it instead of deleting it. */
@media(max-width:1060px){
  .tool-ai .lp-head{grid-template-columns:minmax(0,1fr) minmax(320px,380px);gap:36px}
  .tool-ai .why-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:980px){
  .tool-ai .tool-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tool-ai .integ-grid,
  .tool-ai .integ-grid--n2,
  .tool-ai .integ-grid--n3,
  .tool-ai .integ-grid--n4,
  .tool-ai .integ-grid--n5,
  .tool-ai .integ-grid--n6{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tool-ai .integ,
  .tool-ai .integ-grid--n5 .integ{grid-column:auto}
  .tool-ai .integ-grid--n5 .integ:nth-child(4){grid-column:auto}
  .tool-ai .integ-grid--n3 .integ:last-child,
  .tool-ai .integ-grid--n5 .integ:nth-child(5){grid-column:1/-1;width:calc(50% - 10px);justify-self:center}
}
@media(max-width:860px){
  .tool-ai .ps{grid-template-columns:1fr}
  .tool-ai .lp-head,
  .tool-ai .lp-head--r{direction:ltr;grid-template-columns:1fr;gap:28px}
  .tool-ai .lp-head__txt{max-width:680px}
  .tool-ai .lp-head__dec{display:grid;max-width:520px;min-height:280px;margin:0 auto}
  .tool-ai .lp-head--catalog .lp-head__dec{min-height:280px}
  .tool-ai .tool-hero__decor{max-width:520px;min-height:260px;margin:0 auto}
}
@media(max-width:760px){
  .tool-ai .tool-detail>.sec{padding:64px 0}
  .tool-ai .hero+.sec{padding-top:56px!important;padding-bottom:64px}
  .tool-ai .ps{gap:16px}
  .tool-ai .why-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
  .tool-ai .why{min-height:210px}
}
@media(max-width:620px){
  .tool-ai .hero .display{font-size:clamp(38px,11vw,48px)!important}
  .tool-ai .tool-grid,
  .tool-ai .why-grid{grid-template-columns:1fr}
  .tool-ai .corner{display:none}
  .tool-ai .tool-grid>.card{min-height:0}
  .tool-ai .integ-grid{grid-template-columns:1fr}
  .tool-ai .integ,
  .tool-ai .integ:last-child{grid-column:auto;width:100%}
  .tool-ai .integ-grid--n3 .integ:last-child,
  .tool-ai .integ-grid--n5 .integ:nth-child(5){grid-column:auto;width:100%}
  .tool-ai :is(.tool-grid>.card,.step,.integ,.why,.fmt,.th-grid>.card){padding:24px 22px}
}
@media(max-width:560px){
  .tool-ai .lp-head__dec{
    display:grid;
    width:100%;
    max-width:320px;
    min-height:220px;
    margin:4px auto 0;
  }
  .tool-ai .lp-head--rich .lp-head__dec,
  .tool-ai .lp-head--catalog .lp-head__dec{min-height:220px}
  .tool-ai .lp-head__dec>svg,
  .tool-ai .lp-head--catalog .lp-head__dec>svg{max-width:320px}
  .tool-ai .tool-hero__mets{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
  .tool-ai .tool-hero__decor{min-height:220px;max-width:330px}
  .tool-ai .lp-head__txt h2{font-size:clamp(34px,10vw,44px)}
}

@media(prefers-reduced-motion:reduce){
  .tool-ai .lp-head__dec>svg,
  .tool-ai .lp-head__dec::after{animation:none!important}
  .tool-ai :is(.ledger,.ps__card,.card,.step,.integ,.why,.fmt,.qa,.plan-line){transition:none!important}
}