/* PromptKit site. Design system: see .claude/commands/site.md and design/site-mockup/. No inline style anywhere (strict CSP). */
:root{--paper:#f6f7f7;--surface:#fff;--sunken:#eef1f1;--ink:#14201f;--muted:#4a5857;--line:#d5dcdb;--line-strong:#7c8b8a;--teal:#0f6b66;--teal-strong:#0b5450;--teal-soft:#e3f1ef;--on-teal:#fff;--red:#b3261e;--red-soft:#fbe9e7;--on-red:#fff;--amber:#946000;--amber-soft:#fbf0dc;--green:#17805d;--shadow-panel:0 1px 2px rgba(20,32,31,.06),0 8px 24px rgba(20,32,31,.08);--bar:72px;color-scheme:light dark}
@media(prefers-color-scheme:dark){:root{--paper:#0e1413;--surface:#151d1c;--sunken:#0a0f0e;--ink:#e6edec;--muted:#9daeac;--line:#2a3634;--line-strong:#5e706e;--teal:#3fb8aa;--teal-strong:#63cbbe;--teal-soft:#12302d;--on-teal:#06201d;--red:#ff8a80;--red-soft:#3a1715;--on-red:#2b0a07;--amber:#e8b04b;--amber-soft:#33260c;--green:#4fc69a;--shadow-panel:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.45)}}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
body{margin:0;background:var(--paper);color:var(--ink);font:15px/22px system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif}
a{color:var(--teal)}a:hover{color:var(--teal-strong);text-decoration-thickness:2px}
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
[id]{scroll-margin-top:16px}
.skip{position:absolute;left:-9999px;top:8px;background:var(--surface);color:var(--ink);padding:10px 14px;border:2px solid var(--teal);border-radius:6px;z-index:20}.skip:focus{left:8px}
.wrap{max-width:1120px;margin:0 auto;padding:0 48px}
.cap{font-size:13px;line-height:18px;color:var(--muted)}
.lead{margin:0 0 28px;font-size:18px;line-height:28px;color:var(--muted);max-width:720px}
code,.code,.mono{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;font-size:13px;line-height:20px}
.m0{margin:0}.mt8{margin-top:8px}.mt16{margin-top:16px}.mt24{margin-top:24px}.mt32{margin-top:32px}

/* header */
header.site{background:var(--paper)}
.hdr{display:flex;align-items:center;gap:24px;height:72px}
.brand{display:flex;align-items:center;gap:10px;font-size:18px;font-weight:700;color:var(--ink);text-decoration:none;flex:none}
.brand:hover{color:var(--ink)}
.brand svg{flex:none}
.navd{display:flex;gap:4px;margin-left:auto}
.navd a,.lang{padding:8px 10px;border-radius:6px;color:var(--ink);text-decoration:none;font-size:14px;font-weight:600;white-space:nowrap}
.navd a:hover,.lang:hover,.navd a[aria-current=page]{background:var(--teal-soft);color:var(--teal-strong)}
.mnav{display:none;position:relative;margin-left:auto}
.mnav summary{list-style:none}.mnav summary::-webkit-details-marker{display:none}
.mnav nav{position:absolute;right:0;top:52px;z-index:10;min-width:240px;background:var(--surface);border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow-panel);padding:8px;display:flex;flex-direction:column}
.mnav nav a{display:flex;align-items:center;min-height:44px;padding:0 12px;border-radius:6px;color:var(--ink);text-decoration:none;font-weight:600}
.mnav nav a:hover,.mnav nav a[aria-current=page]{background:var(--teal-soft);color:var(--teal-strong)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 20px;border-radius:10px;border:1px solid var(--line-strong);background:var(--surface);color:var(--ink);font:inherit;font-size:14px;font-weight:600;text-decoration:none;cursor:pointer;text-align:center}
.btn:hover{color:var(--ink);border-color:var(--ink)}
.btn.primary{background:var(--teal);border-color:var(--teal);color:var(--on-teal)}
.btn.primary:hover{background:var(--teal-strong);border-color:var(--teal-strong);color:var(--on-teal)}
.btn[disabled],.btn[aria-disabled=true]{opacity:.55;cursor:not-allowed}
.btn.small{min-height:44px;padding:0 16px}
.quiet{background:none;border:0;min-height:44px;padding:0 8px;color:var(--ink);font:inherit;font-size:14px;font-weight:600;text-decoration:underline;cursor:pointer}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.links{display:flex;gap:12px 24px;flex-wrap:wrap;align-items:center}

/* hero and demo */
.hero{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;padding:64px 0 32px}
h1.display{margin:0 0 20px;font-size:52px;line-height:56px;font-weight:700;letter-spacing:-.02em}
.hero .cap{margin:16px 0 0}
.demo{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:24px}
.demo label{display:block;font-size:13px;line-height:18px;color:var(--muted);margin-bottom:12px}
.demo textarea{display:block;width:100%;min-height:112px;resize:vertical;background:var(--sunken);color:var(--ink);border:1px solid var(--line-strong);border-radius:10px;padding:14px 16px;font:inherit;font-size:14px;line-height:22px}
.demo .row{margin:12px 0 0}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow-panel);padding:20px;margin-top:16px}
.ptitle{display:flex;align-items:center;gap:10px}
.ptitle svg{flex:none}
.panel h2{margin:0;font-size:20px;line-height:28px;font-weight:600}
.panel h2:focus{outline:none}
.panel>p{margin:6px 0 4px;color:var(--muted)}
.panel .ok,.panel .err{margin:0}
.items{list-style:none;margin:8px 0 0;padding:0}
.item{display:flex;align-items:center;gap:12px;background:var(--sunken);border-radius:6px;padding:10px 12px;margin-top:8px;word-break:break-word}
.item .code{flex:1}
.panel .row{margin-top:16px}
.panel .cap{margin:12px 0 0}
pre.out{background:var(--sunken);border-radius:6px;padding:12px;white-space:pre-wrap;word-break:break-word;margin:8px 0 0;font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;font-size:13px;line-height:20px}

