/* ══════════ 0917b · capitalq.html — client feedback batch 3 (track "cqnine")
   Q9  #features presents ALL NINE CapitalQ capabilities, in the homepage order (copy-home.txt L121–L129).
       The CapitalQ page's own feature write-ups (copy-pages.txt) sit beside the capability they describe.
   G2  the carousel's arrows: previous on the LEFT, next on the RIGHT, outside the photographs.
   G1  golden tone on every photograph on this page.
   Loaded after style.css on capitalq.html only. Every selector is scoped to an id on this page.
   Brief: .claude/CLIENT-FEEDBACK-0917b.md
   ══════════ */

/* ───────────────────────── G1 · golden tone on the page's photography ───────────────────────── */
#top img{ filter: var(--gold-photo); }
#old-way .fx-capitalq-oldway__bg img{ filter: var(--gold-photo-mono) brightness(.32) contrast(.92); }
#old-way .oldway__fig img,
#old-way .oldway__fig2 img,
#search .better__fig img,
#connect .conn__fig img{ filter: var(--gold-photo); }
#one-place .fx-capitalq-oneplace__bg img{ filter: var(--gold-photo-mono) contrast(1.12) brightness(.72); }
#minutes .band__img{ filter: var(--gold-photo) saturate(.9); }
#close img{ filter: var(--gold-photo) saturate(.62) brightness(.46); }

#features .sqz__panel:not(.is-open) .sqz__img{ filter: var(--gold-photo-mono) contrast(1.06) brightness(.66); }
#features .sqz__panel.is-open .sqz__img{ filter: var(--gold-photo) contrast(1.05) brightness(1.04); }
@media (hover: hover) and (pointer: fine){
  #features .sqz__panel:not(.is-open):hover .sqz__img{ filter: var(--gold-photo-mono) contrast(1.04) brightness(.9); }
}


/* ───────────────────────── G2 · arrows left and right of the carousel ───────────────────────── */
#features .fx-cq9__stage{
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center; gap: clamp(12px, 1.4vw, 20px);
}
#features .fx-cq9__arrow{ width: 52px; height: 52px; }
#features .fx-cq9__arrow svg{ width: 18px; height: 18px; }
#features .fx-cq-sqz .sqz__view{ height: clamp(240px, 25vw, 360px); }

/* nine panels rise in sequence (style.css staggers only the first six) */
#features .sqz.in .sqz__panel:nth-child(7){ animation-delay: .54s; }
#features .sqz.in .sqz__panel:nth-child(8){ animation-delay: .63s; }
#features .sqz.in .sqz__panel:nth-child(9){ animation-delay: .72s; }


/* ───────────────────────── Q9 · the copy under the carousel ─────────────────────────
   Left: the capability as the homepage named it (index, name, one-line promise).
   Right: the CapitalQ page's deeper write-up for that capability, on a gold hairline. */
#features .fx-cq-sqz__copy{
  margin-top: clamp(26px, 3vw, 40px);
  padding-inline: calc(52px + clamp(12px, 1.4vw, 20px));
}
#features .fx-cq9{
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  column-gap: clamp(36px, 5.2vw, 92px);
  align-items: start;
}
#features .fx-cq9__lead .fx-cq-slide__t{
  margin-top: clamp(16px, 1.6vw, 22px);
  font-size: clamp(2rem, 3.3vw, 3.1rem); line-height: 1.04; letter-spacing: -.03em;
}
#features .fx-cq9__line{
  margin-top: clamp(14px, 1.4vw, 20px);
  font-size: clamp(1.08rem, 1.36vw, 1.3rem); line-height: 1.5; font-weight: 500;
  color: #1E232A; max-width: 36ch; text-wrap: pretty;
}
#features .fx-cq9__deep{
  position: relative;
  padding-left: clamp(24px, 2.8vw, 44px);
  border-left: 1px solid rgba(122, 87, 20, .26);
  /* sits level with the name, below the icon row */
  margin-top: 62px;
}
#features .fx-cq9__deep::before{
  content: ''; position: absolute; left: -1px; top: 0; width: 3px; height: 44px;
  background: var(--accent-grad);
}
#features .fx-cq9__deep > :first-child{ margin-top: 0; }
#features .fx-cq9__name{
  font-family: var(--font-mono); font-weight: 600; font-size: .76rem;
  letter-spacing: .2em; text-transform: uppercase; color: var(--accent-deep);
  margin-bottom: 12px;
}
#features .fx-cq9__deep .fx-cq-slide__sub{ font-size: clamp(1.02rem, 1.25vw, 1.16rem); }
#features .fx-cq9__deep .fx-cq-slide__d{ max-width: 70ch; }
/* the punch lines were plain --accent on the light ground (~2:1); small gold type on white takes --accent-deep */
#features .fx-cq9__deep .fx-cq-slide__punch{ color: var(--accent-deep); }

/* the one capability the CapitalQ page never wrote up: its promise gets the whole row */
#features .fx-cq9--solo{ grid-template-columns: minmax(0, 1fr); }
#features .fx-cq9--solo .fx-cq9__line{ max-width: 58ch; }


/* ───────────────────────── narrow · one panel, arrows on its edges, copy stacked ───────────────────────── */
@media (max-width: 899px){
  #features .fx-cq9__stage{ grid-template-columns: minmax(0, 1fr); position: relative; }
  #features .fx-cq9__arrow{
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
    width: 42px; height: 42px;
  }
  #features .fx-cq9__arrow--prev{ left: 8px; }
  #features .fx-cq9__arrow--next{ right: 8px; }
  #features .fx-cq-sqz .sqz__view{ height: clamp(210px, 56vw, 300px); }


  #features .fx-cq-sqz__copy{ padding-inline: 0; }
  #features .fx-cq9{ grid-template-columns: minmax(0, 1fr); }
  #features .fx-cq9__line{ max-width: none; }
  #features .fx-cq9__deep{
    margin-top: 26px; padding-left: 0; padding-top: 22px;
    border-left: 0; border-top: 1px solid rgba(122, 87, 20, .26);
  }
  #features .fx-cq9__deep::before{ left: 0; top: -1px; width: 44px; height: 3px; }
}