/* ============================================================
   STACK FIT — My Marketing Stack homepage widget
   Fixed 380 x 460. All styles namespaced .sf- to avoid
   collisions when embedded in an existing page.
   Brand: #0ea5e9 primary | Inter | dark console skin
   ============================================================ */


/* --- widget --- */
.sf-widget {
  --sf-w: 380px;
  --sf-h: 460px;
  --sf-cell: 18px;
  --sf-cols: 10;
  --sf-rows: 18;

  --sf-bg:      #0b1220;
  --sf-panel:   #111b2c;
  --sf-sunken:  #080e1a;
  --sf-line:    #1e2b45;
  --sf-line-hi: #2c3d5e;
  --sf-brand:   #0ea5e9;
  --sf-accent:  #38bdf8;
  --sf-text:    #e8f0f9;
  --sf-muted:   #7f93b0;
  --sf-danger:  #f87171;
  --sf-ok:      #34d399;

  /* tool colours: recognisably tetromino, pulled toward the brand */
  --sf-c-i: #22d3ee;   /* CDP */
  --sf-c-o: #f5c542;   /* CRM */
  --sf-c-t: #a855f7;   /* Marketing automation */
  --sf-c-s: #34d399;   /* Attribution */
  --sf-c-z: #fb7185;   /* Business intelligence */
  --sf-c-j: #60a5fa;   /* SEO */
  --sf-c-l: #fb923c;   /* ABM */

  --sf-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

  position: relative;
  box-sizing: border-box;
  width: var(--sf-w);
  height: var(--sf-h);
  padding: 11px 12px 10px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 8px;
  background: radial-gradient(120% 90% at 50% 0%, #142138 0%, var(--sf-bg) 62%);
  color: var(--sf-text);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  box-shadow: 0 8px 32px rgba(11, 18, 32, .28);
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.sf-widget *, .sf-widget *::before, .sf-widget *::after { box-sizing: border-box; }
.sf-widget:focus { outline: none; }

/* An author display rule outranks the UA's [hidden]{display:none},
   so el.hidden = true would set the attribute without hiding anything. */
.sf-widget [hidden] { display: none !important; }

/* --- header --- */
.sf-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  height: 34px;
  flex: none;
}
.sf-brandmark { display: flex; align-items: center; gap: 7px; min-width: 0; }
.sf-mark { width: 18px; height: 18px; flex: none; color: var(--sf-accent); }
.sf-titles { min-width: 0; }
.sf-title {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  line-height: 1.1;
  white-space: nowrap;
}
.sf-kicker {
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--sf-muted);
  white-space: nowrap;
}
.sf-mode {
  flex: none;
  padding: 4px 8px;
  border: 1px solid var(--sf-line);
  border-radius: 4px;
  background: var(--sf-panel);
  color: var(--sf-muted);
  font: inherit;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color .15s, border-color .15s;
}
.sf-mode:hover { color: var(--sf-accent); border-color: var(--sf-accent); }
.sf-mode:focus-visible { outline: 2px solid var(--sf-accent); outline-offset: 1px; }

/* --- play area: band rail + well + panel --- */
.sf-play {
  flex: 1 1 auto;
  min-height: 0;
  margin-top: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
}

