/* Features page additions to the hs-* showcase system (home-showcase.css must load first). */
.fs-anchor { scroll-margin-top: 6.5rem; }

/* Panel phone layouts (.hs-solo / .hs-duo / .hs-trio) live in home-showcase.css */
.hs-split > .hs-panel { justify-self: end; }
.hs-split.is-flipped > .hs-panel { justify-self: start; }

/* Feature reel cards (the .fs-reel container itself lives in home-showcase.css, shared with the home page) */
.fs-reel { --fs-card: 19.5rem; }
.fs-reel-card { flex: 0 0 var(--fs-card); display: grid; grid-template-rows: auto auto 1fr auto; gap: .35rem; padding: 1.25rem 1.25rem 1.1rem; border: 1px solid var(--cp-border); border-radius: 1.25rem; background: linear-gradient(180deg, color-mix(in srgb, var(--cp-accent) 6%, var(--cp-surface)), var(--cp-surface) 60%); color: var(--cp-text); box-shadow: 0 1px 0 rgba(255, 255, 255, .04) inset; transition: transform .35s cubic-bezier(.2, .8, .2, 1), border-color .25s, box-shadow .35s; will-change: transform; }
.fs-reel-card:hover { transform: scale(1.05); border-color: var(--cp-accent); box-shadow: 0 24px 48px -22px color-mix(in srgb, var(--cp-accent) 55%, transparent); z-index: 2; }
.fs-reel-card i { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; margin-bottom: .35rem; border-radius: .8rem; background: var(--cp-accent); color: #fff; font-size: 1.25rem; transition: transform .35s cubic-bezier(.2, .8, .2, 1); }
.fs-reel-card:hover i { transform: rotate(-6deg) scale(1.08); }
.fs-reel-card strong { font-size: 1rem; }
.fs-reel-card span { color: var(--cp-text-muted); font-size: .86rem; line-height: 1.45; }
.fs-reel-card small { margin-top: .35rem; color: var(--cp-accent); font-size: .66rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }

/* Capture trio */
.fs-capture { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.fs-capture-tile { position: relative; display: flex; flex-direction: column; min-height: 27.5rem; padding: 1.6rem 1.6rem 0; border: 1px solid var(--cp-border); border-radius: 1.6rem; background: linear-gradient(180deg, color-mix(in srgb, var(--cp-accent) 5%, var(--cp-surface)), var(--cp-surface)); overflow: hidden; transition: border-color .2s, transform .25s; }
.fs-capture-tile:hover { border-color: var(--cp-accent); transform: translateY(-3px); }
.fs-capture-tile h3 { margin: 0 0 .4rem; padding-right: 5.5rem; font-size: 1.25rem; font-weight: 700; letter-spacing: -.02em; }
.fs-capture-tile p { margin: 0; font-size: .92rem; line-height: 1.5; }
.fs-receipt { container-type: inline-size; position: relative; flex: 1; margin-top: 1.4rem; min-height: 14rem; }
.fs-receipt-paper { position: absolute; left: 50%; top: 0; width: 56%; aspect-ratio: 3 / 4; transform: translateX(-50%) rotate(-3deg); padding: 9% 8%; border-radius: .6rem .6rem 0 0; background: var(--cp-surface); border: 1px solid var(--cp-border); box-shadow: var(--hs-shadow); overflow: hidden; }
.fs-receipt-paper::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 8px; background: linear-gradient(135deg, var(--cp-surface) 25%, transparent 25%) 0 0 / 12px 12px, linear-gradient(225deg, var(--cp-surface) 25%, transparent 25%) 0 0 / 12px 12px; }
.fs-receipt-paper b, .fs-receipt-paper i { display: block; height: 6%; margin-bottom: 7%; border-radius: 999px; background: color-mix(in srgb, var(--cp-text) 16%, transparent); }
.fs-receipt-paper b { width: 62%; background: color-mix(in srgb, var(--cp-text) 32%, transparent); }
.fs-receipt-paper b.is-short { width: 38%; }
.fs-receipt-paper i.is-total { width: 46%; margin-top: 12%; background: var(--cp-accent); }
.fs-receipt-scan { position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--cp-accent); box-shadow: 0 0 18px 4px color-mix(in srgb, var(--cp-accent) 60%, transparent); animation: fs-scan 3.2s ease-in-out infinite; }
@keyframes fs-scan { 0%, 100% { top: 6%; } 50% { top: 92%; } }

