/* LIAR — liar-app.com home page, the Paper look. Values are the game's own (lib/theme.dart Ink0).
   Panels are celBox: flat fill, 3px ink edge, hard unblurred shadow. */

:root {
  --ring-ink: 0.0700em 0.0000em 0 var(--ink), 0.0694em 0.0091em 0 var(--ink), 0.0676em 0.0181em 0 var(--ink), 0.0647em 0.0268em 0 var(--ink), 0.0606em 0.0350em 0 var(--ink), 0.0555em 0.0426em 0 var(--ink), 0.0495em 0.0495em 0 var(--ink), 0.0426em 0.0555em 0 var(--ink), 0.0350em 0.0606em 0 var(--ink), 0.0268em 0.0647em 0 var(--ink), 0.0181em 0.0676em 0 var(--ink), 0.0091em 0.0694em 0 var(--ink), 0.0000em 0.0700em 0 var(--ink), -0.0091em 0.0694em 0 var(--ink), -0.0181em 0.0676em 0 var(--ink), -0.0268em 0.0647em 0 var(--ink), -0.0350em 0.0606em 0 var(--ink), -0.0426em 0.0555em 0 var(--ink), -0.0495em 0.0495em 0 var(--ink), -0.0555em 0.0426em 0 var(--ink), -0.0606em 0.0350em 0 var(--ink), -0.0647em 0.0268em 0 var(--ink), -0.0676em 0.0181em 0 var(--ink), -0.0694em 0.0091em 0 var(--ink), -0.0700em 0.0000em 0 var(--ink), -0.0694em -0.0091em 0 var(--ink), -0.0676em -0.0181em 0 var(--ink), -0.0647em -0.0268em 0 var(--ink), -0.0606em -0.0350em 0 var(--ink), -0.0555em -0.0426em 0 var(--ink), -0.0495em -0.0495em 0 var(--ink), -0.0426em -0.0555em 0 var(--ink), -0.0350em -0.0606em 0 var(--ink), -0.0268em -0.0647em 0 var(--ink), -0.0181em -0.0676em 0 var(--ink), -0.0091em -0.0694em 0 var(--ink), -0.0000em -0.0700em 0 var(--ink), 0.0091em -0.0694em 0 var(--ink), 0.0181em -0.0676em 0 var(--ink), 0.0268em -0.0647em 0 var(--ink), 0.0350em -0.0606em 0 var(--ink), 0.0426em -0.0555em 0 var(--ink), 0.0495em -0.0495em 0 var(--ink), 0.0555em -0.0426em 0 var(--ink), 0.0606em -0.0350em 0 var(--ink), 0.0647em -0.0268em 0 var(--ink), 0.0676em -0.0181em 0 var(--ink), 0.0694em -0.0091em 0 var(--ink), 0.0525em 0.0000em 0 var(--ink), 0.0521em 0.0069em 0 var(--ink), 0.0507em 0.0136em 0 var(--ink), 0.0485em 0.0201em 0 var(--ink), 0.0455em 0.0262em 0 var(--ink), 0.0417em 0.0320em 0 var(--ink), 0.0371em 0.0371em 0 var(--ink), 0.0320em 0.0417em 0 var(--ink), 0.0263em 0.0455em 0 var(--ink), 0.0201em 0.0485em 0 var(--ink), 0.0136em 0.0507em 0 var(--ink), 0.0069em 0.0521em 0 var(--ink), 0.0000em 0.0525em 0 var(--ink), -0.0069em 0.0521em 0 var(--ink), -0.0136em 0.0507em 0 var(--ink), -0.0201em 0.0485em 0 var(--ink), -0.0262em 0.0455em 0 var(--ink), -0.0320em 0.0417em 0 var(--ink), -0.0371em 0.0371em 0 var(--ink), -0.0417em 0.0320em 0 var(--ink), -0.0455em 0.0262em 0 var(--ink), -0.0485em 0.0201em 0 var(--ink), -0.0507em 0.0136em 0 var(--ink), -0.0521em 0.0069em 0 var(--ink), -0.0525em 0.0000em 0 var(--ink), -0.0521em -0.0069em 0 var(--ink), -0.0507em -0.0136em 0 var(--ink), -0.0485em -0.0201em 0 var(--ink), -0.0455em -0.0262em 0 var(--ink), -0.0417em -0.0320em 0 var(--ink), -0.0371em -0.0371em 0 var(--ink), -0.0320em -0.0417em 0 var(--ink), -0.0263em -0.0455em 0 var(--ink), -0.0201em -0.0485em 0 var(--ink), -0.0136em -0.0507em 0 var(--ink), -0.0069em -0.0521em 0 var(--ink), -0.0000em -0.0525em 0 var(--ink), 0.0069em -0.0521em 0 var(--ink), 0.0136em -0.0507em 0 var(--ink), 0.0201em -0.0485em 0 var(--ink), 0.0263em -0.0455em 0 var(--ink), 0.0320em -0.0417em 0 var(--ink), 0.0371em -0.0371em 0 var(--ink), 0.0417em -0.0320em 0 var(--ink), 0.0455em -0.0263em 0 var(--ink), 0.0485em -0.0201em 0 var(--ink), 0.0507em -0.0136em 0 var(--ink), 0.0521em -0.0069em 0 var(--ink), 0.0350em 0.0000em 0 var(--ink), 0.0347em 0.0046em 0 var(--ink), 0.0338em 0.0091em 0 var(--ink), 0.0323em 0.0134em 0 var(--ink), 0.0303em 0.0175em 0 var(--ink), 0.0278em 0.0213em 0 var(--ink), 0.0247em 0.0247em 0 var(--ink), 0.0213em 0.0278em 0 var(--ink), 0.0175em 0.0303em 0 var(--ink), 0.0134em 0.0323em 0 var(--ink), 0.0091em 0.0338em 0 var(--ink), 0.0046em 0.0347em 0 var(--ink), 0.0000em 0.0350em 0 var(--ink), -0.0046em 0.0347em 0 var(--ink), -0.0091em 0.0338em 0 var(--ink), -0.0134em 0.0323em 0 var(--ink), -0.0175em 0.0303em 0 var(--ink), -0.0213em 0.0278em 0 var(--ink), -0.0247em 0.0247em 0 var(--ink), -0.0278em 0.0213em 0 var(--ink), -0.0303em 0.0175em 0 var(--ink), -0.0323em 0.0134em 0 var(--ink), -0.0338em 0.0091em 0 var(--ink), -0.0347em 0.0046em 0 var(--ink), -0.0350em 0.0000em 0 var(--ink), -0.0347em -0.0046em 0 var(--ink), -0.0338em -0.0091em 0 var(--ink), -0.0323em -0.0134em 0 var(--ink), -0.0303em -0.0175em 0 var(--ink), -0.0278em -0.0213em 0 var(--ink), -0.0247em -0.0247em 0 var(--ink), -0.0213em -0.0278em 0 var(--ink), -0.0175em -0.0303em 0 var(--ink), -0.0134em -0.0323em 0 var(--ink), -0.0091em -0.0338em 0 var(--ink), -0.0046em -0.0347em 0 var(--ink), -0.0000em -0.0350em 0 var(--ink), 0.0046em -0.0347em 0 var(--ink), 0.0091em -0.0338em 0 var(--ink), 0.0134em -0.0323em 0 var(--ink), 0.0175em -0.0303em 0 var(--ink), 0.0213em -0.0278em 0 var(--ink), 0.0247em -0.0247em 0 var(--ink), 0.0278em -0.0213em 0 var(--ink), 0.0303em -0.0175em 0 var(--ink), 0.0323em -0.0134em 0 var(--ink), 0.0338em -0.0091em 0 var(--ink), 0.0347em -0.0046em 0 var(--ink), 0.0175em 0.0000em 0 var(--ink), 0.0174em 0.0023em 0 var(--ink), 0.0169em 0.0045em 0 var(--ink), 0.0162em 0.0067em 0 var(--ink), 0.0152em 0.0087em 0 var(--ink), 0.0139em 0.0107em 0 var(--ink), 0.0124em 0.0124em 0 var(--ink), 0.0107em 0.0139em 0 var(--ink), 0.0088em 0.0152em 0 var(--ink), 0.0067em 0.0162em 0 var(--ink), 0.0045em 0.0169em 0 var(--ink), 0.0023em 0.0174em 0 var(--ink), 0.0000em 0.0175em 0 var(--ink), -0.0023em 0.0174em 0 var(--ink), -0.0045em 0.0169em 0 var(--ink), -0.0067em 0.0162em 0 var(--ink), -0.0087em 0.0152em 0 var(--ink), -0.0107em 0.0139em 0 var(--ink), -0.0124em 0.0124em 0 var(--ink), -0.0139em 0.0107em 0 var(--ink), -0.0152em 0.0087em 0 var(--ink), -0.0162em 0.0067em 0 var(--ink), -0.0169em 0.0045em 0 var(--ink), -0.0174em 0.0023em 0 var(--ink), -0.0175em 0.0000em 0 var(--ink), -0.0174em -0.0023em 0 var(--ink), -0.0169em -0.0045em 0 var(--ink), -0.0162em -0.0067em 0 var(--ink), -0.0152em -0.0087em 0 var(--ink), -0.0139em -0.0107em 0 var(--ink), -0.0124em -0.0124em 0 var(--ink), -0.0107em -0.0139em 0 var(--ink), -0.0088em -0.0152em 0 var(--ink), -0.0067em -0.0162em 0 var(--ink), -0.0045em -0.0169em 0 var(--ink), -0.0023em -0.0174em 0 var(--ink), -0.0000em -0.0175em 0 var(--ink), 0.0023em -0.0174em 0 var(--ink), 0.0045em -0.0169em 0 var(--ink), 0.0067em -0.0162em 0 var(--ink), 0.0088em -0.0152em 0 var(--ink), 0.0107em -0.0139em 0 var(--ink), 0.0124em -0.0124em 0 var(--ink), 0.0139em -0.0107em 0 var(--ink), 0.0152em -0.0088em 0 var(--ink), 0.0162em -0.0067em 0 var(--ink), 0.0169em -0.0045em 0 var(--ink), 0.0174em -0.0023em 0 var(--ink), .08em .09em 0 var(--ink);
  --paper:   #F2E6C8;
  --surface: #FBF3DF;
  --sunk:    #EAD9B4;
  --ink:     #141414;
  --mid:     #3A3630;
  --faint:   #6E6658;
  --red:     #E0563F;
  --gold:    #F2C744;
  --green:   #3E7A2A;
  --night:   #17120C;
  --wood:    #2B1D12;
  --pad:     clamp(56px, 8vw, 96px);
}