/* severity pill: 4 bars and a word */
.pill{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:2px 10px;font-size:13px;line-height:20px;font-weight:600;white-space:nowrap;text-transform:capitalize}
.pill i{display:inline-flex;gap:2px}
.pill i b{display:block;width:3px;height:10px;border-radius:1px;background:currentColor}
.pill i b.off{opacity:.3}
.pill.critical{background:var(--red);color:var(--on-red)}
.pill.high{background:var(--red-soft);color:var(--red)}
.pill.medium,.pill.low{background:var(--amber-soft);color:var(--amber)}

/* sections: title column + content, separated by rules */
.sec{display:grid;grid-template-columns:320px 1fr;gap:64px;padding:96px 0 0;margin-top:96px;border-top:1px solid var(--line)}
.hero+.sec{margin-top:64px}
.sec h2,.two h2,.stitle{margin:0;font-size:32px;line-height:38px;font-weight:650;letter-spacing:-.01em}
.steps{list-style:none;margin:0;padding:0}
.steps li{display:grid;grid-template-columns:40px 1fr;gap:12px;padding:20px 0;border-bottom:1px solid var(--line)}
.steps li:first-child{padding-top:0}
.n{font-size:20px;line-height:28px;font-weight:600;color:var(--muted)}
.steps h3,.inst h3{margin:0 0 4px;font-size:20px;line-height:28px;font-weight:600}
.steps p{margin:0;color:var(--muted)}
.rows .r{display:grid;grid-template-columns:130px 1fr 90px;gap:16px;align-items:center;padding:16px 0;border-bottom:1px solid var(--line)}
.rows .r:first-child{padding-top:0}
.facts p{margin:0;padding:16px 0;border-bottom:1px solid var(--line)}
.facts p:first-child{padding-top:0;font-size:18px;line-height:28px}
.facts p:last-child{border-bottom:0}
.two{display:grid;grid-template-columns:1fr 1fr;gap:64px;padding:96px 0 0;margin-top:96px;border-top:1px solid var(--line);align-items:start}
.two h2{margin:0 0 16px}
.two p{margin:0 0 16px}
.two p.big{font-size:18px;line-height:28px;color:var(--muted)}
.coachwrap{display:flex;flex-direction:column;gap:16px}
.coach{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:20px}
.chead{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:12px}
.cmsg{background:var(--sunken);border-radius:6px;padding:12px;font-size:14px;line-height:22px}
.cscore{display:flex;align-items:center;gap:16px;margin:16px 0}
.cscore.last{margin-bottom:0}
.num{font-size:32px;line-height:38px;font-weight:650;letter-spacing:-.01em}
.lvl{font-size:14px;line-height:20px;font-weight:600;margin-bottom:6px}
.gauge{display:flex;gap:4px}
.gauge i{display:block;width:44px;height:8px;border-radius:6px;background:var(--sunken);border:1px solid var(--line)}
.gauge i.red{background:var(--red);border-color:var(--red)}
.gauge i.green{background:var(--green);border-color:var(--green)}
.coach .cap{margin:0}.coach .cap+.cap{margin-top:8px}
.miss{list-style:none;margin:6px 0 16px;padding:0}
.miss li{padding:8px 0;border-top:1px solid var(--line);font-size:14px}
.one{padding:96px 0 0;margin-top:96px;border-top:1px solid var(--line)}
.one .lead{margin:12px 0 0}
.plans{display:grid;grid-template-columns:1fr 1.25fr;gap:48px;margin-top:48px;align-items:start}
.plan h2,.plan h3{margin:0;font-size:20px;line-height:28px;font-weight:600}
.price{font-size:32px;line-height:38px;font-weight:650;letter-spacing:-.01em;margin:8px 0 0}
.price small{font-size:15px;font-weight:400;color:var(--muted);letter-spacing:0}
.free ul{list-style:none;margin:20px 0 24px;padding:0}
.free li{padding:12px 0;border-top:1px solid var(--line)}
.pro{background:var(--teal-soft);border-radius:16px;padding:32px}
.pro .common{margin:8px 0 24px}
.opt{display:grid;grid-template-columns:1fr auto;gap:8px 24px;align-items:center;padding:20px 0;border-top:1px solid var(--line-strong)}
.opt p{margin:0}.opt .oname{font-weight:600}.opt .cap{margin-top:4px}
.pro .note{margin:8px 0 0}
.pfoot{display:grid;grid-template-columns:1fr 1fr;gap:48px;margin-top:48px}
.pfoot h2,.pfoot h3{margin:0 0 8px;font-size:20px;line-height:28px;font-weight:600}
.pfoot p{margin:0;color:var(--muted)}
ul.plain{margin:0;padding-left:20px}ul.plain li{padding:6px 0}
.faq .q{padding:16px 0;border-bottom:1px solid var(--line)}
.faq .q:first-child{padding-top:0}
.faq h3{margin:0 0 4px;font-size:16px;line-height:24px;font-weight:600}
.faq p{margin:0;color:var(--muted)}
.inst{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin:28px 0}
.inst.two-steps{grid-template-columns:repeat(2,1fr)}
.inst h3{margin:8px 0 4px;font-size:18px;line-height:26px}
.inst p{margin:0;color:var(--muted)}
.quotes{display:grid;gap:0}
.quotes blockquote{margin:0;padding:16px 0;border-bottom:1px solid var(--line)}
.quotes blockquote:first-child{padding-top:0}
.quotes p{margin:0 0 6px;font-size:18px;line-height:28px}
.rating{font-weight:600}

