{
  "id": "signal-pop-faq",
  "name": "FAQ Accordion",
  "theme": "signal-pop",
  "category": "Marketing",
  "description": "Questions as chunky outlined rows using native details, where the open row fills with the accent instead of just revealing text.",
  "layout": "Single 44rem column of full-width accordion rows with 2px outlines that touch, so the stack reads as one block; the open row inverts to the accent fill.",
  "modules": [
    {
      "key": "head",
      "name": "FAQ header",
      "html": "\n<header class=\"fh\"><h1>Questions people<br>actually ask.</h1><p>If yours is not here, <a href=\"#\">email us</a> — a person replies, usually within a day.</p></header>"
    },
    {
      "key": "list",
      "name": "Question rows",
      "html": "\n<div class=\"qs\">\n  <details open><summary>Is it really free?</summary><div class=\"a\"><p>The free tier has every habit-tracking feature and no ads. Paid adds cross-device sync and export. If you only use one phone, you never need to pay us.</p></div></details>\n  <details><summary>What happens if I miss a day?</summary><div class=\"a\"><p>Nothing. You get one free miss per week per habit, automatically. Miss twice and the streak resets — but the history stays, because the history is the useful part.</p></div></details>\n  <details><summary>Do you sell my data?</summary><div class=\"a\"><p>No. There is nothing to sell — without sync, your data never leaves the device. With sync, it is encrypted with a key we do not hold.</p></div></details>\n  <details><summary>Can I get my data out?</summary><div class=\"a\"><p>CSV and JSON, any time, free tier included. No email confirmation, no waiting period, no dark pattern on the way to the button.</p></div></details>\n  <details><summary>Why no leaderboards?</summary><div class=\"a\"><p>Because we built them, tested them, and watched people quit. Competition is great for the top 5% and corrosive for everyone else.</p></div></details>\n</div>"
    },
    {
      "key": "help",
      "name": "Still stuck",
      "html": "\n<footer class=\"hf\"><div><h3>Still stuck?</h3><p>Real humans, no bots, no ticket numbers.</p></div><a class=\"btn\" href=\"#\">Email us</a></footer>"
    }
  ],
  "moduleCount": 3,
  "reorderable": true,
  "meta": {
    "id": "signal-pop-faq",
    "model": "Claude Opus 5",
    "author": "Claude Code",
    "createdAt": "2026-08-29T18:54:10+09:00",
    "updatedAt": "2026-08-29T18:54:10+09:00",
    "version": "1.0.0",
    "isNew": false
  },
  "link": "/api/v1/designs/signal-pop-faq.json",
  "structure": "Single 44rem column of full-width accordion rows with 2px outlines that touch, so the stack reads as one block; the open row inverts to the accent fill.",
  "html": "<div class=\"dz dz-signal-pop-faq\" data-design=\"signal-pop-faq\" data-theme=\"signal-pop\">\n<section class=\"dz-mod\" data-mod=\"head\" aria-label=\"FAQ header\">\n<header class=\"fh\"><h1>Questions people<br>actually ask.</h1><p>If yours is not here, <a href=\"#\">email us</a> — a person replies, usually within a day.</p></header></section>\n<section class=\"dz-mod\" data-mod=\"list\" aria-label=\"Question rows\">\n<div class=\"qs\">\n  <details open><summary>Is it really free?</summary><div class=\"a\"><p>The free tier has every habit-tracking feature and no ads. Paid adds cross-device sync and export. If you only use one phone, you never need to pay us.</p></div></details>\n  <details><summary>What happens if I miss a day?</summary><div class=\"a\"><p>Nothing. You get one free miss per week per habit, automatically. Miss twice and the streak resets — but the history stays, because the history is the useful part.</p></div></details>\n  <details><summary>Do you sell my data?</summary><div class=\"a\"><p>No. There is nothing to sell — without sync, your data never leaves the device. With sync, it is encrypted with a key we do not hold.</p></div></details>\n  <details><summary>Can I get my data out?</summary><div class=\"a\"><p>CSV and JSON, any time, free tier included. No email confirmation, no waiting period, no dark pattern on the way to the button.</p></div></details>\n  <details><summary>Why no leaderboards?</summary><div class=\"a\"><p>Because we built them, tested them, and watched people quit. Competition is great for the top 5% and corrosive for everyone else.</p></div></details>\n</div></section>\n<section class=\"dz-mod\" data-mod=\"help\" aria-label=\"Still stuck\">\n<footer class=\"hf\"><div><h3>Still stuck?</h3><p>Real humans, no bots, no ticket numbers.</p></div><a class=\"btn\" href=\"#\">Email us</a></footer></section>\n</div>",
  "css": "\n.dz-signal-pop-faq { background: var(--background); color: var(--foreground); font-family: var(--pv-body); padding: 36px 30px 34px; }\n.dz-signal-pop-faq .fh, .dz-signal-pop-faq .qs, .dz-signal-pop-faq .hf { max-width: 44rem; margin-left: auto; margin-right: auto; }\n.dz-signal-pop-faq .fh h1 { font-family: var(--pv-display); font-size: 46px; line-height: .98; text-transform: uppercase; letter-spacing: -.03em; margin: 0 0 12px; }\n.dz-signal-pop-faq .fh p { margin: 0 0 26px; font-size: 16px; font-weight: 500; }\n.dz-signal-pop-faq .fh a { color: var(--foreground); border-bottom: 3px solid var(--primary); text-decoration: none; }\n.dz-signal-pop-faq .qs details { border: var(--pv-bw) solid var(--foreground); border-bottom: 0; background: var(--card); }\n.dz-signal-pop-faq .qs details:first-of-type { border-radius: var(--pv-radius) var(--pv-radius) 0 0; }\n.dz-signal-pop-faq .qs details:last-of-type { border-bottom: var(--pv-bw) solid var(--foreground); border-radius: 0 0 var(--pv-radius) var(--pv-radius); }\n.dz-signal-pop-faq .qs summary { list-style: none; cursor: pointer; font-family: var(--pv-display); font-size: 19px; text-transform: uppercase; letter-spacing: -.01em; padding: 18px 22px; display: flex; align-items: center; gap: 14px; transition: background var(--dur) var(--ease); }\n.dz-signal-pop-faq .qs summary::-webkit-details-marker { display: none; }\n.dz-signal-pop-faq .qs summary::after { content: \"+\"; margin-left: auto; font-size: 26px; line-height: 1; transition: transform var(--dur) var(--ease); }\n.dz-signal-pop-faq .qs details[open] summary { background: var(--primary); color: var(--primary-foreground); }\n.dz-signal-pop-faq .qs details[open] summary::after { transform: rotate(45deg); }\n.dz-signal-pop-faq .qs summary:hover { background: var(--accent); color: var(--accent-foreground); }\n.dz-signal-pop-faq .qs details[open] summary:hover { background: var(--primary); color: var(--primary-foreground); }\n.dz-signal-pop-faq .a { padding: 16px 22px 20px; border-top: var(--pv-bw) solid var(--foreground); }\n.dz-signal-pop-faq .a p { margin: 0; font-size: 15px; line-height: 1.7; max-width: 60ch; }\n.dz-signal-pop-faq .hf { display: flex; align-items: center; gap: 24px; margin-top: 28px; border: var(--pv-bw) solid var(--foreground); border-radius: var(--pv-radius); box-shadow: 6px 6px 0 var(--foreground); background: var(--card); background: var(--accent); padding: 20px 24px; }\n.dz-signal-pop-faq .hf h3 { font-family: var(--pv-display); font-size: 22px; text-transform: uppercase; margin: 0 0 4px; color: var(--accent-foreground); }\n.dz-signal-pop-faq .hf p { margin: 0; font-size: 14px; font-weight: 500; color: var(--accent-foreground); }\n.dz-signal-pop-faq .btn { margin-left: auto; border: var(--pv-bw) solid var(--foreground); border-radius: var(--pv-radius); box-shadow: 6px 6px 0 var(--foreground); background: var(--card); background: var(--primary); color: var(--primary-foreground); font-family: var(--pv-display); font-size: 15px; text-transform: uppercase; padding: 13px 26px; text-decoration: none; transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }\n.dz-signal-pop-faq .btn:hover { transform: translate(3px, 3px); box-shadow: 3px 3px 0 var(--foreground); }\n@media (prefers-reduced-motion: reduce) { .dz-signal-pop-faq *, .dz-signal-pop-faq *::before, .dz-signal-pop-faq *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; } }",
  "requiredTheme": "/api/v1/themes/signal-pop.json",
  "googleFontsHref": "https://fonts.googleapis.com/css2?family=Archivo+Black:wght@400;500;600;700&family=Archivo:wght@400;500;600;700&family=Space+Mono:wght@400;500;600;700&display=swap"
}