:root { --primary-color: #0b6636; --primary-hover: #084d28; --text-dark: #111827; --text-muted: #4b5563; --bg-soft: #f7f9f8; --border-color: #e5e7eb; --font-family: 'Inter', sans-serif; } .portal-auth-gated:not(.portal-auth-ready) { visibility: hidden; } * { margin: 0; padding: 0; box-sizing: border-box; } [hidden] { display: none !important; } body { font-family: 'Inter', sans-serif; color: var(--text-dark); background: #ffffff; overflow-x: hidden; /* Break long words rather than let them widen the page. `anywhere` (not `break-word`) is required: only `anywhere` shrinks an element's min-content size, which is what stops a grid or flex track from stretching to fit one long word. */ overflow-wrap: anywhere; } /* Layout guard — every page stays within the device width. Grid and flex children default to `min-width: auto`, meaning they refuse to shrink below their content. One long unbreakable string (a location name, a registration number, an error message) therefore stretches its whole ancestor chain and pushes the layout off-screen on mobile. Clearing that minimum lets tracks shrink to the space actually available. Deliberate minimums still win: this selector scores 0-1-0, so any `min-width` set through a class (.sale-otp-row .btn, .portal-action-grid em, …) outranks it. */ body * { min-width: 0; } /* Media and form controls size from their content, so they need the same ceiling — a wide image or a