/* =====================================================================
   Techy Terms guide CTA — homepage
   =====================================================================

   Deliberately small. The section is built from the theme's own classes
   (.bg-white, .container, .whitebox, .bluebox, .rad30, .font-42, .subhead,
   .cantata-btn, the orange-circle parallax images), so this file only adds
   what those do not already provide.

   The theme's .whitebox/.bluebox carry 100px/125px vertical padding because
   on the "Innovation that Enables" section they hold a tall illustration.
   A CTA does not need that much, so the padding is reduced here — that is
   the one place this section departs from the reference, and only in
   measure, not in treatment.
   ===================================================================== */

.techy-terms-cta .tt-cta-box {
  padding: 56px 56px 52px;
  /* Override the theme's min-height:600px on .whitebox.
     That panel is built to hold a tall illustration on the section this
     borrows from; reused for copy it left 191px of dead space below the
     button (measured). align-self alone did nothing — the box was not being
     stretched, it had a floor. min-height is the actual lever. */
  min-height: 0;
  height: auto;
  align-self: center;
}

/* Never let an animation library hide this copy.
   The first build used the neighbouring sections' data-aos fade-up markup and
   every element stayed at opacity:0 forever — AOS had already initialised and
   never observed a section added after it, so the panel rendered blank while
   all the text assertions still passed. The attributes are gone from the
   markup; this is the belt-and-braces so the copy cannot be hidden again if
   someone re-adds them. */
.techy-terms-cta [data-aos] {
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
}

.techy-terms-cta .tt-cta-panel {
  padding: 48px 44px;
  /* The theme's .bluebox carries a 600px min-height for the illustration it
     normally holds, which left the five term rows floating at the bottom of a
     mostly-empty panel. Sized to its own content and centred against the copy
     instead. */
  min-height: 0;
  height: auto;
  align-self: center;
  display: flex;
  align-items: center;
  overflow: hidden;
}

/* Eyebrow: same 12px/600 treatment as the pillar page's kicker, so the two
   surfaces introduce the guide the same way. */
.techy-terms-cta .tt-cta-eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #ff8833;
  margin: 0 0 14px;
}

/* The headline is a vendor quote, so it is set in quotes and kept tighter
   than the theme's default 1.5 line-height — at 42px a quotation needs to
   read as one phrase, not three stacked lines. */
.techy-terms-cta h2.font-42 {
  line-height: 1.22;
  margin-bottom: 10px;
}

.techy-terms-cta .subhead {
  color: #555;
  margin-bottom: 18px;
}

/* The term list is the proof that the page is substantial: it shows the
   actual comparisons rather than claiming "24 terms". */
.techy-terms-cta .tt-cta-panel-inner {
  width: 100%;
}

/* The crossword cropped straight out of the meta image.

   It brings the source's own pale ground with it, so it sits on a white card
   exactly as it does in the OG image. That is deliberate — Adam asked for it
   to look like the source, and the card is part of how the source looks.

   Rounded and lightly shadowed so the crop's straight edges read as an
   intentional card rather than a rectangular cut-out on the blue.

   Portrait aspect (700x838), so height is the constraint; a width-led rule
   pushed an earlier portrait image past the top of the panel. */
.techy-terms-cta .tt-cta-art {
  display: block;
  width: auto;
  max-width: 54%;
  height: auto;
  max-height: 210px;
  margin: 0 auto 24px;
  border-radius: 16px;
  box-shadow: 0 6px 20px rgba(40, 80, 105, .13);
}

/* Centred, per Adam.
   The rows were left-aligned against a centred illustration, so nothing on
   the panel shared an axis. */
.techy-terms-cta .tt-cta-terms {
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: center;
}

.techy-terms-cta .tt-cta-terms li {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.45;
  color: #3f5560;
  padding: 13px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .55);
}

.techy-terms-cta .tt-cta-terms li:last-child { border-bottom: 0; }

/* "vs" is connective tissue, not content — lighter and lowercase so the eye
   reads the terms themselves. */
.techy-terms-cta .tt-cta-terms span {
  font-weight: 400;
  font-size: 13px;
  color: #7c8b93;
  padding: 0 3px;
}

/* The .orange-circle rules that lived here are deleted along with the markup.
   They are a homepage band motif: designed to bleed off the edges of a
   full-width section, they were clipped into stray arcs inside this rounded
   panel. Removed rather than hidden, so the stylesheet keeps matching what
   actually renders. */

@media (max-width: 991.98px) {
  /* Bootstrap's lg breakpoint is 992px, so this must be 991.98 — a 990px cap
     leaves a live 2px window where the columns have already stacked but the
     mobile rules have not applied. That exact off-by-two shipped a visible
     bug on this site before. */
  .techy-terms-cta .tt-cta-box   { padding: 40px 34px 36px; }
  .techy-terms-cta .tt-cta-panel { padding: 34px 30px; margin-top: 18px; }
  .techy-terms-cta h2.font-42    { font-size: 30px; }
}

@media (max-width: 575.98px) {
  .techy-terms-cta .tt-cta-box   { padding: 32px 24px 30px; }
  .techy-terms-cta .tt-cta-panel { padding: 28px 24px; }
  .techy-terms-cta h2.font-42    { font-size: 26px; }
  .techy-terms-cta .tt-cta-terms li { font-size: 14px; }
  .techy-terms-cta .cantata-btn { display: block; text-align: center; }
}