/* AI-Author: OpenAI Codex */
#product-opening { min-height: 85svh; display: flex; align-items: center; padding-top: 10rem; }
#product-opening h1 { max-width: 10ch; }
#vader, #sparrow { scroll-margin-top: 4rem; }
.product-mark { margin-bottom: 3rem; flex-wrap: wrap; }
.section--white .product-mark .by { color: var(--ink-500); }
.product-mark .mark { object-fit: contain; }
.product-details { display: grid; gap: 4rem; margin-top: 5rem; }
.product-details > div { min-width: 0; }
.product-details .steps { margin-top: 2rem; }
.capabilities { list-style: none; padding: 0; margin: 2rem 0 0; }
.capabilities li { border-top: 1px solid var(--ink-200); padding: 1.6rem 0; }
.section--black .capabilities li { border-color: var(--ink-800); }
.product-note { margin-top: 4rem; }
/* Client request 2026-10-04: How it works / What it does 10% larger; note under Vader centred. */
.product-details .h-md { font-size: calc(var(--fs-md) * 1.1); }
.product-details :is(.steps li, .capabilities li) { font-size: 1.1em; }
.product-details .steps li::before { font-size: calc(1.6rem * 1.1); }
.product-note { margin-left: auto; margin-right: auto; text-align: center; }
.placeholder { border: 1px dashed var(--ink-500); padding: 1rem 1.25rem; margin-top: 3rem; font-size: .95rem; }
@media (min-width: 900px) { .product-details { grid-template-columns: 1.2fr 1fr; gap: 8%; } }

/* Existing product marks joined by one quiet, end-to-end stroke. */
.opening-layout { display: grid; gap: 4rem; align-items: center; }
.opening-copy { min-width: 0; }
.product-connection { display: grid; grid-template-columns: auto 1fr auto; align-items: start; gap: 1.5rem; width: 100%; max-width: 48rem; margin-inline: auto; }
.connection-mark { --slot: clamp(5.6rem, 11.8vw, 10.1rem); display: grid; grid-template-rows: var(--slot) auto; justify-items: center; align-items: center; gap: 1.6rem; font: 400 clamp(1.9rem, 2.6vw, 2.6rem) var(--serif); }
.connection-mark img { width: clamp(5rem, 10.5vw, 9rem); height: auto; }
/* Client 2026-10-05: visual 1.5x larger; Sparrow one step larger than Vader (optical balance). */
.connection-mark img[src*="sparrow"] { width: clamp(5.6rem, 11.8vw, 10.1rem); }
.connection-line { height: 1px; margin-top: calc(clamp(5.6rem, 11.8vw, 10.1rem) / 2);   /* centred on the marks' shared slot */ background: var(--line-l); transform-origin: left center; animation: product-connect 2.8s cubic-bezier(.25, .1, .25, 1) both; }
.capabilities strong { font-weight: 600; }
.setup-capabilities { max-width: 60ch; margin-top: 3rem; }
@keyframes product-connect { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.no-js .connection-line { animation: none; }
@media (prefers-reduced-motion: reduce) { .connection-line { animation: none; } }
@media (min-width: 1000px) {
  .opening-layout { grid-template-columns: 1.1fr 1fr; gap: 5%; }
}
/* Opening is dark since Matin's final background (2026-10-07): dark-theme teal for the connecting line. */
#product-opening.section--black .connection-line { background: var(--line-d); }
/* Phone design pass (2026-10-13): tighter inner gaps. */
@media (max-width: 860px) {
  .product-details { gap: 2.5rem; margin-top: 3rem; }
  .product-note { margin-top: 2.5rem; }
  .setup-capabilities { margin-top: 2rem; }
}