:root {
	--ink: #0f172a;
	--ink-hover: #1e293b;
	--ink-2: #334155;
	--muted: #475569;
	--code-bg: #0f172a;
	--code-line: #1e293b;
	--code-ink: #e2e8f0;
	--code-muted: #94a3b8;
	--code-del: #fecaca;
	--code-del-bg: #4c1d24;
	--code-add: #bbf7d0;
	--code-add-bg: #14402a;
	--line: #e2e8f0;
	--line-strong: #94a3b8;
	--bg: #ffffff;
	--soft: #f8fafc;
	--link: #1d4ed8;
	--ok-ink: #166534;
	--ok-bg: #f0fdf4;
	--ok-line: #bbf7d0;
	--warn-ink: #92400e;
	--warn-bg: #fffbeb;
	--warn-line: #fde68a;
	--bad-ink: #b91c1c;
	--bad-bg: #fef2f2;
	--bad-line: #fecaca;
	--mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
	color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
	margin: 0;
	background: var(--bg);
	color: var(--ink);
	font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic UI", Meiryo, sans-serif;
}
html:lang(ja) p, html:lang(ja) dd, html:lang(ja) li { line-height: 1.8; }
html:lang(ja) h1, html:lang(ja) h2, html:lang(ja) h3 { word-break: auto-phrase; }
a { color: var(--link); text-underline-offset: 2px; }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
code, .mono { font-family: var(--mono); }
h1, h2, h3, p { margin: 0; }
h1 { font-size: 28px; line-height: 1.3; }
h2 { font-size: 20px; line-height: 1.4; }
h3 { font-size: 16px; line-height: 1.4; }

.wrap { max-width: 960px; margin: 0 auto; padding: 0 16px; }
.top { border-bottom: 1px solid var(--line); }
.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 64px; }
.brand { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--ink); text-decoration: none; font-weight: 700; font-size: 18px; }
.brand svg { width: 24px; height: 24px; flex: none; }
.top-actions { display: flex; align-items: center; gap: 8px; }
.top-actions form { margin: 0; }
/*
 * The public pages' header (site-header.ts): the logo, Pricing, Docs and the Resources menu on
 * the left; Log in, the small trial button and the language on the right. Under 768px the links,
 * Log in and the language go into the Menu, and the trial button stays. Both menus are
 * <details>, so they open without the script; one opens below its button, over the page.
 */
.top .top-bar { justify-content: flex-start; }
.top-links { display: flex; align-items: center; gap: 4px; margin-left: 16px; }
.top-actions { margin-left: auto; }
/* A header label never wraps: 「メニュー」 and 「ログイン」 broke into a column at 390. */
.top-bar .textbtn, .top-bar .btn { white-space: nowrap; }
.top-link[aria-current="page"] { font-weight: 600; }
.top-drop, .top-menu { position: relative; }
.top-drop > summary, .top-menu > summary { list-style: none; gap: 6px; }
.top-drop > summary::-webkit-details-marker, .top-menu > summary::-webkit-details-marker { display: none; }
.top-drop > summary::after { content: ""; width: 6px; height: 6px; margin-top: -3px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); }
.top-drop[open] > summary::after { margin-top: 3px; transform: rotate(225deg); }
.top-drop-list, .top-menu-panel { position: absolute; top: calc(100% + 4px); z-index: 20; margin: 0; padding: 8px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); box-shadow: 0 8px 24px rgb(15 23 42 / 0.08); }
.top-drop-list { left: 0; min-width: 200px; list-style: none; }
.top-drop-link, .top-menu-panel a { display: flex; align-items: center; min-height: 40px; padding: 0 12px; border-radius: 8px; color: var(--ink); font-size: 14px; line-height: 1.5; text-decoration: none; white-space: nowrap; }
.top-drop-link:hover, .top-menu-panel a:hover { background: var(--soft); }
.top-drop-link[aria-current="page"], .top-menu-panel a[aria-current="page"] { font-weight: 600; }
.top-menu { display: none; }
.top-menu-panel { right: 0; width: min(280px, calc(100vw - 32px)); }
.top-menu-panel ul { margin: 0; padding: 0; list-style: none; }
.top-menu-panel li + li:last-child { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); }
.top-menu-panel a { min-height: 44px; font-size: 16px; }
/* .top in front: .textbtn (below) sets display too, and a later rule of the same weight wins. */
@media (max-width: 767px) {
	.top .top-links, .top .top-login, .top .top-lang { display: none; }
	.top .top-menu { display: block; }
	.top-actions { gap: 4px; }
}
.textbtn {
	display: inline-flex; align-items: center; justify-content: center;
	min-height: 44px; padding: 0 12px; border: 0; border-radius: 8px;
	background: none; color: var(--ink); font: inherit; font-size: 14px; line-height: 1.5;
	text-decoration: none; cursor: pointer;
}
.textbtn:hover { background: var(--soft); }

