/* === Manage Page ===
   Requires: global.css (tokens, resets, Kadence overrides, topbar, footer)
   Figma source: Manage (node 293:987), 1512px frame
   ========================================================================== */

/* ── SHARED BUTTON (Group 167 pattern) ── */

.cc-manage .cc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 472px;
  max-width: 100%;
  height: 54px;
  border: 0.5px solid var(--cc-archive);
  background: var(--cc-bg);
  color: var(--cc-archive);
  font-family: var(--cc-font-body);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.3s, color 0.3s;
}

.cc-manage .cc-btn:hover {
  background: var(--cc-dark-parchment);
  color: var(--cc-bg);
  border-color: var(--cc-dark-parchment);
}

.cc-manage .cc-btn:focus,
.cc-manage .cc-btn:active {
  outline: none;
  background: var(--cc-bg);
  color: var(--cc-archive);
  border-color: var(--cc-archive);
}

.cc-manage {
  max-width: 100%;
  width: 100%;
  margin: 0 auto;
  position: relative;
  padding-top: 79px;
}

/* ── HEADER ── */

/* Same 130px as the Insights and Transactions heroes, so the title sits at a
   consistent height across the site's interior pages. */
.cc-manage-header {
  padding: 0 var(--cc-gutter);
  max-width: 1512px;
  margin: 0 auto;
  margin-top: 130px;
}

