/* Canonical mobile system for the four business detail pages. */
:root{
  --detail-mobile-inline:22px;
  --detail-mobile-section-space:64px;
  --detail-mobile-rule-height:2px;
  /* SOURCE OF TRUTH: site-components.css .detail-hero::after */
  --detail-mobile-rule:linear-gradient(90deg,rgba(75,155,114,0),rgba(75,155,114,.72) 30%,rgba(42,135,158,.76) 70%,rgba(42,135,158,0));
  --detail-mobile-card-border:rgba(194,216,211,.84);
}

@media (max-width:820px){
  body.page-business-detail{overflow-x:clip}

  .page-business-detail .detail-hero-grid>.detail-hero-media{order:1}
  .page-business-detail .detail-hero-grid>.detail-hero-copy{order:2}

  .page-business-detail .detail-hero-media{
    width:100%;
    height:auto;
    min-height:0;
    aspect-ratio:4/3;
    background:#f2f5f3;
  }

  .page-business-detail .detail-hero-media img{
    width:100%;
    height:100%;
    max-width:none;
    object-fit:cover;
    object-position:var(--detail-mobile-hero-position,50% 50%);
  }

  .page-purchase{--detail-mobile-hero-position:50% 52%}
  .page-brand-sales{--detail-mobile-hero-position:50% 54%}
  .page-amazon{--detail-mobile-hero-position:50% 50%}
  .page-oem{--detail-mobile-hero-position:50% 52%}

  .page-business-detail .detail-hero-grid .detail-hero-copy{
    padding:20px var(--detail-mobile-inline) 0;
  }

  .page-business-detail .detail-hero-grid .detail-hero-meta{margin:0 0 12px}
  .page-business-detail .detail-hero h1{
    font-size:clamp(31px,8.4vw,36px);
    line-height:1.48;
    letter-spacing:-.015em;
  }

  .page-business-detail .detail-hero-tagline{
    max-width:27em;
    margin-top:13px;
    font-size:16px;
    line-height:1.8;
    letter-spacing:0;
  }

  .page-business-detail .detail-hero-description{
    width:100%;
    max-width:27em;
    margin-top:12px;
    color:#637478;
    font-size:13.5px;
    line-height:1.92;
    letter-spacing:0;
  }

  .page-business-detail .detail-hero-copy>.mobile-section-boundary{
    width:calc(100% + (var(--detail-mobile-inline) * 2));
    height:var(--detail-mobile-rule-height);
    margin-top:26px;
    margin-left:calc(var(--detail-mobile-inline) * -1);
    background:var(--detail-mobile-rule);
  }

  /* Section spacing is shared; lines remain explicit semantic separators only. */
  .page-business-detail main>.detail-section{
    padding-block:var(--detail-mobile-section-space);
    border-top:0;
    border-bottom:0;
    border-image:none;
  }

  body.page-business-detail.page-oem>main.oem-main>.detail-section{
    padding-block:var(--detail-mobile-section-space);
  }

  .page-business-detail main>.detail-section .section-heading{margin-bottom:32px}
  .page-business-detail main>.detail-section .section-heading>p:not(.section-kicker){
    max-width:27em;
    margin-top:14px;
    font-size:13.5px;
    line-height:1.9;
    letter-spacing:0;
  }

  /* Japanese copy wraps by meaning and never relies on forced tiny type. */
  .page-business-detail :where(
    .detail-hero-tagline,
    .detail-hero-description,
    .section-heading>p:not(.section-kicker),
    .purchase-method-body,
    .purchase-strength-card p,
    .brand-strength-card p,
    .amazon-strength-list p,
    .brand-experience-copy>p,
    .detail-flow__copy>p
  ){
    word-break:auto-phrase;
    overflow-wrap:normal;
    line-break:strict;
    text-wrap:pretty;
  }

  .page-business-detail :where(
    .detail-hero-description-line,
    .detail-hero-description .semantic-phrase,
    .section-heading>p:not(.section-kicker) .semantic-phrase,
    .detail-flow__copy .semantic-phrase,
    .brand-strength-copy-line,
    .experience-lead-line,
    .brand-experience-copy-line
  ){
    display:inline!important;
    white-space:normal!important;
  }

  .page-business-detail :where(.purchase-flow-lead-sentence,.purchase-flow-lead-phrase,.amazon-meaning-line){display:inline}

  /* Content-card media share a taller frame; only focal position remains page-specific. */
  .page-business-detail :where(
    .purchase-method-card,
    .purchase-strength-card,
    .brand-strength-card,
    .brand-experience-card
  )>figure{
    width:100%;
    height:auto!important;
    min-height:0!important;
    aspect-ratio:4/3!important;
    overflow:hidden;
  }

  .page-business-detail :where(
    .purchase-method-card,
    .purchase-strength-card,
    .brand-strength-card,
    .brand-experience-card
  )>figure>img{
    width:100%;
    height:100%;
    max-width:none;
    object-fit:cover;
  }
}