.sf-rail {
  width: 20px;
  height: 334px;
  flex: none;
  padding: 5px 0;
  margin-right: 4px;
  display: flex;
  flex-direction: column;
}
.sf-band {
  flex: 1 1 0;
  display: grid;
  place-items: center;
  border-right: 2px solid var(--sf-line);
  font-family: var(--sf-mono);
  font-size: 10px;
  font-weight: 700;
  color: #4c5e7c;
  transition: color .2s, border-color .2s;
}
.sf-band.sf-live { color: var(--sf-text); }
.sf-band[data-band="2"].sf-live { color: var(--sf-ok);    border-right-color: var(--sf-ok); }
.sf-band[data-band="1"].sf-live { color: #c084fc;         border-right-color: #c084fc; }
.sf-band[data-band="0"].sf-live { color: var(--sf-accent); border-right-color: var(--sf-accent); }

.sf-well {
  flex: none;
  padding: 4px;
  border: 1px solid var(--sf-line);
  border-radius: 5px;
  background: var(--sf-sunken);
}
.sf-grid {
  display: grid;
  grid-template-columns: repeat(var(--sf-cols), var(--sf-cell));
  grid-auto-rows: var(--sf-cell);
  width: calc(var(--sf-cols) * var(--sf-cell));
  height: calc(var(--sf-rows) * var(--sf-cell));
  /* band dividers over band tints: measurement, engagement, data */
  background-image:
    linear-gradient(to bottom,
      transparent 0, transparent 107px,
      rgba(255,255,255,.10) 107px, rgba(255,255,255,.10) 108px,
      transparent 108px, transparent 215px,
      rgba(255,255,255,.10) 215px, rgba(255,255,255,.10) 216px,
      transparent 216px),
    linear-gradient(to bottom,
      rgba(52,211,153,.07) 0, rgba(52,211,153,.07) 108px,
      rgba(168,85,247,.06) 108px, rgba(168,85,247,.06) 216px,
      rgba(14,165,233,.075) 216px, rgba(14,165,233,.075) 324px);
}

.sf-cell {
  width: var(--sf-cell);
  height: var(--sf-cell);
  border-radius: 2px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .026);
}
.sf-cell.sf-f {
  background: var(--c);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .24),
    inset 0 -2px 0 rgba(0, 0, 0, .24);
}
.sf-cell.sf-gh {
  background: rgba(255, 255, 255, .02);
  box-shadow: inset 0 0 0 1.5px var(--cg);
}
.sf-cell.sf-flash {
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .6);
}
.sf-cell.sf-c-i { --c: var(--sf-c-i); --cg: rgba(34, 211, 238, .42); }
.sf-cell.sf-c-o { --c: var(--sf-c-o); --cg: rgba(245, 197, 66, .42); }
.sf-cell.sf-c-t { --c: var(--sf-c-t); --cg: rgba(168, 85, 247, .48); }
.sf-cell.sf-c-s { --c: var(--sf-c-s); --cg: rgba(52, 211, 153, .42); }
.sf-cell.sf-c-z { --c: var(--sf-c-z); --cg: rgba(251, 113, 133, .44); }
.sf-cell.sf-c-j { --c: var(--sf-c-j); --cg: rgba(96, 165, 250, .46); }
.sf-cell.sf-c-l { --c: var(--sf-c-l); --cg: rgba(251, 146, 60, .44); }

/* --- side panel --- */
.sf-panel {
  width: 133px;
  height: 334px;
  flex: none;
  margin-left: 9px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.sf-box {
  padding: 5px 8px 6px;
  border: 1px solid var(--sf-line);
  border-radius: 5px;
  background: var(--sf-panel);
}
.sf-box--score { padding-bottom: 4px; }
.sf-duo { display: flex; gap: 7px; }
.sf-duo > .sf-box { flex: 1 1 0; min-width: 0; }

.sf-l {
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--sf-muted);
  white-space: nowrap;
}
.sf-v {
  font-family: var(--sf-mono);
  font-size: 15px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.25;
  white-space: nowrap;
}
.sf-v--big { font-size: 21px; color: var(--sf-accent); }
.sf-v--sm  { font-size: 13px; }

.sf-slot { flex: 1 1 auto; display: flex; flex-direction: column; }
.sf-mini {
  flex: 1 1 auto;
  display: grid;
  place-content: center;
  min-height: 0;
  padding: 3px 0 2px;
}
.sf-minigrid {
  display: grid;
  grid-template-columns: repeat(4, 9px);
  grid-auto-rows: 9px;
  gap: 1px;
}
.sf-mc { border-radius: 1.5px; }
.sf-mc.sf-on {
  background: var(--c);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22);
}
.sf-tool {
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--sf-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* --- touch pad --- */
.sf-pad {
  height: 30px;
  flex: none;
  margin-top: 7px;
  display: flex;
  gap: 5px;
}
.sf-key {
  flex: 1 1 0;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--sf-line);
  border-radius: 4px;
  background: var(--sf-panel);
  color: var(--sf-muted);
  cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
}
.sf-key svg { width: 15px; height: 15px; }
.sf-key:hover { background: #17253c; color: var(--sf-text); }
.sf-key:active { background: #1d2f4c; color: var(--sf-accent); border-color: var(--sf-accent); }
.sf-key:focus-visible { outline: 2px solid var(--sf-accent); outline-offset: 1px; }

/* --- ticker --- */
.sf-ticker {
  height: 15px;
  flex: none;
  margin-top: 6px;
  padding: 0 2px;
  overflow: hidden;
  color: var(--sf-muted);
  font-size: 10px;
  font-weight: 500;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.sf-ticker b { color: var(--sf-text); font-weight: 600; }

/* --- overlays --- */
.sf-over {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 13px;
  background: rgba(8, 14, 26, .5);
  text-align: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity .22s ease;
}
.sf-over.sf-show { opacity: 1; visibility: visible; }

.sf-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 13px 18px 11px;
  border: 1px solid var(--sf-line-hi);
  border-radius: 8px;
  background: rgba(9, 15, 28, .965);
  box-shadow: 0 12px 34px rgba(0, 0, 0, .5);
  transition: opacity .18s ease;
}
.sf-quizcard  { gap: 7px; }
.sf-startcard { gap: 7px; padding: 15px 18px 14px; }

.sf-verdict {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--sf-muted);
}
.sf-headline {
  margin: 0;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.15;
  text-wrap: balance;
}
.sf-headline.sf-bad  { color: var(--sf-danger); }
.sf-headline.sf-good { color: var(--sf-ok); }
.sf-starthead { font-size: 21px; color: var(--sf-text); }
.sf-startsub {
  font-size: 11px;
  line-height: 1.4;
  color: var(--sf-muted);
  text-wrap: pretty;
}
.sf-rules {
  display: grid;
  gap: 7px;
  margin: 3px 0 1px;
  padding: 8px 0;
  border-top: 1px solid var(--sf-line);
  border-bottom: 1px solid var(--sf-line);
  text-align: left;
}
.sf-rule {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 9px;
  align-items: center;
  font-size: 9.5px;
  line-height: 1.4;
  color: var(--sf-muted);
  text-wrap: pretty;
}
.sf-rule b { color: var(--sf-text); font-weight: 600; }
.sf-ruleart { display: grid; grid-template-columns: repeat(3, 7px); gap: 1px; }
.sf-ruleart i { height: 7px; border-radius: 1px; background: transparent; }
.sf-ruleart i.on { background: var(--c, var(--sf-accent)); }
.sf-startbtn { align-self: center; min-width: 0; padding: 0 20px; margin-top: 4px; }

/* The card explains the scoring; this strip explains the driving. */
.sf-keys {
  display: flex;
  justify-content: center;
  gap: 9px;
  margin-top: 1px;
}
.sf-hintkey {
  flex: 0 0 auto;
  display: grid;
  gap: 3px;
  justify-items: center;
}
.sf-cap {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 19px;
  height: 16px;
  padding: 0 4px;
  border: 1px solid var(--sf-line-hi);
  border-bottom-width: 2px;
  border-radius: 4px;
  background: rgba(255, 255, 255, .05);
  font-size: 9.5px;
  font-weight: 700;
  line-height: 1;
  color: var(--sf-text);
}
.sf-keylabel {
  font-size: 7.5px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--sf-muted);
}
.sf-keynote {
  margin: 0;
  font-size: 9.5px;
  line-height: 1.35;
  color: var(--sf-muted);
  text-wrap: pretty;
}

