@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root { --ink: #09090b; --panel: #101014; --panel-2: #15131a; --text: #ececf0; --muted: #8d8b96; --line: #2a1b3c; --violet: #a855f7; --violet-bright: #d38cff; --green: #68e29b; --mono: 'JetBrains Mono', monospace; --display: 'Space Grotesk', sans-serif; --body: 'DM Sans', sans-serif; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--ink); color: var(--text); font-family: var(--body); line-height: 1.55; overflow-x: hidden; }
body::before { content: ''; position: fixed; inset: 0; pointer-events: none; opacity: .45; background: radial-gradient(circle at 82% 7%, rgba(111, 37, 170, .18), transparent 26rem), linear-gradient(115deg, transparent 0 56%, rgba(168,85,247,.025) 56% 56.2%, transparent 56.2%); }
.scanlines { position: fixed; inset: 0; z-index: 5; pointer-events: none; opacity: .045; background: repeating-linear-gradient(0deg, transparent 0 3px, #fff 4px); }
.site-shell { width: min(1180px, calc(100% - 48px)); margin: auto; position: relative; z-index: 1; }
.topbar { width: 100vw; height: 82px; display: flex; align-items: center; justify-content: space-between; margin-left: calc((100% - 100vw) / 2); padding: 0 max(24px, calc((100vw - 1180px) / 2)); border-bottom: 1px solid rgba(168,85,247,.2); position: sticky; top: 0; z-index: 10; background: rgba(9,9,11,.78); backdrop-filter: blur(18px); }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; font: 700 15px var(--display); letter-spacing: .14em; }
.brand-mark { display: grid; place-items: center; width: 26px; height: 26px; color: var(--ink); background: var(--violet-bright); font: 700 15px var(--mono); clip-path: polygon(0 0,100% 0,100% 75%,75% 100%,0 100%); }
.nav-links { display: flex; gap: 34px; margin-left: auto; margin-right: 42px; }
a { color: inherit; }
.nav-links a, .status, .footer a { color: var(--muted); font-size: 12px; text-decoration: none; }
.nav-links a { transition: color .2s; }
.nav-links a:hover, .footer a:hover { color: var(--violet-bright); }
.topbar-actions { display: flex; align-items: center; gap: 18px; }
.status { font: 11px var(--mono); text-transform: uppercase; }
.status i, .eyebrow-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 10px var(--green); margin-right: 6px; }
.button { display: inline-flex; gap: 16px; justify-content: center; align-items: center; min-height: 50px; padding: 0 20px; border: 1px solid var(--violet); text-decoration: none; font: 600 11px var(--mono); text-transform: uppercase; letter-spacing: .06em; transition: box-shadow .2s, background .2s, transform .2s, color .2s; }
.button:hover, .download-link:hover { transform: translateY(-2px); box-shadow: 0 0 26px rgba(168,85,247,.25); }
.button-primary { color: #12091b; background: var(--violet-bright); border-color: var(--violet-bright); }
.button-primary:hover { background: #e2b9ff; }
.button-ghost { color: var(--text); border-color: #49305f; background: transparent; }
.button-ghost:hover { color: var(--violet-bright); border-color: var(--violet); }
.button-small { min-height: 36px; padding: 0 14px; font-size: 10px; }
.section-grid { display: grid; grid-template-columns: minmax(250px, .7fr) minmax(0, 1.3fr); gap: clamp(44px, 8vw, 120px); }
.hero { min-height: 670px; align-items: center; padding: 106px 0 120px; border-bottom: 1px solid var(--line); }
.eyebrow, .code-label, .footer-label { color: var(--violet-bright); font: 500 10px var(--mono); letter-spacing: .14em; }
.eyebrow { margin: 0 0 25px; }
.hero h1, h2 { margin: 0; font-family: var(--display); letter-spacing: -.06em; line-height: .95; }
.hero h1 { font-size: clamp(62px, 8vw, 108px); font-weight: 600; }
h1 em { color: var(--violet-bright); font-style: normal; }
.hero-lede { max-width: 480px; margin: 30px 0 34px; color: #aaa8b2; font-size: 16px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-meta { display: flex; flex-wrap: wrap; gap: 22px; margin-top: 46px; color: var(--muted); font: 10px var(--mono); text-transform: uppercase; }
.hero-meta b { color: var(--text); font-weight: 500; }
.hero-console { position: relative; background: #0e0c19; border: 1px solid #2c1f3f; box-shadow: 22px 22px 0 rgba(47, 22, 67, .2), 0 0 80px rgba(104, 39, 155, .12); transform: rotate(1.2deg); overflow: hidden; }
.workspace-title, .workspace-help, .workspace-status, .workspace-panel { font-family: 'Consolas', 'JetBrains Mono', monospace; }
.workspace-title { display: flex; align-items: center; gap: 8px; min-height: 24px; padding: 10px 16px 4px; color: #7d7a91; font-size: 11.5px; letter-spacing: .02em; white-space: nowrap; overflow: hidden; }.workspace-name { flex: 0 0 auto; color: #c650f0; font-weight: 700; letter-spacing: .04em; margin-right: 22px; }.title-cursor { flex: 0 0 auto; width: 6px; height: 12px; background: #eee8f5; }
.workspace-help { padding: 2px 16px 12px; color: #9a97ab; font-size: 11.5px; border-bottom: 1px solid #241a33; }.workspace-help b, .workspace-tip b { color: #55506a; font-weight: 400; padding: 0 6px; }
.workspace-columns { display: grid; grid-template-columns: minmax(0, .58fr) minmax(0, 1fr); min-height: 340px; }.workspace-panel { position: relative; min-width: 0; padding: 16px 18px; }.workspace-panel + .workspace-panel { border-left: 1px solid #241a33; }.workspace-panel h3 { margin: 0 0 14px; color: #c650f0; font-size: 11.5px; font-weight: 600; letter-spacing: .04em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.workspace-list { display: grid; gap: 0; min-width: 0; }.workspace-item, .tool-item { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 4px; align-items: center; min-height: 22px; padding: 2px 18px; margin: 0 -18px; color: #b9b6c6; font-size: 11.5px; line-height: 1.3; }.workspace-item span, .tool-item span { color: #7d7a91; }.workspace-item strong, .tool-item strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 400; }.workspace-item.active { color: #f5edff; background: #9d3fee; }.workspace-item.active span { color: #edd9ff; }.tool-item.focused { color: #c650f0; font-weight: 600; }.tool-item.focused span { color: #c650f0; }.workspace-tip { position: static; margin: 18px 0 0; color: #7d7a91; font-size: 11.5px; line-height: 1.7; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.workspace-alert { position: absolute; right: 10px; top: 52%; width: 5px; height: 5px; border-radius: 50%; background: #e0524f; box-shadow: 0 0 8px rgba(224,82,79,.7); }.workspace-status { display: flex; gap: 30px; min-height: 30px; align-items: center; padding: 7px 16px; border-top: 1px solid #4a2870; background: #3c2159; color: #f2ecf8; font-size: 11px; overflow: hidden; }.workspace-status span { white-space: nowrap; }
.workspace-preview:focus-visible { outline: 2px solid #c650f0; outline-offset: 5px; }.workspace-item, .tool-item { cursor: pointer; }.workspace-item:focus-visible, .tool-item:focus-visible { outline: 1px solid #c650f0; outline-offset: -1px; }.workspace-notice { position: absolute; right: 12px; bottom: 42px; left: 12px; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 13px 15px; border: 1px solid #c650f0; background: rgba(20, 12, 29, .97); box-shadow: 0 12px 40px rgba(0,0,0,.55); font-family: 'Consolas', 'JetBrains Mono', monospace; }.workspace-notice strong, .workspace-notice p { display: block; }.workspace-notice strong { margin-top: 4px; color: #fff; font-size: 11px; }.workspace-notice p { margin: 4px 0 0; color: #9e98aa; font-size: 9px; }.notice-kicker { color: #c650f0; font-size: 8px; }.notice-close { align-self: flex-start; padding: 3px 0; border: 0; color: #9e98aa; background: transparent; cursor: pointer; font: 8px 'Consolas', 'JetBrains Mono', monospace; }.notice-close:hover { color: #fff; }
.window-dots { display: flex; gap: 5px; }.window-dots i { width: 6px; height: 6px; border-radius: 50%; background: #4a3955; }.window-dots i:first-child { background: var(--violet); }
.chrome-status { color: var(--green); }
.console-screen { min-height: 402px; padding: 32px 30px; font: 11px/2 var(--mono); background: linear-gradient(135deg, #0b0b0e, #120d17); }
.console-ascii { color: #ba78ef; font-size: 10px; line-height: 1.25; margin-bottom: 28px; opacity: .9; }.console-line { margin: 0; color: #d8d0dc; }.console-line.muted { color: #77727c; }.prompt { color: var(--green); }.line-fill { display: inline-block; width: 28%; border-top: 1px dashed #48354e; margin: 0 8px 3px; }.console-cursor { color: var(--violet-bright); animation: blink 1.1s steps(2) infinite; }
.module-section, .download-section { padding: 120px 0; border-bottom: 1px solid var(--line); }.section-heading h2 { font-size: clamp(40px, 5vw, 64px); }.section-heading h2 span { color: var(--violet-bright); }.section-heading > p:last-of-type { max-width: 270px; margin-top: 27px; color: var(--muted); font-size: 14px; }.code-label { margin: 0 0 25px; }
.module-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }.module-card { display: grid; grid-template-columns: 38px 1fr; gap: 16px; min-height: 162px; padding: 24px 20px; background: rgba(19,17,22,.76); border: 1px solid #271936; transition: border-color .2s, background .2s, transform .2s; }.module-card:hover { border-color: var(--violet); background: rgba(32,20,43,.8); transform: translateY(-3px); }.module-card-wide { grid-column: span 2; }.module-number { color: var(--violet); font: 500 11px var(--mono); }.module-card h3 { margin: -3px 0 9px; font: 600 20px var(--display); }.module-card p { min-height: 44px; margin: 0 0 18px; color: var(--muted); font-size: 12px; }.module-card code { color: #ba78ef; font: 10px var(--mono); }
.download-section { grid-template-columns: minmax(250px,.7fr) minmax(0,1.3fr); }.license-note { display: flex; align-items: center; gap: 12px; margin-top: 45px; color: var(--muted); font: 11px/1.7 var(--mono); }.license-inline-link { padding: 0; border: 0; color: var(--violet-bright); background: transparent; cursor: pointer; font: inherit; text-align: left; }.license-inline-link:hover { color: #e2b9ff; text-decoration: underline; }.license-icon { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid #5c3675; color: var(--violet-bright); font: 600 10px var(--mono); }.download-panel { padding: 10px; border: 1px solid #2b1b3a; background: rgba(14,12,17,.72); }.terminal-block { border: 1px solid #2c2034; background: #08080a; }.terminal-title { display: flex; justify-content: space-between; padding: 13px 16px; border-bottom: 1px solid #211529; color: var(--muted); font: 10px var(--mono); letter-spacing: .1em; }.copy-button { padding: 0; border: 0; color: var(--violet-bright); background: none; cursor: pointer; font: 10px var(--mono); }.terminal-block pre { margin: 0; padding: 24px 20px 18px; color: #d8d3db; font: 12px/2 var(--mono); overflow: auto; }.terminal-muted { color: var(--green); }.copy-feedback { min-height: 18px; margin: 0; padding: 0 20px 12px; color: var(--green); font: 10px var(--mono); }.download-actions { display: grid; gap: 8px; margin-top: 16px; }.download-link { display: grid; grid-template-columns: 50px 1fr 20px; align-items: center; gap: 12px; padding: 15px; border: 1px solid #39234d; color: var(--text); text-decoration: none; transition: all .2s; }.download-link:hover { border-color: var(--violet-bright); background: rgba(111,37,170,.13); }.download-icon { color: var(--violet-bright); font: 10px var(--mono); }.download-link b, .download-link small { display: block; }.download-link b { font: 500 13px var(--display); }.download-link small { margin-top: 2px; color: var(--muted); font: 10px var(--mono); }.download-link strong { color: var(--violet-bright); font: 14px var(--mono); }.legal-disclaimer { margin: 23px 4px 0; color: #706b75; font-size: 11px; }
.footer { width: 100vw; display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 30px; margin-left: calc((100% - 100vw) / 2); padding: 58px max(24px, calc((100vw - 1180px) / 2)) 34px; position: relative; }.footer p { margin: 12px 0 0; color: var(--muted); font-size: 12px; }.footer > div:not(.footer-brand):not(.footer-bottom) { display: flex; flex-direction: column; gap: 8px; }.footer-label { margin: 0 0 5px !important; }.footer-bottom { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 20px; padding-top: 34px; margin-top: 28px; border-top: 1px solid var(--line); color: #67626c; font: 10px var(--mono); text-transform: uppercase; letter-spacing: .06em; }
.footer-license-link { width: max-content; padding: 0; border: 0; color: var(--muted); background: transparent; cursor: pointer; font: 12px var(--body); text-align: left; }.footer-license-link span { color: var(--violet-bright); font-family: var(--mono); }.footer-license-link:hover { color: var(--violet-bright); }
.license-window { position: fixed; top: 18vh; left: 50%; z-index: 30; display: block; width: min(650px, calc(100vw - 32px)); min-width: 300px; min-height: 240px; height: min(520px, calc(100vh - 48px)); transform: translateX(-50%); overflow: hidden; border: 1px solid #5b3477; border-radius: 12px; background: #100d17; box-shadow: 0 24px 80px rgba(0,0,0,.7), 0 0 36px rgba(168,85,247,.18); font-family: var(--mono); }.license-window[hidden] { display: none; }.license-window:fullscreen { width: 100vw; height: 100vh; max-width: none; max-height: none; top: 0; left: 0; transform: none; border-radius: 0; }.license-window:fullscreen .license-content { padding: 6vh 9vw; }.license-window:fullscreen .license-content h2 { font-size: clamp(34px, 4vw, 60px); }.license-window:fullscreen .license-content pre { max-width: 1000px; font-size: clamp(13px, 1.3vw, 19px); line-height: 1.85; }.license-dragbar { display: flex; align-items: center; justify-content: space-between; height: 38px; padding: 0 12px; border-bottom: 1px solid #332044; background: #1b1723; color: #a69caf; cursor: move; user-select: none; }.license-dragbar strong { color: #d38cff; font-size: 10px; font-weight: 500; letter-spacing: .1em; }.mac-controls { display: flex; gap: 6px; width: 50px; }.mac-control { width: 11px; height: 11px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; transition: filter .2s, transform .2s; }.mac-control:hover { filter: brightness(1.3); transform: scale(1.08); }.mac-close { background: #e86d73; }.mac-hide { background: #dfb45c; }.mac-fullscreen { background: #69bd79; }.license-close { width: 50px; padding: 0; border: 0; color: #9e98aa; background: transparent; cursor: pointer; font: 13px var(--mono); text-align: right; }.license-close:hover { color: #fff; }.license-content { height: calc(100% - 38px); padding: 27px 30px; overflow: auto; }.license-kicker { margin: 0 0 10px; color: #c650f0; font-size: 9px; letter-spacing: .12em; }.license-content h2 { margin: 0 0 22px; color: #f1e9f7; font: 600 29px var(--display); letter-spacing: -.04em; }.license-content pre { margin: 0; color: #bcb5c5; font: 11px/1.75 var(--mono); white-space: pre-wrap; }.resize-handle { position: absolute; z-index: 4; }.resize-n, .resize-s { right: 12px; left: 12px; height: 8px; cursor: ns-resize; }.resize-n { top: -4px; }.resize-s { bottom: -4px; }.resize-e, .resize-w { top: 12px; bottom: 12px; width: 8px; cursor: ew-resize; }.resize-e { right: -4px; }.resize-w { left: -4px; }.resize-ne, .resize-se, .resize-sw, .resize-nw { width: 14px; height: 14px; }.resize-ne { top: -4px; right: -4px; cursor: nesw-resize; }.resize-se { right: -4px; bottom: -4px; cursor: nwse-resize; }.resize-sw { bottom: -4px; left: -4px; cursor: nesw-resize; }.resize-nw { top: -4px; left: -4px; cursor: nwse-resize; }
.reveal { opacity: 0; transform: translateY(20px); transition: opacity .7s ease, transform .7s ease; }.reveal.is-visible { opacity: 1; transform: translateY(0); }.hero-console.reveal.is-visible { transform: rotate(1.2deg) translateY(0); }.reveal-delay-1 { transition-delay: .1s; }.reveal-delay-2 { transition-delay: .2s; }
@keyframes blink { 50% { opacity: 0; } }
@media (max-width: 800px) { .site-shell { width: min(100% - 32px, 620px); }.topbar { height: 70px; padding: 0 16px; }.nav-links { gap: 14px; margin-right: 15px; }.nav-links a:nth-child(3), .status { display: none; }.section-grid { grid-template-columns: 1fr; gap: 48px; }.hero { padding: 76px 0 88px; }.hero h1 { font-size: clamp(60px, 17vw, 96px); }.hero-console { transform: none; }.hero-console.reveal.is-visible { transform: translateY(0); }.module-section, .download-section { padding: 85px 0; }.section-heading > p:last-of-type { max-width: 420px; }.footer { grid-template-columns: 1fr 1fr; padding-right: 16px; padding-left: 16px; }.footer-brand { grid-column: 1 / -1; }.footer-bottom { align-items: flex-start; flex-direction: column; } }
@media (max-width: 500px) { .topbar-actions .button { display: none; }.nav-links { margin-left: auto; margin-right: 0; }.nav-links a { font-size: 10px; }.hero-meta { gap: 12px; flex-direction: column; }.workspace-title { font-size: 9px; }.workspace-title .workspace-name { margin-right: 10px; }.workspace-columns { grid-template-columns: 1fr; min-height: 0; }.workspace-panel { padding: 14px 16px 16px; }.workspace-panel + .workspace-panel { border-top: 1px solid #241a33; border-left: 0; }.workspace-item, .tool-item { margin-right: -16px; margin-left: -16px; padding-right: 16px; padding-left: 16px; }.workspace-status { gap: 12px; padding-right: 10px; padding-left: 10px; font-size: 8px; }.workspace-notice { right: 8px; bottom: 40px; left: 8px; gap: 8px; padding: 11px; }.workspace-notice p { max-width: 180px; }.license-window { top: 8vh; width: calc(100vw - 20px); min-width: 0; height: min(560px, 84vh); }.license-content { padding: 22px 18px; }.license-content pre { font-size: 10px; }.module-grid { grid-template-columns: 1fr; }.module-card-wide { grid-column: auto; }.download-link { grid-template-columns: 44px 1fr 15px; padding: 13px 10px; }.footer { gap: 25px; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; }.reveal { opacity: 1; transform: none; transition: none; }.hero-console.reveal.is-visible { transform: none; } }
.utility-page-body { min-height: 100vh; }.utility-page { width: min(1080px, calc(100% - 48px)); min-height: 100vh; margin: 0 auto; padding: 42px 0 28px; position: relative; z-index: 1; }.utility-brand { margin-bottom: 90px; }.utility-hero { max-width: 760px; padding-bottom: 90px; }.utility-hero h1 { margin: 0; font: 600 clamp(58px, 9vw, 108px)/.92 var(--display); letter-spacing: -.06em; }.utility-hero h1 em { color: var(--violet-bright); font-style: normal; }.utility-lede { max-width: 560px; margin: 28px 0 30px; color: #aaa8b2; font-size: 16px; }.guide-panel { display: grid; grid-template-columns: .8fr 1.2fr; gap: 54px; padding: 42px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }.guide-heading h2 { color: var(--text); font: 600 42px/.95 var(--display); letter-spacing: -.05em; }.guide-heading > p:last-child { max-width: 310px; color: var(--muted); font-size: 13px; }.guide-steps { display: grid; gap: 10px; }.guide-steps article { display: grid; grid-template-columns: 34px 1fr; gap: 16px; padding: 20px; border: 1px solid #2b1b3a; background: rgba(19,17,22,.72); }.guide-steps article > span { color: var(--violet-bright); font: 11px var(--mono); }.guide-steps h3 { margin: -3px 0 7px; color: #f1e9f7; font: 600 17px var(--display); }.guide-steps p { margin: 0 0 12px; color: var(--muted); font-size: 12px; }.guide-steps pre { margin: 0; color: #c98cff; font: 11px/1.8 var(--mono); white-space: pre-wrap; }.guide-steps code { color: var(--violet-bright); font-family: var(--mono); }.utility-disclaimer { grid-column: 1 / -1; margin: 0; color: #706b75; font: 10px var(--mono); }.utility-footer { display: flex; justify-content: space-between; gap: 20px; padding-top: 28px; color: #67626c; font: 10px var(--mono); text-transform: uppercase; letter-spacing: .06em; }.error-page .utility-hero { padding-bottom: 70px; }.error-terminal { width: min(620px, 100%); padding: 20px; border: 1px solid #2b1b3a; background: #08080a; color: #bcb5c5; font: 12px/2 var(--mono); }.error-red { color: #ef7079; }.cursor { color: var(--violet-bright); animation: blink 1.1s steps(2) infinite; }
@media (max-width: 700px) { .utility-page { width: min(100% - 32px, 620px); padding-top: 28px; }.utility-brand { margin-bottom: 64px; }.utility-hero { padding-bottom: 64px; }.guide-panel { grid-template-columns: 1fr; gap: 32px; }.guide-heading > p:last-child { max-width: 500px; }.utility-footer { flex-direction: column; gap: 10px; } }
.utility-topbar { display: flex; align-items: center; justify-content: space-between; padding-bottom: 18px; border-bottom: 1px solid rgba(168,85,247,.2); }.utility-topbar .brand { margin: 0; }.utility-route { color: var(--muted); font: 10px var(--mono); letter-spacing: .08em; }.utility-route i { display: inline-block; width: 6px; height: 6px; margin-left: 7px; border-radius: 50%; background: #e0524f; box-shadow: 0 0 8px rgba(224,82,79,.7); }.error-page .utility-hero { max-width: 760px; padding-top: 100px; padding-bottom: 90px; }.error-page .utility-hero h1 { font-size: clamp(70px, 12vw, 140px); }.error-page .utility-lede { max-width: 510px; }.error-terminal { width: 100%; max-width: 760px; padding: 0; border: 1px solid #2b1b3a; border-radius: 8px; background: #08080a; color: #bcb5c5; box-shadow: 0 20px 50px rgba(0,0,0,.25); font: 12px/2 var(--mono); overflow: hidden; }.error-terminal-bar { display: flex; align-items: center; justify-content: space-between; min-height: 38px; padding: 0 15px; border-bottom: 1px solid #211529; color: var(--muted); font-size: 10px; letter-spacing: .08em; }.error-terminal-body { padding: 22px 20px; }.error-terminal-body p { margin: 0; }.error-red { color: #ef7079; }.cursor { color: var(--violet-bright); animation: blink 1.1s steps(2) infinite; }.error-page .utility-footer { width: 100%; max-width: 760px; border-top: 1px solid var(--line); }
@media (max-width: 700px) { .utility-topbar { align-items: flex-start; gap: 16px; flex-direction: column; }.utility-route { font-size: 9px; }.error-page .utility-hero { padding-top: 70px; }.error-terminal-bar { font-size: 8px; }.error-terminal-body { padding: 18px 14px; } }
.error-page .utility-hero { display: grid; grid-template-columns: minmax(220px, .9fr) minmax(0, 1.1fr); align-items: center; column-gap: clamp(34px, 7vw, 90px); row-gap: 22px; max-width: 900px; }.error-page .utility-hero .eyebrow { grid-column: 1 / -1; }.error-page .utility-hero h1 { grid-column: 1; grid-row: 2 / span 2; }.error-page .utility-hero .utility-lede { grid-column: 2; grid-row: 2; margin: 0; }.error-page .utility-hero .button { grid-column: 2; grid-row: 3; justify-self: start; }.error-page .utility-hero h1 em { display: inline; margin-left: 10px; font-size: .42em; }
@media (max-width: 700px) { .error-page .utility-hero { display: flex; align-items: flex-start; gap: 24px; }.error-page .utility-hero .eyebrow, .error-page .utility-hero h1, .error-page .utility-hero .utility-lede, .error-page .utility-hero .button { display: block; width: auto; }.error-page .utility-hero h1 { font-size: clamp(70px, 20vw, 110px); }.error-page .utility-hero h1 em { display: block; margin: 8px 0 0; font-size: .42em; }.error-page .utility-hero .utility-lede { margin: 0; }.error-page .utility-hero .button { align-self: flex-start; } }