const answerLines value:[
  { id:"structure" text:"A clear structure keeps the question easy to scan and the answer focused on one useful idea." },
  { id:"portability" text:"Portable Dowe components preserve the same disclosure behavior across every supported target." },
]
Section id:"outlined-accordion" bg:"background" color:"backgroundText" boxed:true py:{ xs:8 md:14 }
  Grid columns:1 gap:{ xs:8 md:12 }
    Flex direction:"column" align:"center" gap:3
      Title size:{ xs:"3xl" md:"5xl" } weight:"black"
        "Frequently Asked Questions"
      Text size:"lg" color:"muted"
        "A spacious FAQ with bordered disclosure cards and one clear answer at a time."
    Accordion variant:"outlined" scheme:"primary" rounded:"lg" w:"full"
      item id:"reusable" label:"What makes a reusable website block effective?" defaultOpen:true
        Grid columns:1 gap:2
          each in:answerLines as:line key:line.id
            Text color:"muted"
              "{line.text}"
      item id:"responsive" label:"How should content adapt across screen sizes?"
        Grid columns:1 gap:2
          each in:answerLines as:line key:line.id
            Text color:"muted"
              "{line.text}"
      item id:"products" label:"Can the same block support multiple products?"
        Grid columns:1 gap:2
          each in:answerLines as:line key:line.id
            Text color:"muted"
              "{line.text}"
      item id:"accessible" label:"What keeps interaction accessible?"
        Grid columns:1 gap:2
          each in:answerLines as:line key:line.id
            Text color:"muted"
              "{line.text}"

const answerLines value:[
  { id:"clarity" text:"Each answer begins with the essential point so visitors can understand it without reading unnecessary detail." },
  { id:"behavior" text:"The disclosure state stays local to the Accordion and remains consistent across web and native targets." },
]
Section id:"minimal-lines-accordion" bg:"background" color:"backgroundText" boxed:true py:{ xs:8 md:14 }
  Grid columns:1 gap:{ xs:8 md:12 }
    Flex direction:"column" align:"center" gap:3
      Text size:"xs" weight:"bold" spacing:"widest" color:"muted"
        "FAQ"
      Title size:{ xs:"3xl" md:"5xl" } weight:"black"
        "Frequently Asked Questions"
      Text size:"lg" color:"muted"
        "A minimal disclosure list separated by quiet lines and generous vertical rhythm."
    Accordion scheme:"muted" rounded:"xs" w:"full"
      item id:"reusable" label:"What makes a reusable website block effective?" defaultOpen:true
        Grid columns:1 gap:2
          each in:answerLines as:line key:line.id
            Text color:"muted"
              "{line.text}"
      item id:"responsive" label:"How should content adapt across screen sizes?"
        Grid columns:1 gap:2
          each in:answerLines as:line key:line.id
            Text color:"muted"
              "{line.text}"
      item id:"products" label:"Can the same block support multiple products?"
        Grid columns:1 gap:2
          each in:answerLines as:line key:line.id
            Text color:"muted"
              "{line.text}"
      item id:"accessible" label:"What keeps interaction accessible?"
        Grid columns:1 gap:2
          each in:answerLines as:line key:line.id
            Text color:"muted"
              "{line.text}"

const answerLines value:[
  { id:"surface" text:"Soft surfaces group each question without making the page feel heavy or visually crowded." },
  { id:"source" text:"The complete composition remains ordinary Dowe source built from portable layout and display components." },
]
Section id:"soft-panels-accordion" bg:"background" color:"backgroundText" boxed:true py:{ xs:8 md:14 }
  Grid columns:1 gap:{ xs:8 md:12 }
    Flex direction:"column" align:{ xs:"center" md:"start" } gap:3
      Title size:{ xs:"3xl" md:"5xl" } weight:"black"
        "Frequently Asked Questions"
      Text size:"lg" color:"muted"
        "Rounded soft panels create a calm hierarchy while keeping every question easy to find."
    Accordion variant:"soft" scheme:"muted" rounded:"xl" w:"full"
      item id:"reusable" label:"What makes a reusable website block effective?" defaultOpen:true
        Grid columns:1 gap:2
          each in:answerLines as:line key:line.id
            Text color:"muted"
              "{line.text}"
      item id:"responsive" label:"How should content adapt across screen sizes?"
        Grid columns:1 gap:2
          each in:answerLines as:line key:line.id
            Text color:"muted"
              "{line.text}"
      item id:"products" label:"Can the same block support multiple products?"
        Grid columns:1 gap:2
          each in:answerLines as:line key:line.id
            Text color:"muted"
              "{line.text}"
      item id:"accessible" label:"What keeps interaction accessible?"
        Grid columns:1 gap:2
          each in:answerLines as:line key:line.id
            Text color:"muted"
              "{line.text}"

