/* SPECIMEN: plain-language explainers (how it works page, arena intro band, market hook box). Uses the tokens from index.html. */

/* arena intro band */
.explain { display: flex; flex-direction: column; gap: 14px; padding: 18px 20px; border-radius: 24px; border: 1.5px solid var(--ink); background: #FFFFFF; }
.explain-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; }
.explain-title { font-size: clamp(28px, 3vw, 40px); }
.explain-grid { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 10px; }
.explain-grid li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; padding: 12px; border-radius: 16px; background: var(--panel); font-size: 14px; line-height: 1.4; color: #2A2A27; }
.explain-grid strong { font-size: 15px; color: var(--ink); }
.explain-n { font-size: 30px; line-height: .9; }

/* market box */
.hookbox { display: flex; flex-direction: column; gap: 10px; padding: 18px 20px; border-radius: 22px; background: var(--panel); }

/* two AIs */
.aicards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); gap: 16px; }
.aicard { display: flex; flex-direction: column; gap: 10px; padding: 22px; border-radius: 28px; background: var(--panel); }
.aicard.dark { background: var(--ink); color: #FFFFFF; }
.aicard.dark a { color: #FFFFFF; }
.ticks { margin: 4px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; font-size: 15px; line-height: 1.45; }
.ticks li { position: relative; padding-left: 22px; }
.ticks li::before { content: ''; position: absolute; left: 2px; top: .55em; width: 9px; height: 9px; border-radius: 50%; background: currentColor; opacity: .85; }
.ticks.yes li::before { content: '✓'; top: 0; width: auto; height: auto; background: none; font-weight: 700; opacity: 1; }
.ticks.no li::before { content: '×'; top: -.05em; width: auto; height: auto; background: none; font-weight: 700; font-size: 1.1em; opacity: 1; }
.livequote { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 20px; border: 1.5px solid; text-decoration: none; color: var(--ink); }
.livequote:hover { background: #FAFAF8; color: var(--ink); }

/* learning loop */
.loop { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 10px; counter-reset: step; }
.loop li { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 16px; border-radius: 20px; border: 1px solid var(--line); font-size: 14px; line-height: 1.45; color: #2A2A27; }
.loop li:last-child { border: 1.5px dashed var(--ink); }
.loop-n { font-size: 44px; line-height: .85; color: var(--ink); }

/* hook buckets */
.buckets { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); gap: 10px; }
.buckets > div { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: 16px; border: 1px solid var(--line); }

/* can / can't */
.cando { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr)); gap: 16px; }
.cando-col { display: flex; flex-direction: column; gap: 6px; padding: 18px 20px; border-radius: 24px; border: 1px solid var(--line); }

/* what you can do */
.youcan { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 10px; }
.youcard { display: flex; flex-direction: column; gap: 8px; padding: 16px; border-radius: 20px; background: var(--panel); text-decoration: none; color: var(--ink); font-size: 14px; line-height: 1.45; transition: transform .2s cubic-bezier(.22,1,.36,1); }
.youcard:hover { transform: translateY(-3px); color: var(--ink); }

/* questions */
.faq { display: flex; flex-direction: column; }
.faq details { border-bottom: 1px solid var(--line); padding: 14px 0; }
.faq summary { cursor: pointer; font-weight: 700; font-size: 17px; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; float: right; font-family: var(--mono); color: var(--muted); }
.faq details[open] summary::after { content: '−'; }
.faq p { margin-top: 10px; max-width: 72ch; font-size: 15px; line-height: 1.55; color: #2A2A27; }

@media (prefers-reduced-motion: reduce) { .youcard:hover { transform: none; } }