/* Shared site shell: header + footer. Class prefix ks- avoids clashes with page CSS. */
.ks-header{position:sticky;top:0;z-index:100;background:var(--tabbar-bg,rgba(248,250,252,.78));backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--color-border-subtle,#E2E8F0);font-family:var(--font-body,"Manrope","Segoe UI",system-ui,sans-serif)}
.ks-nav{max-width:1200px;margin:0 auto;padding:0 24px;height:64px;display:flex;align-items:center;gap:18px}
.ks-brand{display:flex;align-items:center;gap:9px;text-decoration:none;color:var(--color-text,#0F172A)}
.ks-brand .ks-mark{width:26px;height:26px;color:var(--color-brand,#E86B5F)}
.ks-brand b{font-family:var(--font-display,"Space Grotesk","Manrope",system-ui,sans-serif);font-weight:700;font-size:1.16rem;letter-spacing:-.01em}
.ks-links{display:flex;align-items:center;gap:24px;margin-left:18px}
.ks-links>a,.ks-menu>summary{font-size:.88rem;font-weight:600;color:var(--color-text-secondary,#334155);text-decoration:none;transition:color .2s;cursor:pointer;list-style:none}
.ks-links>a:hover,.ks-links>a[aria-current="page"],.ks-menu>summary:hover{color:var(--color-primary,#B14842)}
/* Reset page-level details/summary rules (internal.css FAQ styles) so the menu reads as a plain header link. */
.ks-menu{position:relative;border:0;background:none;padding:0;margin:0;border-radius:0}
.ks-menu>summary{padding:0;display:block;font-family:inherit;line-height:inherit}
.ks-menu>summary::-webkit-details-marker{display:none}
.ks-menu>summary::after{content:"▾";font-size:.7rem;margin-left:5px;opacity:.7}
.ks-menu>ul{position:absolute;top:calc(100% + 10px);left:0;min-width:170px;margin:0;padding:6px;list-style:none;background:var(--color-surface,#fff);border:1px solid var(--color-border-subtle,#E2E8F0);border-radius:14px;box-shadow:0 14px 30px rgba(15,23,42,.12);z-index:110}
.ks-menu>ul a{display:block;padding:8px 12px;border-radius:9px;font-size:.88rem;font-weight:600;color:var(--color-text-secondary,#334155);text-decoration:none;white-space:nowrap}
.ks-menu>ul a:hover{background:var(--glass-fill,rgba(241,245,249,.8));color:var(--color-primary,#B14842)}
.ks-menu>ul a[aria-current="page"]{color:var(--color-primary,#B14842)}
.ks-lang>ul{left:auto;right:0}
.ks-right{margin-left:auto;display:flex;align-items:center;gap:12px}
.ks-btn-app{display:inline-flex;align-items:center;gap:8px;padding:8px 15px 8px 13px;border-radius:999px;background:linear-gradient(135deg,var(--primary-600,#E86B5F),var(--primary-800,#B14842));color:#fff;text-decoration:none;box-shadow:var(--shadow-primary,0 10px 24px rgba(177,72,66,.33));font-weight:800;font-size:.85rem;white-space:nowrap;transition:transform .2s,box-shadow .2s}
.ks-btn-app:hover{transform:translateY(-2px);box-shadow:var(--shadow-primary-hover,0 16px 28px rgba(177,72,66,.34))}
.ks-btn-app:active{transform:translateY(0)}
.ks-btn-app svg{width:20px;height:20px;flex:none}
.ks-lines{display:flex;flex-direction:column;align-items:flex-start;line-height:1.05}
.ks-lines small{font-size:.62rem;font-weight:600;opacity:.85}
@media(max-width:920px){.ks-links>a:not(:first-of-type),.ks-links>.ks-menu{display:none}.ks-links{margin-left:0}}
@media(max-width:600px){.ks-nav{gap:10px;padding:0 14px}}
/* Localized headers: labels run longer than the English ones, so on phones the tools link moves to the page/footer and the app label may wrap to two lines instead of pushing the button off-screen. */
@media(max-width:600px){html:not([lang^="en"]) .ks-links{display:none}html:not([lang^="en"]) .ks-right{min-width:0}html:not([lang^="en"]) .ks-btn-app{white-space:normal;line-height:1.1;text-align:left;flex-shrink:1;min-width:0;font-size:.8rem;padding:8px 13px 8px 11px}html:not([lang^="en"]) .ks-lang>summary{white-space:nowrap}}

.ks-footer{border-top:1px solid var(--color-border-subtle,#E2E8F0);margin-top:56px;padding:40px 0 24px;position:relative;z-index:1;font-family:var(--font-body,"Manrope","Segoe UI",system-ui,sans-serif);color:var(--color-text-tertiary,#475569)}
.ks-footer-in{max-width:1200px;margin:0 auto;padding:0 24px;display:grid;grid-template-columns:minmax(220px,1.4fr) repeat(auto-fit,minmax(130px,1fr));gap:28px}
.ks-footer-brand{display:flex;flex-direction:column;gap:8px}
.ks-footer-brand .ks-mark{width:22px;height:22px;color:var(--color-brand,#E86B5F)}
.ks-footer-brand b{font-family:var(--font-display,"Space Grotesk","Manrope",system-ui,sans-serif);font-weight:700;font-size:1.05rem;color:var(--color-text,#0F172A)}
.ks-footer-brand span{font-size:.85rem;line-height:1.5}
.ks-col{display:flex;flex-direction:column;gap:8px}
.ks-col h2{margin:0 0 4px;font-size:.78rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--color-text,#0F172A)}
.ks-col a{font-size:.85rem;color:var(--color-text-tertiary,#475569);text-decoration:none}
.ks-col a:hover{color:var(--color-primary,#B14842)}
.ks-footer-bottom{max-width:1200px;margin:28px auto 0;padding:16px 24px 0;border-top:1px solid var(--color-border-subtle,#E2E8F0);font-size:.76rem}
@media(max-width:720px){.ks-footer-in{grid-template-columns:repeat(2,1fr)}.ks-footer-brand{grid-column:1/-1}}

.ks-crumbs{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:.8rem;color:var(--color-text-tertiary,#475569);padding:22px 0 4px}
.ks-crumbs a{color:inherit;text-decoration:none}
.ks-crumbs a:hover{color:var(--color-primary,#B14842)}