const answerLines value:[
  { id:"layout" text:"Independent disclosure groups make a balanced desktop grid and return to one readable column on smaller screens." },
  { id:"contract" text:"Each group uses the same Accordion contract, so behavior and visual tokens stay aligned." },
]
Section id:"split-grid-accordion" bg:"background" color:"backgroundText" boxed:true py:{ xs:8 md:14 }
  Grid columns:1 gap:{ xs:8 md:12 }
    Flex direction:"column" align:"center" gap:3
      Title size:{ xs:"3xl" md:"5xl" } weight:"black"
        "Frequently Asked Questions"
      Text size:"lg" color:"muted"
        "Two responsive columns organize a larger question set without losing a clear reading order."
    Grid columns:{ xs:1 md:2 } gap:5 align:"start"
      Accordion variant:"outlined" scheme:"primary" rounded:"lg" w:"full"
        item id:"portable" label:"Why start with a portable component?" defaultOpen:true
          Grid columns:1 gap:2
            each in:answerLines as:line key:line.id
              Text color:"muted"
                "{line.text}"
        item id:"organized" label:"How should a disclosure section be organized?"
          Grid columns:1 gap:2
            each in:answerLines as:line key:line.id
              Text color:"muted"
                "{line.text}"
        item id:"responsive" label:"What makes the layout responsive?"
          Grid columns:1 gap:2
            each in:answerLines as:line key:line.id
              Text color:"muted"
                "{line.text}"
      Accordion variant:"outlined" scheme:"primary" rounded:"lg" w:"full"
        item id:"hierarchy" label:"How is visual hierarchy preserved?"
          Grid columns:1 gap:2
            each in:answerLines as:line key:line.id
              Text color:"muted"
                "{line.text}"
        item id:"neutral" label:"Can the content stay product-neutral?"
          Grid columns:1 gap:2
            each in:answerLines as:line key:line.id
              Text color:"muted"
                "{line.text}"
        item id:"ownership" label:"Where should shared behavior live?"
          Grid columns:1 gap:2
            each in:answerLines as:line key:line.id
              Text color:"muted"
                "{line.text}"

const answerLines value:[
  { id:"sequence" text:"Large sequence labels make long FAQ collections easier to scan and discuss with a team." },
  { id:"interaction" text:"Only the answer changes height; the numbered reading order remains stable throughout the interaction." },
]
Section id:"numbered-list-accordion" bg:"background" color:"backgroundText" boxed:true py:{ xs:8 md:14 }
  Grid columns:1 gap:{ xs:8 md:10 }
    Flex direction:"column" align:{ xs:"center" md:"start" } gap:3
      Title size:{ xs:"3xl" md:"5xl" } weight:"black"
        "Frequently Asked Questions"
      Text size:"lg" color:"muted"
        "A numbered disclosure list gives every question a memorable position in the sequence."
    Divider scheme:"muted"
    Accordion scheme:"surface" rounded:"xs" w:"full"
      item id:"numbered-reusable" label:"01 · What makes a reusable website block effective?" defaultOpen:true
        Grid columns:1 gap:2
          each in:answerLines as:line key:line.id
            Text color:"muted"
              "{line.text}"
      item id:"numbered-responsive" label:"02 · How should content adapt across screen sizes?"
        Grid columns:1 gap:2
          each in:answerLines as:line key:line.id
            Text color:"muted"
              "{line.text}"
      item id:"numbered-products" label:"03 · Can the same block support multiple products?"
        Grid columns:1 gap:2
          each in:answerLines as:line key:line.id
            Text color:"muted"
              "{line.text}"
      item id:"numbered-accessible" label:"04 · What keeps interaction accessible?"
        Grid columns:1 gap:2
          each in:answerLines as:line key:line.id
            Text color:"muted"
              "{line.text}"