@font-face {
  font-family: SUIT;
  src: url("assets/SUIT-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
:root { --font: "SUIT", "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif; }
h1, h2, h3 { font-weight: 800; letter-spacing: -.045em; }
h2 em { color: var(--blue); }
.section { padding-block: 88px; }
.site-header { height: 78px; background: #f4f7fb; isolation: isolate; }
/* Blend the supplied logo's white matte into the header without replacing the artwork. */
.site-header .brand img { mix-blend-mode: multiply; }
.nav-shell { max-width: 1320px; }
.nav-shell nav a { position: relative; }
.nav-shell nav a[aria-current]::after { content: ""; position: absolute; height: 2px; background: var(--blue); bottom: -27px; left: 0; right: 0; }
.hero-showcase { display: block; position: relative; padding-top: 61px; padding-bottom: 20px; }
.hero-showcase::before { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: calc((1240px - 100vw)/2); right: calc((1240px - 100vw)/2); background: #f4f7fb; }
.hero-showcase .hero-copy { text-align: center; max-width: 1100px; margin: 0 auto; }
.hero-showcase .eyebrow { font-size: 14px; margin-bottom: 21px; }
.hero-showcase h1 { font-size: clamp(44px,4.55vw,66px); line-height: 1.2; letter-spacing: -.05em; }
.hero-showcase h1 em { margin: 0; display: inline; white-space: normal; }
.hero-showcase .lead { margin-top: 25px; font-size: 21px; line-height: 1.75; }
.hero-showcase .hero-actions { justify-content: center; gap: 14px; margin-top: 29px; }
.hero-showcase .price-note { margin-top: 16px; font-size: 13px; }
.button-secondary { color: var(--ink); background: transparent; border-color: #93a5bc; }
.button-secondary:hover { background: #e7eef8; color: var(--ink); border-color: #617c9e; }
.showcase-visual { margin-top: 37px; }
.showcase-visual>img { width: 100%; height: auto; aspect-ratio: 2.4; object-fit: cover; border-radius: 4px; }
.showcase-visual figcaption { font-size: 12px; margin-top: 10px; }
.benefit-strip { padding-block: 34px; margin-top: 25px; }
.benefit-strip strong { font-size: 20px; font-weight: 750; }
.benefit-strip p { font-size: 15px; }
.centered { text-align: center; max-width: 850px; margin-inline: auto; margin-bottom: 40px; }
.centered h2 { font-size: 47px; }
.centered>p:not(.eyebrow) { font-size: 19px; }
.purchase-comparison { border-block: 1px solid var(--line); margin-bottom: 50px; }
.purchase-comparison>summary { font-size: 17px; padding-block: 19px; font-weight: 650; }
.purchase-comparison>summary::after { top: 17px; }
.purchase-comparison .disclaimer { padding-bottom: 22px; }
.benefit-chapters { display: grid; grid-template-columns: 220px minmax(0,1fr); gap: 35px; min-height: 440px; }
.chapter-nav { border-right: 1px solid var(--line); padding-top: 15px; }
.chapter-nav button { display: block; width: 100%; text-align: left; background: none; border: 0; border-left: 3px solid transparent; padding: 14px 10px 14px 18px; color: var(--muted); font-weight: 650; font-size: 16px; line-height: 1.6; }
.chapter-nav button+button { margin-top: 8px; }
.chapter-nav button span { display: block; font-size: 12px; font-weight: 500; margin-bottom: 4px; }
.chapter-nav button[aria-selected="true"] { color: var(--blue); border-left-color: var(--blue); }
.benefit-chapters .editorial-row { grid-template-columns: 1fr 1fr; margin: 0; gap: 28px; align-items: center; }
.benefit-chapters [hidden] { display: none; }
.benefit-chapters .editorial-copy h3 { font-size: 32px; margin-bottom: 22px; }
.benefit-chapters .editorial-copy .eyebrow { display: none; }
.benefit-chapters .editorial-copy>p { font-size: 16px; margin-top: 15px; }
.benefit-chapters .illustration { width: 100%; }
.benefit-chapters .reverse { display: grid; }
.benefit-chapters .reverse[hidden] { display: none; }
.benefit-chapters .reverse .illustration { order: 2; }
.benefit-chapters .reverse .editorial-copy { order: 1; }
.benefit-chapters .ruled-list li { display: block; padding-block: 10px; }
.benefit-chapters .ruled-list b { font-size: 16px; }
.benefit-chapters .ruled-list span { display: block; font-size: 14px; }
.experience-photo { width: 100%; }
.experience-panel .text-link { margin-top: 18px; font-size: 15px; }
.warranty-band { margin-top: 40px; padding: 38px 0; }
.care-heading h2 { line-height: 1.25; }
.care-service dl>div { font-size: 15px; }
.care-accordions summary { font-size: 21px; }
.term-block { padding-top: 43px; margin-top: 50px; }
.sector-grid h3 { font-size: 27px; }
.sector-grid article { border: 1px solid #e6ecf4; }
.sector-grid article>div { padding: 23px 27px 26px; }
.support .section-heading { text-align: center; }
.support-illustration { max-height: 300px; }
.bluepass { margin-top: 55px; }
.faq-section { padding-block: 76px; }
.site-footer { padding-top: 40px; }
@media(max-width:1336px) {
  .hero-showcase::before { left: -48px; right: -48px; }
}
@media(max-width:1120px) {
  .hero-showcase::before { left: -32px; right: -32px; }
  .hero-showcase h1 { font-size: 54px; }
  .benefit-chapters { grid-template-columns: 195px minmax(0,1fr); gap: 25px; }
  .chapter-nav button { font-size: 15px; padding-left: 13px; }
  .benefit-chapters .editorial-row { grid-template-columns: 1.1fr .9fr; gap: 20px; }
  .benefit-chapters .editorial-copy h3 { font-size: 28px; }
  .benefit-chapters .editorial-copy>p { font-size: 15px; }
}
@media(max-width:800px) {
  .section { padding-block: 65px; }
  .site-header { height: 72px; }
  .hero-showcase { padding-top: 44px; padding-bottom: 18px; }
  .hero-showcase::before { left: -24px; right: -24px; }
  .hero-showcase h1 { font-size: 43px; }
  .hero-showcase h1 br { display: block; }
  .hero-showcase .lead { font-size: 18px; }
  .showcase-visual { margin-top: 30px; }
  .showcase-visual>img { aspect-ratio: 1.9; }
  .benefit-strip { padding-block: 23px; margin-top: 16px; }
  .benefit-strip strong { font-size: 17px; }
  .benefit-strip p { font-size: 14px; }
  .centered h2 { font-size: 37px; }
  .centered>p:not(.eyebrow) { font-size: 17px; }
  .benefit-chapters { display: block; }
  .chapter-nav { display: flex; border-right: 0; border-bottom: 1px solid var(--line); padding: 0; margin-bottom: 28px; gap: 15px; }
  .chapter-nav button { flex: 1; border: 0; border-bottom: 3px solid transparent; text-align: left; padding: 12px 0; font-size: 14px; }
  .chapter-nav button+button { margin: 0; }
  .chapter-nav button[aria-selected="true"] { border-bottom-color: var(--blue); }
  .benefit-chapters .editorial-row { grid-template-columns: 1fr 1fr; gap: 25px; }
  .benefit-chapters .editorial-copy h3 { font-size: 30px; }
  .benefit-chapters .editorial-copy>p { font-size: 16px; }
  .purchase-comparison { margin-bottom: 32px; }
  .care-accordions summary { font-size: 20px; }
  .sector-grid h3 { font-size: 24px; }
  .support .section-heading { text-align: left; }
}
@media(max-width:480px) {
  .hero-showcase { padding-top: 37px; }
  .hero-showcase::before { left: -20px; right: -20px; }
  .hero-showcase .eyebrow { font-size: 12px; margin-bottom: 18px; }
  .hero-showcase h1 { font-size: 35px; line-height: 1.25; letter-spacing: -.05em; }
  .hero-showcase h1 em { display: block; margin-top: 6px; }
  .hero-showcase .lead { font-size: 16px; line-height: 1.8; margin-top: 20px; }
  .hero-showcase .hero-actions { gap: 10px; margin-top: 23px; flex-wrap: nowrap; }
  .hero-showcase .button { font-size: 14px; padding: 12px 14px; min-height: 48px; }
  .hero-showcase .price-note { font-size: 12px; margin-top: 14px; }
  .showcase-visual { margin-top: 25px; }
  .showcase-visual>img { aspect-ratio: 1.55; object-position: center; }
  .showcase-visual figcaption { font-size: 11px; line-height: 1.6; }
  .benefit-strip { margin-top: 12px; padding-block: 0; }
  .benefit-strip p { font-size: 14px; }
  .centered h2 { font-size: 32px; }
  .centered>p:not(.eyebrow) { font-size: 16px; }
  .purchase-comparison>summary { font-size: 16px; }
  .chapter-nav { gap: 12px; margin-bottom: 27px; }
  .chapter-nav button { font-size: 13px; line-height: 1.55; }
  .benefit-chapters .editorial-row,.benefit-chapters .reverse { grid-template-columns: 1fr; gap: 24px; }
  .benefit-chapters .illustration { max-height: 250px; object-fit: contain; }
  .benefit-chapters .editorial-copy h3 { font-size: 29px; }
  .benefit-chapters .editorial-copy>p { font-size: 16px; }
  .care-service dl>div { font-size: 14px; }
  .care-accordions summary { font-size: 19px; }
  .sector-grid article>div { padding: 23px; }
  .faq-section { padding-block: 64px; }
}