/* =========================================================================
   components.css - styling for the app-frame razor component kit.
   Depends ONLY on frame.css (its --f-* tokens); no framework, no CDN.
   Link BOTH once per app:  frame.css THEN components.css.
   Component classes are prefixed .fc-* and reuse frame primitives (.f-btn,
   .f-card, .f-badge, .f-wrap, .f-grid, .f-eyebrow, .f-h2, .f-lede) for the
   shared parts, so repeated component use never duplicates CSS.
   ========================================================================= */

/* ---- Hero --------------------------------------------------------------- */
.fc-hero__grid { display: grid; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; }
.fc-hero__cta { display: flex; flex-wrap: wrap; gap: var(--f-s4); margin-top: var(--f-s5); }
.fc-hero__media { border-radius: var(--f-r4); background: var(--f-surface-2); aspect-ratio: 4 / 3; box-shadow: var(--f-shadow-2); overflow: hidden; }
.fc-hero--center { text-align: center; }
.fc-hero--center .f-lede { margin-inline: auto; }
.fc-hero--center .fc-hero__cta { justify-content: center; }

/* ---- Feature grid (asymmetric: first tile spans wider on desktop) ------- */
.fc-feature__icon { width: 40px; height: 40px; color: var(--f-accent); display: grid; place-content: center; font-size: 1.4rem; }
.fc-feature__title { font-size: var(--f-text-1); font-weight: 700; margin-top: var(--f-s3); }
.fc-feature__body { color: var(--f-muted); margin-top: var(--f-s1); line-height: 1.5; }

/* ---- Stat band (tabular numerals, hairline separators) ------------------ */
.fc-stats { display: grid; gap: 1px; background: var(--f-line); border: 1px solid var(--f-line); border-radius: var(--f-r3); overflow: hidden; grid-template-columns: repeat(2, 1fr); }
.fc-stat { background: var(--f-surface); padding: clamp(1.25rem, 3vw, 1.75rem); }
.fc-stat__value { font-size: var(--f-text-3); font-weight: 780; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.fc-stat__label { color: var(--f-muted); margin-top: var(--f-s1); font-size: var(--f-text--1); }

/* ---- Scroll rail (CSS-native horizontal scroll-snap) -------------------- */
.fc-rail__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--f-s4); }
.fc-rail__hint { color: var(--f-muted); font-size: var(--f-text--1); text-transform: uppercase; letter-spacing: 0.1em; }
.fc-rail__track {
  display: grid; grid-auto-flow: column; grid-auto-columns: min(74vw, 300px);
  gap: var(--f-s4); overflow-x: auto; scroll-snap-type: x mandatory;
  padding-block: var(--f-s5) var(--f-s4); scrollbar-width: none;
  -webkit-overflow-scrolling: touch; overscroll-behavior-inline: contain;
}
.fc-rail__track::-webkit-scrollbar { display: none; }
.fc-rail__item { scroll-snap-align: start; }
.fc-rail__swatch { aspect-ratio: 1; background: var(--f-surface-2); }
.fc-rail__name { font-weight: 700; }
.fc-rail__meta { color: var(--f-muted); font-size: var(--f-text--1); }
.fc-rail__price { font-weight: 700; margin-top: var(--f-s2); display: block; font-variant-numeric: tabular-nums; }

/* ---- Accordion (native details/summary) --------------------------------- */
.fc-accordion { display: grid; gap: var(--f-s3); max-width: 46rem; }
.fc-accordion details { border: 1px solid var(--f-line); border-radius: var(--f-r3); background: var(--f-surface); }
.fc-accordion summary { list-style: none; cursor: pointer; padding: 1.1rem 1.25rem; min-height: var(--f-tap); font-weight: 650; display: flex; align-items: center; justify-content: space-between; gap: var(--f-s4); }
.fc-accordion summary::-webkit-details-marker { display: none; }
.fc-accordion summary::after { content: "+"; font-size: 1.4rem; color: var(--f-muted); transition: transform var(--f-dur) var(--f-ease); }
.fc-accordion details[open] summary::after { content: "\2212"; }
.fc-accordion__body { padding: 0 1.25rem 1.25rem; color: var(--f-muted); line-height: 1.5; }