.sf-detail {
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--sf-muted);
  text-wrap: pretty;
}
.sf-detail b { color: var(--sf-text); font-weight: 600; }

.sf-stats {
  display: flex;
  justify-content: center;
  gap: 20px;
  padding: 6px 0;
  border-top: 1px solid var(--sf-line);
  border-bottom: 1px solid var(--sf-line);
}
.sf-stat-v {
  font-family: var(--sf-mono);
  font-size: 17px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.sf-stat-v--word { font-family: inherit; font-size: 13px; line-height: 1.45; }
.sf-stat-l {
  white-space: nowrap;
  font-size: 8px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--sf-muted);
}

/* --- consolidation review --- */
.sf-qhead {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--sf-danger);
  text-wrap: balance;
}
.sf-qtext {
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--sf-text);
  text-wrap: pretty;
}
.sf-options { display: grid; gap: 5px; }
.sf-option {
  padding: 7px 10px;
  border: 1px solid var(--sf-line);
  border-radius: 5px;
  background: rgba(255, 255, 255, .035);
  color: var(--sf-text);
  font: inherit;
  font-size: 10.5px;
  line-height: 1.35;
  text-align: left;
  text-wrap: pretty;
  cursor: pointer;
  transition: background .14s, border-color .14s;
}
.sf-option:hover:not(:disabled) {
  background: rgba(56, 189, 248, .14);
  border-color: var(--sf-accent);
}
.sf-option:focus-visible { outline: 2px solid var(--sf-accent); outline-offset: 1px; }
.sf-option:disabled { cursor: default; }
.sf-option.sf-right {
  border-color: var(--sf-ok);
  background: rgba(52, 211, 153, .16);
  color: var(--sf-ok);
}
.sf-option.sf-wrongpick {
  border-color: var(--sf-danger);
  background: rgba(248, 113, 113, .16);
  color: var(--sf-danger);
}
.sf-qfoot {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--sf-muted);
  text-wrap: pretty;
}
.sf-qfoot.sf-good-t { color: var(--sf-ok); }
.sf-qfoot.sf-bad-t  { color: var(--sf-danger); }

