/* Original marginnote.com visual language over the MN5 page structure (brief: keep the existing style).
   Tokens from the live site: warm white / #f6f6f4 bands, near-black text and buttons, mono kickers,
   #2563eb accent. Loaded last on pages built on home.css (homepage, Duo, CLI, site map). */
:root{--ink:#0a0a0a;--muted:#525252;--subtle:#737373;--blue:#2563eb;--line:#e5e5e3;--line-strong:#d4d4d0;--paper:#f6f6f4;--mono:ui-monospace,"SF Mono",Menlo,monospace}
html body{background:#fefefe;color:var(--ink)}
html body h1,html body h2{font-weight:800;letter-spacing:-.026em;color:var(--ink)}
html body h3{color:var(--ink)}
html body h1 em,html body h2 em{color:var(--blue);font-style:normal}

/* Kickers: mono, uppercase, blue */
html body .eyebrow{font-family:var(--mono);font-size:12.5px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--blue)}
html body .text-link{color:var(--blue)}
html body .button{background:var(--ink);color:#fff;border-radius:10px}
html body .button:hover{background:#262626;color:#fff}

/* Hero product frame */
html body .workspace-figure{background:var(--paper);border-color:var(--line)}
html body .workspace-label{color:var(--muted)}
html body .workspace-label i{background:#10b981}
html body .workspace-image{border-color:var(--line);box-shadow:0 20px 60px rgba(0,0,0,.08)}
html body .workspace-figure figcaption{color:var(--muted)}

/* Core flow: a light band like the live "how it works" section */
html body .foundation{background:#fefefe;color:var(--ink);border-top:1px solid var(--line)}
html body .foundation-heading>p{color:var(--muted)}
html body .foundation .eyebrow{color:var(--blue)}
html body .core-flow li{border-top-color:var(--line)}
html body .core-number{color:var(--subtle);font-family:var(--mono)}
html body .core-flow h3+p,html body .core-assist p{color:var(--muted)}
html body .core-flow a,html body .core-assist a{color:var(--blue)}
html body .core-flow a:hover,html body .core-assist a:hover{color:#1d4ed8}
html body .core-assist{border-top-color:var(--line)}
html body .core-assist small{color:var(--subtle)}

/* Scenarios and user stories */
html body .stories,html body .stories.section{background:var(--paper)}
html body .quote-category,html body .quote-note,html body .quotes figcaption small,html body .comparison-note{color:var(--subtle)}
html body .quotes figcaption{color:var(--muted)}
html body .quotes figcaption a{color:var(--blue)}

/* Comparison */
html body .comparison-table thead th{color:var(--subtle);font-family:var(--mono);font-size:11.5px;letter-spacing:.04em}
html body .comparison-table td:nth-child(2){color:var(--muted)}
html body .comparison-table td:last-child,html body .comparison-table thead th:last-child{background:#eff4ff;color:#1e3a8a}

/* Extensions (Duo / CLI entries) */
html body .extension{background:#fff;border-color:var(--line)}
html body .extension:hover{border-color:var(--line-strong)}

/* Closing download band: dark, as on the live site */
html body .download{background:var(--ink);color:#fff;border-top:0}
html body .download h2,html body .download h3,html body .download strong{color:#fff}
html body .download h2 em{color:#93b4ff}
html body .download .eyebrow{color:#93b4ff}
html body .download p,html body .download h2+p,html body .download-note,html body .upgrade-note,html body .download-platforms>p:first-child,html body .download-platforms>div p{color:rgba(255,255,255,.62)}
html body .download-platforms>div{border-top-color:rgba(255,255,255,.14)}
html body .download a{color:#fff}
html body .download-platforms>a,html body .download .text-link{color:#93b4ff}
html body .download [data-platform].recommended{background:rgba(255,255,255,.06)}

/* Footer */
html body .footer{color:var(--muted)}
html body .footer nav{color:var(--muted)}
html body .footer>p{color:var(--subtle)}

/* Explainer stage around the device */
html body .xp{background:var(--paper)}
html body .xp-tag{font-family:var(--mono);border-color:#bfd0f7;color:var(--blue);border-radius:6px}
html body .xp-head p:not(.eyebrow){color:var(--muted)}
html body .xp-caption strong{color:var(--ink)}
html body .xp-caption span,html body .xp-note{color:var(--subtle)}
html body .xp-steps button{border-color:var(--line-strong);color:var(--muted);border-radius:10px}
html body .xp-steps button.is-on{border-color:var(--ink);color:var(--ink)}
html body .xp-steps button i{background:var(--blue)}
html body .xp-steps .xp-sep{background:var(--line-strong)}
html body .xp-controls button,html body .xp-proof a{color:var(--blue)}
html body .xp-feature{border-color:var(--line);border-radius:16px}
html body .xp-feature-name{color:var(--ink)}
html body .xp-feature>div>p:last-child{color:var(--muted)}
html body .xp-feature figure{background:#fafaf8;border-top-color:var(--line)}
html body .xp-device{box-shadow:0 20px 60px rgba(0,0,0,.10),0 4px 14px rgba(0,0,0,.05)}

/* Duo / CLI detail pages */
html body .detail-conditions{background:var(--paper);border-color:var(--line)}
html body .duo-detail{background:var(--paper);color:var(--ink)}
html body .duo-detail .detail-lead,html body .duo-detail .detail-note{color:var(--muted)}
html body .duo-detail .eyebrow{color:var(--blue)}
html body .duo-stage figcaption{color:var(--muted)}html body .duo-stage figcaption strong{color:var(--ink)}
html body .xp-head .eyebrow{flex-wrap:wrap;justify-content:center;row-gap:8px}html body .xp-tag{white-space:nowrap}@media(max-width:700px){html body .xp-head .eyebrow{font-size:11.5px}}

/* ── Original layout pieces (markup from _tools/apply_original_layout.py) ── */
/* Hero: centered, pill eyebrow, highlighted keyword — as on the live site */
html body .hero{position:relative}
html body .hero::before{content:"";position:absolute;top:-200px;left:50%;transform:translateX(-50%);width:1100px;max-width:100vw;height:700px;background:radial-gradient(ellipse at center,rgba(37,99,235,.08),transparent 60%);z-index:-1;pointer-events:none}
.mn-hero{text-align:center;max-width:860px;margin:0 auto;padding:72px 0 52px}
.mn-hero-pill{display:inline-flex;align-items:center;gap:8px;margin:0 0 28px;padding:6px 14px;background:#fff;border:1px solid var(--line);border-radius:100px;font:500 13px/1.5 var(--mono);letter-spacing:-.01em;color:var(--muted);box-shadow:0 1px 2px rgba(0,0,0,.04)}
.mn-hero-pill .dot{width:6px;height:6px;background:#10b981;border-radius:50%;box-shadow:0 0 0 3px rgba(16,185,129,.15)}
.mn-hero-pill strong{color:var(--ink);font-weight:600}
html body .mn-hero h1{font-size:clamp(40px,6.5vw,76px);font-weight:800;letter-spacing:-.025em;line-height:1.15;margin:0 0 28px}
html body .mn-hero h1 .highlight{color:var(--blue);font-weight:700}
.mn-hero-sub{font-size:clamp(17px,1.8vw,20px);color:var(--muted);max-width:640px;margin:0 auto 36px;line-height:1.6}
.mn-hero-cta{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}
.mn-btn-secondary{display:inline-flex;align-items:center;gap:8px;padding:14px 24px;font-size:15px;font-weight:600;border-radius:10px;background:var(--paper);color:var(--ink);border:1px solid var(--line-strong);transition:background .15s}
.mn-btn-secondary:hover{background:#eeedea;color:var(--ink)}
html body .hero .workspace-figure{max-width:1080px;margin:8px auto 0}
@media(max-width:760px){.mn-hero{padding:44px 0 32px}.mn-hero-pill{font-size:11.5px;margin-bottom:22px}}

/* Scenario cards: icon tile + mono tags, white card with hairline border */
html body .scenario-grid>a{position:relative;padding:28px 24px 22px;border:1px solid var(--line);border-radius:16px;background:#fff;transition:transform .15s,box-shadow .15s,border-color .15s}
html body .scenario-grid>a:hover{transform:translateY(-2px);box-shadow:0 4px 20px rgba(0,0,0,.06);border-color:var(--line-strong)}
html body .scenario-grid .scenario-icon{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:10px;font-size:20px;font-style:normal;margin-bottom:16px}
.icon-medical{background:#fee2e2}.icon-law{background:#ede9fe}.icon-lawyer{background:#fffbeb;border:1px solid #fde68a}.icon-research{background:#dbeafe}.icon-exam{background:#fef3c7}.icon-lang{background:#d1fae5}
html body .scenario-grid span{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--blue)}
html body .scenario-grid h3{font-size:19px;margin:10px 0 8px;letter-spacing:-.02em}
html body .scenario-grid p{font-size:13.5px;color:var(--muted);margin-bottom:14px}
html body .scenario-grid .scenario-tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px;font-style:normal}
html body .scenario-grid .scenario-tags i{font:11px/1.6 var(--mono);font-style:normal;color:var(--subtle);padding:2px 8px;background:var(--paper);border-radius:4px}
html body .scenario-grid b{position:absolute;top:24px;right:22px;margin:0;color:var(--subtle);font-size:16px;transition:transform .2s,color .2s}
html body .scenario-grid>a:hover b{color:var(--blue);transform:translateX(3px)}

/* Footer: the live site's four columns */
.site-footer{padding:80px 0 40px;background:var(--paper);border-top:1px solid var(--line);color:var(--ink);font-size:14px;line-height:1.7}
.site-footer .container{width:auto;max-width:1240px;margin:0 auto;padding:0 24px}
.site-footer ul{list-style:none;margin:0;padding:0}
.site-footer a{color:inherit;text-decoration:none}
.site-footer .footer-grid{display:grid;grid-template-columns:2fr repeat(4,1fr);gap:48px;margin-bottom:56px}
.site-footer .logo{display:flex;align-items:center;gap:10px;font-weight:700;font-size:17px;letter-spacing:-.01em;margin-bottom:16px}
.site-footer .logo-img{width:28px;height:28px;border-radius:8px;display:block}
.site-footer .footer-brand p{font-size:14px;color:var(--muted);max-width:280px;line-height:1.55;margin:0}
.site-footer .footer-col h4{font:500 12px/1.4 var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--subtle);margin:0 0 16px}
.site-footer .footer-col li{margin-bottom:10px}
.site-footer .footer-col a{font-size:14px;color:var(--muted);transition:color .15s}
.site-footer .footer-col a:hover{color:var(--ink)}
.site-footer .footer-bottom{padding-top:32px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:24px;font:13px/1.7 var(--mono);color:var(--subtle)}
@media(max-width:900px){.site-footer .footer-grid{grid-template-columns:1fr 1fr;gap:32px}}
@media(max-width:600px){.site-footer{padding:56px 0 32px}.site-footer .footer-grid{grid-template-columns:1fr}.site-footer .footer-bottom{flex-direction:column}}