/* MxSmith — the same family as the MxScout, MxCraft and Tandem sites (style.css is the shared system),
   a teal accent of its own. Only what the shared system does not have lives here. */

:root { --accent: #3DD6B5; --glow: rgba(61,214,181,0.15); --ok: #6EE7B7; --warn: #F2B33D; --bad: #FF8A8A;
  --scout: #F2B33D; --craft: #8FB4FF; --tandem: #FF8A5B; }

/* PL/EN: every text is written twice, the <html data-lang> attribute shows one of them */
html[data-lang="pl"] [data-l="en"], html[data-lang="en"] [data-l="pl"] { display: none !important; }
.lang-switch { display: inline-flex; padding: 3px; border: 1px solid rgba(255,255,255,0.14); border-radius: 999px; }
.lang-switch button { font: 500 12.5px var(--mono); letter-spacing: .04em; color: var(--muted); background: none; border: 0; padding: 6px 11px; border-radius: 999px; cursor: pointer; }
.lang-switch button[aria-pressed="true"] { background: rgba(255,255,255,0.08); color: var(--text); }

.mockup-note { font-family: var(--mono); font-size: 11.5px; color: var(--faint); text-align: center; padding: 8px; border-bottom: 1px solid var(--border); position: relative; z-index: 6; }

/* brand */
.brand-name b { color: var(--accent); font-weight: 500; }
/* lockup: mark 40, gap 0.12 h, "smith" in the display face with its x-height on the mark's letters (canvas "MxSmith logo") */
.topbar .brand { gap: 5px; }
.topbar .brand-mark { width: 40px; height: 40px; }
.topbar .brand-name { font-family: var(--display); font-weight: 600; font-size: 30px; line-height: 1; letter-spacing: -0.02em; }
.foot-brand { gap: 5px; }
.foot-brand .brand-mark { width: 24px; height: 24px; }
.foot-brand .mono { font-size: 16px; font-weight: 500; }
.nav { gap: 26px; }
.p2 { background: rgba(61,214,181,0.12); color: var(--accent); border-color: rgba(61,214,181,0.3); }
.badge-ai { background: rgba(61,214,181,0.12); color: var(--accent); border: 1px solid rgba(61,214,181,0.3); }
.badge.ok { background: rgba(110,231,183,0.12); color: var(--ok); border: 1px solid rgba(110,231,183,0.3); }
.badge.warn { background: rgba(242,179,61,0.14); color: var(--warn); border: 1px solid rgba(242,179,61,0.3); }
.badge.you { background: rgba(255,255,255,0.06); color: var(--text-2); border: 1px solid rgba(255,255,255,0.14); }
@media (max-width: 560px) { .topbar .brand { gap: 4px; } .topbar .brand-mark { width: 34px; height: 34px; } .topbar .brand-name { font-size: 26px; } }

/* ---------- hero: three scenes in one window, radio tabs, a script only advances them ---------- */
.hero { padding-bottom: 40px; }
.hero h1 { font-size: clamp(42px, 5.2vw, 72px); }
.hero-visual { min-height: 560px; }
.scene-input { position: absolute; opacity: 0; pointer-events: none; }
.demo-tabs { display: flex; gap: 4px; padding: 10px 10px 0; border-bottom: 1px solid var(--border); background: var(--bg); overflow-x: auto; scrollbar-width: none; }
.demo-tabs::-webkit-scrollbar { display: none; }
.demo-tabs label { font-family: var(--mono); font-size: 12px; color: var(--muted); padding: 9px 12px 11px; border-radius: 8px 8px 0 0; cursor: pointer; border: 1px solid transparent; border-bottom: 0; position: relative; top: 1px; white-space: nowrap; }
.demo-tabs label:hover { color: var(--text); }
.window:has(#sc1:checked) [for="sc1"], .window:has(#sc2:checked) [for="sc2"], .window:has(#sc3:checked) [for="sc3"] { color: var(--accent); background: var(--panel); border-color: var(--border); }
.scene { display: none; flex: 1; padding: 20px 20px 16px; flex-direction: column; gap: 14px; min-height: 0; font-size: 13.5px; animation: rise .5s cubic-bezier(.2,.7,.2,1) both; }
.window:has(#sc1:checked) .scene-1, .window:has(#sc2:checked) .scene-2, .window:has(#sc3:checked) .scene-3 { display: flex; }
.scene .who { font-family: var(--mono); font-size: 11px; color: var(--faint); letter-spacing: .06em; text-transform: uppercase; }
.msg { border-radius: 12px; padding: 12px 14px; line-height: 1.5; max-width: 92%; }
.msg.q { align-self: flex-end; background: rgba(255,255,255,0.07); color: var(--text); border: 1px solid rgba(255,255,255,0.08); }
.msg.a { align-self: flex-start; background: var(--surface-2); border: 1px solid var(--border); color: var(--text-2); }
.msg.a strong { color: var(--text); }
.msg .ev { margin: 10px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 5px; font-family: var(--mono); font-size: 11.5px; color: var(--muted); }
.msg .ev li::before { content: "→ "; color: var(--accent); }
.msg .ev code { color: var(--text-2); font-family: inherit; }
.scene-foot { margin-top: auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-family: var(--mono); font-size: 11px; color: var(--faint); }
.scene-foot .mono { margin-left: auto; color: var(--faint); }
.ticket { background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; }
.ticket .id { font-family: var(--mono); font-size: 11.5px; color: var(--muted); }
.ticket h4 { margin: 0; font-size: 15px; font-weight: 600; color: var(--text); font-family: var(--sans); }
.ticket .meta { font-size: 12.5px; color: var(--muted); }
.verdict { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; align-items: baseline; padding: 12px 14px; border-radius: 12px; border: 1px solid rgba(110,231,183,0.3); background: rgba(110,231,183,0.06); }
.verdict .k { font-family: var(--mono); font-size: 11px; color: var(--muted); letter-spacing: .06em; text-transform: uppercase; }
.verdict .v { color: var(--text); font-size: 13.5px; line-height: 1.45; }
.verdict .v strong { color: var(--ok); }
.run { display: flex; flex-direction: column; gap: 8px; }
.run-step { display: grid; grid-template-columns: 22px 1fr auto; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text-2); }
.run-step .dot { width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--faint); display: grid; place-items: center; font-size: 10px; font-family: var(--mono); }
.run-step.done .dot { background: var(--ok); border-color: var(--ok); color: var(--bg); }
.run-step.now { border-color: color-mix(in srgb, var(--accent) 50%, transparent); color: var(--text); }
.run-step.now .dot { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(61,214,181,0.2); }
.run-step .t { font-family: var(--mono); font-size: 11.5px; color: var(--muted); }
.run-step small { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; }
.bar { height: 4px; border-radius: 2px; background: rgba(255,255,255,0.08); overflow: hidden; }
.bar i { display: block; height: 100%; width: 62%; background: var(--accent); }
.scene .typing::after { content: "▍"; color: var(--accent); animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
@container window (max-width: 520px) { .scene { padding: 14px; font-size: 13px; } .msg { max-width: 100%; } }

.hero .stats { margin-top: 56px; }
.hero .stat b { font-size: 30px; }
.hero .stat b small { font-size: 16px; color: var(--muted); font-family: var(--mono); font-weight: 400; margin-left: 6px; }

/* ---------- who it is for ---------- */
.forwho { position: relative; padding: 96px 32px 0; }
.pains { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 16px; }
.pain { display: flex; flex-direction: column; gap: 10px; }
.pain .n { font-family: var(--mono); font-size: 12px; color: var(--faint); }

/* ---------- the three pillars ---------- */
.pillar { position: relative; padding: 120px 32px 0; }
.pillar .head { margin-bottom: 44px; }
.pillar .head .eyebrow b { color: var(--accent); font-weight: 500; margin-right: 10px; }
.pillar .lead { max-width: 760px; }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 48px; align-items: start; }
.split.flip { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
.split .sticky { top: 28px; }
.ticks li strong { color: var(--text); }
.ticks.big li { font-size: 16px; }

/* a generic radio tour: .tour2 > inputs + .tour2-grid; which pane shows follows which input is checked */
.tour2 { position: relative; }
.tour2-input { position: absolute; opacity: 0; pointer-events: none; }
.tour2 .screens { grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr)); }
.tour2 .screen { padding: 13px 14px; font-size: 14.5px; }
.tour2 .shots { margin-top: 14px; }
.tour2 .shot img { aspect-ratio: 16 / 10; object-fit: cover; object-position: top left; }
.tour2:has(#u1:checked) .s-u1, .tour2:has(#u2:checked) .s-u2, .tour2:has(#u3:checked) .s-u3, .tour2:has(#u4:checked) .s-u4,
.tour2:has(#b1:checked) .s-b1, .tour2:has(#b2:checked) .s-b2, .tour2:has(#b3:checked) .s-b3 { display: block; }
.tour2:has(#u1:checked) [for="u1"], .tour2:has(#u2:checked) [for="u2"], .tour2:has(#u3:checked) [for="u3"], .tour2:has(#u4:checked) [for="u4"],
.tour2:has(#b1:checked) [for="b1"], .tour2:has(#b2:checked) [for="b2"], .tour2:has(#b3:checked) [for="b3"] { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 7%, transparent); }
.tour2:has(#u1:checked) [for="u1"] .n, .tour2:has(#u2:checked) [for="u2"] .n, .tour2:has(#u3:checked) [for="u3"] .n, .tour2:has(#u4:checked) [for="u4"] .n,
.tour2:has(#b1:checked) [for="b1"] .n, .tour2:has(#b2:checked) [for="b2"] .n, .tour2:has(#b3:checked) [for="b3"] .n { color: var(--accent); }
.screen:hover { border-color: color-mix(in srgb, var(--accent) 50%, transparent); }
.shot figcaption .badge { vertical-align: middle; margin-right: 8px; }

/* where the documentation lives */
.lives { margin-top: 88px; padding-top: 64px; border-top: 1px solid var(--border); }
.lives .head { margin-bottom: 36px; }
.dest-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); gap: 12px; }
.dest { display: flex; flex-direction: column; gap: 8px; padding: 20px 22px; min-height: 150px; }
.dest .k { font-family: var(--mono); font-size: 12px; color: var(--accent); }
.dest h3 { margin: 0; font-size: 17px; }
.dest p { font-size: 14.5px; }
.dest.show { border-color: color-mix(in srgb, var(--scout) 45%, transparent); }
.dest.show .k { color: var(--scout); }
.lives-note { margin: 18px 0 0; font-size: 15px; color: var(--muted); max-width: 760px; }
.lives-note strong { color: var(--text); font-weight: 600; }

/* the pipeline */
.pipe { display: flex; flex-wrap: wrap; gap: 8px; align-items: stretch; margin: 8px 0 24px; }
.pipe-node { position: relative; flex: 1 1 110px; display: flex; flex-direction: column; gap: 6px; padding: 14px 14px 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--panel); }
.pipe-node .nm { font-family: var(--mono); font-size: 12.5px; color: var(--text); white-space: nowrap; }
.pipe-node .by { font-size: 12px; color: var(--muted); }
.pipe-node.ai { border-color: color-mix(in srgb, var(--accent) 40%, transparent); }
.pipe-node.ai .nm { color: var(--accent); }
.pipe-node.you { border-color: rgba(255,255,255,0.22); }
.pipe-node::after { content: "→"; position: absolute; right: -11px; top: 14px; color: var(--faint); font-family: var(--mono); font-size: 13px; z-index: 1; background: var(--bg); padding: 0 1px; }
.pipe-node:last-child::after { content: none; }
.pipe-auto { flex: 2 1 260px; }
.pipe-auto ul { margin: 4px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 3px; font-size: 12.5px; color: var(--muted); }
.pipe-auto ul li::before { content: "✓ "; color: var(--accent); font-family: var(--mono); }
.evidence { margin-top: 8px; }
.evidence .eyebrow { margin: 8px 0 14px; }
.evidence .chip { font-size: 12.5px; padding: 7px 12px; }
.build-numbers { margin-top: 40px; }
.build-numbers .stat b { font-size: 30px; }
.build-numbers .stat b small { font-size: 14px; color: var(--muted); font-family: var(--mono); font-weight: 400; margin-left: 4px; }
.fine { margin: 10px 0 0; font-family: var(--mono); font-size: 12px; color: var(--faint); }

/* the board and the story: CSS only, no product on screen */
.board-mock { display: flex; flex-direction: column; gap: 16px; }
.board-mock .window { position: relative; inset: auto; }
.bm-story { min-height: 420px; }
.story-row { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 24px 32px; align-items: start; }
.board { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; padding: 12px; flex: 1; }
.col { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.col-h { font-family: var(--mono); font-size: 11px; color: var(--muted); padding: 4px 2px 6px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; gap: 6px; }
.col-h b { color: var(--text); font-weight: 500; }
.col.ai .col-h { color: var(--accent); } .col.you .col-h { color: var(--text); }
.tcard { display: flex; flex-direction: column; gap: 4px; padding: 9px 10px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface-2); }
.tcard .key { font-family: var(--mono); font-size: 10.5px; color: var(--muted); }
.tcard .ttl { color: var(--text); font-size: 12px; line-height: 1.35; }
.tcard .tm { font-family: var(--mono); font-size: 10px; color: var(--faint); line-height: 1.4; }
.tcard.now { border-color: color-mix(in srgb, var(--accent) 55%, transparent); box-shadow: 0 0 0 3px rgba(61,214,181,0.12); }
.tcard.now .tm { color: var(--accent); }
.tcard.done { opacity: .7; }
.story { padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.story h4 { margin: 0; font-size: 15px; font-weight: 600; color: var(--text); }
.st-k { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-top: 6px; }
.crit { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.crit li { display: flex; flex-direction: column; padding: 8px 10px 8px 28px; border: 1px solid var(--border); border-radius: 8px; font-size: 12.5px; color: var(--text-2); position: relative; }
.crit li::before { content: "○"; position: absolute; left: 10px; top: 8px; font-family: var(--mono); color: var(--faint); }
.crit li.ok::before { content: "✓"; color: var(--ok); }
.crit small { font-family: var(--mono); font-size: 10.5px; color: var(--faint); margin-top: 2px; }
.dec { margin: 0; font-size: 12.5px; color: var(--text-2); line-height: 1.5; padding: 6px 10px; border-left: 2px solid var(--accent); }
.st-foot { margin-top: auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-family: var(--mono); font-size: 11px; color: var(--faint); }
.st-foot .mono { margin-left: auto; }
.tools-grid.two { grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); }
.lab .offer-card { min-height: 0; }
@media (max-width: 1000px) { .story-row { grid-template-columns: 1fr; } }
@media (max-width: 700px) { .board { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* our hardware or yours */
.lab { margin-top: 88px; padding-top: 64px; border-top: 1px solid var(--border); }
.lab .head { margin-bottom: 36px; }
.lanes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); gap: 16px; }
.lane { padding: 22px 24px; display: flex; flex-direction: column; gap: 14px; }
.lane .tag { display: block; font-family: var(--mono); font-size: 12px; color: var(--accent); }
.lane.yours { border-color: color-mix(in srgb, var(--accent) 45%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 7%, transparent), transparent 60%), var(--surface); }
.flow { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-family: var(--mono); font-size: 12px; }
.flow span { padding: 7px 10px; border: 1px solid var(--border); border-radius: 8px; color: var(--text-2); background: var(--bg); }
.flow span.l { border-color: color-mix(in srgb, var(--accent) 45%, transparent); color: var(--accent); }
.flow i { color: var(--faint); font-style: normal; }
.lane .ticks li { font-size: 14.5px; }
.secret { margin-top: 16px; padding: 18px 22px; border: 1px dashed rgba(255,255,255,0.18); border-radius: 12px; color: var(--muted); font-size: 15px; display: flex; gap: 14px; align-items: baseline; }
.secret .k { font-family: var(--mono); font-size: 12px; color: var(--accent); white-space: nowrap; }

/* know-how */
.offer-card { display: flex; flex-direction: column; gap: 14px; min-height: 300px; }
.offer-card .tag { font-family: var(--mono); font-size: 12px; color: var(--accent); }
.offer-card h3 { margin: 0; }
.offer-card .ticks { margin-top: auto; padding-top: 8px; }
.offer-card .ticks li { font-size: 14.5px; }
.offer-card.lead-card { border-color: color-mix(in srgb, var(--accent) 45%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 7%, transparent), transparent 60%), var(--surface); }
.offer-card .out { font-family: var(--mono); font-size: 12.5px; color: var(--accent); line-height: 1.5; }
.grid3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 16px; }
.principle { margin-top: 24px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 0 48px; border-top: 1px solid var(--border); }
.principle p { margin: 0; padding: 20px 0; font-size: 15.5px; color: var(--muted); line-height: 1.55; }
.principle p strong { color: var(--text); display: block; margin-bottom: 4px; font-weight: 600; }

/* the example */
.case .numbers { grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); }
.sprints { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 16px; margin-top: 40px; }
.sprint { display: flex; flex-direction: column; gap: 12px; }
.sprint .when { font-family: var(--mono); font-size: 12px; color: var(--accent); }
.sprint h3 { margin: 0; }
.sprint .ticks li { font-size: 14.5px; }
.sprint .ticks li b { font-family: var(--mono); font-weight: 500; color: var(--text); }

