@font-face { font-family: "Commit Mono"; src: url("/fonts/CommitMono-VF.woff2") format("woff2"); font-weight: 200 700; font-style: normal; font-display: swap; }
/* Utility-led storefront. Shared typography and component treatments. */
:root { --font-display: "Commit Mono", monospace; --font-sans: "Commit Mono", monospace; --color-cream: #f6f6f2; --color-surface: #eeefea; --color-surface-alt: #e9edee; --color-ink: #202521; --color-ink-soft: #626963; --color-pink: #2852dd; --color-outline: #d5d9d2; --color-mint: #b9ccab; --color-lilac: #aebde9; --color-butter: #e4ea9e; }
body { background-image: none; font-family: "Commit Mono", monospace; }
h1,h2,h3,h4,.font-display { font-family: "Commit Mono", monospace; font-style: normal; }
h1,h2 { font-weight: 600; letter-spacing: -.055em; }
.text-pink { color: #2852dd; font-style: normal; }
:focus-visible { outline: 2px solid #2852dd; outline-offset: 5px; }
.btn-primary,.btn-mint,.btn-ghost { border-radius: 5px; box-shadow: none; font-weight: 600; }
.btn-primary { background: #2852dd; color: white; }
.btn-primary:hover { background: #1e42be; box-shadow: none; }
.btn-mint { background: #d4dfc9; color: #253523; }
.card-cutout { border-radius: 8px; border: 1px solid #d5d9d2; box-shadow: none; }
.pill { border-radius: 4px; font-weight: 600; letter-spacing: .025em; }
header { background: #f6f6f2f2; }
header nav a { font-weight: 500; }
.studio-hero { background: #f6f6f2; }
.studio-intro { max-width: 1232px; margin: auto; padding: 29px 0; display: flex; justify-content: space-between; border-bottom: 1px solid #d5d9d2; font: 10px/1.5 monospace; letter-spacing: .1em; color: #626963; }
.hero-layout { max-width: 1280px; margin: auto; padding: 64px 24px 72px; display: grid; grid-template-columns: 1fr 1fr; gap: 65px; align-items: center; }
.hero-copy h1 { font-size: clamp(54px, 5.5vw, 79px); line-height: 1.02; letter-spacing: -.065em; margin: 0 0 30px; font-weight: 600; }
.hero-copy h1 span { color: #2852dd; }
.hero-copy > p { max-width: 385px; font-size: 15px; line-height: 1.85; color: #626963; }
.hero-actions { display: flex; align-items: flex-start; flex-direction: column; gap: 22px; margin-top: 32px; }
.hero-actions .btn-primary { padding: 17px 22px; font-size: 13px; gap: 24px; }
.hero-actions .btn-primary span { font-size: 19px; }
.hero-text-link { font-size: 12px; border-bottom: 1px solid #a0a89e; padding-bottom: 6px; }
.hero-footnote { display: flex; align-items: center; gap: 9px; font-size: 11px; margin-top: 47px; color: #737b72; }
.hero-footnote > span { display: grid; place-items: center; border: 1px solid #b5bcb2; border-radius: 50%; width: 21px; height: 21px; }
.product-stage { display: block; background: #dfe5db; padding: 23px; border-radius: 8px; position: relative; transition: background .25s; }
.product-stage:hover { background: #d5decf; }
.stage-top { display: flex; justify-content: space-between; align-items: center; font: 9px monospace; letter-spacing: .1em; padding-bottom: 30px; }
.stage-top > span:last-child { font-size: 25px; }
.dashboard-preview { background: #fff; border: 1px solid #c6cec0; border-radius: 6px; transform: rotate(-3deg); box-shadow: 0 18px 30px -20px #25352370; margin: 0 8px 35px; transition: transform .3s; }
.product-stage:hover .dashboard-preview { transform: rotate(0deg); }
.dashboard-toolbar { display: flex; align-items: center; justify-content: space-between; padding: 12px; border-bottom: 1px solid #e4e7df; font: 7px monospace; color: #626963; }
.dashboard-toolbar b { font: 600 12px "Commit Mono", monospace; color: #202521; }
.dashboard-content { padding: 22px; }
.dashboard-title > span { font: 6px monospace; letter-spacing: .08em; color: #727c6d; }
.dashboard-title h2 { font-size: 25px; margin: 8px 0 20px; font-weight: 600; letter-spacing: -.045em; }
.dashboard-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.dashboard-metrics > div { background: #edf0e9; padding: 14px; border-radius: 3px; }
.dashboard-metrics span { font-size: 8px; color: #65705d; }
.dashboard-metrics strong { display: block; font-size: 40px; letter-spacing: -.05em; font-weight: 500; margin: 6px 0; }
.dashboard-metrics small { font-size: 10px; letter-spacing: 0; color: #65705d; }
.dashboard-metrics p { font-size: 6px; color: #65705d; }
.dashboard-metrics .metric-secondary { background: #f6f7f4; }
.metric-secondary strong { font-size: 24px; margin: 14px 0 12px; }
.metric-line { height: 4px; width: 80%; background: #2852dd; margin-bottom: 13px; }
.dashboard-chart { margin-top: 24px; }
.dashboard-chart > div:first-child { display: flex; justify-content: space-between; font-size: 8px; }
.dashboard-chart > div:first-child span:last-child { font: 6px monospace; color: #737b72; }
.chart-bars { height: 70px; display: flex; gap: 9px; align-items: flex-end; margin-top: 20px; border-bottom: 1px solid #cdd3c6; background: repeating-linear-gradient(to top, transparent 0, transparent 22px, #eef0eb 23px, transparent 24px); }
.chart-bars i { flex: 1; background: #b4c4a7; border-radius: 2px 2px 0 0; }
.chart-bars i:nth-last-child(2) { background: #2852dd; }
.chart-axis { display: flex; justify-content: space-between; font: 6px monospace; color: #737b72; padding-top: 7px; }
.stage-bottom { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.stage-bottom div > span { font: 8px monospace; color: #626963; }
.stage-bottom h3 { font-size: 16px; font-weight: 600; margin-top: 8px; letter-spacing: -.03em; }
.stage-bottom > b { white-space: nowrap; font-size: 18px; font-weight: 500; }
.stage-bottom b span { margin-left: 15px; }
.benefit-strip { border-block: 1px solid #d5d9d2; max-width: 1232px; margin: auto; display: grid; grid-template-columns: repeat(4,1fr); padding: 22px 0; gap: 20px; }
.benefit-strip > span { font-size: 11px; }
.benefit-strip b { font: 9px monospace; color: #8a9384; margin-right: 15px; }
.category-card { border: 1px solid #cdd4c7; border-radius: 6px; background: #e7ebe3; box-shadow: none; }
.category-card:nth-child(2) { background: #e7eae9; }
.category-card:nth-child(3) { background: #e7eaf0; }
.category-card h3 { font-size: 34px; font-weight: 600; letter-spacing: -.05em; }
.product-card { background: transparent; border-color: transparent; box-shadow: none; border-radius: 6px; }
.product-card:hover { background: #fff; }
.product-card h3 { font-size: 17px; font-weight: 600; }
footer { background: #e9ece5; }
@media (max-width: 1279px) { .studio-intro,.benefit-strip { margin-inline: 24px; } }
@media (max-width: 1000px) { .hero-layout { gap: 30px; } .product-stage { padding: 17px; } .dashboard-content { padding: 15px; } .dashboard-metrics strong { font-size: 32px; } .metric-secondary strong { font-size: 21px; } .stage-bottom h3 { font-size: 14px; } }
@media (max-width: 700px) {
 .studio-intro { font-size: 8px; padding-block: 20px; gap: 15px; }
 .studio-intro > span:last-child { display: none; }
 .hero-layout { grid-template-columns: 1fr; padding-top: 36px; padding-bottom: 36px; gap: 36px; }
 .hero-copy h1 { font-size: clamp(47px, 10.8vw, 70px); margin-bottom: 22px; }
 .hero-copy > p { font-size: 14px; }
 .hero-footnote { margin-top: 26px; }
 .product-stage { padding: 20px; }
 .dashboard-preview { margin-inline: 2px; }
 .dashboard-title h2 { font-size: 23px; }
 .dashboard-metrics strong { font-size: 34px; }
 .metric-secondary strong { font-size: 21px; }
 .benefit-strip { grid-template-columns: 1fr 1fr; gap: 20px 10px; }
 .benefit-strip > span { font-size: 10px; }
 .benefit-strip b { margin-right: 6px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }

/* Monospaced proportions: lighter weights and more breathing room. */
h1,h2 { font-weight: 450; letter-spacing: -.055em; }
.hero-copy h1 { font-size: clamp(43px, 4.5vw, 65px); font-weight: 450; line-height: 1.12; }
.hero-copy > p { font-size: 13px; max-width: 410px; line-height: 1.9; }
.hero-actions .btn-primary { font-size: 11px; }
header nav a { font-size: 11px; }
.dashboard-title h2 { font-size: 20px; font-weight: 500; }
.dashboard-metrics strong { font-size: 34px; }
.metric-secondary strong { font-size: 21px; }
.stage-bottom h3 { font-size: 13px; }
.category-card h3 { font-weight: 450; }
@media (max-width: 700px) { .hero-copy h1 { font-size: clamp(34px, 8.5vw, 49px); } .hero-copy > p { font-size: 12px; } .dashboard-title h2 { font-size: 17px; } .dashboard-metrics strong { font-size: 28px; } .metric-secondary strong { font-size: 17px; } .stage-bottom h3 { font-size: 11px; } }

@font-face { font-family: "IBM Plex Sans"; src: url("/fonts/IBMPlexSans-Bold.ttf") format("truetype"); font-weight: 700; font-style: normal; font-display: swap; }
.brand-wordmark { font-family: "IBM Plex Sans", sans-serif; font-weight: 700; font-size: 30px; line-height: 1.2; letter-spacing: -.045em; color: var(--color-ink); }