/* ================================================================
   QUALZY: solution pages (shared template)
   Used by every page in solutions/ (concept testing, UX research and
   the other "What you're researching" pages).
   Class prefix: ct- (kept from the first page built on it)
   ================================================================ */

/* SHARED
   ---------------------------------------------------------------- */
.ct-sec-hd { margin-bottom: 48px; }
.ct-sec-hd .ct-body { max-width: 1000px; }
.ct-sec-hd .stit { margin-bottom: 16px; }

.ct-body {
  font-size: 18px;
  color: var(--mid);
  line-height: 1.65;
  font-weight: 300;
}

.ct-slbl-dk { color: var(--ol); }
.ct-stit-dk { color: #fff; }

.ct-lnk {
  display: inline-block;
  font-size: 15px;
  font-weight: 700;
  color: var(--o2);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-decoration-color: rgba(250, 88, 2, .3);
  text-underline-offset: 6px;
  transition: text-decoration-color var(--t-base), color var(--t-base);
}
.ct-lnk:hover { color: var(--o); text-decoration-color: var(--o); }

/* inline links inside body copy */
.ct-card p a, .ct-act p a, .ct-moment p a, .ct-points a, .ct-note a, .ct-qas a {
  color: var(--o2);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgba(250, 88, 2, .35);
  text-underline-offset: 3px;
}
.ct-card p a:hover, .ct-act p a:hover, .ct-moment p a:hover, .ct-points a:hover, .ct-note a:hover, .ct-qas a:hover {
  color: var(--o);
  text-decoration-color: var(--o);
}

[id] { scroll-margin-top: 88px; }

/* Screenshot frame */
.ct-shot {
  margin: 0;
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 14px 36px rgba(26, 25, 21, .07);
}
.ct-shot img { width: 100%; height: auto; display: block; }
/* Transparent product renders sit straight on the page, with no frame. */
.ct-shot--bare { background: none; border: 0; border-radius: 0; box-shadow: none; overflow: visible; }
.ct-shot--bare figcaption { border-top: 0; padding: 14px 0 0; }
.ct-shot figcaption {
  font-size: 13px;
  color: var(--mu);
  line-height: 1.5;
  padding: 12px 18px 14px;
  border-top: 1px solid var(--rule);
}

/* HERO
   ---------------------------------------------------------------- */
.ct-hero {
  padding-top: 64px; /* nav height offset */
  background: var(--wh);
  position: relative;
  overflow: hidden;
}

.ct-hd1 {
  position: absolute;
  top: -200px; right: -160px;
  width: 600px; height: 600px;
  border-radius: 50%;
  background: var(--op);
  z-index: 0;
}
.ct-hd1::after {
  content: '';
  position: absolute;
  inset: 90px;
  border-radius: 50%;
  background: var(--om);
}

.ct-hsvg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

.ct-hi {
  position: relative;
  z-index: 1;
  max-width: 1080px;
  margin: 0 auto;
  padding: 48px 48px 88px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.ct-hi h1 {
  font-family: var(--font-display);
  font-size: clamp(38px, 5.2vw, 70px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -.035em;
  color: var(--dk);
  margin-bottom: 28px;
}
.ct-hi h1 em { font-style: normal; color: var(--o); }

.ct-hsub {
  font-size: 19px;
  color: var(--mid);
  line-height: 1.65;
  max-width: 880px;
  font-weight: 300;
}

/* WHAT YOU CAN TEST
   ---------------------------------------------------------------- */
.ct-what { background: #fff; border-top: 1px solid var(--rule); }

.ct-what-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.ct-card {
  background: var(--wh);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--o);
  border-radius: 14px;
  padding: 28px 26px 30px;
}

.ct-card-tag {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--o2);
  margin-bottom: 10px;
}

.ct-card h3 {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -.02em;
  color: var(--dk);
  margin-bottom: 12px;
}

.ct-card p { font-size: 15.5px; line-height: 1.65; color: var(--mid); }

/* ACTIVITIES
   ---------------------------------------------------------------- */
.ct-acts { background: var(--wh); }

.ct-acts-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 40px 36px;
}

.ct-act h3 {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.25;
  margin: 20px 0 8px;
}
.ct-act h3 a { color: var(--dk); text-decoration: none; transition: color var(--t-base); }
.ct-act h3 a:hover { color: var(--o2); }
.ct-act h3 a::after { content: ' →'; color: var(--o); }

.ct-act p { font-size: 15.5px; line-height: 1.65; color: var(--mid); }

.ct-act--wide {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 36px;
  align-items: center;
}
.ct-act--wide h3 { margin-top: 0; }

/* HOW A TEST RUNS (dark)
   ---------------------------------------------------------------- */
.ct-how {
  background: var(--dk);
  padding: 96px 80px;
}

.ct-how-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.ct-how-item {
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 14px;
  padding: 26px 26px 28px;
}

.ct-how-item h3 {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -.015em;
  line-height: 1.3;
  color: #fff;
  margin-bottom: 10px;
}

.ct-how-item p { font-size: 15.5px; line-height: 1.65; color: rgba(255, 255, 255, .7); }
.ct-how-item a { color: var(--ol); font-weight: 600; text-underline-offset: 3px; }
.ct-how-item a:hover { color: #fff; }

.ct-how-quote {
  margin: 40px 0 0;
  padding: 30px 0 0 28px;
  border-left: 3px solid var(--o);
  max-width: 860px;
}
.ct-how-quote blockquote p {
  font-family: var(--font-quote);
  font-size: clamp(19px, 2vw, 23px);
  line-height: 1.5;
  color: #fff;
  font-weight: 400;
  margin-bottom: 14px;
}
.ct-how-quote figcaption { font-size: 14px; color: rgba(255, 255, 255, .6); }
.ct-how-quote cite { color: #fff; font-weight: 600; }
.ct-how-quote a { color: var(--ol); }
.ct-how-quote a:hover { color: #fff; }

/* TWO MOMENTS
   ---------------------------------------------------------------- */
.ct-moments { background: var(--op); }

.ct-moments-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.ct-moment {
  background: #fff;
  border: 1px solid rgba(250, 88, 2, .14);
  border-radius: 16px;
  padding: 30px 30px 32px;
}

.ct-moment h3 {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--dk);
  margin-bottom: 12px;
}

.ct-moment p { font-size: 16px; line-height: 1.7; color: var(--mid); }

/* CUSTOMER STORIES
   ---------------------------------------------------------------- */
.ct-stories { background: #fff; }

.ct-stories-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.ct-story {
  display: flex;
  flex-direction: column;
  background: var(--wh);
  border: 1px solid var(--rule);
  border-radius: 16px;
  padding: 28px 26px 30px;
}

.ct-story-co {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--o2);
  margin-bottom: 8px;
}

.ct-story h3 {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.25;
  color: var(--dk);
  margin-bottom: 12px;
}

.ct-story > p { font-size: 15px; line-height: 1.65; color: var(--mid); }

.ct-story blockquote {
  margin: 20px 0 8px;
  padding-left: 16px;
  border-left: 2px solid var(--o);
  flex: 1;
}
.ct-story blockquote p {
  font-family: var(--font-quote);
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--dk);
}

.ct-story .ct-story-cite { font-size: 13px; color: var(--mu); margin-bottom: 18px; }
.ct-story-cite cite { color: var(--dk); font-weight: 600; }
.ct-story .ct-lnk { align-self: flex-start; }

/* FROM RESPONSES TO THE DEBRIEF
   ---------------------------------------------------------------- */
.ct-debrief { background: var(--wh); border-top: 1px solid var(--rule); }

.ct-debrief-grid {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: 56px;
  align-items: center;
}

.ct-points { list-style: none; margin: 8px 0 20px; }
.ct-points li {
  position: relative;
  padding: 12px 0 12px 22px;
  border-bottom: 1px solid var(--rule);
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--mid);
}
.ct-points li::before {
  content: '';
  position: absolute;
  left: 0; top: 21px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--o);
}
.ct-points strong { color: var(--dk); }