/* each colourway names: ground, text, soft text, headline fill, headline outline,
   accent word, and the alternate band */
:root { --bg: var(--paper); --fg: var(--ink);     --soft: var(--mid);  --head: var(--gold);  --stroke: var(--ink); --accent: var(--red);  --alt: var(--sunk);  --altfg: var(--mid);  --dots: rgba(20,20,20,.07); }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0; background: var(--bg); color: var(--fg);
  background-image: radial-gradient(var(--dots) 1.3px, transparent 1.4px);
  background-size: 12px 12px;
  font-family: Karla, ui-sans-serif, system-ui, "Helvetica Neue", Arial, sans-serif;
  font-size: 17px; line-height: 1.55;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration-color: var(--accent); text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

.wrap { max-width: 1120px; margin: 0 auto; padding: 0 22px; }
.band { padding: var(--pad) 0; }
.band.alt { position: relative; }
.band.alt .shout { color: var(--head); }

/* the game's headline: Bangers, a fill, a thick round outline drawn behind the fill */
.shout {
  font-family: Bangers, "Arial Black", Impact, sans-serif; font-weight: 400;
  letter-spacing: .03em; line-height: 1.06; text-wrap: balance; margin: 0;
  color: var(--head);
}
.shout em { font-style: normal; color: var(--accent); }

