/* DeStore site system (2026-10-21, from the owner's landing reference).
   One file for every public page: tokens (dark default, light on html[data-theme=light]),
   the floating nav, buttons, the footer, grain, and the old page tokens mapped onto the new ones. */
:root{
  --bg:#0a0a0d; --d1:#0d0d10; --d2:#141418; --d3:#1c1c22; --d4:#202128;
  --border:#222230; --border2:#2e2f3a;
  --text:#f0f0f5; --text2:#a0a0b0; --text3:#666678;
  --royal:#321B68; --orchid:#6A14DB; --violet:#B354F1; --magenta:#C2188F;
  --green:#28B79D; --mint:#28B79D; --orange:#FF9F46; --gold:#D4AF37;
  --accent-text:#B354F1;
  --nav-bg:rgba(13,13,16,.78);
  --on-brand:#fff; --on-brand-2:rgba(255,255,255,.78); --on-brand-3:rgba(255,255,255,.55);
  --mock:#fff; --mock-ink:#1a1a22; --mock-mute:#6b6b80; --mock-line:#ecebf3; --mock-soft:#f5f3fb;
  --font:"Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:"JetBrains Mono", ui-monospace, Menlo, monospace;
  --wrap:1120px;
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  color-scheme:dark;
}
:root[data-theme="light"]{
  --bg:#f5f5f8; --d1:#fff; --d2:#fff; --d3:#f0f0f4; --d4:#e8e8ee;
  --border:#e0e0e8; --border2:#d0d0da;
  --text:#1a1a22; --text2:#555566; --text3:#888898;
  --green:#1a9a82; --mint:#1a9a82; --orange:#e08830; --accent-text:#6A14DB;
  --nav-bg:rgba(255,255,255,.85);
  color-scheme:light;
}

/* The pages built before this system read these names; they now follow the theme. */
html body, html body[data-theme]{
  --bg:inherit; --d1:inherit; --d2:inherit; --d3:inherit; --nav-bg:inherit;
  --bdr:var(--border2); --muted:var(--text3); --dim:var(--text2); --txt:var(--text);
  --paper:var(--bg); --line:var(--border2); --soft:var(--text2); --rule:var(--border2);
  --v:var(--violet); --o:var(--orchid);
}
html{background:var(--bg)}
html body, html body[data-theme]{background:var(--bg);color:var(--text);font-family:var(--font);-webkit-font-smoothing:antialiased;overflow-x:hidden}
:focus-visible{outline:2px solid var(--violet);outline-offset:3px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Buttons: pill, orchid to violet at 135deg, violet glow */
.sb{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:700 15px/1 var(--font);padding:14px 22px;border-radius:100px;white-space:nowrap;transition:box-shadow .25s,transform .2s,background .2s;border:1px solid transparent;cursor:pointer;text-decoration:none}
.sb-brand{background:linear-gradient(135deg,var(--orchid),var(--violet));color:#fff}
.sb-brand:hover{box-shadow:0 0 0 1px rgba(179,84,241,.4),0 10px 34px rgba(179,84,241,.45);transform:translateY(-1px)}
.sb-ghost{border-color:var(--border2);color:var(--text);background:transparent}
.sb-ghost:hover{background:var(--d4)}
.sb-lg{padding:18px 28px;font-size:16px}

/* The floating nav */
.sn{position:fixed;left:0;right:0;top:14px;z-index:400;padding:0 max(16px,env(safe-area-inset-left,0px));font-family:var(--font)}
.sn-in{max-width:var(--wrap);margin-inline:auto;display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--nav-bg);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--border);border-radius:100px;padding:8px 8px 8px 22px}
.sn-logo{display:flex;align-items:center;color:var(--text);text-decoration:none}
.ds-logo{display:block;height:20px;width:auto;color:var(--text)}
.ds-logo .dot{fill:var(--violet)}
.sn-links{display:flex;gap:2px;font-size:14.5px;font-weight:500;color:var(--text2)}
.sn-links a{padding:9px 14px;border-radius:100px;color:var(--text2);text-decoration:none;transition:color .2s,background .2s}
.sn-links a:hover,.sn-links a[aria-current]{color:var(--text);background:var(--d4)}
.sn-cta{display:flex;gap:6px;align-items:center}
.sn-cta .sb{padding:11px 18px;font-size:14px}
.sn-ic{width:40px;height:40px;border-radius:100px;border:1px solid var(--border);background:transparent;color:var(--text2);display:grid;place-items:center;cursor:pointer;padding:0}
.sn-ic:hover{color:var(--text)}
.sn-menu{display:none}
.i-sun{display:none}
:root[data-theme="light"] .i-sun{display:block}
:root[data-theme="light"] .i-moon{display:none}
.sn-drop{display:none;max-width:var(--wrap);margin:8px auto 0;background:var(--d2);border:1px solid var(--border);border-radius:24px;padding:10px;box-shadow:0 24px 60px rgba(0,0,0,.35)}
.sn.open .sn-drop{display:grid;gap:2px}
.sn-drop a{padding:13px 16px;border-radius:14px;color:var(--text);text-decoration:none;font-weight:600;font-size:16px}
.sn-drop a:hover{background:var(--d4)}
.sn-drop .sb{margin-top:6px}