.ct-note { font-size: 14.5px; color: var(--mu); line-height: 1.6; }

/* FAQ
   ---------------------------------------------------------------- */
.ct-faq { background: #fff; border-top: 1px solid var(--rule); }
.ct-qas { max-width: 880px; margin-top: 28px; border-top: 1px solid rgba(26, 25, 21, .14); }
.ct-qas details { border-bottom: 1px solid rgba(26, 25, 21, .14); }
.ct-qas summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 0;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--dk);
}
.ct-qas summary::-webkit-details-marker { display: none; }
.ct-qas summary::after { content: "+"; flex: none; color: var(--o); font-size: 24px; font-weight: 500; line-height: 1; }
.ct-qas details[open] summary::after { content: "–"; }
.ct-qas summary:hover { color: var(--o2); }
.ct-qas details p { margin: 0 0 22px; font-size: 16.5px; line-height: 1.65; color: var(--mid); max-width: 76ch; }

/* Two-story layout and a stats row inside a story */
.ct-stories-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ct-stories-grid--1 { grid-template-columns: minmax(0, 1fr); }
/* A single story fills the row: the story on the left, the quote on the right */
.ct-stories-grid--1 .ct-story {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  grid-template-rows: auto auto auto auto 1fr;
  column-gap: 56px;
  padding: 40px 44px 42px;
}
.ct-stories-grid--1 .ct-story > * { grid-column: 1; }
.ct-stories-grid--1 .ct-story h3 { font-size: 25px; }
.ct-stories-grid--1 .ct-story .ct-lnk { align-self: end; justify-self: start; }
.ct-stories-grid--1 .ct-story-quote {
  grid-column: 2;
  grid-row: 1 / -1;
  align-self: center;
}
.ct-stories-grid--1 .ct-story-quote blockquote { margin: 0 0 14px; }
.ct-stories-grid--1 .ct-story-quote blockquote p { font-size: 19px; line-height: 1.55; }
.ct-stories-grid--1 .ct-story-quote .ct-story-cite { margin-bottom: 0; }
@media (max-width: 1100px) {
  .ct-stories-grid.ct-stories-grid--1 { max-width: none; }
}
@media (max-width: 900px) {
  .ct-stories-grid--1 .ct-story { display: flex; padding: 28px 26px 30px; }
  .ct-stories-grid--1 .ct-story .ct-lnk { order: 1; margin-top: 4px; align-self: flex-start; }
  .ct-stories-grid--1 .ct-story-quote { margin-top: 4px; }
  .ct-stories-grid--1 .ct-story-quote blockquote { margin-top: 0; }
  .ct-stories-grid--1 .ct-story-quote blockquote p { font-size: 16.5px; }
  .ct-stories-grid--1 .ct-story-quote .ct-story-cite { margin-bottom: 18px; }
}
.ct-stats { list-style: none; margin: 4px 0 18px; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 22px; }
.ct-stats li { font-size: 13.5px; color: var(--mid); line-height: 1.3; }
.ct-stats b { display: block; font-family: var(--font-display); font-weight: 800; font-size: 24px; letter-spacing: -.02em; color: var(--o2); }

