/* jeb street: asphalt, white and yellow road paint, green highway signs. */
:root {
  --asphalt: #2b2b2b; --asphalt-2: #353535; --asphalt-3: #3f3f3f; --line: rgba(255,255,255,.12);
  --white: #f4f4f2; --muted: #b5b5b0; --yellow: #f5c518; --yellow-dark: #c99e0a; --sign-green: #0f6b3a; --sign-blue: #1c5a9e;
  --red: #e5484d; --ok: #58d68d; --mono: "Overpass Mono", ui-monospace, SFMono-Regular, Menlo, monospace; --sans: "Overpass", Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
html { color-scheme: dark; }
body { margin: 0; background: var(--asphalt); color: var(--white); font-family: var(--sans); line-height: 1.45; }
a { color: var(--yellow); }
code, pre, .mono { font-family: var(--mono); }
pre { white-space: pre-wrap; font-size: 12px; line-height: 1.45; background: rgba(0,0,0,.35); padding: 10px 12px; border-radius: 8px; overflow: auto; }
button, select, input, textarea { font: inherit; }

/* banner */
.banner { position: relative; overflow: hidden; background: #0b1d33; }
.banner img { display: block; width: 100%; height: auto; max-height: 480px; object-fit: cover; }
.banner-copy { position: absolute; left: max(16px, calc((100% - 1200px) / 2)); bottom: 28px; text-shadow: 0 2px 6px rgba(0,0,0,.7); }
.banner-copy h1 { margin: 0; font-size: clamp(44px, 7vw, 92px); line-height: .95; letter-spacing: -.02em; font-weight: 900; text-transform: uppercase; }
.banner-copy .street-name { color: var(--white); } .banner-copy .street-suffix { color: var(--yellow); }
.banner-copy p { margin: 8px 0 0; max-width: 560px; font-size: clamp(14px, 1.6vw, 18px); color: var(--white); }
@media (max-width: 700px) { .banner img { max-height: 300px; } .banner-copy { bottom: 12px; } .banner-copy p { display: none; } }

/* the strip (nav): road paint */
.strip { display: flex; flex-wrap: wrap; gap: 4px 2px; align-items: center; padding: 8px max(16px, calc((100% - 1200px) / 2)); background: #1f1f1f; border-top: 6px solid var(--yellow); border-bottom: 2px dashed rgba(255,255,255,.25); position: sticky; top: 0; z-index: 5; }
.strip a { color: var(--white); text-decoration: none; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: 12px; padding: 8px 12px; border-radius: 6px; border: 2px solid transparent; }
.strip a:hover { border-color: rgba(255,255,255,.35); }
.strip a.active { background: var(--white); color: #111; }
.strip a.yellow { color: var(--yellow); } .strip a.yellow.active { background: var(--yellow); color: #111; }
.strip .sep { width: 10px; height: 2px; background: rgba(255,255,255,.3); margin: 0 4px; }
.car-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px max(16px, calc((100% - 1200px) / 2)); background: var(--asphalt-2); font-size: 12px; }
.car-strip .label { color: var(--muted); text-transform: uppercase; letter-spacing: .1em; font-weight: 700; }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: rgba(0,0,0,.3); border: 1px solid var(--line); margin-right: 6px; color: var(--white); }
.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--muted); flex: none; }
.dot.ready { background: var(--ok); box-shadow: 0 0 8px rgba(88,214,141,.7); } .dot.down { background: var(--red); } .dot.loading { background: var(--yellow); animation: pulse 1.1s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .35; } }
.small-link { margin-left: auto; font-size: 12px; }

main { width: min(1200px, calc(100% - 32px)); margin: 0 auto; padding: 22px 0 48px; }
.view { display: none; } .view.active { display: block; }
.section-title { font-size: 22px; text-transform: uppercase; letter-spacing: .06em; margin: 8px 0 14px; font-weight: 900; }
.section-title::before { content: ""; display: inline-block; width: 14px; height: 14px; background: var(--yellow); margin-right: 10px; transform: rotate(45deg); }
.muted { color: var(--muted); } .small { font-size: 12px; } .bad { color: var(--red); } .ok { color: var(--ok); } .grow { flex: 1; }
.row { display: flex; align-items: center; } .row.gap { gap: 10px; } .row.wrap { flex-wrap: wrap; } .inline { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }

