.ie-product { --ie-blue: #68c5ff; --ie-ink: #101621; background: #fff; }
.ie-product :is(a, button, summary):focus-visible { outline: 3px solid #2997ff; outline-offset: 5px; }
.ie-product section[id] { scroll-margin-top: 118px; }
.ie-product .nav__toggle span { background: #fff; }
.ie-skip { position: fixed; top: -100px; left: 16px; padding: 12px 20px; z-index: 2000; background: #fff; color: #111; }
.ie-skip:focus { top: 12px; }
.ie-eyebrow { margin-bottom: 24px; color: #0071e3; font-size: 11px; font-weight: 650; letter-spacing: .16em; line-height: 1.6; }
.ie-hero { padding: 148px 0 92px; overflow: hidden; color: #fff; background: radial-gradient(ellipse at 80% 10%, #122c4d 0, transparent 52%), #080c14; }
.ie-hero__layout { display: grid; grid-template-columns: 1.1fr 1fr; align-items: center; gap: clamp(32px, 5vw, 72px); }
.ie-hero .ie-eyebrow { color: #8cabc8; margin-bottom: 28px; }
.ie-release { display: inline-flex; align-items: center; gap: 8px; color: #b6c9dd; font-size: 12px; margin-bottom: 20px; }
.ie-release > span { width: 6px; height: 6px; border-radius: 50%; background: #75dac8; }
.ie-hero h1 { font-size: clamp(2.8rem, 5vw, 4.1rem); line-height: 1.15; letter-spacing: -.045em; font-weight: 700; }
.ie-hero h1 > span { display: block; margin-top: 18px; color: #9cd5ff; font-size: .78em; line-height: 1.3; }
.ie-hero__desc { max-width: 490px; margin: 24px 0 30px; color: #acb8c9; font-size: 16px; line-height: 1.9; }
.ie-actions { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; }
.ie-text-link { color: #d2dfed; font-size: 14px; }
.ie-text-link:hover { color: #fff; }
.ie-text-link > span { margin-left: 5px; }
.ie-hero__note { margin-top: 20px; color: #8e9eb2; font-size: 11px; }
.ie-system { border: 1px solid #2b3c51; border-radius: 20px; background: #101b2a; padding: 24px; box-shadow: 0 20px 60px #0004; }
.ie-system__top, .ie-system__bottom { display: flex; justify-content: space-between; align-items: center; gap: 12px; color: #8b9fb5; font-size: 10px; }
.ie-system__mark { color: #b7e4ff; font-size: 12px; font-weight: 700; letter-spacing: .14em; }
.ie-system__inputs { display: flex; gap: 9px; justify-content: center; margin-top: 30px; }
.ie-system__inputs span { padding: 7px 12px; border: 1px solid #34445b; border-radius: 6px; color: #bacbdd; font-size: 11px; white-space: nowrap; }
.ie-system__core { margin: 24px 0; padding: 30px 12px; border-top: 1px solid #34445b; border-bottom: 1px solid #34445b; text-align: center; background: linear-gradient(135deg, #14355760, #101b2a); }
.ie-system__core > span { color: #79b9e4; font-size: 11px; letter-spacing: .12em; }
.ie-system__core strong { display: block; margin: 15px 0; font-size: clamp(1.4rem, 2.5vw, 1.9rem); font-weight: 600; line-height: 1.5; }
.ie-system__core p { color: #8b9fb5; font-size: 11px; }
.ie-system__outputs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.ie-system__outputs > div { padding: 12px 9px; border-radius: 6px; background: #18283b; }
.ie-system__outputs b { display: block; margin-bottom: 14px; color: #77b7e0; font-size: 10px; font-weight: 500; }
.ie-system__outputs strong { display: block; font-size: 13px; font-weight: 600; }
.ie-system__outputs span { display: block; color: #91a4b8; font-size: 10px; margin-top: 6px; }
.ie-system__bottom { margin-top: 24px; font-size: 9px; }
.ie-section-nav { position: sticky; top: 60px; z-index: 30; background: #fff; border-bottom: 1px solid #e5e8ed; }
.ie-section-nav .container { display: flex; gap: 32px; overflow-x: auto; scrollbar-width: thin; }
.ie-section-nav a { flex-shrink: 0; padding: 18px 0; font-size: 12px; color: #536171; }
.ie-section-nav a:hover { color: #0071e3; }
.ie-section { padding: 96px 0; }
.ie-heading { max-width: 690px; margin-bottom: 42px; }
.ie-heading h2, .ie-download h2, .ie-faq h2 { font-size: clamp(2rem, 4vw, 2.8rem); line-height: 1.25; letter-spacing: -.045em; font-weight: 700; }
.ie-heading > p:last-child { color: #667080; font-size: 16px; line-height: 1.9; margin-top: 22px; }
.ie-heading--row { max-width: none; display: grid; grid-template-columns: 1fr 1fr; align-items: end; gap: 80px; }
.ie-heading--row > p:last-child { margin: 0; }
.ie-feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.ie-feature { padding: 32px; border: 1px solid #e5e8ee; border-radius: 18px; background: #f7f9fc; }
.ie-feature--wide { grid-column: span 2; background: #edf3fb; }
.ie-number { display: block; margin-bottom: 34px; color: #0071e3; font-size: 12px; font-weight: 600; }
.ie-feature h3 { margin-bottom: 14px; font-size: 20px; letter-spacing: -.025em; }
.ie-feature p { max-width: 570px; color: #647080; font-size: 14px; line-height: 1.9; }
.ie-tags { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 24px; }
.ie-tags span { padding: 5px 10px; border: 1px solid #d1deed; border-radius: 5px; color: #45617e; font-size: 11px; }
.ie-fineprint { margin-top: 22px; font-size: 12px; color: #737d89; line-height: 1.8; }
.ie-section--soft { background: #f3f5f8; }
.ie-skill-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px; }
.ie-skill { padding-top: 24px; border-top: 2px solid #abc7e1; }
.ie-skill > span { color: #0071e3; font-size: 12px; }
.ie-skill h3 { margin: 12px 0 24px; font-size: 19px; line-height: 1.6; }
.ie-skill li { margin-top: 20px; color: #667080; font-size: 13px; line-height: 1.8; }
.ie-skill li strong { display: block; color: #263449; font-size: 14px; margin-bottom: 3px; font-weight: 600; }
.ie-screenshot { overflow: hidden; border-radius: 18px; background: #0c1421; border: 1px solid #25394f; }
.ie-screenshot img { width: 100%; height: auto; }
.ie-screenshot figcaption { display: flex; justify-content: space-between; gap: 10px; padding: 14px 20px; color: #a5b5c9; font-size: 11px; border-top: 1px solid #25394f; }
.ie-image-link { display: block; cursor: zoom-in; }
.ie-video-preview { margin-bottom: 32px; }
.ie-skill-preview { display: grid; grid-template-columns: 1.15fr 1fr; gap: 64px; align-items: center; margin-top: 56px; }
.ie-skill-preview__copy h3 { font-size: clamp(1.6rem, 3vw, 2.1rem); line-height: 1.35; letter-spacing: -.035em; }
.ie-skill-preview__copy > p:not(.ie-eyebrow) { margin: 20px 0 24px; color: #667080; font-size: 14px; line-height: 1.9; }
.ie-skill-preview__copy li { border-top: 1px solid #dce3ed; padding: 14px 0; }
.ie-skill-preview__copy li strong { display: block; font-size: 14px; color: #263449; font-weight: 600; }
.ie-skill-preview__copy li span { display: block; margin-top: 4px; color: #667080; font-size: 13px; line-height: 1.8; }
.ie-design-gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.ie-design-gallery .ie-image-link { display: flex; align-items: center; aspect-ratio: 4 / 3; }
.ie-design-gallery img { max-height: 100%; object-fit: contain; }
.ie-design-gallery figcaption { flex-direction: column; gap: 5px; }
.ie-lcia__details { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px; margin-top: 36px; }
.ie-lcia__details h3 { font-size: 17px; margin-bottom: 12px; }
.ie-lcia__details p { color: #667080; font-size: 14px; line-height: 1.9; }
.ie-download { color: #fff; background: radial-gradient(ellipse at 0 0, #142d48, transparent 70%), #0a101a; }
.ie-download .ie-eyebrow { color: #8bbbe1; }
.ie-download__layout { display: grid; grid-template-columns: 1.1fr 1fr; gap: 80px; align-items: center; }
.ie-download__intro { margin: 22px 0; color: #a9b9cb; font-size: 15px; line-height: 1.9; }
.ie-contact { color: #95d1ff; font-size: 13px; }
.ie-contact span { margin-left: 4px; }
.ie-download-card { padding: 30px; border: 1px solid #34475f; border-radius: 18px; background: #152133; }
.ie-download-card__title { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.ie-download-card__title strong { font-size: 23px; letter-spacing: -.02em; }
.ie-download-card__title > span { padding: 4px 9px; color: #99cdf0; border: 1px solid #3d5774; border-radius: 5px; font-size: 11px; }
.ie-download-card__platform { margin-top: 8px; font-size: 12px; color: #afc1d5; }
.ie-filename { margin: 25px 0 20px; font-size: 11px; color: #92a4ba; overflow-wrap: anywhere; }
.ie-download-button { width: 100%; gap: 15px; }
.ie-extraction { margin-top: 22px; padding-top: 20px; border-top: 1px solid #34475f; display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 12px; color: #a9b9cb; }
.ie-extraction strong { margin-left: 8px; color: #fff; letter-spacing: .1em; font-size: 15px; }
.ie-extraction button { padding: 6px 0 6px 10px; color: #95d1ff; font-size: 12px; }
.ie-copy-status { min-height: 20px; font-size: 11px; color: #9fdfca; }
.ie-download-card__note { color: #8fa2b9; font-size: 11px; line-height: 1.7; }
.ie-install-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px; margin-top: 64px; padding-top: 36px; border-top: 1px solid #2a3c53; }
.ie-install-steps b { color: #8bbbe1; font-size: 12px; font-weight: 500; }
.ie-install-steps h3 { margin: 15px 0 10px; font-size: 17px; font-weight: 600; }
.ie-install-steps p { color: #a1b1c5; font-size: 13px; line-height: 1.9; }
.ie-faq__layout { display: grid; grid-template-columns: .8fr 1.2fr; gap: 80px; }
.ie-faq__list details { border-bottom: 1px solid #e1e5eb; }
.ie-faq__list details:first-child { border-top: 1px solid #e1e5eb; }
.ie-faq__list summary { cursor: pointer; padding: 22px 24px 22px 0; font-size: 15px; font-weight: 600; }
.ie-faq__list p { padding: 0 0 24px; color: #667080; font-size: 14px; line-height: 1.9; }
.ie-faq__list p a { color: #0071e3; text-decoration: underline; }

@media (max-width: 1024px) {
  .ie-hero__layout { grid-template-columns: 1fr 1fr; gap: 32px; }
  .ie-system { padding: 18px; }
  .ie-heading--row, .ie-download__layout, .ie-faq__layout { gap: 40px; }
  .ie-skill-grid, .ie-lcia__details { gap: 24px; }
  .ie-skill-preview { gap: 32px; }
}
@media (max-width: 760px) {
  .ie-hero { padding: 112px 0 54px; }
  .ie-hero__layout, .ie-heading--row, .ie-download__layout, .ie-faq__layout { grid-template-columns: 1fr; gap: 32px; }
  .ie-hero__copy { max-width: 580px; }
  .ie-system { margin-top: 8px; }
  .ie-system__inputs { gap: 6px; }
  .ie-system__inputs span { padding: 7px 8px; }
  .ie-section { padding: 64px 0; }
  .ie-section-nav .container { gap: 26px; }
  .ie-heading { margin-bottom: 30px; }
  .ie-heading--row > p:last-child { margin: 0; }
  .ie-feature-grid { grid-template-columns: 1fr; }
  .ie-feature--wide { grid-column: auto; }
  .ie-feature { padding: 26px; }
  .ie-number { margin-bottom: 24px; }
  .ie-skill-grid, .ie-lcia__details, .ie-install-steps { grid-template-columns: 1fr; gap: 30px; }
  .ie-skill li { margin-top: 14px; }
  .ie-screenshot figcaption { flex-direction: column; font-size: 10px; }
  .ie-skill-preview, .ie-design-gallery { grid-template-columns: 1fr; }
  .ie-skill-preview { margin-top: 36px; gap: 28px; }
  .ie-download-card { padding: 24px; }
  .ie-install-steps { margin-top: 40px; }
  .ie-faq__layout { gap: 30px; }
}

/* Lightweight product entry on the existing home page. */
.ie-home-entry { background: #eaf0f8; padding: 24px 0; }
.ie-home-entry__inner { display: flex; justify-content: space-between; gap: 24px; align-items: center; }
.ie-home-entry p { color: #5d6b7b; font-size: 13px; margin-top: 4px; }
.ie-home-entry strong { font-size: 17px; color: #17293c; font-weight: 650; }
.ie-home-entry a { flex-shrink: 0; color: #0071e3; font-size: 13px; font-weight: 600; }
@media (max-width: 760px) { .ie-home-entry__inner { flex-direction: column; align-items: flex-start; gap: 12px; } }