/* SkuEstimator — shared responsive layer (2026-09-27). Every page keeps its own inline CSS; this file is linked LAST in on every page and only adjusts layout per breakpoint. Selectors are prefixed with `html` so they out-rank the equal-specificity inline rules without needing !important. Breakpoints: phone ≤600 · tablet 601–1024 · laptop 1025–1440 · desktop >1440 */ html{-webkit-text-size-adjust:100%;text-size-adjust:100%} html img,html video{max-width:100%;height:auto} html h1,html h2,html h3{overflow-wrap:break-word} /* ================= NAV ================= */ /* Laptop / tablet-landscape: the full bar only just fits at 821–1024px */ @media (min-width:821px) and (max-width:1024px){ html .x-nav-bar{gap:20px} html .x-nav-links{gap:18px} html .x-nav-cta{gap:8px} html .x-nav-btn{padding:9px 14px} } /* Features mega-menu: three 215px columns (727px) ran off the right edge below ~1000px. The pages' own <=1120px fix was out-ranked by the nav's later inline rule, so it never applied. */ @media (min-width:821px) and (max-width:1023px){ html .x-mega{grid-template-columns:repeat(2,215px)} } /* Burger: 44px touch target, mobile menu scrolls, CTA reads as a button */ html .x-burger{width:44px;height:44px;padding:0;margin-right:-10px;font-size:24px;line-height:1; align-items:center;justify-content:center;border-radius:10px} @media (max-width:820px){ html .x-burger{display:inline-flex} html .x-burger[aria-expanded="true"]{background:rgba(255,255,255,0.06)} html .x-mobile{max-height:calc(100vh - 62px);max-height:calc(100dvh - 62px);overflow-y:auto; overscroll-behavior:contain;padding:6px 24px 22px} html .x-mobile a{padding:13px 0;font-size:15.5px} html .x-mobile a:last-child{margin-top:16px;padding:14px 0;border:0;border-radius:10px; background:#E5FF1A;color:#07090C;text-align:center;font-weight:700} } /* ================= FOOTER ================= */ @media (max-width:520px){ html .x-foot{padding:48px 0 28px} html .x-foot-inner{grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 16px} html .x-foot-brand{grid-column:1 / -1;max-width:none} html .x-foot-col{gap:2px} html .x-foot-col a{padding:7px 0;font-size:14px} html .x-foot-bottom{margin-top:36px} } /* ================= HOME HERO ================= */ /* The 1fr column grew to the demo table's min-content width, pushing the hero copy and demo ~30px past the right edge on phones. */ @media (max-width:980px){ html .p2-hero-inner{grid-template-columns:minmax(0,1fr)} html .p2-hero-inner>*{min-width:0} } @media (max-width:880px){ html .p2-hero-demo{width:100%;max-width:560px;margin:0 auto} html .p2-hero-frame-body{overflow-x:auto} } @media (max-width:600px){ html .p2-hero{padding:48px 0 64px} html .p2-eyebrow{margin-bottom:18px} html .p2-hero-sub{font-size:16.5px;margin-bottom:26px} html .p2-hero-cta .p2-btn{flex:1 1 100%;justify-content:center} html .p2-hero-stats{display:grid;grid-template-columns:1fr 1fr;gap:18px 16px;margin:24px 0 20px} html .p2-hero-frame-body{padding:10px} html .p2-hf-toolbar{flex-wrap:wrap;row-gap:8px} html .p2-hf-table thead th{padding:6px 5px;font-size:9px} html .p2-hf-table tbody td{padding:6px 5px;font-size:10.5px} html .p2-hf-table tbody tr.p2-hf-grand td{padding:9px 5px;font-size:12px} html .p2-hero-terminal{margin-top:16px} } /* ================= HOME SECTIONS ================= */ @media (max-width:600px){ html .h-section,html .pd-demo,html .h-pricing{padding:60px 0} html .h-section-head{margin-bottom:36px} /* Ten modules: two-up compact tiles instead of ten full-width cards */ html .h-mod-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px} html .h-mod{padding:16px 14px;min-height:0} html .h-mod-ico,html .h-mod-ico svg{width:24px;height:24px} html .h-mod-ico{margin-bottom:10px} html .h-mod-name{font-size:14px} html .h-mod-desc{font-size:12.5px} html .h-cta-row .h-btn{width:100%;justify-content:center} } /* ================= FEATURE PAGES ================= */ @media (max-width:600px){ html .b-hero,html .lb-hero,html .pu-hero,html .ai-hero,html .lc-hero,html .sc-hero, html .co-hero,html .pk-hero,html .fs-hero,html .dc-hero{padding:56px 0 52px} html .b-demo,html .b-deep,html .lb-demo,html .lb-deep,html .pu-demo,html .pu-deep, html .ai-demo,html .ai-dive,html .lc-demo,html .lc-deep,html .ph-section,html .sc-demo, html .sc-deep,html .co-demo,html .co-deep,html .pk-anim,html .pk-dd,html .fs-demo, html .fs-deep,html .dc-demo,html .dc-deep,html .fp{padding-top:56px;padding-bottom:56px} /* Stacked hero buttons: equal, full-width, thumb-sized */ html .b-cta-row>*,html .lb-cta-row>*,html .pu-cta-row>*,html .ai-cta-row>*,html .lc-cta-row>*, html .sc-cta-row>*,html .co-cta-row>*,html .pk-cta-row>*,html .fs-cta-row>*,html .dc-cta-row>*{ flex:1 1 100%;justify-content:center;text-align:center} html .b-cta-row,html .lb-cta-row,html .pu-cta-row,html .ai-cta-row,html .lc-cta-row, html .sc-cta-row,html .co-cta-row,html .pk-cta-row,html .fs-cta-row,html .dc-cta-row{gap:10px} } /* Build: the BOM table lost its Cost column off the right edge */ @media (max-width:600px){ html .b-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch} html .b-table{font-size:11px} html .b-table thead th{letter-spacing:.04em;font-size:9px} html .b-table thead th,html .b-table tbody td,html .b-table tfoot td{padding:9px 4px} html .b-table thead th:first-child,html .b-table tbody td:first-child,html .b-table tfoot td:first-child{padding-left:10px} html .b-table thead th:last-child,html .b-table tbody td:last-child,html .b-table tfoot td:last-child{padding-right:10px} html .b-table .b-total-val{font-size:15px} html .b-badge{margin-left:0;margin-top:4px} } /* Source Checker diff table + AI review footer on the narrowest phones */ @media (max-width:600px){ html .sc-body{overflow-x:auto;-webkit-overflow-scrolling:touch} html .ai-review-ft{flex-wrap:wrap;row-gap:6px} } /* Fail Safes: once the action bar stacks (<=560px) the Export button sits on the LEFT, so its right-anchored warning note hung off the left edge */ @media (max-width:560px){ html .fs-export-note{right:auto;left:0} } /* Library: a spreadsheet — let it scroll sideways instead of clipping */ @media (max-width:880px){ html .lb-table-area{overflow-x:auto;-webkit-overflow-scrolling:touch} } /* Documents: once the hero stacks, the art box collapsed to 0px wide (auto margins in a grid cell) so the fanned papers hung off its centre line */ @media (max-width:980px){ html .dc-hero-art{width:100%} } @media (max-width:480px){ html .dc-hero-art{aspect-ratio:auto;height:330px;align-items:flex-start} html .dc-hero-stack{transform:scale(.82);transform-origin:top center} } /* ================= PRICING / CONTACT / LEGAL ================= */ @media (max-width:600px){ html .c-form{padding:24px 18px} html .faq details{padding:16px 18px} html .faq-wrap,html .c-form-wrap{padding-bottom:64px} html .l-wrap{padding-top:48px;padding-bottom:72px} } /* iOS zooms the page when a focused field's text is under 16px */ @media (max-width:1024px){ html input:not([type="checkbox"]):not([type="radio"]),html select,html textarea{font-size:16px} } /* ================= SHARED COMPONENT: real-plugin screenshot ================= */ /* Used by the feature pages' "In the real plugin" section (assets/shots/*.webp, fictional sample data, dev version label masked). */ .x-real{padding:88px 0 24px;background:#07090C;font-family:'Inter',system-ui,sans-serif} .x-real-inner{max-width:1048px;margin:0 auto;padding:0 24px} .x-real-eyebrow{font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:700;letter-spacing:.12em; text-transform:uppercase;color:#E5FF1A;margin:0 0 12px;text-align:center} .x-real-title{font-size:clamp(26px,3.4vw,38px);font-weight:900;letter-spacing:-.025em;line-height:1.1; color:#E8ECF2;margin:0 0 32px;text-align:center} .x-shot{margin:0 0 40px} .x-shot-frame{border:1px solid rgba(255,255,255,0.12);border-radius:14px;overflow:hidden;background:#0D1017; box-shadow:0 30px 80px rgba(0,0,0,0.5)} .x-shot-frame img{display:block;width:100%;height:auto} .x-shot figcaption{max-width:640px;margin:16px auto 0;text-align:center;color:rgba(232,236,242,0.62); font-size:15px;line-height:1.55} .x-shot figcaption code{font-family:'JetBrains Mono',monospace;color:#E5FF1A;font-size:.92em} @media (max-width:600px){ .x-real{padding:56px 0 8px} .x-real-title{margin-bottom:22px} .x-shot{margin-bottom:28px} .x-shot-frame{border-radius:10px} .x-shot figcaption{font-size:14px;text-align:left} }