/* Shared styles for the homepage, About, Tubbie and Mailbox for Zoho. Loaded after main.css; every
   class is prefixed with "fd-" so nothing here touches Bulma, the shared navbar and footer, or the
   product pages that have their own stylesheets. Matches the type, color and radius of batteries.css
   and castpanda.css so the whole site reads as one family. */

.fd {
  --fd-ink: #1D1D1F;
  --fd-text-2: #515154;
  --fd-muted: #6E6E73;
  --fd-line: rgba(0, 0, 0, 0.08);
  --fd-light: #F5F5F7;
  --fd-card: #FFFFFF;
  /* Apple's link blue. White text on it clears 4.5:1, unlike #007AFF. */
  --fd-blue: #0071E3;
  --fd-blue-hover: #0077ED;
  --fd-link: #0066CC;
  --fd-radius: 24px;
  --fd-max: 1120px;
  --fd-gutter: clamp(16px, 4vw, 40px);
  --fd-ease: cubic-bezier(0.22, 1, 0.36, 1);

  flex: 1 0 auto;
  color: var(--fd-ink);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", system-ui, sans-serif;
  font-size: 1rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.fd *,
.fd *::before,
.fd *::after {
  box-sizing: border-box;
}

.fd a {
  color: var(--fd-link);
  transition: color 0.15s var(--fd-ease);
}

.fd a:hover {
  color: var(--fd-ink);
}

.fd :focus-visible {
  outline: 3px solid rgba(0, 113, 227, 0.5);
  outline-offset: 3px;
  border-radius: 8px;
}

.fd img,
.fd video {
  display: block;
  max-width: 100%;
}

/* ---------- Layout ---------- */

.fd-wrap {
  width: 100%;
  max-width: var(--fd-max);
  margin: 0 auto;
  padding-left: var(--fd-gutter);
  padding-right: var(--fd-gutter);
}

.fd-section {
  padding-top: clamp(56px, 7vw, 96px);
  padding-bottom: clamp(56px, 7vw, 96px);
}

.fd-section--light {
  background: var(--fd-light);
}

/* Two white sections in a row read as one, so the second doesn't add its own top padding. */
.fd-section:not(.fd-section--light) + .fd-section:not(.fd-section--light) {
  padding-top: 0;
}

.fd-center {
  text-align: center;
}

/* ---------- Type ---------- */

.fd-h1,
.fd-h2,
.fd-h3 {
  margin: 0;
  color: inherit;
  font-weight: 600;
  text-wrap: balance;
}

.fd-h1 {
  font-size: clamp(2.25rem, 5vw, 3.5rem);
  line-height: 1.07;
  letter-spacing: -0.025em;
}

.fd-h2 {
  font-size: clamp(1.75rem, 3.4vw, 2.5rem);
  line-height: 1.1;
  letter-spacing: -0.025em;
}

.fd-h3 {
  font-size: 1.1875rem;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.fd-lead {
  margin: 12px 0 0;
  font-size: clamp(1.1875rem, 2vw, 1.5rem);
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--fd-ink);
  text-wrap: balance;
}

.fd-body {
  max-width: 34rem;
  margin: 16px 0 0;
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--fd-text-2);
  text-wrap: pretty;
}

.fd-center .fd-body {
  margin-left: auto;
  margin-right: auto;
}

.fd-section-head {
  margin: 0 auto clamp(32px, 4vw, 48px);
  text-align: center;
}

/* ---------- Buttons and links ---------- */

.fd-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  margin-top: 24px;
}

.fd-center .fd-actions {
  justify-content: center;
}

.fd-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 44px;
  padding: 0 20px;
  border-radius: 22px;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.15s var(--fd-ease), color 0.15s var(--fd-ease), transform 0.12s var(--fd-ease);
}

.fd-btn:active {
  transform: scale(0.98);
}

.fd-btn--lg {
  min-height: 48px;
  padding: 0 24px;
  border-radius: 24px;
  font-size: 1.0625rem;
}

.fd .fd-btn--primary,
.fd .fd-btn--primary:hover {
  color: #FFFFFF;
  background: var(--fd-blue);
}

.fd .fd-btn--primary:hover {
  background: var(--fd-blue-hover);
}

.fd .fd-btn--secondary {
  color: var(--fd-ink);
  background: var(--fd-card);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.14);
}

.fd .fd-btn--secondary:hover {
  color: var(--fd-ink);
  background: var(--fd-light);
}

/* The quiet half of "Download 10 days trial". */
.fd-btn-light {
  font-weight: 400;
  opacity: 0.85;
}

.fd-btn svg,
.fd-link svg {
  width: 18px;
  height: 18px;
  flex: none;
}

