/* FAQ: light paper, the terracotta kolam border down the left, two columns of
   questions under gold section labels. Each question opens in place. Built on pages.css. */
:root{
  --paper:#F2ECE0;
  --f-ink:#14151C;
  --f-body:#2E2A24;
  --f-soft:#4C473F;
  --f-gold:#93672F;
  --f-rule:rgb(168 124 62 / .55);
  --f-hair:rgb(120 96 60 / .2);
  --left:max(var(--pad),22px);
}
html,body{background:var(--paper)}
.faq{color:var(--f-body)}

/* the terracotta kolam border, pinned to the left edge on wide screens */
.border{display:none}

.faq .bar{position:relative;z-index:3}
.faq-main{padding:clamp(30px,5vw,48px) var(--pad) clamp(56px,8vw,96px)}
.faq .eyebrow{color:var(--f-gold);letter-spacing:.24em}
.faq h1{margin-top:.45rem;color:var(--f-ink);font-weight:400;font-size:clamp(2.8rem,8vw,4.9rem);line-height:1.04;letter-spacing:-.015em}
.faq .intro{margin:.8rem 0 0;max-width:46rem;font:400 clamp(1.02rem,1.5vw,1.16rem)/1.5 var(--f-display);color:var(--f-body)}
.faq .intro span{display:block}

.cols{display:grid;gap:clamp(34px,5vw,48px);margin-top:clamp(30px,4vw,44px)}
.col{display:grid;gap:clamp(34px,5vw,56px);align-content:start}

.group h2{margin:0;padding-bottom:.75rem;border-bottom:1px solid var(--f-rule);
  font:600 .8rem/1.4 var(--f-ui);letter-spacing:.24em;text-transform:uppercase;color:var(--f-gold)}

.qa{border-bottom:1px solid var(--f-hair)}
.qa summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:1.05rem 0 1.05rem 2px;font:400 clamp(1.12rem,1.6vw,1.3rem)/1.35 var(--f-display);color:var(--f-ink);
  -webkit-tap-highlight-color:transparent}
.qa summary::-webkit-details-marker{display:none}
.qa summary:hover{color:var(--maroon)}
.qa summary:focus-visible{outline:2px solid var(--maroon);outline-offset:2px}
.plus{flex:none;position:relative;width:18px;height:18px;margin-right:6px;color:var(--f-gold);transition:transform .3s ease}
.plus::before,.plus::after{content:"";position:absolute;left:50%;top:50%;background:currentColor;transform:translate(-50%,-50%)}
.plus::before{width:18px;height:1.5px}
.plus::after{width:1.5px;height:18px;transition:opacity .25s ease}
.qa[open] .plus{transform:rotate(180deg)}
.qa[open] .plus::after{opacity:0}

.ans{padding:0 2.6rem 1.25rem 2px;font:400 .98rem/1.65 var(--f-ui);color:var(--f-soft)}
.ans p{margin:0 0 .75rem}
.ans p:last-child,.ans ul:last-child{margin-bottom:0}
.ans ul{margin:0 0 .85rem;padding:0;list-style:none;display:grid;gap:.4rem}
.ans li{position:relative;padding-left:1.15rem}
.ans li::before{content:"";position:absolute;left:0;top:.62em;width:.42rem;height:.42rem;border-radius:50%;background:var(--gold)}
.ans a{color:var(--maroon);text-underline-offset:3px}
.ans a:hover{color:var(--f-ink)}
.ans strong{font-weight:600;color:var(--f-body)}
.qa[open] .ans{animation:ansIn .3s ease}
@keyframes ansIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

/* phones: brand line sits plainly at the top */
@media (max-width:1099px){
  .faq .bar{border-bottom-color:var(--f-rule)}
}
@media (max-width:480px){
  .ans{padding-right:.5rem}
}

/* wide screens: the mockup's two columns, the right one starting beside the title */
@media (min-width:1000px){
  .cols{grid-template-columns:1fr 1fr;column-gap:clamp(48px,5vw,80px);margin-top:0}
  .faq-main{display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(48px,5vw,80px);align-items:start}
  .faq-main .head{grid-column:1;grid-row:1}
  .faq-main .cols{display:contents}
  .col-l{grid-column:1;grid-row:2;padding-top:clamp(20px,2vw,30px)}
  .col-r{grid-column:2;grid-row:1 / span 2;padding-top:clamp(130px,11.4vw,178px)}
}
@media (min-width:1100px){
  :root{--left:max(8.6vw,128px)}
  .border{display:block;position:fixed;z-index:2;left:0;top:0;height:100vh;width:auto;max-width:none;pointer-events:none;
    -webkit-mask-image:linear-gradient(to right,#000 80%,transparent 100%);mask-image:linear-gradient(to right,#000 80%,transparent 100%)}
  .faq .bar{margin-left:var(--left);margin-right:var(--pad);padding-top:24px;padding-bottom:18px}
  .faq-main{padding-left:var(--left);padding-right:var(--pad);padding-top:22px}
}
@media (prefers-reduced-motion:reduce){.plus,.plus::after{transition:none}.qa[open] .ans{animation:none}}