/* Homepage middle only. The existing header/footer retain their own styles. */
.view[data-panel="home"].home-grid-view {
  --card-surface: #fff;
  --card-inset: #f4f6f9;
  --card-line: rgb(16 24 40 / 9%);
  --card-line-strong: rgb(16 24 40 / 16%);
  --card-text: #141a26;
  --card-muted: #5d6877;
  --card-faint: #8a94a3;
  --card-blue: #1f66ee;
  --card-blue-hover: #1a58d2;
  --card-shadow: 0 1px 2px rgb(16 24 40 / 4%), 0 10px 28px -14px rgb(16 24 40 / 14%);
  --card-shadow-hover: 0 1px 2px rgb(16 24 40 / 5%), 0 16px 36px -16px rgb(16 24 40 / 22%);
  --card-gap: clamp(16px, 1.3vw, 26px);
  padding-inline: max(12px, clamp(12px, 1vw, 16px)) !important;
  overflow-x: hidden !important;
}
.dark .view[data-panel="home"].home-grid-view {
  --card-surface: #1a1e24;
  --card-inset: #13161b;
  --card-line: rgb(255 255 255 / 8%);
  --card-line-strong: rgb(255 255 255 / 16%);
  --card-text: #eef1f6;
  --card-muted: #a5afbd;
  --card-faint: #7b8696;
  --card-blue: #2f74f2;
  --card-blue-hover: #4384f5;
  --card-shadow: 0 1px 0 rgb(255 255 255 / 4%) inset, 0 12px 28px -16px rgb(0 0 0 / 55%);
  --card-shadow-hover: 0 1px 0 rgb(255 255 255 / 5%) inset, 0 18px 36px -16px rgb(0 0 0 / 65%);
}
.home-product-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: var(--card-gap);
  flex: 1 1 0%;
  min-height: 0;
  width: 100%;
  max-width: 1760px;
  margin: 0 auto;
}
.home-product-card {
  --accent: #2f6df6;
  --pad: clamp(18px, 1.6vw, 28px);
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  grid-template-rows: minmax(0, 1fr) auto;
  column-gap: clamp(18px, 1.6vw, 30px);
  row-gap: var(--pad);
  padding: var(--pad) var(--pad) 0;
  min-width: 0;
  min-height: 0;
  color: var(--card-text);
  background: linear-gradient(155deg, color-mix(in srgb, var(--accent) 6%, var(--card-surface)) 0%, var(--card-surface) 46%);
  border: 1px solid var(--card-line);
  border-radius: 22px;
  box-shadow: var(--card-shadow);
  overflow: hidden;
  transition: box-shadow .25s ease, border-color .25s ease;
}
.home-product-card:hover { box-shadow: var(--card-shadow-hover); border-color: var(--card-line-strong); }
.home-product-card[data-color="violet"] { --accent: #7a58e6; }
.home-product-card[data-color="green"] { --accent: #1b9f6a; }
.home-product-card[data-color="orange"] { --accent: #e07d14; }
.home-product-card[data-color="rose"] { --accent: #e0517a; }
.dark .home-product-card[data-color="blue"] { --accent: #6b9dff; }
.dark .home-product-card[data-color="violet"] { --accent: #a58cff; }
.dark .home-product-card[data-color="green"] { --accent: #4cc99a; }
.dark .home-product-card[data-color="orange"] { --accent: #f1a24d; }
.dark .home-product-card[data-color="rose"] { --accent: #f2829f; }

.home-card-copy { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.home-card-copy > * { flex-shrink: 0; }
.home-card-heading { display: flex; align-items: center; gap: 14px; min-width: 0; }
.home-card-heading-text { min-width: 0; }
.home-card-icon {
  display: grid; place-items: center; flex: 0 0 auto;
  width: clamp(40px, 3.1vw, 52px); height: clamp(40px, 3.1vw, 52px);
  color: var(--accent);
  background: linear-gradient(145deg, color-mix(in srgb, var(--accent) 20%, var(--card-surface)), color-mix(in srgb, var(--accent) 9%, var(--card-surface)));
  border-radius: 15px;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent), 0 6px 14px -8px color-mix(in srgb, var(--accent) 60%, transparent);
}
.home-card-icon svg { width: 54%; height: 54%; stroke-width: 1.6; }
.home-product-card h2 {
  margin: 0; white-space: normal !important; text-overflow: clip; font-size: clamp(20px, 1.7vw, 28px); font-weight: 750;
  line-height: 1.25; color: var(--card-text); letter-spacing: -.02em;
  overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden;
}
/* site-contract.css forces every h2 to one unwrapped line; the card title needs a 2-line clamp. */
.home-product-card h2 {
  display: -webkit-box !important; overflow: hidden !important; text-wrap: wrap !important;
  overflow-wrap: anywhere !important; text-overflow: clip !important;
  -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; min-width: 0 !important;
}
.home-card-brief {
  margin: 4px 0 0; white-space: normal; text-overflow: clip; color: var(--card-muted); font-size: clamp(13px, 1vw, 15.5px);
  line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere;
}
.home-card-features { display: grid; gap: 5px; padding: 0; margin: 0; list-style: none; }
.home-card-features li {
  display: flex; align-items: center; gap: 8px; min-width: 0;
  color: var(--card-text); font-size: clamp(13px, .92vw, 14px); line-height: 1.5;
}
.home-card-features li .home-card-symbol { width: 15px; height: 15px; flex: 0 0 15px; color: var(--accent); stroke-width: 2; }
.home-card-features li span { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.home-card-description {
  margin: clamp(10px, 1.3vh, 14px) 0 clamp(10px, 1.3vh, 14px);
  flex: 0 0 auto; min-height: 0; white-space: normal;
  font-size: clamp(13px, .98vw, 15px); line-height: 1.75; color: var(--card-muted);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4;
  overflow: hidden; overflow-wrap: anywhere;
}
.home-card-bottom { margin-top: auto; padding-top: 12px; flex-shrink: 0; }
.home-card-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.home-product-card .home-card-download,
.home-product-card .home-card-detail {
  display: inline-flex !important; align-items: center; justify-content: center; gap: 7px;
  min-height: 42px !important; height: auto !important; min-width: 0 !important; width: auto !important;
  padding: 8px 18px !important; border: 0 !important; border-radius: 11px !important;
  font: inherit; font-size: clamp(13px, .92vw, 14.5px) !important; font-weight: 600 !important;
  line-height: 1.4 !important; letter-spacing: .01em; white-space: nowrap; text-decoration: none;
  transform: none !important; transition: background-color .18s, color .18s !important;
}
.home-product-card .home-card-download {
  background: linear-gradient(180deg, color-mix(in srgb, var(--card-blue) 88%, #fff) 0%, var(--card-blue) 100%) !important; color: #fff !important;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 22%), 0 1px 2px rgb(16 40 100 / 25%), 0 8px 16px -8px rgb(31 102 238 / 55%) !important;
}
.home-product-card .home-card-download::before,
.home-product-card .home-card-download::after,
.home-product-card .home-card-detail::before,
.home-product-card .home-card-detail::after { content: none !important; display: none !important; box-shadow: none !important; }
.home-product-card .home-card-download:hover:not(:disabled) { background: linear-gradient(180deg, var(--card-blue) 0%, var(--card-blue-hover) 100%) !important; }
.home-product-card .home-card-download:active:not(:disabled) { filter: brightness(.94); }
.home-product-card .home-card-download:disabled { opacity: .55; cursor: default; }
.home-product-card .home-card-detail { padding-inline: 14px !important; color: var(--card-text) !important; background: transparent !important; box-shadow: inset 0 0 0 1px var(--card-line-strong) !important; transition: background-color .18s, box-shadow .18s !important; }
.home-product-card .home-card-detail:hover { background: var(--card-inset) !important; box-shadow: inset 0 0 0 1px var(--card-line-strong) !important; }
.home-card-symbol { display: block; width: 17px; height: 17px; flex: 0 0 17px; }
.home-card-actions .home-card-symbol { transition: transform .22s cubic-bezier(.2,.7,.2,1); }
.home-card-detail:hover .home-card-symbol-arrow { transform: translate(2px, -2px); }
.home-card-download:hover:not(:disabled) .home-card-symbol-download { transform: translateY(1.5px); }

.home-card-meta {
  grid-column: 1 / -1; display: grid; grid-template-columns: .8fr .95fr .85fr 1.5fr; gap: 6px 18px;
  margin: 0 calc(var(--pad) * -1); padding: 14px var(--pad) 15px; min-width: 0;
  border-top: 1px solid var(--card-line);
  background: color-mix(in srgb, var(--card-inset) 65%, transparent);
}
.home-card-meta > div { min-width: 0; }
.home-card-meta dt { display: flex; align-items: center; gap: 6px; margin: 0; color: var(--card-faint); font-size: 12px; line-height: 1.3; white-space: nowrap; }
.home-card-meta dt .home-card-symbol { width: 14px; height: 14px; flex: 0 0 14px; }
.home-card-meta dd { margin: 5px 0 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--card-text); font-size: 14px; line-height: 1.3; font-weight: 600; font-variant-numeric: tabular-nums; }

.home-card-media {
  position: relative; display: flex; align-items: center; justify-content: center;
  grid-column: 2; grid-row: 1;
  align-self: stretch; width: 100%; height: 100%; min-height: 0; min-width: 0;
  padding: clamp(12px, 1vw, 16px); margin: 0; overflow: hidden;
  border: 1px solid var(--card-line); border-radius: 14px;
  background:
    radial-gradient(120% 85% at 50% 0%, color-mix(in srgb, var(--accent) 16%, var(--card-inset)) 0%, transparent 70%),
    var(--card-inset);
  color: var(--card-muted); cursor: zoom-in;
  transition: border-color .25s ease;
}
.home-card-media:hover { border-color: var(--card-line-strong); }
/* Both axes are bounded by the grid cell, independently of intrinsic media size.
   contain keeps portrait, ultrawide, and square screenshots complete and undistorted.
   drop-shadow follows the visible pixels, so letterboxing never shows a frame. */
.home-card-media img {
  display: block; width: auto; height: auto; min-width: 0; min-height: 0;
  max-width: 100%; max-height: 100%; object-fit: contain; object-position: center;
  border: 0; border-radius: 9px; pointer-events: none;
  box-shadow: 0 0 0 1px rgb(16 24 40 / 12%), 0 20px 36px -14px rgb(16 24 40 / 42%), 0 6px 14px -6px rgb(16 24 40 / 22%);
  transition: transform .5s cubic-bezier(.2,.7,.2,1);
}
.dark .home-card-media img { box-shadow: 0 0 0 1px rgb(255 255 255 / 14%), 0 22px 40px -14px rgb(0 0 0 / 70%), 0 6px 14px -6px rgb(0 0 0 / 50%); }
.home-product-card:hover .home-card-media img { transform: scale(1.015); }
.home-card-media img[hidden], .home-card-media [hidden] { display: none !important; }
.home-card-media.is-empty { font: inherit; font-size: 14px; cursor: default; }
.home-card-zoom {
  position: absolute; right: 10px; bottom: 10px; display: flex; align-items: center; gap: 5px;
  padding: 6px 10px; border-radius: 8px; color: var(--card-text); font-size: 11.5px; line-height: 1.2;
  background: color-mix(in srgb, var(--card-surface) 86%, transparent);
  box-shadow: 0 0 0 1px var(--card-line), 0 4px 12px rgb(16 24 40 / 10%);
  backdrop-filter: blur(8px);
  opacity: 0; transform: translateY(3px); transition: opacity .2s, transform .2s; pointer-events: none;
}
.home-card-zoom svg { width: 14px; height: 14px; }
.home-card-media:hover .home-card-zoom, .home-card-media:focus-visible .home-card-zoom { opacity: 1; transform: none; }
.home-product-card :focus-visible { outline: 2px solid var(--card-blue) !important; outline-offset: 3px; }

@media (min-width: 1081px) and (min-height: 700px) {
  .view[data-panel="home"].home-grid-view { overflow-y: hidden !important; }
}
@media (max-height: 800px) and (min-width: 1081px) {
  .home-product-card { --pad: 18px; }
  .home-card-heading { gap: 12px; }
  .home-card-features { gap: 3px; }
  .home-card-features li { font-size: 13px; line-height: 1.4; }
  .home-card-description { margin: 10px 0 6px; line-height: 1.65; -webkit-line-clamp: 3; }
  .home-card-bottom { padding-top: 8px; }
  .home-product-card .home-card-download, .home-product-card .home-card-detail { min-height: 38px !important; }
  .home-card-meta { padding-block: 10px 11px; }
  .home-card-meta dd { margin-top: 3px; font-size: 13.5px; }
}
@media (max-width: 1080px), (max-height: 699px) {
  .view[data-panel="home"].home-grid-view { overflow-y: auto !important; }
  .home-product-grid { flex: 0 0 auto; grid-template-rows: repeat(2, minmax(310px, auto)); }
}
@media (max-width: 1080px) {
  .home-product-card { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 240px auto; }
  .home-card-media { grid-column: 1; grid-row: auto; }
  .home-card-description { -webkit-line-clamp: 3; }
  .home-card-bottom { margin-top: 8px; }
}
@media (min-width: 1081px) and (max-width: 1280px) {
  .home-product-card { column-gap: 16px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .home-card-heading { gap: 10px; }
  .home-card-icon { width: 40px; height: 40px; border-radius: 12px; }
  .home-product-card h2 { font-size: 19px; }
  .home-card-brief { font-size: 12.5px; }
  .home-card-features li { font-size: 12.5px; }
  .home-card-actions { gap: 6px; flex-wrap: nowrap; }
  .home-product-card .home-card-download { padding-inline: 12px !important; }
  .home-product-card .home-card-detail { padding-inline: 10px !important; }
  .home-card-description { font-size: 13px; line-height: 1.7; }
  .home-card-meta { gap: 6px 10px; }
  .home-card-meta dt .home-card-symbol { display: none; }
}
@media (max-width: 640px) {
  .home-product-grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; gap: 16px; }
  .home-product-card { --pad: 18px; border-radius: 18px; grid-template-rows: auto 260px auto; }
  .home-product-card h2 { font-size: 22px; }
  .home-card-brief { font-size: 13.5px; }
  .home-card-description { font-size: 14px; }
  .home-card-actions { gap: 10px; }
  .home-product-card .home-card-download, .home-product-card .home-card-detail { min-height: 44px !important; }
  .home-card-meta { grid-template-columns: 1fr 1fr; gap: 14px 16px; }
  .home-card-meta dt .home-card-symbol { display: block; }
}
@media (prefers-reduced-motion: reduce) {
  .home-product-card, .home-product-card *, .home-product-card *::before, .home-product-card *::after { transition: none !important; }
}

/* Screenshot lightbox close: self-drawn, centered, with hover/active/focus states. */
.shot-lightbox .shot-lightbox-close {
  position: fixed !important; display: grid !important; place-items: center; padding: 0 !important; z-index: 2;
  top: 20px !important; right: 20px !important;
  width: 44px !important; height: 44px !important; border: 0 !important; border-radius: 12px !important;
  color: #fff !important; background: rgb(255 255 255 / 14%) !important;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 20%) !important;
  backdrop-filter: blur(10px); cursor: pointer;
  transition: background-color .18s ease, box-shadow .18s ease !important;
}
.shot-lightbox .shot-lightbox-close svg { display: block; width: 20px; height: 20px; transition: transform .22s cubic-bezier(.2,.7,.2,1); }
.shot-lightbox .shot-lightbox-close:hover { background: rgb(255 255 255 / 26%) !important; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 34%) !important; }
.shot-lightbox .shot-lightbox-close:hover svg { transform: rotate(90deg); }
.shot-lightbox .shot-lightbox-close:active { background: rgb(255 255 255 / 20%) !important; }
.shot-lightbox .shot-lightbox-close:focus-visible { outline: 2px solid #fff !important; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .shot-lightbox .shot-lightbox-close svg { transition: none; } }