/* PAGE-SPECIFIC SECTIONS
   Each solution page has one section only it uses.
   ---------------------------------------------------------------- */
.ct-body-dk { color: rgba(255, 255, 255, .72); }

/* Three-up variant of the dark "how" grid */
.ct-how-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* One featured story beside a smaller one */
.ct-stories-grid--feature { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: start; }
.ct-stories-grid--feature .ct-story:first-child { padding: 36px 36px 38px; }
.ct-stories-grid--feature .ct-story:first-child h3 { font-size: 25px; }
.ct-stories-grid--feature .ct-story:first-child blockquote p { font-size: 19px; line-height: 1.55; }

/* In-home: example schedule (dark timeline) */
.ct-tl { background: var(--d2); padding: 96px 80px; }
.ct-tl-steps {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0 22px;
  position: relative;
}
.ct-tl-steps::before {
  content: ''; position: absolute; left: 6px; right: 0; top: 6px;
  height: 2px; background: rgba(250, 88, 2, .35);
}
.ct-tl-step { position: relative; padding-top: 34px; }
.ct-tl-step::before {
  content: ''; position: absolute; left: 0; top: 0;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--o); box-shadow: 0 0 0 5px var(--d2);
}
.ct-tl-day {
  display: block; font-size: 12px; font-weight: 700; letter-spacing: .13em;
  text-transform: uppercase; color: var(--ol); margin-bottom: 8px;
}
.ct-tl-step h3 {
  font-family: var(--font-display); font-size: 20px; font-weight: 800;
  letter-spacing: -.02em; line-height: 1.25; color: #fff; margin-bottom: 10px;
}
.ct-tl-step p { font-size: 15px; line-height: 1.6; color: rgba(255, 255, 255, .7); margin-bottom: 14px; }
.ct-tl-act {
  display: inline-block; font-size: 12.5px; font-weight: 600; color: #fff;
  border: 1px solid rgba(255, 255, 255, .18); border-radius: 999px; padding: 4px 12px;
}

