/* ==========================================================================
   67 Web Design Theme Showcase
   Stylesheet for 67webdesign.online

   SCOPE NOTE. Divi 5 native module settings do the section-level work:
   colours, type, spacing, backgrounds, borders and shadows on the hero,
   headings, buttons and CTA bands are all set in the builder, not here.

   This file is limited to the things a native Divi setting cannot express:

     1. The auto-fill gallery grid. Divi's column system is a fixed 1/2/3/4
        split; the design calls for repeat(auto-fill, minmax(290px, 1fr)).
     2. The 4:3 thumbnail lock with object-fit cover, so 50 screenshots of
        differing sizes crop to one orderly grid.
     3. Card hover transform, and the shared card shell. Written once here
        rather than duplicated into 50 modules: identical per-module style
        attributes would make Divi emit the same rule 50 times.
     4. Sticky offsets for the header and the filter bar.
     5. Filter pill active/inactive states and the show/hide mechanics that
        the filter JS drives.
     6. The search input, which has no native Divi equivalent.
     7. Responsive column counts required by the brief (3-4 / 2 / 1).

   Token values are copied verbatim from the Claude Design reference file.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Un-float Divi columns

   Divi floats every .et_pb_column and contains those floats with clearfix
   ::before/::after pseudo-elements on the row. Those pseudo-elements have
   to be disabled wherever a row or column becomes a CSS grid, because a
   pseudo-element inside a grid container becomes a grid ITEM and occupies a
   cell (it is what made the hero render three 353px tracks instead of the
   reference's `550px 550px 0px`).

   Disabling them removes the float containment as well, so the columns must
   also be un-floated. Without this the gallery row collapsed to 30px, the
   cards overflowed it, the gallery section measured 326px instead of
   ~8800px, and the sticky filter bar unpinned almost immediately because a
   sticky element can only travel inside its containing block.

   Applied to every column this stylesheet lays out itself.
   -------------------------------------------------------------------------- */

.tsc-header__bar.et_pb_column,
.tsc-hero__grid .et_pb_column,
.tsc-filterbar__inner.et_pb_column,
.tsc-gallery__grid .et_pb_column,
.tsc-how__head .et_pb_column,
.tsc-how__grid .et_pb_column,
.tsc-cta__col.et_pb_column,
.tsc-footer__grid .et_pb_column,
.tsc-footer__bar .et_pb_column {
  float: none !important;
}

/* --------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */

:root {
  --red-50:  #fdeceb;
  --red-100: #fbd5d2;
  --red-200: #f5a8a1;
  --red-300: #ef7a70;
  --red-400: #e84e41;
  --red-500: #e02b20;
  --red-600: #c0241b;
  --red-700: #9c1d15;

  --black:      #0a0a0a;
  --ink-900:    #1a1815;
  --ink-800:    #232019;
  --ink-700:    #3a3733;
  --ink-600:    #555555;
  --ink-500:    #666666;
  --ink-400:    #8a8a8a;
  --ink-300:    #b8b8b8;
  --line-300:   #dddddd;
  --line-200:   #e7e7e7;
  --line-100:   #f0f0f0;
  --surface-100:#f7f7f7;
  --surface-50: #fbfbfb;
  --white:      #ffffff;

  --color-primary:       var(--red-500);
  --color-primary-hover: var(--red-600);
  --border-default: var(--line-300);
  --border-subtle:  var(--line-200);
  --focus-ring:     rgba(224, 43, 32, 0.40);

  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-pill: 999px;

  --shadow-sm: 0 2px 6px  rgba(10, 10, 10, 0.08);
  --shadow-md: 0 6px 18px rgba(10, 10, 10, 0.10);

  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);

  /* Measured header height (80px logo + 14px padding top and bottom + 1px
     border). The filter bar sticks directly below it, so both the sticky
     offset and the anchor scroll padding derive from this one number.
     Update it if the logo height changes. */
  --tsc-header-h: 109px;
}