/* inner pages */
.ptop{padding-top:48px}
h1.title{margin:0 0 12px;font-size:32px;line-height:38px;font-weight:650;letter-spacing:-.01em}
.ptop .lead{margin:0}
.fsec{display:grid;grid-template-columns:320px 1fr;gap:64px;padding:64px 0 0;margin-top:64px;border-top:1px solid var(--line)}
.fsec h2{margin:0;font-size:28px;line-height:34px;font-weight:650;letter-spacing:-.01em}
.fr{padding:16px 0;border-bottom:1px solid var(--line)}
.fr:first-child{padding-top:0}
.fr h3{margin:0 0 2px;font-size:16px;line-height:24px;font-weight:600}
.fr p,.fr ol,.fr ul{margin:0;color:var(--muted)}
.fr p+p{margin-top:8px}
.fr ol,.fr ul{padding-left:20px}.fr li{padding:2px 0}
.fr pre{margin:8px 0 0}
.legal{max-width:760px}
.legal h2{margin:32px 0 8px;font-size:20px;line-height:28px;font-weight:600}
.legal h3{margin:20px 0 6px;font-size:16px;line-height:24px;font-weight:600}
.legal p,.legal ul,.legal ol{margin:0 0 12px}
.legal .cap{margin:0 0 24px}
.draft{border-left:4px solid var(--amber);background:var(--amber-soft);color:var(--ink);padding:12px 16px;border-radius:6px;margin:0 0 24px;font-weight:600}
.article{max-width:760px}
.article h2{margin:40px 0 12px;font-size:24px;line-height:32px;font-weight:650}
.article p,.article ul,.article ol{margin:0 0 16px;font-size:16px;line-height:26px}
.article .cap{margin:0 0 24px}
.article .answer{font-size:18px;line-height:28px;color:var(--ink);border-left:4px solid var(--teal);padding:4px 0 4px 16px}
.crumbs{font-size:13px;line-height:18px;color:var(--muted);margin:0 0 12px}
.crumbs a{color:var(--muted)}
.cards{list-style:none;margin:0;padding:0}
.cards li{padding:16px 0;border-bottom:1px solid var(--line)}
.cards li:first-child{padding-top:0}
.cards h3{margin:0 0 4px;font-size:18px;line-height:26px;font-weight:600}
.cards p{margin:0;color:var(--muted)}