main { padding: 32px 0 64px; }
.lead { margin-top: 12px; max-width: 640px; color: var(--muted); }
.lead-note { margin-top: 16px; }
/* /workflows: the runs-on line under its lead, not touching it. */
.lead + .code { margin-top: 16px; }
.note { color: var(--muted); font-size: 14px; }
.consent { margin: 8px 0 0; }
/* /connect: under both install cards, outside them. */
.install-consent { margin-top: 16px; }
.legal { max-width: 760px; }
.legal h2 { margin-top: 32px; }
.legal p, .legal ol, .legal ul { margin-top: 12px; }
.legal ol, .legal ul { padding-left: 24px; }
.legal li + li, .legal li > ul, .legal li > p { margin-top: 8px; }
.legal a { overflow-wrap: anywhere; }
.legal-table { margin-top: 16px; overflow-x: auto; }
.legal-table table { width: 100%; border-collapse: collapse; }
.legal-table th, .legal-table td { padding: 12px 8px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.legal-table th[scope="row"] { width: 28%; font-weight: 600; }
.eyebrow { color: var(--muted); font-size: 14px; }
.section { margin-top: 32px; }
.section > h2 + * { margin-top: 16px; }

.card { border: 1px solid var(--line); border-radius: 12px; padding: 24px; background: var(--bg); }
.card-soft { background: var(--soft); }
.card > * + * { margin-top: 16px; }
.card > h2 + p, .card > h3 + p { margin-top: 8px; }

.btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	min-height: 48px; padding: 0 24px; border: 1px solid transparent; border-radius: 8px;
	font: inherit; font-size: 16px; font-weight: 600; line-height: 1.5; text-align: center;
	text-decoration: none; cursor: pointer; white-space: nowrap;
}
.btn-primary { background: var(--ink); color: #ffffff; }
.btn-primary:hover { background: var(--ink-hover); }
.btn-secondary { background: var(--bg); color: var(--ink); border-color: var(--line-strong); }
.btn-secondary:hover { background: var(--soft); }
.btn-small { min-height: 44px; padding: 0 16px; font-size: 14px; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }

.plans { display: grid; gap: 12px; }
.plan { border: 1px solid var(--line); border-radius: 12px; padding: 16px; }
.plan-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.plan-label { font-size: 20px; font-weight: 700; line-height: 1.3; }
.plan-price { font-weight: 600; }
.plan { display: flex; flex-direction: column; gap: 8px; }
/* The label rides with its stepper to the card's foot, so "In all" never floats above its input. */
.plan .qty-label { margin-top: auto; }
.qty-label { font-size: 14px; font-weight: 600; }
.stepper { display: flex; align-items: center; gap: 8px; }
.stepper .input-wrap { flex: 1; }
.stepper input { text-align: center; }
.step { flex: none; width: 44px; height: 44px; padding: 0; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--bg); color: var(--ink); font: inherit; font-size: 20px; font-weight: 600; line-height: 1; cursor: pointer; }
.step:hover { background: var(--soft); }
.step[aria-disabled="true"], .step[aria-disabled="true"]:hover { color: var(--line-strong); background: var(--bg); cursor: default; }
.plan-total { font-size: 18px; }
html:lang(ja) .plan-total { word-break: auto-phrase; }
/* The plan page's monthly/yearly switch: two radios drawn as one segmented control. */
.interval { margin: 0; padding: 0; border: 0; min-width: 0; }
.interval legend { padding: 0; margin-bottom: 8px; }
.interval-options { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border: 1px solid var(--line-strong); border-radius: 12px; }
.interval-option { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 8px; min-height: 44px; padding: 6px 12px; border-radius: 8px; font-weight: 600; line-height: 1.3; text-align: center; cursor: pointer; }
.interval-option input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.interval-option:has(input:checked) { background: var(--ink); color: #ffffff; }
.interval-option:has(input:focus-visible) { outline: 2px solid var(--link); outline-offset: 2px; }
.interval-save { padding: 2px 8px; border-radius: 999px; background: var(--ok-bg); color: var(--ok-ink); font-size: 13px; font-weight: 600; white-space: nowrap; }
.back-link { margin-top: 24px; }
.stack > * + * { margin-top: 12px; }
.share { display: grid; gap: 8px; }
.section > .plans + .note { margin-top: 12px; }

.perms { margin: 0; }
.perm { padding: 16px 0; border-top: 1px solid var(--line); }
.perm:first-child { padding-top: 0; border-top: 0; }
.perm:last-child { padding-bottom: 0; }
.perm dt { font-family: var(--mono); font-size: 14px; font-weight: 600; line-height: 1.5; }
.perm dd { margin: 4px 0 0; color: var(--muted); }
.card > h3 + .perms { margin-top: 12px; }
/* /connect: the organization's app and the personal account's, side by side and the same height
   on a wide screen, each with its button at the foot; the permissions once below, closed. */
.choices { display: grid; gap: 24px; align-items: stretch; }
.choice { display: flex; flex-direction: column; }
.choice-action { margin-top: auto; padding-top: 16px; }
.choice-action .note { margin-top: 8px; }
html:lang(ja) .choice > p, html:lang(ja) .choice-action .note, html:lang(ja) .phrase { word-break: auto-phrase; }
/* Side by side, the heading, the sentence and the button share rows across both cards. */
@media (min-width: 900px) {
	.choices { grid-template-columns: 1fr 1fr; row-gap: 0; }
	.choice { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; }
	.choice-action { margin-top: 0; }
}
.perms-details > .perms { margin-top: 8px; }
.perms-details > .note { margin-top: 16px; }
.perm-app { display: block; font-size: 13px; line-height: 1.5; margin-bottom: 4px; }

.notice { border: 1px solid; border-radius: 12px; padding: 16px; }
.notice > * + * { margin-top: 4px; }
.notice h2, .notice h3 { font-size: 16px; line-height: 1.5; }
.notice-warn { background: var(--warn-bg); border-color: var(--warn-line); color: var(--warn-ink); }
.notice-bad { background: var(--bad-bg); border-color: var(--bad-line); color: var(--bad-ink); }
.notice-ok { background: var(--ok-bg); border-color: var(--ok-line); color: var(--ok-ink); }

.org-head > * + * { margin-top: 4px; }
.org-head .others { margin-top: 8px; font-size: 14px; color: var(--muted); }
.status-row { display: flex; flex-direction: column; gap: 16px; }
.status-line { margin-top: 4px; color: var(--muted); }
.status-bad { border-color: var(--bad-line); background: var(--bad-bg); }
.status-bad .status-line { color: var(--bad-ink); }
.status-warn { border-color: var(--warn-line); background: var(--warn-bg); }
.status-warn .status-line { color: var(--warn-ink); }
.meter { display: block; width: 100%; height: 8px; border: 0; border-radius: 4px; overflow: hidden; background: var(--line); appearance: none; -webkit-appearance: none; }
.meter::-webkit-progress-bar { background: var(--line); border-radius: 4px; }
.meter::-webkit-progress-value { background: var(--ink); border-radius: 4px; }
.meter::-moz-progress-bar { background: var(--ink); border-radius: 4px; }
.meter + p { margin-top: 8px; }
.waiting { font-weight: 600; }
.note code, .notice code { white-space: nowrap; }
/* A runs-on label never breaks inside itself (skipbox-8x16); the line may break before it. */
.nowrap { white-space: nowrap; }
/* A number held with its unit or counter, a login with its さん (units.ts). */
.nb { white-space: nowrap; }
/* An account or repository name in a sentence (views.ts accountName): never broken at its hyphen
   ("acme-/oss"). Inline, so the "." or "'s" after it stays on its line (review 11-09: inline-block let
   ". Trials" start the next one); names too long for a 390 px heading get no span (NAME_HELD_MAX). */
.name { white-space: nowrap; }
/* A link to copy inside a notice (the install link, the plan link) still wraps: nowrap is for short inline code. */
.notice .code code { white-space: normal; }

.code { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--soft); }
.code code { padding: 0 8px; font-size: 16px; line-height: 1.5; overflow-wrap: anywhere; }
/* The setup card's sizes (views.ts sizesTable): each label, its size, and what this account does
   with it, a row 44 px tall at least so a row with a button and one without line up. The buttons
   sit in a last column as wide as the widest of them, each filling it, so their left and right
   edges line up across rows; a size it runs puts its state and copy button across both last
   columns, ending on the same right edge. On a phone each row stacks: the label and size, then
   what the account does, the button column shared by every row through a subgrid. */
.sizes { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 1.5; }
.sizes th { padding: 0 8px 8px; color: var(--muted); font-weight: 600; text-align: left; white-space: nowrap; border-bottom: 1px solid var(--line); }
.sizes td { padding: 8px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.sizes th:first-child, .sizes td:first-child { padding-left: 0; }
.sizes th:last-child, .sizes td:last-child { padding-right: 0; }
/* The columns sit where they do in every state, whatever the third one holds. */
.sizes th:nth-child(1) { width: 26%; }
.sizes th:nth-child(2) { width: 22%; }
.sizes tbody tr:last-child td { border-bottom: 0; padding-bottom: 0; }
.sizes code { font-size: 14px; white-space: nowrap; }
.sizes .size-vm { white-space: nowrap; font-variant-numeric: tabular-nums; }
.sizes .size-use > div { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px 12px; min-height: 44px; }
.sizes .size-price { color: var(--muted); white-space: nowrap; }
.sizes .size-act { width: 1%; white-space: nowrap; }
.sizes .size-act .btn { width: 100%; }
.size-buy { margin: 0; }
.card > .sizes + .sizes-note { margin-top: 12px; }
.card > .sizes-note + .sizes-note { margin-top: 8px; }
html:lang(ja) .sizes-note { word-break: auto-phrase; }
@media (max-width: 599px) {
	.sizes thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
	.sizes { display: block; }
	.sizes tbody { display: grid; grid-template-columns: auto 1fr auto; column-gap: 12px; }
	.sizes tr { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; align-items: center; gap: 8px 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
	.sizes tbody tr:first-child { padding-top: 0; }
	.sizes tbody tr:last-child { padding-bottom: 0; border-bottom: 0; }
	.sizes td, .sizes tbody tr:last-child td { display: block; padding: 0; border: 0; }
	.sizes .size-vm { grid-column: 2 / -1; justify-self: end; color: var(--muted); }
	.sizes .size-use { grid-column: 1 / 3; }
	.sizes .size-act { grid-column: 3; width: auto; }
	.sizes .size-runs { grid-column: 1 / -1; }
	/* Every row's button on the card's right edge, its state or price on the left. */
	.sizes .size-use > div { justify-content: space-between; }
	.sizes .size-runs > div > :last-child { margin-left: auto; }
	.sizes .size-use > div:empty { min-height: 0; }
}
.field { display: grid; gap: 8px; }
.field label { font-weight: 600; font-size: 14px; }
.field-row { display: flex; flex-direction: column; gap: 8px; }
.input-wrap { display: flex; align-items: center; min-height: 48px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--bg); }
.input-wrap:focus-within { outline: 2px solid var(--link); outline-offset: 2px; }
.input-wrap .prefix { padding-left: 12px; color: var(--muted); font-family: var(--mono); font-size: 16px; white-space: nowrap; }
.input-wrap input { flex: 1; min-width: 0; height: 46px; padding: 0 12px; border: 0; border-radius: 8px; background: transparent; color: var(--ink); font: inherit; font-size: 16px; }
.input-wrap input:focus-visible { outline: none; }
.input-wrap .prefix + input { padding-left: 0; }
.field-error { color: var(--bad-ink); font-size: 14px; }
.input-wrap:has(> input[aria-invalid="true"]) { border-color: var(--bad-ink); }
/* One question, one answer: the cancel page's reasons (cancel-views.ts). 44 px rows, the whole row is the target. */
.reasons { display: grid; gap: 8px; margin: 0; padding: 0; border: 0; min-width: 0; }
.reasons legend { margin-bottom: 8px; padding: 0; font-weight: 600; }
.reason { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 8px 12px; border: 1px solid var(--line-strong); border-radius: 8px; cursor: pointer; }
.reason input { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--ink); }
.reason:has(input:checked) { border-color: var(--ink); background: var(--soft); }
.reason:focus-within { outline: 2px solid var(--link); outline-offset: 2px; }

