/* marketing-product.css: app scenes on the product pages (prefix gp-pd-). Builds on the shared
   app-mock classes in marketing.css (.gp-app, .gp-card, .gp-chip, .gp-sl, .gp-tile, .gp-tip). */

.gp-pd-mock .gp-app-content { gap: 10px; }
.gp-pd-more { padding: 0 3px; font-size: 14px; line-height: 1; color: #6b7280; }
.gp-pd-flash { animation: gpPdFlash 1.2s ease-out; border-radius: 4px; }
@keyframes gpPdFlash { 0%, 25% { background-color: rgba(43,135,184,.18); } 100% { background-color: transparent; } }
.gp-pd-hide { display: none !important; }

/* Dropdowns */
.gp-pd-dd { position: relative; display: inline-flex; }
.gp-pd-dd [data-dd-btn] svg { width: 10px; height: 10px; fill: #6b7280; }
.gp-pd-dd.open > [data-dd-btn] { box-shadow: 0 0 0 1.5px #2b87b8; }
.gp-pd-menu { position: absolute; top: calc(100% + 5px); right: 0; z-index: 14; display: flex; flex-direction: column; min-width: 140px; padding: 4px; border-radius: 10px; background: #fff;
    box-shadow: 0 18px 36px -14px rgba(0,0,0,.3), 0 0 0 1px rgba(15,23,42,.07); opacity: 0; transform: translateY(-4px); pointer-events: none; transition: opacity .2s ease, transform .25s ease; }
.gp-pd-dd.open .gp-pd-menu { opacity: 1; transform: none; }
.gp-pd-menu span { padding: 6px 10px; border-radius: 7px; font-size: 11px; font-weight: 400; color: #1f2937; white-space: nowrap; }
.gp-pd-menu span.hl { background: #e8f2f8; color: #1f4f66; }
.gp-pd-link { display: inline-block; padding: 1px 6px; margin-left: 3px; border-radius: 5px; color: #2b87b8; font-weight: 600; box-shadow: 0 0 0 1px #e5e7eb; }
.gp-sl .gp-pd-menu { left: 0; right: auto; }

/* Forecast levers */
.gp-pd-levers { padding: 0; }
.gp-pd-levers .gp-sliders { padding: 14px 18px 4px; gap: 26px; }
.gp-pd-levers .gp-sl b { display: flex; align-items: center; gap: 2px; font-size: 12.5px; }
.gp-pd-levers .gp-sl small { display: block; min-height: 13px; font-size: 10px; transition: color .3s ease; }
.gp-pd-levers-f { display: flex; align-items: center; justify-content: space-between; padding: 6px 18px 12px; }
.gp-pd-howlink { font-size: 10.5px; font-weight: 500; color: #15803d; }
.gp-pd-reset { padding: 5px 20px; border-radius: 999px; background: #1f6f9f; color: #fff; font-size: 11px; font-weight: 600; }
.gp-pd-fcres { padding: 10px 14px 10px; }
.gp-pd-legend { display: flex; gap: 14px; margin: 0 0 4px; font-size: 10px; color: #4b5563; }
.gp-pd-legend span { display: inline-flex; align-items: center; gap: 5px; transition: opacity .3s ease; }
.gp-pd-legend i { width: 14px; height: 0; border-top: 2px solid #2a78a8; }
.gp-pd-legend i.base { border-top: 2px dashed #9ca3af; } .gp-pd-legend i.scen { border-top-color: #1e9365; }
.gp-pd-kpis b { transition: color .3s ease; }
.gp-pd-kpis span { font-size: 10.5px; color: #4b5563; } .gp-pd-kpis em { margin-left: 3px; }

/* Forecast math */
.gp-pd-math { display: grid; grid-template-columns: 250px 1fr; gap: 10px; }
.gp-pd-cap { margin-bottom: 10px; font-size: 11.5px; font-weight: 600; color: #111827; } .gp-pd-cap span { margin-left: 6px; font-weight: 400; color: #6b7280; }
.gp-pd-base { padding: 12px 14px; }
.gp-pd-base-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; }
.gp-pd-base-grid small { display: block; font-size: 10px; color: #6b7280; } .gp-pd-base-grid b { font-size: 16px; font-weight: 500; color: #111827; }
.gp-pd-formula { padding: 12px 16px 14px; background: linear-gradient(135deg, #f7fbfd, #fff); }
.gp-pd-eq { display: flex; align-items: flex-start; gap: 8px; padding: 4px 0; border-radius: 10px; }
.gp-pd-eq .t { display: flex; flex-direction: column; align-items: center; padding: 7px 10px 6px; border-radius: 9px; background: #fff; box-shadow: 0 0 0 1px #e5eaef; }
.gp-pd-eq .t b { font-size: 17px; font-weight: 600; color: #111827; font-variant-numeric: tabular-nums; }
.gp-pd-eq .t small { margin-top: 2px; font-size: 9.5px; color: #6b7280; white-space: nowrap; }
.gp-pd-eq .t.nrr b { color: #1f6f9f; } .gp-pd-eq .t.res { background: #ecf7f1; box-shadow: 0 0 0 1px #bfe3cf; } .gp-pd-eq .t.res b { color: #15803d; }
.gp-pd-eq .op { padding-top: 8px; font-size: 16px; color: #9ca3af; }
.gp-pd-eq.gp-pd-pulse .t { animation: gpPdTok .9s ease; }
@keyframes gpPdTok { 0% { transform: translateY(3px); opacity: .4; } 100% { transform: none; opacity: 1; } }
.gp-pd-table { padding: 6px 12px 8px; }
.gp-pd-table table { width: 100%; border-collapse: collapse; font-size: 11px; }
.gp-pd-table th { padding: 7px 8px; font-weight: 600; text-align: right; color: #111827; transition: background .3s ease; border-radius: 6px 6px 0 0; }
.gp-pd-table td { height: 29px; padding: 0 8px; text-align: right; border-top: 1px solid #f1f3f5; white-space: nowrap; color: #1f2937; transition: background .3s ease; }
.gp-pd-table td:first-child { text-align: left; font-weight: 500; color: #111827; } .gp-pd-table td:first-child .gp-i { display: inline-block; margin-left: 2px; vertical-align: -1px; }
.gp-pd-table td[data-r] { opacity: 0; } .gp-pd-table td[data-r].in { animation: gpPdIn .45s ease forwards; }
@keyframes gpPdIn { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
.gp-pd-table td[data-r="nb"] { color: #16a34a; } .gp-pd-table td[data-r="ex"] { color: #b91c1c; } .gp-pd-table td[data-r="gr"] { color: #16a34a; font-size: 10px; }
.gp-pd-table tr.tot td { font-weight: 600; border-top: 1px solid #e5e7eb; }
.gp-pd-table .hl { background: #f0f7fb; }

/* Cashflow forecast */
.gp-pd-opts { padding: 10px 14px; }
.gp-pd-assume { font-size: 11px; color: #374151; }
.gp-pd-chks { display: flex; gap: 22px; margin-top: 9px; font-size: 11px; color: #1f2937; }
.gp-pd-chk { display: inline-flex; align-items: center; gap: 6px; }
.gp-pd-chk > i { position: relative; width: 14px; height: 14px; border-radius: 4px; background: #fff; box-shadow: 0 0 0 1px #cbd5e1; transition: background .2s ease, box-shadow .2s ease; }
.gp-pd-chk.on > i { background: #1f6f9f; box-shadow: 0 0 0 1px #1f6f9f; }
.gp-pd-chk.on > i::after { content: ""; position: absolute; left: 4.5px; top: 1.5px; width: 3.5px; height: 7px; border: solid #fff; border-width: 0 1.8px 1.8px 0; transform: rotate(45deg); }
.gp-pd-chk .gp-i svg { width: 10px; height: 10px; }
.gp-pd-cashfc { padding: 10px 14px 10px; }
.gp-pd-hr { display: flex; align-items: center; gap: 6px; }
.gp-pd-plot { position: relative; } .gp-pd-plot svg { display: block; }
.gp-pd-kpis3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; margin-top: 8px; padding-top: 8px; border-top: 1px solid #f1f3f5; }
.gp-pd-kpis3 b { display: block; font-size: 17px; font-weight: 500; color: #111827; } .gp-pd-kpis3 span { font-size: 10.5px; color: #4b5563; }
.gp-pd-kpis3 > div:nth-child(2) { text-align: center; } .gp-pd-kpis3 > div:nth-child(3) { text-align: right; }

/* Dashboard widgets */
.gp-pd-dash { display: grid; grid-template-columns: 1fr 250px; gap: 10px; min-height: 0; }
.gp-pd-dmain { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.gp-pd-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.gp-pd-tiles .gp-tile { position: relative; min-height: 62px; }
.gp-pd-period { font-size: 10px; color: #9ca3af; }
.gp-pd-exp { transition: box-shadow .4s ease, background .4s ease; }
.gp-pd-exp:not(.in) { background: transparent; box-shadow: inset 0 0 0 1.5px #cfd8e0; }
.gp-pd-exp:not(.in) > * { opacity: 0; }
.gp-pd-exp.in > .gp-tile-h, .gp-pd-exp.in > b { animation: gpPdIn .5s ease; }
.gp-pd-exptip { left: 16px; top: 58px; }
.gp-pd-bars { flex: 1; } .gp-pd-bars svg { display: block; margin-top: 4px; }
.gp-pd-renew { position: relative; padding: 10px 10px; }
.gp-pd-renew-h { display: flex; align-items: center; justify-content: space-between; padding: 0 4px 6px; }
.gp-pd-renew-h b { display: flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 500; color: #6b7280; } .gp-pd-renew-h > span { font-size: 10px; color: #9ca3af; }
.gp-pd-rrow { display: grid; grid-template-columns: 8px 1fr auto; gap: 8px; align-items: center; padding: 7px 6px; border-top: 1px solid #f1f3f5; border-radius: 6px; transition: background .25s ease; }
.gp-pd-rrow.hover { background: #f3f7fa; }
.gp-pd-rrow > i { width: 7px; height: 7px; border-radius: 50%; }
.gp-pd-rrow b { display: block; font-size: 11.5px; font-weight: 500; color: #111827; } .gp-pd-rrow span { font-size: 9.5px; color: #6b7280; }
.gp-pd-rrow em { font-size: 11.5px; color: #16a34a; }
.gp-pd-rtip { left: -150px; top: 64px; white-space: normal; width: 180px; }
.gp-pd-panel { position: absolute; top: 40px; right: 0; bottom: 0; z-index: 12; width: 270px; padding: 14px; background: #fff; border-radius: 0 14px 14px 0;
    box-shadow: -18px 0 40px -20px rgba(15,23,42,.35), 0 0 0 1px rgba(15,23,42,.06); transform: translateX(104%); opacity: 0; transition: transform .45s cubic-bezier(.2,.8,.2,1), opacity .3s ease; }
.gp-pd-panel.on { transform: none; opacity: 1; }
.gp-pd-panel-h { display: flex; justify-content: space-between; align-items: center; font-size: 14px; color: #111827; } .gp-pd-panel-h span { font-size: 16px; color: #9ca3af; }
.gp-pd-panel-tabs { display: flex; gap: 14px; margin: 12px 0 10px; border-bottom: 1px solid #e5e7eb; font-size: 11px; color: #374151; }
.gp-pd-panel-tabs span { padding-bottom: 7px; } .gp-pd-panel-tabs .on { color: #1f6f9f; box-shadow: inset 0 -2px 0 #1f6f9f; }
.gp-pd-panel-list { display: flex; flex-direction: column; gap: 4px; }
.gp-pd-panel-list span { display: flex; align-items: center; justify-content: space-between; padding: 8px 10px; border-radius: 8px; font-size: 11.5px; color: #1f2937; box-shadow: 0 0 0 1px #edf0f3; transition: background .2s ease; }
.gp-pd-panel-list span.hl { background: #e8f2f8; box-shadow: 0 0 0 1px #9cc7df; }
.gp-pd-panel-list small { padding: 1px 6px; border-radius: 999px; background: #dcf5e6; color: #15803d; font-size: 9px; font-weight: 600; }

/* GrowPanel AI */
.gp-pd-ai-bg { width: 462px; }
.gp-pd-ai-bg svg { display: block; }
.gp-pd-kpis2 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-top: 6px; padding-top: 8px; border-top: 1px solid #f1f3f5; }
.gp-pd-kpis2 b { display: block; font-size: 15px; font-weight: 500; color: #111827; } .gp-pd-kpis2 span { font-size: 10px; color: #4b5563; }
.gp-pd-ai-bg2 { width: 462px; flex: 1; }
.gp-pd-skel { display: flex; flex-direction: column; gap: 9px; padding: 6px 0; }
.gp-pd-skel i { height: 9px; border-radius: 5px; background: #f1f4f7; } .gp-pd-skel i:nth-child(2) { width: 80%; } .gp-pd-skel i:nth-child(3) { width: 60%; }
.gp-pd-ai { position: absolute; top: 0; right: 0; bottom: 0; z-index: 12; width: 350px; display: flex; flex-direction: column; background: #fff; border-radius: 0 14px 14px 0;
    box-shadow: -14px 0 34px -22px rgba(15,23,42,.35), 0 0 0 1px rgba(15,23,42,.07); font-family: 'Public Sans', system-ui, sans-serif; color: #1f2937; }
.gp-pd-ai-h { display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 14px; border-bottom: 1px solid #eef0f3; }
.gp-pd-ai-h b { font-size: 13px; font-weight: 600; color: #111827; } .gp-pd-ai-h span { margin-left: auto; font-size: 10.5px; color: #6b7280; } .gp-pd-ai-h .x { font-style: normal; font-size: 15px; color: #6b7280; }
.gp-pd-ai-body { flex: 1; display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; overflow: hidden; font-size: 11.5px; line-height: 1.55; }
.gp-pd-ai-hi { color: #374151; }
.gp-pd-ai-u { align-self: flex-end; max-width: 82%; padding: 8px 11px; border-radius: 12px 12px 3px 12px; background: #0b72c6; color: #fff; }
.gp-pd-ai-u.in { animation: gpPdIn .35s ease; }
.gp-pd-ai-chip { align-self: flex-start; padding: 4px 10px; border-radius: 999px; background: #f1f5f9; font-size: 10.5px; color: #475569; animation: gpPdChip 1.4s ease-in-out infinite; }
@keyframes gpPdChip { 50% { opacity: .55; } }
.gp-pd-ai-a { color: #1f2937; } .gp-pd-ai-a b { font-weight: 600; color: #111827; }
.gp-pd-ai-t { width: 100%; margin-top: 10px; border-collapse: collapse; font-size: 11px; }
.gp-pd-ai-t th, .gp-pd-ai-t td { padding: 5px 8px; text-align: right; border: 1px solid #e5e7eb; white-space: nowrap; }
.gp-pd-ai-t th { background: #f8fafc; font-weight: 600; } .gp-pd-ai-t td:first-child, .gp-pd-ai-t th:first-child { text-align: left; }
.gp-pd-ai-t em { font-size: 10px; }
.gp-pd-ai-foot { margin-top: 8px; font-size: 10px; color: #6b7280; }
.gp-pd-rise { animation: gpPdIn .5s ease; }
.gp-pd-ai-in { display: flex; align-items: center; gap: 4px; margin: 10px 12px 12px; padding: 9px 10px; border-radius: 10px; font-size: 11.5px; color: #111827; box-shadow: 0 0 0 1px #d6dbe1; min-height: 38px; }
.gp-pd-ai-in [data-ai-input]:empty::before { content: "Ask about your data, the app, or get help..."; color: #9ca3af; }
.gp-pd-ai-in .caret { width: 1px; height: 14px; background: #111827; animation: gpBlink 1s steps(1) infinite; }
.gp-pd-ai-in .send { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; margin-left: auto; border-radius: 8px; background: #0b72c6; }
.gp-pd-ai-in .send svg { width: 12px; height: 12px; }
.gp-pd-mock .gp-app { position: relative; }
.gp-pd-mock .gp-card-h > b { display: flex; align-items: center; gap: 4px; }
.gp-pd-tiles { grid-template-columns: 1fr 1fr 1.3fr; }
.gp-pd-exp .gp-tile-h > span:first-child { white-space: nowrap; }
.gp-pd-exptip { left: 70px; top: 30px; }

/* Cashflow scenes */
.gp-pd-mock .gp-app-head { position: relative; }
.gp-pd-gb { cursor: default; }
.gp-pd-cashcard { padding: 10px 14px; }
.gp-pd-cashtable { position: relative; padding: 4px 12px 6px; }
.gp-pd-cashtable table { width: 100%; border-collapse: collapse; font-size: 11px; }
.gp-pd-cashtable th { padding: 7px 8px; font-weight: 600; text-align: right; color: #111827; }
.gp-pd-cashtable td { height: 27px; padding: 0 8px; text-align: right; border-top: 1px solid #f1f3f5; white-space: nowrap; color: #1f2937; font-variant-numeric: tabular-nums; transition: background .25s ease; }
.gp-pd-cashtable td:first-child { text-align: left; font-weight: 500; color: #111827; }
.gp-pd-cashtable td:first-child > i { display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; vertical-align: 0; }
.gp-pd-cashtable td:first-child .gp-i { display: inline-block; margin-left: 3px; vertical-align: -1px; }
.gp-pd-cashtable tr.ref td { color: #9ca3af; } .gp-pd-cashtable tr.ref td:first-child { color: #6b7280; font-weight: 400; }
.gp-pd-cashtable tr.tot td { font-weight: 600; border-top: 1px solid #e5e7eb; }
.gp-pd-cashtable tr.hl td { background: #f0f7fb; }
.gp-pd-rowtip { width: 250px; white-space: normal; line-height: 1.45; font-size: 10.5px; color: #374151; }
.gp-pd-fwrap { position: relative; display: inline-flex; }
.gp-pd-fpanel { position: absolute; top: calc(100% + 6px); left: 0; z-index: 15; display: flex; padding: 6px; border-radius: 12px; background: #fff;
    box-shadow: 0 20px 40px -14px rgba(0,0,0,.3), 0 0 0 1px rgba(15,23,42,.07); opacity: 0; transform: translateY(-4px); pointer-events: none; transition: opacity .2s ease, transform .25s ease; }
.gp-pd-fpanel.on { opacity: 1; transform: none; }
.gp-pd-flist, .gp-pd-fvals { display: flex; flex-direction: column; min-width: 150px; }
.gp-pd-flist span, .gp-pd-fvals span { display: flex; align-items: center; gap: 8px; padding: 5px 10px; border-radius: 7px; font-size: 11px; color: #1f2937; white-space: nowrap; }
.gp-pd-flist span.hl { background: #eef2f5; }
.gp-pd-fvals { display: none; margin-left: 6px; padding-left: 6px; border-left: 1px solid #eef0f3; }
.gp-pd-fvals.on { display: flex; animation: gpPdIn .25s ease; }
.gp-pd-fvals span i { position: relative; width: 12px; height: 12px; border-radius: 3px; box-shadow: 0 0 0 1px #9ca3af; }
.gp-pd-fvals span.on i { background: #1f6f9f; box-shadow: 0 0 0 1px #1f6f9f; }
.gp-pd-fvals span.on i::after { content: ""; position: absolute; left: 4px; top: 1px; width: 3px; height: 6.5px; border: solid #fff; border-width: 0 1.6px 1.6px 0; transform: rotate(45deg); }
.gp-pd-done { align-self: flex-end; margin: 6px 4px 2px; padding: 5px 16px; border-radius: 999px; background: #0b72c6; color: #fff; font-size: 11px; font-weight: 600; }
.gp-pd-fchips { display: inline-flex; gap: 6px; }
.gp-pd-fchip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px; border-radius: 6px; background: #d6e8f2; color: #1f4f66; font-size: 11px; font-weight: 500; white-space: nowrap; }
.gp-pd-fchip.in { animation: gpPdIn .4s ease; } .gp-pd-fchip i { font-style: normal; opacity: .6; }
.gp-pd-gbmenu { position: absolute; top: 38px; left: 180px; z-index: 15; display: flex; flex-direction: column; min-width: 160px; padding: 4px; border-radius: 10px; background: #fff;
    box-shadow: 0 18px 36px -14px rgba(0,0,0,.3), 0 0 0 1px rgba(15,23,42,.07); opacity: 0; transform: translateY(-4px); pointer-events: none; transition: opacity .2s ease, transform .25s ease; }
.gp-pd-gbmenu.on { opacity: 1; transform: none; }
.gp-pd-gbmenu span { padding: 5px 10px; border-radius: 7px; font-size: 11px; color: #1f2937; } .gp-pd-gbmenu span.hl { background: #eef2f5; }
.gp-tip .proj { color: #6b7280; } .gp-tip-cash .proj span { color: #6b7280; }

/* Trial scenes */
.gp-pd-tlgrid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 10px; }
.gp-pd-tlgrid .gp-card svg { display: block; margin-top: 6px; }
.gp-pd-trtable { padding: 4px 12px 6px; }
.gp-pd-trtable td { height: 27px; }
.gp-pd-trtable td[data-col], .gp-pd-trtable th[data-col] { transition: background .3s ease; }
.gp-pd-trtable .fc { color: #9ca3af; font-size: 10px; }
.gp-pd-trfc, .gp-pd-trout { padding: 10px 14px; }
.gp-pd-trtable td[data-o] { opacity: 1; }

/* Keep the bottom-right corner free for the AI launcher bubble. */
.gp-pd-mock .gp-pd-kpis3, .gp-pd-mock .gp-pd-kpis { padding-right: 44px; }
.gp-app[data-pd="fc-ai"] .gp-launcher { display: none; }
.gp-pd-mock .gp-pd-trtable, .gp-pd-mock .gp-pd-cashtable { padding-right: 46px; }