/* Features Cards section - plain CSS version of the Tailwind design.
   No Tailwind needed. Scoped under .fc-section so it can drop into any page. */
.fc-section { padding: 5rem 1.5rem; background: #F4F5F7; font-family: 'Inter Tight', sans-serif; color: #1a1a1a; }
:where(.fc-section) *, :where(.fc-section) *::before, :where(.fc-section) *::after { box-sizing: border-box; }
:where(.fc-section) :where(h2, h3, p) { margin: 0; }
:where(.fc-section) button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; padding: 0; }
:where(.fc-section) svg { display: block; }
@media (min-width: 768px) { .fc-section { padding-inline: 4rem; } }

.fc-container { max-width: 80rem; margin: 0 auto; }
.fc-layout { display: flex; flex-direction: column; gap: 4rem; align-items: flex-start; }
@media (min-width: 1024px) { .fc-layout { flex-direction: row; } }

/* Left text */
.fc-text { flex: 1 1 0%; padding-top: 2rem; }
@media (min-width: 1024px) { .fc-text { max-width: 28rem; } }
.fc-counter { display: flex; align-items: center; gap: 1rem; margin-bottom: 2rem; font-size: .875rem; color: #9ca3af; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }
.fc-counter .fc-rule { height: 1px; width: 3rem; background: #d1d5db; }
.fc-title { font-size: 2.25rem; font-weight: 500; line-height: 1.1; margin-bottom: 2rem; color: #1a1a1a; }
@media (min-width: 768px) { .fc-title { font-size: 3rem; } }
.fc-lead { color: #6b7280; margin-bottom: 2.5rem; line-height: 1.625; 
  /* max-width: 24rem;  */
}
.fc-cta { display: flex; align-items: center; gap: .75rem; background: #000; color: #fff; padding: .5rem .5rem .5rem 1.5rem; border-radius: 9999px; transition: all .15s; box-shadow: 0 20px 25px -5px rgba(0,0,0,.1), 0 8px 10px -6px rgba(0,0,0,.1); }
.fc-cta:hover { background: #1f2937; }
.fc-cta-icon { background: #fff; color: #000; width: 2rem; height: 2rem; border-radius: 9999px; display: flex; align-items: center; justify-content: center; transition: transform .3s; }
.fc-cta:hover .fc-cta-icon { transform: rotate(45deg); }

/* Right cards */
.fc-right { flex: 1 1 0%; width: 100%; min-width: 0; }
.fc-scroll { overflow-x: auto; padding-bottom: 2rem; margin-inline: -1.5rem; padding-inline: 1.5rem; scroll-behavior: smooth; scrollbar-width: none; -ms-overflow-style: none; }
.fc-scroll::-webkit-scrollbar { display: none; }
@media (min-width: 1024px) { .fc-scroll { margin-inline: 0; padding-inline: 0; } }
.fc-track { display: flex; gap: 1.5rem; min-width: max-content; }
@media (min-width: 1024px) { .fc-track { min-width: 0; } }

.fc-card { position: relative; height: 400px; width: 100%; flex-shrink: 0; border-radius: 24px; overflow: hidden; transition: all .5s; box-shadow: 0 20px 25px -5px rgba(0,0,0,.1), 0 8px 10px -6px rgba(0,0,0,.1); }
@media (min-width: 768px) { .fc-card { width: 350px; } }
.fc-card.is-dim { opacity: .6; }
.fc-card.is-dim:hover { opacity: 1; }
.fc-card > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .7s; }
.fc-card:hover > img { transform: scale(1.1); }
.fc-overlay { position: absolute; inset: 0; background: rgba(0,0,0,.4); transition: background-color .15s; }
.fc-card:hover .fc-overlay { background: rgba(0,0,0,.2); }
.fc-body { position: absolute; inset: 0; padding: 2rem; display: flex; flex-direction: column; justify-content: space-between; color: #fff; }
.fc-body h3 { font-size: 1.5rem; font-weight: 500; line-height: 1.25; }
.fc-body p { font-size: .875rem; opacity: .8; margin-bottom: 1rem; }
.fc-more { display: inline-flex; align-items: center; gap: .5rem; background: rgba(255,255,255,.2); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); padding: .5rem 1rem; border-radius: 9999px; font-size: .875rem; transition: all .15s; color: #fff; }
.fc-more:hover { background: #fff; color: #000; }
.fc-num { position: absolute; bottom: 2rem; right: 2rem; font-size: 3.75rem; font-weight: 300; opacity: .2; font-family: 'Playfair Display', serif; font-style: italic; line-height: 1; color: #fff; }

/* Arrows */
.fc-arrows { display: flex; gap: 1rem; margin-top: 2rem; justify-content: flex-end; padding-right: 1rem; }
.fc-arrow { width: 2.5rem; height: 2.5rem; border-radius: 9999px; display: flex; align-items: center; justify-content: center; transition: all .15s; }
.fc-arrow-prev { border: 1px solid #d1d5db; }
.fc-arrow-prev:hover { background: #000; color: #fff; }
.fc-arrow-prev svg { transform: rotate(180deg); }
.fc-arrow-next { background: #000; color: #fff; }
.fc-arrow-next:hover { background: #1f2937; }

/* Scroll reveal */
.fc-reveal { opacity: 0; transform: translateY(20px); transition: opacity .8s ease-out, transform .8s ease-out; }
.fc-reveal.fc-visible { opacity: 1; transform: translateY(0); }

/* Long-form content variant (6 cards with full descriptions) */
.fc-title.fc-title-long { font-size: 1.9rem; line-height: 1.2; }
@media (min-width: 768px) { .fc-title.fc-title-long { font-size: 2.25rem; } }
/* .fc-section .fc-lead { max-width: 30rem; } */
.fc-section .fc-card .fc-overlay { background: rgba(0,0,0,.6); }
.fc-section .fc-card:hover .fc-overlay { background: rgba(0,0,0,.45); }
.fc-section .fc-card { height: 440px; }
.fc-section .fc-body { padding: 1.75rem; }
.fc-section .fc-body h3 { font-size: 1.3rem; }
.fc-section .fc-body p { font-size: .8rem; line-height: 1.55; opacity: .9; margin-bottom: .9rem; }

/* Features section: heading + intro on top, all cards below */
#features .fc-layout { flex-direction: column; gap: 3rem; }
#features .fc-text { flex: none; max-width: 52rem; padding-top: 0; }
#features .fc-right { flex: none; width: 100%; }
@media (min-width: 1024px) {
  #features .fc-scroll { overflow: visible; padding-bottom: 0; }
  #features .fc-track { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; min-width: 0; }
  #features .fc-card { width: 100%; }
  #features .fc-arrows { display: none; }
}

/* Features section: centre the heading block */
#features .fc-text { margin-inline: auto; text-align: center; display: flex; flex-direction: column; align-items: center; }
#features .fc-counter { justify-content: center; }
/* #features .fc-lead { margin-inline: auto; } */

/* Features section: shorter cards */
#features .fc-card { height: 360px; }
@media (min-width: 1024px) { #features .fc-card { height: 340px; } }

/* Features section: tighter spacing */
#features.fc-section { padding-block: 3.5rem; }
#features .fc-layout { gap: 1.75rem; }
#features .fc-counter { margin-bottom: .75rem; }
#features .fc-title { margin-bottom: .75rem; }
#features .fc-lead { margin-bottom: 1.25rem; }
/* cards: title, text and button stack together instead of being pushed to opposite ends */
#features .fc-card, #features .fc-card.is-dim { height: auto; min-height: 0; }
#features .fc-body { position: relative; inset: auto; justify-content: flex-start; gap: .75rem; }
@media (min-width: 1024px) { #features .fc-card { height: auto; } }

/* Features section: only the title shows at first; description + button reveal on hover */
#features .fc-card, #features .fc-card.is-dim { height: 360px; opacity: 1; }
@media (min-width: 1024px) { #features .fc-card { height: 340px; } }
#features .fc-body { position: absolute; inset: 0; justify-content: space-between; gap: 0; }
#features .fc-body > div:last-child { opacity: 0; transform: translateY(14px); transition: opacity .35s ease, transform .35s ease; }
#features .fc-card:hover .fc-body > div:last-child,
#features .fc-card:focus-within .fc-body > div:last-child { opacity: 1; transform: none; }
#features .fc-overlay { background: rgba(0,0,0,.3); transition: background-color .35s ease; }
#features .fc-card:hover .fc-overlay,
#features .fc-card:focus-within .fc-overlay { background: rgba(0,0,0,.65); }
#features .fc-num { transition: opacity .35s ease; }
#features .fc-card:hover .fc-num { opacity: 0; }
/* touch screens have no hover, so keep everything visible there */
@media (hover: none) {
  #features .fc-body > div:last-child { opacity: 1; transform: none; }
  #features .fc-overlay { background: rgba(0,0,0,.6); }
}