.story-page { padding-bottom:72px; }
.story-width { max-width:1160px; margin-inline:auto; padding-inline:var(--gutter); }
.story-intro { padding-top:36px; }
.story-back { display:inline-flex; align-items:center; gap:10px; min-height:46px; padding:11px 18px; font-size:15px; font-weight:700; color:var(--ink); text-decoration:none; background:var(--note-yellow); border:2px solid var(--marker-ink); border-radius:13px 8px 12px 9px; box-shadow:3px 4px 0 var(--marker-ink); transition:transform .15s ease,box-shadow .15s ease; }
.story-back:hover { color:var(--ink); transform:translate(-1px,-1px); box-shadow:4px 5px 0 var(--marker-ink); }
.story-back:active { transform:translate(2px,2px); box-shadow:1px 2px 0 var(--marker-ink); }
.story-logo { display:flex; align-items:center; margin-block:42px 28px; max-width:320px; min-height:46px; }
.story-logo .client-wordmark { font-size:24px; }
.story-intro h1 { font-family:var(--font-marker); font-size:clamp(38px,5.4vw,68px); line-height:1.07; letter-spacing:-.035em; margin:0; }
.story-lede { font-size:clamp(18px,1.8vw,21px); line-height:1.65; margin:28px 0 38px; color:var(--gray-600); }
.story-facts { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px; margin:0; padding:24px 0; border-block:1px solid #dce0e7; }
.story-facts dt,.story-eyebrow { font:700 12px/1.5 var(--font-sans); text-transform:uppercase; letter-spacing:.085em; color:var(--gray-600); }
.story-facts dd { font-size:15px; line-height:1.5; margin:7px 0 0; }
.story-comparison { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:32px; padding-block:56px 64px; }
.story-page h2 { font-family:var(--font-marker); font-size:clamp(28px,3vw,38px); line-height:1.12; letter-spacing:-.025em; margin:12px 0 24px; }
.story-challenge,.story-change { min-width:0; padding:clamp(22px,2.5vw,32px); background:#fff; border:2px solid var(--marker-ink); border-top:6px solid var(--story-accent); border-radius:13px 9px 16px 10px; box-shadow:4px 5px 0 var(--story-shadow); }
.story-challenge { --story-accent:var(--blue-500); --story-shadow:#dceaff; }
.story-change { --story-accent:var(--purple-500); --story-shadow:#efdcf7; border-radius:9px 15px 10px 14px; }
.story-card-heading { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px 16px; }
.story-card-note { font:700 24px/1.1 var(--font-hand); color:var(--story-accent); transform:rotate(-5deg); }
.story-problems li + li { border-top:1px dashed #dce0e7; padding-top:18px; }
.story-problems,.story-built { margin:0; padding:0; list-style:none; }
.story-problems li + li { margin-top:22px; }
.story-problems h3 { font-size:17px; line-height:1.4; margin:0 0 4px; }
.story-problems p,.story-built li { font-size:16px; line-height:1.65; color:var(--gray-600); margin:0; }
.story-problems p::first-letter { text-transform:uppercase; }
.story-result { font-size:19px; line-height:1.5; margin:0 0 24px; }
.story-built li { padding:14px 0 14px 22px; border-top:1px solid #e3e5eb; position:relative; }
.story-built li::before { content:'↗'; position:absolute; left:0; color:#764093; font-weight:700; }
.story-stat { border-left:3px solid var(--purple-500); background:#f8f4fc; padding:18px 20px; font-size:17px; line-height:1.5; margin:22px 0 0; }
.story-stat span { display:block; text-transform:uppercase; letter-spacing:.08em; font-size:11px; font-weight:750; color:#764093; margin-bottom:8px; }
.story-workflow { padding-bottom:60px; }
.story-section-heading { display:flex; justify-content:space-between; gap:24px; align-items:center; }
.story-handnote { font:23px var(--font-hand); color:#764093; transform:rotate(-3deg); }
.story-demo { margin:0; padding:16px; border:2px solid var(--marker-ink); border-radius:18px 10px 20px 12px; box-shadow:5px 6px 0 var(--marker-ink); background:#fff; }
.story-demo outcome-motion { display:block; --motion-before-ink:#646975; --green-500:#7861b2; --green-600:#75519d; --green-700:#57377b; --note-mint:#e6def3; --note-coral:#e5e8ed; }
.story-demo figcaption { padding:10px 12px 6px; font-size:12px; line-height:1.5; color:var(--gray-600); border-top:1px solid #e3e5eb; }
.motion-controls { display:flex; align-items:center; flex-wrap:wrap; gap:8px; padding:8px 12px 12px; }
.motion-controls button { font:650 14px var(--font-sans); color:var(--ink); background:#fff; border:1.5px solid #d3d6df; border-radius:7px; min-height:44px; padding:10px 20px; cursor:pointer; }
.motion-controls button[aria-pressed="true"] { border-color:var(--marker-ink); background:#e6def3; box-shadow:2px 2px 0 var(--marker-ink); }
.motion-hint { margin-left:auto; font-size:12px; color:var(--gray-600); }
.motion-diagram { display:block; width:100%; padding:0; border:0; border-radius:16px; background:transparent; color:inherit; text-align:left; cursor:pointer; }
@media (max-width:560px) { .motion-hint { width:100%; margin:4px 0 0; } }
.story-quote { padding-block:40px; border-block:1px solid #e3e5eb; }
.story-quote blockquote { font:500 clamp(27px,3.4vw,40px)/1.35 var(--font-hand); margin:0; padding-left:24px; border-left:4px solid var(--purple-500); }
.story-quote figcaption { font-size:14px; font-weight:650; margin:22px 0 0 28px; }
.story-team { padding-block:36px; display:flex; align-items:center; gap:28px; flex-wrap:wrap; }
.story-team > div { display:flex; gap:24px; flex-wrap:wrap; }
.story-team a { display:flex; align-items:center; gap:10px; color:var(--ink); text-decoration:none; font-size:14px; font-weight:600; }
.story-team img { border-radius:50%; object-fit:cover; background:#f1f3f7; }
.story-cta { display:flex; align-items:center; justify-content:space-between; gap:30px; padding-block:44px; border-top:1px solid #e3e5eb; }
.story-cta h2 { margin-bottom:0; }
.story-button { flex:none; padding:15px 28px; border:2px solid var(--marker-ink); border-radius:12px 8px 13px 9px; box-shadow:4px 4px 0 var(--marker-ink); background:var(--note-yellow); color:var(--ink); font-size:18px; font-weight:700; text-decoration:none; }
@media (max-width:767px) {
 .story-page { padding-bottom:24px; }
 .story-intro { padding-top:20px; }
 .story-logo { margin-block:26px; max-width:240px; }
 .story-intro h1 { font-size:clamp(36px,9.2vw,54px); }
 .story-lede { margin-block:22px 28px; font-size:17px; }
 .story-facts { grid-template-columns:1fr; gap:18px; }
 .story-facts > div { display:grid; grid-template-columns:105px minmax(0,1fr); gap:16px; }
 .story-facts dd { margin:0; }
 .story-comparison { grid-template-columns:1fr; padding-block:40px; gap:40px; }
 .story-section-heading { display:block; }
 .story-handnote { display:block; margin:-10px 0 24px; font-size:21px; }
 .story-demo { padding:6px; margin-inline:-8px; }
 .story-workflow { padding-bottom:40px; }
 .story-quote { padding-block:30px; }
 .story-quote blockquote { padding-left:18px; }
 .story-team { gap:18px; }
 .story-cta { align-items:flex-start; flex-direction:column; padding-block:30px; }
}