/* =========================================================
   STREET GRUB · RECEIPT DESIGN SYSTEM
   Shared by home, faq, press, creators, play-at-work
   ========================================================= */

:root{
  --paper:     #f3eada;
  --paper-2:   #e6dbc1;
  --paper-3:   #eddfba;          /* coupon insert: slightly warmer */
  --thermal:   #2b2a26;          /* thermal-printer "black" — never pure */
  --thermal-2: #4e4a40;
  --rule:      #00000022;
  --red:       #b8222d;
  --green:     #1f5a38;          /* WCAG AA: 5.8:1 on paper */
  --highlight: #ffd97050;        /* yellow underline-highlight */
  --wood-a:    #2a1a10;
  --wood-b:    #3b2616;
  --wood-c:    #4e3320;

  --ff-type:    "Special Elite", "Courier New", monospace;
  --ff-mono:    "JetBrains Mono", ui-monospace, monospace;
  --ff-display: "Big Shoulders Display", "Impact", sans-serif;
}
*{ box-sizing: border-box; margin: 0; padding: 0; }
html,body{ min-height:100vh; overflow-x: clip; }

/* =========================================================
   FOCUS — visible on every interactive (WCAG 2.4.7)
   ========================================================= */
:where(a, button, [role="button"], summary, details, input, select, textarea):focus-visible{
  outline: 3px solid var(--red);
  outline-offset: 2px;
}

/* Skip-link (WCAG 2.4.1 Bypass Blocks) */
.skip-link{
  position: absolute; top: -100px; left: 12px; z-index: 200;
  background: var(--thermal); color: var(--paper);
  padding: 10px 16px;
  font-family: var(--ff-display); font-weight: 900; font-size: 14px;
  text-transform: uppercase; letter-spacing: .06em;
  text-decoration: none;
  border: 2px solid var(--paper);
}
.skip-link:focus{ top: 12px; }

/* =========================================================
   COUNTER — wood surface the receipt sits on
   ========================================================= */
