/* codecex 1.18.11 — Alternative structural layouts only. Style 1 stays untouched. */
/* Header style 2: centered brand masthead, separate balanced navigation row. */
@media(min-width:901px){
}
/* Hero style 2: inverted editorial split, art on the left; copy in a right-aligned panel. */
body:has(#cm1804-style-data[data-hero="2"]) main .hero{overflow:hidden}
body:has(#cm1804-style-data[data-hero="2"]) main .hero .hero-grid{display:grid!important;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr)!important;gap:clamp(28px,5vw,90px)!important;align-items:center;min-height:520px;padding-block:clamp(50px,7vw,100px)}
body:has(#cm1804-style-data[data-hero="2"]) main .hero .hero-art{grid-column:1;grid-row:1;justify-self:stretch;transform:rotate(-2deg);position:relative}
body:has(#cm1804-style-data[data-hero="2"]) main .hero .hero-copy{grid-column:2;grid-row:1;max-width:600px;text-align:left;padding:clamp(12px,2vw,34px) 0}
body:has(#cm1804-style-data[data-hero="2"]) main .hero .hero-copy h1{font-size:clamp(38px,4.5vw,72px)!important;line-height:1.06;letter-spacing:-.045em;max-width:14ch}
body:has(#cm1804-style-data[data-hero="2"]) main .hero .hero-copy p{font-size:clamp(16px,1.5vw,19px);max-width:51ch}
body:has(#cm1804-style-data[data-hero="2"]) main .hero .hero-copy .searchbox{max-width:520px;display:flex;align-items:center;min-height:60px;border:1px solid #b4d5a4;border-radius:12px;padding:5px 6px}
body:has(#cm1804-style-data[data-hero="2"]) main .hero .hero-copy .trust{display:flex;flex-wrap:wrap;gap:8px 16px;margin-top:24px}
body:has(#cm1804-style-data[data-hero="2"]) main .hero .hero-art .code-window{border-radius:24px;transform:none;min-height:320px}
/* Footer style 2: distinct horizontal top brand & metrics, followed by compact multi-column sitemap. */
footer.cm1804-footer-style-2 .cm1764-footer-top{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(300px,.8fr)!important;align-items:center;gap:clamp(26px,4vw,78px);padding-top:clamp(42px,6vw,82px);padding-bottom:clamp(34px,4vw,60px);border-bottom:1px solid currentColor}
footer.cm1804-footer-style-2 .cm1764-footer-brand{max-width:650px;margin:0}
footer.cm1804-footer-style-2 .cm1764-footer-brand h2{font-size:clamp(30px,4vw,52px);line-height:1.06}
footer.cm1804-footer-style-2 .cm1764-footer-stats{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;width:100%;margin:0}
footer.cm1804-footer-style-2 .cm1764-footer-stats .cm1750-stat{display:flex;flex-direction:column;align-items:flex-start;padding:20px;min-width:0;border:1px solid currentColor;border-radius:14px}
footer.cm1804-footer-style-2 .cm1764-footer-links{display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr));gap:24px;padding-top:38px;padding-bottom:38px}
footer.cm1804-footer-style-2 .cm1764-footer-links>div{min-width:0}
footer.cm1804-footer-style-2 .cm1764-footer-links h3{margin-bottom:18px}
footer.cm1804-footer-style-2 .cm1764-footer-links a{display:block;max-width:100%;overflow-wrap:anywhere}
@media(max-width:900px){
body:has(#cm1804-style-data[data-hero="2"]) main .hero .hero-grid{grid-template-columns:1fr!important;min-height:0;gap:28px!important;padding-block:40px}
body:has(#cm1804-style-data[data-hero="2"]) main .hero .hero-copy{grid-column:1;grid-row:1;padding:0}
body:has(#cm1804-style-data[data-hero="2"]) main .hero .hero-art{grid-column:1;grid-row:2;transform:none;max-width:650px;width:100%;justify-self:center}
footer.cm1804-footer-style-2 .cm1764-footer-top{grid-template-columns:1fr!important}
footer.cm1804-footer-style-2 .cm1764-footer-links{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:600px){
body:has(#cm1804-style-data[data-hero="2"]) main .hero .hero-copy h1{font-size:clamp(32px,9vw,46px)!important}
body:has(#cm1804-style-data[data-hero="2"]) main .hero .hero-copy .searchbox{min-width:0;width:100%}
footer.cm1804-footer-style-2 .cm1764-footer-links{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 14px}
footer.cm1804-footer-style-2 .cm1764-footer-stats{grid-template-columns:1fr}
}

/* v1.18.12: menu links start at left while brand stays centered; retain settings palette. */
@media(min-width:901px){
}
/* v1.18.12: Style 2 hero becomes a distinct centered, compact editorial container. */
body:has(#cm1804-style-data[data-hero="2"]) main .hero{padding:clamp(22px,3.5vw,48px) 0;background:var(--cm-background)}
body:has(#cm1804-style-data[data-hero="2"]) main .hero .hero-grid {
  min-height: 0 !important;
  margin-inline: auto;
  padding: clamp(24px, 3.5vw, 52px) !important;
  gap: clamp(22px, 3vw, 48px) !important;
  border: 1px solid color-mix(in srgb, var(--cm-hero-text) 12%, transparent);
  border-radius: 22px;
  background: var(--cm-hero-bg);
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr) !important;
}
body:has(#cm1804-style-data[data-hero="2"]) main .hero .hero-copy{min-width:0}
body:has(#cm1804-style-data[data-hero="2"]) main .hero .hero-copy h1{font-size:clamp(31px,3.5vw,52px)!important;line-height:1.13;max-width:none;overflow-wrap:break-word;word-break:normal;hyphens:none;letter-spacing:-.025em}
body:has(#cm1804-style-data[data-hero="2"]) main .hero .hero-copy p{overflow-wrap:break-word;word-break:normal;line-height:1.6}
body:has(#cm1804-style-data[data-hero="2"]) main .hero .hero-art{min-width:0;min-height:245px}
body:has(#cm1804-style-data[data-hero="2"]) main .hero .hero-art .code-window{min-height:250px}
@media(max-width:900px){body:has(#cm1804-style-data[data-hero="2"]) main .hero .hero-grid{grid-template-columns:minmax(0,1fr)!important;padding:clamp(20px,5vw,36px)!important}}
@media(max-width:600px){body:has(#cm1804-style-data[data-hero="2"]) main .hero .hero-grid{border-radius:15px}body:has(#cm1804-style-data[data-hero="2"]) main .hero .hero-copy h1{font-size:clamp(29px,8.5vw,40px)!important}}