/* Loaded after styles.css and styles-dark.css on every page; shared refinements for both themes.
   Dark-only values are scoped with html[data-site-theme="dark"], which the theme script sets. */

/* FAQ and Security share one tighter row rhythm; certification text lines up with the FAQ text above it */
.faq2,.sec2{--row:48px}
@media (max-width:960px){.faq2,.sec2{--row:44px}}
.faq2 .faq summary{padding:calc((var(--row) - 24px) / 2) 0;line-height:24px}
.faq2 .faq .ans{padding:2px 0 16px 42px}
.certs{gap:0}
.certs li{min-height:var(--row);gap:12px}
.certs svg{width:30px;height:30px;flex:0 0 30px;stroke-width:2}
/* FAQ to Security uses the same gap as Security to the Book demo band */
#faq.section{padding-bottom:clamp(32px,4vw,56px)}
#security.section{padding-top:clamp(24px,3vw,40px)}

/* Footer globe: a clean, sharp edge right at the globe's rim (no dark ring, no blur).
   The ellipse is a circle in the 1920x562 render: centre (960, 1368.6), radius 1312, sized in percent so it scales with the video. */
.foot .footvid{
  -webkit-mask-image:radial-gradient(ellipse 68.3333% 233.452% at 50% 243.523%,#000 99.85%,transparent 100%);
  mask-image:radial-gradient(ellipse 68.3333% 233.452% at 50% 243.523%,#000 99.85%,transparent 100%)}
.foot .footimg{
  -webkit-mask-image:radial-gradient(ellipse 68.3333% 233.452% at 50% 243.523%,#000 99.85%,transparent 100%);
  mask-image:radial-gradient(ellipse 68.3333% 233.452% at 50% 243.523%,#000 99.85%,transparent 100%)}

/* Footer globe video (the in-globe loop) and its phone still: a lighter grey on the cream page so the land and the drawing read clearly */
html:not([data-site-theme="dark"]) .foot .footvid,html:not([data-site-theme="dark"]) .foot .footimg{filter:grayscale(1) brightness(.92) contrast(1.06)}

/* Footer globe: live project tags (footer-tags.js reads footer-projects.json), clipped to the same dome as the video */
.foot .foottags{position:absolute;left:0;right:0;bottom:0;top:auto;width:100%;height:auto;aspect-ratio:1920/562;z-index:1;pointer-events:none;container-type:inline-size;opacity:0;
  -webkit-mask-image:radial-gradient(ellipse 68.3333% 233.452% at 50% 243.523%,#000 99.85%,transparent 100%);
  mask-image:radial-gradient(ellipse 68.3333% 233.452% at 50% 243.523%,#000 99.85%,transparent 100%)}
.foot .foottags svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.foot .foottags .dot{fill:#fff;stroke:#121212;stroke-width:1.4;vector-effect:non-scaling-stroke}
.foot .foottags .lead{fill:none;stroke:#121212;stroke-width:1;vector-effect:non-scaling-stroke;transition:opacity .25s}
.foot .ftag{position:absolute;white-space:nowrap;font-family:var(--font);font-size:max(10.5px,.72cqw);line-height:1.3;transition:opacity .25s}
.foot .ftag.l{transform:translate(.25cqw,-50%)}
.foot .ftag.r{transform:translate(calc(-100% - .25cqw),-50%)}
.foot .ftag .box{font-size:1em;line-height:1.3;display:flex;flex-direction:column;gap:.15em;padding:.45em .75em;background:rgba(255,255,255,.95);border:1px solid rgba(18,18,18,.3);border-radius:3px;color:#121212;text-decoration:none;pointer-events:auto}
.foot .ftag b{font-weight:600;letter-spacing:.04em}
.foot .ftag b i{font-style:normal;margin-left:.7em;padding:.08em .45em;background:#121212;color:#fff;border-radius:2px;font-size:.8em;letter-spacing:.08em;vertical-align:.1em}
.foot .ftag .sub{font-size:.92em;color:#4d4a44}
html[data-site-theme="dark"] .foot .foottags .dot{fill:#121212;stroke:#fff}
html[data-site-theme="dark"] .foot .foottags .lead{stroke:#fff}
html[data-site-theme="dark"] .foot .ftag .box{background:rgba(14,14,14,.92);border-color:rgba(255,255,255,.3);color:#fff}
html[data-site-theme="dark"] .foot .ftag b i{background:#fff;color:#000}
html[data-site-theme="dark"] .foot .ftag .sub{color:#b3b3b3}
@media (max-width:960px){.foot .foottags{left:-30vw;right:auto;width:160vw}}
@media (max-width:700px){.foot .ftag,.foot .foottags .lead{display:none!important}}

/* Footer mark (V3): a real monospace text grid of C, &, I, D on square cells; footmark.js fills it */
.foot .footmark{position:relative;overflow:hidden;cursor:crosshair}
.foot .fm-grid{position:absolute;left:0;top:0;margin:0;padding:0;font-family:ui-monospace,"SF Mono",SFMono-Regular,Menlo,"Geist Mono",Consolas,monospace;font-weight:500;white-space:pre;color:rgba(18,18,18,.78);font-variant-ligatures:none;font-feature-settings:"liga" 0,"calt" 0;user-select:none;-webkit-user-select:none;text-rendering:geometricPrecision}
.foot .fm-grid div{height:var(--lh);line-height:var(--lh);overflow:visible}
.foot .fm-grid .h{color:inherit}   /* hover cycling keeps the same ink */
.foot .fm-probe{position:absolute;visibility:hidden;white-space:pre;font-family:ui-monospace,"SF Mono",SFMono-Regular,Menlo,"Geist Mono",Consolas,monospace;font-weight:500;letter-spacing:0;font-variant-ligatures:none}
html[data-site-theme="dark"] .foot .fm-grid{color:#c2c1bb}