/* Google Sans and Google Sans Code, the typefaces labs.google uses (SIL Open Font License, see
   /assets/fonts/googlesans-OFL.txt), served from this site so no visitor data goes to a font CDN. */
@font-face { font-family: 'Google Sans'; font-style: italic; font-weight: 400; font-display: swap; src: url("/assets/fonts/google-sans-400-italic-latin-ext.woff2") format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Google Sans'; font-style: italic; font-weight: 400; font-display: swap; src: url("/assets/fonts/google-sans-400-italic-latin.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Google Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/google-sans-400-latin-ext.woff2") format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Google Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/google-sans-400-latin.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Google Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/google-sans-500-latin-ext.woff2") format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Google Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/google-sans-500-latin.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Google Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/fonts/google-sans-600-latin-ext.woff2") format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Google Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/fonts/google-sans-600-latin.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Google Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/fonts/google-sans-700-latin-ext.woff2") format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Google Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/fonts/google-sans-700-latin.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Google Sans Code'; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/google-sans-code-500-latin-ext.woff2") format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Google Sans Code'; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/google-sans-code-500-latin.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Google Sans Code'; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/fonts/google-sans-code-700-latin-ext.woff2") format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Google Sans Code'; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/fonts/google-sans-code-700-latin.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
:root {
  --font-sans: "Google Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "Google Sans Code", ui-monospace, "SF Mono", Menlo, monospace;
}

/* Site-wide chrome after labs.google: a see-through header with a full-screen menu, and a footer
   with falling house shapes, a giant wordmark, and a mono legal line. Loaded by every page; it only
   relies on the colour tokens from styles.css (or the homepage's inlined critical CSS). */

:root {
  --labs-yellow: #fbc344; --labs-orange: #f9824c; --labs-blue: #4f92fb; --labs-pink: #f8b8f4; --labs-green: #67e887; --labs-violet: #b8a2f7;
  --labs-ease: cubic-bezier(.76, 0, .24, 1);
  --header-h: 88px;
  /* Seven shapes share the line: the five houses and the two Italian landmarks. */
  /* The footer shapes are big enough to pile up, as on labs.google; --drop-room is the height kept free for the pile. */
  --drop-size: clamp(100px, 20vw, 340px);
  /* Seven houses never fit side by side, so they always settle two deep; 1.4 sizes let that pile reach up
     over the social links. 2.3 holds the second layer, and a tower on top of it, below them. */
  --drop-room: calc(var(--drop-size) * 2.3);
}

.labs-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* House silhouettes: filled and stroked in the same colour, so the thick round stroke softens every corner. */
.labs-house { display: block; width: 100%; height: auto; overflow: visible; }
.labs-house path { fill: currentColor; fill-rule: evenodd; stroke: currentColor; stroke-width: 40; stroke-linejoin: round; }
/* The tower is a stepped skyscraper with a spire and three floors of windows (holes in the shape), for developers
   alongside the private houses. */
/* Italian landmarks (Delapouite, game-icons.net, CC BY 3.0) are detailed drawings, so they are filled without
   the rounding stroke; their viewBoxes are cropped to the drawing so they stand on the same line as the houses. */
.labs-landmark { display: block; width: 100%; height: auto; }
.labs-landmark path { fill: currentColor; }
/* Big shapes float the way they do on labs.google: a slow loop across and up and down, and a separate,
   shorter sway so the two never line up the same way twice. */
@keyframes labs-drift { from { transform: translate3d(0, 0, 0) rotate(var(--r, 0deg)); } to { transform: translate3d(0, -16px, 0) rotate(calc(var(--r, 0deg) + 3deg)); } }
@keyframes labs-float-path {
  0%, 100% { translate: 0 0; }
  25% { translate: var(--fx, 3rem) var(--fy, 4rem); }
  50% { translate: calc(var(--fx, 3rem) * -.4) calc(var(--fy, 4rem) * -.8); }
  75% { translate: calc(var(--fx, 3rem) * -1) calc(var(--fy, 4rem) * .5); }
}
@keyframes labs-float-turn {
  0%, 100% { rotate: var(--r, 0deg); }
  50% { rotate: calc(var(--r, 0deg) + var(--fr, 10deg)); }
}
.labs-shell { width: min(100% - 48px, 1100px); margin-inline: auto; }

