/* KamiVerify — /faq
   Self-contained, so home.php is not touched. The tokens and components below
   are lifted from the inline stylesheet in home.php unchanged, which is why the
   page looks like it was always part of the site. Naming follows the existing
   kv_*_bw.css files that how-it-works.php already links. */

:root{
  --bg:#ffffff; --fg:#0a0a0a;
  --card:#ffffff; --muted:#f5f5f5; --muted-fg:#737373;
  --primary:#171717; --primary-fg:#fafafa;
  --border:#e5e5e5; --ring:#a1a1a1;
  --band:#0a0a0a; --band-fg:#fafafa;
  --ok:#0a7d55; --ok-soft:#e8f5ef;
  --radius:.625rem;
  --sans:ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,"Cascadia Mono",monospace;
  --pad:clamp(1rem,5vw,4.5rem);
}

/* Three states, same as the homepage: no stamp means follow the device, and an
   explicit choice wins in either direction. */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0a0a0a; --fg:#fafafa;
    --card:#171717; --muted:#262626; --muted-fg:#a1a1a1;
    --primary:#e5e5e5; --primary-fg:#171717;
    --border:rgba(255,255,255,.10); --ring:#737373;
    --band:#fafafa; --band-fg:#0a0a0a;
    --ok:#3ddc9a; --ok-soft:rgba(61,220,154,.14);
  }
}
:root[data-theme="dark"]{
  --bg:#0a0a0a; --fg:#fafafa;
  --card:#171717; --muted:#262626; --muted-fg:#a1a1a1;
  --primary:#e5e5e5; --primary-fg:#171717;
  --border:rgba(255,255,255,.10); --ring:#737373;
  --band:#fafafa; --band-fg:#0a0a0a;
  --ok:#3ddc9a; --ok-soft:rgba(61,220,154,.14);
}

*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--sans);font-size:16px;
  line-height:1.55;-webkit-font-smoothing:antialiased}
h1,h2,h3{margin:0;font-weight:700;letter-spacing:-.03em;text-wrap:balance}
p{margin:0}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--ring);outline-offset:3px;border-radius:4px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
html{scroll-behavior:smooth}

.wrap{padding-inline:var(--pad)}
.rule{border-top:1px solid var(--border)}
.eyebrow{font-size:.6875rem;text-transform:uppercase;letter-spacing:.1em;font-weight:700;
  color:var(--muted-fg);font-family:var(--mono)}

/* ---- bar ---- */
nav.bar{position:sticky;top:0;z-index:40;background:var(--bg);border-bottom:1px solid var(--border);
  display:flex;align-items:center;gap:1rem;padding-block:.75rem}
.brand{display:flex;align-items:center;gap:.5rem}
.mark{width:28px;height:28px;flex:none;border-radius:7px;background:var(--primary);color:var(--primary-fg);
  display:grid;place-items:center;font-size:.75rem;font-weight:800;letter-spacing:-.06em}
.brand b{font-size:1.0625rem;letter-spacing:-.035em;display:block;line-height:1.1}
.brand small{font-size:.625rem;color:var(--muted-fg)}
.navlinks{display:flex;gap:1.25rem;font-size:.875rem;font-weight:500;color:var(--muted-fg)}
.navlinks a:hover{color:var(--fg)}
.grow{flex:1}

/* one control for language + theme, same component as the homepage */
.menu{position:relative;flex:none}
.prefbtn{display:inline-flex;align-items:center;gap:.3125rem;padding:.375rem .5rem .375rem .5625rem;
  border:1px solid var(--border);border-radius:999px;background:var(--muted);color:var(--fg);cursor:pointer;
  font-family:var(--mono);font-size:.6875rem;font-weight:800;letter-spacing:.04em}
.prefbtn:hover{background:var(--card)}
.prefbtn .glyph{width:15px;height:15px;display:block}
.prefbtn .caret{width:9px;height:9px;opacity:.5}
.pop{position:absolute;right:0;top:calc(100% + .5rem);min-width:196px;z-index:60;background:var(--card);
  border:1px solid var(--border);border-radius:var(--radius);padding:.375rem;box-shadow:0 12px 34px rgba(0,0,0,.16)}
.pop[hidden]{display:none}
.popgrp{display:flex;flex-direction:column}
.popgrp + .popgrp{margin-top:.25rem;padding-top:.3125rem;border-top:1px solid var(--border)}
.poplabel{font-size:.625rem;text-transform:uppercase;letter-spacing:.09em;font-weight:700;
  color:var(--muted-fg);font-family:var(--mono);padding:.375rem .625rem .25rem}