/* signs */
.sign { display: block; text-decoration: none; color: var(--white); background: var(--sign-green); border: 4px solid var(--white); border-radius: 12px; padding: 16px 18px; box-shadow: 0 8px 24px rgba(0,0,0,.35), inset 0 0 0 2px var(--sign-green); transition: transform .12s ease; }
.sign:hover { transform: translateY(-2px); }
.sign.yellow { background: var(--yellow); color: #111; border-color: #111; box-shadow: 0 8px 24px rgba(0,0,0,.35), inset 0 0 0 2px var(--yellow); }
.sign.big { padding: 22px 24px; }
.sign .sign-title { font-weight: 900; text-transform: uppercase; letter-spacing: .04em; font-size: 20px; line-height: 1.1; }
.sign.big .sign-title { font-size: clamp(20px, 3vw, 30px); }
.sign .sign-sub { margin-top: 6px; font-size: 13px; opacity: .92; }
.sign .sign-foot { margin-top: 10px; font-family: var(--mono); font-size: 11px; opacity: .85; text-transform: uppercase; letter-spacing: .06em; }
.sign.tool { background: var(--sign-blue); box-shadow: 0 8px 24px rgba(0,0,0,.35), inset 0 0 0 2px var(--sign-blue); }
.two-lanes { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 26px; }
.app-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.notice { margin-top: 22px; padding: 14px 16px; border-left: 6px solid var(--yellow); background: rgba(0,0,0,.25); border-radius: 0 10px 10px 0; font-size: 14px; color: var(--white); }
.notice.small { font-size: 12px; color: var(--muted); margin-top: 12px; }
.notice.tall p { margin: 8px 0; } .notice h3 { margin: 0 0 6px; }

/* panels */
.panel { background: var(--asphalt-2); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 10px 30px rgba(0,0,0,.25); }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } .two-col.narrow-left { grid-template-columns: minmax(280px, .8fr) minmax(360px, 1.3fr); }
.layout { display: grid; grid-template-columns: minmax(320px, 1.1fr) minmax(300px, .9fr); gap: 18px; }
.side { display: flex; flex-direction: column; gap: 18px; }
.game-head { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; } .game-head p { margin: 0 0 12px; }
.game-panel, .editor, .decision, .controls, .result, .rides { padding: 18px; }
.editor { display: flex; flex-direction: column; gap: 10px; }
.decision-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; }
h3 { margin: 0; font-size: 14px; text-transform: uppercase; letter-spacing: .06em; }
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-bottom: 12px; }
.field { display: flex; flex-direction: column; gap: 4px; }
.field label, .car-form label { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }
input, select.big, textarea { color: var(--white); background: #1c1c1c; border: 1px solid var(--line); border-radius: 8px; min-height: 40px; padding: 0 10px; width: 100%; }
select.auto { width: auto; } textarea { padding: 8px 10px; font-family: var(--mono); font-size: 13px; resize: vertical; } textarea.invalid { border-color: var(--red); }
select { color: var(--white); background: #1c1c1c; border: 1px solid var(--line); border-radius: 8px; min-height: 34px; padding: 0 8px; }
.btn { color: var(--white); background: #1c1c1c; border: 2px solid rgba(255,255,255,.35); border-radius: 8px; min-height: 40px; padding: 0 14px; cursor: pointer; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; font-size: 12px; }
.btn:hover { border-color: var(--white); } .btn:disabled { opacity: .4; cursor: not-allowed; }
.btn.yellow { background: var(--yellow); color: #111; border-color: var(--yellow); } .btn.ghost { border-style: dashed; } .btn.wide { grid-column: 1 / -1; } .btn.file { display: inline-flex; align-items: center; }
.small-btn { font-size: 11px; min-height: 26px; padding: 0 9px; border-radius: 6px; border: 1px solid rgba(255,255,255,.3); background: transparent; color: var(--white); cursor: pointer; text-transform: uppercase; letter-spacing: .05em; }
.small-btn:hover { border-color: var(--white); } .small-btn.danger { color: var(--red); border-color: rgba(229,72,77,.5); }
.toggles { display: flex; gap: 12px; flex-wrap: wrap; margin: 0 0 12px; color: var(--muted); font-size: 12px; }
.toggles label { display: flex; align-items: center; gap: 6px; } .toggles input[type=checkbox] { accent-color: var(--yellow); width: 15px; height: 15px; margin: 0; }
.toggles input[type=number] { min-height: 26px; width: 64px; padding: 0 6px; font-size: 12px; } .toggles select.small { min-height: 26px; padding: 0 6px; font-size: 12px; }
abbr { text-decoration: none; border-bottom: 1px dotted var(--muted); cursor: help; }
.button-row { display: grid; grid-template-columns: 44px 1fr 44px; gap: 8px; }
.timeline { width: 100%; accent-color: var(--yellow); margin: 14px 0 8px; min-height: 0; padding: 0; background: transparent; border: 0; }
.control-foot { display: flex; justify-content: space-between; align-items: center; color: var(--muted); font-size: 12px; }
.mode { font-family: var(--mono); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--yellow); }

/* boards */
.board-wrap { position: relative; max-width: 620px; margin: 0 auto; } .board-wrap.tetris { max-width: 320px; } .board-wrap.c4 { max-width: 560px; } .board-wrap.g2048 { max-width: 420px; } .board-wrap.wordle { max-width: 320px; } .board-wrap.twenty_questions { max-width: 640px; }
.board { display: grid; border: 3px solid var(--white); border-radius: 10px; overflow: hidden; background: #1a1a1a; }
.board.thinking { box-shadow: 0 0 0 3px var(--yellow); }
.cell { position: relative; border: 1px solid rgba(255,255,255,.05); display: flex; align-items: center; justify-content: center; }
.cell.body::after, .cell.head::after, .cell.food::after, .cell.crash::after { content: ""; position: absolute; inset: 14%; border-radius: 30%; }
.cell.body::after { background: linear-gradient(145deg, #ffe066, #d9a400); } .cell.head::after { inset: 8%; background: linear-gradient(145deg, #fff3b0, #f5c518); box-shadow: 0 0 14px rgba(245,197,24,.6); }
.cell.head::before { content: ""; position: absolute; z-index: 2; width: 12%; aspect-ratio: 1; border-radius: 50%; background: #111; left: 25%; top: 27%; box-shadow: 220% 0 0 #111; }
.cell.food::after { inset: 21%; transform: rotate(45deg); border-radius: 34% 50% 34% 50%; background: var(--white); box-shadow: 0 0 14px rgba(255,255,255,.5); }
.cell.crash::after { inset: 5%; border-radius: 50%; border: 3px solid var(--red); background: rgba(229,72,77,.25); }
.board.c4 { background: #1c5a9e; } .board.c4 .cell::after { content: ""; position: absolute; inset: 12%; border-radius: 50%; background: #10365f; box-shadow: inset 0 3px 8px rgba(0,0,0,.6); }
.board.c4 .cell.x::after { background: radial-gradient(circle at 35% 35%, #fff3b0, #f5c518); } .board.c4 .cell.o::after { background: radial-gradient(circle at 35% 35%, #ff9a9d, #e5484d); }
.board.c4 .cell.last::before { content: ""; position: absolute; inset: 6%; border-radius: 50%; border: 2px solid #fff; opacity: .7; z-index: 2; } .board.c4 .cell.win::before { content: ""; position: absolute; inset: 4%; border-radius: 50%; border: 3px solid #fff; z-index: 2; }
.board.tetris .cell[data-p]::after { content: ""; position: absolute; inset: 8%; border-radius: 18%; background: var(--pc); box-shadow: 0 0 8px var(--pc); } .board.tetris .cell.landed::after { outline: 2px solid #fff; outline-offset: -2px; }
.board.g2048 { gap: 6px; padding: 6px; background: #444; } .board.g2048 .cell { border-radius: 8px; background: rgba(255,255,255,.06); font: 800 clamp(14px, 3.6vw, 30px)/1 var(--mono); }
.board.svg { display: block; aspect-ratio: auto; } .board.svg svg { display: block; width: 100%; height: auto; }
.board.wordle { gap: 6px; padding: 8px; background: #1a1a1a; } .board.wordle .cell { border-radius: 6px; border: 2px solid rgba(255,255,255,.18); font: 800 clamp(16px, 4vw, 30px)/1 var(--mono); text-transform: uppercase; }
.board.wordle .cell.G { background: #2fbf72; border-color: #2fbf72; color: #111; } .board.wordle .cell.Y { background: var(--yellow); border-color: var(--yellow); color: #111; } .board.wordle .cell.X { background: #3a3a3a; border-color: #3a3a3a; color: #ccc; } .board.wordle .cell.answer { border-color: var(--red); color: var(--red); }
.board.text { display: block; aspect-ratio: auto; padding: 16px 18px; min-height: 300px; font-size: 13px; }
.qa { display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; margin: 0 0 12px; } .qa .a { font-family: var(--mono); font-weight: 700; text-transform: uppercase; } .qa .a.yes { color: var(--ok); } .qa .a.no { color: var(--red); }
.animals { display: flex; flex-wrap: wrap; gap: 5px; } .animals span { padding: 2px 8px; border-radius: 999px; font-size: 11px; background: rgba(255,255,255,.06); color: var(--muted); }
.animals span.in { background: rgba(245,197,24,.18); color: var(--yellow); } .animals span.secret { outline: 2px solid var(--white); color: var(--white); } .animals span.guess { outline: 2px solid var(--red); }
.verdict { font-family: var(--mono); font-weight: 700; margin-bottom: 8px; } .verdict.ok { color: var(--ok); } .verdict.bad { color: var(--red); }
.trail { color: var(--muted); font-size: 12px; margin-bottom: 10px; }
.stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin: 14px 0 0; } .stats.kpis { grid-template-columns: repeat(2, 1fr); margin: 0; }
.stat { padding: 10px; background: rgba(0,0,0,.3); border: 1px solid var(--line); border-radius: 10px; }
.stat-label { color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .08em; min-height: 12px; } .stat-value { margin-top: 3px; font: 700 18px/1.15 var(--mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.event { min-height: 22px; color: var(--yellow); font-weight: 700; margin-top: 10px; text-align: center; }
details.prompt { margin-top: 12px; color: var(--muted); font-size: 12px; } details.prompt pre { max-height: 320px; }

/* probabilities */
.prob { display: grid; grid-template-columns: 90px 1fr 52px; gap: 10px; align-items: center; margin: 8px 0; }
.prob-name { color: var(--muted); font: 700 12px var(--mono); text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prob-track { height: 9px; background: rgba(0,0,0,.4); border-radius: 99px; overflow: hidden; } .prob-fill { height: 100%; width: 0; background: #666; transition: width .18s ease; }
.prob.chosen .prob-name, .prob.chosen .prob-value { color: var(--yellow); } .prob.chosen .prob-fill { background: linear-gradient(90deg, var(--yellow-dark), var(--yellow)); }
.prob.played .prob-name { color: var(--white); } .prob-value { text-align: right; color: var(--muted); font: 12px var(--mono); }
.confidence, .override-note { font: 12px var(--mono); margin-top: 8px; min-height: 16px; } .confidence { color: var(--muted); } .override-note { color: var(--yellow); }
.result { color: var(--muted); font-size: 13px; line-height: 1.55; } .result strong { color: var(--white); } .result.error { color: var(--red); } .result-actions { margin-top: 10px; display: flex; gap: 6px; flex-wrap: wrap; }
.chip { display: inline-block; padding: 1px 6px; border-radius: 5px; font: 700 10px var(--mono); letter-spacing: .05em; text-transform: uppercase; background: rgba(255,255,255,.1); color: var(--white); margin-left: 4px; vertical-align: middle; }
.chip.model { background: rgba(245,197,24,.18); color: var(--yellow); } .chip.override { background: rgba(255,255,255,.18); } .chip.bad { background: rgba(229,72,77,.2); color: var(--red); }
.list { display: flex; flex-direction: column; gap: 6px; max-height: 320px; overflow: auto; } .list.tall { max-height: 70vh; }
.row-item { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; padding: 9px 11px; border-radius: 9px; background: rgba(0,0,0,.3); border: 1px solid transparent; cursor: pointer; font-size: 12px; color: var(--muted); }
.row-item:hover { border-color: rgba(255,255,255,.35); } .row-item.current { border-color: var(--yellow); color: var(--white); }
.row-item .tag { font: 700 11px var(--mono); color: var(--muted); text-transform: uppercase; } .row-item .tag.live { color: var(--yellow); } .row-item .tag.you { color: var(--ok); }

/* garage */
.cars { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.car { padding: 12px 14px; border-radius: 10px; background: rgba(0,0,0,.3); border: 2px solid transparent; } .car.current { border-color: var(--yellow); }
.car-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .car-meta { color: var(--muted); font-size: 12px; margin-top: 6px; font-family: var(--mono); }
.cat { display: inline-block; padding: 1px 6px; border-radius: 5px; font: 600 10px var(--mono); background: rgba(255,255,255,.08); color: var(--muted); }
.car-form { display: none; flex-direction: column; gap: 8px; padding: 16px; margin-top: 14px; } .car-form.open { display: flex; } .car-form label { display: flex; flex-direction: column; gap: 3px; }

/* text / apps / triage / calibration */
.results { display: flex; flex-direction: column; gap: 12px; }
.qcard { padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: rgba(0,0,0,.25); }
.qcard h3 { display: flex; justify-content: space-between; gap: 8px; text-transform: none; letter-spacing: 0; font-family: var(--mono); }
.qcard .qtext { color: var(--muted); font-size: 12px; margin: 4px 0 10px; } .qcard .cols { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.col-head { display: flex; justify-content: space-between; color: var(--yellow); font: 700 11px var(--mono); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 6px; gap: 6px; } .qcard .meta { color: var(--muted); font: 11px var(--mono); margin-top: 6px; }
.noul-track { height: 14px; border-radius: 99px; background: linear-gradient(90deg, rgba(229,72,77,.4), rgba(88,214,141,.4)); position: relative; margin: 8px 0; } .noul-mark { position: absolute; top: -3px; width: 3px; height: 20px; background: #fff; transform: translateX(-50%); }
.examples { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.app-groups { display: flex; flex-direction: column; gap: 16px; } .app-group h3 { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; } .app-group .note { color: var(--muted); font-size: 12px; text-transform: none; letter-spacing: 0; font-weight: 400; } .app-group.other { opacity: .55; }
.app-row { display: grid; grid-template-columns: 1fr 120px; gap: 12px; align-items: center; padding: 8px 12px; border-radius: 9px; background: rgba(0,0,0,.3); border: 1px solid transparent; margin-bottom: 6px; } .app-row.starred { border-color: rgba(245,197,24,.5); }
.app-name { font-weight: 700; font-size: 13px; display: flex; align-items: center; gap: 6px; } .app-desc { color: var(--muted); font-size: 12px; margin-top: 2px; } .app-desc em { color: var(--white); font-style: normal; opacity: .85; }
.app-score { display: grid; grid-template-columns: 1fr 44px; gap: 8px; align-items: center; } .star { cursor: pointer; color: var(--muted); user-select: none; } .star.on { color: var(--yellow); }
.slider { display: flex; align-items: center; gap: 8px; color: var(--muted); } .slider input { flex: 1; min-height: 0; padding: 0; background: transparent; border: 0; accent-color: var(--yellow); }
.stories { display: flex; flex-direction: column; gap: 10px; max-height: 75vh; overflow: auto; } .story { padding: 10px 12px; border-radius: 9px; background: rgba(0,0,0,.3); border-left: 4px solid var(--ok); }
.story.review { border-left-color: var(--yellow); } .story .t a { color: var(--white); text-decoration: none; font-weight: 700; } .story .h { color: var(--muted); font-size: 11px; margin: 3px 0 6px; } .story details { font-size: 11px; color: var(--muted); margin-top: 6px; }
.lane { margin: 8px 0 4px; } .lane .note { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--muted); font-size: 11px; }
.chart { position: relative; } .chart svg { width: 100%; height: auto; display: block; } .chart .grid line { stroke: rgba(255,255,255,.1); } .chart .diag { stroke: rgba(255,255,255,.35); stroke-dasharray: 4 4; }
.chart .count { fill: rgba(255,255,255,.08); } .chart .axis text { fill: var(--muted); font: 11px var(--mono); } .chart .lbl { fill: var(--white); font: 700 11px var(--mono); }
.chart .s0 { stroke: var(--yellow); } .chart .s1 { stroke: #6cc2ff; } .chart path.s0, .chart path.s1 { fill: none; } .chart circle.s0 { fill: var(--yellow); } .chart circle.s1 { fill: #6cc2ff; } .chart .hit { fill: transparent; }
.tip { display: none; position: absolute; background: #111; border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; font: 12px var(--mono); pointer-events: none; z-index: 3; max-width: 220px; }
.legend { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; font-size: 12px; color: var(--muted); } .legend span::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--c, #666); margin-right: 6px; } .legend .count::before { border-radius: 2px; background: rgba(255,255,255,.2); }
.progress { height: 10px; border-radius: 99px; background: rgba(0,0,0,.4); overflow: hidden; } .progress-fill { height: 100%; width: 0; background: repeating-linear-gradient(90deg, var(--yellow) 0 14px, #111 14px 20px); transition: width .3s ease; }
.run-card { padding: 12px; border-radius: 10px; background: rgba(0,0,0,.3); margin-bottom: 10px; }
table.score { width: 100%; border-collapse: collapse; font-size: 12px; margin-top: 8px; } table.score th { text-align: left; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; font-size: 10px; padding: 6px 6px; border-bottom: 1px solid var(--line); } table.score td { padding: 7px 6px; border-bottom: 1px solid rgba(255,255,255,.06); vertical-align: top; }
#runall-plan { margin: 6px 0 0; padding-left: 18px; }
footer { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 18px max(16px, calc((100% - 1200px) / 2)); border-top: 6px solid var(--yellow); background: #1f1f1f; color: var(--muted); font-size: 12px; }
@media (max-width: 860px) { .two-lanes, .two-col, .two-col.narrow-left, .layout { grid-template-columns: 1fr; } .stats { grid-template-columns: repeat(3, 1fr); } .form { grid-template-columns: 1fr; } }