/* --- Advantages --- */
section.common.advantages
{
   padding-top:0;
   padding-bottom:0!important;
   border-bottom:1px solid var(--light-grey);
}

section.common.advantages>.area
{
   width:100vw;
   overflow:hidden;
}

section.common.advantages>.area>.content
{
   width:max-content;
   margin:0 auto;
   padding:0 var(--gutter);
}

section.common.advantages>.area>.content>.list
{
   min-width:min(100vw,var(--container) - var(--gutter)*2);
   width: max-content;
  max-width: none;
}

section.common.advantages>.area>.content>.list>.item
{
   flex:1 0 10em;
   display:grid;
   grid-template:'i t'/5.1rem 1fr;
   gap:var(--flex-gap);
   align-items:center;
   padding:5rem var(--section-inner-margin-x);
}
section.common.advantages>.area>.content>.list>.item:not(:first-child)
{
   border-left:1px solid var(--light-grey);
}

section.common.advantages>.area>.content>.list>.item>.img
{
   height:5.1rem;
   background:none center/contain no-repeat transparent;
}

section.common.advantages>.area>.content>.list>.item>h3
{
   display:none;
}

section.common.advantages>.area>.content>.list>.item>.text>p
{
   margin-bottom:0;
   font-size:1.5rem;
   font-weight:400;
}

/* --- Capabilities --- */
section.common.capabilities
{
   
}

section.common.capabilities .list
{
   grid-template-columns:repeat(auto-fit,minmax(32em,1fr));
}

section.common.capabilities .list>.item
{
   display:grid;
   grid-template:'i h' auto 'i t' 1fr/5.6rem 1fr;
   gap:var(--flex-gap);
   padding:var(--block-padding);
   color:#FFFFFF;
   border-radius:var(--block-radius);
   background:none var(--green);
}

section.common.capabilities .list>.item>.img
{
   background:none center top/contain no-repeat transparent;
}

section.common.capabilities .list>.item>h3
{
   margin-bottom:0;
   font-size:2.2rem;
   font-weight:700;
}

section.common.capabilities .list>.item>.text
{
   font-size:1.7rem;
   font-weight:400;
}


/* --- API --- */
section.common.api
{
   
}

section.common.api .block-core--columns>.wp-block-columns>*
{
   flex:1 0 32em;
}

section.common.api .block-core--columns>.wp-block-columns .connection
{
   
}

section.common.api .block-core--columns>.wp-block-columns .connection>.arrows>figure
{
   display:flex;
   justify-content:center;
}

section.common.api .block-core--columns>.wp-block-columns :is(.connection>:is(.you,.fm),.features ul>li)
{
   flex:1 0 14em;
   margin:0;
   color:var(--light-black);
   border-radius:var(--block-radius);
   background:none #FFFFFF;
}

section.common.api .block-core--columns>.wp-block-columns .connection>:is(.you,.fm)
{
   padding:var(--block-padding);
   font-size:1.7rem;
   box-shadow:0px 4px 4px 0px #00000040;
}
section.common.api .block-core--columns>.wp-block-columns .connection>:is(.you,.fm)>.wp-block-group>.wp-block-group__inner-container
{
   display:flex;
   flex-flow:column;
   gap:var(--flex-gap);
}

section.common.api .block-core--columns>.wp-block-columns .connection>:is(.you,.fm) p:last-child
{
   margin-bottom:0;
}

section.common.api .block-core--columns>.wp-block-columns .connection>:is(.you,.fm) h3
{
   margin-bottom:0;
   font-size:2.6rem;
   color:var(--blue);
}

section.common.api .block-core--columns>.wp-block-columns .connection>.you .who
{
   font-size:1.3em;
   font-weight:700;
}

section.common.api .block-core--columns>.wp-block-columns .connection>.fm figure.who>img
{
   width:auto;
   height:2.6rem;
}

section.common.api .block-core--columns>.wp-block-columns .features ul
{
   grid-auto-columns:1fr;
   grid-auto-rows:minmax(14em,1fr);
   counter-reset:itemcnt;
}

section.common.api .block-core--columns>.wp-block-columns .features ul>li
{
   position:relative;
   padding:var(--block-padding-v) var(--block-padding-h) var(--block-padding-v) 6em;
   
   counter-increment:itemcnt;
}
section.common.api .block-core--columns>.wp-block-columns .features ul>li::before
{
   content:counter(itemcnt);
   display:block;
   position:absolute;
   top:1.7em;
   left:1.3em;
   min-width:2em;
   padding:0.4em 0.2em 0.6em 0.2em;
   font-size:1.5em;
   line-height:1;
   font-weight:700;
   text-align:center;
   color:#FFFFFF;
   border-radius:0.5em;
   background:none var(--green);
}

section.common.api .block-core--columns>.wp-block-columns .features ul>li strong
{
   font-size:1.3em;
}

/* --- HowTo --- */
section.common.howto .seq
{
   --seq-item-width:28.5em;
   
   grid-template-columns:repeat(3,var(--seq-item-width));
   justify-content:space-between;
   gap:calc(var(--flex-gap-l)*1.8) var(--flex-gap-l);
}

section.common.howto .seq>.item
{
   position:relative;
   grid-template:'i' 27.5em 't' 1fr/1fr;
   gap:var(--flex-gap-e);
}

section.common.howto .seq>.item::before
{
   content:'';
   display:block;
   position:absolute;
   left:80%;
   top:12%;
   width:calc((100vw - var(--side-field)*2 - var(--seq-item-width))/2 - 76%);
   height:88%;
   background:url('/app/uploads/2026/09/fmcp_howt0_line.svg') center/100% auto no-repeat transparent;
}

section.common.howto .seq>.item>.img
{
   position:relative;
   background:none center top/contain no-repeat transparent;
}

section.common.howto .seq>.item>h3
{
   display:none;
}

section.common.howto .seq>.item>.text
{
   font-size:1.7rem;
   text-align:center;
}

section.common.howto .seq>.item>.text p:last-child
{
   margin-bottom:none;
}

@media (min-width:1121px)
{
   section.common.howto .seq>.item:nth-child(3n)::before
   {
      display:none;
   }
   section.common.howto .seq>.item:nth-child(3n - 1)::before {transform:scale(-1, 1);}
   section.common.howto .seq>.item:nth-child(6n - 2)::before {transform:scale( 1,-1);}
   section.common.howto .seq>.item:nth-child(6n - 1)::before {transform:scale(-1,-1);}
}
@media (max-width:1120px)
{
   section.common.howto .seq
   {
      grid-template-columns:repeat(2,var(--seq-item-width));
   }
   
   section.common.howto .seq>.item::before
   {
      width:calc((100vw - var(--side-field)*2 - var(--seq-item-width)) - 98%);
   }
   section.common.howto .seq>.item:nth-child(2n)::before
   {
      display:none;
   }
   section.common.howto .seq>.item:nth-child(4n + 1)::before {transform:scale(-1, 1);}
}
@media (max-width:655px)
{
   section.common.howto .seq
   {
      grid-template-columns:repeat(1,var(--seq-item-width));
      justify-content:center;
   }
   
   section.common.howto .seq>.item::before
   {
      display:none;
   }
}