/* * Deliberately plain styling. The demo is a test rig — predictable over pretty. * Loaded AFTER the snippet (which is first in ), so the snippet's pre-paint * element-hide is in place before this paints. */ * { box-sizing: border-box; } body { margin: 0; font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif; color: #1a1a1a; line-height: 1.5; } .nav { display: flex; gap: 1.5rem; align-items: center; padding: 1rem 1.5rem; border-bottom: 1px solid #e5e5e5; } .nav a { color: #444; text-decoration: none; } .nav .nav-brand { font-weight: 700; color: #1a1a1a; margin-right: auto; } main { max-width: 48rem; margin: 0 auto; padding: 3rem 1.5rem; } h1 { font-size: 2rem; margin: 0 0 0.75rem; } .subhead { font-size: 1.125rem; color: #555; } .cta-row { margin-top: 1.5rem; display: flex; gap: 1rem; align-items: center; } .btn { display: inline-block; padding: 0.65rem 1.25rem; border: 1px solid #1a1a1a; border-radius: 6px; background: #1a1a1a; color: #fff; font: inherit; text-decoration: none; cursor: pointer; } .link { color: #0a58ca; } .plan-table { border-collapse: collapse; width: 100%; margin-top: 1rem; } .plan-table th, .plan-table td { border: 1px solid #e5e5e5; padding: 0.6rem 0.9rem; text-align: left; } .plan-featured { background: #f6fbf8; } .signup-form { display: flex; flex-direction: column; gap: 1rem; max-width: 22rem; } .signup-form label { display: flex; flex-direction: column; gap: 0.35rem; font-weight: 600; } .signup-form input { padding: 0.55rem 0.7rem; border: 1px solid #bbb; border-radius: 6px; font: inherit; } .hint { color: #777; font-size: 0.9rem; } .footer { max-width: 48rem; margin: 0 auto; padding: 1.5rem; color: #777; font-size: 0.9rem; border-top: 1px solid #e5e5e5; } .order code { background: #f1f1f1; padding: 0.15rem 0.4rem; border-radius: 4px; } /* Classes Exp B's variations add via `addClass` — visibly distinct so the variation is eyeballable without inspecting the DOM. */ .is-featured { background: #b8860b; border-color: #8a6508; } .is-highlight { background: #0a58ca; border-color: #084298; }