/* KrazyToGo marketing — go.dev-inspired light Go theme */
:root {
--bg: #f5f9fc;
--bg-alt: #e8f1f6;
--bg-elevated: #fbfdfe;
--bg-card: #ffffff;
--bg-code: #eef4f8;
--border: #d5e0e8;
--border-strong: #c0ced9;
--text: #1a2332;
--text-muted: #4a5d6e;
--text-dim: #6b7c8c;
--go-blue: #00add8;
--go-blue-dark: #007d9c;
--go-aqua: #00a29c;
--go-light: #5dc9e2;
--accent: var(--go-blue);
--accent-dim: rgba(0, 173, 216, 0.1);
--accent-ink: #ffffff;
--coffee: #ce3262;
--coffee-dim: rgba(206, 50, 98, 0.1);
--heading: "Work Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
--body: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;
--mono: "Roboto Mono", "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
--radius: 8px;
--shadow: 0 1px 2px rgba(15, 40, 60, 0.04), 0 4px 16px rgba(15, 40, 60, 0.06);
/* Shared page gutters — hero and body use the same side margins */
--gutter: clamp(1.5rem, 5vw, 3rem);
--content: 1100px;
--wrap: min(var(--content), calc(100% - 2 * var(--gutter)));
--header-h: 4rem;
/* Vertical rhythm — shared section / card / grid spacing */
--space-2: 0.65rem;
--space-3: 1rem;
--space-4: 1.35rem;
--space-5: 1.75rem;
--space-section: clamp(3.25rem, 6.5vw, 5rem);
--space-head: 2rem;
--card-pad-y: 1.25rem;
--card-pad-x: 1.35rem;
--card-pad-b: 1.4rem;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
color-scheme: light;
scroll-behavior: smooth;
scroll-padding-top: calc(var(--header-h) + 1rem);
}
/* Sticky header offset for in-page anchors (pairs with scroll-padding-top) */
main section[id],
#main {
  scroll-margin-top: calc(var(--header-h, 4.5rem) + 0.75rem);
}
html[data-theme="dark"] {
  --bg: #0f1c28;
  --bg-alt: #1a2d3d;
  --bg-elevated: #1c3142;
  --bg-card: #1a2d3d;
  --bg-code: #0c1822;
  --border: #2a4050;
  --border-strong: #3a5568;
  --text: #dce8f0;
  --text-muted: #9db0c0;
  --text-dim: #7a8f9e;
  --go-blue: #3ec6e0;
  --go-blue-dark: #5dc9e2;
  --accent-dim: rgba(62, 198, 224, 0.14);
  --shadow: 0 1px 2px rgba(5, 16, 28, 0.35), 0 4px 18px rgba(5, 16, 28, 0.4);
  color-scheme: dark;
}

body {
margin: 0;
min-height: 100vh;
font-family: var(--body);
font-weight: 400;
color: var(--text);
background: var(--bg);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
img,
svg {
display: block;
max-width: 100%;
}
a {
color: var(--go-blue-dark);
text-decoration-thickness: 1px;
text-underline-offset: 0.18em;
}
a:hover {
color: var(--go-blue);
}
code {
font-family: var(--mono);
font-size: 0.88em;
font-weight: 500;
color: var(--go-blue-dark);
background: var(--accent-dim);
padding: 0.12em 0.4em;
border-radius: 4px;
}
pre code {
background: none;
padding: 0;
color: inherit;
font-size: 0.86rem;
}
strong {
font-weight: 700;
color: var(--text);
}
.skip-link {
position: absolute;
inset-inline-start: 1rem;
top: -100px;
z-index: 100;
padding: 0.6rem 1rem;
background: var(--go-blue);
color: #fff;
font-weight: 700;
font-family: var(--heading);
border-radius: 6px;
}
.skip-link:focus {
top: 1rem;
}
.noise {
display: none;
}
.grid-bg {
pointer-events: none;
position: fixed;
inset: 0;
z-index: 0;
background:
radial-gradient(ellipse 80% 50% at 50% -10%, rgba(0, 173, 216, 0.08), transparent 60%),
radial-gradient(ellipse 40% 30% at 90% 20%, rgba(0, 162, 156, 0.05), transparent 50%);
}
html[data-theme="dark"] .grid-bg {
background:
radial-gradient(ellipse 80% 50% at 50% -10%, rgba(62, 198, 224, 0.14), transparent 60%),
radial-gradient(ellipse 40% 30% at 90% 20%, rgba(0, 162, 156, 0.08), transparent 50%);
}
.wrap {
width: var(--wrap);
margin-inline: auto;
position: relative;
z-index: 1;
}
.site-header {
position: sticky;
top: 0;
z-index: 40;
height: var(--header-h);
border-bottom: 1px solid var(--border);
background: color-mix(in srgb, var(--bg) 92%, transparent);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
.header-inner {
height: 100%;
display: flex;
align-items: center;
gap: 1.25rem;
}
.logo {
display: inline-flex;
align-items: center;
gap: 0.55rem;
color: var(--text);
text-decoration: none;
font-family: var(--heading);
font-weight: 700;
letter-spacing: -0.02em;
font-size: 1.05rem;
}
.logo:hover {
color: var(--text);
}
.logo-mark {
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.55rem;
height: 1.55rem;
border-radius: 5px;
background: transparent;
color: #fff;
font-size: 0.65rem;
font-weight: 700;
font-family: var(--heading);
line-height: 1;
letter-spacing: -0.04em;
overflow: hidden;
flex-shrink: 0;
}
.logo-mark img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
}
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.nav-toggle {
margin-inline-start: auto;
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.5rem;
height: 2.5rem;
border: 1px solid var(--border-strong);
border-radius: 8px;
background: var(--bg);
color: var(--text);
cursor: pointer;
}
.nav-toggle:hover,
.nav-toggle:focus-visible {
border-color: var(--go-blue);
outline: none;
}
.nav-toggle-bars,
.nav-toggle-bars::before,
.nav-toggle-bars::after {
display: block;
width: 1.05rem;
height: 2px;
background: currentColor;
border-radius: 1px;
position: relative;
transition: transform 0.15s ease, opacity 0.15s ease;
}
.nav-toggle-bars::before,
.nav-toggle-bars::after {
content: "";
position: absolute;
left: 0;
}
.nav-toggle-bars::before { top: -6px; }
.nav-toggle-bars::after { top: 6px; }
.site-header.is-open .nav-toggle-bars {
background: transparent;
}
.site-header.is-open .nav-toggle-bars::before {
top: 0;
transform: rotate(45deg);
}
.site-header.is-open .nav-toggle-bars::after {
top: 0;
transform: rotate(-45deg);
}
.nav {
display: none;
gap: 0.35rem;
margin-left: auto;
margin-right: 0.5rem;
}
.nav a {
color: var(--text-muted);
text-decoration: none;
font-size: 0.92rem;
font-weight: 500;
font-family: var(--heading);
}
.nav a:hover,
.nav a:focus-visible {
color: var(--go-blue-dark);
}
.nav-coffee {
color: var(--coffee) !important;
}
.header-gh {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  margin-inline-start: 0.5rem;
  border-radius: 8px;
  border: 1px solid var(--border-strong);
  background: var(--bg);
  color: var(--text);
  text-decoration: none;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.header-gh:hover {
  border-color: var(--go-blue);
  color: var(--go-blue-dark);
  background: var(--accent-dim);
  text-decoration: none;
}
.header-gh svg {
  display: block;
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
}
/* Theme toggle — compact segmented control */
.theme-toggle {
  display: inline-flex;
  align-items: stretch;
  margin-inline-start: 0.35rem;
  height: 2.5rem;
  padding: 2px;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  background: var(--bg);
  box-sizing: border-box;
}
.theme-toggle-option {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  cursor: pointer;
  user-select: none;
}
.theme-toggle-option input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  pointer-events: none;
}
.theme-toggle-option span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 0 0.55rem;
  border-radius: 6px;
  font-family: var(--heading);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text-muted);
  line-height: 1;
  transition: background 0.15s ease, color 0.15s ease;
}
.theme-toggle-option:hover span {
  color: var(--text);
}
.theme-toggle-option input:checked + span {
  background: var(--accent-dim);
  color: var(--go-blue-dark);
}
.theme-toggle-option input:focus-visible + span {
  outline: 2px solid var(--go-blue);
  outline-offset: 1px;
}
@media (max-width: 859px) {
  .theme-toggle {
    margin-inline-start: 0.25rem;
  }
  .theme-toggle-option span {
    padding: 0 0.45rem;
    font-size: 0.7rem;
  }
}