/* --- newsletter prompt --- */
.sf-capture { display: grid; gap: 6px; }
.sf-capture-copy {
  font-size: 10.5px;
  line-height: 1.45;
  color: var(--sf-muted);
  text-wrap: pretty;
}
.sf-capture-copy.sf-err { color: var(--sf-danger); }
.sf-form { display: flex; gap: 5px; }
.sf-input {
  flex: 1 1 auto;
  min-width: 0;
  height: 30px;
  padding: 0 9px;
  border: 1px solid var(--sf-line);
  border-radius: 4px;
  background: var(--sf-sunken);
  color: var(--sf-text);
  font: inherit;
  font-size: 11.5px;
}
.sf-input::placeholder { color: #56688a; }
.sf-input:focus { outline: none; border-color: var(--sf-accent); }
.sf-input.sf-invalid { border-color: var(--sf-danger); }
.sf-input:disabled { opacity: .6; cursor: default; }

.sf-cta {
  flex: none;
  height: 30px;
  min-width: 92px;
  padding: 0 12px;
  border: none;
  border-radius: 4px;
  background: var(--sf-brand);
  color: #04121d;
  font: inherit;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .15s;
}
.sf-cta:hover:not(:disabled) { background: #38bdf8; }
.sf-cta:focus-visible { outline: 2px solid var(--sf-accent); outline-offset: 2px; }
.sf-cta:disabled { opacity: .6; cursor: default; }

.sf-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
}
.sf-divider { width: 1px; height: 10px; background: var(--sf-line); }
.sf-link {
  padding: 4px 2px;
  border: none;
  background: none;
  color: var(--sf-accent);
  font: inherit;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
}
.sf-link:hover { color: var(--sf-text); }
.sf-link:focus-visible { outline: 2px solid var(--sf-accent); outline-offset: 1px; }

.sf-restore {
  position: absolute;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  padding: 7px 14px;
  border: 1px solid var(--sf-line);
  border-radius: 5px;
  background: rgba(9, 15, 28, .95);
  color: var(--sf-accent);
  font: inherit;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: opacity .18s ease;
}
.sf-restore:hover { color: var(--sf-text); border-color: var(--sf-accent); }
.sf-restore:focus-visible { outline: 2px solid var(--sf-accent); outline-offset: 2px; }
.sf-over.sf-peek { background: transparent; }
.sf-over.sf-peek .sf-card { opacity: 0; visibility: hidden; }
.sf-over.sf-peek .sf-restore { opacity: 1; visibility: visible; }

.sf-sr {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .sf-widget *, .sf-widget *::before { transition-duration: .01ms !important; }
}
/* ============================================================
   HOMEPAGE PLACEMENT + MOBILE FIT
   Added on embed 2026-09-11. Not part of the standalone game.
   Kept in this file rather than css/styles.css so styles.css
   keeps its ?v=1 and the other 56 pages are untouched. Because
   this file only loads on the homepage, these overrides cannot
   leak onto article pages, whose sidebars still hide on mobile.
   ============================================================ */

/* Two levels on purpose. .sf-fit is the LAYOUT box and is sized to the scaled
   dimensions; .sf-widget keeps its real 380 x 460 and is transformed down to
   fill it. Putting the transform on .sf-fit itself does not work: a transform
   leaves the layout box at full size, so a 380px box would stay 380px inside a
   272px grid track and push the page sideways. Sizing the box and scaling the
   contents means the track only ever sees the scaled width. */
.sf-fit {
  --sf-s: 1;
  width:  calc(var(--sf-fit-w, 380px) * var(--sf-s));
  height: calc(var(--sf-fit-h, 460px) * var(--sf-s));
  margin-inline: auto;
}

.sf-fit > .sf-widget {
  transform: scale(var(--sf-s));   /* --sf-s inherits from .sf-fit */
  transform-origin: top left;
}

/* css/styles.css hides .hero__sidebar below 1024px, which suited the old Top
   Stories list because those same stories repeat in Latest News. The game has
   no second home and ships its own touch pad, so it is revealed again here.
   .hero__grid is already one column at this width (a plain `.hero__grid` rule,
   with no :has() variant on this site to outrank it), so the widget simply
   stacks under the cover story. */
@media (max-width: 1024px) {
  .hero__grid .hero__sidebar { display: flex; }
}

/* The widget is a fixed 380px block whose copy was measured at that width, so
   reflowing it would reintroduce runts. It is scaled instead. Each step is the
   largest scale that still fits 380px inside the viewport minus the .container
   48px of padding, so the widget never overflows and never triggers a sideways
   scroll. Scaled width (380 x scale) is checked against the narrowest viewport
   in its band minus 48px; every band clears by at least 3px. Unscaled above
   435px, where the widget clears the container by 8px. */
@media (max-width: 435px) { .sf-fit { --sf-s: .94; } }  /* 409-435, +3.8px */
@media (max-width: 408px) { .sf-fit { --sf-s: .89; } }  /* 390-408, +3.8px */
@media (max-width: 389px) { .sf-fit { --sf-s: .85; } }  /* 374-389, +3.0px */
@media (max-width: 373px) { .sf-fit { --sf-s: .81; } }  /* 359-373, +3.2px */
@media (max-width: 358px) { .sf-fit { --sf-s: .73; } }  /* 329-358, +3.6px */
@media (max-width: 328px) { .sf-fit { --sf-s: .67; } }  /* to 320,  +17.4px */