@font-face {
  font-family: 'Showcase Dela Gothic One';
  src: url('/convella-static/showcase/fonts/dela-gothic-one-latin.woff2') format('woff2');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Showcase Epilogue';
  src: url('/convella-static/showcase/fonts/epilogue-latin.woff2') format('woff2');
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
}
@font-face {
  font-family: 'Showcase Inter';
  src: url('/convella-static/showcase/fonts/inter-latin.woff2') format('woff2');
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: 'Showcase Oswald';
  src: url('/convella-static/showcase/fonts/oswald-latin.woff2') format('woff2');
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
}
.hero-showcase {
  --showcase-width: min(860px, 70vw);
  --showcase-origin-height: 100px;
  padding-top: 4px;
  overflow: hidden;
}
.hero-showcase-stage {
  position: relative;
  height: calc(var(--showcase-width) * .8 + var(--showcase-origin-height) + 70px);
  perspective: 1800px;
}
.showcase-example {
  --lift: 32px;
  --scale: .92;
  --tilt: 0deg;
  position: absolute;
  top: 12px;
  left: 50%;
  width: var(--showcase-width);
  transform: translateX(calc(-50% + var(--offset) * 105%)) translateY(var(--lift)) rotateY(var(--tilt)) scale(var(--scale));
  opacity: 0;
  transition: transform 850ms cubic-bezier(.22, 1, .36, 1), opacity 650ms ease, filter 850ms ease;
  pointer-events: none;
  text-align: left;
}
.showcase-example[data-position="-1"] { --tilt: 7deg; opacity: .65; filter: saturate(.8); }
.showcase-example[data-position="1"] { --tilt: -7deg; opacity: .65; filter: saturate(.8); }
.showcase-example[data-position="0"] { --lift: 0px; --scale: 1; z-index: 2; opacity: 1; }
.showcase-origin { display: flex; justify-content: center; align-items: flex-start; gap: 18px; height: var(--showcase-origin-height); }
.showcase-source-card { flex: 0 1 auto; width: max-content; max-width: 100%; min-width: 0; min-height: 66px; padding: 12px 14px; border: 1px solid #e2e3e8; border-radius: 12px; background: #fff; box-shadow: 0 6px 24px -14px rgba(23, 32, 51, .2); color: #172033; }
.showcase-source-content { display: flex; align-items: center; gap: 10px; }
.showcase-source-avatar { flex: none; width: 40px; height: 40px; overflow: hidden; border-radius: 50%; background: #eeedf3; }
.showcase-source-avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }
.showcase-source-avatar--cutout img { width: 180%; height: 180%; max-width: none; margin-left: -40%; object-position: center top; }
.showcase-source-identity { flex: 1; min-width: 0; }
.showcase-source-identity strong { display: flex; align-items: center; gap: 5px; font-size: 14px; line-height: 1.2; }
.showcase-source-youtube { flex: none; width: 18px; height: 13px; }
.showcase-source-meta { display: flex; flex-wrap: wrap; gap: 2px 3px; margin-top: 5px; color: #727987; font-size: 10px; line-height: 1.4; }
.showcase-source-meta > span { white-space: nowrap; }
.showcase-result { display: flex; flex: 0 1 auto; align-items: center; gap: 10px; min-width: 0; min-height: 66px; }
.showcase-result p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.6; }
.showcase-result strong { color: var(--accent); font-weight: 700; white-space: nowrap; }
.showcase-conversion-arrow { flex: none; width: 56px; height: 72px; transform: translateY(30px); color: var(--accent); fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.showcase-site {
  --paper: #fffdf8;
  --ink: #28281e;
  --tone: #eeeadf;
  --brand: #885339;
  --display: Georgia, 'Times New Roman', serif;
  container-type: inline-size;
  position: relative;
  width: 100%;
  height: calc(var(--showcase-width) * .8);
  overflow: hidden;
  border: 1px solid rgba(23, 32, 51, .13);
  border-radius: 9px;
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 18px 45px -18px rgba(23, 32, 51, .23);
}
.showcase-site-preview-link { position: absolute; inset: 0; z-index: 3; border-radius: inherit; }
.showcase-example[data-position="0"] .showcase-site-preview-link { pointer-events: auto; }
.showcase-site-preview-link:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
.showcase-site--outdoors { --paper: #f6f5ed; --ink: #253e30; --tone: #e4e8dc; --brand: #344e3e; }
.showcase-site--coding { --paper: #f7f9fc; --ink: #14213a; --tone: #e8edf6; --brand: #4155b5; --display: ui-sans-serif, system-ui, sans-serif; }
.showcase-site--podcast { --paper: #f9f6f0; --ink: #292421; --tone: #e8e1d6; --brand: #845238; --display: ui-sans-serif, system-ui, sans-serif; }
.showcase-site--workshop { --paper: #f8f5ef; --ink: #302a21; --tone: #e8e0d2; --brand: #735337; }
.showcase-site--coaching { --paper: #fffaf8; --ink: #533e40; --tone: #f2e5df; --brand: #8c565d; }
.showcase-site--church { --paper: #fcfaf5; --ink: #293c48; --tone: #e9ecea; --brand: #345969; }
.showcase-site--excel { --paper: #f8fbf8; --ink: #183b31; --tone: #e5efe7; --brand: #277653; --display: ui-sans-serif, system-ui, sans-serif; }
.showcase-site-header { height: 7.2cqw; display: flex; align-items: center; gap: 2cqw; padding: 0 4.5cqw; border-bottom: 1px solid color-mix(in srgb, var(--ink) 12%, transparent); }
.showcase-site-brand { display: flex; align-items: center; gap: .85cqw; margin-right: auto; font-family: var(--display); font-size: 2.2cqw; font-weight: 700; white-space: nowrap; }
.showcase-site .showcase-channel-avatar { width: 3.6cqw; height: 3.6cqw; flex: none; border-radius: 50%; object-fit: cover; object-position: center 20%; }
.showcase-channel-avatar--cutout { overflow: hidden; background: var(--tone); }
.showcase-site .showcase-channel-avatar--cutout img { width: 180%; height: 180%; max-width: none; margin-left: -40%; object-position: center top; }
.showcase-site-nav { font-size: 1.05cqw; white-space: nowrap; }
.showcase-site-subscribe { padding: .85cqw 1.5cqw; border-radius: .4cqw; background: var(--brand); color: #fff; font-size: 1.05cqw; font-weight: 650; }
.showcase-site-hero { display: grid; grid-template-columns: 1fr 48%; height: 30cqw; background: var(--tone); }
.showcase-site-hero-copy { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: 2.2cqw 3.5cqw 2.2cqw 4.5cqw; }
.showcase-site-title { margin: 1.6cqw 0 1.3cqw; font-family: var(--display); font-size: 5.25cqw; font-weight: 400; line-height: 1.02; letter-spacing: -.045em; }
.showcase-site-description { max-width: 38cqw; margin: 0; font-size: 1.3cqw; line-height: 1.6; opacity: .8; }
.showcase-site-link { margin-top: 2cqw; padding-bottom: .5cqw; border-bottom: 1px solid currentColor; color: var(--brand); font-size: 1.15cqw; font-weight: 650; }
.showcase-site img { display: block; width: 100%; height: 100%; object-fit: cover; }
.showcase-site-hero-visual { position: relative; min-width: 0; overflow: hidden; }
.showcase-site-stories { padding: 2.7cqw 4.5cqw 2.5cqw; }
.showcase-site-section-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.5cqw; }
.showcase-site-section-title strong { font-family: var(--display); font-size: 2.2cqw; font-weight: 500; }
.showcase-site-section-title span { font-size: 1cqw; }
.showcase-site-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2cqw; }
.showcase-site-thumbnail { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: .5cqw; background: var(--tone); }
.showcase-site-thumbnail img { object-fit: cover; }
.showcase-site-story > span { display: block; margin-top: 1.1cqw; font-size: .85cqw; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--brand); }
.showcase-site-story > strong { display: block; margin-top: .65cqw; font-family: var(--display); font-size: 1.7cqw; font-weight: 500; line-height: 1.3; }
.showcase-story-meta { display: block; margin-top: .7cqw; color: #787b82; font-size: 1.05cqw; font-weight: 400; line-height: 1.35; }
.showcase-site-newsletter { display: flex; justify-content: space-between; align-items: center; gap: 2cqw; margin: 0 4.5cqw; padding: 1.9cqw 2.3cqw; background: var(--tone); }
.showcase-site-newsletter strong { display: block; font-family: var(--display); font-size: 1.8cqw; font-weight: 500; }
.showcase-site-newsletter small { display: block; margin-top: .4cqw; font-size: .95cqw; }
.showcase-site-email { display: flex; flex: none; align-items: center; justify-content: space-between; gap: 1cqw; width: 34cqw; min-height: 4.8cqw; padding: .4cqw; border: 1px solid color-mix(in srgb, var(--ink) 25%, transparent); border-radius: 8cqw; background: transparent; }
.showcase-site-email > span { padding-left: 1.2cqw; color: var(--ink); font-size: 1.15cqw; opacity: .7; }
.showcase-site-email > b { padding: 1.1cqw 2cqw; border-radius: 6cqw; background: var(--brand); color: #fff; font-size: 1.1cqw; font-weight: 650; }
.showcase-site--highlight .showcase-site-stories { padding-top: 2.2cqw; padding-bottom: 2cqw; }
.showcase-site-highlight { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4cqw; align-items: start; }
.showcase-highlight-featured > span { margin-top: .9cqw; }
.showcase-highlight-featured > strong { font-size: 2.05cqw; line-height: 1.18; }
.showcase-highlight-list { display: flex; flex-direction: column; gap: 1.3cqw; }
.showcase-highlight-list .showcase-site-story { display: grid; grid-template-columns: 15.5cqw minmax(0, 1fr); grid-template-rows: auto auto 1fr; column-gap: 1.5cqw; align-items: start; }
.showcase-highlight-list .showcase-site-story:not(:last-child) { padding-bottom: 1.3cqw; border-bottom: 1px solid color-mix(in srgb, var(--ink) 12%, transparent); }
.showcase-highlight-list .showcase-site-thumbnail { grid-row: 1 / 4; }
.showcase-highlight-list .showcase-site-story > span { margin-top: .25cqw; font-size: .8cqw; letter-spacing: .05em; }
.showcase-highlight-list .showcase-site-story > strong { margin-top: .65cqw; font-size: 1.55cqw; line-height: 1.25; }
.showcase-highlight-list .showcase-story-meta { grid-column: 2; margin-top: .5cqw; font-size: .85cqw; }
.showcase-site--magazine .showcase-site-hero { height: 26cqw; }
.showcase-site--magazine .showcase-site-hero-copy { padding-top: 2cqw; padding-bottom: 2cqw; }
.showcase-site--magazine .showcase-site-description { font-size: 1.2cqw; line-height: 1.5; }
.showcase-site--magazine .showcase-site-stories { padding-top: 2cqw; padding-bottom: 2cqw; }
.showcase-site--magazine .showcase-site-section-title { margin-bottom: 1.2cqw; }
.showcase-site-magazine { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr); gap: 2.2cqw; align-items: start; }
.showcase-magazine-column { display: flex; flex-direction: column; gap: 1.3cqw; min-width: 0; }
.showcase-magazine-column .showcase-site-story > span { margin-top: .65cqw; font-size: .75cqw; letter-spacing: .04em; }
.showcase-magazine-column .showcase-site-story > strong { margin-top: .4cqw; font-size: 1.25cqw; line-height: 1.2; }
.showcase-magazine-column .showcase-story-meta { margin-top: .45cqw; font-size: .78cqw; }
.showcase-magazine-featured > strong { font-size: 2.35cqw; font-weight: 650; line-height: 1.2; }
.showcase-site--highlight .showcase-site-hero-copy { padding-top: 2cqw; padding-bottom: 2cqw; }
.showcase-site--highlight .showcase-site-description { font-size: 1.2cqw; line-height: 1.5; }
.showcase-site--highlight .showcase-site-title { font-size: 4.75cqw; }
.showcase-hero-signup { display: flex; align-items: center; justify-content: space-between; gap: 1cqw; width: 100%; max-width: 38cqw; min-height: 4.4cqw; margin-top: 1.5cqw; padding: .4cqw; border: 1px solid color-mix(in srgb, var(--ink) 20%, transparent); border-radius: 8cqw; background: transparent; }
.showcase-hero-signup > span { padding-left: 1.2cqw; color: var(--ink); font-size: 1.15cqw; opacity: .65; }
.showcase-hero-signup > b { padding: .95cqw 1.6cqw; border-radius: 6cqw; background: var(--brand); color: #fff; font-size: 1.05cqw; font-weight: 650; }
.showcase-site--podcast .showcase-hero-signup { border-color: rgba(250, 247, 238, .3); background: rgba(255, 255, 255, .04); }
.showcase-site--podcast .showcase-hero-signup > span { color: #faf7ee; }
.showcase-site--podcast .showcase-hero-signup > b { background: #edc898; color: #262520; }
.showcase-site--outdoors .showcase-site-hero { position: relative; display: block; color: #fff; }
.showcase-site--outdoors .showcase-site-hero-visual { position: absolute; inset: 0; }
.showcase-site--outdoors .showcase-site-hero-visual::after { position: absolute; inset: 0; content: ''; background: linear-gradient(90deg, rgba(10, 30, 25, .78), rgba(10, 30, 25, .1)); }
.showcase-site--outdoors .showcase-site-hero-copy { position: relative; z-index: 1; width: 60%; height: 100%; }
.showcase-site--outdoors .showcase-site-link { color: #fff; }
.showcase-site--coding .showcase-site-title, .showcase-site--excel .showcase-site-title, .showcase-site--podcast .showcase-site-title { font-weight: 700; font-size: 4.75cqw; }
.showcase-site--podcast .showcase-site-header { background: #262520; color: #faf7ee; border-bottom: 0; }
.showcase-site--podcast .showcase-site-subscribe { background: #edc898; color: #262520; }
.showcase-site--podcast .showcase-site-hero { background: #262520; color: #faf7ee; }
.showcase-site--podcast .showcase-site-link { color: #edc898; }
.showcase-site--workshop .showcase-site-brand { letter-spacing: .13em; text-transform: uppercase; font-size: 1.65cqw; }
.showcase-site--coaching .showcase-site-hero-visual { margin: 0; }
.showcase-coaching-cta { display: inline-flex; align-items: center; margin-top: 2cqw; padding: 1.3cqw 2cqw; border-radius: .65cqw; background: var(--brand); color: #fff; font-size: 1.2cqw; font-weight: 650; line-height: 1.3; }
.showcase-site--cooking .showcase-site-hero-visual,
.showcase-site--coaching .showcase-site-hero-visual,
.showcase-site--excel .showcase-site-hero-visual { overflow: visible; }
.showcase-site--cooking .showcase-site-hero,
.showcase-site--coaching .showcase-site-hero,
.showcase-site--excel .showcase-site-hero { position: relative; overflow: hidden; }
.showcase-site--cooking .showcase-site-hero-visual::before,
.showcase-site--coaching .showcase-site-hero-visual::before,
.showcase-site--excel .showcase-site-hero-visual::before { position: absolute; inset: 3cqw 3cqw -9cqw 1cqw; content: ''; border-radius: 50% 50% 0 0; background: color-mix(in srgb, var(--brand) 13%, transparent); }
.showcase-site .showcase-creator-cutout { position: absolute; z-index: 1; top: -.5cqw; right: 0; width: 100%; height: 42cqw; object-fit: contain; object-position: center top; }
.showcase-site--outdoors .showcase-site-hero { overflow: hidden; }
.showcase-site--outdoors .showcase-creator-cutout { right: 2cqw; width: 44%; }
.showcase-site--outdoors .showcase-site-hero-copy { z-index: 2; }
.showcase-site--coding .showcase-site-hero-visual > img,
.showcase-site--podcast .showcase-site-hero-visual > img,
.showcase-site--workshop .showcase-site-hero-visual > img,
.showcase-site--church .showcase-site-hero-visual > img { object-position: center 26%; }
/* Remove this modifier from a site to restore its split hero with a portrait. */
.showcase-site--centered-hero .showcase-site-hero { display: block; }
.showcase-site--centered-hero .showcase-site-hero-visual { display: none; }
.showcase-site--centered-hero .showcase-site-hero-copy { height: 100%; align-items: center; padding: 2.5cqw 5cqw; text-align: center; }
.showcase-site--centered-hero .showcase-site-description { max-width: 52cqw; }
.showcase-site--centered-hero .showcase-hero-signup { max-width: 38cqw; text-align: left; }
.showcase-site--excel .showcase-site-header { background: var(--tone); border-bottom: 0; }
.showcase-site--coding .showcase-site-header { background: var(--tone); border-bottom: 0; }
.showcase-site--coding.showcase-site--centered-hero .showcase-site-hero { height: 27cqw; }
.showcase-site--coding.showcase-site--centered-hero .showcase-site-hero-copy { padding: 3cqw 5cqw; }
.showcase-site--coding.showcase-site--centered-hero .showcase-site-title { margin: 0 0 1.6cqw; font-size: 4.1cqw; }
.showcase-site--coding.showcase-site--centered-hero .showcase-hero-signup { margin-top: 2.4cqw; }
.showcase-workshop-masthead { background: linear-gradient(rgba(27, 21, 15, .5), rgba(27, 21, 15, .56)), url('/convella-static/showcase/workshop-background.webp') center 54% / cover; color: #fff9ed; }
.showcase-workshop-masthead .showcase-site-header { background: transparent; border-bottom: 0; }
.showcase-workshop-masthead .showcase-site-subscribe { background: #f4e4c7; color: #302a21; }
.showcase-site--workshop.showcase-site--centered-hero .showcase-site-hero { height: 28cqw; background: transparent; }
.showcase-site--workshop.showcase-site--centered-hero .showcase-site-hero-copy { padding-top: 2cqw; padding-bottom: 2cqw; }
.showcase-site--workshop.showcase-site--centered-hero .showcase-site-title { font-size: 4.8cqw; }
.showcase-site--workshop .showcase-site-description { opacity: .9; }
.showcase-site--workshop .showcase-hero-signup { border-color: rgba(255, 249, 237, .45); background: rgba(255, 249, 237, .06); }
.showcase-site--workshop .showcase-hero-signup > span { color: #fff9ed; opacity: .85; }
.showcase-site--workshop .showcase-hero-signup > b { background: #f4e4c7; color: #302a21; }
:is(.showcase-plans-callout, .showcase-course-callout) { display: flex; align-items: center; gap: 1.6cqw; margin: 0 4.5cqw; padding: 1.5cqw 2cqw; border-radius: .5cqw; background: var(--tone); }
:is(.showcase-plans-copy, .showcase-course-copy) { flex: 1; min-width: 0; }
:is(.showcase-plans-copy, .showcase-course-copy) > strong { display: block; font-family: var(--display); font-size: 1.9cqw; font-weight: 500; }
:is(.showcase-plans-copy, .showcase-course-copy) > p { max-width: 54cqw; margin: .45cqw 0 0; font-size: 1.05cqw; line-height: 1.45; opacity: .75; }
:is(.showcase-plans-link, .showcase-course-link) { flex: none; padding: 1.1cqw 1.6cqw; border-radius: .5cqw; background: var(--brand); color: #fff; font-size: 1.05cqw; font-weight: 650; white-space: nowrap; }
/* The church has a full-width latest sermon above a separate archive grid. */
.showcase-site--church.showcase-site--centered-hero .showcase-site-hero { height: 23cqw; background: linear-gradient(rgba(19, 30, 31, .48), rgba(19, 30, 31, .62)), url('/convella-static/showcase/church-background.webp') center 55% / cover; color: #fffaf0; }
.showcase-site--church.showcase-site--centered-hero .showcase-site-title { margin: 0 0 1.3cqw; font-size: 4.6cqw; }
.showcase-site--church .showcase-site-description { max-width: 55cqw; font-size: 1.2cqw; opacity: .95; }
.showcase-site--church .showcase-hero-signup { border-color: rgba(255, 250, 240, .5); background: rgba(255, 250, 240, .08); }
.showcase-site--church .showcase-hero-signup > span { color: #fffaf0; opacity: .9; }
.showcase-site--church .showcase-hero-signup > b { background: #f3ead8; color: #293c48; }
.showcase-site--church .showcase-site-section-title { margin-bottom: 1.2cqw; line-height: 1.2; }
.showcase-church-latest { padding-top: 1.8cqw; padding-bottom: 1cqw; }
.showcase-sermon-featured { display: grid; grid-template-columns: 30cqw minmax(0, 1fr); align-items: center; gap: 3cqw; }
.showcase-sermon-copy > strong { display: block; max-width: 47cqw; font-family: var(--display); font-size: 2.9cqw; font-weight: 500; line-height: 1.12; }
.showcase-sermon-copy > p { margin: 1cqw 0; max-width: 49cqw; font-size: 1.15cqw; line-height: 1.5; opacity: .8; }
.showcase-sermon-link { color: var(--brand); font-size: 1cqw; font-weight: 650; }
.showcase-church-past { padding-top: 1.2cqw; padding-bottom: 1.5cqw; }
.showcase-church-past .showcase-site-story > strong { margin-top: .8cqw; font-size: 1.5cqw; line-height: 1.25; }
.showcase-church-past .showcase-story-meta { margin-top: .5cqw; font-size: .9cqw; }
/* Remove the no-hero modifier and the hidden attribute to restore the church hero. */
.showcase-site--church.showcase-site--no-hero .showcase-site-hero { display: none; }
.showcase-site--church.showcase-site--no-hero .showcase-church-latest { padding-top: 3cqw; padding-bottom: 2.5cqw; }
.showcase-site--church.showcase-site--no-hero .showcase-sermon-featured { grid-template-columns: 42cqw minmax(0, 1fr); }
.showcase-site--church.showcase-site--no-hero .showcase-church-past { padding-top: 2.5cqw; }
.showcase-church-signup { padding: 2.3cqw; border-radius: .6cqw; }
.showcase-church-signup > div:first-child { flex: 1; min-width: 0; }
.showcase-church-signup small { max-width: 44cqw; font-size: 1cqw; line-height: 1.5; }
.showcase-church-email { display: flex; flex: none; align-items: center; justify-content: space-between; gap: 1cqw; width: 34cqw; padding: .4cqw; border: 1px solid color-mix(in srgb, var(--ink) 25%, transparent); border-radius: 8cqw; }
.showcase-church-email > span { padding-left: 1.2cqw; font-size: 1.1cqw; opacity: .7; }
.showcase-church-email > b { padding: 1.1cqw 1.6cqw; border-radius: 6cqw; background: var(--brand); color: #fff; font-size: 1.05cqw; font-weight: 650; }
.showcase-site--coaching .showcase-site-brand { font-size: 2cqw; }
.showcase-site--coaching .showcase-site-title { font-size: 4.4cqw; }
/* Marques Brownlee: white split hero above the black Popular section. */
.showcase-site--marques { --paper: #000; --ink: #fff; --tone: #fff; --brand: #fc221c; --display: 'Showcase Oswald', sans-serif; font-family: 'Showcase Epilogue', sans-serif; }
.showcase-site--marques .showcase-site-header { height: 5.5cqw; gap: 2cqw; border-bottom: 0; background: #fff; color: #000; }
.showcase-site--marques .showcase-site-brand { font-size: 2.4cqw; font-weight: 500; }
.showcase-marques-signin { font-size: 1cqw; white-space: nowrap; }
.showcase-site--marques .showcase-site-subscribe { font-weight: 600; }
.showcase-site--marques .showcase-site-hero { grid-template-columns: 45% minmax(0, 1fr); height: 30cqw; padding: 1.5cqw 4.5cqw; gap: 3cqw; color: #000; }
.showcase-site--marques .showcase-site-hero-visual img { object-fit: contain; }
.showcase-site--marques .showcase-site-hero-copy { align-items: center; padding: 1cqw 0; text-align: center; }
.showcase-site--marques .showcase-site-title { margin: 0 0 1.6cqw; font-size: 3.5cqw; font-weight: 400; line-height: 1.2; letter-spacing: 0; }
.showcase-site--marques .showcase-site-description { max-width: 46cqw; font-size: 1.2cqw; line-height: 1.6; opacity: 1; }
.showcase-site--marques .showcase-hero-signup { max-width: 40cqw; margin-top: 2.3cqw; border-color: #ddd; background: #fff; }
.showcase-site--marques .showcase-hero-signup > span { color: #000; }
.showcase-site--marques .showcase-hero-signup > b { font-weight: 600; }
.showcase-site--marques .showcase-site-stories { min-height: 44.5cqw; padding: 2.7cqw 4.5cqw; background: #000; }
.showcase-site--marques .showcase-site-section-title { margin-bottom: 1.8cqw; }
.showcase-site--marques .showcase-site-section-title strong { font-size: 3cqw; font-weight: 700; line-height: 1.2; }
.showcase-site--marques .showcase-site-highlight { gap: 3.5cqw; }
.showcase-site--marques .showcase-site-story > span { font-size: 1.05cqw; font-weight: 400; letter-spacing: 0; text-transform: none; }
.showcase-site--marques .showcase-highlight-featured > strong { font-size: 2.65cqw; font-weight: 700; line-height: 1.2; }
.showcase-site--marques .showcase-story-meta { color: #aaa; font-size: .8cqw; }
.showcase-site--marques .showcase-highlight-list { gap: 1.8cqw; }
.showcase-site--marques .showcase-highlight-list .showcase-site-story { grid-template-columns: minmax(0, 1fr) 13cqw; column-gap: 1.8cqw; min-height: 10cqw; }
.showcase-site--marques .showcase-highlight-list .showcase-site-story:not(:last-child) { padding-bottom: 1.8cqw; }
.showcase-site--marques .showcase-highlight-list .showcase-site-thumbnail { grid-column: 2; align-self: center; }
.showcase-site--marques .showcase-highlight-list .showcase-site-story > span,
.showcase-site--marques .showcase-highlight-list .showcase-site-story > strong,
.showcase-site--marques .showcase-highlight-list .showcase-story-meta { grid-column: 1; }
.showcase-site--marques .showcase-highlight-list .showcase-site-story > span { grid-row: 1; margin-top: 0; }
.showcase-site--marques .showcase-highlight-list .showcase-site-story > strong { grid-row: 2; font-size: 1.85cqw; font-weight: 700; line-height: 1.3; }
.showcase-site--marques .showcase-highlight-list .showcase-story-meta { grid-row: 3; }
/* Huberman Popular section: one featured article and three thumbnail rows. */
.showcase-site--huberman { --paper: #fff; --ink: #000; --tone: #000; --brand: #1470af; --display: 'Showcase Inter', sans-serif; font-family: var(--display); }
.showcase-site--huberman .showcase-site-header { height: 5.5cqw; border-bottom: 0; background: #000; color: #fff; }
.showcase-site--huberman .showcase-site-brand { font-size: 2.25cqw; font-weight: 600; }
.showcase-huberman-signin { font-size: 1.05cqw; white-space: nowrap; }
.showcase-site--huberman .showcase-site-hero { grid-template-columns: 43% minmax(0, 1fr); height: 30cqw; padding: 0 4.5cqw; gap: 3cqw; color: #fff; }
.showcase-site--huberman .showcase-site-hero-visual img { object-fit: contain; }
.showcase-site--huberman .showcase-site-hero-copy { align-items: center; padding: 1.5cqw 0; text-align: center; }
.showcase-site--huberman .showcase-site-title { margin: 0 0 1.6cqw; font-size: 3cqw; font-weight: 400; line-height: 1.2; letter-spacing: -.025em; }
.showcase-site--huberman .showcase-site-description { max-width: 46cqw; font-size: 1.2cqw; line-height: 1.55; opacity: 1; }
.showcase-site--huberman .showcase-site-stories { padding: 2.2cqw 4.5cqw; }
.showcase-site--huberman .showcase-site-section-title { margin-bottom: 1.4cqw; line-height: 1.3; }
.showcase-site--huberman .showcase-site-section-title strong { font-size: 2.6cqw; font-weight: 600; }
.showcase-huberman-story-copy > strong { display: block; font-size: 1.65cqw; font-weight: 600; line-height: 1.3; }
.showcase-site--huberman .showcase-story-meta { margin-top: .75cqw; font-size: .8cqw; line-height: 1.4; }
.showcase-huberman-category { display: block; margin-bottom: .55cqw; color: var(--brand); font-size: 1.1cqw; line-height: 1.35; }
.showcase-site--huberman .showcase-highlight-featured .showcase-huberman-story-copy { margin-top: .7cqw; }
.showcase-site--huberman .showcase-highlight-featured strong { font-size: 2.6cqw; font-weight: 700; line-height: 1.2; }
.showcase-huberman-list { display: flex; flex-direction: column; gap: 2cqw; }
.showcase-huberman-list .showcase-site-story { display: grid; grid-template-columns: minmax(0, 1fr) 13cqw; gap: 1.8cqw; align-items: center; min-height: 10.5cqw; }
.showcase-huberman-list .showcase-site-story:not(:last-child) { padding-bottom: 2cqw; border-bottom: 1px solid #dedede; }
.showcase-huberman-list .showcase-site-thumbnail { grid-column: 2; grid-row: 1; }
.showcase-huberman-list .showcase-huberman-story-copy { grid-column: 1; grid-row: 1; }
/* A compact recreation of smokingdad-bbq.com; all dimensions scale with the preview. */
.showcase-site--smoking-dad { --paper: #fff; --ink: #080808; --tone: #f8dfdb; --brand: #ff241b; --display: 'Showcase Dela Gothic One', sans-serif; font-family: 'Showcase Epilogue', sans-serif; }
.showcase-site--smoking-dad .showcase-site-header { height: 6cqw; background: var(--tone); border-bottom: 0; gap: 2.4cqw; }
.showcase-site--smoking-dad .showcase-site-brand { font-size: 2.15cqw; font-weight: 400; }
.showcase-site--smoking-dad .showcase-site-subscribe { font-weight: 600; }
.showcase-site--smoking-dad .showcase-site-hero { grid-template-columns: 36% minmax(0, 1fr); height: 26cqw; padding: 1cqw 4.5cqw 2cqw; gap: 2cqw; }
.showcase-site--smoking-dad .showcase-site-hero-copy { align-items: center; padding: 1cqw 0; text-align: center; }
.showcase-site--smoking-dad .showcase-site-title { margin: 0 0 1.4cqw; font-size: 2.8cqw; font-weight: 400; line-height: 1.25; letter-spacing: -.025em; }
.showcase-site--smoking-dad .showcase-site-description { max-width: 51cqw; font-size: 1.15cqw; line-height: 1.6; opacity: 1; }
.showcase-site--smoking-dad .showcase-smoking-dad-portrait { object-fit: contain; object-position: center bottom; }
.showcase-site--smoking-dad .showcase-hero-signup { max-width: 40cqw; margin-top: 2cqw; border-color: #dedede; background: #fff; }
.showcase-site--smoking-dad .showcase-hero-signup > b { font-weight: 600; }
.showcase-site--smoking-dad .showcase-site-stories { padding: 2.8cqw 4.5cqw; }
.showcase-site--smoking-dad .showcase-site-section-title { margin-bottom: 2.2cqw; }
.showcase-site--smoking-dad .showcase-site-section-title strong { font-size: 2.8cqw; font-weight: 400; line-height: 1.3; }
.showcase-site--smoking-dad .showcase-site-highlight { gap: 3.5cqw; }
.showcase-site--smoking-dad .showcase-site-story > span { font-size: 1.05cqw; font-weight: 400; letter-spacing: 0; text-transform: none; }
.showcase-site--smoking-dad .showcase-highlight-featured > strong { margin-top: .7cqw; font-size: 2.45cqw; font-weight: 400; line-height: 1.25; }
.showcase-site--smoking-dad .showcase-story-meta { font-size: .85cqw; }
.showcase-site--smoking-dad .showcase-highlight-list { gap: 1.6cqw; }
.showcase-site--smoking-dad .showcase-highlight-list .showcase-site-story { grid-template-columns: minmax(0, 1fr) 13cqw; column-gap: 1.8cqw; }
.showcase-site--smoking-dad .showcase-highlight-list .showcase-site-story:not(:last-child) { padding-bottom: 1.6cqw; }
.showcase-site--smoking-dad .showcase-highlight-list .showcase-site-thumbnail { grid-column: 2; align-self: center; }
.showcase-site--smoking-dad .showcase-highlight-list .showcase-site-story > span,
.showcase-site--smoking-dad .showcase-highlight-list .showcase-site-story > strong,
.showcase-site--smoking-dad .showcase-highlight-list .showcase-story-meta { grid-column: 1; }
.showcase-site--smoking-dad .showcase-highlight-list .showcase-site-story > span { grid-row: 1; margin-top: 0; }
.showcase-site--smoking-dad .showcase-highlight-list .showcase-site-story > strong { grid-row: 2; margin-top: .65cqw; font-size: 1.5cqw; font-weight: 400; line-height: 1.35; }
.showcase-site--smoking-dad .showcase-highlight-list .showcase-story-meta { grid-row: 3; }
.hero-showcase-controls { display: flex; justify-content: center; align-items: center; gap: 15px; min-height: 38px; margin-top: -12px; }
.hero-showcase-dots { display: flex; gap: 1px; }
.hero-showcase-dot { display: grid; place-items: center; width: 23px; height: 32px; padding: 0; border: 0; background: transparent; cursor: pointer; }
.hero-showcase-dot::after { content: ''; width: 5px; height: 5px; border-radius: 50%; background: #c9cbd4; transition: background .2s, transform .2s; }
.hero-showcase-dot[aria-current="true"]::after { background: var(--accent); transform: scale(1.4); }
.hero-showcase-controls button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.hero-showcase-controls[hidden] { display: none; }
@media (max-width: 760px) {
  .hero-showcase { --showcase-width: 86vw; --showcase-origin-height: 144px; }
  .hero-showcase-stage { height: calc(var(--showcase-width) * .8 + var(--showcase-origin-height) + 55px); }
  .showcase-example { --lift: 16px; }
  .showcase-example[data-position="0"] { --lift: 0px; }
  .showcase-site { border-radius: 5px; }
  .showcase-origin { flex-direction: column; align-items: center; justify-content: flex-start; gap: 8px; }
  .showcase-source-card { padding: 10px; }
  .showcase-source-content { gap: 7px; }
  .showcase-source-avatar { width: 34px; height: 34px; }
  .showcase-source-identity strong { font-size: 12px; }
  .showcase-source-meta { font-size: 9px; }
  .showcase-result { flex: none; min-height: 40px; max-width: 100%; gap: 7px; }
  .showcase-result p { font-size: 12px; }
  .showcase-conversion-arrow { width: 36px; height: 56px; transform: translateY(14px); }
  .hero-showcase-controls { gap: 10px; flex-wrap: wrap; padding: 0 16px; }
  .hero-showcase-dot { width: 19px; }
}
@media (prefers-reduced-motion: reduce) {
  .showcase-example, .hero-showcase-dot::after { transition: none; }
}