@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@500;600;700;800;900&family=IBM+Plex+Sans:wght@400;500;600;700&display=swap');

/* ============================================================
   TOSHIBA × CDW — Floor-Day Event Kit
   Palette pulled from "CDW Sales Plays Final.pptx" theme
   ============================================================ */
:root{
  --black:#0A0A0A;
  --ink:#1A1A1A;
  --paper:#FFFFFF;
  --mist:#F2F2F2;
  --line:#D9D9D9;

  --red:#E61E1E;        /* Toshiba red / accent1 */
  --red-dark:#8F0000;   /* folHlink */
  --steel:#4F5B66;      /* Refresh tier */
  --steel-tint:#5B6770;
  --graphite:#2E3338;   /* Modernize tier */

  --muted:#6B7178;

  --display:'Archivo',sans-serif;
  --body:'IBM Plex Sans',sans-serif;
}

*{margin:0;padding:0;box-sizing:border-box}
html,body{background:#4a4a4a;font-family:var(--body);color:var(--ink);-webkit-font-smoothing:antialiased;text-rendering:geometricPrecision}
img{display:block;max-width:100%}

/* ---- artboards ---------------------------------------------------------- */
.artboard{
  position:relative;background:var(--paper);overflow:hidden;
  margin:24px auto;box-shadow:0 18px 60px rgba(0,0,0,.45);
  display:flex;flex-direction:column;
}
.poster{width:18in;height:24in}
.card{width:4in;height:6in;margin:18px auto;border-radius:.06in}

/* ---- brand bar ---------------------------------------------------------- */
.brandbar{background:var(--black);color:#fff;flex:none}
.lockup{display:flex;align-items:center;gap:.2in;justify-content:center}
.lockup .toshlogo{width:auto;display:block}            /* real Toshiba wordmark, height set per-doc */
.lockup .cdwlogo{width:auto;display:block}             /* official CDW logo (white), height set per-doc */
.lockup .tosh{font-family:var(--display);font-weight:800;letter-spacing:.01em;color:var(--red)}
.lockup .div{width:2px;background:rgba(255,255,255,.5);align-self:stretch}
.lockup .cdw{font-family:var(--display);font-weight:800;font-style:italic;color:#fff;letter-spacing:-.02em}

/* registered mark */
.r{font-size:.42em;vertical-align:.55em;font-weight:600}

/* ---- footer band -------------------------------------------------------- */
.footerband{background:var(--black);color:#fff;flex:none;display:flex;align-items:center;justify-content:center}
.footerband .fline{font-family:var(--display);font-weight:700;text-transform:uppercase;color:rgba(255,255,255,.92);text-align:center}
.footerband .fline em{font-style:normal;color:var(--red)}

/* generic */
.eyebrow{font-family:var(--display);font-weight:700;text-transform:uppercase;color:var(--red)}
.tnum{font-variant-numeric:tabular-nums}

/* faint technical dot-grid texture for light sections */
.dotgrid{
  background-image:radial-gradient(rgba(0,0,0,.045) 1.2px,transparent 1.3px);
  background-size:.28in .28in;
}