/* Page-local styles; shared dependencies remain untouched. */
.staging-page { --feature-ink:#15243b; --feature-muted:#526174; --feature-line:#dce4ee; --feature-accent:#235ccc; --feature-soft:#f3f7fc; background:#fff; color:var(--feature-ink); }
.staging-page main { background:#fff; }
.staging-page .container { max-width:1240px; padding-left:28px; padding-right:28px; }
.staging-page .feature-skip { position:fixed; z-index:10000; top:8px; left:8px; padding:12px 20px; background:#fff; color:var(--feature-ink); border:2px solid var(--feature-accent); border-radius:10px; transform:translateY(-160%); }
.staging-page .feature-skip:focus { transform:translateY(0); }
.staging-page :focus-visible { outline:3px solid var(--feature-accent); outline-offset:5px; }
.staging-page .feature-hero { position:relative; padding:175px 0 90px; background:radial-gradient(ellipse at 90% 15%,#e4eeff,transparent 48%),linear-gradient(145deg,#f7faff,#fff 65%); }
.staging-page .hero-layout { display:grid; grid-template-columns:1.05fr 1fr; gap:54px; align-items:center; }
.staging-page .hero-layout > *, .staging-page .feature-split > *, .staging-page .faq-layout > * { min-width:0; }
.staging-page .eyebrow { display:block; margin-bottom:18px; color:var(--feature-accent); font-size:.74rem; font-weight:800; letter-spacing:.11em; text-transform:uppercase; }
.staging-page h1 { margin:0; font-size:clamp(2.8rem,4.8vw,4.65rem); line-height:1.08; letter-spacing:-.055em; font-weight:800; color:var(--feature-ink); }
.staging-page h1 span { color:var(--feature-accent); }
.staging-page .hero-lead { max-width:560px; margin:25px 0 0; font-size:1.08rem; line-height:1.8; color:var(--feature-muted); }
.staging-page .feature-actions { display:flex; flex-wrap:wrap; gap:12px; margin:28px 0 22px; }
.staging-page .feature-button { display:inline-flex; justify-content:center; align-items:center; gap:12px; min-height:52px; padding:13px 21px; border-radius:12px; font-size:.88rem; font-weight:700; text-decoration:none; transition:transform .2s,box-shadow .2s; }
.staging-page .feature-button:hover { transform:translateY(-2px); box-shadow:0 10px 25px #235ccc1f; }
.staging-page .primary { background:var(--feature-accent); color:#fff; }
.staging-page .secondary { border:1px solid var(--feature-line); color:var(--feature-ink); background:#fff; }
.staging-page .hero-points { display:flex; flex-wrap:wrap; gap:12px 20px; list-style:none; margin:0; padding:0; color:var(--feature-muted); font-size:.77rem; }
.staging-page .hero-points li::before { content:"✓"; color:#187358; margin-right:7px; font-weight:800; }
.staging-page figure { position:relative; margin:0; overflow:hidden; border:1px solid var(--feature-line); border-radius:24px; background:#fff; box-shadow:0 28px 70px #233d7320; }
.staging-page .visual-bar { display:flex; gap:16px; align-items:center; padding:17px 20px; border-bottom:1px solid var(--feature-line); color:var(--feature-muted); font-size:.65rem; }
.staging-page .visual-dots { color:#aab8cf; font-size:.65rem; white-space:nowrap; }
.staging-page figcaption { position:relative; padding:18px 22px; border-top:1px solid var(--feature-line); color:var(--feature-muted); font-size:.7rem; line-height:1.7; background:#fff; }
.staging-page .benefit-strip { padding:0; border-top:1px solid var(--feature-line); border-bottom:1px solid var(--feature-line); background:#fff; }
.staging-page .benefit-strip .container { display:grid; grid-template-columns:repeat(4,1fr); }
.staging-page .benefit-strip .container > div { padding:27px 14px; border-right:1px solid var(--feature-line); text-align:center; }
.staging-page .benefit-strip .container > div:last-child { border-right:0; }
.staging-page .benefit-strip strong { display:block; font-size:1.15rem; letter-spacing:-.03em; margin-bottom:5px; }
.staging-page .benefit-strip span { color:var(--feature-muted); font-size:.74rem; }
.staging-page .feature-section { padding:95px 0; scroll-margin-top:110px; }
.staging-page .feature-tint { background:var(--feature-soft); border-top:1px solid #e8eef6; border-bottom:1px solid #e8eef6; }
.staging-page .feature-intro { max-width:780px; margin-bottom:36px; }
.staging-page h2 { font-size:clamp(2rem,3.1vw,3rem); font-weight:800; line-height:1.15; letter-spacing:-.045em; margin:0 0 20px; color:var(--feature-ink); }
.staging-page h3 { font-size:1.1rem; font-weight:750; line-height:1.4; letter-spacing:-.02em; color:var(--feature-ink); margin:0 0 13px; }
.staging-page .feature-section p, .staging-page .feature-final p { color:var(--feature-muted); line-height:1.85; font-size:.95rem; margin:0 0 16px; }
.staging-page .feature-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.staging-page .feature-card { position:relative; padding:30px; background:#fff; border:1px solid var(--feature-line); border-radius:20px; }
.staging-page .feature-card p { font-size:.86rem; margin-bottom:0; }
.staging-page .card-number { display:grid; place-items:center; width:42px; height:42px; background:var(--feature-soft); border:1px solid var(--feature-line); color:var(--feature-accent); font-size:.74rem; font-weight:800; border-radius:12px; margin-bottom:30px; }
.staging-page .workflow { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:18px; counter-reset:step; }
.staging-page .workflow li { padding:26px 22px; border:1px solid var(--feature-line); background:#fff; border-radius:18px; }
.staging-page .workflow li > span { display:inline-grid; place-items:center; width:36px; height:36px; border-radius:50%; background:var(--feature-soft); color:var(--feature-accent); font-size:.8rem; font-weight:800; margin-bottom:28px; }
.staging-page .workflow p { font-size:.82rem; margin:0; }
.staging-page .scope-note { display:flex; align-items:flex-start; gap:15px; padding:22px 25px; border-radius:16px; border:1px solid #c9d7ef; background:#eaf1fc; margin-top:25px; }
.staging-page .scope-note > i { font-size:1.2rem; color:var(--feature-accent); }
.staging-page .scope-note p { font-size:.86rem; margin:0; }
.staging-page .scope-note strong { color:var(--feature-ink); }
.staging-page .feature-split { display:grid; grid-template-columns:1.15fr 1fr; gap:70px; align-items:center; }
.staging-page .data-card, .staging-page .extras-card { padding:38px; border:1px solid var(--feature-line); border-radius:22px; background:linear-gradient(135deg,#f4f8ff,#fff); }
.staging-page .data-card h3, .staging-page .extras-card h3 { font-size:1.35rem; }
.staging-page .data-card ul, .staging-page .extras-card ul { padding-left:20px; margin:22px 0; color:var(--feature-ink); font-size:.86rem; line-height:1.7; }
.staging-page .data-card li, .staging-page .extras-card li { margin-bottom:12px; }
.staging-page .data-card p, .staging-page .extras-card p { font-size:.84rem; margin-bottom:0; }
.staging-page .extras-card p + p { margin-top:14px; }
.staging-page .text-link { display:inline-flex; gap:10px; align-items:center; margin-top:14px; color:var(--feature-accent); font-size:.9rem; font-weight:700; text-decoration:underline; text-underline-offset:4px; }
.staging-page .faq-layout { display:grid; grid-template-columns:.8fr 1.2fr; gap:60px; align-items:start; }
.staging-page .feature-faq details { border:1px solid var(--feature-line); border-radius:15px; margin-bottom:14px; background:#fff; padding:0 23px; }
.staging-page .feature-faq summary { padding:22px 0; font-size:.94rem; line-height:1.6; font-weight:700; cursor:pointer; color:var(--feature-ink); }
.staging-page .feature-faq p { font-size:.86rem; margin-bottom:23px; }
.staging-page .feature-final { padding:0 0 95px; }
.staging-page .final-card { display:flex; gap:40px; justify-content:space-between; align-items:center; padding:46px; border:1px solid #c8d7ef; border-radius:26px; background:radial-gradient(ellipse at 100% 100%,#e1ebff,transparent 60%),#f5f8ff; }
.staging-page .final-card > div { max-width:740px; }
.staging-page .final-card h2 { font-size:clamp(1.9rem,2.8vw,2.8rem); }
.staging-page .final-card p { margin:0; }
.staging-page .final-card .feature-button { flex-shrink:0; }
.staging-page .footer { background:#fff; }
@media (max-width:1100px) {
 .staging-page .hero-layout { gap:30px; grid-template-columns:1fr 1fr; }
 .staging-page .feature-split { gap:40px; }
 .staging-page .workflow { grid-template-columns:repeat(2,1fr); }
 .staging-page .feature-card { padding:24px; }
}
@media (max-width:850px) {
 .staging-page .feature-hero { padding:145px 0 60px; }
 .staging-page .hero-layout, .staging-page .feature-split, .staging-page .faq-layout { grid-template-columns:1fr; gap:40px; }
 .staging-page .hero-copy { max-width:650px; }
 .staging-page .hero-layout figure { width:100%; max-width:580px; margin:auto; }
 .staging-page .feature-grid { grid-template-columns:1fr; }
 .staging-page .feature-section { padding:65px 0; }
 .staging-page .feature-final { padding-bottom:65px; }
 .staging-page .final-card { flex-direction:column; align-items:flex-start; }
}
@media (max-width:520px) {
 .staging-page .container { padding-left:20px; padding-right:20px; }
 .staging-page h1 { font-size:2.7rem; }
 .staging-page .hero-lead { font-size:1rem; }
 .staging-page .feature-actions { flex-direction:column; align-items:stretch; }
 .staging-page .benefit-strip .container { grid-template-columns:1fr 1fr; }
 .staging-page .benefit-strip .container > div { padding:21px 6px; }
 .staging-page .benefit-strip .container > div:nth-child(2) { border-right:0; }
 .staging-page .benefit-strip .container > div:nth-child(-n+2) { border-bottom:1px solid var(--feature-line); }
 .staging-page .benefit-strip strong { font-size:1rem; }
 .staging-page .workflow { grid-template-columns:1fr; }
 .staging-page .data-card, .staging-page .extras-card { padding:26px; }
 .staging-page .final-card { width:calc(100% - 40px); padding:30px 24px; }
 .staging-page .visual-bar { padding:14px; gap:10px; font-size:.58rem; }
}
@media (prefers-reduced-motion:reduce) {
 html { scroll-behavior:auto; }
 .staging-page *, .staging-page *::before, .staging-page *::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}

.staging-page { --feature-accent:#6850ba; --feature-soft:#f7f5fc; }
.staging-page .feature-hero { background:radial-gradient(ellipse at 90% 15%,#eee8ff,transparent 48%),linear-gradient(145deg,#faf8ff,#fff 65%); }
.staging-page .final-card { border-color:#d8cfef; background:radial-gradient(ellipse at 100% 100%,#e9e0ff,transparent 60%),#faf8ff; }
.staging-page .scope-note { background:#efebf8; border-color:#d8cfef; }
.staging-page .data-card, .staging-page .extras-card { background:linear-gradient(135deg,#f7f3ff,#fff); }
.staging-page .staging-scene { position:relative; height:370px; overflow:hidden; background:radial-gradient(circle at 65% 60%,#e7defb,transparent 52%),#faf8ff; }
.staging-page .mini-browser { position:absolute; z-index:2; width:57%; border:1px solid #d3c8e8; border-radius:16px; background:#fff; overflow:hidden; box-shadow:0 18px 38px #55428b22; }
.staging-page .live-browser { top:35px; left:7%; transform:rotate(-3deg); }
.staging-page .test-browser { top:135px; right:6%; animation:stagingFloat 7s ease-in-out infinite; }
.staging-page .browser-label { display:flex; align-items:center; gap:7px; padding:12px 15px; font-size:.66rem; color:#526174; border-bottom:1px solid #e5dfef; background:#fff; }
.staging-page .status-dot { width:6px; height:6px; border-radius:50%; background:#258360; }
.staging-page .browser-label i { color:#6850ba; font-size:.85rem; }
.staging-page .browser-content { padding:17px; }
.staging-page .mini-title { display:block; width:72%; height:15px; border-radius:5px; background:#becce0; }
.staging-page .test-browser .mini-title { background:linear-gradient(90deg,#a98adf,#d5c5ef); }
.staging-page .mini-line { display:block; margin-top:9px; width:90%; height:5px; border-radius:4px; background:#e9edf4; }
.staging-page .mini-tiles { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; margin-top:15px; }
.staging-page .mini-tiles i { height:42px; border-radius:6px; background:linear-gradient(140deg,#e5edf8,#f8faff); }
.staging-page .test-browser .mini-tiles i { background:linear-gradient(140deg,#e2d6f7,#faf8ff); }
.staging-page .mini-browser p { padding:0 17px 14px; margin:0; color:#526174; font-size:.58rem; }
.staging-page .branch-line { position:absolute; width:75%; height:230px; top:64px; left:12%; border:1px dashed #b5a0db; border-radius:32px; }
.staging-page .review-chip { position:absolute; z-index:3; left:7%; bottom:28px; display:flex; align-items:center; gap:8px; padding:13px 16px; border-radius:12px; border:1px solid #d7c8ef; background:#faf7ff; color:#6850ba; font-size:.65rem; font-weight:750; box-shadow:0 10px 28px #6850ba15; }
.staging-page .branch-packet { position:absolute; top:59px; left:12%; width:9px; height:9px; background:#9f82d4; border-radius:50%; box-shadow:0 0 0 5px #9f82d41a; animation:stagingPacket 6s ease-in-out infinite; }
@keyframes stagingFloat { 0%,100% { transform:translateY(0) rotate(3deg); } 50% { transform:translateY(-8px) rotate(3deg); } }
@keyframes stagingPacket { 0%,100% { left:17%; } 50% { left:78%; } }
@media (max-width:520px) {
 .staging-page .staging-scene { height:340px; }
 .staging-page .mini-browser { width:64%; }
 .staging-page .live-browser { top:28px; left:5%; }
 .staging-page .test-browser { top:117px; right:5%; }
 .staging-page .review-chip { bottom:20px; left:5%; font-size:.59rem; padding:12px; }
}