/* =====================================================================
   Scrubbr.ai landing page: nav (attached or flat -> pill) and hero.
   Tokens, nav, and button styles are copied from the current /index.html.
   ===================================================================== */

/* ---------- 1. TOKENS (same names and values as the current page) ---------- */
:root {
  --cyan: #02BFFB;
  --blue: #006CE0;
  --anchor: #0B1C21;
  --yellow: #FADA2B;
  --mint: #7BCD89;
  --page: #E3F3EC;        /* air surface: page and hero ground */
  --surface: #FFFFFF;
  --text: #0B1C21;
  --text-2: #4A5D64;
  --text-3: #7A8F96;
  --border: #D1E4DA;
  --bg-panel: #F2F8F4;    /* rounded panel under the hero (design-system "sunken") */

  --radius-panel: 120px;
  --nav-h: 56px;
  --pill-top: 16px;
  --morph: 0.42s cubic-bezier(0.22, 0.8, 0.3, 1);
}

/* ---------- 2. BASE ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { overflow-x: clip; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--bg-panel);   /* ground below the hero is the panel tone */
  color: var(--text);
  font-feature-settings: "cv11", "ss01", "ss03";
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
img, svg { display: block; }
::selection { background: var(--cyan); color: white; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 4px; }

/* ---------- 3. NAV ----------
   Fixed the whole time. Two top-state variants, picked by <html class="nav-attached | nav-flat">
   (set from ?nav= before first paint; default attached). Scrolling past 24px adds .is-pill,
   which morphs either variant into the floating pill from the current site.
   Every morphing property has a same-shape value in each state, so one transition moves
   width, height, padding, fill, border, radius, shadow and top together. */
nav.top {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  pointer-events: none;
  transition: top var(--morph);
}
nav.top.is-pill { top: var(--pill-top); }

/* Shared row box */
nav.top .nav-row {
  pointer-events: auto;
  position: relative;
  display: flex; align-items: center; justify-content: flex-start; gap: 24px;
  margin: 0 auto;
  transition:
    width var(--morph), height var(--morph), padding var(--morph), border-radius var(--morph),
    background-color var(--morph), border-color var(--morph), box-shadow var(--morph),
    -webkit-backdrop-filter var(--morph), backdrop-filter var(--morph);
}

/* Top state, variant A "attached": white bar fixed to the top edge, rounded bottom corners only. */
nav.top:not(.is-pill) .nav-row {
  width: min(1280px, calc(100% - 32px));
  height: 64px;
  padding: 0 24px;
  background: rgba(255,255,255,0.86);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid var(--border);
  border-top-color: transparent;
  border-radius: 0 0 16px 16px;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.7) inset,
    0 10px 30px -12px rgba(11,28,33,0.16),
    0 2px 6px rgba(11,28,33,0.04);
}
/* Links follow the logo; free space sits between them and the CTA group. */
nav.top .nav-links { margin-right: auto; }

/* Top state, variant B "flat": transparent bar on the page ground, pulled toward the centre. */
html.nav-flat nav.top:not(.is-pill) .nav-row {
  width: min(1120px, 100%);
  height: var(--nav-h);
  padding: 0 32px;
  justify-content: space-between;
  background: rgba(255,255,255,0);
  -webkit-backdrop-filter: blur(0px);
  backdrop-filter: blur(0px);
  border: 1px solid rgba(11,28,33,0);
  border-radius: 16px;
  box-shadow:
    0 1px 0 rgba(255,255,255,0) inset,
    0 10px 30px -12px rgba(11,28,33,0),
    0 2px 6px rgba(11,28,33,0);
}
html.nav-flat nav.top .nav-links { margin-right: 0; }

/* Pill state (both variants): copied from nav.top .nav-row on the current site. */
nav.top.is-pill .nav-row {
  /* --pill-w is measured by main.js (content width); never wider than the viewport minus gutters. */
  width: min(var(--pill-w, 770px), calc(100% - 32px));
  height: var(--nav-h);
  padding: 0 22px;
  background: rgba(255,255,255,0.86);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(11,28,33,0.06);
  border-radius: 16px;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.7) inset,
    0 10px 30px -12px rgba(11,28,33,0.16),
    0 2px 6px rgba(11,28,33,0.04);
}

.logo {
  display: flex; align-items: center; gap: 2px; flex: none;
  font-weight: 700; font-size: 22px; letter-spacing: -0.02em; color: var(--text);
}
.logo-mark-img { width: 70px; height: 70px; display: block; object-fit: contain; margin: 0 -10px; }

.nav-links {
  display: flex; gap: 6px; align-items: center; flex: none;
  font-size: 14px; color: var(--text-2); font-weight: 500;
}
.nav-links a {
  color: var(--text-2);
  padding: 8px 12px; border-radius: 999px;
  white-space: nowrap;
  transition: background .15s ease, color .15s ease;
}
.nav-links a:hover { color: var(--text); background: rgba(11,28,33,0.04); }
.nav-links-login { display: none; }