/* ---- Pricing card ------------------------------------------------------- */
.fc-price { display: flex; flex-direction: column; gap: var(--f-s4); }
.fc-price--featured { border-color: var(--f-accent); box-shadow: var(--f-shadow-2); }
.fc-price__plan { font-weight: 700; font-size: var(--f-text-1); }
.fc-price__amount { font-size: var(--f-text-3); font-weight: 780; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.fc-price__period { color: var(--f-muted); font-size: 1rem; font-weight: 500; }
.fc-price__list { display: grid; gap: var(--f-s3); color: var(--f-muted); }
.fc-price__list li { display: flex; gap: var(--f-s2); }
.fc-price__list li::before { content: "\2713"; color: var(--f-accent); font-weight: 700; }

/* ---- CTA band (full-bleed inverted panel) ------------------------------- */
.fc-cta { background: var(--f-ink); color: var(--f-bg); border-radius: var(--f-r4); text-align: center; padding: clamp(2.5rem, 6vw, 4.5rem) clamp(1.25rem, 4vw, 3rem); }
.fc-cta__title { font-family: var(--f-font-display); font-size: var(--f-text-2); font-weight: 760; }
.fc-cta__sub { color: color-mix(in srgb, var(--f-bg) 72%, transparent); margin-top: var(--f-s3); max-width: 50ch; margin-inline: auto; }
.fc-cta__actions { display: flex; flex-wrap: wrap; gap: var(--f-s4); justify-content: center; margin-top: var(--f-s5); }
.fc-cta .f-btn--secondary { background: var(--f-bg); color: var(--f-ink); border-color: transparent; }

/* ---- Testimonial -------------------------------------------------------- */
.fc-quote { max-width: 44ch; margin-inline: auto; text-align: center; }
.fc-quote__text { font-family: var(--f-font-display); font-size: var(--f-text-2); font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; text-wrap: balance; }
.fc-quote__cite { margin-top: var(--f-s4); color: var(--f-muted); font-style: normal; }
.fc-quote__author { color: var(--f-ink); font-weight: 700; }

/* ---- Logo / trust wall -------------------------------------------------- */
.fc-logos { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(1.25rem, 4vw, 3rem); }
.fc-logos__item { font-weight: 700; font-size: var(--f-text-1); letter-spacing: -0.01em; color: var(--f-muted); }

/* ---- Gallery grid (app launcher - from the pages' index) ---------------- */
.fc-gallery { display: grid; gap: clamp(0.75rem, 1.5vw, 1.25rem); grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); }
.fc-gallery__card {
  display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 0.15rem var(--f-s4);
  padding: 1.1rem 1.2rem; min-height: 92px; color: inherit;
  background: var(--f-surface); border: 1px solid var(--f-line); border-radius: var(--f-r3);
  box-shadow: var(--f-shadow-1);
  transition: transform var(--f-dur) var(--f-ease), box-shadow var(--f-dur) var(--f-ease), border-color var(--f-dur) var(--f-ease);
}
.fc-gallery__swatch { grid-row: 1 / 3; width: 2.1rem; height: 2.1rem; border-radius: var(--f-r2); background: var(--brand, var(--f-accent)); border: 1px solid rgba(0, 0, 0, 0.08); position: relative; }
.fc-gallery__swatch::after { content: ""; position: absolute; inset: auto 0.3rem 0.3rem auto; width: 0.55rem; height: 0.55rem; border-radius: 2px; background: var(--ink, var(--f-accent-ink)); }
.fc-gallery__name { font-weight: 650; font-size: var(--f-text-1); }
.fc-gallery__note { color: var(--f-muted); font-size: var(--f-text--1); }

/* ---- Footer columns ----------------------------------------------------- */
.fc-footer__brand { font-family: var(--f-font-display); font-weight: 800; font-size: var(--f-text-1); color: var(--f-ink); }
.fc-footer__col h3 { font-size: var(--f-text--1); text-transform: uppercase; letter-spacing: 0.08em; color: var(--f-ink); }
.fc-footer__col a { display: block; padding: 0.35rem 0; min-height: 40px; color: var(--f-muted); }

/* ---- Responsive: real layout changes ------------------------------------ */
@media (min-width: 720px) {
  .fc-hero__grid { grid-template-columns: 1.1fr 0.9fr; }
  .fc-hero--center .fc-hero__grid { grid-template-columns: 1fr; }
  .fc-stats { grid-template-columns: repeat(4, 1fr); }
}

@media (hover: hover) {
  .fc-gallery__card:hover { transform: translateY(-3px); box-shadow: var(--f-shadow-2); border-color: var(--brand, var(--f-accent)); }
  .fc-footer__col a:hover { color: var(--f-ink); }
}