/* FAQ page (faq.html). Shell + tokens: app.css and lab.css. A reading column on the notebook paper,
   with an "On this page" list that sits beside it on wide screens and above it on narrow ones. */
.faq{max-width:1180px;margin:0 auto;padding-block:36px 72px;padding-inline:max(16px,env(safe-area-inset-left,0px)) max(16px,env(safe-area-inset-right,0px));display:grid;grid-template-columns:minmax(0,820px) 260px;gap:32px 48px;align-items:start}
.faq-hero,.faq-main{grid-column:1}
.faq-main{display:flex;flex-direction:column;gap:32px;min-width:0}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* heading */
.faq-hero{display:flex;flex-direction:column;gap:10px}
.faq-hero h1{font-size:clamp(32px,4.6vw,48px);color:var(--m-ink);font-weight:700}
.faq-hero .sub{font:600 clamp(19px,2.2vw,23px)/1.3 var(--display);color:var(--text)}
.faq-hero .lede{max-width:68ch}

/* short answer: highlighter-yellow card with the two bodies side by side */
.quick{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:20px 22px;display:flex;flex-direction:column;gap:16px;position:relative;overflow:hidden}
.quick::before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;background:var(--sun)}
.quick > p{margin:0;font-size:18px;line-height:1.5}
.quick mark{background:linear-gradient(transparent 55%,color-mix(in srgb,var(--sun) 55%,transparent) 0);color:inherit;padding:0 2px}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.who{--c:var(--m);border-radius:12px;padding:14px 16px;background:color-mix(in srgb,var(--c) 8%,var(--panel));border:1px solid color-mix(in srgb,var(--c) 22%,var(--line));display:flex;flex-direction:column;gap:2px}
.who.cbse{--c:var(--mint)}
.who b{font:800 22px/1.1 var(--display);color:color-mix(in srgb,var(--c) 70%,#000)}
.who .role{font-weight:700;color:var(--text)}
.who small{color:var(--muted);font-size:14px;line-height:1.35}

/* comparison table */
.sec{display:flex;flex-direction:column;gap:14px;scroll-margin-top:calc(var(--top) + 16px)}
.sec > h2{font-size:clamp(25px,3vw,30px)}
.sec > .lede{font-size:16px}
.compare-wrap{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
.compare{width:100%;border-collapse:collapse;font-size:15px;line-height:1.45}
.compare th,.compare td{padding:11px 14px;text-align:left;vertical-align:top;border-top:1px solid var(--line)}
.compare thead th{border-top:0;font:700 17px var(--display);background:var(--hover)}
.compare thead th.n{color:var(--m-ink)}
.compare thead th.c{color:color-mix(in srgb,var(--mint) 70%,#000)}
.compare tbody th{font-weight:600;color:var(--muted);width:22%}
.compare td{width:39%}

/* questions */
.qa-list{display:flex;flex-direction:column;gap:10px}
.qa{background:var(--panel);border:1px solid var(--line);border-radius:14px;scroll-margin-top:calc(var(--top) + 16px)}
.qa[open]{border-color:color-mix(in srgb,var(--m) 30%,var(--line));box-shadow:var(--shadow)}
.qa summary{list-style:none;cursor:pointer;display:flex;align-items:flex-start;gap:12px;padding:14px 16px;font:600 18px/1.35 var(--body);border-radius:14px}
.qa summary::-webkit-details-marker{display:none}
.qa summary:hover{color:var(--m-ink)}
.qa summary::after{content:"+";margin-left:auto;flex:0 0 28px;height:28px;border-radius:50%;display:grid;place-items:center;font:700 20px/1 var(--display);color:var(--m-ink);background:var(--m-soft);transition:transform .15s}
.qa[open] summary::after{content:"−"}
.qa .a{padding:0 16px 16px;color:var(--text);font-size:16px;line-height:1.6}
.qa .a > :first-child{margin-top:0}
.qa .a > :last-child{margin-bottom:0}
.qa .a p,.qa .a ul,.qa .a ol{margin:0 0 10px}
.qa .a ul,.qa .a ol{padding-left:22px}
.qa .a li{margin-bottom:4px}
.qa .a a,.faq-foot a,.quick a{color:var(--m-ink);font-weight:600}
.open-all{align-self:flex-start}

/* "On this page" */
.toc{grid-column:2;grid-row:1 / span 2;position:sticky;top:calc(var(--top) + 24px);background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;display:flex;flex-direction:column;gap:8px}
.toc ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.toc a{display:block;text-decoration:none;color:var(--muted);font-weight:600;font-size:15px;padding:5px 10px;border-radius:9px}
.toc a:hover{background:var(--hover);color:var(--text)}
.toc a.on{background:var(--m-soft);color:var(--m-ink)}

/* call to action + small print */
.cta{display:flex;align-items:center;gap:16px 24px;flex-wrap:wrap;background:color-mix(in srgb,var(--m) 7%,var(--panel));border:1px solid color-mix(in srgb,var(--m) 22%,var(--line));border-radius:var(--radius);padding:20px 22px}
.cta div{display:flex;flex-direction:column;gap:2px;flex:1 1 280px}
.cta b{font:700 21px/1.2 var(--display)}
.cta span{color:var(--muted)}
.cta .btn{font-size:16px;padding:10px 20px;text-decoration:none}
.faq-foot{margin:0;color:var(--muted);font-size:14px;line-height:1.5}

@media (max-width:1100px){
  .faq{grid-template-columns:minmax(0,1fr);row-gap:24px}
  .toc{grid-column:1;grid-row:auto;position:static}
  .toc ol{flex-direction:row;flex-wrap:wrap;gap:6px}
  .toc a{border:1px solid var(--line);border-radius:999px;padding:4px 12px;font-size:14px}
}
/* The top bar wraps to two rows here and --top becomes auto, so links to a question need their own offset. */
@media (max-width:760px){
  .sec,.qa{scroll-margin-top:108px}
}
/* Phones: the comparison table becomes one small card per row, each cell labelled NCERT / CBSE. */
@media (max-width:640px){
  .faq{padding-block-start:24px}
  .pair{grid-template-columns:1fr}
  .quick > p{font-size:17px}
  .qa summary{font-size:17px}
  .compare thead{display:none}
  .compare,.compare tbody,.compare tr,.compare th,.compare td{display:block;width:auto}
  .compare tr{padding:12px 14px;border-top:1px solid var(--line)}
  .compare tbody tr:first-child{border-top:0}
  .compare th,.compare td{padding:0;border:0}
  .compare tbody th{width:auto;color:var(--text);font:700 17px var(--display);margin-bottom:6px}
  .compare td{padding-left:72px;position:relative;margin-top:4px}
  .compare td::before{content:attr(data-label);position:absolute;left:0;top:1px;font:700 12px/1.6 var(--body);letter-spacing:.04em;text-transform:uppercase;border-radius:6px;padding:0 6px}
  .compare td.n::before{color:var(--m-ink);background:var(--m-soft)}
  .compare td.c::before{color:color-mix(in srgb,var(--mint) 70%,#000);background:var(--mint-soft)}
}

/* contact page (contact.html): the form, in the same reading column */
.c-form{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:22px;display:flex;flex-direction:column;gap:14px}
.c-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.c-form label{display:flex;flex-direction:column;gap:6px;font-weight:600}
.c-form label small{font-weight:400;color:var(--muted)}
.c-form input,.c-form select,.c-form textarea{font:inherit;font-weight:400;padding:9px 12px;border:1px solid var(--line);border-radius:12px;background:var(--panel);color:var(--text);min-width:0}
.c-form textarea{resize:vertical}
.c-signed{margin:0;color:var(--muted)}
.c-form .field{font-size:16px}
.c-form .field label{gap:0}
.c-note{font-weight:400;color:var(--muted);font-size:13px;min-height:1em}
.c-steps{margin:0;padding-left:22px;display:flex;flex-direction:column;gap:4px}
@media (max-width:640px){ .c-grid{grid-template-columns:1fr} }

/* privacy.html and terms.html: running prose in each section */
.legal .sec p,.legal .sec li{font-size:16px;line-height:1.65}
.legal .sec > p,.legal .sec > ul{margin:0}
.legal .sec > ul{padding-left:22px;display:flex;flex-direction:column;gap:6px}
.legal .quick .plain{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:8px}
@media (min-width:641px){.legal .compare tbody th{width:30%} .legal .compare td{width:auto}}
/* the stacked small-screen rows have no column labels here, so no room is kept for them */
@media (max-width:640px){.legal .compare td{padding-left:0} .legal .compare td + td{margin-top:6px;color:var(--muted)}}