/* R5-WEB-HOME-07B — browser visual polish for homepage product storytelling */

/* Overall product stage: calmer scale, stronger software realism */
.cp3-hero{margin-top:82px;max-width:1200px}
.cp3-caption{margin-bottom:17px;gap:24px;align-items:center}
.cp3-caption>span{font-size:10px;letter-spacing:.16em}
.cp3-caption>strong{font-size:17px;font-weight:680;letter-spacing:-.018em}
.cp3-caption>small{font-size:12px;line-height:1.5;color:#727a74}
.cp3-window{border-color:#c6cdc6;border-radius:20px;background:#f7f8f5;box-shadow:0 54px 120px rgba(28,39,32,.14),0 18px 46px rgba(28,39,32,.07),0 1px 0 rgba(255,255,255,.9) inset}
.cp3-windowbar{height:46px;padding:0 17px;background:linear-gradient(180deg,#fdfefd,#f2f4f1);font-size:11px;border-bottom-color:#d4dad4}
.cp3-windowbar i{width:9px;height:9px;box-shadow:0 0 0 1px rgba(0,0,0,.035) inset}
.cp3-windowbar span{font-weight:560;color:#69726b}.cp3-windowbar b{font-size:10px;letter-spacing:.06em}
.cp3-app{grid-template-columns:178px minmax(0,1fr);min-height:632px;background:#f3f5f2}
.cp3-appnav{padding:22px 13px;background:linear-gradient(180deg,#17221e,#14201b);border-right-color:#2a3731;box-shadow:6px 0 22px rgba(15,28,22,.05)}
.cp3-navbrand{padding:3px 8px 24px;font-size:13px;letter-spacing:-.01em}.cp3-navbrand em{width:30px;height:30px;border-radius:9px;font-size:17px;box-shadow:0 5px 14px rgba(0,0,0,.14)}
.cp3-navsection{margin:14px 9px 8px;font-size:9px;color:#79877f;letter-spacing:.16em}
.cp3-navitem{position:relative;min-height:34px;padding:9px 10px 9px 12px;margin:3px 0;border-radius:8px;font-size:11px;color:#b1bdb6;transition:background .18s,color .18s}.cp3-navitem.active{background:linear-gradient(90deg,#2d483c,#294037);box-shadow:0 7px 16px rgba(0,0,0,.08)}.cp3-navitem.active:before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:2px;border-radius:4px;background:#a7d0bc}.cp3-navitem b{padding:2px 6px;font-size:9px}
.cp3-main{padding:28px 30px 31px;background:radial-gradient(circle at 84% -5%,rgba(54,99,79,.085),transparent 30%),linear-gradient(180deg,#f6f7f4,#f2f4f1)}
.cp3-project-head{margin-bottom:20px;align-items:center}.cp3-breadcrumb{font-size:9px;color:#7c857f;letter-spacing:.075em}.cp3-project-head h3{font-size:24px;font-weight:700;letter-spacing:-.035em}.cp3-project-head p{font-size:10px;line-height:1.55;color:#727b75}
.cp3-head-status{gap:14px}.cp3-status{padding:7px 10px;font-size:9px;border-color:#c8d7ce;background:#eff6f2;box-shadow:0 1px 0 rgba(255,255,255,.8) inset}.cp3-status:before{width:7px;height:7px}
.cp3-progress-ring{width:54px;height:54px;filter:drop-shadow(0 2px 3px rgba(30,56,44,.06))}.cp3-progress-ring:after{inset:6px}.cp3-progress-ring span{font-size:10px}
.cp3-project-grid{grid-template-columns:1.16fr .84fr;gap:14px}
.cp3-panel{border-color:#d9dfda;border-radius:13px;box-shadow:0 8px 26px rgba(31,43,36,.045),0 1px 0 rgba(255,255,255,.85) inset}
.cp3-panel-head{min-height:42px;padding:13px 15px;border-bottom-color:#e9ede9}.cp3-panel-head strong{font-size:11px;font-weight:700}.cp3-panel-head span{font-size:9px}
.cp3-stage-body{padding:17px 18px 15px}.cp3-stage-track{gap:8px}.cp3-stage-track:before{top:14px;background:#d5dcd6}.cp3-step i{width:30px;height:30px;margin-bottom:9px;font-size:9px;border-color:#cfd7d1;box-shadow:0 2px 5px rgba(28,42,34,.03)}.cp3-step.current i{box-shadow:0 0 0 4px #faf5e8,0 4px 12px rgba(140,111,42,.11)}.cp3-step strong{font-size:9px}.cp3-step small{margin-top:4px;font-size:8px;line-height:1.35}

/* Four-agent board */
.cp3-agents-body{gap:10px;padding:13px}.cp3-agent{padding:12px;border-color:#dde4de;border-radius:10px;background:linear-gradient(180deg,#fcfdfb,#f8faf7);box-shadow:0 3px 9px rgba(31,43,36,.025)}
.cp3-agent-icon{width:27px;height:27px;border-radius:8px;font-size:13px}.cp3-agent-state{font-size:8px;font-weight:650}.cp3-agent h4{margin:10px 0 5px;font-size:10px;font-weight:700}.cp3-agent p{font-size:8px;line-height:1.55}.cp3-bar{height:4px;margin-top:10px}.cp3-bar span{background:linear-gradient(90deg,#426f59,#72a189)}

/* Evidence and chart details */
.cp3-evidence-body{padding:14px}.cp3-evidence-top{grid-template-columns:82px 1fr;gap:14px}.cp3-donut{width:74px;height:74px;background:conic-gradient(#386a53 calc(var(--p)*1%),#e3e8e4 0);box-shadow:0 5px 15px rgba(42,78,61,.05)}.cp3-donut:after{inset:9px;box-shadow:0 0 0 1px #edf0ed inset}.cp3-donut strong{font-size:16px;font-weight:750}.cp3-evidence-meta strong{font-size:10px}.cp3-evidence-meta span{font-size:8px;line-height:1.55}.cp3-evidence-list{margin-top:11px}.cp3-evidence-row{grid-template-columns:58px 1fr 28px;gap:8px;padding:5px 0;font-size:8px}.cp3-evidence-row i{height:5px}.cp3-evidence-row i:before{background:linear-gradient(90deg,#527f69,#82a893)}.cp3-evidence-row b{font-size:8px;font-variant-numeric:tabular-nums}

/* Artifact chain */
.cp3-artifact-body{gap:9px;padding:13px 14px}.cp3-artifact{padding:10px 11px;border-color:#dce3dd;border-radius:9px;background:linear-gradient(180deg,#fcfdfb,#f8faf7)}.cp3-artifact small{font-size:7px;letter-spacing:.03em}.cp3-artifact strong{margin-top:4px;font-size:9px}.cp3-artifact b{margin-top:6px;font-size:7px}.cp3-artifact-arrow{font-size:13px;color:#909b94}
.cp3-proof-grid{margin-top:17px;border-color:#d5dbd6;border-radius:13px;background:#fafbf8;box-shadow:0 9px 25px rgba(31,43,36,.035)}.cp3-proof{padding:20px 22px;min-height:106px}.cp3-proof span{font-size:9px}.cp3-proof strong{margin:11px 0 6px;font-size:13px}.cp3-proof p{font-size:10px;line-height:1.6}

/* Product storytelling cards */
.cp3-story-head{grid-template-columns:1fr .62fr;gap:92px;align-items:end}.cp3-story-head .cp3-head-side{max-width:520px;font-size:15px;line-height:1.85;color:#616963}
.cp3-story-stack{margin-top:76px;gap:34px}.cp3-story-card{grid-template-columns:.68fr 1.32fr;gap:38px;padding:24px;border-color:#d0d7d1;border-radius:21px;background:linear-gradient(145deg,#fafbf8,#f4f6f2);box-shadow:0 24px 66px rgba(31,43,36,.06),0 1px 0 rgba(255,255,255,.85) inset}.cp3-story-card.reverse{grid-template-columns:1.32fr .68fr}.cp3-story-copy{padding:34px 26px}.cp3-story-index{font-size:10px;letter-spacing:.15em}.cp3-story-copy h3{margin:17px 0 17px;font-size:clamp(32px,3.05vw,46px);line-height:1.1;letter-spacing:-.04em}.cp3-story-copy>p{font-size:15.5px;line-height:1.85;color:#5b645e}.cp3-feature-list{gap:10px;margin-top:25px}.cp3-feature-list li{gap:10px;font-size:11.5px;line-height:1.55}.cp3-feature-list li:before{width:19px;height:19px;flex-basis:19px}.cp3-story-copy a{margin-top:26px;font-size:12.5px}
.cp3-visual{min-height:488px;border-color:#cbd3cc;border-radius:15px;background:#e9eeea;box-shadow:0 18px 42px rgba(31,45,37,.085),0 1px 0 rgba(255,255,255,.85) inset;transform:translateZ(0)}
.cp3-visual-top{height:40px;padding:0 13px;border-bottom-color:#d6ddd7;background:linear-gradient(180deg,#fbfcfa,#f3f5f2)}.cp3-visual-top i{width:7px;height:7px}.cp3-visual-top span{font-size:8px;font-weight:580}.cp3-visual-top b{font-size:8px;letter-spacing:.04em}.cp3-canvas{height:calc(100% - 40px);padding:17px}
.cp3-minihead{min-height:38px;padding:11px 12px}.cp3-minihead strong{font-size:9px;font-weight:720}.cp3-minihead span{font-size:7px}

/* Source board */
.cp3-source-layout{grid-template-columns:.78fr 1.22fr;gap:12px}.cp3-source-list,.cp3-source-insight{border-color:#d8dfd9;border-radius:10px;box-shadow:0 5px 14px rgba(30,43,35,.025)}.cp3-source-items{padding:8px}.cp3-source-item{grid-template-columns:31px 1fr auto;gap:9px;padding:9px 7px}.cp3-file{width:31px;height:34px;border-radius:7px;font-size:7px;background:linear-gradient(180deg,#eef4f0,#e4ece7)}.cp3-source-item strong{font-size:8px}.cp3-source-item small{margin-top:4px;font-size:6.8px}.cp3-source-item b{padding:4px 6px;font-size:6.7px}.cp3-source-insight-body{padding:13px}.cp3-coverage{grid-template-columns:84px 1fr;gap:15px}.cp3-coverage-copy h4{font-size:10px}.cp3-coverage-copy p{font-size:7px;line-height:1.55}.cp3-claim-grid{gap:8px;margin-top:14px}.cp3-claim{padding:10px;border-color:#dfe6e0;border-radius:8px;background:#fafcf9}.cp3-claim span{font-size:6.8px}.cp3-claim strong{font-size:8px}.cp3-claim small{font-size:6.7px}

/* Agent orchestration board */
.cp3-agent-flow{gap:12px}.cp3-flow-summary{gap:9px}.cp3-flow-stat{padding:10px 11px;border-color:#d9e0da;border-radius:9px;box-shadow:0 4px 12px rgba(30,42,35,.025)}.cp3-flow-stat span{font-size:6.8px}.cp3-flow-stat strong{margin-top:5px;font-size:9px}.cp3-agent-lanes{gap:9px}.cp3-lane{grid-template-columns:116px 1fr 80px;gap:11px;padding:10px 11px;border-color:#d9e0da;border-radius:9px;box-shadow:0 4px 12px rgba(30,42,35,.025)}.cp3-lane-name{gap:8px}.cp3-lane-name i{width:27px;height:27px;border-radius:8px;font-size:12px}.cp3-lane-name strong{font-size:8px}.cp3-lane-track{height:6px}.cp3-lane-track span{background:linear-gradient(90deg,#406f58,#77a28b)}.cp3-lane-state strong{font-size:7px}.cp3-lane-state small{margin-top:3px;font-size:6.3px}.cp3-gate{padding:12px 13px;border-radius:9px;background:linear-gradient(100deg,#22372e,#2d463a);box-shadow:0 8px 18px rgba(24,48,37,.13)}.cp3-gate i{width:24px;height:24px}.cp3-gate strong{font-size:8px}.cp3-gate span{font-size:7px}.cp3-gate b{padding:5px 7px;font-size:6.7px}

/* Version and diff board */
.cp3-artifact-layout{grid-template-columns:.88fr 1.12fr;gap:12px}.cp3-version-panel,.cp3-diff-panel{border-color:#d8dfd9;border-radius:10px;box-shadow:0 5px 14px rgba(30,43,35,.025)}.cp3-version-list{padding:10px}.cp3-version{grid-template-columns:29px 1fr auto;gap:9px;padding:10px 7px}.cp3-version:not(:last-child):after{left:20px;top:35px}.cp3-version i{width:27px;height:27px;font-size:7px}.cp3-version strong{font-size:8px}.cp3-version small{font-size:6.8px}.cp3-version b{font-size:6.8px}.cp3-diff-body{padding:13px}.cp3-diff-metrics{gap:8px}.cp3-diff-metric{padding:9px;border-radius:8px}.cp3-diff-metric span{font-size:6.4px}.cp3-diff-metric strong{font-size:9px}.cp3-diff-lines{gap:9px;margin-top:14px}.cp3-diff-line{grid-template-columns:58px 1fr;gap:9px}.cp3-diff-line span{font-size:6.8px}.cp3-diff-line i{height:7px}.cp3-settlement{margin-top:15px;padding:11px;border-radius:9px}.cp3-settlement strong{font-size:8px}.cp3-settlement p{font-size:6.8px;line-height:1.55}

/* Workflow and quality-gate board */
.cp3-workflow-canvas{grid-template-columns:1fr 178px;gap:12px}.cp3-workflow-main,.cp3-gates-panel{border-color:#d8dfd9;border-radius:10px;box-shadow:0 5px 14px rgba(30,43,35,.025)}.cp3-phase-grid{gap:8px;padding:13px}.cp3-phase{padding:10px 9px;border-color:#dfe5e0;border-radius:8px}.cp3-phase span{font-size:6.4px}.cp3-phase strong{margin-top:6px;font-size:8px}.cp3-phase small{margin-top:5px;font-size:6.3px;line-height:1.5}.cp3-phase.done{border-color:#cadfd1;background:#f1f7f3}.cp3-phase.current{border-color:#d6bd82;background:#fbf6e9;box-shadow:0 4px 12px rgba(150,116,36,.06)}.cp3-timeline{padding:7px 14px 15px}.cp3-timeline-line:before{top:9px}.cp3-tick i{width:18px;height:18px;margin-bottom:6px}.cp3-tick.current i{box-shadow:0 0 0 4px #faf3e3}.cp3-tick span{font-size:6px}.cp3-gates-list{padding:9px}.cp3-gate-row{padding:9px 7px}.cp3-gate-row div strong{font-size:7.2px}.cp3-gate-row div small{font-size:6px}.cp3-gate-row b{padding:4px 6px;font-size:6px}.cp3-legend{gap:16px;margin-top:11px;font-size:8px}.cp3-legend span:before{width:7px;height:7px}

/* Desktop page rhythm */
@media(min-width:1060px){
  .product-story.section{padding-top:146px;padding-bottom:148px}
  .cp3-story-card:nth-child(even){transform:translateX(8px)}
  .cp3-story-card:nth-child(odd){transform:translateX(-8px)}
}

/* Tablet */
@media(max-width:1050px){
  .cp3-hero{max-width:calc(100% - 32px)}
  .cp3-app{grid-template-columns:158px minmax(0,1fr)}
  .cp3-main{padding:21px}
  .cp3-story-head{grid-template-columns:1fr;gap:22px}.cp3-story-head .cp3-head-side{max-width:720px}
  .cp3-story-card,.cp3-story-card.reverse{grid-template-columns:1fr;transform:none}.cp3-story-card.reverse .cp3-story-copy{order:0}
  .cp3-story-copy{padding:27px 20px 18px}.cp3-visual{min-height:470px}
}

/* Mobile: keep information readable instead of shrinking desktop UI */
@media(max-width:760px){
  .cp3-hero{margin-top:56px;max-width:calc(100% - 32px)}
  .cp3-caption{grid-template-columns:1fr;gap:7px}.cp3-caption>strong{font-size:15px}.cp3-caption>small{display:none}
  .cp3-window{border-radius:14px;box-shadow:0 28px 70px rgba(28,39,32,.12)}
  .cp3-windowbar{height:41px}.cp3-app{grid-template-columns:1fr;min-height:auto}.cp3-appnav{display:none}.cp3-main{padding:15px}
  .cp3-project-head h3{font-size:20px}.cp3-project-grid{grid-template-columns:1fr;gap:11px}.cp3-agents-body{grid-template-columns:1fr 1fr}
  .cp3-proof-grid{grid-template-columns:1fr 1fr}.cp3-proof{padding:17px}.cp3-proof:nth-child(3){border-left:0;border-top:1px solid #e0e3df}.cp3-proof:nth-child(4){border-top:1px solid #e0e3df}
  .cp3-story-stack{margin-top:52px;gap:24px}.cp3-story-card{padding:11px;border-radius:16px}.cp3-story-copy{padding:25px 15px 15px}.cp3-story-copy h3{font-size:31px}.cp3-story-copy>p{font-size:14px}.cp3-feature-list li{font-size:11px}
  .cp3-visual{min-height:520px}.cp3-canvas{padding:12px}.cp3-source-layout,.cp3-artifact-layout{grid-template-columns:1fr}.cp3-source-list{max-height:220px}.cp3-lane{grid-template-columns:98px 1fr 64px}.cp3-workflow-canvas{grid-template-columns:1fr}.cp3-gates-panel{min-height:158px}.cp3-phase-grid{grid-template-columns:1fr 1fr}.cp3-legend{justify-content:flex-start;flex-wrap:wrap}
}

@media(max-width:520px){
  .cp3-main{padding:12px}.cp3-project-head{align-items:flex-start}.cp3-head-status{display:none}.cp3-stage-track{grid-template-columns:repeat(3,1fr);row-gap:13px}.cp3-stage-track:before{display:none}
  .cp3-agents-body{grid-template-columns:1fr}.cp3-artifact-body{grid-template-columns:1fr}.cp3-artifact-arrow{transform:rotate(90deg);text-align:center}
  .cp3-proof-grid{grid-template-columns:1fr}.cp3-proof+.cp3-proof{border-left:0;border-top:1px solid #e0e3df}
  .cp3-visual{min-height:575px}.cp3-flow-summary{grid-template-columns:1fr}.cp3-lane{grid-template-columns:1fr;gap:7px}.cp3-lane-state{text-align:left}.cp3-diff-metrics{grid-template-columns:1fr 1fr}.cp3-phase-grid{grid-template-columns:1fr 1fr}
}