.jobs { width: 100%; border-collapse: collapse; font-size: 14px; }
.jobs th { padding: 0 8px 8px; color: var(--muted); font-weight: 600; text-align: left; white-space: nowrap; border-bottom: 1px solid var(--line); }
.jobs td { padding: 12px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
.jobs th:first-child, .jobs td:first-child { padding-left: 0; }
.jobs th:last-child, .jobs td:last-child { padding-right: 0; }
.jobs .num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.jobs .repo { font-weight: 600; overflow-wrap: anywhere; }
.jobs .job-name { color: var(--muted); font-weight: 400; overflow-wrap: anywhere; }
.pill { display: inline-block; padding: 0 8px; border-radius: 999px; font-size: 13px; line-height: 24px; white-space: nowrap; background: var(--soft); border: 1px solid var(--line); }
.pill-run { background: var(--ok-bg); border-color: var(--ok-line); color: var(--ok-ink); }
.pill-wait { background: var(--warn-bg); border-color: var(--warn-line); color: var(--warn-ink); }
.pill-bad { background: var(--bad-bg); border-color: var(--bad-line); color: var(--bad-ink); }
.pill-ok { background: var(--ok-bg); border-color: var(--ok-line); color: var(--ok-ink); font-weight: 600; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.jobs td.cell-log { white-space: nowrap; }
.jobs-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.jobs-head + * { margin-top: 16px; }
.jobs-notes > * + * { margin-top: 12px; }
.jobs-notes + .jobs, .jobs-notes + .empty { margin-top: 16px; }
.empty { padding: 24px; border: 1px dashed var(--line-strong); border-radius: 12px; color: var(--muted); }
.empty > * + * { margin-top: 12px; }
.jobs .job-why { margin-top: 4px; color: var(--muted); font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }

.progress .checklist { margin: 16px 0 0; padding: 0; list-style: none; }
.progress .checklist + .note { margin-top: 16px; }
.check { display: flex; align-items: flex-start; gap: 12px; }
.check + .check { margin-top: 12px; }
.check-mark { flex: none; display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--bg); color: var(--muted); font-size: 13px; font-weight: 700; line-height: 1; }
.check-done .check-mark { border-color: var(--ok-line); background: var(--ok-bg); color: var(--ok-ink); }
.check-now .check-mark { border-color: var(--ink); background: var(--ink); color: var(--bg); }
.check-bad .check-mark { border-color: var(--bad-line); background: var(--bad-bg); color: var(--bad-ink); }
.check-body { min-width: 0; }
.check .check-title { line-height: 24px; }
.check-done .check-title, .check-todo .check-title { color: var(--muted); }
.check-now .check-title, .check-bad .check-title { font-weight: 600; }
.check-detail { margin-top: 4px; color: var(--muted); font-size: 14px; }
.check-bad .check-detail { color: var(--bad-ink); }
.trial-nudge, .first-prompt { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.trial-nudge > * + *, .first-prompt > * + * { margin-top: 8px; }
.notice .first-prompt { border-top-color: var(--ok-line); }
.owner-message code { font-family: inherit; white-space: normal; }
.sign-in-first .start-form { margin-top: 24px; }
.start-form .consent + .note { margin-top: 8px; }
html:lang(ja) .sign-in-first p, html:lang(ja) .check-body, html:lang(ja) .notice p,html:lang(ja) .trial-nudge p, html:lang(ja) .empty p, html:lang(ja) .job-why { word-break: auto-phrase; }

.quote > * + * { margin-top: 8px; }
.quote h3 { margin-top: 24px; font-size: 16px; line-height: 1.5; }
.quote .quote-big { margin-top: 16px; font-size: 28px; font-weight: 700; line-height: 1.25; letter-spacing: -0.01em; }
.quote .quote-big.quote-ours { margin-top: 4px; }
/* Where flat doesn't pay off yet there's no GitHub line above it (quote-view.ts). */
.quote h2 + .quote-big.quote-ours { margin-top: 16px; }
.quote .quote-payoff { margin-top: 8px; }
.quote-save { color: var(--ok-ink); font-weight: 600; }
.quote .quote-mix { margin-top: 16px; padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--soft); }
.quote-mix > * + * { margin-top: 4px; }
.quote-mix-line { font-weight: 600; }
.quote .actions { margin-top: 16px; }
.quote .quote-alt { margin-top: 8px; }
.quote .quote-alt a { display: inline-flex; align-items: center; min-height: 44px; }
.quote .quote-runners { margin-top: 8px; }
.quote .quote-runners + .note { margin-top: 16px; }

/* No specificity for the margin reset: a list that is also a .section keeps the section's gap (walk, 11-09). */
:where(.wf-list) { margin: 0; }
.wf-list { padding: 0; list-style: none; }
/* The repository's prompt button on the same edge as its Edit buttons; a notice's one action below its text. */
.repo-prompt { display: flex; justify-content: flex-end; }
.notice .notice-action { margin-top: 12px; }
.wf { display: flex; flex-direction: column; gap: 12px; padding: 16px 0; border-top: 1px solid var(--line); }
.wf:first-child { border-top: 0; padding-top: 0; }
.wf:last-child { padding-bottom: 0; }
.wf-name { font-weight: 600; }
.wf-path { color: var(--muted); font-family: var(--mono); font-size: 14px; overflow-wrap: anywhere; }
.back { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; }
/* /account: a plan card's text links side by side, each a 44 px target. */
.card-links { display: flex; flex-wrap: wrap; gap: 0 24px; }
.card-links a { display: inline-flex; align-items: center; min-height: 44px; }
.repo-list { margin: 0; padding: 0; list-style: none; }
.repo-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 4px 16px; }
.wf-job-stays .wf-job-name, .wf-job-stays code { color: var(--muted); }
.wf-job-line .pill { display: table; margin-top: 4px; white-space: normal; }
.repo-item { padding: 16px 0; border-top: 1px solid var(--line); }
.repo-item > * + * { margin-top: 12px; }
.repo-name { font-family: var(--mono); font-size: 16px; line-height: 1.5; overflow-wrap: anywhere; }
.repo-item .wf-list { padding-left: 16px; border-left: 2px solid var(--line); }
.wf-main { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.wf-main > div { min-width: 0; }
.wf-main .btn { flex: none; }
.wf-jobs { margin: 0; padding: 0; list-style: none; font-size: 14px; }
.wf-jobs > * + * { margin-top: 8px; }
.wf-job { display: grid; grid-template-columns: minmax(96px, 200px) 1fr; gap: 4px 16px; line-height: 1.5; }
.wf-job-name { font-weight: 600; overflow-wrap: anywhere; }
.wf-job-line { overflow-wrap: anywhere; }
.wf-job-line code { font-size: 13px; }
/* The trial runs it smaller than on GitHub: said at the row's own size, not as a muted note (lead, 11-09). */
.wf-job-line .wf-job-trial { margin-top: 4px; }
.wf-job-line code.nowrap { white-space: nowrap; }
.wf-job-line .wf-job-alt { display: block; }
.wf-job-line .note { font-size: 13px; }
.wf-none { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.repo-empty > * + * { margin-top: 16px; }
.repo-more { border-top: 1px solid var(--line); }
.repo-more > summary { display: flex; align-items: center; min-height: 48px; color: var(--link); cursor: pointer; font-weight: 600; }
.repo-more > summary:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
.repo-more > .repo-list > .repo-item:first-child { border-top: 0; padding-top: 0; }
.repo-list + .note, .repo-more + .note { margin-top: 16px; }

/* The home page (home.ts). One column on a phone; the hero splits at 900px. */
.hero { display: grid; gap: 32px; }
.hero h1 { font-size: 30px; line-height: 1.25; text-wrap: balance; }
.block h2, .block h3, .fit h2 { text-wrap: balance; }
.hero .lead { margin-top: 16px; max-width: none; color: var(--ink-2); font-size: 16px; }
.hero-main > .notice { margin-top: 16px; }
.start { margin-top: 24px; display: grid; gap: 8px; justify-items: start; }
.start-form { margin: 0; }
.start-note { font-size: 14px; font-weight: 600; }
.start .note { max-width: 520px; }
/* The trial button and, quieter, the calculator: one row, the same height; stacked full width on a phone. */
.hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.hero-cta .btn-secondary { min-height: 56px; }
/*
 * Under the buttons, the risk reversal as body text (founder, 11-09): no card, the trial, the
 * refund, each after a green tick. One row while it fits, breaking between items, never inside one;
 * one per line on a phone, where an item too long for the line wraps beside its tick.
 */
.start-terms { margin: 16px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px 24px; color: var(--ink); font-size: 15px; font-weight: 500; line-height: 1.5; }
.start-terms li { display: flex; align-items: flex-start; gap: 8px; white-space: nowrap; }
/* Not inherited: html:lang(ja) li sets 1.8, which would push the ticks off their lines' centres. */
html:lang(ja) .home .start-terms li { line-height: 1.5; }
.term-check { flex: none; width: 16px; height: 16px; margin-top: calc((1.5em - 16px) / 2); color: var(--ok-ink); }
@media (max-width: 599px) {
	.start-terms { flex-direction: column; gap: 8px; }
	.start-terms li, .calc-checks li, html:lang(ja) .calc-checks li { white-space: normal; }
}
/* Japanese on the home page breaks at phrases, never inside a word (プライベートリポジト/リ): Chromium's phrase breaking. */
html:lang(ja) .home h1, html:lang(ja) .home h2, html:lang(ja) .home h3, html:lang(ja) .home p, html:lang(ja) .home li, html:lang(ja) .home dd, html:lang(ja) .home dt, html:lang(ja) .lead { word-break: auto-phrase; }
/*
 * In every browser, a lead's sentence and a step's clause move whole to the next line (html.ts
 * lineUnits, founder 11-09: 「runs-on: を一行 / 書き換えるだけ」); one wider than its line wraps inside.
 */
.unit { display: inline-block; max-width: 100%; }
/* The hero's room (founder, 11-09): the same space above it, from the header, as below it, to the facts. Plain space. */
.hero { padding-top: 16px; }
.hero + .facts { margin-top: 40px; }
@media (min-width: 768px) {
	.hero { padding-top: 32px; }
	.hero + .facts { margin-top: 64px; }
}
/* runs-on: in a lead never breaks at its hyphen. */
.lead code { white-space: nowrap; }
.btn-large { min-height: 56px; padding: 0 32px; font-size: 18px; }
.diff { margin: 0; border-radius: 12px; overflow: hidden; background: var(--code-bg); }
.diff figcaption { padding: 8px 16px; border-bottom: 1px solid var(--code-line); color: var(--code-muted); font-size: 13px; line-height: 1.5; }
.diff figcaption code { color: var(--code-ink); }
.diff pre { margin: 0; padding: 16px; overflow-x: auto; color: var(--code-ink); font-family: var(--mono); font-size: 14px; line-height: 1.6; }
.diff .del, .diff .add { display: inline-block; min-width: 100%; }
.diff .del { background: var(--code-del-bg); color: var(--code-del); }
.diff .add { background: var(--code-add-bg); color: var(--code-add); }
/* How you start: under the facts, a row of three on a computer, stacked on a phone. */
.start-steps { margin-top: 32px; }
.steps-heading { font-size: 16px; line-height: 1.5; }
.steps { margin: 12px 0 0; padding: 0; list-style: none; counter-reset: step; display: grid; gap: 12px; }
.steps li { counter-increment: step; display: grid; grid-template-columns: 24px 1fr; gap: 12px; line-height: 24px; }
.steps code { white-space: nowrap; } /* runs-on breaks at its hyphen otherwise (en at 1280, 11-09). */
html:lang(ja) .steps li { grid-template-columns: 28px 1fr; line-height: 28px; }
html:lang(ja) .steps li::before { width: 28px; height: 28px; }
.steps li::before { content: counter(step); display: grid; place-items: center; width: 24px; height: 24px; border: 1px solid var(--line-strong); border-radius: 999px; font-size: 13px; font-weight: 700; line-height: 1; }
.facts { margin: 32px 0 0; padding: 16px 0; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.fact dt { color: var(--muted); font-size: 13px; line-height: 1.5; }
.fact dd { margin: 4px 0 0; line-height: 1.5; }
/* Each fact: the benefit, then the number behind it. */
.fact-main { display: block; color: var(--ink); font-size: 15px; font-weight: 700; }
.fact-detail { display: block; margin-top: 4px; color: var(--ink-2); font-size: 13px; }
/* A source, not a claim: small and quiet, a link to GitHub's own page (founder, 11-09). */
.fact-detail a { color: var(--muted); font-size: 12px; text-decoration-color: currentColor; text-underline-offset: 2px; }

.block { margin-top: 48px; }
.block > h2, .fit h2 { font-size: 22px; line-height: 1.35; }
/* A section's content starts one gap under its heading, the same in every section (founder, 11-09: the questions' first hairline touched theirs). */
.block > h2 + * { margin-top: 24px; }
.block > h2 + .section-lead { margin-top: 8px; }
.section-lead { max-width: 720px; color: var(--muted); }
.section-lead + * { margin-top: 24px; }
.block .card > h3 { font-size: 16px; line-height: 1.5; }
.card > h3 + ul, .card > h2 + ul { margin-top: 12px; }
.ticks, .crosses { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.ticks li, .crosses li { position: relative; padding-left: 24px; }
.ticks li::before, .crosses li::before { position: absolute; left: 0; top: 0; width: 16px; text-align: center; font-weight: 700; }
.ticks li::before { content: "\2713"; color: var(--ok-ink); }
.crosses li::before { content: "\00D7"; color: var(--bad-ink); }

/*
 * The home calculator (calc spec, 11-09): the question and its input, the example minutes, the job
 * size, one answer, the trial button, and the arithmetic folded away. One 720 px column.
 */
.calc-form, .calc-result, .calc-start, .calc-more { max-width: 720px; }
.calc-form { display: grid; gap: 24px; }
/*
 * The input rows (founder, 11-09): the question, then a compact box with its unit inside and, beside
 * it, where to read the minutes; the examples under them in a grid of equal cells; then the size
 * switch, its label on the same left edge. No calculate button while calc.js runs (the answer
 * follows the box), so the button is in <noscript>.
 */
.calc-row { display: grid; gap: 8px; }
.calc-label { font-size: 16px; font-weight: 600; line-height: 1.5; }
.calc-input { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.calc-input .input-wrap { flex: 1 1 100%; }
.calc-find { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; }
.input-wrap .suffix { padding-right: 12px; color: var(--muted); font-size: 16px; white-space: nowrap; }
/* Three a row on a phone, six on a computer: each cell its number, a free tier's caption under it, outside the link. */
.chips { margin: 4px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.chips li { display: grid; align-content: start; gap: 4px; min-width: 0; }
.chips a { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: 8px; color: var(--ink); font-size: 14px; font-weight: 600; text-decoration: none; font-variant-numeric: tabular-nums; white-space: nowrap; }
.chips a:hover { background: var(--soft); }
.chips a[aria-current] { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); background: var(--soft); }
.chip-tier { color: var(--muted); font-size: 12px; font-weight: 500; line-height: 1.4; text-align: center; text-wrap: balance; }
html:lang(ja) .chip-tier { word-break: auto-phrase; }
@media (min-width: 768px) {
	.calc-input .input-wrap { flex: 0 0 224px; min-width: 0; }
	.chips { grid-template-columns: repeat(6, minmax(0, 1fr)); }
	/* As wide as three examples, so the switch keeps to their columns. */
	.calc-size .seg { width: calc(50% - 4px); }
}
/* The size switch: links drawn as one segmented control, as the plan page's monthly/yearly radios. */
.seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 4px; border: 1px solid var(--line-strong); border-radius: 12px; }
.seg a { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 12px; border-radius: 8px; color: var(--ink); font-weight: 600; text-decoration: none; white-space: nowrap; font-variant-numeric: tabular-nums; }
.seg a:hover { background: var(--soft); }
.seg a[aria-current] { background: var(--ink); color: #ffffff; }
.calc-result { margin-top: 24px; }
.calc-panel { padding: 24px; border: 1px solid var(--line); border-radius: 12px; background: var(--soft); }
/*
 * The two figures share their rows (name, price, and the line under Skipbox's), so the prices line
 * up however the sizes above them wrap.
 */
.calc-figures { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); grid-template-rows: auto auto auto; column-gap: 12px; }
.calc-figure { margin: 0; display: grid; grid-column: 1; grid-row: 1 / span 3; grid-template-rows: subgrid; row-gap: 8px; }
.calc-figure-ours { grid-column: 3; }
/* The arrow from today's bill to Skipbox's (founder, 11-09): its own column, centred on the figures, the same gap each side. */
.calc-arrow { grid-column: 2; grid-row: 1 / span 3; align-self: center; width: 20px; height: 20px; color: var(--ok-ink); }
.calc-figure dt { display: grid; align-content: start; }
.calc-who { font-size: 16px; font-weight: 700; line-height: 1.5; }
/* A vendor's mark before its name (home.ts vendorName): 18px on a phone, 20px wider, on the name's centre line. */
.vendor { display: inline-flex; align-items: center; gap: 8px; }
.vendor > span { min-width: 0; }
.vendor-icon { flex: none; width: 18px; height: 18px; color: var(--ink); }
.vendor-initial { display: inline-grid; place-items: center; border-radius: 4px; background: var(--muted); color: var(--bg); font-size: 11px; font-weight: 700; line-height: 1; }
@media (min-width: 768px) {
	.vendor-icon { width: 20px; height: 20px; }
	.vendor-initial { font-size: 12px; }
}
.calc-runner { color: var(--muted); font-size: 13px; line-height: 1.5; text-wrap: balance; }
.calc-figure dd { margin: 0; color: var(--ink-2); font-size: 15px; line-height: 1.3; }
.calc-figure .calc-add { color: var(--muted); font-size: 13px; line-height: 1.5; text-wrap: balance; }
.calc-amount { color: var(--ink); font-size: 32px; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* What moving saves, centred under both figures: the difference between them (founder, 11-09). */
.calc-save { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); color: var(--ok-ink); font-size: 20px; font-weight: 700; line-height: 1.35; font-variant-numeric: tabular-nums; text-align: center; text-wrap: balance; }
.calc-flat { font-size: 18px; font-weight: 700; line-height: 1.35; }
.calc-payoff { margin-top: 8px; color: var(--ok-ink); font-weight: 600; }
.calc-start { margin-top: 16px; }
.calc-start .start-form { display: grid; gap: 12px; justify-items: start; }
/* The hero's three checks after the hero's tick (checkList), smaller under a secondary button. */
.calc-checks { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 4px 16px; color: var(--ink-2); font-size: 14px; line-height: 1.5; }
.calc-checks li, html:lang(ja) .calc-checks li { display: flex; align-items: flex-start; gap: 8px; line-height: 1.5; white-space: nowrap; }
.calc-more { margin-top: 16px; }
.calc-lines { margin: 0; }
/*
 * A row of the arithmetic: the name, its sum and its total share the first line's baseline (founder,
 * 11-09); each mark sits on the name's first line, however the name wraps.
 */
.calc-line { display: grid; gap: 4px 16px; padding: 12px 0; border-top: 1px solid var(--line); align-items: baseline; }
.calc-line dt { font-size: 14px; font-weight: 600; line-height: 1.5; }
/*
 * The mark hangs left of the name, so the row's baseline is the name's text, never the mark's (an
 * svg or the initial's own small type); centred on the name's 21px first line (14px × 1.5).
 */
.calc-line .vendor { display: block; position: relative; padding-left: 26px; }
.calc-line .vendor-icon { position: absolute; left: 0; top: 1.5px; }
.calc-line dd { margin: 0; display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.calc-math { color: var(--muted); font-size: 13px; line-height: 1.5; font-variant-numeric: tabular-nums; }
.calc-total { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.calc-line-ours { background: var(--bg); }
.calc-details .cost-proof { padding: 12px 0; border-top: 1px solid var(--line); color: var(--ink-2); font-size: 14px; }
.calc-notes { margin: 0; padding: 12px 0 8px 20px; border-top: 1px solid var(--line); display: grid; gap: 4px; color: var(--muted); font-size: 14px; }

.plan { display: flex; flex-direction: column; gap: 8px; padding: 24px; }
.plan .plan-label { font-size: 22px; line-height: 28px; }
.plan .plan-price { display: flex; align-items: baseline; gap: 4px; }
html:lang(ja) .calc-flat, html:lang(ja) .calc-save, html:lang(ja) .start-note { word-break: auto-phrase; }

/* The home page's plans (founder 11-09; research §2-3): the monthly/yearly switch, three cards
   whose rows line up, one row of promises. The switch is two radios: the checked one's prices show. */
.billing-switch { margin: 0; padding: 0; border: 0; min-width: 0; }
.billing-switch .interval-options { display: inline-grid; grid-template-columns: auto auto; }
.billing-switch + .price-cards { margin-top: 24px; }
.price-cards { display: grid; gap: 16px; }
.price-card { display: flex; flex-direction: column; padding: 24px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); }
/* The recommended card: a 2px edge drawn outside the box, so its content sits where the others' does. */
.price-card-pick { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.price-head { display: flex; align-items: center; gap: 12px; min-height: 28px; }
.price-name { font-size: 22px; font-weight: 700; line-height: 28px; }
.price-badge { padding: 0 12px; border-radius: 999px; background: var(--ink); color: #ffffff; font-size: 12px; font-weight: 700; line-height: 24px; white-space: nowrap; }
.price-who { margin-top: 4px; color: var(--ink-2); font-size: 14px; line-height: 1.5; }
.price-cost { margin-top: 16px; }
.price-line { display: flex; align-items: baseline; gap: 4px; }
.price-amount { font-size: 40px; font-weight: 700; line-height: 48px; font-variant-numeric: tabular-nums; }
.price-per { color: var(--muted); font-size: 16px; font-weight: 600; }
.price-sub { margin-top: 4px; color: var(--muted); font-size: 14px; line-height: 1.5; font-variant-numeric: tabular-nums; }
html:lang(ja) .price-who, html:lang(ja) .assure > li > span { word-break: auto-phrase; }
.price-cost [data-billing="year"] { display: none; }
#plans:has(input[name="billing"][value="year"]:checked) .price-cost [data-billing="year"] { display: block; }
#plans:has(input[name="billing"][value="year"]:checked) .price-cost [data-billing="month"] { display: none; }
.price-cta { margin-top: 24px; }
.price-cta .btn { width: 100%; }
.price-rows { margin: 24px 0 0; }
.price-row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 12px 0; border-top: 1px solid var(--line); font-size: 14px; line-height: 1.5; }
.price-row:last-child { padding-bottom: 0; }
.price-row dt { color: var(--muted); }
.price-row dd { margin: 0; display: grid; justify-items: end; gap: 4px; color: var(--ink); font-weight: 600; text-align: right; }
.price-row code { color: var(--muted); font-size: 13px; font-weight: 400; white-space: nowrap; }
.price-cards + .assure { margin-top: 32px; }
/* The plans' promises: the hero's tick (home.ts checkList), a bold line, one short line under it. */
.assure { margin: 0; padding: 0; list-style: none; display: grid; gap: 16px; }
.assure > li { display: flex; align-items: flex-start; gap: 8px; font-size: 16px; line-height: 24px; }
.assure > li > span { display: grid; min-width: 0; text-wrap: balance; }
.assure > li > span > strong { color: var(--ink); font-size: 15px; font-weight: 700; line-height: 24px; }
.assure > li > span > span { color: var(--muted); font-size: 13px; line-height: 20px; }
@media (min-width: 600px) {
	.assure { grid-template-columns: 1fr 1fr; gap: 16px 24px; }
}
@media (max-width: 899px) {
	.price-cards { max-width: 560px; }
}
@media (min-width: 900px) {
	/* Side by side, each card's name, line, price, button and rows share rows across the three. */
	.price-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.price-card { display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: 0; }
	/* One row, however many promises: the icon above its words. */
	.assure { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 24px; }
	.assure > li { flex-direction: column; gap: 8px; }
	.assure .term-check { margin-top: 0; }
}

.fit-grid { display: grid; gap: 16px; }
.crosses strong { display: block; font-weight: 600; color: var(--ink); }
.crosses { gap: 12px; }
.block > h2 + .scenes { margin-top: 16px; }
.scenes { display: grid; gap: 16px; }
.scene { display: grid; gap: 16px; }
.card.scene > * + * { margin-top: 0; }
.scene-what > * + * { margin-top: 8px; }
.scene-what h3 { font-size: 17px; line-height: 1.4; }
.scene-what p { color: var(--ink-2); }
.scene-quote code { display: block; padding: 8px 12px; border-radius: 8px; background: var(--soft); border: 1px solid var(--line); font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
.scene-parts { margin: 0; display: grid; gap: 12px; }
.scene-parts dt { font-size: 13px; font-weight: 600; color: var(--muted); }
.scene-parts dd { margin: 4px 0 0; }
.scene-parts .scene-ours { padding-top: 12px; border-top: 1px solid var(--line); }
.scene-parts .scene-ours dt { color: var(--ok-ink); }
.approval .ticks { margin-top: 16px; }
.faq { max-width: 760px; }
/*
 * The one accordion (founder, 11-09): the questions, the calculator's arithmetic and the connect
 * page's permissions. A full-width row, the title bold and dark (blue is for links), "+" at the
 * right and "−" open, a hairline above and below; native <details>, so it opens without JavaScript.
 */
.disclosure { border-top: 1px solid var(--line); }
.disclosure:last-child { border-bottom: 1px solid var(--line); }
.disclosure > summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; padding: 12px 0; color: var(--ink); cursor: pointer; list-style: none; }
.disclosure > summary::-webkit-details-marker { display: none; }
.disclosure > summary::after { content: "+"; flex: none; color: var(--muted); font-size: 20px; line-height: 1; }
.disclosure > summary:hover::after { color: var(--ink); }
.disclosure[open] > summary::after { content: "−"; }
.disclosure > summary:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
.disclosure-title { font-size: 16px; font-weight: 700; line-height: 1.5; }
.faq-item p { padding-bottom: 20px; color: var(--ink-2); }
/*
 * The closing call (home.ts finalSection): a dark band the width of the window, centred, flush
 * with the footer. The colour is one border-image fill pushed out to the window's edges: an
 * outset paints but adds nothing to the page's width, so nothing scrolls sideways at 390, and
 * one paint leaves no seam at the content's edges. Its bottom margin takes back <main>'s bottom
 * padding (64px; 48px on a phone).
 */
.final-band { margin: 64px 0 -64px; padding: 64px 0; display: flex; flex-direction: column; align-items: center; border-image: linear-gradient(var(--code-bg), var(--code-bg)) fill 0 / 0 / 0 100vmax; color: #ffffff; text-align: center; }
.final-band h2 { max-width: 760px; font-size: 36px; line-height: 1.25; text-wrap: balance; }
.final-lead { margin-top: 16px; max-width: 600px; color: var(--code-ink); font-size: 17px; text-wrap: pretty; }
.final-lead code { color: #ffffff; white-space: nowrap; }
.final-form { margin: 32px 0 0; }
.final-band .btn-primary { background: #ffffff; color: var(--ink); }
.final-band .btn-primary:hover { background: var(--code-ink); }
.final-band .btn:focus-visible { outline-color: #ffffff; }
.final-checks { margin: 16px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 24px; color: var(--code-ink); font-size: 14px; line-height: 1.5; }
.final-checks li, html:lang(ja) .final-checks li { display: flex; align-items: flex-start; gap: 8px; line-height: 1.5; white-space: nowrap; }
/* The hero's tick, lighter on the dark band so it keeps 3:1 against it. */
.final-band .term-check { color: var(--code-add); }
.final-note { margin-top: 12px; max-width: 600px; color: var(--code-muted); font-size: 13px; }
html:lang(ja) .final-band h2, html:lang(ja) .final-lead { word-break: auto-phrase; }

/*
 * Every public page's footer (home.ts homeFooter, research 11-09): the logo and its line across
 * the top, then Product, Docs, Guides, Blog and Compare while each has a post, Company and Legal;
 * © and the language switch on the bottom bar. A phone: two columns, the columns of long titles
 * (Guides, Blog, Compare) across both. A tablet: four. A computer: the five in one row
 * (foot-cols-5), or four to a row once Blog or Compare adds a sixth or seventh.
 */
.foot { border-top: 1px solid var(--line); background: var(--soft); padding: 48px 0 0; }
.foot-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: row dense; gap: 32px 16px; }
.foot-about { grid-column: 1 / -1; }
.foot-col-guides, .foot-col-blog, .foot-col-compare { grid-column: span 2; }
.foot-brand { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--ink); text-decoration: none; font-size: 18px; font-weight: 700; }
.foot-brand svg { width: 24px; height: 24px; flex: none; }
.foot-tagline { margin-top: 4px; max-width: 280px; color: var(--ink-2); font-size: 14px; line-height: 1.5; text-wrap: balance; }
.foot-title { display: flex; align-items: center; min-height: 24px; color: var(--ink); font-size: 14px; font-weight: 600; line-height: 1.5; }
.foot-links { margin: 8px 0 0; padding: 0; list-style: none; font-size: 14px; }
.foot-links li { display: flex; flex-wrap: wrap; align-items: center; gap: 0 4px; min-height: 44px; }
.foot-col .foot-links { margin-top: 4px; }
.foot-col .foot-links li { min-height: 0; }
/* A title on two lines keeps room above and below; one line stays the target's height. */
.foot-col .foot-links a { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 0; color: var(--ink-2); line-height: 1.5; text-decoration: none; text-wrap: balance; }
.foot-col .foot-links a:hover { color: var(--ink); text-decoration: underline; }
html:lang(ja) .foot-col, html:lang(ja) .foot-tagline { word-break: auto-phrase; }
.foot-bottom { margin-top: 40px; padding: 16px 0; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.foot-copy { color: var(--muted); font-size: 13px; line-height: 1.5; }
.foot-lang { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--bg); color: var(--ink); font-size: 14px; line-height: 1.5; text-decoration: none; }
.foot-lang:hover { border-color: var(--ink); }
/* The dashboard's footer: the three documents in one row, wrapping at 390. */
.foot-legal { padding: 16px 0 24px; }
.foot-legal .foot-links { margin: 0; display: flex; flex-wrap: wrap; gap: 0 24px; }

@media (min-width: 768px) {
	.block { margin-top: 64px; }
	.block > h2, .fit h2 { font-size: 24px; }
	/* One row, however many facts factKeys() shows. */
	.facts { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 24px; }
	.steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: start; }
	/* The arithmetic: the runner's name, then its sum and total on the same line. */
	/* One name column for every row, as wide as the longest name, so every sum starts at one x. */
	.calc-lines { display: grid; grid-template-columns: fit-content(288px) minmax(0, 1fr); column-gap: 16px; }
	.calc-line { grid-column: 1 / -1; grid-template-columns: subgrid; }
	.calc-line .vendor { padding-left: 28px; }
	.calc-line .vendor-icon { top: 0.5px; }
	.calc-panel { padding: 32px; }
	.calc-figures { column-gap: 24px; }
	.calc-arrow { width: 32px; height: 32px; }
	.calc-amount { font-size: 40px; }
	.calc-save { font-size: 24px; }
	.calc-flat { font-size: 22px; }
	.fit-grid { grid-template-columns: 1fr 1fr; }
	.scene { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: start; }
	.foot-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px 24px; }
}
@media (min-width: 1024px) {
	/* Widths so the longest word of each column fits whole (プライバシーポリシー, 140px at 14px). */
	.foot-grid.foot-cols-5 { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.2fr) minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1.1fr); }
	.foot-cols-5 .foot-col-guides { grid-column: auto; }
}
@media (min-width: 768px) and (pointer: fine) {
	.foot-links li { min-height: 32px; }
	.foot-col .foot-links a { min-height: 32px; padding: 4px 0; }
	.foot-col .foot-links { margin-top: 8px; }
	.foot-lang { min-height: 32px; }
	/* The logo's row and the column headings are each a 24px row, centred on one line. */
	.foot-brand { min-height: 24px; line-height: 24px; }
	.foot-brand svg { width: 20px; height: 20px; }
}
@media (max-width: 767px) {
	.final-band { margin: 48px 0 -48px; padding: 48px 0; }
	.final-band h2 { font-size: 26px; line-height: 1.3; }
	.final-lead { margin-top: 12px; font-size: 16px; }
	.final-form { margin-top: 24px; width: 100%; }
	.final-form .btn { width: 100%; }
	/* One per line, the ticks on one left edge, the list centred as a block. */
	.final-checks { flex-direction: column; align-items: flex-start; gap: 4px; width: fit-content; max-width: 100%; margin-inline: auto; }
	.final-checks li, html:lang(ja) .final-checks li { white-space: normal; text-align: left; }
}
@media (min-width: 900px) {
	/* The words get the room (the buttons and the terms each fit one line at 1280); the diff needs about 310px. */
	.hero { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 48px; align-items: start; }
	.hero h1 { font-size: 40px; line-height: 1.2; }
	.hero .lead { font-size: 17px; }
}

@media (max-width: 767px) {
	main { padding: 24px 0 48px; }
	.start, .start-form { width: 100%; justify-items: stretch; }
	.start-form .btn { width: 100%; }
	h1 { font-size: 24px; }
	.card { padding: 16px; }
	.btn-block { width: 100%; }
	.code { flex-wrap: wrap; }
	.wf-main, .wf-none { flex-direction: column; align-items: stretch; gap: 12px; }
	.wf-main .btn, .wf-none .btn, .repo-empty .btn, .repo-item > p > .btn, .repo-prompt .btn { width: 100%; }
	.repo-item .wf-list { padding-left: 12px; }
	.wf-job { grid-template-columns: 1fr; gap: 0; }
	.jobs thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
	.jobs, .jobs tbody { display: block; }
	.jobs tr { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; padding: 16px 0; border-bottom: 1px solid var(--line); }
	.jobs tr:first-child { padding-top: 0; }
	.jobs td { display: block; padding: 0; border: 0; min-width: 0; }
	/* A long reason ("Not run: the trial runs 4 vCPU jobs") wraps inside its cell instead of widening the page. */
	.jobs .pill { white-space: normal; border-radius: 12px; }
	/* In Japanese, that wrap falls between phrases, never inside a word (「公開リポジト／リ」, walk 11-09). */
	html:lang(ja) .jobs .pill { word-break: auto-phrase; }
	.jobs td.cell-repo { grid-column: 1 / -1; }
	/* The job list: the log link on the job's own line, and no row for a cell with nothing in it (audit 11-09). */
	.job-list td.cell-repo { grid-column: 1; grid-row: 1; }
	.job-list td.cell-log { grid-column: 2; grid-row: 1; justify-self: end; }
	.job-list td.cell-none { display: none; }
	.legal-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
	/* The header row is for screen readers here (each cell shows its label): one line, never a 32px column of one character a line (walk 11-09). */
	.legal-table thead th { white-space: nowrap; }
	.legal-table table, .legal-table tbody, .legal-table tr { display: block; }
	.legal-table tr { padding: 12px 0; border-bottom: 1px solid var(--line); }
	.legal-table th[scope="row"], .legal-table td { display: block; width: auto; padding: 0; border: 0; }
	.legal-table td { margin-top: 4px; }
	.legal-table td[data-label]::before { content: attr(data-label); display: block; color: var(--muted); font-size: 12px; line-height: 1.5; }
	.jobs td[data-label]::before { content: attr(data-label); display: block; color: var(--muted); font-size: 12px; line-height: 1.5; }
	.jobs tfoot { display: block; }
	.jobs tfoot tr { grid-template-columns: 1fr auto; align-items: baseline; padding: 12px 0; }
	.jobs tfoot td.cell-repo { grid-column: auto; }
	.jobs tfoot td:empty { display: none; }
	.jobs tfoot td[data-label]::before { content: none; }
	/* The cost tool's total has two figures: each keeps its column's label, as the rows above. */
	.jobs.quote-runners tfoot tr { grid-template-columns: 1fr 1fr; align-items: start; }
	.jobs.quote-runners tfoot td.cell-repo { grid-column: 1 / -1; }
	.jobs.quote-runners tfoot td[data-label]::before { content: attr(data-label); }
}
@media (min-width: 768px) {
	.wrap { padding: 0 32px; }
	.plans { grid-template-columns: repeat(3, 1fr); gap: 16px; }
	.status-row { flex-direction: row; align-items: center; justify-content: space-between; }
	.field-row { flex-direction: row; }
	.field-row .input-wrap { flex: 1; }
	.wf { flex-direction: row; align-items: center; justify-content: space-between; }
	.repo-item .wf { flex-direction: column; align-items: stretch; }
}

/* The cost tool (tool-cost.ts) and the guides (guides.ts). */
.tool-steps { margin: 16px 0 0; padding-left: 24px; }
.tool-steps li + li { margin-top: 8px; }
.tool-start .start-form { display: grid; gap: 8px; justify-items: start; }
.tool-what { margin-top: 12px; max-width: 640px; }
html:lang(ja) .tool-what, html:lang(ja) .tool-csv .quote-trial, html:lang(ja) .guide-cta p, html:lang(ja) .tool-csv .drop-text, html:lang(ja) .tool-minutes, html:lang(ja) .tool-csv .quote-ours-what { word-break: auto-phrase; }
.tool-csv .drop-zone { display: grid; gap: 12px; justify-items: center; padding: 24px 16px; border: 2px dashed var(--line-strong); border-radius: 12px; background: var(--soft); text-align: center; }
.tool-csv .drop-zone.drop-over { border-color: var(--link); background: var(--bg); }
.tool-csv .drop-zone .drop-text { font-weight: 600; font-size: 16px; cursor: pointer; }
.tool-csv input[type="file"] { display: block; width: 100%; max-width: 360px; min-height: 44px; font: inherit; font-size: 14px; }
.tool-csv input[type="file"]::file-selector-button { min-height: 44px; margin-right: 12px; padding: 0 16px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--bg); color: var(--ink); font: inherit; font-weight: 600; cursor: pointer; }
.tool-csv .quote-trial { font-weight: 600; }
.tool-csv .csv-gate .start-form { margin-top: 12px; }
.tool-csv .quote-big { font-size: 22px; font-weight: 700; line-height: 1.3; }
/*
 * Whose line it is (founder, 11-09): GitHub's mark before GitHub's bill, Skipbox's before its price,
 * as on the home calculator; decoration, so empty content. Relative to /static/, the stylesheet's folder.
 */
.quote-big::before { content: ""; display: inline-block; width: 20px; height: 20px; margin-right: 8px; vertical-align: -2px; background: currentColor; -webkit-mask: url("../github-mark.svg") center / contain no-repeat; mask: url("../github-mark.svg") center / contain no-repeat; }
.quote-big.quote-ours::before { background: url("../favicon.svg") center / contain no-repeat; -webkit-mask: none; mask: none; }
@media (max-width: 767px) {
	.quote-big::before { width: 18px; height: 18px; }
}
/* GitHub's bill and Skipbox's price are two answers, not one block: a clear gap between them. */
.tool-csv .quote-mix > .quote-big + .quote-big { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.tool-csv .quote-ours-what { color: var(--muted); font-size: 14px; }
.tool-start .note + .note { margin-top: 8px; }
.tool-gets > h2 + * { margin-top: 16px; }
.tool-csv .notice .start-form { margin-top: 12px; }
.tool-result > * + * { margin-top: 16px; }
.table-wrap { max-width: 100%; }
.breakdown { margin-top: 8px; }
.approval { break-inside: avoid; }
.approval dl { display: grid; gap: 0; margin: 0; }
.approval .approval-row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.approval dt { color: var(--muted); font-weight: 600; }
.approval dd { margin: 0; overflow-wrap: anywhere; }
.approval .approval-total { font-weight: 700; }
.md-code { margin: 12px 0 0; padding: 16px; overflow-x: auto; border-radius: 8px; background: var(--code-bg); color: var(--code-ink); font-size: 14px; }
.guide { max-width: 760px; }
.guide .updated { margin-top: 8px; }
.guide h2 { margin-top: 32px; }
.guide h3 { margin-top: 24px; }
.guide p, .guide ol, .guide ul { margin-top: 12px; }
.guide ol, .guide ul { padding-left: 24px; }
.guide li + li { margin-top: 8px; }
.guide a { overflow-wrap: anywhere; }
.guide .guide-cta { margin-top: 24px; padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--soft); }
.guide .guide-cta > p:first-child { margin-top: 0; }
.guide .guide-cta-title { font-weight: 600; }
.guide .guide-cta .btn { margin-top: 4px; }
.guide .guide-cta + h2 { margin-top: 40px; }
.guide .guide-cta code { white-space: nowrap; }
.guide .guide-cta .start-form { display: grid; gap: 8px; justify-items: start; margin-top: 4px; }
.guides-index .guide-list { margin-top: 24px; padding: 0; list-style: none; }
.guides-index .guide-list li { padding: 16px 0; border-top: 1px solid var(--line); }
.guides-index .guide-list li + li { margin-top: 0; }
.guides-index .guide-list p { margin-top: 4px; }
.guides-index .guide-link { font-size: 18px; font-weight: 600; line-height: 1.4; }
/* A quiet button that reads as a link: the trial under an article's first answer (guides.ts). */
.linkbtn { display: inline-flex; align-items: center; min-height: 44px; padding: 0; border: 0; background: none; color: var(--link); font: inherit; font-weight: 600; line-height: 1.5; text-align: left; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.linkbtn:hover { color: var(--ink); }
.guide .guide-cta-trial { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.guide .guide-cta-trial p { margin-top: 0; }
/* The article's end: related pages, then the trial band (the home page's last band). */
.related { margin-top: 48px; max-width: 760px; }
.related ul { margin: 16px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.related a { display: flex; align-items: center; min-height: 48px; padding: 8px 16px; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); text-decoration: none; line-height: 1.4; }
.related a:hover { border-color: var(--line-strong); background: var(--soft); }
.final-band .btn-secondary { background: transparent; color: #ffffff; border-color: var(--code-muted); }
.final-band .btn-secondary:hover { background: var(--code-line); }

/*
 * docs.skipbox.dev (docs.ts, research 11-09): the page list on the left, the page at most 720px,
 * "On this page" on the right from 1200px. Under 900px the list is the Pages menu above the page.
 */
.docs .wrap { max-width: 1280px; }
.docs main { padding-top: 24px; }
.docs-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
.docs-side, .docs-toc { display: none; }
.docs-pages { border: 1px solid var(--line); border-radius: 12px; }
.docs-pages > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding: 0 16px; cursor: pointer; list-style: none; font-size: 14px; }
.docs-pages > summary::-webkit-details-marker { display: none; }
.docs-pages > summary span { color: var(--muted); }
.docs-pages > summary strong { font-weight: 600; text-align: right; }
.docs-pages[open] > summary { border-bottom: 1px solid var(--line); }
.docs-pages .docs-nav { padding: 8px; }
.docs-group { margin: 24px 0 0; padding: 0 12px; color: var(--muted); font-size: 13px; font-weight: 600; line-height: 1.5; }
.docs-list { margin: 4px 0 0; padding: 0; list-style: none; }
.docs-nav a { display: flex; align-items: center; min-height: 44px; padding: 8px 12px; border-radius: 8px; color: var(--ink-2); font-size: 14px; line-height: 1.4; text-decoration: none; }
.docs-nav a:hover { background: var(--soft); color: var(--ink); }
.docs-nav a[aria-current="page"] { background: var(--soft); color: var(--ink); font-weight: 600; }
.docs-filter { margin: 0 0 8px; }
.docs-filter input { width: 100%; min-height: 40px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--bg); color: var(--ink); font: inherit; font-size: 14px; }
.docs-empty { padding: 8px 12px; }
.doc { min-width: 0; max-width: 720px; }
.docs-crumb { color: var(--muted); font-size: 14px; font-weight: 600; }
.docs-crumb + h1 { margin-top: 4px; }
.doc-tools { margin-top: 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; font-size: 14px; }
.doc-md-link { display: inline-flex; align-items: center; min-height: 44px; }
.doc-body h2 { margin-top: 40px; scroll-margin-top: 16px; }
.doc-body h3 { margin-top: 24px; scroll-margin-top: 16px; }
.doc-body p, .doc-body ol, .doc-body ul, .doc-body .legal-table { margin-top: 12px; }
.doc-body ol, .doc-body ul { padding-left: 24px; }
.doc-body li + li { margin-top: 8px; }
.doc-body a { overflow-wrap: anywhere; }
.doc-body code { font-size: 0.9em; }
.doc-body .md-code code { font-size: inherit; }
.doc-code { position: relative; }
.doc-code .md-code { padding-right: 88px; }
.doc-code-copy { position: absolute; top: 8px; right: 8px; min-height: 32px; padding: 0 12px; border: 1px solid var(--code-muted); border-radius: 6px; background: var(--code-line); color: var(--code-ink); font: inherit; font-size: 13px; cursor: pointer; }
.doc-code-copy:hover { color: #ffffff; border-color: var(--code-ink); }
.doc-code-copy:focus-visible { outline: 2px solid #ffffff; outline-offset: 2px; }
.doc .updated { margin-top: 40px; }
.docs-pager { margin-top: 24px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.docs-pager a { display: flex; flex-direction: column; gap: 4px; padding: 16px; border: 1px solid var(--line); border-radius: 12px; color: var(--ink); text-decoration: none; }
.docs-pager a:hover { border-color: var(--line-strong); background: var(--soft); }
.docs-pager span { color: var(--muted); font-size: 13px; }
.docs-pager strong { color: var(--link); font-weight: 600; line-height: 1.4; }
.docs-pager-next { grid-column: 2; text-align: right; }
.docs-toc-title { color: var(--ink); font-size: 13px; font-weight: 600; }
.docs-toc ul { margin: 8px 0 0; padding: 0; list-style: none; border-left: 1px solid var(--line); }
.docs-toc a { display: block; padding: 4px 12px; color: var(--muted); font-size: 13px; line-height: 1.5; text-decoration: none; }
.docs-toc a:hover { color: var(--ink); }
.docs-start { margin-top: 24px; }
.docs-home-group { margin-top: 40px; }
.docs-cards { margin: 16px 0 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.docs-cards a { display: flex; flex-direction: column; gap: 4px; height: 100%; padding: 16px; border: 1px solid var(--line); border-radius: 12px; color: var(--ink); text-decoration: none; }
.docs-cards a:hover { border-color: var(--line-strong); background: var(--soft); }
.docs-cards span { color: var(--muted); font-size: 14px; line-height: 1.5; }
html:lang(ja) .docs-cards span, html:lang(ja) .doc-body p, html:lang(ja) .doc .lead { word-break: auto-phrase; }
@media (min-width: 600px) {
	.docs-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 599px) {
	.docs-pager { grid-template-columns: minmax(0, 1fr); }
	.docs-pager > span:empty { display: none; }
	.docs-pager-next { grid-column: auto; }
}
@media (min-width: 900px) {
	.docs main { padding-top: 32px; }
	.docs-layout { grid-template-columns: 232px minmax(0, 720px); gap: 48px; }
	.docs-pages { display: none; }
	.docs-side { display: block; position: sticky; top: 16px; align-self: start; max-height: calc(100vh - 32px); overflow-y: auto; padding-bottom: 16px; }
	.docs-side .docs-group:first-of-type { margin-top: 16px; }
}
@media (min-width: 900px) and (pointer: fine) {
	.docs-nav a { min-height: 34px; padding: 6px 12px; }
}
@media (min-width: 1200px) {
	.docs-layout { grid-template-columns: 232px minmax(0, 720px) minmax(0, 200px); }
	.docs-toc { display: block; position: sticky; top: 16px; align-self: start; }
}
@media (max-width: 719px) {
	.approval .approval-row { grid-template-columns: 1fr; gap: 4px; }
	/* The sign-in label is the searcher's own words, so on a phone it wraps by design: balanced, by phrase, with room. */
	.tool-start .start-form .btn, .tool-csv .start-form .btn, .guide-cta .start-form .btn { width: 100%; padding: 12px 16px; white-space: normal; text-wrap: balance; word-break: auto-phrase; }
}
@media print {
	.top, .foot, .no-print, .print-hide { display: none !important; }
	main { padding: 0; }
	.approval { border: 0; padding: 0; }
}