/* Homepage: spacious product stories and a progressively enhanced feature wheel. */
:root { --home-surface: #222620; --home-soft: #1a201a; --dim: #a9ada2; }
:root[data-site-theme="light"] { --bg: #fafbf8; --home-surface: #edf0e8; --home-soft: #f1f3ed; --dim: #5e6859; }
:root { --home-gutter: clamp(1.25rem, 3.8vw, 4rem); --home-max-width: 1600px; }
.container { max-width: var(--home-max-width); padding-inline: var(--home-gutter); }
body > header { top: 12px; width: calc(100% - 2 * var(--home-gutter)); max-width: calc(var(--home-max-width) - 2 * var(--home-gutter)); margin: 12px auto 0; border: 1px solid var(--line); border-radius: 14px; }
body > header .container { padding: 1rem 1.4rem; }
/* Match DIGO's compact bar; compensate its height to keep the page stable. */
body > header[data-home-header] { --header-space: 0px; margin-bottom: var(--header-space); transition: max-width .35s ease, top .3s ease, margin-bottom .3s ease, box-shadow .3s ease, background-color .3s ease, border-color .3s ease; }
body > header[data-home-header] > .container { transition: padding .3s ease; }
body > header[data-home-header] .logo { transition: height .3s ease; }
body > header[data-home-header] .pill { transition: min-height .3s ease, padding .3s ease, font-size .3s ease, transform .2s ease, background-color .3s ease; }
body > header[data-home-header] .site-theme-toggle { transition: width .3s ease, height .3s ease, transform .2s ease, border-color .3s ease; }
body > header[data-home-header].is-compact { --header-space: calc(max(46px, 2.908rem) + 1.1rem - 38px); top: 8px; max-width: min(1180px, calc(100% - 2 * var(--home-gutter))); background: color-mix(in srgb, var(--bg) 94%, transparent); box-shadow: 0 12px 32px color-mix(in srgb, var(--ink) 12%, transparent); }
body > header[data-home-header].is-compact > .container { padding: .45rem .55rem .45rem 1rem; }
body > header[data-home-header].is-compact .logo { height: 28px; }
body > header[data-home-header].is-compact .pill { min-height: 38px; padding: .45rem .9rem; font-size: .8rem; }
body > header[data-home-header].is-compact .site-theme-toggle { width: 38px; height: 38px; }
@media (max-width: 600px) {
    body > header[data-home-header].is-compact { --header-space: calc(2px + .5rem); }
}
@media (max-width: 360px) {
    body > header[data-home-header].is-compact .logo { height: 24px; }
    body > header[data-home-header].is-compact .pill { padding-inline: .7rem; font-size: .75rem; }
}
.logo { height: 38px; }
nav.main { gap: clamp(.8rem, 1.8vw, 1.8rem); font-size: .86rem; }
.pill { display: inline-flex; align-items: center; justify-content: center; gap: .8rem; min-height: 46px; border-radius: 10px; padding: .75rem 1.15rem; font-size: .88rem; }
.pill:hover { transform: translateY(-2px); }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid var(--green); outline-offset: 5px; }
section[id] { scroll-margin-top: 110px; }
.hero { padding: 2.8rem 0 3.8rem; }
.hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: stretch; }
.hero-copy { padding-top: clamp(2rem, 5vw, 5rem); }
.kicker { color: var(--dim); text-transform: uppercase; font-weight: 650; font-size: .69rem; letter-spacing: .12em; }
.hero h1 { font-size: clamp(3.8rem, 6.2vw, 6rem); font-weight: 550; letter-spacing: -.05em; line-height: 1.01; margin: 1.4rem 0 1.8rem; }
.hero h1 span { background: none; color: var(--green); animation: none; }
.hero .sub { color: var(--dim); font-size: 1.07rem; max-width: 25rem; line-height: 1.65; margin-bottom: 1.7rem; }
.hero .sub strong { color: var(--ink); font-weight: 600; }
.hero-actions { display: flex; gap: 1.3rem; align-items: center; flex-wrap: wrap; }
.hero-secondary { display: inline-flex; align-items: center; gap: .4rem; text-decoration: none; font-size: .86rem; min-height: 44px; }
.hero-secondary:hover { color: var(--green); }
.hero-note { color: var(--dim); font-size: .76rem; margin: .9rem 0 0; }
.hero-shortcut { display: flex; align-items: center; justify-content: space-between; gap: 1rem; text-decoration: none; font-size: .84rem; padding: 1.05rem 1.15rem; margin-top: 3.3rem; border: 1px solid var(--line); border-radius: 10px; background: var(--home-soft); max-width: 28rem; }
.hero-shortcut small { display: block; color: var(--dim); font-size: .7rem; margin-bottom: .2rem; }
.hero-shortcut > svg { flex: none; transition: transform .25s; }
.hero-shortcut:hover > svg { transform: translateX(4px); }
.hero-demo { position: relative; width: 100%; max-width: none; min-width: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 1.5rem; padding: 5rem 2.2rem 4.4rem; border: 1px solid var(--line); border-radius: 16px; background: var(--home-surface); overflow: hidden; }
.demo-topline { position: absolute; top: 1.5rem; left: 1.5rem; right: 1.5rem; display: flex; align-items: center; justify-content: space-between; color: var(--dim); font-size: .72rem; }
.demo-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 5px color-mix(in srgb, var(--green) 10%, transparent); }
.shop-preview { width: 100%; max-width: 340px; padding: 1.2rem; background: #fffefb; color: #28352b; border-radius: 14px; box-shadow: 0 18px 45px #00000018; transform: rotate(-3deg); }
.shop-brand { display: flex; justify-content: space-between; align-items: center; padding-bottom: 1rem; font-size: 1.35rem; font-weight: 600; letter-spacing: -.05em; }
.brand-period { color: #679463; }
.product-art { position: relative; background: #e8e9dd; border-radius: 7px; text-align: center; padding-top: 1.3rem; overflow: hidden; }
.product-art-label { font-size: .5rem; letter-spacing: .18em; }
.product-art svg { display: block; width: 100%; height: auto; }
.product-art-caption { display: block; font-family: Georgia, serif; font-size: .9rem; margin: -.6rem 0 1rem; }
.shop-product { display: flex; align-items: center; justify-content: space-between; gap: .7rem; padding: 1.2rem 0; }
.shop-product small { font-size: .48rem; letter-spacing: .13em; color: #65705e; }
.shop-product h2 { margin: .15rem 0; font-size: 1.2rem; font-weight: 600; }
.shop-product span { font-size: .65rem; color: #65705e; }
.shop-product > strong { font-size: .9rem; white-space: nowrap; }
.shop-add { display: flex; align-items: center; justify-content: space-between; border-radius: 6px; padding: .75rem 1rem; font-size: .7rem; background: #253e2b; color: #fff; }
.order-toast { position: relative; display: flex; align-items: center; gap: .7rem; padding: 1rem; width: calc(100% + 1rem); max-width: 420px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 35px #00000012; transform: translateY(-.5rem) rotate(2deg); }
.order-toast-icon { display: grid; place-items: center; flex: none; width: 34px; height: 34px; background: #dff1d8; color: #2d6636; border-radius: 50%; }
.order-toast strong, .order-toast small { display: block; }
.order-toast strong { font-size: .66rem; font-weight: 600; }
.order-toast small { color: var(--dim); font-size: .61rem; margin-top: .2rem; }
.order-toast > b { margin-left: auto; white-space: nowrap; font-size: .72rem; }
.demo-caption { position: absolute; bottom: 1rem; font-size: .68rem; color: var(--dim); }
.commerce-section { margin-top: .5rem; }
.commerce-panel { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 2rem; background: #0c2518; color: #f0f5ec; border-radius: 16px; overflow: hidden; padding: 3rem clamp(1.5rem, 4.5vw, 4.5rem); }
.commerce-copy .num { color: #abc6af; font-size: .65rem; letter-spacing: .15em; margin: 0 0 1.7rem; }
.commerce-copy h2 { font-weight: 500; font-size: clamp(2.4rem, 4vw, 3.8rem); letter-spacing: -.04em; line-height: 1.08; margin: 0 0 1.5rem; }
.commerce-copy h2 span { color: #84ce88; }
.commerce-copy > p:not(.num) { font-size: .9rem; color: #bbcebe; line-height: 1.7; }
.commerce-link { display: inline-flex; align-items: center; gap: .75rem; margin-top: 1rem; font-size: .84rem; text-decoration: none; min-height: 44px; }
.commerce-link:hover { color: #84ce88; }
.commerce-wheel { position: relative; min-width: 0; }
.wheel-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.wheel-item { display: flex; align-items: center; gap: 1rem; padding: .7rem 1.1rem .7rem .7rem; border: 1px solid #ffffff20; border-radius: 999px; background: #ffffff06; }
.wheel-icon { width: 48px; height: 48px; display: grid; place-items: center; flex: none; border-radius: 50%; background: #294b34; color: #b7d3b2; }
.wheel-item:nth-child(3n+2) .wheel-icon { background: #454b37; color: #e0d9a4; }
.wheel-item:nth-child(3n) .wheel-icon { background: #344b4d; color: #b5d7d5; }
.wheel-item strong { display: block; font-size: .87rem; font-weight: 550; }
.wheel-item small { display: block; color: #bbcebe; font-size: .67rem; margin-top: .12rem; }
.wheel-pointer { display: none; }
.wheel-control { display: flex; align-items: center; gap: .5rem; background: transparent; border: 0; color: #bbcebe; font: inherit; font-size: .7rem; padding: 0; margin-top: 1.5rem; min-height: 44px; cursor: pointer; }
.wheel-control[hidden] { display: none; }
.play-symbol { display: none; }
.wheel-control[aria-pressed="true"] .play-symbol { display: block; }
.wheel-control[aria-pressed="true"] .pause-symbol { display: none; }
.commerce-panel.is-enhanced .commerce-wheel { height: 440px; }
.is-enhanced .wheel-list { position: absolute; inset: 0; display: block; }
.is-enhanced .wheel-item { position: absolute; top: calc(50% - 37px); left: 60px; width: calc(100% - 70px); height: 74px; transform: translate(var(--wheel-x), var(--wheel-y)) scale(var(--wheel-scale)); opacity: var(--wheel-opacity); transition: transform 900ms cubic-bezier(.22,.7,.22,1), opacity 650ms, background-color 650ms, border-color 650ms; will-change: transform, opacity; transform-origin: left center; }
.is-enhanced .wheel-item[data-active="true"] { background: #294332; border-color: #57795a; }
.is-enhanced .wheel-item[data-active="true"] .wheel-icon { background: #89ce86; color: #16351e; }
.is-enhanced .wheel-pointer { display: grid; place-items: center; position: absolute; top: calc(50% - 26px); left: -4px; width: 52px; height: 52px; border-radius: 50%; background: #83ce81; color: #12321a; }
section.block { padding: 6rem 0 2rem; }
h2.big { font-weight: 550; letter-spacing: -.035em; font-size: clamp(2.2rem, 4.2vw, 3.6rem); }
.platform-intro { margin-bottom: 2.7rem; }
.platform-intro .lead { font-size: 1rem; }
.platform-demo-label { font-size: .65rem; color: var(--dim); border-color: var(--line); }
.platform-shots { gap: 1.3rem; }
.platform-shot { border-radius: 14px; background: var(--home-soft); }
.platform-shot:first-child { display: grid; grid-template-columns: .8fr 1.2fr; align-items: center; padding: 2.5rem; gap: 2.5rem; }
.platform-shot figcaption { border: 0; padding: 2rem 2rem 1.5rem; }
.platform-shot:first-child figcaption { padding: 0; }
.platform-shot h3 { font-size: clamp(1.5rem, 2.7vw, 2.4rem); font-weight: 550; letter-spacing: -.04em; line-height: 1.13; max-width: 21rem; margin-bottom: 1rem; }
.platform-shot p { font-size: .93rem; max-width: 26rem; }
.platform-shot-visual { min-width: 0; margin: 0 1.5rem 1.5rem; border: 1px solid var(--line); border-radius: 9px; overflow: hidden; box-shadow: 0 12px 35px #0000000b; background: var(--panel); }
.platform-shot:first-child .platform-shot-visual { margin: 0; }
.platform-theme-labels { font-size: .6rem; }
.platform-theme-labels span { padding: .5rem .75rem; }
.platform-compare-help { font-size: .66rem; padding: .7rem; gap: .6rem; }
.platform-note { font-size: .72rem; }
#funzioni { padding-top: 5rem !important; }
.fgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.f { padding: 1.6rem; border-radius: 12px; gap: .9rem; background: var(--bg); }
.f h3 { font-size: 1.12rem; font-weight: 600; }
.f p { font-size: .86rem; line-height: 1.65; }
.f .n { font-size: .66rem; }
.f .mini { border-radius: 8px; background: var(--home-soft); font-size: .74rem; padding: .8rem; }
.f .chip { font-size: .65rem; }
.integration-spotlight { padding-top: 4rem; }
.integration-panel { border-color: var(--line); background: var(--home-soft); border-radius: 14px; }
.integration-copy h2 { font-weight: 550; letter-spacing: -.05em; }
.integration-screen { transform: none; box-shadow: 0 16px 40px #00000016; }
.integration-visual::before { display: none; }
.integration-copy > p:not(.num) { font-size: .95rem; }
.integration-point { font-size: .82rem; }
.final .blob { display: none; }
.final h2, .quote p { font-weight: 550; letter-spacing: -.045em; }
#prezzi h2 { font-size: clamp(2rem, 3.7vw, 3rem); letter-spacing: -.045em; font-weight: 550; }
@media (max-width: 1100px) { nav.main a[href="#fatture-in-cloud"], nav.main a[href="#domande"] { display: none; } .hero h1 { font-size: clamp(3.5rem, 7vw, 5rem); } .hero-demo { padding-inline: 1.5rem; } .is-enhanced .wheel-item { left: 48px; width: calc(100% - 48px); gap: .65rem; } .wheel-icon { width: 38px; height: 38px; } .wheel-item strong { font-size: .74rem; } .is-enhanced .wheel-pointer { width: 42px; height: 42px; top: calc(50% - 21px); } .platform-shot:first-child { padding: 2rem; gap: 2rem; } }
@media (max-width: 800px) { .hero-grid { grid-template-columns: 1fr; gap: 2rem; } .hero-copy { padding-top: 1rem; } .hero h1 { font-size: clamp(3.4rem, 9vw, 5rem); max-width: 35rem; } .hero .sub { max-width: 30rem; } .hero-shortcut { margin-top: 2rem; max-width: none; } .hero-demo { min-height: 550px; } .commerce-panel { gap: 1rem; padding: 2.5rem 1.5rem; } .commerce-copy h2 { font-size: 2.4rem; } .commerce-copy > p:not(.num) br { display: none; } .commerce-panel.is-enhanced .commerce-wheel { height: 400px; } .wheel-item { padding: .5rem; } .wheel-item small { font-size: .6rem; } .platform-shot:first-child { grid-template-columns: 1fr; gap: 1.5rem; } .platform-shot:first-child figcaption { max-width: 32rem; } .platform-shot h3 { max-width: none; } .fgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { body > header { width: calc(100% - 24px); top: 8px; margin-top: 8px; border-radius: 10px; } body > header .container { padding: .7rem .8rem; } .logo { height: 28px; } nav.main { gap: .5rem; } .site-theme-toggle { width: 40px; height: 40px; } nav.main .pill { padding: .55rem .8rem; min-height: 40px; font-size: .75rem; } .hero { padding: 1.8rem 0 2rem; } .hero h1 { font-size: clamp(3.25rem, 12vw, 4.5rem); } .hero .sub { font-size: 1rem; } .hero-actions { gap: 1rem; } .hero-secondary { font-size: .78rem; } .hero-shortcut { font-size: .77rem; } .hero-demo { min-height: 530px; padding: 4.5rem 1.5rem 3rem; } .shop-preview { max-width: 280px; } .order-toast { gap: .5rem; padding: .8rem; } .order-toast strong { font-size: .6rem; } .order-toast small { font-size: .56rem; } .order-toast > b { font-size: .64rem; } .order-toast-icon { width: 28px; height: 28px; } .commerce-panel { grid-template-columns: 1fr; gap: 0; padding: 2rem 1.4rem 0; } .commerce-copy h2 { font-size: 2.7rem; } .commerce-copy > p:not(.num) { max-width: 24rem; } .wheel-control { margin-top: .7rem; } .commerce-panel.is-enhanced .commerce-wheel { height: 360px; } .is-enhanced .wheel-item { left: 50px; width: calc(100% - 50px); } .wheel-item strong { font-size: .75rem; } .wheel-item small { font-size: .63rem; } .wheel-list { padding: 1rem 0 2rem; } .is-enhanced .wheel-list { padding: 0; } .platform-intro { gap: 1.2rem; } section.block { padding-top: 3.5rem; } .platform-shot:first-child { padding: 1.5rem 1rem 1rem; } .platform-shot:first-child figcaption { padding: 0 .5rem; } .platform-shot figcaption { padding: 1.5rem; } .platform-shot h3 { font-size: 1.75rem; } .platform-shot-visual { margin: 0 1rem 1rem; } .fgrid { grid-template-columns: 1fr; } .f { padding: 1.5rem; } .f p { font-size: .9rem; } .integration-spotlight { padding-top: 2.5rem; } }
@media (prefers-reduced-motion: reduce) { .is-enhanced .wheel-item { transition: none; } }
@media (forced-colors: active) { .commerce-panel, .wheel-item { border: 1px solid CanvasText; } .hero h1 span { color: CanvasText; } }

@media (max-width: 360px) { .logo { height: 24px; } nav.main .pill { white-space: nowrap; padding-inline: .7rem; } .site-theme-toggle { width: 36px; height: 36px; } .hero-actions { gap: .4rem; } }

/* Four product stories replace the dense twelve-card feature catalogue. */
.features-heading { display: flex; justify-content: space-between; align-items: end; gap: 2rem; margin-bottom: 2.5rem; }
.features-heading .big { margin-bottom: 0; }
.features-heading .lead { font-size: 1rem; margin: 0; padding-bottom: .3rem; }
.feature-stories-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
.feature-story { display: flex; flex-direction: column; min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); }
.feature-story-copy { padding: clamp(1.5rem, 3vw, 3rem); }
.feature-eyebrow { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem; color: var(--green); font-size: .75rem; font-weight: 600; margin: 0 0 1.2rem; }
.feature-plan { border: 1px solid var(--green-dark); border-radius: 5px; padding: .15rem .5rem; font-size: .65rem; }
.feature-story h3 { font-size: clamp(1.9rem, 2.7vw, 2.8rem); font-weight: 550; letter-spacing: -.04em; line-height: 1.12; margin: 0 0 1rem; }
.feature-story-copy > p:not(.feature-eyebrow) { color: var(--dim); font-size: .95rem; line-height: 1.7; max-width: 34rem; margin: 0; }
.feature-story-copy ul { display: grid; gap: .35rem; list-style: none; padding: 0; margin: 1.3rem 0 0; font-size: .8rem; color: var(--ink); }
.feature-story-copy li::before { content: ''; display: inline-block; width: 5px; height: 5px; margin: 0 .6rem .15rem 0; background: var(--green); border-radius: 50%; }
.feature-scene { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.3rem; min-height: 320px; margin-top: auto; padding: 2rem clamp(1rem, 3vw, 3rem) 1.3rem; background: var(--home-soft); border-top: 1px solid var(--line); }
.feature-window { width: 100%; max-width: 460px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); color: var(--ink); overflow: hidden; box-shadow: 0 16px 36px #0000000c; font-size: .8rem; }
.feature-window-bar { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: .9rem 1.1rem; border-bottom: 1px solid var(--line); font-size: .73rem; }
.feature-window-bar > span { display: flex; align-items: center; gap: .5rem; }
.feature-status { color: var(--green); font-size: .65rem; }
.feature-scene-note { display: flex; gap: .5rem; align-items: center; text-align: center; color: var(--dim); font-size: .7rem; }
.feature-scene-note svg { flex: none; color: var(--green); }
.builder-layout { display: grid; grid-template-columns: .8fr 1.6fr; }
.builder-palette { padding: 1rem .7rem; border-right: 1px solid var(--line); font-size: .65rem; }
.builder-palette > span { display: block; color: var(--dim); font-size: .5rem; letter-spacing: .1em; padding: .3rem; margin-bottom: .8rem; }
.builder-palette > div { display: flex; align-items: center; gap: .35rem; margin-bottom: .3rem; padding: .55rem .3rem; border: 1px solid transparent; border-radius: 5px; white-space: nowrap; }
.builder-palette .builder-selected { color: var(--green); border-color: var(--green-dark); background: color-mix(in srgb, var(--green) 6%, transparent); }
.builder-canvas { padding: 1rem; }
.builder-brand { display: flex; justify-content: space-between; align-items: center; font-size: .7rem; font-weight: 650; margin-bottom: .65rem; }
.builder-brand span { font-size: .5rem; color: var(--dim); font-weight: 400; }
.builder-cover { position: relative; overflow: hidden; background: #dbe5d3; color: #2c432e; border-radius: 5px; padding: 1.3rem 1rem; }
.builder-cover small { display: block; font-size: .43rem; letter-spacing: .1em; margin-bottom: .45rem; }
.builder-cover strong { font-family: Georgia, serif; font-size: 1.45rem; font-weight: 400; line-height: 1.1; }
.builder-cover-line { position: absolute; width: 80px; height: 100px; right: -22px; bottom: -15px; border: 1px solid #799374; border-radius: 50% 50% 0 0; transform: rotate(-25deg); }
.builder-products { display: flex; gap: .5rem; margin-top: .6rem; }
.builder-products span { flex: 1; display: grid; place-items: center; height: 43px; background: var(--home-soft); border-radius: 4px; color: var(--dim); }
.feature-receipt { display: flex; align-items: center; gap: .8rem; padding: 1.5rem 1.2rem; }
.receipt-icon { display: grid; place-items: center; width: 46px; height: 46px; flex: none; border-radius: 8px; color: var(--green); background: var(--home-soft); }
.feature-receipt strong, .feature-receipt small { display: block; }
.feature-receipt small { color: var(--dim); font-size: .65rem; margin-top: .25rem; }
.feature-receipt > b { margin-left: auto; white-space: nowrap; }
.order-progress { display: flex; padding: .5rem 1rem 1.5rem; }
.order-progress > div { position: relative; flex: 1; text-align: center; color: var(--dim); }
.order-progress > div:not(:last-child)::after { content: ''; position: absolute; top: 14px; height: 1px; background: var(--line); left: calc(50% + 20px); right: calc(-50% + 20px); }
.order-progress span { display: grid; place-items: center; margin: 0 auto .5rem; border: 1px solid var(--line); border-radius: 50%; width: 30px; height: 30px; }
.order-progress strong { font-size: .62rem; font-weight: 500; }
.order-progress .is-complete span, .order-progress .is-current span { color: var(--green); background: var(--home-soft); border-color: var(--green-dark); }
.order-progress .is-current strong { color: var(--ink); }
.receipt-footer { display: flex; justify-content: space-between; padding: .75rem 1.2rem; border-top: 1px solid var(--line); color: var(--dim); font-size: .65rem; }
.receipt-footer strong { color: var(--ink); }
.search-preview { padding: 1.4rem; }
.search-preview small, .search-preview strong { display: block; }
.search-preview small { color: var(--dim); font-size: .65rem; }
.search-preview strong { font-size: 1.1rem; font-weight: 500; margin: .6rem 0 .3rem; color: var(--green); }
.search-preview p { font-size: .7rem; color: var(--dim); margin: 0; }
.promo-example { display: flex; align-items: center; flex-wrap: wrap; gap: .7rem; padding: 1rem 1.4rem; background: var(--home-soft); border-top: 1px solid var(--line); }
.promo-example > span:first-child { color: var(--green); }
.promo-example small, .promo-example strong { display: block; }
.promo-example small { color: var(--dim); letter-spacing: .05em; font-size: .46rem; margin-bottom: .25rem; }
.promo-example strong { font-size: .71rem; font-weight: 600; }
.promo-code { margin-left: auto; font-size: .55rem; border: 1px dashed var(--green-dark); border-radius: 4px; padding: .4rem; color: var(--green); }
.pricing-example { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; padding: 1.2rem; }
.pricing-example > div { padding: 1.2rem .8rem; border: 1px solid var(--line); border-radius: 7px; }
.pricing-example span, .pricing-example strong, .pricing-example small { display: block; }
.pricing-example span { font-size: .7rem; }
.pricing-example strong { font-size: clamp(1.25rem, 2vw, 1.7rem); font-weight: 550; margin: .6rem 0 .3rem; letter-spacing: -.03em; }
.pricing-example small { color: var(--dim); font-size: .6rem; }
.pricing-example .pricing-reseller { border-color: var(--green-dark); background: var(--home-soft); }
.pricing-reseller strong { color: var(--green); }
.affiliate-example { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .5rem; border-top: 1px solid var(--line); padding: .8rem 1.2rem; font-size: .6rem; }
.affiliate-example span { display: flex; align-items: center; gap: .4rem; color: var(--dim); }
.affiliate-example strong { color: var(--green); font-weight: 500; }
.features-illustration-note { color: var(--dim); font-size: .7rem; margin: 1rem 0 2rem; }
.feature-foundation { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 1.7rem 2rem; border: 1px solid var(--line); border-radius: 12px; background: var(--home-soft); }
.foundation-heading { display: flex; align-items: center; gap: 1rem; }
.foundation-heading > svg { color: var(--green); flex: none; }
.foundation-heading h3, .feature-migration h3 { font-size: 1rem; margin: 0 0 .3rem; font-weight: 600; }
.foundation-heading p, .feature-migration p { font-size: .8rem; color: var(--dim); margin: 0; }
.feature-foundation ul { list-style: none; padding: 0; margin: 0; font-size: .8rem; line-height: 1.9; color: var(--dim); }
.feature-foundation a, .feature-migration a { display: inline-flex; align-items: center; gap: .75rem; min-height: 44px; font-size: .8rem; text-underline-offset: 4px; }
.feature-migration { display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; padding: 1.7rem 2rem 0; }
@media (max-width: 900px) { .features-heading { display: block; } .features-heading .lead { margin-top: 1.5rem; } .feature-stories-grid { gap: 1rem; } .feature-story-copy { padding: 1.5rem; } .feature-scene { padding-inline: 1rem; } .builder-layout { grid-template-columns: 1fr; } .builder-palette { display: none; } .feature-scene-note { font-size: .62rem; } }
@media (max-width: 640px) { .feature-stories-grid { grid-template-columns: 1fr; } .feature-story-copy h3 br { display: none; } .feature-story h3 { font-size: 2rem; } .feature-scene { min-height: 0; padding: 1.5rem 1rem; } .builder-layout { grid-template-columns: .8fr 1.6fr; } .builder-palette { display: block; font-size: .55rem; padding-inline: .4rem; } .builder-canvas { padding: .7rem; } .builder-cover { padding: 1.2rem .7rem; } .builder-cover strong { font-size: 1.25rem; } .feature-foundation { padding: 1.5rem; gap: 1rem; } .feature-migration { flex-direction: column; align-items: flex-start; padding: 1.5rem .25rem 0; gap: .5rem; } }
@media (max-width: 360px) { .builder-layout { grid-template-columns: 1fr; } .builder-palette { display: none; } .pricing-example { padding: .8rem; gap: .4rem; } .pricing-example > div { padding: .9rem .6rem; } .feature-window-bar { padding-inline: .8rem; } .feature-receipt { padding-inline: .8rem; gap: .5rem; } }

.wheel-motion-note { display: none; }
@media (prefers-reduced-motion: reduce) { .commerce-copy > .wheel-motion-note { display: block; font-size: .72rem; max-width: 26rem; color: #bbcebe; margin-top: 1.2rem; } }
.benefits-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; scroll-margin-top: 110px; }
.platform-benefit { position: relative; display: flex; flex-direction: column; padding: clamp(1.5rem, 3vw, 2.5rem); border: 1px solid var(--line); border-radius: 16px; background: var(--panel); }
.benefit-number { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; margin-bottom: 1.5rem; border: 1px solid var(--green-dark); border-radius: 50%; color: var(--green); font-size: .8rem; background: var(--home-soft); }
.platform-benefit .benefit-label { color: var(--green); font-size: .7rem; letter-spacing: .05em; text-transform: uppercase; margin: 0 0 .85rem; }
.platform-benefit h3 { margin: 0 0 1rem; font-size: clamp(1.6rem, 2.6vw, 2.2rem); line-height: 1.2; font-weight: 550; letter-spacing: -.035em; }
.platform-benefit > p:not(.benefit-label) { color: var(--dim); font-size: .95rem; line-height: 1.75; margin: 0 0 1.8rem; max-width: 36rem; }
.benefit-comparison { margin-top: auto; padding: 1.2rem 1.3rem; border-radius: 10px; background: var(--home-soft); }
.benefit-comparison > strong { font-size: .8rem; font-weight: 600; }
.benefit-comparison p { color: var(--dim); font-size: .8rem; line-height: 1.7; margin: .6rem 0 .3rem; }
.benefit-comparison a { display: inline-flex; align-items: center; min-height: 44px; color: var(--dim); font-size: .7rem; text-underline-offset: 4px; }
.benefits-action { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 2rem; margin-top: 1.5rem; border: 1px solid var(--green-dark); border-radius: 14px; background: var(--home-soft); }
.benefits-action h3 { font-size: 1.25rem; font-weight: 550; margin: 0 0 .5rem; }
.benefits-action p { font-size: .85rem; color: var(--dim); margin: 0; }
.benefits-action .pill { flex-shrink: 0; gap: .6rem; }
.comparison-footnote { color: var(--dim); font-size: .72rem; max-width: 68rem; margin: 1.2rem 0 0; line-height: 1.7; }
@media (max-width: 800px) { .benefits-grid { grid-template-columns: 1fr; } .benefits-action { flex-direction: column; align-items: flex-start; padding: 1.5rem; } .platform-benefit h3 br { display: none; } }

/* Hero product story, inspired by the DIGO Studio scene sequence. */
.hero-demo.sale-showcase { padding: 1.25rem 1.4rem 1rem; gap: 1.15rem; justify-content: flex-start; }
.sale-demo-head { display: flex; justify-content: space-between; align-items: center; width: 100%; min-height: 36px; color: var(--dim); font-size: .72rem; }
.sale-pause { display: grid; place-items: center; min-width: 36px; height: 36px; color: var(--ink); background: var(--home-soft); border: 1px solid var(--line); border-radius: 50%; cursor: pointer; }
.sale-pause[aria-pressed="true"] .pause-symbol { display: none; }
.sale-pause[aria-pressed="true"] .play-symbol { display: block; }
.sale-scene-controls { display: grid; grid-template-columns: repeat(4, 1fr); gap: .35rem; width: 100%; }
.sale-scene-controls button { position: relative; display: flex; justify-content: center; align-items: center; gap: .35rem; overflow: hidden; min-height: 44px; padding: .5rem .3rem; font: inherit; font-size: .66rem; background: var(--home-soft); color: var(--dim); border: 1px solid var(--line); border-radius: 8px; cursor: pointer; }
.sale-scene-controls button[aria-pressed="true"] { border-color: var(--green); color: var(--ink); background: color-mix(in srgb, var(--green) 10%, var(--home-soft)); }
.sale-scene-controls i { position: absolute; bottom: 0; height: 2px; left: 0; width: 100%; background: var(--green); transform: scaleX(0); transform-origin: left; }
.sale-showcase[data-running="true"] button[aria-pressed="true"] i { animation: sale-progress 6s linear both; }
.sale-stage { width: 100%; position: relative; display: grid; min-height: 510px; align-items: center; flex: 1; }
.sale-scene { grid-area: 1 / 1; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 1.5rem; padding: 1.1rem .65rem .4rem; }
.sale-scene[hidden] { visibility: hidden; pointer-events: none; }
.sale-pause[hidden], .sale-scene-controls[hidden] { display: none; }
.sale-scene .shop-preview { max-width: 330px; }
.sale-card { width: 100%; max-width: 370px; padding: 1.4rem; border: 1px solid var(--line); background: var(--panel); border-radius: 14px; box-shadow: 0 18px 45px #00000018; transform: rotate(-2deg); }
.sale-card-brand { display: flex; align-items: baseline; font-size: 1.25rem; letter-spacing: -.05em; font-weight: 600; }
.sale-card-brand > span { color: var(--green); }
.sale-card-brand > small { margin-left: auto; font-size: .52rem; color: var(--dim); letter-spacing: .1em; font-weight: 500; }
.sale-card-heading { padding: 1.8rem 0 1.4rem; }
.sale-eyebrow { color: var(--green); letter-spacing: .1em; font-size: .54rem; }
.sale-card-heading h2 { margin: .6rem 0 .5rem; font-size: clamp(1.3rem, 1.8vw, 1.65rem); font-weight: 550; line-height: 1.15; letter-spacing: -.04em; }
.sale-card-heading p { margin: 0; font-size: .7rem; color: var(--dim); }
.sale-order-number, .sale-detail, .sale-total { display: flex; align-items: center; justify-content: space-between; gap: .6rem; font-size: .72rem; }
.sale-status { padding: .2rem .55rem; border: 1px solid var(--green-dark); color: var(--green); background: var(--home-soft); border-radius: 99px; font-size: .6rem; }
.sale-line-item { display: flex; align-items: center; gap: .7rem; padding: 1.2rem 0; }
.sale-product-icon { display: grid; place-items: center; width: 50px; height: 54px; border-radius: 8px; color: #466247; background: #e8e9dd; }
.sale-line-item strong, .sale-line-item small { display: block; font-size: .75rem; }
.sale-line-item small { color: var(--dim); font-size: .62rem; margin-top: .25rem; }
.sale-line-item > b { margin-left: auto; font-size: .8rem; white-space: nowrap; }
.sale-detail { padding: .6rem 0; color: var(--dim); }
.sale-detail strong { color: var(--ink); font-weight: 500; }
.sale-total { border-top: 1px solid var(--line); padding: 1rem 0; margin-top: .5rem; }
.sale-total > strong { font-size: 1.35rem; letter-spacing: -.04em; font-weight: 550; }
.sale-card-action { display: flex; justify-content: space-between; align-items: center; gap: .5rem; padding: .8rem; margin-top: .5rem; border-radius: 7px; background: var(--home-soft); color: var(--green); font-size: .66rem; }
.sale-card-action svg { flex: none; }
.sale-parcel { display: grid; justify-items: center; gap: .7rem; background: var(--home-soft); border-radius: 9px; padding: 1.1rem; color: var(--green); }
.sale-parcel span { font-size: .65rem; color: var(--dim); }
.sale-journey { display: flex; align-items: flex-start; padding: 1.5rem 0 1rem; }
.sale-journey > div { display: grid; justify-items: center; gap: .5rem; color: var(--green); }
.sale-journey span { font-size: .6rem; color: var(--dim); }
.sale-journey > i { flex: 1; height: 1px; background: var(--green-dark); margin: 9px .6rem 0; }
.sale-document { padding: 1rem; border: 1px solid var(--line); border-radius: 8px; background: var(--home-soft); }
.sale-document > div:first-child { display: flex; align-items: center; gap: .7rem; font-size: .8rem; padding-bottom: 1rem; }
.sale-document svg { color: var(--green); flex: none; }
.sale-document small { display: block; font-size: .6rem; color: var(--dim); margin-top: .2rem; }
.sale-document .sale-total { padding-bottom: 0; }
.sale-toast { display: flex; align-items: center; gap: .7rem; width: 100%; max-width: 380px; padding: .85rem; background: var(--panel); border: 1px solid var(--line); border-radius: 11px; box-shadow: 0 12px 35px #00000012; transform: rotate(1.5deg); }
.sale-toast strong, .sale-toast small { display: block; }
.sale-toast strong { font-size: .7rem; font-weight: 600; }
.sale-toast small { margin-top: .25rem; font-size: .61rem; color: var(--dim); }
.sale-demo-note { margin: 0; font-size: .62rem; color: var(--dim); text-align: center; }
@keyframes sale-progress { to { transform: scaleX(1); } }
@keyframes sale-card-in { from { opacity: 0; transform: translateY(16px) rotate(0deg) scale(.97); } }
@keyframes sale-toast-in { from { opacity: 0; transform: translateY(12px); } }
@media (prefers-reduced-motion: no-preference) {
    .sale-scene.is-active > :first-child { animation: sale-card-in .75s cubic-bezier(.2,.7,.2,1) both; }
    .sale-scene.is-active .sale-toast { animation: sale-toast-in .6s .45s both; }
    .sale-showcase:not([data-running="true"]) .sale-scene > * { animation: none; }
}
@media (prefers-reduced-motion: reduce) { .sale-showcase *, .sale-showcase *::before { animation: none !important; transition: none !important; } }
@media (max-width: 600px) {
    .hero-demo.sale-showcase { padding: 1rem .8rem; gap: .8rem; }
    .sale-stage { min-height: 480px; }
    .sale-scene { padding-inline: .5rem; gap: 1.15rem; }
    .sale-scene-controls button { flex-direction: column; font-size: .6rem; gap: .3rem; min-height: 52px; }
    .sale-card { padding: 1rem; }
    .sale-card-heading { padding-top: 1.5rem; }
    .sale-toast { padding: .7rem; gap: .5rem; }
    .sale-toast strong { font-size: .65rem; }
    .sale-toast small { font-size: .58rem; }
}