/* --------------------------------------------------------------------------
   2. Global typography

   Set on html/body so the Divi theme default cannot leak in. Open Sans is
   the brand face and Divi already ships it, so no extra webfont loads.
   -------------------------------------------------------------------------- */

body.tsc-showcase,
body.tsc-showcase h1,
body.tsc-showcase h2,
body.tsc-showcase h3,
body.tsc-showcase h4,
body.tsc-showcase h5,
body.tsc-showcase h6,
body.tsc-showcase input,
body.tsc-showcase button {
  font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body.tsc-showcase {
  background: var(--surface-50);
  color: var(--ink-500);
}

/* The reference sets these on every heading and paragraph; without them the
   hero H1 breaks on different words than the design. */
body.tsc-showcase h1,
body.tsc-showcase h2,
body.tsc-showcase h3 {
  text-wrap: balance;
}

body.tsc-showcase p {
  text-wrap: pretty;
}

/* Anchor links (#gallery, #browse) must clear the sticky header and the
   sticky filter bar, or the target lands underneath them. */
body.tsc-showcase {
  scroll-padding-top: calc(var(--tsc-header-h) + 96px);
}

body.tsc-showcase ::selection {
  background: var(--red-500);
  color: #fff;
}

body.tsc-showcase :focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   3. Buttons

   Ported from the reference design system's Button component so Divi's
   Button module renders the same pill. Divi ships its own padding, 2px
   border, colour and an ::after arrow glyph on .et_pb_button, all of which
   have to be reset before the design's values can apply. That reset is the
   reason these rules carry !important.

   Sizes and variants are exactly the component's:
     sm 8px 18px / 13px    primary  red bg, white text, shadow-sm
     md 13px 30px / 15px   light    white bg, ink-800 text, shadow-sm
     lg 17px 40px / 17px
   -------------------------------------------------------------------------- */

.tsc-btn.et_pb_button,
.tsc-btn.et_pb_button:hover {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.01em;
  border-radius: var(--radius-pill) !important;
  border: 2px solid transparent !important;
  text-decoration: none;
  white-space: nowrap;
  transition:
    background   220ms var(--ease-standard),
    color        220ms var(--ease-standard),
    border-color 220ms var(--ease-standard),
    transform    120ms var(--ease-standard),
    box-shadow   220ms var(--ease-standard);
}

/* Divi appends an arrow glyph to every button; the design has none. */
.tsc-btn.et_pb_button::after,
.tsc-btn.et_pb_button::before {
  display: none !important;
  content: none !important;
}

.tsc-btn--sm.et_pb_button { padding: 8px 18px !important;  font-size: 13px !important; }
.tsc-btn--md.et_pb_button { padding: 13px 30px !important; font-size: 15px !important; }
.tsc-btn--lg.et_pb_button { padding: 17px 40px !important; font-size: 17px !important; }

.tsc-btn--red.et_pb_button {
  background: var(--color-primary) !important;
  color: var(--white) !important;
  box-shadow: var(--shadow-sm);
}

.tsc-btn--red.et_pb_button:hover {
  background: var(--color-primary-hover) !important;
  color: var(--white) !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(224, 43, 32, 0.30);
}

.tsc-btn--light.et_pb_button {
  background: var(--white) !important;
  color: var(--ink-800) !important;
  box-shadow: var(--shadow-sm);
}

.tsc-btn--light.et_pb_button:hover {
  background: var(--white) !important;
  color: var(--ink-800) !important;
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* --------------------------------------------------------------------------
   4. Sticky header

   Sticky lives on the section wrapper via CSS rather than Divi's built-in
   section-sticky option, which creates a competing sticky context and
   breaks the filter bar stacking below it.

   .tsc-header__bar is a Divi column, so it needs the width override; the
   Get Started button is wrapped in .et_pb_button_module_wrapper, which is
   the actual flex child.
   -------------------------------------------------------------------------- */

.tsc-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(255, 255, 255, 0.96);
  border-bottom: 1px solid var(--border-subtle);
  backdrop-filter: saturate(140%) blur(6px);
  -webkit-backdrop-filter: saturate(140%) blur(6px);
}

.tsc-header__bar.et_pb_column {
  display: flex;
  align-items: center;
  gap: 24px;
  width: 100% !important;
  padding: 14px 20px;
}

.tsc-header__logo {
  flex: 0 0 auto;
  margin: 0 !important;
}

.tsc-header__logo img {
  height: 80px;
  width: auto;
  display: block;
}

/* Divi's Menu module is a flex module with its own white background.

   align-self is load-bearing. The bar is align-items:center, but Divi's
   menu module does not take the centred position on its own: it sat at the
   top of the content box, putting the links' centre line at y=29 while the
   logo and the Get Started button both centred at y=45. */
.tsc-header__nav.et_pb_menu {
  flex: 0 1 auto;
  align-self: center;
  background: transparent !important;
  /* Zeroing the margin is what actually centres the nav. Divi gives every
     module a ~30px bottom margin, and align-self centres the MARGIN box, so
     the visible links were pushed ~15px above the bar's centre line even
     with align-self:center applied. margin-left stays auto to keep the nav
     pinned right of the logo. */
  margin: 0 0 0 auto !important;
}

.tsc-header__nav .et_pb_menu_inner_container,
.tsc-header__nav .et_pb_menu__wrap,
.tsc-header__nav .et_pb_menu__menu,
.tsc-header__nav .et-menu-nav {
  align-items: center;
  justify-content: flex-end;
  margin: 0 !important;
  padding: 0 !important;
}

.tsc-header__nav .et-menu {
  display: flex;
  align-items: center;
  gap: 26px;
  /* Divi pulls the list left by half its per-item padding and reserves
     space below it for dropdowns; both have to go or the labels sit low
     inside the list box. */
  margin: 0 !important;
  padding: 0 !important;
}

/* Divi spaces menu items with per-item padding and reserves 8px under each
   link as dropdown hover area. This menu has no dropdowns, and that bottom
   padding was pushing every label visually above the bar's centre line. */
.tsc-header__nav .et-menu > li {
  display: flex;
  align-items: center;
  padding: 0 !important;
  margin: 0 !important;
}

.tsc-header__nav .et-menu > li > a {
  padding: 0 !important;
  margin: 0 !important;
  line-height: 1.4;
}

.tsc-header__nav .et-menu > li > a:hover {
  color: var(--color-primary) !important;
  opacity: 1;
}

.tsc-header__bar > .et_pb_button_module_wrapper {
  flex: 0 0 auto;
  margin: 0 !important;
}

/* --------------------------------------------------------------------------
   4. Hero
   -------------------------------------------------------------------------- */

.tsc-hero {
  position: relative;
}

/* The dark gradient scrim over the background photo. Divi can set one
   background image or one gradient per module, not a gradient layered over
   an image with these exact stops, so the scrim is a pseudo-element. */
.tsc-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(10, 10, 10, 0.86) 0%,
    rgba(10, 10, 10, 0.78) 55%,
    rgba(10, 10, 10, 0.92) 100%
  );
  pointer-events: none;
  z-index: 0;
}

