/*
 * Arbio home (css/home.css, owner: landing). typesafe.ai home, section by section, with our content.
 * Geometry is typesafe's, read from reference/captures/ts-home-{1440,1024,768,390}.styles.json.
 * Framer breakpoints: desktop >= 1200, tablet 810-1199, phone < 810. Shared components: css/base.css.
 */

:root {
  --h-blue: #3b6fb0;      /* USDG chips (typesafe's OpenAI blue) */
  --h-brown: #8a4a2c;     /* WETH chips (typesafe's Anthropic brown) */
  --h-green: #22763a;     /* Arbio chip (typesafe's own green chip) */
  --h-rule: rgba(30, 30, 30, 0.86);
}

/* ---------------------------------------------------------------- shared home primitives */

.h-sec { position: relative; padding-inline: var(--page-pad); }
.h-sec > * { max-width: var(--container); margin-inline: auto; }

/* corner-bracket box around a headline: 10px corner rows + 20px air (typesafe "headline-complex") */
.h-box { position: relative; padding: 30px 0; }
.h-box--display { text-align: center; }
.h-box--stat { padding: 30px 0; }
.h-box--h2 { padding: 60px 100px; }
.h-box--logo { padding: 60px 0; }
.h-box--come { padding: 60px 0; }
.h-box--faq { padding: 20px 0 19px; text-align: center; }

.t-display, .t-h2 { text-wrap: wrap; }

/* the fit stages: fixed design size, scaled to the parent width by js/home.js (like typesafe's images) */
.h-fit { position: relative; width: 100%; overflow: hidden; }
.h-stage { position: absolute; left: 0; top: 0; transform-origin: 0 0; transform: scale(var(--fit, 1)); }

.h-speed__wait { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font: 500 16px/1 var(--font-pixel); color: rgba(30, 30, 30, 0.6); }

/* ---------------------------------------------------------------- hero */