/* Smart signals tile: feed strip on top, AI diagnostics sheet in a phone underneath */
.fs-signals { container-type: inline-size; position: relative; flex: 1; margin-top: 1.4rem; min-height: 15rem; }
.fs-signals-strip { position: absolute; z-index: 2; left: -2%; top: 0; width: 104%; border: 1px solid var(--cp-border); border-radius: 3cqw; background: var(--cp-surface); box-shadow: var(--hs-shadow); overflow: hidden; }
.fs-signals-strip img { width: 100%; height: auto; vertical-align: top; }
.fs-signals .hs-phone { --w: 78cqw; position: absolute; left: 50%; top: -3cqw; transform: translateX(-50%); z-index: 1; }
.fs-signals .hs-pill { gap: .4rem; padding: .5rem .8rem; font-size: .8rem; }
.fs-signals-tap { right: 0; top: 26cqw; z-index: 4; }

/* Alert and automation catalog */
.fs-catalog { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1rem; margin-top: clamp(1.75rem, 4vw, 2.75rem); padding-top: clamp(1.5rem, 3vw, 2.25rem); border-top: 1px solid var(--cp-border); }
.fs-catalog small { display: flex; align-items: center; gap: .4rem; margin-bottom: .6rem; color: var(--cp-accent); font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.fs-catalog small i { font-size: 1.1rem; }
.fs-catalog ul { display: grid; gap: .4rem; margin: 0; padding: 0; list-style: none; }
.fs-catalog li { padding: .45rem .7rem; border: 1px solid var(--cp-border); border-radius: .7rem; background: color-mix(in srgb, var(--cp-surface) 70%, transparent); color: var(--cp-text); font-size: .8rem; font-weight: 600; line-height: 1.3; }

/* Trust grid, six up */
.fs-trust { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.hs-links { display: flex; flex-wrap: wrap; gap: .25rem 1.5rem; }

/* Plans */
.fs-plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; max-width: 62rem; margin: 0 auto; }
.fs-plan { display: flex; flex-direction: column; padding: 1.75rem; border: 1px solid var(--cp-border); border-radius: 1.5rem; background: var(--cp-surface); }
.fs-plan.is-featured { border-color: var(--cp-accent); background: linear-gradient(180deg, color-mix(in srgb, var(--cp-accent) 10%, var(--cp-surface)), var(--cp-surface) 70%); box-shadow: 0 24px 50px -30px color-mix(in srgb, var(--cp-accent) 60%, transparent); }
.fs-plan small { display: inline-flex; align-self: flex-start; margin-bottom: .75rem; padding: .3rem .7rem; border-radius: 999px; background: var(--cp-accent-soft); color: var(--cp-accent); font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.fs-plan.is-featured small { background: var(--cp-accent); color: #fff; }
.fs-plan h3 { margin: 0 0 .9rem; font-size: 1.35rem; font-weight: 700; letter-spacing: -.02em; }
.fs-plan ul { display: grid; gap: .55rem; margin: 0 0 1.4rem; padding: 0; list-style: none; }
.fs-plan li { display: flex; gap: .5rem; align-items: flex-start; color: var(--cp-text-muted); font-size: .92rem; line-height: 1.45; }
.fs-plan li i { flex: none; margin-top: .1rem; color: #16a34a; font-size: 1.1rem; }
.fs-plan .btn { align-self: flex-start; margin-top: auto; border-radius: .7rem; }
.fs-plan-note { display: flex; align-items: center; gap: .4rem; margin-top: .9rem; color: var(--cp-text-muted); font-size: .8rem; }
.fs-plan-note i { color: var(--cp-accent); }

@media (max-width: 991.98px) {
    .fs-capture { grid-template-columns: 1fr; }
    .fs-capture-tile { min-height: 24rem; }
    .fs-catalog { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .fs-trust { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hs-split > .hs-panel, .hs-split.is-flipped > .hs-panel { justify-self: center; }
}
@media (max-width: 767.98px) {
    .fs-reel { --fs-card: 16.5rem; }
    .fs-catalog { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .fs-trust { grid-template-columns: 1fr; }
    .fs-plans { grid-template-columns: 1fr; }
    .hs-solo .hs-phone-main { --w: 56cqw; }
}
@media (prefers-reduced-motion: reduce) {
    .fs-receipt-scan { animation: none; top: 50%; }
    .fs-capture-tile, .fs-reel-card, .fs-reel-card i { transition: none; }
    .fs-reel-card:hover { transform: none; }
    .fs-reel-card:hover i { transform: none; }
}