/* BIMMING - shared styles (look taken from the original Carrd site).
   Everything is sized in rem, so the whole page scales with the root font size.
   Above 980 px it grows smoothly with the window: 17.33 px (13pt) up to 1280 px wide,
   then linearly to 24 px (18pt) at 1920 px (Carrd jumped from one to the other at 1680 px). */
:root {
  color-scheme: dark;
  --bg: #15141c;
  --ink: #ffffff;
  --text: rgba(255, 255, 255, .66);
  --faint: rgba(255, 255, 255, .26);
  --line: rgba(255, 255, 255, .12);
  --ring: rgba(255, 255, 255, .26);
  --orange: #fa9048;
  --pink: #ff5473;
  --grad-btn: linear-gradient(90deg, var(--pink) 0%, var(--orange) 100%);
  --grad-band: linear-gradient(90deg, rgba(250, 144, 72, .95) 0%, rgba(255, 84, 115, .92) 100%);
}

html { font-size: clamp(13pt, 4px + 1.0417vw, 18pt); scroll-behavior: smooth; }
@media (max-width: 980px)  { html { font-size: 11pt; } }   /* 14.67 px */
@media (max-width: 736px)  { html { font-size: 12pt; } }   /* 16 px */

* { box-sizing: border-box; }
body {
  margin: 0;
  min-width: 320px;
  background: var(--bg);
  color: var(--text);
  font: 300 1rem/1.875 Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  overflow-x: hidden;
}
img { max-width: 100%; }
a { color: inherit; }

/* thin curves fixed to the viewport. They sit above the content (but ignore the mouse)
   so they also show through the orange band, as if it were transparent; over the dark
   areas and the text they look the same as a background. */
.curves {
  position: fixed; inset: 0; z-index: 2; pointer-events: none;
  background: url("img/curves.svg") center / cover no-repeat;
  opacity: .14;
}
main, footer { position: relative; z-index: 1; }

.wrap { max-width: 56rem; margin: 0 auto; padding: 0 1.5rem; }
.center { text-align: center; }
.rule { border-top: 1px solid var(--line); }

h1, h2, h3 { margin: 0; color: var(--ink); font-family: Sora, Inter, sans-serif; font-weight: 400; }
h2 { font-size: 1.5rem; line-height: 1.75; letter-spacing: .03em; }
h3 { font-size: 1.5rem; line-height: 1.6; }
p { margin: 0; }

/* hero */
.hero { padding: 6.5rem 0 6rem; }
.hero .icon { display: block; width: 6rem; margin: 0 auto; }
/* the PNG has transparent margins: crop them to the same box as Carrd (436 x 113 at 1280 px) */
.hero .wordmark { display: block; width: 25.15rem; height: 6.52rem; object-fit: cover; margin: 1.5rem auto; }
.hero p { max-width: 35rem; margin: 0 auto; line-height: 2; }

/* buttons */
.btn {
  display: inline-flex; align-items: center; gap: .6rem;
  height: 3.75rem; padding: 0 2rem; margin-top: 1.5rem;
  border-radius: 999px; background: var(--grad-btn);
  color: #fff; font-size: 1rem; font-weight: 400; text-decoration: none;
  transition: transform .2s ease, filter .2s ease;
}
.btn:hover { transform: translateY(-1px); filter: brightness(1.08); }
.btn svg { width: .9rem; height: .9rem; fill: currentColor; }

/* social icons */
.social { display: flex; justify-content: center; gap: .75rem; margin: 11.1rem 0 0; padding: 0; list-style: none; }
.social a { display: block; width: 1.25rem; height: 1.25rem; }
.social svg { width: 100%; height: 100%; fill: #fff; transition: fill .25s ease; }
.social a:hover svg { fill: var(--orange); }

/* round frame around the small icons */
.ring {
  display: inline-flex; align-items: center; justify-content: center;
  width: 3.4rem; height: 3.4rem; border-radius: 50%; border: 2px solid var(--ring);
}
.ring img { width: 50%; }

/* orange band with the two install steps (slightly see-through) */
/* the padding is inside the steps, so the divider between them runs the full height of the band */
.band { position: relative; background: var(--grad-band); overflow: hidden; }
.band .wrap { position: relative; max-width: 55.85rem; padding: 0; display: grid; grid-template-columns: 1fr 1fr; }
.band .step { padding: 6rem 1.5rem; text-align: center; color: rgba(255, 255, 255, .8); line-height: 1.8; }
.band .step + .step { border-left: 1px solid rgba(255, 255, 255, .2); }
.band .ring { width: 3.25rem; height: 3.25rem; border-color: rgba(255, 255, 255, .5); }
.band h3 { margin: 1.5rem 0 1.4rem; }
.band p { max-width: 21.6rem; margin: 0 auto; }
.band a { color: #fff; }

/* extension intro */
.intro { padding: 4.55rem 0 8.2rem; }
.intro .icon { display: block; width: 3.6rem; margin: 0 auto; }
.intro h3 { margin: 1.75rem 0 1.45rem; }
.intro p { max-width: 35rem; margin: 0 auto; line-height: 2; }

/* tool groups */
.group { padding: 6.45rem 0 6.8rem; }
.group h2 { text-align: center; margin-bottom: 6.5rem; }
.tools { max-width: 56rem; margin: 0 auto; padding: 0 1.5rem 0 3.8rem; }
.tool { display: grid; grid-template-columns: 3.4rem 1fr; gap: 0 4.1rem; align-items: start; }
.tool + .tool { margin-top: 6.75rem; }
.tool .ring { margin-top: .17rem; }
.tool b { display: block; color: var(--ink); font-weight: 400; }

/* contact */
.contact { padding: 7rem 0; }
.contact h2 { font-size: 3.625rem; font-weight: 700; line-height: 1.2; letter-spacing: 0; margin-bottom: 1.6rem; }
.contact .btn { margin-top: 1.6rem; }

footer { padding: 6.5rem 0 6rem; text-align: center; }
footer .social { margin: 0 0 6rem; }
footer small { display: block; color: var(--faint); font-size: 1rem; line-height: 2; }

/* the two logos in the hero grow a bit less than the rest on very wide screens (as on Carrd):
   capped at their Carrd size at 1854 px */
.hero .icon { width: min(6rem, 130px); }
.hero .wordmark { width: min(25.15rem, 543px); height: min(6.52rem, 141px); }

@media (max-width: 736px) {
  .hero { padding: 6rem 0 4rem; }
  .hero .wordmark { width: 18rem; height: 4.67rem; }
  .social { margin-top: 6rem; }
  .band .wrap { grid-template-columns: 1fr; }
  .band .step { padding: 3.5rem 1.5rem; }
  .band .step + .step { border-left: 0; border-top: 1px solid rgba(255, 255, 255, .2); }
  .intro { padding: 4rem 0 5rem; }
  .group { padding: 4.5rem 0; }
  .group h2 { margin-bottom: 3.5rem; }
  .tools { padding: 0 1rem; }
  .tool { grid-template-columns: 3rem 1fr; gap: 0 1.25rem; }
  .tool .ring { width: 3rem; height: 3rem; }
  .tool + .tool { margin-top: 3.5rem; }
  .contact { padding: 4.5rem 0; }
  .contact h2 { font-size: 2.5rem; }
  footer { padding: 4.5rem 0; }
  footer .social { margin-bottom: 3rem; }
}