/* ---------- Header: no bar, just a progressive blur and a warm glow behind the logo ---------- */
.labs-header {
  position: sticky; top: 0; z-index: 60;
  --ink: var(--label-primary); --ink-soft: color-mix(in srgb, var(--label-primary) 72%, transparent);
  transition: transform .5s var(--labs-ease);
}
.labs-header[data-hidden="true"] { transform: translateY(-100%); }
.labs-header[data-surface="dark"], .labs-header[data-menu-open="true"] { --ink: #fff; --ink-soft: rgba(255, 255, 255, .74); }
.labs-header__blur { position: absolute; inset: 0 0 -32px; z-index: -1; pointer-events: none; }
.labs-header__blur::after { content: ""; position: absolute; inset: 0; background: linear-gradient(var(--labs-page-bg, var(--bg-primary)), transparent); opacity: .7; transition: opacity .4s; }
.labs-header[data-surface="dark"] .labs-header__blur::after, .labs-header[data-menu-open="true"] .labs-header__blur::after { opacity: 0; }
.labs-header__blur-layer { position: absolute; inset: 0; }
.labs-header__blur-layer--1 { -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent); }
.labs-header__blur-layer--2 { -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); -webkit-mask-image: linear-gradient(#000 50%, transparent 80%); mask-image: linear-gradient(#000 50%, transparent 80%); }
.labs-header__blur-layer--3 { -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); -webkit-mask-image: linear-gradient(#000 35%, transparent 65%); mask-image: linear-gradient(#000 35%, transparent 65%); }
.labs-header__blur-layer--4 { -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); -webkit-mask-image: linear-gradient(#000 20%, transparent 50%); mask-image: linear-gradient(#000 20%, transparent 50%); }
.labs-header__blur-layer--5 { -webkit-backdrop-filter: blur(32px); backdrop-filter: blur(32px); -webkit-mask-image: linear-gradient(#000 8%, transparent 35%); mask-image: linear-gradient(#000 8%, transparent 35%); }
.labs-header[data-menu-open="true"] .labs-header__blur { display: none; }
.labs-header__glow { position: absolute; top: -190px; left: -150px; z-index: -1; width: 420px; height: 360px; border-radius: 50%; background: var(--labs-yellow); filter: blur(60px); opacity: .55; pointer-events: none; animation: labs-drift 9s ease-in-out infinite alternate; transition: opacity .4s; }
.labs-header[data-surface="dark"] .labs-header__glow { opacity: .3; }
/* In dark mode the glow is turned down the same way, so light text in front of it stays readable. */
:root[data-theme="dark"] .labs-header__glow { opacity: .3; }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) .labs-header__glow { opacity: .3; } }
:root .labs-header[data-menu-open="true"] .labs-header__glow, :root .labs-header[data-hidden="true"] .labs-header__glow { opacity: 0; }

.labs-header__inner { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 24px; width: min(100% - 48px, 1100px); min-height: var(--header-h); margin-inline: auto; }
.labs-header .seo-brand { display: inline-flex; flex: none; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; }
.labs-header .seo-brand img { display: block; flex: none; }
.labs-header .seo-brand__copy { display: flex; flex-direction: column; gap: 1px; line-height: 1.15; }
.labs-header .seo-brand__name { color: var(--ink); font-size: 22px; font-weight: 800; transition: color .3s; }
.labs-header[data-surface="light"]:not([data-menu-open="true"]) .seo-brand__name { color: var(--brand-text, var(--label-primary)); }
.labs-header .seo-brand__tagline { color: var(--ink); font-size: 10px; letter-spacing: .02em; }
.labs-header nav { display: flex; align-items: center; gap: 24px; transition: opacity .3s, visibility .3s; }
.labs-header nav a { color: var(--ink-soft); font-size: 15px; font-weight: 500; text-decoration: none; transition: color .3s; }
.labs-header nav a:hover, .labs-header nav a[aria-current="page"] { color: var(--ink); }
.labs-header nav a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 7px; }
/* With the menu open only the close button stays in the header; the logo, links, and language switch fade out
   so they never sit on top of the big menu links. */
.labs-header[data-menu-open="true"] :is(nav, .seo-brand, .labs-header__end > a) { opacity: 0; visibility: hidden; }
.labs-header .seo-brand { transition: opacity .3s, visibility .3s; }
.labs-header__end { display: flex; flex: none; align-items: center; gap: 12px; }
.labs-header__end > a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 18px; border: 2px solid var(--ink); border-radius: 999px; background: var(--ink); color: var(--labs-ink-contrast, var(--bg-primary)); font-size: 15px; font-weight: 700; text-decoration: none; transition: opacity .3s, visibility .3s, filter .2s; }
.labs-header__end > a:hover { filter: brightness(.9); }
.labs-header[data-surface="dark"] .labs-header__end > a { --labs-ink-contrast: #111; }
.labs-menu-button { position: relative; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; width: 48px; height: 48px; padding: 0; border: 0; background: none; color: var(--ink); cursor: pointer; }
.labs-menu-button__line { display: block; width: 32px; height: 1.5px; background: currentColor; transition: transform .5s var(--labs-ease); }
.labs-menu-button[aria-expanded="true"] .labs-menu-button__line:first-child { transform: translateY(4.25px) rotate(45deg); }
.labs-menu-button[aria-expanded="true"] .labs-menu-button__line:last-child { transform: translateY(-4.25px) rotate(-45deg); }
.labs-header :focus-visible { outline: 3px solid var(--ios-blue, #0a84ff); outline-offset: 3px; }

/* ---------- Menu: a black sheet that grows out of the menu button, with huge links ---------- */
.labs-menu {
  position: fixed; inset: 0; z-index: 55; display: flex; align-items: center; overflow: auto;
  background: #000; color: #fff;
  clip-path: circle(0 at var(--menu-x, calc(100% - 48px)) var(--menu-y, 44px));
  transition: clip-path .9s var(--labs-ease);
}
.labs-menu[hidden] { display: none; }
.labs-menu.is-open { clip-path: circle(150vmax at var(--menu-x, calc(100% - 48px)) var(--menu-y, 44px)); }
.labs-menu__shapes { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.labs-menu__shape { position: absolute; color: #fff; opacity: .1; transform: scale(.7) rotate(var(--r)); transition: transform 1.4s var(--labs-ease); }
/* The menu's houses float the whole time the menu is open, as on labs.google, each at its own pace. */
.labs-menu__shape .labs-house { --fx: 2.5rem; --fy: 3.5rem; --fr: 8deg; animation: labs-float-path var(--d, 14s) ease-in-out infinite, labs-float-turn calc(var(--d, 14s) * .75) ease-in-out infinite; }
.labs-menu__shape--1 .labs-house { --d: 17s; --fr: -10deg; }
.labs-menu__shape--2 .labs-house { --d: 12s; }
.labs-menu.is-open .labs-menu__shape { transform: scale(1) rotate(var(--r)); }
.labs-menu__shape--0 { --r: -24deg; top: -22vmax; left: -8vmax; width: 60vmax; }
.labs-menu__shape--1 { --r: 0deg; top: 24%; right: -20vmax; width: 58vmax; }
.labs-menu__shape--2 { --r: 18deg; bottom: -30vmax; left: 14%; width: 52vmax; }
.labs-menu__nav { position: relative; width: min(100% - 48px, 1100px); margin-inline: auto; padding-block: calc(var(--header-h) + 16px) 48px; }
.labs-menu__nav ul { margin: 0; padding: 0; list-style: none; }
.labs-menu__nav li { overflow: hidden; }
.labs-menu__nav li a { display: inline-block; padding-block: .1em; color: #fff; font-size: clamp(40px, 9.2vw, 140px); font-weight: 500; letter-spacing: -.03em; line-height: 1.02; text-decoration: none; transform: translateY(110%); transition: transform .9s cubic-bezier(.2, .8, .2, 1) calc(.2s + var(--i) * .06s), color .25s; }
.labs-menu.is-open .labs-menu__nav li a { transform: none; }
.labs-menu__nav li a:hover, .labs-menu__nav li a:focus-visible { transform: translateX(.12em); transition-delay: 0s; }
.labs-menu__nav li a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: .06em; text-underline-offset: .12em; }
.labs-menu__nav li:nth-child(1) a:hover { color: var(--labs-yellow); }
.labs-menu__nav li:nth-child(2) a:hover { color: var(--labs-orange); }
.labs-menu__nav li:nth-child(3) a:hover { color: var(--labs-blue); }
.labs-menu__nav li:nth-child(4) a:hover { color: var(--labs-pink); }
.labs-menu__nav li:nth-child(5) a:hover { color: var(--labs-green); }
.labs-menu__more { display: flex; flex-wrap: wrap; gap: 12px 32px; margin: 40px 0 0; opacity: 0; transition: opacity .6s .6s; }
.labs-menu.is-open .labs-menu__more { opacity: 1; }
.labs-menu__more a { color: rgba(255, 255, 255, .78); font-family: var(--font-mono); font-size: 15px; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; }
.labs-menu__more a:hover { color: #fff; text-decoration: underline; }
.labs-menu :focus-visible { outline: 3px solid var(--labs-yellow); outline-offset: 4px; }
html.labs-menu-open { overflow: hidden; }

/* ---------- Falling houses ---------- */
/* Without the script the houses simply stand in a row on the line. The script lets them fall and be thrown. */
.labs-drops { position: absolute; right: 0; bottom: 0; left: 0; z-index: 0; display: flex; flex-wrap: wrap-reverse; align-items: flex-end; justify-content: center; pointer-events: none; }
.labs-drop { display: flex; flex: none; align-items: flex-end; width: var(--drop-size); height: var(--drop-size); }
/* The skyscraper stands a size above the houses around it. */
.labs-drop[data-shape="tower"] { width: calc(var(--drop-size) * 1.35); height: calc(var(--drop-size) * 1.35); }
.labs-drop--yellow { color: var(--labs-yellow); }
.labs-drop--orange { color: var(--labs-orange); }
.labs-drop--blue { color: var(--labs-blue); }
.labs-drop--pink { color: var(--labs-pink); }
.labs-drop--green { color: var(--labs-green); }
/* Picking a filter in the carousel paints every house in that filter's colour, one of them a lighter tint,
   as on labs.google; "All" brings the mix of colours back. */
.labs-drop { transition: color .6s var(--labs-ease); }
body[data-category="buyers"] .labs-drop { color: var(--labs-yellow); }
body[data-category="sellers"] .labs-drop { color: var(--labs-blue); }
body[data-category="developers"] .labs-drop { color: var(--labs-orange); }
body[data-category="agencies"] .labs-drop { color: var(--labs-pink); }
body[data-category="providers"] .labs-drop { color: var(--labs-violet); }
body[data-category="buyers"] .labs-drop:nth-child(3n+2) { color: color-mix(in srgb, var(--labs-yellow) 50%, #fff); }
body[data-category="sellers"] .labs-drop:nth-child(3n+2) { color: color-mix(in srgb, var(--labs-blue) 50%, #fff); }
body[data-category="developers"] .labs-drop:nth-child(3n+2) { color: color-mix(in srgb, var(--labs-orange) 50%, #fff); }
body[data-category="agencies"] .labs-drop:nth-child(3n+2) { color: color-mix(in srgb, var(--labs-pink) 50%, #fff); }
body[data-category="providers"] .labs-drop:nth-child(3n+2) { color: color-mix(in srgb, var(--labs-violet) 50%, #fff); }
/* On touch screens a vertical swipe over the pile still scrolls the page; sideways drags throw a house. */
@media (pointer: coarse) { .labs-drops.is-live .labs-drop { touch-action: pan-y; } }
.labs-drops.is-live { top: 0; display: block; }
.labs-drops.is-live .labs-drop { position: absolute; top: 0; left: 0; pointer-events: auto; cursor: grab; touch-action: none; will-change: transform; }
/* They appear just under the copy rather than above it, so they fade in instead of popping. */
.labs-drops.is-live .labs-drop { animation: labs-drop-in .5s var(--labs-ease) both; }
@keyframes labs-drop-in { from { opacity: 0; } }
.labs-drops.is-live .labs-drop.is-held { cursor: grabbing; }
/* Small screens: an evenly spaced row whose houses drop in one after another. */
/* On inner pages the houses land in a band at the top of the footer, dropping in from over the page above. */
.labs-drops-zone { position: relative; z-index: 2; height: calc(var(--drop-room) + 120px); border-bottom: 1px solid var(--label-primary); }
/* Inner pages put the social links straight above this strip; the extra 80px keeps a tower stacked on the
   pile below them on wide screens. Phones pile one layer lower, so they keep the tighter strip. */
@media (max-width: 700px) { .labs-drops-zone { height: calc(var(--drop-room) + 40px); } }
.labs-drops-zone .labs-drops.is-live { top: min(-40vh, -260px); }

/* ---------- Footer: links, a giant wordmark, and a mono legal line ---------- */
.labs-footer { overflow-x: clip; border: 0; background: var(--labs-page-bg, var(--bg-primary)); transition: background-color .8s var(--labs-ease); color: var(--label-primary); }
.labs-footer a { color: var(--label-primary); text-decoration: none; }
.labs-footer__row { display: flex; align-items: center; justify-content: space-between; gap: 16px 40px; padding-block: 22px 8px; }
.labs-footer .labs-footer__label { flex: none; max-width: none; margin: 0; color: var(--label-primary); font-size: 18px; font-weight: 600; }
.labs-footer__row nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px 32px; max-width: none; }
.labs-footer__row nav a, .labs-footer__row nav button { color: color-mix(in srgb, var(--label-primary) 70%, transparent); font-size: 18px; }
.labs-footer__row nav a:hover { color: var(--label-primary); }
.labs-footer__row nav button { padding: 0; border: 0; background: none; font: inherit; cursor: pointer; text-decoration: underline; }
/* Sized so the word always fits its column (it is about 3.5 times as wide as its font size) and centred;
   the tracking is tight but leaves the r and t apart, and the nudge left offsets it after the last letter. */
.labs-footer__wordmark { color: var(--label-primary); font-size: min(calc((100vw - 48px) / 3.6), 305px); font-weight: 700; letter-spacing: -.035em; text-align: center; translate: -.018em 0; line-height: .86; margin-top: -.06em; padding-bottom: .1em; pointer-events: none; user-select: none; }
.labs-footer__legal { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 56px; padding-block: 18px 28px; border-top: 1px solid var(--label-primary); }
.labs-footer__brand { font-size: 20px; font-weight: 800; letter-spacing: -.02em; }
.labs-footer__legal-links { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 56px; }
.labs-footer__legal-links a, .labs-footer__legal-links button { font-family: var(--font-mono); font-size: 15px; letter-spacing: .08em; text-transform: uppercase; }
.labs-footer__legal-links button { padding: 0; border: 0; background: none; color: var(--label-primary); cursor: pointer; }
.labs-footer__credit a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.labs-footer .labs-footer__fine { flex-basis: 100%; max-width: none; margin: 8px 0 0; color: color-mix(in srgb, var(--label-primary) 72%, transparent); font-size: 12px; line-height: 1.55; }
.labs-footer :focus-visible { outline: 3px solid var(--ios-blue, #0a84ff); outline-offset: 3px; }

/* ---------- Small screens ---------- */
/* Below 1100px the header is a single row (logo, language, menu button); the five launch links live in the
   full-screen menu instead of crowding the header. */
@media (max-width: 1100px) {
  :root { --header-h: 76px; }
  .labs-header nav { display: none; }
}
@media (max-width: 850px) {
  .labs-footer__row { flex-direction: column; align-items: flex-start; }
  .labs-footer__row nav { justify-content: flex-start; }
  .labs-footer__row nav a { font-size: 16px; }
  .labs-footer__legal-links { gap: 12px 28px; }
  /* Touch: footer links are 18-20px tall; padding lifts each to the 24px WCAG 2.2 minimum (2.5.8). */
  .labs-footer__row nav a, .labs-footer__row nav button, .labs-footer__legal-links a, .labs-footer__legal-links button, .labs-footer__brand { display: inline-block; padding-block: 4px; }
}
@media (max-width: 700px) {
  /* Phones: room for the row of houses and a little stacking. */
  :root { --drop-size: 23vw; --drop-room: calc(var(--drop-size) * 1.85); }
  .labs-drops { gap: 0 1vw; }
}
@media (max-width: 520px) {
  /* A long "back" link (legal and demo pages) drops to its own row rather than pushing the menu off screen. */
  .labs-header__inner { flex-wrap: wrap; row-gap: 4px; padding-block: 8px; }
  .labs-header__end { margin-left: auto; }
  .labs-header .seo-brand__tagline { display: none; }
  .labs-header__end > a { padding-inline: 13px; font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  .labs-header__glow { animation: none; }
  .labs-header, .labs-menu, .labs-menu__shape, .labs-menu__nav li a, .labs-menu__more { transition: none; }
  .labs-menu__shape .labs-house { animation: none; }
}

/* Type as on labs.google: Google Sans at regular and medium weights, never heavy, with gentle tracking on
   the big headings. Strong enough to beat the older per-page heading rules. */
:is(.labs-page, .labs-skin) :is(h1, h2, h3, h4) { font-weight: 500 !important; letter-spacing: -.02em !important; }
:is(.labs-page, .labs-skin) :is(.seo-button, .button, .pricing-button, .labs-header__end > a, button) { font-weight: 500; }

/* ---------- Social links: outlined circles with the network's mark, as on labs.google ---------- */
.labs-socials { display: flex; justify-content: center; gap: 16px; margin-top: 48px; }
.labs-social { display: grid; place-items: center; width: 56px; height: 56px; border: 1.5px solid color-mix(in srgb, var(--label-primary) 45%, transparent); border-radius: 50%; color: var(--label-primary); transition: background-color .3s var(--labs-ease), border-color .3s var(--labs-ease); }
.labs-social svg { display: block; fill: currentColor; }
.labs-social:hover { border-color: var(--label-primary); background: color-mix(in srgb, var(--label-primary) 8%, transparent); }
.labs-social:focus-visible { outline: 3px solid var(--labs-blue); outline-offset: 3px; }
/* On inner pages the row sits at the top of the footer, above the houses, and stays clickable over them. */
.labs-socials--footer { position: relative; z-index: 3; margin-block: 56px 0; }

/* ---------- Page colours follow the carousel filters ---------- */
/* The homepage sets data-category on the body when a filter is picked; the pages for one audience carry
   theirs in the markup (buyers yellow, sellers blue, agencies pink). Shared pages keep the mixed "All"
   look. The colour tints the page, the big shapes, the glow behind the logo, and the footer houses. */
:root[data-theme="light"] body[data-category="buyers"] { --labs-page-bg: #fdf4e6; --labs-pill-idle: #fde3a0; }
:root[data-theme="light"] body[data-category="sellers"] { --labs-page-bg: #ecf2fe; --labs-pill-idle: #c8d9fd; }
:root[data-theme="light"] body[data-category="developers"] { --labs-page-bg: #fdefe8; --labs-pill-idle: #fccbb2; }
:root[data-theme="light"] body[data-category="agencies"] { --labs-page-bg: #fdf0fc; --labs-pill-idle: #f8d2f5; }
:root[data-theme="light"] body[data-category="providers"] { --labs-page-bg: #f3effe; --labs-pill-idle: #ddd2fb; }
body[data-category="buyers"] { --page-colour: var(--labs-yellow); }
body[data-category="sellers"] { --page-colour: var(--labs-blue); }
body[data-category="developers"] { --page-colour: var(--labs-orange); }
body[data-category="agencies"] { --page-colour: var(--labs-pink); }
body[data-category="providers"] { --page-colour: var(--labs-violet); }
body[data-category]:not([data-category="all"]) .labs-header__glow { background: var(--page-colour); }
body.labs-skin[data-category] ::before, body.labs-skin[data-category] ::after { --fill: var(--page-colour) !important; }