.cc-manage-header__title {
  font-family: var(--cc-font-heading);
  font-weight: 400;
  font-size: 44px;
  line-height: 1.2;
  color: var(--cc-ink);
  margin-left: 123px;
  max-width: 550px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h2.cc-manage-header__title.cc-manage-header__title--grey {
  color: var(--cc-archive);
  margin-top: 8px;
  padding-top: 0;
  font-size: 44px;
  font-weight: 400;
  line-height: 1.2;
}

.cc-manage-header__row {
  display: grid;
  grid-template-columns: 810px 1fr;
  margin-top: 69px;
}

.cc-manage-header__left {
  padding-left: 123px;
}

.cc-manage-header__subtitle {
  font-family: var(--cc-font-heading);
  font-weight: 400;
  font-size: 25px;
  line-height: normal;
  color: var(--cc-archive);
  max-width: 369px;
}

.cc-manage-header__right {
  padding-top: 12px;
}

.cc-manage-header__body {
  font-family: var(--cc-font-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.48;
  letter-spacing: 0.28px;
  color: var(--cc-ink-2);
  max-width: 560px;
}

.cc-manage-header__body + .cc-manage-header__body {
  margin-top: 20px;
}

.cc-manage-header__right .cc-btn {
  margin-top: 60px;
}

/* Full content width. It used to be 1331px pushed 125px off the left edge to
   sit on the title's rail, which read as a gap rather than an alignment
   because nothing else on the page shares that edge. */
.cc-manage-header__image {
  width: 100%;
  aspect-ratio: 1456 / 700;
  height: auto;
  margin-top: 80px;
  overflow: hidden;
}

.cc-manage-header__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ── STATS ── */

.cc-manage-stats {
  padding: 0 28px;
  max-width: 1512px;
  margin: 0 auto;
}

/* Mirrors the homepage stats band (.cc-dev-stats in homepage.css). The old
   version was a 282px-tall grid with a 195px top margin and 106px numerals,
   which left the row floating in its own screen; these are the homepage's
   proportions. */
.cc-manage-stats__rule {
  height: 0;
  border-top: 0.5px solid var(--cc-archive);
  margin-top: 30px;
  margin-bottom: 40px;
}

.cc-manage-stats__grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
  grid-template-rows: auto auto;
  align-items: stretch;
  gap: 0;
}

/* Numbers share row 1 and labels row 2, so the numerals sit on one baseline
   even where a label wraps to two lines. */
.cc-manage-stats__item {
  display: grid;
  grid-row: 1 / -1;
  grid-template-rows: subgrid;
}

.cc-manage-stats__divider {
  width: 0;
  border-left: 0.5px solid var(--cc-archive);
  grid-row: 1 / -1;
  align-self: stretch;
  margin: 0 19px;
}

.cc-manage-stats__number {
  align-self: end;
  font-family: 'Austin News Deck', var(--cc-font-heading);
  font-weight: 400;
  font-size: clamp(48px, 5.5vw, 96px);
  line-height: 1.1;
  color: var(--cc-ink-2);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.cc-manage-stats__label {
  font-family: var(--cc-font-heading);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.45;
  color: var(--cc-ink-2);
  margin-top: 12px;
}

/* ── TAILORED ── */

.cc-manage-tailored {
  padding: 0 28px;
  max-width: 1512px;
  margin: 0 auto;
  margin-top: 69px;
}

.cc-manage-tailored__rule {
  height: 0;
  border-top: 0.5px solid var(--cc-archive);
  margin-bottom: 30px;
}

.cc-manage-tailored__grid {
  display: grid;
  grid-template-columns: 595px 56px 1fr;
}

.cc-manage-tailored__image {
  width: 595px;
  height: 472px;
  overflow: hidden;
}

.cc-manage-tailored__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cc-manage-tailored__caption {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 22px;
}

.cc-manage-tailored__caption-arrow {
  width: 10px;
  height: 10px;
  margin-top: 3px;
  flex-shrink: 0;
}

.cc-manage-tailored__caption p {
  font-family: var(--cc-font-body);
  font-weight: 400;
  font-size: 11px;
  line-height: 1.48;
  letter-spacing: 0.22px;
  color: var(--cc-ink-2);
  max-width: 350px;
}

.cc-manage-tailored__divider {
  width: 0;
  border-left: 0.5px solid var(--cc-archive);
  height: 847px;
  margin-left: 20px;
  align-self: end;
}

.cc-manage-tailored__lead {
  font-family: var(--cc-font-heading);
  font-weight: 400;
  font-size: 25px;
  line-height: normal;
  color: var(--cc-archive);
  max-width: 633px;
}

.cc-manage-tailored__links {
  margin-top: 551px;
}

.cc-manage-tailored__links-label {
  font-family: var(--cc-font-body);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--cc-dark-parchment);
  display: block;
  margin-bottom: 25px;
}

.cc-manage-tailored__link-rule {
  height: 0;
  border-top: 0.5px solid var(--cc-archive);
}

.cc-manage-tailored__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 26px 0 11px;
  text-decoration: none;
}

.cc-manage-tailored__link span {
  font-family: var(--cc-font-heading);
  font-weight: 400;
  font-size: 25px;
  line-height: 1.2;
  color: var(--cc-ink-2);
}

.cc-manage-tailored__link svg {
  color: var(--cc-ink-2);
  flex-shrink: 0;
}

/* ── FULL-WIDTH IMAGES ── */

.cc-manage-fullimg {
  padding: 0 28px;
  max-width: 1512px;
  margin: 69px auto 0;
}

.cc-manage-fullimg img {
  width: 100%;
  height: 853px;
  object-fit: cover;
  display: block;
}

.cc-manage-fullimg--second {
  margin-top: 70px;
}

/* ── END-TO-END ── */

.cc-manage-e2e {
  padding: 0 28px;
  max-width: 1512px;
  margin: 69px auto 0;
}

.cc-manage-e2e__rule {
  height: 0;
  border-top: 0.5px solid var(--cc-archive);
  margin-bottom: 25px;
}

.cc-manage-e2e__header {
  display: grid;
  grid-template-columns: 495px 1fr;
  margin-bottom: 186px;
}

.cc-manage-e2e__heading {
  font-family: var(--cc-font-heading);
  font-weight: 400;
  font-size: 30px;
  line-height: 1.2;
  color: var(--cc-ink-2);
  max-width: 290px;
}

