.sample-page { --navy:#102a25; --ink:#102a25; --muted:#5e6e69; --paper:#f5f1e8; --card:#fffdf8; --line:#cfd7cf; --blue:#1859f1; --blue-soft:#e9efff; --green:#11835f; --green-soft:#e8f6ef; --amber:#a96500; --amber-soft:#fff0d5; --red:#b83d2c; --red-soft:#fff0ec; min-width:320px; background-color:var(--paper); background-image:linear-gradient(rgba(16,42,37,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(16,42,37,.025) 1px,transparent 1px); background-size:32px 32px; color:var(--ink); font-family:Manrope,system-ui,sans-serif; }
.sample-page .topbar { position:static; background:transparent; border:0; backdrop-filter:none; }
.sample-page .topbar-inner { max-width:1180px; min-height:66px; margin-top:18px; padding:0 10px 0 20px; background:var(--card); border:1px solid var(--line); border-radius:12px; box-shadow:0 8px 22px rgba(16,42,37,.06); }
.sample-page .brand { color:var(--ink); font-size:20px; }
.sample-page .brand span { color:var(--blue); }
.sample-page .nav-links { gap:24px; color:#314c45; font-size:13px; }
.sample-page .nav-cta, .sample-page .button { border-radius:8px; transform:none; transition:none; }
.sample-page .nav-cta { color:white; background:var(--navy); border-color:var(--navy); }
.sample-page .page { max-width:1180px; padding:50px 0 86px; }
.sample-page .hero { padding:46px; color:white; background:var(--navy); border:1px solid var(--navy); border-radius:12px; box-shadow:none; }
.sample-page .hero::before { display:none; }
.sample-page .hero h1 { max-width:720px; margin:12px 0 18px; font:800 clamp(2.6rem,5vw,4.3rem)/.98 Manrope,system-ui,sans-serif; letter-spacing:-.065em; }
.sample-page .hero .eyebrow { color:#d9ff66; }
.sample-page .hero-panel { border-radius:8px; background:#173c34; box-shadow:none; }
.sample-page .score { font-family:Manrope,system-ui,sans-serif; }
.sample-page .result-badge { border-radius:4px; }
.sample-page .fixture-pill { border-radius:4px; }
.sample-page .section { margin-top:72px; }
.sample-page .section-head h2, .sample-page .blocker h2, .sample-page .mcp-card h2, .sample-page .ticket h2, .sample-page .closing h2 { font-family:Manrope,system-ui,sans-serif; }
.sample-page .stage, .sample-page .blocker, .sample-page .blocker-detail, .sample-page .trace, .sample-page .proof-card, .sample-page .mcp-card, .sample-page .mcp-stat, .sample-page .ticket, .sample-page .comparison, .sample-page .state-card, .sample-page .scope-table { border-radius:8px; box-shadow:none!important; }
.sample-page .blocker { background:var(--red-soft); }
.sample-page .mcp-card { background:#f0eee8; }
.sample-page .ticket { background:var(--blue-soft); }
.sample-page .toggle button { border-radius:5px; }
.sample-page .closing { border-radius:0; background:var(--blue); }
.sample-page .closing .button { color:var(--ink); background:white; border-color:white; }
@media(max-width:1180px){.sample-page .topbar-inner,.sample-page .page{width:calc(100% - 40px)}}
@media(max-width:700px){.sample-page .topbar-inner,.sample-page .page{width:calc(100% - 28px)}.sample-page .topbar-inner{margin-top:10px}.sample-page .page{padding-top:28px}.sample-page .hero{padding:26px 22px}.sample-page .hero h1{font-size:clamp(2.4rem,12vw,3.5rem)}.sample-page .nav-links a:not(.nav-cta){display:none}}