/* ══════════════════════════════════════════════════════════════
   LazyFox customer story pages. Shared by everything in /customer-stories/.
   Type and palette follow the blog (blog/*.html), not the platform
   pages: a customer story reads as an article, sits next to one in the
   nav, and shares the article-toc side nav, so the two have to look
   like the same family. Platform pages keep their own darker border
   and heavier display weights.
   ══════════════════════════════════════════════════════════════ */
:root{
  --black:#141412;--off-white:#FAF8F4;--stone:#F0EDE6;--stone-dark:#E4E1D9;
  --teal:#1D9E75;--teal-dark:#085041;--teal-mid:#0F6E56;--teal-light:#E1F5EE;
  --amber:#C97B1A;--amber-light:#FEF0DC;--gray:#7A7770;--border:#E2DED6;
  --ink:#141412;--paper:#FAF8F4;--muted:#7A7770;
  --font-display:'Playfair Display',serif;--font-body:'Inter',sans-serif;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{background:var(--off-white);color:var(--ink);font-family:var(--font-body);font-size:16px;line-height:1.7;overflow-x:hidden;-webkit-font-smoothing:antialiased;}
a{color:inherit;text-decoration:none;}

.draft-banner{background:var(--amber-light);border-bottom:1px solid var(--amber);padding:14px 5%;text-align:center;font-size:0.88rem;color:#5C3B0C;position:relative;z-index:50;margin-top:64px;}
.draft-banner strong{color:var(--amber);}

/* ── HERO ──
   Display type is Playfair 400 across the article surfaces. 600 is the
   platform-page weight and reads noticeably heavier next to a blog post. */
.hero{padding:96px 5% 56px;max-width:1400px;margin:0 auto;text-align:left;}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:600;letter-spacing:0.12em;text-transform:uppercase;color:var(--teal);margin-bottom:32px;}
.eyebrow::before{content:'';display:block;width:24px;height:2px;background:var(--teal);}
.hero h1{font-family:var(--font-display);font-weight:400;font-size:clamp(36px,4.4vw,58px);line-height:1.08;letter-spacing:-0.03em;color:var(--ink);max-width:860px;margin-bottom:26px;}
.hero h1 em{font-style:normal;color:var(--teal);}
.hero-sub{font-size:20px;font-weight:300;line-height:1.55;color:var(--muted);max-width:640px;margin-bottom:36px;}
.stat-chip-row{display:flex;flex-wrap:wrap;gap:14px;}
.stat-chip{background:#fff;border:1px solid var(--border);border-left:3px solid var(--teal);padding:12px 18px;font-size:0.88rem;color:#4A4940;}
.stat-chip b{display:block;font-family:var(--font-display);font-size:1.5rem;font-weight:400;letter-spacing:-0.02em;color:var(--teal-dark);margin-bottom:2px;}

/* ── PHOTO HERO ──
   Same treatment as the blog posts' .blog-hero-bg: a full-bleed duotone JPG
   with light type over it. Hero art lives in assets/hero/<page-slug>.jpg and
   is pre-darkened to the house profile, so there is no overlay here. */
.story-hero-bg{background-size:cover;background-position:center;width:100%;}
.story-hero-bg .hero{padding-top:160px;}
.draft-banner + .story-hero-bg .hero{padding-top:96px;}
.story-hero-bg .eyebrow{color:#E1F5EE;text-shadow:0 1px 8px rgba(0,0,0,0.5);}
.story-hero-bg .eyebrow::before{background:#2FBF93;}
.story-hero-bg .hero h1{color:#FAF8F4;text-shadow:0 2px 20px rgba(0,0,0,0.55);}
.story-hero-bg .hero h1 em{color:#63D6AC;}
.story-hero-bg .hero-sub{color:#D7E6E0;text-shadow:0 1px 10px rgba(0,0,0,0.5);}
.story-hero-bg .hero-sub a{color:#63D6AC;}
.story-hero-bg .stat-chip{background:rgba(255,255,255,0.07);border-color:rgba(255,255,255,0.18);border-left-color:#2FBF93;color:#D7E6E0;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);}
.story-hero-bg .stat-chip b{color:#63D6AC;}
@media (max-width:760px){.story-hero-bg .hero{padding-top:120px;}}

/* ── LOGO LOCKUP ──
   Both marks at equal height, separated by a rule, sitting directly above the
   headline: the customer-story convention (Glean, Ramp and Notion all use it).
   Both marks are fill="currentColor", so the colour is set here rather than in
   the files: white over the photo hero, and a light-background story only needs
   this one colour changed. */
.logo-lockup{display:flex;align-items:center;gap:22px;margin-bottom:30px;}
.logo-lockup svg{display:block;height:26px;width:auto;color:#FAF8F4;filter:drop-shadow(0 2px 12px rgba(0,0,0,0.45));}
.logo-lockup .ll-rule{width:1px;height:30px;background:rgba(255,255,255,0.32);flex-shrink:0;}
@media (max-width:560px){.logo-lockup{gap:16px;}.logo-lockup svg{height:21px;}.logo-lockup .ll-rule{height:25px;}}

/* ── AT A GLANCE ── */
.glance{background:#fff;border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:36px 5%;}
.glance-inner{max-width:1400px;margin:0 auto;display:grid;grid-template-columns:repeat(5,1fr);gap:24px;}
.glance-item{border-left:2px solid var(--border);padding-left:14px;}
.glance-label{font-size:0.7rem;font-weight:600;letter-spacing:0.09em;text-transform:uppercase;color:var(--gray);margin-bottom:6px;}
.glance-value{font-size:0.95rem;color:var(--ink);font-weight:500;line-height:1.4;}
@media (max-width:900px){.glance-inner{grid-template-columns:repeat(2,1fr);}}

/* ── BODY SECTIONS ──
   Mirrors the blog's .part-badge / .part-title / .part-subtitle block so a
   customer story and an article read as the same template.
   .article-section is the hook assets/article-toc.js uses to decide when the
   fixed side nav may appear. Put it on narrow prose blocks only, never on a
   full-bleed band, or the sidebar will overlap edge-to-edge content. */
.section{max-width:740px;margin:0 auto;padding:80px 5%;}
.section-alt{background:var(--stone);}
.section-num{font-size:11px;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:var(--teal);margin-bottom:20px;display:flex;align-items:center;gap:10px;}
.section-num::before{content:'';display:block;width:24px;height:2px;background:var(--teal);}
.section h2{font-family:var(--font-display);font-weight:400;font-size:clamp(30px,3.6vw,46px);line-height:1.12;letter-spacing:-0.03em;color:var(--ink);margin-bottom:44px;padding-bottom:44px;border-bottom:1px solid var(--border);}
.section h2 em{font-style:normal;color:var(--teal);}
/* When a section carries a standfirst, the rule closes the whole heading
   block rather than sitting between the headline and its own subtitle. */
.section h2:has(+ .section-sub){margin-bottom:12px;padding-bottom:0;border-bottom:none;}
.section-sub{font-size:15px;font-style:italic;color:var(--muted);margin-bottom:44px;padding-bottom:44px;border-bottom:1px solid var(--border);}
.section p{font-size:17px;line-height:1.8;font-weight:300;color:var(--ink);margin-bottom:1.5rem;}
.section p:last-child{margin-bottom:0;}
.section strong,.section b{font-weight:600;}

.callout{background:#fff;border:1px solid var(--border);border-left:3px solid var(--amber);padding:20px 24px;margin:24px 0;font-size:0.98rem;color:var(--ink);font-weight:300;line-height:1.65;}
.callout b{color:var(--ink);font-weight:600;}

/* ── BEFORE / AFTER STRIP ── */
.ba-band{background:var(--ink);padding:56px 5%;}
.ba-inner{max-width:900px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid rgba(255,255,255,0.14);}
.ba-col{padding:28px 30px;}
.ba-col:first-child{border-right:1px solid rgba(255,255,255,0.14);}
.ba-lbl{font-size:0.68rem;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;margin-bottom:16px;}
.ba-col.before .ba-lbl{color:rgba(255,255,255,0.4);}
.ba-col.after .ba-lbl{color:var(--teal);}
.ba-col li{list-style:none;position:relative;padding-left:16px;margin-bottom:11px;font-size:0.92rem;line-height:1.55;color:rgba(255,255,255,0.72);}
.ba-col li:last-child{margin-bottom:0;}
.ba-col li::before{content:'';position:absolute;left:0;top:9px;width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,0.3);}
.ba-col.after li::before{background:var(--teal);}
.ba-col.after li{color:rgba(255,255,255,0.88);}
@media (max-width:760px){.ba-inner{grid-template-columns:1fr;}.ba-col:first-child{border-right:none;border-bottom:1px solid rgba(255,255,255,0.14);}}

/* ── RESULT STATS ── */
.results-grid{max-width:1400px;margin:0 auto;padding:0 5% 56px;display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.result-stat{background:#fff;border:1px solid var(--border);border-top:3px solid var(--teal);padding:24px 22px;}
.result-stat .num{font-family:var(--font-display);font-size:2.4rem;font-weight:400;letter-spacing:-0.03em;color:var(--teal-dark);line-height:1;margin-bottom:12px;}
.result-stat .desc{font-size:0.88rem;color:#4A4940;line-height:1.55;}
@media (max-width:840px){.results-grid{grid-template-columns:1fr;}}

/* ── QUOTE ── */
.quote-block{max-width:740px;margin:0 auto;padding:0 5% 64px;}
.quote-block blockquote{border-left:3px solid var(--teal);padding:2px 0 2px 24px;font-family:var(--font-display);font-size:clamp(20px,2.2vw,26px);font-weight:400;font-style:italic;line-height:1.45;color:var(--ink);letter-spacing:-0.01em;}
.quote-cite{margin-top:14px;padding-left:27px;font-size:0.88rem;color:var(--gray);}
.quote-flag{max-width:740px;margin:0 auto 18px;padding:12px 18px;background:var(--amber-light);border:1px solid var(--amber);font-size:0.82rem;color:#5C3B0C;}

/* ── CTA ── */
.cta-section{background:var(--ink);padding:96px 5%;text-align:center;}
.cta-inner{max-width:640px;margin:0 auto;}
.cta-section h2{font-family:var(--font-display);font-weight:400;font-size:clamp(32px,4vw,52px);line-height:1.1;letter-spacing:-0.03em;color:#fff;margin-bottom:16px;}
.cta-section p{color:rgba(255,255,255,0.7);font-size:1.02rem;font-weight:300;margin-bottom:28px;}
.cta-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;}
.btn-cta-white{background:#fff;color:var(--ink);padding:14px 28px;font-size:0.95rem;font-weight:600;text-decoration:none;border-radius:2px;display:inline-block;}
.btn-cta-outline{border:1px solid rgba(255,255,255,0.35);color:#fff;padding:14px 28px;font-size:0.95rem;font-weight:600;text-decoration:none;border-radius:2px;display:inline-block;}

/* ── SHARE ── */
.share-bar{max-width:1400px;margin:0 auto;padding:2.5rem 5%;display:flex;justify-content:center;align-items:center;gap:1.5rem;flex-wrap:wrap;border-top:1px solid var(--border);}
.share-label{font-size:0.78rem;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;color:var(--gray);}
.share-actions{display:flex;gap:0.75rem;}
.share-btn{display:inline-flex;align-items:center;gap:0.45rem;font-size:0.82rem;font-weight:500;padding:0.5rem 1rem;border-radius:2px;border:1px solid var(--border);background:#fff;color:var(--ink);text-decoration:none;transition:border-color 0.2s,background 0.2s;}
.share-btn:hover{border-color:var(--teal);color:var(--teal);background:var(--teal-light);}
.share-btn svg{width:15px;height:15px;}