.tsc-hero > * {
  position: relative;
  z-index: 1;
}

.tsc-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 6px 15px 6px 7px;
  border-radius: var(--radius-pill);
  background: rgba(224, 43, 32, 0.16);
  border: 1px solid rgba(224, 43, 32, 0.4);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--red-200);
}

.tsc-hero__badge i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--color-primary);
  color: var(--white);
  font-size: 12px;
  font-style: normal;
  flex: 0 0 auto;
}

/* Copy block beside stat tiles. Divi would render two columns floated at a
   fixed 50/50; the reference collapses them with auto-fit instead.

   Divi gives .et_pb_row a ::before/::after clearfix pair. Inside a grid
   container those pseudo-elements become grid items, so auto-fit sees a
   third occupied track and never collapses it: the reference's
   "550px 550px 0px" came out as three 353px columns. Removing them is what
   makes auto-fit behave. Every grid built on a Divi row or column needs
   this reset. */
.tsc-hero__grid.et_pb_row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 40px;
  align-items: center;
}

.tsc-hero__grid.et_pb_row::before,
.tsc-hero__grid.et_pb_row::after {
  display: none !important;
  content: none !important;
}

.tsc-hero__grid .et_pb_column {
  width: 100% !important;
  margin: 0 !important;
  float: none !important;
}