/* the tools */
.tools-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); gap: 16px; }
.tool { display: flex; flex-direction: column; gap: 12px; }
.tool-head { display: flex; align-items: center; gap: 12px; }
.tool-head img { width: 30px; height: 30px; }
.tool-head h3 { margin: 0; font-family: var(--mono); font-weight: 500; font-size: 18px; }
.tool-head .st { margin-left: auto; font-family: var(--mono); font-size: 11.5px; color: var(--muted); padding: 4px 9px; border: 1px solid var(--border); border-radius: 999px; white-space: nowrap; }
.tool p { flex: 1; }
.tool a.more { font-family: var(--mono); font-size: 13px; color: var(--accent); }
.tool.scout { border-top: 2px solid var(--scout); } .tool.craft { border-top: 2px solid var(--craft); } .tool.tandem { border-top: 2px solid var(--tandem); }
.tool.plus { border-top: 2px solid var(--accent); }
.trust { display: flex; flex-wrap: wrap; gap: 8px 28px; margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--border); font-family: var(--mono); font-size: 12.5px; color: var(--muted); }
.trust b { color: var(--text); font-weight: 500; }

/* how we start */
.how, .about, .faq, .contact, .case, .tools { position: relative; padding: 120px 32px 0; }
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 0; border-top: 1px solid var(--border); }
.steps > div { padding: 26px 28px 0 0; display: flex; flex-direction: column; gap: 10px; }
.steps .n { font-family: var(--display); font-size: 34px; color: var(--accent); line-height: 1; }
.steps h3 { margin: 0; font-size: 18px; }
.steps p { margin: 0; color: var(--muted); font-size: 15.5px; line-height: 1.55; }
.steps .out { font-family: var(--mono); font-size: 12.5px; color: var(--accent); line-height: 1.5; }