@media (max-width: 859px) {
.site-header {
height: auto;
min-height: var(--header-h);
}
.header-inner {
flex-wrap: wrap;
padding-block: 0.55rem;
}
.site-header.is-open .nav {
display: flex;
flex-direction: column;
width: 100%;
order: 4;
margin: 0.35rem 0 0;
padding: 0.65rem;
border: 1px solid var(--border);
border-radius: 8px;
background: var(--bg);
}
.site-header.is-open .nav a {
padding: 0.65rem 0.75rem;
border-radius: 6px;
}
.site-header.is-open .nav a:hover,
.site-header.is-open .nav a:focus-visible {
background: var(--accent-dim);
}
}
@media (min-width: 860px) {
.nav-toggle {
display: none;
}
.nav {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 0.85rem 1.1rem;
}
.header-gh {
margin-inline-start: 0;
}
.header-inner {
gap: 0.85rem;
}
}
@media (min-width: 860px) and (max-width: 1099px) {
.site-header {
height: auto;
min-height: var(--header-h);
}
.header-inner {
flex-wrap: wrap;
align-items: center;
padding-block: 0.6rem;
gap: 0.65rem 0.75rem;
}
.nav {
gap: 0.55rem 0.8rem;
margin-right: 0.25rem;
}
.nav a {
font-size: 0.88rem;
}
.header-gh {
margin-inline-start: 0;
}
.theme-toggle {
margin-inline-start: 0.1rem;
}
}
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.7rem 1.2rem;
border-radius: var(--radius);
font-family: var(--heading);
font-weight: 600;
font-size: 0.95rem;
letter-spacing: -0.01em;
text-decoration: none;
border: 1px solid transparent;
cursor: pointer;
transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.btn:hover {
text-decoration: none;
}
.btn:focus-visible {
outline: 2px solid var(--go-blue);
outline-offset: 3px;
}
.btn-sm {
padding: 0.45rem 0.9rem;
font-size: 0.85rem;
}
.btn-lg {
padding: 0.95rem 1.45rem;
font-size: 1.05rem;
}
.btn-primary {
background: var(--go-blue);
color: #fff;
border-color: var(--go-blue);
}
.btn-primary:hover {
background: var(--go-blue-dark);
border-color: var(--go-blue-dark);
color: #fff;
}
.btn-ghost {
background: transparent;
color: var(--text);
border-color: var(--border-strong);
}
.btn-ghost:hover {
border-color: var(--go-blue);
color: var(--go-blue-dark);
background: var(--accent-dim);
}
.btn-github {
  background: #24292f;
  color: #fff;
  border-color: #24292f;
  gap: 0.55rem;
}
.btn-github:hover {
  background: #32383f;
  border-color: #32383f;
  color: #fff;
}
.btn-github svg {
  width: 1.15rem;
  height: 1.15rem;
  flex-shrink: 0;
  fill: currentColor;
}
.btn-coffee {
background: var(--coffee);
color: #fff;
border-color: var(--coffee);
}
.btn-coffee:hover {
background: #b02854;
border-color: #b02854;
color: #fff;
}
.btn-arrow {
font-family: var(--mono);
font-weight: 600;
}
.hero {
padding: clamp(3.25rem, 7vw, 5.5rem) 0 clamp(3.5rem, 8vw, 5.75rem);
position: relative;
}
.hero-inner {
max-width: none;
}
.hero h1 {
margin: 0 0 1.25rem;
font-family: var(--heading);
font-size: clamp(2.4rem, 6vw, 3.75rem);
line-height: 1.08;
letter-spacing: -0.035em;
font-weight: 700;
color: var(--text);
}
.accent {
color: var(--go-blue);
}
.lede {
margin: 0 0 1.65rem;
font-size: clamp(1.05rem, 2.2vw, 1.2rem);
color: var(--text-muted);
max-width: 42rem;
font-weight: 400;
}
.lede strong {
color: var(--text);
font-weight: 500;
}
.hero-ctas {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
margin-bottom: 1.35rem;
}
.hero-meta {
margin: 0;
font-family: var(--mono);
font-size: 0.82rem;
color: var(--text-dim);
line-height: 1.6;
}
.hero-meta code {
background: none;
padding: 0;
color: var(--text-dim);
font-size: inherit;
}
.section {
padding: var(--space-section) 0;
border-top: 1px solid var(--border);
}
.section-alt {
background: var(--bg-alt);
margin-inline: var(--gutter);
border-radius: 12px;
border: 1px solid var(--border);
}
.section-alt + .section,
.section + .section-alt,
.section-alt + .section-alt {
border-top: none;
}
.section-alt > .wrap,
.support > .wrap {
width: min(var(--content), 100%);
max-width: 100%;
margin-inline: auto;
padding-inline: clamp(1.15rem, 3.5vw, 2rem);
box-sizing: border-box;
}
.section-head {
max-width: 40rem;
margin-bottom: var(--space-head);
}
.section-label {
margin: 0 0 0.65rem;
font-family: var(--mono);
font-size: 0.75rem;
font-weight: 500;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--go-blue);
}
.section-head h2,
.support-copy h2 {
margin: 0 0 0.85rem;
font-family: var(--heading);
font-size: clamp(1.75rem, 3.5vw, 2.35rem);
line-height: 1.15;
letter-spacing: -0.03em;
font-weight: 700;
}
.section-sub {
margin: 0;
color: var(--text-muted);
font-size: 1.05rem;
}
.why-grid {
display: grid;
gap: var(--space-4);
grid-template-columns: 1fr;
}
@media (min-width: 1100px) {
.why-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
.card {
min-width: 0;
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 0;
overflow: hidden;
box-shadow: var(--shadow);
display: flex;
flex-direction: column;
}
.why-card-media {
position: relative;
aspect-ratio: 1168 / 784;
background: var(--bg-alt);
border-bottom: 1px solid var(--border);
overflow: hidden;
}
.why-card-img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}


