:root{--sf-navy:#141c2c;--sf-orange:#f27b32;--sf-purple:#7d55cc;--sf-lime:#c2e95d;--sf-ink:#1b2230;--sf-muted:#697182;--sf-paper:#f6f7f8}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#fff;color:var(--sf-ink);font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Arial,sans-serif;-webkit-font-smoothing:antialiased}button,input,select,textarea{font:inherit}a{text-decoration:none;color:inherit}button,a,input,select,textarea{outline-offset:4px}a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--sf-orange)}.story-nav{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:16px clamp(18px,5vw,86px);background:rgba(255,255,255,.94);backdrop-filter:blur(16px);border-bottom:1px solid #e7e7e8}.brand{font-size:24px;font-weight:850;letter-spacing:-.07em;white-space:nowrap}.brand span{color:var(--sf-orange)}.nav-links{display:flex;gap:clamp(12px,2vw,28px);align-items:center;font-size:13px;font-weight:650}.nav-links a:hover,.nav-links a[aria-current=page]{color:#e36820}.pill{display:inline-flex;justify-content:center;align-items:center;border-radius:99px;padding:13px 22px;background:var(--sf-orange);color:#101726!important;font-weight:750;border:0;cursor:pointer}.pill:hover{background:#ff9652}.outline{background:transparent;border:1px solid currentColor;color:inherit!important}.mobile-menu-button{display:none;background:none;border:0;font-size:28px;cursor:pointer}.story-hero{position:relative;min-height:760px;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:38px;padding:95px max(5vw,20px) 80px;overflow:hidden;background:radial-gradient(ellipse at 74% 58%,#ffe4cc 0%,#f7f2ed 28%,#f9fafc 65%,white 92%)}.story-copy{max-width:740px;position:relative;z-index:3}.eyebrow{font-size:12px;font-weight:800;letter-spacing:.17em;color:#b85e20;text-transform:uppercase}.story-hero h1{font-size:clamp(58px,7.4vw,122px);line-height:.99;letter-spacing:-.082em;margin:20px 0 25px}.story-hero p{font-size:clamp(18px,1.85vw,24px);line-height:1.48;color:#515768;max-width:620px}.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:34px}.hero-art{min-width:0;position:relative;min-height:560px;display:flex;justify-content:center;align-items:center}.hero-art:before{content:"";position:absolute;inset:14% 0;border-radius:50%;background:radial-gradient(circle,#fff2e5 0%,transparent 69%)}.hero-art img{position:absolute;max-height:620px;max-width:90%;object-fit:contain;filter:drop-shadow(0 35px 35px #7c452c35)}.hero-art img:first-child{transform:translateX(-24%) scale(.93)}.hero-art img:last-child{transform:translateX(26%) scale(.86)}.container{width:min(1200px,calc(100% - 40px));margin:0 auto}.story-intro{padding:115px 0;text-align:center}.story-intro h2{font-size:clamp(42px,6vw,86px);letter-spacing:-.075em;line-height:1.02;margin:0 auto 25px;max-width:1000px}.story-intro p{font-size:20px;line-height:1.55;max-width:750px;margin:auto;color:var(--sf-muted)}.gradient-title{transition:color .4s ease}.gradient-title:hover{background:linear-gradient(110deg,var(--sf-lime),var(--sf-purple),var(--sf-orange));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.story-feature{padding:115px 0}.story-feature:nth-of-type(even){background:var(--sf-paper)}.feature-grid{display:grid;grid-template-columns:1fr 1fr;gap:65px;align-items:center}.story-feature:nth-of-type(odd) .feature-grid .feature-visual{order:-1}.feature-copy h2{font-size:clamp(43px,5vw,78px);letter-spacing:-.065em;line-height:1.06;margin:15px 0 18px}.feature-copy p{font-size:19px;color:var(--sf-muted);line-height:1.6}.feature-visual{min-height:460px;border-radius:36px;position:relative;overflow:hidden;background:linear-gradient(145deg,#fff3e7,#edf0f7);display:grid;place-items:center}.feature-visual img{height:420px;max-width:95%;object-fit:contain;filter:drop-shadow(0 25px 25px #28304030)}.feature-visual.blue{background:linear-gradient(145deg,#e5ecff,#f5e7ff)}.feature-visual.dark{background:linear-gradient(135deg,#1b2439,#36445f)}.chips{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px}.chip{background:#fff;border:1px solid #e6e7eb;border-radius:99px;padding:10px 15px;font-size:13px;font-weight:650}.story-feature:nth-of-type(odd) .chip{background:#f7f8fa}.closing{background:var(--sf-navy);color:white;padding:120px 20px;text-align:center}.closing h2{font-size:clamp(50px,7vw,102px);letter-spacing:-.075em;line-height:1.04;max-width:950px;margin:0 auto 26px}.closing p{font-size:20px;color:#c6cad5;max-width:700px;margin:0 auto 30px;line-height:1.6}.footer{background:#f0f1f4;padding:50px 5vw;color:#636b7c;font-size:13px}.footer-inner{max-width:1250px;margin:auto;display:flex;justify-content:space-between;flex-wrap:wrap;gap:26px}.footer-links{display:flex;gap:20px;flex-wrap:wrap}.footer a:hover{color:var(--sf-orange)}.cms-open{position:fixed;z-index:70;bottom:20px;left:20px;background:#192034;color:white;border:0;border-radius:99px;padding:13px 19px;box-shadow:0 9px 25px #0003;cursor:pointer}.reveal{opacity:0;transform:translateY(28px);transition:opacity .75s ease,transform .75s ease}.reveal.visible{opacity:1;transform:none}.demo-shell{padding:96px 5vw 140px;background:linear-gradient(150deg,#f8f9fc,#f8e9df)}.demo-layout{max-width:1150px;margin:auto;display:grid;grid-template-columns:1fr 1.05fr;gap:70px;align-items:start}.demo-layout h1{font-size:clamp(62px,7vw,105px);letter-spacing:-.08em;line-height:1.01;margin:14px 0}.demo-layout p{font-size:21px;color:var(--sf-muted);line-height:1.55}.demo-card{padding:34px;background:#fff;border-radius:26px;box-shadow:0 22px 60px #29334b14}.demo-card label{display:grid;gap:7px;font-size:13px;font-weight:750;margin-bottom:17px}.demo-card input,.demo-card select,.demo-card textarea{width:100%;border:1px solid #d4d8e2;border-radius:10px;padding:12px 14px;background:#fafbfd;color:#1b2230}.demo-card textarea{min-height:105px;resize:vertical}.demo-card .pill{width:100%;font-size:16px}.demo-small{font-size:12px!important}.status{min-height:22px;color:#315c35;font-size:13px!important}.accent-line{width:75px;height:6px;border-radius:8px;background:linear-gradient(90deg,var(--sf-orange),var(--sf-purple),var(--sf-lime))}@media(max-width:920px){.nav-links{display:none;position:absolute;top:100%;left:0;right:0;padding:15px 24px 23px;background:#fff;box-shadow:0 20px 25px #0001;flex-direction:column;align-items:stretch}.nav-links.open{display:flex}.mobile-menu-button{display:block}.story-hero{grid-template-columns:1fr;padding-top:65px}.hero-art{min-height:390px}.hero-art img{max-height:430px}.feature-grid,.demo-layout{grid-template-columns:1fr;gap:35px}.story-feature:nth-of-type(odd) .feature-grid .feature-visual{order:initial}.story-feature{padding:70px 0}}@media(max-width:600px){.story-hero{min-height:0;padding:55px 20px 35px;gap:15px}.story-hero h1{font-size:clamp(54px,12vw,80px)}.hero-art{min-height:300px}.hero-art img{max-height:320px}.story-intro{padding:85px 0}.story-feature{padding:55px 0}.feature-visual{min-height:300px;border-radius:22px}.feature-visual img{height:280px}.demo-shell{padding:55px 18px 90px}.demo-card{padding:23px}.closing{padding:85px 20px}}

/* Consistent reversible gradient animation on story pages. */
.gradient-title{background:linear-gradient(105deg,#fa6328,#ed4c8f 47%,#7137db);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;transition:filter .45s ease}
.gradient-title.sf-gradient-reverse,.gradient-title:hover{background-image:linear-gradient(285deg,#fa6328,#ed4c8f 47%,#7137db)}

/* StoreFaces chapter layout: balanced, alternating media. */
@media(min-width:921px){
.story-feature .feature-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:clamp(34px,4vw,75px);align-items:center}
.story-feature .feature-grid>.feature-copy{grid-column:1;grid-row:1;min-width:0}
.story-feature .feature-grid>.feature-visual{grid-column:2;grid-row:1;min-width:0;width:100%;order:initial!important}
.story-feature .feature-grid.media-left>.feature-copy{grid-column:2}
.story-feature .feature-grid.media-left>.feature-visual{grid-column:1}
.story-feature .feature-grid.media-right>.feature-copy{grid-column:1}
.story-feature .feature-grid.media-right>.feature-visual{grid-column:2}
}
.story-feature .feature-visual{min-height:clamp(340px,37vw,525px);isolation:isolate}
.story-feature .feature-visual img{display:block;max-width:95%;max-height:calc(100% - 28px);width:auto;height:min(470px,35vw);object-fit:contain}
@media(max-width:920px){
.story-feature .feature-grid{display:flex;flex-direction:column;gap:26px}
.story-feature .feature-grid>.feature-copy{order:0;width:100%}
.story-feature .feature-grid>.feature-visual{order:1!important;width:100%}
.story-feature .feature-visual img{height:min(420px,72vw)}
}