@import url('./seo-case-study.css');

.fuul-case { --fuul-gold:#f9cf35; --fuul-brown:#63433b; }
.fuul-summary,.fuul-timeline,.fuul-product,.fuul-conversion,.fuul-merchandising,.fuul-outcome { background:#fff; }
.fuul-case .fuul-presentation-copy h3 { font-size:clamp(1.6rem,3vw,2.6rem); line-height:1.15; }
.fuul-case .fuul-cards .body-copy { text-align:left; }
.fuul-buybox-desktop { max-width:380px; margin:28px auto 0; }
.fuul-case .case-detail-hero h1 { max-width:none; }
.fuul-intro { display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:start; margin-bottom:28px; }
.fuul-intro .store-case-section-heading,.fuul-intro .body-copy { margin:0; }
.fuul-proof-points { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; margin-bottom:32px; }
.fuul-proof-points > div { border-left:3px solid #ff4800; padding:4px 18px; }
.fuul-proof-points strong { display:block; font:700 1.7rem var(--font-heading); }
.fuul-proof-points span { display:block; margin-top:8px; font-size:.8rem; color:#4d5f7e; }
.fuul-presentation { display:grid; grid-template-columns:.8fr 1.5fr; gap:40px; align-items:center; padding:36px; background:linear-gradient(125deg,#fff4ce,#ffd44d 65%,#f0b631); border:1px solid #efcf7e; border-radius:16px; }
.fuul-presentation-copy { color:#53362e; }
.fuul-presentation-copy > span { font-size:.75rem; font-weight:800; letter-spacing:.12em; }
.fuul-presentation-copy h3 { font-size:clamp(1.6rem,3vw,2.6rem); margin:20px 0; line-height:1.15; }
.fuul-presentation-copy p { font-size:.9rem; line-height:1.9; }
.fuul-presentation-screen { min-width:0; transform:rotate(-1deg); }
.fuul-case .seo-proof { margin:0; border-radius:10px; box-shadow:0 12px 30px rgb(13 26 58 / 7%); border-top:4px solid #13287e; }
.fuul-case .seo-proof figcaption { padding:14px 16px; gap:8px; flex-wrap:wrap; }
.fuul-case .seo-proof figcaption strong { font-size:.85rem; }
.fuul-case .seo-proof figcaption a { font-size:.7rem; }
.fuul-case .seo-proof__image { padding:8px; }
.fuul-case .seo-proof img { width:100%; height:auto; display:block; }
.fuul-start,.fuul-desktop,.fuul-details,.fuul-feedback { background:#f5f8fc; }
.fuul-cards { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; margin-top:26px; }
.fuul-cards article { padding:24px; border:1px solid #e2e8f4; border-radius:10px; background:#fff; box-shadow:0 12px 26px rgb(13 26 58 / 5%); }
.fuul-cards h3 { font-size:1.1rem; }
.fuul-cards .body-copy { font-size:.875rem; margin:0; }
.fuul-cards .store-case-number { font-size:1.4rem; margin-bottom:14px; }
.fuul-pair { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px; align-items:start; }
.fuul-history { margin-top:32px; align-items:center; }
.fuul-history .seo-proof { max-width:520px; width:100%; justify-self:center; }
.fuul-phases { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:24px; }
.fuul-phases li { border-top:3px solid #13287e; padding:24px 0 0; }
.fuul-phase-number { display:grid; place-items:center; width:44px; height:44px; border-radius:10px; color:#13287e; background:#edf1fc; font-weight:800; }
.fuul-phases li:nth-child(even) { border-top-color:#ff4800; }
.fuul-phases li:nth-child(even) .fuul-phase-number { color:#993100; background:#fff2e9; }
.fuul-date { color:#4d5f7e; font-size:.75rem; margin:18px 0 10px; }
.fuul-phases h3 { font-size:1.15rem; }
.fuul-phases .body-copy { font-size:.85rem; margin:0; }
.fuul-evidence-note { color:#4d5f7e; font-size:.75rem; margin:20px 0 0; line-height:1.7; }
.fuul-build-notes { padding:28px; margin-top:24px; background:#f5f8fc; border-left:3px solid #13287e; border-radius:10px; }
.fuul-build-notes ul,.fuul-outcome-panel ul { padding:0; margin:20px 0 0; list-style:none; }
.fuul-build-notes li,.fuul-outcome-panel li { position:relative; padding-left:24px; margin:14px 0; font-size:.9rem; line-height:1.7; }
.fuul-build-notes li::before,.fuul-outcome-panel li::before { content:'+'; position:absolute; left:0; font-weight:800; color:#ff4800; }
.fuul-mobile { background:linear-gradient(130deg,#f5f8fc,#fff7dc); }
.fuul-phone-grid { display:grid; grid-template-columns:repeat(3,minmax(0,269px)); justify-content:center; gap:40px; align-items:start; }
.fuul-phone-grid .seo-proof { border-top-color:var(--fuul-brown); }
.fuul-phone-grid .seo-proof figcaption { display:block; }
.fuul-phone-grid .seo-proof figcaption a { display:block; margin-top:6px; }
.fuul-speed { display:grid; grid-template-columns:1fr 2fr; gap:38px; align-items:center; margin-top:30px; padding:26px 32px; background:white; border:1px solid #e2e8f4; border-radius:10px; }
.fuul-speed > div > span { font-size:.8rem; color:#4d5f7e; }
.fuul-speed strong { display:block; font:700 2.8rem var(--font-heading); margin-top:8px; color:#13287e; }
.fuul-speed strong span { color:#ff4800; }
.fuul-speed .body-copy { margin:0; font-size:.85rem; }
.fuul-feature-layout { display:grid; grid-template-columns:1fr 267px; gap:48px; align-items:start; }
.fuul-feature-layout .fuul-cards { grid-template-columns:repeat(2,minmax(0,1fr)); margin:0; }
.fuul-phone-detail { width:100%; max-width:267px; justify-self:center; }
.fuul-offer { background:#f5f8fc; }
.fuul-offer-points { list-style:none; padding:0; display:flex; flex-wrap:wrap; gap:12px; margin:0 0 28px; }
.fuul-offer-points li { padding:12px 18px; border:1px solid #ead6b2; border-radius:10px; background:#fff8df; color:#63433b; font-size:.8rem; font-weight:700; }
.fuul-offer-layout { display:grid; grid-template-columns:1fr 280px; gap:28px; align-items:start; }
.fuul-stack { display:grid; gap:24px; }
.fuul-offer-phone { padding:16px; background:linear-gradient(#ffe176,#fff5d5); border-radius:14px; }
.fuul-offer .seo-proof { border-top-color:#63433b; }
.fuul-offer-banner { margin-top:28px; }
.fuul-editable-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; margin-bottom:28px; }
.fuul-editable-grid article { padding:28px; border:1px solid #e2e8f4; border-radius:10px; background:linear-gradient(#f5f8fc,#fff); }
.fuul-editable-grid article > span { font-size:.75rem; font-weight:700; color:#13287e; }
.fuul-editable-grid h3 { margin:16px 0; }
.fuul-editable-grid ul { margin:0; padding-left:20px; color:#4d5f7e; font-size:.9rem; line-height:2; }
.fuul-detail-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; align-items:start; }
.fuul-technology .store-case-tools { grid-template-columns:repeat(3,minmax(0,1fr)); }
.fuul-technology h3 { color:#13287e; font-size:1.1rem; }
.fuul-tool-note { color:#e2e8f4; font-size:.8rem; margin:24px 0 0; }
.fuul-outcome-panel { display:grid; grid-template-columns:.7fr 1.3fr; border:1px solid #dce9e4; background:linear-gradient(120deg,#eef9f3,#f5f8fc); border-radius:12px; }
.fuul-outcome-panel > div { padding:36px; border-right:1px solid #dce9e4; }
.fuul-outcome-panel > div > span { color:#276414; font-size:.9rem; font-weight:700; }
.fuul-outcome-panel strong { display:block; font:700 2.8rem var(--font-heading); color:#13287e; margin:14px 0; line-height:1.2; }
.fuul-outcome-panel ul { margin:0; padding:28px 36px; align-self:center; }
.fuul-quotes { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
.fuul-quotes figure { margin:0; padding:32px; border:1px solid #e2e8f4; border-top:4px solid #13287e; border-radius:10px; background:white; }
.fuul-quotes blockquote { margin:0 0 24px; font:600 1.4rem/1.5 var(--font-heading); }
.fuul-quotes figcaption strong,.fuul-quotes figcaption span { display:block; }
.fuul-quotes figcaption span { font-size:.75rem; color:#4d5f7e; margin-top:8px; }
.fuul-result { display:block; }
.fuul-result .body-copy:last-child { margin-bottom:0; }
@media(max-width:980px) {
 .fuul-intro { grid-template-columns:1fr; gap:18px; }
 .fuul-presentation { grid-template-columns:1fr; gap:18px; }
 .fuul-presentation-copy h3 br { display:none; }
 .fuul-cards,.fuul-phases { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .fuul-pair { gap:20px; }
 .fuul-phone-grid { gap:18px; }
 .fuul-feature-layout { grid-template-columns:1fr 220px; gap:24px; }
 .fuul-feature-layout .fuul-cards { grid-template-columns:1fr; }
 .fuul-offer-layout { grid-template-columns:1fr 210px; gap:20px; }
 .fuul-editable-grid,.fuul-technology .store-case-tools { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .fuul-detail-grid { grid-template-columns:1fr 1fr; }
}
@media(max-width:640px) {
 .fuul-proof-points { grid-template-columns:1fr; gap:16px; }
 .fuul-proof-points strong { font-size:1.3rem; }
 .fuul-presentation { padding:20px 14px; }
 .fuul-presentation-copy { padding:0 10px; }
 .fuul-presentation-screen { transform:none; }
 .fuul-cards,.fuul-phases,.fuul-pair,.fuul-feature-layout,.fuul-offer-layout,.fuul-speed,.fuul-editable-grid,.fuul-detail-grid,.fuul-outcome-panel,.fuul-quotes { grid-template-columns:1fr; }
 .fuul-phone-grid { grid-template-columns:minmax(0,269px); gap:24px; }
 .fuul-speed { gap:16px; padding:24px; }
 .fuul-offer-phone { max-width:330px; justify-self:center; }
 .fuul-technology .store-case-tools { grid-template-columns:1fr; }
 .fuul-outcome-panel > div { border-right:0; border-bottom:1px solid #dce9e4; padding:28px; }
 .fuul-outcome-panel ul { padding:20px 28px; }
 .fuul-quotes figure { padding:26px; }
 .fuul-quotes blockquote { font-size:1.25rem; }
}