.why-card-copy {
padding: var(--card-pad-y) var(--card-pad-x) var(--card-pad-b);
flex: 1;
display: flex;
flex-direction: column;
}
.card h3 {
margin: 0 0 0.55rem;
font-family: var(--heading);
font-size: 1.1rem;
letter-spacing: -0.02em;
font-weight: 600;
}
.card p {
margin: 0;
color: var(--text-muted);
font-size: 0.96rem;
}
.feature-list {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 0;
border: 1px solid var(--border);
border-radius: var(--radius);
overflow: hidden;
background: var(--bg);
}
.feature-list li {
display: grid;
grid-template-columns: auto 1fr;
gap: var(--space-3);
padding: var(--card-pad-y) var(--card-pad-x);
border-bottom: 1px solid var(--border);
}
.feature-list li:last-child {
border-bottom: none;
}
@media (min-width: 800px) {
.feature-list {
grid-template-columns: 1fr 1fr;
}
.feature-list li:nth-child(odd) {
border-inline-end: 1px solid var(--border);
}
.feature-list li:nth-last-child(-n + 2) {
border-bottom: none;
}
}
.feature-icon {
font-family: var(--mono);
font-size: 0.8rem;
font-weight: 500;
color: var(--go-blue);
opacity: 0.9;
padding-top: 0.2rem;
}
.feature-list h3 {
margin: 0 0 0.35rem;
font-family: var(--heading);
font-size: 1.05rem;
letter-spacing: -0.02em;
font-weight: 600;
}
.feature-list p {
margin: 0;
color: var(--text-muted);
font-size: 0.95rem;
}
.code-blocks {
display: grid;
gap: 1rem;
margin-bottom: 1.75rem;
}
.code-panel {
background: var(--bg-code);
border: 1px solid var(--border);
border-radius: var(--radius);
overflow: hidden;
}
.code-panel-tight {
margin-top: 1rem;
}
.code-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 0.55rem 0.85rem;
border-bottom: 1px solid var(--border);
background: var(--bg-alt);
}
.code-title {
font-family: var(--mono);
font-size: 0.72rem;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--text-dim);
}
.copy-btn {
font-family: var(--mono);
font-size: 0.72rem;
font-weight: 500;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--go-blue-dark);
background: var(--bg-elevated);
border: 1px solid var(--border-strong);
border-radius: 8px;
padding: 0.3rem 0.55rem;
cursor: pointer;
}
.copy-btn:hover,
.copy-btn:focus-visible {
border-color: var(--go-blue);
color: var(--go-blue);
}
.copy-btn:focus-visible {
outline: 2px solid var(--go-blue);
outline-offset: 2px;
}
.copy-btn.copied {
color: #fff;
background: var(--go-blue);
border-color: var(--go-blue);
}
.code-panel pre {
margin: 0;
padding: 1rem 1.1rem 1.15rem;
overflow-x: auto;
font-family: var(--mono);
font-size: 0.86rem;
line-height: 1.55;
color: var(--text);
}
.flag-table {
display: grid;
gap: 0.75rem;
margin: 0;
}
@media (min-width: 720px) {
.flag-table {
grid-template-columns: repeat(3, 1fr);
}
}
.flag-table > div {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 1rem 1.1rem;
}
.flag-table dt {
margin: 0 0 0.35rem;
}
.flag-table dd {
margin: 0;
color: var(--text-muted);
font-size: 0.92rem;
}
.deploy-grid {
display: grid;
gap: var(--space-4);
grid-template-columns: 1fr;
}
/* Three-up only on wide desktops — landscape tablets stay stacked. */
@media (min-width: 1280px) {
.deploy-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
.deploy-card {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: var(--card-pad-y) var(--card-pad-x) var(--card-pad-b);
display: flex;
flex-direction: column;
box-shadow: var(--shadow);
min-width: 0;
max-width: 100%;
}
.deploy-card .code-panel {
min-width: 0;
max-width: 100%;
}
.deploy-card .code-panel pre {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
white-space: pre; /* keep long image refs / commands intact; scroll mid-token instead of wrapping */
}
.deploy-card .code-panel code {
white-space: inherit;
}
.deploy-img-ref,
.deploy-card ul code {
display: inline-block;
max-width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
white-space: nowrap;
vertical-align: bottom;
word-break: normal;
overflow-wrap: normal;
}
.deploy-card ul {
overflow-wrap: break-word; /* prose only; code uses nowrap + scroll above */
}
.deploy-card > p,
.deploy-card > .deploy-purpose {
overflow-wrap: anywhere;
}
.deploy-card-head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0 0 0.65rem;
}
.deploy-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.35rem;
  height: 2.35rem;
  margin: 0;
  flex-shrink: 0;
  padding: 0.3rem;
  background: var(--bg-elevated);
  border-radius: 10px;
  border: 1px solid var(--border);
  box-sizing: border-box;
}
.deploy-icon img {
  display: block;
  width: 1.45rem;
  height: 1.45rem;
  object-fit: contain;
  image-rendering: auto;
}
.deploy-icon img[src*="docker"] {
  width: 1.62rem;
  height: 1.2rem;
  transform: translateY(0.5px);
}
.deploy-icon img[src*="podman"] {
  width: 1.41rem;
  height: 1.41rem;
}
.deploy-icon img[src*="kubernetes"] {
  width: 1.37rem;
  height: 1.37rem;
}
.deploy-card-head h3 {
margin: 0;
min-width: 0;
font-family: var(--heading);
font-size: 1.3rem;
letter-spacing: -0.03em;
font-weight: 700;
}
.deploy-card > p {
margin: 0 0 0.55rem;
color: var(--text-muted);
font-size: 0.96rem;
}
.deploy-card > .deploy-purpose {
margin: 0 0 1rem;
color: var(--text-muted);
font-size: 0.9rem;
line-height: 1.45;
flex: 1;
}
.quickstart-closer {
margin-top: 1.35rem;
max-width: none;
width: 100%;
}