/* ---------- top bar ---------- */
.top { padding: 18px 0 0; }
.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.mark { font-family: Bangers, Impact, sans-serif; font-size: 34px; letter-spacing: 3px; color: var(--head);
   text-decoration: none; }
.top nav { display: flex; gap: 22px; font-weight: 800; font-size: 14px; letter-spacing: 1px; text-transform: uppercase; }
.top nav a { text-decoration: none; color: var(--soft); }

/* ---------- hero ---------- */
.hero { padding-top: clamp(30px, 5vw, 60px); }
.hero-grid { display: grid; gap: clamp(28px, 5vw, 64px); align-items: center;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
.eyebrow { margin: 0 0 14px; font-size: 13px; font-weight: 800; letter-spacing: 2.4px; text-transform: uppercase; color: var(--soft); }
.hero h1 { font-size: clamp(56px, 8.4vw, 104px); }
.lede { max-width: 42ch; margin: 22px 0 0; font-size: 18px; color: var(--soft); }
.stores { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 30px; }
.btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 22px;
  border: 3px solid var(--ink); border-radius: 12px; box-shadow: 5px 5px 0 var(--ink);
  background: var(--surface); color: var(--ink); text-decoration: none;
  font-family: Bangers, Impact, sans-serif; font-size: 21px; letter-spacing: 1px; }
