.sayf-card-section { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); gap:64px; align-items:center; padding:64px 0; margin-top:32px; border-top:1px solid #32353e; border-bottom:1px solid #23252a; scroll-margin-top:100px; }
.sayf-card-copy h2 { font-size:40px; line-height:1.15; letter-spacing:0; margin:14px 0 22px; }
.sayf-card-copy>p { max-width:36ch; font-size:17px; line-height:1.8; margin:0 0 26px; }
.sayf-card-copy .sayf-card-note { font-size:12px; color:#8a8f98; line-height:1.8; margin:18px 0 0; }
.sayf-card-preview { margin:0; padding:24px 12px 0; min-width:0; }
.sayf-card-face { --metal-light:#454957; --metal-mid:#20232c; --metal-dark:#101218; position:relative; width:100%; max-width:440px; aspect-ratio:1.586; margin:0 auto; border-radius:16px; overflow:hidden; box-sizing:border-box; border:1px solid #666b7b; background:linear-gradient(125deg,var(--metal-light),var(--metal-mid) 42%,var(--metal-dark) 74%,var(--metal-mid)); box-shadow:0 18px 36px -20px #000,0 1px 0 #ffffff22 inset; color:#f4f5fa; }
.sayf-card-face::after { content:""; position:absolute; inset:0; pointer-events:none; background:repeating-linear-gradient(0deg,#ffffff03 0,#ffffff03 1px,transparent 1px,transparent 3px); }
.sayf-card-series { position:absolute; left:7%; top:12%; font:11px var(--font-mono); color:#e4e7f0; letter-spacing:0; }
.sayf-card-mark { position:absolute; right:6%; top:9%; width:11%; height:auto; }
.sayf-card-chip { position:absolute; left:7%; top:40%; width:11%; height:auto; opacity:.85; }
.sayf-card-word { position:absolute; left:7%; bottom:11%; font:500 26px var(--font-sans); letter-spacing:0; }
.sayf-card-detail { position:absolute; right:7%; bottom:13%; font:9px var(--font-mono); letter-spacing:0; color:#d0d6e0; }
.sayf-card-preview figcaption { display:flex; justify-content:space-between; gap:16px; width:100%; max-width:440px; margin:24px auto 10px; color:#8a8f98; font-size:12px; }
#sayf-card-finish { color:#d0d6e0; }
.sayf-card-swatches { display:flex; justify-content:center; gap:4px; padding-top:4px; }
.sayf-card-swatches[hidden] { display:none; }
.sayf-card-swatches button { display:grid; place-items:center; width:44px; height:44px; padding:0; border:0; border-radius:50%; background:transparent; cursor:pointer; }
.sayf-card-swatches button span { display:block; width:24px; height:24px; border:1px solid #ffffff44; border-radius:50%; background:linear-gradient(135deg,var(--metal-light),var(--metal-dark)); transition:box-shadow .18s ease; }
.sayf-card-swatches button[aria-pressed="true"] span { box-shadow:0 0 0 4px #010102,0 0 0 5px #a5adff; }
.sayf-card-swatches button:hover span { border-color:#fff; }
.sayf-card-swatches button:focus-visible { outline:2px solid #a5adff; outline-offset:0; }
.sayf-api-row { padding:32px 0; }
.sayf-api-preview h2 { font-size:24px; letter-spacing:0; margin:12px 0; }
.sayf-api-preview p { max-width:64ch; font-size:14px; line-height:1.8; }
[data-finish="obsidian"] { --metal-light:#454957; --metal-mid:#20232c; --metal-dark:#101218; }
[data-finish="emerald"] { --metal-light:#407661; --metal-mid:#1d4034; --metal-dark:#10251e; }
[data-finish="ruby"] { --metal-light:#844754; --metal-mid:#45232c; --metal-dark:#28151c; }
[data-finish="sapphire"] { --metal-light:#576ca7; --metal-mid:#2a365b; --metal-dark:#171e36; }
[data-finish="gold"] { --metal-light:#9e865a; --metal-mid:#5c4a2e; --metal-dark:#332a1d; }
[data-finish="silver"] { --metal-light:#8c97aa; --metal-mid:#505c70; --metal-dark:#2c3441; }
@media(max-width:800px) {
  .sayf-card-section { grid-template-columns:1fr; gap:28px; padding:40px 0; }
  .sayf-card-copy h2 { font-size:32px; }
  .sayf-card-preview { padding:12px 0 0; }
}
@media(max-width:380px) {
  .sayf-card-swatches { display:grid; grid-template-columns:repeat(3,44px); gap:2px 10px; }
  .sayf-card-word { font-size:22px; }
  .sayf-card-detail { font-size:8px; }
}
@media(prefers-reduced-motion:reduce) { .sayf-card-swatches button span { transition:none; } }