/* Quick start — OS segmented control, figure, accordion */
.qs-os-toggle {
  display: flex;
  align-items: stretch;
  width: fit-content;
  margin: 0 0 1.35rem;
  height: 2.5rem;
  padding: 2px;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  background: var(--bg);
  box-sizing: border-box;
}
.qs-os-option {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  cursor: pointer;
  user-select: none;
}
.qs-os-option input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  pointer-events: none;
}
.qs-os-option .qs-os-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  height: 100%;
  padding: 0 0.85rem;
  border-radius: 6px;
  font-family: var(--heading);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text-muted);
  line-height: 1;
  transition: background 0.15s ease, color 0.15s ease;
}
.qs-os-icon {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  display: block;
  opacity: 0.88;
}
.qs-os-option input:checked + .qs-os-label .qs-os-icon {
  opacity: 1;
}
.qs-os-option:hover .qs-os-label {
  color: var(--text);
}
.qs-os-option input:checked + .qs-os-label {
  background: var(--accent-dim);
  color: var(--go-blue-dark);
}
.qs-os-option input:focus-visible + .qs-os-label {
  outline: 2px solid var(--go-blue);
  outline-offset: 1px;
}
.qs-figure {
  margin: 0 0 1.35rem;
  max-width: min(100%, 36rem);
}

/* Quick Start figure cards: capped terminal + blurb (not full wrap banners) */
.qs-figure-card {
  max-width: min(100%, 36rem);
  width: 100%;
  margin: 0 0 1.15rem;
  padding-bottom: 0.85rem;
  overflow: visible;
}
.qs-figure-card > .qs-figure {
  margin: 0;
  max-width: 100%;
}
.qs-figure-blurb {
  margin: 0.75rem 0 0;
  max-width: 100%;
  color: var(--text-muted);
  font-size: 0.95rem;
  line-height: 1.5;
}
.qs-kontainer-path .qs-kontainer-beat {
  margin: 0 0 1.1rem;
  max-width: min(100%, 36rem);
  font-size: 0.95rem;
}
.qs-kontainer-path .qs-figure-card {
  margin-bottom: 1.5rem;
}

.qs-figure.hero-terminal {
  overflow: visible;
  margin-bottom: 0;
}
.qs-figure-card {
  overflow: visible;
  padding-bottom: 0.85rem; /* room for overhanging badge */
}
.qs-figure-blurb {
  margin-top: 0.35rem;
}

