.feature-section {
  --fs-base: var(--p3); --fs-ink: var(--p1); --fs-navy: var(--p1);
  --fs-blue: var(--s1); --fs-orange: var(--p2); --fs-white: var(--p3);
  --fs-shadow-near: color-mix(in srgb, var(--p5) 16%, transparent);
  --fs-shadow-far: color-mix(in srgb, var(--p5) 22%, transparent);
  --fs-shadow-ambient: color-mix(in srgb, var(--fs-blue) 9%, transparent);
  --fs-image-ambient-shadow: 0 26px 26px var(--fs-shadow-ambient);
  --fs-card-ambient-shadow: 0 28px 42px var(--fs-shadow-ambient);
  --fs-frame-shadow: 0 16px 38px color-mix(in srgb, var(--fs-blue) 8%, transparent);
  --fs-cta-height: 76px;
  position: relative; isolation: isolate; color: var(--fs-ink); background: var(--fs-base);
  padding: clamp(38px, 3.3vw, 64px) 3.1%; font-family: "roc-grotesk", sans-serif;
}
[data-lisam-theme="dark"] .feature-section {
  --fs-base: var(--p5); --fs-ink: var(--p3); --fs-navy: var(--lisam-dark-header, var(--p1));
  --fs-blue: var(--lisam-dark-blue, var(--s1)); --fs-orange: var(--lisam-dark-orange, var(--p2));
  --fs-shadow-near: color-mix(in srgb, var(--p5) 85%, transparent);
  --fs-shadow-far: color-mix(in srgb, var(--p5) 90%, transparent);
  --fs-shadow-ambient: color-mix(in srgb, var(--fs-blue) 8%, transparent);
  --fs-image-ambient-shadow: 0 12px 14px var(--fs-shadow-ambient);
  --fs-card-ambient-shadow: 0 12px 20px var(--fs-shadow-ambient);
  --fs-frame-shadow: 0 10px 22px color-mix(in srgb, var(--fs-blue) 4%, transparent);
}
.feature-section *, .feature-section *::before, .feature-section *::after { box-sizing: border-box; }
.fs__frame { max-width: 1800px; margin: 0 auto; padding: clamp(30px, 3.8vw, 74px) clamp(22px, 5.2vw, 100px) clamp(34px, 3vw, 60px); border: 1px solid color-mix(in srgb, var(--fs-blue) 65%, transparent); border-radius: 3px; box-shadow: var(--fs-frame-shadow); }
.feature-section .fs__heading { font-size: clamp(29px, 2.5vw, 48px) !important; font-weight: 400; line-height: 1.17; color: var(--fs-ink); margin: 0 0 clamp(38px, 3.8vw, 74px); text-align: left; overflow-wrap: anywhere; }
.fs__heading b { font-weight: inherit; color: var(--fs-orange); }
.fs__features { display: grid; grid-template-columns: repeat(var(--fs-count), minmax(0, 1fr)); gap: clamp(26px, 4vw, 78px); max-width: 1320px; margin-bottom: clamp(38px, 3.9vw, 76px); }
.feature-section .fs__feature h3, .feature-section .fs__highlight h3 { font-size: clamp(22px, 1.45vw, 28px) !important; font-weight: 400; line-height: 1.2; margin: 0 0 14px; color: var(--fs-blue); }
.feature-section .fs__feature p, .feature-section .fs__highlight p { font-size: clamp(16px, .98vw, 19px); line-height: 1.65; margin: 0; color: var(--fs-ink); overflow-wrap: anywhere; }
[data-lisam-theme="dark"] .feature-section .fs__feature h3 { color: var(--fs-white); }
.feature-section p { font-weight: 400; }
.fs__composition { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, .9fr); align-items: stretch; gap: clamp(22px, 3.3vw, 64px); }
.fs__image { min-width: 0; margin: 0; position: relative; align-self: start; border-radius: 3px; }
.fs__image--landscape { aspect-ratio: 16 / 9; }
.fs__image--portrait { aspect-ratio: 4 / 5; }
.fs__image-depth { position: absolute; inset: 0; transform: none; }
.fs__image img { display: block; position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: contain; border-radius: 3px; }
/* Follow the landscape artwork itself, including transparent PNGs.
   Keep this filter on the image so the parent's entrance blur remains independent. */
.fs__image img { filter: drop-shadow(0 5px 7px var(--fs-shadow-near)) drop-shadow(0 22px 20px var(--fs-shadow-far)) drop-shadow(var(--fs-image-ambient-shadow)); }
/* The portrait is a complete 4:5 surface, even when its PNG contains transparency.
   Its shadow follows the frame; all three surfaces stay aligned while scrolling. */
