/*
 * TrueWholesale case study — resources/views/frontend/casestudy/truewholesale.blade.php
 *
 * Tailwind utilities in the Blade cover layout; this file holds what they
 * can't express cleanly: the old-workflow chain, the numbered challenge
 * rail, the device stage, the timeline, the FAQ, the currentColor icon
 * masks, and the scroll reveal. Tokens are the site's (primary #00B26B,
 * dark #050806). Text on green uses the deeper #007A4A so it clears WCAG AA
 * (#00B26B on white is 2.8:1; #007A4A is 5.4:1). Small type never drops
 * below 12px or 60% opacity. Loaded only on this page via @section('styles').
 */

/* ------------------------------------------------------------------ */
/* Bento metric tiles: white / light grey, one solid green accent      */
/* ------------------------------------------------------------------ */
.cs-tile { position: relative; overflow: hidden; padding: 26px 24px 24px; border-radius: 24px; background: #fff; border: 1px solid rgba(0, 0, 0, .08); box-shadow: 0 16px 32px -28px rgba(0, 0, 0, .25); }
.cs-tile--grey { background: #F3F4F6; border-color: transparent; }
.cs-tile--accent { background: #007A4A; border-color: transparent; color: #fff; }
.cs-tile__num { font-size: 44px; font-weight: 700; line-height: 1; letter-spacing: -.02em; color: #111; }
.cs-tile__label { margin-top: 10px; font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #333; }
.cs-tile__ctx { margin-top: 8px; font-size: 15px; line-height: 1.45; color: rgba(0, 0, 0, .65); }
.cs-tile--accent .cs-tile__num, .cs-tile--accent .cs-tile__label { color: #fff; }
.cs-tile--accent .cs-tile__ctx { color: rgba(255, 255, 255, .88); }
/* equal-height tiles: the context line is the only variable, so pin its height */
.cs-tile { display: flex; flex-direction: column; min-height: 200px; }
@media (max-width: 639px) {
  .cs-tile { min-height: 0; padding: 16px 14px 14px; border-radius: 16px; }
  .cs-tile__num { font-size: 34px; }
  .cs-tile__label { margin-top: 6px; font-size: 12px; letter-spacing: .06em; }
  .cs-tile__ctx { padding-top: 6px; font-size: 15px; line-height: 1.4; }
  .cs-statbar > div { padding-left: 12px; }
  .cs-statbar dt { font-size: 24px !important; }
}
.cs-tile__ctx { padding-top: 10px; }   /* follows the label; any extra row height sits at the bottom of the card */
@media (min-width: 768px) { .cs-tile__num { font-size: 52px; } }

/* flat stat bar: figures separated by hairlines, wraps 3-up then 2-up */
.cs-statbar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; }
.cs-statbar > div { padding-left: 16px; border-left: 2px solid rgba(0, 178, 107, .5); }
@media (min-width: 640px) { .cs-statbar { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .cs-statbar { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

/* ------------------------------------------------------------------ */
/* Old workflow: the agent → paper → re-entry chain (light)             */
/* ------------------------------------------------------------------ */
.cs-chain { display: grid; gap: 8px; }
.cs-chain__step {
  position: relative; display: flex; align-items: center; gap: 12px;
  padding: 11px 14px; border-radius: 16px;
  background: #fff; border: 1px solid rgba(0, 0, 0, .1);
}
.cs-chain__num {
  display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 8px;
  background: #F3F4F6; font-size: 13px; font-weight: 600; color: rgba(0, 0, 0, .7);
}
.cs-chain__step b { display: block; font-weight: 600; font-size: 15px; color: #111; }
.cs-chain__step small { display: block; margin-top: 2px; font-size: 15px; line-height: 1.4; color: rgba(0, 0, 0, .65); }
.cs-chain__step--pain { border-color: rgba(222, 75, 71, .55); background: #FFEDEB; box-shadow: inset 4px 0 0 #DE4B47; }
.cs-chain__step--pain .cs-chain__num { background: #DE4B47; color: #fff; }
.cs-chain__key { display: inline-block; width: 12px; height: 12px; margin-right: 8px; border-radius: 4px; background: #FFEDEB; border: 1px solid rgba(222, 75, 71, .55); box-shadow: inset 2px 0 0 #DE4B47; vertical-align: -1px; }
@media (min-width: 1024px) {
  .cs-chain { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0; }
  .cs-chain__step { flex-direction: column; align-items: flex-start; gap: 12px; padding: 18px 16px 20px; border-radius: 0; border-right: 0; }
  .cs-chain__step--pain { box-shadow: inset 0 4px 0 #DE4B47; }
  .cs-chain__step:first-child { border-radius: 16px 0 0 16px; }
  .cs-chain__step:last-child { border-radius: 0 16px 16px 0; border-right: 1px solid rgba(0, 0, 0, .1); }
  .cs-chain__step::after {
    content: ""; position: absolute; right: -7px; top: 50%; z-index: 1; width: 12px; height: 12px;
    border-top: 1px solid rgba(0, 0, 0, .25); border-right: 1px solid rgba(0, 0, 0, .25);
    transform: translateY(-50%) rotate(45deg); background: inherit;
  }
  .cs-chain__step:last-child::after { display: none; }
}

/* ------------------------------------------------------------------ */
/* Challenge rail: large numeral, sticky heading                        */
/* ------------------------------------------------------------------ */
.cs-challenge { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 14px; padding: 22px 0; border-top: 1px solid rgba(0, 0, 0, .1); }
.cs-challenge:last-child { border-bottom: 1px solid rgba(0, 0, 0, .1); }
.cs-challenge__num { font-size: 36px; font-weight: 600; line-height: 1; color: #007A4A; letter-spacing: -.02em; }
@media (min-width: 768px) {
  .cs-challenge { grid-template-columns: 110px minmax(0, 1fr); gap: 32px; padding: 40px 0; }
  .cs-challenge__num { font-size: 64px; }
}

/* ------------------------------------------------------------------ */
/* Device stage: storefront + phones                                    */
/* ------------------------------------------------------------------ */
.cs-stage { position: relative; }
.cs-browser {
  border-radius: 16px; overflow: hidden; background: #fff;
  border: 1px solid rgba(0, 0, 0, .12);
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .45);
}
.cs-browser__bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: #F3F4F4; border-bottom: 1px solid rgba(0, 0, 0, .08); }
.cs-browser__bar i { width: 10px; height: 10px; border-radius: 50%; background: #FF5F57; }   /* macOS traffic lights */
.cs-browser__bar i:nth-child(2) { background: #FEBC2E; }
.cs-browser__bar i:nth-child(3) { background: #28C840; }
.cs-browser__bar span { margin: 0 auto; padding: 3px 14px; border-radius: 8px; background: #fff; border: 1px solid rgba(0, 0, 0, .08); font-size: 12px; color: #595959; }
.cs-browser img { display: block; width: 100%; height: auto; }
/* hero: the browser takes the phone's full height (grid items-stretch) and the storefront crops from the top */
.cs-browser--fill { display: flex; flex-direction: column; }
.cs-browser--fill img { flex: 1 1 auto; min-height: 0; height: 100%; object-fit: cover; object-position: center top; }   /* the capture matches the mock's aspect, so this is a no-op crop */
/* device frame for real app screenshots */
.cs-phone { border-radius: 24px; padding: 8px; background: #0B100D; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .6), inset 0 0 0 1px rgba(255, 255, 255, .14); }
.cs-phone img { display: block; width: 100%; height: auto; border-radius: 17px; }
/* hero: the device keeps its real proportions (never stretched) and sits on the browser's baseline;
   when the device is the taller of the pair the browser fills and crops (see .cs-browser--fill),
   when the browser is taller the device is simply shorter, bottom-aligned */
.cs-phone--hero { align-self: end; padding: 7px; border-radius: 24px; }
.cs-phone--hero img { border-radius: 18px; }

/* official listing frame (already contains the device art): rounded card, no extra bezel */
.cs-frame { border-radius: 16px; overflow: hidden; border: 1px solid rgba(0, 0, 0, .1); background: #F3F5F8; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .6); }
.cs-frame img { display: block; width: 100%; height: auto; }

/* ------------------------------------------------------------------ */
/* Icons that follow currentColor (masks; relative URLs, see            */
/* no-inline-svg rule)                                                  */
/* ------------------------------------------------------------------ */
.cs-ext::after {
  content: ""; display: inline-block; width: 1em; height: 1em; flex: none;
  background-color: currentColor;
  -webkit-mask: url("../img/ecommerce/icons/arrow-up-right.svg") center / 1.6em no-repeat;
          mask: url("../img/ecommerce/icons/arrow-up-right.svg") center / 1.6em no-repeat;
}

/* official listing frames: 6-up on desktop, a snap scroller on phones */
.cs-app-strip { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; margin: 40px 0 0; padding: 0; list-style: none; }
.cs-app-strip li { border-radius: 16px; overflow: hidden; border: 1px solid rgba(0, 0, 0, .08); background: #F3F5F8; box-shadow: 0 20px 40px -30px rgba(0, 0, 0, .45); }
.cs-app-strip img { display: block; width: 100%; height: auto; }
@media (max-width: 1023px) { .cs-app-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 639px) {
  .cs-app-strip { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 16px; margin: 16px -16px 0; padding: 20px 16px 16px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .cs-app-strip::-webkit-scrollbar { display: none; }
  .cs-app-strip li { flex: 0 0 46%; scroll-snap-align: start; }
}

/* in-production cards: identical shells; the visual is pushed to the bottom and bleeds off the card edge
   so both start on the same line regardless of how tall each header is */
.cs-prod { position: relative; display: flex; flex-direction: column; overflow: hidden; border-radius: 24px; border: 1px solid rgba(0, 0, 0, .1); background: #F6F7F9; padding: 22px; text-decoration: none; color: inherit; }
/* a card whose visual bleeds off its bottom edge has no bottom padding, so the crop reads as intended */
.cs-prod--bleed { padding-bottom: 0; }
@media (min-width: 768px) { .cs-prod { padding: 26px 28px 0; } }
.cs-prod__head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 16px; }
/* the visual is a fixed-height window cropped at the card's bottom edge, so the card stays compact */
.cs-prod__visual { margin-top: 22px; height: 220px; overflow: hidden; }
.cs-prod__visual.cs-browser { border-radius: 16px 16px 0 0; box-shadow: none; border-bottom: 0; }
.cs-prod .cs-phone { margin-top: 26px; height: 220px; padding-bottom: 0; border-radius: 24px 24px 0 0; }
.cs-prod .cs-phone img { border-radius: 17px 17px 0 0; }
@media (min-width: 768px) { .cs-prod__visual, .cs-prod .cs-phone { height: 250px; } }

/* white glyph on a white button: black, back to white when the button inverts on hover */
.cs-ico-dark { filter: brightness(0); transition: filter .2s; }
a:hover > .cs-ico-dark { filter: none; }

/* store badges in the standard shape: black pill, official glyph, two-line label */
.cs-badge { display: inline-flex; align-items: center; gap: 10px; height: 48px; padding: 0 16px 0 12px; border-radius: 8px; background: #000; color: #fff; border: 1px solid #A6A6A6; text-decoration: none; transition: transform .2s, border-color .2s; }
.cs-badge:hover { transform: translateY(-1px); border-color: #fff; }
.cs-badge:focus-visible { outline: 2px solid #00B26B; outline-offset: 3px; }
.cs-badge img { width: 24px; height: 26px; flex: none; }
@media (max-width: 639px) { .cs-badge { height: 44px; padding: 0 12px 0 10px; gap: 8px; flex: 1 1 0; min-width: 0; justify-content: center; } .cs-badge img { width: 20px; height: 22px; } .cs-badge b { font-size: 14px; } .cs-badge small { font-size: 11px; letter-spacing: 0; white-space: nowrap; } }
.cs-badge span { display: flex; flex-direction: column; line-height: 1.05; }
.cs-badge small { font-size: 12px; letter-spacing: .02em; text-transform: uppercase; color: rgba(255, 255, 255, .85); }
.cs-badge b { font-size: 16px; font-weight: 600; letter-spacing: -.01em; }

/* testimonial pull-quote: light weight, generous leading, a large green opening mark hung in the margin */
.cs-quote { position: relative; padding-top: 44px; }
.cs-quote::before { content: ""; position: absolute; left: 0; top: 0; width: 34px; height: 27px; background: url("../img/case-study/truewholesale/quote-mark.svg") center / contain no-repeat; opacity: .9; }

/* stroke icons drawn green for light tiles; flipped to white on the dark ecosystem cards */
.cs-ico-light { filter: brightness(0) invert(1) drop-shadow(0 0 6px rgba(0, 178, 107, .6)); }

/* ------------------------------------------------------------------ */
/* Type roles: eyebrow (section kicker), label (table/meta), note        */
/* (footnote). Sized and coloured to clear AA; eyebrows are <span>s      */
/* inside their heading, never their own <p>.                           */
/* ------------------------------------------------------------------ */
.cs-eyebrow { display: block; font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #007A4A; }
.cs-eyebrow--light { color: #4ED39C; }   /* on the dark hero/CTA bands: 8.9:1 on #050806 */
.cs-label { display: block; font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: rgba(0, 0, 0, .65); }
.cs-label--accent { color: #007A4A; }
.cs-label--light { color: rgba(255, 255, 255, .7); }
.cs-label--inline { display: inline; }   /* the Problem:/Value: prefixes on stacked (mobile) table rows */
@media (min-width: 768px) { .cs-label--inline { display: none; } }
.cs-note, .cs-small { font-size: 15px; line-height: 1.5; color: rgba(0, 0, 0, .65); }
.cs-small--dark { color: rgba(0, 0, 0, .85); }
.cs-small--light { color: rgba(255, 255, 255, .75); }
/* one body size and one grey for every paragraph (CTO B2) */
.cs-body { font-size: 17px; line-height: 1.6; color: rgba(0, 0, 0, .85); }
.cs-body--light { color: rgba(255, 255, 255, .85); }
/* two heading sizes: sections, and the two CTA cards (CTO B1) */
.cs-h2 { font-size: 26px; font-weight: 600; line-height: 1.15; letter-spacing: -.01em; }
.cs-h2--cta { font-size: 28px; }
@media (min-width: 768px) { .cs-h2 { font-size: 40px; } .cs-h2--cta { font-size: 44px; } }
.text-primary-deep { color: #007A4A; }
.bg-primary-deep { background-color: #007A4A; }
.hover\:text-primary-deep:hover, .group:hover .group-hover\:text-primary-deep { color: #007A4A; }
/* primary CTAs are the header's "Book A Meeting" button verbatim (animated ring, bg-primary fill) */
/* anchored sections land below the fixed header */
.cs-tws section[id], .cs-tws [id].cs-anchor, .cs-tws h2[id] { scroll-margin-top: 88px; }


/* ------------------------------------------------------------------ */
/* Buttons: both styles 54px tall with a 16px label (CTO B4).          */
/* The primary's 2px ring is part of its 54px.                         */
/* ------------------------------------------------------------------ */
.cs-btn { min-height: 54px; }
@media (max-width: 639px) { .cs-btn { width: 100%; } }

/* text link with the arrow glyph: used where a link should not compete with the CTAs (CTO C1) */
.cs-textlink { display: inline-flex; align-items: center; gap: 6px; min-height: 24px; font-size: 15px; font-weight: 600; color: #007A4A; text-decoration: none; }
.cs-textlink:hover { text-decoration: underline; }
a.cs-textlink:focus-visible { outline: 2px solid #007A4A; outline-offset: 3px; border-radius: 4px; }

/* whole-card links: an arrow in the corner and a hover lift, no repeated label (CTO C7, E) */
.cs-card { text-decoration: none; transition: transform .25s, border-color .25s, box-shadow .25s; }
.cs-card:hover { transform: translateY(-2px); border-color: rgba(0, 178, 107, .6); box-shadow: 0 16px 32px -24px rgba(0, 0, 0, .3); }
.cs-card:focus-visible { outline: 2px solid #007A4A; outline-offset: 3px; }
.cs-card__arrow { position: absolute; right: 16px; top: 16px; width: 18px; height: 18px; background-color: rgba(0, 0, 0, .35); transition: background-color .25s, transform .25s;
  -webkit-mask: url("../img/ecommerce/icons/arrow-up-right.svg") center / 1.6em no-repeat; mask: url("../img/ecommerce/icons/arrow-up-right.svg") center / 1.6em no-repeat; }
.cs-card:hover .cs-card__arrow { background-color: #007A4A; transform: translate(2px, -2px); }
@media (min-width: 768px) { .cs-card__arrow { right: 20px; top: 20px; } }

/* ------------------------------------------------------------------ */
/* Timeline strip (rendered only once dates are confirmed)             */
/* ------------------------------------------------------------------ */
.cs-timeline { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; counter-reset: tl; }
.cs-timeline li { position: relative; display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 4px 14px; padding: 14px 16px; border-radius: 16px; background: #fff; border: 1px solid rgba(0, 0, 0, .1); }
.cs-timeline__when { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #007A4A; grid-row: span 2; align-self: start; padding-top: 3px; }
.cs-timeline__what { font-size: 16px; font-weight: 600; color: #111; }
.cs-timeline__detail { font-size: 14px; line-height: 1.5; color: rgba(0, 0, 0, .7); }
@media (min-width: 1024px) {
  .cs-timeline { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 0; border-top: 2px solid rgba(0, 178, 107, .35); }
  .cs-timeline li { grid-template-columns: 1fr; gap: 6px; padding: 22px 18px 0 0; border: 0; border-radius: 0; background: transparent; }
  .cs-timeline li::before { content: ""; position: absolute; left: 0; top: -7px; width: 12px; height: 12px; border-radius: 50%; background: #00B26B; box-shadow: 0 0 0 4px #fff; }
  .cs-timeline__when { grid-row: auto; padding-top: 0; }
}

/* outcome bullets: green check disc */
.cs-check { flex: none; width: 20px; height: 20px; margin-top: 2px; border-radius: 50%; background: #007A4A url("../img/ecommerce/icons/check-circle.svg") center / 100% no-repeat; }

/* ------------------------------------------------------------------ */
/* FAQ: native <details>, no marker, rotating plus                     */
/* ------------------------------------------------------------------ */
.cs-faq summary::-webkit-details-marker { display: none; }
.cs-faq summary:focus-visible { outline: 2px solid #007A4A; outline-offset: 4px; border-radius: 6px; }
.cs-faq__icon { position: relative; flex: none; width: 28px; height: 28px; margin-top: 1px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, .15); transition: transform .25s, background-color .25s, border-color .25s; }
.cs-faq__icon::before, .cs-faq__icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; background: #111; transform: translate(-50%, -50%); transition: background-color .25s; }
.cs-faq__icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.cs-faq[open] .cs-faq__icon { transform: rotate(45deg); background: #007A4A; border-color: #007A4A; }
.cs-faq[open] .cs-faq__icon::before, .cs-faq[open] .cs-faq__icon::after { background: #fff; }
.cs-faq summary span:first-child { transition: color .2s; }
.cs-faq summary:hover span:first-child { color: #007A4A; }

/* ------------------------------------------------------------------ */
/* Scroll reveal (case-truewholesale.js adds .is-inview)                */
/* ------------------------------------------------------------------ */
@media (prefers-reduced-motion: no-preference) {
  .cs-reveal { opacity: 0; transform: translateY(16px); transition: opacity .55s cubic-bezier(0, 0, .58, 1), transform .65s cubic-bezier(0, 0, .58, 1); transition-delay: calc(var(--i, 0) * 80ms); }
  .cs-reveal.is-inview { opacity: 1; transform: none; }
}