/* Visual storytelling system for Products / Why FDE / Kale's Goals — Art × UI editorial treatment. */
.visual-board{position:relative;margin-top:34px;padding:24px;border:1px solid var(--line-strong,var(--line));background:rgba(255,253,248,.70);overflow:visible;box-shadow:6px 6px 0 rgba(36,79,55,.06)}
.visual-board::before{content:"";position:absolute;width:520px;height:360px;right:-160px;top:-130px;background:url('assets/art-ui-brush.svg') center/contain no-repeat;opacity:.08;pointer-events:none}
.visual-board::after{content:"";position:absolute;left:-42px;bottom:-48px;width:150px;height:150px;background:url('assets/art-ui-annotation.svg') center/contain no-repeat;opacity:.16;transform:rotate(-9deg);pointer-events:none;z-index:2}
.visual-board img{position:relative;z-index:1;width:100%;height:auto;display:block;filter:saturate(.76) contrast(.98)}
.visual-board-caption{position:relative;z-index:1;display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin-top:20px;background:var(--line);border:1px solid var(--line)}
.visual-board-caption div{background:var(--paper-soft,#fbf8f1);padding:18px 20px}.visual-board-caption div:nth-child(2){background:#eee7da}.visual-board-caption small{display:block;color:var(--green);font-size:9px;letter-spacing:.15em;text-transform:uppercase;font-weight:900;margin-bottom:6px}.visual-board-caption strong{font-family:var(--serif,Georgia,serif);font-size:16px;line-height:1.4;color:var(--ink);font-weight:600}
.products-visual-section{padding-top:54px!important;padding-bottom:62px!important;background:rgba(251,248,241,.42)!important}.products-visual-intro{display:grid;grid-template-columns:minmax(0,.68fr) minmax(0,1.32fr);gap:58px;align-items:center}.products-visual-copy{padding-top:34px}.products-visual-copy .section-title{max-width:9ch}.products-visual-copy p{max-width:34ch}.products-visual-intro .visual-board{transform:rotate(.35deg)}.products-flow-rail{display:grid;grid-template-columns:1fr 70px 1fr 70px 1fr;align-items:center;margin-top:34px}.products-flow-rail article{position:relative;padding:24px 18px;border:1px solid var(--line-strong,var(--line));background:rgba(255,253,248,.72);min-height:126px}.products-flow-rail article:nth-of-type(2){transform:translateY(10px);background:#efe8dc}.products-flow-rail article:before{content:"";position:absolute;left:16px;top:-1px;width:46px;height:2px;background:var(--green);transform:skewX(-18deg)}.products-flow-rail article b{display:block;font-size:9px;color:var(--green);letter-spacing:.15em;margin-bottom:10px}.products-flow-rail article strong{font-family:var(--serif,Georgia,serif);font-size:20px;line-height:1.3;color:var(--ink);font-weight:600}.products-flow-arrow{text-align:center;font-size:25px;color:var(--green)}
.fde-core-section{background:rgba(251,248,241,.38)!important}.fde-core-section .visual-board{margin-top:24px;transform:rotate(-.25deg)}.visual-gap{margin-top:34px;display:grid;grid-template-columns:1fr 120px 1.1fr 120px 1fr;align-items:center}.visual-gap-node{position:relative;min-height:230px;border:1px solid var(--line-strong,var(--line));background:rgba(255,253,248,.74);padding:30px;display:flex;flex-direction:column;justify-content:space-between;color:var(--ink)}.visual-gap-node:first-child{transform:rotate(-.32deg) translateY(6px)}.visual-gap-node:last-child{transform:rotate(.28deg) translateY(12px)}.visual-gap-node:before{content:"";position:absolute;left:16px;top:14px;width:22px;height:1px;background:var(--green);transform:rotate(-12deg)}.visual-gap-node small{font-size:9px;color:var(--green);font-weight:900;letter-spacing:.15em;text-transform:uppercase}.visual-gap-node strong{font-family:var(--serif,Georgia,serif);font-size:clamp(29px,3vw,44px);font-weight:600;line-height:1.02;letter-spacing:-.035em;color:var(--ink)}.visual-gap-node span{font-size:13px;color:var(--muted);line-height:1.75}.visual-gap-node.focus{position:relative;background:#efe8dc!important;color:var(--ink)!important;border-color:var(--green)!important;box-shadow:7px 7px 0 rgba(36,79,55,.07);transform:translateY(-10px)}.visual-gap-node.focus:after{content:"";position:absolute;right:-55px;top:-45px;width:190px;height:150px;background:url('assets/art-ui-brush.svg') center/contain no-repeat;opacity:.09;pointer-events:none}.visual-gap-node.focus small{color:var(--green-deep)!important}.visual-gap-node.focus strong{color:var(--ink)!important}.visual-gap-node.focus span{color:#526058!important}.visual-gap-bridge{position:relative;text-align:center;color:var(--green)}.visual-gap-bridge::before{content:"";position:absolute;left:5px;right:5px;top:50%;height:1px;background:var(--line-strong,var(--line))}.visual-gap-bridge span{position:relative;z-index:1;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;margin:auto;background:var(--paper-soft,#fbf8f1);border:1px solid var(--green);font-size:21px}.visual-gap-result{position:relative;margin-top:26px;padding:26px 30px;background:#ece5d8;border-left:3px solid var(--green);display:flex;justify-content:space-between;align-items:center;gap:24px}.visual-gap-result:after{content:"";position:absolute;right:18px;bottom:-34px;width:118px;height:118px;background:url('assets/art-ui-annotation.svg') center/contain no-repeat;opacity:.10;pointer-events:none}.visual-gap-result strong{font-family:var(--serif,Georgia,serif);font-size:clamp(24px,2.5vw,36px);font-weight:600;letter-spacing:-.025em}.visual-gap-result small{font-size:9px;color:var(--green);font-weight:900;letter-spacing:.15em;text-transform:uppercase}
.goal-visual-section{background:rgba(251,248,241,.42)!important}.goal-visual-section .visual-board{padding:18px;transform:rotate(.28deg)}.approach-rail{margin-top:40px;display:grid;grid-template-columns:1fr 90px 1fr 90px 1fr;align-items:center}.approach-item{text-align:center;padding:20px 16px;position:relative}.approach-item:nth-of-type(2){transform:translateY(18px)}.approach-item:nth-of-type(3){transform:translateY(-8px)}.approach-item:before{content:"";position:absolute;left:50%;top:0;width:34px;height:1px;background:var(--green);transform:translateX(-50%) rotate(-8deg)}.approach-icon{width:88px;height:88px;border-radius:2px;display:grid;place-items:center;margin:0 auto 20px;background:rgba(255,253,248,.75);border:1px solid var(--line-strong,var(--line));box-shadow:4px 4px 0 rgba(36,79,55,.05)}.approach-icon svg{width:40px;height:40px;stroke:var(--green);fill:none;stroke-width:1.6}.approach-item small{display:block;color:var(--green);font-size:9px;font-weight:900;letter-spacing:.14em;margin-bottom:7px}.approach-item h3{font-family:var(--serif,Georgia,serif);font-size:clamp(29px,3vw,41px);font-weight:600;line-height:1.04;letter-spacing:-.025em;margin:0 0 8px}.approach-item p{font-size:13px;line-height:1.7;color:var(--muted);max-width:28ch;margin:0 auto}.approach-connector{height:1px;background:var(--line-strong,var(--line));position:relative}.approach-connector::after{content:"";position:absolute;right:0;top:-4px;width:8px;height:8px;border-top:1px solid var(--green);border-right:1px solid var(--green);transform:rotate(45deg)}
.principle-poster{display:grid;grid-template-columns:repeat(3,1fr);margin-top:36px;border-top:1px solid rgba(255,255,255,.22);border-bottom:1px solid rgba(255,255,255,.22)}.principle-poster article{position:relative;padding:38px 30px 42px;border-right:1px solid rgba(255,255,255,.2);min-height:280px;display:flex;flex-direction:column}.principle-poster article:nth-child(2){background:rgba(255,255,255,.035);transform:translateY(12px)}.principle-poster article:last-child{border-right:0}.principle-poster article:before{content:"";position:absolute;right:16px;top:16px;width:58px;height:58px;background:url('assets/art-ui-annotation.svg') center/contain no-repeat;opacity:.08;filter:grayscale(1) brightness(2.2)}.principle-poster .poster-no{font-family:var(--serif,Georgia,serif);font-size:clamp(58px,8vw,104px);line-height:.9;font-weight:600;letter-spacing:-.06em;color:rgba(255,255,255,.14)}.principle-poster h3{font-family:var(--serif,Georgia,serif);font-size:clamp(29px,3vw,44px);font-weight:600;line-height:1.04;letter-spacing:-.025em;margin:auto 0 12px;color:#fff}.principle-poster p{margin:0;color:rgba(255,255,255,.68);font-size:13px;line-height:1.7;max-width:30ch}
@media(max-width:1000px){.products-visual-intro{grid-template-columns:1fr;gap:26px}.products-visual-copy{padding-top:0}.products-visual-copy .section-title{max-width:none}.visual-gap{grid-template-columns:1fr 70px 1fr 70px 1fr}.approach-rail{grid-template-columns:1fr 60px 1fr 60px 1fr}}
@media(max-width:760px){.visual-board{box-sizing:border-box;width:calc(100vw - 16px);max-width:none;margin-left:calc(50% - 50vw + 8px);margin-right:0;padding:6px;overflow:hidden;box-shadow:3px 3px 0 rgba(36,79,55,.05);transform:none!important}.visual-board::before{display:none}.visual-board::after{left:-28px;bottom:-34px;width:110px;height:110px;opacity:.09}.visual-board img{width:100%;max-width:100%;min-width:0;height:auto}.visual-board-caption{grid-template-columns:repeat(3,minmax(0,1fr));min-width:0;margin-top:8px}.visual-board-caption div{padding:12px 8px}.visual-board-caption small{font-size:8px;letter-spacing:.07em}.visual-board-caption strong{font-size:12px;line-height:1.35}.products-flow-rail,.visual-gap,.approach-rail{grid-template-columns:1fr}.products-flow-rail article:nth-of-type(2),.visual-gap-node:first-child,.visual-gap-node:last-child,.visual-gap-node.focus,.approach-item:nth-of-type(2),.approach-item:nth-of-type(3){transform:none}.products-flow-arrow{transform:rotate(90deg);padding:8px}.visual-gap-bridge{height:68px}.visual-gap-bridge::before{left:50%;right:auto;top:0;bottom:0;width:1px;height:auto}.visual-gap-bridge span{top:8px}.visual-gap-node{min-height:170px}.visual-gap-result{align-items:flex-start;flex-direction:column}.approach-connector{height:62px;width:1px;margin:auto;background:var(--line-strong,var(--line))}.approach-connector::after{right:-4px;top:auto;bottom:0;transform:rotate(135deg)}.principle-poster{grid-template-columns:1fr}.principle-poster article,.principle-poster article:nth-child(2){border-right:0;border-bottom:1px solid rgba(255,255,255,.2);min-height:220px;transform:none}.principle-poster article:last-child{border-bottom:0}.principle-poster .poster-no{font-size:72px}}
@media(max-width:430px){.visual-board{width:calc(100vw - 8px);margin-left:calc(50% - 50vw + 4px);padding:4px}.visual-board-caption div{padding:10px 6px}.visual-board-caption strong{font-size:11px}}