/* =========================================================================== POPS4 · HOUSE EDGE PAGE LAYER (pops4-he.css) · 2026-09-01 --------------------------------------------------------------------------- The estate standard, portable to any page that already loads pops4-format.css + pops4-format.js: · the page sits as a bone CARD on a gold semiconductor FIELD (House Edge) · chrome bars run thin, in House Edge order, inside one card · boxes carry gloss + glitter + a 3D hover lift with a sheen sweep · reading surface stays light; only the chrome bars are dark WHY SO MANY CLASSES: the legacy sheets carry rules like `html body section [class*="-card"]:not()...` at specificity (0,17,3) and `html body section *{color:#0a2240!important}`. Class count is compared BEFORE element count and !important does not break that tie, so every override here leads with `body.hx-field` + a doubled page class. Anything that still cannot be won in CSS is set inline by pops4-he.js. CONTRAST: every surface declares its background AND its text colour in the same rule, so a light-on-light pair can never drift apart. =========================================================================== */ :root{ --hx-ink:#0f0c08; --hx-ink-2:#15110c; --hx-field:#ece4d6; /* the semiconductor field (House Edge --page) */ --hx-bone:#fdfcf9; /* the floating page card (House Edge --bone) */ --hx-gold:#c9a96e; --hx-gold-dk:#b8944f; --hx-gold-lt:#d4b26a; --hx-hair:rgba(15,12,8,.10); --hx-text:#1a1a1a; --hx-ease:cubic-bezier(.22,.61,.36,1); /* canonical 84x84 circuit tile - same geometry as the homepage --chip token */ --hx-chip:url("data:image/svg+xml,%3Csvg width='84' height='84' viewBox='0 0 84 84' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23c9a96e' stroke-width='1' stroke-opacity='0.30'%3E%3Cpath d='M0 20H30V0M30 42H58V20H84M20 84V54H52V32M62 84V62H84M42 42V64M0 62H22'/%3E%3C/g%3E%3Cg fill='%23c9a96e' fill-opacity='0.38'%3E%3Ccircle cx='30' cy='20' r='2'/%3E%3Ccircle cx='58' cy='20' r='2'/%3E%3Ccircle cx='52' cy='32' r='2'/%3E%3Ccircle cx='42' cy='64' r='2'/%3E%3Ccircle cx='62' cy='62' r='2'/%3E%3Ccircle cx='22' cy='62' r='2'/%3E%3C/g%3E%3C/svg%3E"); --hx-chip-hot:url("data:image/svg+xml,%3Csvg width='84' height='84' viewBox='0 0 84 84' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23b8944f' stroke-width='1.1' stroke-opacity='0.42'%3E%3Cpath d='M0 20H30V0M30 42H58V20H84M20 84V54H52V32M62 84V62H84M42 42V64M0 62H22'/%3E%3C/g%3E%3Cg fill='%23b8944f' fill-opacity='0.55'%3E%3Ccircle cx='30' cy='20' r='2.2'/%3E%3Ccircle cx='58' cy='20' r='2.2'/%3E%3Ccircle cx='52' cy='32' r='2.2'/%3E%3Ccircle cx='42' cy='64' r='2.2'/%3E%3Ccircle cx='62' cy='62' r='2.2'/%3E%3Ccircle cx='22' cy='62' r='2.2'/%3E%3C/g%3E%3C/svg%3E"); } /* --- 0 · the ROOT element ------------------------------------------------- A legacy rule sets `html{background:#d8e7f0 !important}`. When carries its own background, the body background no longer propagates to the canvas, so that blue shows through wherever the body box does not paint. `html:root` is (0,1,1) and beats a bare `html` at (0,0,1), both !important. Same field on both elements, both attachment:fixed, so the tiles align exactly and the double-draw is invisible. */ html:root{ background-color:var(--hx-field) !important; background-image:var(--hx-chip) !important; background-repeat:repeat !important; background-attachment:fixed !important} /* --- 1 · the field ------------------------------------------------------- */ html body.hx-field{ background-color:var(--hx-field) !important; background-image:var(--hx-chip) !important; background-repeat:repeat !important; background-attachment:fixed !important; color:var(--hx-text)} /* --- 2 · the floating page card ----------------------------------------- */ body.hx-field .hx-page.hx-page{ max-width:1280px;margin:0 auto 46px !important; background:var(--hx-bone) !important; border:1px solid var(--hx-hair);border-top:0; border-radius:0 0 10px 10px; box-shadow:0 24px 70px -30px rgba(15,12,8,.45),0 3px 10px -4px rgba(15,12,8,.12); overflow:hidden} /* --- 3 · chrome stack, House Edge order, thin bars ----------------------- */ .hx-chrome{max-width:1280px;margin:18px auto 0;border-radius:10px 10px 0 0; overflow:hidden;box-shadow:0 18px 46px -28px rgba(15,12,8,.5); border:1px solid var(--hx-hair);border-bottom:0} .hx-chrome .hx-eco{background:var(--hx-ink);color:var(--hx-gold);display:flex; align-items:center;font-size:10px;letter-spacing:.14em;font-weight:600; font-family:Oswald,Jost,system-ui,sans-serif;flex-wrap:nowrap !important;overflow:hidden} .hx-chrome .hx-eco .hx-lab{ background:linear-gradient(135deg,var(--hx-gold-lt),var(--hx-gold)); color:#160f02;padding:9px 14px;text-transform:uppercase;letter-spacing:.18em; font-weight:800;white-space:nowrap;box-shadow:inset 0 1px 0 rgba(255,255,255,.5)} .hx-chrome .hx-eco .hx-lnks{display:flex;gap:8px;padding:0 12px;flex-wrap:nowrap; overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none} .hx-chrome .hx-eco .hx-lnks::-webkit-scrollbar{display:none} .hx-chrome .hx-eco .hx-lnks a{color:rgba(244,239,228,.74);text-decoration:none; padding:6px 12px;border-radius:999px;white-space:nowrap; transition:color .28s var(--hx-ease),background-color .28s var(--hx-ease), transform .28s var(--hx-ease),box-shadow .28s var(--hx-ease)} .hx-chrome .hx-eco .hx-lnks a:hover,.hx-chrome .hx-eco .hx-lnks a:focus-visible{ color:#fff;background:rgba(201,169,110,.18);transform:translateY(-1px); box-shadow:0 6px 18px -10px rgba(201,169,110,.9),inset 0 0 0 1px rgba(201,169,110,.42)} .hx-chrome .hx-circ{background:var(--hx-ink-2);color:var(--hx-gold);display:flex; align-items:center;justify-content:space-between;padding:7px 16px;gap:12px; font-size:9.5px;letter-spacing:.18em;font-weight:500;white-space:nowrap; flex-wrap:nowrap !important;overflow:hidden; font-family:Oswald,Jost,system-ui,sans-serif} .hx-chrome .hx-circ > span:first-child{overflow:hidden;text-overflow:ellipsis} .hx-chrome .hx-circ .hx-live{display:flex;align-items:center;gap:6px} .hx-chrome .hx-circ .hx-dot{width:5px;height:5px;border-radius:50%;background:#7ed957; display:inline-block;animation:hxPulse 2.4s ease-in-out infinite} @keyframes hxPulse{0%,100%{opacity:.45}50%{opacity:1}} .hx-chrome .hx-wire{display:flex;align-items:center;background:var(--hx-bone); border-bottom:1px solid var(--hx-hair);overflow:hidden} .hx-chrome .hx-wire .hx-lbl{flex:0 0 auto;padding:7px 14px;font-size:9px;font-weight:700; letter-spacing:.18em;text-transform:uppercase;color:#7a1620;background:#f5efe1; white-space:nowrap;font-family:Oswald,Jost,system-ui,sans-serif} .hx-chrome .hx-wire .hx-vp{overflow:hidden;flex:1 1 auto} .hx-chrome .hx-wire .hx-track{display:inline-flex;white-space:nowrap; will-change:transform;animation:hxScroll 90s linear infinite} .hx-chrome .hx-wire .hx-vp:hover .hx-track{animation-play-state:paused} .hx-chrome .hx-wire .hx-seg{font-size:11px;color:var(--hx-text);font-weight:600; padding:7px 0;font-family:Jost,system-ui,sans-serif} .hx-chrome .hx-wire .hx-seg b{color:#7a1620;font-weight:700;text-transform:uppercase; letter-spacing:.04em;margin-right:3px} @keyframes hxScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}} /* thin the injected bands */ .hx-chrome .p4-mq{height:26px !important;min-height:0 !important; font-size:9.5px !important;letter-spacing:.16em !important; border-bottom:1px solid var(--hx-hair) !important} .hx-chrome .p4-vb{height:40px !important;min-height:0 !important} .hx-chrome .p4-vb .p4-vb-label{font-size:11px !important} .hx-chrome .p4-nav{border-top:1px solid var(--hx-hair) !important} .hx-chrome .p4-nav .p4-nav-in{min-height:42px !important;flex-wrap:nowrap !important; padding-top:0 !important;padding-bottom:0 !important} /* --- 4 · edge cards, measured off House Edge (104x89 / 6px / r11 / glass) - */ .hx-chrome .p4-edges{padding:8px 16px !important;gap:5px !important; align-items:stretch !important;flex-wrap:nowrap !important;overflow-x:auto; scrollbar-width:none;-ms-overflow-style:none} .hx-chrome .p4-edges::-webkit-scrollbar{display:none} .hx-chrome .p4-edgescroll{padding:0 !important;gap:5px !important; align-items:stretch !important;flex-wrap:nowrap !important} .hx-chrome .p4-edges .p4-ec, .hx-chrome .p4-edges .p4-safety{ flex:0 0 auto !important;width:112px !important;min-width:112px !important; padding:6px !important;border-radius:11px !important;min-height:0 !important; background:rgba(255,255,255,.58) !important; -webkit-backdrop-filter:blur(12px) saturate(155%); backdrop-filter:blur(12px) saturate(155%); border:1px solid rgba(15,12,8,.06) !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 5px 14px -11px rgba(15,12,8,.35) !important; display:flex !important;flex-direction:column !important; justify-content:center !important;align-items:center !important; gap:2px !important;text-align:center !important; transition:transform .28s var(--hx-ease),box-shadow .28s var(--hx-ease), background-color .28s var(--hx-ease) !important} .hx-chrome .p4-edges .p4-ec:hover, .hx-chrome .p4-edges .p4-safety:hover{ transform:translateY(-3px) !important;background:rgba(255,255,255,.88) !important; box-shadow:inset 0 0 0 1px rgba(201,169,110,.5),0 14px 28px -16px rgba(15,12,8,.5) !important} .hx-chrome .p4-edges .p4-ec *, .hx-chrome .p4-edges .p4-safety *{line-height:1.25 !important} .hx-chrome .p4-edges .p4-ec > :first-child{font-size:15px !important; font-weight:400 !important;opacity:.9} .hx-chrome .p4-edges .p4-ec b,.hx-chrome .p4-edges .p4-ec strong, .hx-chrome .p4-edges .p4-safety b,.hx-chrome .p4-edges .p4-safety strong{ font-size:8.4px !important;font-weight:700 !important;letter-spacing:.08em !important; text-transform:uppercase !important;color:#1a1a1a !important} .hx-chrome .p4-edges .p4-ec small,.hx-chrome .p4-edges .p4-ec span:last-child, .hx-chrome .p4-edges .p4-safety small{font-size:9.6px !important;color:#5f5d57 !important; font-weight:400 !important} .hx-chrome .p4-edges .p4-safety .ic{display:none !important} /* --- 5 · the 30-second Event Program Estimator CTA in the nav ---------------------------- */ .hx-chrome .p4-nav .hx-quick{ display:inline-flex;align-items:center;gap:6px;white-space:nowrap; margin-left:8px;padding:9px 15px;border-radius:999px; font-family:Jost,system-ui,sans-serif;font-size:11px;font-weight:700; letter-spacing:.09em;text-transform:uppercase;text-decoration:none; background-image:var(--hx-chip),linear-gradient(135deg,#f2f7ff 0%,#e4eeff 55%,#dbe8fb 100%); background-size:84px 84px,auto;color:#12305e !important; border:1px solid rgba(47,109,246,.26); box-shadow:inset 0 1px 0 rgba(255,255,255,.8),inset 0 -1px 0 rgba(15,12,8,.08), 0 8px 18px -10px rgba(15,12,8,.45); transition:transform .28s var(--hx-ease),box-shadow .28s var(--hx-ease)} .hx-chrome .p4-nav .hx-quick:hover{transform:translateY(-2px); box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 16px 26px -12px rgba(15,12,8,.5)} @media (max-width:900px){.hx-chrome .p4-nav .hx-quick{display:none}} /* --- 6 · lighter interior: kill the legacy blue slabs + navy type -------- */ body.hx-field .hx-page.hx-page section{background:transparent !important} body.hx-field .hx-page.hx-page section.warmbg{background:#fbf9f5 !important} body.hx-field .hx-page.hx-page .cpx-hero.hx-chip, body.hx-field .hx-page.hx-page .hero.hx-chip{ background:linear-gradient(180deg,#fbf8f2 0%,#fdfcfa 100%) !important; position:relative;isolation:isolate;overflow:hidden} /* the legacy hero paints image/veil layers on top - neutralise them */ body.hx-field .hx-page.hx-page .hero.hx-chip .hero-bg, body.hx-field .hx-page.hx-page .hero.hx-chip .hero-bg-2, body.hx-field .hx-page.hx-page .hero.hx-chip .hero-veil{ display:none !important} body.hx-field .hx-page.hx-page .cpx-hero.hx-chip::before, body.hx-field .hx-page.hx-page .hero.hx-chip::before{ content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.55; background-image:var(--hx-chip);background-repeat:repeat; -webkit-mask-image:radial-gradient(ellipse at 50% 0%,#000 0%,rgba(0,0,0,.5) 55%,transparent 86%); mask-image:radial-gradient(ellipse at 50% 0%,#000 0%,rgba(0,0,0,.5) 55%,transparent 86%)} /* TYPE: measured off the newest live article 2026-09-01 (/stash/articles/dermorepubliq-2026-09-01t15-1), not from notes. .art-headline Jost 900 38.4px lh 1.08 ls -0.768px #081a32 .art-sub Jost 500 19.2px lh 1.45 #0a2240 .art-body Jost 450 16.8px lh 1.55 #0a2240 .art-takeaway Cormorant 400 17.6px lh 1.5 #0f0d0a The articles are NAVY, not charcoal - an earlier pass here guessed charcoal and was wrong. Cormorant survives for takeaways only, never for body. */ body.hx-field .hx-page.hx-page h1, body.hx-field .hx-page.hx-page .hero h1, body.hx-field .hx-page.hx-page .hero-h1{ font-family:Jost,"Helvetica Neue",Arial,sans-serif !important; font-weight:900 !important;line-height:1.08 !important; letter-spacing:-.02em !important;color:#081a32 !important; text-transform:none !important} body.hx-field .hx-page.hx-page h2, body.hx-field .hx-page.hx-page .faq-section-title{ font-family:Jost,"Helvetica Neue",Arial,sans-serif !important; font-weight:900 !important;line-height:1.15 !important; letter-spacing:-.018em !important;color:#081a32 !important} body.hx-field .hx-page.hx-page h3{ font-family:Jost,"Helvetica Neue",Arial,sans-serif !important; font-weight:600 !important;line-height:1.4 !important;color:#081a32 !important} body.hx-field .hx-page.hx-page p, body.hx-field .hx-page.hx-page li{ font-family:Jost,"Helvetica Neue",Arial,sans-serif !important; font-size:16.8px !important;font-weight:450 !important; line-height:1.55 !important;color:#0a2240 !important} body.hx-field .hx-page.hx-page .lede, body.hx-field .hx-page.hx-page .hero-lede{ font-family:Jost,"Helvetica Neue",Arial,sans-serif !important; font-size:19.2px !important;font-weight:500 !important; line-height:1.45 !important;color:#0a2240 !important} /* the italic serif flourish in headings joins the Jost headline */ body.hx-field .hx-page.hx-page h1 em, body.hx-field .hx-page.hx-page h2 em, body.hx-field .hx-page.hx-page h3 em, body.hx-field .hx-page.hx-page .hero-h1 em{ font-family:Jost,"Helvetica Neue",Arial,sans-serif !important; font-weight:900 !important;font-style:normal !important; color:var(--hx-gold-dk) !important} body.hx-field .hx-page.hx-page h1 em, body.hx-field .hx-page.hx-page h2 em, body.hx-field .hx-page.hx-page h3 em{color:var(--hx-gold-dk) !important;font-style:normal} /* --- 7 · the sheen sweep on boxes (surface itself is set inline by the JS) */ body.hx-field .hx-page.hx-page .hx-box::after{ content:"";position:absolute;top:0;left:0;width:100%;height:100%; pointer-events:none;z-index:1;border-radius:inherit; background:linear-gradient(105deg,transparent 36%,rgba(255,255,255,.62) 48%, rgba(255,255,255,.20) 55%,transparent 66%); transform:translateX(-120%);transition:transform .9s var(--hx-ease);opacity:0} body.hx-field .hx-page.hx-page .hx-box:hover::after{transform:translateX(120%);opacity:1} body.hx-field .hx-page.hx-page .hx-box > *{position:relative;z-index:2} /* --- 8 · ACCORDION BOXES + LEGACY CTA SLABS ----------------------------- Measured defects on /faq: · .faq-item padded 22/24/24 AND .faq-q padded 20/24 inside it - the two stack, so a one-line question rendered a 112px box. The item is the SHELL (the JS gives it surface + shadow); .faq-q owns the padding. · .faq-q-text rendered in Cormorant Garamond 17.6px. pops4 is the SANS system - serif microtype was already removed as a defect elsewhere. · question / answer / icon all inherited the legacy navy #0a2240. These carry 5 classes, so they outrank the legacy element-led rules. */ body.hx-field .hx-page.hx-page .faq-item.hx-box{padding:0 !important} body.hx-field .hx-page.hx-page .faq-item .faq-q{ padding:15px 20px !important;gap:16px !important;align-items:center !important} body.hx-field .hx-page.hx-page .faq-item .faq-q-text{ font-family:Jost,"Helvetica Neue",Arial,sans-serif !important; font-size:16px !important;font-weight:500 !important;line-height:1.45 !important; letter-spacing:normal !important;color:#0a2240 !important;width:auto !important;flex:1 1 auto} body.hx-field .hx-page.hx-page .faq-item .faq-a{ font-family:Jost,"Helvetica Neue",Arial,sans-serif !important; font-size:16.8px !important;font-weight:450 !important;line-height:1.55 !important; color:#0a2240 !important;padding-left:20px !important;padding-right:20px !important} body.hx-field .hx-page.hx-page .faq-item .faq-a p, body.hx-field .hx-page.hx-page .faq-item .faq-a li{ font-size:16.8px !important;color:#0a2240 !important} body.hx-field .hx-page.hx-page .faq-item .faq-icon{ color:var(--hx-gold-dk) !important;flex:0 0 auto; transition:transform .28s var(--hx-ease)} /* section numbers + titles off the legacy navy */ body.hx-field .hx-page.hx-page .faq-section-num{color:var(--hx-gold-dk) !important} /* the hero CTA slabs: navy blocks -> the estate gloss/3D language */ body.hx-field .hx-page.hx-page .hero .btn{ border-radius:10px !important;padding:13px 22px !important; font-family:Jost,"Helvetica Neue",Arial,sans-serif !important; font-size:12px !important;font-weight:700 !important;letter-spacing:.09em !important; text-transform:uppercase !important;border:1px solid transparent !important; background-size:84px 84px,auto !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.7),inset 0 -2px 0 rgba(15,12,8,.12), 0 10px 22px -12px rgba(15,12,8,.5) !important; transition:transform .28s var(--hx-ease),box-shadow .28s var(--hx-ease) !important} body.hx-field .hx-page.hx-page .hero .btn:hover{transform:translateY(-3px) !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.85),0 18px 30px -14px rgba(15,12,8,.5) !important} body.hx-field .hx-page.hx-page .hero .btn.btn-primary, body.hx-field .hx-page.hx-page .hero .btn.btn-gold{ background-image:var(--hx-chip-hot), linear-gradient(135deg,#d4b26a 0%,#c9a96e 52%,#b8944f 100%) !important; border-color:#b8944f !important;color:#1f1707 !important} body.hx-field .hx-page.hx-page .hero .btn.btn-ghost{ background-image:var(--hx-chip), linear-gradient(135deg,#fbf8f2 0%,#f5f1e8 55%,#efe9dd 100%) !important; border-color:rgba(15,12,8,.14) !important;color:#081a32 !important} /* category chips: hairline pills, not red outlines */ body.hx-field .hx-page.hx-page .cat-chip{ font-family:Jost,"Helvetica Neue",Arial,sans-serif !important; font-size:10.5px !important;font-weight:600 !important;letter-spacing:.09em !important; border-radius:999px !important;padding:7px 13px !important; background:rgba(255,255,255,.7) !important;color:#0a2240 !important; border:1px solid rgba(15,12,8,.10) !important; transition:all .24s var(--hx-ease) !important} body.hx-field .hx-page.hx-page .cat-chip:hover, body.hx-field .hx-page.hx-page .cat-chip.active{ background:rgba(201,169,110,.16) !important;color:#081a32 !important; border-color:rgba(201,169,110,.5) !important} /* --- 9 · KILL THE STRAY RULES ------------------------------------------- The legacy theme draws lines that read as clutter on a light page: · .hero border-bottom 3px #c4392d (the thick red line) · .cat-chips border top AND bottom 1px rgba(196,57,45,.55) · p border-top 1px rgba(196,98,45,.1) on EVERY paragraph Section heads keep their hairline - that one is structural. */ body.hx-field .hx-page.hx-page .hero{border-bottom:0 !important} body.hx-field .hx-page.hx-page .cat-chips{border-top:0 !important; border-bottom:0 !important;padding-top:10px !important;padding-bottom:10px !important} body.hx-field .hx-page.hx-page p{border-top:0 !important;border-bottom:0 !important} body.hx-field .hx-page.hx-page .faq-section-head{ border-bottom:1px solid rgba(15,12,8,.08) !important} /* the answer body sits flush under the question, no divider */ body.hx-field .hx-page.hx-page .faq-item .faq-a{border-top:0 !important} /* --- 10 · the rest of the red hairlines --------------------------------- 31 elements still carried border-top/bottom in #c4392d / #c4622d - sidebar links, sidebar CTA, buttons. They read as random lines on a light page. */ body.hx-field .hx-page.hx-page .sidebar-link, body.hx-field .hx-page.hx-page .sidebar-cta, body.hx-field .hx-page.hx-page .btn, body.hx-field .hx-page.hx-page .faq-list, body.hx-field .hx-page.hx-page .faq-section, body.hx-field .hx-page.hx-page .cat-chips, body.hx-field .hx-page.hx-page .cta-tile, body.hx-field .hx-page.hx-page .cta-tile-kicker{ border-top:0 !important;border-bottom:0 !important; border-left:0 !important;border-right:0 !important} /* inline links carried a RED bottom border as their underline. Keep the affordance, drop the alarm colour - gold hairline, gold on hover. */ body.hx-field .hx-page.hx-page .faq-a a, body.hx-field .hx-page.hx-page p a, body.hx-field .hx-page.hx-page li a{ border-bottom:1px solid rgba(201,169,110,.55) !important; border-top:0 !important;border-left:0 !important;border-right:0 !important; color:#0a2240 !important;text-decoration:none !important; transition:border-color .24s var(--hx-ease),color .24s var(--hx-ease)} body.hx-field .hx-page.hx-page .faq-a a:hover, body.hx-field .hx-page.hx-page p a:hover, body.hx-field .hx-page.hx-page li a:hover{ border-bottom-color:var(--hx-gold-dk) !important;color:var(--hx-gold-dk) !important} body.hx-field .hx-page.hx-page .sidebar-link{ font-family:Jost,"Helvetica Neue",Arial,sans-serif !important; font-size:12px !important;font-weight:600 !important;letter-spacing:.06em !important; color:#0a2240 !important;border-radius:8px !important} body.hx-field .hx-page.hx-page .sidebar-link.active, body.hx-field .hx-page.hx-page .sidebar-link:hover{ background:rgba(201,169,110,.14) !important;color:#081a32 !important} @media (prefers-reduced-motion:reduce){ .hx-chrome .hx-wire .hx-track,.hx-chrome .hx-circ .hx-dot{animation:none} .hx-chrome .p4-edges .p4-ec,.hx-chrome .p4-edges .p4-safety, body.hx-field .hx-page.hx-page .hx-box::after{transition:none !important} .hx-chrome .p4-edges .p4-ec:hover,.hx-chrome .p4-edges .p4-safety:hover{transform:none !important} } @media (max-width:1320px){ .hx-chrome{margin-left:12px;margin-right:12px} body.hx-field .hx-page.hx-page{margin-left:12px !important;margin-right:12px !important} } @media (max-width:640px){ .hx-chrome{margin:0;border-radius:0;border-left:0;border-right:0} body.hx-field .hx-page.hx-page{margin:0 0 24px !important;border-radius:0; border-left:0;border-right:0} }