.tsc-hero__copy.et_pb_column {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
}

.tsc-hero__copy > .et_pb_module { margin-bottom: 0 !important; }

.tsc-hero__title { margin: 0 !important; }
.tsc-hero__title h1 { margin: 0 !important; padding: 0 !important; }

.tsc-hero__lead {
  max-width: 540px;
  margin: 0 !important;
}

.tsc-hero__lead p { margin: 0 !important; }

/* The two hero buttons sit on one line and wrap together on narrow screens. */
.tsc-hero__actions {
  display: flex !important;
  flex-direction: row !important;
  gap: 12px;
  flex-wrap: wrap;
  padding-top: 4px;
  margin: 0 !important;
}

.tsc-hero__actions .et_pb_button_module_wrapper { margin: 0 !important; }

.tsc-hero__badge-wrap,
.tsc-hero__stats-wrap,
.tsc-hero__note-wrap {
  margin: 0 !important;
}

.tsc-hero__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 14px;
}

.tsc-hero__stat {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 22px 20px;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
}

.tsc-hero__stat b {
  font-size: 30px;
  font-weight: 800;
  color: var(--color-primary);
  line-height: 1;
}

.tsc-hero__stat span {
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.74);
}

.tsc-hero__note {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.68);
}

.tsc-hero__note i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--color-primary);
  color: var(--white);
  font-size: 12px;
  font-style: normal;
  flex: 0 0 auto;
}

/* --------------------------------------------------------------------------
   5. Filter bar
   -------------------------------------------------------------------------- */

/* The bar is the gallery section's first row, so the gallery is its sticky
   containing block and it unpins exactly where the cards end instead of
   covering How It Works, the CTA and the footer. Full-bleed: the background
   spans the viewport while the contents stay on the 1180px grid. */
.tsc-filterbar.et_pb_row {
  position: sticky;
  top: var(--tsc-header-h);
  z-index: 50;
  width: 100% !important;
  max-width: none !important;
  background: var(--surface-50);
  border-bottom: 1px solid var(--border-subtle);
  box-shadow: 0 6px 18px -18px rgba(0, 0, 0, 0.6);
}

.tsc-filterbar.et_pb_row::before,
.tsc-filterbar.et_pb_row::after {
  display: none !important;
  content: none !important;
}

/* The row runs full-bleed so the bar's background spans the viewport; the
   column pulls the contents back onto the same 1180px grid as the gallery.

   Centred with flex rather than `margin: 0 auto`: Divi floats its columns
   and adds explicit per-column margins, and a floated box ignores auto
   margins, so the bar sat hard against the left edge. Making the row a flex
   container neutralises the float (floats do not apply to flex items) and
   centres deterministically. */
.tsc-filterbar.et_pb_row {
  display: flex;
  justify-content: center;
}

.tsc-filterbar__inner.et_pb_column {
  float: none !important;
  width: 100% !important;
  max-width: 1180px !important;
  margin: 0 !important;
  padding: 14px 20px 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.tsc-filterbar__top {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.tsc-search {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1 1 260px;
  max-width: 340px;
}

.tsc-search__icon {
  position: absolute;
  left: 13px;
  display: inline-flex;
  color: var(--ink-400);
  pointer-events: none;
}

.tsc-search__icon svg { display: block; }

.tsc-search input {
  width: 100%;
  padding: 11px 14px 11px 34px;
  font-size: 15px;
  color: var(--ink-800);
  background: var(--white);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-pill);
  outline: none;
  transition: border-color 120ms var(--ease-standard), box-shadow 120ms var(--ease-standard);
}

.tsc-search input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

/* Remove the native clear affordance so the pill shape stays clean. */
.tsc-search input::-webkit-search-decoration,
.tsc-search input::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

.tsc-count {
  margin: 0 0 0 auto;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-400);
}

