/* Visual business stories, using the ecosystem theme. */
.simple-nav { display:flex; justify-content:space-between; gap:20px; padding:25px 0; border-bottom:1px solid var(--line); font-size:13px; }
.simple-nav span { color:var(--ink-3); }
.simple-nav a:hover,.simple-end a:hover { color:var(--accent); }
.simple-head { padding:48px 0 36px; }
.eyebrow { margin:0 0 8px; color:var(--ink-3); font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; }
.simple-head h1 { font-size:clamp(30px,4vw,48px); line-height:1.12; letter-spacing:-.055em; font-weight:500; margin:0; }
.simple-head > p:last-child { color:var(--ink-2); font-size:17px; margin:15px 0 0; }
main { display:grid; gap:28px; }
.story { --story-accent:#6250c5; --story-tint:color-mix(in srgb,var(--story-accent) 9%,var(--bg)); border:1px solid var(--line); border-radius:20px; overflow:hidden; background:var(--story-tint); }
.company-story { --story-accent:#22816d; }
.story-head { display:flex; align-items:center; gap:16px; padding:25px 28px 10px; }
.case-number { display:grid; place-items:center; width:38px; height:38px; flex:none; border:1px solid color-mix(in srgb,var(--story-accent) 30%,transparent); border-radius:50%; font-family:var(--mono); font-size:12px; color:var(--ink-2); }
.story-head .eyebrow { margin-bottom:4px; }
h2 { margin:0; font-size:clamp(22px,2.4vw,29px); letter-spacing:-.04em; font-weight:500; line-height:1.2; }
.story-tag { margin-left:auto; font-size:11px; color:var(--ink-2); white-space:nowrap; border:1px solid var(--line); border-radius:20px; padding:5px 12px; }
.story-steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); padding:5px 20px 26px; gap:18px; }
.step { min-width:0; position:relative; padding:0 14px; }
.step:not(:last-child)::after { content:'→'; position:absolute; right:-20px; top:70px; font-size:24px; color:var(--ink-3); }
.step svg { width:100%; height:150px; display:block; margin:12px 0 16px; color:var(--story-accent); }
.step-number { display:inline-grid; place-items:center; width:22px; height:22px; background:var(--bg); border:1px solid var(--line); border-radius:50%; font-family:var(--mono); font-size:11px; margin-bottom:10px; color:var(--ink-2); }
h3 { margin:0 0 5px; font-size:17px; font-weight:500; line-height:1.35; letter-spacing:-.025em; }
.step p { margin:0; font-size:14px; line-height:1.5; color:var(--ink-2); max-width:29ch; }
.paper,.bot-fill { fill:var(--bg); stroke:currentColor; stroke-width:2; }
.soft-line { stroke:currentColor; stroke-width:2; stroke-linecap:round; opacity:.35; }
.accent-line { stroke:currentColor; stroke-width:4; stroke-linejoin:round; stroke-linecap:round; }
.ticket,.table-fill,.share-fill { fill:color-mix(in srgb,var(--story-accent) 13%,var(--bg)); stroke:currentColor; stroke-width:1.5; }
.ticket-dash { stroke:currentColor; stroke-width:1.5; stroke-dasharray:3 3; }
.ticket-text { fill:currentColor; font:500 22px var(--sans); }
.alarm { fill:var(--bg); stroke:var(--accent); stroke-width:2; color:var(--accent); }
.private-fill { fill:var(--bg); stroke:var(--line-strong); stroke-width:1.5; }
.lock-fill { fill:color-mix(in srgb,var(--story-accent) 14%,var(--bg)); stroke:currentColor; stroke-width:2; }
.svg-label { fill:var(--ink-2); font:500 12px var(--sans); }
.money-strip { display:flex; align-items:center; gap:12px; padding:17px 28px; border-top:1px solid var(--line); background:var(--bg); }
.money-icon { font-size:18px; color:var(--story-accent); border:1px solid currentColor; border-radius:50%; width:28px; height:28px; display:grid; place-items:center; flex:none; }
.money-strip p { margin:0; font-size:14px; color:var(--ink-2); }
.money-strip strong { font-weight:500; color:var(--ink); }
.simple-end { display:flex; justify-content:space-between; align-items:center; gap:20px; margin:26px 0 0; font-size:13px; }
.simple-end p { margin:0; color:var(--ink-3); }
.uc-page .colophon { margin-top:32px; }
:root[data-theme="dark"] .paid-story { --story-accent:#b2a3ff; }
:root[data-theme="dark"] .company-story { --story-accent:#6ecab3; }
@media(prefers-color-scheme:dark) { :root:not([data-theme="light"]) .paid-story { --story-accent:#b2a3ff; } :root:not([data-theme="light"]) .company-story { --story-accent:#6ecab3; } }
@media(max-width:700px) {
.simple-head { padding:32px 0; }
.simple-head > p:last-child { font-size:15px; }
.story-head { padding:22px 20px 8px; align-items:flex-start; gap:12px; }
.story-tag { display:none; }
.story-steps { grid-template-columns:1fr; gap:10px; padding:0 20px 22px; }
.step { display:grid; grid-template-columns:110px 1fr; column-gap:14px; padding:17px 0; align-content:center; }
.step svg { grid-column:1; grid-row:1 / 4; width:110px; height:100px; margin:0; align-self:center; }
.step-number { grid-column:2; margin-bottom:6px; }
.step h3,.step p { grid-column:2; }
.step h3 { font-size:16px; }
.step p { font-size:13px; }
.step:not(:last-child)::after { content:''; top:auto; bottom:-5px; left:0; right:0; border-bottom:1px solid var(--line); }
.money-strip { padding:16px 20px; align-items:flex-start; }
.simple-end { align-items:flex-start; flex-direction:column; gap:12px; }
}
@media(max-width:370px) { .step { grid-template-columns:80px 1fr; gap:0 12px; } .step svg { width:80px; } .case-number { display:none; } }
@media print { .story { break-inside:avoid; } .mode { display:none; } }

.travel-story { --story-accent:#b56320; scroll-margin-top:24px; }
:root[data-theme="dark"] .travel-story { --story-accent:#eab67c; }
@media(prefers-color-scheme:dark) { :root:not([data-theme="light"]) .travel-story { --story-accent:#eab67c; } }