/* Shared geometry keeps navigation in the same position on every public page. */
:root { scrollbar-gutter:stable; }
.site-header { font-family:"Nunito Sans","Noto Sans Sinhala","Segoe UI",sans-serif; font-weight:400; line-height:1.5; }
:root .site-header .shell.nav { width:min(1200px,calc(100% - 48px)); margin:0 auto; display:grid; grid-template-columns:220px minmax(0,1fr) 44px 44px; gap:12px; grid-template-rows:76px; min-height:76px; padding:0; }
:root .site-header .brand { width:200px; min-width:0; margin:0; padding:0; }
:root .site-header .brand-logo-image { display:block; width:200px; max-width:100%; height:auto; aspect-ratio:3; object-fit:contain; }
:root .site-header .nav-links { position:relative; grid-column:2; grid-row:1; display:flex; align-items:center; justify-content:center; gap:clamp(8px,1.5vw,24px); min-height:76px; padding:0; border:0 !important; border-radius:0; width:100%; background:transparent !important; box-shadow:none; flex-wrap:nowrap; overflow:visible; }
:root .site-header .nav-links a { min-height:76px; padding:0; display:inline-flex; align-items:center; justify-content:center; font-size:18px; font-weight:600; flex:0 0 74px; line-height:1.5; white-space:nowrap; border-radius:0; }
:root .site-header .nav-links a::after,:root .site-header .nav-links a::before { content:none; }
:root .site-header .nav-toggle { display:none !important; }
:root .site-header .theme-toggle { grid-column:3; grid-row:1; width:44px; height:44px; min-height:44px; padding:0; gap:0; border-radius:50%; }
.theme-toggle svg { width:22px; height:22px; flex-shrink:0; }
.theme-toggle .theme-sun { display:none; }
:root[data-theme="dark"] .theme-toggle .theme-sun { display:block; }
:root[data-theme="dark"] .theme-toggle .theme-moon { display:none; }
:root .site-header .header-auth { grid-column:4; grid-row:1; width:44px; min-width:44px; height:44px; justify-content:center; }
:root .site-header .avatar-trigger { display:flex; width:44px; height:44px; min-width:44px; padding:0; border-radius:50%; border:1px solid var(--line); background:var(--soft); justify-content:center; box-shadow:none; }
:root .site-header .avatar-bubble { width:40px; height:40px; border-radius:50%; background:transparent; color:var(--ink); overflow:hidden; }
:root .site-header .avatar-bubble svg { width:23px; height:23px; }
:root .site-header .avatar-name { display:none; }
.header-auth[data-auth-state="guest"] :is(.header-signed-action,#headerAvatarInitials,#headerAvatarImage) { display:none !important; }
.header-auth[data-auth-state="signed-in"] :is(.header-guest-action,#headerGuestIcon) { display:none !important; }
:root .site-header .avatar-menu { right:auto; left:calc(50% + var(--account-menu-offset,0px)); top:calc(100% + 10px); min-width:0; width:240px; max-width:calc(100vw - 32px); visibility:hidden; transform:translate(-50%,-8px); }
:root .site-header .avatar-menu.is-open { visibility:visible; transform:translate(-50%,0); }
:root .site-header .avatar-menu-item { text-align:left; text-decoration:none; width:100%; }
:root .site-header .header-auth[data-auth-state="guest"] .avatar-menu { width:176px; padding:6px; border-radius:12px; }
:root .site-header .header-guest-action { min-height:40px; padding:0 10px; gap:10px; font-size:14px; line-height:1.4; border-radius:8px; }
:root .site-header .header-guest-action::before { content:""; width:18px; height:18px; flex:0 0 18px; background:currentColor; mask:var(--account-action-icon) center / contain no-repeat; }
/* Older cached homepage scripts may still inject their own action icon. */
:root .site-header .header-guest-action > :is(svg,i[data-lucide]) { display:none; }
#headerSignInBtn { --account-action-icon:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M14 3h5a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-5M3 12h12m-4-4 4 4-4 4"/%3E%3C/svg%3E'); }
#headerSignUpBtn { --account-action-icon:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"%3E%3Ccircle cx="9" cy="7" r="4"/%3E%3Cpath d="M2 21v-2a7 7 0 0 1 14 0v2M19 8v6m-3-3h6"/%3E%3C/svg%3E'); }
.nav-indicator { position:absolute; left:0; bottom:-1px; height:3px; width:0; background:var(--pink); border-radius:3px; pointer-events:none; opacity:0; transition:transform 420ms cubic-bezier(.22,1,.36,1),width 420ms cubic-bezier(.22,1,.36,1),opacity 180ms; }
.pricing-page-heading { text-align:center; padding:28px 0 4px; }
.pricing-page-heading h1 { color:var(--ink); margin:0 0 12px; font-size:clamp(30px,4vw,42px); }
.pricing-page-heading p { color:var(--muted); line-height:1.65; }
/* Cross-fade the complete palette, including gradients, on a theme change. */
::view-transition-old(root) { animation:theme-fade-out 360ms ease both; }
::view-transition-new(root) { animation:theme-fade-in 360ms ease both; }
@keyframes theme-fade-out { to { opacity:0; } }
@keyframes theme-fade-in { from { opacity:0; } }
:root.theme-transitioning *, :root.theme-transitioning *::before, :root.theme-transitioning *::after { transition:background-color 360ms ease,color 360ms ease,border-color 360ms ease,box-shadow 360ms ease !important; }
/* Match the wide-screen content shell instead of retaining the desktop cap. */
@media(min-width:2200px) {
 :root .site-header { --header-logo-width:290px; --header-height:88px; --header-control-size:48px; }
 :root .site-header .shell.nav { width:min(2000px,calc(100% - 64px)); grid-template-columns:calc(var(--header-logo-width) + 20px) minmax(0,1fr) var(--header-control-size) var(--header-control-size); gap:16px; grid-template-rows:var(--header-height); min-height:var(--header-height); align-items:center; }
 :root .site-header .brand, :root .site-header .brand-logo-image { width:var(--header-logo-width); }
 :root .site-header .nav-links { min-height:var(--header-height); gap:32px; }
 :root .site-header .nav-links a { min-height:var(--header-height); font-size:20px; flex-basis:90px; }
 :root .site-header .theme-toggle, :root .site-header .header-auth, :root .site-header .avatar-trigger { width:var(--header-control-size); min-width:var(--header-control-size); height:var(--header-control-size); min-height:var(--header-control-size); }
 :root .site-header .avatar-bubble { width:44px; height:44px; }
}
@media(min-width:3200px) {
 :root .site-header { --header-logo-width:320px; --header-height:108px; --header-control-size:52px; }
 :root .site-header .shell.nav { width:min(2400px,calc(100% - 80px)); gap:20px; }
 :root .site-header .nav-links { gap:40px; }
 :root .site-header .nav-links a { font-size:22px; flex-basis:100px; }
 :root .site-header .avatar-bubble { width:48px; height:48px; }
 :root .site-header .theme-toggle svg { width:26px; height:26px; }
 :root .site-header .avatar-bubble svg { width:27px; height:27px; }
}
@media(min-width:2560px) and (min-aspect-ratio:21/9) {
 :root .site-header .shell.nav { width:min(2200px,calc(100% - 80px)); }
}
@media(max-width:820px) {
 :root .site-header .shell.nav { width:calc(100% - 32px); grid-template-columns:minmax(0,1fr) 44px 44px; gap:8px; grid-template-rows:58px 44px; min-height:118px; padding:8px 0 0; }
 :root .site-header .brand { width:170px; }
 :root .site-header .brand-logo-image { width:170px; }
 :root .site-header .theme-toggle { grid-column:2; }
 :root .site-header .header-auth { grid-column:3; }
 :root .site-header .nav-links { grid-column:1 / -1; grid-row:2; min-height:44px; gap:0; justify-content:space-between; }
 :root .site-header .nav-links a { min-height:44px; font-size:16px; flex:1; }
}
@media(prefers-reduced-motion:reduce) {
 .nav-indicator { transition:none; }
 ::view-transition-old(root),::view-transition-new(root) { animation:none; }
 :root.theme-transitioning * { transition:none !important; }
}