.tsc-pills {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding-bottom: 4px;
  margin: 0 !important;
}

/* Divi wraps every Button module in .et_pb_button_module_wrapper and gives
   it a ~31px bottom margin. Left alone that stacks on top of the flex gap
   and opens a 40px trench between each row of pills. */
.tsc-pills .et_pb_button_module_wrapper {
  margin: 0 !important;
  padding: 0 !important;
  flex: 0 0 auto;
  line-height: 0;
}

/* Divi's Button module ships its own padding, border and ::after arrow.
   These are reset so the pill matches the reference exactly. */
.tsc-pill.et_pb_button,
.tsc-pill {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  padding: 8px 15px !important;
  font-size: 13.5px !important;
  font-weight: 700;
  line-height: 1.4;
  border-radius: var(--radius-pill) !important;
  cursor: pointer;
  border: 1.5px solid var(--border-default) !important;
  background: var(--white);
  color: var(--ink-600) !important;
  white-space: nowrap;
  transition: all 160ms var(--ease-standard);
}

.tsc-pill.et_pb_button::after {
  display: none !important;
}

.tsc-pill:hover {
  border-color: var(--color-primary) !important;
  color: var(--color-primary) !important;
}

.tsc-pill.is-active {
  background: var(--color-primary);
  color: var(--white) !important;
  border-color: var(--color-primary) !important;
}

/* --------------------------------------------------------------------------
   6. Gallery grid

   repeat(auto-fill, minmax(290px, 1fr)) is the reference behaviour. The
   media queries below pin the column count to the brief's requirement of
   3-4 on desktop, 2 on tablet and 1 on phone.
   -------------------------------------------------------------------------- */

.tsc-gallery__grid .et_pb_column {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 26px;
  align-items: start;
  width: 100% !important;
}

/* See the note on .tsc-hero__grid: Divi's clearfix pseudo-elements would
   otherwise occupy grid cells and push a card onto the next row. */
.tsc-gallery__grid .et_pb_column::before,
.tsc-gallery__grid .et_pb_column::after,
.tsc-gallery__grid.et_pb_row::before,
.tsc-gallery__grid.et_pb_row::after {
  display: none !important;
  content: none !important;
}

/* Divi wraps every module in the column; none of them should stretch. */
.tsc-gallery__grid .et_pb_column > .tsc-card {
  margin: 0 !important;
  height: 100%;
}

/* --------------------------------------------------------------------------
   7. Theme card
   -------------------------------------------------------------------------- */

.tsc-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition:
    transform   180ms var(--ease-standard),
    box-shadow  180ms var(--ease-standard),
    border-color 180ms var(--ease-standard);
}

/* Only cards with a live demo lift and highlight on hover. A Coming Soon
   card is not clickable, so it must not advertise itself as clickable. */
.tsc-card--live:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--red-200);
}

/* Divi puts the module link on a wrapping anchor; make it fill the card. */
.tsc-card--live > a.et_pb_module_link,
.tsc-card--live > a {
  display: contents;
}

/* 7a. Thumbnail. Locked to 4:3 so every screenshot crops identically and a
       replacement image of any size needs no layout change. */
.tsc-card__shot {
  margin: 0 !important;
  width: 100%;
  aspect-ratio: 4 / 3;
  background: var(--surface-100);
  border-bottom: 1px solid var(--border-subtle);
  overflow: hidden;
}

.tsc-card__shot .et_pb_image_wrap,
.tsc-card__shot img {
  display: block;
  width: 100%;
  height: 100%;
}

.tsc-card__shot img {
  object-fit: cover;
  object-position: center top;
}

