/* Renuo landing — base, design-system component classes, and responsive rules.
   Base + keyframes are lifted verbatim from the original <helmet> block. */

*, *::before, *::after { box-sizing: border-box; }
/* clip (not hidden) so we don't create a scroll container that breaks
   position: sticky in the pinned animation section */
html, body { overflow-x: clip; }
img { max-width: 100%; height: auto; }

body {
  margin: 0;
  background: #f6f9fc;
  color: #011627;
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}
a { color: #374151; text-decoration: none; }
a:hover { color: #011627; }

/* ---- decorative "mercury" background keyframes (from source) ---- */
@keyframes mercuryDrift{0%{transform:rotate(0deg) scale(1.08) translate3d(0,0,0)}50%{transform:rotate(9deg) scale(1.16) translate3d(-2.5%,2%,0)}100%{transform:rotate(0deg) scale(1.08) translate3d(0,0,0)}}
@keyframes mercuryDriftB{0%{transform:rotate(0deg) scale(1.1) translate3d(0,0,0)}50%{transform:rotate(-7deg) scale(1.2) translate3d(3%,-2%,0)}100%{transform:rotate(0deg) scale(1.1) translate3d(0,0,0)}}
@keyframes sheenSlide{0%{background-position:0% 50%}100%{background-position:100% 50%}}
@keyframes specularFloat{0%{transform:translateY(-46px) scaleY(.86);opacity:.5}50%{transform:translateY(64px) scaleY(1.18);opacity:.95}100%{transform:translateY(-46px) scaleY(.86);opacity:.5}}
@keyframes mercuryWave{0%{transform:translate3d(-6%,0,0) scaleY(1) rotate(-1.5deg)}50%{transform:translate3d(4%,-2%,0) scaleY(1.25) rotate(1.5deg)}100%{transform:translate3d(-6%,0,0) scaleY(1) rotate(-1.5deg)}}
@keyframes iridShift{0%{background-position:0% 50%;opacity:.75}50%{background-position:100% 50%;opacity:1}100%{background-position:0% 50%;opacity:.75}}
@keyframes dropFloatA{0%{transform:translate3d(0,0,0) scale(1)}33%{transform:translate3d(26px,-34px,0) scale(1.08)}66%{transform:translate3d(-18px,-16px,0) scale(.94)}100%{transform:translate3d(0,0,0) scale(1)}}
@keyframes dropFloatB{0%{transform:translate3d(0,0,0) scale(1)}40%{transform:translate3d(-30px,24px,0) scale(1.12)}70%{transform:translate3d(14px,38px,0) scale(.96)}100%{transform:translate3d(0,0,0) scale(1)}}
@keyframes dropSquish{0%{border-radius:52% 48% 46% 54%/48% 52% 48% 52%}50%{border-radius:44% 56% 58% 42%/56% 44% 56% 44%}100%{border-radius:52% 48% 46% 54%/48% 52% 48% 52%}}
@keyframes markSheen{0%{background-position:0% 50%}100%{background-position:100% 50%}}
@keyframes rippleDrift{0%{transform:translate3d(0,0,0) skewY(0deg) scaleY(1)}50%{transform:translate3d(-3%,1.5%,0) skewY(1.2deg) scaleY(1.08)}100%{transform:translate3d(0,0,0) skewY(0deg) scaleY(1)}}
@keyframes grainDrift{0%{transform:translate3d(0,0,0)}100%{transform:translate3d(2.5%,-2%,0)}}
@keyframes rippleDriftB{0%{transform:translate3d(0,0,0) skewY(0deg)}50%{transform:translate3d(3.5%,-1.5%,0) skewY(-1.4deg)}100%{transform:translate3d(0,0,0) skewY(0deg)}}
@media (prefers-reduced-motion: reduce){[data-mercury]{animation:none !important}}

/* ================= design-system component classes ================= */
/* Button — ported from components/core/Button.jsx */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-sans); font-weight: var(--fw-medium); line-height: 1;
  border-radius: var(--radius-full); cursor: pointer; white-space: nowrap;
  transition: background 140ms ease, color 140ms ease;
  padding: 9px 18px; font-size: var(--fs-13);
  border: 1px solid transparent; text-align: center;
}
.btn--sm { padding: 6px 14px; font-size: var(--fs-12); }
.btn--lg { padding: 12px 24px; font-size: var(--fs-15); }
.btn--primary { background: var(--btn-primary-bg); color: var(--btn-primary-fg); border-color: transparent; }
.btn--primary:hover { background: var(--btn-primary-hover); color: #fff; }
.btn--block { width: 100%; padding: 12px 24px; }
.btn:disabled { opacity: .6; cursor: default; }

/* Input — ported from components/core/Input.jsx */
.input {
  font-family: var(--font-sans); font-size: var(--fs-14); color: var(--text-strong);
  background: #fff; border: 1px solid var(--border-chip); border-radius: var(--radius-8);
  padding: 9px 12px; outline: none; width: 100%; box-sizing: border-box;
  transition: border-color 140ms ease;
}
.input--pill { border-radius: var(--radius-full); padding: 9px 16px; }
.input:focus { border-color: var(--ink); }

/* Tag — ported from components/core/Tag.jsx */
.tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: var(--fs-11); font-weight: var(--fw-medium);
  text-transform: uppercase; letter-spacing: var(--tracking-label);
  padding: 3px 10px; border-radius: var(--radius-full); line-height: 1.2;
}
.tag--ink { background: var(--ink); color: #fff; border: 1px solid transparent; }

/* Form status message */
.form-status { margin: 12px 0 0; font-size: 12.5px; line-height: 1.5; }
.form-status--pending { color: var(--slate-500); }
.form-status--ok { color: #16a34a; font-weight: 600; }
.form-status--error { color: #a11; }

/* ================= responsive ================= */
/* NOTE: the elements are inline-styled and the reveal script mutates some of
   them via the CSSOM, which re-serializes the style attribute with a space
   after each colon/comma. So every [style*=] hook below is listed twice: the
   authored form (no space) and the normalized form (with space). */

/* ---------------------------------------------------------------------------
   Slack message mock (hero). Values follow Slack's light theme: Lato, 15px/22px
   body, #1D1C1D text, #616061 secondary, #1264A3 links, rgba(29,28,29,.13)
   rules. Buttons are spans on purpose — the card is a mockup, not a control.
   --------------------------------------------------------------------------- */
.sl {
  --sl-text: #1d1c1d;
  --sl-dim: #616061;
  --sl-link: #1264a3;
  --sl-rule: rgba(29, 28, 29, .13);
  font-family: Lato, "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: var(--sl-text);
  text-align: left;
  background: #fff;
  border: 1px solid rgba(29, 28, 29, .16);
  border-radius: 10px;
  box-shadow: 0 34px 64px -28px rgba(1, 22, 39, .34), 0 2px 6px rgba(1, 22, 39, .06);
  overflow: hidden;
  margin: 56px auto 0;
  max-width: 760px;
}

.sl-msg { display: flex; gap: 8px; padding: 18px 18px 20px; }
.sl-avatar {
  flex: none; width: 36px; height: 36px; border-radius: 4px;
  background: #011627; color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-pixel); font-weight: 900; font-size: 19px;
}
.sl-mbody { flex: 1; min-width: 0; }
.sl-meta { display: flex; align-items: baseline; gap: 6px; margin-bottom: 1px; }
.sl-author { font-size: 15px; font-weight: 700; letter-spacing: -.01em; }
.sl-badge {
  font-size: 10px; font-weight: 700; line-height: 1.4; text-transform: uppercase;
  color: var(--sl-dim); background: var(--sl-rule); border-radius: 2px; padding: 1px 4px;
}
.sl-time { font-size: 12px; color: var(--sl-dim); }

.sl-t { margin: 0; font-size: 15px; line-height: 1.46667; }
.sl-t + .sl-t { margin-top: 8px; }
.sl-mt { margin-top: 14px; }
.sl-b { font-weight: 700; }
.sl-link { color: var(--sl-link); text-decoration: none; }
.sl-link:hover { text-decoration: underline; }
.sl-div { height: 1px; background: var(--sl-rule); margin: 14px 0; }

/* Legacy-attachment colour bar */
.sl-att { margin-top: 14px; padding-left: 12px; border-left: 4px solid var(--sl-rule); border-radius: 4px; }
.sl-att--warn { border-left-color: #ecb22e; }
.sl-att-title { font-size: 15px; line-height: 1.46667; font-weight: 700; margin-bottom: 3px; }

.sl-ctx { margin-top: 7px; font-size: 12px; line-height: 1.5; color: var(--sl-dim); }

.sl-ul { margin: 7px 0 0; padding: 0; list-style: none; font-size: 15px; line-height: 1.46667; }
.sl-ul li { position: relative; padding-left: 19px; }
.sl-ul li + li { margin-top: 5px; }
.sl-ul li::before { content: "\2022"; position: absolute; left: 6px; }

.sl-quote { margin: 8px 0 0; padding-left: 16px; border-left: 4px solid rgba(29, 28, 29, .3); }
.sl-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 20px; margin-top: 14px; }
.sl-field-h { font-size: 15px; line-height: 1.46667; font-weight: 700; margin-bottom: 5px; }

.sl-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.sl-btn {
  font-size: 13px; font-weight: 700; line-height: 1.2; color: var(--sl-text);
  background: #fff; border: 1px solid rgba(29, 28, 29, .3); border-radius: 4px; padding: 9px 12px;
}
.sl-btn--primary { background: #007a5a; border-color: transparent; color: #fff; }

/* Same message, nested inside an animation card instead of standing alone */
.sl--inline {
  margin: 0; max-width: none; border-radius: 10px; box-shadow: none;
  border-color: rgba(148, 163, 184, .28);
}
.sl--inline .sl-msg { padding: 14px 15px 15px; gap: 7px; }
.sl--inline .sl-avatar { width: 28px; height: 28px; border-radius: 3px; font-size: 15px; }
.sl--inline .sl-author { font-size: 13.5px; }
.sl--inline .sl-t,
.sl--inline .sl-ul,
.sl--inline .sl-att-title { font-size: 13px; }
.sl--inline .sl-btn { font-size: 12px; padding: 7px 10px; }
.sl--inline .sl-actions { margin-top: 13px; }

/* Tablet + mobile: collapse multi-column grids to a single column */
@media (max-width: 900px) {
  [style*="grid-template-columns:1.05fr 1fr"],
  [style*="grid-template-columns: 1.05fr 1fr"],
  [style*="grid-template-columns:1fr 1fr 1.35fr"],
  [style*="grid-template-columns: 1fr 1fr 1.35fr"],
  [style*="grid-template-columns:repeat(3,1fr)"],
  [style*="grid-template-columns: repeat(3, 1fr)"],
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns:1.05fr 1.4fr 1.4fr"],
  [style*="grid-template-columns: 1.05fr 1.4fr 1.4fr"],
  [style*="grid-template-columns:130px 1fr"],
  [style*="grid-template-columns: 130px 1fr"],
  [style*="grid-template-columns:1fr 420px"],
  [style*="grid-template-columns: 1fr 420px"] {
    grid-template-columns: 1fr !important;
  }

  .sl-fields { grid-template-columns: 1fr; gap: 14px; }

  /* Kill the heavy infinite gradient animations on small screens */
  [data-mercury] { animation: none !important; }

  /* ---- pinned scroll section -> plain stacked layout ---- */
  [data-anim-section] { height: auto !important; }
  [data-anim-section] > div {
    position: static !important; display: block !important;
    height: auto !important; min-height: 0 !important; max-height: none !important;
    padding: 40px 16px 8px !important; overflow: visible !important;
  }
  [data-anim-section] > div > div {
    position: relative !important; width: auto !important; height: auto !important;
    max-width: 520px; margin: 0 auto;
  }
  [data-anim-section] [data-head] {
    position: static !important; opacity: 1 !important;
    margin: 0 0 20px !important; text-align: center;
  }
  [data-anim-section] [data-fb],
  [data-anim-section] [data-dl],
  [data-anim-section] [data-out],
  [data-anim-section] [data-dh] {
    position: static !important; opacity: 1 !important; transform: none !important;
    width: auto !important; max-width: 520px; margin: 0 auto 12px !important;
  }
  [data-anim-section] [data-colhead],
  [data-anim-section] [data-dlhead],
  [data-anim-section] [data-more] {
    position: static !important; opacity: 1 !important;
    margin: 26px auto 10px !important; text-align: center;
  }
  /* Hide the scatter/connector/overlay bits that only make sense while animating */
  [data-anim-section] [data-fb][data-col="-1"],
  [data-anim-section] [data-cnsvg],
  [data-anim-section] [data-cn],
  [data-anim-section] [data-lab],
  [data-anim-section] [data-chip] {
    display: none !important;
  }
}

/* Phones */
@media (max-width: 760px) {
  h1 { font-size: clamp(30px, 8.5vw, 60px) !important; }
  h2 { font-size: clamp(22px, 6vw, 34px) !important; }
  [style*="font-size:84px"],
  [style*="font-size: 84px"] { font-size: 56px !important; }

  /* Hero top padding is huge on desktop */
  [style*="padding:152px 28px 104px"],
  [style*="padding: 152px 28px 104px"] { padding: 108px 20px 64px !important; }

  /* Slack card: tighter gutters and type on phones */
  .sl { margin-top: 40px; border-radius: 8px; }
  .sl-msg { padding: 14px 13px 16px; gap: 7px; }
  .sl-avatar { width: 30px; height: 30px; font-size: 16px; }
  .sl-author { font-size: 14px; }
  .sl-t,
  .sl-ul,
  .sl-att-title,
  .sl-field-h { font-size: 13.5px; }
  .sl-quote { padding-left: 12px; border-left-width: 3px; }
  .sl-btn { font-size: 12.5px; padding: 8px 11px; }

  /* Nav: hide the section anchors, keep logo + CTA */
  div[style*="z-index:60"] nav > div:last-child > a:not(.btn),
  div[style*="z-index: 60"] nav > div:last-child > a:not(.btn) { display: none !important; }
  div[style*="z-index:60"] > div,
  div[style*="z-index: 60"] > div { padding: 14px 16px 0 !important; }
  div[style*="z-index:60"] nav,
  div[style*="z-index: 60"] nav { padding: 7px 8px 7px 14px !important; }

  /* Footer: stack */
  footer > div { flex-direction: column !important; gap: 14px !important; }

  /* iOS zooms inputs under 16px on focus */
  .input { font-size: 16px; }

  /* Safe-area padding at the very bottom */
  footer { padding-bottom: env(safe-area-inset-bottom); }
}

/* Narrow phones: trim the generous 28px side padding on 1120px wrappers */
@media (max-width: 600px) {
  [style*="max-width:1120px"],
  [style*="max-width: 1120px"] {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}