body{
  color: var(--thermal);
  font-family: var(--ff-type);
  font-size: 17px; line-height: 1.5;
  background: var(--wood-a);
}
body::before{
  content:""; position: fixed; inset: 0; z-index: -3;
  background:
    radial-gradient(ellipse 90% 60% at 50% 30%, transparent 40%, #00000050 100%),
    radial-gradient(ellipse 70% 40% at 50% 0%, #d4a06030 0%, transparent 60%),
    linear-gradient(180deg, #2a1a10 0%, #3b2616 40%, #321e12 100%);
}
body::after{
  content:""; position: fixed; inset: 0; z-index: -2; opacity: .35; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='800' height='600'><filter id='wood'><feTurbulence type='turbulence' baseFrequency='0.012 0.7' numOctaves='3' seed='4'/><feColorMatrix values='0 0 0 0 0.28  0 0 0 0 0.16  0 0 0 0 0.08  0 0 0 1 0'/></filter><rect width='100%25' height='100%25' filter='url(%23wood)'/></svg>");
  background-size: 800px 600px;
}
.knot{
  position: fixed; pointer-events: none; z-index: -1;
  border-radius: 50%;
  background: radial-gradient(circle, #1a0d05 0%, #2a1a10 35%, transparent 70%);
  opacity: .65;
}
.knot.a{ width: 180px; height: 110px; top: 18%; left: -3%; transform: rotate(-12deg); }
.knot.b{ width: 240px; height: 140px; bottom: 12%; right: -5%; transform: rotate(8deg); }

/* Mobile: disable fixed-position decorative layers to stop scroll-repaint jank.
   Touch devices repaint position:fixed on every scroll frame; the wood gradient,
   noise overlay, and knot accents all compound that cost. */
@media (pointer: coarse){
  body::before{ position: absolute; height: 100%; }
  body::after{ display: none; }
  .knot{ display: none; }
}
@media (prefers-reduced-data: reduce){
  body::before, body::after, .knot, .receipt::after{ display: none; }
  .thermal-img, .thermal-wrap::after{ filter: none; }
}

/* =========================================================
   RECEIPT STRIP
   ========================================================= */
.receipt{
  max-width: 720px; margin: 0 auto;
  background: var(--paper);
  background-image:
    repeating-linear-gradient(0deg, transparent 0 36px, #0000000a 36px 37px),
    radial-gradient(ellipse at 25% 5%, #ffffff40, transparent 50%),
    linear-gradient(180deg, var(--paper) 0%, var(--paper-2) 100%);
  box-shadow:
    0 0 0 1px #00000018,
    30px 0 80px #00000060, -30px 0 80px #00000060,
    0 8px 12px #00000040 inset;
  position: relative;
}
.receipt::after{
  content:""; position: absolute; inset:0; pointer-events:none;
  opacity: .22; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='f'><feTurbulence type='fractalNoise' baseFrequency='1.6' numOctaves='2' seed='9'/></filter><rect width='100%25' height='100%25' filter='url(%23f)'/></svg>");
}
.receipt::before{
  content:""; position:absolute; top: 0; bottom: 0; left: 50%;
  width: 1px; background: linear-gradient(180deg, transparent, #00000010 30%, #00000010 70%, transparent);
  pointer-events:none;
}

/* zigzag perforation top + bottom of strip */
.zigzag{
  height: 12px; position: relative;
  background:
    linear-gradient(135deg, var(--paper) 25%, transparent 25%) 0 0/14px 14px,
    linear-gradient(225deg, var(--paper) 25%, transparent 25%) 0 0/14px 14px,
    linear-gradient(135deg, transparent 75%, var(--paper) 75%) 0 0/14px 14px,
    linear-gradient(225deg, transparent 75%, var(--paper) 75%) 0 0/14px 14px;
  background-color: transparent;
}
.zigzag.top{ transform: rotate(180deg); }

/* dot-matrix dashed dividers */
.perf{
  height: 1px; margin: 30px 36px;
  background-image: linear-gradient(90deg, var(--thermal) 50%, transparent 50%);
  background-size: 10px 1px; background-repeat: repeat-x;
  opacity: .55;
}
.perf.thick{
  height: 2px;
  background-image: linear-gradient(90deg, var(--thermal) 60%, transparent 60%);
  background-size: 14px 2px; opacity: .75;
}

.blk{ padding: 28px 44px; position: relative; }
@media (max-width: 640px){ .blk{ padding: 24px 22px; } }
.perf + .blk{ padding-top: 30px; }
.perf + .quote{ padding-top: 34px; }

/* =========================================================
   STORE HEADER — thermal-printed logo + meta strip
   ========================================================= */
.header-blk{ text-align: center; padding-top: 44px; padding-bottom: 18px; }

/* Street Grub logo — already designed with distressed grunge ink texture.
   Don't over-process: only multiply-blend so the transparent paper shows
   through the worn edges, and let the artwork's own character do the work. */
.receipt-logo{
  display: block; margin: 0 auto 14px;
  max-width: 340px; width: 86%; height: auto;
  mix-blend-mode: multiply;
}
.logo-wrap{
  position: relative; display: block; margin: 0 auto 18px;
  width: fit-content; max-width: 100%;
}
@media (max-width: 640px){
  .receipt-logo{ max-width: 260px; }
}

/* alternate text wordmark — kept available as fallback */
.store-name{
  font-family: var(--ff-display); font-weight: 900;
  font-size: clamp(60px, 11vw, 110px);
  line-height: .88; letter-spacing: -.025em;
  color: var(--thermal); text-transform: uppercase;
}
.store-name span{ color: var(--red); }

.store-tag{
  font-family: var(--ff-type); font-size: 14px;
  color: var(--thermal-2); margin-top: 4px; letter-spacing: .04em;
}
.store-meta{
  display: flex; justify-content: space-between; gap: 14px;
  font-family: var(--ff-mono); font-size: 11px; letter-spacing: .06em;
  margin-top: 22px; padding: 0 4px; color: var(--thermal-2);
  text-transform: uppercase;
}
.store-meta b{ color: var(--thermal); font-weight: 700; }

/* order header strip */
.order-head{
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: var(--ff-mono); font-size: 12px; text-transform: uppercase;
  color: var(--thermal-2); letter-spacing: .08em;
  flex-wrap: wrap; gap: 8px;
}
.order-head .o-no{ color: var(--red); font-weight: 700; }

/* Small mono-caps section label used as <h2> inside .order-head / .coupon-head.
   Replaces the previous `style="all:unset; …"` inline-style pattern. */
.section-label{
  all: unset;
  font-family: var(--ff-mono); font-size: 12px;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--thermal-2); font-weight: 400;
}

/* Tight inline section that just carries an .order-head (used to slot between perfs). */
.blk--tight{ padding: 12px 44px 0; }
@media (max-width: 640px){ .blk--tight{ padding: 12px 22px 0; } }

/* breadcrumb / back link (inner pages) */
.crumbs{
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 14px 44px 4px;
  font-family: var(--ff-mono); font-size: 11px; text-transform: uppercase;
  letter-spacing: .12em; color: var(--thermal-2);
  gap: 12px; flex-wrap: wrap;
}
.crumbs a{
  display: inline-block;
  color: var(--thermal); text-decoration: none;
  border-bottom: 1px dashed currentColor;
  padding: 12px 6px;                                /* touch target ≥44pt */
}
.crumbs a:hover{ color: var(--red); }
@media (max-width:640px){ .crumbs{ padding: 14px 22px 4px; } }

/* page title block (inner pages) */
.page-title-blk{ text-align:center; padding: 26px 44px 18px; }
.page-title-blk h1{
  font-family: var(--ff-display); font-weight: 900;
  font-size: clamp(36px, 7vw, 60px); line-height: .95;
  color: var(--thermal); text-transform: uppercase;
  letter-spacing: -.015em; margin-bottom: 10px;
}
.page-title-blk h1 em{ font-style: normal; color: var(--red); }
.page-title-blk .lede{
  font-family: var(--ff-type); font-size: 17px;
  color: var(--thermal-2); max-width: 38ch; margin: 0 auto;
}

/* =========================================================
   HERO (home page)
   ========================================================= */
.hero-blk{ text-align: center; padding: 0 36px 28px; }
@media (max-width: 640px){ .hero-blk{ padding: 0 22px 24px; } }
.hero-blk h1{
  font-family: var(--ff-display); font-weight: 700;
  font-size: clamp(46px, 8vw, 78px); line-height: .9;
  color: var(--thermal); text-transform: uppercase;
  margin: 22px 0 14px; letter-spacing: -.015em;
}
.hero-blk h1 em{ font-style: normal; color: var(--red); }
.price-tag{
  display: inline-block; font-family: var(--ff-display); font-weight: 900;
  font-size: 38px; color: var(--thermal); padding: 4px 16px;
  border: 3px solid var(--thermal); transform: rotate(-2.4deg);
  background: var(--paper); box-shadow: 3px 3px 0 var(--thermal);
  letter-spacing: -.01em;
}
.hero-tag{
  font-family: var(--ff-type); font-size: 18px; color: var(--thermal-2);
  margin: 24px auto 0; max-width: 36ch;
}
.hero-tag strong{ color: var(--thermal); font-weight: 400; box-shadow: inset 0 -8px 0 #ffd97050; padding: 0 2px; }

/* hero photo — thermal halftone */
.hero-photo{
  margin: 34px auto 6px; max-width: 460px; position: relative;
}
.thermal-img{
  width: 100%; height: auto; display: block;
  object-fit: cover;                  /* never stretch when box aspect ≠ image aspect */
  aspect-ratio: 16 / 9;               /* match the source screenshots */
  /* Toned down from contrast 1.55 / brightness 1.02 — was crushing
     game screenshots with dark cityscapes to illegible mud. */
  filter:
    grayscale(1)
    contrast(1.2)
    brightness(1.15)
    sepia(.18)
    hue-rotate(335deg);
  mix-blend-mode: multiply;
}
.thermal-wrap{
  position: relative; overflow: hidden;
  background: var(--paper);
  border: 1px solid #00000018; padding: 2px;
}
.thermal-wrap::after{
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(circle, #00000022 1px, transparent 1.5px);
  background-size: 3px 3px;
  mix-blend-mode: multiply;
  pointer-events: none;
}
.thermal-cap{
  margin-top: 10px;
  font-family: var(--ff-mono); font-size: 11px;
  color: var(--thermal-2); letter-spacing: .06em; text-transform: uppercase;
  display: flex; justify-content: space-between;
}
.thermal-cap b{ color: var(--red); font-weight: 700; }
.cap-play{
  all: unset;
  cursor: pointer;
  font-family: var(--ff-mono); font-size: 11px;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--red); font-weight: 700;
  padding: 4px 6px;                                 /* hit target */
  border-bottom: 1px dashed currentColor;
}
.cap-play:hover{ color: var(--thermal); }

/* video facade — YouTube trailer in the hero figure slot.
   aspect-ratio holds the box open after the .thermal-img is hidden
   (otherwise the iframe collapses to 0px height). Safe because
   .thermal-img enforces the same 16/9 with object-fit: cover. */
.video-facade{ cursor: pointer; aspect-ratio: 16 / 9; }
.video-facade .play{
  position: absolute; inset: 0; z-index: 4;
  display: grid; place-items: center;
  background: transparent; border: 0; cursor: pointer; padding: 0;
}
.video-facade .play .disc{
  width: 80px; height: 80px; border-radius: 50%;
  background: var(--red); color: var(--paper);
  display: grid; place-items: center;
  box-shadow: 0 10px 24px #0000007a, 0 0 0 6px #ffffff70;
  transition: transform .15s;
}
.video-facade:hover .play .disc{ transform: scale(1.06); }
.video-facade .play svg{ width: 28px; height: 28px; margin-left: 4px; }
.video-facade.playing{ cursor: default; }
.video-facade.playing .thermal-img,
.video-facade.playing .play{ display: none; }
.video-facade.playing::after{ display: none; }
.video-facade iframe{
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
}

/* =========================================================
   CTAs
   ========================================================= */
.cta-row{
  display: flex; flex-direction: column; gap: 10px; align-items: stretch;
  margin: 24px 0 6px;
}
.btn{
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  text-align: center; text-decoration: none; cursor: pointer;
  font-family: var(--ff-display); font-weight: 900;
  font-size: 22px; letter-spacing: .04em; text-transform: uppercase;
  padding: 16px 22px; transition: transform .1s, box-shadow .1s;
  border: 2px solid var(--thermal); color: var(--thermal); background: var(--paper);
}
.btn:hover{ transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--thermal); }
.btn.primary{ background: var(--red); color: var(--paper); border-color: var(--red); }
.btn.primary:hover{ box-shadow: 4px 4px 0 var(--thermal); }
/* Darkened from #5865F2 (3.6:1 contrast — fails WCAG AA) to #4752c4 (5.1:1) */
.btn.discord{ background: #4752c4; color: #fff; border-color: #4752c4; }
.btn.discord:hover{ box-shadow: 4px 4px 0 var(--thermal); }
.btn svg{ width: 22px; height: 22px; flex-shrink: 0; }
.btn.sm{ font-size: 16px; padding: 12px 18px; }

.info-line{
  text-align: center; font-family: var(--ff-mono); font-size: 12px;
  color: var(--thermal-2); letter-spacing: .08em; text-transform: uppercase;
  margin-top: 6px;
}
.info-line a{
  display: inline-block;
  color: var(--thermal); border-bottom: 1px dashed currentColor; text-decoration: none;
  padding: 12px 8px;                                /* touch target ≥44pt */
}

/* =========================================================
   PULL QUOTE
   ========================================================= */
.quote{
  text-align: center; padding: 32px 44px 36px;
}
@media (max-width: 640px){ .quote{ padding: 26px 22px 30px; } }
.quote .q-cmp{
  font-size: 14px; color: var(--thermal-2); font-style: italic;
  line-height: 1.6;
}
.quote .q-cmp em{ color: var(--thermal); font-style: italic; font-weight: 400; }
.quote .punch{
  font-family: var(--ff-display); font-weight: 900;
  font-size: clamp(28px, 4.4vw, 40px); line-height: 1;
  text-transform: uppercase; color: var(--red); margin-top: 10px;
  letter-spacing: -.01em;
}
.quote .punch em{ font-style: normal; color: var(--thermal); }

/* =========================================================
   ITEMS (line items / FAQ / features all share this shape)
   ========================================================= */
.items{ padding: 14px 44px; }
@media (max-width: 640px){ .items{ padding: 12px 22px; } }
.items .order-head{ padding: 0; margin-bottom: 14px; }

.item{
  display: grid; grid-template-columns: 52px 1fr 90px;
  gap: 16px; padding: 18px 0;
  border-bottom: 1px dotted #00000028;
  align-items: start;
}
.item:last-child{ border-bottom: none; padding-bottom: 6px; }
.item:first-of-type{ padding-top: 6px; }
/* No hover affordance on non-interactive line items — would falsely
   advertise clickability on home/creators/play-at-work. */
@media (max-width: 480px){
  .item{ grid-template-columns: 40px 1fr 76px; gap: 10px; }
  .item .name h3{ font-size: 19px; }
}

.item .qty{
  font-family: var(--ff-mono); font-weight: 700; font-size: 14px;
  color: var(--thermal-2); padding-top: 3px;
}
.item .qty b{ color: var(--red); font-weight: 700; }
.item .name{ font-family: var(--ff-type); color: var(--thermal); }
.item .name .sku{
  font-family: var(--ff-mono); font-size: 11px; color: var(--thermal-2);
  letter-spacing: .06em; text-transform: uppercase; margin-bottom: 4px;
}
.item .name h3{
  font-family: var(--ff-display); font-weight: 700;
  font-size: 22px; line-height: 1.05; letter-spacing: -.005em;
  text-transform: uppercase; color: var(--thermal); margin-bottom: 6px;
}
.item .name p{ font-size: 15px; color: var(--thermal-2); line-height: 1.45; }

.item .price{
  font-family: var(--ff-mono); font-weight: 700; font-size: 17px;
  text-align: right; color: var(--thermal); letter-spacing: -.01em;
  padding-top: 6px;
}

/* =========================================================
   SUBTOTAL
   ========================================================= */
.subtotal{
  padding: 22px 44px; font-family: var(--ff-mono); font-size: 13px;
}
@media (max-width: 640px){ .subtotal{ padding: 20px 22px; } }
.subtotal .row{ display: flex; justify-content: space-between; padding: 4px 0; color: var(--thermal-2); letter-spacing: .04em; }
.subtotal .row.total{
  margin-top: 10px; padding-top: 12px;
  border-top: 1px dashed var(--thermal);
  font-family: var(--ff-display); font-weight: 900; font-size: 26px;
  color: var(--thermal); letter-spacing: .02em;
}
.subtotal .row.total b{ color: var(--red); font-size: 30px; }
.subtotal .row b{ color: var(--thermal); font-weight: 700; }

/* =========================================================
   COUPON INSERT (any "different paper" block)
   ========================================================= */
.coupon{
  margin: 26px 32px;
  background: var(--paper-3);
  background-image: repeating-linear-gradient(45deg, transparent 0 8px, #00000006 8px 9px);
  border: 2px dashed var(--thermal);
  padding: 28px 28px 26px;
  position: relative;
  box-shadow: 0 4px 0 #00000008;
}
@media (max-width: 640px){ .coupon{ margin: 20px 16px; padding: 22px 18px 20px; } }
.coupon::before, .coupon::after{
  content: "✂"; position: absolute; top: -16px; font-family: monospace;
  font-size: 22px; color: var(--thermal); background: var(--paper);
  padding: 0 6px; transform: rotate(90deg);
}
.coupon::before{ left: 18px; }
.coupon::after { right: 18px; transform: rotate(-90deg); }

.coupon-head{
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 18px; gap: 12px; flex-wrap: wrap;
}
.coupon-head .title{
  font-family: var(--ff-display); font-weight: 900;
  font-size: 22px; text-transform: uppercase; letter-spacing: -.01em;
  color: var(--thermal);
}
.coupon-head .title em{ color: var(--red); font-style: normal; }
.coupon-head .meta{
  font-family: var(--ff-mono); font-size: 10px;
  color: var(--thermal-2); letter-spacing: .12em; text-transform: uppercase;
}
.coupon-grid{
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
@media (max-width: 480px){ .coupon-grid{ grid-template-columns: 1fr; } }
.coupon-grid figure{ margin: 0; position: relative; }
.coupon-grid figcaption{
  font-family: var(--ff-mono); font-size: 10px;
  color: var(--thermal-2); letter-spacing: .08em; text-transform: uppercase;
  margin-top: 6px; display: flex; justify-content: space-between;
}
.coupon-grid figcaption b{ color: var(--red); font-weight: 700; }
.coupon-grid a, .coupon-grid button{
  text-decoration: none; display: block; cursor: pointer;
  background: transparent; border: 0; padding: 0; width: 100%;
}
.coupon-grid a .thermal-wrap, .coupon-grid button .thermal-wrap{
  transition: transform .15s;
}
.coupon-grid a:hover .thermal-wrap, .coupon-grid button:hover .thermal-wrap{
  transform: scale(1.02);
  box-shadow: 0 6px 16px #00000040;
}
.coupon-foot{
  margin-top: 20px; padding-top: 14px;
  border-top: 1px dashed var(--thermal);
  text-align: center;
  font-family: var(--ff-type); font-size: 14px; color: var(--thermal-2);
}
.coupon-foot b{ color: var(--thermal); font-weight: 400; }
.coupon-foot a{
  display: inline-block;
  color: var(--thermal); border-bottom: 1px dashed currentColor; text-decoration: none;
  padding: 12px 6px;                                /* touch target ≥44pt */
}

/* =========================================================
   OWNER'S NOTE + STAMP
   ========================================================= */
.owner{ padding: 30px 36px; position: relative; }
@media (max-width: 640px){ .owner{ padding: 26px 22px; } }
.owner-head{
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 14px;
}
.owner-head .title{
  font-family: var(--ff-display); font-weight: 900;
  font-size: 22px; text-transform: uppercase; letter-spacing: -.01em;
  color: var(--thermal);
}
.owner-head .meta{ font-family: var(--ff-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .12em; color: var(--thermal-2); }

.owner-body{
  display: grid; grid-template-columns: 100px 1fr; gap: 18px; align-items: start;
}
@media (max-width: 560px){ .owner-body{ grid-template-columns: 80px 1fr; gap: 14px; } }
.owner-body img{
  width: 100%; height: auto;
  filter: grayscale(1) contrast(1.5) sepia(.18) hue-rotate(335deg);
  mix-blend-mode: multiply;
}
.owner-body .quote-block{
  font-family: var(--ff-type); font-size: 16px; color: var(--thermal); line-height: 1.5;
}
.owner-body .quote-block .sig{
  margin-top: 10px;
  font-family: var(--ff-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--thermal-2);
}
.owner-body .quote-block .sig b{ color: var(--thermal); font-weight: 700; }

.stamp{
  position: absolute; top: 18px; right: 28px;
  width: 110px; height: 110px;
  opacity: .9; mix-blend-mode: multiply;
  transform: rotate(8deg);
}
@media (max-width: 640px){ .stamp{ width: 80px; height: 80px; right: 16px; top: 14px; } }

/* =========================================================
   REVIEWS
   ========================================================= */
.reviews{ padding: 26px 36px 30px; }
@media (max-width: 640px){ .reviews{ padding: 24px 22px 28px; } }
.reviews .h{
  font-family: var(--ff-display); font-weight: 900;
  font-size: 22px; text-transform: uppercase; letter-spacing: -.01em;
  margin-bottom: 4px;
}
.reviews .h em{ color: var(--red); font-style: normal; }
.reviews .meta{
  font-family: var(--ff-mono); font-size: 11px;
  color: var(--thermal-2); letter-spacing: .12em; text-transform: uppercase;
  margin-bottom: 18px;
}
.review{
  display: grid; grid-template-columns: 1fr auto;
  column-gap: 20px;
  padding: 14px 0; border-bottom: 1px dotted #00000028;
  align-items: start;
}
.review:last-child{ border-bottom: none; }
.review p{
  font-family: var(--ff-type); font-size: 15px; color: var(--thermal); line-height: 1.45;
}
.review small{
  display: block; margin-top: 6px; font-family: var(--ff-mono); font-size: 11px;
  color: var(--thermal-2); text-transform: uppercase; letter-spacing: .08em;
}
.review .rating{
  font-family: var(--ff-mono); font-weight: 700; font-size: 12px;
  color: var(--green); letter-spacing: .1em;
  padding-top: 2px; white-space: nowrap; text-align:right;
}
.review .rating .pct{
  font-family: var(--ff-display); font-size: 22px; font-weight: 900;
  display: block; line-height: 1; color: var(--green);
}

/* =========================================================
   FACT SHEET (press) — key/value as receipt line items
   ========================================================= */
.facts{ padding: 14px 44px 4px; }
@media (max-width: 640px){ .facts{ padding: 12px 22px 4px; } }
.facts .fact{
  display: grid; grid-template-columns: 160px 1fr;
  gap: 14px; padding: 12px 0;
  border-bottom: 1px dotted #00000028;
  align-items: baseline;
}
.facts .fact:last-child{ border-bottom: none; }
.facts .fact dt{
  font-family: var(--ff-mono); font-size: 11px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--thermal-2);
}
.facts .fact dd{
  font-family: var(--ff-type); font-size: 17px; color: var(--thermal);
}
.facts .fact dd b{ font-weight: 400; box-shadow: inset 0 -8px 0 #ffd97050; padding: 0 2px; }
@media (max-width: 540px){
  .facts .fact{ grid-template-columns: 1fr; gap: 4px; padding: 12px 0 10px; }
}

/* =========================================================
   FAQ — questions as line items, answers reveal
   ========================================================= */
.q-list{ padding: 12px 44px; }
@media (max-width: 640px){ .q-list{ padding: 12px 22px; } }
.q-item{
  border-bottom: 1px dotted #00000028;
  padding: 4px 0;
}
.q-item:last-child{ border-bottom: none; }
.q-item summary{
  list-style: none; cursor: pointer;
  display: grid; grid-template-columns: 36px 1fr 18px;
  gap: 14px; padding: 16px 0; align-items: start;
}
.q-item summary::-webkit-details-marker{ display: none; }
.q-item summary .num{
  font-family: var(--ff-mono); font-weight: 700; font-size: 12px;
  color: var(--red); letter-spacing: .04em; padding-top: 3px;
}
.q-item summary .q{
  font-family: var(--ff-display); font-weight: 700;
  font-size: 19px; text-transform: uppercase; letter-spacing: -.005em;
  color: var(--thermal); line-height: 1.2;
}
.q-item summary .chev{
  font-family: var(--ff-mono); color: var(--thermal-2);
  font-size: 18px; line-height: 1; padding-top: 4px;
  transition: transform .15s;
}
.q-item[open] summary .chev{ transform: rotate(45deg); color: var(--red); }
.q-item .a{
  padding: 0 0 18px 50px;
  font-family: var(--ff-type); font-size: 16px; color: var(--thermal-2);
  line-height: 1.55;
}
@media (max-width:540px){ .q-item .a{ padding-left: 0; } }

/* =========================================================
   STEPS (play-at-work how it works)
   ========================================================= */
.steps{ padding: 14px 44px; }
@media (max-width: 640px){ .steps{ padding: 12px 22px; } }
.step{
  display: grid; grid-template-columns: 80px 1fr;
  gap: 18px; padding: 18px 0;
  border-bottom: 1px dotted #00000028;
  align-items: start;
}
.step:last-child{ border-bottom: none; padding-bottom: 6px; }
.step .num{
  font-family: var(--ff-display); font-weight: 900;
  font-size: 56px; line-height: .85; color: var(--red);
  letter-spacing: -.04em;
}
.step .body h3{
  font-family: var(--ff-display); font-weight: 700;
  font-size: 22px; line-height: 1.05; letter-spacing: -.005em;
  text-transform: uppercase; color: var(--thermal); margin-bottom: 4px;
}
.step .body .when{
  font-family: var(--ff-mono); font-size: 11px;
  color: var(--thermal-2); letter-spacing: .12em;
  text-transform: uppercase; margin-bottom: 8px;
}
.step .body p{
  font-family: var(--ff-type); font-size: 16px; color: var(--thermal-2); line-height: 1.5;
}

/* =========================================================
   DOWNLOAD CARDS (press)
   ========================================================= */
.dl-row{
  padding: 6px 44px 14px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
}
@media (max-width:640px){ .dl-row{ padding: 6px 22px 14px; grid-template-columns: 1fr; } }
.dl-card{
  display: block; text-decoration: none; color: inherit;
  border: 2px solid var(--thermal); padding: 22px 20px;
  background: var(--paper);
  transition: transform .12s, box-shadow .12s;
}
.dl-card:hover{ transform: translate(-2px,-2px); box-shadow: 4px 4px 0 var(--thermal); }
.dl-card .sku{
  font-family: var(--ff-mono); font-size: 11px;
  color: var(--red); letter-spacing: .1em; text-transform: uppercase;
}
.dl-card h3{
  font-family: var(--ff-display); font-weight: 900;
  font-size: 26px; line-height: 1; text-transform: uppercase;
  color: var(--thermal); margin: 6px 0 10px; letter-spacing: -.01em;
}
.dl-card p{ font-family: var(--ff-type); font-size: 14px; color: var(--thermal-2); margin-bottom: 10px; }
.dl-card .size{
  font-family: var(--ff-mono); font-size: 11px;
  color: var(--thermal); letter-spacing: .06em; text-transform: uppercase;
  border-top: 1px dashed var(--thermal); padding-top: 8px;
  display: flex; justify-content: space-between;
}
.dl-card .size b{ color: var(--red); font-weight: 700; }

/* =========================================================
   LOGO ASSETS (press)
   ========================================================= */
.assets{ padding: 14px 44px; }
@media (max-width: 640px){ .assets{ padding: 12px 22px; } }
.asset-row{
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 16px; padding-top: 12px;
}
.asset{
  display: block; text-align: center;
  text-decoration: none; color: var(--thermal);
}
/* Asset preview cards must show the REAL logo file, not a blackened silhouette,
   so users downloading them can see what they're getting. */
.asset .frame{
  background: #2a2a30;            /* dark surface so transparent-bg logos read */
  padding: 18px;
  border: 1px dashed var(--thermal-2);
  position: relative;
  transition: transform .12s;
}
.asset:hover .frame{ transform: translateY(-2px); }
.asset img{
  width: 100%; height: 100px; object-fit: contain;
  display: block;
}
.asset .label{
  margin-top: 8px;
  font-family: var(--ff-mono); font-size: 11px;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--thermal-2);
}

/* =========================================================
   HOOKS / LISTS (press, creators)
   ========================================================= */
.hook-list{
  padding: 14px 44px; list-style: none;
}
@media (max-width:640px){ .hook-list{ padding: 12px 22px; } }
.hook-list li{
  display: grid; grid-template-columns: 30px 1fr;
  gap: 12px; padding: 10px 0;
  border-bottom: 1px dotted #00000028;
  font-family: var(--ff-type); font-size: 16px; color: var(--thermal);
}
.hook-list li:last-child{ border-bottom: none; }
.hook-list li::before{
  content: ">"; font-family: var(--ff-mono); font-weight: 700;
  color: var(--red); padding-top: 1px;
}
.hook-list li b{ font-family: var(--ff-display); font-weight: 700; text-transform: uppercase; color: var(--thermal); }

/* =========================================================
   THANKS / FINAL
   ========================================================= */
.thanks{
  padding: 56px 44px 32px; text-align: center;
}
@media (max-width: 640px){ .thanks{ padding: 44px 22px 26px; } }
.thanks h2{
  font-family: var(--ff-display); font-weight: 900;
  font-size: clamp(40px, 7vw, 60px); line-height: .95;
  text-transform: uppercase; color: var(--thermal); margin-bottom: 12px;
  letter-spacing: -.015em;
}
.thanks h2 em{ font-style: normal; color: var(--red); }
.thanks p{ font-family: var(--ff-type); color: var(--thermal-2); margin-bottom: 24px; }
.thanks .btn{ display: inline-flex; }

/* Code 39 barcode */
.barcode{
  margin: 28px auto 6px; display: flex; flex-direction: column; align-items: center;
}
.barcode .code{
  font-family: "Libre Barcode 39", monospace;
  font-size: 64px; line-height: 1; color: var(--thermal);
  letter-spacing: 0;
}
@media (max-width: 400px){ .barcode .code{ font-size: 48px; } }
.barcode-no{
  font-family: var(--ff-mono); font-size: 11px;
  letter-spacing: .3em; color: var(--thermal-2); margin-top: 4px;
}

/* =========================================================
   SMALLPRINT
   ========================================================= */
.smallprint{
  padding: 28px 44px max(56px, env(safe-area-inset-bottom, 0px) + 36px); text-align: center;
  font-family: var(--ff-mono); font-size: 11px;
  color: var(--thermal-2); text-transform: uppercase; letter-spacing: .14em;
}
@media (max-width: 640px){
  .smallprint{ padding: 24px 22px max(44px, env(safe-area-inset-bottom, 0px) + 28px); }
}
.smallprint nav{ display: inline; }
.smallprint a{
  display: inline-block;
  color: var(--thermal); text-decoration: none;
  border-bottom: 1px dashed currentColor;
  padding: 12px 8px;                              /* touch target */
  margin: 0 2px;
}
.smallprint p + p{ margin-top: 8px; opacity: .65; }
.smallprint .tear{ margin-top: 16px; font-family: var(--ff-type); text-transform: none; letter-spacing: 0; font-size: 12px; opacity: .65; }

/* =========================================================
   LIGHTBOX
   ========================================================= */
.lightbox{
  position: fixed; inset: 0; z-index: 100;
  background: #0a0a0aef;
  display: none;
  align-items: center; justify-content: center;
  padding: 40px;
  cursor: zoom-out;
}
@media (max-width: 640px){ .lightbox{ padding: 16px; } }
.lightbox.open{ display: flex; animation: fadein .12s ease-out; }
@keyframes fadein{ from{ opacity: 0 } to{ opacity: 1 } }
.lightbox img{
  max-width: 100%; max-height: 100%;
  box-shadow: 0 30px 80px #000000a0;
  cursor: zoom-out;
}
.lightbox .lb-close{
  position: absolute;
  top: max(18px, env(safe-area-inset-top, 18px) + 8px);
  right: max(22px, env(safe-area-inset-right, 22px) + 8px);
  width: 44px; height: 44px;
  background: var(--red); color: var(--paper); border: 0;
  font-family: var(--ff-display); font-weight: 900; font-size: 22px;
  cursor: pointer;
}
.lightbox .lb-close:hover,
.lightbox .lb-close:focus-visible{ background: var(--paper); color: var(--thermal); }
.lightbox .lb-cap{
  position: absolute;
  bottom: max(18px, env(safe-area-inset-bottom, 18px));
  left: max(22px, env(safe-area-inset-left, 22px));
  right: max(22px, env(safe-area-inset-right, 22px));
  font-family: var(--ff-mono); font-size: 12px;
  color: #fffa; letter-spacing: .12em; text-transform: uppercase;
}

/* =========================================================
   SKILL-TILE GRID (play-at-work LinkedIn coupon)
   ========================================================= */
.skill-grid{
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
}
@media (max-width: 420px){ .skill-grid{ grid-template-columns: 1fr; } }
.skill-tile{
  border: 1px dashed var(--thermal); padding: 16px;
  text-align: center;
}
.skill-tile .a{
  display: block;
  font-family: var(--ff-display); font-weight: 900;
  font-size: clamp(20px, 4vw, 24px); line-height: 1;
  color: var(--red); letter-spacing: -.01em; text-transform: uppercase;
}
.skill-tile .b{
  display: block;
  font-family: var(--ff-display); font-weight: 900;
  font-size: clamp(20px, 4vw, 24px); line-height: 1;
  color: var(--thermal); letter-spacing: -.01em; text-transform: uppercase;
}

/* =========================================================
   REDUCED MOTION
   ========================================================= */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation: none !important; transition: none !important; }
}

/* =========================================================
   PRINT — Ctrl+P renders a real 80mm thermal receipt.
   The whole site has been designed for this moment.
   ========================================================= */
@media print{
  @page{ size: 80mm auto; margin: 4mm; }

  html, body{ background: #fff !important; color: #000 !important; overflow: visible !important; }
  body::before, body::after, .knot{ display: none !important; }

  .receipt{
    max-width: 100%; margin: 0;
    background: #fff !important; background-image: none !important;
    box-shadow: none !important;
  }
  .receipt::before, .receipt::after{ display: none !important; }

  /* Strip decoration, keep structure */
  .skip-link, .lightbox, .video-facade .play, .stamp,
  .btn, .cta-row, .info-line{ display: none !important; }
  .video-facade{ aspect-ratio: auto; }
  .video-facade::after{
    content: "▶ Trailer · youtube.com/watch?v=oNkXIbadk84";
    display: block; padding: 8px 0; font-family: monospace; font-size: 10pt;
  }

  /* Real thermal look: black ink, no filters, no halftone moire */
  .thermal-img{ filter: none !important; mix-blend-mode: normal !important; }
  .thermal-wrap{ border: 1px solid #000; background: #fff; }
  .thermal-wrap::after{ display: none !important; }
  .receipt-logo{ mix-blend-mode: normal !important; }
  .owner-body img{ filter: grayscale(1) contrast(1.4) !important; mix-blend-mode: normal !important; }

  /* Tighten paddings to receipt-roll widths */
  .blk, .items, .subtotal, .reviews, .thanks, .coupon, .owner,
  .q-list, .steps, .facts, .dl-row, .assets, .hook-list, .smallprint{
    padding-left: 4mm !important; padding-right: 4mm !important;
  }
  .coupon{ margin: 4mm 0; }

  /* Expand link URLs so the printed page is self-contained */
  a[href^="http"]::after, a[href^="mailto"]::after{
    content: " (" attr(href) ")"; font-size: 8pt; word-break: break-all;
  }
  a[href^="#"]::after{ content: ""; }

  /* No page breaks inside critical blocks */
  .item, .review, .q-item, .step, .dl-card, .asset, .fact{
    break-inside: avoid; page-break-inside: avoid;
  }
  h1, h2, h3{ break-after: avoid; page-break-after: avoid; }

  /* Open all FAQ answers by default in print */
  details > summary{ list-style: none; }
  details > summary::-webkit-details-marker{ display: none; }
  .q-item .a{ display: block !important; padding-left: 0 !important; }
  .q-item summary .chev{ display: none; }
}