/* Generated from the Claude Design source: hover/focus states, prop defaults, image slots. */
body { --ac: #3D8DE6; --cta: #2A6FC0; --cta-hover: #2360A8; }
.px-slot { display: block; width: 100%; background: var(--paper-soft); }
.px-slot--empty { background: var(--paper-soft); }
[data-gate-toggle]:focus-visible { outline: 2px solid var(--ac); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .px-slot, [data-hero-slide] { transition: none !important; } }
.hv-1:hover { color: var(--ac) }
.hv-2:hover { background: var(--cta-hover,var(--ink-soft)) }
.hv-3:hover { background: var(--cta-hover,var(--ink-soft)); transform: translateY(-1px) }
.hv-4:hover { color: var(--ac); border-color: var(--ac) }
.hv-5:hover { border-color: var(--ink) }
.hv-6:hover { transform: translateY(-3px); box-shadow: var(--shadow-2) }
.hv-7:hover { opacity: 0.88; transform: translateY(-1px) }
.hv-8:hover { color: var(--ink) }
.fc-1:focus { border-color: var(--ink) }
.hv-9:hover { background: var(--ink-soft) }
.hv-10:hover { background: var(--ink-soft); transform: translateY(-1px) }
/* Stats row under the quality gates: four columns is too tight on phones. */
@media (max-width: 560px) { #process [style*="repeat(4,1fr)"] { grid-template-columns: repeat(2, 1fr) !important; } }
/* Half-sticky header (js/nav.js): slides away on scroll down, back on scroll up. */
.px-nav { transition: transform 280ms cubic-bezier(0.2, 0.6, 0.2, 1), box-shadow 280ms; will-change: transform; }
.px-nav--hidden { transform: translateY(-100%); }
@media (prefers-reduced-motion: reduce) { .px-nav { transition: none; } }
/* Horizontal overflow is clipped at the viewport (html), not on the page wrapper: an overflow-x:hidden
   wrapper would become the scroll container for the sticky header and stop it from sticking. */
html { overflow-x: hidden; }
/* Mobile menu (js/nav.js builds it from the nav links below 700px). */
.px-burger { display: none; appearance: none; background: none; border: 0; padding: 10px; margin: -10px -6px -10px 0; cursor: pointer; width: 44px; height: 44px; flex-direction: column; justify-content: center; align-items: center; gap: 5px; border-radius: 8px; }
.px-burger span { display: block; width: 22px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform 220ms cubic-bezier(0.2,0.6,0.2,1), opacity 160ms; }
.px-burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.px-burger.is-open span:nth-child(2) { opacity: 0; }
.px-burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.px-burger:focus-visible { outline: 2px solid var(--ac); outline-offset: 2px; }
.px-mobile-menu { display: none; border-top: 1px solid var(--line); padding: 8px clamp(20px,4vw,56px) 22px; background: rgba(250,248,243,0.96); }
.px-mobile-menu__links { display: flex; flex-direction: column; }
.px-mobile-menu__link { display: block; padding: 16px 0; border-bottom: 1px solid var(--line); font-family: var(--font-mono); font-size: 14px; font-weight: 500; line-height: 1; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); }
.px-mobile-menu__link:hover { color: var(--ac); }
.px-mobile-menu__cta { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 18px; background: var(--cta, var(--ink)); color: var(--paper); font-family: var(--font-mono); font-weight: 500; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; padding: 16px 20px; border-radius: 8px; }
.px-mobile-menu__cta:hover { background: var(--cta-hover, var(--ink-soft)); }
@media (max-width: 700px) {
  .px-burger { display: inline-flex; }
  .px-nav-cta { display: none !important; }
  .px-navlink { display: none !important; }
  .px-navlogin { display: none !important; }
  nav a[href*="get-a-test-run"] { white-space: nowrap; }
  .px-mobile-menu:not([hidden]) { display: block; animation: pxMenuIn 220ms cubic-bezier(0.2,0.6,0.2,1); }
}
@keyframes pxMenuIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .px-mobile-menu:not([hidden]) { animation: none; } .px-burger span { transition: none; } }
/* Backdrop behind the open mobile menu. Sits under the sticky nav (z-index 50). */
.px-menu-backdrop { position: fixed; inset: 0; z-index: 40; background: rgba(17,17,16,0.48); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; pointer-events: none; transition: opacity 260ms cubic-bezier(0.2,0.6,0.2,1); }
.px-menu-backdrop.is-on { opacity: 1; pointer-events: auto; }
.px-nav--menu-open { box-shadow: 0 24px 60px rgba(17,17,16,0.18); }
/* Lock scrolling on the root only. overflow on <body> would turn it into a scroll container and the sticky header would
   then stick to the top of the document instead of the viewport, so the open menu ends up off screen when scrolled. */