/* Diary: a week of entries */
.ct-week { background: var(--op); }
.ct-week-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 12px;
}
.ct-entry {
  background: #fff; border: 1px solid rgba(250, 88, 2, .14); border-radius: 14px;
  padding: 18px 16px 20px; display: flex; flex-direction: column; gap: 8px;
}
.ct-entry-day {
  font-family: var(--font-display); font-size: 18px; font-weight: 800; color: var(--dk);
  letter-spacing: -.01em; display: flex; justify-content: space-between; align-items: baseline; gap: 6px;
}
.ct-entry-day time { font-family: var(--font-body); font-size: 12.5px; font-weight: 500; color: var(--mu); }
.ct-entry-type {
  align-self: flex-start; font-size: 11px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--o2); background: var(--om); border-radius: 6px; padding: 3px 8px;
}
.ct-entry p { font-family: var(--font-quote); font-size: 14.5px; line-height: 1.55; color: var(--dk); }
.ct-entry--nudge { background: transparent; border: 1.5px dashed rgba(250, 88, 2, .45); }
.ct-entry--nudge .ct-entry-type { background: transparent; border: 1px solid rgba(250, 88, 2, .35); }
.ct-week-foot {
  margin-top: 28px; max-width: 880px; font-size: 17px; line-height: 1.65; color: var(--mid);
}
.ct-week-foot strong { color: var(--dk); }

/* UX: what they said vs what the recording showed */
.ct-gap { background: var(--op); }
.ct-gap-list { display: grid; gap: 14px; }
.ct-gap-row {
  display: grid; grid-template-columns: minmax(0, .8fr) auto minmax(0, 1.2fr); gap: 28px;
  align-items: center; background: #fff; border: 1px solid rgba(250, 88, 2, .14);
  border-radius: 16px; padding: 26px 32px;
}
.ct-gap-row span {
  display: block; font-size: 11px; font-weight: 700; letter-spacing: .13em;
  text-transform: uppercase; color: var(--mu); margin-bottom: 6px;
}
.ct-gap-saw span { color: var(--o2); }
.ct-gap-said p {
  font-family: var(--font-display); font-size: 24px; font-weight: 800;
  letter-spacing: -.02em; line-height: 1.25; color: var(--dk);
}
.ct-gap-arrow { font-size: 24px; color: var(--o); line-height: 1; }
.ct-gap-saw p { font-size: 16.5px; line-height: 1.6; color: var(--mid); }