.btn small { font-family: Karla, sans-serif; font-weight: 800; font-size: 11px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--faint); }
.btn.primary { background: var(--red); color: var(--surface); }
.btn.primary small { color: #FBE3D8; }

/* the phone: an ink body, a notch-free screen, the hard shadow */
.phone { width: min(100%, var(--pw, 300px)); padding: 10px; margin: 0 auto;
  background: var(--ink); border: 3px solid #000; border-radius: 40px;
  box-shadow: 9px 11px 0 rgba(0,0,0,.45); }
.phone img { width: 100%; border-radius: 31px; background: var(--sunk); }
.hero .phone { --pw: 330px; transform: rotate(2deg); }

/* ---------- the five shots ---------- */
.reel-head { text-align: center; max-width: 640px; margin: 0 auto clamp(30px, 5vw, 52px); }
.reel-head h2 { font-size: clamp(38px, 5.6vw, 64px); }
.reel-head p { margin: 14px auto 0; color: inherit; opacity: .85; max-width: 44ch; }
.reel { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(14px, 2vw, 24px); }
.shot { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.shot h3 { font-size: clamp(17px, 1.55vw, 22px); text-align: center; white-space: nowrap; line-height: 1.12; }
.shot .phone { --pw: 270px; padding: 7px; border-radius: 28px; box-shadow: 6px 7px 0 rgba(0,0,0,.45); }
.shot .phone img { border-radius: 22px; }

/* ---------- how it plays ---------- */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin-top: 36px; counter-reset: s; }
.card { background: var(--surface); color: var(--mid); border: 3px solid var(--ink); border-radius: 14px;
  box-shadow: 6px 6px 0 var(--ink); padding: 22px 22px 24px; }
.card h3 { font-family: Bangers, Impact, sans-serif; font-weight: 400; font-size: 27px; letter-spacing: 1px; color: var(--ink); margin: 0; }
.card p { margin: 8px 0 0; font-size: 16px; }
.card .n { display: inline-grid; place-items: center; width: 38px; height: 38px; margin-bottom: 12px;
  border: 3px solid var(--ink); border-radius: 50%; background: var(--gold); color: var(--ink);
  font-family: Bangers, Impact, sans-serif; font-size: 22px; }
.center { text-align: center; }
.center h2 { font-size: clamp(38px, 5.6vw, 64px); }

/* ---------- facts ---------- */
.facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-top: 34px; }
.fact { text-align: center; }
.fact b { display: block; font-family: Bangers, Impact, sans-serif; font-weight: 400; font-size: clamp(44px, 5vw, 62px);
  line-height: 1; color: var(--head); text-shadow: 0.070em 0.000em 0 var(--stroke), 0.068em 0.018em 0 var(--stroke), 0.061em 0.035em 0 var(--stroke), 0.049em 0.049em 0 var(--stroke), 0.035em 0.061em 0 var(--stroke), 0.018em 0.068em 0 var(--stroke), 0.000em 0.070em 0 var(--stroke), -0.018em 0.068em 0 var(--stroke), -0.035em 0.061em 0 var(--stroke), -0.049em 0.049em 0 var(--stroke), -0.061em 0.035em 0 var(--stroke), -0.068em 0.018em 0 var(--stroke), -0.070em 0.000em 0 var(--stroke), -0.068em -0.018em 0 var(--stroke), -0.061em -0.035em 0 var(--stroke), -0.049em -0.049em 0 var(--stroke), -0.035em -0.061em 0 var(--stroke), -0.018em -0.068em 0 var(--stroke), -0.000em -0.070em 0 var(--stroke), 0.018em -0.068em 0 var(--stroke), 0.035em -0.061em 0 var(--stroke), 0.049em -0.049em 0 var(--stroke), 0.061em -0.035em 0 var(--stroke), 0.068em -0.018em 0 var(--stroke), .08em .09em 0 var(--stroke); }
