{
  "id": "neon-arcade-passes",
  "name": "Pass Tiers",
  "theme": "neon-arcade",
  "category": "Pricing",
  "description": "Three passes as three coloured blocks where the price is bigger than the tier name, because the price is what anybody is actually comparing.",
  "layout": "Three cards at unequal rotations of at most two degrees, with the middle one lifted 22px and given the loudest offset, over a plain uppercase FAQ list.",
  "modules": [
    {
      "key": "head",
      "name": "Header",
      "html": "\n<header class=\"hd\"><h1>Passes</h1><p>Pay once a month or once a night. Both get you the same cabinets.</p></header>"
    },
    {
      "key": "tiers",
      "name": "Pass tiers",
      "html": "\n<section class=\"tr\">\n  <article class=\"t1\"><span class=\"k\">Casual</span><b class=\"pr\">£9</b><span class=\"u\">a night</span><ul><li>Unlimited play, one night</li><li>Leaderboard entry</li><li>Guest of a member: £6</li></ul><button type=\"button\">Buy a night</button></article>\n  <article class=\"t2\"><span class=\"tag\">Best value</span><span class=\"k\">Regular</span><b class=\"pr\">£28</b><span class=\"u\">a month</span><ul><li>Unlimited play, any night</li><li>Early entry to drops</li><li>Two guest passes a month</li><li>10% off merch</li></ul><button type=\"button\" class=\"go\">Join</button></article>\n  <article class=\"t3\"><span class=\"k\">Cabinet</span><b class=\"pr\">£90</b><span class=\"u\">a month</span><ul><li>Everything in Regular</li><li>Reserve a cabinet for an hour</li><li>Name on the wall</li><li>One private event a year</li></ul><button type=\"button\">Join</button></article>\n</section>"
    },
    {
      "key": "faq",
      "name": "FAQ",
      "html": "\n<section class=\"fq\"><h2 class=\"sh\">Things people ask</h2>\n<dl>\n  <div><dt>Can I cancel?</dt><dd>Any time, from the app, in two taps. No email, no phone call, no retention offer.</dd></div>\n  <div><dt>Is there a queue?</dt><dd>On drop nights, yes. Early entry skips it. On any other night there has never been one.</dd></div>\n  <div><dt>Do you take cash?</dt><dd>At the door, yes. The cabinets themselves are free once you are in.</dd></div>\n  <div><dt>Under 18?</dt><dd>Before 20:00, any night, with an adult. After that it is a bar.</dd></div>\n</dl></section>"
    }
  ],
  "moduleCount": 3,
  "reorderable": true,
  "meta": {
    "id": "neon-arcade-passes",
    "model": "Claude Opus 5",
    "author": "Claude Code",
    "createdAt": "2026-09-01T19:56:24+09:00",
    "updatedAt": "2026-09-01T19:56:24+09:00",
    "version": "1.0.0",
    "isNew": false
  },
  "link": "/api/v1/designs/neon-arcade-passes.json",
  "structure": "Three cards at unequal rotations of at most two degrees, with the middle one lifted 22px and given the loudest offset, over a plain uppercase FAQ list.",
  "html": "<div class=\"dz dz-neon-arcade-passes\" data-design=\"neon-arcade-passes\" data-theme=\"neon-arcade\">\n<section class=\"dz-mod\" data-mod=\"head\" aria-label=\"Header\">\n<header class=\"hd\"><h1>Passes</h1><p>Pay once a month or once a night. Both get you the same cabinets.</p></header></section>\n<section class=\"dz-mod\" data-mod=\"tiers\" aria-label=\"Pass tiers\">\n<section class=\"tr\">\n  <article class=\"t1\"><span class=\"k\">Casual</span><b class=\"pr\">£9</b><span class=\"u\">a night</span><ul><li>Unlimited play, one night</li><li>Leaderboard entry</li><li>Guest of a member: £6</li></ul><button type=\"button\">Buy a night</button></article>\n  <article class=\"t2\"><span class=\"tag\">Best value</span><span class=\"k\">Regular</span><b class=\"pr\">£28</b><span class=\"u\">a month</span><ul><li>Unlimited play, any night</li><li>Early entry to drops</li><li>Two guest passes a month</li><li>10% off merch</li></ul><button type=\"button\" class=\"go\">Join</button></article>\n  <article class=\"t3\"><span class=\"k\">Cabinet</span><b class=\"pr\">£90</b><span class=\"u\">a month</span><ul><li>Everything in Regular</li><li>Reserve a cabinet for an hour</li><li>Name on the wall</li><li>One private event a year</li></ul><button type=\"button\">Join</button></article>\n</section></section>\n<section class=\"dz-mod\" data-mod=\"faq\" aria-label=\"FAQ\">\n<section class=\"fq\"><h2 class=\"sh\">Things people ask</h2>\n<dl>\n  <div><dt>Can I cancel?</dt><dd>Any time, from the app, in two taps. No email, no phone call, no retention offer.</dd></div>\n  <div><dt>Is there a queue?</dt><dd>On drop nights, yes. Early entry skips it. On any other night there has never been one.</dd></div>\n  <div><dt>Do you take cash?</dt><dd>At the door, yes. The cabinets themselves are free once you are in.</dd></div>\n  <div><dt>Under 18?</dt><dd>Before 20:00, any night, with an adult. After that it is a bar.</dd></div>\n</dl></section></section>\n</div>",
  "css": "\n.dz-neon-arcade-passes { background: var(--background); color: var(--foreground); font-family: var(--pv-body); padding: 0 26px 32px; }\n.dz-neon-arcade-passes .hd { text-align: center; padding: 26px 0 30px; }\n.dz-neon-arcade-passes .hd h1 { font-family: var(--pv-display); font-size: 60px; font-weight: 700; text-transform: uppercase; letter-spacing: -.04em; margin: 0 0 8px; }\n.dz-neon-arcade-passes .hd p { font-size: 15px; color: var(--muted-foreground); margin: 0; }\n.dz-neon-arcade-passes .tr { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: start; }\n.dz-neon-arcade-passes .tr article { border: 2px solid var(--foreground); border-radius: var(--pv-radius); box-shadow: 5px 5px 0 var(--chart-2); background: var(--card); padding: 20px 20px 22px; display: flex; flex-direction: column; gap: 5px; position: relative; transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); }\n.dz-neon-arcade-passes .t1 { transform: rotate(-1.4deg); }\n.dz-neon-arcade-passes .t2 { margin-top: -22px; padding-top: 40px; padding-bottom: 34px; box-shadow: 5px 5px 0 var(--primary); border-color: var(--primary); }\n.dz-neon-arcade-passes .t3 { transform: rotate(1.2deg); box-shadow: 5px 5px 0 var(--chart-4); }\n.dz-neon-arcade-passes .tag { position: absolute; top: 0; left: 20px; font-size: 11px; background: var(--primary); color: var(--primary-foreground); border: 2px solid var(--foreground); border-top: 0; border-radius: 0 0 var(--pv-radius-sm) var(--pv-radius-sm); padding: 4px 10px; }\n.dz-neon-arcade-passes .k { font-size: 12px; color: var(--accent); }\n.dz-neon-arcade-passes .pr { font-family: var(--pv-mono); font-size: 56px; font-weight: 700; line-height: 1; letter-spacing: -.04em; }\n.dz-neon-arcade-passes .u { font-size: 12px; color: var(--muted-foreground); }\n.dz-neon-arcade-passes .tr ul { list-style: none; margin: 14px 0 18px; padding: 0; flex: 1; }\n.dz-neon-arcade-passes .tr li { font-size: 13.5px; padding: 7px 0 7px 18px; position: relative; color: var(--muted-foreground); }\n.dz-neon-arcade-passes .tr li::before { content: \"\"; position: absolute; left: 0; top: 13px; width: 8px; height: 8px; background: var(--accent); border-radius: 2px; }\n.dz-neon-arcade-passes .tr button { font: inherit; font-size: 14px; background: transparent; color: var(--foreground); border: 2px solid var(--foreground); border-radius: var(--pv-radius-md); padding: 11px; cursor: pointer; }\n.dz-neon-arcade-passes .go { background: var(--primary) !important; color: var(--primary-foreground) !important; }\n.dz-neon-arcade-passes .sh { font-family: var(--pv-display); font-size: 30px; font-weight: 700; text-transform: uppercase; letter-spacing: -.03em; margin: 40px 0 16px; }\n.dz-neon-arcade-passes .fq dl { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 18px 30px; }\n.dz-neon-arcade-passes .fq dt { font-family: var(--pv-display); font-size: 17px; font-weight: 700; text-transform: uppercase; margin-bottom: 5px; }\n.dz-neon-arcade-passes .fq dd { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--muted-foreground); }\n@media (prefers-reduced-motion: reduce) { .dz-neon-arcade-passes *, .dz-neon-arcade-passes *::before, .dz-neon-arcade-passes *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; } }",
  "requiredTheme": "/api/v1/themes/neon-arcade.json",
  "googleFontsHref": "https://fonts.googleapis.com/css2?family=Syne:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&family=Space+Mono:wght@400;500;600;700&display=swap"
}