/* aspect-ratio fallback for older Safari. */
@supports not (aspect-ratio: 4 / 3) {
  .tsc-card__shot {
    position: relative;
    padding-top: 75%;
  }
  .tsc-card__shot .et_pb_image_wrap {
    position: absolute;
    inset: 0;
  }
}

/* 7b. Card body */
.tsc-card__body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 18px 18px;
  flex: 1 1 auto;
}

/* Divi's Heading module wraps the tag in .et_pb_heading_container and gives
   h3 its own size, weight, colour and 10px bottom padding, so the class on
   the module wrapper alone does not reach the text. */
.tsc-card__name,
.tsc-card__name .et_pb_heading_container {
  margin: 0 !important;
  padding: 0 !important;
}

.tsc-card__name h3,
.tsc-card__name .et_pb_module_header {
  font-size: 17px !important;
  font-weight: 800 !important;
  color: var(--ink-800) !important;
  line-height: 1.2 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.tsc-card__industry {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-400);
  margin: 0 !important;
  /* Pushes the CTA to the bottom so every pill lines up across the row. */
  flex: 1 1 auto;
}

.tsc-card__industry p,
.tsc-card__cta p {
  margin: 0 !important;
  padding: 0 !important;
  line-height: inherit;
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
}

/* 7c. CTA pill.

   On a live card this is a Divi Button module, so it is a real
   <a href target="_blank"> - crawlable and keyboard-operable, which the
   card group's JS-only link is not. On a Coming Soon card it is inert Text.

   The Button wrapper must not add its own box, and Divi's arrow glyph is
   replaced with the reference's north-east arrow. */
.tsc-card__body > .et_pb_button_module_wrapper {
  margin: 0 !important;
  width: 100%;
}

a.tsc-card__cta.et_pb_button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 11px 18px !important;
  font-size: 14.5px !important;
  font-weight: 700;
  line-height: 1.3;
  border: 0 !important;
  border-radius: var(--radius-pill) !important;
  color: var(--white) !important;
  background: var(--color-primary) !important;
  transition: background 160ms var(--ease-standard);
}

/* Divi's default trailing glyph, swapped for the reference's arrow. */
a.tsc-card__cta.et_pb_button::after {
  content: "\2197" !important;
  display: inline !important;
  position: static !important;
  margin: 0 !important;
  opacity: 1 !important;
  font-family: inherit !important;
  font-size: 13px !important;
  line-height: 1 !important;
}

a.tsc-card__cta.et_pb_button::before {
  display: none !important;
  content: none !important;
}

.tsc-card--live:hover a.tsc-card__cta.et_pb_button,
a.tsc-card__cta.et_pb_button:hover {
  background: var(--color-primary-hover) !important;
  color: var(--white) !important;
}

/* Coming Soon: muted, clearly not an action. */
.tsc-card__cta--soon {
  margin: 0 !important;
}

.tsc-card__cta--soon p {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 10px 18px !important;
  font-size: 14.5px;
  font-weight: 700;
  border-radius: var(--radius-pill);
  color: var(--ink-400);
  background: var(--line-100);
  border: 1px dashed var(--line-300);
}

/* --------------------------------------------------------------------------
   8. Filter show/hide + empty state
   -------------------------------------------------------------------------- */

.tsc-card.is-hidden {
  display: none !important;
}

.tsc-empty {
  display: none;
  padding: 60px 20px;
  text-align: center;
  border: 1px dashed var(--border-default);
  border-radius: 12px;
  background: var(--white);
  grid-column: 1 / -1;
}

.tsc-empty.is-visible {
  display: block;
}

.tsc-empty__title {
  margin: 0 0 8px;
  font-size: 19px;
  font-weight: 700;
  color: var(--ink-800);
}

.tsc-empty__body {
  margin: 0;
  font-size: 15px;
  color: var(--ink-500);
}

/* --------------------------------------------------------------------------
   9. How It Works
   -------------------------------------------------------------------------- */

.tsc-how__head .et_pb_column { width: 100% !important; }

