/* ============================================================
   Fueltok disambiguation page.

   Loaded after service.css, which supplies .svc-page, .svc-hero,
   .svc-section, .faq and .svc-final. Everything here is the
   page-specific layer.
   ============================================================ */

.ft-hero {
  background:
    radial-gradient(900px 460px at 85% -10%, #9B23D41f, transparent 60%),
    var(--paper);
}

/* A single centred column, like the launch page. The correction has to be read
   top to bottom, and a two-column hero breaks that order. */
.ft-hero-inner {
  padding: clamp(2.8rem, 7vw, 5rem) var(--pad) clamp(2.2rem, 5vw, 3.5rem);
  text-align: center;
  display: flex; flex-direction: column; align-items: center;
}

.ft-hero-inner .svc-h1 { max-width: 22ch; margin: .4rem 0 0; }
.ft-hero-inner .svc-lede { max-width: 46rem; margin: 1.1rem 0 0; }

.ft-eyebrow { margin: 0; color: var(--violet); }
.ft-cta-row { margin-top: 1.5rem; justify-content: center; flex-wrap: wrap; }

/* ---------------- the scan, inside the hero ---------------- */

/* Just placement. The shortcode draws its own card and now carries its own
   prompt, so there is nothing to add around it. */
.ft-hero-scan {
  width: 100%;
  max-width: 40rem;
  margin: clamp(2.1rem, 4vw, 3rem) auto 0;
}

/* The scan's own results are left aligned, so only the intro follows the
   hero's centring. */
.ft-hero-scan .tkf { text-align: left; }



.ft-h2 {
  font-size: clamp(1.5rem, 3vw, 2.15rem);
  line-height: 1.18;
  margin: 0 0 .7rem;
}

/* ---------------- the three services ---------------- */

.ft-services {
  margin-top: 1.8rem;
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(17.5rem, 1fr));
}

.ft-service {
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r);
  padding: 1.4rem 1.35rem;
}

.ft-service-eyebrow {
  margin: 0 0 .5rem;
  font-size: .72rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
  color: var(--violet);
}

.ft-service-title { font-size: 1.12rem; line-height: 1.25; margin: 0 0 .55rem; }
.ft-service-body { margin: 0 0 1rem; font-size: .93rem; color: var(--ink-2); }

/* Pushed to the bottom so the three cards' links line up however long the
   descriptions run. */
.ft-service-link {
  margin-top: auto;
  font-weight: 700; font-size: .9rem; text-decoration: none;
}

.ft-service-link span { transition: transform .16s; display: inline-block; }
.ft-service-link:hover span { transform: translateX(3px); }

/* ---------------- the comparison ---------------- */

/* One flat grid rather than nested rows, so every column lines up exactly and
   the whole thing can collapse to a single column on small screens by changing
   one property. Source order is already criterion, them, us. */
.ft-cmp {
  --ft-cmp-pad: clamp(.85rem, 2vw, 1.15rem);

  margin-top: 1.9rem;
  display: grid;
  grid-template-columns: minmax(10rem, 1fr) minmax(0, 1.15fr) minmax(0, 1.15fr);
  align-items: stretch;
}

/* ---- header ---- */

.ft-cmp-head {
  padding: .75rem var(--ft-cmp-pad);
  font-weight: 800;
  font-size: .95rem;
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
}

.ft-cmp-head--them { color: var(--ink-2); }

.ft-cmp-head--us {
  color: var(--violet);
  background: var(--violet-soft);
  border-radius: var(--r) var(--r) 0 0;
}

.ft-cmp-badge {
  font-size: .63rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  padding: .18rem .45rem;
  border-radius: 999px;
  background: var(--violet); color: #fff;
}

/* ---- cells ---- */

.ft-cmp-crit,
.ft-cmp-cell {
  padding: var(--ft-cmp-pad);
  border-top: 1px solid var(--hairline);
}

.ft-cmp-crit {
  margin: 0;
  font-size: .95rem; font-weight: 700; line-height: 1.3;
  display: flex; align-items: center;
}

/* The whole TikFuel column reads as one tinted band: the cells are siblings in
   the flat grid, so a shared background joins seamlessly with no gap. */
.ft-cmp-cell--us { background: var(--violet-soft); }
.ft-cmp-cell--us:last-child { border-radius: 0 0 var(--r) var(--r); }

.ft-cmp-who { display: none; }

.ft-cmp-answer {
  margin: 0 0 .3rem;
  display: flex; align-items: flex-start; gap: .5rem;
  font-weight: 700; font-size: .95rem; line-height: 1.35;
}

.ft-cmp-detail {
  margin: 0;
  font-size: .86rem; line-height: 1.5;
  color: var(--ink-2);
  padding-left: 1.85rem;
}

.ft-mark {
  width: 1.35rem; height: 1.35rem;
  flex: 0 0 1.35rem;
  margin-top: .02rem;
}

.ft-mark--yes { color: #12905b; }
.ft-mark--no  { color: #c2344d; }
.ft-mark--na  { color: var(--muted); }

/* ---- stacked ---- */

@media (max-width: 46rem) {
  .ft-cmp { grid-template-columns: 1fr; }

  /* The column headings are meaningless once the columns are gone; each cell
     names itself instead. */
  .ft-cmp-head { display: none; }

  /* Each row becomes one solid card: criterion, then their answer, then ours.
     The Fueltok cell needs a background of its own here, or it dissolves into
     the page and the card looks unfinished. */
  .ft-cmp-crit,
  .ft-cmp-cell--them { background: var(--surface); }

  .ft-cmp-crit {
    border-radius: var(--r) var(--r) 0 0;
    border-top: 0;
    margin-top: 1rem;
    font-size: 1rem;
    padding-bottom: .2rem;
  }

  .ft-cmp-cell--them { border-top: 0; }

  .ft-cmp-cell--us { border-radius: 0 0 var(--r) var(--r); }

  .ft-cmp-who {
    display: block;
    margin: 0 0 .3rem;
    font-size: .68rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
    color: var(--muted);
  }

  .ft-cmp-cell--us .ft-cmp-who { color: var(--violet); }
}

/* ---------------- final ---------------- */

.ft-final-inner { text-align: center; }
.ft-final-title { font-size: clamp(1.6rem, 3.2vw, 2.3rem); line-height: 1.15; margin: 0 0 .6rem; }
.ft-final-lede { margin: 0 auto 1.3rem; max-width: 42rem; color: var(--ink-2); }
.ft-final .cta-row { justify-content: center; }

@media (prefers-reduced-motion: reduce) {
  .ft-service-link span { transition: none; }
}