/* Oído four-step phone storyboard: independent, identical-size stages.
   Keeps frame/receipt/card positioning stable across industry, locale and frame changes. */
.site .pains .pz-w {
  --oido-pain-phone:184px;
  min-width:0;
  align-items:start;
}
.site .pains .pz-l,.site .pains .pz-r,.site .pains .pz-cur{min-width:0}
.site .pains .pz-r {
  width:100%;
  display:grid;
  grid-template-columns:minmax(0,1fr);
  grid-template-rows:auto 68px;
  align-content:start;
  justify-items:center;
  align-items:start;
  gap:10px;
  min-width:0;
}
.site .pains .pz-ph{
  position:relative;
  width:var(--oido-pain-phone);
  height:auto;
  aspect-ratio:9/19.4;
  min-height:0;
  max-width:100%;
  flex:none;
  place-self:start center;
  contain:layout;
}
/* Phone shell and every screen own the exact same rectangle. Text does not size it. */
.site .pains .pz-ph>.dv.w-pz {
  --w:var(--oido-pain-phone);
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  aspect-ratio:auto;
  min-width:0;
  min-height:0;
  box-sizing:border-box;
}
.site .pains .pz-ph .dv-s {
  display:block;
  height:100%;
  min-height:0;
  position:relative;
  overflow:hidden;
  isolation:isolate;
}
.site .pains .pz-ph .scn,
.site .pains .pz-ph .scn .fr {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  min-height:0;
  min-width:0;
  grid-area:auto;
  margin:0;
  box-sizing:border-box;
}
.site .pains .pz-ph .scn .fr>.scr-m {
  width:100%;
  height:100%;
  min-height:0;
  max-height:100%;
  aspect-ratio:auto;
  margin:0;
  overflow:hidden;
}
.site .pains .pz-cap{
  box-sizing:border-box;
  width:min(100%,var(--oido-pain-phone));
  height:68px;
  min-height:68px;
  max-height:68px;
  display:grid;
  grid-template-rows:20px minmax(0,1fr);
  align-content:start;
  justify-items:center;
  align-items:start;
  gap:5px;
  margin:0;
  overflow:hidden;
  text-align:center;
}
.site .pains .pz-cap b{line-height:20px;font-variant-numeric:tabular-nums}
.site .pains .pz-cap span{
  display:-webkit-box;
  width:100%;
  line-height:1.28;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  line-clamp:2;
  overflow:hidden;
  overflow-wrap:anywhere;
  hyphens:auto;
}
/* Frame animation cannot resize the phone viewport during a crossfade. */
.site .pains .pz-ph .scn .fr{transform:translate3d(0,6px,0);transition:opacity 390ms cubic-bezier(.22,1,.36,1),transform 510ms cubic-bezier(.22,1,.36,1)}
.site .pains .pz-ph .scn .fr.is-on{transform:none}
/* Mobile quotation/answer area occupies the same height as the phone,
   regardless of content, language, or current scenario. */
@media(max-width:767px){
  .site .pains .pz-w{
    --oido-pain-phone:min(184px,44vw);
    grid-template-columns:minmax(0,var(--oido-pain-phone)) minmax(0,1fr);
    grid-template-areas:'tabs tabs' 'ph card';
    column-gap:clamp(10px,2.6vw,14px);
    align-items:start;
  }
  .site .pains .pz-r{
    grid-area:ph;
    width:var(--oido-pain-phone);
    min-width:0;
    justify-self:start;
    justify-items:start;
  }
  .site .pains .pz-ph{place-self:start start}
  .site .pains .pz-cur{
    grid-area:card;
    position:relative;
    display:block;
    width:100%;
    height:calc(var(--oido-pain-phone) * 19.4 / 9);
    min-height:0;
    max-height:none;
    align-self:start;
    isolation:isolate;
    overflow:hidden;
    box-sizing:border-box;
  }
  .site .pains .pz-cur>.pz-card{
    position:absolute;
    inset:0;
    box-sizing:border-box;
    width:100%;
    height:100%;
    min-width:0;
    min-height:0;
    margin:0;
    padding:2px 0 8px;
    display:grid;
    align-items:start;
    align-content:stretch;
    grid-template-rows:minmax(0,34%) minmax(0,1fr) 26px;
    gap:10px;
    overflow:hidden;
  }
  .site .pains .pz-card .tqw{
    display:block;
    box-sizing:border-box;
    width:100%;
    height:100%;
    max-height:100%;
    min-height:0;
    overflow:hidden;
    transform:none;
  }
  .site .pains .pz-card .tq{
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:5;
    line-clamp:5;
    box-sizing:border-box;
    width:100%;
    height:100%;
    min-height:100%;
    max-height:100%;
    margin:0;
    padding:12px 10px 16px;
    font-size:clamp(12px,3.4vw,16px);
    line-height:1.3;
    overflow:hidden;
    overflow-wrap:anywhere;
    hyphens:auto;
  }
  .site .pains .pz-card .ans2{
    align-content:start;
    align-self:start;
    min-height:0;
    max-height:100%;
    overflow:hidden;
    overflow-wrap:anywhere;
  }
  .site .pains .pz-card .ans2 b{
    font-size:clamp(14px,3.3vw,18px);
    line-height:1.2;
    overflow-wrap:anywhere;
  }
  .site .pains .pz-card .ans2 span{
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:6;
    line-clamp:6;
    font-size:clamp(12px,3vw,15px);
    line-height:1.38;
    max-height:100%;
    overflow:hidden;
    overflow-wrap:anywhere;
    hyphens:auto;
  }
  .site .pains .pz-card .stp2{align-self:end;margin:0}
}
@media(min-width:768px) and (max-width:999.98px){
  .site .pains .pz-w{
    --oido-pain-phone:250px;
    width:100%;
    min-width:0;
    grid-template-columns:minmax(0,1fr);
    grid-template-areas:'tabs' 'ph';
    align-items:start;
  }
  .site .pains .pz-l{grid-area:tabs;min-width:0}
  .site .pains .pz-r{
    grid-area:ph;
    width:100%;
    justify-self:stretch;
    justify-items:center;
    min-width:0;
  }
  .site .pains .pz-ph{place-self:start center}
  .site .pains .pz-cur{display:none}
}
@media(min-width:1000px){
  .site .pains>.pinin{
    justify-content:flex-start;
    padding-top:clamp(26px,3.5vh,46px);
    padding-bottom:26px;
  }
  .site .pains .pz-w{--oido-pain-phone:276px}
}
@media(max-width:999.98px) and (max-height:720px){
  .site .pains .pz-w{--oido-pain-phone:min(158px,42vw)}
}
@media(min-width:1000px) and (max-height:820px){
  .site .pains .pz-w{--oido-pain-phone:250px}
}
@media(prefers-reduced-motion:reduce){
  .site .pains .scn,.site .pains .fr,
  .site .pains .pz-cur>.pz-card{transition:none!important}
}