.tsc-how__title { margin: 0 0 8px !important; }
.tsc-how__title h2 { margin: 0 !important; padding: 0 !important; }

.tsc-how__sub {
  margin: 0 !important;
  max-width: 560px;
  margin-inline: auto !important;
}

.tsc-how__sub p { margin: 0 !important; }

/* Three step cards. Same auto-fit pattern as the hero, so the same Divi
   clearfix pseudo-element reset applies. */
.tsc-how__grid.et_pb_row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 22px;
  align-items: stretch;
}

.tsc-how__grid.et_pb_row::before,
.tsc-how__grid.et_pb_row::after {
  display: none !important;
  content: none !important;
}

.tsc-how__grid .et_pb_column {
  width: 100% !important;
  margin: 0 !important;
  float: none !important;
}

.tsc-step {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 30px 26px;
  background: var(--white);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  height: 100%;
  margin: 0 !important;
}

.tsc-step > .et_pb_module { margin: 0 !important; }

.tsc-step__num {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-primary);
  flex: 0 0 auto;
}

.tsc-step__num p {
  margin: 0 !important;
  color: var(--white);
  font-weight: 800;
  font-size: 17px;
  line-height: 1;
}

.tsc-step__title h3,
.tsc-step__title .et_pb_module_header {
  font-size: 19px !important;
  font-weight: 700 !important;
  color: var(--ink-800) !important;
  line-height: 1.3 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.tsc-step__body p {
  margin: 0 !important;
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink-500);
}

/* --------------------------------------------------------------------------
   9b. Closing CTA
   -------------------------------------------------------------------------- */

.tsc-cta__col.et_pb_column {
  width: 100% !important;
  text-align: center;
}

.tsc-cta__title { margin: 0 0 12px !important; }
.tsc-cta__title h2 { margin: 0 !important; padding: 0 !important; }

.tsc-cta__lead {
  margin: 0 auto 28px !important;
  max-width: 560px;
}

.tsc-cta__lead p { margin: 0 !important; }

.tsc-cta__actions {
  display: flex !important;
  flex-direction: row !important;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  margin: 0 !important;
}

.tsc-cta__actions .et_pb_button_module_wrapper { margin: 0 !important; }

/* --------------------------------------------------------------------------
   10. Footer
   -------------------------------------------------------------------------- */

.tsc-footer {
  background: var(--ink-900);
  color: rgba(255, 255, 255, 0.72);
}

/* Four footer columns on the same auto-fit pattern as the hero and steps. */
.tsc-footer__grid.et_pb_row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 34px;
  align-items: start;
}

.tsc-footer__grid.et_pb_row::before,
.tsc-footer__grid.et_pb_row::after {
  display: none !important;
  content: none !important;
}

.tsc-footer__grid .et_pb_column {
  width: 100% !important;
  margin: 0 !important;
  float: none !important;
}

.tsc-footer__brand.et_pb_column {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 320px;
}

.tsc-footer__col.et_pb_column {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.tsc-footer__brand > .et_pb_module,
.tsc-footer__col > .et_pb_module {
  margin: 0 !important;
}

.tsc-footer__logo img {
  height: 66px;
  width: auto;
  align-self: flex-start;
}

.tsc-footer__about p {
  margin: 0 !important;
  font-size: 14.5px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.72);
}

.tsc-footer__phone-wrap p,
.tsc-footer__link p,
.tsc-footer__heading p,
.tsc-footer__social-wrap p {
  margin: 0 !important;
}

.tsc-footer__heading p {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--white);
}

.tsc-footer__link p,
.tsc-footer__link a {
  font-size: 14.5px;
  color: rgba(255, 255, 255, 0.72);
}

.tsc-footer a {
  color: rgba(255, 255, 255, 0.72);
  text-decoration: none;
  transition: color 120ms var(--ease-standard);
}

.tsc-footer a:hover {
  color: var(--white);
}

.tsc-footer__phone {
  font-size: 17px;
  font-weight: 700;
  color: var(--white) !important;
}

