/* ==========================================================================
   Scrape Insight case study - Zoho Learn
   Source: ZOHO-LEARN-CASE-STUDY (Figma node 42:442)

   Reusable as the base for any customer case study: the section classes carry
   no customer-specific naming, and every colour, rule, size step and spacing
   step lives in the token block below. A new case study should only need new
   content, new assets and new token values.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Sprite icon system
   zwc-sprite.svg is a 128 x 64 strip holding two 64 x 64 slots, each one
   vertically centred (Y is always 50%):
     - slot 0 (x = 0)  speedometer, "10X faster"
     - slot 1 (x = 64) target and arrow, "95% less effort"
   Grid is C = 2 columns x R = 1 row, so by the house formula:
     --zwc-bg-size : C x 100%                = 200%
     --zwc-bg-pos  : col / (C - 1) x 100%    = 0% (col 0), 100% (col 1)
   With a single row the scaled image height equals the box height, so the Y
   value is inert; 50% is used for consistency.
   Only the `-bef` variant is used on this page, so the `-icon` / `-aft`
   plumbing is left out rather than shipped dead.
   -------------------------------------------------------------------------- */
:root {
  --zwc-sprite-img: url(/sites/zweb/images/learn/customers/zwc-sprite.svg);
}

.zwc-wrapper .zwc-sprite-icon-bef::before {
  content: "";
  position: absolute;
  background: var(--zwc-sprite-img) no-repeat var(--zwc-bg-pos, 0 50%);
  background-size: var(--zwc-bg-size, 200%) auto;
}

.zwc-wrapper .zwc-sprite-icon-bef {
  position: relative;
}

.zw-product-header 
{
  background: transparent;
}

/* --------------------------------------------------------------------------
   Design tokens
   -------------------------------------------------------------------------- */
.zwc-wrapper {
  /* Palette */
  --zwc-blue: #0f35bd;
  --zwc-blue-line: #2a5cff;
  --zwc-hairline: #e4e4e4;
  --zwc-red: #e42527;
  --zwc-avatar-bg: #566eff;

  /* Shape */
  --zwc-radius: 10px;
  --zwc-rule-blue: 1px solid var(--zwc-blue-line);

  /* Type scale */
  --zwc-fs-body: clamp(16px, 1.25vw, 24px);
  --zwc-fs-label: clamp(16px, 1.1vw, 18px);

  /* Spacing */
  --zwc-step: clamp(14px, 1.25vw, 24px);
  --zwc-pad-x: clamp(20px, 2.1vw, 40px);
  --zwc-icon-gap: clamp(10px, 0.9vw, 17px);
  /* Sticky offset for the facts panel - must clear the Zoho product header,
     so re-check this value against the live header height */
  --zwc-sticky-top: 100px;

  /* Every text style in the design carries -2% tracking. This MUST be applied
     per element, not inherited from here: `em` in letter-spacing resolves
     against the font-size where it is declared and then inherits as a fixed
     length, which would flatten every size to the same -0.32px. */
  --zwc-tracking: -0.02em;
}

/* Width control only - gutters live on the section roots */
.zwc-section-wrap .content-wrap {
  max-width: 1440px;
  margin-inline: auto;
  /* Two column split.
     NOTE: display/gap on .content-wrap is what Don'ts #5 normally reserves for
     max-width alone. The wrapper <div> that carried the flex was removed by
     request and Don'ts #3 rules out grid/float, so the split lives here. */
  display: flex;
  align-items: flex-start;
  gap: clamp(40px, 3.3vw, 63px);
  justify-content: space-between;
}

/* A set width has to contain its own padding and border in each of these */
.zwc-banner-wrap .zwc-inner-wrap,
.zwc-section-wrap .zwc-inner-wrap,
.zwc-ods-stats li > div {
  box-sizing: border-box;
}

