/* Inner (non-home) pages only — loaded conditionally by template-page.php.
   Scoped under .is-inner so homepage styles are untouched. */

/* Hero: same dark stage as the homepage, tightened for content pages. */
.is-inner .inner-hero { padding-top: 88px; padding-bottom: 88px; position: relative; }
.is-inner .hero { background:
  radial-gradient(55% 75% at 85% 6%, rgba(108,92,231,.30), transparent 62%),
  #09081C; }
.is-inner .inner-hero h1 { font-size: clamp(38px,4.2vw,60px); line-height: 1.08; letter-spacing: -.04em; font-weight: 500; max-width: 780px; }
.is-inner .inner-hero p { line-height: 1.85; }
.is-inner .inner-hero .eyebrow { color: #a99af5; }

/* Section rhythm */
.is-inner .inner-section { padding-top: 84px; padding-bottom: 84px; }
.is-inner .inner-section.bg-mist { background: linear-gradient(130deg,#F7F6FC,#ECE8FC); }

/* Cards */
.is-inner main [class*="rounded"] { transition: transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s ease, border-color .35s ease; }
.is-inner main [class*="rounded"]:hover { transform: translateY(-5px); box-shadow: 0 26px 54px -28px rgba(20,18,48,.32); }

/* Solution cards */
.is-inner .solution-card { position: relative; padding-top: 58px; display: flex; flex-direction: column; height: 100%; }
/* Clamp the description to 3 lines so every card stays a consistent height */
.is-inner .solution-card > p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
/* Animated gradient accent bar, inset so it sits inside the rounded corners */
.is-inner .solution-card::before { content: ''; position: absolute; left: 20px; right: 20px; top: 0; height: 3px; border-radius: 3px;
  background: linear-gradient(90deg,#6C5CE0,#8f7bff,#a99af5); transform: scaleX(0); transform-origin: left;
  transition: transform .5s cubic-bezier(.22,1,.36,1); }
.is-inner .solution-card:hover::before { transform: scaleX(1); }
.is-inner .solution-card:hover { border-color: #c9befc; }
.is-inner .solution-icon { position: absolute; top: -22px; left: 28px; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: linear-gradient(135deg,#6C5CE0,#8f7bff); color: white; box-shadow: 0 10px 22px #6c5ce038;
  transition: transform .5s cubic-bezier(.34,1.56,.64,1), box-shadow .5s ease; }
.is-inner .solution-card:hover .solution-icon { transform: translateY(-4px) rotate(-8deg) scale(1.1); box-shadow: 0 16px 32px #6c5ce055; }
.is-inner .solution-card h3 { font-size: 19px; letter-spacing: -.02em; transition: color .3s ease; }
.is-inner .solution-card:hover h3 { color: #5341C4; }
/* margin-top:auto pins the link to the card bottom so it aligns across a row */
.is-inner .solution-link { align-self: flex-start; margin-top: auto; padding-top: 18px; font-size: 13.5px; font-weight: 600; color: #6C5CE0;
  transition: transform .3s ease, color .3s ease; }
.is-inner .solution-card:hover .solution-link { transform: translateX(4px); }
.is-inner .solution-link:hover { color: #5341C4; }
/* Denser three-up grid + subtle depth for the solutions listing */
.is-inner .solutions-grid { align-items: stretch; }
@media (min-width: 1024px) { .is-inner .solutions-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; } }
.page-solutions .solution-card { box-shadow: 0 1px 2px rgba(20,18,48,.04); }

/* Problem → fix panels (Sales/Marketing Cloud) */
.is-inner .problem-panel, .is-inner .fix-panel { border-radius: 24px; padding: 40px; background: white; border: 1px solid #E2DEF2; }
.is-inner .problem-panel { border-top: 3px solid #E2DEF2; }
.is-inner .fix-panel { border-top: 3px solid #6C5CE0; }
.is-inner .inner-li { position: relative; padding-left: 26px; list-style: none; }
.is-inner .inner-li::before { content: ''; position: absolute; left: 0; top: .55em; width: 14px; height: 14px; border-radius: 4px; background: #ECE8FC; box-shadow: inset 0 0 0 2px #a99af5; }
.is-inner .fix-panel .inner-li::before { background: #6C5CE0; box-shadow: none; }

/* Industries / case-study / partner / about / resources card accents */
.is-inner .industry-page-card, .is-inner .case-card, .is-inner .partner-step, .is-inner .about-card, .is-inner .resource-card { border-radius: 24px; }
.is-inner .partner-step { border-top: 3px solid #6C5CE0; }

/* Case-study detail: numbered steps */
.is-inner .case-step { position: relative; border-radius: 24px; }
.is-inner .case-num { position: absolute; top: -30px; left: 28px; font-size: 64px; font-weight: 600; letter-spacing: -.04em; color: #ECE8FC; }

/* Case-study detail: client quote, styled after the homepage testimonial card
   (.testimonial-slider / .testimonial-mark) so both quote treatments match. */
.is-inner .case-quote { margin-top: 32px; padding: 30px 40px 28px; border: 1px solid #E2DEF2; border-radius: 24px; background: radial-gradient(ellipse at 100% 0,#e8e1ff,transparent 70%),#f7f6fc; box-shadow: 0 18px 48px #14123007; }
.is-inner .case-quote-mark { display: block; color: #6C5CE0; font-family: Georgia,serif; font-size: 76px; height: 54px; line-height: 1; }
.is-inner .case-quote p { font-size: clamp(19px,1.8vw,24px); font-weight: 400; line-height: 1.65; letter-spacing: -.025em; color: #141230; }
.is-inner .case-quote footer { margin-top: 24px; padding-top: 18px; border-top: 1px solid #dfd8ef; font-size: 14px; font-weight: 600; color: #5949C4; }

/* Dark CTA band (matches homepage .home-cta) */
.is-inner .inner-cta { background: radial-gradient(ellipse at 100% 0,#6c5ce088,transparent 65%),#141230 !important; position: relative; overflow: hidden; border-radius: 2rem !important; }
.is-inner .inner-cta h2 { color: white; font-size: clamp(32px,4vw,58px); }
.is-inner .inner-cta p { color: #d4cce6; }
.is-inner .inner-cta::after { content: ''; position: absolute; right: -140px; top: -180px; width: 450px; height: 450px; border: 1px solid #ffffff15; border-radius: 50%; box-shadow: 0 0 0 40px #ffffff05, 0 0 0 80px #ffffff04; pointer-events: none; }

/* FAQ two-column tabs (Resources / FAQ) */
.is-inner .faq-radio { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.is-inner .faq-layout { display: grid; grid-template-columns: 320px 1fr; gap: 28px; align-items: start; }
.is-inner .faq-tablist { display: grid; gap: 12px; position: sticky; top: 96px; }
.is-inner .faq-tab { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 22px; border: 1px solid #E2DEF2; border-radius: 16px; background: #fff; font-weight: 600; color: #5A5570; cursor: pointer; transition: color .2s, border-color .2s, background .2s, box-shadow .2s; }
.is-inner .faq-tab::after { content: '\203A'; font-size: 20px; line-height: 1; color: #b5add6; transition: transform .2s, color .2s; }
.is-inner .faq-tab:hover { border-color: #cfc7f0; color: #141230; }
.is-inner .faq-panel { display: none; }
.is-inner .faq-panels { min-height: 220px; }
.is-inner #faqcat-0:checked ~ .faq-layout .faq-tab[for="faqcat-0"],
.is-inner #faqcat-1:checked ~ .faq-layout .faq-tab[for="faqcat-1"],
.is-inner #faqcat-2:checked ~ .faq-layout .faq-tab[for="faqcat-2"],
.is-inner #faqcat-3:checked ~ .faq-layout .faq-tab[for="faqcat-3"] { background: radial-gradient(ellipse at 100% 0,#6c5ce0,#141230); color: #fff; border-color: transparent; box-shadow: 0 18px 40px -22px #6c5ce0; }
.is-inner #faqcat-0:checked ~ .faq-layout .faq-tab[for="faqcat-0"]::after,
.is-inner #faqcat-1:checked ~ .faq-layout .faq-tab[for="faqcat-1"]::after,
.is-inner #faqcat-2:checked ~ .faq-layout .faq-tab[for="faqcat-2"]::after,
.is-inner #faqcat-3:checked ~ .faq-layout .faq-tab[for="faqcat-3"]::after { color: #fff; transform: translateX(3px); }
.is-inner #faqcat-0:checked ~ .faq-layout .faq-panel[data-cat="0"],
.is-inner #faqcat-1:checked ~ .faq-layout .faq-panel[data-cat="1"],
.is-inner #faqcat-2:checked ~ .faq-layout .faq-panel[data-cat="2"],
.is-inner #faqcat-3:checked ~ .faq-layout .faq-panel[data-cat="3"] { display: block; }
.is-inner .faq-item { border: 1px solid #E2DEF2; border-radius: 16px; background: #fff; margin-bottom: 12px; transition: border-color .2s, box-shadow .2s; }
.is-inner .faq-item[open] { border-color: #6C5CE0; box-shadow: 0 12px 40px -24px #6c5ce080; }
.is-inner .faq-item summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 22px; font-size: 16px; font-weight: 600; color: #141230; }
.is-inner .faq-item summary::-webkit-details-marker { display: none; }
.is-inner .faq-item summary::after { content: '+'; flex: none; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 999px; background: #ECE8FC; color: #6C5CE0; font-weight: 500; font-size: 20px; line-height: 1; transition: transform .2s; }
.is-inner .faq-item[open] summary::after { content: '\2013'; }
.is-inner .faq-item .faq-answer { padding: 0 22px 20px; color: #5A5570; line-height: 1.75; font-size: 15px; }
@media (max-width: 860px) {
  .is-inner .faq-layout { grid-template-columns: 1fr; }
  .is-inner .faq-tablist { position: static; grid-template-columns: 1fr 1fr; }
}


@media (max-width: 767px) {
  .is-inner .inner-hero { padding-top: 56px; padding-bottom: 56px; }
  .is-inner .inner-section { padding-top: 56px; padding-bottom: 56px; }
  .is-inner .problem-panel, .is-inner .fix-panel { padding: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .is-inner main [class*="rounded"] { transition: none; }
  .is-inner main [class*="rounded"]:hover { transform: none; }
}

/* Team slider ("Who's behind Setlerz")
   One member fills a large stage, portrait bleeding off the right edge, with
   every member thumbnailed along the bottom. Markup is server-rendered and JS
   only hides the inactive slides, so without JS these stack vertically. */
.is-inner .team-section { background: linear-gradient(130deg,#F7F6FC,#ECE8FC); }
.is-inner .team-intro { margin-top: 16px; max-width: 640px; line-height: 1.85; color: #5A5570; }

.is-inner .team-carousel { margin-top: 40px; }
.is-inner .team-stage { position: relative; border-radius: 28px; overflow: hidden;
  background: radial-gradient(120% 130% at 100% 0%, #E4EEF6 0%, #EDF2F7 46%, #F6F8FB 100%); }

/* One slide. display:grid rather than flex so the two columns split the stage
   by fraction and the portrait keeps its own track at any width. */
.is-inner .team-slide { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 46%);
  align-items: center; min-height: 460px; }
.is-inner .team-slide[hidden] { display: none; }
.is-inner .team-slide-body { padding: 56px 24px 56px 56px; min-width: 0; }
.is-inner .team-stage-name { font-size: clamp(34px, 4.4vw, 54px); font-weight: 600;
  letter-spacing: -.03em; line-height: 1.05; color: #141230; }
.is-inner .team-stage-title { margin-top: 10px; font-size: clamp(15px, 1.5vw, 19px); font-weight: 500; color: #5A5570; }
.is-inner .team-stage-bio { margin-top: 22px; max-width: 54ch; font-size: 14.5px; line-height: 1.95; color: #4A4460; }
.is-inner .team-stage-meta { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 8px 18px;
  align-items: center; font-size: 13px; color: #5A5570; }
.is-inner .team-linkedin { font-weight: 600; color: #6C5CE0; }
.is-inner .team-linkedin:hover { color: #5341C4; }
.is-inner .team-stage-certs { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 8px; }
.is-inner .team-cert { font-size: 12.5px; font-weight: 600; color: #141230; background: #fff;
  border: 1px solid #E2DEF2; padding: 5px 12px; border-radius: 999px; }

/* The portrait is cropped by the stage, so a head-and-shoulders shot reads the
   same way a full-body one does. object-position:top keeps the face in frame
   when the source is taller than the stage. */
.is-inner .team-portrait { align-self: stretch; min-height: 100%; overflow: hidden; }
.is-inner .team-portrait-img { width: 100%; height: 100%; min-height: 460px; display: block;
  object-fit: cover; object-position: center top; }

.is-inner .team-arrow { position: absolute; top: 50%; z-index: 2; width: 46px; height: 46px;
  transform: translateY(-50%); display: grid; place-items: center; font-size: 20px;
  border: 1px solid #D8D0EB; border-radius: 50%; background: rgba(255,255,255,.92); color: #141230;
  transition: background .2s, border-color .2s, color .2s; }
.is-inner .team-arrow-prev { left: 22px; }
.is-inner .team-arrow-next { right: 22px; }
.is-inner .team-arrow:hover { background: #6C5CE0; border-color: #6C5CE0; color: #fff; }
.is-inner .team-arrow[hidden] { display: none; }

/* Thumbnail rail. Scrolls sideways on narrow screens rather than wrapping,
   so the active member is always reachable by thumb. */
.is-inner .team-strip { margin-top: 22px; display: flex; justify-content: center; gap: 8px;
  overflow-x: auto; scrollbar-width: thin; padding: 4px; }
.is-inner .team-thumb-btn { flex: 0 0 auto; width: 132px; padding: 10px 6px 12px; border: 0;
  border-radius: 16px; background: transparent; text-align: center; cursor: pointer;
  transition: background .2s; }
.is-inner .team-thumb-btn:hover { background: rgba(255,255,255,.7); }
.is-inner .team-thumb-btn[aria-pressed="true"] { background: #fff; box-shadow: 0 6px 18px -10px rgba(20,18,48,.3); }
.is-inner .team-thumb-img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; display: block; margin: 0 auto; }
.is-inner .team-thumb-name { display: block; margin-top: 10px; font-size: 13px; font-weight: 600; color: #141230; }
.is-inner .team-thumb-role { display: block; margin-top: 2px; font-size: 11.5px; line-height: 1.4; color: #5A5570; }

@media (max-width: 860px) {
  .is-inner .team-slide { grid-template-columns: 1fr; min-height: 0; }
  .is-inner .team-slide-body { padding: 34px 26px 30px; order: 2; }
  .is-inner .team-portrait { order: 1; max-height: 260px; }
  .is-inner .team-portrait-img { min-height: 0; height: 260px; }
  .is-inner .team-arrow { width: 40px; height: 40px; }
  .is-inner .team-arrow-prev { left: 12px; }
  .is-inner .team-arrow-next { right: 12px; }
  .is-inner .team-strip { justify-content: flex-start; }
}

/* How We Work — engagement models, packages, resource levels */
.is-inner .model-card { position: relative; }
.is-inner .model-num { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 12px;
  background: linear-gradient(135deg,#6C5CE0,#8f7bff); color: #fff; font-weight: 700; font-size: 15px; letter-spacing: -.02em; }

.is-inner .package-card { display: flex; flex-direction: column; }
.is-inner .package-name { font-size: 20px; font-weight: 700; letter-spacing: -.02em; color: #141230; }
.is-inner .package-tagline { margin-top: 4px; font-size: 12.5px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .05em; color: #6C5CE0; }
.is-inner .package-features { list-style: none; margin: 18px 0 0; padding: 18px 0 0; display: grid; gap: 11px;
  border-top: 1px solid #E2DEF2; }
.is-inner .package-feature, .is-inner .package-ref { position: relative; padding-left: 26px; font-size: 13.5px;
  line-height: 1.5; color: #5A5570; }
.is-inner .package-feature::before { content: ''; position: absolute; left: 0; top: 3px; width: 16px; height: 16px;
  border-radius: 5px; background: #ECE8FC url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236C5CE0' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-11'/%3E%3C/svg%3E") center/11px no-repeat; }
.is-inner .package-ref { font-weight: 600; color: #6C5CE0; }
.is-inner .package-ref::before { content: '+'; position: absolute; left: 0; top: -1px; font-size: 17px; font-weight: 700;
  line-height: 1; color: #6C5CE0; }

.is-inner .resource-table { margin-top: 28px; border: 1px solid #E2DEF2; border-radius: 18px; overflow: hidden; background: #fff; }
.is-inner .resource-row { display: grid; grid-template-columns: minmax(190px, 240px) 120px 1fr; align-items: center;
  gap: 24px; padding: 20px 26px; border-bottom: 1px solid #E2DEF2; }
.is-inner .resource-row:last-child { border-bottom: 0; }
.is-inner .resource-thead { padding: 13px 26px; background: #F7F6FC; }
.is-inner .resource-thead span { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: #5A5570; }
.is-inner .resource-role { font-size: 16px; font-weight: 600; letter-spacing: -.01em; color: #141230; }
.is-inner .resource-years { justify-self: start; font-size: 12px; font-weight: 700; letter-spacing: .02em; color: #6C5CE0;
  background: #ECE8FC; padding: 5px 12px; border-radius: 999px; }
.is-inner .resource-coverage { font-size: 14px; line-height: 1.6; color: #5A5570; }
@media (max-width: 720px) {
  .is-inner .resource-thead { display: none; }
  .is-inner .resource-row { grid-template-columns: 1fr; gap: 8px; padding: 20px; }
  .is-inner .resource-years { justify-self: start; }
}

/* Resources listing — richer, animated post cards */
.page-resources .resource-card { position: relative; overflow: hidden; isolation: isolate; padding: 34px; }
.page-resources .resource-card::before { content: ''; position: absolute; left: 22px; right: 22px; top: 0; height: 3px; border-radius: 3px;
  background: linear-gradient(90deg,#6C5CE0,#8f7bff,#a99af5); transform: scaleX(0); transform-origin: left;
  transition: transform .5s cubic-bezier(.22,1,.36,1); }
.page-resources .resource-card:hover::before { transform: scaleX(1); }
.page-resources .resource-card:hover { border-color: #c9befc; }
.page-resources .resource-icon { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 15px;
  background: linear-gradient(135deg,#6C5CE0,#8f7bff); color: #fff; box-shadow: 0 12px 24px -6px rgba(108,92,224,.5);
  margin-bottom: 22px; transition: transform .55s cubic-bezier(.34,1.56,.64,1), box-shadow .55s ease; }
.page-resources .resource-card:hover .resource-icon { transform: translateY(-4px) rotate(-8deg) scale(1.1); box-shadow: 0 18px 32px -8px rgba(108,92,224,.6); }
.page-resources .resource-num { position: absolute; top: 22px; right: 28px; font-size: 46px; font-weight: 800; line-height: 1;
  letter-spacing: -.04em; color: #efeafe; pointer-events: none; transition: color .45s ease, transform .45s ease; }
.page-resources .resource-card:hover .resource-num { color: #ded4fb; transform: scale(1.06); }
.page-resources .resource-card h3 { transition: color .3s ease; }
.page-resources .resource-card:hover h3 { color: #5341C4; }
.page-resources .resource-card a { display: inline-flex; align-items: center; gap: 6px; transition: transform .3s ease, color .3s ease; }
.page-resources .resource-card:hover a { transform: translateX(4px); }

/* Long-form article pages (guides, commentary, spotlights) */
.is-inner .article-layout { display: grid; grid-template-columns: minmax(0, 720px) 244px; gap: 64px; justify-content: center; align-items: stretch; padding-top: 68px; padding-bottom: 84px; }
.is-inner .article-body { max-width: none; }
.is-inner .article-cover { margin: 0 0 2.4em; border-radius: 20px; overflow: hidden; box-shadow: 0 10px 30px -10px rgba(12, 27, 56, 0.12); border: 1px solid #E2DEF2; background: #ffffff; }
.is-inner .article-cover img { display: block; width: 100%; height: auto; object-fit: cover; }
.is-inner .article-toc-inner { position: sticky; top: 104px; }
.is-inner .article-toc-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: #a99af5; margin: 0 0 12px; }
.is-inner .article-toc nav { display: grid; gap: 2px; border-left: 2px solid #E2DEF2; }
.is-inner .article-toc-link { display: block; padding: 8px 0 8px 16px; margin-left: -2px; border-left: 2px solid transparent; font-size: 13.5px; line-height: 1.45; color: #5A5570; text-decoration: none; transition: color .2s ease, border-color .2s ease; }
.is-inner .article-toc-link:hover { color: #6C5CE0; }
.is-inner .article-toc-link.is-active { color: #6C5CE0; font-weight: 600; border-color: #6C5CE0; }
.is-inner .article-body p { font-size: 17px; line-height: 1.7; color: #45415f; margin-bottom: 1.1em; }
.is-inner .article-lead { font-size: 20px !important; line-height: 1.6; color: #1c1935 !important; font-weight: 500; }
.is-inner .article-h2 { position: relative; margin-top: 1.5em !important; margin-bottom: .5em; padding-left: 20px; scroll-margin-top: 110px; }
/* The type scale has to live here rather than on the markup. Blog bodies are
   Markdown now, so the renderer emits a bare <h2> — and Tailwind's preflight
   sets `h2 { font-size: inherit; font-weight: inherit }`, which would render
   every section heading at body size. The CMS copy used to carry its own
   utilities for this (section-heading, or text-2xl on one post); the four
   posts disagreed with each other, so they now share one scale. */
.is-inner .article-body h2 {
  font-size: clamp(24px, 2.6vw, 34px); line-height: 1.2; font-weight: 600;
  letter-spacing: -.025em; color: #141230;
}
.is-inner .article-h2::before { content: ''; position: absolute; left: 0; top: .12em; bottom: .12em; width: 4px; border-radius: 4px; background: linear-gradient(#6C5CE0,#8f7bff); }
.is-inner .article-body a:not(.button) { color: #6C5CE0; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: #cbbffb; transition: text-decoration-color .25s ease, color .25s ease; }
.is-inner .article-body a:not(.button):hover { color: #5341C4; text-decoration-color: #6C5CE0; }
.is-inner .article-body .button { margin-top: 8px; }
.is-inner .article-body strong { color: #141230; font-weight: 700; }
/* Grouped paragraph blocks use the container gap, not per-paragraph margin. */
.is-inner .article-body .grid { gap: 14px; }
.is-inner .article-body .grid > p { margin-bottom: 0; }
.is-inner .article-body ul { margin: 0 0 1.1em; display: grid; gap: 9px; }
.is-inner .article-body ul li { position: relative; padding-left: 26px; font-size: 16px; line-height: 1.6; color: #45415f; list-style: none; }
.is-inner .article-body ul li::before { content: ''; position: absolute; left: 2px; top: .55em; width: 8px; height: 8px; border-radius: 3px; background: #a99af5; box-shadow: 0 0 0 4px #ece8fc; }
.is-inner .article-body > div { max-width: none; }
/* Pull-quote / testimonial inside articles */
.is-inner .article-body blockquote { position: relative; margin: 1.7em 0; padding: 26px 30px 26px 34px; border-radius: 16px;
  border-left: 4px solid #6C5CE0; background: linear-gradient(135deg,#f4f1fe,#ece8fc);
  font-size: 17.5px !important; line-height: 1.6 !important; color: #1c1935; font-weight: 500; }
.is-inner .article-body blockquote::before { content: '\201C'; position: absolute; top: 2px; right: 22px; font: 700 64px/1 Georgia, serif; color: #d3c8fb; pointer-events: none; }
.is-inner .article-body blockquote footer { margin-top: 12px; font-size: 13.5px; font-weight: 700; color: #6C5CE0; }

/* Reading-progress bar (added by site.js on article pages) */
.read-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; transform: scaleX(0); transform-origin: left;
  background: linear-gradient(90deg,#6C5CE0,#8f7bff,#a99af5); z-index: 100; will-change: transform; }
@media (max-width: 1024px) {
  .is-inner .article-layout { grid-template-columns: minmax(0, 1fr); }
  .is-inner .article-toc { display: none; }
}
@media (max-width: 640px) {
  .is-inner .article-body p { font-size: 16px; }
  .is-inner .article-lead { font-size: 18.5px !important; }
}

/* ------------------------------------------------------------------
   Case study and blog listing cards.
   Generated by app/case-studies-index.php and app/blog-listing.php, so
   these cannot rely on the Tailwind utilities the CMS pages use — the
   built stylesheet is a superset of what a rebuild would produce, and a
   rebuild is not something to bet a page on. Hand-written here instead,
   following the same rhythm as .solution-card and .resource-card.
   ------------------------------------------------------------------ */
.is-inner .case-card, .is-inner .blog-card {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  background: #fff; border: 1px solid #E2DEF2; border-radius: 24px;
  transition: transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s ease, border-color .35s ease;
}
.is-inner .case-card:hover, .is-inner .blog-card:hover {
  transform: translateY(-5px); border-color: #c9befc; box-shadow: 0 26px 54px -28px rgba(20,18,48,.32);
}
/* Gradient accent bar, same idea as .solution-card::before. */
.is-inner .case-card::before, .is-inner .blog-card::before {
  content: ''; position: absolute; left: 20px; right: 20px; top: 0; height: 3px; border-radius: 3px; z-index: 2;
  background: linear-gradient(90deg,#6C5CE0,#8f7bff,#a99af5);
  transform: scaleX(0); transform-origin: left; transition: transform .5s cubic-bezier(.22,1,.36,1);
}
.is-inner .case-card:hover::before, .is-inner .blog-card:hover::before { transform: scaleX(1); }

/* Cover image. object-fit rather than the Tailwind object-cover utility,
   which is not present in the built stylesheet. */
.is-inner .case-card-media, .is-inner .blog-card-media { display: block; overflow: hidden; background: #ECE8FC; }
.is-inner .case-card-media img, .is-inner .blog-card-media img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  aspect-ratio: 3 / 2; transition: transform .6s cubic-bezier(.22,1,.36,1);
}
.is-inner .blog-card-media img { aspect-ratio: 16 / 9; }
.is-inner .case-card:hover .case-card-media img,
.is-inner .blog-card:hover .blog-card-media img { transform: scale(1.04); }

.is-inner .case-card-body, .is-inner .blog-card-body { display: flex; flex-direction: column; flex: 1; padding: 30px 30px 32px; }
.is-inner .case-card h3, .is-inner .blog-card h3 {
  margin-top: 12px; font-size: 19px; line-height: 1.35; letter-spacing: -.02em; font-weight: 600; color: #141230;
  transition: color .3s ease;
}
.is-inner .case-card:hover h3, .is-inner .blog-card:hover h3 { color: #5341C4; }
.is-inner .case-card-body > p, .is-inner .blog-card-body > p { margin-top: 10px; font-size: 14.5px; line-height: 1.7; color: #5A5570; }
.is-inner .case-card-body > p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
.is-inner .case-card-link, .is-inner .blog-card-link {
  margin-top: auto; padding-top: 18px; font-size: 13.5px; font-weight: 600; color: #6C5CE0;
  display: inline-flex; align-items: center; gap: 6px; transition: transform .3s ease, color .3s ease;
}
.is-inner .case-card:hover .case-card-link, .is-inner .blog-card:hover .blog-card-link { transform: translateX(4px); }
.is-inner .case-card:hover .case-card-link, .is-inner .blog-card:hover .blog-card-link { color: #5341C4; }

/* Whole card is the link target, so it needs the focus ring the text link had. */
.is-inner .case-card:focus-visible, .is-inner .blog-card:focus-visible {
  outline: 3px solid #6C5CE0; outline-offset: 3px;
}

.is-inner .blog-card-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.is-inner .blog-card-meta .eyebrow { color: #6C5CE0; }
.is-inner .blog-card-date { font-size: 12.5px; color: #5A5570; white-space: nowrap; }

/* Inline gallery on a case study. */
.is-inner .case-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 40px 0; }
.is-inner .case-gallery-item { margin: 0; overflow: hidden; border-radius: 18px; border: 1px solid #E2DEF2; background: #fff; }
.is-inner .case-gallery-item img { display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; }
.is-inner .case-gallery-item figcaption { padding: 12px 16px 14px; font-size: 13px; line-height: 1.6; color: #5A5570; }

/* The optional free-form block on a case study. present_inner() only adds the
   .article-h2 class on the blog slugs, so an h2 here has no styling without
   this — it mirrors .article-h2 minus the TOC scroll offset. */
.is-inner .case-extra { margin-top: 44px; }
.is-inner .case-extra > *:first-child { margin-top: 0; }
.is-inner .case-extra h2, .is-inner .case-extra h3 { color: #141230; letter-spacing: -.02em; font-weight: 600; }
.is-inner .case-extra h2 { font-size: 24px; line-height: 1.3; margin: 1.4em 0 .5em; }
.is-inner .case-extra h3 { font-size: 19px; line-height: 1.35; margin: 1.3em 0 .45em; }
.is-inner .case-extra a:not(.button) { color: #6C5CE0; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* Shown when a listing has no published rows yet. */
.is-inner .empty-note { color: #5A5570; font-size: 15px; background: #fff; border: 1px dashed #E2DEF2; border-radius: 16px; padding: 28px; text-align: center; }

@media (max-width: 640px) {
  .is-inner .case-gallery { grid-template-columns: minmax(0, 1fr); }
  .is-inner .case-card-body, .is-inner .blog-card-body { padding: 24px 22px 26px; }
}

/* Blog Category Tabs on /resources */
.is-inner .blog-tabs-wrapper {
  margin-top: 36px;
  margin-bottom: 32px;
  scroll-margin-top: 110px;
}
.is-inner .blog-tabs-nav {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 6px;
  background: #F7F6FC;
  border: 1px solid #E2DEF2;
  border-radius: 9999px;
  max-width: 100%;
}
.is-inner .blog-tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  border-radius: 9999px;
  border: 1px solid transparent;
  background: transparent;
  font-size: 13.5px;
  font-weight: 600;
  color: #5A5570;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: all .22s cubic-bezier(0.22, 1, 0.36, 1);
  user-select: none;
  -webkit-appearance: none;
}
.is-inner .blog-tab-btn:hover {
  color: #141230;
  background: #ECE8FC;
}
.is-inner .blog-tab-btn.is-active {
  background: linear-gradient(135deg, #6C5CE0 0%, #141230 100%);
  color: #ffffff;
  border-color: transparent;
  box-shadow: 0 8px 20px -4px rgba(108, 92, 224, 0.42);
}
.is-inner .blog-tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 9999px;
  font-size: 11px;
  font-weight: 700;
  background: #ECE8FC;
  color: #6C5CE0;
  transition: background .2s ease, color .2s ease;
}
.is-inner .blog-tab-btn:hover .blog-tab-count {
  background: #ded4fb;
  color: #5341C4;
}
.is-inner .blog-tab-btn.is-active .blog-tab-count {
  background: rgba(255, 255, 255, 0.22);
  color: #ffffff;
}
.is-inner .blog-card.is-filtered-out {
  display: none !important;
}
.is-inner .blog-card.is-animating-in {
  animation: blogCardFadeIn 0.32s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes blogCardFadeIn {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.is-inner .blog-empty-state {
  margin-top: 32px;
}
@media (max-width: 768px) {
  .is-inner .blog-tabs-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 6px;
    scrollbar-width: none;
  }
  .is-inner .blog-tabs-wrapper::-webkit-scrollbar {
    display: none;
  }
  .is-inner .blog-tabs-nav {
    flex-wrap: nowrap;
    border-radius: 20px;
    width: max-content;
  }
  .is-inner .blog-tab-btn {
    padding: 8px 14px;
    font-size: 13px;
  }
}