.qs-figure .hero-terminal-body {
  border-radius: 0 0 10px 10px;
}
.qs-go-note {
  margin: 0;
  padding: 0.65rem 1.1rem 0.9rem;
  color: var(--text-muted);
  font-size: 0.88rem;
  line-height: 1.45;
  border-top: 1px solid var(--border);
  background: var(--bg-alt);
}
.qs-go-note code {
  font-size: 0.84em;
}
.qs-kontainer-beat {
  margin: 0;
  max-width: min(65rem, 100%);
  color: var(--text-muted);
  font-size: 0.98rem;
  line-height: 1.55;
}
.qs-kontainer-beat a {
  color: var(--go-blue-dark);
  font-weight: 600;
  text-decoration: none;
}
.qs-kontainer-beat a:hover,
.qs-kontainer-beat a:focus-visible {
  text-decoration: underline;
}
.qs-advanced {
  margin-top: 1.5rem;
  display: grid;
  gap: 0.65rem;
  width: 100%;
  max-width: none;
}
.qs-adv-item {
  padding: 0;
  border-radius: var(--radius);
  background: var(--bg-card);
  border: 1px solid var(--border);
  overflow: hidden;
}
.qs-adv-item summary {
  cursor: pointer;
  list-style: none;
  font-family: var(--heading);
  font-weight: 600;
  font-size: 0.98rem;
  color: var(--text-muted);
  padding: 0.85rem 1.1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.qs-adv-item summary::-webkit-details-marker {
  display: none;
}
.qs-adv-item summary::after {
  content: "+";
  font-family: var(--mono);
  font-weight: 500;
  font-size: 1rem;
  color: var(--go-blue-dark);
  line-height: 1;
  flex-shrink: 0;
}
.qs-adv-item[open] summary::after {
  content: "\2212";
}
.qs-adv-item[open] summary {
  color: var(--text);
}
.qs-adv-item summary:hover,
.qs-adv-item summary:focus-visible {
  color: var(--go-blue-dark);
  outline: none;
}
.qs-adv-item summary:focus-visible {
  box-shadow: inset 0 0 0 2px var(--go-blue);
}
.qs-adv-note {
  margin: 0;
  padding: 0 1.1rem 0.55rem;
  color: var(--text-muted);
  font-size: 0.9rem;
  line-height: 1.45;
}
.qs-adv-item .code-panel-tight {
  margin: 0 1.1rem 1.1rem;
}
.qs-first-path {
  margin-top: 0.25rem;
}
@media (max-width: 480px) {
  .qs-os-option .qs-os-label {
    padding: 0 0.5rem;
    font-size: 0.72rem;
    gap: 0.28rem;
  }
  .qs-os-icon {
    width: 12px;
    height: 12px;
  }
  .qs-figure {
    max-width: 100%;
  }
}
html[dir="rtl"] .qs-figure.hero-terminal,
html[dir="rtl"] .qs-figure .hero-terminal-body {
  direction: ltr;
  text-align: left;
}

.deploy-card ul {
margin: 0;
padding-inline-start: 1.1rem;
color: var(--text-muted);
font-size: 0.92rem;
}
.deploy-card li + li {
margin-top: 0.3rem;
}
.scope-grid {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: var(--space-3);
grid-template-columns: 1fr;
}
@media (min-width: 720px) {
.scope-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-4);
}
}
.scope-card {
display: flex;
gap: 0.95rem;
align-items: flex-start;
padding: var(--card-pad-y) var(--card-pad-x);
border-radius: var(--radius);
border: 1px solid var(--border);
background: var(--bg-card);
box-shadow: 0 1px 0 rgba(15, 28, 40, 0.03);
position: relative;
overflow: hidden;
}
.scope-card::before {
content: "";
position: absolute;
inset: 0 auto 0 0;
width: 3px;
background: linear-gradient(180deg, var(--go-blue), var(--go-aqua));
opacity: 0.85;
}
.scope-card-num {
flex: 0 0 auto;
font-family: var(--mono);
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.06em;
color: var(--go-blue-dark);
background: color-mix(in srgb, var(--go-blue) 12%, transparent);
border: 1px solid color-mix(in srgb, var(--go-blue) 28%, var(--border));
border-radius: 8px;
padding: 0.28rem 0.45rem;
line-height: 1;
margin-top: 0.15rem;
}
.scope-card-body {
min-width: 0;
}
.scope-card h3 {
margin: 0 0 0.3rem;
font-family: var(--heading);
font-size: 1.05rem;
letter-spacing: -0.02em;
font-weight: 600;
color: var(--text);
}
.scope-card p {
margin: 0;
color: var(--text-muted);
font-size: 0.95rem;
line-height: 1.45;
}
.scope-card code {
font-size: 0.88em;
}
.support {
background:
radial-gradient(ellipse 50% 70% at 90% 50%, rgba(206, 50, 98, 0.06), transparent 55%),
var(--bg-alt);
margin-inline: var(--gutter);
border-radius: 12px;
border: 1px solid var(--border);
}
.support-inner {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 1.75rem;
}
@media (min-width: 960px) {
.support-inner {
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.support-copy {
min-width: 0;
flex: 1;
}
.support-actions {
flex-shrink: 0;
}
}
.support-copy p:not(.section-label) {
margin: 0;
color: var(--text-muted);
font-size: 1.05rem;
max-width: 34rem;
}
.support-actions {
display: flex;
flex-direction: column;
gap: 0.85rem;
align-items: flex-start;
}
.support-cta {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.65rem;
width: 217px;
height: 60px;
max-width: 100%;
border-radius: 12px;
box-sizing: border-box;
overflow: hidden;
text-decoration: none;
transition: opacity 0.15s ease, background 0.15s ease;
}
.support-cta:focus-visible {
outline: 2px solid var(--go-blue);
outline-offset: 3px;
}
.support-cta-github {
background: #24292f;
color: #fff;
font-family: var(--heading);
font-weight: 600;
font-size: 1rem;
letter-spacing: -0.01em;
border: 1px solid #24292f;
}
.support-cta-github:hover {
background: #32383f;
color: #fff;
text-decoration: none;
}
.support-cta-github svg {
width: 22px;
height: 22px;
flex-shrink: 0;
fill: currentColor;
}
.support-cta-bmc {
padding: 0;
line-height: 0;
background: transparent;
border: none;
}
.support-cta-bmc:hover { opacity: 0.92; }
.support-cta-bmc img {
display: block;
width: 217px;
height: 60px;
max-width: 100%;
}
.site-footer {
border-top: none;
padding: var(--space-5) 0 calc(var(--space-5) + 0.5rem);
position: relative;
z-index: 1;
background: var(--bg);
}
.footer-inner {
display: grid;
gap: 1.1rem;
}
.footer-brand {
display: inline-flex;
align-items: center;
gap: 0.45rem;
font-family: var(--heading);
font-weight: 700;
letter-spacing: -0.02em;
}

.lang-switch {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: stretch;
  height: auto;
  min-height: 2rem;
  padding: 3px;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  background: var(--bg);
  box-sizing: border-box;
  gap: 3px;
  width: fit-content;
  max-width: 100%;
  margin-block: 0.1rem 0.15rem;
}
.lang-switch button {
  appearance: none;
  border: 0;
  margin: 0;
  padding: 0.35rem 0.45rem;
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
  font-family: var(--heading);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--text-muted);
  line-height: 1.25;
  transition: background 0.15s ease, color 0.15s ease;
}
.lang-switch button:hover {
  color: var(--text);
}
.lang-switch button.is-active,
.lang-switch button[aria-pressed="true"] {
  background: var(--accent-dim);
  color: var(--go-blue-dark);
}
.lang-switch button:focus-visible {
  outline: 2px solid var(--go-blue);
  outline-offset: 1px;
}
@media (max-width: 480px) {
  .lang-switch {
    flex-wrap: wrap;
    height: auto;
    max-width: 100%;
    gap: 3px;
  }
  .lang-switch button {
    padding: 0.3rem 0.38rem;
    font-size: 0.68rem;
  }
  .footer-inner {
    gap: 1.15rem;
  }
}

