/* FAQ, option B "Ask it" (picked 2026-09-30). Scoped under .faqsec; the Knot is .fknot because the lesson owns .knot. */
.faqsec { --line:var(--c-haze-14); --line2:var(--c-haze-26); --muted:var(--c-muted); --accent:var(--c-thread); --sys:var(--font-system); position:relative }
.faqsec em { color:var(--brass); font-style:italic } .faqsec .serif { font-family:var(--font-display); font-weight:400 }
.faqsec .sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap }
.faqsec .sec { position:relative; max-width:1100px; margin:0 auto; padding:14vh 40px 7vh }
.faqsec .head { text-align:center } .faqsec .head .mono { color:var(--cobalt); margin-bottom:16px }
.faqsec .head h2 { font-size:clamp(46px,5.6vw,76px); line-height:1 } .faqsec .head p { margin:16px auto 0; max-width:560px; color:var(--mist); font-size:16px; line-height:1.6 }
.js .faqsec .reveal { opacity:0; transform:translateY(26px); transition:opacity 1s cubic-bezier(.2,.8,.2,1), transform 1s cubic-bezier(.2,.8,.2,1) } .js .faqsec .reveal.in { opacity:1; transform:none }
.faqsec .ans { color:var(--mist); font-size:15px; line-height:1.65 } .faqsec .ans b { color:var(--cream); font-weight:600 }
.faqsec kbd { font:600 12px var(--sys); padding:2px 7px; border-radius:6px; border:1px solid var(--c-white-22); background:var(--c-white-6); color:var(--c-white) }
.faqsec .ask { position:relative; margin:9vh auto 0; max-width:680px; display:flex; align-items:center; gap:12px; padding:8px 8px 8px 18px; border-radius:999px; cursor:text;
  background:linear-gradient(150deg, var(--c-12141f-96), var(--c-080a12-94)); border:1px solid var(--c-f2efe6-18); box-shadow:0 18px 42px var(--c-black-50), inset 0 1px 0 var(--c-white-7); transition:border-color .3s, box-shadow .3s }
.faqsec .ask:focus-within { outline:2px solid var(--brass); outline-offset:3px; border-color:var(--c-thread-55); box-shadow:0 18px 42px var(--c-black-50), 0 0 0 4px var(--c-thread-12) }
.faqsec .fknot { position:relative; flex:0 0 38px; height:38px; display:inline-flex; align-items:center; justify-content:center }
.faqsec .fknot svg { width:26px; height:26px; display:block; overflow:visible; transition:transform .35s cubic-bezier(.2,.8,.2,1), filter .35s }
.faqsec .fknot[data-state="thinking"] svg { transform:rotate(-8deg) scale(1.06); filter:drop-shadow(0 0 6px rgba(140,193,82,.45)) }
.faqsec .fknot[data-state="ready"] svg { transform:scale(1.08); filter:drop-shadow(0 0 8px rgba(241,236,223,.35)) }
.faqsec .ask input { flex:1; min-width:0; border:0; outline:none; background:transparent; color:var(--cream); font:16px var(--sys) } .faqsec .ask input::placeholder { color:var(--c-paper-42) }
.faqsec .ask .count { color:var(--muted); font-size:12.5px; padding-right:10px; white-space:nowrap }
.faqsec .tries { margin:14px auto 0; display:flex; flex-wrap:wrap; justify-content:center; gap:8px; max-width:760px }
.faqsec .tries button { font:500 13px var(--font-body); color:var(--mist); background:var(--c-cream-3); border:1px solid var(--line); border-radius:999px; padding:7px 12px; cursor:pointer; transition:color .2s, border-color .2s }
.faqsec .tries button:hover { color:var(--cream); border-color:var(--line2) }
.faqsec .qlist { margin:28px auto 0; max-width:820px; display:grid; gap:8px }
.faqsec .qrow { border-radius:16px; border:1px solid var(--line); background:var(--c-cream-2); overflow:hidden; transition:border-color .3s, background .3s }
.faqsec .qrow.hide { display:none }
.faqsec .qh { width:100%; display:flex; align-items:center; gap:14px; padding:16px 20px; background:none; border:0; color:var(--cream); font:500 16px var(--font-body); text-align:left; cursor:pointer }
 .faqsec .qh .pl { margin-left:auto; flex:0 0 22px; height:22px; border-radius:50%; border:1px solid var(--line2); position:relative; transition:transform .35s }
.faqsec .qh .pl::before, .faqsec .qh .pl::after { content:""; position:absolute; left:50%; top:50%; width:9px; height:1.5px; background:var(--mist); transform:translate(-50%,-50%) } .faqsec .qh .pl::after { transform:translate(-50%,-50%) rotate(90deg); transition:opacity .3s }
.faqsec mark { background:var(--c-brass-25); color:var(--cream); border-radius:3px; padding:0 2px }
.faqsec .body { display:grid; grid-template-rows:0fr; transition:grid-template-rows .45s cubic-bezier(.2,.8,.2,1) } .faqsec .body > div { overflow:hidden }
.faqsec .qrow.open { border-color:var(--c-thread-40); background:var(--c-thread-5) } .faqsec .qrow.open .body { grid-template-rows:1fr } .faqsec .qrow.open .pl { transform:rotate(180deg) } .faqsec .qrow.open .pl::after { opacity:0 }
.faqsec .bub { margin:0 20px 18px 56px; padding:12px 14px; border-radius:12px; background:linear-gradient(150deg, var(--c-12141f-96), var(--c-080a12-94)); border:1px solid var(--c-f2efe6-13) }
.faqsec .bub .k { margin-bottom:6px; color:var(--accent); font:700 9.5px/1 var(--sys); letter-spacing:.16em; text-transform:uppercase }
.faqsec .none { display:none; text-align:center; color:var(--mist); margin-top:20px } .faqsec .none.on { display:block }
.faqsec .more { margin:36px auto 0; max-width:820px; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:22px 26px; border-radius:18px; border:1px solid var(--line); background:var(--c-cream-3) }
.faqsec .more b { font:400 26px var(--font-display)} .faqsec .more p { margin-top:4px; color:var(--mist); font-size:14.5px }
.faqsec .fbtn { display:inline-flex; align-items:center; white-space:nowrap; border-radius:999px; padding:12px 20px; font:600 14.5px var(--font-body); text-decoration:none; border:1px solid var(--line2); color:var(--cream); background:var(--c-cream-5); transition:transform .25s cubic-bezier(.2,.8,.2,1), background .3s }
.faqsec .fbtn:hover { transform:scale(1.04); background:var(--c-cream-10) }
.faqsec .fbtn:focus-visible, .faqsec .qh:focus-visible, .faqsec .tries button:focus-visible { outline:2px solid var(--brass); outline-offset:3px }
@media (max-width:980px) { .faqsec .more { flex-direction:column; align-items:flex-start } }
@media (prefers-reduced-motion: reduce) { .js .faqsec .reveal { opacity:1; transform:none; transition:none } .faqsec .body { transition:none } }
.faqsec .ans code { font:12.5px var(--font-mono); padding:1px 6px; border-radius:5px; background:var(--c-black-35); border:1px solid var(--line); white-space:pre }
/* phones: the heading holds two lines, with the brass phrase kept whole on the second */
.faqsec .head h2 em { white-space:nowrap }
@media (max-width:480px) { .faqsec .head h2 { font-size:36px } }