@media (max-width:680px){
  /* Explicit line groups are mobile-only; desktop retains the original inline flow. */
  .page-business-detail .mobile-copy-line{
    display:block!important;
    white-space:nowrap!important;
  }

  .page-business-detail .detail-hero-description{font-size:14px;line-height:1.92}
  .page-business-detail main>.detail-section .section-heading>p:not(.section-kicker){font-size:14.25px;line-height:1.92}

  body.page-amazon .detail-hero-description{
    width:calc(100% + 16px);
    max-width:none;
    margin-left:-8px;
    font-size:13.25px;
    letter-spacing:-.07em;
  }

  body.page-amazon .detail-hero-description-line:last-child{letter-spacing:-.085em}

  body.page-purchase .detail-hero-description{
    font-size:13.5px;
    letter-spacing:-.06em;
  }

  body.page-purchase .purchase-method-card:nth-of-type(2) .purchase-method-copy{
    min-width:0;
  }

  body.page-purchase .purchase-method-card:nth-of-type(2) .purchase-method-body{
    width:calc(100% + 32px);
    max-width:none;
    min-width:0;
    margin-left:-16px;
    font-size:13.5px;
    font-feature-settings:"palt" 1;
    letter-spacing:-.08em;
  }

  body.page-purchase .purchase-flow-section .section-heading>p.purchase-flow-lead{
    width:calc(100% + 16px);
    max-width:none;
    margin-inline:-8px;
    font-size:13.75px;
    font-feature-settings:"palt" 1;
    letter-spacing:-.045em;
  }

  body.page-purchase .purchase-method-section .section-heading>p:not(.section-kicker){
    letter-spacing:-.02em;
  }

  body.page-purchase .purchase-method-section .section-heading>p .mobile-copy-line:last-child{
    letter-spacing:-.055em;
  }

  body.page-purchase .purchase-item-card h3{
    font-size:16px;
    letter-spacing:-.04em;
    overflow-wrap:normal;
    line-break:strict;
    word-break:auto-phrase;
  }

  body.page-purchase .purchase-contact-panel h3{
    overflow-wrap:normal;
    line-break:strict;
    text-wrap:balance;
    word-break:auto-phrase;
  }

  body.page-purchase .purchase-contact-panel .purchase-contact-copy>p:last-of-type{
    overflow-wrap:normal;
    line-break:strict;
    text-wrap:pretty;
    word-break:auto-phrase;
  }

  body.page-amazon .detail-hero-tagline{
    width:calc(100% + 12px);
    max-width:none;
    margin-left:-6px;
    font-size:13.75px;
    letter-spacing:-.055em;
    white-space:nowrap;
  }

  .page-business-detail .detail-flow__copy>p.source-copy-single-line{
    max-width:none!important;
    font-size:13px!important;
    letter-spacing:-.075em!important;
  }

  body.page-purchase .purchase-item-card small,
  body.page-brand-sales .brand-category-card small{
    font-size:9px;
    line-height:1.35;
  }

  body.page-purchase .purchase-card-label{font-size:11px;line-height:1.4}

  body.page-purchase .purchase-strength-card p,
  body.page-brand-sales .brand-strength-card p{
    font-size:13.5px;
    line-height:1.82;
  }

  body.page-amazon .amazon-strengths-lead,
  body.page-amazon .amazon-strength-list p{
    font-size:14px;
    line-height:1.92;
  }

  body.page-brand-sales #brand-strengths .brand-strength-heading-line{
    display:block;
    white-space:nowrap;
  }

  /* Strength cards share one horizontal frame without increasing card height. */
  body.page-brand-sales .brand-strength-card>figure,
  body.page-purchase .purchase-strength-card>figure{
    aspect-ratio:16/9!important;
  }

  body.page-brand-sales .brand-strength-card:nth-child(1)>figure>img{object-position:center 52%}
  body.page-brand-sales .brand-strength-card:nth-child(2)>figure>img{object-position:center center}
  body.page-brand-sales .brand-strength-card:nth-child(3)>figure>img{object-position:center 48%}
  body.page-purchase .purchase-strength-card:nth-child(1)>figure>img{object-position:center 52%}
  body.page-purchase .purchase-strength-card:nth-child(2)>figure>img{object-position:center center}
  body.page-purchase .purchase-strength-card:nth-child(3)>figure>img{object-position:center 48%}

  body.page-oem>main.oem-main .brand-experience-section .section-heading>p.brand-experience-lead{
    font-size:13.5px;
    line-height:1.9;
    letter-spacing:-.055em;
  }
  body.page-oem>main.oem-main .brand-experience-copy>p{font-size:14.25px;line-height:1.82}
  body.page-oem>main.oem-main .brand-description{font-size:14.25px;line-height:1.9}
  body.page-oem>main.oem-main .development-flow-section .section-heading>p.development-flow-lead{
    font-size:14.5px;
    letter-spacing:-.03em;
  }

  /* FLOW component: shared hierarchy for number, icon, title, description and connector. */
  .page-business-detail main>.detail-flow-section{
    padding:var(--detail-mobile-section-space) 0;
    background-position:28% center;
  }

  body.page-business-detail main>.detail-flow-section>.container{width:calc(100% - 40px)}
  .page-business-detail .detail-flow-section .section-heading{
    max-width:780px;
    margin:0 auto 32px;
    text-align:center;
  }

  .page-business-detail .detail-flow-section .section-heading>p:not(.section-kicker){margin-inline:auto}

  .page-business-detail .detail-flow{
    display:grid!important;
    width:100%;
    max-width:390px!important;
    grid-template-columns:1fr!important;
    grid-template-rows:none!important;
    gap:0!important;
    margin:0 auto!important;
    padding:0!important;
    overflow:visible!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
  }

  .page-business-detail .detail-flow>.process-flow-track{display:none!important}

  .page-business-detail .detail-flow>.detail-flow__step,
  .page-business-detail .detail-flow>.detail-flow__step:nth-of-type(n){
    position:relative;
    display:grid;
    width:100%;
    min-width:0;
    min-height:0!important;
    grid-column:1!important;
    grid-row:auto!important;
    grid-template-columns:minmax(0,1fr) 72px 24px 72px minmax(0,1fr)!important;
    grid-template-rows:64px auto!important;
    justify-content:center;
    gap:0!important;
    padding:22px 20px 21px!important;
    overflow:hidden;
    border:1px solid var(--detail-mobile-card-border)!important;
    border-radius:16px!important;
    background:linear-gradient(160deg,rgba(255,255,255,.98),rgba(255,255,255,.92))!important;
    box-shadow:0 10px 24px rgba(38,74,68,.06)!important;
    text-align:center!important;
  }

  .page-business-detail .detail-flow>.detail-flow__step::before{
    content:"";
    position:absolute;
    top:-54px;
    right:-48px;
    width:132px;
    height:132px;
    border-radius:50%;
    pointer-events:none;
    background:radial-gradient(circle,rgba(149,219,207,.16),rgba(149,219,207,0) 70%);
  }

  .page-business-detail .detail-flow__number{
    position:relative;
    z-index:1;
    display:grid!important;
    grid-column:2!important;
    grid-row:1!important;
    align-self:center!important;
    justify-self:center!important;
    justify-items:start!important;
    margin:0!important;
    color:#218c79!important;
  }

  .page-business-detail .detail-flow__number span{font:700 10px/1.3 Arial,sans-serif!important;letter-spacing:.22em!important}
  .page-business-detail .detail-flow__number strong{
    position:relative;
    display:block;
    padding:2px 0 7px!important;
    font-family:"Times New Roman","Yu Mincho",serif!important;
    font-size:36px!important;
    font-weight:400!important;
    line-height:1!important;
    letter-spacing:-.02em!important;
  }

  .page-business-detail .detail-flow__number strong::after{
    content:"";
    position:absolute;
    bottom:0;
    left:3px;
    width:24px!important;
    height:1px;
    background:#319985;
  }

  .page-business-detail .detail-flow__node{
    position:relative;
    z-index:1;
    display:grid!important;
    width:60px!important;
    height:60px!important;
    grid-column:4!important;
    grid-row:1!important;
    place-items:center;
    align-self:center!important;
    justify-self:center!important;
    margin:0!important;
    border:1px solid rgba(143,199,185,.4)!important;
    border-radius:50%!important;
    color:#167d71!important;
    background:linear-gradient(145deg,rgba(232,247,243,.94),rgba(239,248,248,.72))!important;
    box-shadow:inset 0 0 0 6px rgba(255,255,255,.3)!important;
  }

  .page-business-detail .detail-flow__node :is(svg,img){display:block;width:32px!important;height:32px!important}

  .page-business-detail .detail-flow__copy{
    display:grid!important;
    width:100%!important;
    grid-column:1/-1!important;
    grid-row:2!important;
    grid-template-rows:auto auto!important;
    align-content:start!important;
    padding:13px 0 0!important;
  }

  .page-business-detail .detail-flow__copy h3{
    display:block!important;
    min-height:0!important;
    margin:0!important;
    padding:0!important;
    color:#17333b!important;
    font-family:"Yu Mincho","Hiragino Mincho ProN",serif!important;
    font-size:19px!important;
    font-weight:700!important;
    line-height:1.55!important;
    letter-spacing:-.01em!important;
    white-space:normal!important;
    text-align:center!important;
  }

  .page-business-detail .detail-flow__copy h3::after{display:none!important}

  .page-business-detail .detail-flow__copy>p{
    width:100%;
    max-width:26em!important;
    min-height:0!important;
    margin:9px auto 0!important;
    color:#617579!important;
    font-size:14.25px!important;
    line-height:1.84!important;
    letter-spacing:-.015em!important;
    text-align:center!important;
  }

  .page-business-detail .detail-flow>.detail-flow__arrow,
  .page-business-detail .detail-flow>.detail-flow__arrow:nth-of-type(n){
    display:grid!important;
    width:34px!important;
    height:34px!important;
    grid-column:1!important;
    grid-row:auto!important;
    place-items:center;
    align-self:center!important;
    justify-self:center!important;
    margin:8px auto!important;
    border:1px solid rgba(190,217,211,.82)!important;
    border-radius:50%!important;
    color:#258c82!important;
    background:rgba(255,255,255,.94)!important;
    box-shadow:0 6px 17px rgba(41,93,86,.1)!important;
  }

  .page-business-detail .detail-flow>.detail-flow__arrow svg{
    width:15px!important;
    height:15px!important;
    padding:0!important;
    border:0!important;
    fill:none!important;
    stroke:currentColor!important;
    stroke-width:2!important;
    background:transparent!important;
    transform:rotate(90deg)!important;
  }
}