.tsc-footer__phone:hover {
  color: var(--red-300) !important;
}

.tsc-footer__heading {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--white);
}

.tsc-social {
  display: flex;
  gap: 10px;
}

.tsc-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: var(--white);
  font-weight: 700;
  font-size: 15px;
  transition: background 160ms var(--ease-standard), border-color 160ms var(--ease-standard);
}

.tsc-social a:hover {
  background: var(--color-primary);
  border-color: var(--color-primary);
}

.tsc-footer__bar.et_pb_row {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-top: 0 !important;
}

.tsc-footer__bar .et_pb_column { width: 100% !important; }

.tsc-footer__bar-wrap { margin: 0 !important; }

.tsc-footer__bar-inner {
  margin: 0 !important;
  padding: 18px 0;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  flex-wrap: wrap;
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.72);
}

/* --------------------------------------------------------------------------
   11. Responsive
   -------------------------------------------------------------------------- */

/* Tablet: two gallery columns, per the brief. */
@media (max-width: 980px) {
  /* Measured height of the compact bar (58px logo + 10px padding top and
     bottom + 1px border). The filter bar sticks to this, so a wrong value
     leaves a gap or an overlap under the header. */
  :root { --tsc-header-h: 79px; }

  .tsc-gallery__grid .et_pb_column {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
  }

  .tsc-header__logo img { height: 58px; }

  /* Compact bar: logo, Get Started, hamburger. Divi's Menu module already
     swaps its nav for .et_mobile_nav_menu below 980px, so no custom toggle
     is needed; it just has to sit tight against the button. */
  .tsc-header__bar.et_pb_column {
    padding: 10px 18px;
    gap: 12px;
  }

  .tsc-header__nav.et_pb_menu {
    flex: 0 0 auto;
    margin-left: auto;
    order: 3;
  }

  .tsc-header__nav .et_pb_menu_inner_container,
  .tsc-header__nav .et_pb_menu__wrap {
    justify-content: flex-end !important;
  }

  .tsc-header__bar > .et_pb_button_module_wrapper { order: 2; }

  .tsc-btn--sm.et_pb_button { padding: 8px 14px !important; font-size: 12.5px !important; }

  /* Divi renders the mobile panel absolutely inside the menu module; widen
     it to the full bar so links are not squeezed into a narrow strip. */
  .tsc-header__nav .et_mobile_menu {
    left: auto;
    right: 0;
    width: min(320px, calc(100vw - 36px));
    border-top: 3px solid var(--color-primary);
    padding: 6px 0;
  }

  .tsc-header__nav .et_mobile_menu li a {
    font-size: 16px;
    font-weight: 600;
    color: var(--ink-700);
    padding: 13px 20px;
    border-bottom: 1px solid var(--line-100);
  }

  .tsc-header__nav .et_mobile_menu li:last-child a { border-bottom: 0; }
}

/* Phone: single column, centred buttons, no edge-to-edge content. */
@media (max-width: 600px) {
  .tsc-gallery__grid .et_pb_column {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }

  .tsc-filterbar__inner { padding: 12px 18px 10px; }

  .tsc-count {
    margin: 0;
    width: 100%;
  }

  /* Pills scroll sideways rather than stacking into a tall block that
     pushes the gallery off screen. */
  .tsc-pills {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    margin: 0 -18px;
    padding: 0 18px 6px;
  }

  .tsc-pills::-webkit-scrollbar { display: none; }

  .tsc-hero__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .tsc-hero__note { align-items: flex-start; }

  .tsc-footer__bar .tsc-footer__bar-inner { justify-content: flex-start; }
}

@media (max-width: 420px) {
  .tsc-hero__stats { grid-template-columns: minmax(0, 1fr); }
}

/* Respect reduced-motion preferences. */
@media (prefers-reduced-motion: reduce) {
  .tsc-card,
  .tsc-pill,
  .tsc-card__cta p {
    transition: none;
  }
  .tsc-card--live:hover { transform: none; }
}