/* [arc/casestudy-reskin] The case-study STORY body in the refreshed /organizer design (founder,
   2026-10-27). The page's tokens, header, footer and type come from organizer-casestudy.html (inlined
   by scripts/port-casestudies.py); this file only restyles oDash's story markup, which is kept
   verbatim (text, images, order). Scoped to .storyMain so it never touches the shared header/footer.
   Replaces oDash's style.css and Bootstrap 4's CSS: the few grid classes the stories use are here. */

.storyMain{position:relative;z-index:10;max-width:1200px;margin:0 auto;padding:28px 40px 96px;color:var(--body);font-size:var(--t-body);line-height:var(--t-body-lh)}
.storyBack{display:inline-flex;align-items:center;gap:8px;font-family:var(--t-mono);font-size:var(--t-micro);letter-spacing:var(--t-track-md);text-transform:uppercase;color:var(--muted);margin-bottom:22px;min-height:32px}
.storyBack:hover{color:var(--text)}

/* the grid the stories use (Bootstrap 4's names, no Bootstrap) */
.storyMain .container-fluid{width:100%}
.storyMain .row{display:flex;flex-wrap:wrap;margin:0 -12px}
.storyMain [class*="col-"]{position:relative;width:100%;padding:0 12px;min-width:0}
@media(min-width:768px){
  .storyMain .col-md-2{flex:0 0 16.6667%;max-width:16.6667%}
  .storyMain .col-md-3{flex:0 0 25%;max-width:25%}
  .storyMain .col-md-4{flex:0 0 33.3333%;max-width:33.3333%}
  .storyMain .col-md-6{flex:0 0 50%;max-width:50%}
  .storyMain .col-md-10{flex:0 0 83.3333%;max-width:83.3333%}
  .storyMain .col-md-12{flex:0 0 100%;max-width:100%}
  .storyMain .offset-md-1{margin-left:8.3333%}
  .storyMain .offset-md-3{margin-left:25%}
}
.storyMain .text-center{text-align:center}.storyMain .text-left{text-align:left}.storyMain .text-right{text-align:right}
.storyMain .img-fluid{max-width:100%;height:auto}
.storyMain br+br+br{display:none}

/* oDash's sticky "Get started" strip stays hidden (oDash showed it on scroll with jQuery) */
.storyMain #static{display:none!important}

/* type */
.storyMain h1,.storyMain h2{font-family:var(--t-serif);font-weight:400;color:var(--text);letter-spacing:var(--t-display-track);text-wrap:balance;margin:0 0 16px}
.storyMain h1{font-size:var(--t-section);line-height:var(--t-section-lh)}
.storyMain h2{font-size:clamp(26px,3.2vw,38px);line-height:1.1}
.storyMain h3{font-family:var(--t-serif);font-weight:400;font-size:var(--t-title);color:var(--text);margin:0 0 18px}
.storyMain h5,.storyMain h6{margin:0}
.storyMain p{margin:0 0 14px}
.storyMain strong{color:var(--text);font-weight:600}
.storyMain ul{margin:0 0 14px;padding-left:20px;display:grid;gap:8px}
.storyMain li::marker{color:var(--acc)}
.storyMain a{color:var(--acc)}
.storyMain .blue,.storyMain .blue strong{color:var(--acc-soft)}
/* oDash's section labels ("THEIR STORY", "THE RESULTS", …): the design's eyebrow */
/* (by position — the paragraph right before a section heading — since stories mark it up either as <p><strong>…</strong></p> or as bare <p>…</p>) */
.storyMain .story p:has(+h1),.storyMain .story p:has(+h2),.storyMain .goal p:has(+h2){font-family:var(--t-mono);font-size:var(--t-micro);font-weight:500;letter-spacing:var(--t-track-xxl);text-transform:uppercase;color:var(--acc);margin-bottom:12px}
.storyMain .story p:has(+h1) strong,.storyMain .story p:has(+h2) strong,.storyMain .goal p:has(+h2) strong{color:inherit;font-weight:inherit}