/* Innovation: rounds narrowing to a shortlist */
.ct-rounds { background: var(--op); }
.ct-round-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.ct-round {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 36px; align-items: center;
}
.ct-round-bar {
  border-radius: 12px; padding: 22px 26px; color: var(--dk);
  font-family: var(--font-display); font-size: 20px; font-weight: 800; letter-spacing: -.02em; line-height: 1.25;
}
.ct-round-bar span {
  display: block; font-family: var(--font-body); font-size: 12px; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase; color: var(--o2); margin-bottom: 4px;
}
.ct-round--1 .ct-round-bar { width: 100%; background: #fff; border: 1px solid rgba(250, 88, 2, .18); }
.ct-round--2 .ct-round-bar { width: 82%; background: var(--om); }
.ct-round--3 .ct-round-bar { width: 64%; background: var(--ol); }
.ct-round--4 .ct-round-bar { width: 46%; background: var(--octa); color: #fff; }
.ct-round--3 .ct-round-bar span { color: var(--dk); }
.ct-round--4 .ct-round-bar span { color: rgba(255, 255, 255, .9); }
.ct-round-txt p { font-size: 15.5px; line-height: 1.6; color: var(--mid); }
.ct-round-txt .ct-round-out { margin-top: 6px; font-size: 14.5px; color: var(--dk); }
.ct-round-out b { color: var(--o2); }

/* Brand: projective prompts */
.ct-prompts { background: var(--op); }
.ct-prompts-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.ct-prompt {
  background: #fff; border: 1px solid rgba(250, 88, 2, .14); border-radius: 16px;
  padding: 30px 30px 26px; display: flex; flex-direction: column;
}
.ct-prompt blockquote { margin: 6px 0 22px; flex: 1; }
.ct-prompt blockquote p {
  font-family: var(--font-display); font-size: 22px; font-weight: 800;
  letter-spacing: -.02em; line-height: 1.3; color: var(--dk);
}
.ct-prompt blockquote p::before { content: '“'; color: var(--o); }
.ct-prompt blockquote p::after { content: '”'; color: var(--o); }
.ct-prompt-shows { border-top: 1px solid var(--rule); padding-top: 14px; font-size: 15px; line-height: 1.6; color: var(--mid); }
.ct-prompt-shows strong { color: var(--dk); }
.ct-prompt-shows a { color: var(--o2); font-weight: 600; text-underline-offset: 3px; }

@media (max-width: 1100px) {
  .ct-week-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ct-tl-steps { grid-template-columns: minmax(0, 1fr); gap: 0; max-width: 640px; }
  .ct-tl-steps::before { left: 6px; right: auto; top: 8px; bottom: 8px; width: 2px; height: auto; }
  .ct-tl-step { padding: 0 0 30px 40px; }
  .ct-stories-grid--feature { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .ct-tl { padding: 64px 24px; }
  .ct-how-grid--3, .ct-prompts-grid { grid-template-columns: minmax(0, 1fr); }
  .ct-week-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ct-gap-row { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 22px 22px; }
  .ct-gap-arrow { transform: rotate(90deg); justify-self: start; }
  .ct-round { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .ct-round .ct-round-bar { width: 100%; }
  .ct-stories-grid--feature .ct-story:first-child { padding: 28px 26px 30px; }
}

/* RESPONSIVE
   ---------------------------------------------------------------- */
@media (max-width: 1100px) {
  .ct-stories-grid { grid-template-columns: minmax(0, 1fr); max-width: 720px; }
  .ct-debrief-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
}

@media (max-width: 900px) {
  .ct-hi { padding: 32px 24px 64px; }
  .ct-hd1 { width: 380px; height: 380px; top: -160px; right: -160px; }
  .ct-what-grid,
  .ct-acts-grid,
  .ct-how-grid,
  .ct-moments-grid { grid-template-columns: minmax(0, 1fr); }
  .ct-act--wide { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .ct-act--wide h3 { margin-top: 20px; }
  .ct-how { padding: 64px 24px; }
  .ct-how-quote { padding-left: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .fu { opacity: 1; transform: none; transition: none; }
  .ct-lnk, .ct-act h3 a { transition: none; }
}