/* ──────────────────────────────────────────────────────────────
   FlowNest · content.css
   Styles for the standalone content pages: FAQ, About, Why us,
   How we work, Articles.

   Motion policy: these pages use quiet fades only. The scroll
   scrubbed cube sequence and the heavier parallax stay on the
   main marketing pages, so content pages stay fast and readable.
   ────────────────────────────────────────────────────────────── */

/* ─── Breadcrumbs ─── */
.crumbs {
  position: relative;
  z-index: 2;
  padding: 104px 0 0;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.crumbs .shell { display: flex; gap: 10px; align-items: center; }
.crumbs a { color: var(--cyan, #06b6d4); text-decoration: none; opacity: .85; }
.crumbs a:hover { opacity: 1; text-decoration: underline; }
.crumbs span[aria-hidden] { opacity: .35; }
.crumbs span[aria-current] { opacity: .6; }

/* ─── Page head ─── */
.content-page { position: relative; z-index: 2; padding: 40px 0 120px; }
.content-head { max-width: 860px; margin: 0 0 72px; }
.content-head h1 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 400;
  font-size: clamp(38px, 6vw, 76px);
  line-height: 1.02;
  letter-spacing: -.02em;
  margin: 18px 0 24px;
}
.content-head h1 em {
  font-style: italic;
  background: linear-gradient(120deg, var(--amber, #f59e0b), var(--cyan, #06b6d4));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.content-head .lede {
  font-size: clamp(17px, 2vw, 21px);
  line-height: 1.62;
  opacity: .74;
  max-width: 68ch;
}

/* ─── Generic content block ─── */
.content-block { margin: 0 0 88px; max-width: 1180px; }
.content-block > h2 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 400;
  font-size: clamp(26px, 3.4vw, 40px);
  line-height: 1.14;
  letter-spacing: -.015em;
  margin: 0 0 18px;
}
.content-block > h2 em {
  font-style: italic;
  color: var(--amber, #f59e0b);
  -webkit-text-fill-color: currentColor;
}
.content-block > h3 {
  font-size: 19px;
  font-weight: 600;
  margin: 34px 0 12px;
  letter-spacing: -.01em;
}
.content-block > p {
  font-size: 16.5px;
  line-height: 1.72;
  opacity: .78;
  max-width: 76ch;
  margin: 0 0 18px;
}
.section-index {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  opacity: .45;
  display: block;
  margin: 0 0 14px;
}

/* ─── Card grid ─── */
.c-grid { display: grid; gap: 18px; margin: 30px 0 0; }
.c-grid--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.c-grid--3 { grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); }

.c-card {
  position: relative;
  padding: 28px 26px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 16px;
  background: rgba(255,255,255,.022);
  transition: border-color .28s ease, background .28s ease, transform .28s ease;
}
.c-card:hover {
  border-color: rgba(255,255,255,.18);
  background: rgba(255,255,255,.04);
  transform: translateY(-2px);
}
.c-card h3 { font-size: 17.5px; font-weight: 600; margin: 0 0 10px; letter-spacing: -.01em; }
.c-card p { font-size: 15px; line-height: 1.68; opacity: .72; margin: 0; }
.c-card__num {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: .1em;
  color: var(--amber, #f59e0b);
  display: block;
  margin: 0 0 12px;
}
.c-card ul { margin: 14px 0 0; padding: 0 0 0 18px; }
.c-card li { font-size: 14.5px; line-height: 1.62; opacity: .7; margin: 0 0 7px; }

/* ─── Numbered phase steps ─── */
.phase {
  display: grid;
  grid-template-columns: 76px 1fr;
  gap: 24px;
  padding: 30px 0;
  border-top: 1px solid rgba(255,255,255,.08);
}
.phase:last-child { border-bottom: 1px solid rgba(255,255,255,.08); }
.phase__num {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 30px;
  line-height: 1;
  opacity: .28;
}
.phase h3 { font-size: 20px; font-weight: 600; margin: 0 0 10px; letter-spacing: -.01em; }
.phase p { font-size: 15.5px; line-height: 1.7; opacity: .75; margin: 0 0 12px; max-width: 72ch; }
.phase__meta {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .5;
}
@media (max-width: 640px) {
  .phase { grid-template-columns: 1fr; gap: 10px; }
  .phase__num { font-size: 22px; }
}

/* ─── FAQ accordions ─── */
.faq-group { margin: 0 0 56px; }
.faq-group__title {
  font-size: 13px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cyan, #06b6d4);
  margin: 0 0 18px;
}
.c-faq {
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.c-faq summary {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  padding: 22px 0;
  cursor: pointer;
  list-style: none;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.45;
  transition: color .2s ease;
}
.c-faq summary::-webkit-details-marker { display: none; }
.c-faq summary:hover { color: var(--amber, #f59e0b); }
.c-faq__icon {
  flex: none;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 20px;
  line-height: 1;
  opacity: .5;
  transition: transform .3s ease, opacity .2s ease;
}
.c-faq[open] .c-faq__icon { transform: rotate(45deg); opacity: 1; }
.c-faq__body { padding: 0 0 24px; max-width: 78ch; }
.c-faq__body p { font-size: 15.5px; line-height: 1.74; opacity: .76; margin: 0 0 14px; }
.c-faq__body p:last-child { margin-bottom: 0; }
.c-faq__body ul { margin: 12px 0; padding-left: 20px; }
.c-faq__body li { font-size: 15px; line-height: 1.66; opacity: .74; margin: 0 0 8px; }

/* ─── Article list ─── */
.article-card {
  display: block;
  padding: 30px 28px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 16px;
  background: rgba(255,255,255,.022);
  text-decoration: none;
  color: inherit;
  transition: border-color .28s ease, background .28s ease, transform .28s ease;
}
.article-card:hover {
  border-color: rgba(255,255,255,.2);
  background: rgba(255,255,255,.045);
  transform: translateY(-3px);
}
.article-card__meta {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .5;
  display: flex;
  gap: 14px;
  margin: 0 0 14px;
}
.article-card__meta .tag { color: var(--cyan, #06b6d4); opacity: .9; }
.article-card h3 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 400;
  font-size: 23px;
  line-height: 1.22;
  margin: 0 0 12px;
  letter-spacing: -.012em;
}
.article-card p { font-size: 15px; line-height: 1.68; opacity: .72; margin: 0; }
.article-card__more {
  display: inline-block;
  margin: 16px 0 0;
  font-size: 14px;
  color: var(--amber, #f59e0b);
}

/* ─── Stat strip ─── */
.stat-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 20px;
  margin: 36px 0 0;
  padding: 32px 0;
  border-top: 1px solid rgba(255,255,255,.09);
  border-bottom: 1px solid rgba(255,255,255,.09);
}
.stat-strip .s-val {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 40px;
  line-height: 1;
  background: linear-gradient(120deg, var(--amber, #f59e0b), var(--cyan, #06b6d4));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.stat-strip .s-lab {
  display: block;
  margin: 10px 0 0;
  font-size: 13.5px;
  opacity: .62;
  line-height: 1.5;
}

/* ─── Callout ─── */
.c-callout {
  padding: 26px 28px;
  border-left: 2px solid var(--amber, #f59e0b);
  background: rgba(245,158,11,.05);
  border-radius: 0 14px 14px 0;
  margin: 30px 0;
}
.c-callout p { font-size: 16px; line-height: 1.7; opacity: .84; margin: 0; max-width: 74ch; }

/* ─── Inline CTA ─── */
.c-cta {
  margin: 96px 0 0;
  padding: 52px 44px;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 20px;
  background:
    radial-gradient(closest-side at 15% 10%, rgba(245,158,11,.07), transparent 70%),
    radial-gradient(closest-side at 85% 90%, rgba(6,182,212,.07), transparent 70%),
    rgba(255,255,255,.02);
  text-align: center;
}
.c-cta h2 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 400;
  font-size: clamp(25px, 3.4vw, 38px);
  line-height: 1.14;
  margin: 0 0 14px;
}
.c-cta p { font-size: 16px; line-height: 1.66; opacity: .74; margin: 0 auto 28px; max-width: 60ch; }
.c-cta__row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.c-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 14px 28px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  border: 1px solid rgba(255,255,255,.18);
  color: inherit;
  transition: background .25s ease, border-color .25s ease, transform .25s ease;
}
.c-btn:hover { transform: translateY(-2px); border-color: rgba(255,255,255,.35); }
.c-btn--primary {
  background: linear-gradient(120deg, var(--amber, #f59e0b), var(--cyan, #06b6d4));
  color: #08080b;
  border-color: transparent;
  font-weight: 600;
}

/* ─── Related links ─── */
.related { margin: 72px 0 0; padding: 30px 0 0; border-top: 1px solid rgba(255,255,255,.08); }
.related h2 {
  font-size: 12px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: .16em;
  text-transform: uppercase;
  opacity: .5;
  margin: 0 0 18px;
}
.related__row { display: flex; gap: 12px; flex-wrap: wrap; }
.related__row a {
  padding: 10px 18px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  font-size: 14px;
  text-decoration: none;
  color: inherit;
  opacity: .82;
  transition: border-color .22s ease, opacity .22s ease;
}
.related__row a:hover { border-color: rgba(255,255,255,.3); opacity: 1; }

/* ─── Quiet reveal, the only motion on these pages ─── */
[data-motion="reduced"] .fade {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .5s ease, transform .5s ease;
  will-change: opacity, transform;
}
[data-motion="reduced"] .fade.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  [data-motion="reduced"] .fade,
  [data-motion="reduced"] .fade.is-in {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .c-card:hover, .article-card:hover, .c-btn:hover { transform: none; }
}

@media (max-width: 720px) {
  .content-page { padding: 28px 0 84px; }
  .content-head { margin-bottom: 48px; }
  .content-block { margin-bottom: 62px; }
  .c-cta { padding: 38px 24px; }
}

/* ─── HTML sitemap list ─── */
.sm-list { list-style: none; margin: 26px 0 0; padding: 0; }
.sm-item {
  display: grid;
  grid-template-columns: minmax(180px, 300px) 1fr;
  gap: 18px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(255,255,255,.07);
  align-items: baseline;
}
.sm-item a { color: var(--cyan, #06b6d4); text-decoration: none; font-size: 15.5px; }
.sm-item a:hover { text-decoration: underline; }
.sm-item span { font-size: 14.5px; opacity: .62; line-height: 1.55; }
@media (max-width: 680px) {
  .sm-item { grid-template-columns: 1fr; gap: 5px; }
}

/* ─── Article author byline ─── */
.article-author {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  margin: 0 0 40px;
  padding: 22px 24px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 14px;
  background: rgba(255,255,255,.022);
}
.article-author__avatar {
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 15px;
  font-weight: 600;
  color: #08080b;
  background: linear-gradient(120deg, var(--amber, #f59e0b), var(--cyan, #06b6d4));
}
.article-author__body { display: flex; flex-direction: column; gap: 3px; }
.article-author__name { font-size: 15.5px; font-weight: 600; letter-spacing: -.01em; }
.article-author__role {
  font-size: 12.5px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: .04em;
  color: var(--cyan, #06b6d4);
  opacity: .9;
}
.article-author__bio { font-size: 14px; line-height: 1.6; opacity: .68; margin: 8px 0 0; max-width: 68ch; }

@media (max-width: 640px) {
  .article-author { flex-direction: row; padding: 18px; }
}


/* ── Pricing page ─────────────────────────────────────── */
.price-row{
  display:flex; flex-wrap:wrap; gap:8px 18px; align-items:baseline;
  margin:0 0 16px;
}
.price-row__figure{
  font-family:'JetBrains Mono', ui-monospace, monospace;
  font-size:clamp(20px,2.4vw,28px);
  letter-spacing:-.01em;
  color:var(--amber, #f59e0b);
}
.price-row__unit{
  font-family:'JetBrains Mono', ui-monospace, monospace;
  font-size:11.5px; letter-spacing:.08em; opacity:.6; text-transform:uppercase;
}
.c-list{ margin:0 0 18px; padding-left:20px; max-width:76ch; }
.c-list li{ font-size:15.5px; line-height:1.72; opacity:.8; margin:0 0 8px; }
.c-list li b{ opacity:1; font-weight:600; }
.c-muted{ font-size:14px; opacity:.55; margin:14px 0 0; }
.c-card .price-row{ margin:10px 0 14px; }

/* ══════════════════════════════════════════════════════════════
   Service pages: takeaways, definition lists, steps, comparison
   ══════════════════════════════════════════════════════════════ */

.page-meta{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:11px;letter-spacing:.05em;opacity:.32;margin:44px 0 0;padding-top:20px;border-top:1px solid rgba(255,255,255,.06)}
.page-meta time{opacity:.75}

.kt{border:1px solid rgba(255,255,255,.10);border-left:2px solid var(--amber,#f59e0b);background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.012));padding:26px 30px;margin:0 0 56px;max-width:78ch}
.kt h2{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:11.5px;text-transform:uppercase;letter-spacing:.18em;color:var(--amber,#f59e0b);margin:0 0 16px}
.kt ul{margin:0;padding-left:20px}
.kt li{font-size:15.5px;line-height:1.72;opacity:.85;margin:0 0 9px}

.deflist{margin:0 0 22px;max-width:78ch}
.deflist dt{font-weight:600;margin:22px 0 6px;font-size:16.5px}
.deflist dt:first-child{margin-top:0}
.deflist dd{margin:0;padding-left:16px;border-left:1px solid rgba(255,255,255,.12);font-size:15.5px;line-height:1.72;opacity:.78}

.steps{counter-reset:st;list-style:none;padding-left:0;margin:0 0 22px;max-width:78ch}
.steps li{counter-increment:st;position:relative;padding-left:48px;margin:0 0 16px;font-size:15.5px;line-height:1.72;opacity:.82}
.steps li b{opacity:1;font-weight:600}
.steps li:before{content:counter(st,decimal-leading-zero);position:absolute;left:0;top:0;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:12px;color:var(--amber,#f59e0b);border:1px solid rgba(255,255,255,.14);border-radius:50%;width:30px;height:30px;display:grid;place-items:center}

.cmp{width:100%;border-collapse:collapse;margin:0 0 24px;font-size:14.5px}
.cmp th,.cmp td{border:1px solid rgba(255,255,255,.10);padding:12px 14px;text-align:left;vertical-align:top;line-height:1.6}
.cmp thead th{background:rgba(255,255,255,.045);font-family:'JetBrains Mono',ui-monospace,monospace;font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--amber,#f59e0b)}
.cmp tbody th{background:rgba(255,255,255,.02);font-weight:600;width:24%}
.cmp td{opacity:.78}

.c-card h3 a{color:inherit;text-decoration:none;border-bottom:1px solid rgba(245,158,11,.4)}
.c-card h3 a:hover{color:var(--amber,#f59e0b)}

@media (max-width:820px){
  .cmp,.cmp thead,.cmp tbody,.cmp th,.cmp td,.cmp tr{display:block}
  .cmp thead{display:none}
  .cmp tbody th{width:auto;border-bottom:none}
  .cmp td{border-top:none}
  .cmp tr{margin:0 0 18px}
  .kt{padding:22px 22px}
}