.cc-manage-e2e__subtitle {
  font-family: var(--cc-font-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.48;
  letter-spacing: 0.28px;
  color: var(--cc-ink-2);
  max-width: 532px;
  padding-top: 18px;
}

.cc-manage-e2e__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 29px;
  row-gap: 0;
}

.cc-manage-e2e__card {
  padding-top: 24px;
  padding-bottom: 24px;
  border-top: 0.5px solid var(--cc-archive);
}

.cc-manage-e2e__card:nth-child(-n+3) {
  border-top: none;
}

.cc-manage-e2e__card-title {
  font-family: var(--cc-font-heading);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.45;
  color: var(--cc-ink-2);
  margin-bottom: 22px;
}

.cc-manage-e2e__card-desc {
  font-family: var(--cc-font-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.48;
  letter-spacing: 0.28px;
  color: var(--cc-ink-2);
  max-width: 410px;
}

/* ── STRUCTURED APPROACH ── */

.cc-manage-approach {
  padding: 0 28px;
  max-width: 1512px;
  margin: 70px auto 0;
}

.cc-manage-approach__rule {
  height: 0;
  border-top: 0.5px solid var(--cc-archive);
  margin-bottom: 33px;
}

.cc-manage-approach__grid {
  display: grid;
  grid-template-columns: 567px 48px 1fr;
}

.cc-manage-approach__heading {
  font-family: var(--cc-font-heading);
  font-weight: 400;
  font-size: 30px;
  line-height: 1.2;
  color: var(--cc-ink);
  max-width: 432px;
}

.cc-manage-approach__steps {
  margin-top: 307px;
}

.cc-manage-approach__steps-label {
  font-family: var(--cc-font-body);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--cc-dark-parchment);
  display: block;
  margin-bottom: 25px;
}

.cc-manage-approach__step-rule {
  height: 0;
  border-top: 0.5px solid var(--cc-archive);
}

.cc-manage-approach__step-header {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 28px 0 11px;
  background: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  cursor: pointer;
  text-align: left;
  color: var(--cc-ink-2);
}

.cc-manage-approach__step-header:hover,
.cc-manage-approach__step-header:focus,
.cc-manage-approach__step-header:active {
  outline: none;
  background: none;
  box-shadow: none;
  color: var(--cc-ink-2);
  border: none;
}

.cc-manage-approach__step-num {
  font-family: var(--cc-font-body);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 1.5px;
  color: var(--cc-dark-parchment);
  flex-shrink: 0;
}

.cc-manage-approach__step-title {
  font-family: var(--cc-font-heading);
  font-weight: 400;
  font-size: 25px;
  line-height: 1.2;
  color: var(--cc-ink-2);
  flex: 1;
}

.cc-manage-approach__step-arrow {
  flex-shrink: 0;
  color: var(--cc-ink-2);
  transition: transform 0.3s;
}

.cc-manage-approach__step--active .cc-manage-approach__step-arrow {
  transform: rotate(90deg);
}

.cc-manage-approach__step-body {
  display: none;
  padding: 20px 0 15px 36px;
}

.cc-manage-approach__step--active .cc-manage-approach__step-body,
.cc-manage-approach__step-header[aria-expanded="true"] ~ .cc-manage-approach__step-body {
  display: block;
}