.fact span { display: block; margin-top: 8px; font-weight: 800; font-size: 14px; letter-spacing: 1.4px; text-transform: uppercase; }

/* ---------- close ---------- */
.close { text-align: center; }
.close h2 { font-size: clamp(44px, 7vw, 86px); }
.close .stores { justify-content: center; }

footer { padding: 40px 0 44px; text-align: center; font-size: 15px; }
footer nav { display: flex; gap: 26px; justify-content: center; flex-wrap: wrap; font-weight: 700; }

/* ---------- narrow ---------- */
@media (max-width: 960px) {
  .reel { grid-template-columns: repeat(5, 240px); overflow-x: auto; scroll-snap-type: x mandatory;
    padding: 6px 22px 20px; margin: 0 -22px; }
  .shot { scroll-snap-align: center; }
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 30px; }
}
@media (max-width: 820px) {
  .hero-grid { grid-template-columns: 1fr; text-align: center; }
  .lede { margin-left: auto; margin-right: auto; }
  .stores { justify-content: center; }
  .steps { grid-template-columns: 1fr; }
  .top nav { display: none; }
}
@media (max-width: 480px) { body { font-size: 16px; } }

#shots .wrap { max-width: 1480px; }

/* ---------- how it plays: three steps, each shown by a piece of the real screen ---------- */
.how { max-width: 980px; }
.how-head { text-align: center; }
.how-head h2 { font-size: clamp(40px, 6vw, 68px); }
.how-head p { margin: 12px auto 0; max-width: 44ch; color: var(--soft); }
.step { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(22px, 4vw, 48px);
  align-items: center; margin-top: clamp(40px, 6vw, 64px); }
.step:nth-of-type(even) { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }
.step:nth-of-type(even) .step-pic { order: 2; }
.step-pic { background: var(--surface); border: 3px solid var(--ink); border-radius: 18px;
  box-shadow: 8px 8px 0 var(--ink); padding: 12px; }
.step-pic img { border-radius: 10px; }
.step-pic.tilt-l { transform: rotate(-1.5deg); }
.step-pic.tilt-r { transform: rotate(1.5deg); }
.step .step-num { font-family: Bangers, Impact, sans-serif; font-size: clamp(64px, 8vw, 96px); line-height: .8; margin: 0;
  color: var(--red); text-shadow: 0 0 0 transparent; }
