/* /showings/float-trains only (owner 2026-10-29, from the mock-up in Knowledge Base\Drafts\float-trains-mockup.html). */
.ft-key { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin:-44px 0 0; position:relative; }
.ft-key div { background:var(--panel); border:1px solid var(--line); border-top:4px solid var(--gold); border-radius:6px; padding:16px 18px; box-shadow:0 6px 18px rgba(23,34,44,.08); }
.ft-key b { display:block; font-family:Oswald, sans-serif; font-size:26px; line-height:1.1; }
.ft-key span { color:var(--muted); font-size:14px; }
.ft-quote { border-left:4px solid var(--gold); background:var(--panel); padding:16px 20px; margin:20px 0; font-size:19px; }
.ft-quote small { display:block; font-size:14px; color:var(--muted); margin-top:6px; }
.ft-steps { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:18px; }
.ft-card { background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:18px; }
.ft-card svg { width:100%; height:auto; display:block; margin-bottom:12px; }
.ft-card h3 { margin:0 0 8px; }
.ft-card .n { display:inline-block; width:28px; height:28px; border-radius:50%; background:var(--gold); color:var(--ink); font:600 15px/28px Oswald, sans-serif; text-align:center; margin-right:8px; }
.ft-card p { margin:0; color:var(--muted); font-size:16px; }
.ft-split { display:grid; grid-template-columns:1.25fr 1fr; gap:28px; align-items:start; }
.ft-fig { background:var(--panel); border:1px solid var(--line); border-radius:8px; overflow:hidden; margin:0; }
.ft-fig svg { display:block; width:100%; height:auto; }
.ft-fig figcaption { padding:12px 16px; font-size:14px; color:var(--muted); border-top:1px solid var(--line); }
.ft-lock { background:var(--ink); color:#fff; border-radius:8px; padding:20px 22px; margin-top:18px; }
.ft-lock h3 { color:var(--gold); margin-top:0; }
.ft-lock p { color:#cfd6dd; margin:0 0 14px; font-size:16px; }
.ft-lock .btn.line { color:#fff; }
.ft-ticks { padding-left:0; list-style:none; } .ft-ticks li { padding-left:26px; position:relative; margin:6px 0; }
.ft-ticks li::before { content:""; position:absolute; left:4px; top:9px; width:10px; height:10px; background:var(--gold); transform:rotate(45deg); }
.ft-cta { background:var(--panel); border-top:1px solid var(--line); margin-top:56px; padding:40px 0 56px; text-align:center; }
.ft-cta h2 { margin-top:0; }
@media (max-width:860px) { .ft-key { grid-template-columns:repeat(2,1fr); } .ft-steps, .ft-split { grid-template-columns:1fr; } }
/* the float-map cartoon full width, the three floats under it (owner 2026-10-29) */
.ft-wide { margin:18px 0 0; }
.ft-below { margin-top:22px; }
.ft-floats { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:14px; }
.ft-float { background:var(--panel); border:1px solid var(--line); border-top:5px solid var(--gold); border-radius:8px; padding:18px 20px; }
.ft-float h3 { margin:0 0 6px; } .ft-float h3 span { display:block; font-size:15px; color:var(--muted); letter-spacing:.04em; }
.ft-float .au { font:600 26px/1.2 Oswald, sans-serif; color:#C0392B; margin-bottom:8px; }
.ft-float p { margin:0; color:var(--muted); font-size:16px; }
@media (max-width:860px) { .ft-floats { grid-template-columns:1fr; } }
.ft-note { font-size:14px; color:var(--muted); }
.ft-photos { grid-template-columns:repeat(2,1fr); margin-top:14px; }
/* Why the structure matters: four steps + the 3D block with the same numbers (owner 2026-10-30) */
.ft-steps4 { grid-template-columns:repeat(4,1fr); }
@media (max-width:1100px) { .ft-steps4 { grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px) { .ft-steps4 { grid-template-columns:1fr; } }
.ft-think { padding-left:22px; } .ft-think li { margin:8px 0; }