.fd-btn svg {
  margin-right: 4px;
}

.fd-link {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  min-height: 44px;
  font-size: 1rem;
  text-decoration: none;
}

.fd-link svg {
  transition: transform 0.15s var(--fd-ease);
}

.fd-link:hover svg {
  transform: translateX(2px);
}

.fd-store-badge img {
  height: 44px;
  width: auto;
}

/* ---------- Homepage ---------- */

.fd-home {
  background: var(--fd-light);
}

.fd-intro {
  padding-top: clamp(32px, 4.5vw, 64px);
  padding-bottom: clamp(32px, 4vw, 56px);
}

.fd-intro .fd-h1 {
  max-width: 14em;
}

.fd-apps {
  padding-bottom: clamp(48px, 6vw, 80px);
}

.fd-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 20px;
}

.fd-app {
  grid-column: span 2;
  display: flex;
  flex-direction: column;
  padding: clamp(24px, 3vw, 36px);
  border-radius: var(--fd-radius);
  background: var(--fd-card);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.fd-app--wide {
  grid-column: span 3;
}

.fd-app-icon {
  display: block;
  width: 112px;
  height: 112px;
  margin: -8px 0 20px -8px;
  border-radius: 26px;
}

.fd-app-icon img {
  width: 112px;
  height: 112px;
}

/* Spiik's artwork fills its canvas edge to edge; the Mac icons keep a margin around the tile. Inset it
   to match their visual size. */
.fd-app-icon--full-bleed img {
  padding: 9%;
}

.fd-app-name {
  margin: 0;
  font-size: 1.5rem;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.fd .fd-app-name a {
  color: var(--fd-ink);
  text-decoration: none;
}

.fd .fd-app-name a:hover {
  color: var(--fd-link);
}

.fd-app-tagline {
  margin: 8px 0 0;
  font-size: 1.125rem;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--fd-ink);
  text-wrap: balance;
}

.fd-app-desc {
  margin: 12px 0 0;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--fd-muted);
  text-wrap: pretty;
}

/* Buttons sit on the card's bottom edge, so cards in one row line them up. */
.fd-app .fd-actions {
  margin-top: auto;
  padding-top: 24px;
}

/* Wide cards put the icon beside the text. */
@media screen and (min-width: 1024px) {
  .fd-app--wide {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    grid-template-rows: auto auto 1fr auto;
    column-gap: 28px;
  }

  .fd-app--wide .fd-app-icon {
    grid-row: 1 / span 4;
    margin: -8px 0 0 -8px;
  }
}

@media screen and (min-width: 640px) and (max-width: 1023px) {
  .fd-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .fd-app,
  .fd-app--wide {
    grid-column: span 1;
  }

  /* The third Mac app gets the full row, so the two-up grid has no gap. */
  .fd-app--feature-md {
    grid-column: span 2;
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    grid-template-rows: auto auto 1fr auto;
    column-gap: 28px;
  }

  .fd-app--feature-md .fd-app-icon {
    grid-row: 1 / span 4;
    margin: -8px 0 0 -8px;
  }
}

@media screen and (max-width: 639px) {
  .fd-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }

  .fd-app,
  .fd-app--wide {
    grid-column: auto;
  }

  .fd-app-icon,
  .fd-app-icon img {
    width: 96px;
    height: 96px;
  }
}

/* ---------- About ---------- */

.fd-about {
  display: flex;
  align-items: center;
  background: var(--fd-light);
  padding-top: clamp(32px, 4.5vw, 64px);
  padding-bottom: clamp(56px, 8vw, 112px);
}

.fd-profile {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}

.fd-profile-photo {
  width: 144px;
  height: 144px;
  margin: 0 auto 28px;
  border-radius: 50%;
  box-shadow: 0 0 0 1px var(--fd-line), 0 8px 24px rgba(0, 0, 0, 0.08);
}

.fd-profile .fd-h1 {
  font-size: clamp(2rem, 4vw, 2.75rem);
}

.fd-profile .fd-h1 b {
  font-weight: 600;
}

.fd-profile .fd-body {
  max-width: 42rem;
  margin: 16px auto 0;
  font-size: clamp(1.0625rem, 1.6vw, 1.1875rem);
}

.fd-social {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 32px;
}

.fd-social .fd-btn {
  gap: 8px;
  font-weight: 500;
}

.fd-social .fd-btn svg {
  width: 16px;
  height: 16px;
  margin: 0;
  color: var(--fd-muted);
}

/* ---------- Product pages ---------- */

.fd-product-hero {
  padding-top: clamp(48px, 7vw, 96px);
  padding-bottom: clamp(48px, 6vw, 80px);
}

