.home-content-blocks {
  padding: clamp(28px, 4vw, 64px) max(16px, env(safe-area-inset-left)) clamp(32px, 4vw, 64px) max(16px, env(safe-area-inset-right));
  background: var(--ink);
  color: var(--white);
}
.home-content-blocks-inner { width: min(92vw, 1720px, 100%); margin-inline: auto; }
.home-content-block-list { display: grid; gap: 20px; }
.home-content-blocks-intro { display: grid; gap: 14px; margin-bottom: 28px; }
.home-content-blocks-intro h2 { margin: 0; font-size: clamp(32px, 4vw, 64px); font-weight: 600; line-height: 1.12; letter-spacing: -.04em; scroll-margin-top: calc(var(--site-nav-height, 72px) + 20px); }
.home-content-blocks-intro p { max-width: 62ch; margin: 0; color: #c7d2de; font-size: clamp(16px, 1.3vw, 21px); line-height: 1.6; }
.home-content-block-subline { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; }
.home-content-block-expiry { color: var(--muted); font-size: 13px; line-height: 1.6; white-space: nowrap; }
.home-content-block-body { scrollbar-color: #718399 #102034; scrollbar-width: thin; }
.home-content-block-thumbnail { width: clamp(64px, 12vw, 104px); height: 72px; object-fit: cover; border-radius: 8px; flex-shrink: 0; }
.home-content-block-details[open] .home-content-block-thumbnail { display: none; }
.home-content-block-expired { margin: 0 0 18px; padding: 12px 14px; border-left: 2px solid var(--orange); color: #f3d4bb; font-size: 14px; line-height: 1.5; }
.home-content-block-expiry[data-state="expired"] { color: #f3d4bb; }
.home-content-block {
  --pad: clamp(20px, 3vw, 36px);
  --control: 44px;
  --gap: 12px;
  --copy-w: 112px;
  --title-size: clamp(22px, 2.2vw, 36px);
  /* Centers the 44px controls on the first title line at any title size. */
  --control-top: calc(var(--pad) + max(0px, (var(--title-size) * 1.2 - var(--control)) / 2));
  position: relative;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: clamp(16px, 2vw, 24px);
  background: var(--surface);
  background: linear-gradient(125deg, #142438, var(--surface) 65%);
  box-shadow: inset 0 1px 0 #ffffff06;
  overflow: clip;
  transition: border-color 220ms ease, background-color 220ms ease;
}
.home-content-block:has(details[open]) { border-color: #ff7c3b80; }
.home-content-block:has(summary:hover) { border-color: #ffffff45; }
.home-content-block:has(details[open]):has(summary:hover) { border-color: #ff7c3bb3; }
.home-content-block summary {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: var(--pad);
  cursor: pointer;
  list-style: none;
}
.home-content-block-tools { position: absolute; z-index: 1; top: var(--control-top); right: calc(var(--pad) + var(--control) + var(--gap)); }
.home-content-block-title { margin-right: calc(var(--control) + var(--gap)); min-height: calc(var(--control) - max(0px, (var(--control) - var(--title-size) * 1.2) / 2)); }
.home-content-block:has(.home-content-block-copy:not([hidden])) .home-content-block-title { margin-right: calc(var(--control) + var(--copy-w) + var(--gap) * 2); }
.home-content-block summary::-webkit-details-marker { display: none; }
.home-content-block summary:focus-visible { outline-offset: -4px; border-radius: inherit; }
.home-content-block-heading { display: grid; min-width: 0; gap: 8px; flex: 1; margin-top: max(0px, (var(--control) - var(--title-size) * 1.2) / 2); }
.home-content-block-title {
  font-size: var(--title-size);
  font-weight: 620;
  line-height: 1.2;
  letter-spacing: -.035em;
  overflow-wrap: anywhere;
}
.home-content-block-summary { max-width: 76ch; color: #c7d2de; font-size: clamp(15px, 1.1vw, 19px); line-height: 1.6; overflow-wrap: anywhere; }
.home-content-block-chevron {
  display: grid; place-items: center;
  position: absolute; top: var(--control-top); right: var(--pad);
  width: var(--control); height: var(--control);
  border: 1px solid var(--line); border-radius: 999px;
  transition: border-color 180ms ease;
}
.home-content-block-chevron::before {
  content: ""; width: 9px; height: 9px; margin-top: -4px;
  border-right: 2px solid var(--orange); border-bottom: 2px solid var(--orange);
  transform: rotate(45deg); transition: transform 260ms var(--ease-premium), margin 260ms var(--ease-premium);
}
.home-content-block summary:hover .home-content-block-chevron { border-color: #ff7c3b80; }
.home-content-block-details[open] .home-content-block-chevron::before { margin-top: 4px; transform: rotate(225deg); }
.home-content-block-body {
  margin: 0 var(--pad);
  padding: 20px 0 var(--pad);
  border-top: 1px solid var(--line);
  max-height: 60svh;
  overflow: auto;
}
.home-content-block-body[data-fade="true"] {
  -webkit-mask-image: linear-gradient(#000 calc(100% - 56px), transparent);
  mask-image: linear-gradient(#000 calc(100% - 56px), transparent);
}
.home-content-block-text { max-width: 84ch; white-space: pre-wrap; overflow-wrap: anywhere; font-size: clamp(16px, 1.2vw, 20px); line-height: 1.75; }
.home-content-block-code {
  margin: 0;
  max-width: 100%;
  padding: clamp(16px, 2vw, 24px);
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--ink);
  color: #e0e7ef;
  white-space: pre;
  overflow-wrap: normal;
  overflow-x: auto;
  font: 15px/1.75 ui-monospace, SFMono-Regular, Consolas, monospace;
  tab-size: 2;
}
.home-content-block-code code { font: inherit; }
.home-content-block figure { margin: 0; }
.home-content-block figure img { display: block; max-width: 100%; height: auto; border-radius: 12px; }
.home-content-block figcaption { margin-top: 20px; }
.home-content-block-copy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: var(--copy-w);
  height: var(--control);
  padding: 0 14px;
  border: 1px solid #ff7c3b80;
  border-radius: 999px;
  background: #ff7c3b1a;
  color: var(--orange);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease, transform 160ms ease;
}
.home-content-block-copy:hover { background: var(--orange); border-color: var(--orange); color: var(--ink); }
.home-content-block-copy:active { transform: translateY(1px); }
.home-content-block-copy:disabled { cursor: wait; }
.home-content-block-copy-icon { position: relative; display: grid; place-items: center; width: 20px; height: 20px; flex-shrink: 0; }
.home-content-block-copy-icon svg { position: absolute; width: 20px; height: 20px; }
.home-content-block-copy-label { min-width: 5.5ch; text-align: center; }
.home-content-block-copy-glyph { opacity: 1; transition: opacity 140ms ease; }
.home-content-block-copy-check { opacity: 0; color: #8cf0b4; }
.home-content-block-copy-check path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.home-content-block-copy[data-state="success"],
.home-content-block-copy[data-state="success"]:hover {
  background: #153b2d;
  border-color: #438e65;
  color: #b5f0ca;
}
.home-content-block-copy[data-state="success"] .home-content-block-copy-glyph { opacity: 0; }
.home-content-block-copy[data-state="success"] .home-content-block-copy-check { opacity: 1; }
.home-content-block-copy[data-state="success"] .home-content-block-copy-check path { stroke-dashoffset: 0; }
.home-content-block-status { margin: 0; padding: 0 var(--pad) var(--pad); color: #f3d4bb; font-size: 14px; line-height: 1.5; }
.home-content-block-status:empty { display: none; }
.home-content-block-status[data-state="success"] {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .home-content-block-details[open] .home-content-block-body { animation: home-content-reveal 280ms var(--ease-premium) both; }
  .home-content-block-copy[data-state="success"] .home-content-block-copy-check { animation: home-content-check-pop 400ms var(--ease-premium) both; }
  .home-content-block-copy[data-state="success"] .home-content-block-copy-check path { animation: home-content-check-draw 320ms ease 80ms both; }
}
@keyframes home-content-reveal { from { opacity: 0; } to { opacity: 1; } }
@keyframes home-content-check-pop { from { opacity: 0; transform: scale(.65); } 65% { opacity: 1; transform: scale(1.12); } to { opacity: 1; transform: scale(1); } }
@keyframes home-content-check-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  .home-content-block, .home-content-block-chevron, .home-content-block-chevron::before, .home-content-block-copy, .home-content-block-copy-glyph { transition: none; }
}
@media (max-width: 899px) {
  .home-content-blocks-inner { width: 100%; }
}
/* Icon-only Copy keeps the title readable beside two controls on phones. */
@media (max-width: 599px) {
  .home-content-block { --copy-w: var(--control); --pad: 18px; --gap: 8px; }
  .home-content-block-copy { padding: 0; }
  .home-content-block-copy-label {
    position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
  }
}
@media (min-width: 2200px) {
  .home-content-blocks-inner { width: min(90vw, 2400px, 100%); }
  .home-content-block { --title-size: clamp(36px, 1.5vw, 56px); --control: 52px; --copy-w: 132px; }
  .home-content-block-summary, .home-content-block-text { font-size: clamp(20px, .85vw, 30px); }
  .home-content-block-code { font-size: clamp(17px, .7vw, 24px); }
  .home-content-block-expiry, .home-content-block-copy, .home-content-block-status { font-size: clamp(14px, .6vw, 20px); }
}