html.px-menu-lock { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .px-menu-backdrop { transition: none; } }
/* The header is translucent by design; make it solid while the menu is open so the backdrop does not tint it. */
.px-nav--menu-open, .px-nav--menu-open .px-mobile-menu { background: var(--paper) !important; }
/* Sections switched off in /admin (js/media.js, manifest.hidden) and the links that point at them. */
.px-hidden { display: none !important; }
/* The hidden attribute must win over class rules that set display (editor palette, image bar, "load more"). */
[hidden] { display: none !important; }
/* Cookie consent banner, built by js/analytics.js. */
.px-consent { position: fixed; left: clamp(16px, 2vw, 28px); right: clamp(16px, 2vw, 28px); bottom: clamp(16px, 2vw, 28px); z-index: 200; margin: 0 0 0 auto; max-width: 560px; background: var(--paper); color: var(--ink); border: 1px solid var(--line-strong); box-shadow: 0 24px 60px rgba(17,17,16,0.18); padding: 20px 22px; display: flex; flex-wrap: wrap; gap: 14px 18px; align-items: center; justify-content: space-between; font-family: var(--font-sans); font-size: 14px; line-height: 1.5; animation: pxConsentIn 260ms cubic-bezier(0.2,0.6,0.2,1); }
.px-consent p { margin: 0; flex: 1 1 240px; color: var(--char); }
.px-consent a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.px-consent__actions { display: flex; gap: 8px; }
.px-consent button { appearance: none; cursor: pointer; font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; padding: 12px 16px; border-radius: 8px; border: 1px solid var(--line-strong); background: transparent; color: var(--ink); transition: background 160ms, color 160ms, border-color 160ms; }
.px-consent button:hover { border-color: var(--ink); }
.px-consent button.is-primary { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.px-consent button.is-primary:hover { background: var(--ink-soft, var(--ink)); }
@keyframes pxConsentIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (max-width: 480px) { .px-consent__actions { width: 100%; } .px-consent button { flex: 1; } }
@media (prefers-reduced-motion: reduce) { .px-consent { animation: none; } }
/* Social icons in the footer link row (js/social.js renders only the networks that have a URL). */
.px-social { display: flex; gap: 14px; align-items: center; margin-left: auto; }
.px-social__link { display: inline-flex; color: var(--graphite); transition: color 160ms; line-height: 0; }
.px-social__link:hover { color: var(--ink); }
/* Footer on small screens: one left-aligned stack – logo, links, icons, hairline, text. The row that holds the logo
   and the text block dissolves (display: contents) so its children can be ordered with the link row. */
@media (max-width: 700px) {
  .px-footer > div { padding-top: 26px !important; gap: 18px !important; }
  .px-footer-row { display: contents !important; }
  .px-footer-row > img { order: -1; height: 38px !important; width: auto !important; align-self: flex-start; }
  .px-footer-nav { order: 0; gap: 12px 22px; }
  .px-social { flex-basis: 100%; margin-left: 0; gap: 18px; margin-top: 4px; }
  .px-footer-meta { order: 1; width: 100%; align-items: flex-start !important; text-align: left !important; border-top: 1px solid var(--line); padding-top: 18px; }
  .px-footer-line { display: block; }        /* one phrase per line: tagline / "Built for e-commerce.", company / cities */
  .px-footer-sep { display: none; }
}

/* Customer Login icon in the menu: a small label appears under the icon on hover and keyboard focus. */
.px-navlogin::after { content: attr(data-tip); position: absolute; top: calc(100% + 10px); left: 50%; transform: translate(-50%, -4px); padding: 6px 9px; border-radius: 6px; background: var(--ink); color: var(--paper); font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 140ms cubic-bezier(0.2,0.6,0.2,1), transform 140ms cubic-bezier(0.2,0.6,0.2,1); z-index: 60; }
.px-navlogin:hover::after, .px-navlogin:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) { .px-navlogin::after { transition: none; } }

/* Start-page kicker "AI image studio · Stockholm | Gothenburg": js/index.js wraps the part after the last "·" so the
   place names never break in the middle; on narrow screens they take their own line, aligned with the text. */
.px-kicker-place { white-space: nowrap; }
@media (max-width: 560px) {
  .px-kicker-sep { display: none; }
  .px-kicker-place { flex-basis: 100%; padding-left: 40px; }
}