@media (max-width:390px){
  body.page-business-detail main>.detail-flow-section>.container{width:calc(100% - 32px)}
  .page-business-detail .detail-flow>.detail-flow__step,
  .page-business-detail .detail-flow>.detail-flow__step:nth-of-type(n){padding-inline:18px!important}
}

@media (max-width:680px){
  /* Keep every detail page on the same readable body scale as brand-sales. */
  .page-business-detail{
    --detail-mobile-reading-copy:var(--mobile-body-color,#5a7074);
    --detail-mobile-reading-copy-strong:var(--mobile-body-color-strong,#50666b);
  }

  .page-business-detail .detail-hero-description,
  .page-business-detail main>.detail-section .section-heading>p:not(.section-kicker),
  .page-business-detail :is(.purchase-method-body p,.purchase-strength-card p,.brand-strength-card p,.amazon-strength-list p,.brand-experience-copy>p,.brand-description,.store-description,.purchase-contact-copy>p:last-of-type,.amazon-shop-banner-copy>p:not(.section-kicker),.amazon-suppliers-copy>p:not(.section-kicker)){
    color:var(--detail-mobile-reading-copy);
    font-family:var(--mobile-body-font,"Yu Gothic","Hiragino Kaku Gothic ProN",Meiryo,sans-serif);
    font-weight:var(--mobile-body-weight,400);
  }

  .page-business-detail .detail-hero-description{font-size:var(--mobile-body-lead-size,14px);line-height:var(--mobile-body-line-height,1.92)}
  .page-business-detail main>.detail-section .section-heading>p:not(.section-kicker){
    color:var(--detail-mobile-reading-copy-strong);
    font-size:14.25px;
    line-height:1.92;
  }

  body.page-amazon .detail-hero-description{
    width:calc(100% + 28px);
    margin-left:-14px;
    font-size:14px;
    letter-spacing:-.085em;
  }
  body.page-amazon .detail-hero-description-line:last-child{letter-spacing:-.1em}
  body.page-purchase .detail-hero-description{
    width:calc(100% + 16px);
    max-width:none;
    margin-left:-8px;
    font-size:14px;
    letter-spacing:-.075em;
  }

  body.page-purchase .purchase-method-card:nth-of-type(2) .purchase-method-body{
    font-size:14px;
    line-height:1.9;
  }
  body.page-purchase .purchase-flow-section .section-heading>p.purchase-flow-lead{
    font-size:14.25px;
    line-height:1.92;
    letter-spacing:-.06em;
  }

  body.page-purchase .purchase-strength-card p,
  body.page-brand-sales .brand-strength-card p{
    color:var(--detail-mobile-reading-copy);
    font-size:var(--mobile-card-body-size,13.5px);
    line-height:var(--mobile-card-line-height,1.88);
  }

  body.page-amazon .amazon-strengths-heading>p.amazon-strengths-lead,
  body.page-amazon .amazon-strength-list p{
    color:var(--detail-mobile-reading-copy);
    font-size:14.25px;
    line-height:1.92;
  }
  body.page-amazon .amazon-shop-banner-copy>p:not(.section-kicker){font-size:var(--mobile-body-size,14px);line-height:var(--mobile-body-line-height,1.92)}
  body.page-amazon .amazon-showcase-heading>p{
    color:var(--detail-mobile-reading-copy-strong);
    font-size:13.5px;
    line-height:1.9;
  }
  body.page-amazon .amazon-suppliers-copy>p:not(.section-kicker){font-size:14px;line-height:1.92}
  body.page-purchase .purchase-contact-panel .purchase-contact-copy>p:last-of-type{
    color:var(--detail-mobile-reading-copy);
    font-size:14.25px;
    line-height:1.92;
  }

  body.page-oem>main.oem-main .brand-experience-section .section-heading>p.brand-experience-lead{
    color:var(--detail-mobile-reading-copy-strong);
    font-size:14.25px;
    line-height:1.92;
    letter-spacing:-.045em;
  }
  body.page-oem>main.oem-main .brand-experience-copy>p{line-height:1.88}
  body.page-oem>main.oem-main .brand-description{line-height:1.92}

  .page-business-detail .detail-flow__copy>p{
    color:var(--detail-mobile-reading-copy)!important;
    font-size:14.25px!important;
    line-height:1.88!important;
    letter-spacing:-.01em!important;
  }
  .page-business-detail .detail-flow__copy>p.source-copy-single-line{
    font-size:var(--mobile-flow-body-size,13.5px)!important;
    line-height:var(--mobile-flow-line-height,1.88)!important;
    letter-spacing:-.085em!important;
  }
}

@media (max-width:430px){
  body.page-brand-sales .brand-store-section .store-description span{letter-spacing:-.08em;text-wrap:balance}
  body.page-amazon .amazon-shop-banner-copy>p:not(.section-kicker){letter-spacing:-.08em;text-wrap:pretty}
  body.page-oem .detail-hero-description .semantic-phrase{white-space:nowrap!important}

  body.page-purchase .purchase-store-details :is(dt,dd,span){
    font-family:var(--mobile-body-font,"Yu Gothic","Hiragino Kaku Gothic ProN",Meiryo,sans-serif);
    font-weight:var(--mobile-body-weight,400);
    line-height:var(--mobile-profile-line-height,1.8);
  }

  body.page-purchase .purchase-store-details :is(dt,span){font-size:var(--mobile-profile-size,13px)}
  body.page-purchase .purchase-store-details dd{font-size:max(var(--mobile-profile-size,13px),15px)}
}
