/* DigitalCashCode shared layer: reset, accessibility, shared chrome (header + footer), entrance motion.
   Products never edit this file; they only set the --chrome-* tokens inside their own scope. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; }
img, video, svg { display: block; max-width: 100%; }
img, video { height: auto; }
button { font: inherit; }
a { color: inherit; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 14px; background: var(--chrome-accent, #18191B); color: var(--chrome-accent-fg, #fff); text-decoration: none; }
.skip:focus { top: 12px; }
:focus-visible { outline: 2px solid var(--focus, #18191B); outline-offset: 3px; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { width: min(1200px, 100% - 48px); margin-inline: auto; }
@media (max-width: 600px) { .wrap { width: calc(100% - 32px); } }

/* ---- shared chrome: product bar (used on every product landing) ---- */
.pbar { position: relative; z-index: 40; height: 56px; background: var(--chrome-bg); color: var(--chrome-fg); border-bottom: 1px solid var(--chrome-rule); font: 500 15px/1 system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; }
@media (min-width: 1024px) { .pbar { position: sticky; top: 0; } }
.pbar .wrap { height: 100%; display: flex; align-items: center; gap: 14px; }
.pbar__house { color: var(--chrome-muted); text-decoration: none; letter-spacing: .01em; font-size: 13px; white-space: nowrap; }
.pbar__house:hover { color: var(--chrome-fg); }
.pbar__div { width: 1px; height: 22px; background: var(--chrome-rule); }
.pbar__nav { margin-left: auto; display: flex; gap: 22px; }
.pbar__nav a { color: var(--chrome-muted); text-decoration: none; }
.pbar__nav a:hover, .pbar__nav a[aria-current] { color: var(--chrome-accent-hi, var(--chrome-fg)); }
@media (max-width: 900px) { .pbar__nav { display: none; } }

/* ---- shared chrome: footer (locked) ---- */
.sfoot { background: var(--chrome-bg); color: var(--chrome-muted); border-top: 1px solid var(--chrome-rule); font: 14px/1.6 system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; padding: 34px 0 40px; }
.sfoot a { color: var(--chrome-fg); text-underline-offset: 3px; }
.sfoot__row { display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: baseline; }
.sfoot__fine { margin: 14px 0 0; font-size: 12.5px; max-width: 900px; }

/* ---- entrance motion (sections and cards) ---- */
.in { opacity: 0; transform: translateY(18px); transition: opacity .56s cubic-bezier(.16,.84,.24,1), transform .56s cubic-bezier(.16,.84,.24,1); transition-delay: calc(var(--d, 0) * 70ms); }
.in.is-in { opacity: 1; transform: none; }
.no-js .in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .in { opacity: 1; transform: none; transition: none; } }

/* ---- prototype-only review tools (not part of the final site) ---- */
.proto { position: fixed; left: 12px; bottom: 12px; z-index: 90; font: 600 12px/1.2 system-ui, sans-serif; }
@media (max-width: 760px) { .proto { bottom: 72px; } }
.proto > button { background: #111; color: #fff; border: 1px solid #444; border-radius: 999px; padding: 8px 12px; cursor: pointer; }
.proto__panel { display: none; margin-bottom: 8px; background: #111; color: #eee; border: 1px solid #444; border-radius: 8px; padding: 10px; width: 240px; }
.proto.open .proto__panel { display: grid; gap: 6px; }
.proto__panel button { background: #222; color: #fff; border: 1px solid #555; border-radius: 4px; padding: 7px 8px; text-align: left; cursor: pointer; }
.proto__panel p { margin: 0 0 4px; font-weight: 400; color: #bbb; }
.toast { position: fixed; left: 50%; bottom: 84px; transform: translateX(-50%) translateY(20px); opacity: 0; z-index: 95; background: #111; color: #fff; padding: 10px 14px; border-radius: 6px; font: 14px/1.3 system-ui, sans-serif; transition: opacity .2s, transform .2s; pointer-events: none; }
.toast.show { opacity: 1; transform: translateX(-50%); }