.popitem{display:flex;align-items:center;gap:.5rem;width:100%;padding:.5rem .625rem;border:0;
  border-radius:7px;background:transparent;color:var(--fg);cursor:pointer;font-size:.875rem;text-align:left}
.popitem:hover{background:var(--muted)}
.popitem .ic{width:15px;height:15px;flex:none;color:var(--muted-fg)}
.popitem .ck{margin-left:auto;width:15px;height:15px;flex:none;opacity:0}
.popitem[aria-checked="true"]{font-weight:600}
.popitem[aria-checked="true"] .ck{opacity:1}
.popitem[aria-checked="true"] .ic{color:var(--fg)}

/* ---- buttons ----
   a{color:inherit} above is 0-0-1 and would lose to .btn at 0-1-0 anyway, but
   the anchor forms are spelled out so a later rule cannot flip the label to the
   page colour and leave dark text on the dark button. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.625rem 1.125rem;
  border-radius:9px;border:1px solid transparent;background:var(--primary);color:var(--primary-fg);
  font-size:.875rem;font-weight:600;cursor:pointer;transition:opacity .15s}
a.btn{color:var(--primary-fg)}
.btn:hover{opacity:.87}
.btn.ghost,a.btn.ghost{background:transparent;color:var(--fg);border-color:var(--border)}
.btn.ghost:hover{background:var(--muted);opacity:1}
.btn.sm{padding:.4rem .8rem;font-size:.8125rem}

/* ---- hero ---- */
.fhero{padding-block:clamp(2.5rem,6vw,4rem) clamp(1.5rem,3vw,2rem)}
.fhero h1{font-size:clamp(2rem,5vw,3.25rem);line-height:1.02;letter-spacing:-.045em}
.fhero .lede{font-size:clamp(1rem,1.5vw,1.125rem);color:var(--muted-fg);max-width:56ch;margin-top:1rem}
.jump{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:1.5rem;padding-bottom:1.75rem}
.jump a{border:1px solid var(--border);border-radius:999px;padding:.375rem .8125rem;font-size:.8125rem;
  font-weight:600;color:var(--muted-fg)}
.jump a:hover{color:var(--fg);background:var(--muted)}

/* ---- question groups ---- */
.fgroup{padding-block:clamp(2rem,4vw,2.75rem)}
.fgroup > .eyebrow{display:block;margin-bottom:.5rem}
.fgroup h2{font-size:clamp(1.375rem,2.8vw,1.875rem);margin-bottom:1.25rem}
.faq{border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;background:var(--card)}
.faq details{border-bottom:1px solid var(--border)}
.faq details:last-child{border-bottom:0}
.faq summary{padding:1rem 1.25rem;cursor:pointer;font-weight:600;font-size:.9375rem;display:flex;
  align-items:center;gap:.75rem;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";margin-left:auto;font-family:var(--mono);color:var(--muted-fg);
  font-weight:400;font-size:1.125rem}
.faq details[open] summary::after{content:"\2212"}
.faq summary:hover{background:var(--muted)}
.faq .a{padding:0 1.25rem 1.125rem;color:var(--muted-fg);font-size:.9375rem;max-width:74ch}
.faq .a b{color:var(--fg);font-weight:600}

/* ---- closing band ---- */
.band{background:var(--band);color:var(--band-fg);padding-block:clamp(2.5rem,5vw,3.5rem)}
.band h2{font-size:clamp(1.5rem,3.2vw,2.25rem);line-height:1.05;max-width:22ch}
.band p{opacity:.72;margin-top:.75rem;max-width:52ch}
.band .cta{margin-top:1.5rem;display:flex;gap:.625rem;flex-wrap:wrap}
.band .btn,.band a.btn{background:var(--bg);color:var(--fg);border-color:var(--bg)}
.band .btn.ghost,.band a.btn.ghost{background:transparent;color:var(--band-fg);border-color:currentColor;opacity:.85}
.band .btn.ghost:hover{opacity:1;background:transparent}

/* ---- footer ---- */
.pfoot{padding-block:2rem;font-size:.8125rem;color:var(--muted-fg);display:flex;gap:1rem;
  flex-wrap:wrap;justify-content:space-between;border-top:1px solid var(--border)}
.pfoot a{color:var(--muted-fg)}
.pfoot a:hover{color:var(--fg)}
.pfoot nav{display:flex;gap:1rem;flex-wrap:wrap}

@media (max-width:860px){
  .navlinks{display:none}
}
@media (max-width:480px){
  nav.bar{gap:.5rem}
  .brand b{font-size:.9375rem}
  .mark{width:26px;height:26px}
  nav.bar .btn.sm{padding:.4rem .625rem}
  .band .cta .btn{flex:1}
}