/* Latbase Host landing page (latbase.com/host): one hero (one moving row of Polaroids and the words) between the shared navigation and footer, on top of the Latbase
   design system (ds/, copied from the Discover app's design-system folder, 1.8.0 since 2026-11-02: Jost on the headings,
   the ring shadows). The look is the host app's (webapp/src/styles.css, round D and the feedback day of 2026-11-01):
   Apple's palette, ink on white paper, greys and shadows, no colour on the interface. The plan is PLAN-WEBSITE.md; the
   words are placeholders until the founder gives his. */

/* ---- the app's palette and elevation over the design system's tokens ---- */
:root {
  --ink: #1d1d1f;                 /* Shark */
  --ink-2: #6e6e73;
  --ink-3: #86868b;
  --line: #ebebee;
  --line-strong: #d2d2d7;
  --paper: #ffffff;
  --paper-2: #f5f5f7;             /* Athens Gray, the grey fill */
  --paper-3: #e8e8ed;             /* the grey fill under the pointer */
  --edge: 0 0 0 1px rgba(29, 29, 31, 0.08);
  --shadow-bar: var(--edge), 0 1px 1px -0.5px rgba(29, 29, 31, 0.06);
  --shadow-card: var(--edge), 0 1px 1px -0.5px rgba(29, 29, 31, 0.06), 0 3px 3px -1.5px rgba(29, 29, 31, 0.06), 0 6px 6px -3px rgba(29, 29, 31, 0.06);
  --shadow-hover: var(--edge), 0 1px 1px -0.5px rgba(29, 29, 31, 0.06), 0 3px 3px -1.5px rgba(29, 29, 31, 0.06), 0 6px 6px -3px rgba(29, 29, 31, 0.06), 0 12px 12px -6px rgba(29, 29, 31, 0.06), 0 24px 24px -12px rgba(29, 29, 31, 0.06);
}

.page { display: flex; flex-direction: column; }
.nav-right .nav-text { color: var(--ink); }
.actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; justify-content: center; padding-top: 10px; }

/* The one button, as the app draws it (ElevenLabs' look, webapp/src/styles.css): soft corners, no shadow, 75 ms colour
   transitions, the icon a step quieter than the word. The shared navigation keeps the design system's pills. */
.btn-lg { height: 58px; padding: 0 28px 0 24px; gap: 10px; border-radius: 14px; font-size: 17px; font-weight: var(--weight-medium); transition: background-color 75ms, border-color 75ms, color 75ms, transform var(--dur-fast) var(--ease); }
.btn-lg > svg { flex: none; opacity: 0.9; }
.btn-lg.btn-primary { background: var(--ink); color: #fff; }
.btn-lg.btn-primary:hover { background: #424245; }
.btn-lg.btn-primary:active { background: #58585c; transform: none; }

/* ---- hero: one screen under the navigation (the founder, 2026-11-02): one big moving row of Polaroids, then the words
   under it. Everything is sized from the viewport's height, so the row and the words share whatever screen there
   is: the frame width --fw, the heading, the description and the row padding all follow it. The row is a track of the
   fourteen pictures twice, sliding by half its width in a loop, so the join is invisible; it fades out at both edges and
   pauses under the pointer. ---- */
.hero { --fw: clamp(160px, 34vh, 320px); height: calc(100svh - 80px); min-height: 600px; overflow: hidden; display: flex; flex-direction: column; justify-content: center; gap: clamp(12px, 3vh, 36px); }
.hero-text { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; text-align: center; gap: clamp(14px, 2.2vh, 22px); margin: 0 auto; padding: 0 20px; max-width: 900px; }
.hero-text .h1 { font-size: clamp(40px, 7.6vh, 76px); line-height: 1.06; letter-spacing: -0.01em; white-space: nowrap; }   /* two lines exactly, big (the founder, 2026-11-02): the break is in the markup and the size follows the screen so neither line ever wraps */
.hero-text .lead { max-width: 780px; font-size: clamp(17px, 2.4vh, 21px); }   /* line one the first two sentences, line two the GTM sentence (the founder, 2026-11-02): the break is in the markup, desktop only */
.nowrap { white-space: nowrap; }
.desk { display: inline; }
.hero-text .actions { padding-top: 6px; }

.row { position: relative; width: 100%; padding: clamp(14px, 2vh, 24px) 0; overflow: hidden; animation: ds-fade 600ms var(--ease) both; -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent); }
.track { display: flex; align-items: center; width: max-content; margin: 0; padding: 0; list-style: none; animation: marquee 90s linear infinite; will-change: transform; }
.row:hover .track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* A Polaroid: a grey frame (the founder: white on white looked odd) with the ring-and-layers shadow, a square picture toned
   as Discovery tones its covers, the thick edge at the bottom and no caption. Every other one is smaller and sits a little
   lower, as if laid down by hand; each leans by --r and straightens and lifts under the pointer. The space after a frame
   is a margin, not a gap, so the two halves of the track measure the same and the loop has no seam. */
.polaroid { flex: none; width: var(--fw); margin-right: calc(var(--fw) * 0.14); }
.polaroid.alt { width: calc(var(--fw) * 0.88); transform: translateY(calc(var(--fw) * 0.06)); }
.pol { margin: 0; padding: 4.5% 4.5% 14%; background: var(--paper-2); border-radius: 5px; box-shadow: var(--shadow-card); transform: rotate(var(--r)); transition: transform 320ms var(--ease), box-shadow 320ms var(--ease); }
.pol img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 3px; background: var(--paper-3); filter: saturate(0.9) contrast(1.04); }
.polaroid:hover { position: relative; z-index: 3; }
.polaroid:hover .pol { transform: rotate(0deg) translateY(-8px) scale(1.03); box-shadow: var(--shadow-hover); }

@media (max-width: 767px) {
  .hero { height: calc(100svh - 64px); min-height: 560px; --fw: clamp(140px, 26vh, 220px); }
  .hero-text .h1 { font-size: clamp(26px, min(5.4vh, 8.4vw), 44px); }   /* 8.4 vw keeps "Host your business" on one line down to 320 px */
  .hero-text .lead { font-size: 17px; }
  .desk { display: none; }
  .hero-text .actions { width: 100%; }
  .hero-text .actions .btn-lg { flex: 1 1 100%; }
  .row { -webkit-mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent); mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent); }
  .track { animation-duration: 70s; }
}
@media (prefers-reduced-motion: reduce) {
  .track { animation: none; }
  .row { overflow-x: auto; }
  .polaroid:hover .pol { transform: rotate(var(--r)); }
}

/* the menu button under 1024 px: the hamburger, or the cross while the menu is open */
.nav-menu-btn .i-close { display: none; }
.nav-menu-btn[aria-expanded="true"] .i-menu { display: none; }
.nav-menu-btn[aria-expanded="true"] .i-close { display: block; }