/* the hero: band, logo, "Success Story", the one-line summary */
.storyMain .case-study-detail{margin:0}
.storyMain .banner{height:150px;border-radius:18px 18px 0 0;border:1px solid var(--line);border-bottom:0;background:radial-gradient(70% 140% at 50% 0%,color-mix(in srgb,var(--acc) 22%,transparent),transparent 70%),var(--surface)}
.storyMain .case-study-detail>.text-center{border:1px solid var(--line);border-top:0;border-radius:0 0 18px 18px;background:var(--surface);padding-bottom:28px}
.storyMain .logo{display:inline-grid;place-items:center;width:132px;height:132px;margin-top:-66px;border-radius:50%;background:#fff;border:4px solid var(--surface);box-shadow:var(--shadow-card);overflow:hidden}
.storyMain .logo img{margin:0!important;max-width:96px;height:auto}
.storyMain .success_s1{font-family:var(--t-mono);font-size:var(--t-micro);font-weight:500;letter-spacing:var(--t-track-xxl);text-transform:uppercase;color:var(--acc);margin:6px 0 0}
.storyMain .success_s2{font-family:var(--t-serif);font-size:clamp(20px,2.2vw,26px);line-height:1.35;color:var(--text);max-width:900px;margin:0 auto;padding:0 16px;text-wrap:balance}

/* the four headline figures */
.storyMain .details{margin-top:22px}
.storyMain .details .row{gap:0;row-gap:12px}
.storyMain .details [class*="col-"]>*{position:relative}
.storyMain .details .col-md-3{display:flex;flex-direction:column;align-items:center;gap:8px;padding:22px 12px;border:1px solid var(--line);border-radius:14px;background:var(--surface);background-clip:padding-box;box-shadow:inset 0 0 0 9999px transparent}
.storyMain .details .col-md-3{margin:0 6px;flex-basis:calc(25% - 12px);max-width:calc(25% - 12px)}
.storyMain .details img{width:34px;height:34px;opacity:.9}
.storyMain .details h6{font-family:var(--t-mono);font-size:var(--t-micro);font-weight:500;letter-spacing:var(--t-track-md);text-transform:uppercase;color:var(--muted)}
.storyMain .details p{font-family:var(--t-serif);font-size:clamp(28px,3vw,42px);line-height:1.05;color:var(--text);margin:0;overflow-wrap:anywhere;text-align:center}

/* the record: company, event, edition, industry, venue */
.storyMain .grey{margin-top:28px}
.storyMain .grey>.row{margin-top:0!important}
.storyMain .record{border:1px solid var(--line);border-radius:14px;background:color-mix(in srgb,var(--bg-deep) 60%,transparent);padding:20px 12px}
.storyMain .company-records p{margin:0 0 4px;color:var(--text);font-size:var(--t-label)}
.storyMain .company-records p:first-child strong{font-family:var(--t-mono);font-size:var(--t-micro);font-weight:500;letter-spacing:var(--t-track-md);text-transform:uppercase;color:var(--dim)}

/* story / goal sections */
.storyMain .story{margin-top:72px;align-items:center}
.storyMain .story .left{padding-right:28px}
.storyMain .story .right img{border-radius:16px;border:1px solid var(--line);box-shadow:var(--shadow-card)}
.storyMain .goal{margin-top:72px}
.storyMain .goal .text-left{text-align:left}

/* the client testimonial */
.storyMain .Testi_monial{font-family:var(--t-mono);font-size:var(--t-micro);letter-spacing:var(--t-track-xxl);text-transform:uppercase;color:var(--acc)}
.storyMain .Testi_monial strong{color:inherit;font-weight:500}
.storyMain .goal h6{font-family:var(--t-serif);font-style:italic;font-weight:400;font-size:clamp(20px,2.2vw,26px);line-height:1.4;color:var(--text);margin:6px 0 14px}
.storyMain .goal h6+span,.storyMain .goal h6~span{font-family:var(--t-mono);font-size:var(--t-micro);letter-spacing:var(--t-track-md);text-transform:uppercase;color:var(--muted)}

/* oDash's "Get Demo" button inside a story */
.storyMain .btn.demo{display:inline-flex;align-items:center;min-height:40px;padding:0 16px;border-radius:9px;background:var(--acc-fill);color:var(--on-acc);font-weight:600}

@media(max-width:767px){
  .storyMain{padding:20px 16px 72px}
  .storyMain .banner{height:110px}
  .storyMain .details .col-md-3{flex-basis:calc(50% - 12px);max-width:calc(50% - 12px)}
  .storyMain .details p{font-size:30px}
  .storyMain .company-records{margin-bottom:10px}
  .storyMain .story,.storyMain .goal{margin-top:48px}
  .storyMain .story .left{padding-right:12px;margin-bottom:22px}
  .storyMain .story .right{order:2}
}