.fs__image--portrait .fs__image-depth { border-radius: 3px; background: var(--fs-base); box-shadow: 0 5px 10px var(--fs-shadow-near), 0 24px 36px var(--fs-shadow-far), var(--fs-card-ambient-shadow); }
.fs__image--portrait img { filter: none; }
.fs__image-dark { visibility: hidden; }
[data-lisam-theme="dark"] .fs__image-main--paired { visibility: hidden; }
[data-lisam-theme="dark"] .fs__image-dark { visibility: visible; }
.fs__highlight { position: relative; isolation: isolate; overflow: hidden; border-radius: 3px; background: var(--fs-navy); padding: clamp(24px, 2.2vw, 42px); min-height: 100%; box-shadow: 0 5px 10px var(--fs-shadow-near), 0 24px 36px var(--fs-shadow-far), var(--fs-card-ambient-shadow); }
.fs__highlight-copy { position: relative; z-index: 1; }
.feature-section .fs__highlight h3 { color: var(--fs-orange); }
.feature-section .fs__highlight p { color: var(--fs-white); }
.fs__highlight-glow { position: absolute; inset: -50%; opacity: .4; background: radial-gradient(ellipse at 70% 20%, color-mix(in srgb, var(--fs-blue) 25%, transparent), transparent 55%); }
.fs--has-cta { padding-bottom: 22px; }
.fs__cta-rail { position: relative; width: max-content; max-width: min(920px, 100%); margin: 20px auto 0; z-index: 5; padding-bottom: env(safe-area-inset-bottom, 0px); }
.fs__cta { display: flex; align-items: center; justify-content: center; gap: 30px; padding: 7px; padding-left: 30px; border-radius: 3px; background: var(--fs-navy); box-shadow: 0 12px 36px color-mix(in srgb, var(--p5) 20%, transparent); }
.feature-section .fs__cta p { font-size: 16px; line-height: 1.35; margin: 0; color: var(--fs-white); }
.feature-section .fs__button { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; gap: 18px; min-height: 52px; padding: 14px 22px; background: var(--fs-blue); color: var(--fs-white); border: 0; border-radius: 3px; font-size: 16px; line-height: 1.25; text-decoration: none; transition: background .25s, box-shadow .25s; }
.fs__button:hover { background: var(--fs-orange); box-shadow: 0 4px 18px color-mix(in srgb, var(--fs-orange) 25%, transparent); }
.fs__button:focus-visible { outline: 2px solid var(--fs-orange); outline-offset: 4px; }
.fs__arrow { display: block; width: 16px; height: 11px; flex: 0 0 16px; }
.fs__arrow svg { display: block; width: 16px; height: 11px; max-width: none; }
.fs__arrow path { fill: currentColor; }
/* The rail is translated within this section, never fixed relative to an ancestor.
   This also handles transformed ancestors and iOS Safari's changing viewport. */
.fs--enhanced.fs--has-cta { padding-bottom: calc(var(--fs-cta-height) + 40px); }
.fs--enhanced > .fs__cta-rail { position: absolute; top: 0; left: 50%; width: max-content; max-width: min(920px, calc(100% - 32px)); margin: 0; transform: translate3d(-50%, var(--fs-cta-y, 0px), 0); visibility: hidden; pointer-events: none; }
.fs--enhanced.fs--cta-visible > .fs__cta-rail { visibility: visible; pointer-events: auto; }
.fs--motion [data-fs-reveal] { opacity: 0; transform: translate3d(0, 48px, 0) scale(.965); filter: blur(8px); transition: opacity .85s ease var(--fs-delay, 0ms), transform 1.1s cubic-bezier(.16,1,.3,1) var(--fs-delay, 0ms), filter .85s ease var(--fs-delay, 0ms); }
.fs--motion [data-fs-reveal].is-revealed { opacity: 1; transform: none; filter: none; }
.fs--motion .fs__image--landscape:not(.is-revealed) { transform: perspective(1000px) translate3d(-45px, 60px, 0) rotateY(7deg) scale(.94); }
.fs--motion .fs__image--portrait:not(.is-revealed) { transform: perspective(1000px) translate3d(30px, 65px, 0) rotateY(-7deg) scale(.94); }
.fs--motion.fs--cta-visible .fs__cta { animation: fs-cta-arrive .85s cubic-bezier(.16,1,.3,1) both; }
.fs--motion .fs__highlight.is-revealed .fs__highlight-glow { animation: fs-glow 10s ease-in-out infinite alternate; }
@keyframes fs-cta-arrive { 0% { opacity: 0; transform: translateY(35px) scale(.92); filter: blur(6px); } 65% { opacity: 1; transform: translateY(-5px) scale(1.015); filter: blur(0); } 100% { opacity: 1; transform: none; filter: none; } }
@keyframes fs-glow { from { transform: translate3d(-8%, -5%, 0) scale(.9); } to { transform: translate3d(12%, 10%, 0) scale(1.15); } }
@media (max-width: 1100px) {
  .fs__frame { padding-left: 32px; padding-right: 32px; }
  .fs__features { gap: 26px; }
  .fs__composition { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); }
  .fs__image--portrait { grid-column: 2; grid-row: 1; }
  .fs__highlight { grid-column: 1 / -1; min-height: 0; }
}
@media (max-width: 700px) {
  .feature-section { padding-left: 5%; padding-right: 5%; }
  .fs__frame { padding: 28px 20px; }
  .feature-section .fs__heading { font-size: clamp(28px, 6.5vw, 36px) !important; margin-bottom: 34px; }
  .fs__features { grid-template-columns: 1fr; gap: 28px; }
  .fs__composition { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .fs__image--portrait { grid-column: auto; grid-row: auto; width: 74%; justify-self: center; }
  .fs__highlight { grid-column: auto; }
  .fs__cta { flex-direction: column; align-items: stretch; gap: 10px; padding: 12px; text-align: center; }
  .feature-section .fs__cta p { font-size: 14px; }
  .feature-section .fs__button { min-height: 46px; font-size: 15px; padding: 12px 16px; flex-shrink: 1; overflow-wrap: anywhere; }
  .fs__cta-rail, .fs--enhanced > .fs__cta-rail { width: 360px; }
}
/* Gutenberg previews are static, readable and never overlay the block editor. */
.fs--editor [data-fs-reveal], .editor-styles-wrapper .feature-section [data-fs-reveal] { opacity: 1; filter: none; transform: none; }
.fs--editor .fs__image-depth { transform: none; }
.fs__empty { color: var(--fs-ink); font-size: 16px; }
@media (prefers-reduced-motion: reduce) {
  .feature-section [data-fs-reveal] { opacity: 1; transform: none; filter: none; transition: none; }
  .feature-section .fs__image-depth { transform: none; }
  .feature-section .fs__cta, .feature-section .fs__highlight-glow { animation: none; }
}