.step .step-num { max-width: none; }
.step h3 { font-family: Bangers, Impact, sans-serif; font-weight: 400; font-size: clamp(32px, 4vw, 46px);
  letter-spacing: 1px; line-height: 1; color: var(--ink); margin: 10px 0 0; }
.step p { margin: 10px 0 0; font-size: 17.5px; color: var(--mid); max-width: 36ch; }

/* ---------- the bundle: five screens fanned like a hand of cards ---------- */
.bundle-head { text-align: center; }
.bundle-head h2 { font-size: clamp(56px, 9vw, 112px); }
.bundle-head .sub { margin-top: 8px; font-size: clamp(26px, 3.4vw, 40px); }
.bundle-head p:not(.shout) { margin: 14px auto 0; max-width: 46ch; color: var(--soft); }
.bundle-head .shout.sub { color: var(--head); margin-left: auto; margin-right: auto; }
.fan { position: relative; height: clamp(420px, 46vw, 620px); margin: clamp(30px, 5vw, 56px) auto 0; max-width: 1100px; }
.fan .phone { position: absolute; left: 50%; top: 0; --pw: clamp(190px, 21vw, 280px); width: var(--pw);
  padding: 8px; border-radius: 34px; transition: transform .25s ease, z-index 0s;
  transform: translateX(calc(-50% + var(--x))) translateY(var(--y)) rotate(var(--r)); }
.fan .phone img { border-radius: 26px; }
.fan .phone:hover { transform: translateX(calc(-50% + var(--x))) translateY(calc(var(--y) - 22px)) rotate(0deg); z-index: 9; }
.fan .p1 { --x: -40vw; --x: clamp(-440px, -38vw, -280px); --y: 70px; --r: -12deg; z-index: 1; }
.fan .p2 { --x: clamp(-230px, -20vw, -140px); --y: 26px; --r: -6deg; z-index: 2; }
.fan .p3 { --x: 0px; --y: 0px; --r: 0deg; z-index: 3; }
.fan .p4 { --x: clamp(140px, 20vw, 230px); --y: 26px; --r: 6deg; z-index: 2; }
.fan .p5 { --x: clamp(280px, 38vw, 440px); --y: 70px; --r: 12deg; z-index: 1; }
.houses { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: clamp(60px, 7vw, 90px) 0 0; padding: 0; list-style: none; }
.houses li { background: var(--surface); border: 3px solid var(--ink); border-radius: 999px; box-shadow: 3px 3px 0 var(--ink);
  padding: 5px 16px; font-weight: 800; font-size: 14px; letter-spacing: 1px; text-transform: uppercase; color: var(--ink); }

@media (prefers-reduced-motion: reduce) { .fan .phone { transition: none; } }

@media (max-width: 820px) {
  .step, .step:nth-of-type(even) { grid-template-columns: 1fr; text-align: center; }
  .step:nth-of-type(even) .step-pic { order: 0; }
  .step p { margin-left: auto; margin-right: auto; }
  .fan { height: auto; display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 10px 22px 24px; margin-left: -22px; margin-right: -22px; }
  .fan .phone { position: static; transform: none; flex: 0 0 230px; scroll-snap-align: center; }
  .fan .phone:hover { transform: none; }
}

/* the outline: an SVG filter (see the defs at the top of index.html) grows each letter
   outward in a circle and draws it in ink under the fill, with the game's offset drop.
   Vector-smooth at any screen density, round at every corner, like Figma's stroke. */