/* Both logo boxes centre a single image */
.zwc-banner-wrap .zwc-inner-wrap,
.zwc-section-wrap .zwc-inner-wrap > div {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Body copy: article paragraphs, list items and sidebar values share the
   design's 24px / 48px rhythm */
.zwc-section-wrap article p,
.zwc-section-wrap article li,
.zwc-ods-info dd {
  font-family: var(--primaryfont-regular);
  font-size: var(--zwc-fs-label);
  line-height: 1.8;
  letter-spacing: var(--zwc-tracking);
  color: #000;
}

/* ==========================================================================
   Banner - breadcrumb, customer logo, headline, pull quote, author
   ========================================================================== */
.zwc-banner-wrap {
  background: linear-gradient(145.94deg, #ddebff 15.75%, #fff3f0 91.54%);
  padding:120px 0px  clamp(70px, 5vw, 80px) ;
  text-align: center;
  margin-top: -70px;
}

.zwc-banner-wrap .content-wrap {
  max-width: 1070px;
  margin-inline: auto;
}
/* Breadcrumb */
.zwc-banner-wrap nav {
  font-family: var(--primaryfont-semibold);
  font-size: clamp(11px, 0.73vw, 14px);
  line-height: 1.4;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #000;
  margin-bottom: clamp(24px, 3vw, 42px);
}

.zwc-banner-wrap nav a {
  color: inherit;
  text-decoration: none;
}

/* The ">" separator is decorative, so it is drawn rather than marked up */
.zwc-banner-wrap nav a::after {
  content: ">";
  display: inline-block;
  margin: 0 clamp(8px, 0.8vw, 14px);
  letter-spacing: 0;
}

/* Customer logo card.
   The design's stroke is a red-to-blue gradient, which border-color cannot
   express, so the card paints two backgrounds: white clipped to the padding
   box, the gradient clipped to the border box. The transparent border gives
   the gradient its 3px band and keeps the radius. */
.zwc-banner-wrap .zwc-inner-wrap {
  width: min(333px, 100%);
  min-height: clamp(96px, 9.2vw, 100px);
  margin-inline: auto;
  border: 3px solid transparent;
  border-radius: var(--zwc-radius);
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(112deg, var(--zwc-red) 0%, var(--zwc-blue) 94%) border-box;
}

.zwc-banner-wrap .zwc-inner-wrap img {
  width: clamp(190px, 14.4vw, 277px);
  height: auto;
}

/* Headline */
.zwc-banner-wrap h1 {
  margin-top: clamp(30px, 3.2vw, 51px);
  font-family: var(--zf-primary-boldserif);
  font-size: clamp(30px, 5.75vw, 52px);
  line-height: 1.11;
  letter-spacing: -0.03em;
  color: #000;
}

/* Pull quote */
.zwc-banner-wrap p {
  margin-top: clamp(16px, 1.8vw, 28px);
  font-family: var(--zf-primary-regularserif);
  font-size: clamp(20px, 3.08vw, 32px);
  line-height: 1.3;
  letter-spacing: var(--zwc-tracking);
  color: var(--zwc-blue);
  width: min(100%, 800px);
  margin-inline: auto;
}

/* Author */
.zwc-banner-wrap figure {
  margin: clamp(24px, 2.6vw, 40px) 0 0;
}

.zwc-banner-wrap figure img {
  width: clamp(56px, 3.8vw, 73px);
  height: auto;
  background: var(--zwc-avatar-bg);
  border-radius: var(--zwc-radius);
}

.zwc-banner-wrap figcaption {
  margin-top: clamp(12px, 1.4vw, 20px);
  font-family: var(--zf-primary-boldserif);
  font-size: var(--zwc-fs-body);
  line-height: 1.4;
  letter-spacing: var(--zwc-tracking);
  color: #000;
}

/* ==========================================================================
   Case study body - article column plus company facts panel
   ========================================================================== */
.zwc-section-wrap {
  padding: clamp(60px, 6.25vw, 120px) 0px;
}

.zwc-section-wrap article {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 836px;
}

/* Section headings */
.zwc-section-wrap h2 {
  font-family: var(--primaryfont-semibold);
  font-size: clamp(26px, 2.5vw, 40px);
  line-height: 1.3;
  letter-spacing: var(--zwc-tracking);
  color: #000;
  margin-bottom: clamp(16px, 1.5vw, 28px);
  width: min(100%, 600px);
}

/* Each chapter (heading plus its prose) is one block; the gap between
   chapters lives here rather than on the h2, which is now the first child of
   every block. */
.zwc-section-wrap article > div + div {
  margin-top: clamp(30px, 4.2vw, 80px);
}

/* Nothing trails the end of a chapter, whatever element it ends on. Keeps the
   inter-chapter gap the div + div margin alone and lets the article end flush
   against the section padding. */
.zwc-section-wrap article > div > :last-child {
  margin-bottom: 0;
}

.zwc-section-wrap article p + p,
.zwc-section-wrap article ul + p,
.zwc-section-wrap article li + li {
  margin-top: var(--zwc-step);
}

.zwc-section-wrap article a {
  color: inherit;
  text-decoration: underline;
  text-underline-position: from-font;
}

.zwc-banner-wrap nav a:hover,
.zwc-banner-wrap nav a:focus-visible,
.zwc-section-wrap article a:hover,
.zwc-section-wrap article a:focus-visible {
  color: var(--zwc-blue);
}

/* Bulleted lists - the hexagon marker is decorative, so it is drawn in CSS */
.zwc-section-wrap article ul {
  list-style: none;
  margin-top: clamp(16px, 1.5vw, 28px);
  padding: 0;
}

.zwc-section-wrap article li {
  position: relative;
  padding-left: clamp(20px, 1.6vw, 30px);
}

.zwc-section-wrap article li::before {
  content: "";
  position: absolute;
  left: 0;
  /* 1em equals half of the 2.0 line box, so the marker centres on line one */
  top: calc(1em - 6px);
  width: 10.4px;
  height: 12px;
  background: var(--zwc-blue);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}

/* Pull quotes */
.zwc-section-wrap blockquote {
  margin: clamp(40px, 4vw, 76px) 0;
  padding-left: clamp(18px, 1.5vw, 29px);
  border-left: 5px solid var(--zwc-blue);
  max-width: 753px;
}

.zwc-section-wrap blockquote p {
  font-family: var(--zf-primary-regularserif);
  font-size: clamp(20px, 1.67vw, 24px);
  line-height: 1.5;
  letter-spacing: var(--zwc-tracking);
}


.zwc-section-wrap article li strong {
  font-family: var(--primaryfont-bold);
  color: var(--zwc-blue);
}

/* --------------------------------------------------------------------------
   Company facts panel
   -------------------------------------------------------------------------- */
/* Sticks alongside the long article. Needs the flex parent's
   align-items: flex-start, otherwise the panel stretches full height and has
   no room to travel. */
.zwc-section-wrap .zwc-inner-wrap {
  position: sticky;
  top: var(--zwc-sticky-top);
  flex: 0 0 clamp(300px, 28.2vw, 542px);
  border: var(--zwc-rule-blue);
  border-radius: var(--zwc-radius);
  overflow: hidden;
}

/* Customer logo block */
.zwc-section-wrap .zwc-inner-wrap > div {
  min-height: clamp(120px, 8.75vw, 168px);
  padding: clamp(20px, 2.2vw, 43px) clamp(24px, 3.7vw, 71px);
}

.zwc-section-wrap .zwc-inner-wrap > div img {
  width: clamp(230px, 20.8vw, 400px);
  height: auto;
}

/* Fact rows - the first row's top rule doubles as the logo block divider */
.zwc-ods-info,
.zwc-ods-info dd,
.zwc-ods-stats {
  margin: 0;
}

.zwc-ods-info dt {
  padding: clamp(14px, 1.2vw, 23px) var(--zwc-pad-x) 0;
  border-top: 1px solid var(--zwc-hairline);
  font-family: var(--primaryfont-bold);
  font-size: var(--zwc-fs-label);
  line-height: 1.4;
  letter-spacing: var(--zwc-tracking);
  text-transform: uppercase;
  color: var(--zwc-blue);
}

.zwc-ods-info dd {
  padding: clamp(4px, 0.4vw, 8px) var(--zwc-pad-x) clamp(18px, 1.6vw, 31px);
}

/* Headline results block */
.zwc-ods-stats {
  list-style: none;
  padding: 0;
  background: var(--zwc-blue);
}

.zwc-ods-stats li {
  display: flex;
  align-items: center;
  min-height: clamp(96px, 6.5vw, 125px);
}

.zwc-ods-stats li + li {
  border-top: var(--zwc-rule-blue);
}

/* Left cell - icon plus figure, split from the description by a rule */
.zwc-ods-stats li > div {
  display: flex;
  align-items: center;
  flex: 0 0 clamp(160px, 14vw, 270px);
  align-self: stretch;
  /* the icon sits on ::before and is out of flow, so its width is reserved
     here instead of being spaced by a flex gap */
  padding-left: calc(
    var(--zwc-step) + var(--zwc-icon-size) + var(--zwc-icon-gap)
  );
  border-right: var(--zwc-rule-blue);
}

.zwc-ods-stats li > div::before {
  width: var(--zwc-icon-size);
  height: var(--zwc-icon-size);
  left: var(--zwc-step);
  top: 50%;
  margin-top: calc(var(--zwc-icon-size) / -2);
}

/* Both rows share every icon rule but their size and sprite slot */
.zwc-ods-stats li:nth-child(1) > div {
  --zwc-icon-size: clamp(40px, 3.33vw, 64px);
  --zwc-bg-pos: 0 50%;
}

.zwc-ods-stats li:nth-child(2) > div {
  --zwc-icon-size: clamp(39px, 3.23vw, 62px);
  --zwc-bg-pos: 100% 50%;
}

.zwc-ods-stats strong {
  font-family: var(--zf-primary-light);
  font-size: clamp(26px, 2.08vw, 40px);
  line-height: 1.2;
  letter-spacing: var(--zwc-tracking);
  text-transform: uppercase;
  color: #fff;
}

.zwc-ods-stats strong span {
  display: block;
  font-family: var(--zf-primary-medium);
  font-size:  clamp(14px, 1.1vw, 18px);
  line-height: 1.4;
  letter-spacing: var(--zwc-tracking);
}

/* Right cell - what the figure refers to */
.zwc-ods-stats p {
  flex: 1 1 auto;
  padding: 0 var(--zwc-step) 0 var(--zwc-pad-x);
  font-size: clamp(14px, 1.04vw, 20px);
  line-height: 1.4;
  letter-spacing: var(--zwc-tracking);
  color: #fff;
  margin: 0;
}

/* ==========================================================================
   Large tablet
   ========================================================================== */
@media screen and (max-width: 1199px) {
  .zwc-wrapper{
     --zwc-sticky-top:50px;
  }
}

/* ==========================================================================
   Tablet - still two columns here; only the banner measure narrows and the
   article drops its 836px cap. The columns stack at 767 (see below).
   ========================================================================== */
@media screen and (max-width: 991px) {

  .zwc-banner-wrap .content-wrap{
    max-width: 760px;
  }

  .zwc-section-wrap article {
    max-width: none;
  }
}

/* ==========================================================================
   Mobile
   ========================================================================== */
@media screen and (max-width: 767px) {
  /* Stacked, so the panel trails the article and has nothing to stick past */
  .zwc-section-wrap .content-wrap,
  .zwc-banner-wrap .content-wrap {
    max-width: 500px;
  }
  .zwc-section-wrap .zwc-inner-wrap {
    position: static;
    margin-top:40px;
  }

  /* The breadcrumb separator needs less room at small sizes */
  .zwc-banner-wrap nav a::after {
    margin: 0 6px;
  }

  /* Stat rows: the figure sits above its description rather than beside it */
  .zwc-ods-stats li {
    display: block;
    padding: 20px;
  }

  .zwc-ods-stats li > div {
    padding-left: calc(var(--zwc-icon-size) + var(--zwc-icon-gap));
    border-right: 0;
  }

  .zwc-ods-stats li > div::before {
    left: 0;
  }

  .zwc-ods-stats p {
    padding: 8px 0 0;
  }
  .zwc-section-wrap .content-wrap{
   display: block;
  }
}