/* about */
.people { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); gap: 16px; }
.person { display: grid; grid-template-columns: 64px 1fr; gap: 20px; align-items: start; }
.avatar { width: 64px; height: 64px; border-radius: 16px; display: grid; place-items: center; font-family: var(--display); font-size: 22px; color: var(--bg); background: var(--accent); letter-spacing: -0.02em; }
.person.m .avatar { background: #8FB4FF; }
.person h3 { margin: 0 0 2px; font-size: 21px; }
.person .role { font-family: var(--mono); font-size: 12.5px; color: var(--accent); margin-bottom: 12px; }
.person.m .role { color: #8FB4FF; }
.person p { font-size: 15.5px; }
.person .links { display: flex; gap: 16px; margin-top: 14px; font-family: var(--mono); font-size: 12.5px; }
.person .links a { color: var(--text-2); border-bottom: 1px solid var(--border); }
.person .links a:hover { color: var(--accent); }
.together { margin-top: 16px; padding: 22px 26px; font-size: 16px; color: var(--text-2); line-height: 1.6; }
.together strong { color: var(--text); }

/* FAQ */
.qa-list { border-top: 1px solid var(--border); }
.qa { border-bottom: 1px solid var(--border); }
.qa summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 24px; padding: 22px 0; font-family: var(--display); font-weight: 600; font-size: 19px; color: var(--text); }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: "+"; font-family: var(--mono); color: var(--accent); }
.qa[open] summary::after { content: "−"; }
.qa p { margin: 0 0 22px; max-width: 760px; color: var(--muted); font-size: 16px; line-height: 1.6; }