/* forms */
.form{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:24px;max-width:520px}
.ptop .form{margin-top:32px}
.field{margin:0 0 16px;border:0;padding:0;min-width:0}
.field label,.field legend{display:block;font-size:14px;line-height:20px;font-weight:600;margin-bottom:6px;padding:0}
.field input[type=text],.field input[type=email]{width:100%;height:44px;border:1px solid var(--line-strong);border-radius:6px;background:var(--surface);padding:0 12px;font:inherit;color:var(--ink)}
.choices{display:flex;flex-wrap:wrap;gap:8px}
.choices label{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;border:1px solid var(--line-strong);border-radius:10px;font-weight:500;margin:0;cursor:pointer}
.choices input{width:18px;height:18px;margin:0;accent-color:var(--teal)}
.consent{display:flex;gap:10px;align-items:flex-start;margin:0 0 16px;font-size:14px;line-height:20px}
.consent input{width:20px;height:20px;margin:0;flex:none;accent-color:var(--teal)}
.consent label{padding-top:0}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.formerr{display:none;border-left:4px solid var(--red);background:var(--red-soft);color:var(--ink);padding:12px 16px;border-radius:6px;margin:0 0 16px;max-width:520px;font-weight:600}
.formerr:target{display:block}
.form+.cap{max-width:520px;margin:12px 0 0}
.res{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:20px;max-width:720px;margin-top:16px}
.res:empty{display:none}
.res .cap{margin:12px 0 0}
.keybox{background:var(--sunken);border-radius:6px;padding:12px;word-break:break-all;margin:8px 0 12px}
.ok{color:var(--green);font-weight:600}
.err{color:var(--red);font-weight:600}
.license-next{max-width:720px;margin:24px 0 0}