.shout { filter: url(#ol-m); }
.hero h1.shout, .bundle-head h2.shout { filter: url(#ol-xl); }
.close h2.shout, .how-head h2.shout { filter: url(#ol-l); }
.bundle-head .shout.sub { filter: url(#ol-s); }
.step .step-num { filter: url(#ol-m); }
.mark { filter: none; }
@media (max-width: 820px) {
  .hero h1.shout, .bundle-head h2.shout { filter: url(#ol-l); }
  .close h2.shout, .how-head h2.shout { filter: url(#ol-m); }
  .bundle-head .shout.sub { filter: url(#ol-xs); }
}

/* ---------- the alternate bands: four treatments, chosen by body class ---------- */
/* shared zigzag edge: the band's colour bites into the cream above and below */
.zig .band.alt { --zz: 18px; margin: var(--zz) 0; }
.zig .band.alt::before, .zig .band.alt::after { content: ""; position: absolute; left: 0; right: 0; height: var(--zz);
  background: linear-gradient(-45deg, var(--bandc) calc(var(--zz) / 2), transparent 0),
              linear-gradient(45deg, var(--bandc) calc(var(--zz) / 2), transparent 0);
  background-size: var(--zz) var(--zz); background-repeat: repeat-x; }
.zig .band.alt::before { top: calc(var(--zz) * -1); background-position: left bottom; }
.zig .band.alt::after { bottom: calc(var(--zz) * -1); transform: scaleY(-1); background-position: left bottom; }

/* A: gold, ink halftone */
.band-gold { --bandc: var(--gold); }
.band-gold .band.alt { background-color: var(--gold); color: var(--ink);
  background-image: radial-gradient(rgba(20,20,20,.14) 1.6px, transparent 1.7px); background-size: 11px 11px; }
.band-gold .band.alt .shout { color: var(--surface); }
.band-gold .band.alt .shout em { color: var(--red); }
.band-gold .band.alt .step h3 { color: var(--ink); }
.band-gold .band.alt .step p:not(.step-num) { color: var(--mid); }
.band-gold .band.alt .step .step-num { color: var(--surface); }

/* B: red */
.band-red { --bandc: #D24F37; }
.band-red .band.alt { background-color: #D24F37; color: #FBE7DC;
  background-image: radial-gradient(rgba(20,20,20,.12) 1.6px, transparent 1.7px); background-size: 11px 11px; }
.band-red .band.alt .shout { color: var(--gold); }
.band-red .band.alt .shout em { color: var(--surface); }
.band-red .band.alt .step h3 { color: var(--surface); }
.band-red .band.alt .step p:not(.step-num) { color: #FBE7DC; }
.band-red .band.alt .step .step-num { color: var(--gold); }
.band-red .band.alt .btn.primary { background: var(--gold); color: var(--ink); }
.band-red .band.alt .btn.primary small { color: var(--mid); }

/* C: panel on the cream */
.band-panel .band.alt { background: none; padding: calc(var(--pad) * .5) 0; }
.band-panel .band.alt > .wrap { background: var(--surface); border: 4px solid var(--ink); border-radius: 22px;
  box-shadow: 10px 10px 0 var(--ink); padding: clamp(34px, 5vw, 60px) clamp(22px, 4vw, 56px); }
.band-panel .band.alt .step-pic { background: var(--paper); }

/* D: tan with pencil hatching and ink rules */
.band-hatch .band.alt { background-color: #E4D0A6; color: var(--ink);
  background-image: repeating-linear-gradient(135deg, rgba(20,20,20,.07) 0 2px, transparent 2px 11px);
  border-top: 4px solid var(--ink); border-bottom: 4px solid var(--ink); }

/* the logo beside the wordmark: the app icon, rounded, with the game's hard shadow */
.top .mark { display: inline-flex; flex-direction: row; align-items: center; gap: 12px; white-space: nowrap; }
.top .mark img { display: inline-block; flex: 0 0 auto; }
.mark img { width: 50px; height: 50px; border-radius: 12px; border: 3px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); background: var(--ink); object-fit: cover; }
.mark span { font-size: 44px; letter-spacing: 3px; filter: url(#ol-s); }