/* website-ui-critical.css * Render-blocking copy of the layout CSS that assets/website-ui.js injects at runtime. * Linked in so first paint == final layout (fixes CLS ~0.12 from post-paint injection). * SOURCE OF TRUTH = website-ui.js style.textContent — if you edit the rules there, regenerate this file. */ :root { --sq-cream: #FBF6EE; --sq-card: #FEFCF9; --sq-sand: #E8D5B7; --sq-ink: #3D2B1F; --sq-muted: #7A5C4F; --sq-terracotta: #C4704B; --sq-teal: #2D9B8E; --sq-gold: #F0C75E; --sq-shell: min(100% - 2rem, 88rem); } html { max-width: 100%; overflow-x: hidden; scroll-padding-top: 5rem; } *, *::before, *::after { box-sizing: border-box; } body { background-color: var(--sq-cream); color: var(--sq-ink); overflow-x: hidden; } img, svg { max-width: 100%; } h1, h2, h3, p, li, a, span { overflow-wrap: break-word; } .page-shell, body > header > div:first-child, body > footer > div, body > main.max-w-3xl, body > main.max-w-4xl, body > main.max-w-5xl, body > section > div.max-w-2xl, body > section > div.max-w-3xl, body > section > div.max-w-4xl, body > section > div.max-w-5xl { width: var(--sq-shell) !important; max-width: none !important; margin-inline: auto !important; } body > header > div:first-child { padding-inline: 0 !important; } body > footer nav { display: flex; flex-wrap: wrap; row-gap: 0.75rem; max-width: 100%; } body > header nav[aria-label], body > header nav[aria-label] a { white-space: nowrap; } body > header nav[aria-label] { gap: clamp(0.85rem, 1.35vw, 1.5rem) !important; min-width: 0; } body > header nav[aria-label] a { font-size: clamp(0.78rem, 0.72vw, 0.93rem); } body > header a[data-analytics-language-switch] { min-height: 40px; } .sq-skip-link { position: absolute; inset-inline-start: -9999px; top: 0; z-index: 60; display: inline-flex; align-items: center; min-height: 44px; background: var(--sq-ink); color: #fff; font-weight: 800; padding: 0.6rem 1rem; border-radius: 0 0 10px 10px; text-decoration: none; } .sq-skip-link:focus { inset-inline-start: 0; } .sq-nav-more { position: relative; } .sq-nav-more > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 0.2rem; } .sq-nav-more > summary::-webkit-details-marker { display: none; } .sq-nav-more > summary::after { content: "\\25BE"; font-size: 0.7em; } .sq-nav-more[open] > summary::after { content: "\\25B4"; } .sq-nav-more-tray { position: absolute; inset-inline-end: 0; top: calc(100% + 0.6rem); display: none; flex-direction: column; gap: 0.15rem; min-width: 12rem; background: var(--sq-card); border: 1px solid var(--sq-sand); border-radius: 14px; padding: 0.5rem; box-shadow: 0 18px 34px rgba(61, 43, 31, 0.14); z-index: 50; } .sq-nav-more-tray a { white-space: nowrap; padding: 0.45rem 0.6rem; border-radius: 8px; } .sq-nav-more[open] > .sq-nav-more-tray { display: flex; } .sq-nav-more-tray a:hover { background: rgba(196, 112, 75, 0.08); } .sq-mobile-menu-toggle { align-items: center; background: rgba(254, 252, 249, 0.78); border: 1px solid var(--sq-sand); border-radius: 999px; color: var(--sq-ink); cursor: pointer; display: none; flex: 0 0 auto; height: 42px; justify-content: center; width: 42px; } .sq-mobile-menu-toggle svg { height: 19px; width: 19px; } .sq-mobile-menu-panel { background: rgba(251, 246, 238, 0.98); border-top: 1px solid var(--sq-sand); box-shadow: 0 18px 34px rgba(61, 43, 31, 0.1); display: none; } .sq-mobile-menu-panel[data-open="true"] { display: block; } .sq-mobile-menu-panel nav { display: flex; flex-direction: column; gap: 0.75rem; padding-block: 1rem; width: var(--sq-shell); margin-inline: auto; } .sq-mobile-menu-panel a { color: var(--sq-muted); font-size: 0.98rem; font-weight: 800; line-height: 1.35; padding-block: 0.22rem; text-decoration: none; } .sq-mobile-menu-panel a[aria-current="page"], .sq-mobile-menu-panel a:hover { color: var(--sq-ink); } a, button, summary, [role="button"] { -webkit-tap-highlight-color: transparent; } a:focus-visible, button:focus-visible, summary:focus-visible, [role="button"]:focus-visible { outline: 3px solid var(--sq-ink); outline-offset: 3px; box-shadow: 0 0 0 3px rgba(240, 199, 94, 0.95); } a[data-platform-hidden="true"] { display: none !important; } .device-recommended-cta { position: relative; min-height: 44px; } .device-recommended-badge { display: inline-flex; align-items: center; margin-inline-start: 0.55rem; border-radius: 999px; background: #F0C75E; color: #3D2B1F; font-size: 0.68rem; font-weight: 900; line-height: 1; padding: 0.28rem 0.48rem; white-space: nowrap; } [data-infographic-zoom] { cursor: zoom-in; transition: transform 180ms ease, box-shadow 180ms ease; } [data-infographic-zoom]:hover { transform: translateY(-1px); } .infographic-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 0.9rem; } .infographic-action { min-height: 44px; border-radius: 999px; border: 1px solid rgba(196, 112, 75, 0.28); background: rgba(251, 246, 238, 0.92); color: #3D2B1F; cursor: pointer; font-size: 0.875rem; font-weight: 900; padding: 0.7rem 1rem; transition: background 180ms ease, border-color 180ms ease, transform 180ms ease; } .infographic-action:hover { background: rgba(196, 112, 75, 0.1); border-color: rgba(196, 112, 75, 0.5); } .sirah-modal { align-items: center; background: rgba(61, 43, 31, 0.82); display: none; inset: 0; justify-content: center; padding: 1rem; position: fixed; z-index: 100; } .sirah-modal[data-open="true"] { display: flex; } .sirah-modal__panel { background: #FBF6EE; border: 1px solid rgba(232, 213, 183, 0.95); border-radius: 24px; box-shadow: 0 28px 80px rgba(0, 0, 0, 0.34); max-height: min(92vh, 58rem); max-width: min(96vw, 68rem); overflow: hidden; width: 100%; } .sirah-modal__bar { align-items: center; border-bottom: 1px solid rgba(232, 213, 183, 0.9); display: flex; gap: 0.7rem; justify-content: space-between; padding: 0.75rem; } .sirah-modal__title { color: #3D2B1F; font-weight: 900; line-height: 1.2; } .sirah-modal__controls { display: flex; flex-wrap: wrap; gap: 0.4rem; justify-content: flex-end; } .sirah-modal__button { min-height: 44px; min-width: 44px; border: 1px solid rgba(196, 112, 75, 0.3); border-radius: 999px; background: #FEFCF9; color: #3D2B1F; cursor: pointer; font-weight: 900; padding: 0.58rem 0.85rem; } .sirah-modal__body { max-height: calc(min(92vh, 58rem) - 4.75rem); overflow: auto; padding: 1rem; } .sirah-modal__content { margin: 0 auto; transform-origin: top center; width: min(100%, 58rem); } .sirah-modal__content img { display: block; height: auto; width: 100%; } @media (max-width: 520px) { .sirah-modal__bar { align-items: stretch; flex-direction: column; } .sirah-modal__controls { justify-content: stretch; } .sirah-modal__button { flex: 1; } } @media (max-width: 1279px) { body > header > div:first-child { gap: 0.75rem !important; } body > header nav[aria-label]:not(.sq-mobile-menu-nav) { display: none !important; } .sq-mobile-menu-toggle { display: inline-flex; } } @media (max-width: 640px) { :root { --sq-shell: min(100% - 1.25rem, 88rem); } body > header > div:first-child { min-height: 4rem; } body > header a[data-analytics-language-switch] { font-size: 0.82rem; padding-inline: 0.7rem !important; } footer nav { justify-content: center; } } @media (max-width: 479px) { body > header > div:first-child, header .page-shell { width: min(100% - 1rem, 88rem) !important; } header [data-mobile-download="true"] { display: none !important; } h1 { font-size: clamp(2rem, 9vw, 2.35rem) !important; line-height: 1.14 !important; } } @media (prefers-reduced-motion: reduce) { [data-infographic-zoom], .infographic-action, .sirah-modal__button { transition: none; } }