.cc-manage-approach__step-body p {
  font-family: var(--cc-font-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.48;
  letter-spacing: 0.28px;
  color: var(--cc-archive);
  max-width: 379px;
}

.cc-manage-approach__divider {
  width: 0;
  border-left: 0.5px solid var(--cc-archive);
  height: 803px;
  align-self: end;
  margin-left: 27px;
}

.cc-manage-approach__image {
  width: 100%;
  height: 529px;
  overflow: hidden;
}

.cc-manage-approach__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cc-manage-approach__caption {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 22px;
}

.cc-manage-approach__caption-arrow {
  width: 10px;
  height: 10px;
  margin-top: 3px;
  flex-shrink: 0;
}

.cc-manage-approach__caption p {
  font-family: var(--cc-font-body);
  font-weight: 400;
  font-size: 11px;
  line-height: 1.48;
  letter-spacing: 0.22px;
  color: var(--cc-ink-2);
  max-width: 350px;
}

/* ── ACTIVE APPROACH ── */

.cc-manage-active {
  padding: 0 28px;
  max-width: 1512px;
  margin: 70px auto 0;
}

.cc-manage-active__grid {
  display: grid;
  grid-template-columns: 492px 1fr;
}

.cc-manage-active__heading {
  font-family: var(--cc-font-heading);
  font-weight: 400;
  font-size: 30px;
  line-height: 1.2;
  color: var(--cc-ink-2);
  max-width: 311px;
}

.cc-manage-active__body {
  font-family: var(--cc-font-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.48;
  letter-spacing: 0.28px;
  color: var(--cc-ink-2);
  max-width: 662px;
  padding-top: 27px;
}

.cc-manage-active__right .cc-btn {
  margin-top: 60px;
}

/* ── TESTIMONIALS ── */

.cc-manage-testimonials {
  padding: 0 28px;
  max-width: 1512px;
  margin: 190px auto 0;
}

.cc-manage-testimonials__rule {
  height: 0;
  border-top: 0.5px solid var(--cc-archive);
  margin-bottom: 26px;
}

.cc-manage-testimonials__label {
  font-family: var(--cc-font-body);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--cc-dark-parchment);
  display: block;
  margin-bottom: 15px;
}

.cc-manage-testimonials__grid {
  display: grid;
  grid-template-columns: 492px 492px 1fr;
}

.cc-manage-testimonials__heading {
  font-family: var(--cc-font-heading);
  font-weight: 400;
  font-size: 30px;
  line-height: 1.2;
  color: var(--cc-ink-2);
  max-width: 311px;
}

.cc-manage-testimonials__card {
  padding-top: 45px;
}

.cc-manage-testimonials__card-title {
  font-family: var(--cc-font-heading);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.45;
  color: var(--cc-ink-2);
  margin-bottom: 20px;
}

.cc-manage-testimonials__card-body {
  font-family: var(--cc-font-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.48;
  letter-spacing: 0.28px;
  color: var(--cc-ink-2);
  max-width: 419px;
}

.cc-manage-testimonials__card-author {
  display: flex;
  gap: 25px;
  margin-top: 20px;
}

.cc-manage-testimonials__card-name,
.cc-manage-testimonials__card-company {
  font-family: var(--cc-font-body);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--cc-dark-parchment);
}

/* ── FAQ (uses reusable .cc-faq component) ── */

.cc-manage .cc-faq {
  margin-top: 70px;
  padding-bottom: 0;
}

.cc-manage .cc-faq .cc-faq__divider {
  margin-bottom: 26px;
}

.cc-manage .cc-faq .cc-faq__label {
  margin-bottom: 93px;
}

.cc-manage .cc-faq .cc-faq__question {
  padding: 25px 0 11px 0;
}

.cc-manage .cc-faq .cc-faq__answer {
  padding: 30px 0 15px 4px;
}

.cc-manage .cc-faq .cc-faq__answer p {
  max-width: 960px;
}

/* ── FOOTER OVERRIDE ── */

.cc-manage .cc-footer {
  margin-top: 110px;
}

/* ============================================================
   RESPONSIVE — Tablet (max-width: 1024px)
   ============================================================ */
@media (max-width: 1024px) {
  .cc-manage-header {
    margin-top: 120px;
  }

  .cc-manage-header__title {
    margin-left: 0;
  }

  .cc-manage-header__row {
    grid-template-columns: 1fr;
    gap: 30px 0;
    margin-top: 40px;
  }

  .cc-manage-header__left {
    padding-left: 0;
  }

  .cc-manage-header__image {
    width: 100%;
    height: auto;
    aspect-ratio: 1331 / 700;
    margin-left: 0;
  }

  /* Two stats per row here, so the single-row subgrid no longer applies —
     each item goes back to being its own flex column. */
  .cc-manage-stats__grid {
    grid-template-columns: 1fr auto 1fr;
    grid-template-rows: none;
    gap: 40px 0;
    margin-top: 80px;
  }

  .cc-manage-stats__item {
    display: flex;
    flex-direction: column;
    grid-row: auto;
  }

  .cc-manage-tailored__grid {
    grid-template-columns: 1fr;
  }

  .cc-manage-tailored__image {
    width: 100%;
    height: auto;
    aspect-ratio: 595 / 472;
  }

  .cc-manage-tailored__divider {
    display: none;
  }

  .cc-manage-tailored__links {
    margin-top: 40px;
  }

  .cc-manage-fullimg img {
    height: 500px;
  }

  .cc-manage-e2e__header {
    grid-template-columns: 1fr;
    gap: 20px 0;
    margin-bottom: 80px;
  }

  .cc-manage-e2e__subtitle {
    padding-top: 0;
  }

  .cc-manage-approach__grid {
    grid-template-columns: 1fr;
  }

  .cc-manage-approach__divider {
    display: none;
  }

  .cc-manage-approach__steps {
    margin-top: 40px;
  }

  .cc-manage-approach__image {
    margin-top: 40px;
  }

  .cc-manage-active__grid {
    grid-template-columns: 1fr;
    gap: 20px 0;
  }

  .cc-manage-testimonials__grid {
    grid-template-columns: 1fr 1fr;
    gap: 30px;
  }

  .cc-manage .cc-btn {
    width: 100%;
    max-width: 472px;
  }
}

/* ============================================================
   RESPONSIVE — Mobile (max-width: 768px)
   ============================================================ */
@media (max-width: 768px) {
  .cc-manage-header {
    margin-top: 80px;
  }

  .cc-manage-header__title {
    font-size: 32px;
  }

  h2.cc-manage-header__title.cc-manage-header__title--grey {
    font-size: 32px;
  }

  .cc-manage-header__subtitle {
    font-size: 20px;
  }

  .cc-manage-header__image {
    margin-top: 40px;
    aspect-ratio: 16 / 9;
  }

  .cc-manage-stats__grid {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    gap: 30px 0;
    margin-top: 60px;
  }

  .cc-manage-stats__item {
    display: flex;
    flex-direction: column;
    grid-row: auto;
  }

  .cc-manage-stats__divider {
    display: none;
  }

  .cc-manage-stats__number {
    font-size: 60px;
  }

  .cc-manage-tailored {
    margin-top: 40px;
  }

  .cc-manage-tailored__lead {
    font-size: 20px;
  }

  .cc-manage-fullimg img {
    height: 300px;
  }

  .cc-manage-fullimg--second {
    margin-top: 40px;
  }

  .cc-manage-e2e {
    margin-top: 40px;
  }

  .cc-manage-e2e__heading {
    font-size: 24px;
  }

  .cc-manage-e2e__grid {
    grid-template-columns: 1fr;
  }

  .cc-manage-approach {
    margin-top: 40px;
  }

  .cc-manage-approach__heading {
    font-size: 24px;
  }

  .cc-manage-approach__step-title {
    font-size: 20px;
  }

  .cc-manage-active {
    margin-top: 40px;
  }

  .cc-manage-active__heading {
    font-size: 24px;
  }

  .cc-manage-testimonials {
    margin-top: 80px;
  }

  .cc-manage-testimonials__grid {
    grid-template-columns: 1fr;
  }

  .cc-manage-testimonials__heading {
    font-size: 24px;
  }

  .cc-manage .cc-faq {
    margin-top: 40px;
  }

  .cc-manage .cc-footer {
    margin-top: 60px;
  }
}