/* Shared navigation only. Original brand artwork/symbols and other page typography are retained. */
html{scroll-padding-top:108px}
header.site-navigation{position:sticky;top:0;z-index:100;height:auto;min-height:76px;background:var(--paper,#f8f8f2);border-bottom:1px solid #e0e6dd;box-shadow:0 3px 16px #233a310a;container-type:inline-size;container-name:sft-navigation}
.site-navigation .header-inner{height:auto;min-height:76px;display:flex;align-items:center;justify-content:space-between;flex-wrap:nowrap;gap:20px;padding-block:12px}
.site-navigation .brand{min-width:0;flex:0 1 auto;gap:9px}
.site-navigation .brand-mark{flex:none}
.site-navigation .desktop-nav{display:flex;align-items:center;justify-content:center;gap:20px;flex:1 1 auto;font-size:.9375rem;line-height:1.4}
.site-navigation .desktop-nav a{min-height:44px;display:inline-flex;align-items:center;padding-block:10px;white-space:nowrap}
.site-navigation a[aria-current=page]{color:#124e3c;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px;font-weight:600}
.site-navigation .header-cta{min-height:44px;flex:none;padding:11px 15px;gap:8px;white-space:normal;font-size:.875rem;line-height:1.4;text-align:center}
.site-navigation .menu-toggle{display:none;flex:none;min-width:44px;min-height:44px;width:44px;height:44px;padding:10px;align-items:center;justify-content:center;flex-direction:column;gap:5px;border:1px solid #cbd8ce;border-radius:6px;background:#fff}
.site-navigation .menu-toggle span{display:block;width:20px;height:2px;background:#154e3a}
.site-navigation #mobile-nav{position:static;left:auto;right:auto;top:auto;width:100%;max-height:calc(100dvh - 145px);overflow-y:auto;overscroll-behavior:contain;padding:8px 24px 16px;background:var(--paper,#f8f8f2);border-top:1px solid #e0e6dd;box-shadow:none}
.site-navigation #mobile-nav[hidden]{display:none!important}
.site-navigation #mobile-nav a{display:flex;align-items:center;min-height:44px;padding:10px 12px;border-radius:5px;font-size:.9375rem;line-height:1.4}
.site-navigation #mobile-nav a:hover{background:#eaf2e9}
.site-navigation :is(a,button):focus-visible{outline:3px solid #387b5e;outline-offset:3px}
@media(max-width:1100px){.site-navigation .header-inner{gap:12px}.site-navigation .desktop-nav{gap:12px}.site-navigation .brand{font-size:23px}}
@media(max-width:980px){.site-navigation .header-inner{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:12px}.site-navigation .desktop-nav{display:none}.site-navigation .menu-toggle{display:flex}.site-navigation .brand{font-size:clamp(20px,3vw,25px)}.site-navigation .header-cta{font-size:.875rem}.site-navigation .brand>span:last-child{min-width:0;overflow-wrap:anywhere;white-space:normal}}
@media(max-width:520px){html{scroll-padding-top:154px}.site-navigation .header-inner{width:calc(100% - 28px);grid-template-columns:minmax(0,1fr) 44px;gap:10px;min-height:0;padding-block:10px}.site-navigation .brand{font-size:23px;gap:8px}.site-navigation .menu-toggle{grid-column:2;grid-row:1}.site-navigation .header-cta{grid-column:1/-1;grid-row:2;width:100%;min-height:44px}.site-navigation #mobile-nav{padding-inline:14px}.site-navigation .brand-mark{width:32px;height:36px}}
@container sft-navigation (max-width:980px){.site-navigation .header-inner{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:12px;flex-wrap:nowrap}.site-navigation .desktop-nav{display:none}.site-navigation .menu-toggle{display:flex}.site-navigation .brand{font-size:clamp(20px,3vw,25px)}.site-navigation .brand>span:last-child{min-width:0;white-space:normal;overflow-wrap:anywhere}}
@container sft-navigation (max-width:520px){.site-navigation .header-inner{width:calc(100% - 28px);grid-template-columns:minmax(0,1fr) 44px;gap:10px;min-height:0;padding-block:10px}.site-navigation .brand{font-size:23px;gap:8px}.site-navigation .menu-toggle{grid-column:2;grid-row:1}.site-navigation .header-cta{grid-column:1/-1;grid-row:2;width:100%;min-height:44px}.site-navigation #mobile-nav{padding-inline:14px}.site-navigation .brand-mark{width:32px;height:36px}}
@media(prefers-reduced-motion:reduce){.site-navigation *{scroll-behavior:auto!important;transition:none!important}}
/* Existing homepage illustration: preserve normal design, reflow only when
   enlarged text/zoom leaves under220px of actual comparison content width.
   Prevent its old intrinsic grid minimum from widening the whole page. */
#examples.comparison-section{container-type:inline-size;container-name:sft-home-comparison}
@container sft-home-comparison (max-width:220px){
 #examples .comparison-board{grid-template-columns:minmax(0,1fr)}
 #examples .example-side{min-width:0;padding:12px}
 #examples .example-label{flex-wrap:wrap;gap:6px;min-width:0}
 #examples .example-label>span:last-child{margin-left:0;overflow-wrap:anywhere}
 #examples .paper{min-width:0;width:100%;padding:12px;transform:none;overflow-wrap:anywhere}
 #examples .paper table{table-layout:fixed;width:100%}
 #examples .paper th,#examples .paper td{overflow-wrap:anywhere}
 #examples .comparison-bottom{flex-wrap:wrap;min-width:0}
 #examples .comparison-bottom>span{min-width:0;max-width:100%;flex-wrap:wrap}
}