/* a contact nudge at the end of a section */
.cta-line { display: flex; flex-wrap: wrap; gap: 16px 24px; align-items: center; justify-content: space-between; margin-top: 44px; padding: 20px 24px; border: 1px solid var(--border); border-radius: 14px; background: color-mix(in srgb, var(--accent) 4%, transparent); }
.cta-line p { margin: 0; color: var(--text); font-size: 16.5px; }

/* contact */
.contact { padding-bottom: 120px; }
.form textarea { min-height: 120px; padding: 12px 14px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.14); background: var(--bg-deep); color: var(--text); font: 16px/1.5 var(--sans); resize: vertical; }
.form select { height: 48px; padding: 0 12px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.14); background: var(--bg-deep); color: var(--text); font: 16px var(--sans); }
.mail { font-family: var(--mono); font-size: 20px; color: var(--accent); margin: 8px 0 0; }
.sent { font-family: var(--mono); font-size: 13px; color: var(--accent); }

@media (max-width: 1000px) { .split, .split.flip { grid-template-columns: 1fr; } .split .sticky { position: static; } }
@media (max-width: 860px) { .hero-visual { min-height: 520px; } }
@media (max-width: 560px) {
  .forwho, .pillar, .how, .about, .faq, .contact, .case, .tools { padding-left: 20px; padding-right: 20px; }
  .hero-visual { min-height: 540px; }
  .person { grid-template-columns: 1fr; }
  .pipe-node::after { content: none; }
  .hero .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* ---------- motion: quiet, once, and off when the system asks ---------- */
/* sections and cards rise into place as they scroll in; the class comes from mxsmith.js, so without it everything is simply visible */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity: 1; transform: none; }
/* the hero tabs: a thin bar runs under the active tab while the scenes advance by themselves */
.demo-tabs label { position: relative; overflow: hidden; }
.demo-tabs label::after { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: var(--accent); opacity: 0; }
.window:has(#sc1:checked) [for="sc1"]::after, .window:has(#sc2:checked) [for="sc2"]::after, .window:has(#sc3:checked) [for="sc3"]::after { opacity: .9; animation: fill 7s linear both; }
.window.manual .demo-tabs label::after { animation: none; opacity: 0; }
@keyframes fill { from { width: 0; } to { width: 100%; } }
/* the step that is running: a soft pulse; the bar grows when the scene opens */
.run-step.now .dot { animation: pulse 1.8s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 3px rgba(61,214,181,0.18); } 50% { box-shadow: 0 0 0 7px rgba(61,214,181,0.06); } }
.bar i { animation: grow 1.4s cubic-bezier(.2,.7,.2,1) both; }
@keyframes grow { from { width: 38%; } to { width: 62%; } }
.scene .ev li { animation: rise .45s cubic-bezier(.2,.7,.2,1) both; }
.scene .ev li:nth-child(2) { animation-delay: .12s; } .scene .ev li:nth-child(3) { animation-delay: .24s; }
.scene .verdict, .scene .run-step { animation: rise .5s cubic-bezier(.2,.7,.2,1) both; }
.scene .run-step:nth-child(2) { animation-delay: .08s; } .scene .run-step:nth-child(3) { animation-delay: .16s; } .scene .run-step:nth-child(4) { animation-delay: .24s; }
/* the board as a running app (mxsmith.js moves the cards; FLIP transforms, a flash on arrival, a fade before the loop restarts) */
.live { display: inline-flex; align-items: center; gap: 7px; color: var(--accent); font-family: var(--mono); font-size: 11px; }
.live i { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); animation: dot 1.6s ease-in-out infinite; }
.live b { font-weight: 500; color: var(--text); }
@keyframes dot { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(.75); } }
.tcard.moving { position: relative; z-index: 2; box-shadow: 0 12px 32px rgba(0,0,0,0.45); }
.tcard.flash { animation: flash 1s ease-out; }
@keyframes flash { 0% { border-color: var(--accent); background: rgba(61,214,181,0.10); } 100% { border-color: var(--border); background: var(--surface-2); } }
.bm-board, .bm-story { transition: opacity .45s ease; }
.bm-board.fade, .bm-story.fade { opacity: 0; }
.crit li.ok { transition: border-color .3s ease; }
/* the board: the card AI is on breathes */
.tcard.now { animation: breathe 2.8s ease-in-out infinite; }
@keyframes breathe { 0%, 100% { box-shadow: 0 0 0 3px rgba(61,214,181,0.12); } 50% { box-shadow: 0 0 0 5px rgba(61,214,181,0.05); } }
/* the tour and the FAQ: a short fade instead of a jump */
.tour2 .shot { animation: fade .4s ease both; }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.qa[open] p { animation: rise .35s cubic-bezier(.2,.7,.2,1) both; }
.qa summary::after { transition: transform .25s ease; display: inline-block; }
.qa[open] summary::after { transform: rotate(180deg); }
/* cards and buttons answer the pointer quietly */
.card { transition: border-color .25s ease, transform .25s ease; }
.dest:hover, .tool:hover, .offer-card:hover { border-color: rgba(255,255,255,0.18); transform: translateY(-2px); }
.screen { transition: border-color .2s ease, background .2s ease, transform .2s ease; }
.screen:hover { transform: translateY(-1px); }
/* the glow behind the hero drifts, slowly */
.glow { animation: drift 26s ease-in-out infinite alternate; }
@keyframes drift { from { transform: translate(0, 0); } to { transform: translate(-60px, 40px); } }
@media (prefers-reduced-motion: reduce) {
  .scene, .typing::after, .demo-tabs label::after, .run-step.now .dot, .bar i, .scene .ev li, .scene .verdict, .scene .run-step, .tcard.now, .tcard.flash, .live i, .tour2 .shot, .qa[open] p, .glow { animation: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .card, .screen, .qa summary::after { transition: none; }
}