/* Creative Productivity Toolkit solution page v2.0 */
.solution-page { background: #fff; }
.solution-page .site-header { position: sticky; }
.solution-page .button-live {
    color: #fff;
    background: linear-gradient(135deg, #159d86, #0e7969);
    box-shadow: 0 12px 26px rgba(19,141,120,.23);
}
.solution-page .button-live:hover { box-shadow: 0 15px 32px rgba(19,141,120,.31); }

.solution-hero {
    position: relative;
    overflow: hidden;
    padding: 64px 0 82px;
    background:
        radial-gradient(circle at 88% 20%, rgba(33,166,161,.16), transparent 30%),
        radial-gradient(circle at 4% 88%, rgba(49,105,232,.09), transparent 25%),
        linear-gradient(180deg, #f7fcfb 0%, #fff 100%);
}
.solution-hero-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: .92fr 1.08fr;
    gap: clamp(48px, 7vw, 92px);
    align-items: center;
}
.solution-orb { position: absolute; border-radius: 50%; pointer-events: none; }
.solution-orb-one { width: 360px; height: 360px; right: -150px; top: 20px; border: 74px solid rgba(19,141,120,.055); }
.solution-orb-two { width: 210px; height: 210px; left: -90px; bottom: -90px; background: rgba(49,105,232,.045); }
.back-link { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 26px; color: #536178; text-decoration: none; font-size: .84rem; font-weight: 800; }
.back-link:hover { color: var(--live); }
.solution-status { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 18px; padding: 7px 11px; border: 1px solid #cce5df; border-radius: 999px; color: #167764; background: #edf8f5; font-size: .7rem; font-weight: 900; letter-spacing: .075em; text-transform: uppercase; }
.solution-status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--live); box-shadow: 0 0 0 4px rgba(19,141,120,.11); }
.solution-hero h1 { max-width: 680px; margin-bottom: 22px; font-size: clamp(3rem, 5.4vw, 5.45rem); }
.solution-lead { max-width: 680px; margin: 0; color: #445269; font-size: clamp(1.2rem, 2vw, 1.62rem); line-height: 1.5; font-weight: 560; }
.solution-hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.hero-principle { margin: 30px 0 0; color: #69758a; font-size: .94rem; }
.hero-principle strong { color: #193249; }
.solution-hero-visual { position: relative; display: flex; align-items: center; min-height: 520px; }
.solution-window { position: relative; z-index: 2; width: 100%; overflow: hidden; border: 1px solid rgba(195,216,211,.88); border-radius: 26px; background: #fff; box-shadow: 0 32px 86px rgba(29,62,67,.17); }
.solution-window-bar { display: flex; align-items: center; gap: 7px; height: 42px; padding: 0 15px; border-bottom: 1px solid #e5eceb; background: #f9fbfb; }
.solution-window-bar > span { width: 8px; height: 8px; border-radius: 50%; background: #cbd6d5; }
.solution-window-bar > span:first-child { background: #ef928b; }
.solution-window-bar > span:nth-child(2) { background: #efc16f; }
.solution-window-bar > span:nth-child(3) { background: #74c7a3; }
.solution-window-bar small { margin-left: 5px; color: #7b8798; font-size: .66rem; font-weight: 750; }
.solution-window-media { min-height: 470px; display: grid; place-items: center; padding: 0; background: radial-gradient(circle at 50% 20%, #fff 0%, #eef8f6 62%, #e2efee 100%); }
.solution-window-media img { width: 125% !important; max-height: 455px; object-fit: contain; object-position: center bottom; }

.solution-section { padding: 96px 0; }
.opening-grid { display: grid; grid-template-columns: .88fr 1.12fr; gap: clamp(44px, 8vw, 110px); align-items: start; }
.opening-heading h2 { max-width: 580px; }
.opening-copy p { margin-top: 0; color: var(--muted); font-size: 1.1rem; }
.opening-copy p + p { margin-top: 22px; }
.outcome-band { display: grid; grid-template-columns: 130px 1fr; gap: 28px; align-items: center; margin-top: 58px; padding: 28px 32px; border: 1px solid #d7e8e3; border-radius: 20px; background: linear-gradient(135deg, #f7fcfb, #edf8f5); }
.outcome-label { color: #167764; font-size: .68rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.outcome-band p { margin: 0; color: #26384d; font-size: 1.08rem; font-weight: 750; }

.toolkit-section { background: #f5f9f8; }
.toolkit-intro { max-width: 850px; text-align: center; }
.toolkit-intro h2 { margin-left: auto; margin-right: auto; }
.toolkit-intro > p:last-child { max-width: 690px; margin: 18px auto 0; color: var(--muted); font-size: 1.06rem; }
.application-list { display: grid; gap: 72px; margin-top: 66px; }
.application-block { display: grid; grid-template-columns: 1.12fr .88fr; gap: clamp(42px, 7vw, 88px); align-items: center; padding: clamp(24px, 4vw, 44px); border: 1px solid #dbe8e5; border-radius: 30px; background: #fff; box-shadow: 0 22px 55px rgba(29,60,65,.07); }
.application-block--reverse .application-media { order: 2; }
.application-browser { overflow: hidden; border: 1px solid #dbe4e6; border-radius: 18px; background: #fff; box-shadow: 0 18px 45px rgba(29,45,70,.12); }
.application-browser-bar { display: flex; gap: 6px; align-items: center; height: 34px; padding: 0 12px; border-bottom: 1px solid #e7ecee; background: #f8fafb; }
.application-browser-bar span { width: 7px; height: 7px; border-radius: 50%; background: #cbd5d8; }
.application-browser img { display: block; width: 100%; height: auto; }
.application-topline { display: flex; align-items: center; gap: 12px; margin-bottom: 28px; }
.application-topline span { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; color: #fff; background: linear-gradient(135deg, #159d86, #0e7969); font-size: .72rem; font-weight: 900; }
.application-topline small { color: #718095; font-size: .67rem; font-weight: 900; letter-spacing: .11em; text-transform: uppercase; }
.application-name { margin: 0 0 10px; color: #138d78; font-size: .78rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.application-copy h3 { margin-bottom: 18px; font-size: clamp(1.9rem, 3.3vw, 3.05rem); line-height: 1.08; }
.application-copy > p:not(.application-name) { color: var(--muted); font-size: 1.02rem; }
.application-result { margin-top: 28px; padding-top: 24px; border-top: 1px solid #e3e9eb; }
.application-result span, .application-result strong { display: block; }
.application-result span { margin-bottom: 7px; color: #7c8899; font-size: .67rem; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; }
.application-result strong { color: #23364c; font-size: .96rem; line-height: 1.45; }

.time-section { color: #fff; background: #102238; }
.time-grid { display: grid; grid-template-columns: .86fr 1.14fr; gap: clamp(48px, 8vw, 100px); align-items: center; }
.time-copy h2 { color: #fff; }
.time-copy p:not(.eyebrow) { color: #c5d0de; font-size: 1.05rem; }
.responsibility-card { display: grid; grid-template-columns: 1fr 70px 1fr; align-items: stretch; padding: 18px; border: 1px solid rgba(255,255,255,.1); border-radius: 28px; background: rgba(255,255,255,.055); }
.responsibility-column { padding: 30px; border-radius: 20px; }
.responsibility-column--software { background: rgba(19,141,120,.18); }
.responsibility-column--people { background: rgba(49,105,232,.15); }
.responsibility-column > span, .responsibility-column > strong { display: block; }
.responsibility-column > span { color: #aebed0; font-size: .67rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.responsibility-column > strong { margin-top: 8px; color: #fff; font-size: 1.25rem; }
.responsibility-column ul { margin: 24px 0 0; padding-left: 18px; color: #d5deea; }
.responsibility-column li + li { margin-top: 9px; }
.responsibility-divider { display: grid; place-items: center; }
.responsibility-divider span { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid rgba(255,255,255,.14); border-radius: 50%; color: #d7e2ec; background: #152d48; font-size: .7rem; font-weight: 900; text-transform: uppercase; }

.manifesto-section { padding: 110px 0; background: linear-gradient(135deg, #eef9f6 0%, #fff 48%, #eef3ff 100%); }
.manifesto { max-width: 980px; text-align: center; }
.manifesto h2 { margin: 0 auto; font-size: clamp(3rem, 6vw, 6.2rem); line-height: .98; }
.manifesto h2 span { display: block; color: #138d78; }
.manifesto > p:last-child { max-width: 800px; margin: 30px auto 0; color: #536178; font-size: 1.12rem; }

.real-work-grid { display: grid; grid-template-columns: .82fr 1.18fr; gap: clamp(46px, 8vw, 100px); align-items: start; }
.real-work-copy { position: sticky; top: 120px; }
.real-work-points { display: grid; gap: 14px; }
.real-work-points article { display: grid; grid-template-columns: 54px 1fr; gap: 20px; padding: 26px; border: 1px solid var(--line); border-radius: 20px; background: #fff; }
.real-work-points article > span { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; color: #138d78; background: #edf8f5; font-size: .72rem; font-weight: 900; }
.real-work-points h3 { margin-bottom: 6px; font-size: 1.16rem; }
.real-work-points p { margin: 0; color: var(--muted); }

.next-section { background: #f5f9f8; }
.next-card { display: flex; justify-content: space-between; align-items: center; gap: 44px; padding: clamp(34px, 5vw, 58px); border: 1px solid #d9e8e4; border-radius: 30px; background: linear-gradient(135deg, #fff, #edf8f5); box-shadow: 0 20px 50px rgba(29,60,65,.07); }
.next-card p:last-child { max-width: 700px; margin-bottom: 0; color: var(--muted); }
.next-actions { display: flex; flex-wrap: wrap; gap: 12px; flex-shrink: 0; }

@media (max-width: 1020px) {
    .solution-hero-grid, .opening-grid, .time-grid, .real-work-grid { grid-template-columns: 1fr; }
    .solution-hero-visual { min-height: 0; max-width: 780px; margin: 0 auto; }
    .application-block { grid-template-columns: 1fr; }
    .application-block--reverse .application-media { order: 0; }
    .real-work-copy { position: static; }
    .next-card { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 720px) {
    .solution-hero { padding: 42px 0 60px; }
    .solution-hero h1 { font-size: clamp(2.65rem, 13vw, 4.1rem); }
    .solution-window-media { min-height: 300px; }
    .solution-section { padding: 72px 0; }
    .outcome-band { grid-template-columns: 1fr; gap: 8px; }
    .application-list { gap: 34px; margin-top: 42px; }
    .application-block { padding: 18px; border-radius: 22px; }
    .application-copy { padding: 4px 4px 8px; }
    .responsibility-card { grid-template-columns: 1fr; }
    .responsibility-divider { min-height: 66px; }
    .manifesto-section { padding: 82px 0; }
    .real-work-points article { grid-template-columns: 44px 1fr; padding: 20px; }
}