/* The hero already ends with space, so the media under it doesn't add a full section's worth more. */
.fd-product-hero + .fd-section:not(.fd-section--light) {
  padding-top: 8px;
}

.fd-product-icon {
  width: 128px;
  height: 128px;
  margin: 0 auto 20px;
}

.fd .fd-title-link {
  color: var(--fd-ink);
  text-decoration: none;
}

.fd .fd-title-link:hover {
  color: var(--fd-ink);
}

.fd-media {
  margin: 0 auto;
  max-width: 1000px;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 0 0 1px var(--fd-line), 0 24px 48px -16px rgba(0, 0, 0, 0.22);
}

.fd-media img,
.fd-media video {
  width: 100%;
  height: auto;
}

.fd-media + .fd-media {
  margin-top: clamp(32px, 5vw, 64px);
}

.fd-checks {
  display: grid;
  gap: 12px;
  max-width: 560px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

.fd-checks li {
  position: relative;
  padding: 16px 20px 16px 52px;
  border-radius: 14px;
  background: var(--fd-card);
  font-size: 1.0625rem;
  line-height: 1.45;
}

.fd-checks li::before {
  content: "";
  position: absolute;
  left: 20px;
  top: 50%;
  width: 20px;
  height: 20px;
  margin-top: -10px;
  border-radius: 50%;
  background: var(--fd-blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 12px no-repeat;
}

.fd-quote {
  max-width: 720px;
  margin: 0 auto;
  padding: clamp(24px, 4vw, 40px);
  border-radius: var(--fd-radius);
  background: var(--fd-card);
  text-align: center;
}

.fd-quote p {
  margin: 0;
  font-size: clamp(1.25rem, 2.2vw, 1.5rem);
  line-height: 1.4;
  font-weight: 500;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.fd-quote footer {
  margin-top: 16px;
  font-size: 0.9375rem;
  color: var(--fd-muted);
}

.fd-details {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  max-width: 880px;
  margin: 0 auto;
}

.fd-detail {
  padding: 28px;
  border-radius: var(--fd-radius);
  background: var(--fd-card);
  box-shadow: inset 0 0 0 1px var(--fd-line);
}

.fd-detail ul,
.fd-detail p {
  margin: 12px 0 0;
  color: var(--fd-text-2);
}

.fd-detail ul {
  padding-left: 1.2em;
  list-style: disc;
}

.fd-detail li + li {
  margin-top: 6px;
}

.fd-detail strong {
  color: var(--fd-ink);
  font-weight: 600;
}

@media screen and (max-width: 639px) {
  .fd-details {
    grid-template-columns: minmax(0, 1fr);
  }

  .fd-product-icon {
    width: 112px;
    height: 112px;
  }
}

/* ---------- Entrance ---------- */

@media (prefers-reduced-motion: no-preference) {
  .fd-rise {
    animation: fd-rise 0.45s var(--fd-ease) both;
  }

  .fd-grid > .fd-rise:nth-child(2) { animation-delay: 50ms; }
  .fd-grid > .fd-rise:nth-child(3) { animation-delay: 100ms; }
  .fd-grid > .fd-rise:nth-child(4) { animation-delay: 150ms; }
  .fd-grid > .fd-rise:nth-child(5) { animation-delay: 200ms; }

  @keyframes fd-rise {
    from {
      opacity: 0;
      transform: translateY(8px);
    }
  }
}

/* ---------- Home: the whole card links to the app's page ----------
   The app name's link is stretched over the card; the buttons sit above it so they still work.
   On hover the card eases up in size, gets a visible border and a soft neutral wash. */

.fd-home .fd-app {
  --fd-tint: 60, 66, 84;
  position: relative;
  will-change: transform;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.6s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.6s ease;
}

.fd-home .fd-app-name a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
}

.fd-home .fd-actions,
.fd-home .fd-app-icon {
  position: relative;
  z-index: 2;
}

.fd-home .fd-app:hover {
  transform: scale(1.015);
  background-color: #F1F2F5;
  box-shadow: inset 0 0 0 1.5px rgba(var(--fd-tint), 0.16), 0 30px 60px -30px rgba(var(--fd-tint), 0.28);
}

.fd-home .fd-app:has(.fd-app-name a:focus-visible) {
  outline: 3px solid rgb(var(--fd-tint));
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .fd-home .fd-app { transition: none; }
  .fd-home .fd-app:hover { transform: none; }
}

/* The app name stays black: the whole card is the link, so the hover cue is the card itself. */
.fd-home .fd-app-name a,
.fd-home .fd-app-name a:hover {
  color: var(--fd-ink);
}