/* otp.blockhype.* and branding.blockhype.*: small tool pages on top of site.css */
.tool-page{min-height:100vh;display:flex;flex-direction:column;background:var(--bh-bg);color:var(--bh-text);font-family:var(--bh-font)}
.tool-top{display:flex;align-items:center;justify-content:space-between;gap:16px;width:min(var(--bh-max),calc(100% - 32px));margin:0 auto;padding:14px 0}
.tool-main{width:min(980px,calc(100% - 32px));margin:0 auto;padding:10px 0 60px;flex:1}
.tool-page>main{flex:1}
.tool-footer{display:flex;flex-wrap:wrap;justify-content:center;gap:18px;padding:22px 16px;border-top:2px solid var(--bh-line);color:var(--bh-faint);font-size:.82rem}
.tool-footer a{color:var(--bh-muted);text-decoration:none}.tool-footer a:hover{color:var(--bh-text)}
.tool-hero{text-align:center;padding:26px 0 22px}
.tool-hero h1{margin:0 0 10px;font-size:clamp(1.4rem,3.4vw,2.1rem);line-height:1.2}
.tool-hero p{margin:0 auto;max-width:640px;color:var(--bh-muted)}
.tool-card{padding:18px 20px;margin-bottom:22px}
.tool-generator h2{margin:0 0 12px;font-size:.95rem;text-align:center;letter-spacing:.04em}
.tool-generator-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px}
.tool-complexity{display:flex;align-items:center;gap:10px;font-size:.88rem;color:var(--bh-muted)}
.tool-switch{display:inline-flex;align-items:center;gap:8px;font-size:.88rem;cursor:pointer}
.tool-switch small{color:var(--bh-faint)}
.tool-switch input{position:absolute;opacity:0;width:1px;height:1px}
.tool-switch span{position:relative;width:40px;height:22px;border-radius:999px;background:var(--bh-line-2);transition:background .15s;flex:none}
.tool-switch span::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;transition:transform .15s}
.tool-switch input:checked+span{background:var(--bh-green)}
.tool-switch input:checked+span::after{transform:translateX(18px)}
.tool-switch input:focus-visible+span{outline:3px solid var(--bh-cyan);outline-offset:2px}
.tool-seg{display:flex;flex-wrap:wrap;border:2px solid var(--bh-line-2);border-radius:var(--bh-radius);overflow:hidden;background:var(--bh-field)}
.tool-seg button{flex:1 1 auto;min-width:86px;padding:.7rem .8rem;border:0;border-right:1px solid var(--bh-line);background:transparent;color:var(--bh-muted);font:800 .76rem/1 var(--bh-font);letter-spacing:.06em;text-transform:uppercase;cursor:pointer}
.tool-seg button:last-child{border-right:0}
.tool-seg button:hover{background:var(--bh-panel-2);color:var(--bh-text)}
.tool-seg button[aria-checked="true"]{background:var(--bh-green);color:#04170b}
.tool-seg button:focus-visible{outline:3px solid var(--bh-cyan);outline-offset:-3px}
.tool-form{display:block}
.tool-label{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:18px 0 8px;font-weight:800}
.tool-form textarea,.tool-result textarea{width:100%;font:500 .95rem/1.5 var(--bh-mono,ui-monospace,Consolas,monospace);color:var(--bh-text);background:var(--bh-field);border:2px solid var(--bh-line-2);border-radius:var(--bh-radius);padding:.8rem .9rem;resize:vertical}
.tool-form textarea:focus,.tool-result textarea:focus{outline:0;border-color:var(--bh-green)}
.tool-count{margin:4px 0 0;text-align:right;color:var(--bh-faint);font-size:.75rem}
.tool-hint{margin:16px 0;text-align:center;color:var(--bh-muted);font-style:italic;font-size:.88rem}
.tool-error{text-align:center;min-height:1.2em}
.tool-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:34px}
.tool-facts div{padding:16px;border:2px solid var(--bh-line);border-radius:var(--bh-radius);background:var(--bh-panel)}
.tool-facts strong{color:var(--bh-green);font-size:.92rem}.tool-facts p{margin:6px 0 0;color:var(--bh-muted);font-size:.84rem;line-height:1.5}
.tool-result{text-align:center;padding:30px 24px;margin-top:30px}
.tool-result h1{margin:14px 0 10px;font-size:clamp(1.3rem,3vw,1.8rem)}
.tool-result>p{color:var(--bh-muted);max-width:620px;margin:0 auto 18px}
.tool-result .ap-link-row{display:flex;gap:10px;margin:0 auto 6px;max-width:720px}
.tool-result .ap-link-row input{flex:1;min-width:0;font:500 .82rem ui-monospace,Consolas,monospace;color:var(--bh-text);background:var(--bh-field);border:2px solid var(--bh-line-2);border-radius:var(--bh-radius);padding:.6rem .7rem}
.tool-result .ap-actions{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-top:14px}
.tool-result .ap-done-mark{display:inline-grid;place-items:center;width:64px;height:64px;background:var(--bh-grad);color:#04170b;border-radius:var(--bh-radius);font-size:2rem;font-weight:900}
.tool-page .ap-form-error{color:var(--bh-danger);font-weight:700}
@media (max-width:720px){.tool-facts{grid-template-columns:1fr}.tool-generator-row{flex-direction:column;align-items:stretch}.tool-complexity{flex-direction:column;align-items:stretch}.tool-result .ap-link-row{flex-direction:column}}

/* Branding */
.brand-hero{padding:70px 16px 76px;text-align:center;background:linear-gradient(120deg,rgba(31,122,61,.85),rgba(20,60,110,.85)),url('/assets/hero-world.jpg') center/cover}
.brand-hero h1{margin:0 0 12px;font-size:clamp(1.8rem,4vw,2.6rem)}
.brand-hero p{margin:0 auto;max-width:560px;color:#d9ecff}
.brand-crumb{width:max-content;margin:-16px auto 0;padding:8px 16px;background:var(--bh-panel);border:2px solid var(--bh-line);border-radius:var(--bh-radius);font-size:.72rem;font-weight:800;letter-spacing:.08em;position:relative}
.brand-crumb a{color:var(--bh-text);text-decoration:none}
.brand-main section{margin-top:56px;text-align:center}
.brand-main h2{margin:0 0 10px;font-size:1.5rem}
.brand-lead{margin:0 auto 26px;max-width:560px;color:var(--bh-muted);font-size:.92rem}
.brand-colours{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.brand-colour{display:flex;flex-direction:column;align-items:center;gap:4px;padding:14px 6px;border:2px solid transparent;border-radius:var(--bh-radius);background:transparent;color:var(--bh-text);font-family:inherit;cursor:pointer}
.brand-colour:hover,.brand-colour:focus-visible{border-color:var(--bh-line-2);background:var(--bh-panel);outline:0}
.brand-swatch{width:56px;height:56px;border-radius:50%;border:2px solid rgba(255,255,255,.18);margin-bottom:8px}
.brand-colour strong{font-size:.9rem}.brand-colour small{color:var(--bh-muted);font-size:.74rem}.brand-colour em{color:var(--bh-faint);font-size:.7rem;font-style:normal}
.c-54f472{background:#54f472}.c-549eb6{background:#549eb6}.c-6fd6ea{background:#6fd6ea}.c-1f7a3d{background:#1f7a3d}.c-101a2b{background:#101a2b}.c-070d17{background:#070d17}
.brand-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:18px}
.brand-card{width:min(300px,100%);padding:12px 12px 16px;background:var(--bh-panel);border:2px solid var(--bh-line);border-radius:var(--bh-radius)}
.brand-preview{display:grid;place-items:center;height:150px;border-radius:var(--bh-radius);background-color:#18243a;background-image:linear-gradient(45deg,#1f2e49 25%,transparent 25%,transparent 75%,#1f2e49 75%),linear-gradient(45deg,#1f2e49 25%,transparent 25%,transparent 75%,#1f2e49 75%);background-size:16px 16px;background-position:0 0,8px 8px}
.brand-preview img{max-width:70%;max-height:126px}
.brand-card h3{margin:12px 0 2px;font-size:1rem}.brand-card p{margin:0 0 12px;color:var(--bh-muted);font-size:.76rem}
.brand-all p{margin:10px 0 0;color:var(--bh-faint);font-size:.76rem}
.brand-main .brand-rules{display:grid;grid-template-columns:1fr 1fr;gap:18px;text-align:left}
.brand-rule{padding:18px 20px;background:var(--bh-panel);border:2px solid var(--bh-line);border-radius:var(--bh-radius)}
.brand-rule h3{margin:0 0 10px;font-size:.92rem}.brand-rule.ok h3,.brand-rule.ok li span{color:var(--bh-green)}.brand-rule.no h3,.brand-rule.no li span{color:var(--bh-danger)}
.brand-rule ul{margin:0;padding:0;list-style:none}.brand-rule li{display:flex;gap:10px;padding:5px 0;font-size:.88rem;color:var(--bh-muted)}
.brand-contact{margin-top:40px;text-align:center;color:var(--bh-muted)}
@media (max-width:720px){.brand-colours{grid-template-columns:repeat(3,1fr)}.brand-main .brand-rules{grid-template-columns:1fr}}