/* Grain, for any brand-gradient block */
.grain{position:relative;isolation:isolate}
.grain::after{content:"";position:absolute;inset:0;z-index:-1;opacity:.22;mix-blend-mode:overlay;pointer-events:none;background-image:var(--grain)}

/* The footer */
.sf-pad{padding:0 max(16px,env(safe-area-inset-left,0px))}
.sf{max-width:var(--wrap);margin:0 auto;padding:80px 0 48px;display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));gap:40px;font:15px/1.6 var(--font);color:var(--text2)}
.sf h4{margin:0 0 16px;font-size:11.5px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--text3)}
.sf ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.sf a{color:var(--text2);text-decoration:none}
.sf a:hover{color:var(--text)}
.sf p{margin:0;max-width:34ch}
.sf .sf-brand{display:grid;gap:18px;align-content:start}
.sf .mail{font:400 14px var(--mono);color:var(--text);user-select:all}
.sf .copy{grid-column:1/-1;border-top:1px solid var(--border);padding-top:28px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:13.5px;color:var(--text3)}

/* Old page furniture the new nav and footer replace */
.urgency-bar,.theme-toggle,.nav-drawer,body > nav:not(.sn){display:none!important}

@media (max-width:980px){
  .sn-links{display:none}
  .sn-menu{display:grid}
  .sf{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sf .sf-brand{grid-column:1/-1}
}
@media (max-width:600px){
  .sn-in{padding-left:16px}
  .sn-cta .sb-ghost{display:none}
  .sn-cta .sb{padding:11px 14px}
  .sf{grid-template-columns:minmax(0,1fr)}
}
/* Reduce motion stops everything that moves by itself; the home page's checkout (.dp-stage) and builder (.ap-stage) only move as the visitor scrolls them. */
@media (prefers-reduced-motion:reduce){*:not(.dp-stage *):not(.ap-stage *){animation:none!important;transition:none!important}html{scroll-behavior:auto}}

/* The long-form articles (connected-packaging, manage-your-labels, ai-product-page-builder) were drawn on paper:
   their white cards and ink buttons now follow the theme. Phone screens and printed labels stay as printed things. */
html body .lf-ghost,html body .stat,html body .prob-tab,html body .calc-in,html body .chk li label,html body .tl-card,html body .disc,
html body .ed-panel,html body .ed-meta span,html body .srt button,html body .srt-out,html body .st,html body .made-tile,html body .story{background:var(--d2);border-color:var(--border)}
html body .lf-ghost{color:var(--text)}
html body .calc-out,html body .nocode{background:var(--d3);color:var(--text);border-color:var(--border2)}
html body .srt button[aria-pressed="true"],html body .seg button[aria-pressed="true"]{background:linear-gradient(135deg,var(--orchid),var(--violet));color:#fff;border-color:transparent}
html body .srt-out .verdict.print{background:var(--d4);color:var(--text)}
html body .ph{background:linear-gradient(135deg,var(--d3),var(--d4))}
html body .ph::before{background-image:radial-gradient(rgba(127,127,140,.18) 1px,transparent 1.3px)}
html body .chk li input,html body .tgl input{border-color:var(--border2)}
html body .tgl input{background:var(--d4)}
html body .screen,html body .scr,html body .m,html body .phone .screen *{--ink:#16161a;--soft:#5e5e6a;--line:#e4e2de;--txt:#16161a;--text:#16161a;--paper:#F4F3F1}
html body .screen{color:#16161a}
html body .lf{--ink:var(--text)}
html body .build{background:linear-gradient(135deg,var(--orchid),var(--violet));color:#fff}
html body .col{background:var(--d2);border-color:var(--border)}
html body .col.ai{background:var(--d3);color:var(--text);border-color:var(--border2)}

/* The live map's product view, framed: home under the hero, and an article's hero (2026-10-21). */
.live-hero{margin:0}
.live-frame{position:relative;height:clamp(440px,48vw,560px);border-radius:28px;overflow:hidden;border:1px solid var(--border2);background:#0a0a0d;box-shadow:0 30px 80px rgba(50,27,104,.35)}
.live-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;pointer-events:none}
.live-hero figcaption,.live figcaption{margin-top:14px;font-size:13.5px;font-weight:600;color:var(--text3);text-align:center}
.map-open{position:absolute;inset:0;z-index:2;display:flex;align-items:flex-end;justify-content:flex-end;padding:20px;text-decoration:none}
.map-open span{font-size:14px;font-weight:800;color:#fff;background:rgba(10,10,13,.72);border:1px solid rgba(179,84,241,.5);border-radius:100px;padding:10px 18px;backdrop-filter:blur(8px);transition:background .15s,border-color .15s}
.map-open:hover span{background:rgba(106,20,219,.85);border-color:var(--violet)}
@media (max-width:600px){.live-frame{height:520px}}