/* ============================================================ Pacta Protocol — shared dark theme (homepage + docs) Pure CSS. Near-black navy, electric-blue accent. ============================================================ */ :root { --bg: #0A0E17; --bg-2: #0D1220; --panel: #10162A; --panel-2: #121a30; --border: rgba(255,255,255,.08); --border-2: rgba(255,255,255,.14); --ink: #EAF0FF; --ink-soft: #AEB8D0; --ink-dim: #7A85A0; --blue: #4353FF; --blue-2: #3B5BFF; --blue-soft: #6E7BFF; --cyan: #58E0FF; --cyan-2: #7BEBFF; --radius: 16px; --radius-sm: 12px; --wrap: 1120px; --font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: var(--font); background: var(--bg); color: var(--ink); line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } /* ---- bilingual visibility (scoped under body so it never hits ) ---- */ body [lang] { display: none; } body[data-lang="en"] [lang="en"], body[data-lang="es"] [lang="es"] { display: revert; } a { color: inherit; text-decoration: none; } .wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 24px; } .money { font-family: var(--mono); font-size: .94em; color: var(--cyan-2); } /* ============================================================ NAV ============================================================ */ .nav { position: sticky; top: 0; z-index: 50; background: rgba(10,14,23,.72); backdrop-filter: saturate(140%) blur(14px); border-bottom: 1px solid var(--border); } .nav-inner { max-width: var(--wrap); margin: 0 auto; padding: 14px 24px; display: flex; align-items: center; gap: 20px; } .brand { display: inline-flex; align-items: center; gap: 11px; color: var(--ink); flex-shrink: 0; } .brand svg, .brand .mark { width: 30px; height: 30px; display: block; } .brand-word, .wordmark { font-weight: 800; font-size: 18px; letter-spacing: -.02em; white-space: nowrap; } .brand-word .sub { color: var(--ink-soft); font-weight: 700; } .nav-links { display: flex; align-items: center; gap: 26px; margin-left: 12px; } .nav-links a { color: var(--ink-soft); font-size: 14.5px; font-weight: 500; transition: color .15s ease; } .nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--ink); } .nav-right { margin-left: auto; display: flex; align-items: center; gap: 14px; } .lang-toggle { display: inline-flex; border: 1px solid var(--border-2); border-radius: 999px; overflow: hidden; } .lang-toggle button { appearance: none; border: 0; background: transparent; color: var(--ink-dim); font: inherit; font-size: 12.5px; font-weight: 700; padding: 6px 12px; cursor: pointer; transition: background .15s ease, color .15s ease; } .lang-toggle button[aria-pressed="true"] { background: var(--blue); color: #fff; } /* ---- buttons ---- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-weight: 600; font-size: 14.5px; border-radius: 10px; padding: 11px 20px; cursor: pointer; white-space: nowrap; transition: transform .12s ease, box-shadow .2s ease, background .2s ease; } .btn-primary, .btn-gold { background: linear-gradient(180deg, var(--blue-soft), var(--blue)); color: #fff; box-shadow: 0 8px 26px -8px rgba(67,83,255,.7), inset 0 1px 0 rgba(255,255,255,.25); } .btn-primary:hover, .btn-gold:hover { transform: translateY(-1px); box-shadow: 0 12px 34px -8px rgba(67,83,255,.85), inset 0 1px 0 rgba(255,255,255,.25); } .btn-ghost, .btn-green { background: rgba(255,255,255,.04); color: var(--ink); border: 1px solid var(--border-2); } .btn-ghost:hover, .btn-green:hover { background: rgba(255,255,255,.08); } .btn-lg { padding: 14px 26px; font-size: 15.5px; } /* ============================================================ SECTION SHELL ============================================================ */ .section { padding: 96px 0; position: relative; } .eyebrow { display: inline-block; color: var(--blue-soft); font-size: 12.5px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; margin: 0 0 16px; } h1, h2, h3 { letter-spacing: -.025em; line-height: 1.1; margin: 0; } .section h2 { font-size: clamp(28px, 4vw, 42px); font-weight: 800; margin-bottom: 16px; } .section .lede, .lede { color: var(--ink-soft); font-size: clamp(16px, 1.6vw, 18.5px); max-width: 660px; margin: 0 0 8px; } .center { text-align: center; } .center .lede { margin-left: auto; margin-right: auto; } .head-center { text-align: center; max-width: 720px; margin: 0 auto 8px; } .head-center .lede { margin-left: auto; margin-right: auto; } /* ============================================================ HERO ============================================================ */ .hero { padding: 84px 0 92px; background: radial-gradient(1100px 620px at 78% -8%, rgba(67,83,255,.20), transparent 60%), radial-gradient(760px 520px at 8% 12%, rgba(88,224,255,.08), transparent 60%), var(--bg); border-bottom: 1px solid var(--border); } .hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; } .badge, .pill-badge { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; color: var(--cyan-2); background: rgba(88,224,255,.08); border: 1px solid rgba(88,224,255,.22); border-radius: 999px; padding: 6px 14px; margin-bottom: 22px; } .badge .dot, .pill-badge .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 10px var(--cyan); } .hero h1 { font-size: clamp(36px, 5.4vw, 60px); font-weight: 800; letter-spacing: -.03em; margin-bottom: 22px; } .hero h1 .hl, .hero h1 .accent { background: linear-gradient(90deg, var(--cyan-2), var(--blue-soft)); -webkit-background-clip: text; background-clip: text; color: transparent; } .hero p.lede { color: var(--ink-soft); font-size: clamp(16px, 1.7vw, 19px); max-width: 540px; margin-bottom: 30px; } .hero-cta, .cta-row { display: flex; gap: 14px; flex-wrap: wrap; } /* ---- single agreement card mockup ---- */ .mock { background: linear-gradient(180deg, var(--panel-2), var(--panel)); border: 1px solid var(--border-2); border-radius: var(--radius); padding: 22px 22px 20px; box-shadow: 0 30px 70px -30px rgba(0,0,0,.85), 0 0 0 1px rgba(67,83,255,.05); } .mock-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; } .mock .who { display: flex; align-items: center; gap: 12px; } .mock .avatar { width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0; background: linear-gradient(180deg, var(--blue-soft), var(--blue)); display: grid; place-items: center; font-weight: 800; color: #fff; font-size: 17px; } .mock .who b { font-size: 14.5px; } .mock .who span { font-size: 12px; color: var(--ink-dim); } .status-pill { display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 700; color: var(--cyan-2); background: rgba(88,224,255,.10); border: 1px solid rgba(88,224,255,.25); padding: 5px 11px; border-radius: 999px; white-space: nowrap; } .status-pill .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 8px var(--cyan); } .mock-price { font-size: 34px; font-weight: 800; letter-spacing: -.02em; } .mock-sub { font-size: 13px; color: var(--ink-soft); margin: 2px 0 18px; } .mock-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 11px 0; border-top: 1px solid var(--border); font-size: 13.5px; } .mock-row .ic { color: var(--cyan-2); } .mock-row .lbl { color: var(--ink-soft); } .mock-row .val { color: var(--ink); font-weight: 650; font-variant-numeric: tabular-nums; } .mock-foot { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; } .tag-stake, .tag-proof { font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 999px; } .tag-stake { color: var(--cyan-2); background: rgba(88,224,255,.09); border: 1px solid rgba(88,224,255,.24); } .tag-proof { color: var(--blue-soft); background: rgba(110,123,255,.12); border: 1px solid rgba(110,123,255,.3); } /* ============================================================ MCP CODE SECTION ============================================================ */ .mcp-grid { display: grid; grid-template-columns: .92fr 1.08fr; gap: 48px; align-items: center; } .chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0 4px; } .chip { font-size: 12.5px; color: var(--ink-soft); background: rgba(255,255,255,.03); border: 1px solid var(--border); border-radius: 999px; padding: 6px 12px; } .chip b { color: var(--ink); font-weight: 700; } .check-list, .checks { list-style: none; padding: 0; margin: 26px 0; display: grid; gap: 14px; } .check-list li, .checks li { display: flex; gap: 12px; align-items: flex-start; color: var(--ink-soft); font-size: 15px; } .checks li svg { flex-shrink: 0; width: 18px; height: 18px; color: var(--cyan-2); margin-top: 3px; } .check-list li strong { color: var(--ink); font-weight: 650; } .check-list .ck { flex-shrink: 0; width: 22px; height: 22px; border-radius: 6px; background: rgba(67,83,255,.16); border: 1px solid rgba(110,123,255,.4); display: grid; place-items: center; margin-top: 1px; } .check-list .ck svg { width: 12px; height: 12px; color: var(--cyan-2); } .codeblock, .code-window { background: #070A12; border: 1px solid var(--border-2); border-radius: var(--radius); box-shadow: 0 30px 70px -30px rgba(0,0,0,.9); overflow: hidden; } .codeblock .cb-top, .code-window .code-bar { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--border); background: rgba(255,255,255,.02); } .codeblock .cb-top .dot, .code-window .dots i { width: 11px; height: 11px; border-radius: 50%; display: inline-block; } .dot.r { background: #ff5f57; } .dot.y { background: #febc2e; } .dot.g { background: #28c840; } .code-window .dots { display: inline-flex; gap: 8px; } .code-window .dots i:nth-child(1) { background: #ff5f57; } .code-window .dots i:nth-child(2) { background: #febc2e; } .code-window .dots i:nth-child(3) { background: #28c840; } .codeblock .cb-file, .code-window .fname { margin-left: 8px; font-family: var(--mono); font-size: 12px; color: var(--ink-dim); } .codeblock pre, .code-window pre { margin: 0; padding: 20px 22px; font-family: var(--mono); font-size: 13px; line-height: 1.75; overflow-x: auto; color: #C8D2EC; } .codeblock .c, .code-window .tok-c { color: #5E6B8C; font-style: italic; } .codeblock .s, .code-window .tok-k { color: var(--cyan-2); } .codeblock .k { color: var(--blue-soft); } .codeblock .g, .code-window .tok-s { color: var(--cyan-2); } /* ============================================================ REGISTRY GRID ============================================================ */ .reg-grid, .offer-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 44px; } .reg-card, .offer { background: linear-gradient(180deg, var(--panel-2), var(--panel)); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px 20px 20px; display: flex; flex-direction: column; transition: transform .15s ease, border-color .2s ease; } .reg-card:hover, .offer:hover { transform: translateY(-3px); border-color: var(--border-2); } .reg-meta, .offer .meta { font-size: 11.5px; color: var(--ink-dim); font-weight: 600; letter-spacing: .03em; text-transform: uppercase; margin-bottom: 14px; } .reg-price, .offer .price { font-size: 26px; font-weight: 800; letter-spacing: -.02em; } .reg-name { font-size: 15px; font-weight: 700; margin: 8px 0 6px; } .offer .title { font-size: 15px; font-weight: 700; margin: 8px 0 6px; display: block; } .reg-desc, .offer .desc { font-size: 13px; color: var(--ink-soft); line-height: 1.5; margin: 0 0 16px; flex: 1; } .reg-foot, .ofoot { display: flex; flex-wrap: wrap; gap: 7px; } .pill, .badge-stake, .badge-proof { font-size: 11px; font-weight: 700; letter-spacing: .02em; padding: 4px 10px; border-radius: 999px; } .pill-stake, .badge-stake { color: var(--cyan-2); background: rgba(88,224,255,.09); border: 1px solid rgba(88,224,255,.24); } .pill-proven, .badge-proof { color: var(--blue-soft); background: rgba(110,123,255,.12); border: 1px solid rgba(110,123,255,.3); } /* ============================================================ VERIFICATION PIPELINE + TRUST ============================================================ */ .pipeline { background: radial-gradient(700px 400px at 50% 0%, rgba(67,83,255,.14), transparent 62%), #0B0F1A; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .pipeline h2 { font-size: clamp(30px, 4.4vw, 48px); } /* inset variant (docs / reused) */ .trust-inset { border-radius: 22px; } .pipe-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-top: 56px; position: relative; } .pipe-row::before { content: ""; position: absolute; top: 34px; left: 10%; right: 10%; height: 1px; background: linear-gradient(90deg, transparent, rgba(110,123,255,.5), transparent); z-index: 0; } .pipe-step { text-align: center; position: relative; z-index: 1; padding: 0 6px; } .pipe-icon { width: 68px; height: 68px; margin: 0 auto 18px; border-radius: 18px; background: linear-gradient(180deg, #141c33, #0e1428); border: 1px solid rgba(110,123,255,.28); display: grid; place-items: center; box-shadow: 0 0 0 6px rgba(67,83,255,.06), 0 14px 30px -14px rgba(67,83,255,.5); } .pipe-icon svg { width: 28px; height: 28px; color: var(--blue-soft); } .pipe-step h3 { font-size: 16px; font-weight: 700; margin-bottom: 8px; } .pipe-step p { font-size: 12.5px; color: var(--ink-dim); line-height: 1.5; margin: 0; } .mech-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 60px; } .mech-card, .mech { background: rgba(255,255,255,.025); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px 22px 20px; text-align: left; } .mech-card h3, .mech h3 { font-size: 16px; font-weight: 700; margin-bottom: 10px; color: var(--ink); display: flex; align-items: center; gap: 10px; } .mech-card h3 .ic { color: var(--blue-soft); } .mech h3 svg { color: var(--blue-soft); flex-shrink: 0; } .mech-card p, .mech p { font-size: 13.5px; color: var(--ink-soft); line-height: 1.55; margin: 0; } /* ============================================================ FOR BUSINESSES ============================================================ */ .biz-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 44px; } .biz-card { background: linear-gradient(180deg, var(--panel-2), var(--panel)); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px 22px; } .biz-card .num { font-family: var(--mono); font-size: 13px; font-weight: 700; color: var(--blue-soft); margin-bottom: 12px; display: block; } .biz-card .ic { width: 42px; height: 42px; border-radius: 11px; margin-bottom: 14px; background: rgba(67,83,255,.14); border: 1px solid rgba(110,123,255,.3); display: grid; place-items: center; color: var(--blue-soft); } .biz-card h3 { font-size: 16.5px; font-weight: 700; margin-bottom: 10px; } .biz-card p { font-size: 13.5px; color: var(--ink-soft); line-height: 1.55; margin: 0; } /* ============================================================ FAQ ============================================================ */ .faq-list, .faq-wrap { margin-top: 40px; display: grid; gap: 12px; max-width: 820px; } .head-center + .faq-wrap { margin-left: auto; margin-right: auto; } .faq { background: rgba(255,255,255,.025); border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; } .faq summary { list-style: none; cursor: pointer; padding: 18px 22px; font-size: 16px; font-weight: 650; display: flex; align-items: center; justify-content: space-between; gap: 16px; color: var(--ink); } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: ""; width: 11px; height: 11px; flex-shrink: 0; border-right: 2px solid var(--ink-dim); border-bottom: 2px solid var(--ink-dim); transform: rotate(45deg); transition: transform .2s ease; } .faq .plus { display: none; } .faq[open] summary::after { transform: rotate(-135deg); } .faq[open] summary { color: var(--cyan-2); } .faq .a { padding: 0 22px 20px; } .faq .a p { margin: 0 0 10px; color: var(--ink-soft); font-size: 14.5px; line-height: 1.65; } .faq .a p:last-child { margin-bottom: 0; } .faq .a a { color: var(--blue-soft); } /* ============================================================ FINAL CTA ============================================================ */ .final, .cta { text-align: center; background: radial-gradient(760px 420px at 50% 120%, rgba(67,83,255,.28), transparent 60%), var(--bg-2); border-top: 1px solid var(--border); padding: 96px 0; } .final .mark { width: 56px; height: 56px; margin: 0 auto 24px; color: var(--ink); } .final h2, .cta h2 { font-size: clamp(30px, 4.6vw, 46px); font-weight: 800; margin-bottom: 20px; } .cta .lede { margin: 0 auto 26px; } .final .cta-row, .cta .cta-row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; } /* ============================================================ FOOTER ============================================================ */ .footer { background: #070A12; border-top: 1px solid var(--border); padding: 56px 0 34px; } .footer .wrap { max-width: var(--wrap); } .footer-cols { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 32px; } .footer .brand { margin-bottom: 14px; align-items: flex-start; } .footer .wordmark, .footer .brand-word { line-height: 1.05; white-space: normal; } .footer .tag { color: var(--ink-dim); font-size: 13.5px; margin: 0; max-width: 260px; } .footer h4 { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-dim); margin: 0 0 14px; font-weight: 700; } .footer-cols a { display: block; color: var(--ink-soft); font-size: 14px; padding: 5px 0; transition: color .15s ease; } .footer-cols a:hover { color: var(--ink); } .footer-base { margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--border); color: var(--ink-dim); font-size: 12.5px; } /* ============================================================ DOCS PAGES ============================================================ */ .docs-layout { max-width: var(--wrap); margin: 0 auto; padding: 40px 24px 90px; display: grid; grid-template-columns: 220px 1fr; gap: 48px; } .docs-side { position: sticky; top: 84px; align-self: start; } .docs-side .kicker { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-dim); font-weight: 700; margin: 0 0 14px; } .docs-side nav { display: grid; gap: 4px; } .docs-side nav a { display: block; color: var(--ink-soft); font-size: 14px; padding: 8px 12px; border-radius: 8px; border-left: 2px solid transparent; transition: background .15s ease, color .15s ease; } .docs-side nav a:hover { background: rgba(255,255,255,.04); color: var(--ink); } .docs-side nav a[aria-current="page"] { color: var(--ink); background: rgba(67,83,255,.12); border-left-color: var(--blue); } .docs-content { min-width: 0; max-width: 780px; } .crumbs { font-size: 12.5px; color: var(--ink-dim); margin: 0 0 18px; } .crumbs a { color: var(--ink-soft); } .crumbs a:hover { color: var(--ink); } .crumbs span { margin: 0 6px; opacity: .5; } .docs-content h1 { font-size: clamp(30px, 4vw, 40px); font-weight: 800; margin: 6px 0 18px; } .docs-content h2 { font-size: 24px; font-weight: 750; margin: 44px 0 14px; letter-spacing: -.02em; } .docs-content h3 { font-size: 17px; font-weight: 700; margin: 0 0 8px; } .docs-content p { color: var(--ink-soft); font-size: 15.5px; margin: 0 0 16px; } .docs-content .lede { color: var(--ink); font-size: 18px; margin-bottom: 22px; } .docs-content a { color: var(--blue-soft); } .docs-content a:hover { text-decoration: underline; } .docs-content strong { color: var(--ink); } .docs-content code { font-family: var(--mono); font-size: .88em; background: rgba(255,255,255,.06); border: 1px solid var(--border); border-radius: 5px; padding: 1px 6px; color: var(--cyan-2); } .docs-content pre { background: #070A12; border: 1px solid var(--border-2); border-radius: var(--radius-sm); padding: 18px 20px; overflow-x: auto; margin: 0 0 20px; font-family: var(--mono); font-size: 13px; line-height: 1.7; color: #C8D2EC; } .docs-content pre code { background: none; border: 0; padding: 0; color: inherit; font-size: 13px; } .docs-content pre .c { color: #5E6B8C; font-style: italic; } .docs-content pre .g { color: var(--cyan-2); } .note { background: rgba(67,83,255,.08); border: 1px solid rgba(110,123,255,.28); border-left: 3px solid var(--blue); border-radius: var(--radius-sm); padding: 16px 20px; margin: 0 0 20px; color: var(--ink-soft); font-size: 14.5px; line-height: 1.6; } .note p { margin: 0 0 10px; } .note p:last-child { margin-bottom: 0; } .note a { color: var(--blue-soft); } .note-wax { background: rgba(255,180,80,.07); border-color: rgba(255,180,80,.3); border-left-color: #FFB84D; } .kicker { color: var(--ink-dim); } /* generic cards / grids used in docs */ .grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin: 8px 0 20px; } .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 8px 0 20px; } .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: 8px 0 20px; } .card { background: linear-gradient(180deg, var(--panel-2), var(--panel)); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; } .card h3 { margin-bottom: 8px; font-size: 16px; } .card p { font-size: 14px; margin: 0 0 8px; } .card p:last-child { margin-bottom: 0; } .card-accent { border-color: rgba(110,123,255,.28); box-shadow: inset 0 0 0 1px rgba(67,83,255,.04); } .steps { display: grid; gap: 12px; margin: 8px 0 20px; } .step { background: rgba(255,255,255,.025); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 16px 20px; } .step h3 { font-size: 15px; margin-bottom: 6px; } .step p { font-size: 14px; color: var(--ink-soft); margin: 0; } .table-scroll { overflow-x: auto; margin: 0 0 20px; } table.ref { width: 100%; border-collapse: collapse; font-size: 14px; } table.ref th, table.ref td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--border); vertical-align: top; } table.ref th { color: var(--ink); font-weight: 700; font-size: 12.5px; letter-spacing: .04em; text-transform: uppercase; } table.ref td { color: var(--ink-soft); } table.ref td:first-child { font-family: var(--mono); color: var(--cyan-2); white-space: nowrap; } .tool { background: rgba(255,255,255,.025); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 16px 20px; margin: 0 0 12px; } .tool h3 { font-family: var(--mono); font-size: 14.5px; color: var(--ink); margin-bottom: 6px; } .tool p { font-size: 14px; margin: 0 0 8px; } .tool p:last-child { margin-bottom: 0; } .tool .params { font-family: var(--mono); font-size: 12.5px; color: var(--ink-dim); } /* privacy / generic prose page */ .prose-page { max-width: 780px; margin: 0 auto; padding: 56px 24px 90px; } .prose-page h1 { font-size: clamp(30px, 4vw, 42px); font-weight: 800; margin: 6px 0 10px; } .prose-page .eff { color: var(--ink-dim); font-size: 13.5px; margin: 0 0 28px; } .prose-page h2 { font-size: 21px; font-weight: 750; margin: 36px 0 12px; } .prose-page p, .prose-page li { color: var(--ink-soft); font-size: 15.5px; line-height: 1.65; } .prose-page ul { padding-left: 20px; margin: 0 0 16px; } .prose-page li { margin-bottom: 8px; } .prose-page a { color: var(--blue-soft); } .prose-page a:hover { text-decoration: underline; } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width: 940px) { .hero-grid { grid-template-columns: 1fr; gap: 40px; } .mcp-grid { grid-template-columns: 1fr; gap: 32px; } .reg-grid, .offer-grid { grid-template-columns: repeat(2, 1fr); } .biz-grid { grid-template-columns: repeat(2, 1fr); } .mech-grid { grid-template-columns: 1fr; } .grid-3, .grid-4 { grid-template-columns: 1fr 1fr; } .footer-cols { grid-template-columns: 1fr 1fr; } .nav-links { display: none; } .pipe-icon { width: 56px; height: 56px; } .pipe-step p { display: none; } .docs-layout { grid-template-columns: 1fr; gap: 24px; } .docs-side { position: static; } .docs-side nav { grid-auto-flow: column; overflow-x: auto; } } @media (max-width: 560px) { .section, .final, .cta { padding: 68px 0; } .reg-grid, .offer-grid { grid-template-columns: 1fr; } .biz-grid { grid-template-columns: 1fr; } .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } .footer-cols { grid-template-columns: 1fr; } .pipe-row { grid-template-columns: repeat(2, 1fr); gap: 22px; } .pipe-row::before { display: none; } .pipe-step p { display: block; } .brand-word .sub { display: none; } }