.h-hero { position: relative; margin-top: calc(-1 * var(--nav-h)); padding-top: var(--nav-h); }
.h-hero__sky { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.h-hero__sky img { width: 100%; height: 100%; max-width: none; object-fit: contain; object-position: center top; }
.h-hero__inner { position: relative; z-index: 1; padding: 140px var(--page-pad) 0; }
.h-hero__inner > * { max-width: var(--container); margin-inline: auto; }

.h-news { display: flex; width: 400px; color: var(--ink); transition: transform 0.2s var(--ease); }
.h-news .os-window__title { color: var(--grey-1); }
.h-news__body { display: flex; justify-content: space-between; gap: 30px; }
.h-news__text { display: block; width: 274px; }
.h-news__glyph { display: inline-block; width: 16px; height: 16px; margin-right: 8px; vertical-align: -1px; color: var(--magenta); }
.h-news__more { flex: none; }
.h-news:hover .h-news__more { color: var(--magenta); }

.h-hero__frame { display: flex; gap: 13px; margin-top: 220px; padding: 70px 10px; }
.h-hero__b64 { flex: none; width: 24px; display: flex; align-items: center; justify-content: center; }
.h-hero__b64 p { writing-mode: vertical-rl; transform: rotate(180deg); font: 300 10px/12px var(--font-mono); letter-spacing: 0.05em; color: var(--ink); white-space: nowrap; }
.h-hero__head { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 50px; text-align: center; }
.h-kicker { font: 400 17px/20.4px var(--font-body); letter-spacing: 0.05em; color: var(--ink); }
.h-kicker__dots--short { display: none; }
.h-hero__title { width: 100%; }
.h-hero__links { display: flex; flex-wrap: wrap; justify-content: center; column-gap: 80px; row-gap: 0; }
.h-hero__links .cta-link { color: var(--ink); }
.h-hero__links .cta-link:hover { color: var(--magenta); }
.h-hero__docs, .h-hero__break { display: none; }
.h-cta-row { display: inline-flex; align-items: center; gap: 0.32em; }
.h-cta-tri { width: 0.72em; height: auto; }
.h-hero > .ascii-sep { position: relative; z-index: 1; }

/* ---------------------------------------------------------------- pink ground */

.h-pink { background: var(--pink); }

/* ---------------------------------------------------------------- OS field */

.h-os { padding: 30px var(--page-pad); }
.h-field { position: relative; height: 800px; max-width: var(--container); margin-inline: auto; overflow: hidden; overflow: clip; }
.h-field::after { content: ''; position: absolute; inset: 0; border: 1px solid var(--ink); pointer-events: none; }

.h-blob { position: absolute; width: 2048px; height: 2048px; max-width: none; mix-blend-mode: multiply; pointer-events: none; user-select: none; }
.h-blob--1 { left: calc(92.5806% - 1024px); bottom: -610px; }
.h-blob--2 { left: calc(14.1935% - 1024px); bottom: -776px; }
.h-blob--3 { left: calc(46.0484% - 1024px); bottom: -1084px; }
.h-blob--4 { left: calc(2.0968% - 1024px); bottom: -965px; }

.h-field__label { position: absolute; left: 0; top: 0; padding: 2px 0 5px 2px; z-index: 2; }

/* windows: typesafe positions per breakpoint; drag offset rides on --dx/--dy (js/home-os.js) */
.h-win { position: absolute; width: max-content; }
.h-win .os-window__bar { padding: 1px 4px 1px 4px; }
.h-win[data-drag] { cursor: grab; touch-action: pan-y pinch-zoom; }
.h-win.is-dragging { cursor: grabbing; z-index: 10; }
.h-win.is-snapping { transition: translate 0.45s var(--ease-pop); }
.h-win { translate: var(--dx, 0px) var(--dy, 0px); }
.h-win--center { translate: calc(-50% + var(--dx, 0px)) calc(-50% + var(--dy, 0px)); }
.h-win--centerx { translate: calc(-50% + var(--dx, 0px)) var(--dy, 0px); }

.h-win--tool .os-window__frame { background: var(--pink); }
.h-win--tool .os-window__body { background: var(--pink); font: 500 18px/18px var(--font-pixel); letter-spacing: 0.01em; }

.h-clock { right: 10px; top: 30px; width: 216px; }
.h-clock__body { display: flex; flex-direction: column; gap: 8px; padding: 4px 30px 30px 4px; letter-spacing: 0; }
.h-clock__body p { white-space: nowrap; font-variant-numeric: tabular-nums; }

.h-glider { right: 20px; bottom: 20px; }
.h-glider__body { display: flex; flex-direction: column; gap: 8px; padding: 4px 4px 6px 4px; }
.h-gol { width: 50px; height: 50px; overflow: visible; }
.h-gol .gol-b, .h-gol .gol-c, .h-gol .gol-d { animation: 2s linear infinite; }
.h-gol .gol-b { animation-name: gol-b; }
.h-gol .gol-c { animation-name: gol-c; }
.h-gol .gol-d { animation-name: gol-d; }
@keyframes gol-b { 0%, 24.67% { opacity: 0; } 25.97%, 50.64% { opacity: 1; } 51.94%, 100% { opacity: 0; } }
@keyframes gol-c { 0%, 76.61% { opacity: 0; } 77.91%, 100% { opacity: 1; } }
@keyframes gol-d { 0%, 24.67% { opacity: 1; } 25.97%, 100% { opacity: 0; } }
.h-field.is-paused .h-gol * { animation-play-state: paused; }

.h-version { left: 10px; bottom: 10px; }
.h-version__body { display: flex; gap: 8px; padding: 4px 6px 8px 4px; }
.h-version__mark { flex: none; width: 22px; height: 22px; }
.h-version__body p { white-space: nowrap; }

.h-lineage { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 4px 4px 20px 4px; font: 500 18px/18px var(--font-pixel); letter-spacing: 0.01em; color: var(--ink); }
.h-lineage p { white-space: nowrap; }
.h-chip36 { display: inline-block; padding: 0 2px; background: var(--ink); color: var(--grey-1); font: 500 36px/36px var(--font-pixel); letter-spacing: 0; }
.h-tags { display: flex; gap: 8px; }
.h-tags--wrap { flex-wrap: wrap; gap: 3px; width: 255px; }
.h-tags--tall { width: 165px; }
.h-tag { display: inline-flex; align-items: center; gap: 2px; padding: 0 2px 2px; background: rgba(0, 0, 0, 0.1); font: 500 16px/16px var(--font-pixel); letter-spacing: 0.02em; white-space: nowrap; }
.h-tags--wrap .h-tag, .h-tags--tall .h-tag { padding: 2px 2px 5px; }
.h-tag::before { content: ''; flex: none; width: 12px; height: 16px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 16'%3E%3Cpath d='M6 3c.45 1.9.9 3.1 1.25 3.4.35.3 1.5.75 3.4 1.1-1.9.45-3.05.9-3.4 1.25C6.9 9.1 6.45 10.2 6 12c-.45-1.8-.9-2.9-1.25-3.25C4.4 8.4 3.25 7.95 1.35 7.5c1.9-.35 3.05-.8 3.4-1.1C5.1 6.1 5.55 4.9 6 3z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 16'%3E%3Cpath d='M6 3c.45 1.9.9 3.1 1.25 3.4.35.3 1.5.75 3.4 1.1-1.9.45-3.05.9-3.4 1.25C6.9 9.1 6.45 10.2 6 12c-.45-1.8-.9-2.9-1.25-3.25C4.4 8.4 3.25 7.95 1.35 7.5c1.9-.35 3.05-.8 3.4-1.1C5.1 6.1 5.55 4.9 6 3z'/%3E%3C/svg%3E") center/contain no-repeat; }

.h-win--lm { left: 18%; top: 22%; width: 160px; }
.h-win--llm { left: 28%; top: 27%; width: 161px; }
.h-win--rlhf { left: 49%; top: 53px; }
.h-win--arbs { left: 50%; top: 50%; width: 595px; }
.h-win--rlvr { left: 62%; top: 27%; }
.h-win--lm, .h-win--llm, .h-win--arbs, .h-win--rlvr { translate: calc(-50% + var(--dx, 0px)) calc(-50% + var(--dy, 0px)); }
.h-win--rlhf { translate: calc(-50% + var(--dx, 0px)) var(--dy, 0px); }

.h-arbs__bar { color: var(--white); }
.h-arbs__bar .os-window__title { color: var(--white); }
.h-arbs__top { display: flex; gap: 3px; height: 96px; }
.h-arbs__logo { position: relative; flex: none; width: 96px; height: 96px; background: var(--white); overflow: hidden; }
.h-arbs__logo::after, .h-arbs__title::after, .h-arbs__table::after { content: ''; position: absolute; inset: 0; border: var(--border) solid var(--ink); pointer-events: none; }
.h-dither { position: absolute; inset: 0; width: 100%; height: 100%; mix-blend-mode: multiply; image-rendering: pixelated; }
.h-arbs__tag { position: absolute; left: 0; bottom: 0; z-index: 1; padding: 1px 4px 1px 4px; background: var(--ink); color: var(--white); font: 500 18px/18px var(--font-pixel); letter-spacing: 0.01em; white-space: nowrap; }
.h-arbs__title { position: relative; flex: 1 1 auto; min-width: 0; background: var(--white); }
.h-arbs__title .h-chip36 { color: var(--white); }
.h-arbs__table { position: relative; display: flex; flex-direction: column; height: 331px; padding: 2px; background: var(--white); overflow: hidden; }
.h-fit--speed { aspect-ratio: 589 / 269; }
.h-arbs__strip { flex: none; height: 50px; background: url('/img/ts/dot-strip.png') center / 100% 100% no-repeat; }

/* the live spread table (589 x 269 design, typesafe's speed table rhythm) */
.h-speed { width: 589px; height: 269px; background: var(--paper); color: var(--ink); font: 500 16px/16px var(--font-pixel); letter-spacing: 0.01em; }
.h-speed__row { position: absolute; left: 12px; width: 565px; height: 48px; }
.h-speed__chip { position: absolute; left: 0; top: 0; height: 17px; padding: 1px 2px 0 1px; background: var(--ink); color: var(--paper); white-space: nowrap; }
.h-speed__mid { position: absolute; left: 166px; top: 3px; white-space: nowrap; }
.h-speed__end { position: absolute; right: 0; top: 3px; white-space: nowrap; }
.h-speed__line { position: absolute; left: 0; top: 37px; width: 565px; height: 1px; background: var(--ink); }
.h-speed__mark { position: absolute; left: 0; top: 27px; width: 10px; height: 10px; background: var(--ink); transform: translateX(var(--x, 0px)); }
.h-speed.is-live .h-speed__mark { animation: h-slide var(--t, 3s) ease-in-out infinite alternate; }
.h-field.is-paused .h-speed__mark { animation-play-state: paused; }
@keyframes h-slide { from { transform: translateX(var(--x0, 0px)); } to { transform: translateX(var(--x, 0px)); } }

/* ---------------------------------------------------------------- the other side */

.h-took { padding-top: 10px; }
.h-took__title { color: var(--ink-86); }

.h-text { display: flex; justify-content: space-between; margin-top: 50px; padding-bottom: 110px; }
.h-text__bento { width: 820px; flex: none; }
.h-text__row { display: flex; gap: 20px; align-items: flex-start; }
.h-text__row--three { margin-top: 70px; }
.h-cell { position: relative; width: 189px; flex: none; padding: 0 10px; }
.h-cell::before, .h-card::before, .h-duo__l::before, .h-duo__r::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: var(--h-rule); pointer-events: none; }
.h-cell--wide { width: 400px; }
.h-cell__label { font: 300 10px/12px var(--font-mono); letter-spacing: 0.05em; text-transform: capitalize; color: var(--ink-86); }
.h-cell__lead { margin-top: 50px; font: 400 22px/26.4px var(--font-body); letter-spacing: 0.05em; color: var(--ink-86); }
.h-cell__body { margin-top: 50px; font: 400 17px/20.4px var(--font-body); letter-spacing: 0.05em; color: var(--ink-86); }

.h-b64 { width: 190px; flex: none; opacity: 0.9; color: var(--ink-86); }
.h-b64__h { font: 300 10px/12px var(--font-mono); letter-spacing: 0.05em; }
.h-b64__t { margin-top: 9px; font: 300 10px/12px var(--font-mono); letter-spacing: 0.05em; word-break: break-all; }

/* ---------------------------------------------------------------- facts, race, heatmap */

.h-stat { text-align: left; color: var(--ink-86); }
.h-foot { margin-top: 20px; font: 300 10px/12px var(--font-mono); letter-spacing: 0.05em; text-transform: capitalize; color: var(--ink-86); }
.h-foot__link { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color 0.3s var(--ease); }
.h-foot__link:hover { color: var(--magenta); }

.h-card { position: relative; padding: 0 10px 10px; }
.h-card--wide { margin-top: 100px; }
.h-card__foot { padding-top: 16px; font: 400 17px/20.4px var(--font-body); letter-spacing: 0.05em; color: var(--ink-86); }
.h-kv__dim { opacity: 0.7; }
.h-card__foot > p + .h-kv__dim { margin-top: 10px; }
.h-race__foot { display: flex; gap: 20px; align-items: flex-start; min-height: 87px; margin-top: 4px; }
.h-kv { display: flex; flex-direction: column; }
.h-kv p:first-child { margin-bottom: 10px; }
.h-kv__link { margin-left: auto; transition: color 0.3s var(--ease); }
.h-kv__link:hover { color: var(--magenta); }

.h-fit--race { aspect-ratio: 1220 / 660; }
.h-race { width: 1220px; height: 660px; }
.h-race .os-label { position: absolute; left: 0; top: 0; }
.h-term { position: absolute; top: 99px; width: 500px; height: 460px; }
.h-term--flash { left: 85px; }
.h-term--manual { left: 635px; }
.h-term .os-window__bar { padding: 1px 4px 1px 4px; color: var(--paper); }
.h-term .os-window__title { color: var(--paper); }
.h-term .os-window__meta { font-size: 16px; line-height: 18px; color: var(--pink); opacity: 1; }
.h-term__body { position: relative; flex: 1 1 auto; overflow: hidden; background: var(--white); padding: 3px 0 0; }
.h-term--manual .h-term__body { background: var(--grey-2); }
.h-term__body::before { content: ''; position: absolute; left: 18px; top: 0; bottom: 0; width: 1.2px; background: var(--ink); }
.h-term__body::after { content: ''; position: absolute; inset: 0; border: var(--border) solid var(--ink); pointer-events: none; }
.h-term__lines { margin: 0; padding: 0; list-style: none; }
.h-term__lines li { position: relative; display: block; height: 15px; padding-left: 24px; font: 400 11.5px/15px var(--font-mono); letter-spacing: 0; color: var(--ink); white-space: pre; overflow: hidden; }
.h-term__lines li::before { content: ''; position: absolute; left: 3px; top: 2px; width: 12px; height: 12px; box-sizing: border-box; border: 1.2px solid var(--ink); background: transparent; }
.h-term__lines li.is-done::before { background: var(--ink); }
.h-term__lines li.is-strong { font-weight: 700; }
.h-term__lines .k { font-weight: 700; }
.h-term__lines .s { color: #1e1e1e; }
.h-term__lines .n { color: #1e1e1e; }
.h-term__lines .dim { color: rgba(30, 30, 30, 0.6); }
.h-term__lines .caret { display: inline-block; width: 7px; height: 12px; background: var(--ink); vertical-align: -2px; animation: h-caret 1s steps(1) infinite; }
@keyframes h-caret { 50% { opacity: 0; } }

.h-duo { display: flex; margin-top: 100px; }
.h-duo__l, .h-duo__r { position: relative; width: 50%; padding: 0 10px 10px; }
.h-duo__r { display: flex; flex-direction: column; justify-content: space-between; }
.h-duo__r .h-cell__lead { margin-top: 50px; }
.h-fit--heat { aspect-ratio: 600 / 720; }
.h-heat { width: 600px; height: 720px; }
.h-heat > .os-label { position: absolute; left: 0; top: 0; z-index: 3; }
.h-heat__scan { position: absolute; left: 50px; top: 80px; width: 128px; }
.h-heat__scan .os-window__bar { padding: 1px 4px 1px 4px; }
.h-heat__scanbody { position: relative; height: 124px; background: var(--pink); overflow: hidden; }
.h-heat__scanbody::after { content: ''; position: absolute; inset: 0; border: var(--border) solid var(--ink); pointer-events: none; }
.h-heat__ver { position: absolute; left: 280px; top: 600px; width: 266px; }
.h-heat__ver .os-window__bar { padding: 1px 4px 1px 4px; color: var(--pink); }
.h-heat__win { position: absolute; left: 95px; top: 118px; width: 410px; box-shadow: none; }
.h-heat__win .os-window__bar { padding: 1px 4px 1px 4px; color: var(--paper); letter-spacing: 0.02em; }
.h-heat__win .os-window__title { color: var(--paper); }
.h-heat__body { position: relative; padding: 4px 4px 6px; background: var(--white); font: 500 18px/18px var(--font-pixel); color: var(--ink); }
.h-heat__body::after { content: ''; position: absolute; inset: 0; border: var(--border) solid var(--ink); pointer-events: none; }
.h-heat__line { height: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.h-heat__chip { display: inline-block; margin: 6px 0 8px; padding: 1px 3px 1px; background: var(--ink); color: var(--paper); }
.h-heat__grid { display: grid; grid-template-columns: repeat(7, 1fr); width: 400px; border-top: 1.2px solid var(--ink); border-left: 1.2px solid var(--ink); }
.h-heat__cell { position: relative; height: 57px; border-right: 1.2px solid var(--ink); border-bottom: 1.2px solid var(--ink); background: var(--white); cursor: default; }
.h-heat__cell::before { content: ''; position: absolute; inset: 9px; background: var(--shade, #dedede); transition: background-color 0.6s var(--ease); }
.h-heat__cell:hover::before, .h-heat__cell:focus-visible::before { outline: 2px solid var(--magenta); outline-offset: 2px; }
.h-heat__cell:focus-visible { outline: none; }
.h-heat__scale { position: relative; display: flex; justify-content: space-between; align-items: flex-end; height: 36px; margin-top: 8px; padding: 0 2px; background: linear-gradient(90deg, #f2f2f2, #1e1e1e); font: 500 14px/14px var(--font-pixel); }
.h-heat__scale::after { content: ''; position: absolute; inset: 0; border: var(--border) solid var(--ink); pointer-events: none; }
.h-heat__scale span { padding: 1px 2px; background: var(--ink); color: var(--paper); margin-bottom: 2px; }

/* ---------------------------------------------------------------- charts */

.h-charts { padding-top: 100px; }
.h-charts__title { text-align: left; }
.h-pair { display: flex; margin-top: 110px; }
.h-card--half { width: 50%; }
.h-card--half .h-card__foot { padding-right: 50px; }
.h-card--half .h-card__foot > p:first-child { margin-top: 9px; }
.h-art { position: relative; overflow: hidden; background-color: var(--pink); }
.h-art > .os-label { position: absolute; left: 0; top: 0; z-index: 2; }
/* typesafe draws bento-dots.png cover-scaled (5.6px dot pitch at 1440); the tile keeps that pitch crisp at every width */
.h-art--dots { background: var(--pink) url('/img/ts/dot-grid.png') center / 1440px auto repeat; }
.h-art--dither { background: var(--pink) url('/img/ts/bento-dither-pink.png') center / cover no-repeat; }
.h-art__area { display: flex; align-items: center; justify-content: center; margin-top: 29px; aspect-ratio: 600 / 598; }
.h-chartwin { width: min(400px, 76%); }
.h-chartwin--bars { width: min(406px, 76%); }
.h-fit--scatter { aspect-ratio: 400 / 437; }
.h-fit--bars { aspect-ratio: 406 / 440; }

.h-plot, .h-bars, .h-price { width: 100%; height: 100%; }
.h-plot { width: 400px; height: 437px; }
.h-plot .os-window__bar, .h-bars .os-window__bar, .h-price .os-window__bar { padding: 1px 4px 1px 4px; color: var(--paper); font-size: 16px; line-height: 18px; }
.h-plot .os-window__title, .h-bars .os-window__title, .h-price .os-window__title { color: var(--paper); }
.h-plot__body { position: relative; display: flex; flex-direction: column; height: 417px; padding: 3px; background: var(--white); }
.h-plot__body::after, .h-bars__body::after, .h-price__cols::after { content: ''; position: absolute; inset: 0; border: var(--border) solid var(--ink); pointer-events: none; }
.h-plot__frame { position: relative; flex: 1 1 auto; border: 1.2px solid var(--ink); }
.h-plot__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.h-plot__x { flex: none; height: 38px; margin-top: 3px; border: 1.2px solid var(--ink); font: 500 16px/34px var(--font-pixel); text-align: center; color: var(--ink); }
.h-plot__svg text { font-family: var(--font-pixel); font-weight: 500; fill: var(--ink); }
.h-plot__svg .ax { font-size: 11px; }
.h-plot__svg .lab { font-size: 11px; }
.h-plot__svg .grid { stroke: #d2d2d2; stroke-width: 1; }
.h-plot__svg .axis { stroke: var(--ink); stroke-width: 1.2; }
.h-plot__svg .tickbox { fill: #c9c9c9; }
.h-plot__svg .pt { fill: var(--h-blue); }
.h-plot__svg .pt--open { fill: #e84cb3; }
.h-plot__svg .pt--weth { fill: #c3862b; }
.h-plot__svg .pt-g { cursor: default; }
.h-plot__svg .pt-g:hover .pt, .h-plot__svg .pt-g:focus .pt { stroke: var(--ink); stroke-width: 1.5; }

.h-bars { width: 406px; height: 440px; }
.h-bars__body { position: relative; height: 420px; padding: 8px 6px 6px 7px; background: var(--white); font: 500 14px/14px var(--font-pixel); color: var(--ink); }
.h-brow { height: 42.5px; }
.h-brow__head { display: flex; align-items: center; gap: 3px; height: 17px; white-space: nowrap; }
.h-brow__chip { padding: 1px 2px 1px; color: var(--white); background: var(--h-blue); }
.h-brow__chip--open { background: var(--h-green); }
.h-brow__chip--weth { background: var(--h-brown); }
.h-brow__track { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; height: 17px; margin-top: 1px; }
.h-brow__track > i { background: #e2e2e2; }
.h-brow__fill { position: absolute; left: 0; top: 0; bottom: 0; width: var(--w, 0%); background: var(--ink); transition: width 0.8s var(--ease); }
.h-brow__band { position: absolute; top: -3px; bottom: -3px; left: var(--b, 0%); width: 2px; background: var(--magenta); }
.h-brow__val { position: absolute; right: 2px; top: 2px; padding: 0 1px; }
.h-brow__val--ink { color: var(--white); }
.h-bars__axis { position: relative; height: 16px; margin-top: 4px; font-size: 13px; }
.h-bars__axis span { position: absolute; top: 0; transform: translateX(-2px); }

.h-cost__area { display: flex; justify-content: center; padding: 108px 0 84px; }
.h-cost__area .h-fit { width: min(788px, 94%); }
.h-fit--cost { aspect-ratio: 788 / 438; }
.h-price { width: 788px; height: 438px; }
.h-price__cols { position: relative; display: flex; gap: 3px; height: 418px; padding: 2px; background: var(--grey-2); }
.h-price__col { position: relative; flex: 1 1 0; padding: 2px 4px 4px; background: var(--white); font: 500 14px/14px var(--font-pixel); color: var(--ink); }
.h-price__col::after { content: ''; position: absolute; inset: 0; border: var(--border) solid var(--ink); pointer-events: none; }
.h-price__h { height: 34px; font-size: 16px; line-height: 16px; }
.h-price .h-brow { height: 41px; }
.h-cost__foot { display: flex; gap: 20px; padding-top: 20px; min-height: 88px; }
.h-statkv { width: 390px; max-width: 100%; }
.h-statkv .t-h2 { color: var(--ink-86); }
.h-statkv .h-kv__dim { margin-top: 9px; }

/* ---------------------------------------------------------------- logo + come arb with us */

.h-end { padding-bottom: 0; }
.h-end > .h-box--logo { margin-top: 110px; }
.h-biglogo { width: 735px; max-width: 100%; margin: 0 auto; }
.h-biglogo .lockup__inner { height: 19.6cqw; }
.h-come { display: flex; align-items: center; justify-content: space-between; }
.h-come__title { color: var(--ink-86); white-space: nowrap; }
.h-come__go { display: flex; align-items: center; gap: 50px; margin-right: 121px; }
.h-come__go .cta-arrow { color: var(--ink-86); }
.h-end__sep.ascii-sep { max-width: none; margin-top: 10px; }

/* ---------------------------------------------------------------- notes band */

.h-blog { position: relative; background: var(--teal-grey); padding: 0 var(--page-pad); }
.h-blog > .ascii-sep { margin-inline: calc(-1 * var(--page-pad)); width: auto; }
.h-blog__label { position: absolute; left: 0; top: 0; padding: 2px 3px 5px; }
.h-blog__content { display: flex; justify-content: space-between; gap: 50px; max-width: var(--container); margin: 0 auto; padding: 125px 50px 100px; }
.h-feature { display: flex; flex-direction: column; width: 820px; flex: none; }
.h-feature__img { position: relative; display: block; aspect-ratio: 820 / 672; overflow: hidden; }
.h-feature__img img { width: 100%; height: 100%; object-fit: cover; }
.h-feature__tag { position: absolute; left: 0; bottom: 0; }
.h-feature__text { display: flex; flex-direction: column; padding: 20px 0 41px; }
.h-feature__title { font: 500 48px/43.2px var(--font-display); letter-spacing: 0; text-transform: capitalize; color: var(--ink-86); }
.h-feature__blurb { display: none; }
.h-post__more { margin-top: 20px; font: 400 17px/20.4px var(--font-body); letter-spacing: 0.05em; color: var(--ink-86); transition: color 0.3s var(--ease); }
.h-feature:hover .h-post__more, .h-post:hover .h-post__more { color: var(--magenta); }
.h-posts { display: flex; flex-direction: column; gap: 60px; width: 270px; flex: none; }
.h-post { display: flex; flex-direction: column; padding-bottom: 41px; }
.h-post__title { font: 500 30px/27px var(--font-display); letter-spacing: 0.02em; text-transform: capitalize; color: var(--ink-86); }
.h-post__blurb { margin-top: 40px; font: 400 17px/20.4px var(--font-body); letter-spacing: 0.05em; color: var(--ink-86); }
.h-post .h-post__more { margin-top: 16px; }

/* ---------------------------------------------------------------- FAQ */

.h-faq { background: var(--ink); color: var(--paper); padding: 0 var(--page-pad); }
.h-faq > * { max-width: var(--container); margin-inline: auto; }
.h-faq > .ascii-sep + .h-box { margin-top: 50px; }
.h-faq__title { color: var(--white); }
.h-faq__text { display: flex; justify-content: space-between; align-items: flex-end; margin-top: 50px; margin-bottom: 50px; }
.h-faq__side { width: 211px; flex: none; }
.h-faq .h-b64 { color: var(--paper); }
.h-b64--faq .h-b64__t { margin-top: 9px; }
.h-faq__mark { display: flex; align-items: center; justify-content: center; width: 190px; height: 140px; margin-top: 30px; }
.h-faq__mark img { width: 72px; height: auto; }
.h-faq .faq__a a { color: inherit; }
.h-faq .faq__a a:hover { color: var(--pink); }

/* ================================================================ desktop small (1200 - 1439) */

@media (max-width: 1439px) {
  .h-hero__title { font-size: 140px; line-height: 0.8; }
}

/* ================================================================ tablet (810 - 1199) */

@media (max-width: 1199px) {
  .h-hero__inner { padding: 30px var(--page-pad) 0; }
  .h-news { width: 300px; }
  .h-news .os-window__bar { font-size: 14px; line-height: 14px; padding: 2px 4px 5px; }
  .h-news__body { font-size: 16px; line-height: 16px; gap: 20px; }
  .h-news__text { width: 191px; }
  .h-news__glyph { width: 13px; height: 13px; margin-right: 6px; }
  .h-hero__frame { margin-top: 40px; padding: 0 0 20px; background-size: 0 0, 0 0, 10px 10px, 10px 10px; }
  .h-hero__b64 { display: none; }
  .h-hero__head { gap: 20px; padding: 0 38px 0 10px; }
  .h-kicker > span { display: block; }
  .h-kicker__dots--wide { display: none; }
  .h-kicker__dots--short { display: inline; }
  .h-hero__title { font-size: var(--fs-display); line-height: 0.8; }
  .h-hero__links { column-gap: 30px; padding: 10px 0 20px; }
  .h-hero__docs { display: inline-flex; margin-top: 6px; }
  .h-hero__break { display: block; flex-basis: 100%; height: 0; }

  .h-os { padding: 30px 10px; }
  .h-blob--1, .h-blob--4 { display: none; }
  .h-clock { top: 10px; }
  .h-win--rlvr { left: auto; right: 20px; top: 117px; translate: var(--dx, 0px) var(--dy, 0px); }

  .h-text__bento { width: calc(100% - 190px); }
  .h-text__row--wide { flex-direction: column; gap: 20px; }
  .h-cell--wide { width: 100%; }
  .h-text__row--three .h-cell { width: 240px; }


  .h-card--half .h-card__foot { padding-right: 50px; }
  .h-statkv .t-h2 { font-size: 41px; }
  .h-come { flex-direction: column; justify-content: center; gap: 50px; }
  .h-come__go { margin-right: 0; gap: 50px; }
  .h-come__link { --fs-cta: 64px; --cta-bar: 4px; }
  /* below 1200 the cover-scaled dither art aliases: dots tile + one dithered blob at typesafe's own scale */
  .h-art--dither { background: url('/img/ts/dither-blob-4.png') right -990px bottom -1010px / 2048px 2048px no-repeat, url('/img/ts/dither-blob-1.png') left -1060px bottom -960px / 2048px 2048px no-repeat, url('/img/ts/dot-grid.png') center / 1440px auto repeat, var(--pink); background-blend-mode: multiply; }

  .h-blog__content { padding: 125px 0 100px; }
  .h-feature { width: calc(100% - 229px - 50px); }
  .h-posts { width: 229px; }
}

/* ================================================================ phone (< 810) */

@media (max-width: 809px) {
  .h-hero__inner { padding-top: 40px; }
  .h-hero__head { padding: 0 10px; }

  .h-os { padding: 5px 5px 0; }
  .h-field { height: 670px; }
  .h-blob--2, .h-clock { display: none; }
  .h-blob--3 { left: calc(100% - 1024px); }
  .h-glider { bottom: 55px; right: 8px; }
  .h-win--lm { left: 10px; top: 31px; translate: var(--dx, 0px) var(--dy, 0px); }
  .h-win--llm { left: 51px; top: 110px; translate: var(--dx, 0px) var(--dy, 0px); }
  .h-win--rlhf { top: 103px; }
  .h-win--arbs { width: 365px; }
  .h-win--rlvr { right: 10px; top: 10px; }
  .h-arbs__table { height: auto; }

  .h-text { flex-direction: column; padding-bottom: 100px; }
  .h-text__bento { width: 100%; }
  .h-text__row--three { flex-direction: column; gap: 21px; margin-top: 69px; }
  .h-text__row--three .h-cell { width: 100%; }

  .h-box--h2 { padding: 60px 0; }
  .h-race__foot { flex-wrap: wrap; row-gap: 0; }
  .h-kv__link { margin-left: 0; width: 100%; padding-top: 16px; }

  .h-duo { flex-direction: column; }
  .h-duo__l, .h-duo__r { width: 100%; }
  .h-duo__r { justify-content: flex-start; }

  .h-pair { flex-direction: column; gap: 30px; margin-top: 100px; }
  .h-card--half { width: 100%; }
  .h-art--bars .h-art__area { aspect-ratio: auto; height: 309px; }
  .h-chartwin--bars { width: min(406px, 76%, 265px); }
  .h-card--wide.h-cost { margin-top: 30px; }
  .h-cost__area { padding: 44px 0 40px; }
  .h-cost__foot { flex-direction: column; gap: 11px; }
  .h-statkv .t-h2 { font-size: 33px; }
  .h-statkv .h-kv__dim { margin-top: 10px; }

  .h-end > .h-box--logo { margin-top: 100px; }
  .h-biglogo { width: 321px; }
  .h-box--come { padding: 60px 0; }
  .h-come { gap: 30px; }
  .h-come__link { --fs-cta: 28px; --cta-bar: 2px; }
  .h-come__go .cta-arrow { width: 38px; }
  .h-end__sep.ascii-sep { margin-top: 0; }

  .h-blog__content { flex-direction: column; justify-content: flex-start; gap: 50px; padding: 85px 10px 60px; }
  .h-feature, .h-posts { width: 100%; }
  .h-feature__img { display: none; }
  .h-feature__text { padding-top: 0; }
  .h-feature__title { font: 500 30px/27px var(--font-display); letter-spacing: 0.02em; }
  .h-feature__blurb { display: block; }
  .h-feature .h-post__more { margin-top: 16px; }
  .h-posts { gap: 60px; }

  .h-faq__side { display: none; }
}

/* ---------------------------------------------------------------- reduced motion: still frames */

@media (prefers-reduced-motion: reduce) {
  .h-gol *, .h-speed__mark, .h-term__lines .caret { animation: none !important; }
  .h-gol .gol-b, .h-gol .gol-c { opacity: 1; }
  .h-gol .gol-d { opacity: 0; }
}