.footer-license,
.footer-note {
margin: 0;
color: var(--text-muted);
font-size: 0.95rem;
line-height: 1.5;
}
.footer-license a,
.footer-note a {
color: var(--go-blue-dark);
}
.footer-license a:hover,
.footer-note a:hover {
color: var(--go-blue);
}
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
.btn,
.nav-toggle-bars,
.nav-toggle-bars::before,
.nav-toggle-bars::after {
transition: none;
}
.faq-item {
transition: none;
}
.hero-terminal-badge {
  animation: none;
  background-image: none;
  filter: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
}
.built-for {
list-style: none;
margin: 1.15rem 0 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
max-width: 100%;
}
.built-for li {
margin: 0;
padding: 0;
}
.built-for-pill {
display: inline-flex;
align-items: center;
gap: 0.45rem;
min-height: 2rem;
font-family: var(--mono);
font-size: 0.72rem;
font-weight: 500;
letter-spacing: 0.02em;
text-decoration: none;
padding-block: 0.3rem;
padding-inline: 0.55rem 0.75rem;
border-radius: 999px;
color: var(--text-muted);
background: var(--bg-alt);
border: 1px solid var(--border);
transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
box-sizing: border-box;
}
.built-for-icon {
display: block;
width: 1.15rem;
height: 1.15rem;
object-fit: contain;
flex-shrink: 0;
image-rendering: auto;
}
.built-for-icon-go {
width: 1.8rem;
height: 1.1rem;
transform: translateY(0.5px);
}
.built-for-icon-docker {
width: 1.35rem;
height: 1rem;
transform: translateY(0.5px);
}
.built-for-icon-podman {
width: 1.2rem;
height: 1.2rem;
}
.built-for-icon-kubernetes {
width: 1.15rem;
height: 1.15rem;
}
.built-for-icon-gpl {
width: 1.85rem;
height: 0.95rem;
color: #a40000;
object-fit: contain;
}
html[data-theme="dark"] .built-for-icon-gpl {
color: #e85a5a;
}
.built-for-pill:hover {
border-color: var(--go-blue);
color: var(--go-blue-dark);
text-decoration: none;
}
.built-for-pill:focus-visible {
outline: 2px solid var(--go-blue);
outline-offset: 2px;
}
.healthz-note,
.flag-note {
margin: 0 0 1.5rem;
color: var(--text-muted);
font-size: 0.95rem;
}
.flag-note {
margin-top: 1rem;
margin-bottom: 0;
}
.section-head h2 code {
font-size: 0.85em;
}
.logo:focus-visible,
.nav a:focus-visible,
.header-gh:focus-visible,
.footer-license a:focus-visible,
.footer-note a:focus-visible {
outline: 2px solid var(--go-blue);
outline-offset: 3px;
border-radius: 4px;
}
.nav-toggle:focus-visible {
outline: 2px solid var(--go-blue);
outline-offset: 2px;
}
.faq-list {
margin: 0;
padding: 0;
display: grid;
gap: var(--space-2);
width: 100%;
max-width: none;
}
.faq-item,
.qs-adv-item {
width: 100%;
box-sizing: border-box;
}
.faq-item {
padding: 0;
border-radius: var(--radius);
background: var(--bg-card);
border: 1px solid var(--border);
overflow: hidden;
}
.faq-item summary {
cursor: pointer;
list-style: none;
font-family: var(--heading);
font-weight: 600;
font-size: 1.05rem;
color: var(--text);
padding: 1.05rem 1.25rem;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
}
.faq-item summary::-webkit-details-marker {
display: none;
}
.faq-item summary::after {
content: "+";
font-family: var(--mono);
font-weight: 500;
font-size: 1.1rem;
color: var(--go-blue-dark);
line-height: 1;
flex-shrink: 0;
}
.faq-item[open] summary::after {
content: "\2212";
}
.faq-item summary:hover,
.faq-item summary:focus-visible {
color: var(--go-blue-dark);
outline: none;
}
.faq-item summary:focus-visible {
box-shadow: inset 0 0 0 2px var(--go-blue);
}
.faq-item p {
margin: 0;
padding: 0 1.25rem 1.1rem;
color: var(--text-muted);
font-size: 0.95rem;
line-height: 1.55;
}
.deploy-note {
margin: 1.75rem 0 0;
max-width: 52rem;
color: var(--text-muted);
font-size: 1.02rem;
line-height: 1.55;
}
.deploy-note strong {
color: var(--text);
}

/* Wide layouts: section heads span full wrap (match multi-col grids / lists) */
@media (min-width: 900px) {
.section-head {
max-width: none;
width: 100%;
}
.section-sub {
max-width: min(65rem, 100%);
}
#deploy .deploy-note {
max-width: none;
}
}

/* layout: inset band spacing */
.section-alt,
.support {
margin-block: var(--space-3);
}
.hero {
padding-inline: 0;
}


/* RTL — light touch for Arabic (html[dir="rtl"]) */
html[dir="rtl"] .btn-arrow {
  display: inline-block;
  transform: scaleX(-1);
}
html[dir="rtl"] .nav-toggle-bars::before,
html[dir="rtl"] .nav-toggle-bars::after {
  left: auto;
  right: 0;
}

/* Hero first-run terminal — go.dev-style visual (decorative) */
.hero-visual {
  position: relative;
  margin: 0 0 1.55rem;
  max-width: min(100%, 28rem);
  width: 100%;
  box-sizing: border-box;
}
.hero-terminal {
  position: relative;
  max-width: 100%;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow);
  overflow: visible;
}
.hero-terminal-chrome {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: 2.15rem;
  padding: 0.45rem 0.85rem;
  border-bottom: 1px solid var(--border);
  background: var(--bg-code);
  border-radius: 10px 10px 0 0;
}
.hero-terminal-dots {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  flex-shrink: 0;
  margin-inline-start: auto;
}
.hero-terminal-dots span {
  display: block;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
}
.hero-terminal-dots .hero-terminal-dot-close { background: #ff5f57; }
.hero-terminal-dots .hero-terminal-dot-min { background: #febc2e; }
.hero-terminal-dots .hero-terminal-dot-max { background: #28c840; }
.hero-terminal-label {
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: lowercase;
  color: var(--text-dim);
}
.hero-terminal-body {
  margin: 0;
  padding: 1.05rem 1.15rem 1.2rem;
  background: var(--bg-elevated);
  border-radius: 0 0 10px 10px;
  overflow-x: auto;
  max-width: 100%;
  font-family: var(--mono);
  font-size: 0.84rem;
  line-height: 1.62;
  white-space: pre;
}
.ht-prompt {
  color: var(--go-blue);
  font-weight: 500;
}
.ht-cmd {
  color: var(--text);
}
.ht-out {
  color: var(--text-muted);
}
.ht-smoke {
  display: block;
  margin-top: 0.45rem;
  font-size: 0.72rem;
  letter-spacing: 0.01em;
  color: var(--text-dim);
}
/* Terminal badges — corner sit + subtle shimmer (no spinning ring) */
@keyframes krazy-badge-shimmer {
  0% { background-position: 120% 0; }
  100% { background-position: -120% 0; }
}

@keyframes krazy-badge-sheen {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.08); }
}

.hero-terminal-badge {
  position: absolute;
  /* Sit on the bottom-end corner of the terminal frame */
  bottom: -0.55rem;
  inset-inline-end: -0.45rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 0.78rem;
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #042029;
  white-space: nowrap;
  max-width: calc(100% - 0.5rem);
  overflow: hidden;
  text-overflow: ellipsis;
  border: 1px solid color-mix(in srgb, var(--go-blue) 70%, #fff);
  background-color: var(--go-blue);
  background-image: linear-gradient(
    105deg,
    transparent 35%,
    rgba(255, 255, 255, 0.55) 48%,
    rgba(255, 255, 255, 0.15) 52%,
    transparent 65%
  );
  background-size: 220% 100%;
  background-repeat: no-repeat;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.22),
    0 0 10px color-mix(in srgb, var(--go-blue) 35%, transparent);
  animation:
    krazy-badge-shimmer 3.6s ease-in-out infinite,
    krazy-badge-sheen 4.5s ease-in-out infinite;
}

html[data-theme="dark"] .hero-terminal-badge {
  color: #042029;
  background-color: var(--go-blue);
  border-color: color-mix(in srgb, var(--go-light) 55%, var(--go-blue));
}

/* Hero + both QS figures share corner placement */
.qs-figure .hero-terminal-badge {
  bottom: -0.55rem;
  inset-inline-end: -0.45rem;
}

/* Stacked hero (<1100): balance lede → terminal → CTAs (badge) → meta → pills */
@media (max-width: 1099px) {
  .lede {
    margin-bottom: 1.4rem;
  }
  .hero-visual {
    margin-top: 0;
    margin-bottom: 1.5rem; /* ~0.85rem clear below badge overhang */
  }
  .hero-ctas {
    margin-top: 0.2rem;
    margin-bottom: 1.25rem; /* single gap to meta — no meta margin-top */
  }
  .hero-meta {
    margin-top: 0;
  }
  .built-for {
    margin-top: 1.05rem;
  }
  .hero-terminal-badge {
    inset-inline-end: -0.35rem;
  }
}
/* Phone narrow: full-width terminal, badge stays on-screen */
@media (max-width: 380px) {
  .hero-visual {
    max-width: 100%;
    margin-bottom: 1.4rem;
  }
  .hero-terminal-body {
    padding: 0.9rem 0.85rem 1.05rem;
    font-size: 0.78rem;
  }
  .hero-terminal-badge {
    inset-inline-end: -0.25rem;
    bottom: -0.45rem;
    font-size: 0.64rem;
    padding: 0.2rem 0.5rem;
  }
  .hero-ctas {
    margin-top: 0.25rem;
    gap: 0.65rem;
  }
}
@media (min-width: 1100px) {
  .hero-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 0.95fr);
    column-gap: 2.5rem;
    align-items: start;
  }
  .hero-inner > h1 { grid-column: 1; grid-row: 1; }
  .hero-inner > .lede {
    grid-column: 1;
    grid-row: 2;
    margin-bottom: 1.5rem; /* left-column rhythm before CTAs */
  }
  .hero-inner > .hero-ctas {
    grid-column: 1;
    grid-row: 3;
    margin-bottom: 0; /* meta provides top spacing — avoid double gap */
  }
  .hero-inner > .hero-visual {
    grid-column: 2;
    grid-row: 1 / span 3;
    margin: 0;
    max-width: none;
    align-self: center;
    justify-self: stretch;
  }
  .hero-inner > .hero-meta,
  .hero-inner > .built-for { grid-column: 1 / -1; }
  .hero-inner > .hero-meta {
    margin-top: 1.85rem; /* consistent top margin after grid */
  }
  .hero-inner > .built-for {
    margin-top: 1.1rem;
  }
  .hero-terminal-badge {
    inset-inline-end: -0.45rem;
    bottom: -0.55rem;
  }
}


