.page-hero-site { --page-hero-border: #d9e3dd; }
.page-hero-site .page-hero h1 { max-width: 580px; }
.page-hero-site .page-hero-stage { position: absolute; inset: 0; background: #e7edf2; }
.page-hero-site .page-hero-object { position: absolute; z-index: 2; will-change: transform, opacity; }
.page-hero-site .page-hero-object picture,
.page-hero-site .page-hero-object img { display: block; width: 100%; height: 100%; }
.page-hero-site .page-hero-object img { object-fit: contain; }
.page-hero-site .page-hero-object--air,
.page-hero-site .page-hero-object--faq-mac { left: 17%; bottom: 20%; width: 42%; height: 65%; }
.page-hero-site .page-hero-object--pro { right: 5%; bottom: 20%; width: 42%; height: 65%; }
.page-hero-site .page-hero-object--gpu { left: 18%; bottom: 24%; width: 47%; height: 47%; }
.page-hero-site .page-hero-object--cpu { right: 9%; bottom: 48%; width: 23%; height: 39%; }
.page-hero-site .page-hero-object--ram { right: 7%; bottom: 24%; width: 29%; height: 27%; }
.page-hero-site .page-hero-object--photo-one { left: 23%; bottom: 19%; width: 32%; height: 67%; }
.page-hero-site .page-hero-object--photo-two { right: 12%; bottom: 21%; width: 30%; height: 61%; }
.page-hero-site .page-hero-object--photo-one img,
.page-hero-site .page-hero-object--photo-two img,
.page-hero-site .page-hero-object--about-photo img { border-radius: 6px; }
.page-hero-site .page-hero-object--article-one { left: 17%; bottom: 26%; width: 43%; height: 60%; }
.page-hero-site .page-hero-object--article-two { right: 5%; bottom: 23%; width: 39%; height: 54%; }
.page-hero-site .page-hero-object--article-one img,
.page-hero-site .page-hero-object--article-two img { border-radius: 6px; }
.page-hero-site .page-hero-object--logo { left: 15%; bottom: 29%; width: 44%; height: 49%; }
.page-hero-site .page-hero-object--about-photo { right: 8%; bottom: 22%; width: 29%; height: 63%; }
.page-hero-site .page-hero-object--faq-gpu { right: 5%; bottom: 26%; width: 38%; height: 39%; }
.page-hero-site .page-hero-object--phone { left: 30%; bottom: 20%; width: 27%; height: 69%; }
.page-hero-site .page-hero-object--mark { right: 10%; bottom: 32%; width: 23%; height: 44%; }
.page-hero-site .page-hero-phone-symbol { position: absolute; top: 49%; left: 50%; transform: translate(-50%, -50%); font-size: 39px; color: #fff; }
.page-hero-site .page-hero-platform { position: absolute; left: 56%; bottom: 18%; width: 65%; height: 13px; z-index: 1; border-radius: 50%; background: #f7fbf9; border: 1px solid #c2d5ca; box-shadow: 0 4px 0 #c5d2ca; transform: translateX(-50%); will-change: transform, opacity; }
.page-hero-site .page-hero-panel { position: absolute; left: 56%; bottom: 12px; z-index: 4; display: grid; grid-template-columns: 1fr 34px; grid-template-rows: 14px 25px; column-gap: 10px; align-items: center; width: min(310px, 70%); height: 56px; padding: 7px 14px; border: 1px solid #42634d; border-radius: 8px; background: #101a14; color: #4ade80; box-shadow: 0 9px 20px -9px #14281b66; transform: translateX(-50%); will-change: transform, opacity; }
.page-hero-site .page-hero-panel-label { grid-column: 1; font-size: 10px; line-height: 14px; color: #dce8df; }
.page-hero-site .page-hero-panel-value { grid-column: 1; font-size: 17px; line-height: 23px; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.page-hero-site .page-hero--parts .page-hero-panel-value,
.page-hero-site .page-hero--macbook .page-hero-panel-value { font-size: 25px; }
.page-hero-site .page-hero--blog .page-hero-panel-value { font-size: 14px; }
.page-hero-site .page-hero-panel-check { grid-column: 2; grid-row: 1 / 3; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; border: 1px solid #3b995a; background: #1e6935; color: #fff; font-size: 15px; }
.page-hero-site .page-hero--parts .preview-hero-actions { gap: 18px; }
.page-hero-site .page-hero--parts .preview-primary-action { gap: 14px; padding-inline: 17px; font-size: 13px; }
.page-hero-site .page-hero--parts .preview-primary-action span { max-width: 290px; }
.page-hero-site .preview-primary-action i:not(.fa-arrow-down) { animation: none; }
.page-hero-site .page-content-heading { margin: 0 0 18px; font-size: 23px; line-height: 1.3; color: #16271c; }
.page-hero-site .parts-desktop-redirect { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin: 0 0 16px; padding: 0; background: transparent; border: 0; }
.page-hero-site .parts-desktop-redirect-question { margin: 0; color: #33483b; font-size: 14px; }
.page-hero-site .parts-desktop-redirect-link { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; border-radius: 6px; font-size: 12px; font-weight: 700; padding: 10px 14px; background: #15803d; color: #fff; }
.page-hero-site .parts-desktop-redirect-link:hover { background: #166534; }
.page-hero-site .parts-purchase-note { margin: 0 0 18px; padding: 12px 0; border-top: 1px solid #d9e3dd; border-bottom: 1px solid #d9e3dd; color: #526358; font-size: 12px; line-height: 1.6; }
.page-hero-site .parts-purchase-note i { color: #15803d; margin-right: 5px; }
.page-hero-site .mac-section { max-width: 1140px; margin: 24px auto 60px; padding: 0 20px; }
.page-hero-site .mac-panel { padding: 24px 0; border: 0; border-radius: 0; box-shadow: none; background: transparent; }
.page-hero-site .mac-warning,
.page-hero-site .mac-form-note { border-radius: 6px; }
.page-hero-site .mac-warning { font-size: 13px; font-weight: 500; padding: 12px 14px; }
.page-hero-site .references-wrap,
.page-hero-site .blog-wrap,
.page-hero-site .about-container,
.page-hero-site .faq-page-container,
.page-hero-site .contact-page-container { max-width: 1140px; padding-inline: 20px; }
.page-hero-site .references-wrap,
.page-hero-site .blog-wrap,
.page-hero-site .faq-page-container,
.page-hero-site .contact-page-container { margin-top: 28px; }
.page-hero-site .about-container { margin-top: 28px !important; }
.page-hero-site .blog-intro,
.page-hero-site .faq-intro,
.page-hero-site .about-text-box { padding: 0 0 26px; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.page-hero-site .about-seo-note { padding: 22px 0 0; border: 0; border-top: 1px solid var(--page-hero-border); border-radius: 0; background: transparent; }
.page-hero-site .reference-card,
.page-hero-site .blog-card,
.page-hero-site .faq-item,
.page-hero-site .office-photo-section { border-radius: 8px; }
.page-hero-site .references-section-title { font-size: 26px; line-height: 1.3; }
.page-hero-site .blog-topic-links a,
.page-hero-site .about-seo-links a,
.page-hero-site .references-link-btn,
.page-hero-site .reference-open-btn { border-radius: 6px; }
.page-hero-site .references-link-btn,
.page-hero-site .reference-open-btn { background: #15803d; color: #fff; }
.page-hero-site .references-link-btn:hover,
.page-hero-site .reference-open-btn:hover { background: #166534; }
.page-hero-site .big-contact-card { border: 0; border-radius: 0; box-shadow: none; background: transparent; }
.page-hero-site .contact-sidebar { border-radius: 8px; }
.page-hero-site .direct-contact-box { border-radius: 0; padding: 0; background: transparent; border: 0; }
.page-hero-site .direct-contact-actions a { border-radius: 6px; }
.page-hero-site .faq-page-container { max-width: 1000px; }
.page-hero-site [id="partsGrid"],
.page-hero-site [id="macbookFields"],
.page-hero-site [id="referencesList"],
.page-hero-site [id="blogPosts"],
.page-hero-site [id="faqList"] { scroll-margin-top: 84px; }
@media (max-width: 1100px) and (min-width: 701px) {
    .page-hero-site .page-hero--parts .preview-hero-actions { gap: 12px; }
    .page-hero-site .page-hero--parts .preview-primary-action { max-width: 300px; font-size: 12px; }
    .page-hero-site .page-hero--parts .preview-primary-action span { max-width: 225px; }
}
@media (max-width: 900px) and (min-width: 701px) {
    .page-hero-site .page-hero h1 { max-width: 430px; }
    .page-hero-site .page-hero--parts .preview-hero-actions { display: grid; gap: 4px; justify-items: start; }
    .page-hero-site .page-hero-panel { width: 72%; }
    .page-hero-site .page-hero-panel-value { font-size: 14px; }
    .page-hero-site .page-hero--blog .page-hero-panel-value { font-size: 11px; }
}
@media (max-width: 700px) {
    .page-hero-site .page-hero-panel { left: 50%; bottom: 8px; width: min(270px, 76%); height: 44px; padding: 4px 11px; grid-template-columns: 1fr 27px; grid-template-rows: 12px 22px; column-gap: 7px; }
    .page-hero-site .page-hero-panel-label { font-size: 9px; line-height: 12px; }
    .page-hero-site .page-hero-panel-value { font-size: 14px; line-height: 21px; }
    .page-hero-site .page-hero--parts .page-hero-panel-value,
    .page-hero-site .page-hero--macbook .page-hero-panel-value { font-size: 21px; }
    .page-hero-site .page-hero--blog .page-hero-panel-value { font-size: 12px; }
    .page-hero-site .page-hero-panel-check { width: 26px; height: 26px; font-size: 12px; }
    .page-hero-site .page-hero-platform { left: 50%; bottom: 18%; width: 72%; height: 9px; box-shadow: 0 3px 0 #c5d2ca; }
    .page-hero-site .page-hero-object--air,
    .page-hero-site .page-hero-object--faq-mac { left: 7%; width: 46%; }
    .page-hero-site .page-hero-object--pro { right: 5%; width: 46%; }
    .page-hero-site .page-hero-object--gpu { left: 7%; width: 51%; }
    .page-hero-site .page-hero-object--cpu { right: 8%; width: 25%; }
    .page-hero-site .page-hero-object--ram { right: 6%; width: 33%; }
    .page-hero-site .page-hero-object--photo-one { left: 13%; width: 34%; }
    .page-hero-site .page-hero-object--photo-two { right: 12%; width: 34%; }
    .page-hero-site .page-hero-object--article-one { left: 6%; width: 46%; }
    .page-hero-site .page-hero-object--article-two { right: 3%; width: 44%; }
    .page-hero-site .page-hero-object--logo { left: 6%; width: 47%; }
    .page-hero-site .page-hero-object--about-photo { right: 7%; width: 33%; }
    .page-hero-site .page-hero-object--faq-gpu { right: 4%; width: 42%; }
    .page-hero-site .page-hero-object--phone { left: 22%; width: 29%; }
    .page-hero-site .page-hero-object--mark { right: 15%; width: 25%; }
    .page-hero-site .page-hero-phone-symbol { font-size: 25px; }
    .page-hero-site .page-hero--parts { height: 378px; }
    .page-hero-site .page-hero--parts .preview-hero-actions { display: grid; gap: 0; justify-items: center; }
    .page-hero-site .page-hero--parts .preview-primary-action { max-width: 100%; min-height: 44px; padding: 9px 15px; font-size: 12px; }
    .page-hero-site .page-hero--parts .preview-primary-action span { max-width: 245px; }
    .page-hero-site .page-hero--parts .preview-reference-link { min-height: 34px; }
    .page-hero-site .parts-desktop-redirect { display: grid; gap: 9px; justify-items: start; }
    .page-hero-site .parts-desktop-redirect-link { max-width: 100%; white-space: normal; }
    .page-hero-site .page-content-heading { font-size: 21px; }
    .page-hero-site .mac-section { padding-inline: 18px; margin-top: 20px; }
    .page-hero-site .mac-panel { padding-top: 0; }
    .page-hero-site .references-wrap,
    .page-hero-site .blog-wrap,
    .page-hero-site .about-container,
    .page-hero-site .faq-page-container,
    .page-hero-site .contact-page-container { padding-inline: 18px; }
    .page-hero-site .contact-form-area { padding: 26px 0 0; }
}
@media (max-width: 700px) and (max-height: 700px) {
    .page-hero-site .page-hero--parts { height: 326px; }
    .page-hero-site .page-hero-panel { bottom: 6px; height: 36px; padding-block: 2px; grid-template-rows: 11px 19px; }
    .page-hero-site .page-hero-panel-label { font-size: 8px; line-height: 11px; }
    .page-hero-site .page-hero-panel-value { font-size: 12px; line-height: 19px; }
    .page-hero-site .page-hero--parts .page-hero-panel-value,
    .page-hero-site .page-hero--macbook .page-hero-panel-value { font-size: 18px; }
    .page-hero-site .page-hero--blog .page-hero-panel-value { font-size: 10px; }
    .page-hero-site .page-hero-panel-check { width: 23px; height: 23px; }
    .page-hero-site .page-hero-phone-symbol { font-size: 21px; }
}
@media (max-width: 359px) {
    .page-hero-site .page-hero--parts .preview-primary-action span { max-width: 210px; }
    .page-hero-site .page-hero--parts .preview-primary-action { font-size: 11px; }
    .page-hero-site .page-hero--parts .preview-hero-copy { width: calc(100% - 28px); }
    .page-hero-site .page-hero--parts h1 { font-size: 24px; }
    .page-hero-site .page-hero-panel-value { font-size: 12px; }
}
.page-hero-site .page-hero--parts { height: 290px; }
.page-hero-site .page-hero--parts .preview-hero-copy { padding-block: 20px; }
.page-hero-site .page-hero-desktop-link { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; min-height: 34px; margin-top: 5px; padding-block: 4px; color: #86efac; font-size: 12px; line-height: 1.4; font-weight: 600; pointer-events: auto; animation: preview-action-arrive .85s 1.1s cubic-bezier(.16, 1, .3, 1) both; }
.page-hero-site .page-hero-desktop-link span { min-width: 0; }
.page-hero-site .page-hero-desktop-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.page-hero-site .page-hero-desktop-link:focus-visible { outline: 3px solid #4ade80; outline-offset: 4px; }
.page-hero-site .page-hero-object--desktop { left: 24%; bottom: 25%; width: 29%; height: 66%; }
.page-hero-site .page-hero-object--laptop { right: 4%; bottom: 27%; width: 43%; height: 47%; }
.page-hero-site .page-hero--rotating .page-hero-panel { width: min(400px, 79%); height: 94px; grid-template-rows: 15px 1fr; padding: 9px 14px; }
.page-hero-site .page-hero--rotating .page-hero-panel-value { align-self: center; display: flex; align-items: center; min-width: 0; height: 60px; font-size: 14px; line-height: 1.35; white-space: normal; overflow-wrap: anywhere; will-change: transform, opacity; }
.page-hero-site .page-hero--rotating .page-hero-object--desktop { bottom: 29%; height: 58%; }
.page-hero-site .page-hero--rotating .page-hero-object--laptop { bottom: 32%; height: 43%; }
.page-hero-site .page-hero-object--logo-left,
.page-hero-site .page-hero-object--logo-right { left: 24%; bottom: 40%; width: 65%; height: 37%; }
.page-hero-site .page-hero-object--logo-left { clip-path: inset(0 50% 0 0); }
.page-hero-site .page-hero-object--logo-right { clip-path: inset(0 0 0 50%); }
.page-hero-site .page-hero-features { position: absolute; z-index: 4; left: 56%; bottom: 18px; width: min(400px, 80%); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; transform: translateX(-50%); }
.page-hero-site .page-hero-feature { position: relative; left: auto; bottom: auto; display: flex; flex-direction: column; justify-content: center; gap: 6px; width: 100%; height: 76px; padding: 10px 5px; transform: none; }
.page-hero-site .page-hero-feature > i { font-size: 19px; color: #f1f7f3; }
.page-hero-site .page-hero-feature .page-hero-panel-value { font-size: 14px; line-height: 20px; }
.page-hero-site .page-hero-object--symbol { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; bottom: 42%; width: 20%; height: 41%; color: #1a6941; }
.page-hero-site .page-hero-object--symbol > i { font-size: 54px; }
.page-hero-site .page-hero-object--symbol > span { font-size: 13px; font-weight: 700; color: #233b2b; }
.page-hero-site .page-hero-object--symbol-0 { left: 24%; }
.page-hero-site .page-hero-object--symbol-1 { left: 46%; }
.page-hero-site .page-hero-object--symbol-2 { left: 68%; }
@media (max-width: 900px) and (min-width: 701px) {
    .page-hero-site .page-hero--parts { height: 320px; }
    .page-hero-site .page-hero--rotating .page-hero-panel { width: 84%; left: 54%; }
    .page-hero-site .page-hero--rotating .page-hero-panel-value { font-size: 12px; }
    .page-hero-site .page-hero-feature .page-hero-panel-value { font-size: 12px; }
}
@media (max-width: 700px) {
    .page-hero-site .page-hero--parts { height: 416px; }
    .page-hero-site .page-hero--parts .preview-hero-copy { padding-block: 18px; }
    .page-hero-site .page-hero-desktop-link { font-size: 11px; min-height: 34px; margin-top: 0; }
    .page-hero-site .page-hero-object--desktop { left: 13%; width: 30%; }
    .page-hero-site .page-hero-object--laptop { right: 7%; width: 48%; }
    .page-hero-site .page-hero--rotating { height: 358px; }
    .page-hero-site .page-hero--rotating .page-hero-scene { height: 198px; }
    .page-hero-site .page-hero--rotating .page-hero-panel { width: min(340px, 90%); height: 86px; left: 50%; bottom: 8px; padding: 7px 11px; grid-template-rows: 12px 1fr; }
    .page-hero-site .page-hero--rotating .page-hero-panel-value { font-size: 13px; height: 56px; }
    .page-hero-site .page-hero--rotating .page-hero-panel-label { font-size: 9px; }
    .page-hero-site .page-hero--rotating .page-hero-object--desktop { bottom: 33%; height: 57%; }
    .page-hero-site .page-hero--rotating .page-hero-object--laptop { bottom: 35%; }
    .page-hero-site .page-hero-object--logo-left,
    .page-hero-site .page-hero-object--logo-right { left: 14%; bottom: 42%; width: 72%; height: 38%; }
    .page-hero-site .page-hero-features { left: 50%; bottom: 8px; width: min(340px, 90%); gap: 7px; }
    .page-hero-site .page-hero-feature { height: 57px; padding: 6px 3px; gap: 3px; }
    .page-hero-site .page-hero-feature > i { font-size: 17px; }
    .page-hero-site .page-hero-feature .page-hero-panel-value { font-size: 12px; line-height: 17px; }
    .page-hero-site .page-hero-object--symbol { bottom: 43%; height: 35%; gap: 5px; }
    .page-hero-site .page-hero-object--symbol > i { font-size: 34px; }
    .page-hero-site .page-hero-object--symbol > span { font-size: 11px; }
    .page-hero-site .page-hero-object--symbol-0 { left: 18%; }
    .page-hero-site .page-hero-object--symbol-1 { left: 40%; }
    .page-hero-site .page-hero-object--symbol-2 { left: 62%; }
}
@media (max-width: 700px) and (max-height: 700px) {
    .page-hero-site .page-hero--parts { height: 364px; }
    .page-hero-site .page-hero--rotating { height: 350px; }
    .page-hero-site .page-hero--macbook { height: 308px; }
    .page-hero-site .page-hero--rotating .page-hero-scene { height: 178px; }
    .page-hero-site .page-hero--rotating .page-hero-panel { height: 82px; bottom: 6px; }
    .page-hero-site .page-hero--rotating .page-hero-panel-value { font-size: 12px; height: 53px; }
    .page-hero-site .page-hero-object--symbol > i { font-size: 30px; }
    .page-hero-site .page-hero-feature { height: 48px; }
    .page-hero-site .page-hero-feature > i { font-size: 14px; }
    .page-hero-site .page-hero-feature .page-hero-panel-value { font-size: 11px; line-height: 16px; }
}
@media (prefers-reduced-motion: reduce) {
    .page-hero-site .page-hero-desktop-link { animation: none; }
    .page-hero-site .page-hero-object,
    .page-hero-site .page-hero-platform,
    .page-hero-site .page-hero-panel { will-change: auto; }
}