/* Common Studio home layout, with Honda-owned identity and journey imagery. */
:root{--maxw:1360px;--header-h:64px;--line:#e8e4e0;--header-canvas:#fff;--ink:#1b1d1f;--muted:#686d73;--body:-apple-system,BlinkMacSystemFont,'Segoe UI','PingFang SC','Hiragino Sans','Microsoft YaHei','Thonburi','Helvetica Neue',sans-serif}
body{background:#fff;overflow-x:hidden}
.wrap{max-width:none;padding:0}
header{height:var(--header-h);min-height:0;background:rgba(255,255,255,.94);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
header .bar{height:100%;min-height:0;max-width:var(--maxw);padding:0 32px;margin:0 auto;gap:18px;flex-wrap:nowrap}
header .logo{font-size:19px;font-weight:600;line-height:1.1;letter-spacing:-.01em;gap:11px;white-space:nowrap}
header .mark{width:40px;height:40px;flex:none;border-radius:9px;font-size:25px}
.brand-lockup strong{display:block;font:600 19px/1.1 var(--display);letter-spacing:-.01em;color:var(--ink)}
header .brand-lockup small{display:block;font-family:var(--body);font-size:10.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-top:2px}
header #viewSeg{align-self:stretch;order:initial;width:auto;height:auto;overflow:visible;background:transparent;border-radius:0;padding:0;margin:0 0 0 24px;gap:4px}
header #viewSeg button{position:relative;flex:initial;min-width:0;border-radius:0;padding:0 17px;color:var(--muted);font-size:13.5px;font-weight:800;white-space:nowrap}
header #viewSeg button::after{content:'';position:absolute;left:15px;right:15px;bottom:11px;height:3px;border-radius:3px;background:transparent;transition:.2s}
header #viewSeg button.on{background:transparent;color:var(--brand-d);box-shadow:none}
header #viewSeg button.on::after{background:var(--brand)}
header .spacer{display:block;flex:1}
.studio-settings{position:relative;flex:none}
.settings-capsule{display:flex;align-items:center;gap:9px;border:1px solid var(--line);background:#fff;font:inherit;font-size:13px;font-weight:750;color:var(--ink);padding:8px 14px;border-radius:999px;cursor:pointer;transition:.2s;box-shadow:0 2px 8px rgba(23,25,28,.06);white-space:nowrap}
.settings-capsule svg{width:16px;height:16px;stroke:var(--brand);stroke-width:1.8;fill:none;flex:0 0 auto}
.settings-capsule .sc-chev{width:13px;height:13px;stroke:var(--muted);transition:transform .2s}
.settings-capsule.open .sc-chev{transform:rotate(180deg)}
.settings-capsule:hover{border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 10%,transparent)}
.settings-popover{position:absolute;right:0;top:48px;width:310px;background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:0 18px 50px rgba(20,24,28,.16);z-index:50;overflow:hidden;animation:pop .16s ease}
.settings-popover[hidden]{display:none}
.sp-sec{padding:12px}
.sp-divider{height:1px;background:var(--line)}
.sp-label{font-size:11px;font-weight:850;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:2px 6px 8px}
.sp-mkt-list{display:flex;flex-direction:column;gap:2px}
.sp-mkt-item{display:flex;align-items:center;gap:11px;border:0;background:transparent;font:inherit;width:100%;padding:9px 10px;border-radius:11px;cursor:pointer;text-align:left;transition:.16s}
.sp-mkt-item:hover{background:var(--brand-soft)}
.sp-mkt-item.on{background:color-mix(in srgb,var(--brand) 9%,var(--card))}
.sp-flag{font-size:20px;line-height:1;flex:0 0 auto}
.sp-mkt-text{flex:1;min-width:0}
.sp-mkt-text b{display:block;font-size:14.5px;font-weight:850;color:var(--ink);line-height:1.15}
.sp-mkt-text span{display:block;font-size:11.5px;font-weight:600;color:var(--muted);line-height:1.25;margin-top:2px}
.sp-check{flex:0 0 auto;color:var(--brand);font-size:14px;font-weight:900;width:16px;text-align:center}
header .sp-lang-pills{display:flex;flex-wrap:wrap;gap:7px;padding:0 6px;order:initial}
header .sp-lang-pills button{width:auto;height:auto;border:1px solid var(--line);background:var(--card);font:inherit;font-size:13px;font-weight:750;color:var(--ink);padding:7px 14px;border-radius:999px;cursor:pointer;transition:.16s}
header .sp-lang-pills button:hover{border-color:var(--brand)}
header .sp-lang-pills button.on{background:color-mix(in srgb,var(--brand) 10%,var(--card));color:var(--brand-d);border-color:var(--brand)}
header #brandSeg{display:flex;align-self:auto;order:initial;width:auto;gap:4px;margin:0 6px 8px;background:var(--brand-soft);padding:3px;border-radius:999px}
header #brandSeg button{width:50%;border-radius:999px}
.sp-experience-links{display:flex;flex-direction:column;gap:3px;padding:0 6px}
.sp-experience-links button{border:0;border-radius:9px;background:transparent;text-align:left;font:inherit;font-size:12.5px;font-weight:750;color:var(--ink);padding:8px;cursor:pointer}
.sp-experience-links button:hover,.sp-experience-links button.on{background:var(--brand-soft);color:var(--brand-d)}
.sp-experience-links button[hidden]{display:none}
.journey-hero{height:26vh;min-height:196px}
.journey-hero::before{background-position:right center}
.journey-hero::after{background:linear-gradient(90deg,rgba(255,255,255,.94) 0%,rgba(255,255,255,.86) 40%,rgba(255,255,255,.42) 62%,rgba(255,255,255,0) 80%)}
.journey-hero__inner{padding:0 32px}
.journey-hero h1{font-size:clamp(29px,3.15vw,44px);max-width:33ch}
.journey-hero__lead{font-size:15.5px;max-width:82ch}
.client-journey{padding:16px 32px 28px;min-height:calc(100vh - 64px - 26vh)}
.client-journey-inner{display:grid;grid-template-columns:34fr 66fr}
.client-journey-right{padding:0 22px 0 6px}
.client-journey-left{display:flex;align-items:stretch;padding:0 0 0 28px}
.client-item{gap:12px;padding:11px 10px 11px 14px;margin-bottom:10px;cursor:pointer;font:inherit}
.client-num{display:grid;place-items:center;border:0;border-radius:50%}
.client-copy{gap:0}
.dealer-detail{min-height:430px}
.dealer-inline-shell,.dealer-inline-frame{height:720px}
body.view-dealer .foot,body.view-customer .foot,body.view-dealer .cat-top,body.view-customer .cat-top{display:none}
#from2w4wView{max-width:var(--maxw);margin:0 auto;padding:0 32px}
body.view-catalog #catalog{padding:38px 56px 64px}
#journeyView{padding:24px 32px 32px;min-height:calc(100vh - 64px - 26vh)}
.customer-stage-panel{padding:18px 20px 16px}
.customer-scenario b{line-height:1.28;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.customer-scenario p{display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden}
.customer-scenario .scenario-open{padding:0;margin-top:auto;justify-content:flex-end;text-align:right}
@media(max-height:880px) and (min-width:901px){
  .journey-hero{height:30vh;min-height:220px}
  .journey-hero__lead{font-size:14.5px}
  .journey-hero h1{font-size:clamp(27px,2.85vw,37px);margin:0 0 8px}
  .client-journey{min-height:calc(100vh - 64px - 30vh);padding-top:12px;padding-bottom:10px}
  .dealer-detail{min-height:0}
  #journeyView{padding-top:16px;min-height:calc(100vh - 64px - 30vh)}
  #journeyView #journey{gap:22px}.customer-road{padding-top:13px;padding-bottom:13px}.customer-stage-row{min-height:145px;padding-top:46px}.customer-trajectory{height:125px}.customer-stage-panel{min-height:290px}.customer-scenarios{min-height:180px}.customer-scenario{padding:12px 14px;gap:5px}.customer-scenario p{-webkit-line-clamp:3;font-size:11.5px}.customer-scenario b{font-size:13px}.customer-stage .sn{min-height:0}.customer-stage .stop{width:40px;height:40px}
}
@media(min-width:901px){header #brandSeg{margin-left:6px}.customer-stage-row{min-width:0}}
@media(max-width:900px){
  header{height:auto;min-height:64px}header .bar{height:auto;min-height:64px;padding:9px 20px;flex-wrap:wrap}
  header #viewSeg{order:3;width:100%;height:42px;margin:0;overflow-x:auto}header #viewSeg button{flex:1;min-width:max-content}
  header .spacer{display:none}.studio-settings{margin-left:auto}
  .journey-hero{height:auto;min-height:0;padding:40px 20px 30px}.journey-hero__inner{padding:0}
  .journey-hero::before{background-size:cover;background-position:right center}
  .journey-hero::after{background:linear-gradient(90deg,rgba(255,255,255,.96) 0%,rgba(255,255,255,.9) 52%,rgba(255,255,255,.55) 82%,rgba(255,255,255,.3) 100%)}
  .journey-hero h1{font-size:clamp(29px,3.15vw,44px);max-width:33ch}
  .journey-hero__lead{font-size:15.5px;max-width:82ch}
  .client-journey{padding:16px 20px 30px;min-height:0}.client-journey-inner{display:grid;grid-template-columns:34fr 66fr}
  .client-journey-right{order:initial;width:auto;grid-column:1;border-right:1px solid var(--line);padding:0 16px 0 0}
  .client-journey-left{order:initial;width:auto;grid-column:2;grid-row:1;padding:0 0 0 18px}
  .dealer-detail{min-height:0}.dealer-inline-shell,.dealer-inline-frame{height:720px}
  #journeyView{height:auto;padding-left:20px;padding-right:20px;display:block;overflow:hidden}
  .customer-road{overflow-x:auto}.customer-phase-row,.customer-stage-row{min-width:820px}.customer-stage-panel{min-height:430px}
  #from2w4wView{padding:0 20px}body.view-catalog #catalog{padding:28px 28px 54px}
}
@media(max-width:680px){body.view-catalog #catalog{padding:22px 16px 48px}}
@media(max-width:560px){
  header .brand-lockup{display:none}header .logo{font-size:19px}.settings-capsule{padding:8px 10px}.settings-capsule>svg:first-child{display:none}
  .settings-popover{position:fixed;top:58px;left:12px;right:12px;width:auto;max-height:calc(100vh - 70px);overflow:auto}
  header #viewSeg button{font-size:13.5px;padding:0 17px}
  .journey-hero__kicker{font-size:10px;margin-bottom:9px}.journey-hero h1{font-size:32px}.client-text{font-size:12.5px}
  .client-journey-inner{display:flex;flex-direction:column}.client-journey-right{order:1;width:100%;border-right:0;padding:0}.client-journey-left{order:2;width:100%;padding:22px 0 0}
  .dealer-inline-shell,.dealer-inline-frame{height:720px}
}