.nav-cta { display: flex; gap: 8px; align-items: center; flex: none; }
.nav-divider { width: 1px; height: 24px; background: rgba(11,28,33,0.14); margin: 0 8px; }
.nav-startlabel { font-weight: 600; font-size: 13.5px; color: var(--text); white-space: nowrap; margin-right: 2px; }
.nav-iconbtn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  border-radius: 10px;
  border: 1px solid transparent;
  transition: transform .12s ease, background .15s ease, box-shadow .15s ease;
}
.nav-iconbtn svg { width: 20px; height: 20px; display: block; }
/* tap size: the 36px buttons get an invisible 40px hit area (looks unchanged) */
.nav-iconbtn, .nav-login { position: relative; }
.nav-iconbtn::after, .nav-login::after { content: ""; position: absolute; inset: -3px; }   /* -3px: the 1px border sits outside the padding box */
.nav-iconbtn-dark {
  background: var(--blue);
  box-shadow: 0 1px 0 rgba(255,255,255,0.20) inset, 0 4px 12px -6px rgba(0,108,224,0.55);
}
.nav-iconbtn-dark:hover { background: #005ec4; }
.nav-iconbtn-light {
  background: #fff;
  border-color: rgba(11,28,33,0.10);
  box-shadow: 0 1px 2px rgba(11,28,33,0.06);
}
.nav-iconbtn-light:hover { background: #FAFCFB; }
.nav-iconbtn:active { transform: translateY(1px); }
.nav-login {
  display: inline-flex; align-items: center; justify-content: center;
  height: 36px; padding: 0 16px; margin-left: 6px;
  border-radius: 10px; border: 1px solid transparent;
  background: #1F2E33; color: #fff;
  box-shadow: 0 1px 0 rgba(255,255,255,0.2) inset, 0 6px 16px -6px rgba(11,28,33,0.55);
  font: 600 14px 'Outfit', sans-serif; letter-spacing: -0.01em;
  white-space: nowrap;
  transition: background .15s ease, box-shadow .15s ease, transform .08s ease;
}
.nav-login:hover { background: #28373C; }
.nav-login:active { transform: translateY(1px); }

/* Menu toggle: only shown in the mobile layout */
.nav-toggle {
  display: none;
  width: 40px; height: 40px; margin-left: 4px;
  align-items: center; justify-content: center;
  background: transparent; border: 0; border-radius: 10px;
  cursor: pointer; color: var(--text);
}
.nav-toggle:hover { background: rgba(11,28,33,0.05); }
.nav-toggle-bars { position: relative; width: 20px; height: 14px; }
.nav-toggle-bars span {
  position: absolute; left: 0; width: 100%; height: 2px; border-radius: 2px;
  background: currentColor;
  transition: transform .25s ease, opacity .15s, top .25s ease;
}
.nav-toggle-bars span:nth-child(1) { top: 0; }
.nav-toggle-bars span:nth-child(2) { top: 6px; }
.nav-toggle-bars span:nth-child(3) { top: 12px; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(1) { top: 6px; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(3) { top: 6px; transform: rotate(-45deg); }

/* ---------- 4. HERO ---------- */
.hero {
  position: relative;
  overflow: hidden;
  background: var(--page);
  /* top = fixed nav height + breathing room; bottom runs under the rounded panel */
  padding: 128px 16px 298px;
  text-align: center;
}
.hero-inner { position: relative; z-index: 2; max-width: 1100px; margin: 0 auto; }

/* Eyebrow = the pain point. Matches the current .hero-sub weight and colour. */
.hero-eyebrow {
  margin: 0 auto;
  max-width: 620px;
  font-size: clamp(18px, 1.9vw, 22px);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--text-2);
  text-wrap: balance;
}

/* Headline = the solution. Weight, tracking and gradient accent match the current .headline. */
.hero-title {
  margin: 16px 0 0;
  font-weight: 700;
  font-size: 88px;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--text);
  text-wrap: balance;
}
.hl-line { display: block; }

/* Static accent phrase in the headline */
.hl-accent {
  font-style: normal;
  white-space: nowrap;
  padding-right: 0.06em; /* lets the gradient cover the last glyph's overhang */
  background: linear-gradient(180deg, var(--blue), var(--cyan));
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}

/* Rotating accent word */
.rotator {
  position: relative;
  display: inline-block;
  vertical-align: top;
  font-style: normal;
  white-space: nowrap;
  padding: 0.06em 0.04em 0.12em;
  margin: -0.06em -0.04em -0.12em;
}
.rot-word {
  display: none;
  padding-right: 0.08em; /* lets the gradient cover the last glyph's overhang */
  background: linear-gradient(180deg, var(--blue), var(--cyan));
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.rot-word.is-active { display: inline; }
/* JS adds .is-js: words stack and animate. */
.rotator.is-js {
  overflow: hidden;
  height: 0.93em; /* equals the headline line-height so the rotator never grows the line */
  box-sizing: content-box;
  transition: width 0.6s cubic-bezier(0.6, 0, 0.4, 1);
}
.rotator.is-js .rot-word {
  display: block;
  position: absolute;
  left: 0.04em;
  top: 0.06em;
  line-height: 1;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(110%);
  transition: transform 0.6s cubic-bezier(0.6, 0, 0.4, 1), opacity 0.45s ease;
}
.rotator.is-js .rot-word.is-active { opacity: 1; transform: translateY(0); }
.rotator.is-js .rot-word.is-leaving { opacity: 0; transform: translateY(-110%); }

/* CTA buttons: copied from the current .btn-cta* rules */
.cta-primary-row { margin-top: 36px; display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.btn-cta {
  display: inline-flex; align-items: center; gap: 12px;
  height: 56px; padding: 0 26px 0 22px;
  font: 600 17px 'Outfit', sans-serif; letter-spacing: -0.01em;
  border-radius: 14px; border: 1px solid transparent; cursor: pointer;
  transition: transform .08s ease, box-shadow .15s ease, background .15s ease;
  white-space: nowrap;
}
.btn-cta-dark {
  background: var(--blue); color: white;
  border-color: transparent;
  box-shadow: 0 1px 0 rgba(255,255,255,0.2) inset, 0 8px 24px -8px rgba(0,108,224,0.55);
}
.btn-cta-dark:hover { background: #005ec4; }
.btn-cta-dark:active { transform: translateY(1px); }
.btn-cta-light {
  background: var(--surface); color: var(--text);
  border-color: rgba(11,28,33,0.10);
  box-shadow: 0 8px 24px -12px rgba(11,28,33,0.18);
}
.btn-cta-light:hover { background: #FAFCFB; }
.btn-cta-light:active { transform: translateY(1px); }
.btn-cta .brand-mark { width: 26px; height: 26px; flex: none; display: inline-flex; align-items: center; justify-content: center; }
.btn-cta .brand-mark svg { width: 26px; height: 26px; display: block; }
.cta-fineprint { font-size: 13.5px; color: var(--text-3); font-weight: 500; margin-top: 16px; }
.cta-fineprint .sep { margin: 0 8px; opacity: .6; }

/* ---------- 5. HERO ART (decorative, original shapes) ---------- */
/* Offset by the 86px that the old header used to take, so shape positions stay in place. */
.hero-art { position: absolute; inset: 86px 0 0 0; z-index: 1; pointer-events: none; }
.deco {
  position: absolute;
  overflow: visible;
  animation: deco-float var(--dur, 9s) ease-in-out var(--delay, 0s) infinite;
  will-change: transform;
}
/* Positions are % of the hero so shapes stay glued to the edges; px sizes. */
.deco-a { width: 250px; height: 205px; left: 3%;  top: 300px; --rot: -6deg;  --dur: 9s;  --delay: -2s; }
.deco-b { width: 120px; height: 101px; left: 7.5%; top: 150px; --rot: -8deg;  --dur: 7s;  --delay: -4s; }
.deco-c { width: 230px; height: 188px; left: -3.5%; top: 470px; --rot: 8deg;   --dur: 10s; --delay: -1s; }
.deco-d { width: 250px; height: 205px; right: 4.5%; top: 262px; --rot: 5deg;   --dur: 8s;  --delay: -5s; }
.deco-e { width: 130px; height: 110px; right: 7.5%;  top: 140px; --rot: 7deg;   --dur: 8.5s; --delay: -3s; }
.deco-f { width: 250px; height: 205px; right: 22.5%; top: 440px; --rot: -4deg; --dur: 11s; --delay: -6s; }
.deco-g { width: 90px;  height: 90px;  right: 6.5%; top: 520px; --rot: -10deg; --dur: 7.5s; --delay: -2.5s; }
.deco-h { width: 190px; height: 155px; right: -4.5%; top: 560px; --rot: -6deg; --dur: 9.5s; --delay: -7s; }
.deco-g { opacity: 0.95; }

@keyframes deco-float {
  0%, 100% { transform: translateY(0) rotate(var(--rot, 0deg)); }
  50%      { transform: translateY(-16px) rotate(calc(var(--rot, 0deg) + 2deg)); }
}

/* ---------- 6. PANEL (rounded-top surface that overlaps the hero) ---------- */
.panel {
  position: relative;
  z-index: 3;
  margin-top: -120px;
  min-height: 1000px;
  background: var(--bg-panel);
  border-radius: var(--radius-panel) var(--radius-panel) 0 0;
}
.panel-inner { max-width: 1320px; margin: 0 auto; padding: 56px 16px 0; min-height: 1000px; }

/* ---------- 7. RESPONSIVE ---------- */

/* Narrow desktop and tablet: hero scales down, art tucks into the edges. */
@media (max-width: 1020px) {
  .hero { padding-top: 112px; padding-bottom: 230px; }
  .hero-title { font-size: 60px; }
  :root { --radius-panel: 80px; }
  .panel { margin-top: -100px; }

  .deco-a { width: 190px; height: 156px; left: -3%;  top: 300px; }
  .deco-b { display: none; }
  .deco-c { width: 170px; height: 139px; left: -6%;  top: 470px; }
  .deco-d { width: 190px; height: 156px; right: -3%; top: 290px; }
  .deco-e { display: none; }
  .deco-f { display: none; }
  .deco-g { right: 3%; top: 440px; }
  .deco-h { width: 150px; height: 123px; right: -7%; top: 540px; }
}

/* Mobile layout (same breakpoints the current site uses for its nav: links, label and Log in drop out) */
@media (max-width: 800px) {
  nav.top .nav-row { gap: 12px; }
  .nav-cta { margin-left: auto; }
  /* attached (default): side margins, rounded bottom corners, same height as the pill */
  nav.top:not(.is-pill) .nav-row { width: calc(100% - 32px); height: var(--nav-h); padding: 0 12px 0 16px; }
  html.nav-flat nav.top:not(.is-pill) .nav-row { width: 100%; padding: 0 16px; }
  nav.top.is-pill .nav-row { width: calc(100% - 32px); padding: 0 12px 0 16px; }
  .nav-divider, .nav-startlabel, .nav-login { display: none; }
  .nav-toggle { display: inline-flex; }

  /* Links open as a dropdown card under the bar */
  .nav-links {
    position: absolute; top: calc(100% + 8px); left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 10px; font-size: 17px;
    background: rgba(255,255,255,0.97);
    border: 1px solid rgba(11,28,33,0.06);
    border-radius: 16px;
    box-shadow: 0 10px 30px -12px rgba(11,28,33,0.22), 0 2px 6px rgba(11,28,33,0.05);
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity .2s ease, transform .25s ease, visibility 0s .25s;
  }
  .nav-links.is-open { opacity: 1; visibility: visible; transform: none; transition: opacity .2s ease, transform .25s ease, visibility 0s; }
  .nav-links a { padding: 14px 12px; border-radius: 10px; }
  .nav-links-login { display: block; margin-top: 6px; background: #1F2E33; color: #fff !important; text-align: center; font-weight: 600; }
  .nav-links-login:hover { background: #28373C !important; }
}

/* Phone */
@media (max-width: 700px) {
  :root { --radius-panel: 48px; }
  .logo { font-size: 20px; }

  .hero { padding: 96px 16px 190px; }
  .hero-eyebrow { font-size: 16px; padding: 0 4px; }
  .hero-title {
    margin-top: 12px;
    font-size: clamp(32px, 9.2vw, 36px);   /* Fyxer phone h1: 36px / 1.0 */
    line-height: 1;
  }
  /* Lines flow naturally on phones and wrap by balance. */
  .hl-line { display: inline; }
  .cta-primary-row { flex-direction: column; align-items: stretch; gap: 16px; margin-top: 28px; padding: 0 8px; }   /* 24px button gutter, 16px gap like Fyxer */
  .btn-cta { width: 100%; justify-content: center; }
  /* Home buttons: Fyxer phone buttons are 56px tall, 14px / 600 type, 8px radius, 20px icon (scoped to home sections so sub-pages keep their buttons) */
  .hero .btn-cta, .wd-cta .btn-cta, #final-cta .btn-cta, #pricing:not(.pg2-pr) .btn-cta { height: 56px; padding: 0 20px; font-size: 14px; letter-spacing: 0; border-radius: 8px; gap: 10px; }
  .hero .btn-cta .brand-mark, .wd-cta .btn-cta .brand-mark, #final-cta .btn-cta .brand-mark, #pricing:not(.pg2-pr) .btn-cta .brand-mark,
  .hero .btn-cta .brand-mark svg, .wd-cta .btn-cta .brand-mark svg, #final-cta .btn-cta .brand-mark svg, #pricing:not(.pg2-pr) .btn-cta .brand-mark svg { width: 20px; height: 20px; }
  .hero .cta-fineprint { font-size: 14px; }
  /* Invisible hit areas up to 44px (look unchanged) */
  .nav-iconbtn::after { inset: -5px; }
  .nav-toggle { position: relative; }
  .nav-toggle::after { content: ""; position: absolute; inset: -2px; }

  .panel { margin-top: -64px; }

  /* Art: small, tucked into the bottom corners behind the panel edge. */
  .hero-art { opacity: 0.9; }
  .deco-a { width: 120px; height: 98px; left: -8%; top: auto; bottom: 95px; }
  .deco-c { display: none; }
  .deco-d { width: 120px; height: 98px; right: -8%; top: auto; bottom: 110px; }
  .deco-e { width: 64px; height: 54px; right: 7%; top: auto; bottom: 200px; }
  .deco-g { display: none; }
  .deco-h { display: none; }
}

/* Reduced motion: no float, no morph, no smooth scroll, no menu slide. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  nav.top, nav.top .nav-row { transition: none; }
  .deco { animation: none; transform: rotate(var(--rot, 0deg)); }
  .rotator.is-js, .rotator.is-js .rot-word { transition: none; }
  .nav-links, .nav-links.is-open, .nav-toggle-bars span { transition: none; }
}

/* ---------- hero art variants (?art=shapes|dots|logos) ---------- */

/* dots: the finished graphic stays hidden and the float is paused until JS has assembled that piece. */
html.art-dots-anim .deco:not(.is-ready) { animation-play-state: paused; }
html.art-dots-anim .deco:not(.is-ready) > use { opacity: 0; }
.deco .dots-layer { pointer-events: none; }

/* logos: floating integration tiles in the frosted-glass rounded square of the small chat tile.
   --b = base size, --k = size factor (?size=big), --s = drawn size. Positions are tables per (set, size). */
html { --k: 1; }
html.size-big { --k: 1.25; }
.ltile { display: none; }
html.art-logos .deco { display: none; }
html.art-logos .ltile {
  display: grid;
  place-items: center;
  position: absolute;
  --s: calc(var(--b, 84px) * var(--k, 1) * var(--dk, 1));
  width: var(--s);
  height: var(--s);
  border-radius: 28%;
  background: linear-gradient(135deg, rgba(255,255,255,0.80), rgba(255,255,255,0.30));
  border: 2px solid #fff;
  box-shadow: 0 16px 28px -12px rgba(11,28,33,0.28), 0 2px 8px -2px rgba(11,28,33,0.08);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  opacity: var(--vis, 1);
  animation: deco-float var(--dur, 9s) ease-in-out var(--delay, 0s) infinite;
  will-change: transform;
}
html.art-logos:not(.set-more) .ltile-more { display: none; }
html.art-logos:not(.crm-soon) .ltile-crm { display: none; }
.ltile svg, .ltile img { width: calc(var(--s) * 0.54); height: calc(var(--s) * 0.54); overflow: visible; object-fit: contain; }
.ltile img.otter { transform: scale(1.55); }  /* the official Otter icon file carries wide padding */

/* CRM tiles (?crm=soon): look like every other tile; a small quiet label sits under each one */
.ltile .soon {
  position: absolute; left: 50%; top: calc(100% + 6px); transform: translateX(-50%) rotate(calc(var(--rot, 0deg) * -1));
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; pointer-events: none;
  font: 500 11px/1 'Outfit', sans-serif; color: var(--text-2); letter-spacing: 0.01em;
  background: none; border: 0; padding: 0; box-shadow: none; text-transform: none;
}
.ltile .soon::before { content: ''; flex: none; width: 4px; height: 4px; border-radius: 50%; background: currentColor; }

/* base sizes, rotation and float timing (same for every table) */
.ltile-a { --b: 92px; --rot: -7deg;  --dur: 9s;    --delay: -2s; }
.ltile-b { --b: 78px; --rot: 6deg;   --dur: 7.5s;  --delay: -4s; }
.ltile-c { --b: 84px; --rot: 9deg;   --dur: 10s;   --delay: -1s; }
.ltile-d { --b: 76px; --rot: -5deg;  --dur: 8s;    --delay: -6s; }
.ltile-e { --b: 72px; --rot: 8deg;   --dur: 8.5s;  --delay: -3s; }
.ltile-f { --b: 90px; --rot: 6deg;   --dur: 8s;    --delay: -5s; }
.ltile-g { --b: 78px; --rot: -8deg;  --dur: 9.5s;  --delay: -2.5s; }
.ltile-h { --b: 84px; --rot: -6deg;  --dur: 7s;    --delay: -7s; }
.ltile-i { --b: 74px; --rot: 10deg;  --dur: 10.5s; --delay: -4.5s; }
.ltile-j { --b: 80px; --rot: -9deg;  --dur: 8.8s;  --delay: -3.5s; }
.ltile-k { --b: 80px; --rot: 7deg;   --dur: 9.2s;  --delay: -6.5s; }
.ltile-l { --b: 76px; --rot: 6deg;   --dur: 7.8s;  --delay: -1.5s; }
.ltile-m { --b: 76px; --rot: -7deg;  --dur: 10.2s; --delay: -5.5s; }

/* Positions (unchanged slots). Slot letters are fixed; the logo in each slot is chosen by company stack (see the markup comment).
   LEFT slots: a c b j d l e n. RIGHT slots: f k g h i m o. Slot l is a core slot now (Granola), slot i belongs to the more set (Fireflies). */
/* Table 1: core 9, normal size */
.ltile-a { left: 4%;     top: 110px; }
.ltile-b { left: 12%;    top: 245px; }
.ltile-c { left: 2%;     top: 370px; }
.ltile-d { left: 13.5%;  top: 470px; }
.ltile-e { left: 24%;    top: 545px; }
.ltile-f { right: 4%;    top: 100px; }
.ltile-g { right: 12.5%; top: 235px; }
.ltile-h { right: 3%;    top: 370px; }
.ltile-i { right: 15%;   top: 480px; }
.ltile-l { left: 5%;     top: 495px; }
/* Table 2: more 13, normal size (extras) */
.ltile-j { left: 1.5%;  top: 218px; }
.ltile-k { right: 1.2%; top: 208px; }
.ltile-m { right: 5%;   top: 495px; }
/* Table 3: core 9, big */
html.size-big .ltile-a { left: 2%;     top: 6px; }
html.size-big .ltile-b { left: 10%;    top: 215px; }
html.size-big .ltile-c { left: 0.5%;   top: 345px; }
html.size-big .ltile-d { left: 12.5%;  top: 455px; }
html.size-big .ltile-e { left: 24%;    top: 545px; }
html.size-big .ltile-f { right: 2%;    top: 6px; }
html.size-big .ltile-g { right: 10%;   top: 215px; }
html.size-big .ltile-h { right: 1%;    top: 345px; }
html.size-big .ltile-i { right: 14%;   top: 470px; }
html.size-big .ltile-l { left: 3%;     top: 504px; }
/* CRM tiles: bottom centre, clear of the fineprint, shared by the core and more sets */
.ltile-n { --b: 80px; --rot: 5deg;  --dur: 9.6s; --delay: -2.2s; left: 34%;  top: 530px; }
.ltile-o { --b: 80px; --rot: -5deg; --dur: 8.4s; --delay: -5.2s; right: 34%; top: 530px; }
html.size-big .ltile-n { top: 505px; }
html.size-big .ltile-o { top: 505px; }
/* WhatsApp (coming soon): mirrors Zoom's slot on the right, lower half */
.ltile-p { --b: 74px; --rot: 7deg; --dur: 9.1s; --delay: -3.1s; right: 24%; top: 515px; }
/* Table 4: more 13, big (extras) */
html.size-big .ltile-j { left: 0.5%;  top: 169px; }
html.size-big .ltile-k { right: 0.5%; top: 169px; }
html.size-big .ltile-m { right: 4%;   top: 514px; }

/* Phone (max-width 700px): one row under the buttons (flex), so no layout can cover the text.
   Left stack first, right stack after it, the two coming-soon tiles in the middle.
   701px and up keeps the scattered layout and scales it (see section 8 at the end of this file). */
@media (max-width: 700px) {
  html.size-big { --k: 1.1; }
  html.art-logos:not(.lay-marquee) .hero-art { display: flex; align-items: flex-end; justify-content: space-between; padding: 0 14px 96px; }
  html.art-logos:not(.lay-marquee) .ltile {
    display: none; position: relative; flex: none; --b: 74px;
    left: auto !important; right: auto !important; top: auto !important; bottom: auto !important;
    margin-bottom: var(--lift, 0px);
  }
  html.art-logos.set-core.crm-off .ltile-a, html.art-logos.set-core.crm-off .ltile-b, html.art-logos.set-core.crm-off .ltile-c, html.art-logos.set-core.crm-off .ltile-g, html.art-logos.set-core.crm-off .ltile-h, html.art-logos.set-core.crm-off .ltile-f { display: grid; }
  html.art-logos.set-core.crm-off .ltile-a { order: 1; --lift: 0px; }
  html.art-logos.set-core.crm-off .ltile-b { order: 2; --lift: 22px; }
  html.art-logos.set-core.crm-off .ltile-c { order: 3; --lift: 6px; }
  html.art-logos.set-core.crm-off .ltile-g { order: 4; --lift: 26px; }
  html.art-logos.set-core.crm-off .ltile-h { order: 5; --lift: 2px; }
  html.art-logos.set-core.crm-off .ltile-f { order: 6; --lift: 20px; }
  html.art-logos.set-core.crm-soon .ltile-a, html.art-logos.set-core.crm-soon .ltile-b, html.art-logos.set-core.crm-soon .ltile-c, html.art-logos.set-core.crm-soon .ltile-n, html.art-logos.set-core.crm-soon .ltile-o, html.art-logos.set-core.crm-soon .ltile-g, html.art-logos.set-core.crm-soon .ltile-h, html.art-logos.set-core.crm-soon .ltile-f { display: grid; }
  html.art-logos.set-core.crm-soon .ltile-a { order: 1; --lift: 0px; }
  html.art-logos.set-core.crm-soon .ltile-b { order: 2; --lift: 22px; }
  html.art-logos.set-core.crm-soon .ltile-c { order: 3; --lift: 6px; }
  html.art-logos.set-core.crm-soon .ltile-n { order: 4; --lift: 26px; }
  html.art-logos.set-core.crm-soon .ltile-o { order: 5; --lift: 2px; }
  html.art-logos.set-core.crm-soon .ltile-g { order: 6; --lift: 20px; }
  html.art-logos.set-core.crm-soon .ltile-h { order: 7; --lift: 10px; }
  html.art-logos.set-core.crm-soon .ltile-f { order: 8; --lift: 24px; }
  html.art-logos.set-more.crm-off .ltile-a, html.art-logos.set-more.crm-off .ltile-b, html.art-logos.set-more.crm-off .ltile-j, html.art-logos.set-more.crm-off .ltile-c, html.art-logos.set-more.crm-off .ltile-k, html.art-logos.set-more.crm-off .ltile-m, html.art-logos.set-more.crm-off .ltile-g, html.art-logos.set-more.crm-off .ltile-f { display: grid; }
  html.art-logos.set-more.crm-off .ltile-a { order: 1; --lift: 0px; }
  html.art-logos.set-more.crm-off .ltile-b { order: 2; --lift: 22px; }
  html.art-logos.set-more.crm-off .ltile-j { order: 3; --lift: 6px; }
  html.art-logos.set-more.crm-off .ltile-c { order: 4; --lift: 26px; }
  html.art-logos.set-more.crm-off .ltile-k { order: 5; --lift: 2px; }
  html.art-logos.set-more.crm-off .ltile-m { order: 6; --lift: 20px; }
  html.art-logos.set-more.crm-off .ltile-g { order: 7; --lift: 10px; }
  html.art-logos.set-more.crm-off .ltile-f { order: 8; --lift: 24px; }
  html.art-logos.set-more.crm-soon .ltile-a, html.art-logos.set-more.crm-soon .ltile-b, html.art-logos.set-more.crm-soon .ltile-j, html.art-logos.set-more.crm-soon .ltile-n, html.art-logos.set-more.crm-soon .ltile-o, html.art-logos.set-more.crm-soon .ltile-k, html.art-logos.set-more.crm-soon .ltile-m, html.art-logos.set-more.crm-soon .ltile-f { display: grid; }
  html.art-logos.set-more.crm-soon .ltile-a { order: 1; --lift: 0px; }
  html.art-logos.set-more.crm-soon .ltile-b { order: 2; --lift: 22px; }
  html.art-logos.set-more.crm-soon .ltile-j { order: 3; --lift: 6px; }
  html.art-logos.set-more.crm-soon .ltile-n { order: 4; --lift: 26px; }
  html.art-logos.set-more.crm-soon .ltile-o { order: 5; --lift: 2px; }
  html.art-logos.set-more.crm-soon .ltile-k { order: 6; --lift: 20px; }
  html.art-logos.set-more.crm-soon .ltile-m { order: 7; --lift: 10px; }
  html.art-logos.set-more.crm-soon .ltile-f { order: 8; --lift: 24px; }
}
@media (max-width: 700px) {
  html.art-logos:not(.lay-marquee) .hero-art { padding: 0 10px 96px; }
  html.art-logos:not(.lay-marquee) .ltile { display: none; --b: 48px; border-width: 1.5px; }
  html.art-logos.set-core.crm-off:not(.lay-marquee) .ltile { --b: 54px; }
  html.art-logos.crm-soon:not(.lay-marquee) .ltile { --b: 40px; }
  .ltile .soon { font-size: 10px; gap: 4px; }
  html.art-logos.set-core.crm-off .ltile-a, html.art-logos.set-core.crm-off .ltile-b, html.art-logos.set-core.crm-off .ltile-c, html.art-logos.set-core.crm-off .ltile-g, html.art-logos.set-core.crm-off .ltile-f { display: grid; }
  html.art-logos.set-core.crm-off .ltile-a { order: 1; --lift: 0px; }
  html.art-logos.set-core.crm-off .ltile-b { order: 2; --lift: 12px; }
  html.art-logos.set-core.crm-off .ltile-c { order: 3; --lift: 4px; }
  html.art-logos.set-core.crm-off .ltile-g { order: 4; --lift: 14px; }
  html.art-logos.set-core.crm-off .ltile-f { order: 5; --lift: 2px; }
  html.art-logos.set-core.crm-soon .ltile-a, html.art-logos.set-core.crm-soon .ltile-b, html.art-logos.set-core.crm-soon .ltile-n, html.art-logos.set-core.crm-soon .ltile-g, html.art-logos.set-core.crm-soon .ltile-o, html.art-logos.set-core.crm-soon .ltile-f { display: grid; }
  html.art-logos.set-core.crm-soon .ltile-a { order: 1; --lift: 14px; }
  html.art-logos.set-core.crm-soon .ltile-b { order: 2; --lift: 6px; }
  html.art-logos.set-core.crm-soon .ltile-n { order: 3; --lift: 0px; }
  html.art-logos.set-core.crm-soon .ltile-g { order: 4; --lift: 20px; }
  html.art-logos.set-core.crm-soon .ltile-o { order: 5; --lift: 0px; }
  html.art-logos.set-core.crm-soon .ltile-f { order: 6; --lift: 12px; }
  html.art-logos.set-more.crm-off .ltile-a, html.art-logos.set-more.crm-off .ltile-b, html.art-logos.set-more.crm-off .ltile-j, html.art-logos.set-more.crm-off .ltile-k, html.art-logos.set-more.crm-off .ltile-m, html.art-logos.set-more.crm-off .ltile-f { display: grid; }
  html.art-logos.set-more.crm-off .ltile-a { order: 1; --lift: 0px; }
  html.art-logos.set-more.crm-off .ltile-b { order: 2; --lift: 12px; }
  html.art-logos.set-more.crm-off .ltile-j { order: 3; --lift: 4px; }
  html.art-logos.set-more.crm-off .ltile-k { order: 4; --lift: 14px; }
  html.art-logos.set-more.crm-off .ltile-m { order: 5; --lift: 2px; }
  html.art-logos.set-more.crm-off .ltile-f { order: 6; --lift: 10px; }
  /* phones show only the apps in onboarding (Gmail, Slack, Google Calendar, Granola, Teams, Outlook); no CRM "coming soon" tiles */
  html.art-logos.set-more.crm-soon .ltile-a, html.art-logos.set-more.crm-soon .ltile-b, html.art-logos.set-more.crm-soon .ltile-d, html.art-logos.set-more.crm-soon .ltile-l, html.art-logos.set-more.crm-soon .ltile-g, html.art-logos.set-more.crm-soon .ltile-f { display: grid; }
  html.art-logos.set-more.crm-soon .ltile-a { order: 1; --lift: 14px; }
  html.art-logos.set-more.crm-soon .ltile-b { order: 2; --lift: 2px; }
  html.art-logos.set-more.crm-soon .ltile-d { order: 3; --lift: 20px; }
  html.art-logos.set-more.crm-soon .ltile-l { order: 4; --lift: 0px; }
  html.art-logos.set-more.crm-soon .ltile-g { order: 5; --lift: 20px; }
  html.art-logos.set-more.crm-soon .ltile-f { order: 6; --lift: 12px; }
  html.art-logos.set-core.crm-off:not(.lay-marquee) .ltile-h { display: none; }
  html.art-logos.set-core.crm-soon:not(.lay-marquee) .ltile-c, html.art-logos.set-core.crm-soon:not(.lay-marquee) .ltile-h { display: none; }
  html.art-logos.set-more.crm-off:not(.lay-marquee) .ltile-c, html.art-logos.set-more.crm-off:not(.lay-marquee) .ltile-g { display: none; }
  html.art-logos.set-more.crm-soon:not(.lay-marquee) .ltile-j, html.art-logos.set-more.crm-soon:not(.lay-marquee) .ltile-k, html.art-logos.set-more.crm-soon:not(.lay-marquee) .ltile-m, html.art-logos.set-more.crm-soon:not(.lay-marquee) .ltile-n, html.art-logos.set-more.crm-soon:not(.lay-marquee) .ltile-o { display: none; }
  .ltile .soon { display: none; }
}

/* ---------- logos layouts (?layout=) ---------- */
/* arc and orbit: JS writes the positions (desktop only); hide until placed so tiles do not flash at 0,0 */
@media (min-width: 1280px) {
  html.lay-arc:not(.is-placed) .ltile, html.lay-orbit:not(.is-placed) .ltile { visibility: hidden; }
  html.lay-arc .ltile, html.lay-orbit .ltile { right: auto !important; bottom: auto !important; }
  html.lay-orbit .ltile { left: 0 !important; top: 0 !important; }
}

/* depth: three layers. Every tile is sharp and opaque; the layers differ only in parallax strength and a slight size step. */
html.lay-depth .ltile-d, html.lay-depth .ltile-e, html.lay-depth .ltile-i, html.lay-depth .ltile-l, html.lay-depth .ltile-m { --par: 9;  --dk: 0.94; }
html.lay-depth .ltile-b, html.lay-depth .ltile-g, html.lay-depth .ltile-j, html.lay-depth .ltile-k, html.lay-depth .ltile-n, html.lay-depth .ltile-o, html.lay-depth .ltile-p { --par: 18; --dk: 1; }
html.lay-depth .ltile-a, html.lay-depth .ltile-c, html.lay-depth .ltile-f, html.lay-depth .ltile-h { --par: 30; --dk: 1.05; }
html.lay-depth.art-logos .ltile {
  translate: calc(var(--mx, 0) * var(--par, 0) * 1px) calc(var(--my, 0) * var(--par, 0) * 1px);
  transition: translate 0.35s ease-out;
}

/* flyin: tiles glide in from the edges (individual `translate` property, so the float keeps running) */
@keyframes ltile-fly { from { translate: var(--fx, -60vw) var(--fy, 0px); opacity: 0; } }
html.lay-flyin.art-logos .ltile {
  --fx: -60vw; --fy: 0px;
  animation: deco-float var(--dur, 9s) ease-in-out var(--delay, 0s) infinite, ltile-fly 0.85s cubic-bezier(0.16, 0.84, 0.3, 1) var(--fd, 0s) backwards;
}
html.lay-flyin .ltile-f, html.lay-flyin .ltile-g, html.lay-flyin .ltile-h, html.lay-flyin .ltile-i, html.lay-flyin .ltile-k, html.lay-flyin .ltile-m, html.lay-flyin .ltile-o, html.lay-flyin .ltile-p { --fx: 60vw; }
html.lay-flyin .ltile-a { --fd: 0ms; }
html.lay-flyin .ltile-f { --fd: 30ms; }
html.lay-flyin .ltile-b { --fd: 60ms; }
html.lay-flyin .ltile-g { --fd: 90ms; }
html.lay-flyin .ltile-c { --fd: 120ms; }
html.lay-flyin .ltile-h { --fd: 150ms; }
html.lay-flyin .ltile-d { --fd: 180ms; }
html.lay-flyin .ltile-i { --fd: 210ms; }
html.lay-flyin .ltile-e { --fd: 240ms; }
html.lay-flyin .ltile-j { --fd: 270ms; }
html.lay-flyin .ltile-k { --fd: 300ms; }
html.lay-flyin .ltile-l { --fd: 330ms; }
html.lay-flyin .ltile-m { --fd: 360ms; }
html.lay-flyin .ltile-n { --fd: 390ms; }
html.lay-flyin .ltile-o { --fd: 420ms; }
html.lay-flyin .ltile-p { --fd: 450ms; }

/* marquee: no side tiles; two rows drift in opposite directions under the buttons (rows built by main.js) */
html.lay-marquee.art-logos .hero-art > .ltile { display: none !important; }
html.lay-marquee { --ms: 58px; --lm-bottom: 118px; }
html.lay-marquee.size-big { --ms: 68px; }
.lm-row {
  position: absolute; left: 0; right: 0; overflow: hidden;
  height: calc(var(--ms, 58px) + 28px);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
}
.lm-row-2 { bottom: calc(var(--lm-bottom, 118px) - 14px); }
.lm-row-1 { bottom: calc(var(--lm-bottom, 118px) + var(--ms, 58px)); }
.lm-track { display: flex; align-items: flex-start; gap: 18px; width: max-content; animation: lm-slide var(--lm-dur, 80s) linear infinite; }
.lm-row-2 .lm-track { animation-direction: reverse; }
@keyframes lm-slide { to { transform: translateX(-50%); } }
html.art-logos .lm-row .ltile {
  display: grid !important; position: relative; flex: none;
  left: auto !important; right: auto !important; top: auto !important; bottom: auto !important; margin: 0 !important;
  --s: var(--ms, 58px); animation: none; border-width: 1.5px;
}
@media (max-width: 1020px) {
  html.lay-marquee { --ms: 54px; --lm-bottom: 70px; }
  html.lay-marquee.size-big { --ms: 58px; }
}
@media (max-width: 700px) {
  html.lay-marquee { --ms: 46px; --lm-bottom: 40px; }
  html.lay-marquee.size-big { --ms: 50px; }
  .lm-track { gap: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .ltile { animation: none !important; transform: rotate(var(--rot, 0deg)); }
  .lm-track { animation: none; }
}

/* ---------- 8. LAPTOP SCALE (home page, 701px and up) ----------
   The hero is laid out at 1728px (REF). Below that it is a scaled copy: every px value is a number times --u,
   where --u = 1px at REF and shrinks with the window width (or height, for short windows).
   Phone (700px and below) never matches. At REF and wider, --u is 1px unless the window is shorter than 900px. */
@property --u { syntax: '<length>'; inherits: true; initial-value: 1px; }
@media (min-width: 701px) {
  :root { --u: min(1px, calc(100vw / 1728), calc(100vh / 900)); }
  html.art-logos { --radius-panel: calc(120 * var(--u)); }

  /* text column: --hero-pt never lets the eyebrow slide under the fixed nav */
  /* bottom padding grows by however much the 44px button floor adds, so the lower tiles keep clear of the fine print */
  html.art-logos .hero { --hero-pt: max(calc(128 * var(--u)), 88px); padding-top: var(--hero-pt); padding-bottom: calc(298 * var(--u) + max(0px, 44px - 56 * var(--u))); }
  html.art-logos .hero-eyebrow { font-size: max(15px, calc(22 * var(--u))); max-width: max(260px, calc(620 * var(--u))); }
  html.art-logos .hero-title { margin-top: calc(16 * var(--u)); font-size: calc(88 * var(--u)); }
  html.art-logos .hero .cta-primary-row { margin-top: max(20px, calc(36 * var(--u))); gap: max(10px, calc(12 * var(--u))); }
  html.art-logos .hero .btn-cta {
    height: max(44px, calc(56 * var(--u)));
    padding: 0 max(16px, calc(26 * var(--u))) 0 max(14px, calc(22 * var(--u)));
    font-size: max(15px, calc(17 * var(--u)));
    gap: max(8px, calc(12 * var(--u)));
    border-radius: max(10px, calc(14 * var(--u)));
  }
  html.art-logos .hero .btn-cta .brand-mark, html.art-logos .hero .btn-cta .brand-mark svg { width: max(20px, calc(26 * var(--u))); height: max(20px, calc(26 * var(--u))); }
  html.art-logos .hero .cta-fineprint { font-size: max(12px, calc(13.5 * var(--u))); margin-top: max(10px, calc(16 * var(--u))); }

  /* tiles: art box starts 42 REF px above the eyebrow, as at REF */
  html.art-logos .hero-art { top: calc(var(--hero-pt) - 42 * var(--u)); }
  html.art-logos:not(.lay-marquee) .hero-art > .ltile { --s: calc(var(--bn) * var(--k, 1) * var(--dk, 1) * var(--u)); }
  html.art-logos .ltile .soon { top: calc(100% + 6 * var(--u)); font-size: max(10px, calc(11 * var(--u))); }
  /* --bn = the base size in REF px (same numbers as --b). Upper tiles keep their REF top; tiles level with or under
     the buttons keep their REF distance from the hero bottom, so they stay under the fine print when text sizes hit a floor. */
  html.art-logos:not(.lay-marquee) .ltile-a { --bn: 92; top: calc(6 * var(--u)); }
  html.art-logos:not(.lay-marquee) .ltile-f { --bn: 90; top: calc(6 * var(--u)); }
  html.art-logos:not(.lay-marquee) .ltile-j { --bn: 80; top: calc(169 * var(--u)); }
  html.art-logos:not(.lay-marquee) .ltile-k { --bn: 80; top: calc(169 * var(--u)); }
  html.art-logos:not(.lay-marquee) .ltile-b { --bn: 78; top: calc(215 * var(--u)); }
  html.art-logos:not(.lay-marquee) .ltile-g { --bn: 78; top: calc(215 * var(--u)); }
  html.art-logos:not(.lay-marquee) .ltile-c { --bn: 84; top: calc(345 * var(--u)); }
  html.art-logos:not(.lay-marquee) .ltile-h { --bn: 84; top: calc(345 * var(--u)); }
  html.art-logos:not(.lay-marquee) .ltile-d { --bn: 76; top: auto; bottom: calc(234.7 * var(--u)); }
  html.art-logos:not(.lay-marquee) .ltile-i { --bn: 74; top: auto; bottom: calc(222.05 * var(--u)); }
  html.art-logos:not(.lay-marquee) .ltile-l { --bn: 76; top: auto; bottom: calc(185.7 * var(--u)); }
  html.art-logos:not(.lay-marquee) .ltile-m { --bn: 76; top: auto; bottom: calc(175.7 * var(--u)); }
  html.art-logos:not(.lay-marquee) .ltile-n { --bn: 80; top: auto; bottom: calc(174 * var(--u)); }
  html.art-logos:not(.lay-marquee) .ltile-o { --bn: 80; top: auto; bottom: calc(174 * var(--u)); }
  html.art-logos:not(.lay-marquee) .ltile-p { --bn: 74; top: auto; bottom: calc(171.5 * var(--u)); }
  html.art-logos:not(.lay-marquee) .ltile-e { --bn: 72; top: auto; bottom: calc(149.4 * var(--u)); }

  html.art-logos .panel { margin-top: calc(-120 * var(--u)); }
}
/* desktop nav bar (801px up): same share of the window as at REF, never narrower than its contents */
@media (min-width: 801px) {
  html.art-logos nav.top:not(.is-pill) .nav-row { width: min(calc(100% - 32px), max(calc(1280 * var(--u)), 800px)); }
}
/* tablet nav (701px to 800px) is 56px tall */
@media (min-width: 701px) and (max-width: 800px) {
  html.art-logos .hero { --hero-pt: 80px; }
}
/* below 900px the 10px "Coming soon" labels under the Salesforce and WhatsApp tiles run into each other; hide them as phones do */
@media (min-width: 701px) and (max-width: 899.98px) {
  html.art-logos .ltile .soon { display: none; }
}