/* private admin page */
.tablewrap{overflow-x:auto}
table.adm{border-collapse:collapse;width:100%;font-size:14px}
table.adm th,table.adm td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
table.adm th{font-weight:600;color:var(--muted)}
table.adm form{display:inline}
.filters{display:flex;gap:8px;flex-wrap:wrap}
.btn.danger{background:var(--red);border-color:var(--red);color:var(--on-red)}
.del summary{list-style:none;display:inline-flex;align-items:center}.del summary::-webkit-details-marker{display:none}
.del form{display:block;margin-top:8px}

/* footer and the mobile bar */
footer.site{border-top:1px solid var(--line);background:var(--surface);margin-top:96px;padding:40px 0 48px}
footer.site .cols{display:grid;grid-template-columns:1fr 1fr 1.2fr;gap:48px}
footer.site h2{margin:0 0 8px;font-size:14px;line-height:20px;font-weight:600}
footer.site p{margin:0;color:var(--muted)}
footer.site ul{list-style:none;margin:0;padding:0}
footer.site li{padding:3px 0}
footer.site .cap{margin:32px 0 0}
.sticky{display:none}

/* tablets */
@media(max-width:1060px){
  .navd a,.lang{padding:8px 6px}
  .hdr{gap:12px}
}
@media(max-width:1023px){
  .hero{grid-template-columns:1fr;gap:32px}
  .sec,.fsec{grid-template-columns:220px 1fr;gap:40px}
  .two,.plans,.pfoot{grid-template-columns:1fr}
  .navd,.hdr>.lang{display:none}
  .hdr-cta{margin-left:auto}
  .mnav{display:block;margin-left:0}
}
/* phones */
@media(max-width:767px){
  .wrap{padding:0 16px}
  .hdr{height:64px;justify-content:space-between}
  .hdr-cta{display:none}
  .mnav{margin-left:auto}
  h1.display{margin:0 0 16px;font-size:36px;line-height:40px}
  h1.title{font-size:28px;line-height:34px}
  .lead{margin:0 0 24px}
  .hero{padding:32px 0 0}
  .hero .row .btn{width:100%}
  .demo{padding:16px}
  .panel{padding:16px}
  .ptitle{align-items:flex-start}
  .item{flex-direction:column;gap:6px;align-items:flex-start}
  .panel .row .btn,.panel .row .quiet{width:100%}
  .sec,.fsec,.two{display:block;padding-top:64px;margin-top:64px}
  .one{padding-top:64px;margin-top:64px}
  .sec h2,.two h2,.stitle{font-size:28px;line-height:34px}
  .sec h2,.fsec h2{margin:0 0 20px}
  .two .coachwrap{margin-top:24px}
  .coach{padding:16px}
  .steps li{grid-template-columns:32px 1fr;gap:8px;padding:16px 0}
  .steps h3{font-size:18px;line-height:26px}
  .rows .r{display:flex;flex-direction:column;gap:6px;align-items:flex-start}
  .plans{display:block;margin-top:32px}
  .free{margin-bottom:32px}
  .free .btn{width:100%}
  .pro{padding:20px}
  .opt{grid-template-columns:1fr}
  .opt .btn{width:100%}
  .pfoot{display:block;margin-top:32px}
  .pfoot h2,.pfoot h3{margin:24px 0 8px;font-size:18px;line-height:26px}
  .inst,.inst.two-steps{display:block;margin:20px 0}
  .inst>div{padding:16px 0;border-bottom:1px solid var(--line)}
  .links .btn{width:100%}
  .form{padding:16px}
  .form .btn{width:100%}
  footer.site{margin-top:64px;padding:32px 0 40px}
  footer.site .cols{display:block}
  footer.site .cols>div{margin-bottom:24px}
  footer.site li a{display:inline-block;padding:8px 0}
  body{padding-bottom:calc(var(--bar) + env(safe-area-inset-bottom))}
  .sticky{display:block;position:fixed;left:0;right:0;bottom:0;z-index:15;background:var(--surface);border-top:1px solid var(--line);padding:12px 16px calc(12px + env(safe-area-inset-bottom))}
  .sticky .btn{width:100%}
}