/* Homepage sections after labs.google: a dark hero slideshow, a wheel of cards with colour-coded
   filters, a row of contract questions, and a closing call to action where houses fall onto the
   footer line. The header, menu, footer, and falling houses live in labs-chrome.css. */

/* ---------- Tokens ---------- */
.labs-page {
  --labs-hero-bg: #0e0e10;
  --labs-card-bg: #fff;
  --labs-amber-bg: linear-gradient(135deg, #fff8e1, #ffecb3);   --labs-amber-accent: #8a4f00;
  --labs-coral-bg: linear-gradient(135deg, #fbe9e7, #ffccbc);   --labs-coral-accent: #9a2d0c;
  --labs-mint-bg: linear-gradient(135deg, #e0f2f1, #b2dfdb);    --labs-mint-accent: #005a4f;
  --labs-indigo-bg: linear-gradient(135deg, #e8eaf6, #c5cae9);  --labs-indigo-accent: #283593;
  --labs-violet-bg: linear-gradient(135deg, #f3e5f5, #e1bee7);  --labs-violet-accent: #6a1b9a;
  --labs-cyan-bg: linear-gradient(135deg, #e0f7fa, #b2ebf2);    --labs-cyan-accent: #005c6b;
}
:root[data-theme="dark"] .labs-page {
  --labs-card-bg: #1c1c1e;
  --labs-amber-bg: linear-gradient(135deg, #2d2000, #423000);   --labs-amber-accent: #ffd54f;
  --labs-coral-bg: linear-gradient(135deg, #33120a, #4e1c10);   --labs-coral-accent: #ff8a65;
  --labs-mint-bg: linear-gradient(135deg, #042723, #093c36);    --labs-mint-accent: #4db6ac;
  --labs-indigo-bg: linear-gradient(135deg, #101432, #1a204c);  --labs-indigo-accent: #9fa8da;
  --labs-violet-bg: linear-gradient(135deg, #240a2f, #3a134a);  --labs-violet-accent: #ce93d8;
  --labs-cyan-bg: linear-gradient(135deg, #002329, #003842);    --labs-cyan-accent: #4dd0e1;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .labs-page {
    --labs-card-bg: #1c1c1e;
    --labs-amber-bg: linear-gradient(135deg, #2d2000, #423000);   --labs-amber-accent: #ffd54f;
    --labs-coral-bg: linear-gradient(135deg, #33120a, #4e1c10);   --labs-coral-accent: #ff8a65;
    --labs-mint-bg: linear-gradient(135deg, #042723, #093c36);    --labs-mint-accent: #4db6ac;
    --labs-indigo-bg: linear-gradient(135deg, #101432, #1a204c);  --labs-indigo-accent: #9fa8da;
    --labs-violet-bg: linear-gradient(135deg, #240a2f, #3a134a);  --labs-violet-accent: #ce93d8;
    --labs-cyan-bg: linear-gradient(135deg, #002329, #003842);    --labs-cyan-accent: #4dd0e1;
  }
}

.labs-accent { font-style: italic; font-weight: 400; letter-spacing: -.02em; }
/* White text in "difference" mode reads dark on the page and changes colour where a shape passes behind it.
   The heading itself is visually hidden for assistive technology; the blended copy is decorative and inert,
   because contrast checkers cannot evaluate blend modes. */
.labs-blend { display: block; color: #fff; mix-blend-mode: difference; }


/* The homepage's inlined critical CSS (generated from the old app's styles.css) forces every h1 to 32-36px
   and h2 to 25-27px with !important on narrow screens. The section headings reassert their own sizes. */
.labs-page .labs-hero h1, .labs-page .labs-hero h2 { font-size: clamp(38px, 7.4vw, 104px) !important; }
.labs-page .labs-section-header h2, .labs-page .labs-terms__intro h2 { font-size: clamp(34px, 6.4vw, 76px) !important; }
.labs-page .labs-outro h2 { font-size: clamp(36px, 7vw, 88px) !important; }

/* The homepage header floats over the full-screen hero instead of taking space above it. */
.labs-page .labs-header { position: fixed; inset: 0 0 auto; }

/* ---------- Hero: full-screen, dark in both themes, with drifting cards and a slideshow ---------- */
.labs-page .labs-hero {
  position: relative; isolation: isolate; overflow: clip; display: grid; place-items: center;
  min-height: 100svh; padding: calc(var(--header-h) + 32px) 0 128px; align-content: center;
  background: radial-gradient(1200px 620px at 50% 115%, #3a2414, transparent 62%), var(--labs-hero-bg); color: #fff;
}
.labs-hero__stage { position: relative; z-index: 1; display: grid; text-align: center; }
.labs-hero__slide { grid-area: 1 / 1; align-self: center; transition: opacity .8s var(--labs-ease), transform .8s var(--labs-ease), visibility .8s; }
.labs-hero__slide:not(.is-active) { opacity: 0; visibility: hidden; transform: translateY(28px); }
.labs-hero .seo-eyebrow { color: #f4b48c; }
.labs-hero h1, .labs-hero h2 { max-width: 14ch; margin: 0 auto; color: #fff; font-size: clamp(42px, 7.4vw, 104px); letter-spacing: -.05em; line-height: .98; text-wrap: balance; }
.labs-hero .seo-lede { max-width: 640px; margin: 26px auto 0; color: rgba(255, 255, 255, .84); }
.labs-hero .seo-actions { justify-content: center; margin-top: 34px; }
.labs-hero .seo-button { border-color: #fff; background: #fff; color: #111; }
.labs-hero .seo-button--secondary { background: transparent; color: #fff; }
/* Buttons light up yellow (secondary ones pink) with dark text on hover, as on the inner pages, instead of
   the old global link hover that turned their text blue. */
.labs-page .seo-button:hover, .labs-page .seo-button:focus-visible { filter: none; border-color: var(--labs-yellow); background: var(--labs-yellow); color: #1d1d1f; }
.labs-page .seo-button--secondary:hover, .labs-page .seo-button--secondary:focus-visible { border-color: var(--labs-pink); background: var(--labs-pink); color: #1d1d1f; }
.labs-hero :focus-visible { outline-color: var(--labs-yellow); }

/* "Help us grow on G", inside the hero: one white pill that links to Google's source preferences, with a
   little house on each side that keeps adding floors, both roofs pointing in at it. */
.labs-page .labs-grow { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; gap: 14px; justify-self: center; margin-top: 44px; padding: 0; border: 0; background: none; }
.labs-grow__pill { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 22px; border-radius: 999px; background: #fff; box-shadow: 0 10px 30px -18px rgba(0, 0, 0, .6); color: #1d1d1f; text-decoration: none; transition: transform .3s var(--labs-ease); }
.labs-grow__pill:hover { transform: scale(1.04); }
.labs-page .labs-grow .labs-grow__title { color: #1d1d1f; font-size: 16px; font-weight: 500; white-space: nowrap; }
.labs-grow__g { display: block; flex: none; }
/* The house is drawn upright (roof on top) and turned so the roof points at the pill: the left one right, the
   right one left. */
.labs-grow__house { display: flex; flex: none; flex-direction: column; align-items: center; justify-content: flex-end; width: 24px; height: 34px; }
.labs-grow__house--in { transform: rotate(90deg); }
.labs-grow__house--back { transform: rotate(-90deg); }
.labs-grow__roof { width: 24px; height: 11px; background: var(--labs-pink); clip-path: polygon(50% 0, 100% 100%, 0 100%); animation: labs-roof 3.6s var(--labs-ease) infinite; }
.labs-grow__floor { width: 18px; height: 0; border-radius: 2px; animation: labs-floor 3.6s var(--labs-ease) infinite; }
.labs-grow__floor:nth-of-type(2) { background: var(--labs-green); animation-delay: .9s; }
.labs-grow__floor:nth-of-type(3) { background: var(--labs-blue); animation-delay: .45s; }
.labs-grow__floor:nth-of-type(4) { background: var(--labs-yellow); animation-delay: 0s; }
/* Floors pop in from the ground up, hold, then the house starts again. */
@keyframes labs-floor { 0% { height: 0; margin-top: 0; } 12%, 80% { height: 6px; margin-top: 2px; } 92%, 100% { height: 0; margin-top: 0; } }
@media (prefers-reduced-motion: reduce) { .labs-grow__pill { transition: none; } }
@keyframes labs-roof { 0%, 30% { transform: translateY(0); } 36% { transform: translateY(-3px); } 42%, 100% { transform: translateY(0); } }

.labs-hero__floaters { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0; visibility: hidden; transform: scale(1.06); transition: opacity 1s var(--labs-ease), transform 1.4s var(--labs-ease), visibility 1s; }
/* Each slide brings its own set of cards: the outgoing set drifts out while the next one settles in. */
.labs-hero__floaters.is-active { opacity: 1; visibility: visible; transform: none; }
.labs-hero__floaters:not(.is-active) .labs-floater { translate: 0 40px; }
.labs-floater { transition: translate 1.4s var(--labs-ease); }
/* Placeholder art; real footage goes in [data-media-slot] as an <img> or <video> that fills the slot. */
[data-media-slot] > img, [data-media-slot] > video { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
.labs-floater { position: absolute; width: var(--w, 200px); animation: labs-drift var(--d, 8s) ease-in-out infinite alternate; }
.labs-floater__art { display: grid; place-items: end center; aspect-ratio: 1; }
/* Bare shapes, no frames: bright labs colours so they read on the dark hero. */
.labs-floater__art .labs-house { width: 78%; }
.labs-floater__art .labs-landmark { width: 96%; }
.labs-floater[data-tone="amber"] { color: var(--labs-yellow); }
.labs-floater[data-tone="coral"] { color: var(--labs-orange); }
.labs-floater[data-tone="mint"] { color: var(--labs-green); }
.labs-floater[data-tone="indigo"] { color: var(--labs-blue); }
.labs-floater[data-tone="violet"] { color: var(--labs-violet); }
.labs-floater[data-tone="cyan"] { color: var(--labs-pink); }
.labs-floater--0 { --w: 210px; --r: -8deg; --d: 9s; top: 16%; left: 3%; }
.labs-floater--1 { --w: 230px; --r: 7deg; --d: 11s; top: 12%; right: 4%; }
.labs-floater--2 { --w: 180px; --r: 6deg; --d: 10s; bottom: 12%; left: 7%; }
.labs-floater--3 { --w: 200px; --r: -6deg; --d: 8s; bottom: 9%; right: 7%; }
.labs-floater--4 { --w: 130px; --r: 10deg; --d: 12s; top: 7%; left: 30%; opacity: .35; filter: blur(3px); }
.labs-floater--5 { --w: 140px; --r: -12deg; --d: 13s; bottom: 4%; right: 30%; opacity: .35; filter: blur(3px); }
/* The landmark cards sit at the far edges, clear of the headline. */
.labs-floater--6 { --w: 160px; --r: 12deg; --d: 10s; top: 46%; left: -44px; }
.labs-floater--7 { --w: 160px; --r: -10deg; --d: 12s; top: 44%; right: -36px; }

.labs-hero__controls { position: absolute; bottom: 36px; left: 50%; z-index: 2; display: flex; align-items: center; gap: 12px; transform: translateX(-50%); }
.labs-hero__controls[hidden] { display: none; }
.labs-hero .labs-round-btn { border-color: rgba(255, 255, 255, .3); color: #fff; }
.labs-hero .labs-round-btn:hover { background: #fff; color: #111; }
.labs-hero__dots { display: flex; align-items: center; gap: 2px; }
.labs-hero__dot { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer; transition: width .5s var(--labs-ease); }
.labs-hero__dot > span { position: relative; display: block; width: 8px; height: 8px; overflow: hidden; border-radius: 99px; background: rgba(255, 255, 255, .45); transition: width .5s var(--labs-ease); }
.labs-hero__dot[aria-current="true"] { width: 88px; }
.labs-hero__dot[aria-current="true"] > span { width: 72px; background: rgba(255, 255, 255, .25); }
/* The fill doubles as the slideshow timer: when it finishes, the script moves to the next slide. */
.labs-hero__dot[aria-current="true"] > span::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: #fff; transform-origin: left; animation: labs-progress 7s linear forwards; }
/* The hero fills the screen, so hovering can't pause it (the pointer is nearly always over it). The pause
   button does, and so does keyboard focus inside the hero; a mouse click that leaves focus behind doesn't. */
.labs-hero.is-paused .labs-hero__dot > span::after, .labs-hero:has(:focus-visible) .labs-hero__dot > span::after { animation-play-state: paused; }
@keyframes labs-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.labs-hero__pause-icon { position: relative; width: 12px; height: 14px; }
.labs-hero__pause-icon::before, .labs-hero__pause-icon::after { content: ""; position: absolute; top: 0; width: 4px; height: 14px; border-radius: 1px; background: currentColor; }
.labs-hero__pause-icon::before { left: 0; }
.labs-hero__pause-icon::after { right: 0; }
.labs-hero.is-paused .labs-hero__pause-icon::before { left: 2px; width: 0; height: 0; border-radius: 0; background: none; border-block: 7px solid transparent; border-left: 11px solid currentColor; }
.labs-hero.is-paused .labs-hero__pause-icon::after { display: none; }

/* ---------- Tana, the AI guide: a short intro and four features ---------- */
.labs-tana { position: relative; isolation: isolate; overflow-x: clip; padding-block: 104px 88px; scroll-margin-top: var(--header-h); }
.labs-tana__intro { max-width: 820px; margin: 0 auto 72px; text-align: center; }
.labs-tana__eyebrow { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 20px; padding: 6px 14px 6px 10px; border-radius: 999px; background: color-mix(in srgb, var(--labs-yellow) 35%, transparent); color: var(--label-primary); font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; }
.labs-tana__spark svg { display: block; fill: currentColor; }
.labs-tana h2 { margin: 0 0 16px; font-size: clamp(36px, 6vw, 72px) !important; letter-spacing: -.045em; line-height: 1.02; text-wrap: balance; }
.labs-tana__intro > p:last-child { max-width: 640px; margin: 0 auto; color: var(--label-secondary); font-size: 18px; line-height: 1.6; }
/* What Tana does: centered headings and short lines, spaced apart, with no rules or boxes. */
.labs-tana__features { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px 64px; max-width: 880px; margin: 0 auto; padding: 0; list-style: none; text-align: center; }
.labs-tana__feature h3 { margin: 0 0 10px; color: var(--label-primary); font-size: 20px; font-weight: 500; letter-spacing: -.01em; line-height: 1.25; text-wrap: balance; }
.labs-tana__feature p { max-width: 380px; margin: 0 auto; color: var(--label-secondary); font-size: 16px; line-height: 1.55; text-wrap: pretty; }
.labs-tana__cta { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-top: 64px; text-align: center; }
.labs-tana .labs-tana__note { max-width: 560px; margin: 0; color: var(--label-secondary); font-size: 13px; line-height: 1.5; }

/* ---------- Wheel section, with colour-coded filters that also recolour and reshape the backdrop ---------- */
.labs-wheel-section { position: relative; isolation: isolate; overflow: clip; padding-block: 104px 88px; background: var(--labs-page-bg, var(--bg-primary)); transition: background-color .8s var(--labs-ease); }
.labs-wheel-section[data-category="all"] { --cat: var(--labs-green); --rot0: 12deg; --rot1: -8deg; }
.labs-wheel-section[data-category="buyers"] { --cat: var(--labs-yellow); --rot0: 38deg; --rot1: -30deg; }
.labs-wheel-section[data-category="sellers"] { --cat: var(--labs-blue); --rot0: 6deg; --rot1: -44deg; }
.labs-wheel-section[data-category="developers"] { --cat: var(--labs-orange); --rot0: -20deg; --rot1: 24deg; }
.labs-wheel-section[data-category="agencies"] { --cat: var(--labs-pink); --rot0: 28deg; --rot1: -14deg; }
.labs-wheel-section[data-category="providers"] { --cat: var(--labs-violet); --rot0: -8deg; --rot1: 36deg; }
.labs-bg-shapes { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.labs-bg-shapes__slot { position: absolute; color: var(--cat); transition: color .8s var(--labs-ease), transform 1.1s var(--labs-ease); }
.labs-bg-shapes__slot--0 { top: -150px; right: max(-220px, calc(50% - 820px)); width: 620px; transform: rotate(var(--rot0)); }
.labs-bg-shapes__slot--1 { top: 380px; left: max(-300px, calc(50% - 960px)); width: 560px; transform: rotate(var(--rot1)); }
/* The shapes behind the carousel drift by moving their position rather than by transforming them: Safari
   stops blending the heading over a layer whose transform is animating, which left it white. */
.labs-bg-shapes__slot .labs-morph { position: relative; animation: labs-float-offset 16s ease-in-out infinite; }
.labs-bg-shapes__slot--1 .labs-morph { animation-duration: 22s; animation-direction: reverse; }
@keyframes labs-float-offset { 0%, 100% { top: 0; left: 0; } 25% { top: 4.5rem; left: 3rem; } 50% { top: -3rem; left: -1.2rem; } 75% { top: 2rem; left: -3rem; } }
.labs-morph path { opacity: 0; transform: scale(.55); transform-box: fill-box; transform-origin: center; transition: opacity .6s var(--labs-ease), transform .9s var(--labs-ease); }
[data-category="all"] .labs-bg-shapes__slot--0 .labs-morph__house, [data-category="all"] .labs-bg-shapes__slot--1 .labs-morph__arch,
[data-category="buyers"] .labs-bg-shapes__slot--0 .labs-morph__arch, [data-category="buyers"] .labs-bg-shapes__slot--1 .labs-morph__twin,
[data-category="sellers"] .labs-bg-shapes__slot--0 .labs-morph__tower, [data-category="sellers"] .labs-bg-shapes__slot--1 .labs-morph__house,
[data-category="developers"] .labs-bg-shapes__slot--0 .labs-morph__twin, [data-category="developers"] .labs-bg-shapes__slot--1 .labs-morph__tower,
[data-category="agencies"] .labs-bg-shapes__slot--0 .labs-morph__house, [data-category="agencies"] .labs-bg-shapes__slot--1 .labs-morph__twin,
[data-category="providers"] .labs-bg-shapes__slot--0 .labs-morph__arch, [data-category="providers"] .labs-bg-shapes__slot--1 .labs-morph__tower { opacity: 1; transform: none; }
.labs-section-header { position: relative; max-width: 860px; margin: 0 auto 40px; text-align: center; }
.labs-section-header h2 { margin: 0 0 18px; font-size: clamp(38px, 6.4vw, 76px); letter-spacing: -.045em; line-height: 1.02; text-wrap: balance; }
.labs-section-header p { max-width: 700px; margin: 0 auto; color: var(--label-secondary); font-size: 17px; line-height: 1.6; }

/* Wheel mode, switched on by labs-home.js, which sets each card's transform and the track height. */


.labs-filter-bar[hidden] { display: none; }
.labs-filter-bar { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.labs-filter-btn { --pill: var(--labs-green); min-height: 44px; padding: 8px 22px; border: 0; border-radius: 999px; background: color-mix(in srgb, var(--label-primary) 8%, transparent); color: var(--label-primary); font: inherit; font-size: clamp(14px, 1.3vw, 18px); font-weight: 500; cursor: pointer; transition: background .4s var(--labs-ease), color .4s var(--labs-ease), transform .2s; }
.labs-filter-btn[data-filter="buyers"] { --pill: var(--labs-yellow); }
.labs-filter-btn[data-filter="sellers"] { --pill: var(--labs-blue); }
.labs-filter-btn[data-filter="developers"] { --pill: var(--labs-orange); }
.labs-filter-btn[data-filter="agencies"] { --pill: var(--labs-pink); }
.labs-filter-btn[data-filter="providers"] { --pill: var(--labs-violet); }
.labs-filter-btn:hover { background: color-mix(in srgb, var(--pill) 45%, transparent); }
.labs-filter-btn[aria-pressed="true"] { background: var(--pill); color: #1d1d1f; }
/* The filters drop in from above, tumbling and bouncing to rest, each a moment after the last. */
.labs-filter-bar[data-drop="waiting"] .labs-filter-btn { opacity: 0; transform: translateY(-240px) rotate(var(--tumble, 0deg)); }
.labs-filter-bar[data-drop="fall"] .labs-filter-btn { animation: labs-filter-drop 1.1s var(--delay, 0s) both; }
.labs-filter-btn:nth-child(1) { --tumble: -38deg; --delay: 0s; }
.labs-filter-btn:nth-child(2) { --tumble: 52deg; --delay: .08s; }
.labs-filter-btn:nth-child(3) { --tumble: -24deg; --delay: .16s; }
.labs-filter-btn:nth-child(4) { --tumble: 34deg; --delay: .24s; }
.labs-filter-btn:nth-child(5) { --tumble: -46deg; --delay: .32s; }
.labs-filter-btn:nth-child(6) { --tumble: 20deg; --delay: .4s; }
@keyframes labs-filter-drop {
  0% { opacity: 0; transform: translateY(-240px) rotate(var(--tumble)); animation-timing-function: cubic-bezier(.55, 0, 1, .45); }
  12% { opacity: 1; }
  48% { transform: translateY(0) rotate(calc(var(--tumble) * -.12)); animation-timing-function: cubic-bezier(0, .55, .45, 1); }
  66% { transform: translateY(-26px) rotate(calc(var(--tumble) * .06)); animation-timing-function: cubic-bezier(.55, 0, 1, .45); }
  80% { transform: translateY(0) rotate(0deg); animation-timing-function: cubic-bezier(0, .55, .45, 1); }
  90% { transform: translateY(-7px); animation-timing-function: cubic-bezier(.55, 0, 1, .45); }
  100% { opacity: 1; transform: none; }
}
.labs-filter-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* The chosen filter tints the whole page and the idle pills, as on labs.google. In dark mode the page
   stays dark and only the pills and shapes take the colour. */
.labs-page { background-color: var(--labs-page-bg, var(--bg-primary)); transition: background-color .8s var(--labs-ease); }
.labs-filter-btn[aria-pressed="false"] { background: var(--labs-pill-idle, color-mix(in srgb, var(--label-primary) 8%, transparent)); }

/* ---------- Contract questions, after "Life beyond the Lab" ---------- */
.labs-terms-section { position: relative; isolation: isolate; overflow-x: clip; padding-block: 104px 88px; }
.labs-terms__intro { max-width: 860px; margin: 0 auto 72px; text-align: center; }
.labs-terms__intro h2 { margin: 0 0 18px; font-size: clamp(38px, 6.4vw, 76px); letter-spacing: -.045em; line-height: 1.02; text-wrap: balance; }
.labs-terms__intro p { max-width: 760px; margin: 0 auto; color: var(--label-secondary); font-size: 17px; line-height: 1.65; }
/* The questions a contract should answer, set like the Tana list: centered text, no numbers or rules. */
.labs-questions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px 64px; max-width: 880px; margin: 0 auto; padding: 0; list-style: none; text-align: center; }
.labs-question h3 { margin: 0 0 10px; color: var(--label-primary); font-size: 20px; font-weight: 500; letter-spacing: -.01em; line-height: 1.25; text-wrap: balance; }
.labs-question p { max-width: 380px; margin: 0 auto; color: var(--label-secondary); font-size: 16px; line-height: 1.55; text-wrap: pretty; }
/* The represented-owner paragraph closes the section as plain centered text, like the questions above. */
.labs-owners-note { max-width: 680px; margin: 72px auto 0; text-align: center; }
.labs-owners-note h3 { margin: 0 0 10px; color: var(--label-primary); font-size: 20px; font-weight: 500; letter-spacing: -.01em; line-height: 1.25; }
.labs-owners-note p { margin: 0; color: var(--label-secondary); font-size: 16px; line-height: 1.55; text-wrap: pretty; }
.labs-owners-note a { color: var(--label-primary); font-weight: 700; }

/* ---------- Big floating houses behind Tana and the contract questions ---------- */
.labs-floats { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.labs-float { --fx: 5.5rem; --fy: 7.5rem; --fr: 16deg; position: absolute; width: var(--size); rotate: var(--r, 0deg); animation: labs-float-path var(--d, 16s) ease-in-out infinite, labs-float-turn calc(var(--d, 16s) * .8) ease-in-out infinite; }
.labs-float .labs-house { display: block; width: 100%; }
.labs-float--pink { color: var(--labs-pink); }
.labs-float--yellow { color: var(--labs-yellow); }
.labs-float--blue { color: var(--labs-blue); }
.labs-float--green { color: var(--labs-green); }
.labs-float--orange { color: var(--labs-orange); }
.labs-tana .labs-float--a { --size: clamp(280px, 40vw, 600px); --r: 14deg; top: 6%; right: calc(var(--size) * -.45); }
.labs-tana .labs-float--b { --size: clamp(200px, 26vw, 400px); --r: -12deg; --d: 19s; top: 36%; left: calc(var(--size) * -.42); }
.labs-terms-section .labs-float--a { --size: clamp(280px, 40vw, 600px); --r: -10deg; --d: 18s; top: 14%; left: calc(var(--size) * -.45); }
.labs-terms-section .labs-float--b { --size: clamp(200px, 26vw, 380px); --r: 16deg; --d: 15s; bottom: 8%; right: calc(var(--size) * -.4); }

/* ---------- Closing call to action and the falling houses ---------- */
.labs-outro { position: relative; isolation: isolate; overflow: clip; padding: 136px 0 calc(var(--drop-room) + 16px); border-bottom: 1px solid var(--label-primary); background: var(--labs-page-bg, var(--bg-primary)); transition: background-color .8s var(--labs-ease); }
/* The words sit above the falling houses in their normal colours; clicks and drags pass through to the
   houses except on the links. */
.labs-outro__inner { position: relative; z-index: 1; max-width: 820px; text-align: center; pointer-events: none; }
.labs-outro__inner a { pointer-events: auto; }
.labs-outro h2 { margin: 0; color: var(--label-primary); font-size: clamp(40px, 7vw, 88px); letter-spacing: -.05em; line-height: 1; text-wrap: balance; }
.labs-outro p { max-width: 620px; margin: 22px auto 0; color: var(--label-secondary); font-size: 17px; line-height: 1.6; }
.labs-outro__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 32px; }
.labs-roll-link { display: inline-flex; align-items: center; min-height: 52px; padding: 0 26px; border-radius: 999px; background: var(--labs-pill-idle, color-mix(in srgb, var(--label-primary) 8%, var(--bg-primary))); color: var(--label-primary); font-size: 16px; font-weight: 500; text-decoration: none; transition: background .4s var(--labs-ease), color .4s var(--labs-ease); }
.labs-roll-link:first-child:hover, .labs-roll-link:first-child:focus-visible { background: var(--labs-yellow); color: #1d1d1f; }
.labs-roll-link:last-child:hover, .labs-roll-link:last-child:focus-visible { background: var(--labs-pink); color: #1d1d1f; }
.labs-roll { display: inline-flex; flex-direction: column; height: 1.3em; overflow: hidden; line-height: 1.3; }
.labs-roll__row { display: block; height: 1.3em; white-space: nowrap; }
.labs-roll__row > span { display: inline-block; transition: transform .5s var(--labs-ease); transition-delay: calc(var(--i) * 16ms); }
.labs-roll-link:hover .labs-roll__row > span, .labs-roll-link:focus-visible .labs-roll__row > span { transform: translateY(-100%); }

/* ---------- Small screens ---------- */
@media (max-width: 1100px) {
  .labs-floater { --w: 150px !important; }
  .labs-floater--0 { top: 20%; left: -34px; }
  .labs-floater--1 { top: 16%; right: -40px; }
  .labs-floater--2 { bottom: 14%; left: -30px; }
  .labs-floater--3 { bottom: 12%; right: -30px; }
  .labs-floater--4, .labs-floater--5, .labs-floater--6, .labs-floater--7 { display: none; }
}

@media (max-width: 1000px) {
}

@media (max-width: 850px) {
  .labs-bg-shapes__slot--0 { width: 380px; right: -150px; top: -90px; }
  .labs-bg-shapes__slot--1 { width: 340px; left: -190px; }
  .labs-floater { --w: 116px !important; opacity: .55; }
  .labs-floater--0 { top: 150px; left: -52px; }
  .labs-floater--1 { top: 144px; right: -58px; }
  .labs-floater--2, .labs-floater--3 { display: none; }
  .labs-outro { padding-bottom: calc(var(--drop-room) + 40px); }
  /* The inlined critical CSS still carries the old calculator's "#calculator { padding: … !important }" for
     narrow screens; this section keeps that id for old links, so it needs the same weight to keep its room. */
  .labs-page .labs-outro#calculator { padding: 96px 0 calc(var(--drop-room) + 40px) !important; }
  .labs-tana__features, .labs-questions { grid-template-columns: 1fr; gap: 40px; }
  /* In one column the copy spans the screen, so the big background houses sit right under the text
     (the accent "different" landed on the green house). Faded back, they stay as colour, not competition. */
  .labs-bg-shapes, .labs-floats { opacity: .35; }
}

@media (prefers-reduced-motion: reduce) {
  .labs-float, .labs-bg-shapes__slot .labs-morph { animation: none; }
  .labs-floater, .labs-hero__dot > span::after, .labs-grow__roof { animation: none; }
  .labs-grow__floor { height: 6px; margin-top: 2px; animation: none; }
  .labs-hero__floaters, .labs-floater { transition: none; }
  .labs-hero__slide,
  .labs-bg-shapes__slot, .labs-morph path, .labs-roll__row > span, .labs-round-btn { transition: none; }
  .labs-roll-link:hover .labs-roll__row > span, .labs-roll-link:focus-visible .labs-roll__row > span { transform: none; }
}

/* A small aside inside a heading, like "(almost)". */
.labs-aside { font-size: .45em; font-weight: 400; letter-spacing: 0; opacity: .8; white-space: nowrap; }