/* Hero + Quick Start: center terminal chrome; keep copy start-aligned (i18n / RTL-safe) */
.hero h1,
.hero .lede,
.hero-meta,
#quickstart > .wrap > .section-head,
.qs-figure-blurb,
.qs-kontainer-beat,
.qs-go-note {
  text-align: start;
}
.hero-visual {
  margin-inline: auto;
}
.hero-ctas {
  justify-content: center;
}
.qs-os-toggle {
  margin-inline: auto;
}
.qs-figure-card {
  margin-inline: auto;
}
.qs-figure {
  margin-inline: auto;
}
.qs-kontainer-path .qs-kontainer-beat {
  margin-inline: auto;
  text-align: start;
}
@media (min-width: 1100px) {
  /* Desktop hero: text column stays start; CTAs with the copy, not under the terminal */
  .hero-inner > .hero-ctas {
    justify-content: flex-start;
  }
  .hero-inner > .hero-visual {
    margin-inline: 0;
    justify-self: stretch;
  }
}

/* Overflow guards: pre / terminal / pills / lang already wrap; keep boxes contained */
.hero-inner,
.code-panel pre,
.hero-terminal,
.lang-switch {
  max-width: 100%;
}

html[dir="rtl"] .hero-terminal,
html[dir="rtl"] .hero-terminal-body {
  direction: ltr;
  text-align: left;
}

.qs-kontainer-path {
  margin-top: 2rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--border-strong);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
}
/* Match figure card width — short Deploy beat, not a lecture. */
.qs-kontainer-path .qs-kontainer-beat {
  margin: 0 0 1.1rem;
  max-width: min(100%, 36rem);
}
/* Same figure width as “first run” (.qs-figure → 36rem). */
.qs-kontainer-path .qs-figure {
  margin: 0 0 1.35rem;
  max-width: min(100%, 36rem);
}
/* Same as qs-first-path: full-bleed code panels under a narrower figure. */
.qs-box-path {
  margin: 0 0 0;
  max-width: none;
  width: 100%;
}
.qs-box-path.code-blocks {
  margin-bottom: 0;
}
.qs-kontainer-path + .qs-advanced {
  margin-top: 1.75rem;
}

/* Landscape tablet / narrow laptop: keep Deploy/Why from forcing page scroll-x */
@media (max-width: 1099px) {
  .deploy-grid,
  .why-grid {
    width: 100%;
    max-width: 100%;
  }
  .deploy-card .code-panel pre {
    font-size: 0.8rem;
  }
  .section-alt > .wrap,
  .support > .wrap {
    overflow-x: clip;
  }
}

@media (min-width: 1280px) {
  .deploy-card .code-panel-tight,
  .deploy-card > ul {
    margin-top: auto;
  }
}

#quickstart > .wrap > .section-head {
  margin-bottom: 1rem; /* no lede; tighter into OS tabs */
}
#quickstart .qs-os-toggle {
  margin-bottom: 1rem;
}
#quickstart .code-blocks {
  margin-top: 0.15rem;
}
#quickstart .qs-kontainer-path {
  margin-top: 1.5rem;
  padding-top: 1.35rem;
}
#quickstart .qs-figure-card {
  margin-bottom: 1.15rem;
}


/* Landscape tablet / phone: content bars (FAQ + QS advanced) fill the wrap */
@media (orientation: landscape) and (max-width: 1199px) {
  .faq-list,
  .qs-advanced {
    width: 100%;
    max-width: 100%;
  }
  .faq-item,
  .qs-adv-item {
    width: 100%;
  }
  #faq > .wrap > .section-head,
  #quickstart > .wrap > .section-head {
    max-width: none;
    width: 100%;
  }
}

/* —— Tutorials index (homepage) + guide page —— */
.tutorials-grid {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: var(--space-4);
grid-template-columns: 1fr;
}
@media (min-width: 720px) {
.tutorials-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
.tutorial-card {
display: flex;
flex-direction: column;
gap: 0;
padding: 0;
border-radius: var(--radius);
border: 1px solid var(--border);
background: var(--bg-card);
box-shadow: var(--shadow);
min-height: 0;
overflow: hidden;
text-decoration: none;
color: inherit;
text-align: start;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
a.tutorial-card:hover {
border-color: color-mix(in srgb, var(--go-blue) 45%, var(--border));
box-shadow: var(--shadow), 0 0 0 1px color-mix(in srgb, var(--go-blue) 18%, transparent);
}
a.tutorial-card:focus-visible {
outline: 2px solid var(--go-blue);
outline-offset: 2px;
}
.tutorial-card-media {
position: relative;
aspect-ratio: 1168 / 784;
background: var(--bg-alt);
border-bottom: 1px solid var(--border);
overflow: hidden;
}
.tutorial-card-img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.tutorial-card-copy {
padding: var(--card-pad-y) var(--card-pad-x) var(--card-pad-b);
display: flex;
flex-direction: column;
gap: 0.45rem;
flex: 1;
}
.tutorial-card h3 {
margin: 0;
font-family: var(--heading);
font-size: 1.08rem;
font-weight: 600;
letter-spacing: -0.02em;
color: var(--text);
line-height: 1.3;
}
.tutorial-card p {
margin: 0;
color: var(--text-muted);
font-size: 0.95rem;
line-height: 1.45;
font-family: var(--sans, var(--body, inherit));
}
.tutorials-closer {
margin: var(--space-5) 0 0;
max-width: 40rem;
color: var(--text-muted);
font-size: 1.02rem;
font-style: italic;
}

/* Guide page */
.page-tutorials .tut-hero {
border-top: none;
padding-top: clamp(2.5rem, 5vw, 3.5rem);
}
.tut-page-note {
margin: 1.25rem 0 0;
max-width: 44rem;
color: var(--text-muted);
font-size: 0.95rem;
line-height: 1.5;
}
.tut-toc {
display: flex;
flex-wrap: wrap;
gap: 0.55rem 1rem;
margin: 0 0 0.25rem;
}
.tut-toc a {
font-family: var(--heading);
font-size: 0.9rem;
font-weight: 600;
color: var(--go-blue-dark);
text-decoration: none;
border-bottom: 1px solid color-mix(in srgb, var(--go-blue) 35%, transparent);
}
.tut-toc a:hover {
border-bottom-color: var(--go-blue);
}
.tut-guides {
display: flex;
flex-direction: column;
gap: 3rem;
}
.tut-guide {
scroll-margin-top: calc(var(--header-h, 4.5rem) + 0.75rem);
}
.tut-guide-head {
max-width: 44rem;
margin-bottom: 1.25rem;
}
.tut-guide-head h2 {
margin: 0 0 0.75rem;
font-family: var(--heading);
font-size: clamp(1.45rem, 2.8vw, 1.85rem);
letter-spacing: -0.03em;
font-weight: 700;
line-height: 1.2;
}
.tut-lede-extra {
margin: 0.65rem 0 0;
color: var(--text-muted);
font-size: 1rem;
max-width: 44rem;
}
.tut-rt-toggle {
margin: 0 auto 1.35rem;
width: fit-content;
}
.tut-rt-pane > p {
margin: 0 0 0.85rem;
max-width: 48rem;
color: var(--text);
font-size: 1rem;
line-height: 1.55;
}
.tut-rt-pane .code-panel {
margin: 0 0 1.1rem;
max-width: min(100%, 48rem);
}
.tut-note,
.tut-win-note,
.tut-aside {
margin: 0 0 1rem;
max-width: 48rem;
padding: 0.75rem 0.95rem;
border-radius: 8px;
border: 1px solid var(--border);
background: color-mix(in srgb, var(--bg-card) 70%, var(--go-blue) 4%);
color: var(--text-muted);
font-size: 0.92rem;
line-height: 1.5;
}
.tut-win-note {
border-style: dashed;
}
.tut-aside {
background: transparent;
}
.tut-done {
margin: 1.35rem 0 0;
max-width: 48rem;
padding: 0.85rem 1rem;
border-left: 3px solid var(--go-blue);
background: color-mix(in srgb, var(--go-blue) 8%, transparent);
border-radius: 0 8px 8px 0;
font-size: 0.98rem;
line-height: 1.5;
}
.tut-path {
margin: 1.75rem 0 0.65rem;
font-family: var(--heading);
font-size: 1.12rem;
font-weight: 600;
letter-spacing: -0.02em;
}
.tut-figure {
margin: 0 auto 0.65rem;
max-width: min(100%, 36rem);
}
.tut-figure-blurb {
margin: 0 0 1.1rem;
max-width: 44rem;
color: var(--text-muted);
font-size: 0.92rem;
}
.tut-dont {
margin: 1rem 0 1.25rem;
max-width: 48rem;
padding: 1rem 1.1rem;
border: 1px solid color-mix(in srgb, #ce3262 35%, var(--border));
border-radius: var(--radius);
background: color-mix(in srgb, #ce3262 6%, var(--bg-card));
}
.tut-dont p {
margin: 0 0 0.5rem;
font-weight: 600;
}
.tut-dont ul {
margin: 0;
padding-left: 1.2rem;
color: var(--text-muted);
font-size: 0.94rem;
line-height: 1.5;
}
.tut-table-wrap {
overflow-x: auto;
margin: 0 0 1.1rem;
max-width: 48rem;
-webkit-overflow-scrolling: touch;
}
.tut-table {
width: 100%;
border-collapse: collapse;
font-size: 0.9rem;
}
.tut-table th,
.tut-table td {
text-align: start;
padding: 0.55rem 0.7rem;
border-bottom: 1px solid var(--border);
vertical-align: top;
}
.tut-table th {
font-family: var(--heading);
font-weight: 600;
font-size: 0.78rem;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--go-blue-dark);
background: color-mix(in srgb, var(--go-blue) 8%, transparent);
}
.tut-table code {
font-size: 0.84em;
}
@media (max-width: 719px) {
.tutorials-grid {
grid-template-columns: 1fr;
}
}

/* Day 2: compact Features band (3 tiles) */
.feature-list-compact {
  grid-template-columns: 1fr;
}
@media (min-width: 720px) {
  .feature-list-compact {
    grid-template-columns: 1fr 1fr;
  }
  .feature-list-compact li:last-child {
    grid-column: 1 / -1;
  }
}
@media (min-width: 960px) {
  .feature-list-compact {
    grid-template-columns: 1fr 1fr 1fr;
  }
  .feature-list-compact li:last-child {
    grid-column: auto;
  }
}
.why-listings {
  margin: var(--space-4) 0 0;
  max-width: 42rem;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--text-muted);
}
.why-listings code {
  font-size: 0.9em;
}